第8章 行為與時間軸

1、網(wǎng)頁制作基礎(chǔ)教程網(wǎng)頁制作基礎(chǔ)教程（Dreamweaver 8.0Dreamweaver 8.0）電子教案電子教案ISBN7121028824本章重點：本章重點：n行為是由事件和動作兩部分組成行為是由事件和動作兩部分組成n如何在網(wǎng)頁中添加行為如何在網(wǎng)頁中添加行為n如何為如何為“事件事件”選擇合適的選擇合適的“動動作作”。 8.1 8.1 “炫炫”網(wǎng)頁網(wǎng)頁軟件下載之軟件下載之家家 8.8.2 2行為的概述行為的概述8.8.3 3 使用【行為】面板使用【行為】面板8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.5 8.5 時間軸概述時間軸概述8.6 8.6 實戰(zhàn)演練實戰(zhàn)演練8.8.1 1

2、 “ “炫炫”網(wǎng)頁網(wǎng)頁軟件下載之家軟件下載之家 8.1.1 案例綜述案例綜述本例我們將在原有頁面的基礎(chǔ)上，添加本例我們將在原有頁面的基礎(chǔ)上，添加Dreamweaver 8Dreamweaver 8所提供的行為，并通過時間軸所提供的行為，并通過時間軸在頁面中添加動畫。在頁面中添加動畫。 8.8.1 1 “ “炫炫”網(wǎng)頁網(wǎng)頁軟件下載之家軟件下載之家 8.1.2 案例分析案例分析添加行為的時候要遵循添加行為的時候要遵循3 3個步驟：個步驟： n選擇對象。選擇對象。n添加動作。添加動作。n調(diào)整事件。調(diào)整事件。 8.8.1 1 “ “炫炫”網(wǎng)頁網(wǎng)頁軟件下載之家軟件下載之家 8.1.3 實現(xiàn)步驟實現(xiàn)步驟1

3、.1.準備頁面準備頁面 。2.2.設(shè)置設(shè)置“彈出信息彈出信息” ” 3.3.打開瀏覽器窗口打開瀏覽器窗口 4.4.設(shè)置狀態(tài)欄文本設(shè)置狀態(tài)欄文本 5.5.設(shè)置文本域文本設(shè)置文本域文本 6.6.創(chuàng)建圖像交換功能創(chuàng)建圖像交換功能 7.7.用時間軸控制圖片替換用時間軸控制圖片替換 8.8.將層設(shè)置為可拖動將層設(shè)置為可拖動9.9.創(chuàng)建小鳥飛翔動畫創(chuàng)建小鳥飛翔動畫 8.8.2 2行為的概述行為的概述 行為是動作和觸發(fā)該動作的事件的結(jié)合體行為是動作和觸發(fā)該動作的事件的結(jié)合體1.事件事件n事件是觸發(fā)動態(tài)效果的原因，它可以被附加在各事件是觸發(fā)動態(tài)效果的原因，它可以被附加在各種頁面元素上，也可以被附加到種頁面元素

4、上，也可以被附加到HTMLHTML標記中。標記中。 2.動作動作 n動作其實是一段網(wǎng)頁上的動作其實是一段網(wǎng)頁上的JavaScriptJavaScript代碼，這些代碼，這些代碼在特定事件被激發(fā)時執(zhí)行，從而實現(xiàn)訪問者代碼在特定事件被激發(fā)時執(zhí)行，從而實現(xiàn)訪問者與與WebWeb頁進行交互，以多種方式更改頁面或執(zhí)行頁進行交互，以多種方式更改頁面或執(zhí)行某些任務(wù)。某些任務(wù)。8.8.2 2行為的概述行為的概述 3.3.事件與動作的關(guān)系事件與動作的關(guān)系 n將將“事件事件”和和“動作動作”組合起來就構(gòu)成了組合起來就構(gòu)成了“行行為為”。在將行為附加到頁面元素之后，只要對。在將行為附加到頁面元素之后，只要對該元素觸

5、發(fā)了所指定的事件，瀏覽器就會調(diào)用該元素觸發(fā)了所指定的事件，瀏覽器就會調(diào)用與該事件關(guān)聯(lián)的動作（與該事件關(guān)聯(lián)的動作（JavaScriptJavaScript）。）。 8.8.3 3 使用【行為】面板使用【行為】面板 選擇【窗口】【行為】命令，打開【行為】面板選擇【窗口】【行為】命令，打開【行為】面板 顯示設(shè)置事件 顯示所有事件 添加或刪除動作 上下移動行為 8.8.3 3 使用【行為】面板使用【行為】面板 n【顯示設(shè)置事件】顯示設(shè)置事件】僅顯示附加到當前文檔的那些僅顯示附加到當前文檔的那些事件事件 n【顯示所有事件】【顯示所有事件】按字母降序顯示所有事件按字母降序顯示所有事件 n【添加行為】【添加

6、行為】在出現(xiàn)的動作菜單中在出現(xiàn)的動作菜單中, , 選擇一個動選擇一個動作，并指定該動作的相關(guān)參數(shù)，即可添加行為。作，并指定該動作的相關(guān)參數(shù)，即可添加行為。n【顯示事件】【顯示事件】在此菜單中選擇確定哪些事件將顯在此菜單中選擇確定哪些事件將顯示在示在“事件事件”彈出式菜單中彈出式菜單中 n【刪除事件】刪除事件】單擊單擊“刪除事件刪除事件”按鈕，可以從行按鈕，可以從行為列表中刪除所選的事件和動作。為列表中刪除所選的事件和動作。n【向上移動】和【向下移動】【向上移動】和【向下移動】將特定事件的所選將特定事件的所選動作在行為列表中向上或向下移動。給定事件的動動作在行為列表中向上或向下移動。給定事件的動

7、作是以選定的順序執(zhí)行的。作是以選定的順序執(zhí)行的。8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為添加行為：添加行為：通過通過“行為行為”面板上的面板上的“添加行為添加行為”按按鈕，可以將行為附加到整個文檔，也可以附加到鏈鈕，可以將行為附加到整個文檔，也可以附加到鏈接、圖像、表單元素或多種其他接、圖像、表單元素或多種其他HTMLHTML元素中的任何元素中的任何一種。一種。事件的選擇事件的選擇：在添加行為后，當單擊行為列表框中在添加行為后，當單擊行為列表框中所選事件名稱旁邊的箭頭按鈕時，會出現(xiàn)一個下拉所選事件名稱旁邊的箭頭按鈕時，會出現(xiàn)一個下拉菜單，其中包含可以觸發(fā)該動作的所有事件。菜單，

8、其中包含可以觸發(fā)該動作的所有事件。8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.1 8.4.1 彈出信息彈出信息使用【彈出信息】動作將顯示一個帶有指定消息的使用【彈出信息】動作將顯示一個帶有指定消息的警告窗口警告窗口 使用【彈出信息】動作的操作步驟如下：使用【彈出信息】動作的操作步驟如下：1.1.選擇對象并打開行為面板。選擇對象并打開行為面板。2.2.單擊按鈕，并從單擊按鈕，并從“添加動作添加動作”菜單中選擇【彈出信息】。菜單中選擇【彈出信息】。打開打開“彈出信息彈出信息”對話框。對話框。3.3.在【消息】域中輸入在信息框中將要顯示的信息文字。在【消息】域中輸入在信息框中將要

9、顯示的信息文字。4.4.設(shè)置完成后單擊【確定】按鈕。設(shè)置完成后單擊【確定】按鈕。5.5.檢查【行為】面板中默認事件是否是所需的事件檢查【行為】面板中默認事件是否是所需的事件 ，如果，如果不是，從彈出式菜單中選擇另一個事件。不是，從彈出式菜單中選擇另一個事件。 8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.2 8.4.2 打開瀏覽器窗口打開瀏覽器窗口使用的【打開瀏覽器窗口】動作在一個新的使用的【打開瀏覽器窗口】動作在一個新的窗口中打開窗口中打開URLURL 使用【打開瀏覽器窗口】行為的操作步驟如使用【打開瀏覽器窗口】行為的操作步驟如下：下：1.1.選擇一個對象并打開【行為】面板

10、。選擇一個對象并打開【行為】面板。2.2.單擊單擊按鈕并從單擊單擊按鈕并從“添加動作添加動作”菜單中選擇【打開瀏覽器菜單中選擇【打開瀏覽器窗口】命令。打開窗口】命令。打開“打開瀏覽器窗口打開瀏覽器窗口”對話框。對話框。3.3.設(shè)置完成后單擊【確定】按鈕。設(shè)置完成后單擊【確定】按鈕。4.4.檢查【行為】面板中默認事件是否是所需的事件。如果不檢查【行為】面板中默認事件是否是所需的事件。如果不是，從彈出式菜單中選擇另一個事件。是，從彈出式菜單中選擇另一個事件。 8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.3 8.4.3 設(shè)置文本設(shè)置文本使用使用DreamweaverDreamwe

11、aver內(nèi)置的【設(shè)置文本】動作內(nèi)置的【設(shè)置文本】動作可以動態(tài)地設(shè)置層、框架、文本域以及狀態(tài)可以動態(tài)地設(shè)置層、框架、文本域以及狀態(tài)欄的文本。欄的文本。 使用【設(shè)置文本】行為的操作步驟如下：使用【設(shè)置文本】行為的操作步驟如下：1.1.選擇一個對象并打開【行為】面板。選擇一個對象并打開【行為】面板。2.2.單擊單擊按鈕并從單擊單擊按鈕并從“添加動作添加動作”菜單中選擇【設(shè)置文菜單中選擇【設(shè)置文本】【設(shè)置狀態(tài)欄文本】命令。打開本】【設(shè)置狀態(tài)欄文本】命令。打開“設(shè)置狀態(tài)欄設(shè)置狀態(tài)欄文本文本”對話框。對話框。3.3.在【消息】文本框中輸入相應(yīng)的信息。在【消息】文本框中輸入相應(yīng)的信息。 8.8.4 4 向頁

12、面中添加基本行為向頁面中添加基本行為8.4.4 8.4.4 檢查表單檢查表單利用【檢查表單】動作可以為表單中各元素利用【檢查表單】動作可以為表單中各元素設(shè)置有效性規(guī)則，并檢查指定文本域的內(nèi)容設(shè)置有效性規(guī)則，并檢查指定文本域的內(nèi)容以確保用戶輸入正確的數(shù)據(jù)類型以確保用戶輸入正確的數(shù)據(jù)類型 使用【檢查表單】動作的操作步驟如下：使用【檢查表單】動作的操作步驟如下：1.1.首先在文檔中插入表單和文本域。首先在文檔中插入表單和文本域。2.2.然后執(zhí)行下列步驟之一：然后執(zhí)行下列步驟之一：n如果要在用戶填寫表單時驗證單個文本域，如果要在用戶填寫表單時驗證單個文本域，選取一個文本域，打開【行為】面板。選取一個文

13、本域，打開【行為】面板。n如果要在用戶提交表單時驗證多個文本域，如果要在用戶提交表單時驗證多個文本域，單擊文檔窗口左下角標簽選擇器中的單擊文檔窗口左下角標簽選擇器中的 form標簽并打開【行為】面板。標簽并打開【行為】面板。8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.4 8.4.4 檢查表單檢查表單3.3.從【添加行為】下拉列表中選擇【檢查表單】從【添加行為】下拉列表中選擇【檢查表單】動作。動作。4.4.重復以上操作檢查其他的文本域。重復以上操作檢查其他的文本域。5.5.單擊【確定】按鈕，在【行為】面板中選擇適單擊【確定】按鈕，在【行為】面板中選擇適當?shù)氖录?。當?shù)氖录?.

14、6.如果在用戶提交表單時檢查多個域，則如果在用戶提交表單時檢查多個域，則onSubmitonSubmit事件自動出現(xiàn)在事件自動出現(xiàn)在“事件事件”菜單中。菜單中。8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.5 8.4.5 控制控制ShockwaveShockwave或或FlashFlash使用【控制使用【控制ShockwaveShockwave或或FlashFlash】動作可以控制頁動作可以控制頁面中的面中的ShockwaveShockwave或或FlashFlash影片的播放、停止、倒影片的播放、停止、倒帶或者轉(zhuǎn)到某一幀等操作帶或者轉(zhuǎn)到某一幀等操作 使用【控制使用【控制Sh

15、ockwaveShockwave或或FlashFlash】動作的操作步驟動作的操作步驟如下如下: :1.1.插入的插入的ShockwaveShockwave或或Flash Flash 對象。并在【屬性檢查對象。并在【屬性檢查器】中對該影片進行命名，只能這樣才能對影片進器】中對該影片進行命名，只能這樣才能對影片進行控制。行控制。2.2.在文檔中插入控制按鈕。在文檔中插入控制按鈕。8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.5 8.4.5 控制控制ShockwaveShockwave或或FlashFlash使用【控制使用【控制ShockwaveShockwave或或FlashF

16、lash】動作的操作步動作的操作步驟如下驟如下: :3.3.選擇某個插入的控制按鈕，在【行為】面板中，選擇某個插入的控制按鈕，在【行為】面板中，單擊單擊+ +按鈕按鈕, ,并從并從“添加動作添加動作”菜單中選擇【控制菜單中選擇【控制ShockwaveShockwave或或FlashFlash】命令。命令。4.4.在對話框的【影片】下拉列表中選擇一個影片。在對話框的【影片】下拉列表中選擇一個影片。5.5.根據(jù)所選的控制按鈕在【操作】域中選擇播放、根據(jù)所選的控制按鈕在【操作】域中選擇播放、停止、倒帶或者前往幀停止、倒帶或者前往幀. . 6.6.選擇適當?shù)氖录|發(fā)該動作。選擇適當?shù)氖录|發(fā)該動作。

17、8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.6 8.4.6 交換圖像交換圖像【交換圖像】動作通過更改【交換圖像】動作通過更改imgimg標簽的標簽的srcsrc屬屬性將一個圖像和另一個圖像進行交換。性將一個圖像和另一個圖像進行交換。 使用【交換圖像】行為的操作步驟如下：使用【交換圖像】行為的操作步驟如下：1.1.在文檔中插入圖像在文檔中插入圖像2.2.在【圖像屬性】面板上為圖像指定名稱（便于在以后在【圖像屬性】面板上為圖像指定名稱（便于在以后指定圖像時，易于辨認）。指定圖像時，易于辨認）。3.3.選取并打開【行為】面板，單擊按鈕并從【動作】下選取并打開【行為】面板，單擊按鈕

18、并從【動作】下拉列表中選擇【交換圖像】。拉列表中選擇【交換圖像】。4.4.在【行為】面板中選擇適當?shù)氖录?。在【行為】面板中選擇適當?shù)氖录?.5.使用同樣的方法，設(shè)置其他的交換圖像。使用同樣的方法，設(shè)置其他的交換圖像。 8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.7 8.4.7 轉(zhuǎn)到轉(zhuǎn)到URLURL使用【轉(zhuǎn)到使用【轉(zhuǎn)到URLURL】動作可以在當前窗口或動作可以在當前窗口或指定窗口中打開一個新頁指定窗口中打開一個新頁 。 使用【轉(zhuǎn)到使用【轉(zhuǎn)到URLURL】動作的操作步驟如下：動作的操作步驟如下：1.1.選擇要添加該動作的對象。選擇要添加該動作的對象。2.2.選取并打開【行為】

19、面板，單擊按鈕并從【動作】選取并打開【行為】面板，單擊按鈕并從【動作】下拉列表中選擇【轉(zhuǎn)到下拉列表中選擇【轉(zhuǎn)到URLURL】3.3.在【行為】面板中選擇適當?shù)氖录?。在【行為】面板中選擇適當?shù)氖录?8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.8 8.4.8 播放聲音播放聲音使用【播放聲音】動作來播放聲音使用【播放聲音】動作來播放聲音 。 操作步驟如下：操作步驟如下：1.1.選擇要添加該動作的對象。選擇要添加該動作的對象。2.2.選取并打開【行為】面板，單擊按鈕并從【動作】選取并打開【行為】面板，單擊按鈕并從【動作】下拉列表中選擇【播放聲音】下拉列表中選擇【播放聲音】 。3.

20、3.在該對話框單擊【瀏覽】按鈕選取聲音文件，或在該對話框單擊【瀏覽】按鈕選取聲音文件，或者在【播放聲音】域中輸入聲音文件的路徑和名者在【播放聲音】域中輸入聲音文件的路徑和名稱。單擊【確定】按鈕。稱。單擊【確定】按鈕。 4.4.在【行為】面板中選擇適當?shù)氖录?。在【行為】面板中選擇適當?shù)氖录?8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.9 8.4.9 顯示彈出式菜單顯示彈出式菜單使用【顯示彈出式菜單】行為來創(chuàng)建或編輯使用【顯示彈出式菜單】行為來創(chuàng)建或編輯DreamweaverDreamweaver彈出菜單，或者打開并修改已插入彈出菜單，或者打開并修改已插入Dreamweave

21、rDreamweaver文檔的文檔的FireworksFireworks彈出菜單彈出菜單 。 操作步驟如下：操作步驟如下： 1.1.選擇要添加該動作的對象。選擇要添加該動作的對象。2.2.選取并打開【行為】面板，單擊按鈕并從【動作】下選取并打開【行為】面板，單擊按鈕并從【動作】下拉列表中選擇【顯示彈出式菜單】拉列表中選擇【顯示彈出式菜單】 。3.3.通過在【顯示彈出式菜單】對話框中設(shè)置選項來創(chuàng)建通過在【顯示彈出式菜單】對話框中設(shè)置選項來創(chuàng)建水平或垂直的彈出菜單水平或垂直的彈出菜單 。 4.4.在【行為】面板中選擇適當?shù)氖录Ｔ凇拘袨椤棵姘逯羞x擇適當?shù)氖录?8.8.4 4 向頁面中添加基本行為

22、向頁面中添加基本行為8.4.10 8.4.10 拖動層拖動層 【拖動層】動作允許訪問者拖動層。使用此動作【拖動層】動作允許訪問者拖動層。使用此動作創(chuàng)建拼圖游戲、滑塊控件和其他可移動的界面元素。創(chuàng)建拼圖游戲、滑塊控件和其他可移動的界面元素。 使用【拖動層】動作的操作步驟如下：使用【拖動層】動作的操作步驟如下： 1.1.選擇選擇 body標簽，這里不要選擇層，因為層在版本較低標簽，這里不要選擇層，因為層在版本較低的瀏覽器中都不接受事件，所以必須選擇一個不同的對象。的瀏覽器中都不接受事件，所以必須選擇一個不同的對象。 2.2.選取并打開【行為】面板，單擊按鈕并從【動作】下拉選取并打開【行為】面板，單

23、擊按鈕并從【動作】下拉列表中選擇【拖動層】，打開【拖動層】對話框，該對話列表中選擇【拖動層】，打開【拖動層】對話框，該對話框包括框包括“基本基本”與與“高級高級”兩個標簽，默認狀態(tài)為兩個標簽，默認狀態(tài)為“基基本本”。 8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.10 8.4.10 拖動層拖動層 3.3.如果要進一步定義層的拖動控制點、在拖動層時跟蹤如果要進一步定義層的拖動控制點、在拖動層時跟蹤層的移動以及當放下層時觸發(fā)一個動作，可單擊層的移動以及當放下層時觸發(fā)一個動作，可單擊“高高級級”標簽，繼續(xù)進行標簽，繼續(xù)進行“高級高級”標簽中各選項的設(shè)置標簽中各選項的設(shè)置 。4.4.

24、【拖動層】對話框設(shè)置完成后，單擊【確定】按鈕?！就蟿訉印繉υ捒蛟O(shè)置完成后，單擊【確定】按鈕。5.5.檢查【行為】面板中默認事件是否是所需的事件。如檢查【行為】面板中默認事件是否是所需的事件。如果不是，從彈出式菜單中選擇合適的事件。果不是，從彈出式菜單中選擇合適的事件。 8.8.4 4 向頁面中添加基本行為向頁面中添加基本行為8.4.11 8.4.11 顯示顯示/ /隱藏層隱藏層【顯示顯示- -隱藏層隱藏層】動作顯示、隱藏或恢復動作顯示、隱藏或恢復一個或多個層的默認可見性。一個或多個層的默認可見性。 使用使用【顯示顯示- -隱藏層隱藏層】動作操作步驟如下：動作操作步驟如下：1.1.在文檔窗口創(chuàng)建

25、要附加該動作的層，然后在層中放置在文檔窗口創(chuàng)建要附加該動作的層，然后在層中放置要隱藏要隱藏/ /顯示的圖像或文字；顯示的圖像或文字；2.2.打開打開【行為行為】面板，單擊按鈕并從面板，單擊按鈕并從【動作動作】下拉列表下拉列表中選擇中選擇【顯示顯示- -隱藏層隱藏層】，在對話框中設(shè)置參數(shù)；，在對話框中設(shè)置參數(shù)；3.3.單擊單擊【確定確定】按鈕。檢查默認事件是否是所需的事件按鈕。檢查默認事件是否是所需的事件。 8.5 8.5 時間軸概述時間軸概述8.5.1 8.5.1 使用時間軸面板使用時間軸面板 時間軸動畫是通過時間軸動畫是通過【時間軸時間軸】面板來制作完成的。面板來制作完成的。選擇選擇【窗口窗口】【時間軸時間軸】命令，在編輯窗口正下方打命令，在編輯窗口正下方打開開【時間軸時間軸】面板。面板。 8.5 8.5 時間軸概述時間軸概述8.5.2 8.5.2 創(chuàng)建時間軸動畫創(chuàng)建時間軸動畫 1 、通過時間軸創(chuàng)建動畫、通過時間軸創(chuàng)建動畫步驟如下：步驟如下：1.1.在頁面中插入層，在層中插入圖片或文本。在頁面中插入層，在層中插入圖片或文本。 2.2.選中該層，并將其拖動到選中該層，并將其拖動到【時間軸時間軸】面板中，面板中，在在【時間軸時間軸】面板中形成一段動畫條。面板中形成一段動畫條。3.3.定義動畫開始和結(jié)束時動畫對象的狀態(tài)。定義動畫開始和結(jié)束時動畫對象的狀態(tài)。 4.4.通過關(guān)