เรื่อง : การตัดรูปภาพ และนำรูปภาพมาประกอบโดยการใช้ตาราง (Slice Image with Table)
สำหรับเรื่องนี้เป็นเรื่องที่มีผู้เขียนขอบทความเข้ามาทางหน้า Webboard
และเป็นหนึ่งในหัวข้อคำถามที่มีผู้เข้ามาโพสต์ถามอยู่เนื่อง ๆ อันที่จริงแล้วเรื่องในหัวข้อนี้ เป็นเรื่องของการประยุกติ์ใช้ตาราง
นำตารางมาใช้ให้เกิดประโยชน์ต่อการออกแบบเว็บเพจ และเทคนิคนี้จะช่วยให้รูปภาพที่มีไฟล์ขนาดใหญ่มีการโหลดที่รวดเร็วขึ้น
เนื่องจาก...หากไฟล์รูปภาพทีจะนำมาใช้ประกอบเว็บเพจ มีขนาดไฟล์ที่ใหญ่แล้วจะทำให้การเรียกชมจากผู้เยี่ยมชมเว็บไซต์ต้องมีการรอที่นานมาก
หากรูปภาพนั้น เรานำขึ้นเป็นไฟล์ ๆ เดียวหรือแผ่นเดียวครับ เรามาดูวิธีการกัน...
วิธีการตัดรูปภาพ (Slice Image) ด้วยโปรแกรม Graphic
ก่อนจะนำรูปภาพไปประกอบโดยใช้ตาราง ก่อนอื่นต้องมาทำความเข้าใจเกี่ยวกับการตัดแบ่งรูปให้ออกมาเป็นส่วน ๆ เสียก่อน
โดยในบทความนี้จะใช้โปรแกรม
Adobe Fireworks ในการนำเสนอ สำหรับผู้ที่ใช้โปรแกรมอื่น ๆ เช่น PhotoShop
ก็สามารถอ่านแล้วนำไปประยุกติ์ดูตามโปรแกรมที่ใช้งานกันได้ครับ
1. ทำการเปิดรูปภาพกับโปรแกรม FireWorks จากนั้นให้เลือกไปที่ Tool ที่ชื่อว่า
Slice tool ดังรูป
2. เมื่อเลือกไปที่
Slice tool แล้ว นำเอาเมาท์มาวางเหนือรูปภาพ เมาท์จะกลายเป็นเครื่องหมายกากบาท (+)
เพื่อให้สามารถเลือกพื้นที่ ๆ เราต้องการตัดเป็นส่วน ๆ ได้ ก็ทำการลาก (Drag) เลือกพื้นที่ ๆ ต้องการตัดแบ่ง โดยมีตัดตามขนาดที่ต้องการ ดังรูป
*จากรูป ตัดแบ่งเป็น 4 ส่วนในขนาดที่เท่า ๆ กันทั้ง 4 ส่วน
3. จากนั้นให้ทำการ Export รูปภาพออกมา โดยไปที่
Main Menu -> Export
4. เมื่อเลือกไปที่เมนู Export แล้วโปรแกรมจะทำการเปิดหน้าต่างให้เราทำการ Save File โดยการกำหนดค่าดังในรูปข้างต้น
ยกเว้น File Name ให้คุณทำการตั้งชื่อไฟล์ได้ตามต้องการ
สำหรับโปรแกรมกราฟิกอื่น ๆ ก็จะมี Option ในการเลือกเพื่อ Slice Image เช่นเดียวกัน
และมีหลักการใช้งานคล้าย ๆ กับโปรแกรม FireWorks ที่นำเสนอเป็นตัวอย่างในบทความนี้
การนำรูปภาพมาประกอบในตารางด้วยโปรแกรม Dreamweaver
เมื่อได้ทำการ Export ไฟล์รูปภาพที่ทำการตัดแบ่งออกเป็นส่วน ๆ แล้ว ต่อมาก็จะเป็นขั้นตอนของการนำเอารูปที่แบ่งออกเป็นส่วน ๆ
นำมาประกอบกันในตาราง เพื่อให้ดูเสมือนว่ารูปนั้นเป็นแผ่นหรือรูปเดียวกัน ดังนี้
5. ทำการสร้างตาราง (Insert Table) ให้มีจำนวน Columns และ Rows ตามส่วนต่าง ๆ ของรูปภาพ ในตัวอย่างข้างต้น ดังรูป
*จากรูป พิจารณาจากการตัดแบ่งรูปในขั้นตอนก่อน แบ่งออกเป็น 4 ส่วน จึงต้องสร้างตารางที่มี 2 คอลัมน์ (columns) กับ 2 แถว (rows)
6. เมื่อได้ทำการ Insert Table แล้ว จากนั้นก็ทำการ Insert รูปภาพส่วนต่าง ๆ ที่เราทำการตัดแบ่งออกไปจากขั้นตอนก่อน
นำมาประกอบกันใน Cells ของตาราง ดังรูป
7. จากขั้นตอนที่ 7 จะเห็นได้ว่าเมื่อนำเอาส่วนต่าง ๆ ของรูปภาพมาประกอบในตารางแล้ว
รูปภาพยังไม่มีการเข้ากันได้อย่างสนิทเหมือนเป็นรูป ๆ เดียว กัน
ฉะนั้น..จึงต้องทำการซ่อนในส่วนที่เป็นเส้นขอบของตารางเสียก่อน
โดยการกำหนดค่าที่ Properties ของ Table ดังรูป
8. ก็จะได้รูปภาพตามที่ต้องการ และยังทำให้รูปภาพบนหน้าเว็บเพจมีการโหลดที่รวดเร็วขึ้นด้วย ดังในตัวอย่างด้านล่างนี้
*รูปข้างต้นนี้ เกิดจากการนำส่วนต่าง ๆ ของรูปที่ถูกตัดแบ่งออก นำมาประกอบกันในตาราง
หลักการ Slice Image เช่นเดียวกันนี้ยังสามารถนำไปประยุกติ์ในแง่มุมอื่น ๆ ในการพัฒนาเว็บไซต์ได้เช่นเดียวกัน
...อย่างไรลองใช้กันดู...สวัสดีครับ.
About the Author
Mr.Sittichai Raksasuk
Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs.
He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.
Contact with him : dwthai@gmail.com
บทความอื่นที่คุณอาจสนใจ