Dreamweaver CS

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

เริ่มสร้าง HTML ตามที่ได้ออกแบบไว้

ในบทที่แล้วหลังจากที่เราได้วาง 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 ดังภาพ



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


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