หน่วยที่ 4 การใส่ภาพกราฟิกในเว็บเพจ

ใบความรู้ หน่วยการเรียนรูท้ ่ี 4การใส่ภาพกราฟิกในเว็บเพจ ขอ้ มูลจาก : หนังสอื สรา้ ง Web ง่ายๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อง้ึ รตั นวงศ,์ 2554

ชนดิ รูปภาพทเี่ หมาะสาหรบั เว็บเพจ ชนิดขงไฟล์รูปภาพที่นยิ มนามาใสใ่ นเว็บเพจเพ่อื ใช้แสดงผลบนเบราเซอร์มีอยู่ 2 ชนิด คือ 1. ไฟล์ .gif ไฟล์ชนิดนน้ีมักเป็นรูปภาพเรียบๆ ไม่ค่อยมีการไล่โทนสีมากนัก เช่น รูปโลโก้ ปุ่มเมนูและไอคอน เปน็ ตน้ ซึ่งไฟลช์ นดิ นนย้ี งั สามารถกาหนดใหพ้ น้ื หลังเป็นสีโปรง่ ใสได้อกี ด้วย ภาพพ้นื หลังแบบโปร่งใสเมอื่ นาไปวางบนเว็บเพจที่มสี ีพื้นหลังต่างกนั กจ็ ะแสดงผลต่างกัน ขอ้ มลู จาก : หนงั สือสรา้ ง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสิทธ์ิ อ้งึ รตั นวงศ,์ 2554

2. ไฟล์ .jpg ไฟล์ชนิดน้ีส่วนใหญ่เป็นภาพถ่าย หรือภาพท่ีมีรายละเอียดการไล่สีจานวนมาก เช่นภาพถ่ายที่ไดจ้ ากกล้องดิจิตอล เป็นตน้ ขอ้ มลู จาก : หนงั สือสรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ องึ้ รัตนวงศ,์ 2554

วิธีใส่รปู ลงในเวบ็ เพจ สาหรับวธิ กี ารใสร่ ูปภาพลงในเว็บสามารถทาได้หลายวธิ ี ดังนี้ วธิ ีท่ี 1 คลกิ แถบ Images บนแทบ็ Common ของ Insert Bar วิธที ี่ 2 คลิกเมนู Insert > Image จากเมนูหลกั วิธที ่ี 3 คลกิ ลากไฟลจ์ ากพาเนล Files หรือพาเนล Assests วธิ ีที่ 4 คลิกลากไฟล์ภาพจาดโฟลเดอร์ของ Windows ซงึ่ วิธีที่งา่ ยและสะดวกมี 2 วิธี ดงั นี้ คลกิ แถบ Images บนแท็บ Common 1. ดบั เบิ้ลคลิกไฟล์ index.html ทหี่ น้าตา่ งพาเนล Files 2. วางเคอรเ์ ซอรต์ รงตาแหน่งท่จี ะวางรูปภาพ ข้อมูลจาก : หนงั สอื สร้าง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อ้งึ รัตนวงศ,์ 2554

3. คลิกปุ่ม Image บนแท็บ Common ของ Insert Bar (ถ้าไอคอนบนปุ่มแสดงคาสั่งอื่นอยู่ ให้คลิกลกู ศรข้างๆ แล้วเลือกคาสั่ง Image) 4. คลิกเลือกโฟลเดอรท์ ีเ่ ก็บรปู ภาพ 5. คลิกเลือกรูปภาพซึ่งทางด้านขวาจะแสดงตัวอย่างของรูปภาพ ขนาด ชนิดไฟล์ และเวลาท่ีใช้ดาวนโ์ หลดรูปภาพ 6. คลกิ ปุ่ม OK ขอ้ มูลจาก : หนงั สือสรา้ ง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อง้ึ รัตนวงศ,์ 2554

7. คลกิ ปมุ่ Yes เพ่ือก๊อปปี้ภาพมาไว้ในโฟลเดอรเ์ ว็บไซต์ 8. เลอื กโฟลเดอรท์ ่ีต้องการเก็บภาพสาหรับเวบ็ ไซต์ 9. คลิกปมุ่ Save เม่ือเรียกใช้รูปภาพจากภายนอกโฟลเดอร์เว็บไซต์ โปรแกรมจะให้ก๊อปป้ีไฟล์รูปภาพนั้นเข้ามาในเว็บไซต์ เพื่อใหส้ ะดวกตอ่ การจัดการและอัพโหลดไฟล์ ดังน้ันเราควรเลือกก๊อปป้ีไฟล์ทุกครั้ง 10. คลิกป่มุ Cancel ขอ้ มลู จาก : หนงั สือสร้าง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ อ้งึ รตั นวงศ,์ 2554

หลังจากนั้นไฟล์รูปภาพจะถูกบันทึกไว้ภายในโฟลเดอร์ images ซ่ึงจะปรากฏซ่ือนหน้าต่างพาเนลFiles รูปภาพทีเ่ ลอื กจะถกู แทรกลงในเว็บเพจตรงตาแหนง่ ท่ีวางเคอรเ์ ซอร์เอาไว้ ดงั รปู ข้อมลู จาก : หนังสอื สรา้ ง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อง้ึ รตั นวงศ,์ 2554

คลิกลากไฟล์ภาพจากพาเนล Files หรือพาเนล Assests นอกเหนือจากการคลิกปุม่ Image แลว้ เรายงั สามารถนารูปภาพเขา้ มาใส่ในเวบ็ เพจได้โดยคลกิ ลากไฟล์จากพาเนล Files หรือพาเนล Assests ซึง่ วิธีนี้จะสะดวกและประหยดั เวลาได้มาก โดยมขี ้นั ตอนดังน้ี 1. วางเคอรเ์ ซอรต์ รงตาแหน่งท่ตี ้องการวางรปู 2. คลิกแทบ็ พาเนล Files หรอื Assests 3. คลิกเลอื กรูปทต่ี ้องการวางในเวบ็ เพจ โดยในแตล่ ะส่วนของหน้าตา่ งพาเนล Files หรอื Assests จะแสดงตวั อยา่ งรูปที่เลือก 4. คลิกลากช่ือไฟล์ไปวางตรงตาแหนง่ ที่ต้องการ ข้อมูลจาก : หนังสือสรา้ ง Web ง่ายๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อง้ึ รตั นวงศ,์ 2554

การปรบั แตง่ คุณสมบตั ขิ องรูปภาพใหน้ า่ สนใจ หลงั จากนารปู ภาพมาวางในเว็บเพจแล้ว เราสามารถปรับแตง่ คุณสมบัติของรูปภาพได้ โดยการคลิกเลือกรปู ภาพท่ตี อ้ งการปรบั แตง่ แล้วกาหนดคุณสมบตั ติ ่างๆ ในหนา้ ตา่ ง Properties Inspector ดงั นี้ปรับขนาดรปู ภาพให้พอดี รปู ภาพท่นี ามาวางในเว็บเพจ บางคร้ังอาจจะมีขนาดใหญจ่ นเกินไป เมื่อนามาวางแลว้ อาจทาให้หน้าเว็บไมไ่ ดส้ ัดส่วนตามทีก่ าหนดไว้ ซง่ึ สามารถปรบั ขนาดของรูปภาพไดด้ งั น้ี 1. คลกิ เลอื กรปู ภาพที่ต้องการปรบั ขนาด 2. คลกิ ลากทจี่ ดุ แฮนเดลิ หรือพมิ พ์คา่ ความกว้างและความสงู ในชอ่ ง W และ H แลว้ กด Enter ข้อมูลจาก : หนงั สอื สรา้ ง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อึง้ รัตนวงศ,์ 2554

ใส่คาอธิบายภาพ (Alt) การใสค่ าหรือข้อความอธิบายใหร้ ปู ภาพนั้นมปี ระโยชน์อยา่ งมากสาหรบั ผูช้ ม เช่น - ในกรณีเวบ็ เบราเซอร์ของผู้ชมไม่สามารถแสดงรปู ภาพได้ ก็จะแสดงข้อความอธบิ ายแทน - เม่อื ผู้ชมเลื่อนเมาส์ไปชีบ้ นภาพก็จะแสดงข้อความอธิบายเพิม่ เติม - กรณีเวบ็ เบราเซอร์หาไฟลร์ ูปภาพไม่พบก็จะแสดงข้อความอธบิ ายแทนซ่งึ ขนั้ ตอนการใสค่ าอธบิ าย ทาไดด้ งั น้ี 1. คลิกเลอื กรูปภาพทต่ี ้องการ 2. พมิ พ์ขอ้ ความอธบิ ายในช่อง Alt แล้วกด Enter ข้อมลู จาก : หนงั สือสร้าง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อึง้ รัตนวงศ,์ 2554

ใสก่ รอบรปู ชว่ ยเพ่ิมความโดดเดน่ ถ้าต้องการเพม่ิ ความโดดเดน่ ใหก้ ับรปู ภาพในเว็บเพจด้วยการใสเ่ ส้นกรอบล้อมรอบรูปภาพ สามารถทาได้โดยมีข้นั ตอนดงั นี้ 1. คลกิ เลอื กรปู ภาพในเว็บเพจดว้ ยการใส่เส้นกรอบ 2. พิมพ์คา่ ความหนาของเส้นกรอบทชี่ ่อง Border แล้วกด Enter ขอ้ มลู จาก : หนังสือสรา้ ง Web ง่ายๆ แค่คลิก Dreamweaver CS5 โดย : จีระสิทธ์ิ อ้ึงรตั นวงศ,์ 2554

กาหนดระยะห่างรอบรปู และองคป์ ระกอบอ่นื ๆ การกาหนดระยะห่างรอบรูปภาพกับองค์ประกอบอื่นๆ อย่างข้อความไม่ห้างเรียงชิดกัน จนทาให้ดูแน่นเกินไป สามารถกาหนดระยะห่างรอบรูปได้ 2 แบบคือ ระยะรอบรูปตามแนวนอน (H Space) และระยะห่างรอบรปู ามแนวตั้ง (V Space) โดยมีวิธกี าหนดดังน้ี 1. คลิกเลอื กรปู ภาพที่ต้องการกาหนดระยะห่าง 2. พิมพ์ค่าระยะห่างตามแนวนอน (H Space) และระยะห่างรอบรูปามแนวต้ัง (V Space) แลว้ กด Enter ข้อมลู จาก : หนังสือสร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ องึ้ รัตนวงศ,์ 2554

เทคนคิ สลับภาพเมอื่ ชีเ้ มาสด์ ว้ ย Rollover Image Rollover Image เปน็ เทคนิคการสลับภาพระหวา่ ง 2 รปู ในขณะเม่ือเลื่อนเมาส์ไปชี้ กล่าวคอื ก่อนาเมาส์ไปวางตาแหน่งนั้นจะเป็นรปู หน่งึ แต่เมือ่ นาเมาส์ไปวางตาแหน่งน้ันก็จะเปลี่ยนเปน็ อีกรูปหน่ึง ดังน้ี 1. วางเคอรเ์ ซอรต์ รงตาแหนง่ ที่ตอ้ งการจะสร้างภาพ 2. เลอื กคาสงั่ Rollover Image บนแทบ็ Common ที่แถบ Insert Bar ข้อมูลจาก : หนังสือสรา้ ง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ อ้งึ รตั นวงศ,์ 2554

จากน้ันไดอะล็อกบ็อกซ์ Insert Rollover Image จะปรากฏขึ้นมาให้กาหนดรายละเอยี ดต่างๆ ท่ีสาคญั 3. เลอื กรูปภาพแรกทจ่ี ะแสดงโดยนาเมาส์ไปวางท่ีช่อง Original Image โดยคลกิ ปมุ่ Browse… 4. คลิกเลือกโฟลเดอร์ทเี่ กบ็ รูปภาพ 5. คลิกเลอื กไฟลร์ ปู ภาพ 6. คลกิ ปมุ่ OK ข้อมูลจาก : หนงั สอื สรา้ ง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ อง้ึ รัตนวงศ,์ 2554

7. เลอื กรูปภาพทส่ี องทจ่ี ะแสดงหลงั นาเมาสไ์ ปวางทช่ี ่อง Rollover Image (ท้ำซ้ำข้ันตอนท่ี 4-6) 8. พมิ พ์คาอธบิ ายรูปภาพทีช่ ่อง Alternate text 9. คลกิ ปมุ่ OK จากน้ันภาพ Rollover Image จะปรากฏข้ึนมาในตาแหนง่ ทีว่ างเคอร์เซอรเ์ อาไว้เมื่อแสดงผลบนเบราเซอร์ หากนาเมาสไ์ ปวางบริเวณ Rollover Image ทีท่ าไว้ ภาพจะสลับไปอีกภาพหนึ่ง ขอ้ มูลจาก : หนังสอื สรา้ ง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธิ์ องึ้ รตั นวงศ,์ 2554