ใบความรู้

(สัปดาห์ที่ 18)

การใช้โปรแกรม ImageReady

การสร้าง ImageMap

Image Map คือรูปภาพในเว็บเพจที่ประกอบด้วยพื้นที่ย่อยที่ถูกกำหนดให้เป็น Link เชื่อมโยงกับข้อมูลในเว็บ พื้นที่ที่กำหนดให้เป็น Link ซึ่งเรียกว่า Hotspotสามารถกำหนดพื้นที่ภาพที่ใช้เป็น Link ได้หลายรูปแบบ เช่น พื้นที่วงกลม หรือพื้นที่หลายเหลี่ยม

รู้จักเครื่องมือใน ImageMap

หลักการสร้าง Image Map สามารถทำได้ด้วยการใช้เครื่องมือ Image Map Tool ซึ่งจะใช้งานเหมือนกับการเลือกพื้นที่ด้วย Selection Tool แต่จะแตกต่างกันที่เมื่อสร้างพื้นที่ส่วนที่จะกำหนดให้เป็น Hotspot ได้แล้ว จะต้องไปกำหนดค่าตำแหน่งที่จะ Link ไปใน Image Map Palette

วิธีการสร้าง Image Map

1. เปิดรูปภาพที่ต้องการสร้าง Image Map

2. คลิก Type Tool

3. พิมพ์ข้อความ เตรียมสร้าง Image Map

Welcome to Songphinong Witthaya

4. คลิกเครื่องหมาย ทุกเลเยอร์

5. คลิกเมนู Layer --> Merge Visibel

รวมเลเยอร์เข้าด้วยกัน

การบันทึก Image Map

เมื่อเปิดดูผลการทำงานของ Image Map ในบราวเซอร์แล้ว หากต้องการนำ Image Mapไปใช้ในการสร้างเว็บเพจต่อไปให้สั่ง Save Image Map เป็นไฟล์ HTML ดังนี้ คือ

1. คลิกเมนู File ---> Save Optimized As

2. ปรากฏหน้าต่าง Save Optimized As

3. กำหนดชื่อไฟล์ File Name: ImageMap.html

4. กำหนดตัวเลือกชนิดไฟล์ Save as Type: HTML and Images (*.html)

5. คลิก Save

การสร้าง Slice ใน ImageReady

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

การสร้าง Slice

1. คลิก Slice Tool

2. กำหนดพื้นที่ Slice บนภาพ

3. คลิกเมนู File --> Save Optimized As

ปรากฏหน้าต่าง Save Optimized As

4. กำหนดชื่อ Slice ช่อง File name:

5. คลิกปุ่ม Save

6. จะได้ภาพแบ่งย่อย ๆ จำนวน 3 ส่วน

การปรับแต่ง Slice ด้วย Slice Selection Tool

การปรับแต่ง Slice ด้วย Slice Selection Tool ซึ่งมีรูปแบบการใช้งานคล้ายกับ Selection Toolใน Photoshop โดยสามารถปรับขนาด ลบ หรือย้ายตำแหน่ง Sliceที่เลือกได้ ดังนี้

1. คลิก Slice Selection Tool

2. คลิกเลือก Slice ที่ต้องการ

3. ลบ Slice ที่ถูกเลือกด้วยคำสั่ง

Slice --> Delete Slice

4. หากต้องการลบ Slice ทั้งหมด

ให้คลิกคำสั่ง Slice -->Delete All

กำหนดการเชื่อมโยงให้กับ Slice

หลังจากที่แบ่งพื้นที่บนภาพออกเป็น Slice แล้ว จะกำหนดการเชื่อมโยงให้กับแต่ละ Sliceบนภาพว่าต้องการให้เชื่อมโยงกับข้อมูลใดบนเว็บ โดยจะเชื่อมโยงกับเว็บเพจในเว็บไซต์เดียวกัน หรือเชื่อมโยงกับเว็บเพจต่างเว็บไซต์ก็ได้ ดังตัวอย่างการกำหนด Slice บริเวณพื้นที่เลือก 01

1. คลิกปุ่ม Slice Selection Tool

2. คลิกเลือกพื้นที่ Slice 01

3. คลิกแท็บ Slice

4. กำหนดค่าใน Slice Palette เชื่อมโยง Slice โดยให้กำหนดข้อมูลดังนี้

Type: เลือกว่าเป็นชนิดรูปภาพ Images

Name: ชื่อที่ใช้เรียกการเชื่อมโยงนี้

URL: ตำแหน่งข้อมูลที่ต้องการเชื่อมโยงกับ Slice นี้

Target: กำหนดหน้าจอที่จะแสดงเว็บเพจที่เชื่อมโยงไป เช่น

ให้แสดงในหน้าจอบราวเซอร์ใหม่ ให้พิมพ์ค่า _blank

เป็นหน้าจอเดิมให้พิมพ์ _self หรือไม่ใส่เว้นว่างไว้