網(wǎng)頁(yè)中靈活運(yùn)用多媒體元素

在之前的章節(jié)中，老師已經(jīng)通過(guò)標(biāo)簽的基礎(chǔ)講解給大家講述了如何在網(wǎng)頁(yè)中插入文本，圖片，音頻，視頻。這些形形色色的不同類型的文件，共同構(gòu)成了豐富多彩的多媒體世界以及多媒體網(wǎng)頁(yè)。

根據(jù)我們的認(rèn)知，網(wǎng)頁(yè)元素都是多元化的，絕對(duì)不可能僅僅由文字和圖片，或者圖片和視頻構(gòu)成?，F(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)多數(shù)都是融合了多媒體，超媒體，流媒體等綜合的媒體形式。

那么本節(jié)我們將繼續(xù)講解網(wǎng)頁(yè)中的音頻和視頻。力圖在一個(gè)新的深度和高度上為帶領(lǐng)大家學(xué)習(xí)網(wǎng)頁(yè)中的多媒體元素。那么本節(jié)老師規(guī)劃了四個(gè)小知識(shí)點(diǎn)，首先是在網(wǎng)頁(yè)中插入視頻，其次是在網(wǎng)頁(yè)中插入音頻，再有是在網(wǎng)頁(yè)中添加背景音樂(lè)，最后是添加插件。

同學(xué)們可能會(huì)問(wèn)，這個(gè)插入視頻和音頻和我們之前學(xué)習(xí)的為網(wǎng)頁(yè)插入視頻和音頻有什么區(qū)別？區(qū)別當(dāng)然有！上次我們主要是通過(guò) HTML 標(biāo)簽的形式讓大家了解插入音頻和視頻的代碼設(shè)計(jì)層面的原理。今天我們將完全通過(guò) Dreamweaver CC 2018 來(lái)為網(wǎng)頁(yè)中添加音頻和視頻！下面就請(qǐng)跟隨老師的操作步驟和講解一起來(lái)開(kāi)始今天的學(xué)習(xí)吧！

1. 在網(wǎng)頁(yè)中插入視頻

為網(wǎng)頁(yè)中添加視頻，之前去在代碼中寫入一對(duì) video 標(biāo)簽太累有木有？沒(méi)關(guān)系，Dreamweaver CC 2018 的易用性設(shè)計(jì)早就考慮到了這一點(diǎn)。下面就跟隨老師的操作步驟一步一步來(lái)操作在網(wǎng)頁(yè)中插入視頻。

第一步：我們還是先創(chuàng)建空白的 HTML 頁(yè)面。這一步依舊不再贅述，有興趣的同學(xué)們可以翻閱本 WIKI 教程的前幾節(jié)，那里面都有介紹。

第二步：我們選擇菜單欄中的插入按鈕，進(jìn)而選擇 HTML ,再而選擇 HTML5 Video,如下面第一張圖所示：

在這里要和大家說(shuō)明,菜單欄的使用和右側(cè)功能面板是相互補(bǔ)充的,它們既能相互補(bǔ)充,又存在一些重復(fù)的功能,往往右側(cè)功能面板都是一些菜單欄功能的快捷入口。就比如這個(gè)插入 HTML5 Video 操作，在右側(cè)插入面板完全就可以點(diǎn)擊插入后再點(diǎn)擊 HTML5 Video。

這樣操作的話，點(diǎn)擊操作由三次減少為2次，可不要小看這小小的一個(gè)點(diǎn)擊操作，對(duì)于當(dāng)代網(wǎng)頁(yè)設(shè)計(jì)數(shù)量巨大的操作步驟，這個(gè)操作表面上節(jié)省的1步，實(shí)則為一大步！下圖是使用右側(cè)功能面板實(shí)現(xiàn)視頻插入功能的截圖。

插入視頻操作完成后，我們可以看到在網(wǎng)頁(yè)中就出現(xiàn)了一個(gè)視頻播放器的輪廓。那么接下來(lái)我們就可以通過(guò)屬性面板設(shè)置它的長(zhǎng)寬等屬性。

第三步：我們按照之前章節(jié)講過(guò)的設(shè)置 CSS 屬性，在右側(cè)的屬性面版編輯插入視頻長(zhǎng)寬等屬性，更多的屬性設(shè)置就需要大家課下在 Dreamweaver CC 2018 中多多練習(xí)。

下圖展示了為一個(gè)剛創(chuàng)建好的視頻元素指定長(zhǎng)寬屬性前后的變化：

以上便是我們完完全全通過(guò) Dreamweaver CC 2018 來(lái)為網(wǎng)頁(yè)插入并設(shè)置視頻！

2.在網(wǎng)頁(yè)中添加音頻

為網(wǎng)頁(yè)中添加音頻，之前也是在代碼中展示過(guò) Audio 標(biāo)簽的奇妙之處，那么今天我們重點(diǎn)講解的是通過(guò) Dreamweaver CC 2018 來(lái)為網(wǎng)頁(yè)中插入音頻。說(shuō)到這里，就不得不提起上一個(gè)知識(shí)點(diǎn)，上一個(gè)知識(shí)點(diǎn)中的在網(wǎng)頁(yè)中插入視頻的操作完全可以復(fù)制到這一個(gè)知識(shí)點(diǎn)中來(lái)。操作步驟完完全全的一樣，只不過(guò)菜單欄中的 HTML5 Video，換成 HTML5 Audio。操作方式也是和上面一樣，通過(guò)菜單欄或者通過(guò)右側(cè)功能面板都可以。如下圖所示：

3.為網(wǎng)頁(yè)添加背景音樂(lè)

這里我們要給大家講解一個(gè)好用的神奇的標(biāo)簽，就是 bgsound ，我們可以寫一個(gè)這樣的標(biāo)簽到網(wǎng)頁(yè)的 body 標(biāo)簽里。 <bgsound src=""> 其中雙引號(hào)中的部分，需要用你的本地音頻文件目錄位置進(jìn)行替換。把這個(gè)標(biāo)簽粘貼到網(wǎng)頁(yè)的 body 中，就可以為網(wǎng)頁(yè)設(shè)置背景音樂(lè)了。

由于是音頻，所以老師就無(wú)法截圖給大家說(shuō)明了，大家只要按找老師說(shuō)的方式去操作，就會(huì)很容易的給網(wǎng)頁(yè)添加了背景音樂(lè)。

4.添加插件

插件是什么，英文上我們叫 plugin ，可能沒(méi)有太多計(jì)算機(jī)接觸經(jīng)歷的同學(xué)們很難理解這個(gè)插件會(huì)理解吃力。不要擔(dān)心，老師給大家解釋一下。簡(jiǎn)單說(shuō)，就是現(xiàn)有的軟件無(wú)法做到的功能，插件提供了擴(kuò)展的本領(lǐng)。由于它是隨需求的使用揮之即來(lái)，呼之即去的。所以很像是積木，喜歡就插上，不喜歡就拔下來(lái)，因此我們有了插件這個(gè)形象的名字。

那么在 Dreamweaver CC 2018 中怎么使用插件呢，下面跟隨老師的腳步來(lái)看一看：
首先創(chuàng)建空白文檔。這一步依然不贅述。

第二步，我們要點(diǎn)擊菜單欄中的插入按鈕，然后選擇 HTML ,進(jìn)而選擇插件，然后就會(huì)彈出選擇文件路徑的對(duì)話框，這個(gè)時(shí)候我們只需要選擇一個(gè)你需要擴(kuò)展到網(wǎng)頁(yè)中的插件類型，可以是一個(gè)視頻，也可以是圖片，都可以。插入后的效果如下圖所示。我們可以看到網(wǎng)頁(yè)的代碼里插入了一個(gè) embed 標(biāo)簽，這個(gè)其實(shí)就是插件額專用標(biāo)簽。

5. 小結(jié)

在本小節(jié)的知識(shí)點(diǎn)中，給大家通過(guò) Dreamweaver CC 2018 直接操作的方式介紹了在網(wǎng)頁(yè)中插入視頻，音頻的方法。整個(gè)知識(shí)點(diǎn)的操作性比較強(qiáng)，操作的步驟比較多，且互通的知識(shí)點(diǎn)比較多。所以同學(xué)們要課下多多練習(xí)才能觸類旁通。

本節(jié)知識(shí)點(diǎn)的重點(diǎn)是利用 Dreamweaver CC 2018 在網(wǎng)頁(yè)中插入視頻，音頻。
本節(jié)知識(shí)點(diǎn)的難點(diǎn)是理解插件在網(wǎng)頁(yè)中的作用。