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



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

สร้าง Web Application ด้วย Dreamweaver + PHP + MySQL การเตรียมพร้อมและข้อตกลงในการเรียนรู้

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 1สำหรับบทความนี้ก็จะเป็นบทความชุดนะครับคือใน 1 เร...  

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

เรื่อง : สร้างโปรแกรมแก้ไขข้อมูล (Edit Record) ...................................................... ...........................................  

การแปลง CSS ในแบบ Inline Style Sheet ให้เป็น Internal หรือ External Style Sheet

เรื่อง : การใช้ Convert Inline CSS to Rule เปลี่ยน CSS การเขียน CSS เพื่อทำการตบแต่งเว็บเพจ บางครั้งนักพัฒนาเว็บชอบที่จ...  

การเคาะ Space Bar เว้นวรรคกับโปรแกรม Dreamweaver

เรื่อง : มาเคาะ Space Bar ให้เว้นวรรคได้หลาย ๆ ครั้งกัน ใช้งาน Dreamweaver เคยมีปัญหากันบ้างไหม ? เวลาที่เราต...  


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

*
*
*