การปรับแต่งหน้าเว็บศูนย์รวม ตอนที่ 1

ตอนที่ 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

เขียนใน GotoKnow โดย เก๋น้อย
ใน ประชาสัมพันธ์และเทคนิคการใช้งาน Portal.in.th

คำสำคัญ (Tags): #css#portal.in.th#ตกแต่ง portal#ตกแต่งหน้าเว็บportal

หมายเลขบันทึก: 243484เขียนเมื่อ 20 กุมภาพันธ์ 2009 15:30 น. ()แก้ไขเมื่อ 6 กันยายน 2013 20:20 น. ()สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มาจำนวนที่อ่าน

ความเห็น (64)

พันคำ

เขียนเมื่อ 20 กุมภาพันธ์ 2009 15:33 น. ()

ขอบคุณครับ คุณเก๋ ถึงแม้อยู่ไกลถึงสงขลา แต่มารวดเร็วจัง

เก๋น้อย