นี่คือ หน้าเว็บที่สมบูรณ์แบบที่สุดในโลก!!!
จั่วหัวแบบหลงตัวเอง เพื่อเรียกร้องความสนใจไปอย่างงั้นเองครับ เพราะหน้าเว็บ (webpage) นี้ธรรมดามากๆ (เข้าขั้นเห่ยเลยด้วยซ้ำ!) ไม่มีอะไรใกล้เคียงกับคำว่า สมบูรณ์แบบ หรอก เป็นแค่ตัวอย่างการเขียนหน้าเว็บด้วย HTML (HyperText Markup Language) ธรรมดาๆ แต่มันก็คือ กระดูกสันหลังของเว็บ เพราะเมื่อเราเอาการตกแต่งทั้งหลายออกจากหน้าเว็บ เราก็จะเห็น เนื้อหา ของหน้าเว็บแบบเพียวๆอย่างนี้แหละ
และถ้าติดตามอ่านใน บล็อกของ ohweb ไปเรื่อยๆ เราก็จะรู้วิธีการใช้งาน CSS (Cascading Style Sheets) มาจัดเลย์เอาต์และตกแต่งหน้าเว็บกัน โดยไม่ต้องใช้ตาราง หรือ แท็ค table ให้เปลืองแบนด์วิดธ์และแก้ไขในภายหลังยาก ข้อดีของ CSS นั้นมีหลายอย่าง ถ้าเราศึกษาวิธีการใช้งานมัน เว็บไซต์ของเราจะได้รับประโยชน์จากมันมหาศาล โดยเฉพาะประโยชน์ในระยะยาว... (หรือใครอยากจะรู้ไว้เท่ๆ! ก็ไม่ว่ากัน แต่มันไม่ได้มีไว้อวดความเท่หรอกนะครับ)
โดยเราจะเรียนรู้ร่วมกัน เกี่ยวกับวิธีการจัดเลย์เอาต์หรือโครงร่างของหน้าเว็บ ทั้ง แบบกำหนดความกว้างคงที่ (Fixed Width Design) และแบบความกว้างยืดหยุ่น (Fluid Width Design) โดยมีองค์ประกอบมาตรฐานทั่วไปที่เว็บไซต์ควรจะมี เช่น มี ส่วนหัว (header) , ส่วนลิงค์หลัก (main navigation), ส่วนเนื้อหาหลัก (content) , แถบด้านข้าง (sidebar) และ ส่วนท้ายหน้า (footer) โดยไม่ต้องไปแก้ไขส่วนใดๆของเนื้อหาเลย
คุณสามารถเริ่มต้นอ่านวิธีการเขียนหน้าเว็บ โดยใช้ html + css ได้ที่ บทความนี้ ครับ ส่วนตัวอย่างเลย์เอาต์พื้นฐานแบบต่างๆ สามารถคลิ๊กดูได้จากลิงค์ด้านล่างนี้ หมายเหตุ : ทุกเลย์เอาต์แสดงผลได้ปกติในเว็บบราวเซอร์ที่รองรับ CSS ยกเว้น IE (Internet Explorer ที่รักของเรา! เพราะยังไม่ได้ทำ CSS HACK ให้มัน) และถ้าคุณใช้เว็บบราวเซอร์ที่รองรับ CSS3 แล้วบางส่วน อย่าง Webkit หรือ Safari3 คุณก็จะเห็นรายละเอียดการตกแต่งมากขึ้น เช่น ขอบโค้ง (Rounded Corner) และ เงาบนพื้นหลัง (Box Shadow)ฺ