Group Blog
 
<<
ธันวาคม 2548
 123
45678910
11121314151617
18192021222324
25262728293031
 
4 ธันวาคม 2548
 
All Blogs
 
-`๏'- Thumbnails

• Thumbnails 

Thumbnails ก็คือ การทำภาพตัวอย่างให้เป็นลิ้งค์ที่ย่อส่วน เพื่อสะดวกในการเลือกชมภาพ เหมาะกับการนำเสนอที่มีภาพประกอบเป็นจำนวนมาก และภาพต้นฉบับมีขนาดใหญ่

❒ หลักการแรกที่จำเป็นที่จะต้องเรียนรู้ในการทำ Thumbnails คือ การย่อขนาดภาพให้ได้สัดส่วน เพราะถ้ากรอบของ Thumbnails ไม่ได้ถูกกำหนดให้ได้สัดส่วน ผลที่ตามมาคือ ภาพใน Thumbnails จะบิดเบี้ยว ซึ่งนอกจากจะดูไม่สวยงามแล้ว อาจทำให้เข้าใจผิดได้ว่าภาพต้นฉบับก็คงมีลักษณะเช่นเดียวกันกับภาพใน Thumbnails ซึ่งเราสามารถใช้โปรแกรมตกแต่งภาพ เช่น Photoshop ฯลฯ ช่วยในการคำนวณสัดส่วนของภาพที่เราจะนำมาทำ Thumbnails ได้
❒ หลักการต่อมาก็คงเป็นเรื่องลิ้งค์ของภาพที่จะแบ่งออกเป็นสองส่วนคือ ลิ้งค์ที่เป็นภาพ Thumbnails กับลิ้งค์ที่เป็นภาพ Original Size นั่นเอง

 อ้างอิงจากที่นี่จ้ะ 

Nature
Nov.26,05-Sep.21,05   (Click images to Enlarge.)More>>
 
Nov.26,05Nov.06,05Nov.03,05Oct.28,05
Oct.25,05Oct.09,05Oct.04,05Oct.02,05
Oct.01,05Sep.29,05Sep.26,05Sep.21,05
 
More>>


❒ ตัวอย่างข้างบนนี้ เป็นภาพจริงขนาดกว้าง 800px สูง 600px

 รายละเอียดของโค้ด 
<p align=center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">Nature</td>
</tr>
<tr>
<td colspan="3" class="thumbnails">Nov.26,05-Sep.21,05   (Click images to Enlarge.)</td>
<td align="right" colspan="1" class="thumbnails">More<a href="//...">>> </a></td>
</tr>
<tr>
<td colspan="4" align="center" width="450"><img src="//..." border="0" width="450" height="4"></td>
</tr>
<tr>
<td colspan="4" align="center" width="450" height="10">&nbsp;</td>
</tr>
<tr>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img01"><img src="//th01" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img02"><img src="//th02" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img03"><img src="//th03" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img04"><img src="//th04" border="0" width="74" height="50" vspace="5"></td>
</tr>
<tr>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img05"><img src="//th05" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img06"><img src="//th06" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img07"><img src="//th07" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img08"><img src="//th08" border="0" width="74" height="50" vspace="5"></td>
</tr>
<tr>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img09"><img src="//th09" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img10"><img src="//th10" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img11"><img src="//th11" border="0" width="74" height="50" vspace="5"></td>
<td align="center" class="thumbnails" valign="top" width="120" height="90">ข้อความ<a href="//img12"><img src="//th12" border="0" width="74" height="50" vspace="5"></td>
</tr>
<tr>
<td colspan="4" align="center" width="450" height="10">&nbsp;</td>
</tr>
<tr>
<td colspan="4" align="center" width="450"><img src="//..." border="0" width="450" height="4"></td>
</tr>
<tr>
<td colspan="4" align="right" class="thumbnails">More<a href="//...">>> </a></td>
</tr>
</table>
</p>

❒ โค้ดยาวหน่อย แต่..ถ้าใครตามเนื้อหามาตั้งแต่ (-`๏'- บลอกสไตล์?!) ก็คงทำความเข้าใจไม่ยากนัก ตรงนี้ขออธิบายเป็นภาพรวมแล้วกัน

• <table border="0" cellpadding="0" cellspacing="0"> .... </table> : ส่วนของตาราง (Table)
• <tr> .... </tr> : ส่วนของแถว (Row)
• <td align="center" class="thumbnails" valign="top" width="120" height="90"> .... </td> : ส่วนของคอลัมน์ (Column)
• <a href="//img(01-12)"> : ส่วนของลิ้งค์ภาพต้นฉบับ (Original Size)
• <img src="//th(01-12)" border="0" width="74" height="50" vspace="5"> : ส่วนของลิ้งค์ภาพ Thumbnails
• ถ้าต้องการคลิกลิ้งค์แล้วเป็นการเปิดเพจใหม่ ให้เติมข้อความ target='_blank' หลังลิ้งค์ดังนี้ <a href="//img(01-12)" target='_blank'>
• More<a href="//..."> : ลิ้งค์หลังข้อความคำว่า More คือส่วนอ้างอิงหน้าถัดไป เราอาจใช้คำว่า Next ก็ได้
• ในกรณีต้องการสร้างปุ่ม Previous (มีหลายเพจ) ให้แทนคำสั่งคอลัมน์ ดังต่อไปนี้แทนที่ตำแหน่งของ More (เดิม)
<td align="left" class="thumbnails"><a href="//..."><<</a>Previous</td>
<td align="right" class="thumbnails">Next (More)<a href="//...">>> </a></td>

<<PreviousNext>>


คงพอเป็นแนวทางให้ผู้ที่สนใจรูปแบบนี้ได้ไม่มากก็น้อย ใครมีไอเดียสร้างสรรอย่างไรก็บรรเลงกันเองให้เต็มที่ไปเลย


เพลง : ครึ่งหนึ่งของชีวิต
ศิลปิน : แอม เสาวลักษณ์ ลีลาบุตร









Create Date : 04 ธันวาคม 2548
Last Update : 7 มกราคม 2549 21:20:37 น. 32 comments
Counter : 5478 Pageviews.

 
มาแล้วจ้า .... น้องไหม
พี่แพทเปิดตัวบล๊อคใหม่ที่น้องไหมคอยช่วยเหลือและให้คำแนะนำมาตลอดเวลาแล้วจ้า
มาบอกน้องไหมคนแรกเลย .... เดี๋ยวต้องไปบอกคุณปลาอีกคน


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:0:37:49 น.  

 
ลป. จาบอกว่าพี่แพทชอบเพลงนี้มากเลยจ้า


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:0:39:34 น.  

 





โดย: p_tham วันที่: 4 ธันวาคม 2548 เวลา:0:46:16 น.  

 
น้องไหมรอลูกศิษย์มั่งจิ พี่ยังไม่ได้อ่านสักกะบ๊อคอะ


โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:0:47:46 น.  

 
น้องไหมช่วยบอกด้วยน๊าว่าเพลงดังหรือเปล่า
เพราะที่บ้านพี่แพทเน็ตมันช้า ได้ยินเพลงตอนต้นแล้วก็หายไปอ่ะจ้ะ
แต่ตอนที่ลองอยู่ที่งานเพลงก็ดังดีทุกครั้งไม่เคยมีปัญหานะจ๊ะ


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:0:50:21 น.  

 
แวะมาตั๊กทายมะก๊ะ...ชอบเพลงนี้จังง่ะ..อิอิอิ



โดย: Bamboocrossing วันที่: 4 ธันวาคม 2548 เวลา:1:00:53 น.  

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


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:1:03:32 น.  

 
เห็นน้องไหมกะพี่แพ้ทอัพบล๊อค อยากอัพบ้างอะ


โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:1:29:41 น.  

 
มาทักทาย ทักทายจ้า หลับหรือยังเอ่ย

ขอบคุณที่เอาข้อมูลดีๆ มาบอกกันนะจ้า


โดย: JewNid วันที่: 4 ธันวาคม 2548 เวลา:1:43:54 น.  

 
อ๊ายหยา หายไปไม่กี่วัน
จานไหมมีการบ้านมาให้ทำตรึมเลย


โดย: นู๋ส้มจุก วันที่: 4 ธันวาคม 2548 เวลา:6:45:02 น.  

 
เพลงเพราะถูกใจ เทคนิคดีมีประโยชน์มากมาย
ขอบคุณครับ


โดย: ตี๋น้อย (Zantha ) วันที่: 4 ธันวาคม 2548 เวลา:6:47:14 น.  

 
ขอบคุณค่าน้องไหม

ค่อยๆมานั่งอ่านอยู่หลังห้อง

จะค่อยๆลองทำดูนะคะ


โดย: Batgirl 2001 วันที่: 4 ธันวาคม 2548 เวลา:9:29:16 น.  

 
ทำไมเก่งจังเลย
พี่ตุ๊กตา ชอบมาหาความรู้ที่นี่จ๊ะ
ขอบคุณนะคะ


โดย: tukata001 วันที่: 4 ธันวาคม 2548 เวลา:9:45:19 น.  

 
กิ๊บเก๋ หุหุ


โดย: ปลาทูน่าในบ่อปลาพยูน วันที่: 4 ธันวาคม 2548 เวลา:10:08:09 น.  

 





เจ้าไดโนซอ บอกมาจิ ว่าเจ้านายของเจ้าไปไหน บอกมานะ มะงั้นจาจับไปชุปแป้งทอด



น้องไหม พี่มาอรุณสวัสดิ์จะ อิอิ บ้านพี่ตอนนี้10.35pmจะน้อง


โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:10:33:49 น.  

 
ทานข้าวให้หย่อย น๊า

อินู๋เปส แวะมาซน...อิๆ


โดย: ~oกิ๊กกะโป๋ โลเปสo~ วันที่: 4 ธันวาคม 2548 เวลา:10:35:18 น.  

 
thank you for the interesting tips here


โดย: adia วันที่: 4 ธันวาคม 2548 เวลา:12:45:15 น.  

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

ถามหน่อยจิ
ถ้าจะเอาชื่อเพื่อนที่รักทั้งหลายไปเก็บไว้
ทำงัยค๊า เพราะตอนนี้เยอะมากกกกกกก

ขอบคุณหลายคะ น้องใหม่


โดย: Bee1st วันที่: 4 ธันวาคม 2548 เวลา:13:16:07 น.  

 
น้องไหม หรือจะเรียกว่าครูไหมดีค่ะ


โดย: erina วันที่: 4 ธันวาคม 2548 เวลา:14:11:39 น.  

 
น้องไหมไปไหนอะ คิดถึงจัง อิอิ


โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:15:45:46 น.  

 
วันนี้น้องไหมไปเที่ยวไหนเอ่ย .....
วันนี้เข้ามาโหวตให้น้องไหมอ่ะจ้ะ


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:16:43:53 น.  

 
อิๆ

ทานข้าวเย็นยังค่ะ

อินู๋เปส แวะมาซน...

ปล. รบกวน ขอ โค้ด เปลฃี่ยนคำตรงปุ่ม submit ด้วยนะคะ เปสอยากได้ค่ะ ขอบคุนล่วงหน้าค่ะ..


โดย: ~oกิ๊กกะโป๋ โลเปสo~ วันที่: 4 ธันวาคม 2548 เวลา:18:27:13 น.  

 
น้องไหมอยู่อ๊ะเปล่าจ๊ะ ....
พี่แพทลองทำกรอบแล้วพอกด publish มันขึ้น page can not found ทุกทีเลยจ้ะ เป็นเพราะอะไรจ๊ะ เลยดูไม่ได้ซักทีว่าเป็นไง
ทำมาตั้งแต่บ่ายแล้วนะเนี่ย ชักโมโหละ


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:18:51:38 น.  

 
ไหมจ๋าคิดถึงไหมจังเลยค่ะ

จุ๊บๆๆๆ

ไปเที่ยวไหนหรือเปล่าคะ

โค้ดแต่งบล๊อกยังไม่มีเวลามาศึกษาเลยค่ะ


โดย: yadegari วันที่: 4 ธันวาคม 2548 เวลา:18:52:31 น.  

 
ข้างบนนี้ก็มารอน้องไหมเหมือนกันเลยอะ


โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:18:53:26 น.  

 


หวัดดีค่ะไหม

หนิงไม่ได้มาหาตั้งหลายวัน

คิดถึงๆๆๆๆจังเลย

สบายดีนะคะ

เรื่องข้างบนเป็นประโยชณืดีคะ
เดี๋ยวขอ save เก็บไว้ เอาไว้webเองทำได้เลย
ไหมเก่งเรื่องcodeจัง
ศึกษาเองหรอค่ะ



โดย: Dying To Be Alive วันที่: 4 ธันวาคม 2548 เวลา:19:24:59 น.  

 






โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:21:29:50 น.  

 


โดย: yadegari วันที่: 4 ธันวาคม 2548 เวลา:21:30:50 น.  

 
ขอบคุณค่ะ


โดย: ju (กระจ้อน ) วันที่: 4 ธันวาคม 2548 เวลา:21:47:39 น.  

 
มาบอกน้องไหมว่าจาไปนอนละ
พี่แพท publish ไม่ได้ซักทีไม่รู้เป็นไร
วันนี้พอก่อนไม่ทำมันละ โมโหอ่ะจ้ะ


โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:22:40:33 น.  

 
ชอบเพลงนี้ของพี่แอมมาก ความหมายดีมากๆจะติดตามผลงานของพี่แอมตลอดไป


โดย: ชมรมรักพี่แอม IP: 203.114.112.5 วันที่: 18 พฤษภาคม 2549 เวลา:15:51:01 น.  

 
uigyrfi


โดย: ณัฐพล ประมา IP: 1.2.244.134 วันที่: 23 พฤศจิกายน 2555 เวลา:13:31:22 น.  

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

-`๏'- MeIKha
Location :


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

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

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





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







 

 

  ไม่นาน ...
  นาทีนี้ก็จะผ่านไป

  ถึงวันพรุ่งนี้ …
  วันนี้ก็จะกลายเป็นวันวาน

  ปัจจุบันเคลื่อนตัว
  ไปเป็นอดีตอย่างรวดเร็วเสมอ
  ความโศกเศร้าก็เช่นกัน …

  มันเป็นเรื่องที่ผ่านมาชั่วครั้งชั่วคราว
  ไม่ได้พักพิงอยู่กับเราถาวร

  เมื่อพรุ่งนี้มาถึง
  ทุกชีวิตต้องลืมตาตื่น

  และดำเนินต่อไป ……ไม่ว่า
  จะเป็นคนที่กำลังเจ็บป่วย โศกเศร้า

  ไม่ว่าใครก็ตาม
  ไม่สามารถที่จะเรียกคืนอดีตได้

  และนี่ ...จึงเป็นเหตุผล
  ที่เราควรจะต้องทำปัจจุบันให้ดีที่สุด

  เพื่อที่จะได้ไม่ต้องคร่ำครวญถวิลหาอดีต
  ไม่ว่าเพื่อจะมาเปลี่ยนแปลง แก้ไข

  หรือเพราะว่า ...มีเพียงอดีตเท่านั้น
  ที่ยังพอจะพบคุณค่า

  ความหมายที่น่าภาคภูมิใจ …





Friends' blogs
[Add -`๏'- MeIKha's blog to your web]
Links
 

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