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

ในบทที่แล้วหลังจากที่เราได้วาง layout กันแล้วบทนี้ก็จะเริ่มทำเว็บไซต์กันสักที โดยเริ่มจากการใส่เนื้อหาก่อน ซึ่งมีขั้นตอนดังนี้

1.เปิดเอกสาร HTML ขึ้นมา โดยที่ Document tool bar ให้เลือกเป็นแบบ Split เพื่อให้เราสามารถดู และแก้ไข Code ไปด้วยได้ ดังรูป



ในส่วนของ Insert bar ด้านบนให้เลือกไปที่ Layout จะเห็นว่ามีคำสั่ง Insert div อยู่ เราจะใช้คำสั่งนี้ในการใส่ div tag หรืออาจพิมพ์ไปที่ code โดยตรงเลยก็ได้

2.ในตัวอย่างจะพิมพ์เนื้อหาดังนี้

คลิกที่นี่เพื่อดูเนื้อหาที่พิมพ์เสร็จแล้วในส่วนที่เป็น HTML Code

คลิกที่นี่เพื่อดูหน้าเว็บเพจที่ยังไม่ใช้คำสั่ง CSS ควบคุมการแสดงผล

3.หลังจากที่เราพิมพ์เนื้อหาเสร็จแล้ว ก็จะเริ่มการใส่ CSS ไปควบคุมเนื้อหาต่างๆทีละส่วน โดยเริ่มจาก ไปที่ CSS panel ขวามือดังรูป



คลิกที่ปุ่มที่วงกลมสีแดงไว้จะเป็นการสร้างเอกสาร CSS จะมีหน้าจอขึ้นมาดังรูปด้านล่าง



ตามตัวอย่างเราจะสร้าง CSS สำหรับควบคุมการแสดงผลของ Body tag จากนั้นก็คลิก OK และทำการ SAVE ไฟล์ CSS ให้เรียบร้อย



4.เมื่อ SAVE ไฟล์ CSS เรียบร้อยแล้วจะมีหน้าจอขึ้นมาดังภาพ



5.ให้เราเลือกที่ Background เพื่อใส่สีพื้นหลังเป็นสี #021B30 ดังภาพ



6.จากนั้นเลือก Block ให้ Padding และ Margin มีค่าเป็น 0 ดังภาพ



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

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

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

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

3468

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

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

แนะนำ  CSS Layouts

แนะนำ CSS Layouts

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

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


พื้นฐาน CSS Layout

พื้นฐาน CSS Layout

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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