1、行為和時間線概述1.行為(behaviors)：就是網頁中進行的一系列動作，通過這些動作，可以實現用戶同網頁的交互，也可以通過這些動作使某個任務完成。行為是瀏覽器執行的動作。2.組成：一般來講，一個行為應該由一個事件（event）動作(action)所組成。3. 行為行為=事件事件+動作動作認識事件事件：指特定時間或者由用戶發出的特定的指令，是瀏覽器能夠識別的一些操作。如:單擊鼠標,鼠標經過等認識動作動作：是事先編好的一段JawaScript腳本代碼，利用這些代碼完成特定的任務，如：播放聲音，打開瀏覽器，顯示層，視頻等行為面板刪除行為添加行為用于修改事件的事件列表事件列動作列 行 為 名 稱

2、功 能 Call Java 調用腳本語言 允許使用 Behavior 檢查指定當某些事件發生時，調用相應的 Javascript 腳本代碼 Change Property 改變屬性 改變某個對象的屬性值 Check Browse 檢查瀏覽器 根據用戶使用的瀏覽器類型和版本發送不同的頁面 Check Plugin 檢查插件 根據用戶是否安裝指定插件決定是否將其引導到相應的頁 Control ShockwaveOr Flash 控制動畫 控制動畫播放、停止或跳轉到動畫中的幀 Drag Layer 拖動層 五許用戶進行拖動層的操作 Go tO URL 轉到 URL 跳轉到 URL 所設置的位置 Ju

3、mp Menu 跳轉菜單 通過行為面板編輯跳轉菜單 Jump Menu Go 跳轉菜單 Go 通過行為面板編輯跳轉菜單 Open Browse Window 打開瀏覽器窗口 在新窗口中載入 URL 指定的文檔，同時設置新窗口的屬性 Plav Sound 播放聲音 在網頁中播放聲音 Popup Message 彈出信息對話框 彈出一個對話框，起到提示信息作用 Preload lmages 預載圖像 將那些不會立即顯示但有可能顯示的圖像下載到瀏覽器緩沖區 Set Nav Bar lmage 設置導航條圖像 允許對導航條的圖像進行編輯和控制 Set Text 設置文本 允許向一些對象設置文本 Sho

4、w-Hide Layers 顯示隱藏層 設置層的顯示或隱藏操作 Swap lmages 變換圖像 根據圖像屬性面板中的 scr 的內容變換圖像 Swap lmage Restore 變換圖像還原 將變換的圖像還原為初始圖像 Timeline 時間線 控制時間線的播放、停止等 Validate Form 驗證表單 檢缸表單中的數據，確保用戶輸入數據類型的準確 Dreamweaver的內置行為基本的事件類型1OnAbort NS3、NS4、IE4、IE5 當網頁下載中斷 OnAfterUpdate IE4、IE5 當網頁更新完畢 OnBeforeUpdate IE4、IE5 當一個數據元素變化或將

5、失去焦點 OnBlur NS3、NS4、IE3、IE4、IE5 當指定元素失去焦點 OnBounce IE4、IE5 當一個選取框元素的內容已經到了選取框邊緣時 OnChange NS3、NS4、IE3、IE4、IE5 當網頁元素改變 OnClick NS3、NS4、IE3、IE4、IE5 當鼠標單擊 OnDblClick NS4、IE4、IE5 當鼠標雙擊 OnError NS3、NS4、IE4、IE5 當網頁下載錯誤 OnFocus NS3、NS4、IE3、IE4、IE5 當特定元素成為用戶焦點 OnHelp IE4、IE5 當用戶單擊瀏覽器幫助按鈕 OnKeyDown NS4、IE4、I

6、E5 當按鍵時 OnKeyPress NS4、IE4、IE5 當按鍵并且釋放鍵時 OnKeyUp NS4、IE4、IE5 當釋放按鍵時 OnLoad NS3、NS4、IE3、IE4、IE5 當圖像或頁面完全載入后 基本的事件類型2 事 件 支持的瀏覽器 說 明 OnMouseDown NS4、IE4、IE5 當按下鼠標左鍵些犟放時 OnMOuseMove IE3、IE4、IE5 當鼠標移動到一個元素上時 OnMouseOut NS3、NS4、IE4、IE5 當鼠標琶些苧聲的元素時一 OnMouseOver NS3、NS4、IE3、IE4、IE5 當剛移到節定元素時 OnMOuseUp NS4、

7、IE4、IE5 當按下鼠標廷放時 OnMove NS4 窗口和框架移動時 OnReset NS3、NS4、IE3、IE4、IE5 當表單被重置為缺省狀態時 OnResize NS4、IE4、IE5 當調整瀏覽器窗口和框架尺寸時 OnRowEnter IE4、IE5 當捆綁的數據源的記錄指針改變時 OnRowEx讓 IE4、IE5 當捆綁的數據源的記錄指針將要改變時 OnScr011 1E4、IE5 當用戶使用滾動條或箭頭上下滾動文檔時 OnSelect NS3、NS4、IE3、IE4、IE5 當在文本框中選中文本時 OnSubm讓 NS3、NS4、IE3、IE4、IE5 當用戶提交一份表單時

8、OnUnlOad NS3、NS4、IE3、IE4、IE5 當用戶離開頁面時 常用事件列表On abortIe4,5當網頁下載中斷On click當鼠標單擊On dbl clickIe345當鼠標雙擊On loadie45當圖象或頁面完全載入后On mouse downie45當按下鼠標左鍵尚未釋放時On mouse overie345當鼠標剛移動到特定的元素上時On mouse outie45當鼠標剛移出特定元素時創建行為可以將行為附加給整個文件,也可以附加給文本圖像鏈接層等，對象可以接受什么樣的行為取決于瀏覽器。瀏覽器的版本越高，接受的事件就越多步驟:1選中要附加行為的對象2打開行為面板3單

9、擊 ，點擊“顯示事件屬”-選一個瀏覽器版本4再單擊 ，選一個動作，彈出相應對話框，設置相應的參數。5單擊“確定”按鈕例如：創建顯示隱藏層行為效果（圖片旁邊的說明文字為隱藏的，當鼠標經過圖像時才顯示）步驟如下：1、插入圖象2、插入層 插入面板 / 層按鈕3、設置層屬性 屬性面板 / 相應選項/并設置層屬性為隱藏4、選種圖像，對圖象設置行為:顯示隱藏圖層5、添加事件OnMouseOver6、保存創建顯示隱藏層行為的圖示什么是時間軸(時間線)時間線：它是一條貫穿時間的軸,用于表示網頁存活時間中發生的各種狀態。作用：通過往這個時間線的不同部位放置不同的內容,或是綁定相應的行為,就可以讓對應的時間發生對

10、應的事件,從而實現網頁元素的動態效果優點：它純粹是往文檔中添加javascript代碼來實現網頁的動態效果，不需要任何ActibeX控件，不需要插件，也不需要任何java小程序，具有極好的兼容性。時間軸面板1回放頭回放頭所在的幀每秒播放幀數關鍵幀附加的行為動畫通道（幀控制區）動畫條行為通道返回后退時間線下拉菜單幀數時間軸面板2時間下拉菜單 ：一個文檔中可以包含多條時間線，時間線下拉菜單主要用于控制哪條時間線顯示在時間線面板上。打開該菜單，并選擇不同的時間線。就可以在時間線面板上顯示不同的時間設置。行為通道：在該通道上，顯示時間線上相應時間中所綁定的行為。淺藍色的方塊表示存在行為。幀數：在該通道

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

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

13、可以將動畫播放一幀，連續單擊播放按鈕，可以播放動畫。時間軸面板7每秒幀數：在該文本框中，可以設置動畫播放的速度。你可以直接輸入每秒幀數值。自動播放：選中該復選框，則當網頁被載人之后自動播放動畫。如果清除該復選框，則網頁載人之后，動畫并不播放，你可以利用為對象綁定行為的方法，提供播放動畫的命令。時間軸面板8循環：選中該復選框，則動畫播放完畢后自動重新播放，也即動畫不斷循環播放，直至用戶離開頁面。清除該復選框，則動畫只播放一次。什么叫創建時間線動畫創建時間線動畫，簡而言之，就是首先往動畫通道上添加對象來構建動畫條，然后構建動畫條上的關鍵幀，最后在文檔窗口中設置對象在關鍵幀上的位置，然后播放，從而實

14、現動畫的創作。創建動畫的注意事項利用時間線，你可以在頁面上構建分層的動畫效果。要注意的是，時間線只能移動分層對象，如果你希望移動諸如文本或圖像之類的對象，可以將之放人分層中。利用時間線構建分層動畫的基本方法如下： 1首先指定起始的關鍵幀。首先指定起始的關鍵幀。操作方法：將分層移動到動畫的起始位置。 2選中該要制作動畫的分層。選中該要制作動畫的分層。 3添加動畫條。添加動畫條。方法(1)：打開時間線面板菜單，選擇Add object(添加對象)命令，即可在動畫通道中添加一個對應該分層的動畫條。方法(2)：也可以直接將分層拖動到時間線面板上相應位置來構建動畫條。在動畫條上可以看到分層名稱。利用時間

15、線構建分層動畫的基本方法如下：4改變該對象參與動畫的時間。改變該對象參與動畫的時間。拖動動畫條上最右端的關鍵幀標記，可以改變動畫條的長度，也即改變該對象參與動畫的時間。5構建了動畫結束位置的關鍵幀。構建了動畫結束位置的關鍵幀。單擊動畫條最右端的關鍵幀標記，然后在文檔窗口中將分層移動到動畫結束的位置，這實際上是構建了動畫結束位置的關鍵幀。利用時間線構建分層動畫的基本方法如下：6在動畫條中間位置添加關鍵幀在動畫條中間位置添加關鍵幀.如果希望在動畫條中間位置添加關鍵幀，可以按住Ctrl鍵，然后在動畫條上相應幀位置單擊鼠標，這時會出現新的關鍵幀標記；另外，也可以通過打開面板菜單，選擇Add Keyam

16、es(添加關鍵幀)命令來添加關鍵幀。選中關鍵幀標記，然后從文檔窗口中拖動分層，將之移動到該幀對應的位置上。重復該操作，直至所有的關鍵幀被創建。利用時間線構建分層動畫的基本方法如下：7預覽動畫效果。預覽動畫效果。在Play(播放)按鈕上按住鼠標左鍵，可以在文檔窗口中預覽動畫效果。8選擇播放方式選擇播放方式.根據需要，選中或清除相應的Autoplay(自動播放)和Loop(循巧)復選框。二、錄制分層路徑1 對于簡單的直線路徑，采用前一節介紹的方法，可以很好地構建動畫。然而如果動畫路徑較為復雜，例如是曲線或圓形，則無法通過先設置關鍵幀，再拖動分層到指定位置的方法構建動畫。錄制分層路徑2在Dreamw

17、eaver中提供了以供記錄路徑的方法，允許你直接在文檔窗口中拖動分層，Dreamweaver在后臺記錄你拖動分層的路徑，然后將之應用到時間線上，利用這種方法，可以很容易地構建各種移動方式的分層動畫。 錄制分層路徑操作方法3： 1在文檔窗口中選擇要創建分層動畫的分層。 2將分層移動到動畫的起始位置。 3在時間線面板上，打開面板菜單，選擇RecordPathofLayer(錄制分層路徑)命令。這時就可以開始錄制分層的移動路徑。錄制分層路徑44在文檔窗口中，按照需要的路徑拖動分層。5當希望動畫停止時，可以釋放鼠標，停止移動分層。6在時間線面板上，按住Play(播放)按鈕，就可以預覽動畫效果。例如假設

18、我們希望構建一個地球圍繞太陽旋轉的動畫，可以分別將太陽圖像和地球圖像放人不同的分層，然后選中地球所在分層，啟動RecordPathofLayer命令，再將地球分層圍繞太陽分層拖動一圈，釋放鼠標，即可構建相應的動畫。Dreamweaver會自動將地球分層添加到時間線上，構建一個動畫條，并按照拖動的路徑構建關鍵幀數據。三、利用時間線改變圖像和分層屬性 利用時間線，不僅可以改變分層的位置，還可以改變分層的某些屬性利用時間線，還可以改變圖像的源文件，實現某些特殊效果。 例如：改變分層的大小和可見性改變分層的大小和可見性等可以按照如下方法進行操作： 步驟1從時間線面板上，單擊選中相應的關鍵幀，這時文檔窗

19、口中相應的對象也被選中。 步驟2根據需要改變對象的屬性步驟2,根據需要改變對象的屬性：可以在圖像屬性面板上的Src(源)文本框中輸入新文件的URL地址， 或是單擊文件夾按鈕，從磁盤上選擇新圖像文件。，可以從分層的屬性面板上的Vis(可見性)下拉列表中選擇需要的 可見性設置。根據需要改變對象的屬性可以通過拖動分層的邊框控點來改變大小，也可以直接在分層的屬性面板上輸入需要的寬度和高度值。只有InternetExplorer 40和50才支持對分層大小的改變。根據需要改變對象的屬性：可以直接在分層屬性面板上的Z-Index區域輸入新值。設置完畢預覽效果設置完畢, 可以從時間線面板上，按住Play(播

20、放)按鈕，預覽效果。控制時間線 設計好動畫之后，可以在時間線面板中對時間線進行各種控制，從而實現對動畫的編輯和修改。例如：一、選中動畫條二、改變對象參與動畫的時間三、改變動畫局部的播放速度四、改變動畫起始時間五、改變動畫完整路徑六、添加幀和刪除幀七、對象的添加、刪除和修改八、自動播放和循環播放九、使用多條時間線一、選中動畫條一個動畫條表示個對象在某段時間內的動畫序列。要選中動畫條，你可以按照如下方法進行:二、改變對象參與動畫的時間如果希望使某個對象在動畫中參與的動畫時間變長或變短；，將之左右拖動，這時動畫條長度會發生變化，同時上面所有的關鍵幀標記也按照比例移動相應的位置。如果希望保持所有中間位

21、置的關鍵幀不動，可以按住Ctrl鍵，再拖動結束幀標記。三、改變動畫局部的播放速度要改變某兩個關鍵幀之間動畫的播放時間，也即改變關鍵幀之間的動畫播放速度，在圖1635中，我們改變了起始幀和第二個關鍵幀之間的距離，也即改變了相應序列的播放時間。四、改變動畫起始時間要改變動畫的起始時間，1.可以單擊動畫條選中它，2.然后將之在動畫通道上左右拖動。按住Shift鍵，可以一次選中多個動畫條。 圖1636顯示了改變動畫起始時間的情形。改變后，動畫從原先動畫的第10幀對應的時間開始播放。五、改變動畫完整路徑要將完整的動畫路徑移動位置，1.可以選中整個動畫條，2.然后拖動頁面上的對象。這時Dreamweave

22、r會自動調整所有關鍵幀的位置。六、添加幀和刪除幀 要往時間線上，可以打開面板菜單，再選擇AddFrame(添加幀)命令。 要往時間線上，可以打開面板菜單，再選擇RemoveFrame(刪除幀)、命令。 要往時間線上，可以打開面板菜單，再選擇AddKeyffame(添加關鍵幀)命令，也可以按住Ctrl鍵，然后單擊要添加關鍵幀的位置。 要往時間線上，可以打開面板菜單，再選擇Remove Keyffame(刪除關鍵幀)命令。七、對象的添加、刪除和修改1首先在文檔窗口中選中對象，然后打開時間線面板菜單，選擇AddOject(添加對象)命令，可以，也即創建新的動畫條。如果希望從時間線中，可以首先選中該動畫條，然后打開時間線面板菜單，再選擇Remov