พื้นฐาน CSS Layout

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

อ่านบทความการใช้งาน Dreamweaver ร่วมกับ CSS คลิกที่นี่

การใช้งาน CSS layout นั้นให้เราจินตนาการว่า เรามีบอร์ดขนาดใหญ่ โดยเราจะนำกระดาษไปติดที่บอร์ดนั้น เราสามารถนำกระดาษติดทับกัน วางซ้อนกัน หรือวางแยกกันในตำแหน่งต่างๆได้ แน่นอนว่ากระดาษที่นำมาใช้ติดบอร์ดนั้นเราสามารถเลือกสีได้ ทำสีขอบได้ และตัดให้มีขนาดตามที่เราต้องการได้ ดังรูป



บอร์ดขนาดใหญ่ เทียบได้กับหน้าจอของผู้เข้าชม ซึ่งมีความว่างปล่าว คอยเนื้อหาจากกระดาษที่เราจะนำมาแปะไว้ ถ้าเทียบเป็น HTML บอร์ดของเราก็จะเปรียบได้กับ BODY tag นั่นเอง อ่านความรู้เกี่ยวกับ HTML โดย คลิกที่นี่

กระดาษที่นำมาแปะที่บอร์ด เทียบได้กับส่วนต่างของเว็บเพจเช่น เนื้อหาของเว็บเพจ , ภาพประกอบในเว็บเพจ , Hyperlink ต่างของเว็บเพจ เรียกได้ว่าข้อมูลที่ต้องการให้แสดงผลทั้งหมดจะอยู่ในกระดาษที่นำมาแปะ ถ้าเปรียบเทียบเป็น HTML กระดาษของเราก็คือ tag ต่างของ HTML เช่น div , h , ul เราสามารถกำหนดเส้นขอบ ขนาดพื้นหลัง และตำแหน่งการแสดงผลต่างๆของ tag เหล่านี้ได้ทั้งหมด

รูปแสดงการทำงานของ CSS layout



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

1.สีเขียวให้เป็นตำแหน่งแสดงสัญลักษณ์ (logo) ของเว็บไซต์

2.สีชมพู ให้เป็นส่วนแสดง navigation ของเว็บไซต์

3.สีส้ม ให้เป็นส่วนแสดงเนื้อหา

เมื่อเราใส่เนื้อหาเสร็จทั้งหมดแล้วก็จะได้เว็บเพจดังรูปด้านล่าง



ในบทนี้จะเป็นการแนะนำการใช้ CSS layout แบบคร่าวเท่านั้น ในบทต่อไปจะเป็นตัวอย่างการทำเว็บเพจด้วย CSS layout