About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%95%E0%B8%B1%E0%B8%94%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E %28Slice%29 %E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%99%E0%B8%B3%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A1%E0%B8%B2%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%A1%E0%B8%B2%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%AD%E0%B8%9A%E0%B9%82%E0%B8%94%E0%B8%A2%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%95%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%87 %28Table%29 [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



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

การสร้างโปรแกรมลบข้อมูล

เรื่อง : การสร้างโปรแกรมลบข้อมูลจากตารางข้อมูล (Delete Record) ...  

สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar

เรื่อง : สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar มีหลายท่านสอบถามกันมาบ่อยเหลือเกินว่า อยากให้ทำการสร้าง Link ที่พอเมื่อ ...  

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag...  

สร้าง Select Options แบบ Checkbox เพื่อให้ User เลือกข้อมูล

เรื่อง : วิธีการสร้าง Select Options ในแบบ Checkbox หลายท่านอ่านหัวข้อบทความแล้วอาจจะงง ๆ ว่า Select Options ในแบบ Chackbo...  


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

*
*
*