圖片和多媒體文件的使用上節(jié)回顧表格的基本組成部分表格的簡單應用利用表格進行排版第19章

圖片和多媒體文件的使用

本章主要內容

19.1圖片19.2滾動文字19.3插入多媒體文件——<embed>19.4添加背景音樂——<bgsound>19.5小實例——綜合設置圖片和多媒體19.6習題

19.1圖片

19.1.1網(wǎng)頁的圖片格式19.1.2插入圖片——<img>19.1.3添加圖片的提示文字——alt19.1.4設置圖片的寬度和高度——width/height19.1.5設置圖片邊框——border19.1.6設置圖片對齊方式——align19.1.7設置圖片的間距——hspase/vspase19.1.8設置圖片鏈接——<a>

19.1.1網(wǎng)頁的圖片格式

1．GIF格式2．JPEG格式3．PNG格式19.1.2插入圖片——<img>基本語法<imgsrc=”圖片地址”>19.1.2插入圖片——<img>語法說明img標記的作用就是插入圖片，該標記含有多個屬性，其中src屬性為必要屬性，其他屬性將在后面幾節(jié)內容中逐個介紹。src屬性用來指定圖片文件所在的路徑，這個路徑可以是相對路徑，也可以是絕對路徑。19.1.2插入圖片——<img>實例代碼19.1.2插入圖片——<img>網(wǎng)頁效果19.1.3添加圖片的提示文字——alt基本語法<imgsrc=”圖片地址”alt=”提示文字”>19.1.3添加圖片的提示文字——alt語法說明alt屬性的提示文字可以是中文也可以是英文。19.1.3添加圖片的提示文字——alt實例代碼19.1.3添加圖片的提示文字——alt網(wǎng)頁效果19.1.4設置圖片的寬度和高度——width/height基本語法<imgsrc=”圖片地址”width=”value”height=”value”>19.1.4設置圖片的寬度和高度——width/height語法說明

圖片高度和寬度的單位可以是像素，也可以是百分比。

如果在使用的寬度和高度屬性中，只設置了寬度或高度中的一個屬性，那么另一個屬性會按原始圖片寬高等比例顯示。但是如果兩個屬性沒有按原始大小的縮放比例設置，圖片很可能變形。19.1.4設置圖片的寬度和高度——width/height實例代碼19.1.4設置圖片的寬度和高度——width/height接上頁19.1.4設置圖片的寬度和高度——width/height網(wǎng)頁效果19.1.5設置圖片邊框——border基本語法<imgsrc=”圖片地址”border=”value”>19.1.5設置圖片邊框——border語法說明value為邊框線的寬度，用數(shù)字表示，單位為像素。19.1.5設置圖片邊框——border實例代碼19.1.5設置圖片邊框——border接上頁19.1.5設置圖片邊框——border網(wǎng)頁效果19.1.6設置圖片對齊方式——align基本語法<imgsrc=”圖片地址”align=”關鍵字”>19.1.6設置圖片對齊方式——align語法說明19.1.6設置圖片對齊方式——align實例代碼19.1.6設置圖片對齊方式——align接上頁19.1.6設置圖片對齊方式——align網(wǎng)頁效果19.1.7設置圖片的間距——hspace/vspace基本語法<imgsrc=”圖片地址”hspace=”水平間距”><imgsrc=”圖片地址”vspace=”垂直間距”>19.1.7設置圖片的間距——hspace/vspace語法說明hspace調整的是圖片左右兩邊的空白距離，vspace調整的是圖片上下兩邊的空白距離。

水平間距和垂直間距都是用數(shù)字表示的，并且單位都是像素。19.1.7設置圖片的間距——hspace/vspace實例代碼19.1.7設置圖片的間距——hspace/vspace網(wǎng)頁效果19.1.7設置圖片的間距——hspace/vspace實例代碼19.1.7設置圖片的間距——hspace/vspace接上頁19.1.7設置圖片的間距——hspace/vspace網(wǎng)頁效果19.1.7設置圖片的間距——hspace/vspace效果說明從圖19-8的效果中可以看到圖片的上下都存在一個空白距離，這個距離是由vspace值決定的，vspace的值越大，這個空白距離越大。如果不設置hspace和vspace兩個屬性的值，瀏覽器將顯示圖片和文字靠近的效果。19.1.8設置圖片鏈接——<a>基本語法<ahref=”URL”target=”目標窗口的打開方式”><imgsrc=”圖片地址”></a>19.1.8設置圖片鏈接——<a>語法說明href屬性是用來設置圖片的鏈接地址URL，target屬性用來設置目標窗口的打開方式，包含有4個屬性值，具體內容可參照第6章。img標記中還可以添加其他的屬性，如height、hspace、border等。19.1.8設置圖片鏈接——<a>實例代碼19.1.8設置圖片鏈接——<a>網(wǎng)頁效果19.1.8設置圖片鏈接——<a>效果說明通過單擊圖19-9中的圖片鏈接，就可以打開圖19-10來查看第二張圖片。提示文字在圖中沒有顯示出來，因為它只有在圖片不能顯示時才會起作用。同時，還發(fā)現(xiàn)在圖19-9中的圖片有一個邊框，這是因為給圖片建立鏈接以后，瀏覽器自動就要給圖片加一個邊框，很像給文字建立鏈接時自動加的下劃線。19.3插入多媒體文件——<embed>

基本語法<embedsrc=”多媒體文件地址”width=文件寬度height=文件高度autostart=true|falseloop=”true|false”></embed>19.3插入多媒體文件——<embed>

語法說明src屬性用來指定插入的多媒體文件地址或多媒體文件名，同時文件一定要加上后綴名。width屬性用來設置多媒體文件的寬度，height屬性用來設置多媒體文件的高度，都是用數(shù)字表示，單位為像素。autostart屬性用來設置多媒體文件的自動播放，有兩個取值true和false，true表示在打開網(wǎng)頁時自動播放多媒體文件；true是默認值，表示打開網(wǎng)頁時自動播放。loop屬性用來設置多媒體文件的循環(huán)播放，只有兩個取值true和false，、true表示多媒體文件將無限循環(huán)播放；false表示多媒體文件只播放一次，false為默認值。19.3插入多媒體文件——<embed>19.3.1插入flash動畫19.3.2插入音頻19.3.3插入視頻19.3.1插入flash動畫實例代碼19.3.1插入flash動畫網(wǎng)頁效果19.3.1插入flash動畫效果說明圖19-25是兩個小球在自由跳動的flash動畫，完整效果可參看光盤文件HTML\19\19-3-1.swf。19.3.2插入音頻實例代碼19.3.2插入音頻網(wǎng)頁效果19.3.2插入音頻效果說明圖19-26是運行實例19-3-2.html代碼的結果，自動會顯示音樂播放器，同時音樂“中國人.mp3”也將自動播放。如果沒有設置多媒體音樂為自動播放時，播放器就會顯示一個播放按鈕，只要單擊該播放按鈕即可播放多媒體音樂。19.3.3插入視頻實例代碼19.3.3插入視頻網(wǎng)頁效果19.4添加背景音樂——<bgsound>基本語法<bgsoundsrc=背景音樂地址loop=播放次數(shù)>19.4添加背景音樂——<bgsound>語法說明src屬性用來指定背景音樂文件的地址或音樂文件名，而且音樂文件要加上后綴。loop屬性用來指定音樂播放的次數(shù)，用數(shù)字表示。如果設置loop=3，則背景音樂播放3遍后自動停止；如果想設置為無限循環(huán)播放的話，可以設置loop=-1即可。19.4添加背景音樂——<bgsound>實例代碼19.4添加背景音樂——<bgsound>接上頁19.4添加背景音樂——<bgsound>網(wǎng)頁效果19.4添加背景音樂——<bgsound>效果說明圖19-28為插入背景音樂的網(wǎng)頁，只要一打開網(wǎng)頁，背景音樂“明月幾時有.mp3”就會開始播放，但是播放5次后自動停止，因為設置的循環(huán)次數(shù)為5?？偨Y圖片和多媒體的熟練使用圖片標簽屬性的使用作業(yè)——綜合設置圖片和多媒體效果說明圖19-29的效果圖中綜合應用到