《HTML5+CSS3網(wǎng)頁制作教程》課件-第4章

模塊4網(wǎng)頁中的多媒體4.1網(wǎng)頁中插入圖像4.2網(wǎng)頁中插入音頻和視頻4.3案例：制作圖文并茂的網(wǎng)頁思考與練習(xí)題

4.1網(wǎng)頁中插入圖像

圖片在網(wǎng)頁中具有畫龍點(diǎn)睛的作用，它能裝飾網(wǎng)頁，表達(dá)個(gè)人的情調(diào)和風(fēng)格。但在網(wǎng)頁中加入的圖片越多，則會(huì)造成網(wǎng)頁下載時(shí)間過長(zhǎng)，使瀏覽者失去耐心。一般情況下，最好能用最少的字節(jié)數(shù)生成高質(zhì)量的圖片，網(wǎng)頁中常用的圖片格式有JPEG、GIF、BMP、TIFF和PNG等。

4.1.1?圖片格式

網(wǎng)頁圖片格式分為兩種：一種是位圖，另一種是矢量圖。

1.位圖

位圖，又稱為點(diǎn)陣圖像，是由像素(圖片元素)的單個(gè)點(diǎn)組成的。通常位圖又分為8位、16位、24位和32位。所謂8位圖并不是指圖像只有8種顏色，而是有28(即256)種顏色，8位圖是指用8個(gè)bits來表示顏色。

位圖有三種格式：JPEG、PNG和GIF。

(1)JPEG格式。

JPEG可以很好地處理大面積色調(diào)的圖像，如相片、網(wǎng)頁中一般的圖片。相比于Windows支持的BMP格式的圖像，一般情況下同一圖像的BMP格式的大小是JPEG格式的5～10倍，而GIF格式最多只能是256色，因此載入256色以上圖像的JPEG格式成了Internet中最受歡迎的圖像格式之一，但JPEG是一種不支持透明和動(dòng)畫的圖片格式。

(2)PNG格式。

PNG支持透明信息。所謂透明，即圖像可以浮現(xiàn)在其他頁面文件或頁面圖像之上?？梢哉f，PNG是專門為Web創(chuàng)造的圖像，通常大部分頁面設(shè)計(jì)者在頁面中加入Logo或

者一些點(diǎn)綴的小圖像時(shí)，都會(huì)選擇使用PNG格式。由于JPEG格式圖片容量較大，在保證圖片清晰、逼真的前提下，網(wǎng)頁中不可能大范圍使用文件較大的JPEG格式圖片，而PNG格式圖片體積小，且無損壓縮，能保證網(wǎng)頁的打開速度，所以PNG格式圖片是很好的選擇。PNG由于其優(yōu)秀的特點(diǎn)，被稱為“網(wǎng)頁設(shè)計(jì)專用格式”。

(3)GIF格式。

GIF只支持256色以內(nèi)的圖像，所以，GIF格式的顏色效果是很差的。但是，GIF有個(gè)最大的特點(diǎn)，就是可以制作動(dòng)畫。圖像作者利用圖像處理軟件，將靜態(tài)的GIF圖像設(shè)置為單幀畫面，然后把這些單幀畫面連在一起，設(shè)置好一個(gè)畫面到下一個(gè)畫面的間隔時(shí)間，最后保存為GIF格式就可以了。這就是簡(jiǎn)單的逐幀動(dòng)畫。GIF圖像具有圖像文件短小、

下載速度快，可用許多同樣大小的圖像文件組成動(dòng)畫等優(yōu)點(diǎn)，此外，它還可以在GIF中指定透明區(qū)域，使圖像具有非同一般的顯示效果。GIF是支持透明、動(dòng)畫的圖片格式，但只

是256色。

2.矢量圖

矢量圖，又稱為“向量圖”，是一種以數(shù)學(xué)描述的方式來記錄圖像內(nèi)容的圖像格式如一個(gè)方程y=kx，當(dāng)這個(gè)方程體現(xiàn)在坐標(biāo)系上時(shí)，設(shè)置不同的參數(shù)可以繪制不同角度的直線，這就是矢量圖的構(gòu)圖原理。

矢量圖最大的優(yōu)點(diǎn)是，無論放大、縮小或旋轉(zhuǎn)等，圖像都不會(huì)失真；最大的缺點(diǎn)是難以表現(xiàn)色彩層次豐富的逼真圖像效果(圖片效果差)。

4.1.2?絕對(duì)路徑和相對(duì)路徑

HTML文檔支持文字、圖片、聲音、視頻等多媒體格式。在這些格式中，除了文本是寫在HTML中的，其他都是嵌入式的，即HTML文檔只記錄了這些文件的路徑，這些文件能夠正確顯示，路徑至關(guān)重要。

路徑的作用是定位一個(gè)文件的位置。文件的路徑可以有兩種表達(dá)方式：以當(dāng)前文檔為參照物表示文件的位置，即相對(duì)路徑；以根目錄打頭表示文件的位置，即絕對(duì)路徑。

為了方便講述絕對(duì)路徑和相對(duì)路徑，以如圖4-1所示的目錄結(jié)構(gòu)來說明。

圖4-1文件目錄結(jié)構(gòu)

1.絕對(duì)路徑

如圖4-1所示，在E盤的website目錄下的images下有一個(gè)photo.jpg圖像文件，那么它的絕對(duì)路徑就是E:\website\images\photo.jpg，像這種完整地描述文件位置的路徑就是絕對(duì)路徑。

如果將圖片文件photo.jpg插入網(wǎng)頁index.html中，絕對(duì)路徑表示方式如下：

E:\website\images\photo.jpg

2.相對(duì)路徑

所謂相對(duì)路徑，顧名思義就是以當(dāng)前位置為參考點(diǎn)，自己相對(duì)于目標(biāo)的位置。

例如，在index.html中鏈接photo.jpg就可以使用相對(duì)路徑。如圖4-1所示，index.html和photo.jpg圖片的路徑可以這樣來定位：從index.html位置出發(fā)，它和images屬于

同級(jí)，路徑是通的，因此可以定位到images，而images的下級(jí)就有photo.jpg，所以使用相對(duì)路徑表示圖片如下：

images/photo.jpg

使用相對(duì)路徑時(shí)，無論將這些文件放到哪里，只要photo.jpg和index.html文件的相對(duì)位置沒有變就不會(huì)出錯(cuò)。

在相對(duì)路徑中，“..”表示上級(jí)目錄，“../..”表示上級(jí)的上級(jí)目錄，依次類推。例如，將photo.jpg圖片插入b.html文件中，使用相對(duì)路徑表示如下：

../images/photo.jpg

至此，細(xì)心的讀者會(huì)發(fā)現(xiàn)，路徑分隔符使用了“/”和“\”兩種，其中“/”表示網(wǎng)絡(luò)分隔符，“\”表示本地分隔符。因?yàn)榫W(wǎng)站制作好后是在網(wǎng)絡(luò)上運(yùn)行的，因此要求使用“/”作為路徑分隔符。

4.1.3?圖像標(biāo)簽

在HTML中，圖像使用<img>標(biāo)簽。img，即“image”(圖像)。<img>標(biāo)簽常用屬性如表4-1所示。

1.src屬性

src，即“source”(源文件)。<img>標(biāo)簽的src屬性用于指定圖像源文件所在的路徑，它是圖像必不可少的屬性。

src屬性的語法如下：

<imgsrc="圖像文件的路徑"/>

【例4-1】src屬性用法。

程序在瀏覽器中的預(yù)覽效果如圖4-2所示。圖4-2頁面運(yùn)行結(jié)果

2.alt屬性

alt屬性定義了img元素的備用內(nèi)容，此內(nèi)容會(huì)在圖像無法顯示時(shí)呈現(xiàn)(原因也許是無法找到圖像文件，或者圖像格式不被瀏覽器支持，或者用戶所用的瀏覽器或設(shè)備無法顯

示圖像)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)速已經(jīng)不是制約因素，因此一般都能成功下載圖像。

alt屬性還有另外一個(gè)作用，在百度、Google等大型搜索引擎中，搜索圖片不如文字方便，如果給圖片添加適當(dāng)提示，則可以方便搜索引擎的檢索。

alt屬性的語法如下：

<imgalt="圖像文件的提示文字"/>

【例4-2】alt屬性用法。

當(dāng)我們移動(dòng)圖片的位置或者將圖片重命名使html文件找不到圖片時(shí)，就會(huì)出現(xiàn)alt屬性的提示文字，如圖4-3所示。

圖4-3頁面運(yùn)行結(jié)果

3.title屬性

title屬性有一個(gè)很好的作用，即為鏈接添加描述性文字，特別是當(dāng)鏈接本身沒有十分清楚地表達(dá)鏈接的目的時(shí)，這樣就使得訪問者知道那些鏈接會(huì)將他們帶到什么地方，而不

會(huì)加載一個(gè)可能完全不感興趣的頁面。title屬性同樣可應(yīng)用于圖像標(biāo)簽，所起的作用是一樣的。

title屬性的語法如下：

<imgtitle="圖像文件的提示文字"/>

【例4-3】title屬性用法。

程序在瀏覽器中的查看效果如圖4-4所示。

圖4-4頁面運(yùn)行結(jié)果

4.width、height屬性

在HTML5中，還可以設(shè)置插入圖像的顯示大小，一般按原始圖像尺寸顯示，但也可以用屬性width(寬度)和height(高度)任意設(shè)置尺寸。其語法如下：

【例4-4】width、height屬性用法。

在chrome中運(yùn)行上述代碼，可得到和圖4-2所示一樣的結(jié)果。

5.border屬性

在默認(rèn)情況下，頁面中插入的圖像是沒有邊框的，可以通過border屬性為圖像添加邊框，其語法格式如下：

【例4-5】設(shè)置圖像邊框。

上述代碼在瀏覽器中的查看效果如圖4-5所示。

圖4-5頁面運(yùn)行結(jié)果

4.1.4?背景圖片

在插入圖片時(shí)，用戶可以將圖片設(shè)為網(wǎng)頁的背景，如果將GIF和JPEG文件作為背景，由于其圖像尺寸小于頁面，圖像會(huì)進(jìn)行重復(fù)。插入背景圖片的語法如下：

【例4-6】圖片作為背景的用法。

上述代碼在瀏覽器中的查看效果如圖4-6所示。

圖4-6頁面運(yùn)行效果

4.2網(wǎng)頁中插入音頻和視頻

4.2.1?音頻HTML5規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用<audio>標(biāo)簽。HTML5目前支持3種音頻格式，分別為Ogg、MP3和Wave。表4-2是音頻文件格式及描述。

如果需要在HTML5網(wǎng)頁中播放音頻，基本格式如下：

<audiosrc="音頻文件路徑"controls></audio>

其中，src屬性是規(guī)定要播放的音頻的地址，controls屬性是controls="controls"的簡(jiǎn)寫，提供播放、暫停和音量控件。在<audio>與</audio>之間插入的內(nèi)容是瀏覽器不支持<audio>標(biāo)簽的提示文本。

【例4-7】在網(wǎng)頁中插入音頻。

上述代碼在IE8瀏覽器中的預(yù)覽效果如圖4-7所示。圖4-7IE8運(yùn)行效果

上述代碼在Firefox瀏覽器中的預(yù)覽效果如圖4-8所示。controls屬性在不同的瀏覽器中外觀各異，圖4-8只是其中一種。

圖4-8Firefox運(yùn)行效果

<audio>標(biāo)簽是HTML5的新標(biāo)簽，用戶可以通過修改audio的屬性來修改<audio>標(biāo)簽的顯示和播放狀態(tài)，其功能描述見表4-3。

表4-4是各瀏覽器支持的音頻格式。

【例4-8】播放音頻文件。

此例展示了如何使用<source>標(biāo)簽來提供多種格式。在chrome瀏覽器中運(yùn)行上面的代碼，得到如圖4-9所示的結(jié)果。

圖4-9頁面運(yùn)行結(jié)果

4.2.2?背景音樂

給網(wǎng)頁添加背景音樂，可以使瀏覽者在進(jìn)入網(wǎng)站的同時(shí)能聽到優(yōu)美的音樂，大大增強(qiáng)網(wǎng)站的娛樂效果。

以前，如果我們想要在網(wǎng)頁中插入背景音樂，使用的是<bgsound>標(biāo)簽，但是<bgsound>標(biāo)簽只適用于IE瀏覽器，在Firefox等中未必適用，兼容性非常差。HTML5推出了<embed>標(biāo)簽，我們可以使用<embed>標(biāo)簽為網(wǎng)頁添加背景音樂。

<embed>標(biāo)簽的語法如下：

<embedsrc=""hidden=""loop=""/>

說明：src屬性定義了背景音樂的地址。

hidden屬性取值為true或false。取值為true時(shí)不顯示播放器，取值為false時(shí)顯示播放器。

【例4-9】設(shè)置背景音樂。

在chrome瀏覽器中運(yùn)行上面的代碼，得到如圖4-10所示的結(jié)果。

圖4-10頁面運(yùn)行結(jié)果

4.2.3?視頻

HTML5中新增了<video>標(biāo)簽，用于在網(wǎng)頁中嵌入視頻元素，它支持3種視頻格式，分別為Ogg、WebM和MPEG4。

視頻文件格式及其描述如表4-5所示。

video元素和audio元素有著很大的相似性。

如果需要在HTML5網(wǎng)頁中播放視頻，基本格式如下：

<videocontrolssrc="視頻文件路徑"></video>

其中，src屬性是規(guī)定要播放的視頻的地址，controls屬性是controls="controls"的簡(jiǎn)寫，提供播放、暫停和音量控件。在<video>與</video>之間插入的內(nèi)容是瀏覽器不支持<video>標(biāo)簽的提示文本。

【例4-10】在網(wǎng)頁中插入視頻。

上述代碼在IE8上的運(yùn)行效果如圖4-11所示。

圖4-11IE8運(yùn)行結(jié)果

上述代碼在chrome上的運(yùn)行效果如圖4-12所示。

圖4-12chrome運(yùn)行效果

同樣地，用戶可以通過修改<video>標(biāo)簽的屬性來修改視頻的顯示和播放狀態(tài)，具體見表4-6。

在網(wǎng)頁中添加一個(gè)視頻文件并不是一件容易的事情。其原因是目前的視頻文件種類非常多，而且視頻文件涉及碼率、幀等數(shù)據(jù)，目前還沒有哪一種視頻格式被普遍支持，如果

你想將視頻推向各種各樣的HTML5用戶，就要做好以多種格式編碼視頻的準(zhǔn)備。表4-7給出了目前瀏覽器重點(diǎn)支持的幾種視頻格式。

【例4-11】插入視頻文件。

１

此例展示了如何使用<source>標(biāo)簽來向?yàn)g覽器提供備選視頻格式。在chrome瀏覽器中運(yùn)行上述代碼，得到如圖4-13所示效果。

圖4-13頁面運(yùn)行結(jié)果

4.3案例：制作圖文并茂的網(wǎng)頁

【案例描述】這里有一個(gè)關(guān)于2022年2月6日中國(guó)女足亞洲杯奪冠新聞報(bào)道頁面，頁面有圖片、視頻、標(biāo)題文字和段落文字。【考核知識(shí)點(diǎn)】標(biāo)題標(biāo)簽<h1>、段落標(biāo)簽<p>、圖片標(biāo)簽<img>、視頻標(biāo)簽<video>及其屬性。

【練習(xí)目標(biāo)】

(1)學(xué)會(huì)使用標(biāo)題標(biāo)簽和段落標(biāo)簽編輯文字信息。

(2)學(xué)會(huì)在網(wǎng)頁中插入圖片，提供正確的src屬性值，并設(shè)置圖片的寬、高。

(3)學(xué)會(huì)在網(wǎng)頁中插入視頻，正確設(shè)置其資源地址。

案例源代碼的運(yùn)行結(jié)果如圖4-14所示。圖4-14頁面運(yùn)行結(jié)果

圖4-14頁面運(yùn)行結(jié)果

圖4-14頁面運(yùn)行結(jié)果

【案例分析】

圖文并茂是當(dāng)今網(wǎng)頁制作的基本要求，本網(wǎng)頁利用標(biāo)簽<img>和<p>將文字和圖片加入頁面中，還利用<video>標(biāo)簽添加了視頻。

思考與練習(xí)題

一、選擇題1.HTML代碼<imgsrc="logo.gif">表示()。A.添加一個(gè)圖像B.排列對(duì)齊一個(gè)圖像C.設(shè)置圖像的邊框D.加入一條水平線

2.以下關(guān)于絕對(duì)路徑的說法，正確的是()。

A.絕對(duì)路徑是被鏈接文檔的完整URL，不包括使用的傳輸協(xié)議

B.使用絕對(duì)路徑需要考慮源文件的位置

C.在絕對(duì)路徑中，如果目標(biāo)文件被移動(dòng)，則鏈接同樣可用

D.創(chuàng)建外部鏈接時(shí)，必須使用絕對(duì)路徑

3.HTML5不支持的視頻格式是()。

A.Ogg