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

第

10

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

10

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

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

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

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

常見的事件如下表所示。

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

等。

常見的動作如下表所示。

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

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

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

（2）打開“行為”面板，單擊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

，如圖所示。

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

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

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

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

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

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

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

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