Download to read offline
More Related Content
Session4 part1
- 1. Orjix www.RongRean.com หลักสูตร สร้างเว็บด้วย HTML:Session ที่ 4 ตอนที่ 1
- 2. www.rongrean.com Orjix Contents รู้จักกับภาพกราฟฟิ กชนิดต่างๆ1 แสดงภาพบนเว็บ<img>2 การใส่ข้อความกากับภาพ3 ปรับขนาดรูปภาพ4 การใส่กรอบให้รูปภาพ5 การจัดตาแหน่งรูปภาพ6 เพิ่มระยะระหว่างรูปกับข้อความ7
- 3. Contents www.rongrean.com Orjix การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br>8 แสดงภาพเป็นฉากหลัง<body>9 แสดงภาพฉากหลังอยู่กับที่10
- 4. รู้จักกับภาพกราฟิ กชนิดต่างๆ ภาพกราฟิกมีรูปแบบการจัดเก็บอยู่หลายชนิด โดยแต่ละชนิดจะแตกต่างกันในเรื่องของ ขนาดไฟล์และจานวนสีที่แสดงได้ สาหรับเว็บนั้นส่วนใหญ่เป็นชนิด GIF(.gif) และ JPEG(.jpg) www.rongrean.com Orjix ภาพชนิด GIF คิดค้นโดยบริษัท Compuserve แสดงรูปบนเครื่องที่แตกต่างกันได้ โดยสามารถแสดงสีได้256 สี ภาพรูปแบบนี้จะ ใช้การบีบอัดไฟล์เพื่อลดพื้นที่ในการเก็บ ข้อมูล จะใช้ได้ผลดีกับกราฟิกที่มีสีสม่าเสมอกัน เช่นภาพการตูน หรือโลโก้ที่มีการใช้สีไม่มากนัก ภาพชนิด JPEG พัฒนาโดย Joint Photographic Experts Group เป็น กราฟิกที่สามารถทางานกับเครื่องต่างแบบต่างรุ่นได้เช่นกัน สามารถแสดงสีได้สูงสุด 16.7 ล้านสี แต่อาจทาให้สูญเสียรายละเอียดไปบ้างจากการบีบอัดข้อมูลเพื่อลดขนาดภาพ ภาพ JPEG เหมาะสาหรับแสดงภาพที่มีสีสันมาก และต้องการประหยัดเนื้อที่ในการ เก็บ ภาพ แบบ GIF ภาพ แบบ jpeg
- 5. แสดงภาพบนเว็บ <img> www.rongrean.com Orjix การแสดงภาพเราจะใช้แท็ก<img/> ในการทางานดังนี้ <body> <img src="band.jpg"/> <img src="847000.gif"/> </body> ภาพแบบ jpeg ภาพแบบ gif *สังเกตว่าการแสดงเฉดสีของภาพ รูปแบบ jpeg จะมีสีสันมากกว่า ภาพรูปแบบ gif
- 6. การใส่ข้อความกากับภาพ ข้อความกากับภาพ (alternate text)จะปรากฏขึ้นมาเมื่อบราวเซอร์ไม่สามารถ แสดงภาพขึ้นมาได้ เพื่อให้ผู้ใช้ทราบว่าภาพนั้นคืออะไร www.rongrean.com Orjix <body> <img alt="band" src="band.jpg"/> <img alt="847000" src="847000.gif"/> </body> *สาเหตุที่แสดงภาพไม่ได้อาจเป็นเพราะเกิดข้อผิดพลาดในการเชื่อมโยง เช่น ภาพเสียหาย ถูกลบ หรือว่าย้าย directory ไป ในกรณีนี้ หากไม่มีข้อความกากับภาพไว้ ผู้ใช้จะไม่มีทางรู้ได้เลยว่าภาพนั้นเป็น ภาพอะไร *ประโยชน์อีกอย่างของข้อความกากับภาพคือ ในบางบราวเซอร์ถ้าเรานาเม้าส์ไปวางไว้บนรูปภาพก็จะแสดง ข้อความกากับภาพขึ้นมาให้เห็นด้วย
- 7. ปรับขนาดรูปภาพ บางครั้งภาพที่เรานามาแสดงในเว็บก็อาจมีขนาดใหญ่หรือเล็กมากเกินไป เราสามารถ กาหนดขนาดของภาพได้โดยการระบุ widthและ height ของภาพ www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" width="300px" height="200px"/> </body> ภาพขนาดปรกติ ภาพขนาด width=“300px” height=“200px”
- 8. การใส่กรอบให้รูปภาพ การใส่กรอบให้รูปภาพบางครั้งทาเพื่อเน้นรูปนั้น หรือแยกรูปออกจากข้อความให้ชัดเจน ทาได้โดยใช้ attribute‘border’ ภายใต้แท็ก <img> www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" border="5px"/> </body> Border=“5px” Border=“none”
- 9. การจัดตาแหน่งรูปภาพ การจัดตาแหน่งใช้เพื่อทาให้รูปภาพมีตาแหน่งเข้ากับข้อความที่มีอยู่เดิม โดยใช้ attribute ‘align’ www.rongrean.comOrjix <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 ขอบบนของภาพเสมอขอบบนของข้อความ
- 10.
- 11. เพิ่มระยะระหว่างรูปกับข้อความ ภาพที่แสดงปรกติจะถูกวางชิดกับข้อความ เราสามารถเพิ่มระยะห่างของภาพกับข้อความ เพื่อเพิ่มความสวยงามได้ โดยใช้attribute ‘vspace’ และ ‘hspace’ 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 <br> </body> ภาพดั้งเดิม vspace vspace hspace hspace
- 12. การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> การจัดรูปร่วมกับข้อความ ส่วนของข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อยๆซึ่งบางครั้งดูไม่ งามซักเท่าไหร่ สามารถแก้ไขได้ด้วยการทิ้งระยะข้อความให้พ้นขอบเขตรูปด้วย attribute ‘clear’ ประกาศไว้ภายใต้แท็ก <br> 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 <br clear="left"> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com </body> ใช้<br> ธรรมดา ใช้<br clear=“left”>
- 13. •ตัวอย่าง การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> all ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายและขวาไม่มีวัตถุใดขวางอยู่ leftขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายไม่มีวัตถุใดขวางอยู่ right ขึ้นบรรทัดใหม่ในบริเวณที่ด้านขวาไม่มีวัตถุใดขวางอยู่ none ขึ้นบรรทัดใหม่แบบปรกติ เป็นค่า default อยู่แล้ว www.rongrean.com Orjix
- 14. แสดงภาพเป็นฉากหลัง <body> เราสามารถตกแต่งเว็บเพจให้มีภาพเป็นพื้นหลังได้ โดยใส่attribute ‘background’ ไว้ภายใต้แท็ก <body> www.rongrean.com Orjix <body background="4008482.jpg"> <p>rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br></p> </body>
- 15. แสดงภาพฉากหลังอยู่กับที่ นอกจากใส่ภาพเป็นฉากหลังแล้ว เรายังสามารถเพิ่มลูกเล่นให้กับฉากหลังได้อีก โดยทาให้ ฉากหลังอยู่กับที่ขณะที่เราเลื่อนแถบเลื่อน(scrollbar) ไปเรื่อยๆ <body background="4008482.jpg" bgproperties="fixed"> 1<br> 2<br> 3<br> … 30<br> </body> สังเกตว่าเวลาเลื่อน แถบเลื่อน(scroll bar) พื้นหลังจะ ไม่เลื่อนตาม