สำหรับเรื่องนี้เป็นเรื่องที่มีผู้เขียนขอบทความเข้ามาทางหน้า webboard และเป็นหนึ่งในหัวข้อคำถามที่มีผู้เข้ามาโพสถามอยู่เนื่อง ๆ อันที่จริงแล้วเรื่องในหัวข้อนี้ เป็นเรื่องของการประยุกติ์ใช้ตาราง นำตารางมาใช้ให้เกิดประโยชน์ต่อการทำเว็บ และเทคนิคนี้จะช่วยให้รูปภาพที่มีขนาดไฟล์ขนาดใหญ่ของเรามีการโหลดที่เร็วขึ้น เนื่องจาก...หากไฟล์รูปภาพที่เราจะนำมาใช้ประกอบเว็บเพจ หากมีขนาดไฟล์ที่ใหญ่แล้วจะทำให้การเรียกชมจากผู้เยี่ยมชมเว็บไซต์ต้องมีการรอที่นานมาก หากรูปภาพนั้น เรานำขึ้นเป็นไฟล์ ๆ เดียวหรือแผ่นเดียว เรามาดูวิธีการทำกัน........

.....................................................................................................................................................................

ในบทความนี้ผมจะใช้โปรแกรม Macromedia Fireworks ในการนำเสนอ สำหรับผู้ที่ใช้โปรแกรมอื่น ๆ เช่น Photoshop ก็สามารถอ่านแล้วนำไปประยุกติ์ดูตามโปรแกรมที่ใช้งานได้ครับ

1. ทำการเปิดรูปภาพที่มีขนาดใหญ่ของเรากับโปรแกรม Fireworks จากนั้นให้เลือกไปที่ Tool ที่ชื่อว่า Slice tool

 

2. เมื่อเลือกไปที่ Slice tool แล้ว เมื่อเรานำเอาเมาท์มาวางเหนือรูปภาพ เมาท์จะกลายเป็นเครื่องหมายกากบาท (+) เพื่อให้เราสามารถเลือกพื้นที่ ๆ เราต้องการตัดเป็นส่วน ๆ ได้ ก็ให้เราทำการลากเลือกพื้นที่ ๆ เราต้องการ ตัดตามขนาดที่ต้องการ ดังรูป ผมตัดเป็น 4 ส่วนในขนาดที่เท่ากันทั้ง 4 ส่วน

3. จากนั้นให้ทำการ Export รูปภาพออกมา โดยไปที่ Main Menu -> Export ของโปรแกรม

เมื่อเลือกไปที่เมนู Export แล้วโปรแกรมจะทำการเปิดหน้าต่างให้เราทำการ Save File โดยการกำหนดค่าดังในรูปข้างต้น ยกเว้น File Name ให้คุณทำการตั้งชื่อไฟล์ได้ตามต้องการ

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

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

2. เมื่อเราได้ทำการ Insert Table แล้ว จากนั้นก็ทำการ Insert รูปภาพส่วนต่าง ๆ ที่เราทำการตัดแบ่งออกไปจากขั้นตอนก่อน นำมาประกอบกันใน cell ตาราง ดังรูป

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

Cellpad : 0 - CellSpace : 0 - Border : 0

4. เราก็จะได้รูปภาพที่เราต้องการ และยังทำให้รูปภาพบนหน้าเว็บเพจของเรามีการโหลดที่เร็วยิ่งขึ้นด้วย

.....................................................................................................................................................................