GZQ0607 ·在這一節(jié)中，老師將帶領(lǐng)大家學(xué)習(xí)如何在網(wǎng)頁(yè)中插入動(dòng)畫(huà)，按照以往網(wǎng)頁(yè)中的常見(jiàn)動(dòng)畫(huà)，大致可以看到兩種，普通的動(dòng)畫(huà)，和 FLV 動(dòng)畫(huà)，今天我們兩種都要提到，但是具體的屬性學(xué)習(xí)，還要大家在相關(guān)的全面資料或書(shū)籍中逐一嘗試。
動(dòng)畫(huà)在網(wǎng)頁(yè)中還是發(fā)揮著不小的作用的，學(xué)習(xí)了動(dòng)畫(huà)，我們不必把網(wǎng)頁(yè)內(nèi)容展現(xiàn)形式僅僅局限在 javascript 特效，文字，文本，影音媒體。雖然視頻的效果和動(dòng)畫(huà)“好像”差不多。但這二者還是有很大區(qū)別的。
一個(gè)最大區(qū)別就是加載和大小上?；蛘哒f(shuō)這兩個(gè)詞講述的也是一回事。視頻過(guò)大加載的壓力要不如某些更合適的視頻文件。對(duì)于目前要求高及時(shí)響應(yīng)率的用戶體驗(yàn)來(lái)說(shuō)，這種加載緩慢的“資源”不應(yīng)該被大量應(yīng)用在現(xiàn)代的網(wǎng)頁(yè)里。視頻表達(dá)的內(nèi)容往往重而多，動(dòng)畫(huà)雖然也是某種意義上的視頻，但是輕量級(jí)的內(nèi)容居多。
1. 在網(wǎng)頁(yè)中添加動(dòng)畫(huà)
在這里老師要先給大家介紹一種在 Dreamweaver CC 2018 中插入動(dòng)畫(huà)的方式，下面老師先簡(jiǎn)要介紹一種方式，這種方式其實(shí)在 Dreamweaver CC 2018 中很顯眼，很容易被看到。
第一步：我們還是新建一個(gè)空白的 HTML 文檔。詳細(xì)步驟不在此贅述，請(qǐng)大家主動(dòng)翻閱前幾節(jié)的慕課 wiki 文檔自行學(xué)習(xí)。
第二步：我們?cè)谟覀?cè)的面板中，選擇動(dòng)畫(huà)合成，然后會(huì)彈出選擇文件的畫(huà)面，大家只要選擇制作好的文件就可以了。由于資源需要到互聯(lián)網(wǎng)上搜集，大家在互聯(lián)網(wǎng)上很容易找到相關(guān)的資源，由于版權(quán)的問(wèn)題，老師不方便在此處給大家展示選擇后的動(dòng)畫(huà)效果。同學(xué)們應(yīng)該課下自己多多練習(xí)。體會(huì)這種動(dòng)畫(huà)插入方式的便捷之處。
下圖是對(duì) Dreamweaver CC 2018 右側(cè)面板的展示。
插入完成后，點(diǎn)擊插入好的動(dòng)畫(huà)，我們依然可以在屬性面板中看到長(zhǎng)寬高的編輯界面，具體界面大家可以參考上一節(jié)的多媒體文件長(zhǎng)寬的設(shè)置，那里有更詳細(xì)的說(shuō)明和指引。
在這里我們只需要掌握一個(gè)簡(jiǎn)單動(dòng)畫(huà)的插入流程就可以，需要用的時(shí)候知道到哪里去尋找快捷操作方式即可。
以上便是我們完完全全通過(guò) Dreamweaver CC 2018 來(lái)為網(wǎng)頁(yè)插入簡(jiǎn)單動(dòng)畫(huà)的基本過(guò)程！
當(dāng)然，由于大家的素材復(fù)雜程度不同，我們做出來(lái)的網(wǎng)頁(yè)最終會(huì)因?yàn)閯?dòng)畫(huà)效果的不同而內(nèi)容大不相同，其實(shí)在這里老師要強(qiáng)調(diào)的是，動(dòng)畫(huà)素材的選擇和內(nèi)容的設(shè)計(jì)，要比動(dòng)畫(huà)的位置重要，合適的位置要比如何插入動(dòng)畫(huà)重要。所以大家要在網(wǎng)頁(yè)中使用動(dòng)畫(huà)時(shí)素材的選擇嚴(yán)加把控，符合網(wǎng)頁(yè)的主題，不能顧此失彼，忙東忙西之間失去了網(wǎng)頁(yè)的主題和設(shè)計(jì)目標(biāo)。
2. 在網(wǎng)頁(yè)中添加 FLV 動(dòng)畫(huà)
那么接下來(lái)要談的這種 FLV 動(dòng)畫(huà)就是蠻重要的一種動(dòng)畫(huà)了。 FLV ，是一種叫 Flash Video 視頻的簡(jiǎn)稱，我們?cè)?Dreamweaver CC 2018 中會(huì)常用到的是一種叫 FLV-swf 的視頻。操作步驟也很簡(jiǎn)單，有多簡(jiǎn)單呢？下面就跟隨老師的腳步來(lái)看一看。
其實(shí)簡(jiǎn)單來(lái)說(shuō)，在上一個(gè)知識(shí)點(diǎn)的學(xué)習(xí)中大家就可以掌握這個(gè)這個(gè) FLV 知識(shí)點(diǎn)了，因?yàn)楫吘顾鼈兊牟僮鞣绞绞峭晖耆嗤ǖ摹?/p>
首先，第一步，我們還是新建一個(gè)空白的 HTML 文檔。
第二步，我們還是要在右側(cè)的面板中，選擇一個(gè)叫 FLASH SWF 的選項(xiàng)。然后在接下來(lái)彈出的文件選擇界面選擇你準(zhǔn)備好的視頻，因?yàn)橐曨l的選擇因人而異，素材獲取途徑也十分廣泛，由于版權(quán)的原因，老師也不便在這里展示視頻播放的內(nèi)容。但大家在自己練習(xí)的過(guò)程中可以大膽的選擇素材練習(xí)。只要不對(duì)外發(fā)布，是不涉及版權(quán)問(wèn)題的。下圖是 FLASH SWF 選項(xiàng)按鈕的具體展示。
3. 小結(jié)
本節(jié)內(nèi)容比較集中，操作步驟比較簡(jiǎn)潔，而且易于掌握，需要靈活發(fā)揮的地方只有動(dòng)畫(huà)素材的選擇。大家在這一節(jié)的知識(shí)點(diǎn)里不用太過(guò)緊張，一聽(tīng)到動(dòng)畫(huà)就覺(jué)得是很難的東西。畢竟這里不是讓我們制作一個(gè)視頻，或者動(dòng)畫(huà)，只是如何在 Dreamweaver CC 2018 中使用這個(gè)它們來(lái)制造出動(dòng)畫(huà)的效果。
本節(jié)知識(shí)點(diǎn)的重點(diǎn)是：在網(wǎng)頁(yè)中添加 FLV 動(dòng)畫(huà)；
本節(jié)知識(shí)點(diǎn)的難點(diǎn)是：在網(wǎng)頁(yè)中合理地選擇素材。
2025 imooc.com All Rights Reserved |