Download
1 / 26
260 likes | 380 Views
CHARPTER 3. เทคนิคและวิธีการใช้รูปภาพบนเว็บและการ ลิงค์เว็บไซด์ต่าง ๆ. วัตถุประสงค์การเรียนรู้. 1. เพื่อศึกษาถึงประเภทพไฟล์ใดบ้างที่สามารถนำมาใช้บนเว็บเพจ 2. เพื่อศึกษาขั้นตอนในการแทรกรูปภาพแบบต่าง ๆ บนเว็บไซด์ 3. วิธีการ LINK ในรูปแบบต่าง ๆ
E N D
CHARPTER 3 เทคนิคและวิธีการใช้รูปภาพบนเว็บและการ ลิงค์เว็บไซด์ต่าง ๆ
วัตถุประสงค์การเรียนรู้วัตถุประสงค์การเรียนรู้ 1. เพื่อศึกษาถึงประเภทพไฟล์ใดบ้างที่สามารถนำมาใช้บนเว็บเพจ 2. เพื่อศึกษาขั้นตอนในการแทรกรูปภาพแบบต่าง ๆ บนเว็บไซด์ 3. วิธีการ LINK ในรูปแบบต่าง ๆ 4. เพื่อเรียนรู้ถึงวิธีการ Link ในรูปภาพ
การใช้ Graphic Design Homepage โปแกรม PhotoShop เป็นช่วยออกแบบเว็บไซด์ให้ดูน่าสนใจมากยิ่งขึ้นซึ่งจะเพิ่ม สีสันและดูน่าสนใจมากยิ่งขึ้น แต่ถ้าเราใช้ภาพมากเกินไปส่งผลให้โฮมเพจของเรา ใช้เวลานานในการแสดงผลหน้าโฮมเพจได้ ซึ่งปกตินั้นการแสดงผลจะช้าหรือเร็วนะครับมีหลายปัจจัย ด้วยกันได้แก่ ระดับความเร็วของ Modem , อัตราการเข้าชมเว็บไซด์ ,การใช้ภาพมากในการออกแบบโฮมเพจ , ขนาด File ของโฮมเพจที่มีขนาดใหญ่
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage ไฟล์ที่นิยมใช้ในการบันทึก Fileโปแกรม PhotoShop จะสามารถช่วยย่อไฟล์ให้มีขนาดเล็กลง ดังนั้นเราจึงมีความจำเป็นที่จะเลือกไฟล์ให้มีนาดเล็ก บีบข้อมูลได้มาก ได้แก่ไฟล์ GIF , JPEG และ PNG ซึ่งแต่ละไฟล์จะมีลักษณะแตกต่างกัน ดังนี้
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage GIF (Graphics Interchange Format) เป็นไฟล์ที่นิยมใช้ในการบันทึก ภาพที่มีรายละเอียด น้อยหรือมีลักษณะเป็นลายเส้น เช่นภาพการ์ตูน หรือ ภาพโลโก้ เป็นต้น แต่สามารถแสดงสีได้เพียง 256 สีเท่านั้น และคุณภาพของภาพนั้นจะมีการสูญเสียราละเอียดภาพน้อยมาก นอกจากนี้ยังสามารถแสดงภาพโปร่งแสงและเหมาะ สำหรับการทำภาพเคลื่อนไหว (Gif Animation) ซึ่งบีบอัดข้อมูลได้ดีและมีขนาดเล็ก
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage ประเภทของรูปภาพFile GIF (Graphics Interchange Format)
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage JPG,JPEG (Joint Photographic Export Group) เป็นไฟล์ที่นิยมใช้ในการบันทึก ภาพที่มีรายละเอียด มากพอสมควร เช่นภาพถ่ายที่มีความละเอียดสีมากๆ หรือภาพธรรมชาติ เป็นต้น เนื่องจากไฟล์แบบ JPEG แสดงรายละเอียดสีได้ถึง 16.7 ล้านสี จึงสามารถแสดงภาพที่มีรายละเอียดได้ดีแต่หากบีบไฟล์ภาพมากไปทำให้สูญเสียรายละเอียดภาพได้
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage ประเภทของรูปภาพFile JPG,JPEG (Joint Photographic Export Group)
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage PNG (Portable Network Graphics) ไฟล์แบบ PNG สามารถบีบอัดภาพได้มากกว่าไฟล์แบบ GIF ประมาณ 30% โดยภาพใหม่ที่ถูกบีบอัดแล้วจะยังมีคุณภาพเท่าเดิมและยังแสดงผลได้เร็วกว่าไฟล์แบบ GIF อีกด้วยนอกจาก นี้หากต้องการไฟล์ภาพที่เล็กลง อีกยังสามารถกำหนดให้โปรแกรมลดคุณภาพของภาพลงได้อีกด้วย ไฟล์แบบ PNG นั้นสามารถแสดงสีได้ถึง 16 ล้านสีและยังสามารถทำภาพแบบโปร่งแสงได้อีกด้วย
ชนิดไฟล์ภาพ Graphic ที่นิยมใช้บน Homepage ประเภทของรูปภาพFilePNG (Portable Network Graphics)
การแทรกภาพและการปรับภาพแบบต่าง ๆ การใส่รูปภาพปรับขนาดกว้างและสูง รูปแบบคำสั่ง <img scr=“ชื่อไฟล์รูปภาพ” width=“90%” height=“90%”> </img> ชื่อแท็ก imgชื่อแอตทริบิวต์ width, heightตำแหน่งที่ใช้ ระหว่าง <body>…..</body>, <img>ค่าที่กำหนดให้ พาธและชื่อไฟล์รูปภาพ โดยกำหนดเฉพาะชื่อไฟล์ หมายความว่า ไฟล์รูปภาพดังกล่าวเก็บใน Dictory เดียวกันเท่านั้น
การแทรกภาพและการปรับภาพแบบต่าง ๆ 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ตำแหน่งที่ใช้ ภายในแท็กเปิด <img>ค่าที่กำหนดให้ bottom, top, middle, left, right (ค่าปกติคือ bottom)
การแทรกภาพและการปรับภาพแบบต่าง ๆ TEST3_2.htm การใส่รูปภาพลงเทียบกับข้อความ <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> <IMG SRC="sju.jpg" WIDTH="286" HEIGHT="163"> ลักษณะที่เห็นคือ การแสดงข้อความร่วมกับรูปภาพในบรรทัดเดียวปกติ </BODY> </HTML>
การแทรกภาพและการปรับภาพแบบต่าง ๆ TEST3_3.htm การใส่รูปภาพลงเทียบกับข้อความ <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> <IMG SRC="sju.jpg" align="middle"> left - รูปภาพอยู่ด้านซ้าย, right - รูปภาพอยู่ด้านขวา, top - รูปภาพอยู่ด้านบน, middle - รูปภาพอยู่กึ่งกลาง </BODY> </HTML>
การแทรกภาพและการปรับภาพแบบต่าง ๆ เปรียบการใส่รูปภาพลงเทียบกับข้อความ Align=left Align=Top Align=middle
การแทรกภาพและการปรับภาพแบบต่าง ๆ ปรับระยะระหว่างรูปภาพกับข้อความ รูปแบบคำสั่ง <img scr=“ชื่อไฟล์รูปภาพ” vspace=“45” hspace=“30”> </img> ชื่อแอตทริบิวต์ vspace,hspaceตำแหน่งที่ใช้ ภายในแท็กเปิด <img>ค่าที่กำหนดให้ ระยะห่างในหน่วยพิกเซล
การแทรกภาพและการปรับภาพแบบต่าง ๆ 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ตำแหน่งที่ใช้ ภายในแท็กเปิด <img>ค่าที่กำหนดให้ ขนาดของเส้นขอบที่ต้องการในหน่วยพิกเซล
การแทรกภาพและการปรับภาพแบบต่าง ๆ TEST3_5.htm การใส่เส้นขอบรูปภาพ <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> left - รูปภาพอยู่ด้านซ้าย, right - รูปภาพอยู่ด้านขวา <br><IMG SRC="sju.jpg" align="middle" border="5"></img> top - รูปภาพอยู่ด้านบน <br>middle - รูปภาพอยู่กึ่งกลาง </BODY> </HTML>
การแทรกภาพและการปรับภาพแบบต่าง ๆ แสดงข้อความแทนเมื่อรูปภาพไม่ปรากฎ รูปแบบคำสั่ง <img scr=“ชื่อไฟล์รูปภาพ” alt= “ข้อความที่ต้องการ”> </img> ชื่อแอตทริบิวต์ altตำแหน่งที่ใช้ ภายในแท็กเปิด <img>
การรวมเทคนิคเกี่ยวรูปภาพแบบต่าง ๆ บนเว็บ • Optimize รูปภาพด้วยโปรแกรมกราฟฟิก • กำหนดขนาดภาพด้วยแอทริบิวต์ width และ height • การแบ่งภาพใส่ตาราง • แสดงรูปภาพขนาดเล็ก (Thumbnail)
การ Link เว็บแบบต่าง ๆ การ Link เว็บแบบต่าง ๆ รูปแบบคำสั่ง <a href=“ชื่อไฟล์ที่ต้องการLink”>จุดลิงค์</a> ชื่อแท็ก aชื่อแอตทริบิวต์ hrefตำแหน่งที่ใช้ ระหว่าง <body>…… </body> ค่าที่กำหนดให้ ชื่อไฟล์ของ Html ที่อยู่ในไฟล์เดียวกันแต่ถ้าไม่อยู่ ใน Directory เดียวกัน ต้องอ้างอิงให้ถูก
การ Link เว็บแบบต่าง ๆ TEST3_6.htm การ Link เว็บเพจภายใน File เดียวกัน <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> <A HREF="\lab3\test3_1.htm"> [ แสดงตัวอย่าง test3_1 ] </A> </BODY> </HTML>
การ Link เว็บแบบต่าง ๆ TEST3_7.htm การ Link เว็บเพจอื่นๆ หรือ เว็บไซด์อื่นๆ <HTML> <HEAD> <TITLE>ทดสอบการสร้างเว็บเพจเบื้องต้น</TITLE> </HEAD> <BODY> <A HREF="http://www.kapook.com"> [แนะนำเว็บไซด์ด้านการบันเทิงkapook]</A> </BODY> </HTML>
