網頁中靈活運用多媒體元素

在之前的章節中，老師已經通過標簽的基礎講解給大家講述了如何在網頁中插入文本，圖片，音頻，視頻。這些形形色色的不同類型的文件，共同構成了豐富多彩的多媒體世界以及多媒體網頁。

根據我們的認知，網頁元素都是多元化的，絕對不可能僅僅由文字和圖片，或者圖片和視頻構成?，F代網頁設計多數都是融合了多媒體，超媒體，流媒體等綜合的媒體形式。

那么本節我們將繼續講解網頁中的音頻和視頻。力圖在一個新的深度和高度上為帶領大家學習網頁中的多媒體元素。那么本節老師規劃了四個小知識點，首先是在網頁中插入視頻，其次是在網頁中插入音頻，再有是在網頁中添加背景音樂，最后是添加插件。

同學們可能會問，這個插入視頻和音頻和我們之前學習的為網頁插入視頻和音頻有什么區別？區別當然有！上次我們主要是通過 HTML 標簽的形式讓大家了解插入音頻和視頻的代碼設計層面的原理。今天我們將完全通過 Dreamweaver CC 2018 來為網頁中添加音頻和視頻！下面就請跟隨老師的操作步驟和講解一起來開始今天的學習吧！

1. 在網頁中插入視頻

為網頁中添加視頻，之前去在代碼中寫入一對 video 標簽太累有木有？沒關系，Dreamweaver CC 2018 的易用性設計早就考慮到了這一點。下面就跟隨老師的操作步驟一步一步來操作在網頁中插入視頻。

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

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

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

這樣操作的話，點擊操作由三次減少為2次，可不要小看這小小的一個點擊操作，對于當代網頁設計數量巨大的操作步驟，這個操作表面上節省的1步，實則為一大步！下圖是使用右側功能面板實現視頻插入功能的截圖。

插入視頻操作完成后，我們可以看到在網頁中就出現了一個視頻播放器的輪廓。那么接下來我們就可以通過屬性面板設置它的長寬等屬性。

第三步：我們按照之前章節講過的設置 CSS 屬性，在右側的屬性面版編輯插入視頻長寬等屬性，更多的屬性設置就需要大家課下在 Dreamweaver CC 2018 中多多練習。

下圖展示了為一個剛創建好的視頻元素指定長寬屬性前后的變化：

以上便是我們完完全全通過 Dreamweaver CC 2018 來為網頁插入并設置視頻！

2.在網頁中添加音頻

為網頁中添加音頻，之前也是在代碼中展示過 Audio 標簽的奇妙之處，那么今天我們重點講解的是通過 Dreamweaver CC 2018 來為網頁中插入音頻。說到這里，就不得不提起上一個知識點，上一個知識點中的在網頁中插入視頻的操作完全可以復制到這一個知識點中來。操作步驟完完全全的一樣，只不過菜單欄中的 HTML5 Video，換成 HTML5 Audio。操作方式也是和上面一樣，通過菜單欄或者通過右側功能面板都可以。如下圖所示：

3.為網頁添加背景音樂

這里我們要給大家講解一個好用的神奇的標簽，就是 bgsound ，我們可以寫一個這樣的標簽到網頁的 body 標簽里。 <bgsound src=""> 其中雙引號中的部分，需要用你的本地音頻文件目錄位置進行替換。把這個標簽粘貼到網頁的 body 中，就可以為網頁設置背景音樂了。

由于是音頻，所以老師就無法截圖給大家說明了，大家只要按找老師說的方式去操作，就會很容易的給網頁添加了背景音樂。

4.添加插件

插件是什么，英文上我們叫 plugin ，可能沒有太多計算機接觸經歷的同學們很難理解這個插件會理解吃力。不要擔心，老師給大家解釋一下。簡單說，就是現有的軟件無法做到的功能，插件提供了擴展的本領。由于它是隨需求的使用揮之即來，呼之即去的。所以很像是積木，喜歡就插上，不喜歡就拔下來，因此我們有了插件這個形象的名字。

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

第二步，我們要點擊菜單欄中的插入按鈕，然后選擇 HTML ,進而選擇插件，然后就會彈出選擇文件路徑的對話框，這個時候我們只需要選擇一個你需要擴展到網頁中的插件類型，可以是一個視頻，也可以是圖片，都可以。插入后的效果如下圖所示。我們可以看到網頁的代碼里插入了一個 embed 標簽，這個其實就是插件額專用標簽。

5. 小結

在本小節的知識點中，給大家通過 Dreamweaver CC 2018 直接操作的方式介紹了在網頁中插入視頻，音頻的方法。整個知識點的操作性比較強，操作的步驟比較多，且互通的知識點比較多。所以同學們要課下多多練習才能觸類旁通。

本節知識點的重點是利用 Dreamweaver CC 2018 在網頁中插入視頻，音頻。
本節知識點的難點是理解插件在網頁中的作用。