CSS Layout คือ การจัดรูปแบบหน้าเว็บไซต์ หรือโครงเว็บไซต์ และส่วนประกอบต่าง ๆ ว่าจะอยู่ตรงจุดไหนตามที่ต้องการ โดยการใช้ positon และ float-clearing มาช่วยในการสร้าง css layout
layout ของเว็บไซต์ส่วนใหญ่นั้นในหนึ่งหน้าจะประกอบด้วย ส่วนประกอบหลัก ๆ ที่คนส่วนใหญ่ใช้กัน คือ header navigation content และ footer นอกจากนั้นส่วนอื่น ๆ ที่ต้องการเพิ่มเติมก็สามารถที่จะทำเพิ่มเข้ามาได้แล้วแต่เทคนิคของแต่ละคน โดยควรจะตั้งชื่อ div ให้มีความหมายให้มากที่สุด ซึ่งเทคนิคต่าง ๆ ในการสร้างเว็บไซต์ด้วย css นั้นสามารถอ่านเพิ่มเติมได้ในเว็บไซต์ ofebia หรือค้นหาโดย
ใช้บริการ search engine ของค่ายต่าง ๆ
รูปแบบ CSS Layout
1.Fixed layout
เป็นการเขียน css แบบกำหนดความกว้างยาวไว้อย่างชัดเจน โดยส่วนใหญ่จะใช้หน่อย px ในการกำหนดขนาด เพื่อสามารถออกแบบเว็บไซต์เพื่อเน้นความสวย และให้ความสำคัญกับข้อมูลไปพร้อมกับการออกแบบ สามารถกำหนดรูปลักษร์ของเว็บไซต์ได้อย่างลงตัว
ข้อดี - สามารถกำหนดขนาดได้อย่างลงตัว เหมาะสมกับการออกแบบกราฟฟิกที่เน้นความสวยงาม
ข้อเสีย - เว็บไม่สามารถยืดหยุ่นได้ตามขนาดตัวอักษรที่เปลี่ยนแปลง
- ให้ขนาดหน้าเว็บไซต์ได้ไม่เต็มที่เนื่องจากกำหนดขนาดไว้อย่างชัดเจน
2.Liquid layout
เว็บไซต์รูปแบบนี้สามารถที่จะยืดขยายได้ตามขนาดของ browser ที่ถูกย่อขยาย หรือขนาดหน้าจอของคอมพิวเตอร์ โดยการกำหนดความกว้างเป็นเปอร์เซ็นต์ ทำให้สามารถรองรับจำนวนข้อมูลจำนวนมาก ๆ ได้ เหมาะสำหรับเว็บไซต์ที่เน้นการนำเสนอเนื้อหาเป็นหลัก
ข้อดี - สามารถใช้พื้นที่หน้าจอได้อย่างเต็มประสิทธิภาพ
- สามารถแสดงผลได้ทั้งหน้าจอคอมพิวเตอร์ มือถือ และอื่น ๆ
ข้อเสีย - ไม่สามารถออกแบบเว็บไซต์โดยใช้กราฟฟิกสวยงามได้มากนัก
3.Elastic layout
การออกแบบเว็บไซต์ด้วย css แนวนี้ทำให้ผู้ใช้สามารถที่จะปรับเปลี่ยนตัวอักษรของเนื้อหาในเว็บไซต์ได้อย่างสะดวก และไม่ทำให้หน้าเว็บไซต์เสียรูปแบบด้วย ซึ่งความกว้างของเว็บไซต์ขึ้นอยู่กับขนาดของตัวอักษร โดยใช้ em หรือเปอร์เซ็นต์ ในการกำหนดขนาดของเว็บไซต์ นอกจากนี้ยังหน้าเว็บไซต์ยังสามารถยืดหดตามการเปลี่ยนแปลงขนาดของ browser ได้ด้วย
ข้อดี - มีความยืดหยุ่นสูง ง่ายต่อการพัฒนาเพิ่มในอนาคต
ข้อเสีย - สร้างได้ยาก ใช้ทักษะ css ค่อนข้างสูง
- ไม่สามารถออกแบบเว็บไซต์ให้มีความสวยงามได้มาก
เราสามารถจะเลือกได้ว่าจะออกแบบ layout ของเว็บไซต์ออกมาเป็นแบบไหนก็ได้แล้วแต่ความถนัด และความรู้ css ของแต่ละคน โดยสามารถนำเอาเทคนิค css มาประยุกต์ใช้ร่วมกันได้ทั้ง 3 แบบ แล้วแต่ความชำนาญของผู้เขียน css เอง และนอกจากนี้ยังต้องดูเว็บไซต์ของเราด้วยก่อนที่จะเขียน css ว่าเว็บไซต์เราเป็นแบบไหน เพื่อที่จะตัด css ให้เหมาะสมกับเว็บไซต์ตนเอง และมีประสิทธิภาพมากที่สุด
มีประโยชน์มากเลยค่ะ
thanks!