การสร้างรูปแบบหน้าเว็บเพจ

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

1. ให้ทำการเปิดโปรแกรม Adobe Dreamweaver ขึ้นมา ไปเมนูที่ file เลือก New จะเด้งหน้าต่างขึ้นมา เลือกแบบ HTML ค่าอื่นๆอย่าพึ่งไปยุ่งครับ แล้วกด Create

2. ไปที่เมนู Insert เลือก Table จะเด้งหน้าต่างของตารางขึ้นมา ให้ทำการใส่ค่าของตาราง โดย ตามที่เราวางแผนจากรูปแบบหน้าเว็บเพจ
- ช่อง Row (แถวแนวนอน) เป็น 7
- ช่อง Columns (แถวแนวตั้ง) เป็น 1
- ช่อง Table width (ความกว้างของตาราง) เป็น 1200
- Border thickness (ขนาดขอบตาราง) เป็น 1

ต้องทำความเข้าใจก่อนว่า ตารางนี้เป็นตารางแรกที่เราสร้าง นั่นก็คือตารางหลักนั่นเอง หรือจะว่าไปตารางนี้คือตัวกำหนดหน้าเว็บเพจ ดังนั้นจึงให้มีขนาดความกว้างที่ 1200 เพราะว่า เป็นขนาดที่กำลังดี เต็มหน้าจอคอมพิวเตอร์ที่ใช้กันทั่วไปใน สำหรับปัจจุบัน ผู้ออกแบบ ควรคำนึงถึงอุปกรณ์ที่ผู้ใช้ทั่วไป ใช้กันแบบสากลตามยุคสมัย เมื่อก่อนควรทำที่ขนาดไม่เกิน1000 เพราะ ผู้คนทั่วไป ใช้จอที่มีความละเอียด ประมาณ 1440x900 จะทำให้ภาพพอดีจอไม่ล้นจอ ส่วนในอนาคตถ้าอุปกรณ์มีความก้าวหน้ามากขึ้น จอแสดงผลมีความละเอียดมากขึ้น ก็ควรปรับขนาดให้ใหญ่ขึ้นตามความเหมาะสมของยุคสมัย เช่นกันถ้าออกแบบสำหรับอุปกรณ์อื่น เช่นมือถือ ก็ควรมีขนาดที่เล็กลง ตามความเหาะสมBorder thickness (ขนาดขอบตาราง) เป็น 1 บางคนคิดว่า ทำไมต้องเป็น 1 ให้เห็นขอบตาราง ทำไมไม่เป็น 0 ซึ่งไม่มี ขอบ แน่นอนครับว่าถ้าตารางมีขอบย่อมขัดลูกหูลูกตา ไม่สวยแน่นอนครับ แต่แนะนำให้ใช้ 1 ไว้ก่อน เพราะว่าเป็นการง่ายต่อการแก้ไข ปรับเปลี่ยนตารางครับเพราะถ้าไม่มีขอบ เมื่อเราลงเนื้อหาไปเยอะๆ จะมองไม่เห็นขอบ ทำให้ยากต่อการแก้ไขปรับเปลี่ยน จึงแนะนำให้ใส่ค่า 1 ไว้ก่อนเมื่อเราแก้ไข และลงรายละเอียดเนื้อหาครบถ้วนเสร็จเรียบร้อย ค่อยมาเปลี่ยนค่าให้เป็น 0 ก็นับว่าไม่ได้เสียเวลาอะไร

ต่อมา เราก็วิ่งหนี....ไม่ใช่ละ ต่อมาเรามากำหนดคุณสมบัติของตารางกัน โดนนำเมาส์ไปคลิกที่ขอบของตาราง (ถ้าไม่มีขอบละ ยากแน่ ถ้ามีตารางซ้อนกันหลายๆตาราง) เพื่อให้เมนู Properties เด้งขึ้นมา นั่นคือเมนูที่ใช้กำหนดคุณสมบัติของตารางนั่นเอง

โดยเรากำหนดแค่ค่า Align ให้เป็น center คือค่ากึ่งกลางหน้านั่นเอง (อาจเป็นเปล็นค่าอื่นๆได้ ตามความเหมาะสมของลักษณะงาน เว็บเพจนั่นๆ) สั่งเกตุได้ว่า จะมีค่า Border คือค่าขอบตาราง มาแก้ไขค่าได้ที่เมนูนี้เช่นกัน สังเกตุได้ว่า ตารางเลื่อนมาอยู่ที่กึ่งกลางแล้ว จากเดิมค่าเริ่มต้นอยู่ชิดซ้าย

3. สร้างตารางย่อย ส่วนนี้จะเป็นส่วนกำหนดเนื้อหาย่อยของหน้าเว็บเพจ เช่น เมนู เนื้อหา รูปภาพ คลิป หรืออื่นๆ ส่วนแรกที่จะเพิ่ม ย้อนกลับไปดูแบบที่เราออกแบบไว้ ช่องแรก มีตาราง 2 ช่อง อย่ารอช้าครับ นำเม้าส์ไปคลิ้กที่ตารางช่องที่เราจะเพิ่ม (ช่องแรกบนสุด) ไปที่เมนู Insert เลือก Table เหมือนเดิม ที่เพิ่มเติมคือ ค่า Rows เป็น 1 และ Columns เป็น 2 เพราะมี 2 ช่องนั่นเอง

ได้มาแล้วง่ายไหม ต่อไปเราไปดูช่องเมนูกันครับ ทำเหมือนเดิม ไปที่เมนู Insert เลือก Table เหมือนเดิม ค่า Rows เป็น 1 และ Columns เป็น 6 เพราะมี 6 ช่องนั่นเอง

เมื่อไปดูจากแบบ ในช่องตารางส่วนนี้จะมีสีเทา เรามาดูวิธีการใส่สีให้ตารางกัน

4. การใส่สีให้ตาาง นำเม้าไปคลิ้กช่องของตารางที่เราต้องการจะเปลี่ยนสี ในเมนูของหน้าต่าง Properteis ในช่องนี้คือการกำหนด คุณสมบัติของตารางนั่นเอง

- Horz คือการกำหนดการจัดวางในแนวแกนนอน เลือก Center คือกึ่งกลางนั่นเอง

- Vert คือการกำหนดการจัดวางในแนวแกนตั้ง เลือก Middle คือกึ่งกลางเช่นกัน

- Bg คือสีพื้นหลัง นี่แหละพระเอกของเรา รีบกดเลยๆ

กดแล้วจะมีเมนูเลือกสีเด้งขึ้นมา ให้เราเลือกสีตามต้องการ งานตามแบบนี้คือสีเทาออกเข้มๆ

ช่องต่อมาก็ทำเหมือนเดิมครับ ใส่ตารางไป 6 ช่อง ใส่สีออกฟ้าๆ สังเกตุได้ว่า ตารางตามต้นแบบจะยาวๆ ของเรายังสั้นๆ ไม่ยากครับ นำเม้าส์ ไปชี้ที่ขอบตารางที่เราต้องการจะขยาย คลิ้กเมส์ลาก มาได้ตามความเหมาะสมเลยครับ

สร้างตาราง และใส่สีให้ครบทุกช่องตามที่เราออกแบบไว้

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