《Dreamweaver 8案例教程》課件第11章

本章學(xué)習(xí)目標(biāo)行為和事件簡(jiǎn)介11.1使用Dreamweaver8內(nèi)置行為11.211.1行為和事件簡(jiǎn)介

Dreamweaver8提供了一種稱為“Behavior”（行為）的機(jī)制，幫助您構(gòu)建頁(yè)面中的交互行為。行為，就是在網(wǎng)頁(yè)中進(jìn)行一系列動(dòng)作，通過這些動(dòng)作實(shí)現(xiàn)用戶與頁(yè)面的交互。利用Dreamweaver8的行為，您不需要書寫一行代碼，就可以實(shí)現(xiàn)豐富的動(dòng)態(tài)頁(yè)面效果，達(dá)到用戶與頁(yè)面的交互。11.1.1行為一個(gè)行為是由事件和動(dòng)作組成的。事件是動(dòng)作被觸發(fā)的結(jié)果，而動(dòng)作是用于完成特殊任務(wù)的預(yù)先編好的Javascript代碼，諸如打開一個(gè)瀏覽器窗口，播放聲音等。當(dāng)對(duì)一個(gè)頁(yè)面元素使用行為時(shí)，您可以指定動(dòng)作和所觸發(fā)的事件。在Dreamweaver8中已經(jīng)提供了一些確定的動(dòng)作，您可以把它們應(yīng)用在頁(yè)面元素中。11.1.2事件每個(gè)瀏覽器都提供一組事件，這些事件可以與“行為”面板的“動(dòng)作”(+)彈出式菜單中列出的動(dòng)作相關(guān)聯(lián)。當(dāng)Web頁(yè)的訪問者與頁(yè)進(jìn)行交互時(shí)（例如單擊某個(gè)圖像），瀏覽器生成事件；這些事件可用于調(diào)用引起動(dòng)作發(fā)生的JavaScript函數(shù)。沒有用戶交互也可以生成事件，例如設(shè)置頁(yè)每10秒鐘自動(dòng)重新載入。Dreamweaver8提供許多可以使用這些事件觸發(fā)的常用動(dòng)作。返回11.2使用Dreamweaver8內(nèi)置行為Dreamweaver8自帶的行為動(dòng)作是為在NetscapeNavigator4.0和更高版本以及InternetExplorer4.0和更高版本中使用而編寫的。其中大多數(shù)行為動(dòng)作也可用于NetscapeNavigator版本3.0和更高版本。（與層相關(guān)的行為在Navigator3.0中不起作用。）其中大多數(shù)行為動(dòng)作在InternetExplorer3.0版本中運(yùn)行時(shí)也會(huì)偶爾發(fā)生問題。注意：Dreamweaver8動(dòng)作是經(jīng)過精心編寫的，以便在盡可能多的瀏覽器中發(fā)揮作用。如果您從Dreamweaver8動(dòng)作中手工刪除代碼，或用您自己的代碼將其替換，則可能會(huì)失去跨瀏覽器兼容性。11.2.1彈出消息“彈出消息”動(dòng)作顯示一個(gè)帶有您指定的消息的JavaScript警告。因?yàn)镴avaScript警告只有一個(gè)按鈕（“確定”），所以使用此動(dòng)作可以提供信息，而不能為用戶提供選擇。您可以在文本中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其它表達(dá)式。若要嵌入一個(gè)JavaScript表達(dá)式，請(qǐng)將其放置在大括號(hào)({})中。若要顯示大括號(hào)，請(qǐng)?jiān)谒懊婕右粋€(gè)反斜杠(\{)。11.2.2設(shè)置文本1、設(shè)置框架文本“設(shè)置框架文本”動(dòng)作允許您動(dòng)態(tài)設(shè)置框架的文本，用您指定的內(nèi)容替換框架的內(nèi)容和格式設(shè)置。該內(nèi)容可以包含任何有效的HTML代碼。使用此動(dòng)作動(dòng)態(tài)顯示信息。雖然“設(shè)置框架文本”動(dòng)作將替換框架的格式設(shè)置，但您可以選擇“保留背景顏色”以保留頁(yè)背景和文本顏色屬性。您可以在文本中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其它表達(dá)式。若要嵌入一個(gè)JavaScript表達(dá)式，請(qǐng)將其放置在大括號(hào)({})中。若要顯示大括號(hào)，請(qǐng)?jiān)谒懊婕右粋€(gè)反斜杠(\{)。11.2.2設(shè)置文本2、設(shè)置層文本“設(shè)置層文本”動(dòng)作用您指定的內(nèi)容替換頁(yè)上現(xiàn)有層的內(nèi)容和格式設(shè)置。該內(nèi)容可以包括任何有效的HTML源代碼。雖然“設(shè)置層文本”將替換層的內(nèi)容和格式設(shè)置，但保留層的屬性，包括顏色。通過在“設(shè)置層文本”對(duì)話框的“新建HTML”文本框中包括HTML標(biāo)簽，可對(duì)內(nèi)容進(jìn)行格式設(shè)置。您可以在文本中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其它表達(dá)式。若要嵌入一個(gè)JavaScript表達(dá)式，請(qǐng)將其放置在大括號(hào)({})中。若要顯示大括號(hào)，請(qǐng)?jiān)谒懊婕右粋€(gè)反斜杠(\{)。11.2.2設(shè)置文本3、設(shè)置狀態(tài)欄文本“設(shè)置狀態(tài)欄文本”動(dòng)作在瀏覽器窗口底部左側(cè)的狀態(tài)欄中顯示消息。例如，您可以使用此動(dòng)作在狀態(tài)欄中說(shuō)明鏈接的目標(biāo)而不是顯示與之關(guān)聯(lián)的URL。若要查看狀態(tài)消息的示例，請(qǐng)將您的鼠標(biāo)滑過“使用Dreamweaver”。訪問者常常會(huì)忽略或注意不到狀態(tài)欄中的消息（而且并不是所有的瀏覽器都提供設(shè)置狀態(tài)欄文本的完全支持）；如果您的消息非常重要，請(qǐng)考慮將其顯示為彈出式消息或?qū)游谋?。您可以在文本中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其它表達(dá)式。若要嵌入一個(gè)JavaScript表達(dá)式，請(qǐng)將其放置在大括號(hào)({})中。若要顯示大括號(hào)，請(qǐng)?jiān)谒懊婕右粋€(gè)反斜杠(\{)。11.2.2設(shè)置文本4、設(shè)置文本域文本“設(shè)置文本域文本”動(dòng)作用您指定的內(nèi)容替換表單文本域的內(nèi)容。您可以在文本中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其它表達(dá)式。若要嵌入一個(gè)JavaScript表達(dá)式，請(qǐng)將其放置在大括號(hào)({})中。若要顯示大括號(hào)，請(qǐng)?jiān)谒懊婕右粋€(gè)反斜杠(\{)。11.2.3改變屬性使用“改變屬性”動(dòng)作更改對(duì)象某個(gè)屬性（例如層的背景顏色或表單的動(dòng)作）的值。您可以更改的屬性是由瀏覽器決定的；在InternetExplorer4.0中可以通過此行為更改的屬性比InternetExplorer3.0或NetscapeNavigator3.0或4.0多得多。例如，您可以動(dòng)態(tài)設(shè)置層的背景顏色。注意：只有在您非常熟悉HTML和JavaScript的情況下才使用此動(dòng)作。11.2.4檢查瀏覽器使用“檢查瀏覽器”動(dòng)作可根據(jù)訪問者不同類型和版本的瀏覽器將他們轉(zhuǎn)到不同的頁(yè)。例如，您可能想要將使用NetscapeNavigator4.0或更高版本瀏覽器的訪問者轉(zhuǎn)到一頁(yè)，而將使用InternetExplorer4.0或更高版本的訪問者轉(zhuǎn)到另一頁(yè)，并讓使用任何其它類型瀏覽器的訪問者留在當(dāng)前頁(yè)上。將此行為附加到幾乎與任何瀏覽器都兼容的頁(yè)（該頁(yè)不使用任何其它JavaScript）的body標(biāo)簽將十分有用；這樣，已關(guān)閉JavaScript功能的訪問者在訪問此頁(yè)時(shí)仍可以看到內(nèi)容。另一個(gè)辦法是將此行為附加到一個(gè)空鏈接（例如<ahref="javascript:;">）并讓該動(dòng)作根據(jù)訪問者瀏覽器的類型和版本確定鏈接的目標(biāo)。11.2.5調(diào)用JavaScript“調(diào)用JavaScript”動(dòng)作允許您使用“行為”面板指定當(dāng)發(fā)生某個(gè)事件時(shí)應(yīng)該執(zhí)行的自定義函數(shù)或JavaScript代碼行。（您可以自己編寫JavaScript或使用Web上多個(gè)免費(fèi)的JavaScript庫(kù)中提供的代碼。）11.2案例1充滿行為的頁(yè)面（1）11.2.6打開瀏覽器窗口使用“打開瀏覽器窗口”動(dòng)作在一個(gè)新的窗口中打開URL。您可以指定新窗口的屬性（包括其大?。?、特性（它是否可以調(diào)整大小、是否具有菜單欄等）和名稱。例如，您可以使用此行為在訪問者單擊縮略圖時(shí)在一個(gè)單獨(dú)的窗口中打開一個(gè)較大的圖像；使用此行為，您可以使新窗口與該圖像恰好一樣大。如果不指定該窗口的任何屬性，在打開時(shí)它的大小和屬性與打開它的窗口相同。指定窗口的任何屬性都將自動(dòng)關(guān)閉所有其它未顯式打開的屬性。例如，如果您不為窗口設(shè)置任何屬性，它將以640x480像素的大小打開并具有導(dǎo)航條、地址工具欄、狀態(tài)欄和菜單欄。如果您將寬度顯式設(shè)置為640、將高度設(shè)置為480并不設(shè)置其它屬性，則該窗口將以640x480像素的大小打開，并且不具有任何導(dǎo)航條、地址工具欄、狀態(tài)欄、菜單欄、調(diào)整大小手柄和滾動(dòng)條。11.2.7播放聲音使用“播放聲音”動(dòng)作來(lái)播放聲音。例如，您可能要在每次鼠標(biāo)指針滑過某個(gè)鏈接時(shí)播放一段聲音效果，或在頁(yè)載入時(shí)播放音樂剪輯。注意：瀏覽器可能需要用某種附加的音頻支持（例如音頻插件）來(lái)播放聲音。因此，具有不同插件的不同瀏覽器所播放聲音的效果通常會(huì)有所不同。很難準(zhǔn)確地預(yù)測(cè)出站點(diǎn)的訪問者對(duì)您提供的聲音感受如何。11.2.8設(shè)置導(dǎo)航條圖像使用“設(shè)置導(dǎo)航條圖像”動(dòng)作將某個(gè)圖像變?yōu)閷?dǎo)航條圖像，或更改導(dǎo)航條中圖像的顯示和動(dòng)作。使用“設(shè)置導(dǎo)航條圖像”對(duì)話框的“基本”標(biāo)簽創(chuàng)建或更新導(dǎo)航條圖像或圖像組、更改當(dāng)單擊導(dǎo)航條按鈕時(shí)顯示的URL，以及選擇在其中顯示URL的其它窗口。使用“設(shè)置導(dǎo)航條圖像”對(duì)話框的“高級(jí)”選項(xiàng)卡根據(jù)當(dāng)前按鈕的狀態(tài)更改文檔中其它圖像的狀態(tài)。默認(rèn)情況下，單擊導(dǎo)航條中的一個(gè)元素將使導(dǎo)航條中的所有其它元素自動(dòng)返回到它們的一般狀態(tài)；如果您想將某個(gè)圖像在所選圖像處于按下狀態(tài)或滑過狀態(tài)時(shí)設(shè)置為不同的狀態(tài)，則使用“高級(jí)”標(biāo)簽。11.2.9預(yù)先載入圖像“預(yù)先載入圖像”動(dòng)作將不會(huì)立即出現(xiàn)在頁(yè)上的圖像（例如那些將通過行為或JavaScript換入的圖像）載入瀏覽器緩存中。這樣可防止當(dāng)圖像應(yīng)該出現(xiàn)時(shí)由于下載而導(dǎo)致延遲。注意：“交換圖像”動(dòng)作自動(dòng)預(yù)先載入當(dāng)您在“交換圖像”對(duì)話框中選擇“預(yù)先載入圖像”選項(xiàng)時(shí)所有高亮顯示的圖像，因此當(dāng)使用“交換圖像”時(shí)您不需要手動(dòng)添加預(yù)先載入圖像。11.2案例2充滿行為的頁(yè)面（2）11.2.10控制Shockwave或Flash使用“控制Shockwave或Flash”動(dòng)作來(lái)播放、停止、倒帶或轉(zhuǎn)到MacromediaShockwave或MacromediaFlashSWF文件中的幀。11.2案例3動(dòng)感網(wǎng)頁(yè)11.2.11顯示－隱藏層“顯示－隱藏層”動(dòng)作顯示、隱藏或恢復(fù)一個(gè)或多個(gè)層的默認(rèn)可見性。此動(dòng)作用于在用戶與頁(yè)進(jìn)行交互時(shí)顯示信息。例如，當(dāng)用戶將鼠標(biāo)指針滑過一個(gè)植物的圖像時(shí)，您可以顯示一個(gè)層給出有關(guān)該植物的生長(zhǎng)季節(jié)和地區(qū)、需要多少陽(yáng)光、可以長(zhǎng)到多大等詳細(xì)信息?！帮@示－隱藏層”還可用于創(chuàng)建預(yù)先載入層，即一個(gè)最初擋住頁(yè)的內(nèi)容的較大的層，在所有頁(yè)組件都完成載入后該層即消失。11.2.12轉(zhuǎn)到時(shí)間軸幀“轉(zhuǎn)到時(shí)間軸幀”動(dòng)作將播放頭移動(dòng)到指定的幀。您可以在“時(shí)間軸”面板的“行為”通道中使用此動(dòng)作讓時(shí)間軸的某一部分循環(huán)一定的次數(shù)、創(chuàng)建“倒帶”鏈接或按鈕，或者讓用戶跳到動(dòng)畫中的其他部分。11.2案例4極酷車展11.2.13拖動(dòng)層“拖動(dòng)層”動(dòng)作允許訪問者拖動(dòng)層。使用此動(dòng)作創(chuàng)建拼板游戲、滑塊控件和其它可移動(dòng)的界面元素。您可以指定訪問者可以向哪個(gè)方向拖動(dòng)層（水平、垂直或任意方向），訪問者應(yīng)該將層拖動(dòng)到的目標(biāo)、如果層在目標(biāo)一定數(shù)目的像素范圍內(nèi)是否將層靠齊到目標(biāo)，當(dāng)層接觸到目標(biāo)時(shí)應(yīng)該執(zhí)行的操作和其它更多的選項(xiàng)。因?yàn)樵谠L問者可以拖動(dòng)層之前必須先調(diào)用“拖動(dòng)層”動(dòng)作，所以請(qǐng)確保觸發(fā)該動(dòng)作的事件發(fā)生在訪問者試圖拖動(dòng)層之前。最佳的方法是（使用onLoad事件）將“拖動(dòng)層”附加到body對(duì)象上，不過您也可以使用onMouseOver事件將它附加到填滿整個(gè)層的鏈接上（例如圖像周圍的鏈接）。11.2案例5拼圖游戲11.2.14顯示彈出式菜單使用“顯示彈出菜單”行為來(lái)創(chuàng)建或編輯Dreamweaver8彈出式菜單，或者打開并修改已插入Dreamweaver8文檔的Fireworks彈出式菜單。通過在“顯示彈出菜單”對(duì)話框中設(shè)置選項(xiàng)來(lái)創(chuàng)建水平或垂直彈出菜單。您可以使用此對(duì)話框來(lái)設(shè)置或修改彈出菜單的顏色、文本和位置。注意：您必須使用Dreamweaver8屬性檢查器中的“編輯”按鈕來(lái)編輯Fireworks基于圖像的彈出菜單中的圖像。但是，您可以使用“顯示彈出菜單”命令來(lái)更改基于圖像的彈出菜單中的文本。11.2案例6：制作彈出式菜單11.2.15轉(zhuǎn)到URL“轉(zhuǎn)到URL”動(dòng)作在當(dāng)前窗口或指定的框架中打開一個(gè)新頁(yè)。此操作尤其適用于通過一次單擊更改兩個(gè)或多個(gè)框架的內(nèi)容。11.2.16檢查表單“檢查表單”動(dòng)作檢查指定文本域的內(nèi)容以確保用戶輸入了正確的數(shù)據(jù)類型。使用onBlur事件將此動(dòng)作分別附加到各文本域，在用戶填寫表單時(shí)對(duì)域進(jìn)行檢查；或使用onSubmit事件將其附加到表單，在用戶單擊“提交”按鈕時(shí)同時(shí)對(duì)多個(gè)文本域進(jìn)行檢查。將此動(dòng)作附加到表單防止表單提交到服務(wù)器后任何指定的文本域包含無(wú)效的數(shù)據(jù)。11.2.17檢查插件使用“檢查插件”動(dòng)作根據(jù)訪問者是否安裝了指定的插件這一情況將他們轉(zhuǎn)到不同的頁(yè)。例如，您可能想讓安裝有Shockwave的訪問者轉(zhuǎn)到一頁(yè)，讓未安裝該軟件的訪問者轉(zhuǎn)到另一頁(yè)。注意：不能使用JavaScript在InternetExplorer中檢測(cè)特定的插件。但是，選擇Flash或Director會(huì)將相應(yīng)的VBScript代碼添加到您的頁(yè)上，以便在Windows上的InternetExplorer中檢測(cè)這些插件。Macintosh上的InternetExplorer中不能實(shí)現(xiàn)插件檢測(cè)。11.2.18跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單轉(zhuǎn)到當(dāng)您使用“插入”>“表單對(duì)象”>“跳轉(zhuǎn)菜單”創(chuàng)建跳轉(zhuǎn)菜單時(shí)，Dreamweaver8創(chuàng)建一個(gè)菜單對(duì)象并向其附加一個(gè)“跳轉(zhuǎn)菜單”（或“跳轉(zhuǎn)菜單轉(zhuǎn)到”）行為。通常不需要手動(dòng)將“跳轉(zhuǎn)菜單”動(dòng)作附加到對(duì)象。您可以通過以下兩種方式中的任意一種編輯