บทท 5 ใสภาพประกอบเวบเพจ

ภาพกราฟกกเปนอกองคประกอบหนงทส าคญส าหรบการสรางเวบเพจ เพราะจะชวยท าใหเวบเพจสวยงาม มสสนนาสนใจและสอความหมายไดดขน ซงภาพทน ามาใชอาจจะเปนเรองทเกยวของโดยตรงกบเนอหา เชน ภาพสนคาและบรการ หรอเปนเพยงภาพทน ามาใชตกแตงเพอใหเวบเพจดดกได ประเภทของภาพกราฟก ภาพกราฟกในคอมพวเตอรแบงออกเปน 2 ประเภทหลก ๆ คอ ภาพบทแมพ (Bitmap) เปนภาพทประกอบขนจากจดสขนาดเลกจ านวนมากเรยงตวกนในลกษณะของตาราง จดสเลก ๆ นเรยกวา พกเซล (pixel) ดงนนการบอกขนาดของภาพประเภทนจงอยในรป ความกวาง คณ ความสง ในหนวยพกเซล (เชน 640×480) ซงแตละภาพจะมคาทแนนอน ถาขยายภาพประเภทนจะท าใหภาพดหยาบและมองเหนจดสชดเจนขน ภาพเวกเตอร (Vector) ประกอบดวยเสนตรง สวนโคง และรปทรงเรขาคณต ทถกเกบอยในรปของค าสงโปรแกรมและคาตวเลขซงจะมการค านวณใหมทกครงทแสดงผล ดงนนภาพประเภทนจงมความคมชดเชนเดมเสมอไปไมวาจะขยายใหใหญขนเทาใดกตาม บราวเซอรสามารถแสดงภาพบทแมพพนฐาน เชน GIF และ JPG ไดทนท การแสดงภาพเวคเตอรสวนใหญจะตองอาศยโปรแกรมเสรมหรอปลกอน (plug in) เขามาชวย เชน Flash Player เปนตน ส าหรบเนอหาในบทนจะกลาวถงการใชงานภาพบทแมพทเหมาะกบเวบเพจ 3 ชนดคอ GIF, JPG และ PNG ภาพกราฟกพนฐานส าหรบเวบเพจ ไฟลภาพกราฟกทเหมาะจะใชกบเวบประกอบดวย JPG,GIF และ PNG ซงในแตละรปแบบจะมลกษณะเดนทแตกตางกนออกไป JPG เหมาะส าหรบภาพทใชสจ านวนมากและมการไลโทนสอยางตอเนอง เชน ภาพทถายจากกลองดจตอล ลกษณะเดนคอ ใชสไดถง 16.7 ลานส (ขอมลสมขนาด 24 บต) เลอกบบอดขอมลไดหลายระดบ แลวแตคณภาพของภาพและขนาดไฟลทตองการ (คณภาพสงไฟลจะใหญ,คณภาพต าไฟลจะเลก)

สามารถแสดงภาพทงภาพแบบเบลอ ๆ กอน แลวคอยชดขนตามปรมาณขอมลทโหลดมา (progressive) GIF เหมาะกบภาพสเรยบ ๆ ซงไมการไลโทนสมากนกและมขอบสทคมชด เชน โลโก ปมเมน ไอคอน ภาพตวอกษร ภาพวาดลายเสน การตน รวมทงภาพทว ๆ ไปทมขนาดเลก ลกษณะเดนคอ ใชสไดสงสดเพยง 256 ส (ขอมลสมขนาดไมเกน 8 บต) ซงถาใชจ านวนสนอยกจะชวยใหไฟลภาพเลกลงไดมาก สามารถก าหนดใหพนทบางบรเวณของภาพโปรงใส (transparent) สามารถแสดงภาพทงภาพแบบเบลอ ๆ กอน แลวคอยชดขนตามปรมาณขอมลทโหลดมา (interlaced) ใชสรางภาพเคลอนไหว (GIF animation) ได PNG แบงออกเปน 2 ชนดยอย คอ PNG-8 ซงมคณสมบตคลายภาพ GIF และ PNG-24 ซงมคณสมบตคลายภาพ JPG สวนลกษณะเดนทแตกตางออกไปจาก GIF และ JPG คอ PNG-8 ใชวธบบอดแบบไมสญเสยขอมล ภาพจงมคณภาพดกวา แตไฟลจะใหญกวา JPG มาก PNG-24 แตละพกเซลมคาความโปรงใสได 256 ระดบ ท าใหไลสจากวตถไปยงพนหลงทโปรงใสไดอยางตอเนอง (ในภาพ GIF แตละพกเซลจะเลอกไดเพยง โปรงใส หรอ ไมโปรงใส เทานน) วธเรยกใชภาพกราฟกใน Dreamweaver แหลงทสามารถเรยกใชภาพกราฟก ในการน าไฟลภาพกราฟกเขามาวางบนเวบเพจ สามารถเรยกใชไดจาก 4 แหลงหลก ๆดวยกนคอ ใชจากแหลงทเกบไฟลตนฉบบซงอยภายนอกเวบไซต เชน จากแผนซด,จากโฟลเดอรอน ๆ บนฮารดดสก หรอจากเครองอนในเครอขาย ใชภาพทอยภายในเวบไซต วธนตองน าไฟลภาพจากแหลงภายนอกเขามาเกบไวในโฟลเดอรของเวบไซตกอนโดยใช My Computer หรอ Windows Explorer ใชภาพจากอนเทอรเนตโดยตรง เปนการอางถงไฟลภาพทอยบนเวบไซตอน ๆ โดยระบ URL แบบเตมของไฟลนน เชน http://www.provision.co.th /images/logos/provisions.gif

เรยกใชภาพผานระบบฐานขอมล เหมาะส าหรบเวบไซตทมขนาดใหญหรอมภาพจ านวนมาก เชน แกลลอรภาพถาย โดยอาจเกบชอศลปนและชอไฟลภาพไวในเทเบลของฐานขอมล แลวใชค าสงโปรแกรมดงเรคอรดทตองการออกมา กจะไดชอไฟลภาพส าหรบน ามาแสดงบนเวบเพจ วธวางภาพกราฟกลงบนเวบเพจ เมอน าภาพกราฟกมาวางบนเวบเพจ โปรแกรมจะสรางค าสง HTML ทใชแสดงภาพใหอตโนมต (คอแทก <img> ซงจะระบต าแหนงทอย,ความกวางและความสงของภาพ) ส าหรบขนตอนการวางภาพบนเวบเพจสามารถท าไดหลายวธ เชน คลกปม Image บน Common ของพาเนล Insert (ถาเปนการใชครงแรก หรอถาไอคอนบนปมแสดงเปนภาพอนอย ใหคลก (ลกศรขางปม) แลวเลอกค าสง ) เลอกค าสง Insert > Image จากเมนหลก คลกลากไฟลภาพจากพาเนล Files หรอพาเนล Assets มาวางบนเวบเพจ คลกลากไฟลาพจากโฟลเดอรของ Windows มาวางบนเวบเพจในวนโดวของ Dreamweaver วางภาพกราฟกโดยใชปม Image หรอค าสงในเมน วางภาพทอยภายในเวบไซต 1. คลกตรงต าแหนงทจะวางภาพ

2. คลกปมImage ทแทบ Common ในพาเนล Insert หรอเลอกค าสง Insert > Image จากเมน 3. เปดเขามายงโฟลเดอรทเกบไฟลภาพ 4. คลกเลอกภาพ 5. คลก OK 6. (ถาตองการใสค าอธบายภาพหรอลงคของเวบเพจทมอธบายภาพ) 7. คลก OK

รปท 3.54 วางภาพกราฟกโดยใชปม Image หรอค าสงในเมน

ผลลพธทได

1. คลกตรงต าแหนงทจะวางภาพ

2. คลกปมImage ทแทบ Common ในพาเนล Insert หรอเลอกค าสง Insert > Image จากเมน

3. เปดเขามายง

โฟลเดอรทเกบไฟล

ภาพ

4. คลกเลอกภาพ

5. คลก OK

6. (ถาตองการใสค าอธบายภาพหรอลงคของ

เวบเพจทมอธบายภาพ)

7. คลก OK

ยกเลกไดอะลอกบอกซส าหรบใสค าอธบายภาพ ตามปกตเมอวางภาพบนเวบเพจ จะปรากฏไดอะลอกซใหใสค าอธบายภาพ (ตามขนตอนท 6 ขางตน) ซงไมจ าเปนตองก าหนดเสมอไป ดงนนเพอความรวดเรวอาจตงคาใหโปรแกรมขามขนตอนนและถาจะใสค าอธบายภาพภายหลงกใชพาเนล Properties แทน (ในหนงสอเลมนจะไมแสดงขนตอนนอก) 1. คลกลงคน หรอเลอกค าสง Edit>Preferences จากเมน 2. คลก Accessibility

3. ยกเลกออปชน 4. คลก OK วธก าหนดต าแหนงของไฟลภาพ (Relative to) วธการก าหนดต าแหนงทอยของไฟลภาพ (ซงถกใชในค าสง HTML ) มใหเลอก 2 แบบคอ แบบ Document และ Site Root โดยแตละแบบจะเหมาะส าหรบสถานการณทแตกตางกน สามารถเลอกออปชนนในขณะทวางภาพแตละภาพ หรอจะก าหนดเปนคาดฟอลตของเวบไซตเพอใชกบ ทก ๆ ภาพกได วธ Document เปนการก าหนดทอยโดยเทยบกบไฟลเวบเพจทภาพนนถกน าไปวางไว ตามปกตควรเลอกใชวธน เพราะมความยดหยนกวา คอไมวาตอนเผยแพรจะน าเวบไซตนไปเกบไวทโฟลเดอรใดบนเครองเวบเซรฟเวอร ต าแหนงทอยของไฟลภาพกจะยงคงถกตองเสมอ (URL ของภาพจะเปลยนไปตามทอยไฟลโดยอตโนมต)

รปท 2.55 แสดงการยกเลกไดอะลอกบอกซส าหรบใสค าอธบายภาพ

1

4

3 2

วธ Site Root เปนการก าหนดทอยโดยเทยบกบโฟลเดอรหลก (root) ของเวบไซต ตวอยาง เชน จากโครงสรางของเวบไซตเดมขางตนเมอภาพ foto3.gif ถกเรยกใชบนเวบเพจ fototechnic.html จะไดต าแหนงทอยของภาพคอ –mages-foto3.gif (เครองหมายสแลช/ใชอางองต าแหนงระดบบนสดของเวบไซต) ขอดของวธนคอ เมอน าเวบไซตไปเผยแพร URL ของไฟลภาพจะคงเดมเสมอ ไมวาจะเรยกใชจากเวบเพจซงเกบอยทโฟลเดอรใด วธนจงเหมาะส าหรบการเรยกใชไฟลภาพจากโปรแกรม server side script ขอเสยของวธนคอ ถาน าเวบไซตไปเกบไวทโฟลเดอรยอยบนเวบเซรฟเวอร (เชน กรณทใชบรการของเซรฟเวอรฟร ซงมกจะตองน าเวบไซตไปไวในโฟลเดอรยอยทผใหบรการเตรยมไว)อาจจะเกดความผดพลาดของทอยไฟลท าใหภาพไมแสดงบนเวบเพจ ดงตวอยางตอไปน ก าหนด URL ดฟอลตส าหรบใชกบวธ Site Root เปนการระบ URL ปลายทางทจะอพโหลดเวบไซตไปไว โดยใชรวมกบวธก าหนดต าแหนงภาพแบบ Site Root เพอแกปญหาทเกดขนตามตวอยางท 2 ขางตน โดยควรก าหนดไวตงแตเมอเรมสรางเวบไซต 1. เลอกค าสง Site> Manage Sites 2. คลกชอเวบไซต 3. คลกปม Edit 4. พมพ URL ของเวบไซตทงชอโดเมนและโฟลเดอรยอย เชน http://www.freeserver.com 5. คลกปม Save

2 3 4

5

รปท 2.56 แสดงการก าหนด URL ดฟอลตส าหรบใชกบวธ Site Root

ตงชอภาพ เปนชอส าหรบใชกบค าสงภาษาสครปตบนเวบเพจ (เชน เมอเรยกใชเอฟเฟคต swap image) และเปนคนละตวกบชอไฟลภาพ สามารถตงชอภาพเองเพอใหสอความหมายมฉะนนโปรแกรมจะตงแบบเรยงหมายเลขใหโดยอตโนมต (เมอมการใชค าสงทเกยวของ) ชอนใหใชเฉพาะภาษาองกฤษหรอตวเลขและหามเวนวรรค 1. คลกเลอกภาพ 2. คลกในชองแลวพมพชอภาพ 3. กดคย Enter ปรบขนาดภาพ ความกวาง (W) และความสง (H) ของภาพทแสดงนมหนวยเปนพกเซล สามารถปรบขนาดภาพไดโดยพมพคาใหมลงในชองแลวกดคย Enter หรอใชวธคลกลากทจดแฮนเดลกได 1. คลกเลอกภาพ 2. คลกลากทจดแฮนเดล.... ถาตองการปรบโดยรกษาสดสวน ใหกดคย Shift คางไวขณะคลกลากจดแฮนเดลทมมภาพ ภายหลงการปรบ หากตองการกลบสขนาดเดม (ขนาดจรง)ของภาพ ใหคลกไอคอน การปรบขนาดภาพ เปนเพยงการเปลยนมตการแสดงผลบนเวบเพจเทานน ไมสงผลถงขนาดจรงของภาพ และไมไดท าใหขนาดไฟลใหญขนหรอเลกลง ดเพมเตมทหวขอ “ปรบขนาดจรงของภาพ (Resample)”

รปท 2.57 แสดงการปรบขนาดภาพ

1.คลกเลอกภาพ

2.คลกลากทจดแฮนเดล...

หรอพมพคาความกวางและความสง

ใสค าอธบายภาพ (Alt) Alt (alternative text) เปนขอความทใชอธบายหรอแสดงแทนภาพ ซงจะปรากฏขนในกรณตาง ๆ (แลวแตการท างานของบราวเซอร) เชน เมอผชมใชบราวเซอรทแสดงไดแตขอความ (ไมสามารถแสดงภาพกราฟก) หรอบราวเซอรนนถกตงคาไมใหแสดงภาพกราฟก เมอผชมเลอนเมาสไปชบนภาพ เมอบราวเซอรหาไฟลภาพไมพบเนองจากชอไฟลผดหรอไฟลถกลบไปแลว ใสเสนกรอบใหกบภาพ ถาตองการใหภาพมเสนกรอบลอมรอบ กระบความหนาเสนในชอง Border (หนวยเปนพกเซล) ซงในกรณทใชภาพเปนลงค สของเสนกรอบจะเปลยนตามสของลงค นอกเหนอจากนจะก าหนดสกรอบไดโดยใชการจดรปแบบดวย CSS 1. คลกเลอกภาพ

2. พมพคาความหนาของเสน (พกเซล) 3. กดคย Enter

1.คลกเลอกภาพ

2.พมพขอความอธบายภาพ

3.กดคย Enter

รปท 2.58 แสดงการใสค าอธบายภาพ (Alt)

1

2

ผลลพธทได

รปท 2.59 แสดงการใสเสนกรอบใหกบภาพ

จดต าแหนงภาพเทยบกบขอความ เมอน าภาพมาวางบนเวบเพจหากในยอหนานนมขอความอยดวยขอความดงกลาวจะถกดนใหไปอยดานบนหรอดานลาง ท าใหดไมสวยแตสามารถจดต าแหนงเพอใหภาพและขอความถกวางไวเคยงขางกนหรอเลอกต าแหนงของภาพแบบอนไดโดยก าหนดออปชน Align ดงน Default ไมจดต าแหนง การแสดงผลจะขนกบบราวเซอรแตมกเหมอนแบบ Bottom Baseline และ Bottom จดขอบลางของภาพใหอยในแนวเดยวกบเสนฐานของตวอกษร Top จดขอบบนของภาพใหอยในแนวเดยวกบสวนบนสดของตวอกษรทสงทสด หรอสวนบนของออบเจคทสงทสดในยอหนานน Middle จดแนวกงกลางของภาพใหอยในแนวเดยวกบเสนฐานของตวอกษร Text Top จดขอบบนของภาพใหอยในแนวเดยวกบสวนบนสดของตวอกษร Absolute Middle จดแนวกงกลางของภาพใหอยแนวเดยวกบกงกลางบรรทดขอความ Absolute Bottom จดขอบลางของภาพใหอยในแนวลางสดของบรรทด Left จดภาพไวดานซายสดของขอความ Right จดภาพไวดานขวาสดของขอความ ก าหนดระยะหางระหวางภาพกบเนอหาอนๆ ระยะหางระหวางภาพกราฟกกบเนอหาอน ๆ ทอยโดยรอบจะมอย 2 คาคอ V Space หมายถงระยะดานบนและลาง และ H Space หมายถงระยะดานซายและขวา หนวยเปนพกเซล ถาไมก าหนดคาน ขอความและเนอหาจะอยตดกบภาพซงภาพอาจจะท าใหดแนนเกนไป 1. คลกเลอกภาพ 2. พมพคาระยะหาง 3. กดคย Enter

2.พมพคาระยะหาง

รปท 2.60 แสดงการก าหนดระยะหางระหวางภาพกบเนอหาอนๆ

จองพนทไววางภาพ (Image Placeholder) เปนการวางออบเจคทใชแทนภาพลงบนเวบเพจ เพอจองพนทหรอก าหนดต าแหนงไวกอนโดยจะปรากฏกรอบสเหลยมตามขนาดทระบ จากนนสามารถเลอกไฟลภาพมาใสในภายหลงไดเมอตองการ 1. คลกวางเคอรเซอรตรงต าแหนงทตองการ 2. เลอกค าสง Insert>Image Objects>Image Placeholder 3. ตงชอ ก าหนดขนาดเลอกส และใสค าอธบาย 4. คลก OK ตกแตงภาพดวย Dreamweaver Dreamweaver มชดเครองมอทางดานกราฟกซงสามารถใชตกแตงภาพทน ามาวางบนเวบเพจอยางงาย ๆ ได โดยไมตองอาศยโปรแกรมกราฟกอนซงประกอบดวยเครองมอส าหรบตดขอบภาพ (Crop),ปรบขนาดจรงของภาพ (Resample),ปรบความสวาง/คอนทราสต (Brightness and Contrast)และปรบความคมชด (Sharpen)

รปท 2.61 แสดงการจองพนทไววางภาพ (Image Placeholder)

3 4

ชองแสดงชอไฟลภาพจะวางอย

กรอบ Image Placeholder

ตดขอบภาพ (Crop) ใชตดขอบรอบ ๆ ภาพ เพอใหเหลอกเฉพาะบรเวณทตองการ 1. คลกเลอกภาพ 2. คลกเครองมอ Crop หรอเลอกค าสง Modify>Image>Crop 3.คลกลากจดแฮนเดลแตละดาน (หรอคลกลากภายในเพอเลอนต าแหนงกรอบ) จนไดขอบเขตภาพทตองการ 4. กดคย Enter ปรบความสวางและคอนทราสตของภาพ (Brightness and Contrast) ถาหากภาพทน ามาใชนนมดหรอสวางเกนไป หรอมคอนทราสตไมด กสามารถปรบแตงไดดงน 1. คลกเลอกภาพ 2. คลกเครองมอ Brightness and Contrast หรอเลอกค าสง Modify>Image>Brightness/Contrast 3. ปรบคา Brightness และ Contrast ตามตองการ 4. คลก OK

รปท 2.62 แสดงการตดขอบภาพ (Crop)

รปท 2.63 แสดงการปรบความสวางและคอนทราสตของภาพ

ปรบความคมชดของภาพ (Sharpen) 1. คลกเลอกภาพ 2. คลกเครองมอ Sharpen หรอ Modify>Image>Sharpen 3. ปรบเพมความคมชดตามตองการ 4. คลก OK แทรกไฟลภาพ PSD ไฟล PSD เปนเพยงไฟลตนฉบบเทานน เมอตองการน ามาใชโปรแกรมจะใหแปลงเปน .png, .jpg หรอ .gif ซงเหมาะกบการน าไปใชบนเวบ โดยเราจะตองก าหนดคณภาพและการบบอดของภาพดวย มขนตอนดงน 1. คลกตรงต าแหนงทจะวางภาพ 2. คลกปม Image ทแทบ Common ในพาเนล Insert หรอเลอกค าสง Insert>Image จากเมน 3. คลกเลอกไฟลภาพ 4. คลก OK 5. เลอกฟอรแมตภาพ 6. ก าหนดคณภาพของภาพส าหรบใชบนเวบเพจ 7. คลก OK 8. เลอกโฟลเดอรเกบ 9. ก าหนดชอไฟล 10. คลก Save 11. คลก OK

รปท 2.64 แสดงการปรบความคมชดของภาพ (Sharpen)

การ Optimize ภาพ หมายถงการปรบคณสมบตของภาพเพอใหเหมาะส าหรบใชบนเวบเพจมากทสด เชน เปลยนชนดไฟล ยอ/ขยายขนาดจรงของภาพ เพม/ลดจ านวนส เพมการบบอดหรอปรบลดคณภาพและขนาดไฟล เปนตน 1. คลกเลอกทภาพ 2. คลกเครองมอ Optimize หรอเลอกค าสง Modify>Image>Optimize 3. ก าหนดออปชนตาง ๆ ตามตองการ 4. คลก OK

1

2

3

4

รปท 2.65 แสดงการ Optimize ภาพ

ใสภาพฉากหลงใหเวบเพจ (Background Image) วธหนงในการตกแตงเวบเพจใหสวยงาม กคอการน าภาพมาใสเปนฉากหลงหรอแบคกราวด (Background) เพอสรางความสะดดตาและนาสนใจ ขนตอนการใสภาพฉากหลง 1. คลกปม บนพาเนล Properties หรอเลอกค าสง Modify> Page Properties 2. คลก Appearance (CSS) 3. คลก Browse…. 4. เปดเขามายงโฟลเดอรเกบภาพ 5. คลกเลอกภาพ 6. คลก OK 7. คลกแลวเคลอกวธเรยงภาพ 8. เลอกปม Apply เพอดผลลพธกอน หากไมพอใจกท าขนตอนท 3-7 เพอเลอกภาพหรอออปชนอน แลวคลก OK

2 3 4

7 8 5 6

รปท 2.66 แสดงขนตอนการใสภาพฉากหลง