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

หลังจากที่เราได้ออกแบบเว็บเพจด้วยโปรแกรม Illustrator แล้ว ต่อจากนี้เราก็จะเริ่มใช้งาน CSS layout กัน

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



ตามรูปเราจะแบ่งตำแหน่งหลักไว้ 7 ตำแหน่ง ดังนี้

1.<div align="center"> เราจะเก็บทุกอย่างไว้ใน div ตัวนี้โดยจะมีความกว้างเท่ากับ ความกว้างของหน้าจอ และสังให้ div อื่นๆอยู่กลางหน้าจอพอดี

2.<div id="head"> เก็บรูปด้านบนสุดของเว็บเพจ



3.<div id="containner"> เก็บเนื้อหาส่วนกลางของเว็บเพจทั้งหมด ดังรูป



4.<div id="main"> เก็บเนื้อหาส่วนกลางของเว็บเพจทั้งหมด ดังรูป



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

5.<div id="left"> เก็บเนื้อหาทางฝั่งซ้ายมือ ดังรูป



6.<div id="right"> เก็บเนื้อหาทางฝั่งขวามือ ดังรูป



7.<div id="footer"> เก็บส่วนล่างสุดของเว็บเพจ ดังรูป



ในบทต่อไปจะเป็นการใส่เนื้อหาให้กับเว็บเพจ

เพื่อความเข้าใจที่ง่ายขี้น

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจที่เสร็จแล้ว

คลิกที่นี่เพื่อดาว์นโหลดตัวอย่างเว็บเพจที่เสร็จแล้ว

เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 10
  • สร้างเมื่อ : 16-05-2010
  • จำนวนครั้งที่เปิด : 42,700
  • เนื้อหาที่เกี่ยวข้อง :
      -

คะแนนความน่าสนใจ

7799

คลิกที่ ชอบจัง! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (13 เรื่อง)

แนะนำ  CSS Layouts

แนะนำ CSS Layouts

CSS layouts เป็นการจัดหน้าเว็บเพจโดยไม่ต้องใช้คำสั่ง table มีข้อดีอย่างไรในบทความนี้จะบอกทั้งหมด

สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 34,713


พื้นฐาน CSS Layout

พื้นฐาน CSS Layout

ความสามารถ CSS layout นั้นเป็นความสามารถใหม่ที่มีใน Dreamweaver CS3 เท่านั้น ในบนนี้จะมีเนื้อหาปูพื้นฐานความเข้าใจในการทำงานของ CSS layout

สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 38,162


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

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

ในบทนี้จะพูดถึงการเริ่มต้นออกแบบเว็บเพจ และตัวอย่างเว็บเพจที่ทำด้วย CSS layout ให้ดาว์นโหลดไปศึกษากัน

สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 84,560


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

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

เริ่มการใช้งาน CSS layout

สร้างเมื่อ : 16-05-2010 10:05 | จำนวนครั้งที่เปิด : 42,700


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

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

ใส่เนื้อหาให้กับเว็บเพจ

สร้างเมื่อ : 16-05-2010 10:07 | จำนวนครั้งที่เปิด : 30,906


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

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

เขียน CSS ควบคุมการแสดงผลส่วน HEAD

สร้างเมื่อ : 16-05-2010 10:07 | จำนวนครั้งที่เปิด : 29,548


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

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

จัดการ CSS ในส่วนของ Containner และ Main

สร้างเมื่อ : 16-05-2010 10:09 | จำนวนครั้งที่เปิด : 24,315


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

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

จัดการ CSS ในส่วนของ Left ทั้งหมด

สร้างเมื่อ : 16-05-2010 10:10 | จำนวนครั้งที่เปิด : 17,334


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

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

กำหนด CSS ให้ navigation ต่อจากบทที่ 6

สร้างเมื่อ : 16-05-2010 10:10 | จำนวนครั้งที่เปิด : 14,754


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

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

จัดการ CSS ในส่วนของ Right ทั้งหมด

สร้างเมื่อ : 16-05-2010 10:11 | จำนวนครั้งที่เปิด : 12,732


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

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

จัดการ CSS ในส่วนของ Right ต่อจากตอนที่ 8

สร้างเมื่อ : 16-05-2010 10:11 | จำนวนครั้งที่เปิด : 12,313


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

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

จัดการ CSS ในส่วนของ Right ต่อจากตอนที่ 9

สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 12,126


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

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

จัดการกับ CSS ส่วนสุดท้ายของเว็บเพจ footer

สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 17,275