網(wǎng)頁(yè)制作教程第10章

《網(wǎng)頁(yè)制作教程第10章》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、第10章Dreamweaver的行為7/25/2021本章知識(shí)技能要點(diǎn)：行為、動(dòng)作和事件的概念Dreamweaver中自帶的行為及其使用Dreamweaver中的行為是JavaSrcipt的程序庫(kù)，是動(dòng)作和事件的組合。行為代碼是客戶端JavaScript代碼，即它運(yùn)行于瀏覽器中，而不是在服務(wù)器上。在將行為附加到頁(yè)面元素之后，只要對(duì)該元素發(fā)生了所指定的事件，瀏覽器就會(huì)調(diào)用與該事件關(guān)聯(lián)的動(dòng)作，即JavaScript代碼。從另一方面來說，行為是實(shí)現(xiàn)網(wǎng)頁(yè)上交互的一種捷徑，Dreamweaver的行為是將javascript代碼嵌入在文檔中，以便允許訪問者與Web頁(yè)進(jìn)行

2、交互，從而以多種方式更改頁(yè)面動(dòng)作或執(zhí)行某些任務(wù)。10.2Dreamweaver的行為10.2.1“行為”、“事件”和“動(dòng)作”的概念這里首先就“行為”、“事件”和“動(dòng)作”這幾個(gè)概念給予說明?！靶袨椤薄ⅰ笆录焙汀皠?dòng)作”的概念在人們的自然語言中似乎意義非常相似，但在這里有嚴(yán)格的區(qū)分。舉個(gè)例子來說明：網(wǎng)頁(yè)上有一行文字，瀏覽網(wǎng)頁(yè)時(shí)，鼠標(biāo)一旦放在這行文字上，就會(huì)顯示一幅圖片；鼠標(biāo)一旦離開這行文字，那個(gè)圖片就會(huì)隱藏起來。這個(gè)效果就使用了“行為”。事件：鼠標(biāo)的移入和鼠標(biāo)的移出；動(dòng)作：圖片的顯示和隱藏；行為：鼠標(biāo)的移入+圖片的顯示，鼠標(biāo)的移出+圖片的隱藏由此可見，行為是事件和

3、由該事件觸發(fā)的動(dòng)作的組合。10.2Dreamweaver的行為10.2Dreamweaver的行為10.2.2行為中動(dòng)作的種類：表10-1列舉了Deaamweaver8中可用的22種動(dòng)作。交換圖像時(shí)間軸調(diào)用JavaScript彈出信息顯示-隱藏層跳轉(zhuǎn)菜單恢復(fù)交換圖像顯示彈出式菜單跳轉(zhuǎn)菜單開始打開瀏覽器窗口檢查插件轉(zhuǎn)到URL拖動(dòng)層檢查瀏覽器隱藏彈出式菜單控制Shockwave或Flash檢查表單預(yù)先載入圖像播放聲音設(shè)置導(dǎo)航欄圖像改變屬性設(shè)置文本10.2Dreamweaver的行為10.2.3行為中常用的事件種類：表10-2列舉了Deaamweaver8中常用的1

4、4種事件。表10-2Deaamweaver8中事件的種類OnBluronKeyDownonMouseDownonClickonKeyPressonMouseMoveonErroronKeyUponMouseOutonFocusonLoadonMouseOveronMouseUp10.2.4行為面板右圖示的是Deaamweaver8中的行為面板。點(diǎn)擊其中的“添加行為”按鈕，即可展開一個(gè)可用的動(dòng)作列表，列表中呈現(xiàn)出黑色的項(xiàng)目是當(dāng)前可以添加的動(dòng)作。點(diǎn)擊“顯示設(shè)置事件”按鈕，在面板中就會(huì)列出當(dāng)前頁(yè)面所有已經(jīng)設(shè)置的行為，右側(cè)列出的是動(dòng)作，左側(cè)列出的是對(duì)應(yīng)的事件。右鍵單擊

5、動(dòng)作項(xiàng)目時(shí)，從彈出的快捷菜單選擇“編輯行為”，可以重新設(shè)置行為的屬性；點(diǎn)擊“事件”列表旁邊的下拉按鈕，從展開的事件列表可以選擇一個(gè)合適的事件。10.2Dreamweaver的行為10.2.5應(yīng)用行為選擇網(wǎng)頁(yè)中要附加行為的對(duì)象（如圖像或鏈接），然后在“行為”面板中單擊“添加行為”按鈕，從彈出菜單中選擇要附加的行為。當(dāng)選擇某個(gè)動(dòng)作時(shí)，將會(huì)彈出一個(gè)相應(yīng)的對(duì)話框，顯示該動(dòng)作的參數(shù)和說明。在對(duì)話框中進(jìn)行參數(shù)設(shè)置后，單擊“確定”按鈕，即可完成附加行為的操作。10.2.6修改事件添加了行為后，用于觸發(fā)該動(dòng)作的默認(rèn)事件會(huì)顯示在“行為”面板“事件”欄中。在“事件”欄中單擊要應(yīng)用

6、的事件，然后單擊該事件右側(cè)出現(xiàn)的下拉按鈕，在彈出的下拉列表框中選擇另一個(gè)事件,即可修改觸發(fā)事件。10.2Dreamweaver的行為10.3.1彈出式菜單的制作瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)見到這樣的情況：在自然狀態(tài)下，菜單是折疊著的，也就是僅僅顯示菜單的標(biāo)題，當(dāng)鼠標(biāo)滑過菜單的標(biāo)題時(shí)，菜單立即展開，但鼠標(biāo)離開時(shí)菜單又會(huì)折疊起來這就是彈出式菜單。制作的步驟如下：（1）可以直接給圖片加上彈出菜單。但是不能給文本直接加上彈出菜單。如果需要給文本加上彈出菜單，首先需要把文本變成鏈接。選中文本，在屬性面板的鏈接項(xiàng)輸入“javascript:;”，就給文本加上鏈接了。如圖，將頁(yè)面上的文

7、本均加上鏈接“javascript:;”。10.3Dreamweaver行為的應(yīng)用實(shí)例（2）在添加彈出式菜單之前需要保存網(wǎng)頁(yè)文件。保存網(wǎng)頁(yè)之后，打開行為面板，點(diǎn)擊“添加行為”按鈕。（3）在彈出的菜單中點(diǎn)擊“顯示事件”，在“顯示事件”的級(jí)聯(lián)菜單里，選擇“4.0andLaterBrowsers”。（4）點(diǎn)擊“添加行為”按鈕，在展開的菜單中選擇“顯示彈出式菜單”，打開“顯示彈出式菜單”對(duì)話框。如圖。10.3Dreamweaver行為的應(yīng)用實(shí)例（5）在“顯示彈出式菜單”對(duì)話框里有四張選項(xiàng)卡。在“內(nèi)容”選項(xiàng)卡中，設(shè)置彈出菜單上的文本和所鏈接的文檔以及打開的目標(biāo)窗口。在“

8、外觀”和“高級(jí)”選項(xiàng)卡中，設(shè)置彈出菜單