เทคนิคในการแต่งเฮดบล็อก

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

ก็ ดูเก๋ไปอีกแบบนึง วิธีในการทำก็ไม่ยากอะไรเลย ถ้าหากคุณมีความสามารถที่จะแปะ cbox หรือ shoutboxได้ ดังนั้นถ้าจะทำอย่างในเอนทรี่นี้ไม่ยากเลย

ก่อน อื่นต้องเข้าใจหลักการเบื้องต้นนิดนึงครับว่าเราสามารถที่จะสร้างเจ้า ตัวลิงค์ที่ว่าเนี่ยบน #neck และ #sidebar(ตัวหลังให้ลองขยายความกว้างให้เท่ากับ ความกว้างบล็อกลองดูสิ)จะสาธิตให้ชมตั้งแต่เป็นบล็อกแรกเกิดเลยนะ โดยจะใส่ทั้งข้อความ รูปภาพ และเครื่องเล่นเสียงของ ijigg ลงไป...

หน้าตาบล็อกแรกเกิด.. ที่ยังไม่ได้แต่งอะไรเลย

เพื่อความเข้าใจง่ายๆ และเป็นลำดับขั้นตอน จะใส่ข้อความทั่วไปลงไปก่อน

ลาก Custom Code ลงไปที่ Top Menu แล้วก็จัดการใส่ div

แนะนำว่าให้ครอบข้อความ หรืออะไรก็ตามแต่ด้วย div แล้วก็ปิดท้ายคำสั่งตามรูปข้างต้น

ตัวอย่าง นะ จะเห็นว่ามันใส่ได้เป็นพรืดๆแบบนี้ ไม่สวย... จะทำยังไงให้สวยละ เราก็ต้องแบ่งย่อยพื้นที่div ตรงนั้นตามความต้องการของเรา แล้วจึงเขียน div class เพิ่มเข้าไป เริ่มจากการจินตนาการหน้าบล็อกก่อน

สำหรับ บล็อกแรกเกิด ขนาดของ Top Menu จะกำหนดมาที่ 730px และจากรูปข้างต้น จะใส่กล่องข้อความ รูปภาพ และ ตัวเครื่องเล่น ijigg ที่ย่อขนาดลงมานิดหน่อย (ท้ายเอนทรี่จะสอนการย่อขนาด และ ปิดการเล่นเองอัตโนมัติให้)

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

ความกว้างรวม =ความกว้างbox1 + ความกว้างbox2 + ความกว้างbox3 + ค่าmarginซ้ายขวา +ค่าpaddingซ้ายขวา

ถึงตอนนี้อาจจะงง เดี๋ยวลองมาดูตัวอย่าง css code ที่เขียนนะ เอาไปใช้ได้เลย สำหรับบล็อกที่เซท neck .module กว้าง 730px

.sample{
width:730px
}

.sample .box1{
float:left;
width:200px;
margin:0 10px 0px 0px;
padding-left:10px; /*เพื่อดันตัวหนังสือให้เสมอกับ page */
}

.sample .box2{
float:left;
width:200px;
margin:0 10px 0px 10px;
}
.sample .box3{
float:left;
width:280px;
margin:0 0px 0px 10px;
}

อธิบายขยายความ

.sample คือกล่องใหญ่ที่ครอบกล่องสามใบ (box1, box2, box3) เซทกว้าง 730px เท่ากับ #pagemenu

.sample .box1 เน้นตรงจุดๆนั่นนะครับ มีความสำคัญ เพราะเราจะเรียกใช้ box1 ในรูปของ classซึ่งมันแตกต่างไปจากการเขียนแบบนี้ .sample box1 อันนี้ไม่มีความหมาย...

และ ที่สำคัญอย่าลืมใส่ float เพราะถ้าเราไม่ใส่ กล่องสามใบมันจะขี่คอกันแทนที่จะเรียงกันนะสิ และจากสูตรข้างบนผมจะเหลือพื้นที่ว่างในนั้นเท่ากับ 0 คือไม่เหลือพื้นที่ไว้เตะตระกร้อ

จากนั้นเราก็เข้าไปแก้ Custom Code กัน โดยจะเขียนhtmlแบบนี้

สิ่งเดียวที่เหลือ คือ ชีวิตว่างเปล่า

ที่เดิมที่เคยมีเราสองคนหายไป

โปรดเถอะ คนดี คนๆนี้รู้สึกช้าไป

บอกเธอให้ฟังเอาไว้ แม้จะสายเกินไป

แต่ยังรักเธอ...

เห็นโค้ดมาเป็นก้อนๆ อาจจะงง ขออธิบายหลักการเขียน html ง่ายๆดังนี้นะ

1. เขียนจากข้างนอกไปหาข้างใน เริ่มแบบนี้ โดยเรียกใช้ class .sample ก่อน

2. เขียนจากบนลงล่าง โดยไล่เขียนกล่องทั้ง3ใบให้ครบ

...........
...........
...........

3. แล้วจึงแยกทำ html ในแต่ละ class และหน้าตาของบล็อกแต่งเสร็จแล้วจะประมาณนี้

แยกส่องกล่องแต่ละใบ

สำหรับเครื่องเล่น ijigg การย่อขนาดตัวเล่นเสียง ijigg ให้ลบพารามิเตอร์ scale='noscale' ทิ้งไปเลย และการปิดเล่นอัตโนมัติให้เปลี่ยนค่า Autoplay='1' เป็น 0 ซะในส่วนนี้มีสองจุด ลองมองหากันเอาเองนะ

ข้อ ดีของการแต่งเฮดบล็อกในรูปแบบนี้ก็คือ มันจะถูกอ่านในทุกๆหน้าบล็อกของเรา จึงเหมาะสำหรับใช้เป็นข้อความทักทาย, เอาไว้โชว์ของ, ทำเป็น Index(มันขึ้นแน่ๆทุกหน้า) โชว์ลิงค์ไปยังหน้าบล็อกที่อยากให้ผู้เข้าชมบล็อกของเราเข้าไปอ่าน เนื่องจากมันจะสะดุดตากว่าส่วนไซด์บาร์ ส่วนการประยุกต์นอกเหนือไปจากนี้ ก็แล้วแต่ท่านๆกันแล้วนะ พื้นฐานมันก็มีเท่านี้เอง

ที่มา: http://palermos.exteen.com/