Web前端設(shè)計與開發(fā)技術(shù)-課件-第8章使用行為制作網(wǎng)頁特效

Web前端設(shè)計與開發(fā)技術(shù)（HTML+CSS+JavaScript）江西農(nóng)業(yè)大學(xué)計算機與信息工程學(xué)院主講人：第8章使用行為制作網(wǎng)頁特效8.1認(rèn)識行為8.2“行為”面板8.3使用行為應(yīng)用圖像8.4使用行為顯示文本8.5使用行為調(diào)節(jié)瀏覽器窗口8.6使用行為加載多媒體8.7上機練習(xí)

在網(wǎng)頁中使用“行為”可以創(chuàng)建各種特殊的網(wǎng)頁效果，例如彈出信息、交換圖像、跳轉(zhuǎn)菜單等。行為是一系列使用JavaScript程序預(yù)定義的頁面特效工具，是JavaScript在DreamweaverCC2018中內(nèi)建的程序庫。學(xué)習(xí)目標(biāo)

網(wǎng)頁行為的基礎(chǔ)知識

“行為”面板

使用行為8.1認(rèn)識行為

DreamweaverCC2018網(wǎng)頁行為是Abobe公司借助JavaScript開發(fā)的一組交互特效代碼庫。在DreamweaverCC2018中，用戶可以通過簡單的可視化操作對交互特效代碼進行編輯，從而創(chuàng)建出豐富的網(wǎng)頁應(yīng)用。

表行為的概念

行為是DreamweaverCC2018中重要的一個部分，通過行為，可以方便地制作許多網(wǎng)頁效果，極大地提高了工作效率。行為由兩個部分組成，事件和動作，通過事件的響應(yīng)而執(zhí)行對應(yīng)的動作。

在網(wǎng)頁中，事件是瀏覽器生成的消息，表明該頁的訪問者執(zhí)行了某種操作。例如，當(dāng)訪問者將鼠標(biāo)指針移動到某個鏈接上是，瀏覽器為該鏈接生成一個onMouseOver事件。不同的網(wǎng)頁元素定義了不同的事件。在大多數(shù)瀏覽器中，onMouseOver和onClick是與鏈接關(guān)聯(lián)的事件，而onLoad是與圖像和文檔的body部分關(guān)聯(lián)的事件。事件由瀏覽器定義、產(chǎn)生與執(zhí)行。事件的分類

行為事件可以分為鼠標(biāo)事件、鍵盤事件、表單事件和頁面事件。每個事件都含有不同的觸發(fā)方式。

1．鼠標(biāo)事件

onClick：單擊選定元素（如超鏈接、圖像、按鈕等）將觸發(fā)該事件。

onDblClick：雙擊選定元素將觸發(fā)該事件。

onMouseDown：當(dāng)按下鼠標(biāo)按鈕（不必釋放鼠標(biāo)按鈕）時觸發(fā)該事件。

onMouseMove：當(dāng)鼠標(biāo)指針停留在對象邊界時觸發(fā)該事件。

onMouseOut：當(dāng)鼠標(biāo)指針離開對象邊界時觸發(fā)該事件。

onMouseOver：當(dāng)鼠標(biāo)首次移動指向特定對象時觸發(fā)該事件。該事件通常用于鏈接。

onMouseUp：當(dāng)按下的鼠標(biāo)按鈕別釋放時觸發(fā)該事件。

鍵盤事件

onKeyPress：當(dāng)按下并釋放任意鍵時觸發(fā)該事件。

onKeyDown：當(dāng)按下任何鍵時即觸發(fā)該事件。

onKeyUp：按下鍵后釋放該鍵時觸發(fā)該事件。

表單事件

onChange：改變頁面中數(shù)值時將觸發(fā)該事件。例如，在菜單中選擇了一個項目，或者修改了文本區(qū)中的數(shù)值，然后再頁面任意位置單擊均可觸發(fā)該事件。

onFocus：當(dāng)指定元素成為焦點時將觸發(fā)該事件。例如，單擊表單中的文本編輯框?qū)⒂|發(fā)該事件。

onBlur：當(dāng)特定元素停止做為用戶交互的焦點時觸發(fā)該事件。例如，在單擊文本編輯框后，在該編輯框區(qū)域以外單擊，則系統(tǒng)將產(chǎn)生該事件。

onSelect：在文本區(qū)域選定文本時觸發(fā)該事件。

onSubmit：確認(rèn)表單時觸發(fā)該事件。

onReset：當(dāng)表單被復(fù)位到其默認(rèn)值時觸發(fā)該事件。

頁面事件

onLoad：當(dāng)圖像或頁面完成裝載后觸發(fā)該事件。

onUnload：離開頁面時觸發(fā)該事件。

onError：在頁面或圖像發(fā)生裝載錯誤時，將觸發(fā)該事件。

onMove：移動窗口或框架時將觸發(fā)該事件。

onResize：當(dāng)用戶調(diào)整瀏覽器窗口或框架尺寸時觸發(fā)該事件。

onScroll：當(dāng)用戶上、下滾動時觸發(fā)該事件。

行為是由預(yù)先編寫的JavaScript代碼組成的，這些代碼執(zhí)行特定的任務(wù)，例如打開瀏覽器窗口、播放聲音或停止播放影片。當(dāng)事件發(fā)生后，瀏覽器就查看是否存在與該事件對應(yīng)的動作，如果存在，就執(zhí)行它，這就是整個行為的過程。8.2“行為”面板

在“行為”面板中可以將DreamweaverCC2018中內(nèi)置的行為附加到頁面元素，并且可以修改以前所附加行為的參數(shù)。

選擇“窗口”\“行為”命令，打開“行為”面板。

在“行為”面板中顯示了已經(jīng)附加到當(dāng)前所選頁面元素的行為顯示在行為列表中，并按事件以字母順序列出。如果針對同一個事件列有多個動作，則會按在列表中出現(xiàn)的順序執(zhí)行這些動作。如果行為列表中沒有顯示任何行為，則表示沒有行為附加到當(dāng)前所選的頁面元素。8.3使用行為應(yīng)用圖像

圖像是網(wǎng)頁設(shè)計中必不可少的元素。在Dreamweaver中，我們可以通過使用行為，以各種各樣的方式在網(wǎng)頁中應(yīng)用圖像元素，從而制作出富有動感的網(wǎng)頁效果。使用行為應(yīng)用圖像，包括“預(yù)先載入圖像”行為、“交換圖像”行為和“恢復(fù)交換圖像”行為。

“預(yù)先載入圖像”行為

使用“預(yù)先載入圖像”行為，可以是瀏覽器下載那些尚未在網(wǎng)頁中顯示但是可能顯示的圖像，并將之存儲到本地緩存中，這樣可以脫機瀏覽網(wǎng)頁。

“交換圖像”行為

“交換圖像”行為主要用于動態(tài)改變圖像對應(yīng)<img>標(biāo)記的scr屬性值，利用該動作，不僅可以創(chuàng)建普通的翻轉(zhuǎn)圖像，還可以創(chuàng)建圖像按鈕的翻轉(zhuǎn)效果，甚至可以設(shè)置在同一刻改變頁面上的多幅圖像。

“恢復(fù)交換圖像”行為

與“交換圖像”對應(yīng)，使用“恢復(fù)交換圖像”動作，可以將所有被替換顯示的圖像恢復(fù)為原始圖像。一般來說，在設(shè)置替換圖像動作是，會自動添加替換圖像恢復(fù)動作，這樣當(dāng)光標(biāo)離開對象時自動恢復(fù)原始圖像。8.4使用行為顯示文本

“彈出信息”行為

使用“彈出信息”行為，可以彈出一個信息框，顯示相應(yīng)的消息文本。單擊“行為”單擊“行為”選項卡面板中的按鈕，在彈出的菜單中選擇“彈出信息”命令，打開“彈出信息”對話框。在“消息”文本區(qū)域中，輸入文本后單擊“確定”按鈕即可。

“設(shè)置狀態(tài)欄文本”行為

狀態(tài)欄行為主要可以在瀏覽器窗口中的狀態(tài)欄顯示文本信息，用于優(yōu)化網(wǎng)頁細節(jié)。要對狀態(tài)欄的文本進行編輯，或是對文本狀態(tài)進行更多的控制，可以使用“行為”選項卡面板中的“設(shè)置狀態(tài)欄文本”行為

“設(shè)置容器的文本”行為

“設(shè)置容器的文本”行為將頁面上的現(xiàn)有容器（可以包含文本或其他元素的任何元素）的內(nèi)容和格式替換為指定的內(nèi)容。該內(nèi)容可以包括任何有效的HTML源代碼。

可以在文本中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其他表達式。若要嵌入一個JavaScript表達式，請將其放置在大括號“{}”中。若要顯示大括號，請在它前面加一個反斜杠“\{”。8.5使用行為調(diào)節(jié)瀏覽器窗口

在網(wǎng)頁中最常使用的JavaScript源代碼是調(diào)節(jié)瀏覽器窗口的源代碼，它可以按照設(shè)計者的要求打開新窗口或更換新窗口的形狀。

“打開瀏覽器窗口”行為

使用“打開瀏覽器窗口”行為，可以在一個新的瀏覽器窗口中載入位于制定URL位置上的文檔。同時，還可以指定新打開瀏覽器窗口的屬性，例如大小、是否顯示菜單條等。單擊“行為”選項卡面板上的按鈕，在彈出的菜單中選擇“打開瀏覽器窗口”命令，打開“打開瀏覽器窗口”對話框。

在“打開瀏覽器窗口”對話框中“要顯示的URL”文本框用于輸入在新瀏覽器窗口中載入的URL地址，也可以單擊“瀏覽”按鈕，選擇鏈接目標(biāo)文檔?！按翱趯挾取焙汀按翱诟叨取蔽谋究蛴糜谳斎胄聻g覽器窗口的寬度和高度，單位是像素?！皩傩浴边x項區(qū)域用于設(shè)置新瀏覽器窗口中是否顯示相應(yīng)的元素，選中復(fù)選框則顯示該元素，清除復(fù)選框則不顯示該元素。這些元素包括導(dǎo)航工具欄、地址工具欄、狀態(tài)欄、菜單條、需要時使用滾動條、調(diào)整大小手柄等。還可以在“窗口名稱”文本框中為新打開的瀏覽器窗口定義名稱。

“轉(zhuǎn)到URL”行為

“轉(zhuǎn)到URL”行為可在當(dāng)前窗口或指定的框架中打開一個新頁。此行為適用于通過一次單擊更改兩個或多個框架的內(nèi)容。單擊“行為”選項卡面板上的按鈕，在彈出的菜單中選擇“轉(zhuǎn)到URL”命令，打開“轉(zhuǎn)到URL”對話框，如圖8.17所示?！按蜷_在”列表自動列出當(dāng)前框架集中所有框架的名稱以及主窗口，如果沒有任何框架，則主窗口是唯一的選項?！癠RL”文本框在“URL”框中輸入該文檔的路徑和文件名或者單擊“瀏覽”按鈕，選擇鏈接目標(biāo)文檔。

“調(diào)用JavaScript”行為

“調(diào)用JavaScript”行為可以設(shè)置當(dāng)觸發(fā)事件時調(diào)用相應(yīng)的JavaScript代碼，以實現(xiàn)相應(yīng)的動作。選中網(wǎng)頁中要附加行為的元素，單擊“行為”選項卡面板上的按鈕，在彈出的菜單中選擇“調(diào)用JavaScript”命令，打開“調(diào)用JavaScript”對話框示。

在JavaScript文本框中可以輸入需要執(zhí)行的JavaScript代碼，或函數(shù)的名稱，單擊“確定”按鈕即可。8.6使用行為加載多媒體

可以利用行為控制網(wǎng)頁中的多媒體，包括確認(rèn)多媒體插件程序是否安裝、顯示隱藏元素、改變屬性等。

檢查插件

使用“檢查插件”行為，可以檢查在訪問網(wǎng)頁時，瀏覽器中是否安裝有指定插件，通過這種檢查，可以分別為安裝插件和未安裝插件的用戶顯示不同的頁面。

顯示-隱藏元素

給元素附加“顯示-隱藏元素”行為，可以顯示、隱藏或恢復(fù)一個或多個網(wǎng)頁元素的默認(rèn)可見性。此行為用于在進行交互時顯示信息。例如，將光標(biāo)移到一個圖像上時，可以顯示一個頁面元素，此元素給出有關(guān)該圖像的信息。