《網(wǎng)頁(yè)設(shè)計(jì)實(shí)用教程》第07章

《《網(wǎng)頁(yè)設(shè)計(jì)實(shí)用教程》第07章》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、21世紀(jì)計(jì)算機(jī)系列教程網(wǎng)頁(yè)設(shè)計(jì)實(shí)用教程電子教案退出第7章DreamweaverMX時(shí)間軸例子見(jiàn)：第七章網(wǎng)校地址導(dǎo)航圖.htm學(xué)習(xí)目的：時(shí)間軸面板時(shí)間軸的應(yīng)用關(guān)鍵幀的應(yīng)用錄制層路徑編輯時(shí)間軸動(dòng)畫(huà)用時(shí)間軸改變層屬性本章概述：本章任務(wù)是設(shè)計(jì)一個(gè)具有動(dòng)態(tài)效果的網(wǎng)頁(yè)，表現(xiàn)在一個(gè)網(wǎng)校地址的導(dǎo)航圖上。設(shè)計(jì)動(dòng)態(tài)地址導(dǎo)航圖，利用到了時(shí)間軸的知識(shí)，時(shí)間軸概念是DreamweaverMX網(wǎng)頁(yè)設(shè)計(jì)中的又一道特色菜，利用它與層和行為面板結(jié)合，可以設(shè)計(jì)出許多具有精彩特技效果的網(wǎng)頁(yè)來(lái)。本章結(jié)合實(shí)例，對(duì)時(shí)間軸的概念及應(yīng)用作了詳細(xì)介

2、紹。通過(guò)本講的學(xué)習(xí)，讀者可具備制作具有動(dòng)態(tài)效果網(wǎng)頁(yè)的能力。本小節(jié)將利用時(shí)間軸，來(lái)制作一個(gè)網(wǎng)校動(dòng)態(tài)地址導(dǎo)航圖，網(wǎng)頁(yè)完成后的效果如圖7-1所示。網(wǎng)頁(yè)中的動(dòng)態(tài)地址導(dǎo)航圖由一個(gè)動(dòng)畫(huà)卡通向?qū)Ш鸵环貓D構(gòu)成，從起點(diǎn)站到目的地，沿途要經(jīng)過(guò)一些站點(diǎn)，每經(jīng)過(guò)一個(gè)站點(diǎn)時(shí)，卡通向?qū)бＡ羝蹋瑫r(shí)會(huì)彈出一段文字，看上去就像是向?qū)г趯?duì)每處停留地進(jìn)行解說(shuō)一樣，通過(guò)該網(wǎng)頁(yè)，瀏覽者能對(duì)通往目的地的路徑留下深刻的印象。整個(gè)網(wǎng)校地址導(dǎo)航圖的制作可分為素材準(zhǔn)備、設(shè)計(jì)層、設(shè)計(jì)動(dòng)畫(huà)三個(gè)階段，下面分別予以介紹。圖7-1網(wǎng)校動(dòng)態(tài)地址導(dǎo)航圖7.

3、1制作一個(gè)動(dòng)態(tài)地址導(dǎo)航圖1.網(wǎng)頁(yè)設(shè)計(jì)素材準(zhǔn)備網(wǎng)校圖片、動(dòng)畫(huà)向?qū)D片、地圖圖7-2網(wǎng)頁(yè)設(shè)計(jì)素材2.設(shè)計(jì)層圖7-3圖7-42.設(shè)計(jì)層-2圖7-5圖7-63.設(shè)計(jì)動(dòng)畫(huà)圖7-7提示：按（Ctrl+Alt+Shift+T），可以將時(shí)間軸控制面板打開(kāi)。3.設(shè)計(jì)動(dòng)畫(huà)-2圖7-7圖7-8圖7-93.設(shè)計(jì)動(dòng)畫(huà)-3圖7-11圖7-103.設(shè)計(jì)動(dòng)畫(huà)-4圖7-13圖7-123.設(shè)計(jì)動(dòng)畫(huà)-5圖7-147.2知識(shí)要點(diǎn)上一小節(jié)，介紹了一個(gè)網(wǎng)校地址動(dòng)態(tài)導(dǎo)航的網(wǎng)頁(yè)的制作過(guò)程，在設(shè)計(jì)過(guò)程中，可以看到，網(wǎng)頁(yè)的動(dòng)態(tài)效果完全依賴于Dream

4、weaverMX時(shí)間軸來(lái)實(shí)現(xiàn)。本小節(jié)將對(duì)時(shí)間軸在網(wǎng)頁(yè)設(shè)計(jì)中的一些知識(shí)要點(diǎn)進(jìn)行介紹時(shí)間軸是DreamweaverMX軟件優(yōu)越于其他網(wǎng)頁(yè)設(shè)計(jì)軟件的一個(gè)重要表現(xiàn)，用時(shí)間軸做動(dòng)畫(huà)可以滿頁(yè)飛，動(dòng)畫(huà)的實(shí)現(xiàn)主要是通過(guò)幕后JavaScript語(yǔ)句來(lái)完成的，設(shè)計(jì)者在設(shè)計(jì)時(shí)不必懂得JavaScript，DreamweaverMX會(huì)自動(dòng)轉(zhuǎn)化，依賴時(shí)間軸設(shè)計(jì)的動(dòng)畫(huà)又是建立在圖層基礎(chǔ)上的，可以說(shuō)利用時(shí)間軸設(shè)計(jì)動(dòng)畫(huà)效果是圖層的應(yīng)用體現(xiàn)。7.2.1時(shí)間軸控制面板時(shí)間軸選擇框回退后退前進(jìn)FPS：動(dòng)畫(huà)播放速度自動(dòng)播放：在瀏覽器中打開(kāi)

5、正確看到時(shí)間軸動(dòng)畫(huà)循環(huán)播放：實(shí)現(xiàn)動(dòng)畫(huà)循環(huán)播放行為通道：（Behavior）B標(biāo)志時(shí)間軸動(dòng)畫(huà)通道:時(shí)間軸面板上的動(dòng)畫(huà)通道一共有（32）條。播放頭動(dòng)畫(huà)條關(guān)鍵幀操作菜單圖7-15時(shí)間軸控制面板關(guān)鍵幀動(dòng)畫(huà)條播放頭時(shí)間軸選擇框回退后退前進(jìn)幀數(shù)自動(dòng)播放行為通道循環(huán)播放動(dòng)畫(huà)通道時(shí)間軸操作菜單7.2.1時(shí)間軸控制面板圖7-15時(shí)間軸控制面板1.關(guān)鍵幀的應(yīng)用本章第一節(jié)制作的動(dòng)態(tài)效果網(wǎng)頁(yè)中，圖層在移動(dòng)時(shí)，全部是直線運(yùn)動(dòng)，第七章一只小鳥(niǎo)直線飛行-關(guān)鍵幀的應(yīng)用.htm如果要使用層的運(yùn)動(dòng)變?yōu)榍€，就需要利用到關(guān)鍵幀的知識(shí)。第

6、七章一只小鳥(niǎo)曲線飛行-關(guān)鍵幀的應(yīng)用.htm7.2.2時(shí)間軸的基本應(yīng)用注意：創(chuàng)建時(shí)間軸動(dòng)畫(huà)有幾種方法：1、拖動(dòng)2、修改?時(shí)間軸?添加對(duì)象到時(shí)間軸3、單擊時(shí)間軸面板按鈕“?”?添加對(duì)象圖7-16圖7-17單擊時(shí)間軸面板按鈕“?”彈出菜單：增加關(guān)鍵幀（在第7幀）圖7-18圖7-192.錄制層路徑按照上一例的方法來(lái)創(chuàng)建較為復(fù)雜的運(yùn)動(dòng)，顯然會(huì)花費(fèi)許多時(shí)間。Dreamweaver提供了一種叫“錄制層路徑”的高效而簡(jiǎn)單的方法，可以讓網(wǎng)頁(yè)設(shè)計(jì)者快速完成復(fù)雜的動(dòng)畫(huà)設(shè)計(jì)。例子見(jiàn)：第七章一只飛翔的小鳥(niǎo)-錄制層路徑修改?時(shí)

7、間軸?錄制層路徑圖7-20圖7-21圖7-22自動(dòng)增加關(guān)鍵幀3.編輯時(shí)間軸動(dòng)畫(huà)編輯時(shí)間軸動(dòng)畫(huà)主要有以下幾項(xiàng)：增加或縮短動(dòng)畫(huà)播放時(shí)間：在時(shí)間軸控制面板中，通過(guò)拖動(dòng)動(dòng)畫(huà)條的第1關(guān)鍵幀或最后一個(gè)關(guān)鍵幀，可以改變整個(gè)動(dòng)畫(huà)播放時(shí)間。在拖動(dòng)的過(guò)程中，所有的關(guān)鍵幀將自動(dòng)按比例發(fā)生位移。例如：這里將一動(dòng)畫(huà)條的關(guān)鍵幀由250幀，左移到230幀。如圖7-23所示是未改變時(shí)間長(zhǎng)度時(shí)，如圖7-24所示是縮短時(shí)間長(zhǎng)度后。不想讓各關(guān)鍵幀的位置隨總長(zhǎng)度的變化而變化，按【Ctrl】鍵即可，這樣只是被拖動(dòng)的關(guān)鍵幀的長(zhǎng)度發(fā)生了改變。如

8、圖7-25所示，只是最后一幀的長(zhǎng)度發(fā)生的改變。圖7-23圖7-24圖7-25按（Ctrl）鍵，在拖動(dòng)動(dòng)畫(huà)條的最后一個(gè)關(guān)鍵幀時(shí)，只有最后一幀的長(zhǎng)度發(fā)生的改變。編輯時(shí)間軸動(dòng)畫(huà)-2改變動(dòng)畫(huà)的開(kāi)始時(shí)間：只要選中一個(gè)或多個(gè)動(dòng)畫(huà)條，向左或向右移動(dòng)即可。按下【Shift】鍵可以同時(shí)選中多個(gè)動(dòng)畫(huà)條。修改關(guān)鍵幀：選取要修改的關(guān)鍵幀，左移或右移，可以改變關(guān)鍵幀發(fā)生的時(shí)間，而不會(huì)影響其他關(guān)鍵幀在時(shí)間軸上的位置。添加或刪除幀：當(dāng)動(dòng)畫(huà)設(shè)計(jì)完成后，需要調(diào)整動(dòng)畫(huà)局部的時(shí)間關(guān)系。在時(shí)間軸面板要添加或