1、,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,第9章 動(dòng)態(tài)特效設(shè)計(jì) 重點(diǎn)內(nèi)容： 動(dòng)態(tài)特效的設(shè)計(jì)技術(shù) 行為中動(dòng)作的種類(lèi) 行為動(dòng)畫(huà)的制作 時(shí)間軸動(dòng)畫(huà)的制作,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,一、動(dòng)態(tài)特效的設(shè)計(jì)技術(shù)： 1. 網(wǎng)頁(yè)中的動(dòng)態(tài)元素 動(dòng)態(tài)文本 動(dòng)態(tài)圖像 動(dòng)態(tài)HTML屬性 動(dòng)態(tài)ActiveX、Flash和其他對(duì)象 動(dòng)態(tài)表單對(duì)象,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,一、動(dòng)態(tài)特效的設(shè)計(jì)技術(shù)： 1. 網(wǎng)頁(yè)中的動(dòng)態(tài)元素,動(dòng)態(tài)HTML屬性,Dreamweaver 應(yīng)用技術(shù) Dreamweav

2、er 8 實(shí)訓(xùn)教程講義,一、動(dòng)態(tài)特效的設(shè)計(jì)技術(shù)： 2. JavaScript簡(jiǎn)介 JavaScript是一種描述性語(yǔ)言，可以被嵌入到HTML文件中。通過(guò)使用JavaScript，可以做到響應(yīng)用戶(hù)的需求事件（如表單的輸入），而不用任何的網(wǎng)絡(luò)途徑來(lái)回傳輸資料，所以當(dāng)一位用戶(hù)輸入一項(xiàng)資料時(shí)，它不用經(jīng)過(guò)傳給服務(wù)器端處理，再傳回來(lái)的過(guò)程，而直接可以被客戶(hù)端的應(yīng)用程式所處理。JavaScript和Java很類(lèi)似，但它要比Java簡(jiǎn)單得多，相當(dāng)容易了解。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,一、動(dòng)態(tài)特效的設(shè)計(jì)技術(shù)： 3. 使用Dreamweaver進(jìn)行動(dòng)態(tài)特效設(shè)計(jì) 行

3、為特效 Dreamweaver中的行為是JavaSrcipt的程序庫(kù)，是動(dòng)作和事件的組合行為代碼是客戶(hù)端JavaScript代碼，即它運(yùn)行于瀏覽器中，而不是服務(wù)器上。在將行為附加到頁(yè)元素之后，只要對(duì)該元素發(fā)生了所指定的事件，瀏覽器就會(huì)調(diào)用與該事件關(guān)聯(lián)的動(dòng)作，即JavaScript代碼。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,一、動(dòng)態(tài)特效的設(shè)計(jì)技術(shù)： 3. 使用Dreamweaver進(jìn)行動(dòng)態(tài)特效設(shè)計(jì) 時(shí)間軸特效 利用時(shí)間軸可以通過(guò)在不同的時(shí)間改變層的位置、大小、可見(jiàn)性和疊放順序等來(lái)創(chuàng)建動(dòng)畫(huà)。其原理是將畫(huà)面連起來(lái)播放，產(chǎn)生運(yùn)動(dòng)的錯(cuò)覺(jué)。 時(shí)間軸動(dòng)畫(huà)的基本單位是一

4、個(gè)畫(huà)面，也叫做幀，而其中起關(guān)鍵性作用的、可以影響整個(gè)動(dòng)畫(huà)的幀叫做關(guān)鍵幀。很多幀按照時(shí)間的先后順序連接起來(lái)，就形成了動(dòng)畫(huà)。時(shí)間軸就是用來(lái)排列畫(huà)面的順序的。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,二、行為中動(dòng)作的種類(lèi)： （1）交換圖像 （2）彈出信息 （3）恢復(fù)交換圖像 （4）打開(kāi)瀏覽器窗口 （5）拖動(dòng)層 （6）控制Shockwave或Flash,（7）播放聲音 （8）改變屬性 （9）時(shí)間軸 （10）顯示-隱藏層 （11）顯示彈出式菜單 （12）檢查插件,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,二、行為中動(dòng)作的種類(lèi)： （13

5、）檢查瀏覽器 （14）檢查表單 （15）設(shè)置導(dǎo)航欄圖像 （16）設(shè)置文本 （17）調(diào)用JavaScript （18）跳轉(zhuǎn)菜單,（19）跳轉(zhuǎn)菜單開(kāi)始 （20）轉(zhuǎn)到URL （21）隱藏彈出式菜單 （22）預(yù)先載入圖像,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,三、行為動(dòng)畫(huà)的制作： 1. 應(yīng)用行為 選擇網(wǎng)頁(yè)中要附加行為的對(duì)象（如圖像或鏈接），然后在【行為】面板中單擊【添加行為】按鈕，從彈出菜單中選擇要附加的行為。當(dāng)選擇某個(gè)動(dòng)作時(shí)，將會(huì)彈出一個(gè)相應(yīng)的對(duì)話(huà)框，顯示該動(dòng)作的參數(shù)和說(shuō)明。在對(duì)話(huà)框中進(jìn)行參數(shù)設(shè)置后，單擊【確定】按鈕，即可完成附加行為的操作。,Dreamweav

6、er 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,三、行為與動(dòng)畫(huà)的制作： 1. 應(yīng)用行為,【行為】面板,【添加行為】菜單,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,三、行為動(dòng)畫(huà)的制作： 2. 修改事件 附加行為后，用于觸發(fā)該動(dòng)作的默認(rèn)事件會(huì)顯示在【行為】面板【事件】欄中。在【事件】欄中單擊要修改的事件，然后單擊該事件右側(cè)出現(xiàn)的下拉按鈕，在彈出的下拉列表框中選擇另一個(gè)事件,即可修改觸發(fā)事件。,【事件】下拉列表框,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,三、行為動(dòng)畫(huà)的制作：,彈出窗口,Dreamweaver 應(yīng)用技術(shù) D

7、reamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 1. 【時(shí)間軸】面板 【時(shí)間軸】面板顯示層和圖像隨時(shí)間變化的屬性。選擇【窗口】|【時(shí)間軸】命令即可顯示【時(shí)間軸】面板。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 2. 創(chuàng)建時(shí)間軸動(dòng)畫(huà) 添加對(duì)象到時(shí)間軸 先在頁(yè)面上插入一個(gè)層，并在層中插入要移動(dòng)的元素，再把層移到動(dòng)畫(huà)的起始位置，然后選擇要制作動(dòng)畫(huà)的層，再選擇【修改】|【時(shí)間軸】|【添加對(duì)象到時(shí)間軸】命令，并在彈出的提示對(duì)話(huà)框中單擊【確定】按鈕，一個(gè)動(dòng)畫(huà)條即出現(xiàn)在時(shí)間軸的第一個(gè)通道內(nèi)。單擊動(dòng)畫(huà)條最后一個(gè)關(guān)鍵幀標(biāo)記，然后移動(dòng)層至動(dòng)

8、畫(huà)結(jié)束處，在動(dòng)畫(huà)的起始位置與結(jié)束位置兩點(diǎn)間會(huì)自動(dòng)創(chuàng)建一條直線，即層的運(yùn)動(dòng)軌跡。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 2. 創(chuàng)建時(shí)間軸動(dòng)畫(huà) 記錄層路徑,創(chuàng)建層的復(fù)雜路徑,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 2. 創(chuàng)建時(shí)間軸動(dòng)畫(huà) 記錄層路徑 選擇所需的層后，將該層移動(dòng)到動(dòng)畫(huà)的起始處，并保持該層被選擇狀態(tài)，選擇【修改】|【時(shí)間軸】|【錄制層路徑】命令，然后在頁(yè)面上拖動(dòng)層，即可創(chuàng)建想要的運(yùn)動(dòng)路徑。在動(dòng)畫(huà)停止處釋放鼠標(biāo)鍵，彈出提示用戶(hù)時(shí)間軸面板可以變動(dòng)的層屬性的提示對(duì)話(huà)框，單擊

9、其中的【確定】按鈕，即會(huì)添加一個(gè)動(dòng)畫(huà)條到時(shí)間軸中，同時(shí)也添加了適當(dāng)數(shù)量的關(guān)鍵幀。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 2. 創(chuàng)建時(shí)間軸動(dòng)畫(huà) 記錄層路徑,記錄層路徑,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 3. 修改時(shí)間軸 添加和刪除幀在【時(shí)間軸】面板中，將播放頭放置時(shí)間軸上在要添加或刪除幀的位置，選擇【修改】|【時(shí)間軸】|【添加幀】或【移除幀】命令。 改變關(guān)鍵幀的位置在【時(shí)間軸】面板的動(dòng)畫(huà)條中左右拖動(dòng)要改變位置的關(guān)鍵幀標(biāo)記。 改變動(dòng)畫(huà)的起始時(shí)間選擇與要改變的動(dòng)畫(huà)相應(yīng)的動(dòng)畫(huà)

10、條，左右拖動(dòng)此動(dòng)畫(huà)條。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 3. 修改時(shí)間軸 改變動(dòng)畫(huà)路徑的位置在【時(shí)間軸】面板中選擇要改變路徑位置的動(dòng)畫(huà)條，然后在頁(yè)面上拖動(dòng)該動(dòng)畫(huà)所對(duì)應(yīng)的對(duì)象。 改變動(dòng)畫(huà)的時(shí)間長(zhǎng)度在【時(shí)間軸】面板的動(dòng)畫(huà)條中左右拖動(dòng)結(jié)束幀的標(biāo)記。 改變動(dòng)畫(huà)的播放狀態(tài)在【時(shí)間軸】面板中選擇【自動(dòng)播放】或【循環(huán)】復(fù)選框。,Dreamweaver 應(yīng)用技術(shù) Dreamweaver 8 實(shí)訓(xùn)教程講義,四、時(shí)間軸動(dòng)畫(huà)的制作： 4. 控制時(shí)間軸的行為 在【時(shí)間軸】面板的行為通道中單擊要為其添加行為的幀，再單擊【行為】面板中的【添加行為】按鈕 ，為該幀選擇一個(gè)要執(zhí)行的動(dòng)作。此動(dòng)作出現(xiàn)在【行為】面板中，并且在【事件】欄中顯示觸發(fā)該動(dòng)作的事件，其中還有指定動(dòng)作發(fā)生的幀編號(hào)。同時(shí)，