�ݺ�ߣ

www.RongRean.com หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 4 ตอนที่ 1

Contents www.rongrean.com Orjix รู้จักกับภาพกราฟฟิกชนิดต่างๆ 1 แสดงภาพบนเว็บ <img> 2 การใส่ข้อความกำกับภาพ 3 ปรับขนาดรูปภาพ 4 การใส่กรอบให้รูปภาพ 5 การจัดตำแหน่งรูปภาพ 6 เพิ่มระยะระหว่างรูปกับข้อความ 7

Contents www.rongrean.com Orjix การทิ้งระยะระหว่างข้อความให้พ้�Ȩ��อบ๶�ขตรูป 8 แสดงภาพเป็นฉากหลัง <body> 9 แสดงภาพฉากหลังอยู่กับที่ 10

รู้จักกับภาพกราฟิกชนิดต่างๆ ภาพกราฟิกมีรูปแบบการจัดเก็บอยู่หลายชนิด โดยแต่ละชนิดจะแตกต่างกันในเรื่องของขนาดไฟล์ และจำนวนสีที่แสดงได้ สำหรับเว็บนั้นส่วนใหญ่เป็นชนิด GIF(.gif) และ JPEG(.jpg) www.rongrean.com Orjix ภาพชนิด GIF คิดค้นโดยบริษัท Compuserve แสดงรูปบนเครื่องที่แตกต่างกันได้ โดยสามารถแสดงสีได้ 256 สี ภาพรูปแบบนี้จะ ใช้การบีบอัดไฟล์เพื่อลดพื้นที่ในการเก็บ ข้อมูล จะใช้ได้ผลดีกับกราฟิกที่มีสีสม่ำเสมอกัน เช่นภาพการตูน หรือโลโก้ที่มีการใช้สีไม่มากนัก ภาพชนิด JPEG พัฒนาโดย Joint Photographic Experts Group เป็น กราฟิกที่สามารถทำงานกับเครื่องต่างแบบต่างรุ่นได้เช่นกัน สามารถแสดงสีได้สูงสุด 16.7 ล้านสี แต่อาจทำให้สูญเสียรายละเอียดไปบ้างจากการบีบอัดข้อมูลเพื่อลดขนาดภาพ ภาพ JPEG เหมาะสำหรับแสดงภาพที่มีสีสันมาก และต้องการประหยัดเนื้อที่ในการ เก็บ ภาพ แบบ GIF ภาพ แบบ jpeg

แสดงภาพบนเว็บ <img> การแสดงภาพเราจะใช้แท็ก <img/> ในการทำงานดังนี้ www.rongrean.com Orjix <body> <img src=/slideshow/session4-part1/4769032//slideshow/session4-part1/4769032/"band.jpg"/> <img src="847000.gif"/> </body> ภาพแบบ jpeg ภาพแบบ gif * สังเกตว่าการแสดงเฉดสีของภาพรูปแบบ jpeg จะมีสีสันมากกว่าภาพรูปแบบ gif

การใส่ข้อความกำกับภาพ ข้อความกำกับภาพ ( alternate text ) จะปรากฏขึ้นมาเมื่อบราวเซอร์ไม่สามารถแสดงภาพขึ้นมาได้ เพื่อให้ผู้ใช้ทราบว่าภาพนั้นคืออะไร www.rongrean.com Orjix <body> <img alt="band" src=/slideshow/session4-part1/4769032//slideshow/session4-part1/4769032/"band.jpg"/> <img alt="847000" src="847000.gif"/> </body> * สาเหตุที่แสดงภาพไม่ได้อาจเป็นเพราะเกิดข้อผิดพลาดในการเชื่อมโยง เช่น ภาพเสียหาย ถูกลบ หรือว่าย้าย directory ไป ในกรณีนี้ หากไม่มีข้อความกำกับภาพไว้ ผู้ใช้จะไม่มีทางรู้ได้เลยว่าภาพนั้นเป็น ภาพอะไร * ประโยชน์อีกอย่างของข้อความกำกับภาพคือ ในบางบราวเซอร์ถ้าเรานำเม้าส์ไปวางไว้บนรูปภาพก็จะแสดง ข้อความกำกับภาพขึ้นมาให้เห็นด้วย

ปรับขนาดรูปภาพ บางครั้งภาพที่เรานำมาแสดงในเว็บก็อาจมีขนาดใหญ่หรือเล็กมากเกินไป เราสามารถกำหนดขนาดของภาพได้โดยการระบุ width และ height ของภาพ www.rongrean.com Orjix <body> <img src=/slideshow/session4-part1/4769032//slideshow/session4-part1/4769032/"band.jpg"/> <img src=/slideshow/session4-part1/4769032/"band.jpg" width="300px" height="200px" /> </body> ภาพขนาดปรกติ ภาพขนาด width=“300px” height=“200px”

การใส่กรอบให้รูปภาพ การใส่กรอบให้รูปภาพบางครั้งทำเพื่อเน้นรูปนั้น หรือแยกรูปออกจากข้อความให้ชัดเจน ทำได้โดยใช้ attribute ‘border’ ภายใต้แท็ก <img> www.rongrean.com Orjix <body> <img src=/slideshow/session4-part1/4769032//slideshow/session4-part1/4769032/"band.jpg"/> <img src=/slideshow/session4-part1/4769032/"band.jpg" border="5px" /> </body> Border=“5px” Border=“none”

การจัดตำแหน่งรูปภาพ การจัดตำแหน่งใช้เพื่อทำให้รูปภาพมีตำแหน่งเข้ากับข้อความที่มีอยู่เดิม โดยใช้ attribute ‘align’ www.rongrean.com Orjix <table border="1px" width="100%" height="100%"> <tr> <td><img src=/slideshow/session4-part1/4769032/"band.jpg" align="bottom" />bottom</td> <td><img src=/slideshow/session4-part1/4769032/"band.jpg" align="left" />left</td> <td><img src=/slideshow/session4-part1/4769032/"band.jpg" align="middle" />middle</td> </tr> <tr> <td><img src=/slideshow/session4-part1/4769032/"band.jpg" align="right" />right</td> <td><img src=/slideshow/session4-part1/4769032/"band.jpg" align="top" />top</td> <td></td> </tr> </table> bottom ขอบล่างของภาพเสมอขอบล่างของข้อความ left จัดภาพอยู่ทางซ้าย middle กึ่งกลางของภาพเสมอกึ่งกลางของข้อความ right จัดภาพอยู่ทางขวา top ขอบบนของภาพเสมอขอบบนของข้อความ

การจัดตำแหน่งรูปภาพ ตัวอย่าง www.rongrean.com Orjix

เพิ่มระยะระหว่างรูปกับข้อความ ภาพที่แสดงปรกติจะถูกวางชิดกับข้อความ เราสามารถเพิ่มระยะห่างของภาพกับข้อความเพื่อเพิ่มความสวยงามได้ โดยใช้ attribute ‘vspace’ และ ‘ hspace’ www.rongrean.com Orjix <body> <img src=/slideshow/session4-part1/4769032/"band.jpg" vspace="50px" hspace="50px" align="left" border="1px"/> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com </body> ภาพดั้งเดิม vspace vspace hspace hspace

การทิ้งระยะระหว่างข้อความให้พ้�Ȩ��อบ๶�ขตรูป การจัดรูปร่วมกับข้อความ ส่วนของข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อยๆ ซึ่งบางครั้งดูไม่งามซักเท่าไหร่ สามารถแก้ไขได้ด้วยการทิ้งระยะข้อความให้พ้นขอบเขตรูปด้วย attribute ‘clear’ ประกาศไว้ภายใต้แท็ก www.rongrean.com Orjix <body> <img src=/slideshow/session4-part1/4769032/"band.jpg" align="left" border="1px"/> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com </body> ใช้ ธรรมดา ใช้

การทิ้งระยะระหว่างข้อความให้พ้�Ȩ��อบ๶�ขตรูป ตัวอย่าง www.rongrean.com Orjix all ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายและขวาไม่มีวัตถุใดขวางอยู่ left ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายไม่มีวัตถุใดขวางอยู่ right ขึ้นบรรทัดใหม่ในบริเวณที่ด้านขวาไม่มีวัตถุใดขวางอยู่ none ขึ้นบรรทัดใหม่แบบปรกติ เป็นค่า default อยู่แล้ว

แสดงภาพเป็นฉากหลัง <body> เราสามารถตกแต่งเว็บเพจให้มีภาพเป็นพื้นหลังได้ โดยใส่ attribute ‘background’ ไว้ภายใต้แท็ก <body> www.rongrean.com Orjix <body background="4008482.jpg" > rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com </body>

แสดงภาพฉากหลังอยู่กับที่ นอกจากใส่ภาพเป็นฉากหลังแล้ว เรายังสามารถเพิ่มลูกเล่นให้กับฉากหลังได้อีก โดยทำให้ฉากหลังอยู่กับที่ขณะที่เราเลื่อนแถบเลื่อน ( scroll bar ) ไปเรื่อยๆ <body background="4008482.jpg" bgproperties="fixed"> 1 2 3 … 30 </body> สังเกตว่าเวลาเลื่อนแถบเลื่อน ( scroll bar ) พื้นหลังจะไม่เลื่อนตาม

�ݺ�ߣ

Session4 part1

Recommended

More Related Content

Viewers also liked (7)

Similar to Session4 part1 (6)

Session4 part1