Dreamweaver CS

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

เริ่มทำส่วนที่เป็น navigation ของเว็บไซต์

ในบทที่แล้วถ้าเปิดดูในส่วนของ 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


เลื่อนขึ้นด้านบน