layout แบบต่างๆ

Tag: layout แบบต่างๆ

การเขียน CSS Elastic Layout

หลังจากที่ลองเล่นกับ CSS แบบ Liquid Layout ไปแล้วตอนนี้มาลองเล่นแบบอื่นกันดูบ้างครับ Elastic Layout เป็นรูปแบบการเขียน CSS ที่ผมนำมาเสนอเป็นรูปแบบที่สอง จะเป็นอย่างไรนั้น ตามมาดูกันครับ

การเขียนหน้าเว็บแบบ Elastic Layout มีสูตรที่ผมคิดขึ้นมาง่ายจากปกติ ฟ้อนท์ไซท์ 16px ซึ่งเป็นค่ามาตรฐานของบราวเซอร์ทั่วไป กับค่าเฉลี่ยนความกว้างหน้าเว็บที่ 950px ถ้าตั้งค่า body ให้ฟ้อนท์ขนาด 80% ของ 16px หรือ 0.8em ค่าความกว้างของ div หลักจะอยู่ที่ประมาณ 74em ค่าความกว้างเบื้องต้น ถ้าเรายึดเอาไว้ว่าจะใช้เท่าไหร่แล้ว อย่าพยายามเปลี่ยน เช่น ถ้ามีคนมาบอกว่า ตัวหนังสือในหน้ามันเล็กไป ขยายขึ้นอีกได้ไหม คำตอบคือได้ แต่ ขนาดหน้าเว็บจะขยายตาม เช่น ถ้าเราเปลี่ยน ขนาดตัวหนังสือจาก 80% หรือ 0.8em ไปเป็น 85% หรือ 0.85em หน้าเว็บจะยายกลายเป็นกว้างประมาณ 1008px ทันที ไม่ใช่ 950px อย่างที่เป็นตอนแรก จึงให้พึงระวังตรงนี้ไว้ด้วยนะครับ ถ้าเปลี่ยนไปแล้วอย่าลืมไปลดขนาดความกว้างของ div หลักลงไปด้วย

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

การเขียน Liquid Layouts 3 Columns

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

สำหรับคนที่ยังไม่ได้อ่านรูปแบบการเขียนเลย์เอ้าท์ แบบต่างๆ สามารถอ่านเพิ่มเติมได้ที่ CSS Layout ในรูปแบบต่างๆ และ CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%) จะได้เข้าใจการเขียน สามคอลัมน์แบบนี้มากยิ่งขึ้น

สิ่งที่เพิ่มเข้ามาในการเขียนแบบ สามคอลัมน์ีนี้ก็คือ ข้อมูลฝั่งขวามือ ซึ่งผมใช้ คลาส .added-content ลักษณะการเขียน ผมเขียนต่อจาก class .sidebar ก่อนที่จะขึ้น content จริง แล้วสั่ง float: right เพื่อที่จะให้กล่องลอยไปอยู่ด้านขวา และกลับไปที่ class .content จากเดิมที่ มี margin ทางฝั่งซ้ายอย่างเดียว กลายมาเป็นการเขียน CSS แบบ short hand อยู่ในการสั่ง shorthand property คือ margin: 0 21%; (เดี๋ยวจะมาเล่าอีก ในโอกาสต่อไปครับ) เมื่อเพิ่ม margin เข้าไปฝั่งขวา ก็จะเกิดช่องว่างเพิ่มอีก 21% เพื่อที่จะเหลือไว้ให้ .added-cotent เข้าไปสิงอยู่ได้พอดี

CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์

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

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

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

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

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

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

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

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

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

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial