เว็บสวย..ง่ายนิดเดียว..เราทำได้

อ่า...ในที่สุดก็มาแล้วค่ะ บันทึกการตกแต่งหน้าเว็บไซต์ที่สร้างจาก 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]