CSS Layout ในรูปแบบต่างๆ

หลายคนอาจจะยังไม่รู้ว่าการเขียน CSS เพื่อกำหนดการแสดงผลของ หน้าเว็บนั้นมีอยู่มากมายหลายแบบ แต่ละแบบมีชื่อเรียกแตกต่างกันออกไปตามลักษณะ และการผสมผสานโครงสร้างการทำงานของผู้เขียน CSS เองเป็นสำคัญ

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

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

มาดูกันคร่าวๆ ว่าเลย์เอ้าท์ แต่ละแบบมีอะไรบ้าง ผมอาจจะเขียนเอาไว้ไม่ค่อยละเอียด แต่ก็อย่างว่าเรื่อง CSS มันเป็นแนวเฉพาะเจาะจงของใครของมัน เอาไปต่อยอดกันเองนะครับ

1. Liquid Layout (การวางหน้าเว็บแบบเต็มหน้า)

การเขียน css xhtml layout แบบแสดงผลตามความกว้างของหน้าจอ โดยกำหนดความกว้างแบบเปอร์เซ็นต์นี้ หมาะสำหรับเว็บที่มุ่งเสนอเนื้อหามากๆ เป็นสำคัญ เช่นเว็บที่นำเสนอข่าว โดยที่รูปแบบการนำเสนอถูกลดบทบาทลงไป แต่เนื้อหาจะถูกดันขึ้นมาทดแทน เราจึงไม่สามารถไปกำหนดการออกแบบได้มาก เพราะขนาดของความกว้างจะขึ้นอยู่กับหน้าจอผุ้ใช้เป็นสำคัญ การออกแบบจึงถูกจำกัดลงมาด้วย

การเขียน Liquid Layout ข้อจำกัดอีกรูปแบบหนึ่งที่มีคือ การวางโครงสร้างของ Element ในกรณีที่เป็น 3 Columns ทำให้ Column ตรงกลางส่วนของข้อมูลหลัก จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง

ข้อดี

ใช้พื้นที่หน้าจอได้ประโยชน์ อย่างเต็มที่กับการนำเสนอเนื้อหาของเว็บไซท์

ผู้ใช้สามารถเลือกใช้ขนาดตัวหนังสือได้โดยที่หน้าเว็บไม่ผิดเพี้ยนไป

ข้อเสีย

ไม่สามารถใช้กราฟฟิคหวือหวา หรือรูปแบบเฉพาะบางอย่างในหน้าเว็บได้

2. Elastic Layout (การวางหน้าเว็บแบบยืดหยุ่น)

คำว่ายืดหยุ่นในที่นี้ หมายถึงความยืดหยุ่นที่เกิดจาก ผู้ใช้เป็นหลัก โดยความกว้างของหน้าเว็บนั้นเกิดจากการปรับขนาดตัวหนังสือของ User ซึ่งด้วยสาเหตุนี้ เราจะไม่สามารถทำเรื่องราวอลังการเลิศหรูกับงานดีไซน์ใดๆ ได้มาก เพราะเมื่อผู้ใช้เปลี่ยนขนาดตัวหนังสือ สิ่งที่จะขยายตามหรือหดตามนั่นก็คือตัวหนังสือและเลย์เอ้าท์ แต่รูปภาพและพื้นหลังที่เรากำหนดไว้ จะไม่ขยายตาม ทำให้เกิดเป็นข้อกำหนดของงานออกแบบอีกทอดหนึ่ง แต่อย่างไรก็ตาม Elastic Layout ถือเป็นการวางเลย์เอ้าท์ที่อยู่ในขั้น Advanced เพราะกฎการเขียน CSS แตกต่างไปจากการวางเลย์เอ้าท์แบบ Pixel Base อย่าง Fixed เลย์เอ้าท์ซึ่งเป็นการเขียนในแบบที่ CSS Designer ส่วนใหญ่คุ้นเคย รูปแบบการคำนวณความกว้างจะเปลี่ยนไป เพราะความกว้างขึ้นอยู่กับขนาดของ Text ที่กำหนดตั้งแต่แรก ทำให้การวาง Boxes ต่างๆ ในหน้าเว็บต้องคำนึงถึงความกว้างโดยรวมที่ถูก ขนาดของตัวหนังสือ inheritate มาด้วย

ข้อดี

มีความยืดหยุ่นในสูงสำหรับผู้ใช้

ง่ายต่อการพัฒนาต่อในอนาคต

ข้อเสีย

มีข้อจำกัดในการออกแบบ

การเขียน Layout อยู่ในขั้นยากกว่าปกติ

3. Fixed Layout (การวางหน้าเว็บแบบกำหนดความกว้าง)

การเขียน css xhtml layout แบบกำหนดความกว้าง เหมาะสำหรับเว็บที่ให้ค่าของการออกแบบหน้าเว็บมากกว่าเนื้อหา หรือเกือบจะเท่าเทียมกัน เพราะว่า การกำหนดความกว้างให้กับแต่ละส่วนของ layout อย่างเฉพาะเจาะจง สามารถที่จะกำหนดรูปแบบในหน้าเว็บได้เกือบจะ 100 เปอร์เซ็นตามที่ ดีไซเนอร์ออกแบบมาในโปรแกรมออกแบบ ซึ่งถือเป็นข้อเด่นในการใช้เลย์เอ้าท์ ในลักษณะนี้

ข้อดี

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

ข้อเสีย

ไม่เหมาะสำหรับเว็บที่นำเสนอเนื้อหาเยอะๆ เพราะเมื่อผู้ใช้งานเปลี่ยนขนาดตัวหนังสือ เลย์เอ้าท์หน้าเว็บจะไม่สามารถขยายตามได้ ทำให้ตัวหนังสือซ้อนทับเลย์เอ้าท์

4. Absolutely Layout (การวางเลย์เอ้าท์แบบกำหนดสถานที่และตำแหน่ง)

การวางหน้าเว็บในลักษณะนี้ได้เปรียบในเรื่องการจัดวางข้อมูลเพื่อการเก็บข้อมูลเข้าทำ Index ของ Search Engine ซึ่งเราสามารถดึงเอาข้อมูลที่สำคัญกว่ามาให้ลำดับแรกๆ ของ Coding ได้ โดยที่ CSS สามารถจัดรูปแบบของเลย์เอ้าได้ตามปรกติ แต่จะมีปัญหาเรื่องการกำหนดความสูง เพราะเราจะต้องกำหนดความสูงแบบเฉพาะเจาะจงลงไปด้วย ทุกอย่างจึงเป็นการจำกัดขอบเขตอย่างสมบูรณ์แบบ

ข้อดี

กำหนดหน้าเว็บแบบเผด็จการได้อย่างเต็มที่

สามารถจัดหน้าเว็บให้เข้ากับเว็บที่ต้องการเน้นกราฟฟิคแบบจัดจ้านได้

นำเสนอข้อมูลสำคัญขึ้นก่อนได้สำหรับ Search Engine

ข้อเสีย

ยากในการพัฒนาต่อในอนาคต

มีข้อจำกัดในการปรับเปลี่ยนรูปแบบมากกว่าปกติ เช่นในเรื่องความกว้างและความสูงของ Layout

ไม่เข้ากับหลัก Accessibility บางข้อของ W3C

5. Hybrid (การวางเลย์เอ้าแบบลูกผสม)

การวางเลย์เอ้าท์หน้าเว็บในลักษณะนี้ เป็นการผสมระหว่างการกำหนดความกว้างและการปล่อยในรูปแบบ เปอร์เซ็นเทจ เช่นการนำหน่วย PX ผสม % หรือ EM ผสม % แต่กรณีการใช้ PX ผสม % อาจจะกลายเป็น ซีเอสเอสป่วยๆ อย่างแรง ไม่ใช่ไม่สามารถทำได้ ทำได้ในกรณีที่ไม่ต้องคำนึงถึงกรณีผู้ใช้ขยายขนาดตัวหนังสือในบราวเซอร์ เพราะในกรอบที่ถูกกำหนดเป็น PX จะไม่ถูกขยายขึ้นเมื่อตัวหนังสือขยาย

ข้อดี

เหมาะกับเว็บที่มีลักษณะ Sidebar อยู่ด้านข้าง ด้านใดด้านหนึ่ง แล้วปล่อยให้อีกด้านขยายเต็มหน้า

ใช้ได้ดีกับเว็บที่ต้องการนำเสนอเนื้อหาเป็นหลัก

ข้อเสีย

มีข้อจำกัดในการออกแบบดีไซน์

ในลำดับต่อไป เดี๋ยวผมจะมาแยกย่อยแสดงตัวอย่าง ของเลย์เอ้าท์ในแต่ละรูปแบบให้ดูกันอีกทีครับ