Session4 part1

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

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

แสดงภาพบนเว็บ <img> ,[object Object],www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="847000.gif"/> </body> ภาพแบบ jpeg ภาพแบบ gif * สังเกตว่าการแสดงเฉดสีของภาพรูปแบบ jpeg จะมีสีสันมากกว่าภาพรูปแบบ gif

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

ปรับขนาดรูปภาพ ,[object Object],www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" width="300px" height="200px" /> </body> ภาพขนาดปรกติ ภาพขนาด width=“300px” height=“200px”

การใส่กรอบให้รูปภาพ ,[object Object],[object Object],www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" border="5px" /> </body> Border=“5px” Border=“none”

การจัดตำแหน่งรูปภาพ ,[object Object],www.rongrean.com Orjix <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 ขอบบนของภาพเสมอขอบบนของข้อความ

การจัดตำแหน่งรูปภาพ ,[object Object],www.rongrean.com Orjix

เพิ่มระยะระหว่างรูปกับข้อความ ,[object Object],www.rongrean.com Orjix <body> <img src="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

การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป ,[object Object],www.rongrean.com Orjix <body> <img src="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> ใช้ ธรรมดา ใช้

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

แสดงภาพเป็นฉากหลัง <body> ,[object Object],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>

แสดงภาพฉากหลังอยู่กับที่ ,[object Object],<body background="4008482.jpg" bgproperties="fixed"> 1 2 3 … 30 </body> สังเกตว่าเวลาเลื่อนแถบเลื่อน ( scroll bar ) พื้นหลังจะไม่เลื่อนตาม

Session4 part1

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Session4 part1

Similar to Session4 part1 (6)

Session4 part1