ค้นหาพัฒนาการแห่ง Layout

CSS Layout คือการจัดรูปหน้าเวปโดยการจัดวาง div และส่วนประกอบต่างๆของหน้าเวบนั้นๆ ให้อยู่ในจุดที่ต้องการ

การจัดตำแหน่งสามารถทำได้โดยการกำหนด position หรือการใช้เทคนิคการ float-clear

นอกจากนั้นยังต้องคำนึงถึง CSS Box Model ด้วย

Layout หลักๆในหนึ่งหน้า xhtml ที่มีความหมาย semantic (การเขียนหน้าเว็บตามความหมายของ tag) ที่ถูกต้องแก่การใช้งานได้แก่

• header
• navigation
• content
• footer

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

เราควรใช้ div ที่มีจุดประสงค์เพื่อการจัดรูปหน้าอย่างเดียวให้น้อยที่สุด เท่าที่จะทำได้เพื่อรักษาความถูกต้องทาง semantic(ความหมาย) ไว้ให้ได้มากที่สุดเพื่อผลประโยชน์ทาง SEO ไม่ได้หมายความว่าเราควรหลีกเลี่ยงการใช้ div โดยสิ้นเชิง แค่ควรหลีกเลี่ยงการใช้ div ที่ไม่มีความหมายทาง semantic เท่านั้น

ตัวอย่าง div ที่มีความหมายถูกต้องทาง semantic

ได้แก่ div ที่มีจุดประสงค์การใช้งานในการแบ่งกลุ่ม หรือจัดกลุ่มของเนื้อหาเข้าไว้ด้วยกัน เช่น ใช้ id=”primary_column” แทน id=”left_column” เพราะ left_column เป็นการตั้งชื่อตามการวางรูปหน้า ในขณะที่ primary_column เป็นการตั้งชื่อตามความหมาย

CSS Layout แบ่งได้เป็นสามประเภทหลักๆได้แก่

Fixed Layout

คือการใช้หน่วยที่ยืดหยุ่นไม่ได้เช่น pixel ในการกำหนดค่าต่างๆทั้งตำแหน่งและความกว้างยาวของ div

• ข้อดี กำหนดได้ทุกอย่างได้ง่ายดังใจ
• ข้อเสีย ไม่ได้ใช้พื้นที่ใช้สอยในหน้าจอให้ได้เต็มศักยภาพ
• ตัวอย่างนี่เป็นตัวอย่างเว็บ msn เมื่อต้นปี 2005 ที่ความละเอียดขนาด 800 x 600

สังเกตุได้ว่าเมื่อปรับความละเอียดเป็น 1024 x 768 แล้วหน้าเว็บจะกว้างขึ้น มีพื้นที่ ที่ไม่ได้ใช้งานอยู่ทางด้านซ้ายของหน้าจอ เพราะรูปแบบหน้าตาของเว็บได้ถูกออกแบบไว้เพื่อหน้าจอขนาด 800 x 600 เป็นหลัก

ในขณะเดียวกัน ถ้าเว็บถูกสร้างเพื่อจอที่มีความละเอียดมากกว่าเป็นหลัก เมื่อเราเปิดหน้าเว็บบนจอที่มีความละเอียดน้อยกว่าจะเกิด horizontal scrollbar ขึ้น ซึ่งจะทำให้การเข้าถึงเนื้อหาในหน้าเว็บเป็นไปได้ยากขึ้น



ปัจจุบันเวปหลายๆเว็บที่ใช้ Fix Layout ได้แก้ปัญหานี้โดยการออกแบบให้พื้นหลังเป็นสีหรือรูปภาพ tile โดยมีเนื้อหาอยู่ตรงกึ่งกลางของหน้าจอ และให้ความกว้างของเนื้อหา มีขนาดไม่เกิน 800 pixel เพื่อที่จะรองรับหน้าจอที่มีความละเอียด 800×600 ให้เปิดมาเจอเนื้อหาในทันที

ในขณะที่ผู้ใช้หน้าจอความละเอียด 1024×768 หรือมากกว่า เปิดมาเจอเนื้อหาอยู่กึ่งกลางหน้าจอ แทนที่จะเอียงไปทางด้านขวาเหมือนเคยเว็บ msn ณ ปัจจุบัน ที่ความละเอียด 800 x 600



1024 x 768

Liquid Layout

คือการที่รูปหน้าของเว็บยืดหดไปตามขนาดของหน้าต่างของ browser ซึ่งเกิดขึ้นจากการที่เราไม่กำหนดค่า หรือกำหนดค่าเป็นเปอร์เซ็นท์เปรียบเทียบกับขนาดหน้าต่าง browser

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

หดได้



ซึ่งจุดประสงค์ของการที่ csszengarden ได้กำหนดให้เฉพาะคอลัมน์กลางเป็น Liquid Layout แล้วให้ส่วนที่เหลือเป็น Fix Layout นั้น คาดว่าเพราะต้องการให้รูปหน้าเว็บ แสดงผลออกมาให้ได้คล้ายคลึงกัน บนหน้าจอที่มีความละเอียดต่างกัน

Elastic Layout

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

• ข้อดี ช่วยให้มีผู้เข้าถึงเนื้อหาของเว็บได้มากขึ้น ผู้ที่มีปัญหาทางสายตาสามารถขยายขนาดตัวหนังสือให้ใหญ่ขึ้นได้ ในขณะที่คงโครงหน้าของเวปไว้
• ข้อเสีย สร้างได้ยาก และเสียเวลามากกว่าวิธีอื่นๆ
• ตัวอย่าง http://www.htmldog.com/ ใช้ Elastic Layout โดยการใช้หน่วย em ในการกำหนดค่าต่างๆ htmldog ที่ความละเอียด 1024×768 Text Size=Medium

htmldog ที่ความละเอียด 1024×768 Text Size=Small



htmldog ที่ความละเอียด 1024×768 Text Size=Large



htmldog ที่ความกว้างยาวของหน้าต่าง browser = 852×556 Text Size=Small



htmldog ที่ความกว้างยาวของหน้าต่าง browser = 567×554 Text Size=Large



จะสังเกตุได้ว่าเราสามารถย่อปรับเปลี่ยนขนาดหน้าต่างของ browser ได้โดยยังคงรูปแบบหน้าตาของหน้าเว็บไว้ และในขณะเดียวกันก็สามารถย่อขยายขนาดตัวหนังสือได้ด้วย ค่า Text Size ซึ่งจะเป็นตัวกำหนดว่า เราจะสามารถย่อขนาดหน้าต่างของ browser ได้มากขนาดไหนก่อนที่รูปหน้าของเว็บจะเปลี่ยนไป จากตัวอย่างข้างต้นจะเห็นได้ว่า เราสามารถย่อขนาดหน้าต่างของ browser ได้มากกว่าถ้าเราเลือกค่า Text Size = Small

ตัวอย่างการวางกล่องต่างๆในแบบ Elastic Layout

สองคอลัมน์

การวางกล่องโดยใช้ position

HTML

<div id=”navigation1″> </div>
<div id=”content”> </div>

CSS

#navigation1{ position: absolute; left:0; width: 5em; }
#content{ margin-left: 5em; }

จากโค้ดข้างบนเราได้กำหนดขนาดของกล่องที่จะใส่เมนูให้มีความกว้าง 5 em แล้ววางไว้ชิดข้างซ้ายของหน้าจอ แล้ววางกล่องเนื้อหาไว้ข้างๆโดยการให้ marginซ้ายของกล่องเนื้อหามีขนาดความยาวเท่ากับกล่องเมนู ในกรณีนี้กล่องเนื้อหาจะมีขนาดเท่ากับส่วนที่เหลือของจอเพราะเราไม่ได้กำหนดความกว้างยาวไว้

การวางกล่องโดยใช้ float

HTML

<div id=”content”> </div>
<div id=”navigation1″> </div>

CSS

#content{ float:right; }
#navigation1{ left:0; width: 5em; }

จากโค้ดข้างบนเราได้กำหนดให้ขนาดของกล่องที่จะใส่เมนูอยู่ทางด้านซ้ายของหน้าจอโดยการกำหนด left:0; แล้วกำหนดให้กล่องเนื้อหา float ไปทางขวา

สามคอลัมน์

HTML

<div id=”content”> </div>
<div id=”navigation1″> </div>

เราจะกำหนดให้กล่องไปอยู่ในตำแหน่งด้านซ้ายและขวาได้โดยการ absolute positioning ซ้ายและขวาดังต่อไปนี้

CSS

#navigation1{ position: absolute; left:0; width: 5em; }
#navigation2{ position: absolute; right:0; width: 10em; }

จากนั้นเราก็กำหนดค่า margin ซ้ายขวา ของ content ให้มีขนาด ตามความยาวของกล่องทางด้านซ้าย และขวา เพื่อให้กล่องเนื้อหาของเรา แทรกไปอยู่ตำแหน่งกลาง โดยกินพื้นที่ตรงกลางทั้งหมด

#content{ margin-left:5em; margin-right:10em; }

จากหลักการตัวอย่างเบื้องต้นนี้เราสามารถสร้างรูปหน้าเวปได้หลายแบบโดยการโยกย้ายตำแหน่งของกล่องต่างๆ left right และการกำหนดค่า margin

การใส่ header

จากหลักการข้างต้นที่ว่าเราสามารถสร้างรูปหน้าเว็บได้หลายแบบโดยการโยกย้ายตำแหน่งของกล่องต่างๆ left right และการกำหนดค่า margin เราจะสามารถเพิ่ม header ได้ด้วยการกำหนดค่าตำแหน่ง top ให้มีความสูงเท่ากับความสูงของ header

HTML

<div id=”header”> </div>
<div id=”content”> </div>
<div id=”navigation1″> </div>

CSS

#navigation1{ position: abosolute; left:0; top:4em; width: 5em; }

การใส่ footer

HTML

<div id=”header”> </div>
<div id=”content”> </div>
<div id=”navigation1″> </div>
<div id=”footer”> </div>

จากการที่ footer เป็นส่วนล่างสุดของหน้า โดยอยู่ใต้คอลัมน์อื่นๆทั้งหมด เราจะไม่ใช้วิธีกำหนด position แต่ใช้หลักการ clear เพื่อหลีกเลี่ยงปัญหาว่าคอลัมน์ใดจะยาวกว่ากัน

CSS

#footer{ clear:both; }

ทั้งนี้ทั้งนั้นเราสามารถเลือกได้ว่าเราจะให้ footer อยู่ใต้คอลัมน์ใดบ้างตามแต่แบบที่เราออกไว้ไม่จำเป็นจะต้องใช้ clear:both โดยให้ footer อยู่ใต้ทุกคอลัมน์เสมอไป

Related Articles

• โปรแกรมทำ css layout (19)
• เรียนรู้การใช้ ul li step by step (28)
• เขียน css อย่างสั้น ง่ายๆ โหลดไวๆ (15)
• มารู้จักกับ xhtml กันก่อน (4)
• พื้นฐาน กับ CSS Box Model (16)