โดย พร อันทะ เมื่อ 2008-01-19 15:57:00 ดูทั้งหมด 2185 ครั้ง
อาจจะเป็นเรื่องไม่สำคัญที่เราต้องมารู้เรื่องว่า CSS แต่ละอย่างมันเรียกว่าอะไร แต่ดูๆ ไป ดูๆ มา มันก็คงบอกว่าไม่สำคัญไม่ได้ เพราะมันเป็นเรื่องที่ต้องทำความเข้าใจ ถึงแม้ว่าเราไม่จำเป็นต้องเอาไปท่องจำ แล้วนำไปสอบเรียนต่อในสถาบันการศึกษาไหนก็ตาม แต่ว่าโครงสร้างหลักของ CSS ที่เรายึดว่าจะใช้ในงานแต่ละแบบ ถือเป็นข้อกำหนดการออกแบบหน้าเว็บที่สำคัญในระดับหนึ่งเลยทีเดียว
หลักๆ แล้วโครงสร้างเลย์เอ้าท์ของ CSS ที่ใช้เขียนควบคุมหน้าเว็บมีอยู่ 5 แบบ โดยแต่ละรูปแบบยังมีข้อแตกต่างในตัวของมันเองปลีกย่อยลงไปอีก แบบไหน เหมาะสมกับงานใดก็ขึ้นอยู่กับคนทำงาน ว่าจะเลือกให้อย่างไรให้เหมาะกับงานของตัวเอง
มาดูกันคร่าวๆ ว่าเลย์เอ้าท์ แต่ละแบบมีอะไรบ้าง ผมอาจจะเขียนเอาไว้ไม่ค่อยละเอียด แต่ก็อย่างว่าเรื่อง CSS มันเป็นแนวเฉพาะเจาะจงของใครของมัน เอาไปต่อยอดกันเองนะครับ
การเขียน css xhtml layout แบบแสดงผลตามความกว้างของหน้าจอ โดยกำหนดความกว้างแบบเปอร์เซ็นต์นี้ หมาะสำหรับเว็บที่มุ่งเสนอเนื้อหามากๆ เป็นสำคัญ เช่นเว็บที่นำเสนอข่าว โดยที่รูปแบบการนำเสนอถูกลดบทบาทลงไป แต่เนื้อหาจะถูกดันขึ้นมาทดแทน เราจึงไม่สามารถไปกำหนดการออกแบบได้มาก เพราะขนาดของความกว้างจะขึ้นอยู่กับหน้าจอผุ้ใช้เป็นสำคัญ การออกแบบจึงถูกจำกัดลงมาด้วย
การเขียน Liquid Layout ข้อจำกัดอีกรูปแบบหนึ่งที่มีคือ การวางโครงสร้างของ Element ในกรณีที่เป็น 3 Columns ทำให้ Column ตรงกลางส่วนของข้อมูลหลัก จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง
คำว่ายืดหยุ่นในที่นี้ หมายถึงความยืดหยุ่นที่เกิดจาก ผู้ใช้เป็นหลัก โดยความกว้างของหน้าเว็บนั้นเกิดจากการปรับขนาดตัวหนังสือของ User ซึ่งด้วยสาเหตุนี้ เราจะไม่สามารถทำเรื่องราวอลังการเลิศหรูกับงานดีไซน์ใดๆ ได้มาก เพราะเมื่อผู้ใช้เปลี่ยนขนาดตัวหนังสือ สิ่งที่จะขยายตามหรือหดตามนั่นก็คือตัวหนังสือและเลย์เอ้าท์ แต่รูปภาพและพื้นหลังที่เรากำหนดไว้ จะไม่ขยายตาม ทำให้เกิดเป็นข้อกำหนดของงานออกแบบอีกทอดหนึ่ง แต่อย่างไรก็ตาม Elastic Layout ถือเป็นการวางเลย์เอ้าท์ที่อยู่ในขั้น Advanced เพราะกฎการเขียน CSS แตกต่างไปจากการวางเลย์เอ้าท์แบบ Pixel Base อย่าง Fixed เลย์เอ้าท์ซึ่งเป็นการเขียนในแบบที่ CSS Designer ส่วนใหญ่คุ้นเคย รูปแบบการคำนวณความกว้างจะเปลี่ยนไป เพราะความกว้างขึ้นอยู่กับขนาดของ Text ที่กำหนดตั้งแต่แรก ทำให้การวาง Boxes ต่างๆ ในหน้าเว็บต้องคำนึงถึงความกว้างโดยรวมที่ถูก ขนาดของตัวหนังสือ inheritate มาด้วย
การเขียน css xhtml layout แบบกำหนดความกว้าง เหมาะสำหรับเว็บที่ให้ค่าของการออกแบบหน้าเว็บมากกว่าเนื้อหา หรือเกือบจะเท่าเทียมกัน เพราะว่า การกำหนดความกว้างให้กับแต่ละส่วนของ layout อย่างเฉพาะเจาะจง สามารถที่จะกำหนดรูปแบบในหน้าเว็บได้เกือบจะ 100 เปอร์เซ็นตามที่ ดีไซเนอร์ออกแบบมาในโปรแกรมออกแบบ ซึ่งถือเป็นข้อเด่นในการใช้เลย์เอ้าท์ ในลักษณะนี้
การวางหน้าเว็บในลักษณะนี้ได้เปรียบในเรื่องการจัดวางข้อมูลเพื่อการเก็บข้อมูลเข้าทำ Index ของ Search Engine ซึ่งเราสามารถดึงเอาข้อมูลที่สำคัญกว่ามาให้ลำดับแรกๆ ของ Coding ได้ โดยที่ CSS สามารถจัดรูปแบบของเลย์เอ้าได้ตามปรกติ แต่จะมีปัญหาเรื่องการกำหนดความสูง เพราะเราจะต้องกำหนดความสูงแบบเฉพาะเจาะจงลงไปด้วย ทุกอย่างจึงเป็นการจำกัดขอบเขตอย่างสมบูรณ์แบบ
การวางเลย์เอ้าท์หน้าเว็บในลักษณะนี้ เป็นการผสมระหว่างการกำหนดความกว้างและการปล่อยในรูปแบบ เปอร์เซ็นเทจ เช่นการนำหน่วย PX ผสม % หรือ EM ผสม % แต่กรณีการใช้ PX ผสม % อาจจะกลายเป็น ซีเอสเอสป่วยๆ อย่างแรง ไม่ใช่ไม่สามารถทำได้ ทำได้ในกรณีที่ไม่ต้องคำนึงถึงกรณีผู้ใช้ขยายขนาดตัวหนังสือในบราวเซอร์ เพราะในกรอบที่ถูกกำหนดเป็น PX จะไม่ถูกขยายขึ้นเมื่อตัวหนังสือขยาย
ในลำดับต่อไป เดี๋ยวผมจะมาแยกย่อยแสดงตัวอย่าง ของเลย์เอ้าท์ในแต่ละรูปแบบให้ดูกันอีกทีครับ
Tags:
Unknown Version Unknown
