ตอนที่ 1 : CSS เปลี่ยนรูป header , เปลี่ยนสีของ body , footer และ background

สวัสดีค่ะทุกท่าน

วันนี้ดิฉันขอนำโค้ด CSS บางส่วนที่ใช้ในการตกแต่งหน้าเพจมาฝากกันนะคะ ดูจากรูปประกอบเลยค่ะ อาจอธิบายไม่ค่อยดีเท่าไหร่ อย่าว่ากันนะคะ :)  โดยมีวิธีการดังนี้ค่ะ

1.ในส่วนของผู้ดูแล (backend) คลิกปุ่ม ตั้ง ในหัวข้อตกแต่งเว็บ (อยู่บริเวณฝั่งขวามือในหัวข้อเกี่ยวกับเว็บศูนย์รวมนี้)

2.เราจะมาที่หน้า ตั้งค่า CSS เพิ่มเติม ให้เราใส่โค้ดดังนี้ค่ะ จะเปลี่ยนตรงไหนก็ใส่โค้ดของส่วนนั้นค่ะ

 


หมายเลข 1 :
การเปลี่ยนรูปในส่วนของ Header                                                                    

div#hd {

 background
: transparent url(url ไฟล์รูปที่เราต้องการ) repeat scroll 0 0;
 border-bottom
: 1px solid #FFFFFF;
 height
:113px--> สามารถปรับเปลี่ยนความสูงของกรอบ head ได้
 padding
: 16px 6px 8px;

}

หมายเลข 2 : การเปลี่ยนสีในส่วนของ body                                                                    

#doc2 {

 background: #รหัสสี 6 ตัว none repeat scroll 0 0; -->สีของพื้นหลังส่วน body
 margin:10px auto;
 padding:6px;

}

หมายเลข 3 : การเปลี่ยนสีในส่วน Footer                                                                    

#ft {

 background: #รหัสสี 6 ตัว none repeat scroll 0 0; -->สีของพื้นหลังในส่วน footer
 border-top:1px solid #รหัสสี 6 ตัว; --> สีของเส้นขอบบน
 padding: 6px 6px 12px;

}

หมายเลข 4 : การเปลี่ยนสีในส่วน Background                                                                    

html {

background
: #รหัสสี 6 ตัว none repeat scroll 0 0; -->สีของพื้นหลังเว็บ

}

หมายเหตุ : 

- รูปเราสามารถอัพโหลดขึ้นเครื่องแม่ข่ายของระบบ Portal.in.th ได้โดยอ่านรายละเอียดจาก http://portal.in.th/main/pages/164/

- สำหรับวิธีการนำไฟล์มาใช้สามารถอ่านรายละเอียดเพิ่มเติมได้ที่ http://portal.in.th/main/pages/27/

- รูปควรมีขนาดความกว้างไม่เกิน 954 เพราะมันจะเลยกรอบด้านข้างค่ะ แต่ความสูงนั้นประมาน 134 px สามารถเกินกว่านี้ได้ แต่ต้องไปปรับโค้ดข้างบนให้มีความสูงมากขึ้นตามด้วยค่ะ


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

หากใครต้องการอย่างไร ฝากคำถามมาได้นะคะ แล้วเราค่อยมาต่อในบันทึกหน้านะคะ
ขอให้สนุกกับการสร้างเว็บง่ายๆ ด้วยตัวคุณค่ะ :D