Tag: css layout

ผมไม่ได้เขียน CSS HTML มานานมากกกกกแล้ว มันอาจจะทำใจได้ยากสักนิดในช่วงแรกที่ต้องอดกลั้นไม่ทำในสิ่งที่ตัวเองถนัด เพราะเอาเวลาไปทำอย่างอื่นที่น่าสนุกว่า ท้าทายกว่าเหมือนกับที่เขาว่าไว้ เราต้องเดินไปข้างหน้า เป็นเหตุให้ ThaiCSS ไม่มีบทความใหม่ออกมาเลยตั้งแต่ต้นปีที่ผ่านมา Kulachat Kena เองยังโผล่มาแค่บทความเดียวแล้วหายจ้อย เปล่าเลย เขาไม่ได้ตั้งใจหายไปไหน อาจเป็นเพราะผมให้งานเขาทำหนักเกินไป จนไม่มีกระจิตกระใจลงมาวาดลวดลายใน ThaiCSS เป็นคำรบที่สอง แต่อีกไม่นานเขาคงกลับมาพร้อมประสบการณ์ที่มากกว่า สุขขุมลุ่มลึกกว่า รวมไปถึงเขาอาจจะมีสามหำไปแล้วก็เป็นได้

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

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

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

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

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

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

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

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

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

ข้อดี

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

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

ข้อเสีย

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