網(wǎng)頁(yè)創(chuàng)新設(shè)計(jì)中如何添加行為和時(shí)間線

1、網(wǎng)頁(yè)創(chuàng)新設(shè)計(jì)中如何添加行為和時(shí)間線什么是行為行為(behaviors)：就是網(wǎng)頁(yè)中進(jìn)行的一系列動(dòng)作，通過(guò)這些動(dòng)作，可以實(shí)現(xiàn)用戶同網(wǎng)頁(yè)的交互，也可以通過(guò)這些動(dòng)作使某個(gè)任務(wù)完成。行為是瀏覽器執(zhí)行的動(dòng)作。組成：一般來(lái)講，一個(gè)行為應(yīng)該由一個(gè)事件event和一個(gè)動(dòng)作(action)所組成。 行為=事件+動(dòng)作認(rèn)識(shí)事件事件：指特定時(shí)間或者由用戶發(fā)出的特定的指令，是瀏覽器能夠識(shí)別的一些操作。如:單擊鼠標(biāo),鼠標(biāo)經(jīng)過(guò)等認(rèn)識(shí)動(dòng)作動(dòng)作：是事先編好的一段JawaScript腳本代碼，利用這些代碼完成特定的任務(wù)，如：播放聲音，翻開瀏覽器，顯示層，視頻等行為面板刪除行為添加行為用于修改事件的事件列表事件列動(dòng)作列Dreamw

2、eaver的內(nèi)置行為根本的事件類型1根本的事件類型2常用事件列表On abortIe4,5當(dāng)網(wǎng)頁(yè)下載中斷On click當(dāng)鼠標(biāo)單擊On dbl clickIe345當(dāng)鼠標(biāo)雙擊On loadie45當(dāng)圖象或頁(yè)面完全載入后On mouse downie45當(dāng)按下鼠標(biāo)左鍵尚未釋放時(shí)On mouse overie345當(dāng)鼠標(biāo)剛移動(dòng)到特定的元素上時(shí)On mouse outie45當(dāng)鼠標(biāo)剛移出特定元素時(shí)創(chuàng)立行為可以將行為附加給整個(gè)文件,也可以附加給文本圖像鏈接層等，對(duì)象可以接受什么樣的行為取決于瀏覽器。瀏覽器的版本越高，接受的事件就越多步驟:1選中要附加行為的對(duì)象2翻開行為面板3單擊 ，點(diǎn)擊“顯示事件屬-

3、選一個(gè)瀏覽器版本4再單擊 ，選一個(gè)動(dòng)作，彈出相應(yīng)對(duì)話框，設(shè)置相應(yīng)的參數(shù)。5單擊“確定按鈕例如：創(chuàng)立顯示隱藏層行為效果圖片旁邊的說(shuō)明文字為隱藏的，當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí)才顯示步驟如下：1、插入圖象2、插入層 插入面板 / 層按鈕3、設(shè)置層屬性 屬性面板 / 相應(yīng)選項(xiàng)/并設(shè)置層屬性為隱藏4、選種圖像，對(duì)圖象設(shè)置行為:顯示隱藏圖層5、添加事件OnMouseOver6、保存創(chuàng)立顯示隱藏層行為的圖示什么是時(shí)間軸(時(shí)間線)時(shí)間線：它是一條貫穿時(shí)間的軸,用于表示網(wǎng)頁(yè)存活時(shí)間中發(fā)生的各種狀態(tài)。作用：通過(guò)往這個(gè)時(shí)間線的不同部位放置不同的內(nèi)容,或是綁定相應(yīng)的行為,就可以讓對(duì)應(yīng)的時(shí)間發(fā)生對(duì)應(yīng)的事件,從而實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)態(tài)

4、效果優(yōu)點(diǎn)：它純粹是往文檔中添加javascript代碼來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果，不需要任何ActibeX控件，不需要插件，也不需要任何java小程序，具有極好的兼容性。時(shí)間軸面板1回放頭回放頭所在的幀每秒播放幀數(shù)關(guān)鍵幀附加的行為動(dòng)畫通道幀控制區(qū)動(dòng)畫條行為通道返回后退時(shí)間線下拉菜單幀數(shù)時(shí)間軸面板2時(shí)間下拉菜單 ：一個(gè)文檔中可以包含多條時(shí)間線，時(shí)間線下拉菜單主要用于控制哪條時(shí)間線顯示在時(shí)間線面板上。翻開該菜單，并選擇不同的時(shí)間線。就可以在時(shí)間線面板上顯示不同的時(shí)間設(shè)置。行為通道：在該通道上，顯示時(shí)間線上相應(yīng)時(shí)間中所綁定的行為。淺藍(lán)色的方塊表示存在行為。幀數(shù)：在該通道上顯示在時(shí)間線上不同時(shí)間對(duì)應(yīng)的動(dòng)畫幀

5、時(shí)間軸面板3回放頭:回放頭是位于幀數(shù)行上的紅色方塊，它說(shuō)明當(dāng)前的動(dòng)畫放映到哪個(gè)位置，通過(guò)在時(shí)間線面板上拖動(dòng)回放頭，可以在文檔窗口中看到相應(yīng)時(shí)間上動(dòng)畫放映的狀態(tài)。同時(shí)，當(dāng)前回放頭所在的幀位置會(huì)顯示在時(shí)間線面板上方前進(jìn)箭頭按鈕和后退箭頭按鈕之間的文本框中。動(dòng)畫通道：在時(shí)間線面板上有33個(gè)動(dòng)畫通道，分別從1排列至33，表示可以在同一時(shí)間進(jìn)行33路動(dòng)畫設(shè)置。一旦某個(gè)動(dòng)畫通道上存在動(dòng)畫，就會(huì)顯示動(dòng)畫條.動(dòng)畫條：動(dòng)畫條說(shuō)明某個(gè)對(duì)象在某段時(shí)間內(nèi)的持續(xù)狀態(tài)，動(dòng)畫條是真正的動(dòng)畫實(shí)體。其中一些空白圓圈說(shuō)明關(guān)鍵幀。在一個(gè)動(dòng)畫通道行上可以包含多個(gè)動(dòng)畫條，用于表示多個(gè)不同的對(duì)象不同的動(dòng)畫條在同一幀內(nèi)不能控制相同的對(duì)象。

6、時(shí)間軸面板4時(shí)間軸面板5關(guān)鍵幀：如果你進(jìn)行過(guò)動(dòng)畫設(shè)計(jì)，就很容易理解什么是關(guān)鍵幀，簡(jiǎn)單地說(shuō)，關(guān)鍵幀就是由你為對(duì)象所指定的在某一確定時(shí)刻(幀)上的狀態(tài)。 Dreamweaver會(huì)自動(dòng)根據(jù)兩個(gè)關(guān)鍵幀的位置計(jì)算對(duì)象在其間的動(dòng)作。例如，要設(shè)計(jì)對(duì)象直線移動(dòng)，只需要定義開始和結(jié)束的位置，這兩個(gè)位置就是關(guān)鍵幀，dreamweaver會(huì)根據(jù)直線的開始和結(jié)束位置自動(dòng)計(jì)算中間移動(dòng)狀態(tài)。在動(dòng)畫條上，“關(guān)鍵幀以一個(gè)圓圈的形式表示。時(shí)間軸面板6返回：?jiǎn)螕粼摪粹o，可以回放頭返回到動(dòng)畫的開始位置。后退：?jiǎn)螕粼摪粹o，可以將動(dòng)畫后退一幀，連續(xù)單擊后退按鈕，可以向后播放動(dòng)畫。播放：?jiǎn)螕粼摪粹o，可以將動(dòng)畫播放一幀，連續(xù)單擊播放按鈕，

7、可以播放動(dòng)畫。時(shí)間軸面板7每秒幀數(shù)：在該文本框中，可以設(shè)置動(dòng)畫播放的速度。你可以直接輸入每秒幀數(shù)值。自動(dòng)播放：選中該復(fù)選框，那么當(dāng)網(wǎng)頁(yè)被載人之后自動(dòng)播放動(dòng)畫。如果去除該復(fù)選框，那么網(wǎng)頁(yè)載人之后，動(dòng)畫并不播放，你可以利用為對(duì)象綁定行為的方法，提供播放動(dòng)畫的命令。時(shí)間軸面板8循環(huán)：選中該復(fù)選框，那么動(dòng)畫播放完畢后自動(dòng)重新播放，也即動(dòng)畫不斷循環(huán)播放，直至用戶離開頁(yè)面。去除該復(fù)選框，那么動(dòng)畫只播放一次。什么叫創(chuàng)立時(shí)間線動(dòng)畫創(chuàng)立時(shí)間線動(dòng)畫，簡(jiǎn)而言之，就是首先往動(dòng)畫通道上添加對(duì)象來(lái)構(gòu)建動(dòng)畫條，然后構(gòu)建動(dòng)畫條上的關(guān)鍵幀，最后在文檔窗口中設(shè)置對(duì)象在關(guān)鍵幀上的位置，然后播放，從而實(shí)現(xiàn)動(dòng)畫的創(chuàng)作。創(chuàng)立動(dòng)畫的本卷須

8、知利用時(shí)間線，你可以在頁(yè)面上構(gòu)建分層的動(dòng)畫效果。要注意的是，時(shí)間線只能移動(dòng)分層對(duì)象，如果你希望移動(dòng)諸如文本或圖像之類的對(duì)象，可以將之放人分層中。利用時(shí)間線構(gòu)建分層動(dòng)畫的根本方法如下： 1首先指定起始的關(guān)鍵幀。操作方法：將分層移動(dòng)到動(dòng)畫的起始位置。 2選中該要制作動(dòng)畫的分層。 3添加動(dòng)畫條。方法(1)：翻開時(shí)間線面板菜單，選擇Add object(添加對(duì)象)命令，即可在動(dòng)畫通道中添加一個(gè)對(duì)應(yīng)該分層的動(dòng)畫條。方法(2)：也可以直接將分層拖動(dòng)到時(shí)間線面板上相應(yīng)位置來(lái)構(gòu)建動(dòng)畫條。在動(dòng)畫條上可以看到分層名稱。利用時(shí)間線構(gòu)建分層動(dòng)畫的根本方法如下：4改變?cè)搶?duì)象參與動(dòng)畫的時(shí)間。拖動(dòng)動(dòng)畫條上最右端的關(guān)鍵幀標(biāo)記

9、，可以改變動(dòng)畫條的長(zhǎng)度，也即改變?cè)搶?duì)象參與動(dòng)畫的時(shí)間。5構(gòu)建了動(dòng)畫結(jié)束位置的關(guān)鍵幀。單擊動(dòng)畫條最右端的關(guān)鍵幀標(biāo)記，然后在文檔窗口中將分層移動(dòng)到動(dòng)畫結(jié)束的位置，這實(shí)際上是構(gòu)建了動(dòng)畫結(jié)束位置的關(guān)鍵幀。利用時(shí)間線構(gòu)建分層動(dòng)畫的根本方法如下：6在動(dòng)畫條中間位置添加關(guān)鍵幀.如果希望在動(dòng)畫條中間位置添加關(guān)鍵幀，可以按住Ctrl鍵，然后在動(dòng)畫條上相應(yīng)幀位置單擊鼠標(biāo)，這時(shí)會(huì)出現(xiàn)新的關(guān)鍵幀標(biāo)記；另外，也可以通過(guò)翻開面板菜單，選擇Add Keyames(添加關(guān)鍵幀)命令來(lái)添加關(guān)鍵幀。選中關(guān)鍵幀標(biāo)記，然后從文檔窗口中拖動(dòng)分層，將之移動(dòng)到該幀對(duì)應(yīng)的位置上。重復(fù)該操作，直至所有的關(guān)鍵幀被創(chuàng)立。利用時(shí)間線構(gòu)建分層動(dòng)畫的根

10、本方法如下：7預(yù)覽動(dòng)畫效果。在Play(播放)按鈕上按住鼠標(biāo)左鍵，可以在文檔窗口中預(yù)覽動(dòng)畫效果。8選擇播放方式.根據(jù)需要，選中或去除相應(yīng)的Autoplay(自動(dòng)播放)和Loop(循巧)復(fù)選框。二、錄制分層路徑1 對(duì)于簡(jiǎn)單的直線路徑，采用前一節(jié)介紹的方法，可以很好地構(gòu)建動(dòng)畫。然而如果動(dòng)畫路徑較為復(fù)雜，例如是曲線或圓形，那么無(wú)法通過(guò)先設(shè)置關(guān)鍵幀，再拖動(dòng)分層到指定位置的方法構(gòu)建動(dòng)畫。錄制分層路徑2在Dreamweaver中提供了以供記錄路徑的方法，允許你直接在文檔窗口中拖動(dòng)分層，Dreamweaver在后臺(tái)記錄你拖動(dòng)分層的路徑，然后將之應(yīng)用到時(shí)間線上，利用這種方法，可以很容易地構(gòu)建各種移動(dòng)方式的分層

11、動(dòng)畫。 錄制分層路徑操作方法3： 1在文檔窗口中選擇要?jiǎng)?chuàng)立分層動(dòng)畫的分層。 2將分層移動(dòng)到動(dòng)畫的起始位置。 3在時(shí)間線面板上，翻開面板菜單，選擇RecordPathofLayer(錄制分層路徑)命令。這時(shí)就可以開始錄制分層的移動(dòng)路徑。錄制分層路徑44在文檔窗口中，按照需要的路徑拖動(dòng)分層。5當(dāng)希望動(dòng)畫停止時(shí)，可以釋放鼠標(biāo)，停止移動(dòng)分層。6在時(shí)間線面板上，按住Play(播放)按鈕，就可以預(yù)覽動(dòng)畫效果。例如假設(shè)我們希望構(gòu)建一個(gè)地球圍繞太陽(yáng)旋轉(zhuǎn)的動(dòng)畫，可以分別將太陽(yáng)圖像和地球圖像放人不同的分層，然后選中地球所在分層，啟動(dòng)RecordPathofLayer命令，再將地球分層圍繞太陽(yáng)分層拖動(dòng)一圈，釋放鼠標(biāo)

12、，即可構(gòu)建相應(yīng)的動(dòng)畫。Dreamweaver會(huì)自動(dòng)將地球分層添加到時(shí)間線上，構(gòu)建一個(gè)動(dòng)畫條，并按照拖動(dòng)的路徑構(gòu)建關(guān)鍵幀數(shù)據(jù)。三、利用時(shí)間線改變圖像和分層屬性 利用時(shí)間線，不僅可以改變分層的位置，還可以改變分層的某些屬性利用時(shí)間線，還可以改變圖像的源文件，實(shí)現(xiàn)某些特殊效果。 例如：改變分層的大小和可見性等可以按照如下方法進(jìn)行操作： 步驟1從時(shí)間線面板上，單擊選中相應(yīng)的關(guān)鍵幀，這時(shí)文檔窗口中相應(yīng)的對(duì)象也被選中。 步驟2根據(jù)需要改變對(duì)象的屬性步驟2,根據(jù)需要改變對(duì)象的屬性：(1)要改變圖像源文件，可以在圖像屬性面板上的Src(源)文本框中輸入新文件的URL地址， 或是單擊文件夾按鈕，從磁盤上選擇新圖

13、像文件。(2)要改變分層的可見性，可以從分層的屬性面板上的Vis(可見性)下拉列表中選擇需要的 可見性設(shè)置。根據(jù)需要改變對(duì)象的屬性(3)要改變分層的大小，可以通過(guò)拖動(dòng)分層的邊框控點(diǎn)來(lái)改變大小，也可以直接在分層的屬性面板上輸入需要的寬度和高度值。要注意的是，只有InternetExplorer 40和50才支持對(duì)分層大小的改變。根據(jù)需要改變對(duì)象的屬性：(4)要改變分層的重疊順序，可以直接在分層屬性面板上的Z-Index區(qū)域輸入新值。設(shè)置完畢預(yù)覽效果設(shè)置完畢, 可以從時(shí)間線面板上，按住Play(播放)按鈕，預(yù)覽效果?？刂茣r(shí)間線 設(shè)計(jì)好動(dòng)畫之后，可以在時(shí)間線面板中對(duì)時(shí)間線進(jìn)行各種控制，從而實(shí)現(xiàn)對(duì)動(dòng)畫

14、的編輯和修改。例如：一、選中動(dòng)畫條二、改變對(duì)象參與動(dòng)畫的時(shí)間三、改變動(dòng)畫局部的播放速度四、改變動(dòng)畫起始時(shí)間五、改變動(dòng)畫完整路徑六、添加幀和刪除幀七、對(duì)象的添加、刪除和修改八、自動(dòng)播放和循環(huán)播放九、使用多條時(shí)間線一、選中動(dòng)畫條一個(gè)動(dòng)畫條表示個(gè)對(duì)象在某段時(shí)間內(nèi)的動(dòng)畫序列。要選中動(dòng)畫條，你可以按照如下方法進(jìn)行:單擊相應(yīng)的動(dòng)畫條，可以選中一個(gè)動(dòng)畫條。要選中多個(gè)動(dòng)畫序列，可以按住Shift鍵，再單擊相應(yīng)的動(dòng)畫條。二、改變對(duì)象參與動(dòng)畫的時(shí)間如果希望使某個(gè)對(duì)象在動(dòng)畫中參與的動(dòng)畫時(shí)間變長(zhǎng)或變短；可以拖動(dòng)該對(duì)象對(duì)應(yīng)動(dòng)畫條最右端的關(guān)鍵幀(也即結(jié)束幀)標(biāo)記，將之左右拖動(dòng)，這時(shí)動(dòng)畫條長(zhǎng)度會(huì)發(fā)生變化，同時(shí)上面所有的關(guān)鍵

15、幀標(biāo)記也按照比例移動(dòng)相應(yīng)的位置。如果希望保持所有中間位置的關(guān)鍵幀不動(dòng)，可以按住Ctrl鍵，再拖動(dòng)結(jié)束幀標(biāo)記。三、改變動(dòng)畫局部的播放速度要改變某兩個(gè)關(guān)鍵幀之間動(dòng)畫的播放時(shí)間，也即改變關(guān)鍵幀之間的動(dòng)畫播放速度，可以在動(dòng)畫條上直接左右拖動(dòng)相應(yīng)關(guān)鍵幀標(biāo)記。在圖1635中，我們改變了起始幀和第二個(gè)關(guān)鍵幀之間的距離，也即改變了相應(yīng)序列的播放時(shí)間。四、改變動(dòng)畫起始時(shí)間要改變動(dòng)畫的起始時(shí)間，可以單擊動(dòng)畫條選中它，然后將之在動(dòng)畫通道上左右拖動(dòng)。按住Shift鍵，可以一次選中多個(gè)動(dòng)畫條。 圖1636顯示了改變動(dòng)畫起始時(shí)間的情形。改變后，動(dòng)畫從原先動(dòng)畫的第10幀對(duì)應(yīng)的時(shí)間開始播放。五、改變動(dòng)畫完整路徑要將完整的動(dòng)畫

16、路徑移動(dòng)位置，可以選中整個(gè)動(dòng)畫條，然后拖動(dòng)頁(yè)面上的對(duì)象。這時(shí)Dreamweaver會(huì)自動(dòng)調(diào)整所有關(guān)鍵幀的位置。選中整個(gè)動(dòng)畫條后進(jìn)行的任何改變都會(huì)影響所有的關(guān)鍵幀。六、添加幀和刪除幀 要往時(shí)間線上添加幀，可以翻開面板菜單，再選擇AddFrame(添加幀)命令。 要往時(shí)間線上刪除幀，可以翻開面板菜單，再選擇RemoveFrame(刪除幀)、命令。 要往時(shí)間線上添加關(guān)鍵幀，可以翻開面板菜單，再選擇AddKeyffame(添加關(guān)鍵幀)命令，也可以按住Ctrl鍵，然后單擊要添加關(guān)鍵幀的位置。 要往時(shí)間線上刪除關(guān)鍵幀，可以翻開面板菜單，再選擇Remove Keyffame(刪除關(guān)鍵幀)命令。七、對(duì)象的添加

17、、刪除和修改1首先在文檔窗口中選中對(duì)象，然后翻開時(shí)間線面板菜單，選擇AddOject(添加對(duì)象)命令，可以添加對(duì)象，也即創(chuàng)立新的動(dòng)畫條。如果希望從時(shí)間線中刪除對(duì)象，可以首先選中該動(dòng)畫條，然后翻開時(shí)間線面板菜單，再選擇RemoveObiect(刪除對(duì)象)命令，這時(shí)動(dòng)畫條會(huì)消失。七、對(duì)象的添加、刪除和修改2如果希望改變動(dòng)畫條對(duì)應(yīng)的對(duì)象，可以首先選中該動(dòng)畫條，然后翻開時(shí)間線面板菜單，再選擇Change O均ect(改變對(duì)象)命令，這時(shí)會(huì)翻開如圖1637所示的對(duì)話框，提示你選擇新對(duì)象。選擇新對(duì)象，按下OK按鈕，確定操作，即可改變動(dòng)畫條對(duì)應(yīng)的對(duì)象。八、自動(dòng)播放和循環(huán)播放選中時(shí)間線面板上的Autoplay(自動(dòng)播放)按鈕，那么在頁(yè)面被載入后自動(dòng)播放動(dòng)畫。該操作實(shí)際上是為頁(yè)面綁定了一個(gè)進(jìn)行自動(dòng)播放動(dòng)畫的行為，你可以在行為通道上看到它。 選中時(shí)間線面板上的Loop(循環(huán))按鈕，那么在頁(yè)面被載人后，一旦動(dòng)畫被播放將循環(huán)不止。該操作實(shí)際上是為頁(yè)面綁定了一個(gè)進(jìn)行循環(huán)播放動(dòng)畫的行為，你可以從行為通道上看到它。 選中該標(biāo)記，然后單擊行為面板上的“+按鈕，翻開動(dòng)作菜單，然后選擇相應(yīng)的命令，即可編輯循環(huán)次數(shù)。九、使用多條時(shí)間線1一條時(shí)間線可以控制33條動(dòng)畫通道，這好比控制33個(gè)分鏡頭。然而有時(shí)候當(dāng)動(dòng)畫比較復(fù)雜時(shí)時(shí)間線面板上會(huì)橫七豎八排滿了動(dòng)畫條，顯得煩瑣復(fù)