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

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

1.รูปลูกศร (arror.gif)



2.รูปพื้นหลัง (bg.jpg)



3.รูปชื่อเว็บไซต์ และภาพประกอบ (head.jpg)



4.รูปพื้นหลังสีฟ้า (blue.jpg)



5.รูปพื้นหลังสีเขียว (green.jpg)



6.รูปพื้นหลังสีแดง (red.jpg)



7.รูปพื้นหลังสีเหลือง (yellow.jpg)



ขั้นตอนการเขียน CSS ในส่วนของ HEAD

1.เพิ่มรายการ CSS คลิกที่ปุ่มตามรูป



จะมีหน้าต่างขึ้นดังรูปด้านล่าง

2.กรอกรายละเอียดตามรูป



3.ในส่วนของ background จะใช้รูป head.jpg



4.Border กำหนดชนิดของเส้นขอบ ความหนา และสีของเส้นขอบ



5.ในส่วนของ Box จะกำหนดขนาดความกว้าง 796px และสูง 150px

ที่เรากำหนดความยาวให้เท่ากับ 796px เพราะว่าเราต้องการให้เว็บเพจของเรามีความกว้าง 800px พอดีเมื่อรวมกับเส้นขอบขนาด 2px ของเราที่ได้สร้างไว้ในหัวข้อที่ 4

Clear: both เป็นคำสั่งไม่ให้มีวัตถุในอยู่ทั้ง 2 ด้านของ head



6.เมื่อเราคลิก OK จะได้เว็บเพจดังรูปได้ล่าง



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

คลิกที่นี่เพื่อดูตัวอย่าง CSS

เท่านี้เราก็ได้รูปในส่วน Head ของเว็บไซต์แล้ว