網(wǎng)設(shè)計(jì)與制作教案-第20講網(wǎng)特效-運(yùn)用行為一

第20講 網(wǎng)頁特效-運(yùn)用行為一教學(xué)目標(biāo)：?知識目標(biāo).理解行為、事件的含義。.熟練掌握行為的添加與刪除操作。.掌握觸發(fā)事件的更換方法。.理解JavaScript腳本的運(yùn)用。?技能目標(biāo)能運(yùn)用各自帶行為制作頁面動態(tài)效果?品質(zhì)目標(biāo)培養(yǎng)學(xué)生認(rèn)真細(xì)致、踏實(shí)進(jìn)取的精神1.2教學(xué)重點(diǎn)：.熟練掌握行為的添加與刪除操作。.掌握觸發(fā)事件的更換方法。教學(xué)難點(diǎn)理解行為、事件的含義，掌握觸發(fā)事件的更換方法教學(xué)方法：講練結(jié)合，任務(wù)驅(qū)動、分子任務(wù)操練課時安排：2課時教學(xué)對象分析：這個班學(xué)生具有基本專業(yè)技能，不僅僅是要教會他們方法，最重要的是教會他們的規(guī)范的動手能力與各種事件多方法的靈活處理能力，在保證全班同學(xué)教學(xué)進(jìn)度一致的情況上，培養(yǎng)學(xué)生較好的專業(yè)基礎(chǔ)與創(chuàng)新創(chuàng)作意識。教學(xué)過程：一、激趣導(dǎo)入，揭示課題行為的設(shè)置可以使網(wǎng)頁動起來，動的畫面可以引發(fā)同學(xué)們極高的興趣，抓住同學(xué)們感光趣的東西讓他們找失誤，在設(shè)置動作過程中想想為什么會有千差萬別的變化，不同的對象為什么設(shè)置的效果不同，設(shè)置懸念，讓同學(xué)們掌握應(yīng)該掌握的內(nèi)容。二、行為的基礎(chǔ)知識隨著JavaScript技術(shù)的發(fā)展，Dreamweavei將JavaScript的強(qiáng)大功能和簡單易用的拖放(Drag-and-drop)界面結(jié)合了起來。所謂行為(behavior)被定義為事件和動作的組合，即當(dāng)Web頁的瀏覽者做了某件事情后，隨之會有另外的事情發(fā)生，這個過程被稱為行為。由于基本上不需要編程，所以行為得到了廣泛的應(yīng)用。行為是基于JavaScript的，這一點(diǎn)很重要，因?yàn)槟壳暗母鞣N瀏覽器對JavaScript的支持程度不同。Dreamweaver簡化了對特定瀏覽器中JavaScript命令適用性的驗(yàn)證任務(wù)，你只需簡單地選擇希望控制動作的Web頁元素，同時從啟動檔(Launcher)中打開行為檢查器(BehaviorInspector)o行為(Behavior)可以說是DreamweaverMX2004中最有特色的功能，它可以讓你不用書寫一行JavaScript代碼即可實(shí)現(xiàn)多種動態(tài)頁面效果。行為的關(guān)鍵在于DreamweaverMX2004中提供了很多動作，其實(shí)就是標(biāo)準(zhǔn)的JavaScript程序，每個動作可以完成特定的任務(wù)。行為是Dreamweaver的靈魂，Dreamweaver的一個行為是由一個事件(Event)和一個動作(Action)結(jié)合而成的，我們可以應(yīng)用Dreamweaver行為控制面板來使用行為。

0.1Behaviors面板使用行為面板，可以為對象添加行為，還可以為以前添加的行為修改參數(shù)。在DreamweaverMX2004窗口中選擇“窗口/行為”(“Window/Behaviors”)命令或者是按下Shift+F3鍵，即可打開行為面板，如圖4-1所示。圖4-1行為控制面板顯示設(shè)置事件單擊“ ”僅顯示附加到當(dāng)前文檔的事件。顯示所有事件單擊“ "按字母降序顯示給定類別的所有事件。添加動作單擊“匕”彈出一個菜單，其中包含可以附加到當(dāng)前所選元素的動作?？梢赃x擇一個動作并將打開其相應(yīng)參數(shù)對話框，如圖4-2所示。刪除單擊"”從行為列表中刪除所選的事件和動作。上下箭頭按鈕單擊“八『”可以為特定的事件更改動作的順序。圖4-2動作菜單選擇一個行為項(xiàng)，可以通過單擊事件右邊的箭頭，打開一個菜單，為這個行為動作選擇不同的事件，如圖4-3所示。圖4-3事件菜單0.2事件和動作.事件每個瀏覽器都提供一組事件，這些事件可以與“行為”面板的“動作”（+）彈出菜單中列出的動作相關(guān)聯(lián)。瀏覽器響應(yīng)用戶的某個操作而生成一個事件，通常一個事件總是針對頁面元素或標(biāo)記而言。當(dāng)Web頁的訪問者與頁面進(jìn)行交互時（例如，單擊某個圖像），瀏覽器生成事件，這些事件可用于調(diào)用引起動作發(fā)生的JavaScript函數(shù)。沒有用戶交互也可以生成事件，例如設(shè)置頁每10秒鐘自動重新載入。如果要將行為附加到某個圖像，則一些事件（例如onMouseOver）顯示在括號中。這些事件僅用于鏈接。當(dāng)選擇其中之一時,Dreamweaver在圖像周圍使用a標(biāo)簽來定義一個空鏈接。在屬性檢查器的“鏈接”文本框中，該空鏈接表示為javascript:;。如果要將其變?yōu)橐粋€指向另一頁的真正鏈接，可以更改鏈接值，但如果刪除了JavaScript鏈接卻未用另一個鏈接來代替它，則將刪除該行為。.動作動作是由一段預(yù)先寫好的JavaScript代碼所組成，該代碼能執(zhí)行各種特殊任務(wù)，比如打開一個新的瀏覽器窗口、播放一段聲音、停止或者播放一ShockwaveMovie等。我們可以使用Dreamweaver的行為控制面板向頁面中添加JavaScript碼，而不需要自己書寫代碼，同時也可以對現(xiàn)有的代碼進(jìn)行修改。0.3選擇目標(biāo)瀏覽器的類型事件有很多種，不同的瀏覽器所能支持的事件不盡相同。在行為控制面板上單擊“+”按鈕，在下拉菜單中選擇“顯示事件”，可以選擇目標(biāo)瀏覽器的類型，所設(shè)置的行為只有在指定的類型瀏覽器上才能夠正常工作，如圖4-4所示。選擇的目標(biāo)瀏覽器確定給定的元素支持哪些事件。例如，對于每個元素，InternetExplorer4.0比NetscapeNavigator4.0或任何3.0版的瀏覽器具有更多的事件。圖4-4選擇瀏覽器類型0.4行為事件與各類瀏覽器的兼容性Dreamweaver的常用行為事件在不同版本的瀏覽器的支持程度是不同的，在表4-1給出了4種版本瀏覽器的兼容情況，我們通過了解，可以在頁面設(shè)計(jì)時能正確的使用這些事件。表中的NS6是NetscapeNavigator6.0的縮寫，IE6是InternetExplorer6.0的縮寫。表4-1行為事件與各類瀏覽器的兼容性事件 NS3NS4NS6IE4IE5IE6 事件的觸發(fā)時間onAbort 是是是是是是用戶中斷對象載入時

onAfterUpdate是是是對象完成對數(shù)據(jù)源的更新之后onBeforeUpdate是是是對象對數(shù)據(jù)源的更新之前onBlur 是是是是是是取消選中對象時onBounce是是是選取框中的內(nèi)容到達(dá)選取框邊界時onChange 是是是是是是更改頁面上的值時onClick 是是是是是是單擊對象onDblClick是是是是是雙擊對象onError 是是是是是是載入頁面或圖像期間出錯onFinish是是是選取框成分的內(nèi)容完成一個循環(huán)onFocus 是是是是是是選中指定對象時onHelp是是是調(diào)用幫助時onKeyDown是是是是是按下任意鍵時onKeyPress是是是是是按下并釋放任意鍵時onKeyUp是是是是是按下鍵后釋放時onLoad 是是是是是是圖像或頁面載入完成時onMouseDown是是是是是單擊時onMouseMove是是是光標(biāo)在指定對象上移動時onMouseOut是是是是是光標(biāo)離開指定對象時onMouseOver是是是是是是光標(biāo)剛開始指向指定對象時onMouseUp 是是是是是是釋放鼠標(biāo)onMove 是是是移動窗口或框架時onReadyStateChange是是是指定對象狀態(tài)改變時onReset 是是是是是是將表單重設(shè)為默認(rèn)值時onResize 是是是是是是重調(diào)瀏覽器窗口或框架大小時onRowEnter是是是綁定數(shù)據(jù)源的當(dāng)前記錄指針更改時onRowExit是是是綁定數(shù)據(jù)源的當(dāng)前記錄指針將要改變時onScroll是是是上下拖動瀏覽器窗口的滾動條時onSelect 是是是是是是選定文本框的文本時onStart是是是選擇框成分中的內(nèi)容開始一個循環(huán)時onSubmit 是是是是是是提交表單時onUnload 是是是是是是離開頁面時4.2使用行為行為可以附加給整個文檔或者是附加給鏈接、圖像、表單元素以及其他任彳咽丁乂1元素。Deamweaver中每個事件可以指定多于一個的動作，動作將按其在行為動作列表中的順序依次發(fā)生。給一個頁面添加行為的步驟如下：.選取一個特定的元素。例如一個文字鏈接或者一個圖片等等，行為將被加到此特定的元素上。.選擇你希望兼容的瀏覽器版本。因?yàn)椴煌臑g覽器支持的事件不相同，如果你希望更多的人能看到你做的效果，你必須選較低的瀏覽器選項(xiàng)。通常我們選擇IE4.0以上版本的瀏覽器。.選擇一個希望執(zhí)行的動作。例如交換圖片，隱藏一個層，或是在狀態(tài)欄顯示一段文字。菜單中灰顯的動作不可選擇。它們灰顯的原因可能是當(dāng)前文檔中缺少某個所需的對象。例如，如果文檔不包含Shockwave或MacromediaFlashSWF文件，則“控制Shockwave或Flash”動作為灰顯。如果所選的對象無可用事件，則所有動作都灰顯。.為上述的動作設(shè)定具體的參數(shù)。雖然Dreamweaver自帶的動作看起來有限，但通過設(shè)定不同的參數(shù)我們可以做出很復(fù)雜的效果。.觸發(fā)該動作的默認(rèn)事件顯示在“事件”欄中。如果這不是需要的觸發(fā)事件，請從“事件”彈出菜單中選擇另一個事件。若要打開“事件”彈出菜單，請?jiān)凇靶袨椤泵姘逯羞x擇一個事件或動作，然后單擊顯示在事件名稱和動作名稱之間的向下的黑色箭頭。0.5修改一個行為在附加了行為之后，可以更改觸發(fā)動作的事件、添加或刪除動作以及更改動作的參數(shù)。若要更改行為，方法如下：.選定與某個行為相連接的對象，選擇“窗口/行為”(“Window/Behaviors”)命令，打開行為面板。.根據(jù)需要進(jìn)行如下操作要刪除一個行為，先將其選中，然后單擊“一”按鈕即可；要改變一個動作的參數(shù)，可雙擊此行為，在彈出的對話框中修改各參數(shù)項(xiàng)，修改完畢后單擊OK按鈕；要更改給定事件的動作的順序，可選定這個行為，然后單擊面板上的向上或向下方向按鈕即可。Dreamweaver動作是經(jīng)過精心編寫的，以便在盡可能多的瀏覽器中發(fā)揮作用。如果從Dreamweaver動作中手工刪除代碼，或用自己的代碼將其替換，則可能會失去跨瀏覽器兼容性。0.6將行為附加到文本不能將行為附加到純文本。諸如p和span等標(biāo)簽不在瀏覽器中生成事件，因此無法從這些標(biāo)簽觸發(fā)動作。但是，可以將行為附加到鏈接。因此，若要將行為附加到文本，最簡單的方法就是向文本添加一個空鏈接(不指向任何內(nèi)容)，然后將行為附加到該鏈接上。請注意，如果這樣做，文本將顯示為鏈接狀態(tài)。如果實(shí)在不想讓它顯示為鏈接，可以更改鏈接顏色并刪除下劃線，但這樣站點(diǎn)訪問者可能不知道可以點(diǎn)擊該文本。若要將某個行為附加到所選的文本，方法如下：.在屬性檢查器的“鏈接”文本框中輸入JavaScript:;。一定要包括冒號和分號。如果愿意，可以在“鏈接”文本框中改用數(shù)字符號(#)。使用數(shù)字符號的問題在于當(dāng)訪問者單擊該鏈接時，某些瀏覽器可能跳到頁的頂部。單擊JavaScript空鏈接不會在頁上產(chǎn)生任何效果，因此JavaScript方法通常更可取。.在文本仍處于選中狀態(tài)時打開“行為”面板(“窗口/行為”)。.從“動作”彈出菜單中選擇一個動作，輸入該動作的參數(shù)，然后選擇一個觸發(fā)該動作的事件。0.7下載并安裝第三方行為Dreamweaver最有用的功能之一就是它的擴(kuò)展性，即它為精通JavaScript的用戶提供了編寫JavaScript代碼的機(jī)會，使他們可以通過代碼擴(kuò)展Dreamweaver的功能。在這些用戶中，很多人會選擇將他們的擴(kuò)展提交到MacromediaExchangeforDreamweaverWeb站點(diǎn)（/go/dreamweaver_exchange_cn/）與其他用戶共享。