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