Session4Part1.pptx

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

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

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

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

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

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

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

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

การจัดตาแหน่งใช้เพื่อทาให้รูปภาพมีตาแหน่งเข้ากับข้อความที่มีอยู่เดิม
โดยใช้ 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 ขอบบนของภาพเสมอขอบบนของข้อความ

ตัวอย่าง

เพิ่มระยะระหว่างรูปกับข้อความ
ภาพที่แสดงปรกติจะถูกวางชิดกับข้อความ เราสามารถเพิ่มระยะห่างของภาพกับข้อความ
เพื่อเพิ่มความสวยงามได้ โดยใช้ attribute ‘vspace’ และ ‘hspace’
<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 
</body>
ภาพดั้งเดิม
vspace
vspace
hspace hspace

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

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

แสดงภาพเป็นฉากหลัง <body>
เราสามารถตกแต่งเว็บเพจให้มีภาพเป็นพื้นหลังได้ โดยใส่ attribute
‘background’ ไว้ภายใต้แท็ก <body>
<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) พื้นหลังจะ
ไม่เลื่อนตาม

Session4Part1.pptx

Recommended

Recommended

More Related Content

More from pinglada1

More from pinglada1 (20)

Session4Part1.pptx