第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

從 HTML 角度給網(wǎng)頁添加多媒體信息

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

眾所周知，工具的強(qiáng)大有時候并不在于工具的本身，也在于它和外界元素的擴(kuò)展能力有多強(qiáng)。也正是由于這種擴(kuò)展功能，會讓大家感覺到學(xué)習(xí) Dreamweaver 的意義遠(yuǎn)遠(yuǎn)不止于知識點(diǎn)，進(jìn)而有一種買一贈三的感覺。那么題外話不多說，我們立刻來看一下這些功能是如何實(shí)現(xiàn)在網(wǎng)頁中實(shí)現(xiàn)的吧！

1. 創(chuàng)建 HTML 頁面并學(xué)會添加超鏈接

1.1 什么是超鏈接

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

1.2 HTML層面引入超鏈接

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

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

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

圖片描述

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

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

圖片描述

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

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

1.3 給超鏈接添加內(nèi)容，地址，并在瀏覽器中預(yù)覽效果。

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

圖片描述

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

2. 創(chuàng)建HTML頁面并學(xué)會添加自己的視頻。

如果說文字能夠表達(dá)的空間有限，那么視頻可是多媒體中表達(dá)信息種類最豐富的一種。視頻中既可以攜帶音頻，又可以攜帶動畫信息，是視覺聽覺雙重享受的盛宴。那么如何在網(wǎng)頁中添加視頻呢？下面我們從 HTML 設(shè)計角度來帶領(lǐng)同學(xué)們?yōu)榫W(wǎng)頁添加視頻。

2.1 創(chuàng)建一個空白頁面

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

2.2 創(chuàng)建一個video標(biāo)簽：<video></video>

接下來，和本小節(jié)第一個知識點(diǎn)中一樣的操作步驟，我們在 body 標(biāo)簽中敲入一段代碼：

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

代碼敲入后如下圖所示：

圖片描述
通過網(wǎng)頁的預(yù)覽，我們就可以看到事先準(zhǔn)備好的名為 moocwiki.mp4 的視頻就出現(xiàn)在網(wǎng)頁中了。其實(shí)這里應(yīng)用了 video 這個 HTML 標(biāo)準(zhǔn)中自帶的視頻標(biāo)簽，這個標(biāo)簽提供的功能不僅僅是讓網(wǎng)頁播放視頻，還能控制網(wǎng)頁視頻的播放與暫停，是否重復(fù)循環(huán)播放，播放進(jìn)度條和時間顯示。

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

3. 創(chuàng)建HTML頁面并學(xué)會添加音樂播放功能。

學(xué)習(xí)過視頻的添加后，想必比較聰明的同學(xué)對網(wǎng)頁中音頻的添加業(yè)有了自己的猜想。沒錯，方法大致相同。
區(qū)別就是在 body 標(biāo)簽中加入的代碼內(nèi)容不同，我們添加這樣一行代碼到 body 標(biāo)簽中：

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

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

4. 學(xué)會給 Dreamweaver CC 2018 添加擴(kuò)展功能。

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

5. 小結(jié)

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

本節(jié)的重點(diǎn)是：

學(xué)會對超鏈接，視頻，音頻等多媒體元素引入網(wǎng)頁。

本節(jié)的難點(diǎn)是：

學(xué)會擴(kuò)展 Dreaweaver CC 2018 的功能

圖片描述