html圖片和多媒體

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

圖片和多媒體文件的使用

本章主要內(nèi)容

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

19.1圖片

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

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

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

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

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

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

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

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