<img> - PDF Free Download

04 圖片

4-1 4-2 <img> 4-3 4-4

網頁程式設計 4-1 網頁多媒體 Flash Java Applets HTML 8 4-1-1 圖片 JPEG Joint Photographic Experts Group 非失真模式 (lossless) 基本模式 (baseline standard) 1 2 12 JPEG 6 JPEG.jpg.jpe.jpeg GIF (graphic interchange format) CompuServe 25616 256 GIF GIF GIF.gif 4-2

圖片 04 PNG (portable network graphics) JPEG GIF JPEG GIF PNG PNG GIF 256 PNG JPEG PNG 16 256.png GIF Flash Java Applets Java Applets Java (a) (b) (c) (d) (e) 圖 4.1 (a) JPEG 適合用來儲存色彩較多較能容忍失真的圖形 (b) 使用 Flash 製作的拼圖動畫 (c) 尚未去背的 GIF 圖形 (d) 已經去背的 GIF 圖形 (e) 探照燈效果的 Java Applet 4-3

網頁程式設計 4-1-2 聲音 WAV.wav Windows Media Player MP3 (MPEG-2 audio layer 3).mp3.m3u Windows Media Player MP3 1:12 1/12 MIDI.mid.midi Windows Media Player MIDI Real Audio Progressive Networks.ra RealPlayer WAV MP3 MIDI WMA Microsoft.wma Windows Media Player MP3 4-4

圖片 04 4-1-3 視訊視訊 (video) AVI (audio video interleaved) Microsoft.avi Internet QuickTime Apple.mov.qt QuickTime Internet MPEG Motion Picture Experts Group.mpg.mpeg.dat Windows Media Player MPEG JPEG MPEG MPEG-1 MPEG-2 MPEG-3 MPEG-4 320 240 ( VCD ) 720 480 ( DVD ) (HDTV) Real Video Progressive Networks.rm.ram RealPlayer AVI QuickTime MPEG WMV Microsoft.wmv Windows Media Player 4-5

網頁程式設計 4-2 插入圖片 -<img> 標籤 <img> 標籤 HTML src="uri" name="..." Scripts Applets alt="..." longdesc="uri" alt longdesc URI width="n" (n ) height="n" (n ) align="{left,right,top,middle,bottom}" (Deprecated) border="n" (Deprecated) (n ) hspace="n" (Deprecated) (n ) vspace="n" (Deprecated) (n ) ismap usemap="uri" lowsrc="uri" title id class style lang dir onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup ( W3C align border hspace vspace Deprecated CSS ) 4-6

圖片 04 4-2-1 設定圖片的高度寬度與框線 <img> src height width border ( ) <html> <body> <img src="turtle.jpg" height="192" width="256"> <img src="turtle.jpg" height="96" width="128" border="10"> </body> </html> <\Ch4\ 綠蠵龜.htm> 1 2 1 2 高度為 192 像素寬度為 256 像素高度為 96 像素寬度為 128 像素框線為 10 像素 4-7

網頁程式設計 4-2-2 設定圖片的對齊方式 <img> align left ( ) right ( ) top ( ) middle ( ) bottom ( ) <body> 1 <img src="mickey.jpg"> 1998 11 18 </body> <\Ch4\ 米奇.htm> 1 採用瀏覽器預設的對齊方式 2 瀏覽結果 2 4-8

圖片 04 ( ) align="left" <img src="mickey.jpg" align="left"> ( ) align="right" <img src="mickey.jpg" align="right"> 4-9

網頁程式設計 1 <img src="mulan1.jpg"> <img src="mulan2.jpg"> mulan ... <\Ch4\ 花木蘭.htm> 1 2 兩張圖片均採用預設的對齊方式瀏覽結果 2 align="left" <img src="mulan1.jpg" align="left"> 4-10

圖片 04 align="right" <img src="mulan1.jpg" align="right"> align="top" <img src="mulan1.jpg" align="top"> align="middle" <img src="mulan1.jpg" align="middle"> align="bottom" ( bottom) <img src="mulan1.jpg" align="bottom"> 4-11

網頁程式設計 4-2-3 設定圖片的替代顯示文字與低解析度圖片 <img> lowsrc alt <img src="mermaid.jpg" alt=" "> 未完成下載之圖片的替代顯示文字已完成下載之圖片的替代顯示文字 4-2-4 設定圖片的水平間距與垂直間距 hspace ( ) vspace ( ) <img src="mermaid.jpg"> 尚未指定水平間距 ( 預設值為 0) 4-12

圖片 04 <img src="mermaid.jpg" hspace="30"> 指定水平間距為 30 像素 <img src="mermaid.jpg"> 尚未指定垂直間距 ( 預設值為 0) <img src="mermaid.jpg" vspace="30"> 指定垂直間距為 30 像素 4-13