อ่า...ในที่สุดก็มาแล้วค่ะ บันทึกการตกแต่งหน้าเว็บไซต์ที่สร้างจาก Portal.in.th
ตามมาดูกันเลยค่า...... ^__^
หมายเลข 1 การตกแต่ง Background
- กรณีใส่รูปให้ Background
html {
background: url( url ไฟล์รูปที่เราต้องการ ) repeat scroll center top;
}
- กรณีเปลี่ยนสีให้กับ Background
html {
background: #รหัสของสีที่ต้องการ repeat scroll center top;
}
หมายเลข 2 การตกแต่ง Head
- การเปลี่ยนรูปในส่วน Head
#head-block {
background: transparent url( url ไฟล์รูปที่เราต้องการ ) repeat scroll 0 0;
border-bottom: 0 none;
height: 100px; --> สามารถเปลี่ยนแปลงความสูงได้
padding: 16px 0 8px 6px;
}
- การเปลี่ยนสีในส่วน Head
# head-block {
background: #รหัสของสีที่ต้องการ repeat scroll 0 0;
border-bottom: 0 none;
height: 100px; -->สามารถเปลี่ยนแปลงความสูงได้
padding: 16px 6px 8px;
}
หมายเลข 3 การตกแต่ง breadcrumbs-top
- การใส่รูปพื้นหลังให้กับ breadcrumbs-top
div#breadcrumbs-top {
background: transparent url(url ไฟล์รูปที่เราต้องการ) repeat scroll 0 0;
border-bottom: 0 none;
padding: 4px 0 6px 4px;
}
- กรณีใส่สีพื้นหลังให้กับ breadcrumbs-top
div#breadcrumbs-top {
background: #รหัสของสีที่ต้องการ none repeat scroll 0 0;
border-bottom: 0 none;
padding: 4px 0 6px 4px;
}
หมายเลข 4 การตกแต่ง breadcrumbs-bottom
- กรณีใส่รูปพื้นหลังให้กับ breadcrumbs-bottom
div#breadcrumbs-bottom {
background: transparent url(url ไฟล์รูปที่เราต้องการ) repeat scroll 0 0;
border-bottom: 0 none;
padding: 4px 0 6px 4px;
}
- กรณีใส่สีพื้นหลังให้กับ breadcrumbs-bottom
div#breadcrumbs- bottom {
background: #รหัสสีที่ต้องการ none repeat scroll 0 0;
border-bottom: 0 none;
padding: 4px 0 6px 4px;
}
หมายเลข 5 การใส่พื้นหลังให้กับ หัวข้อเมนูบน Sidebar
(คือพวกตรงหัวข้อ สารบัญ,ข่าวล่าสุด,ข่าวล่าสุด,กิจกรรมที่กำลังจะเกิด,พอดคาสต์ล่าสุด,เกี่ยวกับเว็บไซต์นี้,ติดต่อ)
- กรณีใส่รูปเป็นพื้นหลัง
#sidebar div.title {
background-image: url(url ไฟล์รูปที่เราต้องการ);
background-position: right bottom;
border: medium none;
padding-left: 4px;
}
- กรณีใส่สีเป็นพื้นหลัง
#sidebar div.title {
background:#รหัสสีที่ต้องการ none repeat scroll 0 0;
padding-left: 4px;
}
หมายเลข 6 การตกแต่ง Sidebar
- กรณีใส่รูปเป็นพื้นหลัง
#sidebar-outer {
background: url (url ไฟล์รูปที่เราต้องการ) repeat scroll 0 0;
padding-bottom:20px;
}
- กรณีใส่สีเป็นพื้นหลัง
#sidebar-outer {
background: #รหัสสีที่ต้องการ none repeat scroll 0 0;
padding-bottom:20px;
}
หมายเลข 7 การใส่พื้นหลังให้กับ Footer
- กรณีใส่รูปเป็นพื้นหลัง
#foot-block {
background: transparent url(url ไฟล์รูปที่เราต้องการ) repeat scroll 0 0;
border-top: medium none;
color: #รหัสสีที่ต้องการ; --> สีของข้อความ (#FFFFFF คือสีขาว)
padding: 12px 0 12px 6px;
}
- กรณีใส่สีเป็นพื้นหลัง
#foot-block {
background: #รหัสสีที่ต้องการ none repeat scroll 0 0;
border-top: medium none;
color: #รหัสสีที่ต้องการ; --> สีของข้อความ (#FFFFFF คือสีขาว)
padding: 12px 0 12px 6px;
}
หมายเหตุ :
สีคราม หมายถึง รูปแบบของ Code ที่ต้องใส่
สีแดง หมายถึง ใส่รหัสของสี หรือ Url รูปที่ต้องการระหว่าง # และ ;
สีชมพู หมายถึง คำอธิบายเพิ่มเติม ไม่จำเป็นต้องใส่เข้าไปค่ะ
ขนาดของรูปกราฟิกที่นำมาใช้งาน
ขนาดของรูปกราฟิกที่นำมาใช้ในแต่ละส่วน โดยขนาดของความกว้างและความสูงต่อไปนี้นั้น เป็นขนาดที่แนะนำไว้ ซึ่งเป็นขนาดที่เท่ากับส่วนต่างๆ ที่ได้แสดงไว้บนหน้าเว็บไซต์ปัจจุบัน อาจมีการเพิ่ม-ลดขนาดความสูงได้ตามความเหมาะสม
- ขนาดของรูป Background = 964 x ตามความต้องการ px
- ขนาดของรูปในส่วน Head = 940 x 132 px
- ขนาดของรูปพื้นหลัง breadcrumbs-top และ breadcrumbs-bottom = 940 x 28 px
- ขนาดของรูปพื้นหลังให้กับ หัวข้อเมนูบน Sidebar = 300 x 20 px
(สารบัญ,ข่าวล่าสุด,ข่าวล่าสุด,กิจกรรมที่กำลังจะเกิด,พอดคาสต์ล่าสุด,เกี่ยวกับเว็บไซต์นี้,ติดต่อ) - ขนาดของรูปที่ใช้ในการตกแต่ง Sidebar = 300 x ตามความต้องการ px
(ส่วนใหญ่จะมีความสูงไม่มาก เป็นรูปลายพื้น หรือสีพื้นแล้วให้มัน repeat) - ขนาดของรูปที่ใช้ในการใส่พื้นหลังให้กับ Footer = 940 x 56 px
- ขนาดของรูปที่จะนำมาประกอบในส่วนทางขวาที่ใช้แสดงข้อมูลของหน้าเพจ = 630 x ตามความเหมาะสม px
ลองทำตามวิธีข้างบนนี้ดูก่อนนะคะ หากติดตรงไหน โค้ดส่วนใดไม่แสดงผล รบกวนแจ้งเพื่อทราบหรือมีคำแนะนำเพิ่มเติมแลกเปลี่ยนกันได้เลยค่ะ ยินดีอย่างยิ่งค่ะ หรือต้องการติดต่อทีมงานสามารถส่งอีเมลมาได้ที่ [email protected]portal.in.th
บันทึกนี้เขียนที่ GotoKnow โดย เก๋น้อย ใน ประชาสัมพันธ์และเทคนิคการใช้งาน Portal.in.th
สวัสดีค่ะคุณเก๋น้อย..สาระดีมีประโยชน์ค่ะ
มีข้อสงสัยว่า ถ้าจะเพิ่มรายการเมนูทางซ้ายจะใช้คำสั่งอะไร หรือตั้งค่ายังงัยครับ