About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

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


เรื่อง : การตัดรูปภาพ และนำรูปภาพมาประกอบโดยการใช้ตาราง (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

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



บทความอื่นที่คุณอาจสนใจ

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 2

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 2 ต่อจากตอนที่ 1 ที่เราได้ทำการ Create ไฟล์สำหรับการเริ่...  

การแก้ไขปัญหาการใช้งาน Layer กับ Flash File

เรื่อง : การแก้ไขปัญหาการใช้งาน Layer กับ Flash File หลายท่านอาจจะมีปัญหาเรื่องของ Layer หรือ PopUp-MENU ที่เมื่อนำเอาไปว...  

Link นี้ไม่ขีดเส้นใต้ (Underline Style)

เรื่อง : สร้าง Text Link ไม่ให้มีเส้นใต้ เห็นมีผู้สอบถามมาหลาย ๆ ท่านว่าทำอย่างไรให้ Link ซึ่งเป็น Text หรือลักษณะข้อความ...  

การสร้างโปรแกรมสำหรับการค้นหา (Search) ข้อมูลจาก Database

เรื่อง : การสร้างโปรแกรมสำหรับการค้นหา (Search) ข้อมูลจาก Database บทความนี้คงถูกอกถูกใจของใครหลายคนเป็นแน่ เ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*