《網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》第10章 使用行為

第

10

章使用行為網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）2023/1/3第10章使用行為1第

10

章使用行為10.1認(rèn)識(shí)行為10.2行為的基本操作10.3文本類行為10.4圖像類行為10.5代碼屬性類行為10.6跳轉(zhuǎn)類行為10.7效果類行為10.8綜合案例：制作一個(gè)攝影網(wǎng)站2023/1/3第10章使用行為210.1認(rèn)識(shí)行為行為的定義行為是Dreamweaver一個(gè)非常重要的概念，它是通過(guò)在對(duì)象上執(zhí)行某種事件，來(lái)觸發(fā)相應(yīng)的動(dòng)作，來(lái)實(shí)現(xiàn)預(yù)想的效果。

2023/1/3第10章使用行為310.1認(rèn)識(shí)行為行為是由對(duì)象、事件和動(dòng)作構(gòu)成的。事件和動(dòng)作都是針對(duì)某一對(duì)象完成的，事件是對(duì)象觸發(fā)動(dòng)作的原因，動(dòng)作是事件觸發(fā)對(duì)象后的效果，行為、對(duì)象、事件和動(dòng)作之間的關(guān)系如圖所示。

2023/1/3第10章使用行為410.1認(rèn)識(shí)行為對(duì)象是產(chǎn)生行為的主體。網(wǎng)頁(yè)中的大多數(shù)元素都可以作為行為的對(duì)象，如一段文字、一幅圖片、一曲音樂(lè)、一段視頻等。

2023/1/3第10章使用行為510.1認(rèn)識(shí)行為事件是由瀏覽器生成的消息，它提示該頁(yè)的瀏覽者已執(zhí)行了某種操作。例如，當(dāng)瀏覽者將鼠標(biāo)光標(biāo)移動(dòng)至某個(gè)超鏈接上時(shí)，瀏覽器就為該鏈接生成一個(gè)onMouseOver事件。

常見(jiàn)的事件如下表所示。

2023/1/3第10章使用行為610.1認(rèn)識(shí)行為2023/1/3第10章使用行為7事件說(shuō)明OnFocus當(dāng)指定的元素成為瀏覽者交互的中心時(shí)產(chǎn)生。例如，在一個(gè)文本區(qū)域中單擊，將產(chǎn)生一個(gè)onFocus事件。onChange當(dāng)瀏覽者改變對(duì)象的參數(shù)時(shí)發(fā)生。例如，當(dāng)瀏覽者改變一個(gè)文本區(qū)域的參數(shù)值，然后在頁(yè)面其他地方單擊時(shí)，會(huì)產(chǎn)生onChange事件。onClick當(dāng)瀏覽者單擊對(duì)象時(shí)產(chǎn)生。單擊直到瀏覽者釋放鼠標(biāo)按鍵時(shí)完成，只要按下鼠標(biāo)按鍵便會(huì)令某些現(xiàn)象發(fā)生。onLoad當(dāng)選定的對(duì)象在瀏覽器上出現(xiàn)時(shí)發(fā)生的事件。onUnload訪問(wèn)者退出網(wǎng)頁(yè)文檔時(shí)發(fā)生的事件。onKeyDown鍵盤上某個(gè)按鍵被按下時(shí)觸發(fā)的事件。onKeyPress鍵盤上按下某個(gè)按鍵被釋放時(shí)觸發(fā)的事件。onKeyUp放開(kāi)按下的鍵盤中的指定鍵時(shí)觸發(fā)的事件。onMouseDown鼠標(biāo)單擊時(shí)發(fā)生的事件。onMouseMove鼠標(biāo)指針經(jīng)過(guò)選定的對(duì)象上面時(shí)發(fā)生的事件。onMouseOver鼠標(biāo)指針在選定對(duì)象上面時(shí)發(fā)生的事件。onMouseOut鼠標(biāo)指針離開(kāi)選定對(duì)象上面時(shí)發(fā)生的事件。onSelect當(dāng)瀏覽者在一個(gè)文本區(qū)域內(nèi)選擇文本時(shí)發(fā)生的事件。常見(jiàn)的事件10.1認(rèn)識(shí)行為動(dòng)作是一段預(yù)先編寫好的JavaScript代碼，可以執(zhí)行許多任務(wù)，如跳轉(zhuǎn)到URL

等。

常見(jiàn)的動(dòng)作如下表所示。

2023/1/3第10章使用行為810.1認(rèn)識(shí)行為2023/1/3第10章使用行為9動(dòng)作說(shuō)明交換圖像發(fā)生設(shè)置的事件后，用其他圖像來(lái)取代當(dāng)前選定的圖片。彈出信息設(shè)置的事件發(fā)生后，顯示警告信息?；謴?fù)交換圖像在運(yùn)行交換圖像動(dòng)作之后，顯示原來(lái)的圖片。打開(kāi)瀏覽器窗口在新窗口中打開(kāi)URL，可以定制新窗口的大小。拖動(dòng)AP元素在頁(yè)面中按照指定的方式拖動(dòng)某層元素移動(dòng)。改變屬性可以改變對(duì)象某個(gè)屬性的值。顯示-隱藏元素顯示或隱藏特定元素。檢查插件確認(rèn)是否有運(yùn)行的插件。設(shè)置文本用指定的內(nèi)容來(lái)代替頁(yè)面上現(xiàn)有的容器。調(diào)用JavaScript調(diào)用指定的JavaScript函數(shù)。跳轉(zhuǎn)菜單制作一次可以建立若干個(gè)鏈接的跳轉(zhuǎn)菜單。轉(zhuǎn)到URL選定的事件發(fā)生時(shí)，可以跳轉(zhuǎn)到指定的站點(diǎn)或者網(wǎng)頁(yè)文檔上。預(yù)先載入圖像為了在瀏覽器中快速顯示圖像，事先下載圖像之后顯示出來(lái)。常見(jiàn)的動(dòng)作10.2行為的基本操作行為的基本操作是通過(guò)“行為”面板完成的。通過(guò)“行為”面板，用戶可以方便地為文本、圖像等頁(yè)面對(duì)象添加行為，還可以修改以前設(shè)置過(guò)的行為參數(shù)。

2023/1/3第10章使用行為1010.2行為的基本操作選擇菜單命令“窗口”|“行為”，可以打開(kāi)“行為”面板，如圖所示。

2023/1/3第10章使用行為1110.2行為的基本操作添加行為在“行為”面板上添加行為的基本操作過(guò)程是：（1）在頁(yè)面上選擇一個(gè)對(duì)象，如一個(gè)圖片。

（2）打開(kāi)“行為”面板，單擊

按鈕，在彈出的下拉菜單中選擇一個(gè)要添加的行為動(dòng)作。（3）在對(duì)話框中為動(dòng)作設(shè)置參數(shù)，然后單擊確定按鈕關(guān)閉對(duì)話框。（4）觸發(fā)該動(dòng)作的默認(rèn)事件顯示在“事件”下拉列表中。如果這不是所需要的觸發(fā)事件，可從“事件”下拉列表中選擇需要的事件。

2023/1/3第10章使用行為1210.2行為的基本操作編輯行為如果要編輯動(dòng)作的參數(shù)，可在“行為”面板的行為列表中雙擊動(dòng)作的名稱，或?qū)⑵溥x中并按回車鍵，也可單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯行為”命令，打開(kāi)相應(yīng)的對(duì)話框，在對(duì)話框中更改參數(shù)并確認(rèn)即可。如果要更改給定事件的多個(gè)動(dòng)作的順序，可在“行為”面板的行為列表中選擇某個(gè)動(dòng)作，然后單擊按鈕或即可。如果要增加或刪除某個(gè)行為，可在“行為”面板的行為列表中選擇某個(gè)動(dòng)作，然后單擊按鈕或即可。

2023/1/3第10章使用行為1310.3文本類行為彈出消息行為：顯示一個(gè)包含指定消息的提示對(duì)話框，提示框只有提示文本和一個(gè)確定按鈕，

使用此行為可以給用戶提供信息，但不能為用戶提供選擇操作。將素材文檔復(fù)制到站點(diǎn)文件夾下，然后使用行為設(shè)置頁(yè)面，在瀏覽器中的顯示效果如下圖所示。

2023/1/3第10章使用行為1410.3文本類行為2023/1/3第10章使用行為1510.3文本類行為具體操作步驟：①在“文件”面板中雙擊打開(kāi)網(wǎng)頁(yè)文檔，然后在頁(yè)面中插入預(yù)先準(zhǔn)好的圖片素材。②選擇菜單命令“窗口”→“行為”，打開(kāi)“行為”面板，然后單擊按鈕，在彈出的下拉菜單中選擇“彈出信息”命令，如下圖所示。

2023/1/3第10章使用行為1610.3文本類行為③在打開(kāi)的“彈出消息”對(duì)話框的“消息”文本框中輸入相應(yīng)的文本信息，然后單擊確定按鈕關(guān)閉對(duì)話框。④在“行為”面板的“事件”下拉列表中選擇出發(fā)事件“onMouseDown”，如圖所示。

2023/1/3第10章使用行為1710.3文本類行為⑤最后選擇菜單命令“文件”→“保存”，并按F10運(yùn)行，查看運(yùn)行效果。

2023/1/3第10章使用行為1810.3文本類行為設(shè)置狀態(tài)欄文本：將在瀏覽器窗口的狀態(tài)欄顯示信息。由于瀏覽者常常會(huì)注意不到狀態(tài)欄的信息，而且也不是所有的瀏覽器都提供對(duì)“設(shè)置狀態(tài)欄文本”行為的完全支持，如果用戶的信息非常重要，建議使用“彈出信息”行為等形式提醒瀏覽者。

2023/1/3第10章使用行為1910.3文本類行為繼續(xù)操作上述案例，進(jìn)而實(shí)現(xiàn)設(shè)置狀態(tài)欄文本。①仍然選擇該圖像，然后在“行為”面板上單擊按鈕，在彈出的“行為”下拉菜單中選擇“設(shè)置文本”→“設(shè)置狀態(tài)欄文本”命令。②在打開(kāi)的“設(shè)置狀態(tài)欄文本”對(duì)話框的“消息”文本框中輸入相應(yīng)的文本，如圖

所示，然后單擊確定按鈕關(guān)閉對(duì)話框。

2023/1/3第10章使用行為2010.3文本類行為③在“行為”面板的“事件”下拉列表中選擇觸發(fā)事件“onMouseOver”。④最后選擇菜單命令“文件”|“保存”，并按F12運(yùn)行，查看狀態(tài)欄效果，如圖所示。

2023/1/3第10章使用行為2110.4圖像類行為圖像類行為一般包括交換圖像、恢復(fù)交換圖像和預(yù)先載入圖像等行為。

下面通過(guò)案例予以說(shuō)明。①新建網(wǎng)頁(yè)，編寫文字和圖片，效果如圖所示。

2023/1/3第10章使用行為2210.4圖像類行為②選定圖片，在“屬性”面板的“ID”文本框中輸入圖像ID名稱“hy”，如圖所示。

2023/1/3第10章使用行為2310.4圖像類行為③選定圖片，在“行為”面板上單擊按鈕，在彈出的“行為”下拉菜單中選擇“交換圖像”，打開(kāi)交換圖像對(duì)話框。④在“圖像”列表中選中要改變的圖像，然后設(shè)置對(duì)應(yīng)的“設(shè)定原始檔為”選項(xiàng)，并選中“預(yù)先載入圖像”和“鼠標(biāo)滑開(kāi)時(shí)恢復(fù)圖像”選項(xiàng)，如圖所示。

2023/1/3第10章使用行為2410.4圖像類行為2023/1/3第10章使用行為2510.4圖像類行為⑤單擊確定按鈕關(guān)閉對(duì)話框，在“行為”面板中自動(dòng)添加了相應(yīng)的行為，其觸發(fā)事件已進(jìn)行自動(dòng)設(shè)置，不需要改變。⑥最后選擇菜單命令“文件”→“保存”，并按F10運(yùn)行，查看狀態(tài)欄效果，如圖所示。

2023/1/3第10章使用行為2610.4圖像類行為2023/1/3第10章使用行為2710.5代碼屬性類行為代碼屬性類行為包括調(diào)用JavaScript代碼和改變屬性等行為。下面通過(guò)案例予以說(shuō)明。

①新建網(wǎng)頁(yè)，編寫文字，效果如圖所示。

2023/1/3第10章使用行為2810.5代碼屬性類行為②選定“關(guān)閉窗口”文字，在“行為”面板上單擊按鈕，在彈出的“行為”下拉菜單中選擇“調(diào)用JavaScript”，打開(kāi)“調(diào)用JavaScript”對(duì)話框，輸入window.close()，如圖所示。

2023/1/3第10章使用行為2910.5代碼屬性類行為③選定“改變我的字號(hào)”文字，在“屬性”面板上，設(shè)置ID為ee，如圖所示。

2023/1/3第10章使用行為3010.5代碼屬性類行為④選定“改變我的字號(hào)”文字，在“行為”面板上單擊按鈕

，在彈出的“行為”下拉菜單中選擇“改變屬性”，打開(kāi)“改變屬性”對(duì)話框，設(shè)置參數(shù)信息，如圖所示。

2023/1/3第10章使用行為3110.5代碼屬性類行為⑤最后選擇菜單命令“文件”→“保存”，并按F10運(yùn)行，單擊“關(guān)閉窗口”文字，會(huì)彈出對(duì)話框，如下圖(a)所示，單擊“改變我的字號(hào)”，字號(hào)會(huì)變大，效果如下圖(b)所示。

2023/1/3第10章使用行為3210.6跳轉(zhuǎn)類行為跳轉(zhuǎn)類行為包括打開(kāi)瀏覽器窗口、轉(zhuǎn)到URL等行為。下面通過(guò)案例進(jìn)行說(shuō)明。①新建網(wǎng)頁(yè)，編寫文字，效果如圖所示。

2023/1/3第10章使用行為3310.6跳轉(zhuǎn)類行為②選定“打開(kāi)新的窗口”文字，在“行為”面板上單擊按鈕，在彈出的“行為”下拉菜單中選擇“打開(kāi)瀏覽器窗口”，打開(kāi)“打開(kāi)瀏覽器”對(duì)話框，如圖所示。

2023/1/3第10章使用行為3410.6跳轉(zhuǎn)類行為③不指定該窗口的任何屬性，在打開(kāi)時(shí)窗口的大小和屬性與先打開(kāi)的瀏覽器窗口相同。也可以指定窗口屬性參數(shù)。④選擇“跳轉(zhuǎn)到騰訊網(wǎng)”，在“行為”面板上單擊按鈕，在彈出的“行為”下拉菜單中選擇“轉(zhuǎn)到URL”，打開(kāi)“轉(zhuǎn)到URL”對(duì)話框，并設(shè)置參數(shù)，如圖所示。

2023/1/3第10章使用行為3510.6跳轉(zhuǎn)類行為2023/1/3第10章使用行為3610.6跳轉(zhuǎn)類行為⑤最后選擇菜單命令“文件”→“保存”，并按F10運(yùn)行，單擊“打開(kāi)新的窗口”文字，會(huì)彈出新的瀏覽器窗口，如圖10-24（a）所示，單擊“跳轉(zhuǎn)到騰訊網(wǎng)”，會(huì)跳轉(zhuǎn)到騰訊公司網(wǎng)站主頁(yè)，效果如圖10-24（b）所示。

2023/1/3第10章使用行為3710.7效果類行為跳轉(zhuǎn)類行為包括增大/收縮等效果的行為。

本節(jié)通過(guò)實(shí)際案例來(lái)講解效果類行為。①新建網(wǎng)頁(yè)，插入一副圖片，效果如圖所示。

2023/1/3第10章使用行為3810.7效果類行為②選定圖片，在“行為”面板上單擊按鈕，在彈出的“行為”下拉菜單中選擇“效果”→“增大/收縮”，打開(kāi)“增大/收縮”對(duì)話框，參數(shù)設(shè)置如圖所示。

2023/1/3第10章使用行為3910.7效果類行為③最后選擇菜單命令“文件”→“保存”，并按F10運(yùn)行，單擊圖片，圖像由小變大，直到原圖大小的200%，再次單擊圖像又由大變小。

2023/1/3第10章使用行為4010.8綜合案例：制作一個(gè)攝影網(wǎng)站【內(nèi)容】利用行為制作一個(gè)攝影網(wǎng)站的主頁(yè)

，如圖所示。

2023/1/341第10章使用行為10.8綜合案例：制作一個(gè)攝影網(wǎng)站【思路】使用行為中的“交換圖像”功能，使得瀏覽者鼠標(biāo)移動(dòng)至相關(guān)圖像，就自動(dòng)切換到另

外的圖像；使用行為中的“轉(zhuǎn)到URL”功能，使得瀏覽者單擊“查看原圖”能跳轉(zhuǎn)到與原圖所在

的網(wǎng)頁(yè)；使用行為中的“彈出信息”功能，使得瀏覽者單擊圖片時(shí)，彈出提示信息；使用行為中

的“調(diào)用JavaScript”功能，使得瀏覽者單擊“關(guān)閉窗口”時(shí)，彈出關(guān)閉窗口對(duì)話框。

2023/1/342第10章使用行為10.8綜合案例：制作一個(gè)攝影網(wǎng)站【步驟】步驟1：新建網(wǎng)頁(yè)，插入表格和圖片，并輸入相關(guān)文字，如圖所示。

2023/1/343第10章使用行為10.8綜合案例：制作一個(gè)攝影網(wǎng)站

步驟2：選定第一幅圖片，在“行為”面板上單擊按鈕（事件選擇：onMouseOver），在彈出的“行為”下拉菜單中選擇“交換圖像”，打開(kāi)交換圖像對(duì)話框，設(shè)置相關(guān)參數(shù)，如圖所示。

2023/1/344第10章使用行為10.8綜合案例：制作一個(gè)攝影網(wǎng)站步驟3：選定文字“查看原圖”，在“行為”面板上單擊按鈕（事件選擇：onClick