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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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