Bloggang.com : กึ่งยิงกึ่งผ่าน : Extended Bloggang Background

Extended Bloggang Background

พูดถึง Background ของความเห็นใน bloggang ต่างๆ ก็เห็นหลายๆ คนทำกันเยอะแยะเลย ผมก็เลยทำของตัวเองให้เป็น MSN อย่างที่เห็นในรูป

แล้วทีนี้ก็มีเพื่อนๆ สงสัยกันมากว่าทำยังไง เพราะว่าไม่ใช่แค่ใส่ properties ของ table tag ว่า background เฉยๆ เพราะขนาดของ MSN มันขยายตามข้อความที่ผมพิมพ์มากพิมพ์น้อย หรือไม่ก็ถ้าผมใส่รูปมันก็ขยายตามไปด้วยอย่างไม่ผิด scale

ไม่ยากเลยครับ .. แค่จัด layout มันดีๆ โดยใช้ <Table> เป็นตัวช่วยจัด ซึ่งได้ผลดีมาก (ใครที่เป็นคนทำเว็บคงจะรู้ ว่ามันต้องทำยังไง)

ซึ่งผมตัดแบ่ง table ของผมเป็นแบบนี้ครับ 4 rows , 1 column และใน row 1,2 และ row สุดท้ายนั้น ผมก็ใส่ table ซ้อนเข้าไป 1 row, 3 column ส่วน row ที่ 3 ซึ่งเป็นที่จะพิมพ์ข้อความนั้น ผมตัดแบ่งเป็น 1 row 3 column เหมือนกัน แต่จะมีซอยย่อยลงไปอีก .. งงไหม .. ถ้าดูรูปแล้วจะไม่งงครับ

จากในรูปนะครับ border สีดำ จะแสดงให้เห็นถึง table ใหญ่ว่ามีการจัดแบ่งอย่างไร และ table ที่ border สีแดง ก็จะเป็นการจัด table ย่อยลงไปใน แต่ละ td ของ table ใหญ่อีกทีครับ

คงจะพอเข้าใจเรื่องของการจัด layout ของ table ที่ผมทำกันแล้วนะครับ คราวนี้มาถึงรูปที่ผมเอามาทำกันบ้าง มันก็ต้องมีกรรมวิธีเช่นกันครับ ..

ผมทำโดยไป captured ภาพ MSN มา แล้วเอาไปเข้า Photoshop แล้วก็ตัดแบ่งออกเป็นส่วนๆ ซึ่งก็แสดงในภาพนี้ครับ

แต่การตัด ผมก็ไม่ได้ตัดเอาซะทุกอย่าง ซึ่งจริงๆ แล้ว ผมตัดออกมาเป็นชิ้นๆ อย่างนี้

จะเห็นว่าภาพชิ้นเล็กๆ ที่ผมวงสีส้มเอาไว้นั้น มันเล็กจังเลย แล้วจะทำยังไงล่ะ คืออย่างนี้นะครับ ภาพใหญ่ๆ ที่มีรายละเอียดอื่นๆ ผมจะใส่มันเข้าไปเป็น <img src..> แต่สำหรับจุดที่จะให้มันยืดหดได้ตามความยาวหรือความสูงของข้อความนั้น ผมจะใช้ background ใส่เข้าไปใน <td> ดังนี้ครับ

<td background="...." ... >

เมื่อใส่เข้าไปอย่างนี้แล้ว ทุกส่วนของ td นั้นที่มีการยืดขยายไป ก็จะมีภาพของเจ้าชิ้นเล็กๆ ของเรานี้กระจายไปทั้ง td ... นี่คือเหตุผลว่าทำไมผมจึงตัดชิ้นเล็ก แล้วมีลักษณะของภาพที่ตายตัว ไม่เหมือนกับภาพใหญ่อื่นๆ ก็เพราะว่า เมื่อเอาภาพเดียวกันนี้มาต่อกันยาวๆ มันจะเหมือนเป็นภาพเดียว และไม่มีการสะดุดของภาพยังไงล่ะครับ

เมื่อจัดการมาได้ทั้งรูปภาพ และ layout ที่ร่างเอาไว้ ทีนี้เราก็จะเอาทั้งหมดมารวมกัน ทำเป็น HTML กันเสียที ผมก็ใช้ Macromedia Dreamweaver เป็นตัวช่วยจัด layout ซึ่งเมื่อจัดเสร็จแล้ว ก็ปรับ properties ของ table ดังนี้ Cellpadding , Cellspacing , Border ให้เป็น 0 ให้หมด

หลังจากนั้น ก็ upload รูปภาพที่ทำเอาไว้เป็นชิ้นๆ ไว้บน Server แล้วที่ HTML ผมก็อ้างที่ src ของแต่ละจุดให้ไปที่ url ของภาพที่ผม upload ขึ้นไป

คราวนี้ผมก็เก็บ HTML ตัวนั้นไว้ แล้วก็ mark เอาไว้ว่า ตำแหน่งใดที่จะพิมพ์ข้อความเข้าไป แล้วก็ save เก็บเอาไว้ จะใช้เมื่อใดก็เรียกขึ้นมาแก้ไขเฉพาะตรงนี้ แล้วก็ copy ไป paste ลงที่ช่องกรอกความเห็น..

.... ก็เท่านี้ล่ะครับ

แต่ .... มีสิ่งสำคัญมากๆ อย่างหนึ่ง ที่จะบอกไว้ก่อนคือ

HTML ใดๆ ก่อนและหลังข้อความ ห้าม มี "การเว้นบรรทัด" โดยเด็ดขาด .. ทั้งนี้เพราะ cgi ที่รับค่าข้อความเข้าไปนั้น จะตีความหมายการขึ้นบรรทัดใหม่ให้เป็น <br< ซึ่งจะทำให้ table ของเราเพี้ยนทันทีเลยครับ

อันนี้เป็นคร่าวๆ นะครับ จริงมีส่วนอื่นอีกนิดหน่อยคือ ที่รูปผม สามารถคลิกได้ อันนี้ก็ไม่มีอะไร ก็แค่ทำ image map แค่นั้นเองครับ และตัวหนังสืออะไรใดๆ ก็แค่ใส่ <font..> ให้มันเท่านั้นเองครับ ถ้าจะใส่รูปข้างในก็ใส่ <img ..> ก็นี่ล่ะครับ ง่ายๆ

คนอื่นๆ จะเอาไปดัดแปลงอะไรเพิ่มเติมอีกก็ได้นะครับ แต่อยากจะบอกว่า ก่อนเอาไปใช้ที่ bloggang ของใครก็ตาม ให้ test กับ blog ของเราให้เรียบร้อยเสียก่อน จะได้ไม่ทำ blog ของคนอื่นเสีย layout นะครับ

ขอให้ไอเดียบรรเจิด
ขอให้กระเป๋าตุง ทุกผู้ทุกคนนะครับ

ปล. ขอขอบคุณคุณ jetboat ที่ให้ยืมเนื้อที่ในการวางไฟล์นะครับ ถ้าไม่ได้คุณ jetboat นี่แย่เลย แหะๆๆๆๆ

Create Date : 04 กุมภาพันธ์ 2548

Last Update : 4 กุมภาพันธ์ 2548 3:15:48 น.

41 comments

Counter : 1699 Pageviews.

มาลงชื่ออ่านคนแรก โย่ว! ว่าแต่ว่าตีสามกว่านี่ทำไมยังตื่นอยู่หว่า ไม่ได้อยู่เมืองไทยเหรอเนี่ยคับ

โดย: รำเพย

วันที่: 4 กุมภาพันธ์ 2548 เวลา:3:59:49 น.

รอยหยักเต็มสมองไปหมดเรยน้ากึ่ง

โดย: คิดตึ๋งมาก IP: 202.57.159.197 วันที่: 4 กุมภาพันธ์ 2548 เวลา:4:00:32 น.

โอวพี่ เทคนิคมากมายมหาศาล

โดย: แพนด้า IP: 61.91.184.144 วันที่: 4 กุมภาพันธ์ 2548 เวลา:4:04:06 น.

man... i'm too dumb for this... LOL...

โดย: แมวเหมียวพุงกาง

วันที่: 4 กุมภาพันธ์ 2548 เวลา:4:10:34 น.

เคยแอบสงสัยอยู่กะเขาเหมือนกันว่าทำยังไง อิอิ
ไอเดียบรรเจิดจริงๆ ค่ะ +++++

โดย: กำปงพิราเทวี

วันที่: 4 กุมภาพันธ์ 2548 เวลา:4:22:42 น.

ยุ่งยากชมัดเลย ผมคงทำตามไม่ได้เป็นแน่ เพราะโง่คอม เฮ่อ

โดย: joblovenuk (joblovenuk

) วันที่: 4 กุมภาพันธ์ 2548 เวลา:4:36:06 น.

^^

เป็นอย่างงี้นี่เอง

โดย: hedgehog IP: 203.145.13.229 วันที่: 4 กุมภาพันธ์ 2548 เวลา:5:32:33 น.

โห ไอ้เราก็พาซื่อตอนแรกใครมาถาม
"คห.อีตากึ่งเค้าทำไงๆๆ"
ผมดันบอกไปว่า เค้าเป็นญาติกับBill Gates เลยได้สิทธิพิเศษ ตอบกระทู้เป็นmsnได้ ง่ะ
-_-'

โดย: หมาร่าหมาหรอด

วันที่: 4 กุมภาพันธ์ 2548 เวลา:6:57:56 น.

เจ๋งดีค่า ได้ความรู้เพิ่มอีกหล่ะ

โดย: prncess

วันที่: 4 กุมภาพันธ์ 2548 เวลา:8:53:51 น.

ไม่เข้าใจ...????????

โดย: nausicaa IP: 202.142.193.16 วันที่: 4 กุมภาพันธ์ 2548 เวลา:9:43:05 น.

T_T

โดย: nausicaa IP: 202.142.193.16 วันที่: 4 กุมภาพันธ์ 2548 เวลา:9:44:07 น.

เทคนิคเยอะมากครับ ...
ความพยายามสูงมากๆ

โดย: เป๊ก IP: 202.143.177.67 วันที่: 4 กุมภาพันธ์ 2548 เวลา:9:45:10 น.

โหยยย สุดยอดไปเลย

ว่าแต่ หนูจะทำได้มั้ยเนี้ย

โดย: ช้อนชาฯ จอมคร่ำครวญ IP: 203.149.59.130 วันที่: 4 กุมภาพันธ์ 2548 เวลา:10:05:56 น.

ZZZZZZZZZZZzzzzzzzzzzzzzzzzzz

โดย: N4

วันที่: 4 กุมภาพันธ์ 2548 เวลา:10:20:42 น.

เนียนๆ พี่ เนียนๆ

โดย: jb IP: 203.150.108.80 วันที่: 4 กุมภาพันธ์ 2548 เวลา:10:22:45 น.

เฮ้ยทำไมมันซับซ้อนงี้ฟะ

เฮ้ยท่านๆเปิดติวการตกแต่งบล๊อกสิ สาวๆมาเรียนเพียบแน่เลย ฮ่ะๆๆ

โดย: เครา IP: 61.91.144.117 วันที่: 4 กุมภาพันธ์ 2548 เวลา:11:18:07 น.

ไม่รู้เรื่องเลยว่ะ ขอเป็นผสมโซดาแก้วนึงแทน

โดย: กลัวที่หนาย

วันที่: 4 กุมภาพันธ์ 2548 เวลา:11:19:14 น.

แง้ง สละสิทธิ์ดีกว่า มึนนนนนนนน

โดย: Together In 80s Dream

วันที่: 4 กุมภาพันธ์ 2548 เวลา:13:17:28 น.

หนูสละสิทธิ์ ทำม๊ะเปง ยากจังเลยหงะทั่น

โดย: น.ส.มารร้าย

วันที่: 4 กุมภาพันธ์ 2548 เวลา:13:29:31 น.

....โห..เจ๋งจังเลย....
.....อย่าลืมแวะไป Blog หนูหน่อยนะคะ.....

go to nu_noiy’s blog

โดย: nu_noiy

วันที่: 4 กุมภาพันธ์ 2548 เวลา:13:33:13 น.

เมื่อไหร่เขียนเรื่องใหม่บอกกันมั่งนะคะ

โดย: รำเพย

วันที่: 4 กุมภาพันธ์ 2548 เวลา:15:23:27 น.

กึ่งยิงกึ่งผ่าน say :
ก็ไม่ได้ล้ำลึกอะไรมากหรอกครับ ทำบ่อยๆ เดี๋ยวก็ชำนาญเองครับ
ลองหัดทำ HTML กันบ่อยๆ สิครับ รับรอง ได้จ๊าบกันทุกคนแน่ๆ เลย อิอิ