การตัดรูปภาพ (Slice) และนำรูปมาภาพมาประกอบโดยการใช้ตาราง (Table) [Article ID : 82]

ก่อนจะนำรูปภาพไปประกอบโดยใช้ตาราง ก่อนอื่นต้องมาทำความเข้าใจเกี่ยวกับการตัดแบ่งรูปให้ออกมาเป็นส่วน ๆ เสียก่อน โดยในบทความนี้จะใช้โปรแกรม 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 ให้คุณทำการตั้งชื่อไฟล์ได้ตามต้องการ

การนำรูปภาพมาประกอบในตารางด้วยโปรแกรม Dreamweaver

เมื่อได้ทำการ Export ไฟล์รูปภาพที่ทำการตัดแบ่งออกเป็นส่วน ๆ แล้ว ต่อมาก็จะเป็นขั้นตอนของการนำเอารูปที่แบ่งออกเป็นส่วน ๆ นำมาประกอบกันในตาราง เพื่อให้ดูเสมือนว่ารูปนั้นเป็นแผ่นหรือรูปเดียวกัน ดังนี้

5. ทำการสร้างตาราง (Insert Table) ให้มีจำนวน Columns และ Rows ตามส่วนต่าง ๆ ของรูปภาพ ในตัวอย่างข้างต้น ดังรูป *จากรูป พิจารณาจากการตัดแบ่งรูปในขั้นตอนก่อน แบ่งออกเป็น 4 ส่วน จึงต้องสร้างตารางที่มี 2 คอลัมน์ (columns) กับ 2 แถว (rows)

6. เมื่อได้ทำการ Insert Table แล้ว จากนั้นก็ทำการ Insert รูปภาพส่วนต่าง ๆ ที่เราทำการตัดแบ่งออกไปจากขั้นตอนก่อน นำมาประกอบกันใน Cells ของตาราง ดังรูป 7. จากขั้นตอนที่ 7 จะเห็นได้ว่าเมื่อนำเอาส่วนต่าง ๆ ของรูปภาพมาประกอบในตารางแล้ว รูปภาพยังไม่มีการเข้ากันได้อย่างสนิทเหมือนเป็นรูป ๆ เดียว กัน ฉะนั้น..จึงต้องทำการซ่อนในส่วนที่เป็นเส้นขอบของตารางเสียก่อน โดยการกำหนดค่าที่ Properties ของ Table ดังรูป 8. ก็จะได้รูปภาพตามที่ต้องการ และยังทำให้รูปภาพบนหน้าเว็บเพจมีการโหลดที่รวดเร็วขึ้นด้วย ดังในตัวอย่างด้านล่างนี้