How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #21 : ทำกรอบ/แผ่นรองได โดยใช้ตาราง (โปรแกรมดรีมฯ)

โปรแกรมที่ใช้ ดรีม
ระดับความยาก 4/5
บทความที่ควรอ่านก่อน แนะนำการใช้ดรีมเบื้องต้น - เซตค่า จะอ่านเรื่อง แนะนำการใช้ดรีมเบื้องต้น - แทรกตาราง ก่อนก็ดี เพราะอันนี้คล้ายๆ เป็น workshop ของการใช้ตาราง

ทำกรอบแบบในไอดีเราอ่ะค่า คราวนี้เราใช้ดรีมทำนะ อาจดูยุ่งยากสักนิด แต่ก็น่าเรียนรู้ไว้นะคะ เป็นพื้นฐานการทำเว็บเลยนะนี่ สำหรับคนไม่มีโปรแกรมนี้ คราวหน้าเราจะมาลงวิธีทำแบบอื่นให้ค่ะ

ทำกรอบโดยใช้ Dreamwever (แบบตาราง)

1. เริ่มแรกก็จัดการเตรียมรูปที่จะใช้ทำกรอบก่อน เราใช้ชอปทำจ้า ส่วนวิธีทำ ถ้าสนใจจะเอามาลงให้ดูนะคะ ตอนนี้เอาแบบสำเร็จไปก่อนละกัน อิอิ

รูปที่เป็นเหยื่อ

เป็นรูปที่ตกแต่งมาแล้ว สังเกตว่าเราเว้นที่ว่างไว้สำหรับใส่ตัวหนังสือด้วย โดยใช้หลักการเดียวกับทำบีจี คือ เน้นให้ตัวหนังสือบนนี้อ่านง่ายไว้ก่อน เพื่อความสบายตาของผู้เยี่ยมชม อันนี้เราทำเป็นสีชมพูเรียบๆ

2. เปิดดรีมขึ้นมา ที่เราใช้อยู่เป็นเวอร์ชัน 8 ค่ะ แต่ถ้าใครมีเวอร์ก่อนหน้านี้มันก็ไม่ค่อยแตกต่างเท่าไหร่หรอก ลองไถๆ ไปดูนะคะ ฮา...

3. ไปที่เมนู File > New... ให้เลือกเป็น Basic page > HTML เราจะได้หน้าต่างพื้นที่ทำงานขึ้นมา

4. ตรงเลือกมุมมอง ให้เลือกรูปแบบการทำงานเป็น Design

ถ้าใครหาปุ่มไม่เจอ ไปที่ View > Design ก็ได้ค่ะ โหมดนี้เราจะเห็นเป็นที่จะแสดงในเว็บจริงๆ ไม่ใช่ html ส่วนโหมด code จะเป็น html และ split จะแบ่งหน้าจอให้แสดงทั้งโค๊ดและหน้าจอที่แสดงในเว็บ ปกติเราจะเลือก Design สลับกับ Code เอาค่ะ เลยไม่ค่อยได้ใช้โหมดนี้

5. กดปุ่ม เพื่อแทรกตาราง หรือไปที่ Insert > Table ก็ได้ค่ะ

โปรแกรม จะขึ้นรายละเอียดตารางมาให้เซตค่า

Rows จำนวนแถวแนวนอน
Columns จำนวนแถวแนวตั้ง
Table width ความกว้างตาราง ให้ตั้งค่าเท่ากับความกว้างรูปของเรา
Border ขนาดกรอบ เซตเป็น 0
Padding/ Spacing อันนี้ลองเล่นดูวันอื่นก็ได้ค่ะ มันคือระยะเว้นของตารางน่ะ ตอนนี้เซตเป็น 0 ก่อน

สำหรับ Rows กับ Columns ขึ้นอยู่กับรูปที่เราเตรียมมาค่ะ ลองดูตัวอย่างของเราไปก่อนก็ได้ วิธีง่ายๆ ก็คือกำหนดส่วนที่จะให้ตัวหนังสืออยู่ไว้ก่อน แล้วลากกรอบสี่เหลี่ยมไว้ (คิดไว้ในใจก็ได้ค่ะ ไม่ต้องวาดจริงๆ หรอก) จากนั้นเราก็ลากเส้นตรง ต่อแต่ละด้านของกรอบให้สุดภาพ อธิบายไม่ถูกแฮะ ดูรูปละกัน เส้นสีแดงคือเส้นที่จะแบ่งตาราง

สมมุติว่าจะให้ตัวหนังสืออยู่ในช่องที่แรเงาสีแดง จากตัวอย่างนี้เราจะแบ่งได้ 6 ช่อง เป็น 3 row 2 col ลองแบ่งดูน่อ (ได้สูงสุดน่าจะอยู่ที่ 3x3 ช่อง คือช่องตัวหนังสืออยู่กึ่งกลางพอดี) คราวนี้เราเกิดความคิดว่า 6 ช่องมันเปลือง มีตัวการ์ตูนอยู่ข้างเดียว ใช้แค่ 2 ช่องแล้วจัดตัวหนังสือให้อยู่ตรงกลางก็น่าจะพอ เลยลากใหม่ซะ เป็น 1 row 2 col

การลดช่องแบบนี้คงต้องอาศัยประสบการณ์เล็กน้อย ไม่งั้นตัวหนังสืออาจไม่ไปอยู่ในจุดที่ต้องการได้ ถ้ากลัวไม่ได้อย่างที่ต้องการก็อย่าพึ่งลองดีกว่าค่ะ

6. เลือกที่ตาราง (ย้ำ ทั้งตารางนะคะ ไม่ใช่แค่ช่อง) แล้วดูที่หน้าต่าง propeties ด้านล่าง เราจะปรับให้มันแสดงคุณสมบัติทั้งหมดออกมาโดยคลิกตรงที่ลูกศรชี้ ค่ะ

เราก็จะได้แบบนี้

7. ตรง H ให้เซตเป็นความสูงของรูปของเรา โดยให้มีหน่วยเป็น pixels ตรง Bg image หลังช่องจะมีรูปโฟลเดอร์อยู่ พอกดจะมีให้เลือกที่อยู่ไฟล์รูปค่ะ เลือกเสร็จก็กดตกลง เราจะได้ตารางที่มีรูปของเราเป็นบีจีมา

8. เราจะเห็นเส้นประแสดงขอบเขตของแต่ละช่อง ให้เราเอาเมาส์ไปชี้ตรงนั้น แล้วกดค้างแล้วลากไปมาดู เราจะสามารถปรับขนาดช่องได้

9. ปรับขนาดให้เข้ากับรูปของเราตามเส้นที่ลาดเตรียมไว้ในใจที่ขั้น 5 นี่คือขนาดที่เราปรับค่ะ (จะใส่ตัวหนังสือด้านซ้าย)

10. เสร็จสิ้นการเตียมการ คราวนี้เราจะมาแปะลงไอดีกัน

11. ก่อนอื่นให้ใส่เครื่องหมายอะไรก็ได้ลงคลุมหัวท้ายตาราง จากนั้นให้เซฟไฟล์เป็น .html (คุ้นๆ มั๊ยคะ นี่คือวิธีการใส่โค๊ดแบบสุกนั่นเองค่ะ)

12. เปิดไฟล์ .html ขึ้นมาในเบราเซอร์ ลากแทบดำคลุมตารางและเครื่องหมายที่เราทำไว้

13. ก๊อบไปแปะในไอดีทั้งอย่างนั้นเลย เราจะเห็นว่ามันขึ้นตารางให้ แต่รูปจะไม่ขึ้น อันนี้เราต้องแก้อะไรนิดหน่อย

14. เลือกช่องใส่โค๊ดพิเศษเพื่อดูโค๊ด html เราจะเห็นแท็กประมาณนี้

<table background="file:///C|/Documents%20and%20Settings/Atima/My%20Documents/id_border2.jpg" border="0" cellpadding="0" cellspacing="0" height="476" width="425">

ตรงสีแดง ให้เปลี่ยนเป็น url ของรูปที่เราอัพขึ้นเว็บแล้ว (เพื่อความดูง่ายสำหรับมือใหม่ ให้ cut ข้อความอื่นๆ นอกเหนือจากกรอบไปไว้ที่อื่นก่อน แล้วค่อยกดดูโค๊ด จะได้หาง่ายหน่อยค่ะ เสร็จแล้วค่อยก๊อบมาแปะคืน)

15. เลือกช่องใส่โค๊ดพิเศษออก เพื่อดูผลลัพธ์ (อาจต้องรอสักครู่เพื่อให้มันโหลดรูปเสร็จ) ไชโย เราได้กรอบมาแล้ว!!!

คราวนี้เราก็กดเลือกตรงช่องที่เราเว้นไว้ให้ใส่ตัวหนังสือ แล้วจัดการพิมพ์ตามใจได้เลยค่า (ส่วนนี้จะทำในดรีมหรือจะทำในเว็บก็ได้ค่ะ)  เอ้อ อย่าลืมลบเครื่องหมายที่เราทำไว้ออกนะคะ เพื่อความสวยงาม อิอิ


แนวทางประยุกต์ต่อ
- แผ่นรองไดแบบใส่สกอร์บาร์
- ตาราง เอาไปในการจัดรูปแบบหน้าเว็บ เช่น อยากได้รูปอยู่ข้างตัวหนังสือ (ปกติ จะได้แค่บรรทัดเดียว) ก็เอารูปใส่ไว้ในตารางด้านนึง อีกด้านก็เป็นตัวหนังสือ (แบบนี้ได้หลายบรรทัด)


Edit1 เพิ่มรูปประกอบและคำอธิบาย