Dreamweaver CS

การสร้างเว็บเพจด้วย CSS layout (ตอนที่ 2)

แยก element ที่อยู่ในเว็บไซต์ เพื่อให้ง่ายต่อการเขียน CSS layout

หลังจากที่เราได้ออกแบบเว็บเพจด้วยโปรแกรม Illustrator แล้ว ต่อจากนี้เราก็จะเริ่มใช้งาน CSS layout กัน

อย่างที่ได้กล่าวไปแล้วว่า การทำงานของ CSS layout จะเป็นการควบคุมตำแหน่ง ขนาด และการแสดงผลของ div ดังนั้นเราจึงต้องเริ่มวางตำแหน่ง div หลักในเว็บเพจให้สอดคล้องกับเว็บเพจที่เราได้ออกแบบไว้ ดังรูป



ตามรูปเราจะแบ่งตำแหน่งหลักไว้ 7 ตำแหน่ง ดังนี้

1.<div align="center"> เราจะเก็บทุกอย่างไว้ใน div ตัวนี้โดยจะมีความกว้างเท่ากับ ความกว้างของหน้าจอ และสังให้ div อื่นๆอยู่กลางหน้าจอพอดี

2.<div id="head"> เก็บรูปด้านบนสุดของเว็บเพจ



3.<div id="containner"> เก็บเนื้อหาส่วนกลางของเว็บเพจทั้งหมด ดังรูป



4.<div id="main"> เก็บเนื้อหาส่วนกลางของเว็บเพจทั้งหมด ดังรูป



หลายคนอาจสงสัยว่าหัวข้อที่ 3 และ 4 ทำหน้าที่เหมือนกัน ทำไมต้องมีซ้ำกันด้วย เรื่องนี้จะอธิบายอย่างละเอียดในหัวข้อต่อไป

5.<div id="left"> เก็บเนื้อหาทางฝั่งซ้ายมือ ดังรูป



6.<div id="right"> เก็บเนื้อหาทางฝั่งขวามือ ดังรูป



7.<div id="footer"> เก็บส่วนล่างสุดของเว็บเพจ ดังรูป



ในบทต่อไปจะเป็นการใส่เนื้อหาให้กับเว็บเพจ

เพื่อความเข้าใจที่ง่ายขี้น

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจที่เสร็จแล้ว

คลิกที่นี่เพื่อดาว์นโหลดตัวอย่างเว็บเพจที่เสร็จแล้ว


เลื่อนขึ้นด้านบน