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

  • จากคุณ 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>