網(wǎng)頁制作中的行為技術(shù).ppt

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

2、準(zhǔn)事件 11.3 課堂小實(shí)例 11.3.1 調(diào)用 JavaScript 11.3.2 改變屬性 11.3.3 檢查瀏覽器 11.3.4 檢查插件 11.3.5 控制 Shockwave 或 Flash 11.3.6 拖動(dòng)層 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 課后習(xí)題與解答,11.1 選用行為,為了更好地理解行為的概念，下面分別解釋與行為相關(guān)的三個(gè)重要的概念【對(duì)象】、【事件】和【動(dòng)作】。 【對(duì)象】是產(chǎn)生行為的主體，很多網(wǎng)頁元素都可以成為對(duì)象，如圖片、文字、多媒體文件等。此外，網(wǎng)頁本身有時(shí)也可作為對(duì)象。 【事件】是觸發(fā)動(dòng)態(tài)效果的原因，它可以被附加到各種頁面元素上，也可以被附加到HTML標(biāo)記中。一個(gè)事件總是針對(duì)頁面元素或標(biāo)記而言的，例如將鼠標(biāo)指針移到圖片上、把鼠標(biāo)指針放在圖片之外和單擊鼠標(biāo)左鍵，是與鼠標(biāo)有關(guān)的三個(gè)最常見的事件(onMouseOver、onMouseOut、onClick)。不同的瀏覽器支持的事件種類和數(shù)量是不一

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

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

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

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

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

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

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

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

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

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

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

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

16、聲音。例如用戶可能要在每次鼠標(biāo)指針滑過某個(gè)鏈接時(shí)播放一段聲音效果，或在頁載入時(shí)播放音樂剪輯。,11.3.12 彈出消息,【彈出消息】動(dòng)作顯示一個(gè)帶有用戶指定的消息的 JavaScript 警告。因?yàn)?JavaScript 警告只有一個(gè)【確定】按鈕，所以使用此動(dòng)作可以提供信息，而不能為用戶提供選擇。,11.3.13 預(yù)先載入圖像,【預(yù)先載入圖像】動(dòng)作將在瀏覽器緩存中載入不會(huì)立即出現(xiàn)在頁上的圖像，如那些將通過行為或 JavaScript 換入的圖像。這樣可防止當(dāng)圖像變換時(shí)由于下載速度慢而導(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)航欄圖像】對(duì)話框，如圖所示。,11.3.15 設(shè)置文本,【設(shè)置文本】動(dòng)作包括【設(shè)置層文本】、【設(shè)置文本域文本】、【設(shè)置框架文本】和【設(shè)置狀態(tài)條文本】4個(gè)選項(xiàng)。這4個(gè)動(dòng)作分別為層、文本域、框架和狀態(tài)條對(duì)象添加文本信息。,11.3.16 顯示隱藏層,【顯示隱藏層】動(dòng)作顯示、隱藏或恢復(fù)一個(gè)或多個(gè)層的默認(rèn)可見性。此動(dòng)作用于在用戶與網(wǎng)頁進(jìn)行交互時(shí)顯示信息。例如，當(dāng)用戶將鼠標(biāo)指針滑過一個(gè)圖像時(shí)，可以顯示一個(gè)層給出有關(guān)的詳細(xì)信息。,11.3.17 顯示彈出菜單,使用【顯示彈出菜單】行為可創(chuàng)建或編輯 Dreamwe

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

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