คลังเก็บของของมิสะ

ลำดับตอนที่ #145 : สีพื้น

รูปนี้สำหรับโค๊ดส่วน div#page, div#content2, div#sidebar2 และ body ค่ะ

เราจะแบ่ง code เป็นส่วนแล้วอธิบายตามสีกรอบในรูปนะ

div#page {width: 810px;
โค๊ดนี้เป็นส่วนความกว้างของบล็อกค่ะ จากโค๊ดสุกำหนดให้เป็น 810px ค่ะ (ซึ่งจริงๆ แล้ว สามารถเปลี่ยนแปลงขนาดได้นะคะ ไม่จำเป็นต้อง 810px ก็ได้ค่ะ)

border: dashed 3px #BD0722;}
ส่วนนี้เป็นโค๊ดของเส้นขอบของบล็อกค่ะ สามารถกำหนด ลักษณะ สีและขนาดของเส้นได้ แต่ไม่ควรมีขนาดใหญ่เกินไปนะคะ เพราะจะทำให้จุดสนใจไปอยู่ที่เส้นขอบ แทนที่จะเป็น header ค่ะ

div#content2 {width: 579px;
อันนี้เป็นโค๊ดส่วนที่อยู่ในกรอบสีส้มนะคะ สามารถกำหนดความกว้างได้ค่ะ จากโค๊ดสุกำหนดเป็น เป็น 579px ค่ะ รูปที่จะนำมาใส่ส่วนนี้อาจจะกว้าง 579px หรือมีขนาดเล็กกว่าก็ได้ ส่วนความยาวฟรีสไตล์เลยค่ะ

background-image: url("/file/tozusu/content2x%27mas.jpg");
bg ของส่วน content2 ให้แทนที่ url ของรูปในโค๊ดด้านบนตรงส่วนที่เป็นสีแดงที่สุทำไว้ค่ะ

background-repeat:no-repeat;
จะกำหนดให้ background-repeat เป็น repeat หรือ no-repeat ก็ได้นะคะ แต่ของlใช้ no-repeat เพราะต้องการให้มีรูปหมีแค่รูปเดียวค่ะ

background-position:left top;}
background-position ใช้กำหนดตำแหน่งของรูปภาพที่เป็น bg ของส่วน content2 ค่ะ เช่น left top ก็คือ ซ้ายบน

div#sidebar2 {width: 221px;
background-image: url("ใส่ url รูกตรงนี้ค่ะ");
background-repeat:no-repeat;
background-position:left top;}
เป็นส่วนของเมนูด้านขวามือค่ะ จากโค๊ดกำหนดความกว้างเป็น 221 px ค่ะ แนะนำว่าถ้าใช้ container เป็น 810 px ให้แบ่งทั้งสองฝั่ง(div#content2 และ div#sidebar2) ตาม code นี้เลยค่ะ เพื่อความสวยงาม ซึ่งส่วนนี้ก็สามารถใส่พื้นหลังได้เหมือนส่วน content2 ค่ะ

div#page-wrapper{background:#BD0722 ;
background-image: url("/file/tozusu/bgbear.jpg");
background-repeat:repeat;}
อันนี้เป็นส่วนของ bg ของบล็อกค่ะ เอา url ของรูปมาแทนที่ส่วนที่เป็นสีแดงใน code อันนี้ต้องกำหนดให้ repeat นะ ขนาดของ bg ก็ไม่ควรใหญ่มาก เพื่อให้สามารถแสดงผลได้เร็วขึ้น ในส่วนที่เป็น code สีถ้าใส่รูปแล้วจะใส่สีอีกหรือไม่ก็ได้นะ

มาถึงส่วน header แล้วค่ะ
div#title {padding:80px 60px 45px;
font-size:medium;
color:#ffffff;background:#FDC8D0;
ส่วนนี้ใช้กำหนดข้อความชื่อบล็อกนะ padding คือ ตำแหน่งของข้อความ อันนี้ต้องลองผิดลองถูกเอานะ เพราะสุเองก็เปลี่ยนอยู่หลายรอบกว่าจะได้ตามที่ต้องการ สามารถกำหนดสีข้อความด้วย ส่วน สีของ bg ถ้ามีรูปแล้วจะไม่ใส่ไว้ก็ได้ค่ะ

background-image:url("/file/tozusu/headblogbear.jpg");
ส่วนนี้ก็เหมือนเดิม ใส่ url รูปแทนที่สีแดงใน code ความสูงของรูปส่วนนี้แนะนำว่าไม่ควรเกิน 150 px นะ เพราะวันก่อนเราทำอันใหญ่อาจารย์จันทวรรณบอกให้เราลดขนาดลงมา

background-repeat:no-repeat;
ใช้คำสั่ง no-repeat เพื่อแสดงรูปเพียงครั้งเดียว

background-position:center center;height:70px;}
ส่วนนี้ก็อธิบายแล้วข้างบนนะคะ เพียงแต่ส่วนนี้เป็นของ bg headblog เท่านั้นเอง

รูปนี้สำหรับโค๊ดส่วน from, textarea และ td.calendar_link  ค่ะ

form{
background-image:url("/file/tozusu/content2bear.jpg");
background-repeat:repeat;
background-position:center bottom;
background-color:#FFFFFF;}
อันนี้เป็นส่วนของข้อคิดเห็นนะคะ code ส่วนนี้คงจะพอเดาๆ กันได้จาก code อื่นๆ ที่ผ่านมาแล้วนะคะ ส่วนนี้ใส่หรือไม่ใส่ก็แล้วแต่ค่ะ เพราะส่วนตัวสุให้ความสำคัญกับสามส่วนแรกมากกว่าค่ะ

textarea{ width: 579px;}
ส่วนนี้เป็นส่วนที่อยู่ในกรอบสีม่วงค่ะ สามารถใส่ bg ได้เช่นกัน โดย copy โค๊ต background จากส่วนอื่นมาใส่ได้เลยค่ะ

td.calendar_link
ส่วนปฎิทินก็สามารปรับแต่งได้นะคะ ปัทเขียนบันทึกไว้ละเอียดเลยค่ะ ลองเข้าไปดูนะคะ http://learners.in.th/blog/os4735858/12630

รูปนี้สำหรับโค๊ดส่วน footer ส่วนสุดท้ายแล้วค่ะ

div#footer {
 font-size: 0.8em;
 clear: both;
 color: #FFFFFF;
 background-image:url("ใส่ url ของรูปตรงนี้ค่ะ");}
ส่วนfooter ก็สามารถใส่รูปได้ค่ะ โดยกำหนดความกว้างของรูปเป็น 810px ซึ่งเท่ากับส่วน header ค่ะ ความสูง 150px ก็น่าจะให้ได้ค่ะ

ไม่อยากบอกเลยว่านั่งพิมพ์บันทึกนี้มาหลายชั่วโมง แล้ว(จะบ่นว่าเมื่อยน่ะค่ะ อิอิ) หวังว่าเพื่อนๆ คงได้ใช้ประโยชน์กันนะ เริ่มต้นทีละนิดดีกว่าไม่ทำอะไรเลยนะคะ คืนนี้ราตรีสวัสดิ์เลยละกัน ฝันดีจ้าทุกคน