หัวบล็อค จากคุณครู

รวบวิธีแก้ไขหัวบล็อคจากคุณครูชาวบล็อค

วิธีที่รวบรวมมาให้ลองทำดูแล้ว ทำตามได้ค่ะ เหมาะสำหรับมือใหม่จ้ะ

จากคุณ RO_NUQA แนะนำเรื่องคำอธิบายและวิธีการจัดทำการทำรูปใน PhotoShop สำหรับนำมาใช้เป็น Title blog(หัวบล็อค)
(มีทั้งหมด 11 หน้า เนื่องจากไฟล์มีขนาดใหญ่จึงแบ่งเป็น 3 ไฟล์)

หน้าที่ 1 - 4
           http://gotoknow.org/file/rattanuqa/Title-blog-test-CS-1.pdf

หน้าที่ 5 - 7
           http://gotoknow.org/file/rattanuqa/Title-blog-test-CS-2.pdf

หน้าที่ 8 - 11
           http://gotoknow.org/file/rattanuqa/Title-blog-test-CS-3.pdf

จากคุณnutim แนะนำความหมายของภาษาใน css

div#title{padding: 15px 4px 75px;    font-size: xx-small;color:#EE9058;       background:#000099;   background-image:url("/file/nutubtim/1156480964[1].gif");     background-repeat:no-repeat;   background-position:center center;   height:15px;}div#title span {display:none;}
div#container {width: 860px;}

div#content2 { width: 600px;}
div#sidebar2 { width: 260;}

div#container {width: 860px;} (พื้นที่ตรงกลาง +พื้นที่บล็อกขวามือ)

div#content2 { width: 590px;} (พื้นที่ตรงกลาง)(อันนี้เวลานำภาพต่างๆมาใส่ในบันทึกความกว้างไม่ควรเกิน580px ไม่งั้นจะเบียดพื้นที่บล็อกขวามือตกไปข้างล่างได้ค่ะ)

div#sidebar2 { width: 270;} (พื้นที่บล็อกขวามือ)(อันนี้เวลานำสไลด์หรือนาฬิกามาใส่ ขนาดของสไลด์ และนาฬิกาไม่ควรเกิน 230x230ไม่งั้นพื้นที่บล็อกทางขวามือจะตกไปอยู่ด้านล่าง ไม่สวยค่ะ)

ต่อไปรูปหัวบล็อกต้องตกแต่ง(Photoshop)ให้มีขนาด width=860 ,height=110 นะคะ(ถ้าต้องการให้หัวบล็อกพอดีกับพื้นที่ตรงกลาง+พื้นที่บล็อกขวามือ แต่ถ้าต้องการให้เล็กกว่าหัวบล็อกก็ Resize ให้เล็กลงได้ค่ะ)

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

จากคุณ  feriona  อธิบายตัวภาษาใน css อีกมุมหนึ่งค่ะ
div#title{padding: 10px 4px 35px;
font-size: big; color:#9b2542; 
background:#9b2542;

font-size: big; คือ ขนาดของตัวอักษรค่ะ ซึ่งสามารถแก้ไขได้หลายรูปแบบในที่นี้ จะขอยกตัวอย่างที่นิยมใช้กันนะคะ ได้แก่
font-size: big;
font-size: medium;
font-size: small;

color:#9b2542; คือ สีของภาพที่เราจะใช้เป็นพื้นหลังค่ะ ในที่นี้เป็นสีแดง ก็ใช้รหัสสีนี้ค่ะ ที่ใช้รหัสสีเนื่องจากว่า เราจะได้ให้สีของ "ชื่อบล็อก"กลมกลืนไปกับสีของพื้นหลังที่เราจะใช้เป็น"หัวบล็อก"ค่ะ

background:#9b2542; คือ สีของพื้นหลัง อาจจะให้เหมือนกันกับสีของรูปภาพที่เป็นหัวบล็อกก็จะดูกลมกลืนค่ะ

 สรุปขั้นตอนการทำหัวบล็อค

1. สร้างภาพขนาด 860x110 px.

2.นำรูปขึ้นเก็บใน blog โดยเลือก ไฟล์อัลบั้ม แล้วทำตามขั้นตอน

3. copy ที่อยู่ของภาพไว้

4. เลือกบล็อคที่ต้องการแก้ไขหัวบล็อค   เลือกตกแต่งบล็อค แล้ว copy ข้อความข้างล่างนี้ไป pasteในช่อง css ที่ตกแต่งมาเอง

div#title{padding: 15px 4px 75px;    font-size: xx-small;color:#EE9058;       background:#000099;   background-image:url("/file/nutubtim/1156480964[1].gif");     background-repeat:no-repeat;   background-position:center center;   height:15px;}div#title span {display:none;}
div#container {width: 860px;}

div#content2 { width: 600px;}
div#sidebar2 { width: 260;}

 5. แก้ไขเพื่อนำรูปหัวบล็อคที่เราทำมาลงแทนรูปเดิม ให้แก้ไข<h4>file/nutubtim/1156480964[1].gif  โดยใช้คำสั่ง paste ที่เรา copy ที่อยู่ของรูปเราวางได้เลย</h4><p>6. บันทึกก็ เรียบร้อยจบ</p>