Group Blog
 
<<
กุมภาพันธ์ 2548
 12345
6789101112
13141516171819
20212223242526
2728 
 
4 กุมภาพันธ์ 2548
 
All Blogs
 

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 : 1259 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 กันบ่อยๆ สิครับ รับรอง ได้จ๊าบกันทุกคนแน่ๆ เลย อิอิ
 
 
:: go to my BLOG ::

 

โดย: กึ่งยิงกึ่งผ่าน 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 ตรงรูปอ่ะ .. อิอิ
 
 
:: go to my BLOG ::

 

โดย: กึ่งยิงกึ่งผ่าน 6 กุมภาพันธ์ 2548 22:16:10 น.  


 

 

















 





 

รีกแท้อยู่หนใด say :

ทำไมของผมมันเป็นเงี้ยอ่า











 






 

บล็อกของข้าพเจ้า


 



โดย: รักแท้อยู่หนใด 6 มีนาคม 2548 15:13:52 น.  

 

ขออนุญาตเรียกพี่นะคะ
ยอดเยี่ยมไปเลยค่ะพี่กึ่ง แล้วมือใหม่อย่างเราจะไปลองทำตามบ้างนะคะ
ขอบคุณสำหรับความรู้ค่ะ

 

โดย: yay ! 7 มีนาคม 2548 4:02:30 น.  

 

โหสุดยอดเลยคับ เยี่ยมๆมากเลย....ขอบคุณคับ

ไว้ผมอ่านๆสักหลายๆรอบแล้วเดี่ยวจะลองมั่วบ้าง 55555

 

โดย: just2cool 7 มีนาคม 2548 9:13:35 น.  

 






 

เชาน้อย
Says : .ได้แล้วนะครับแต่ว่าทำไมชื่อคนเม้นมันหลุดไปอยู่ข้างล่างอ่ะ?.
 
 


 

โดย: รักแท้อยู่หนใด 7 มีนาคม 2548 23:02:00 น.  

 

..อ่านแล้วน่าสนจัย..จังเลยค่ะ แต่ ม่ายร฿ว่า จะทามได้ ดีอย่างคุง กึ่งยิงกึ่งผ่าน อะเป่าอะ..แต่ว่าลองทามดูนะจ้า..น้องใหม่ขอฝากตัว ด้วยนะจ้า..

 

โดย: จอมแก่นแสนซน 24 มีนาคม 2548 4:42:02 น.  

 

เก่งจางค่า

 

โดย: กลาดเกลื่อนกระพิบพร่างพราว IP: 61.47.97.213 2 สิงหาคม 2548 17:22:28 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 


กึ่งยิงกึ่งผ่าน
Location :
กรุงเทพ Thailand

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 4 คน [?]




มีคนถามมาเยอะ ว่าชื่อผมแปลว่าอะไร บอกง่ายๆ ว่ามาจากฟุตบอลครับ "กึ่งยิงกึ่งผ่าน" เป็นการส่งลูกไปที่

หน้าประตูฝ่ายตรงข้าม โดยผู้เล่นที่เลี้ยงลูกมาจากทางด้านข้างของสนาม พอถึงจังหวะ ก็ผ่านลูกมาให้เพื่อนที่วิ่งมารออยู่หน้าประตู .... ต่าแว่!!

... แต่ว่า!!! ... ลูกมันเลยเพื่อนไป แต่ก็ไม่ถึงประตู เหมือนจะเป็นการยิงประตูก็ไม่ใช่ จะส่งให้เพื่อนก็ไม่ใช่


นี่จึงเป็นที่มาของคำว่า "กึ่งยิงกึ่งผ่าน" ครับ

ผมไม่ได้คิดเองแต่อย่างใด แต่เอามาจากการดูฟุตบอลครับ

ปล. ชื่อผมนี่บ่งบอกเลยว่า "ฟุตบอล" แต่ผมไม่ได้เล่นห้องศุภฯ นะครับ .. แหะ แหะ แหะ
Friends' blogs
[Add กึ่งยิงกึ่งผ่าน's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.