《網(wǎng)頁設(shè)計與制作（第2版）》第11章 使用行為_第1頁
《網(wǎng)頁設(shè)計與制作（第2版）》第11章 使用行為_第2頁
《網(wǎng)頁設(shè)計與制作（第2版）》第11章 使用行為_第3頁
《網(wǎng)頁設(shè)計與制作（第2版）》第11章 使用行為_第4頁
《網(wǎng)頁設(shè)計與制作（第2版）》第11章 使用行為_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

行為是DreamweaverCS6內(nèi)置的腳本程序，在制作網(wǎng)頁時將JavaScript行為代碼放置到文檔中，瀏覽者就可以通過多種方式更改網(wǎng)頁或啟動某些任務(wù)。本章將介紹DreamweaverCS6內(nèi)置行為的基本使用方法。第11章使用行為學(xué)習(xí)目標(biāo)了解行為的基本概念。了解常用事件和動作。掌握添加行為的方法。掌握常用行為的應(yīng)用方法。11.1.1行為11.1.2事件11.1.3動作11.1 認(rèn)識行為11.1.1行為行為是某個事件和由該事件觸發(fā)的動作的組合，是用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。行為的基本元素有兩個：事件和動作。事件是觸發(fā)動作的原因，動作是事件觸發(fā)后的效果。對象是產(chǎn)生行為的主體，不同的事件為不同的對象所定義。例如，onMouseOver和onClick是與鏈接相關(guān)的事件，onLoad是與圖像和文檔相關(guān)的事件。行為代碼是客戶端JavaScript代碼，它運(yùn)行在瀏覽器中而不是服務(wù)器上。行為和動作屬于Dreamweaver術(shù)語，而非HTML術(shù)語。從瀏覽器的角度看，動作與其他任何一段JavaScript代碼并沒有什么不同。11.1.2 事件事件是由瀏覽器生成的消息，它提示該頁的瀏覽者已執(zhí)行了某種操作。例如，當(dāng)瀏覽者將鼠標(biāo)光標(biāo)移到某個鏈接上時，瀏覽器將為該鏈接生成一個onMouseOver事件，然后瀏覽器檢查在當(dāng)前頁面中是否應(yīng)該調(diào)用某段JavaScript代碼進(jìn)行響應(yīng)。不同的頁面元素定義不同的事件。例如，在大多數(shù)瀏覽器中，onMouseOver和onClick是與超級鏈接關(guān)聯(lián)的事件，而onLoad是與圖像和文檔的body部分關(guān)聯(lián)的事件。11.1.3 動作動作是一段預(yù)先編寫的JavaScript代碼，可用于執(zhí)行諸如以下的任務(wù)：打開瀏覽器窗口、顯示或隱藏AP元素、轉(zhuǎn)到URL等。在將行為附加到某個頁面元素后，當(dāng)該元素的某個事件發(fā)生時，行為即會調(diào)用與這一事件關(guān)聯(lián)的動作。例如，如果將【彈出信息】行為動作附加到一個鏈接上，并指定它將由onMouseOver事件觸發(fā)，則只要某人將鼠標(biāo)光標(biāo)放到該鏈接上，就會彈出相應(yīng)的信息。一個事件也可以觸發(fā)許多動作，用戶可以定義它們執(zhí)行的順序。11.2行為基本操作11.2.1【行為】面板11.2.2添加行為11.2.3編輯行為11.2.1【行為】面板DreamweaverCS6提供了一個專門管理和編輯行為的工具面板，即【行為】面板。通過【行為】面板，用戶可以方便地為文本、圖像等頁面對象添加行為，還可以修改以前設(shè)置過的行為參數(shù)。選擇菜單命令【窗口】/【行為】，可打開【行為】面板。使用【行為】面板可將行為附加到頁面元素。已附加到當(dāng)前所選頁面元素的行為顯示在【行為】面板列表中，并按事件以字母順序列出。如果同一事件引發(fā)不同的行為，這個行為將按執(zhí)行順序在【行為】面板中顯示。如果行為列表中沒有顯示任何行為，則表示沒有行為附加到當(dāng)前所選的頁面元素。11.2.2 添加行為在【行為】面板中添加行為的基本操作過程為：(1) 在頁面上選擇一個對象，如一個圖像或一個鏈接。如果要將行為附加到整個文檔，可在文檔窗口左下角的標(biāo)簽選擇器中單擊選中<body>標(biāo)簽。(2) 打開【行為】面板，單擊+按鈕，在彈出的下拉菜單中選擇一個要添加的行為動作。下拉菜單中灰色顯示的行為動作不可選擇。它們呈灰色顯示的原因可能是當(dāng)前文檔中缺少某個所需的對象。當(dāng)選擇某個動作時，將出現(xiàn)一個對話框，顯示該動作的參數(shù)和說明。(3) 在對話框中為動作設(shè)置參數(shù)，然后單擊【確定】按鈕關(guān)閉對話框。(4) 觸發(fā)該動作的默認(rèn)事件顯示在【事件】下拉列表中。如果這不是所需要的觸發(fā)事件，可從【事件】下拉列表中選擇需要的事件。11.2.3 編輯行為編輯行為的方法是，首先選擇一個附加有行為的對象，然后在【行為】面板中根據(jù)具體情況進(jìn)行以下相應(yīng)操作：? 如果要編輯動作的參數(shù)，可在【行為】面板的行為列表中雙擊動作的名稱，或?qū)⑵溥x中并按Enter鍵，也可單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【編輯行為】命令，打開相應(yīng)的對話框，在對話框中更改參數(shù)并確認(rèn)即可。? 如果要更改給定事件的多個動作的順序，可在【行為】面板的行為列表中選擇某個動作，然后單擊或按鈕。? 如果要刪除某個行為，可在【行為】面板的行為列表中將其選中，然后單擊按鈕或按Delete鍵即可。11.3 文本類行為11.3.1

教學(xué)案例━━只聞花香11.3.2

彈出信息11.3.3設(shè)置狀態(tài)欄文本11.3.1教學(xué)案例━━只聞花香將素材文檔復(fù)制到站點文件夾下，然后使用行為設(shè)置頁面，在瀏覽器中的顯示效果如圖11-4所示。11.3.2 彈出信息【彈出信息】行為顯示一個包含指定消息的提示框。在【行為】面板的【行為】下拉菜單中選擇【彈出信息】命令，可打開【彈出信息】對話框。在【消息】文本框中輸入文本，在輸入的文本中也可以嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其他表達(dá)式，如圖11-9所示。在嵌入JavaScript表達(dá)式時，需要將其放置在大括號“{}”中。如果要在瀏覽器中顯示大括號，需要在它前面加一個反斜杠，如“\{}”。11.3.3 設(shè)置狀態(tài)欄文本【設(shè)置狀態(tài)欄文本】行為將在瀏覽器窗口的狀態(tài)欄中顯示信息。在文檔中選擇如電子郵件超級鏈接對象后，在【行為】面板的【行為】下拉菜單中選擇【設(shè)置文本】/【設(shè)置狀態(tài)欄文本】命令，打開【設(shè)置狀態(tài)欄文本】對話框，根據(jù)需要輸入相應(yīng)內(nèi)容即可，最后在【行為】面板中設(shè)置觸發(fā)事件為“onMouseOver”。11.4 圖像類行為11.4.1

教學(xué)案例━━人生就是相逢11.4.2

交換圖像11.4.3恢復(fù)交換圖像11.4.4預(yù)先載入圖像11.4.1教學(xué)案例━━人生就是相逢將素材文檔復(fù)制到站點文件夾下，然后使用行為設(shè)置頁面，在瀏覽器中的顯示效果如圖11-11所示。11.4.2 交換圖像【交換圖像】行為可以將一個圖像替換為另一個圖像，這是通過改變圖像的SRC屬性來實現(xiàn)的。雖然也可以通過為圖像添加【改變屬性】行為來改變圖像的SRC屬性，但是【交換圖像】行為更加復(fù)雜一些，可以使用這個行為來創(chuàng)建翻轉(zhuǎn)的按鈕及其他圖像效果。選擇一幅圖像后，在【行為】面板的【行為】下拉菜單中選擇【交換圖像】命令，可打開【交換圖像】對話框。在【圖像】列表框中選擇要改變的圖像，然后設(shè)置其對應(yīng)的【設(shè)定原始檔為】選項，可根據(jù)需要確定是否選擇【預(yù)先載入圖像】和【鼠標(biāo)滑開時恢復(fù)圖像】選項。如果希望鼠標(biāo)光標(biāo)在經(jīng)過同一個圖像時，文檔中其他圖像也產(chǎn)生【交換圖像】行為，可在該對話框的【圖像】列表框中繼續(xù)選擇其他的圖像進(jìn)行設(shè)置。11.4.3 恢復(fù)交換圖像【恢復(fù)交換圖像】行為就是將交換后的圖像恢復(fù)為它們以前的源文件。在添加【交換圖像】行為時，如果沒有選擇【鼠標(biāo)滑開時恢復(fù)圖像】選項，以后可以通過添加【恢復(fù)交換圖像】行為達(dá)到這一目的。選中已添加【交換圖像】行為的對象，在【行為】面板的【行為】下拉菜單中選擇【恢復(fù)交換圖像】命令，可打開【恢復(fù)交換圖像】對話框，直接單擊【確定】按鈕即可。11.4.4 預(yù)先載入圖像【預(yù)先載入圖像】行為可以縮短顯示時間，其方法是對在頁面打開之初不會立即顯示的圖像進(jìn)行緩存，如那些將通過行為或JavaScript調(diào)入的圖像。在文檔中選擇一個對象，如在標(biāo)簽選擇器中選擇“<body>”標(biāo)簽，然后在【行為】面板的【行為】下拉菜單中選擇【預(yù)先載入圖像】，打開【預(yù)先載入圖像】對話框。單擊【瀏覽】按鈕，選擇一個圖像文件或在【圖像源文件】文本框中輸入圖像的路徑和文件名，然后單擊對話框頂部的+按鈕將圖像添加到【預(yù)先載入圖像】列表框中。按照相同的方法添加要在當(dāng)前頁面預(yù)先加載的其他圖像文件。如果要從【預(yù)先載入圖像】列表框中刪除某個圖像，可在列表框中選擇該圖像，然后單擊按鈕。最后在【行為】面板中設(shè)置觸發(fā)事件為“onLoad”。11.5 代碼屬性類行為11.5.1

教學(xué)案例━━深山村寨11.5.2

改變屬性11.5.3

調(diào)用JavaScript11.5.1教學(xué)案例━━深山村寨將素材文檔復(fù)制到站點文件夾下，然后使用行為設(shè)置頁面，在瀏覽器中的顯示效果如圖11-20所示。11.5.2 改變屬性【改變屬性】行為用來改變網(wǎng)頁元素的屬性值，如文本的大小和字體、層的可見性、背景色、圖片的來源以及表單的執(zhí)行等。在添加【改變屬性】行為時，通常需要先選中一個HTML元素，該元素最好設(shè)置了ID名稱，在打開【改變屬性】對話框后選擇該元素的類型，在【元素ID】下拉列表中會顯示該類型的所有標(biāo)識的元素。11.5.2 改變屬性然后根據(jù)實際需要設(shè)置【屬性】和【新的值】兩個選項，在【元素類型】下拉列表中選擇的元素類型不同，在【屬性】的【選擇】下拉列表中顯示的具體屬性也不同?？蓮摹緦傩浴肯吕斜碇羞x擇一個屬性，也可在【輸入】文本框中輸入該屬性的名稱，最后在【新的值】文本框中為新屬性輸入一個新值。只有在用戶非常熟悉HTML和JavaScript的情況下才能更好地使用此行為。為了實現(xiàn)動態(tài)效果，在【行為】面板中通常會添加兩個【改變屬性】行為，觸發(fā)事件分別為“onMouseOver”和“onMouseOut”。這樣在瀏覽網(wǎng)頁時，當(dāng)鼠標(biāo)光標(biāo)經(jīng)過對像時，對象會發(fā)生變化，鼠標(biāo)光標(biāo)離開時便恢復(fù)為原來的狀態(tài)。11.5.3 調(diào)用JavaScript【調(diào)用JavaScript】行為能夠在事件發(fā)生時執(zhí)行自定義的函數(shù)或JavaScript代碼行。用戶可以自己編寫JavaScript，也可以使用Web上各種免費的JavaScript庫中提供的代碼。在使用【調(diào)用JavaScript】行為時，需要在文檔中先選擇要觸發(fā)行為的對象，如帶有空鏈接的“關(guān)閉窗口”或“打印文檔”文本，然后從行為菜單中選擇【調(diào)用JavaScript】命令，打開【調(diào)用JavaScript】對話框，在【JavaScript】文本框中輸入JavaScript代碼，如“window.close()”或“window.print()”，用來關(guān)閉窗口或打印網(wǎng)頁文檔。在【行為】面板中確認(rèn)觸發(fā)事件已設(shè)置為“onClick”。在預(yù)覽網(wǎng)頁時，當(dāng)單擊“關(guān)閉窗口”或“打印文檔”超級鏈接文本時，就會彈出提示對話框或打印窗口，詢問用戶是否關(guān)閉窗口或打印文檔。11.6 跳轉(zhuǎn)類行為11.6.1

教學(xué)案例━━宋詞之美11.6.2

打開瀏覽器窗口11.6.3轉(zhuǎn)到URL11.6.1教學(xué)案例━━宋詞之美將素材文檔復(fù)制到站點文件夾下，然后使用行為設(shè)置頁面，在瀏覽器中的顯示效果如圖11-30所示。11.6.2 打開瀏覽器窗口使用【打開瀏覽器窗口】行為可在一個新的窗口中打開頁面。設(shè)計者可以指定這個新窗口的屬性，包括窗口尺寸、是否可以調(diào)節(jié)大小、是否有菜單欄等。例如，可以使用此行為在瀏覽者單擊縮略圖時在一個單獨的窗口中打開一個較大的圖像；使用此行為，可以使新窗口與該圖像恰好一樣大。在添加【打開瀏覽器窗口】行為時，需先選中一個對象，然后在【行為】面板的【行為】下拉菜單中選擇【打開瀏覽器窗口】命令，打開【打開瀏覽器窗口】對話框，根據(jù)需要進(jìn)行設(shè)置即可。11.6.3 轉(zhuǎn)到URL【轉(zhuǎn)到URL】行為可在當(dāng)前窗口或指定的框架中打開一個新頁。此行為適用于通過一次單擊更改兩個或多個框架的內(nèi)容。在添加【轉(zhuǎn)到URL】行為時，需先選中對象，然后在【屬性（HTML）】面板中為其添加空鏈接“#”。在【行為】面板的【行為】下拉菜單中選擇【轉(zhuǎn)到URL】命令，打開【轉(zhuǎn)到URL】對話框。在對話框的【打開在】列表框中選擇URL的目標(biāo)窗口，在【URL】文本框中設(shè)置要打開文檔的URL?！敬蜷_在】列表框自動列出當(dāng)前框架集中所有框架的名稱以及主窗口，如果沒有任何框架，則“主窗口”是惟一的選項。如果需要一次單擊更改多個框架的內(nèi)容，在【打開在】列表框中繼續(xù)選擇其他的目標(biāo)窗口，并在【URL】文本框中設(shè)置要打開文檔的URL即可。最后在【行為】面板中設(shè)置觸發(fā)事件為“onClick”。11.7 效果類行為11.7.1

教學(xué)案例━━美麗風(fēng)景11.7.2

效果11.7.1教學(xué)案例━━美麗風(fēng)景將素材文檔復(fù)制到站點文件夾下，然后使用行為設(shè)置頁面，在瀏覽器中的顯示效果如圖11-38所示。11.7.2 效果效果是視覺增

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論