Upload
sangkeetwittaya-stourajini
View
50
Download
2
Embed Size (px)
Citation preview
Orjix
www.RongRean.com
หลกสตร สรางเวบดวย HTML: Session ท 4 ตอนท 1
www.rongrean.com Orjix
Contentsรจกกบภาพกราฟฟกชนดตางๆ1
แสดงภาพบนเวบ <img>2
การใสขอความกำากบภาพ3
ปรบขนาดรปภาพ4
การใสกรอบใหรปภาพ5
การจดตำาแหนงรปภาพ6
เพมระยะระหวางรปกบขอความ7
Contents
www.rongrean.com Orjix
การทงระยะระหวางขอความใหพนขอบเขตรป <br>
8
แสดงภาพเปนฉากหลง <body>9
แสดงภาพฉากหลงอยกบท10
รจกกบภาพกราฟกชนดตางๆภาพกราฟกมรปแบบการจดเกบอยหลายชนด โดย
แตละชนดจะแตกตางกนในเรองของขนาดไฟล และจำานวนสทแสดงได สำาหรบเวบนนสวนใหญเปนชนด GIF(.gif) และ JPEG(.jpg)
www.rongrean.com Orjix
ภาพชนด GIFคดคนโดยบรษท Compuserve แสดงรปบนเครองท
แตกตางกนไดโดยสามารถแสดงสได 256 ส ภาพรปแบบนจะ ใช
การบบอดไฟลเพอลดพนทในการเกบ ขอมล จะใชไดผลดกบกราฟกทมสสมำาเสมอกน เชนภาพการตน
หรอโลโกทมการใชสไมมากนกภาพชนด JPEG
พฒนาโดย Joint Photographic Experts Group เปน กราฟกทสามารถทำางานกบเครองตางแบบตางรนไดเชนกน สามารถแสดงสไดสงสด 167. ลานส แตอาจทำาใหสญเสยรายละเอยดไปบางจากการบบอดขอมลเพอลดขนาดภาพ
ภาพ JPEG เหมาะสำาหรบแสดงภาพทมสสนมาก และตองการประหยดเนอทในการ เกบ
ภาพแบบGIF
ภาพแบบjpeg
แสดงภาพบนเวบ <img>
www.rongrean.com Orjix
การแสดงภาพเราจะใชแทก <img/> ในการทำางานดงน<body>
<img src="band.jpg"/><img src="847000.gif"/>
</body>
ภาพแบบ jpeg
ภาพแบบ gif
*สงเกตวาการแสดงเฉดสของภาพรปแบบ jpeg จะมสสนมากกวาภาพรปแบบ gif
การใสขอความกำากบภาพขอความกำากบภาพ (alternate text ) จะปรากฏ
ขนมาเมอบราวเซอรไมสามารถแสดงภาพขนมาได เพอใหผใชทราบวาภาพนนคออะไร
www.rongrean.com Orjix
<body><img alt="band" src="band.jpg"/><img alt="847000" src="847000.gif"/>
</body>
*สาเหตทแสดงภาพไมไดอาจเปนเพราะเกดขอผดพลาดในการเชอมโยง เชนภาพเสยหาย ถกลบ หรอวายาย directory ไปในกรณน หากไมมขอความกำากบภาพไว ผใชจะไมมทางรไดเลยวาภาพนนเปนภาพอะไร
*ประโยชนอกอยางของขอความกำากบภาพคอ ในบางบราวเซอรถาเรานำาเมาสไปวางไวบนรปภาพกจะแสดงขอความกำากบภาพขนมาใหเหนดวย
ปรบขนาดรปภาพบางครงภาพทเรานำามาแสดงในเวบกอาจมขนาดใหญ
หรอเลกมากเกนไป เราสามารถกำาหนดขนาดของภาพไดโดยการระบ width และ height ของภาพ
www.rongrean.com Orjix
<body><img src="band.jpg"/><img src="band.jpg" width="300px" height="200px"/>
</body>
ภาพขนาดปรกต
ภาพขนาด width=“300px” height=“200px”
การใสกรอบใหรปภาพการใสกรอบใหรปภาพบางครงทำาเพอเนนรปนน หรอ
แยกรปออกจากขอความใหชดเจนทำาไดโดยใช attribute ‘border’ ภายใตแทก <img>
www.rongrean.com Orjix
<body><img src="band.jpg"/><img src="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="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 ขอบบนของภาพเสมอขอบบน
ของขอความ
การจดตำาแหนงรปภาพตวอยาง
www.rongrean.com Orjix
เพมระยะระหวางรปกบขอความภาพทแสดงปรกตจะถกวางชดกบขอความ เรา
สามารถเพมระยะหางของภาพกบขอความเพอเพมความสวยงามได โดยใช 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
การทงระยะระหวางขอความใหพนขอบเขตรป <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”>
•ตวอยาง
การทงระยะระหวางขอความใหพนขอบเขตรป <br>
all ขนบรรทดใหมในบรเวณทดานซายและขวาไมมวตถใดขวางอย
left ขนบรรทดใหมในบรเวณทดานซายไมมวตถใดขวางอย
right ขนบรรทดใหมในบรเวณทดานขวาไมมวตถใดขวางอย
none ขนบรรทดใหมแบบปรกต เปนคา default อยแลว
www.rongrean.com Orjix
แสดงภาพเปนฉากหลง <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>
แสดงภาพฉากหลงอยกบทนอกจากใสภาพเปนฉากหลงแลว เรายงสามารถเพม
ลกเลนใหกบฉากหลงไดอก โดยทำาใหฉากหลงอยกบทขณะทเราเลอนแถบเลอน(scroll bar ) ไปเรอยๆ<body background="4008482.jpg" bgproperties="fixed">1<br>2<br>3<br>…30<br>
</body>
สงเกตวาเวลาเลอนแถบเลอน(scroll bar) พนหลงจะไมเลอนตาม