網(wǎng)頁(yè)設(shè)計(jì)與制作第十章

第10章行為10.1行為概述10.2DreamweaverCS6自帶的行為10.1行為概述10.1.1什么是行為10.1.2行為面板10.1.3添加行為10.1.4編輯行為10.1.5DreamweaverCS6常用內(nèi)置事件10.1行為概述行為（behavior）有三個(gè)最重要的構(gòu)成部分，分別為對(duì)象（Object）、事件（Event）和動(dòng)作（Action）。對(duì)象是產(chǎn)生行為的主體。網(wǎng)頁(yè)中很多的元素都可以成為對(duì)象，如網(wǎng)頁(yè)中插入的圖像、一段文字、一個(gè)多媒體文件等。對(duì)象也是基于成對(duì)出現(xiàn)的HTML標(biāo)簽的，在創(chuàng)建時(shí)要首先選中對(duì)象的標(biāo)簽。事件是觸發(fā)動(dòng)態(tài)效果的條件。10.1.1什么是行為行為是被用來(lái)動(dòng)態(tài)響應(yīng)用戶操作、改變當(dāng)前頁(yè)面效果或是執(zhí)行某項(xiàng)特定任務(wù)的一種方法。一個(gè)行為是由一個(gè)事件和一個(gè)動(dòng)作構(gòu)成的。例如，當(dāng)用戶把鼠標(biāo)移至一張圖片上時(shí)（這稱(chēng)為一個(gè)事件），這個(gè)圖片會(huì)發(fā)生預(yù)先定義好的變化（這稱(chēng)為動(dòng)作）。事實(shí)上行為由預(yù)先書(shū)寫(xiě)好的JavaScript代碼構(gòu)成，使用它可以完成諸如打開(kāi)新瀏覽窗口、播放背景音樂(lè)、控制Shockwave文件的播放等任務(wù)。事件是為大多數(shù)瀏覽器所理解的通用代碼?！皁nMouseOver”“onMouseOut”和“onClick”等都是用戶在瀏覽器中對(duì)瀏覽頁(yè)面的操作，而瀏覽器通過(guò)一定的釋譯執(zhí)行來(lái)響應(yīng)用戶的動(dòng)作。例如，當(dāng)鼠標(biāo)移至一個(gè)鏈接上時(shí)，瀏覽器獲取了一個(gè)onMouseOver事件，并通過(guò)調(diào)用事先已經(jīng)寫(xiě)好的與此事件關(guān)聯(lián)的JavaScript語(yǔ)言來(lái)響應(yīng)這個(gè)動(dòng)作。10.1.2行為面板在DreamweaverCS6中，可以執(zhí)行【窗口】|【行為】命令，或者按【Shift+F4】組合鍵打開(kāi)【行為】面板。DreamweaverCS6【行為】面板有“

、

、

、

、

、1

”等按鈕，如圖10-1所示。

10.1.3添加行為添加行為就是將行為附加到某一對(duì)象上，當(dāng)該對(duì)象產(chǎn)生某一動(dòng)作時(shí)，就會(huì)引發(fā)預(yù)先定義好的行為事件。例如以前所學(xué)的超鏈接，當(dāng)將鼠標(biāo)移動(dòng)到某一鏈接時(shí)，此時(shí)光標(biāo)形狀就變成一個(gè)手形。網(wǎng)頁(yè)中的很多元素都可以成為對(duì)象，例如：整個(gè)HTML文檔、鏈接、圖像、文本、多媒體文件、表單元素等。操作案例1：給圖片對(duì)象添加“交換圖像”行為。

10.1.3添加行為

圖10-3添加交換圖像行為10.1.4編輯行為編輯行為就是修改或刪除已添加的行為事件。其主要操作就是先選定要修改或刪除的行為事件，單擊【行為】面板中事件旁的“”修改按鈕或“”刪除按鈕，可分別進(jìn)行修改或刪除行為操作，如圖10-4所示。例如，將“onMouseOver”修改為“onClick”；將“onMouseOut”刪除等操作。

圖10-4行為編輯10.1.5DreamweaverCS6常用內(nèi)置事件在DreamweaverCS6中提供了許多事件，有的與鼠標(biāo)操作有關(guān)、有的與鍵盤(pán)按鍵有關(guān)，如鼠標(biāo)單擊、按下鍵盤(pán)某個(gè)鍵等；還有一些事件與網(wǎng)頁(yè)相關(guān)，如網(wǎng)頁(yè)下載、切換等。事件說(shuō)明OnBlur當(dāng)指定的元素停止從用戶的交互動(dòng)作上獲得焦點(diǎn)時(shí)，觸發(fā)該事件。OnClick當(dāng)用戶在頁(yè)面中單擊使用行為的元素，如文本、按鈕或圖像時(shí)，就會(huì)觸發(fā)該事件。OnDblclick在頁(yè)面中雙擊使用行為的特定元素（文本、按鈕或圖像）時(shí)，就會(huì)觸發(fā)該事件。OnError當(dāng)瀏覽器下載頁(yè)面或圖像發(fā)生錯(cuò)誤時(shí)觸發(fā)該事件。OnFocus指定元素通過(guò)用戶的交互動(dòng)作獲得焦點(diǎn)時(shí)觸發(fā)該事件。OnKeydown當(dāng)用戶在瀏覽網(wǎng)頁(yè)時(shí)，按下一個(gè)鍵后且尚未釋放該鍵時(shí)，就會(huì)觸發(fā)該事件。OnKeyup當(dāng)用戶瀏覽網(wǎng)頁(yè)時(shí)，按下一個(gè)鍵后又釋放該鍵時(shí)，就會(huì)觸發(fā)該事件。OnLoad當(dāng)網(wǎng)頁(yè)或圖像完全下載到用戶瀏覽器后，就會(huì)觸發(fā)該事件。OnMouseDown瀏覽網(wǎng)頁(yè)時(shí)，單擊網(wǎng)頁(yè)中建立行為的元素且尚未釋放鼠標(biāo)之前，就會(huì)觸發(fā)該事件。OnMousemove在瀏覽器中，當(dāng)用戶將光標(biāo)在使用行為的元素上移動(dòng)時(shí)，就會(huì)觸發(fā)該事件。OnMouseover在瀏覽器中，當(dāng)用戶將鼠標(biāo)指向一個(gè)使用行為的元素時(shí)，就會(huì)觸發(fā)該事件。OnMouseout在瀏覽器中，當(dāng)用戶將光標(biāo)從建立行為的元素移出后，就會(huì)觸發(fā)該事件。OnMouseup在瀏覽器中，當(dāng)用戶在使用行為的元素上按下鼠標(biāo)并釋放后，就會(huì)觸發(fā)該事件。OnUnload當(dāng)用戶離開(kāi)當(dāng)前網(wǎng)頁(yè)（關(guān)閉瀏覽器或跳轉(zhuǎn)到其他網(wǎng)頁(yè)）時(shí)，就會(huì)觸發(fā)該事件。10.2DreamweaverCS6自帶的行為DreamweaverCS6內(nèi)置了20多種行為，如交換圖像、彈出信息、打開(kāi)瀏覽器窗口、播放聲音、調(diào)用Javascript、改變屬性、檢查表單、檢查插件、檢查瀏覽器、控制Flash、設(shè)置導(dǎo)航欄圖像、設(shè)置文本、跳轉(zhuǎn)菜單、拖動(dòng)AP元素、顯示-隱藏元素、轉(zhuǎn)到URL、Spry效果等，如圖10-5所示。圖10-5添加行為10.2DreamweaverCS6自帶的行為10.2.1交換圖像10.2.2彈出菜單10.2.3恢復(fù)交換圖像10.2.4打開(kāi)瀏覽器窗口10.2.5拖動(dòng)AP元素（層）10.2.6播放聲音10.2.7改變屬性10.2.8顯示隱藏-隱藏元素10.2.9檢查表單10.2.10設(shè)置導(dǎo)航欄圖像10.2.11設(shè)置文本10.2.12調(diào)用JavaScript……10.2.1交換圖像交換圖像行為就是把源圖像變換成另外的圖像，也就是說(shuō)當(dāng)鼠標(biāo)移動(dòng)到源圖像上時(shí)就變換成另一個(gè)圖像，而當(dāng)鼠標(biāo)移開(kāi)時(shí)就恢復(fù)到原始的圖像。實(shí)現(xiàn)變換圖像效果操作步驟如下：（1）準(zhǔn)備兩張圖像，建議大小規(guī)格一致，如不一致計(jì)算機(jī)會(huì)根據(jù)源圖像大小自動(dòng)調(diào)整；（2）制作網(wǎng)頁(yè)文檔，添加行為動(dòng)作，具體操作步驟類(lèi)似前面操作案例1，此處不再贅述。10.2.2彈出信息彈出信息行為是指當(dāng)某一個(gè)網(wǎng)頁(yè)被打開(kāi)瀏覽或單擊網(wǎng)頁(yè)中某一對(duì)象時(shí)彈出一個(gè)事先指定好的信息提示框，該信息提示框只有一個(gè)【確定】按鈕，可以為瀏覽者提供信息服務(wù)，單擊信息提示框【確定】按鈕，信息提示框關(guān)閉。圖10-8添加了“彈出信息”行為的網(wǎng)頁(yè)10.2.3恢復(fù)交換圖像恢復(fù)交換圖像行為與交換圖像行為類(lèi)似，就是將最后一組交換圖像恢復(fù)到它們以前的源文件。僅在應(yīng)用“交換圖像”行為后使用，如圖10-9所示。圖10-9恢復(fù)交換圖像10.2.4打開(kāi)瀏覽器窗口打開(kāi)瀏覽器窗口行為就是在打開(kāi)當(dāng)前網(wǎng)頁(yè)的同時(shí)，另外打開(kāi)一個(gè)指定大小的新瀏覽器窗口，用戶可在新窗口中設(shè)置各種屬性，如窗口名稱(chēng)、大小、是否顯示菜單欄等。圖10-10“打開(kāi)瀏覽器窗口”對(duì)話框10.2.5拖動(dòng)AP元素拖動(dòng)AP元素行為是指在瀏覽網(wǎng)頁(yè)時(shí)，可用鼠標(biāo)左鍵拖動(dòng)AP元素的位置。圖10-11添加“拖動(dòng)AP元素”行為10.2.6播放聲音播放聲音行為就是指用戶打開(kāi)網(wǎng)頁(yè)或單擊網(wǎng)頁(yè)中某個(gè)對(duì)象時(shí)，開(kāi)始播放聲音。圖10-13添加“播放聲音”行為10.2.7改變屬性改變屬性行為就是當(dāng)事件發(fā)生時(shí)改變對(duì)象某個(gè)屬性，例如層、表格、單元格的背景顏色等。圖10-15添加“改變屬性”行為10.2.8顯示-隱藏元素顯示-隱藏元素行為就是當(dāng)事件發(fā)生時(shí)可將對(duì)象的可見(jiàn)性改變，如顯示或隱藏當(dāng)前對(duì)象。圖10-19添加“顯示、隱藏元素”行為10.2.9檢查表單檢查表單行為就是指檢查指定表單輸入內(nèi)容的數(shù)據(jù)類(lèi)型是否合法，此行為主要用在具有表單的頁(yè)面中。

圖10-24添加“檢查表單”行為10.2.10設(shè)置導(dǎo)航欄圖像設(shè)置導(dǎo)航欄圖像行為就是指鼠標(biāo)在導(dǎo)航欄上執(zhí)行不同動(dòng)作（指向、單擊、移開(kāi)），導(dǎo)航欄上的圖像也隨著顯示不同圖像效果（圖像的原始狀態(tài)、鼠標(biāo)移動(dòng)到圖像上、鼠標(biāo)單擊圖像時(shí)、鼠標(biāo)單擊圖像完成）。

10.2.10設(shè)置導(dǎo)航欄圖像

圖10-28添加“設(shè)置導(dǎo)航欄圖像”行為10.2.11設(shè)置文本設(shè)置文本行為就是指當(dāng)設(shè)置的文本事件發(fā)生時(shí)，將用指定的文本來(lái)替代當(dāng)前的內(nèi)容。1．設(shè)置層文本2．設(shè)置框架文本3．設(shè)置文本域文本4．設(shè)置狀態(tài)欄文本

10.2.11設(shè)置文本1．設(shè)置層文本設(shè)置層文本就是用指定的內(nèi)容替換頁(yè)上現(xiàn)有層的內(nèi)容和格式設(shè)置，能夠?yàn)閷釉O(shè)置更多特效。

10.2.11設(shè)置文本2．設(shè)置框架文本設(shè)置框架文本就是指用指定的內(nèi)容替換框架的內(nèi)容和格式設(shè)置。該內(nèi)容可以包含任何有效的HTML源代碼，使用此行為可以動(dòng)態(tài)顯示框架文本信息。

10.2.11設(shè)置文本3．設(shè)置文本域文本設(shè)置文本域文本就是指可用指定的內(nèi)容替換表單文本域的內(nèi)容，該行為可以更改表單中文本域內(nèi)顯示的文字。

10.2.11設(shè)置文本4．設(shè)置狀態(tài)欄文本設(shè)置狀態(tài)欄文本就是指可設(shè)置在瀏覽器窗口底部左側(cè)的狀態(tài)欄中顯示指定的消息，而不是顯示鏈接的URL信息等。

10.2.12調(diào)用JavaScript調(diào)用JavaScript行為就是指通過(guò)JavaScript腳本語(yǔ)言來(lái)實(shí)現(xiàn)一些特殊效果，如關(guān)閉當(dāng)前窗口等。

10.2.13跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是文檔中的彈出菜單，通過(guò)執(zhí)行【插入】|【表單對(duì)象】|【跳轉(zhuǎn)菜單】命令來(lái)打開(kāi)【插入跳轉(zhuǎn)菜單】對(duì)話框，如圖10-48所示。

圖10-48“插入跳轉(zhuǎn)菜單”對(duì)話框10.2.14轉(zhuǎn)到URL轉(zhuǎn)到URL就是指在當(dāng)前窗口或指定的框架中打開(kāi)一個(gè)新的頁(yè)面，此操作適用于通過(guò)一次單擊更改兩個(gè)或多個(gè)框架的內(nèi)容。

10.2.15預(yù)先載入圖像如果網(wǎng)頁(yè)中有過(guò)多的圖片，就會(huì)影響瀏覽的速度。DreamweaverCS6可以輕松設(shè)置預(yù)載圖片，加快圖片下載速度，讓站點(diǎn)以最快的速度出現(xiàn)在用戶面前。具體操作其實(shí)很簡(jiǎn)單。首先，啟動(dòng)DreamweaverCS6軟件，新建一個(gè)網(wǎng)頁(yè)；其次，在設(shè)計(jì)視圖中，用鼠標(biāo)點(diǎn)擊網(wǎng)頁(yè)內(nèi)任意區(qū)域，再打開(kāi)【行為】面板，單擊“”按鈕添加行為，選擇“預(yù)先載入圖像”命令，彈出【預(yù)先載入圖像】對(duì)話框，如圖10-54所示,設(shè)置“預(yù)先載入圖像”和“圖像源文件”。

圖10-54添加“預(yù)先載入圖像”行為10.2.16Spry效果DreamweaverCS6提供了Spry效果庫(kù)，可以輕松地向頁(yè)面中添加多種視覺(jué)效果，無(wú)需刷新即可顯示。Spry“增大/收縮”“擠壓”“顯示/漸隱”“晃動(dòng)”“滑動(dòng)”“遮簾”“高亮顏色”七種效果。

10.2.16Spry效果1．增大/收縮增大/收縮效果主要使對(duì)象變大或變小，適用于address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、img、menu、pre等標(biāo)簽。10.2.16Spry效果2．?dāng)D壓擠壓效果主要使對(duì)象從頁(yè)面的左上角消失，適用于address、dd、div、dl、dt、form、img、p、ol、ul、applet、center、dir、menu、pre等標(biāo)簽。圖10-58“擠壓效果設(shè)置”對(duì)話框圖10-59預(yù)覽效果10.2.16Spry效果3．顯示/漸隱顯示/漸隱效果主要使對(duì)象顯示或漸隱，適用于除applet、body、iframe、object、tr、th和tbody以外的所有標(biāo)簽。圖10-61預(yù)覽效果圖10-60“顯示/漸隱效果設(shè)置”對(duì)話框10.2.16Spry效果4．晃動(dòng)晃動(dòng)效果就是模擬從左向右晃動(dòng)對(duì)象，適用于address、blockquote、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、iframe、img、object、p、ol、ul、li、applet、dir、hr、menu、pre、table等標(biāo)簽。圖10-63預(yù)覽效果圖10-62“晃動(dòng)效果設(shè)置”對(duì)話框10.2.16Spry效果5．滑動(dòng)滑動(dòng)效果就是模擬上下移動(dòng)對(duì)象。要使滑動(dòng)效果正常工作，必須將目標(biāo)元素封裝在具有唯一ID的容器標(biāo)簽中。用于封裝目標(biāo)元素的容器標(biāo)簽必須是blockquote、dd、form、div或center標(biāo)簽，而目標(biāo)元素標(biāo)簽必須是以下標(biāo)簽之一：blockquote、dd、div、form、center、table、span、input、textarea、select或img。

圖10-65預(yù)覽效果圖10-64“滑動(dòng)效果設(shè)置”對(duì)話框10.2.16Spry效果6．遮簾遮簾效果就是模擬百葉窗，向上或向下滾動(dòng)來(lái)隱藏或顯示對(duì)象，僅可用于address、dd、div、dl、dt、form、h1、h