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 41 comments Last Update : 4 กุมภาพันธ์ 2548 3:15:48 น. Counter : 1701 Pageviews. Share Tweet

มาลงชื่ออ่านคนแรก โย่ว! ว่าแต่ว่าตีสามกว่านี่ทำไมยังตื่นอยู่หว่า ไม่ได้อยู่เมืองไทยเหรอเนี่ยคับ   โดย: รำเพย 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 กันบ่อยๆ สิครับ รับรอง ได้จ๊าบกันทุกคนแน่ๆ เลย อิอิ   โดย: กึ่งยิงกึ่งผ่าน 4 กุมภาพันธ์ 2548 18:25:37 น.

ชายเมืองนนท์ มาเยี่ยมจ้าาาา   โดย: ชยานนท์ 4 กุมภาพันธ์ 2548 21:02:13 น.

อืม.. ง่ายนิดเดียว ที่เหลือไม่รุ้เรื่องเลย .. -_-"   โดย: 5150_b IP: 202.133.166.146 4 กุมภาพันธ์ 2548 21:38:51 น.

click ที่ม่อน แล้วม่อนจะพาไป =========================== ซับซ้อน ซ่อนเงื่อนมากๆเลย ของหนูทำได้แค่นี้ก็ดีใจแล้ว ^^   โดย: THE BEGINNING 4 กุมภาพันธ์ 2548 23:25:14 น.

แวะมาเยี่ยมค่ะ : )   โดย: แดดเช้า 4 กุมภาพันธ์ 2548 23:57:46 น.

comment อันนี้ห้ามลบ ฮิฮิ =)   โดย: ปุ้ม หญิง 5 กุมภาพันธ์ 2548 5:46:07 น.

แล้วเรา จะ ทำเปง มะเนี่ย 55555555   โดย: ZaE (แม่สาย ) 5 กุมภาพันธ์ 2548 6:29:47 น.

. .ยอม ๆ   โดย: d4b IP: 202.28.34.245 5 กุมภาพันธ์ 2548 6:55:15 น.

CooL มั่กๆ จะพยายามลองทำดู คาราวะอาจารย์คร๊าฟ   โดย: มังกรสยาม 5 กุมภาพันธ์ 2548 14:23:20 น.

รำเพย say : ฮี่ๆๆๆๆ ความบ้าอยู่ที่ไหน ความพยายามอยู่ที่นั่นไงคับ โฮะๆๆๆๆๆๆ กว่าจะเสร็จตาลายหมดเลย   โดย: รำเพย 5 กุมภาพันธ์ 2548 14:56:39 น.

ทำสำเร็จแล้วมีรางวัลรึเปล่าคะ 5555555 (บอกแล้วว่าเราก๊อบเก่ง)   โดย: รำเพย 5 กุมภาพันธ์ 2548 15:06:02 น.

มาดูเฉย ๆ แต่ไม่ทำตามหรอกค่ะ ความขี้เกียจมีมากกว่าเย๊อะ อิ อิ อิ อิ อิ   โดย: นางมารร้าย 6 กุมภาพันธ์ 2548 0:17:21 น.

เจ๊รำเพยนี่มีความกระตือรือล้นในการเรียนรู้เยอะเจงๆ   โดย: หมาร่าหมาหรอด 6 กุมภาพันธ์ 2548 10:23:20 น.

กึ่งยิงกึ่งผ่าน say : เจ๊รำเพยลืมเปลี่ยน link ตรงรูปอ่ะ .. อิอิ   โดย: กึ่งยิงกึ่งผ่าน 6 กุมภาพันธ์ 2548 22:16:10 น.

รีกแท้อยู่หนใด say : ทำไมของผมมันเป็นเงี้ยอ่า   โดย: รักแท้อยู่หนใด 6 มีนาคม 2548 15:13:52 น.