How to ตกแต่งนิยาย / ไอดี

ลำดับตอนที่ #44 : การวางเลย์เอาท์หน้าเว็บ I

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

โปรแกรมที่ใช้ ดรีม
ระดับความยาก 4/5
บทความที่ควรอ่านก่อน -


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

เข้าเรื่องกันดีกว่า

ขั้นที่ 1 เราต้องกำหนดรูปแบบของหน้าเว็บก่อนหรือที่เรียกว่าการวาง layout พูดง่ายๆ ก็คือการแบ่งหน้าเว็บออกเป็นส่วนๆ อืม พูดอย่างนี้อาจจะนึกไม่ออก เดี๋ยวเราเอาตัวอย่างให้ดูเลยดีกว่า

อย่าง myID จะแบ่งหน้าเว็บออกเป็น 4 ส่วนตามรูป (เราแบ่งคร่าวๆนะ จริงๆ อาจไม่ใช่อย่างนี้) นอกจากนี้ยังมีการแบ่งหน้าเว็บแบบอื่นๆ อีก เช่น

ขั้นที่ 2 เมื่อได้รูปแบบมาแล้ว ก็ต้องนับช่องเพื่อเอามาสร้างตาราง เวลานับ ให้นับแถวหรือคอลัมม์ที่มีช่องมากที่สุดในแนวนั้นๆ (แถว,row คือแนวนอน คอลัมม์,col คือแนวตั้ง) นั่นคือถ้าเรากำลังนับแนวนอนอยู่ เราก็ดูว่าแนวนอนมีช่องมากที่สุดกี่ช่อง  อืม อธิบายไม่ค่อยถูก ดูตัวอย่างดีกว่า

อย่างใน myID ตัวอย่างข้างบน มี 2 แถว 3 คอลัมม์ พอเข้าใจรึเปล่าเอ่ย

ขั้นต่อไปเราจะแทรกตารางกันละ ไปบทถัดไปเลยจ้ะ (ที่แยกเพราะเห็นว่ามันยาวแล้ว)