亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

首頁 慕課教程 Dreamweaver 教程 Dreamweaver 教程 從 HTML 角度給網頁添加多媒體信息
GZQ0607 · 更新于 2020-08-12

從 HTML 角度給網頁添加多媒體信息

本小節知識點中，將帶領同學們學習如何從 HTML 角度給網頁添加多媒體信息。具體要學會添加哪些信息呢？這其中包含了超鏈接，視頻，音頻。同時，在本節的最后一個知識點中，還將為同學們講解如何給 Dreamweaver CC 2018 添加擴展功能。

眾所周知，工具的強大有時候并不在于工具的本身，也在于它和外界元素的擴展能力有多強。也正是由于這種擴展功能，會讓大家感覺到學習 Dreamweaver 的意義遠遠不止于知識點，進而有一種買一贈三的感覺。那么題外話不多說，我們立刻來看一下這些功能是如何實現在網頁中實現的吧！

1. 創建 HTML 頁面并學會添加超鏈接

1.1 什么是超鏈接

超鏈接作為一種特殊的網頁元素，指的是對內容的鏈接。它的概念里就包含了內容和鏈接兩個要義。內容：表明它能將用戶帶到下一個或者新的內容中去。鏈接：說的是超鏈接這種元素在引導你去新的內容過程中起到的鎖鏈般的作用。你可以把它想象成載你通向別的內容的船，也可以是把你拽進別的網頁的鎖鏈。這里的解釋僅適用于初學者。對于初學者來說，理解超鏈接是第一步。

1.2 HTML層面引入超鏈接

接下來我們講解一下 HTML 中超鏈接的引入方式，在 W3C 定義的 Web 標準中，超鏈接是以 anchor 錨標簽也就是<a href="...."></a>引入到 HTML 網頁中的。

首先，我們打開 Dreamweaver 主界面，在菜單欄中選擇文件，新建 HTML 頁面。

在新建的 HTML 中，點擊屏幕上方的代碼，切換到代碼模式下，我們可以看到目前空白 HTML 模版中所有的 HTML 的代碼。如下圖所示。

圖片描述

從上面的圖片我們可以看到，左側紅框框出的部分就是網頁的“正文”部分，也叫網頁的內容部分。從HTML 這中標記語言的語法角度講，就是一對 body 標簽<body> </body>之間。

接下來，我們在 body 標簽內輸入一個 <，可以看到，Dreamweaver CC 2018 會彈出一個提示框，如下圖所示：

圖片描述

在這個彈出框中，我們可以看到下面有一個 HTMLAnchorElement，這是 Dreamweaver CC 2018 的智能化編輯器在猜想我們可能是要輸入一個 HTML 錨元素（HTMLAnchorElement），我們敲下回車，一個完成的元素標簽 a 標簽就被輸入在 body 標簽中了，可以說是非常的智能了。

時至今日，程序開發界備受喜愛的幾款主流代碼編輯器，均已經良好支持代碼提示，語法深色等智能化功能，旨在提升程序員的開發效率。也讓代碼維護起來更加容易。同學們要考慮到一種情況，你設計的網頁今后可能是由他人來維護的，畢竟從嚴格邏輯意義上講，我們設計代碼并不是一個人與代碼綁定的過程，網頁源文件作為知識經濟的產物，它可能在不同人之間來回傳遞。因此，選擇一款好的代碼編輯器也是同學們今后要面臨的諸多選擇的一種。不過現階段，由于 Dreamweaver CC 2018 已經足夠完美，大家只需要用這一款軟件就可以享受到最前沿的軟件開發體驗。

1.3 給超鏈接添加內容，地址，并在瀏覽器中預覽效果。

接下來，我們在 a 標簽中添加一段文字歡迎學習慕課網wiki課程–創建超鏈接！ 并為 a 標簽添加 href屬性，這個元素屬性 href 描述的是 a 標簽與哪個地址相“鏈接”。你可以鏈接到百度，google 等互聯網上的網站。在這里我們以百度作為測試，如下圖：

圖片描述

接下來，我們打開瀏覽器，預覽一下超鏈接在網頁中的效果，效果請看下面這張圖片：
圖片描述

2. 創建HTML頁面并學會添加自己的視頻。

如果說文字能夠表達的空間有限，那么視頻可是多媒體中表達信息種類最豐富的一種。視頻中既可以攜帶音頻，又可以攜帶動畫信息，是視覺聽覺雙重享受的盛宴。那么如何在網頁中添加視頻呢？下面我們從 HTML 設計角度來帶領同學們為網頁添加視頻。

2.1 創建一個空白頁面

同本小節第一個知識點一樣，我們在 Dreamweaver 中單擊菜單欄中的文件，創建一個新的空白 HTML模版文件。并點擊屏幕上方中間的代碼，將 Dreamweaver 設計器切換到代碼設計模式。

2.2 創建一個video標簽：<video></video>

接下來，和本小節第一個知識點中一樣的操作步驟，我們在 body 標簽中敲入一段代碼：

<video width="640px" height="400px" controls =“controls"><source arc="/video/moocwiki.mp4"></video>

代碼敲入后如下圖所示：

圖片描述
通過網頁的預覽，我們就可以看到事先準備好的名為 moocwiki.mp4 的視頻就出現在網頁中了。其實這里應用了 video 這個 HTML 標準中自帶的視頻標簽，這個標簽提供的功能不僅僅是讓網頁播放視頻，還能控制網頁視頻的播放與暫停，是否重復循環播放，播放進度條和時間顯示。

更準確地說，是用瀏覽器自帶的默認視頻播放器播放視頻。同學們在學校的時候一定要注意視頻的格式問題。眾所周知，MP4 是一種視頻格式，更確切的說是一種壓縮編碼方式，此外還有很多種不同的視頻格式，不同瀏覽器，不同的標簽寫法，不同的屬性定義都可能產生不同的播放效果，甚至不能夠正常播放。這些內容需要同學在今后的應用場景中去體會，此處無法做詳盡的講解。

3. 創建HTML頁面并學會添加音樂播放功能。

學習過視頻的添加后，想必比較聰明的同學對網頁中音頻的添加業有了自己的猜想。沒錯，方法大致相同。
區別就是在 body 標簽中加入的代碼內容不同，我們添加這樣一行代碼到 body 標簽中：

<audio controls="controls" style="width:400px;height:45px;" ><source src="audio/moocwiki.mp3" type="audio/mpeg"/></audio>

將這一段代碼添加進代碼視圖中的 body 中后，我們在瀏覽器中打開相應頁面就可以看到一個音頻播放器出現在網頁中了，同學們也要注意和視頻播放器一樣的問題，就是格式問題。音頻也是具備多種格式，具備不同的瀏覽器支持類型。

4. 學會給 Dreamweaver CC 2018 添加擴展功能。

擴展功能等于是給 Dreamweaver 這個強大的軟件如虎添翼。要想 Dreamweaver CC 2018 為我們完成更多的事，就需要學習如何擴展 Dreamweaver CC 2018 下面就跟隨我的腳步一起來看一下如何擴展Dreamweaver CC 2018。
首先，點擊 Dreamweaver CC 2018 主界面菜單欄中的窗口（W），在下拉列表的末尾我們可以看到擴展（X）和在Exchange中查找擴展功能。這兩個選項就是擴展 Dreamweaver 的方法。其中后者將會啟動瀏覽器打開 Adobe 官網擴展中心界面，你可以在里面尋求更廣泛的擴展功能。而**擴展（X）**則是安裝你已經下載到本地的擴展。具體的演示下面的圖片作出了說明：
圖片描述

5. 小結

通過本節知識點的學習，大家要認識到，今后只做一個完整的網頁或者是大型的網站，絕對不可能是只有一種或兩種網頁元素。必定是多種網頁元素的混合應用。這其實不僅僅是學會如何引入不同類型多媒體元素的問題，還要布局合理，表現合理。了解不同多媒體元素的展示意義，展示特點，如同當今琳瑯滿目的廣告一樣，要學者讓自己選擇的網頁元素準確效率地表達出設計者要表達的意思。這一點是我們網頁設計工作者今后一直要提高的技能。綜合本節的知識點來看，大體上就是對各種多媒體元素的引入。

本節的重點是：

學會對超鏈接，視頻，音頻等多媒體元素引入網頁。

本節的難點是：

學會擴展 Dreaweaver CC 2018 的功能

圖片描述