項目十一

Dreamweaver2021的內置行為任務1行為概述任務2Dreamweaver2021的內置行為任務1行為概述任務引入小明已經對行為的概念有了詳細的了解，接下來就可以根據網站的需要附加行為，那么在Dreamweaver2021常見的內置行為有哪些，該如何添加呢？知識準備Dreamweaver2021為常見的行為動作編寫了代碼，并進行封裝。用戶只需要簡單地設置一些參數，就可以生成一些復雜的交互和動態效果。一、調用JavaScript“調用JavaScript”行為就是當發生某個事件時，執行預先編寫好的一個JavaScript函數或者一行JavaScript代碼。“調用JavaScript”動作的使用方法很簡單。二、改變屬性“改變屬性”行為可以動態地改變某一個對象的屬性值，例如div標簽的背景圖像或背景色，圖像的邊框和樣式。這些屬性的具體效果由用戶使用的瀏覽器決定。案例——使用“改變屬性”行為下面通過一個簡單實例演示使用“改變屬性”行為的步驟。（1）新建一個HTML文檔。（2）在“插入”下拉列表中選擇“在插入點”；在“ID”文本框中輸入標簽的名稱dd。（3）設置選擇器類型為“ID”，“選擇器名稱”為#dd。（4）刪除div標簽的占位文本，打開“表單”插入面板，插入一個按鈕，然后在屬性面板上將按鈕的“值”設置為“點擊這里”。（5）選中按鈕，單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中選擇“改變屬性”命令，彈出如圖所示的“改變屬性”對話框。（6）在“元素類型”下拉列表中選擇改變屬性的對象標簽。本例選擇DIV。（7）在“元素ID”右側的下拉列表中選擇已命名的div對象dd。（8）在“屬性”區域選中“選擇”，然后在右側的下拉列表中選擇一項要改變的屬性，本例選擇backgroundColor。（9）在“新的值”文本框中指定所選屬性新的屬性值。（10）打開“行為”面板，在事件列表中選擇觸發事件onClick。（11）保存文檔，并在瀏覽器中進行測試。三、檢查插件如果在網頁中使用了某些插件技術，如Flash、WindowsMediaPlayer等，應通過“檢查插件”行為檢查用戶的瀏覽器是否安裝了相應的插件。使用“檢查插件”行為的步驟如下：（1）選擇一個頁面對象并打開“行為”面板。（2）單擊“添加行為”按鈕，并在行為彈出菜單中執行“檢查插件”命令，彈出如圖所示的“檢查插件”對話框。（3）對該對話框各個選項進行設置。（4）設置完畢，單擊“確定”按鈕，然后選擇觸發事件。“改變屬性”動作的效果“檢查插件”對話框四、jQuery效果jQuery效果可以修改元素的不透明度、縮放比例、位置和樣式屬性（如背景顏色）等，通常用于在一段時間內高亮顯示信息，創建動畫過渡或者以可視方式修改頁面元素。jQuery效果可直接應用于使用JavaScript的HTML頁面上幾乎所有的元素，輕松地向頁面元素添加視覺過渡，而無需其它自定義標簽。案例——為頁面元素添加jQuery效果下面通過一些簡單的例子演示為頁面元素添加jQuery效果的一般步驟。（1）選擇要應用效果的內容或布局對象，也可以直接進入下一步。本例選中頁面中插入的一張圖片。（2）單擊“行為”面板中的“添加行為”按鈕，從彈出菜單中選擇“效果”，并選擇效果子菜單中需要的效果名稱。“彈跳（Bounce）”對話框（3）在“目標元素”下拉列表中選擇要應用效果的對象的ID。（4）在“效果持續時間”文本框中指定效果持續的時間，單位為毫秒。本（5）在“可見性”下拉列表中選擇對象應用效果后的顯示狀態。（6）在“方向”下拉列表中選擇元素彈跳的方式，可以是向上、向下、向左或向右。本例選擇“up”。（7）在“距離”文本框中指定彈跳的最大位移。本例保留默認設置。（8）在“次”文本框中指定彈跳次數。本例輸入5。（9）單擊“確定”按鈕關閉對話框。Dreamweaver2021默認將jQuery效果的觸發事件指定為OnClick事件。（10）保存文檔，并在瀏覽器中預覽效果。五、轉到URL“轉到URL”行為的網頁滿足特定的觸發事件時，會跳轉到特定的URL地址，并顯示指定的網頁。使用“轉到URL”行為的步驟如下：（1）選擇一個頁面對象，并打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在行為彈出菜單中執行“轉到URL”命令，彈出“轉到URL”對話框，如圖所示。（3）在“打開在”區域選擇網頁打開的窗口。（4）在“URL”文本框中輸入要打開的網頁地址；或單擊“瀏覽”按鈕定位到需要的文件。（5）單擊“確定”按鈕關閉對話框，然后選擇觸發事件。六、交換圖像/恢復交換圖像“交換圖像/恢復交換圖像”行為通過更改<img>標簽的src屬性，將一個圖像和另一個圖像進行交換。使用“交換圖像”行為的步驟如下：（1）選擇一個圖像對象，并打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“交換圖像”命令，彈出“交換圖像”對話框，如圖所示。（3）對該對話框各個選項進行設置。（4）單擊“確定”按鈕，然后為動作選擇觸發事件。“轉到URL”對話框“交換圖像”對話框七、彈出信息“彈出信息”行為顯示一個帶有指定消息的JavaScript警告。由于JavaScript警告只有一個“確定”按鈕，所以使用此行為可以提供信息，不能提供選擇。案例——使用“彈出信息”行為下面通過一個簡單實例演示使用“彈出信息”行為的步驟。（1）選擇一個對象，例如頁面中的一張圖片，然后打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“彈出信息”命令，彈出如圖所示的“彈出信息”對話框。（3）在“消息”文本域中輸入需要的消息。本例輸入“出水芙蓉”。（4）單擊“確定”按鈕，然后在“行為”面板中選擇觸發事件。本例選擇onMouseOver。（5）保存文檔，然后在瀏覽器中預覽效果，如圖左圖所示。鼠標指針移過圖像時，彈出消息框，如圖右圖所示。“彈出信息”對話框

“彈出信息”動作的效果八、打開瀏覽器窗口使用“打開瀏覽器窗口”行為可以打開一個新的窗口。此外，用戶還可以編輯瀏覽窗口的大小、名稱、狀態欄、菜單欄等屬性。案例——使用“打開瀏覽器窗口”行為下面通過一個簡單的例子演示使用“打開瀏覽器窗口”行為的步驟。（1）在頁面中選中需要添加行為的對象，如鏈接文本“進入百度MP3搜索”，然后打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“打開瀏覽器窗口”命令，彈出如圖所示的“打開瀏覽器窗口”對話框。（3）對該對話框中各個參數進行設置“打開瀏覽器窗口”對話框（4）單擊“確定”按鈕，然后選擇觸發事件。本例選擇onClick。（5）保存文檔。九、顯示-隱藏元素“顯示-隱藏元素”行為用于顯示、隱藏或恢復一個或多個頁面元素的默認可見性，用于在用戶與頁面進行交互時顯示信息。例如，將鼠標指針滑過一個人物的圖像時，可以顯示一個包含有關該人物的姓名、性別、年齡等詳細信息的頁面元素。還可用于創建預先載入頁面元素，即一個最初擋住頁面的較大的頁面元素，在所有頁面元素都完成載入后消失。“打開瀏覽器窗口”動作的效果案例——使用“顯示-隱藏元素”行為下面通過一個簡單實例演示使用“顯示-隱藏元素”行為的一般步驟。（1）新建一個HTML文檔。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“顯示-隱藏元素”命令，彈出“顯示-隱藏元素”對話框，如圖所示。（3）選中元素img“happy”，單擊“隱藏”按鈕，然后單擊“確定”關閉對話框。在“行為”面板中選擇觸發事件。本例選擇onMouseOver。（4）在“設計”視圖中選中圖片tree，單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“顯示-隱藏元素”命令，彈出“顯示-隱藏元素”對話框。（5）選中元素img“happy”，單擊“顯示”按鈕，然后單擊“確定”關閉對話框。在“行為”面板中選擇觸發事件。本例選擇onMouseOver。（6）保持圖片tree的選中狀態，單擊“行為”面板上的“添加行為”按鈕，在行為彈出菜單中執行“顯示-隱藏元素”命令，彈出“顯示-隱藏元素”對話框。頁面中插入的圖片

“顯示-隱藏元素”對話框（7）選中元素img“happy”，單擊“隱藏”按鈕，然后單擊“確定”關閉對話框。（8）保存文檔。十、檢查表單“檢查表單”行為檢查指定文本域的內容，以確保輸入了正確的數據類型。案例——使用“檢查表單”動作下面通過一個簡單例子演示使用“檢查表單”動作的一般步驟。（1）打開一個含有表單的HTML頁面，選中表單，并打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“檢查表單”命令，打開如圖所示的“檢查表單”對話框。（3）在“域”列表框中選中密碼域password，然后勾選“必需的”，在“可接受”區域選擇“任何東西”選項。“顯示-隱藏元素”對話框（4）在“域”列表框中選擇文本域year，然后勾選“必需的”，在“可接受”區域選中“數字從”，范圍為1910到2017。（5）在“域”列表框中選擇文本域day，然后勾選“必需的”，在“可接受”區域選中“數字從”，范圍為1到31。（6）在“域”列表框中選擇文本域idcard，然后勾選“必需的”，在“可接受”區域選中“數字”。（7）在“域”列表框中選擇文本區域info，然后勾選“必需的”，在“可接受”區域選中“任何東西”選項。（8）單擊“確定”關閉對話框。十一、設置文本“設置文本”行為可以動態設置容器、狀態欄、文本域中的內容，下面分別進行說明。1．設置容器的文本“檢查表單”行為的效果案例——使用“設置容器的文本”行為下面通過一個簡單實例演示使用“設置容器的文本”行為的一般步驟。（1）選擇一個容器對象，例如圖中的div元素main，并打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“設置文本”/“設置容器的文本”命令，彈出“設置容器的文本”對話框。（3）在“容器”下拉列表中選擇內容要進行動態變化的容器。（4）在“新建HTML”域中設置要在當前容器中新加入的內容。（5）單擊“確定”按鈕關閉對話框，并選擇觸發事件。（6）保存文檔。2．設置文本域文字“設置文本域文字”行為可以動態地更改文本域中的內容。選擇div元素main“設置容器的文本”對話框案例——演示“設置文本域文字”下面通過一個簡單例子演示“設置文本域文字”的操作步驟。（1）新建一個HTML文檔。（2）選中圖片，并打開“行為”面板。單擊“行為”面板上的“添加行為”按鈕，在彈出的行為菜單中選擇“設置文本”/“設置文本域文字”行為，打開“設置文本域文字”對話框。（3）在“文本域”中選中內容將動態變化的文本域。本例選中input“content”。（4）在“新建文本”文本域中輸入將在文本域中顯示的內容。（5）單擊“確定”按鈕關閉對話框，并在“行為”面板上設置觸發該動作的事件。本例使用默認事件onClick。（6）保存文檔。按F12鍵預覽效果，如圖所示。“設置容器的文本”行為的效果

初始頁面效果“設置文本域文字”對話框“設置文本域”動作的效果3．設置狀態欄文本“設置狀態欄文本”行為用于設置瀏覽器窗口狀態欄顯示的信息。使用“設置狀態欄文本”行為的步驟如下：（1）選擇一個頁面對象，并打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“設置文本”/“設置狀態欄文本”命令，彈出如圖所示的“設置狀態欄文本”對話框。（3）在“消息”文本框中輸入要在狀態欄中顯示的信息。（4）單擊“確定”按鈕，然后選擇觸發事件。十二、預先載入圖像經常在網上瀏覽的用戶，網速較慢時，感受最深的是顯示圖像時的漫長等待。（1）選擇一個對象，并打開“行為”面板。（2）單擊“行為”面板上的“添加行為”按鈕，在彈出菜單中執行“預先載入圖像”命令，彈出“預先載入圖像”對話框，如圖所示。“設置狀態欄文本”對話框“預先載入圖像”對話框（3）單擊“瀏覽”按鈕選擇要預先載入的圖像文件，或在“圖像源文件”文本框中輸入圖像的路徑和文件名。（4）單擊對話框頂部的“添加項”按鈕，將圖像添加到“預先載入圖像”列表中。（5）對要預先載入當前頁的其他圖像重復第3步和第4步。（6）若要從“預先載入圖像”列表中刪除某個圖像，則在列表中選擇該圖像，然后單擊“刪除項”按鈕。（7）單擊“確定”按鈕，然后選擇觸發事件。項目總結項目實戰實戰一為網頁按鈕調用JavaScript行為（1）新建一個HTML文檔，插入一個表單和一個按鈕。（2）選中頁面上的按鈕并打開“行為”面板，單擊“添加行為”按鈕，從行為彈出菜單中選擇“調用JavaScript”命令，彈出“調用JavaScript”對話框。（3）在文本框中輸入要執行的代碼：alert("歡迎使用DreamweaverCC！")。（4）單擊“確定”按鈕關閉對話框，默認為該行為指定