ใบเนื้อหา4

วชิ า การสรา้ งเว็บไซต์ รหสั วชิ า 2204-2009 หน่วยท่ี 4 การแตง่ เวบ็ ดว้ ยรปู ภาพ ครผู ูส้ อน ศริ ินภา บตุ ะเขยี ว แผนกวชิ าคอมพวิ เตอรธ์ รุ กิจวทิ ยาลยั เทคนคิ กาญจนาภิเษก สมทุ รปราการ

ใบเน้อื หา หนว่ ยที่ 4 การแตง่ เวบ็ ดว้ ยรูปภาพเน้ือหาสาระการสอน/การเรียนรู้• ด้านความรู้(ทฤษฎ)ี 1. ภาพกราฟกิ ทเ่ี หมาะกับเวบ็ เพจ กราฟิกทเ่ี หมาะสมในการใชป้ ระกอบเว็บเพจ มี 2 ชนดิ คือ 1. GIF (Graphic Interchange Format) มีนามสกลุ ของไฟลเ์ ปน็ .gif สามารถแสดงสีไดเ้ พียง 256สี (ขอ้ มูลสี 8 บิต) เหมาะสาหรับใชเ้ ปน็ โลโก้ การ์ตูนภาพลายเสน้ และภาพตัวอักษร ที่มีลักษณะเป็นสที บึ ไมม่ ีการไล่ระดับสีมากนัก และมีขอบท่คี มชัด นอกจากนยี้ งั สามารถใช้เป็นพนื้ หลงั โปรง่ ใส (Transparent) และสร้างภาพเปน็ ภาพเคลอ่ื นไหว (Animation) ได้ 2. JPG (Joint Photographic Expert Group) มีนามสกุลของไฟล์เปน็ .jpg หรือ .jpeg สามารถแสดงสีได้ 16.7 ลา้ นสี (ขอ้ มลู สี 24 บิต) เหมาะสาหรบั ภาพถา่ ย หรอื ภาพที่ใช้สีจานวนมาก และมีการไล่ระดบั สอี ยา่ งต่อเน่ือง 2. ใส่ภาพลงบนเว็บเพจ การใสภ่ าพลงบนเวบ็ มีขัน้ ตอนดงั น้ี

3. ปรับแต่งคณุ สมบัติของภาพ 1. Image Name (Name) กาหนดชือ่ ให้กับรูป ใชส้ าหรบั เมื่อเราเขยี น script อา้ งองิ รูป 2. W (Width) กาหนดความยาวของรูปทต่ี ้องการให้แสดงผล โดยไม่มผี ลกบั ไฟลร์ ูปเดมิ 3. H (Height) กาหนดความสูงของรูปท่ีต้องการใหแ้ สดงผล โดยไมม่ ีผลกับไฟล์รปู เดมิ 4. Src (Source) บอก folder ที่ใช้เกบ็ ไฟลร์ ูปท่เี ราเลอื ก 5. Link (Hyperlink) ใชก้ าหนด hyperlink ของรูป 6. Alt (Alternate Text) คาบรรยายรปู จะปรากฏก็ตอ่ เมอ่ื รูปไม่แสดงผล และนาเมาสไ์ ปอยู่เหนอืรูป (ie) 7. Edit ประกอบดว้ ยเครอ่ื งมือเหลา่ นี้ เครื่องมือของ Dreamweaver จะทาการแกไ้ ขท่ีไฟล์รปูโดยตรง 7.1 Fireworks แกไ้ ขรูปด้วย โปรแกรม Fireworks 7.2 Optimize แกไ้ ขขนาดไฟล์ของรปู 7.3 Crop ใชต้ ดั รปู ใหไ้ ดข้ นาดท่ีต้องการ 7.4 Brightness and Contrast ปรบั ความสวา่ งของรูป 7.5 Sharpen ใช้แก้ไขความคมชัดของรูป 8. V Space (Vertical Space) กาหนดระยะหา่ งระหวา่ งรูปกับวัตถอุ ื่น ในส่วนบนและลา่ งของรปู 9. H Space (Horizontal Space) กาหนดระยะหา่ งระหว่างรูปกบั วตั ถอุ ่ืน ในส่วน ซา้ ยและขวาของ รูป 10. Low Src (Low Source) ในกรณีที่รปู ของเราไฟล์ใหญม่ ากตอ้ งใชเ้ วลาโหลดนานเราอาจกาหนดให้มีรูปที่ขนาดเล็กๆ รูปอนื่ โหลดขนึ้ มากอ่ น โดยใช้ตัวเลือกน้ี 11. Border (Image Border) ใชก้ าหนดขนาดของขอบรปู 12. Align (Alignment) ใช้กาหนดตาแหนง่ ของรปู เชน่ ชิดซ้าย ขวา บน ล่าง 13. Class (CSS Setting) ถา้ เราเขยี น CSS เอาไว้ตวั เลอื กนี้จะใชก้ าหนด CSS ทีเ่ ราเขยี นไว้ 14. Map (Map Name) ใชก้ าหนดชอ่ื ใหก้ บั Map image จะกลา่ วถงึ ในบทอืน่ 15. Hot spot tool (Name) เป็นเคร่ืองมือที่ใชร้ ่วมกับ Map Name จะกลา่ วถึงในบทอื่น 16. Target (Name) กาหนดตวั เลือกของหน้าท่ีจะเปิด link จะกลา่ วถึงในบทอนื่ 4. กาหนดช่อื ภาพ

ชือ่ ภาพบนพาเนล PROPERTIES เป็นชอ่ื ทใ่ี ช้อ้างองิ สาหรบั คาสัง่ ภาษาสคริปต์ในเวบ็ เพจ เชน่ ในกรณีทใ่ี ชเ้ อฟเฟ็คต์ swap image เป็นต้น (ไม่ได้เปน็ ช่อื ของไฟล์ภาพ) ซ่ึงสามารถตัง้ ขึ้นเองได้โดยใชต้ ัวอกั ษรภาษาอังกฤษหรือตวั เลขเท่าน้ัน และห้ามเว้นวรรคหรือใชส้ ัญลกั ษณ์ใด ๆ 5. ปรับขนาดภาพ ขนาดความกว้าง (w) และความสงู (H) ของภาพใน Dreamweaver มหี น่วยเปน็ พกิ เซล ซ่ึงปรบัขนาดไดโ้ ดยกรอกตวั เลขใหม่ลงไป หรอื ใช้แฮนเดิลที่กรอบภาพปรับใหไ้ ด้ขนาดท่ีต้องการ นอกจากน้ีถา้ ต้องการปรับขนาดภาพให้ได้สดั ส่วนเดมิ ใหก้ ดคีย์ Shift พรอ้ มกบั การคลกิ ลากแฮนเดลิ และถ้าตอ้ งการให้ภาพท่ีปรบัขนาดไปแลว้ กลบั สูข่ นาดเดิม ใหค้ ลกิ ไอคอน ดังรูป 6. ส่มุ ข้อมลู ภาพใหญ่ การปรับขนาดภาพตามขนั้ ตอนข้างต้นเป็นเพยี งการย่อ – ขยายภาพเพื่อแสดงบนเว็บเพจเท่านั้นไมไ่ ดท้ าให้ไฟล์ต้นฉบับถูกปรับแก้ขนาดไปดว้ ย ซ่งึ ใน Dreamweaver มีเครือ่ งมือ Resample ทจ่ี ะช่วยปรบัขนาดภาพ รวมถงึ ขนาดไฟลต์ ้นฉบบั ไปด้วย โดยมีวิธกี ารใช้ ดังนี้

7. เปล่ยี นไฟล์ภาพ ในกรณที ี่ต้องการเปลยี่ นไฟล์ภาพ จากภาพเดิมใหเ้ ปน็ อีกภาพหนงึ่ เขา้ มาแทนที่สามารถทาไดด้ ังน้ี8. ปรบั ระยะห่างของภาพ

เมอ่ื วางภาพและข้อความไวบ้ นเว็บเพจ โดยไม่กาหนดระยะห่างระหว่างภาพกบั ข้อความแล้วภาพกบัข้อความจะอยูต่ ดิ กัน ไมส่ วยงาม จึงควรปรับระยะหา่ งเลก็ น้อย ซงึ่ มวี ธิ กี ารดังต่อไปน้ี 9. กาหนดขนาดเสน้ กรอบภาพ ภาพที่แทรกไว้ในเวบ็ เพจนน้ั สามารถใสเ่ สน้ กรอบเพื่อใหเ้ ห็นภาพที่ชดั เจนขนึ้ ได้ โดยกาหนดขนาดเส้นกรอบท่ีมีหนว่ ยเปน็ พิกเซลได้บนพาเนล PROPERTIES ได้ดงั น้ี 10. กาหนดขอ้ ความอธบิ ายภาพ

หลงั การแทรกรูปภาพทุกครัง้ จะมีไดอะล็อกบอ็ กซท์ ่ีให้คุณใส่ข้อความอธบิ ายภาพลงไปได้ ในกรณีที่คุณไม่ได้ใส่ข้อความใด ๆ ลงไปตอนน้ัน และต้องการแทรกข้อความอธิบายภาพนนั้ ทีหลัง ก็สามารถแทรกหรือแก้ไขข้อความไดจ้ ากพาแนล PROPERTIES 11. ปรบั แตง่ ภาพดว้ ยเคร่ืองมือของ Dreamweaver หากเราต้องการปรับแต่งภาพท่นี ามาประกอบบนเวบ็ เพจ ก็สามารถทาไดบ้ นDreamweaverโดยตรง โดยมีเครอ่ื งมืออานวยความสะดวกในการปรับแต่งภาพ เช่น Crop (ตัดภาพ), Sharpen (ปรบั ความคมชดั ) เปน็ ตน้ หากจะปรบั แตง่ ดว้ ยคาสัง่ อ่นื มากกวา่ นี้ ต้องเข้าไปปรับในโปรแกรมปรับแตง่ ภาพอ่ืน ๆ การปรับแตง่ ภาพบน Dreamweaver มรี ายละเอยี ด ดงั น้ี ตัดภาพ (Crop) ภาพท่นี าวางบนเวบ็ เพจ หากมีขนาดใหญ่มากหรือต้องการตัดรายละเอยี ดอื่น ๆเพอ่ื เน้นจดุ สาคัญของภาพ คณุ สามารถตดั ภาพเพ่ือใหไ้ ดส้ ว่ นทีต่ อ้ งการโดยใช้เคร่ืองมือ Crop บนพาเนล PROPERTIES โดยมีขัน้ ตอนดังนี้

ปรับความสวา่ งและคอนทราสตข์ องภาพ หากภาพท่ีนามาประกอบในเว็บเพจนน้ั ดสู ว่างหรอื มืดมากเกินไป เราสามารถปรับแต่งได้โดยตรงในDreamweaver โดยใชเ้ ครอ่ื งมอื Brightness and Contrast บนพาเนล PROPERTIES ดังน้ี ปรบั ความคมชัดของภาพ ในกรณีทภ่ี าพประกอบทีเ่ ตรียมไวย้ ังไมค่ มชัดเทา่ ท่คี วร และไม่อยากเสียเวลาเข้าไปปรบั แตง่ ในโปรแกรมกราฟิก กม็ อี ีกทางเลอื กหน่ึงคือปรับแตง่ ความคมชัดของภาพบนพาเนล PROPERTIES ในโปรแกรมDreamweaver โดยตรง ดังนี้

12. ปรับแตง่ คณุ สมบัติของไฟล์ภาพ หากภาพทีเ่ รานามาใชน้ นั้ มภี าพขนาดใหญเ่ กินไป เราสามารถปรบั ขนาดไฟล์ใหเ้ ล็กลงได้ด้วยการปรับคุณสมบตั ิ หรอื เปลี่ยนฟอรแ์ มตของภาพ อย่างไรก็ตามโปรแกรมจะแสดงให้เหน็ ภาพผลลัพธ์กอ่ นทจ่ี ะนาไปใช้งานเปรยี บเทยี บกันแต่ละแบบได้ดว้ ย ดงั ขัน้ ตอนต่อไปนี้ 13. สรา้ งเอฟเฟค็ ตภ์ าพเมื่อชเ้ี มาส์ (Rollover Image)

Rollover image เป็นเอฟเฟ็คตส์ ลบั หน้าบนเวบ็ เพจจากภาพหนึง่ ไปเปน็ อีกภาพหนึ่งเมื่อเลือ่ นเมาส์ไปชที้ ี่ภาพบนเวบ็ บราวเซอร์ โดยทั่วไปนิยมสร้างไฮเปอร์ลิงค์จากภาพไปยังเวบ็ อนื่ ๆ ภายในเวบ็ โดยเราจะต้องเตรียมภาพท่ีมีขนาดเทา่ กันไว้ก่อน 2 ภาพ แล้วทาตามขั้นตอน ดังต่อไปนี้ 14. จองพื้นที่ไว้วางภาพ (Image Placeholder) หากเรามีเน้ือหาท่เี ปน็ ข้อความแล้ว แตย่ ังไม่มภี าพประกอบ เราสามารถสรา้ งพ้ืนทจ่ี องไว้สาหรบั ใส่ภาพภายหลงั ได้ โดยใช้เครื่องมอื Image Placeholder ดังนี้ จองพื้นท่ีภาพ

วางภาพในตาแหน่งท่ีจองไว้15. กาหนดภาพฉากหลัง

นอกจากการกาหนดสพี ้นื หลังแล้ว เรายงั สามารถกาหนดภาพเปน็ ฉากหลังของเว็บเพจได้ ซ่ึงมวี ิธใี ส่ฉากหลงั ของเวบ็ เพจไดด้ ังนี้