การจัด Layout ด้วย CSS (Div)

การจัด Layout ด้วย CSS (Div)

แบ่งเป็น 4 แบบ คือ

1. Fixed Layout
จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่

เนื่องจากผู้ใช้แต่ละคนมีการกำหนดความละเอียดของหน้าจอแตกต่างกันไป เช่น 800x600, 1024x780 (มีผู้ใช้มากที่สุด), 1280x800, 1280x960, 1280x1024 pixel

เว็บส่วนใหญ่จะออกแบบเพื่อรองรับความละเอียดหน้าจอที่ 800x600 เป็นหลัก โดยกำหนดความกว้างของเนื้อหาอยู่ที่ 780 pixel และจะจัดวางเนื้อหาอยู่กึ่งกลางหน้าจอ ทำให้ ผู้ใช้งานที่ความละเอียดหน้าจอ 800x600 จะเห็นหน้าเว็บเพจเต็มพอดี ส่วนผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 จะเห็นเนื้อหาอยู่กึ่งกลางหน้าจอ พื้นที่ด้านข้างที่เหลือจะเป็นพื้นหลังที่เป็นสีหรือรูปภาพ

แต่ถ้าเราออกแบบให้ผู้ที่ใช้ความละเอียดหน้าจอ 1024x780 มองเห็นหน้าเว็บเต็มพอดี เมื่อผู้ที่ใช้ความละเอียดหน้าจอ 800x600 ดูหน้าเว็บ หน้าเว็บจะเกินหน้าจอ เกิดเป็น scrollbar แนวนอน ต้องเลื่อนไปทางขวาจึงจะมองเนื้อหาทั้งหมดได้ แต่ปัจจุบัน (2009) ส่วนใหญ่มากกว่า 60% แล้วผู้ใช้จะใช้ความละเอียดหน้าจอที่ 1024x780

2. Liquid Layout
จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม

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

3. Elastic Layout
จะกำหนดขนาดของส่วนต่าง ๆ เป็น em ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์

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

4. Hybrid Layout
เป็นการใช้แบบต่างๆ มาผสมกัน เช่น Sidebar ด้านข้าง ทั้ง 2 ด้านเป็น Elastic Layout ส่วนเนื้อหาเป็น Liquid Layout เป็นต้น

เมื่อเข้าใจเรื่องการจัดวาง Layout แบบต่างๆ แล้ว ทีนี้มาดูการเขียน code กันต่อค่ะ วิธีการไม่ยากแค่เพียงใช้โปรแกรม Dreamweaver เท่านั้น เวลาที่เรา New เอกสารใหม่ขึ้นมา จะมีให้เราเลือกว่าอยากจะได้ Layout แบบไหน จะแบ่งกี่คอลัมน์ ต้องการส่วน Header และ Footer หรือไม่ และเลือกได้ว่าจะให้ส่วน style sheet ฝังอยู่ในหน้าเอกสารนั้นเลย (Add to Head) หรือว่าแยกเป็นอีกไฟล์ต่างหาก (Create New File) หรือจะให้ใส่ style sheet รวมไปในไฟล์ style sheet ที่เรามีอยู่แล้ว (Link to Existing File) ก็ได้