CHARPTER 3

เทคนิ�คและวิ�ธี�การใช้�ร�ปภาพบนิเวิ�บและการล�งค�เวิ�บไซด์�ต่�าง ๆ

CHARPTER 3CHARPTER 3

1. เพ!"อศึ%กษาถึ%งประเภทพไฟล�ใด์บ�างท�"สามารถึนิ+ามาใช้�บนิเวิ�บเพจ

2 . เพ!"อศึ%กษาขั้./นิต่อนิในิการแทรกร�ปภาพแบบต่�าง ๆ บนิเวิ�บไซด์�

3 . วิ�ธี�การ LINK ในิร�ปแบบต่�าง ๆ 4 . เพ!"อเร�ยนิร��ถึ%งวิ�ธี�การ Link ในิร�ปภาพ

วิ.ต่ถึ1ประสงค�การเร�ยนิร��วิ.ต่ถึ1ประสงค�การเร�ยนิร��

โปแกรม PhotoShop เปนช่�วยออกแบบเว�บไซด์�ให้�ด์�น�าสนใจมากย��งขึ้!"นซ!�งจะเพิ่��ม ส%ส&นและด์�น�าสนใจมากย��งขึ้!"น แต่�ถ้�าเราใช่�ภาพิ่มากเก�นไปส�งผลให้�โฮมเพิ่จขึ้องเรา ใช่�เวลานานในการแสด์งผลห้น�าโฮมเพิ่จได์� ซ!�งปกต่�น&"นการแสด์งผลจะช่�าห้ร-อเร�วนะคร&บม%ห้ลายป/จจ&ย ด์�วยก&นได์�แก� ระด์&บความเร�วขึ้อง Modem , อ&ต่ราการเขึ้�าช่มเว�บไซด์� ,การใช่�ภาพิ่มากในการออกแบบโฮมเพิ่จ , ขึ้นาด์ File ขึ้องโฮมเพิ่จที่%�ม%ขึ้นาด์ให้ญ่�

การใช้� การใช้� Graphic Design HomepageGraphic Design Homepage

ช้นิ�ด์ไฟล�ภาพ ช้นิ�ด์ไฟล�ภาพ Graphic Graphic ท�"นิ�ยมใช้�บนิท�"นิ�ยมใช้�บนิ HomepageHomepage

ไฟล�ที่%�น�ยมใช่�ในการบ&นที่!ก Fileโปแกรม PhotoShop จะสามารถ้ช่�วยย�อไฟล�ให้�ม%ขึ้นาด์เล�กลง ด์&งน&"นเราจ!งม%ความจ3าเปนที่%�จะเล-อกไฟล�ให้�ม%นาด์เล�ก บ%บขึ้�อม�ลได์�มาก ได์�แก�ไฟล� GIF , JPEG และ PNG ซ!�งแต่�ละไฟล�จะม%ล&กษณะแต่กต่�างก&นด์&งน%"

เปนไฟล�ที่%�น�ยมใช่�ในการบ&นที่!ก ภาพิ่ที่%�ม%รายละเอ%ยด์ น�อยห้ร-อม%ล&กษณะเปนลายเส�น เช่�นภาพิ่การ�ต่�น ห้ร-อ ภาพิ่โลโก� เปนต่�น แต่�สามารถ้แสด์งส%ได์�เพิ่%ยง 256 ส%เที่�าน&"น และค6ณภาพิ่ขึ้องภาพิ่น&"นจะม%การส�ญ่เส%ยราละเอ%ยด์ภาพิ่น�อยมาก นอกจากน%"ย&งสามารถ้แสด์งภาพิ่โปร�งแสงและเห้มาะ ส3าห้ร&บการที่3าภาพิ่เคล-�อนไห้ว (Gif Animation) ซ!�งบ%บอ&ด์ขึ้�อม�ลได์�ด์%และม%ขึ้นาด์เล�ก

GIF (Graphics Interchange Format)


ประเภทขั้องร�ปภาพ File GIF (Graphics Interchange Format)



เปนไฟล�ที่%�น�ยมใช่�ในการบ&นที่!ก ภาพิ่ที่%�ม%รายละเอ%ยด์ มากพิ่อสมควร เช่�นภาพิ่ถ้�ายที่%�ม%ความละเอ%ยด์ส%มากๆ ห้ร-อภาพิ่ธรรมช่าต่� เปนต่�น เน-�องจากไฟล�แบบ JPEG แสด์งรายละเอ%ยด์ส%ได์�ถ้!ง 16.7 ล�านส% จ!งสามารถ้แสด์งภาพิ่ที่%�ม%รายละเอ%ยด์ได์�ด์%แต่�ห้ากบ%บไฟล�ภาพิ่มากไปที่3าให้�ส�ญ่เส%ยรายละเอ%ยด์ภาพิ่ได์�

JPG,JPEG (Joint Photographic Export Group)

ประเภทขั้องร�ปภาพ File JPG,JPEG (Joint Photographic Export Group)


ไฟล�แบบ PNG สามารถ้บ%บอ&ด์ภาพิ่ได์�มากกว�าไฟล�แบบ GIF ประมาณ 30% โด์ยภาพิ่ให้ม�ที่%�ถ้�กบ%บอ&ด์แล�วจะย&งม%ค6ณภาพิ่เที่�าเด์�มและย&งแสด์งผลได์�เร�วกว�าไฟล�แบบ GIF อ%กด์�วยนอกจากน%"ห้ากต่�องการไฟล�ภาพิ่ที่%�เล�กลง อ%กย&งสามารถ้ก3าห้นด์ให้�โปรแกรมลด์ค6ณภาพิ่ขึ้องภาพิ่ลงได์�อ%กด์�วย ไฟล�แบบ PNG น&"นสามารถ้แสด์งส%ได์�ถ้!ง 16 ล�านส%และย&งสามารถ้ที่3าภาพิ่แบบโปร�งแสงได์�อ%กด์�วย

PNG (Portable Network Graphics)


ประเภทขั้องร�ปภาพ File PNG (Portable Network Graphics)


การใส�ร�ปภาพปร.บขั้นิาด์กวิ�างและส�งร�ปแบบค+าร�ปแบบค+าส."งส."ง <img scr=“ช่-�อไฟล�ร�ปภาพิ่” width=“90%” height=“90%”>

</img>

ช่-�อแที่�กช่-�อแที่�ก imgimgช่-�อแอต่ที่ร�บ�วต่�ช่-�อแอต่ที่ร�บ�วต่� width, heightwidth, heightต่3าแห้น�งที่%�ใช่�ต่3าแห้น�งที่%�ใช่� ระห้ว�าง ระห้ว�าง <body>…..</body>, <img><body>…..</body>, <img>ค�าที่%�ก3าห้นด์ให้� พิ่าธและช่-�อไฟล�ร�ปภาพิ่ ค�าที่%�ก3าห้นด์ให้� พิ่าธและช่-�อไฟล�ร�ปภาพิ่ โด์ยก3าห้นด์เฉพิ่าะช่-�อไฟล�โด์ยก3าห้นด์เฉพิ่าะช่-�อไฟล� ห้มายความว�า ไฟล� ห้มายความว�า ไฟล�ร�ปภาพิ่ด์&งกล�าวเก�บใน ร�ปภาพิ่ด์&งกล�าวเก�บใน DictoryDictory เด์%ยวก&นเที่�าน&"นเด์%ยวก&นเที่�าน&"น

การแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆ

TEST3_1.htm TEST3_1.htm การใส�ร�ปภาพลงในิเวิ�บเพจและการใส�ร�ปภาพลงในิเวิ�บเพจและขั้ยายขั้นิาด์ภาพขั้ยายขั้นิาด์ภาพ<HTML> <HEAD>

<TITLE>ที่ด์สอบการสร�างเว�บเพิ่จเบ-"องต่�น</TITLE></HEAD>

<BODY> <IMG SRC="sju.jpg" WIDTH="286"HEIGHT="200"></BODY></HTML>


หล.งหล.งขั้ยายภาพขั้ยายภาพ

การจ.ด์ต่+าแหนิ�งร�ปภาพเท�ยบก.บขั้�อควิามร�ปแบบค+าร�ปแบบค+าส."งส."ง

<img scr=“ช่-�อไฟล�ร�ปภาพิ่” align=“left”> </img>


ช่-�อแที่�กช่-�อแที่�ก align ต่3าแห้น�งที่%�ใช่�ต่3าแห้น�งที่%�ใช่� ภายในแที่�กเป:ด์ ภายในแที่�กเป:ด์ <img><img>ค�าที่%�ก3าห้นด์ให้� ค�าที่%�ก3าห้นด์ให้� bottom, top, bottom, top, middle, left, right (middle, left, right (ค�าปกต่�ค-อ ค�าปกต่�ค-อ bottom)bottom)

TEST3_2.htm TEST3_2.htm การใส�ร�ปภาพลงเท�ยบก.บขั้�อควิามการใส�ร�ปภาพลงเท�ยบก.บขั้�อควิาม<HTML> <HEAD>


<BODY> <IMG SRC="sju.jpg " WIDTH="286 " HEIGHT="163">ล&กษณะที่%�เห้�นค-อ การแสด์งขึ้�อความร�วมก&บร�ปภาพิ่ในบรรที่&ด์เด์%ยวปกต่� </BODY> </HTML>


TEST3_3.htm TEST3_3.htm การใส�ร�ปภาพลงเท�ยบก.บขั้�อควิามการใส�ร�ปภาพลงเท�ยบก.บขั้�อควิาม<HTML> <HEAD>


<BODY> <IMG SRC="sju.jpg " align="middle"> left - ร�ปภาพิ่อย��ด์�านซ�าย, right - ร�ปภาพิ่อย��ด์�านขึ้วา, top - ร�ปภาพิ่อย��ด์�านบน, middle - ร�ปภาพิ่อย��ก!�งกลาง</BODY> </HTML>


เปร�ยบการใส�ร�ปภาพลงเท�ยบก.บขั้�อควิามเปร�ยบการใส�ร�ปภาพลงเท�ยบก.บขั้�อควิามการแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆ

Align=leftAlign=left

Align=TopAlign=Top

Align=middleAlign=middle

การแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆปร.บระยะระหวิ�างร�ปภาพก.บขั้�อควิามร�ปแบบค+าร�ปแบบค+าส."งส."ง <img scr=“ช่-�อไฟล�ร�ปภาพิ่” vspace=“45” hspace=“30”> </img>

ช่-�อแอต่ที่ร�บ�วต่�ช่-�อแอต่ที่ร�บ�วต่� vspace, hspace ต่3าแห้น�งที่%�ใช่�ต่3าแห้น�งที่%�ใช่� ภายในแที่�กเป:ด์ ภายในแที่�กเป:ด์ <img><img>ค�าที่%�ก3าห้นด์ให้� ระยะห้�างในห้น�วยพิ่�กเซลค�าที่%�ก3าห้นด์ให้� ระยะห้�างในห้น�วยพิ่�กเซล

การแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆTEST3_4.htm TEST3_4.htm การใส�ร�ปภาพลงเท�ยบก.บขั้�อควิามการใส�ร�ปภาพลงเท�ยบก.บขั้�อควิาม

<HTML> <HEAD> <TITLE>ที่ด์สอบการสร�างเว�บเพิ่จเบ-"องต่�น</TITLE></HEAD>

<BODY> left - ร�ปภาพิ่อย��ด์�านซ�าย, right - ร�ปภาพิ่อย��ด์�านขึ้วา <br><IMG SRC="sju.jpg " align="middle"

vspace="45"hspace="30"> </img>top – ร�ปภาพิ่อย��ด์�านบน

<br>middle - ร�ปภาพิ่อย��ก!�งกลาง</BODY></HTML>

การแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆก+าหนิด์เส�นิขั้อบร�ปภาพร�ปแบบค+าร�ปแบบค+าส."งส."ง <img scr=“ช่-�อไฟล�ร�ปภาพิ่” border=“7”> </img>

ช่-�อแอต่ที่ร�บ�วต่�ช่-�อแอต่ที่ร�บ�วต่� border ต่3าแห้น�งที่%�ใช่�ต่3าแห้น�งที่%�ใช่� ภายในแที่�กเป:ด์ ภายในแที่�กเป:ด์ <img><img>ค�าที่%�ก3าห้นด์ให้� ขึ้นาด์ขึ้องเส�นขึ้อบที่%�ค�าที่%�ก3าห้นด์ให้� ขึ้นาด์ขึ้องเส�นขึ้อบที่%�ต่�องการในห้น�วยพิ่�กเซลต่�องการในห้น�วยพิ่�กเซล

<HTML> <HEAD> <TITLE>ทด์สอบการสร�างเวิ�บเพจเบ!/องต่�นิ</TITLE></HEAD><BODY> left - ร�ปภาพอย��ด์�านิซ�าย, right - ร�ปภาพอย��ด์�านิขั้วิา <br><IMG SRC="sju.jpg "align="middle" border="5"></img> top - ร�ปภาพอย��ด์�านิบนิ <br>middle - ร�ปภาพอย��ก%"งกลาง</BODY></HTML>

การแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆTEST3_5.htm TEST3_5.htm การใส�เส�นิขั้อบร�ปภาพการใส�เส�นิขั้อบร�ปภาพ

การแทรกภาพและการปร.บภาพแบบต่�าง ๆการแทรกภาพและการปร.บภาพแบบต่�าง ๆแสด์งขั้�อควิามแทนิเม!"อร�ปภาพไม�ปรากฎร�ปแบบค+าร�ปแบบค+าส."งส."ง

<img scr=“ช่-�อไฟล�ร�ปภาพิ่” alt= “ขึ้�อความที่%�ต่�องการ”> </img>

ช่-�อแอต่ที่ร�บ�วต่�ช่-�อแอต่ที่ร�บ�วต่� alt ต่3าแห้น�งที่%�ใช่�ต่3าแห้น�งที่%�ใช่� ภายในแที่�กเป:ด์ ภายในแที่�กเป:ด์ <img><img>

การรวิมเทคนิ�คเก�"ยวิร�ปภาพแบบต่�าง ๆ บนิเวิ�บการรวิมเทคนิ�คเก�"ยวิร�ปภาพแบบต่�าง ๆ บนิเวิ�บ

1. Optimize ร�ปภาพด์�วิยโปรแกรมกราฟฟ6ก2 .ก+าหนิด์ขั้นิาด์ภาพด์�วิยแอทร�บ�วิต่� width และ

height

3. การแบ�งภาพใส�ต่าราง4. แสด์งร�ปภาพขั้นิาด์เล�ก (Thumbnail)

การการ Link Link เวิ�บแบบต่�าง ๆเวิ�บแบบต่�าง ๆการ Link เวิ�บแบบต่�าง ๆร�ปแบบค+าร�ปแบบค+าส."งส."ง <a href=“ช้!"อไฟล�ท�"ต่�องการ

Link”>จ1ด์ล�งค�</a>

ช่-�อแที่�กช่-�อแที่�ก aaช่-�อแอต่ที่ร�บ�วต่�ช่-�อแอต่ที่ร�บ�วต่� hrefต่3าแห้น�งที่%�ใช่�ต่3าแห้น�งที่%�ใช่� ระห้ว�าง ระห้ว�าง <body>…… <body>…… </body> </body> ค�าที่%�ก3าห้นด์ให้� ช่-�อไฟล�ขึ้อง ค�าที่%�ก3าห้นด์ให้� ช่-�อไฟล�ขึ้อง Html Html ที่%�อย��ในที่%�อย��ในไฟล�เด์%ยวก&นแต่�ถ้�าไม�อย��ไฟล�เด์%ยวก&นแต่�ถ้�าไม�อย��

ใน ใน Directory Directory เด์%ยวก&น ต่�องอ�างอ�งเด์%ยวก&น ต่�องอ�างอ�งให้�ถ้�กให้�ถ้�ก

<HTML> <HEAD> <TITLE>ทด์สอบการสร�างเวิ�บเพจเบ!/องต่�นิ</TITLE></HEAD>

<BODY> <A HREF="\lab3\test3_1.htm"> [ แสด์งต่.วิอย�าง test3_1 ] </A> </BODY></HTML>

การการ Link Link เวิ�บแบบต่�าง ๆเวิ�บแบบต่�าง ๆTEST3_6.htm TEST3_6.htm การการ Link Link เวิ�บเพจภายในิ เวิ�บเพจภายในิ File File เด์�ยวิก.นิเด์�ยวิก.นิ

การการ Link Link เวิ�บแบบต่�าง ๆเวิ�บแบบต่�าง ๆTEST3_7.htm TEST3_7.htm การการ Link Link เวิ�บเพจอ!"นิๆ หร!อ เวิ�บเวิ�บเพจอ!"นิๆ หร!อ เวิ�บไซด์�อ!"นิๆไซด์�อ!"นิๆ <HTML>

<HEAD> <TITLE>ทด์สอบการสร�างเวิ�บเพจเบ!/องต่�นิ</TITLE></HEAD>

<BODY>

<A HREF="http://www.kapook.com"> [แนิะนิ+าเวิ�บไซด์�ด์�านิการบ.นิเท�ง kapook] </A> </BODY></HTML>

THE ENDTHE END

Documents

CHARPTER 3