บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
•
0 gostou•552 visualizações
แต่งเติมเว็บเพจด้วยกราฟิก
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (8)
Semelhante a บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
Semelhante a บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก (20)
Mais de Nattipong Siangyen
Mais de Nattipong Siangyen (20)
บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
- 3. รู้จักกับภาพกราฟิกชนิดต่างๆ ภาพกราฟิกมีรูปแบบการจัดเก็บอยู่หลายชนิด โดยแต่ละชนิดจะแตกต่างกันในเรื่องของขนาดจานวนสี ที่แสดงได้ สาหรับเว็บนั้นส่วนใหญ่เป็นชนิด GIF(.gif) และ JPEG(.jpg) ไฟล์ ภาพชนิด GIF คิดค้นโดยบริษัท Compuserve แสดงรูปบนเครื่องที่แตกต่างกันได้ โดยสามารถสดง สีได้ 256 สี ภาพรูปแบบนี้จะ ใช้การบีบอัดไฟล์เพื่อลดพื้นที่ในการเก็บ ข้อมูล จะใช้ได้ ผลดีกับกราฟิกที่มีสีสม่าเสมอกัน เช่นภาพการตูน หรือโลโก้ที่มีการใช้สีไม่มากนัก ภาพชนิด JPEG พัฒนาโดย Joint Photographic Experts Group เป็นกราฟิกที่สามารถทางานกับ เครื่องต่างแบบต่างรุ่นได้เช่นกัน สามารถแสดงสีได้สูงสุด 16.7ล้านสี แต่อาจทาให้สูญเสีย รายละเอียดไปบ้างจากการบีบอัดข้อมูลเพื่อลดขนาดภาพภาพ JPEG เหมาะสาหรับแสดง ภาพที่มีสีสันมาก และต้องการประหยัดเนื้อที่ในการเก็บ ภาพ แบบ GIF ภาพ แบบ jpeg
- 4. แสดงภาพบนเว็บ <img> การแสดงภาพเราจะใช้แท็ก <img/> ในการทางานดังนี้ <body> <img src="band.jpg"> <img src="847000.gif"> </body> *สังเกตว่าการแสดงเฉด สีของภาพรูปแบบ jpeg จะมีสีสันมากกว่าภาพ รูปแบบ gif
- 5. การใส่ข้อความกากับภาพ ข้อความกากับภาพ (alternate text) จะปรากฏขึ้นมาเมื่อบราวเซอร์ไม่สามารถแสดงภาพ ขึ้นมาได้ เพื่อให้ผู้ใช้ทราบว่าภาพนั้นคืออะไร <body> <img alt="band" src="band.jpg"/> <img alt="847000" src="847000.gif"/> </body> *สาเหตุที่แสดงภาพไม่ได้อาจเป็นเพราะเกิดข้อผิดพลาดในการเชื่อมโยง เช่นภาพเสียหาย ถูกลบ หรือว่าย้าย directory ไปในกรณีนี้ หากไม่มีข้อความกากับภาพไว้ ผู้ใช้จะไม่มีทางรู้ ได้เลยว่าภาพนั้นเป็นภาพอะไร *ประโยชน์อีกอย่างของข้อความกากับภาพคือ ในบางบราวเซอร์ถ้าเรานาเม้าส์ไปวางไว้บน รูปภาพก็จะแสดงข้อความกากับภาพขึ้นมาให้เห็นด้วย
- 6. ปรับขนาดรูปภาพ บางครั้งภาพที่เรานามาแสดงในเว็บก็อาจมีขนาดใหญ่หรือเล็กมากเกินไป เราสามารถกาหนด ขนาดของภาพได้โดยการระบุ width และ height ของภาพ <body> <img src="band.jpg"/> <img src="band.jpg" width="300px" height="200px"> </body> ภาพขนาดปรกติ ภาพขนาด width=“300px” height=“200px”
- 7. การจัดตาแหน่งรูปภาพ การจัดตาแหน่งใช้เพื่อทาให้รูปภาพมีตาแหน่งเข้ากับข้อความที่มีอยู่เดิม โดยใช้ attribute ‘align’ <table border="1px" width="100%" height="100%"> <tr> <td><img src="band.jpg" align="bottom"/>bottom</td> <td><img src="band.jpg" align="left"/>left</td> <td><img src="band.jpg" align="middle"/>middle</td> </tr> <tr> <td><img src="band.jpg" align="right"/>right</td> <td><img src="band.jpg" align="top"/>top</td> <td></td> </tr> </table> bottom ขอบล่างของภาพเสมอขอบล่างของข้อความ left จัดภาพอยู่ทางซ้าย middle กึ่งกลางของภาพเสมอกึ่งกลางของข้อความ right จัดภาพอยู่ทางขวา top ขอบบนของภาพเสมอขอบบนของข้อความ