1、第11章 網(wǎng)頁制作中的行為技術(shù) 本章知識點及學習目標,本章重點介紹了Dreamweaver MX2004自帶的20種“行為”的定義和基本功能。行為就是由一段段JavaScript代碼組成的，主要是為更好地控制其他網(wǎng)頁中的元素而設(shè)置。行為的擴展是無限制的，只要掌握了JavaScript，就可以自己編寫行為，也可以從Dreamweaver MX 2004的官方網(wǎng)站中獲得。通過本章的學習，應(yīng)該掌握以下內(nèi)容：, 行為的意義以及【行為】面板的使用方法 根據(jù)具體的行為設(shè)置相對應(yīng)的事件 對所使用的事件進行修改,本章內(nèi)容概覽,11.1 選用行為 11.1.1 使用行為面板 11.1.2 添加行為 11.2 標

2、準事件 11.3 課堂小實例 11.3.1 調(diào)用 JavaScript 11.3.2 改變屬性 11.3.3 檢查瀏覽器 11.3.4 檢查插件 11.3.5 控制 Shockwave 或 Flash 11.3.6 拖動層 11.3.7 轉(zhuǎn)到 URL 11.3.8 跳轉(zhuǎn)菜單,11.3.9 跳轉(zhuǎn)菜單開始 11.3.10 打開瀏覽器窗口 11.3.11 播放聲音 11.3.12 彈出消息 11.3.13 預(yù)先載入圖像 11.3.14 設(shè)置導(dǎo)航欄圖像 11.3.15 設(shè)置文本 11.3.16 顯示隱藏層 11.3.17 顯示彈出菜單 11.3.18 交換圖像 11.3.19 恢復(fù)圖像交換 11.3.

3、20 檢查表單 11.4 課后習題與解答,11.1 選用行為,為了更好地理解行為的概念，下面分別解釋與行為相關(guān)的三個重要的概念【對象】、【事件】和【動作】。 【對象】是產(chǎn)生行為的主體，很多網(wǎng)頁元素都可以成為對象，如圖片、文字、多媒體文件等。此外，網(wǎng)頁本身有時也可作為對象。 【事件】是觸發(fā)動態(tài)效果的原因，它可以被附加到各種頁面元素上，也可以被附加到HTML標記中。一個事件總是針對頁面元素或標記而言的，例如將鼠標指針移到圖片上、把鼠標指針放在圖片之外和單擊鼠標左鍵，是與鼠標有關(guān)的三個最常見的事件(onMouseOver、onMouseOut、onClick)。不同的瀏覽器支持的事件種類和數(shù)量是不一

4、樣的，通常高版本的瀏覽器支持更多的事件。 【動作】是指最終需完成的動態(tài)效果，如交換圖像、彈出信息、打開瀏覽器窗口、播放聲音等都是動作。動作通常是一段JavaScript代碼。在Dreamweaver MX 2004中使用內(nèi)置的行為時，系統(tǒng)會自動向頁面中添加JavaScript代碼，用戶完全不必自己編寫。 將事件和動作組合起來就構(gòu)成了行為。,11.1.1 使用行為面板,在Dreamweaver MX 2004中，對行為的添加和控制主要通過【行為】面板來實現(xiàn)。具體操作步驟如下。 1選擇【窗口】中的【行為】命令。 2打開【行為】面板，如圖11-1所示。,圖11-1 【行為】面板,11.1.2 添加行

5、為,添加行為的具體操作方法如下。 在網(wǎng)頁中選定一個對象，或者直接選中整個頁面。 1 打開【行為】面板，單擊面板上的【+】按鈕，將彈出動作菜單，如圖11-2所示。 2從彈出下拉菜單中選擇一種動作，彈出相應(yīng)的參數(shù)設(shè)置對話框，在其中進行設(shè)置后，單擊【確定】按鈕。,圖11-2 添加行為,11.2 標準事件,Dreamweaver MX 2004配備了一套得到流行瀏覽器承認的事件列表。 單擊【行為】面板上的【】按鈕，選取【顯示事件】菜單，打開級聯(lián)菜單，可以看到在級聯(lián)菜單中提供的10種不同瀏覽器的版本。,11.3 課堂小實例（標準動作）,Dreamweaver MX 2004內(nèi)置許多行為，每一種行為都可以

6、實現(xiàn)一個動態(tài)效果，或用戶與網(wǎng)頁的交互行為。下面將分別講述每個動作。,11.3.1調(diào)用 JavaScript,“調(diào)用 JavaScript”動作允許您使用“行為”面板指定當發(fā)生某個事件時應(yīng)該執(zhí)行的自定義函數(shù)或 JavaScript 代碼行。（您可以自己編寫 JavaScript 或使用 Web 上多個免費的 JavaScript 庫中提供的代碼。,“調(diào)用 JavaScript”動作,若要使用“調(diào)用 JavaScript”動作，請執(zhí)行以下操作： 1.選擇一個對象并打開“行為”面板。 2.單擊加號 (+) 按鈕并從“動作”彈出菜單中選擇“調(diào)用 JavaScript”。 3.準確鍵入要執(zhí)行的 Java

7、Script，或鍵入函數(shù)的名稱。 例如，若要創(chuàng)建一個“后退”按鈕，您可以鍵入if(history.length0)history.back()。如果您已將代碼封裝在一個函數(shù)中，則只需鍵入該函數(shù)的名稱（例如 hogback()）。 4.單擊“確定”。 5.檢查默認事件是否是所需的事件。 如果不是，請從彈出菜單中選擇另一個事件。如果未列出所需的事件，則在“顯示事件”彈出菜單中更改目標瀏覽器。,11.3.2 改變屬性,使用“改變屬性”動作更改對象某個屬性（例如層的背景顏色或表單的動作）的值。您可以更改的屬性是由瀏覽器決定的；在 Internet Explorer 4.0 中可以通過此行為更改的屬性比

8、 Internet Explorer 3.0 或 Netscape Navigator 3.0 或 4.0 多得多。例如，您可以動態(tài)設(shè)置層的背景顏色。 注意：只有在您非常熟悉 HTML 和 JavaScript 的情況下才使用此動作。,使用“改變屬性”動作,若要使用“改變屬性”動作，請執(zhí)行以下操作： 選擇一個對象并打開“行為”面板。 單擊加號 (+) 按鈕并從“動作”彈出菜單中選擇“更改屬性”。 從“對象類型”彈出菜單中選擇您要更改其屬性的對象的類型。 “命名對象”彈出菜單馬上列出所有所選類型的命名對象。 從“命名對象”彈出菜單中選擇一個對象。 從“屬性”彈出菜單中選擇一個屬性，或在文本框中輸

9、入該屬性的名稱。 若要查看每個瀏覽器中可以更改的屬性，請從瀏覽器彈出菜單中選擇不同的瀏覽器或瀏覽器版本。如果您正在鍵入屬性名稱，則一定要使用該屬性的準確 JavaScript 名稱（請記住 JavaScript 屬性是區(qū)分大小寫的）。 在“新值”文本框中為該屬性輸入新值，然后單擊“確定”。 檢查默認事件是否是所需的事件。（當該事件發(fā)生時，將執(zhí)行動作并更改屬性。 如果不是，請從彈出菜單中選擇另一個事件。如果未列出所需的事件，則在“顯示事件”彈出菜單中更改目標瀏覽器。,11.3.3 檢查瀏覽器,使用“檢查瀏覽器”動作可根據(jù)訪問者不同類型和版本的瀏覽器將他們轉(zhuǎn)到不同的頁。例如，您可能想要將使用 Ne

10、tscape Navigator 4.0 或更高版本瀏覽器的訪問者轉(zhuǎn)到一頁，而將使用 Internet Explorer 4.0 或更高版本的訪問者轉(zhuǎn)到另一頁，并讓使用任何其它類型瀏覽器的訪問者留在當前頁上。 將此行為附加到幾乎與任何瀏覽器都兼容的頁（該頁不使用任何其它 JavaScript）的 body 標簽將十分有用；這樣，已關(guān)閉 JavaScript 功能的訪問者在訪問此頁時仍可以看到內(nèi)容。 另一個辦法是將此行為附加到一個空鏈接（例如 ）并讓該動作根據(jù)訪問者瀏覽器的類型和版本確定鏈接的目標。,11.3.4 檢查插件,使用【檢查插件】動作，可以檢查訪問者的瀏覽器中是否安裝了指定的插件，通過

11、這個檢查，可以分別為安裝插件和未安裝插件的用戶顯示不同的頁面。例如，可以檢查用戶是否安裝有播放flash動畫的插件，如果用戶安裝了該插件，就可以將帶有flash動畫對象的頁面顯現(xiàn)給該用戶；相反則可以將一幅帶有圖像的頁面顯示給該訪問者即可。,檢查插件,1在文檔中選中文本【檢查插件】，并為文本添加一個空鏈接。 2選擇文本，打開【行為】面板。單擊加號按鈕，從【動作】彈出菜單中選擇【檢查插件】，出現(xiàn)【檢查插件】對話框中設(shè)置具體的參數(shù)，如圖所示。,【檢查插件】對話框,11.3.5 控制 Shockwave 或 Flash,使用【控制 Shockwave或Flash】動作來播放、停止、倒放或轉(zhuǎn)到Macro

12、media Shockwave 或Macromedia Flash SWF文件中的幀。 在【行為】面板中單擊按鈕并從【動作】彈出菜單中選擇【控制 Shockwave 或 Flash】選項，出現(xiàn)【控制 Shockwave 或 Flash】對話框，可以設(shè)置控制播放的動作。,11.3.6 拖動層,【拖動層】動作允許訪問者拖動層。使用此動作可創(chuàng)建拼板游戲、滑塊控件和其他可移動的界面元素。 在【行為】面板中打開【拖動層】對話框，在【層】選項的下拉列表中選擇【層“Layer1”】，在【移動】選項的下拉列表中選擇【不限制】選項，在【放下目標】選項中的【左】和【上】文本框中為拖放目標輸入值，在【靠齊距離】文本

13、框中輸入一個值（以像素為單位），確定訪問者必須放目標多近，才能將層靠齊到目標，如圖所示。,11.3.7 轉(zhuǎn)到 URL,【轉(zhuǎn)到 URL】動作在當前窗口或指定的框架中打開一個新頁。此操作尤其適用于通過一次單擊更改兩個或多個框架的內(nèi)容。 在【行為】面板中單擊按鈕，在彈出的【動作】菜單中選擇【轉(zhuǎn)到 URL】命令，打開【轉(zhuǎn)到 URL】對話框，如圖所示。,11.3.8 跳轉(zhuǎn)菜單,選擇菜單【插入】|【表單】|【跳轉(zhuǎn)菜單】，可以在文檔窗口中的當前位置插入跳轉(zhuǎn)菜單對象。通過屬性面板可以改變菜單項列表順序或一個菜單項所鏈接的文件，也可以添加、刪除菜單項，或給菜單項換名。但是要改變鏈接文件打開的位置，添加或改變菜單

14、選擇提示，必須使用【行為】面板。,11.3.9 跳轉(zhuǎn)菜單開始,【跳轉(zhuǎn)菜單開始】動作與【跳轉(zhuǎn)菜單】動作密切關(guān)聯(lián)?！咎D(zhuǎn)菜單開始】允許將一個【轉(zhuǎn)到】按鈕和一個跳轉(zhuǎn)菜單關(guān)聯(lián)起來（在使用此動作之前，文檔中必須已存在一個跳轉(zhuǎn)菜單），單擊【轉(zhuǎn)到】按鈕打開在該跳轉(zhuǎn)菜單中選擇的鏈接。通常情況下，并不是所有跳轉(zhuǎn)菜單都需要一個【轉(zhuǎn)到】按鈕。從跳轉(zhuǎn)菜單中選擇一項通常會引起URL的載入，不需要用戶做任何進一步的操作。但是如果訪問者選擇已在跳轉(zhuǎn)菜單中選擇的同一項，則不發(fā)生跳轉(zhuǎn)。通常情況下這不會有多大關(guān)系，但是如果跳轉(zhuǎn)菜單出現(xiàn)在一個框架中，而跳轉(zhuǎn)菜單項鏈接到其他框架中的頁，就需要使用【轉(zhuǎn)到】按鈕，以允許訪問者重新選擇已在

15、跳轉(zhuǎn)菜單中選擇的項。,11.3.10 打開瀏覽器窗口,使用【打開瀏覽器窗口】動作可在新窗口中打開一個URL?？梢灾付ㄐ麓翱诘膶傩?，例如窗口大小、屬性（是否可調(diào)整大小、是否有菜單欄等）以及名稱。 如果指定窗口無屬性，則窗口將按啟動窗口的屬性大小打開。指定窗口的任何屬性都將自動關(guān)閉所有其他屬性。例如，如果設(shè)置窗口無屬性，則它可能會以640480像素打開一個導(dǎo)航工具欄、位置欄、狀態(tài)欄和菜單欄。如果明確設(shè)置了窗口寬度為640，高度為480而沒有設(shè)置其他屬性，則窗口將以640480像素打開，但是沒有導(dǎo)航工具欄、位置欄、狀態(tài)欄、菜單欄調(diào)整柄以及滾動條。,11.3.11 播放聲音,使用【播放聲音】動作來播放

16、聲音。例如用戶可能要在每次鼠標指針滑過某個鏈接時播放一段聲音效果，或在頁載入時播放音樂剪輯。,11.3.12 彈出消息,【彈出消息】動作顯示一個帶有用戶指定的消息的 JavaScript 警告。因為 JavaScript 警告只有一個【確定】按鈕，所以使用此動作可以提供信息，而不能為用戶提供選擇。,11.3.13 預(yù)先載入圖像,【預(yù)先載入圖像】動作將在瀏覽器緩存中載入不會立即出現(xiàn)在頁上的圖像，如那些將通過行為或 JavaScript 換入的圖像。這樣可防止當圖像變換時由于下載速度慢而導(dǎo)致延遲。,11.3.14 設(shè)置導(dǎo)航欄圖像,【設(shè)置導(dǎo)航欄圖像】的具體操作步驟如下。 1選中要設(shè)置為導(dǎo)航欄的圖像，

17、打開【行為】面板。 2單擊【行為】面板上的按鈕，在下拉菜單中選擇【設(shè)置導(dǎo)航欄圖像】，出現(xiàn)【設(shè)置導(dǎo)航欄圖像】對話框，如圖所示。,11.3.15 設(shè)置文本,【設(shè)置文本】動作包括【設(shè)置層文本】、【設(shè)置文本域文本】、【設(shè)置框架文本】和【設(shè)置狀態(tài)條文本】4個選項。這4個動作分別為層、文本域、框架和狀態(tài)條對象添加文本信息。,11.3.16 顯示隱藏層,【顯示隱藏層】動作顯示、隱藏或恢復(fù)一個或多個層的默認可見性。此動作用于在用戶與網(wǎng)頁進行交互時顯示信息。例如，當用戶將鼠標指針滑過一個圖像時，可以顯示一個層給出有關(guān)的詳細信息。,11.3.17 顯示彈出菜單,使用【顯示彈出菜單】行為可創(chuàng)建或編輯 Dreamwe

18、aver彈出菜單，或者打開并修改已插入Dreamweaver文檔的Fireworks彈出菜單。 可以通過在【顯示彈出菜單】對話框中設(shè)置選項來創(chuàng)建水平或垂直的彈出菜單，使用此對話框來設(shè)置或修改彈出菜單的顏色、文本和位置。,11.3.18 交換圖像,【交換圖像】動作通過更改img標簽的src屬性將一個圖像和另一個圖像進行交換。使用此動作可創(chuàng)建按鈕鼠標經(jīng)過圖像和其他圖像效果（包括一次交換多個圖像）。插入鼠標經(jīng)過圖像會自動將一個【交換圖像】行為添加到網(wǎng)頁中。,11.3.19 恢復(fù)圖像交換,【恢復(fù)交換圖像】動作的使用方法和【交換圖像】相似，是將最后一組交換的圖像恢復(fù)為它們以前的源文件，每次用戶將【交換圖

19、像】動作附加到某個對象時都會自動添加該動作。如果用戶在附加【交換圖像】時選擇了【恢復(fù)】選項，則用戶就不再需要手動選擇【恢復(fù)交換圖像】動作。,11.3.20 檢查表單,【檢查表單】動作檢查指定文本域的內(nèi)容以確保用戶輸入正確的數(shù)據(jù)類型。使用onBlur事件將此動作分別附加到各文本域，在用戶填寫表單時對域進行檢查；或使用 onSubmit事件將其附加到表單，在用戶單擊【提交】按鈕時同時對多個文本域進行檢查。將此動作附加到表單中可防止表單提交到服務(wù)器后任何指定的文本域包含無效的數(shù)據(jù)。,課堂串講,本章主要講述如何使用行為。行為在網(wǎng)頁中常被用在頁面的交互中，通過使用行為可以使網(wǎng)頁多些“靈性”。如當用戶打開或頁面下載完時彈出一個問候或消息的對話框。還可通過【檢查表單】行為檢查用戶是否按照表單的要求如實的填寫調(diào)查表，這樣可以防止一些垃圾信息。行為在網(wǎng)頁的設(shè)計和制作中常和層、表單等頁面元素結(jié)合使用。合理的使用行為可以為網(wǎng)站增添不少特色。,11.4 課后習題與解答,11.4.