หน่วยที่ 8

หน่�วยที่�� 8 แต่�งเต่�มเว�บเพจด้�วยกราฟิ�ก

ร��จ�กก�บภาพการฟิ�กชน่�ด้ต่�างๆ ภาพกราฟิ�กมีร�ปแบบการจั�ดเก�บหลายชนิ�ด โดยแต่�ละชนิ�ดมีความีแต่กต่�างก�นิในิเร"#องของ

ขนิาดไฟิล'ที่#ใช)ในิการภาพ และจั*านิวนิสีที่#แสีดงได) สี*าหร�บการสีร)างเว�บเพจันิ�,นิการฟิ�กที่#ใช)สี�วนิใหญ่�เป.นิชนิ�ด GIF และ JPEG

นิ�,นิมีข)อดและข)อเสีย ต่�อไปนิ,จัะกล�าวถึ0งการเล"อกชนิ�ดของการฟิ�กที่#เหมีาะสีมีในิกานิสีร)างเว�บเพจั โดยที่�#วไปเราจัะพบว�าการ

ผสีานิระหว�างก�นิจัะให)ผลล�พธ์'ที่#ดที่#สี3ดภาพชน่�ด้ GIF การฟิ�ก เป.นิร�ปแบบที่#ค�ดค)นิเพ"#อใช)ก�บคอมีพ�วเต่อร'ต่�างแบบต่�างๆร3 �นิได) ที่*าให)เหมีาะสีมี

สี*าหร�บการนิ*ามีาใช)ในิเว�บเพจั เพราะต่)องแสีดงได)เคร"#องที่#แต่กต่�างก�นิ แต่�ข)อจั*าก�ดก�ดค"อ สีามีารถึใช)สีได)สี�งสี3ดเพยงคร�,งละ 256 สีเที่�านิ�,นิ

ชน่�ด้ของภาพ JPEG การฟิ�ก ถึ�กพ�ฒนิาเป.นิการฟิ�กที่#สีามีารถึที่*างานิก�บเคร"#องต่�างแบบต่�างร3 �นิได)เช�นิก�นิ ข)อด

ของกราฟิ�กชนิ�ดนิ, ค"อสีามีารถึแสีดงสีได)สี�งสี3ดถึ0ง16.7 ล)านิสี อย�างไรก�ต่ามีจัะมีการสี�ญ่เสียรายละเอยดบ)าง ซึ่0#งเป.นิผลจัากการบบอ�กข)อมี�ล เพ"#อลดขนิาดภาพให)มีขนิาดใหญ่�จันิเก�นิไป

แสด้งภาพบน่เว�บ <img> หล�งจัากนิ�,นิที่#เราได)เต่รยมีภาพที่#จัะนิ*ามีาใสี�ในิเว�บเพจัแล)ว ต่�อไปเป.นิการนิ*าภาพมีาแสีดง

การใส�ข�อความก%าก�บภาพ เราควรใสี�ข)อความีก*าก�บภาพ เพราะว�ามีผ�)ใช)อ�นิเที่อร'เนิ�ต่กล3�มีหนิ0#งใช)บราวเซึ่อร'ที่#แสีดง

เฉพาะต่�วอ�กษร และไมี�สีามีารถึโหลดภาพบนิเว�บมีาด�ได) หร"อในิกรรผ�)ใช)ก�บก*าหนิดบราวเซึ่อร'ไมี�โหลดภาพมีาแสีดงเพราะต่)องการ

อ�านิเฉาพะข)อความี ข)อความีนิ,จัะก*าก�บแที่นิภาพซึ่0#งแมี)ก�บผ�)จัะไมี�เห�นิภาพในิเว�บเพจั แต่�ก�สีามีารถึอ�านิค*าบรรยายจัากภาพเพ"#อว�า

ที่ราบว�าภาพนิ�,นิค"ออะไรดที่#จัร�งแล)วการใช)ข)อความีก*าก�บภาพที่#มีประโยชนิ'สี*าหร�บผ�)ใช)บราวเซึ่อร'ธ์รรมีดาด)วย เพราะข)อความีก*าก�บภาพ

จัะปรากฏในิขณะภาพที่#ก*าล�งโหลดอย�� สี*าหร�บการแที่รกข)อความีก*าก�บภาพที่*าได)โดยใช)แอต่ที่ร�บ�วต่'altต่�วอย�างการใสี�ข)อความีก*าก�บภาพ

ปร�บขน่าด้ร�ปภาพ ถึ)าภาพที่#เราไปแสีดงในิเว�บเพจัมีขนิดเล�กหร"อใหญ่�เก�นิไป เราสีามีารถึก*าหนิดใหมี�ได)ก�บ

ภาพ โดยระบ3ความีกว)างและความียาวที่#ต่)องการต่�วอย�างการปร�บขนิาดภาพของร�ปภาพ การก*าหนิดของร3ปภาพ หากก*าหนิดเพยงด)านิเดยว อกด)านิหนิ0#งจัะเปล#ยนิไปต่ามีด)วย

อ�ต่ราสี�วนิที่#เที่�าก�นิ แต่�ถึ)าเราก*าหนิดขนิาดที่�,งสีองด)านิจัะที่*าให)อ�ต่ราของภาพผ�ดเพ,ยนิได)

การใส�กรอบให�ก�บร�ปภาพ บางคร�,งเราอาจัต่)องการใสี�กรอบให)ก�บร�ปภาพที่#แสีดงเพ"#อเนิ)นิร�ปนิ�,นิ หร"อแยกสี�วนิที่#

เป.นิร�ปออกจัากข)อความี ซึ่0#งเราที่*าได)โดยใช)แอต่ที่ร�บ�วต่'borderต่�วอย�างการใสี�กรอบร�ปภาพ

การจ�ด้ต่%าแหน่�งร�ปภาพ การนิ*าภาพมีาแสีดงในิเว�บเพจันิ�,นิเป.นิเพยงข�,นิต่อนิแรก ต่�อไปเราจั�ดวางต่*าแหนิ�งภาพให)

เช)าก�บข)อความีมีอย��เด�มี โดยใช)แอต่ที่ร�บ�วต่'ต่�วอย�างการจั�ดต่*าแหนิ�งร�ปภาพ

เพ��มระยะห�างร�ปภาพก�บข�อความ ภาพนิ�,นิโดยปกต่�จัะถึ�กวางช�ดต่�ดก�บข)อความี เราสีามีารถึเพ�#มีระยะห�างเพ"#อความีสีวยงามี

ได) โดยใช)แอต่ที่ร�บ�วต่' ก*าหนิดระยะห�างแนิวต่�,ง ด)านิบนิและล�าง ก*าหนิดระยะห�างแนิวนิอนิ ด)านิซึ่)ายและขวาต่�วอย�างการเพ�#มีระยะห�างร�ปก�บข)อความี

การที่�(งระยะข�อความให�พ�น่ขอบเข๖ร�ป <br> การจั�ดร�ปภาพร�วมีก�บข)อความี สี�วนิของข)อความีจัะถึ�กพ�มีพ'ต่�อเนิ"#องไปเร"#อยๆ ซึ่0#งบาง

คร�,งด�ไมี�งามีเที่�าไร เราสีามีารถึแก)ไขได)โดยที่�,งระยะห�างข)อความีให)พ)นิขอบเขต่ร�ปภาพ แล)วจั0งเร�#มีพ�มีพ'ข)อความีในิสี�วนิต่�อไป ซึ่0#งเรา

จัะใช)แอต่ที่ร�บ�วต่'ต่�วอย�างการใช)งานิแที่�ก br

แสด้งภาพเป*น่ฉากหลั�ง <body> เราสีามีารถึแต่�งเว�บเพจัให)มีภาพเป.นิพ",นิหล�งได) โดยก*าหนิดภาพเล�กๆ หนิ0#งภาพที่#จัะ

ถึ�กจั�ดเรยงซึ่*,าก�นิเพ"#อสีร)างพ",นิหล�งให)ก�บเว�บเพจัในิล�กษณะเดยวก�นิก�บแผ�นิกระเบ",อง และภาพที่#ใช)ควรมีรสีจัางไมี�ซึ่�บซึ่)อนิ เพราะจัะ

ที่*าให)ความีในิข)อความีหนิ)าเว�บเพจันิ�,นิอ�านิยากต่�วอย�างการแสีดงภาพเป.นิฉากหล�งเว�บเพจั

แสด้งภาพฉากหลั�งอย��ก�บที่�� นิอกจัากเราจัะใช)ภาพมีาเป.นิฉากหล�งแล)ว เราย�งสีามีารถึเพ�#มีล3กเล�นิให)ก�บภาพฉากหล�งนิ,

โดยขณะที่#เราเล"#อนิแถึบเล"#อนิลงไปเร"#อยๆ ภาพที่#เราใช)เป.นิฉากหล�งก�อย��ก�บที่# ไมี�เคล"#อนิไมี�ไปต่ามีที่#เล"#อนิต่�วอย�างการก*าหนิดฉากหล�งอย��ก�บที่#

ลั�กเลั�น่เก��ยวก�บชน่�ด้ของ GFI ถึ0งแมี)การใช)การฟิ�กจัะถึ�กจั*าก�ดด)วยจั*านิวนิสีที่#ใช)ได)เพยง 256 สี แต่�ละการฟิ�กชนิ�ดนิ,

มีล�กเล�นิที่#เราสีามีารถึนิ*ามีาใช)เพ"#อเสีร�มีความีโดดเด�นิของเว�บเพจัได) นิ�,นิค"อเที่คนิ�ค Interlacing และ Transparencyการใช� Interlacing ถึ)าเว�บเพจัของเรามีภาพขนิาดใหญ่�หร"อมีภาพจั*านิวนิมีาก ผ�)ใช)ที่#เช"#อมีต่�ออ�นิเที่อร'เนิ�ต่

ด)วยความีเร�วไมี�สี�งจัะใช)เวลานิานิในิการดาวนิ'โหลดภาพ ว0#งอาจัที่*าให)ต่)องคอยจันิเปล#ยนิใจัไปเป�ดด3เว�บเพจัอ"#นิก�ได) ว�ธ์หนิ0#งที่#สีามีารถึ

แก)ป;ญ่หานิ,ได) ค"อการใช)การฟิ�กชนิ�ด GIF ภาพชนิ�ดนิ,จัะถึ�กโหลดโดยบราวเซึ่อร'ข0,นิมีาอย�างรวดเร�วแบบไมี�ช�ดก�อนิ และค�อยๆ ช�ด

ข0,นิต่ามีล*าด�บ ผ�)ใช)จัะสีามีารถึเห�นิภาพหยาบๆ ของภาพสีมีบร�ณ'ที่#ก*าล�งใช)เวลาโหลดข0,นิมีาได) ที่*าให)ร� )ไมี�หง3ดหง�ดในิการรอ

ว�ธี�การสร�างภาพชน่�ด้ GIF ได)โดยการเป�ดภาพที่#ต่)องการนิ*ามีาใช)ในิโปรแกรมีแต่กต่�างภาพ Photoshop และสี�#ง

Save for web ร�ปเป.นิชนิ�ด GIF และนิ*าภาพที่#บ�นิที่0กมีาแสีดงในิเว�บเพจั

การใช� Transparency การที่*า Transparency ค"อการก*าหนิดสีใดสีหนิ0#งในิร�ป ให)เป.นิสีที่#ไมี�ถึ�กนิ*ามีาแสีดงบนิ

บราวเซึ่อร' เช�นิเราอาจัก*าหนิดสีพ",นิหล�งของร3ปให)ใสีเพ"#อให)สีหร"อร�ปภาพที่#ใช)เป.นิฉากหล�งของเว�บเพจัปรากฏแที่นิที่# การใช)เที่คนิ�ค

Transparency จัะที่*าให)ภาพด�กลมีกล"นิก�บพ",นิหล�งของเว�บเพจั

ลั.กเลั�น่ที่��เก��ยวก�บภาพชน่�ด้ JPG ในิสี�วนิของภาพ JPG ก�มีว�ธ์ให)ผ�)เย#ยมีชมีเว�บสีามีารถึด�ภาพได)เร�วข0,นิเช�นิเดยวก�นิ เรา

เรยกเที่คนิ�คนิ,ว�า Slicingการใช� Slicing เป.นิอกเที่คนิ�คหนิ0#งในิการเพ�#มีล�กเล�นิให)ก�บภาพ JPG เวลาที่#เราโหลดภาพบนิ

อ�นิเที่อร'เนิ�ต่ โดยล�กษณะการโหลดภาพประเภที่ Slicing ก�ค"อร�ปจัะถึ�กโหลดเข)ามีาแปะบนิเว�บเพจัที่#ละช�,นิจันิครบที่�,งร�ปภาพคล)ายจั�<กซึ่อว' ว�ธี�สร�างภาพแบบ JPG แบบ Slicing สี*าหร�บข�,นิต่อนิการที่*า Slicing นิ�,นิสีามีารถึที่*าได)ง�าย โดยใช)โปรแกรมี Photoshop

ซึ่0#งมีข� ,นิต่อนิด�งนิ,

การสร�างภาพเคลั/�อน่ไหว GIF Animation การเคล"#อนิไหวแบบ GIF Animation เก�ดจัากการนิ*าภาพหลายร�ปที่#เป.นิภาพนิ�#งมีา

เรยงต่�อก�นิแล)วนิ*ามีาแสีดงผลต่ามีล*าด�บ ที่*าให)ภาพที่#ด�เหมี"อนิก�บเคล"#อนิไหวได)ด้าวน่1โหลัด้โปรแกรม GIF Construction สี*าหร�บโปรแกรมีรวมีภาพเป.นิ GIF Construction มีอย��ด)วยก�นิหลายต่�ว ในิหนิ�งสี"อ

เล�มีนิ,จัะใช)โปรแกรมีที่#มีช"#อว�า GIF Construction Set Professional สีามีารถึดาวนิ'โหลดมีาที่ดลองใช)ได)ที่# http

://www.mindworkshop.com/alchemy/gifcon.htmlการสร�าง GIF Animation ก�อนิสีร)างภาพเคล"#อนิไหว เราต่)องเต่รยมีภาพนิ�#งที่ละเฟิรมี ที่#ละช�องข0,นิมีาก�อนิ ในิที่#นิ,

เราจัะสีร)างภาพนิ�#ง 5 ร�ปด�งนิ,

http://www.mindworkshop.com/alchemy/gifcon.html

http://www.mindworkshop.com/alchemy/gifcon.html

การรวมภาพเพ/�อสร�างภาพเคลั/�อน่ไหว เมี"#อได)ภาพนิ�#งแล)วเราจัะใช)โปรแกรมีรวมีภาพนิ�#งค"อ โปรแกรมี GIF Construction

Set เพ"#อรวมีภาพนิ�#งเหล�านิ�,นิให)กลายเป.นิภาพเคล"#อนิไหวก%าหน่ด้รายลัะเอ�ยด้ภาพเคลั/�อน่ไหว จัากภาพเคล"#อนิไหวที่#เราก*าหนิดได) จัะเห�นิว�าภาพแสีดงอย�างรวดเร�วมีองไมี�ที่�นิ เรา

ต่)องแก)ไขโดยการก*าหนิดรายละเอยดของแต่�ละภาบ�น่ที่3กภาพเคลั/�อน่ไหว เมี"#อเราที่ดลองการแสีดงผลของภาพเคล"#อนิไหวจันิพอใจัแล)ว ที่#นิ#เราก�จัะจั�บบ�นิที่0กไฟิล'

GIF Animation นิ,ไปใช)ก�บหนิ)าของเราการแสด้งภาพเคลั/�อน่ไหวใน่หน่�าเว�บเพจ การแสีดงภาพเคล"#อนิไหวในิหนิ)าเว�บเพจัเหมี"อนิก�บการแสีดงภาพที่�#วไป พนิ�#ง

Documents

หน่วยที่ 8