ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 6)

ในบทที่แล้วถ้าเปิดดูในส่วนของ CSS Code อาจมีคำถามว่า #containner #main คือ คำสั่งควบคุมส่วนไหน คำตอบคือ ควบคุม Main ที่อยู่ใน Containner นั่นเอง

โปรแกรม Dreamweaver จะทำการเขียน Selector ให้เราเองโดยเรา คลิก id ที่ต้องการ จากนั้นไปที่ปุ่มเพิ่ม CSS ตามรูปด้านล่าง

---

กำหนดการแสดงผลของ Left มีขึ้นตอนดังนี้

left จะเป็นตัวเก็บเนื้อหาที่เราต้องการแสดงผลทางซ้ายมือทั้งหมด ซึ่งในตัวอย่างเราจะใช้เก็บ Navigation

1.เขียน CSS ควบคุม left (#containner #main #left) เริ่มด้วยกำหนดความกว้างของ left ให้มีขนาด 230px และจัดให้อยู่ทางซ้ายมือ โดยให้ padding , margin เป็น 0 ทั้งหมด ดังรูป



สิ่งที่ห้ามลืมเลยก็คือการกำหนด padding , margin ให้เป็น 0 เพราะถ้าเราไม่กำหนดค่านี้จะทำให้ตำแหน่งในการแสดงผล ของแต่ล่ะ browser แตกต่างกันออกไป

---

กำหนดการแสดงผลของ Navigation

navigation คือส่วนของลิงค์ที่ไปยังหน้าอื่นของเว็บไซต์

1.เขียน CSS ควบคุม navigation (#containner #main #left #navigation) เริ่มจากกำหนดขนาดความกว้างของ navigation ให้เท่ากับ 230px จัดให้ชิดด้านซ้าย และ ให้ Margin , Padding เป็น 0

---

กำหนดการแสดงผลของ H1 ใน Navigation

สำหรับ H1 ใน navigation นั้นเรากำหนดให้แสดงผลเป็นหัวข้อของ navigation ดังรูป



โดยเราจะเขียน Selector เป็น
#containner #main #left #navigation h1.yellow ซึ่งหมายความว่า h1 ที่มี class = "yellow" และอยู่ใน Navigation เท่านั้นที่จะแสดงผลตามนี้ ซึ่งการกำหนดการแสดงผลมีขั้นตอนดังนี้

1.เริ่มจากกำหนดขนาดตัวอักษร และรูปแบบตัวอักษร



2.กำหนดพื้นหลังเป็น yellow.jpg



3.กำหนดขนาด margin และ padding



4.ในหัวข้อนี้จะกำหนดตำแหน่งที่จะแสดงผลให้กับ h1 กัน โดยในส่วนของ Type ให้เราเลือกเป็น Relative จะเป็นการอ้างอิงตำแหน่งจาก div ที่บรรจุ h1 อยู่นั่นคือ navigation

การที่เรากำหนด Top:5 , Left:5 นั่นหมายความว่าให้ h1 ห่างจาก Navigation ด้านบน 5px และ ห่างด้านซ้าย 5px



อ่านบทความนี้ต่อในตอนที่ 7 >>