行為與時間軸

●了解行為的含義●掌握添加行為的方法●了解行為的類型●掌握網(wǎng)頁動畫的基本制作本章學(xué)習(xí)知識點3.1檢查瀏覽器：自動鏈接主頁本章內(nèi)容目錄3.2跳轉(zhuǎn)菜單：網(wǎng)絡(luò)導(dǎo)航3.3播放音樂：在線音樂點播3.4拖動層：拼圖游戲3.5顯示－隱藏層：情人節(jié)禮物3.6時間軸的應(yīng)用：飛翔3.7時間軸的應(yīng)用：倒計時牌3.8行為與層技術(shù)結(jié)合：下拉式導(dǎo)航欄本章內(nèi)容目錄3.9時間軸與行為的結(jié)合：滑出式正文區(qū)3.10本章小結(jié)3.11本章習(xí)題3.1檢查瀏覽器：自動鏈接主頁

3.1.1基本概念Dreamweaver的行為是運行在網(wǎng)頁瀏覽器中的Javascript代碼，設(shè)計者可以將這些行為放置在網(wǎng)頁文檔中。行為由事件和該事件所觸發(fā)的動作所組成，通過行為的設(shè)置可以方便瀏覽者與網(wǎng)頁之間進行交互。瀏覽者瀏覽網(wǎng)頁過程中，瀏覽器對瀏覽者的行為作出某種回應(yīng)，產(chǎn)生了消息，這就是事件。而動作是預(yù)先編寫好的JavaScipt代碼，由這些代碼完成對事件的回應(yīng)。

Dreamweaver可以制作很多網(wǎng)頁特效，但是這些特效在一些低版本的瀏覽器中無法正常顯示，甚至干擾瀏覽者用戶正常地閱讀網(wǎng)頁內(nèi)容。檢查瀏覽器操作可以自動地對瀏覽者的瀏覽器版本進行判斷，這樣可以為不同的瀏覽者訂做不同的顯示效果，讓所有到網(wǎng)頁的客人都感到滿意。插入表格，在表格內(nèi)插入文字，并為文字插入“#”虛擬鏈接

3.1.2上機操作單擊【行為】浮動面板上的按鈕，打開下拉菜單為文本添加動作。在下拉菜單中，選擇【檢查瀏覽器】動作。

右擊事件欄下的【onLoad】，單擊右側(cè)出現(xiàn)按鈕，單擊【顯示事件】|【IE4.0】命令。再次單擊按鈕，打開下拉菜單，并且選擇【onClick】事件，意味著當(dāng)瀏覽者用鼠標(biāo)點擊這個鏈接時，將觸發(fā)檢查瀏覽器的動作

在打開的【檢查瀏覽器】對話框中選對這個動作進行設(shè)置。這里的設(shè)置基本上采用了默認(rèn)設(shè)置，即在正常狀態(tài)下，跳轉(zhuǎn)到默認(rèn)的URL地址；而當(dāng)瀏覽器版本過低，則跳轉(zhuǎn)備用URL地址。單擊【URL】對應(yīng)的文本框后的【瀏覽】按鈕，設(shè)置默認(rèn)跳轉(zhuǎn)網(wǎng)頁

3.2跳轉(zhuǎn)菜單：網(wǎng)絡(luò)導(dǎo)航

3.2.1基本概念跳轉(zhuǎn)菜單是非常重要的一種導(dǎo)航方式，經(jīng)常可以在商務(wù)網(wǎng)站中看到它為各種門類不同的商品制作導(dǎo)航。網(wǎng)頁的跳轉(zhuǎn)菜單是文檔內(nèi)的彈出菜單，對站點訪問者課件，并列出鏈接到文檔或文件的選項。可以創(chuàng)建到整個Web站點上文檔的鏈接、電子右鍵鏈接、到圖形的鏈接，也可以創(chuàng)建到可以在瀏覽器打開的任何文件類型的鏈接。跳轉(zhuǎn)菜單可包含三個基本部分：（可選）菜單選擇提示，如菜單項類別說明，或一些提示信息等。（可選）“前往”按鈕。（必需）所鏈接菜單項的列表：用戶選擇某個選項，則鏈接的文檔或文件被打開。

3.2.2上機操作在【插入】快捷工具欄中選擇【表單】，單擊【跳轉(zhuǎn)菜單】按鈕。單擊【窗口】|【行為】命令，打開【行為】浮動面板。鼠標(biāo)左鍵單擊編輯窗口內(nèi)的跳轉(zhuǎn)菜單，在行為面板中會出現(xiàn)設(shè)置好的行為。雙擊【行為】面板中【動作】欄下的【跳轉(zhuǎn)菜單】動作，重新彈出【跳轉(zhuǎn)菜單】對話框

3.3播放音樂：在線音樂點播3.3.1基本概念第一章介紹過在網(wǎng)頁中插入媒體的方法，而這里則介紹如何使用行為來播放音樂，提供給用戶與網(wǎng)頁交互的機制。3.3.2上機操作使用【地圖】工具中的【矩形熱點工具】和【圓形熱點工具】繪制地圖熱點

選中繪制好的矩形熱點地圖，單擊菜單【窗口】|【行為】，在【行為】浮動面板中單擊按鈕，并在下拉菜單中選擇第二項【播放聲音】。在彈出的【播放聲音中】，選擇擴展名為“.mid”的音樂文件。這里默認(rèn)的驅(qū)動動作發(fā)生的事件為【onClick】

在編輯窗口中出現(xiàn)插件圖標(biāo)

3.4拖動層：拼圖游戲3.4.1基本概念

層不僅是在制作網(wǎng)頁的過程中能夠被設(shè)計師拖動，在網(wǎng)頁生成后，層以及層中插入的內(nèi)容也可以隨之被移動。這樣，層就能夠被用來完成不同的任務(wù).

在拼圖過程中，網(wǎng)頁可以根據(jù)拼圖放置的位置，在50像素區(qū)域內(nèi)表示有效；而在拼圖完成后，網(wǎng)頁能通過JavaScript代碼對拼圖結(jié)果做出正確與否的判斷。

3.4.2上機操作給出一幅原始的圖像，作為參照物；繪制一個藍色的背景區(qū)域，提示讀者將拼圖圖片放置于目標(biāo)的藍色區(qū)域位置使用Fireworks或者其它軟件，將原始的圖片切割成不同的部分。繪制層，并且將之前切割出來的每一個小圖片插入到層中移動層，拖動剛插入的三個層到正確的位置上，在接下來的步驟要添加行為，所以要盡量地準(zhǔn)確。插入JavaScript腳本。將光標(biāo)重新置于右上角插入三個層的單元格內(nèi)，選擇【插入】快捷欄中的【腳本】按鈕。彈出如圖3.17所示的對話框，在【語言】下拉菜單中選擇【JavaScript】，并且在【內(nèi)容】文本框中定義變量。代碼內(nèi)容為“v_Layer2=false;v_Layer3=false;v_Layer4=false;”。

添加拖動層行為。在編輯窗口左下角單擊【body】標(biāo)簽選中整個頁面，在菜單中選擇【窗口】|【行為】

|【拖動層】

設(shè)置“拖動層”動作的參數(shù)。在彈出的【拖動層】對話框中設(shè)置拖動層行為的基本參數(shù)，如圖3.19所示。首先選擇層為“Layer2”，單擊【取得目前位置】按鈕

按圖3.19所示步驟3所示，單擊【高級選項卡】，設(shè)置“拖動層”的高級參數(shù)。其中【呼叫JavaScript】后的文本框中需要填入“v_Layer2=false；”，而在【放下時：呼叫JavaScipt】后的文本框中填入“v_Layer2＝

true；”

重復(fù)上述步驟，為三個層添加“拖動層”動作

插入一個按鈕。在網(wǎng)頁右下角的表格內(nèi)插入一個表單按鈕。由于這里只是用按鈕來觸發(fā)一段JavaScript腳本，所以不需要用到表單。在此就不必插入<form>標(biāo)簽，當(dāng)出現(xiàn)提示詢問是否需要添加表單標(biāo)簽，請選擇【否】

為按鈕添加【調(diào)用JavaScript】行為，文本框中輸入腳本：if(v_Layer2==true&&v_Layer3==true&&v_Layer4==true)confirm("拼圖正確");

elsealert("拼圖錯誤,再試一下");

打亂三個層，為網(wǎng)頁游戲的瀏覽者制造一些難度，增加游戲的樂趣

讀者根據(jù)本教材提供的素材，完成拼圖其它部分的制作，最終的效果如圖所示。3.5顯示－隱藏層：情人節(jié)禮物

3.5.1基本概念“顯示－隱藏層”動作顯示、隱藏或恢復(fù)一個或多個層的默認(rèn)可見性。此動作用于在用戶與頁進行交互時顯示信息。“顯示－隱藏層”還可用于創(chuàng)建預(yù)先載入層，即一個最初擋住頁的內(nèi)容的較大的層，在所有頁組件都完成載入后該層即消失所有通過層可以設(shè)置的效果都可以通過“顯示－隱藏層”設(shè)置出突然顯示的效果，可以給瀏覽者一種意想不到的效果。3.5.2上機操作通過設(shè)置[頁面屬性]來修改網(wǎng)頁背景結(jié)合第一章制作“焰火晚會”的方法，添加JavaApplet到網(wǎng)頁中之后添加一個表單按鈕，作為焰火的觸發(fā)器。但鼠標(biāo)單擊按鈕后，JavaApplet開始工作，顯示焰火效果繼續(xù)添加【顯示－隱藏層】動作。鼠標(biāo)左鍵單擊【按鈕】按鈕，打開【行為】浮動面板，添加“顯示－隱藏層”動作。設(shè)置事件為“onClick”，發(fā)生行為為顯示層Layer1

當(dāng)網(wǎng)頁瀏覽者單擊此按鈕后，觸發(fā)焰火的效果，就可以的到一份意外的驚喜。3.6時間軸的應(yīng)用：飛翔

3.6.1基本概念

時間軸的作用非常重要，在靜態(tài)的網(wǎng)頁中，雖然沒有ASP代碼為網(wǎng)頁提供數(shù)據(jù)庫的支持，也不象JavaApplet通過程序來實現(xiàn)動態(tài)圖景的變換。時間軸只是簡單地把網(wǎng)頁中的內(nèi)容記錄先來，把內(nèi)容的位置，大小記錄到時間軸面板中，這樣在網(wǎng)頁生成后，就按照播放動畫片的形式，以每秒固定的播放幀數(shù)來進行圖像放映，達到動態(tài)的效果。時間軸的作用就是在網(wǎng)頁中制作動畫，使用時間軸創(chuàng)建的動畫要比ActiveX、擴展插件或者JavaApplet等更加有效，腳本代碼運行更穩(wěn)定。

3.6.2上機操作設(shè)置背景圖像插入４個層，并且在層中插入圖像，為這個飛翔網(wǎng)頁中添加演員在事件軸內(nèi)插入對象。在【屬性】面板下有一個【時間軸】面板，平時都處于關(guān)閉狀態(tài)，此時左擊【時間軸】文字，隨機其面板彈起。將層Layer3和層Layer4拖動到時間軸內(nèi)。方法是左擊各個層左上角的標(biāo)簽，按住不要松手，拖動至?xí)r間軸面板內(nèi)合適的位置

調(diào)整時間軸添加【播放時間軸】行為，單擊事件欄內(nèi)的按鈕，打開下拉菜單，并且選擇【onLoad】事件

3.7時間軸的應(yīng)用：倒計時牌

3.7.1基本概念與嘗試使用一個時間軸控制頁面上的所有操作相比，使用單獨的事件軸分別用來控制頁面中不同的離散的部分會更容易一些。比如一個頁面中有很多的活動元素，每個元素的觸發(fā)條件都是不同的。這一節(jié)演示多個時間軸的協(xié)調(diào)、連續(xù)工作。3.7.2上機操作創(chuàng)建四個層，在層內(nèi)分別寫入“1”“2”“3”“4”“發(fā)射！！”

設(shè)置行為，當(dāng)裝載網(wǎng)頁的時候，將除“３”以外的各個層都隱藏設(shè)置時間軸，當(dāng)一段時間后，交替地隱藏層3.8行為與層技術(shù)結(jié)合：下拉式導(dǎo)航欄

3.8.1基本概念

網(wǎng)頁在展示中往往遇到面積有限的問題，如何在一個窗口大的區(qū)域內(nèi)插入更多的導(dǎo)航呢？使用下拉式菜單是一個很好的選擇。這種菜單平時是折疊收緊的，只有瀏覽者進行了某種操作的時候，菜單才打開。l

對嵌套層添加行為l

使用時間軸對下拉速度進行限制3.8.2上機操作繪制嵌套層插入表格和文字。在父層中插入表格，并設(shè)置寬度和高度以及背景，然后在表格內(nèi)為文字設(shè)置好樣式

設(shè)置子層,添加文本。并且將子層添加到時間軸上。打開【時間軸】面板，按鼠標(biāo)左鍵拖動子層，也就是Layer2，拖動到時間軸的合適位置后，松開左鍵后則添加完畢

添加多個時間軸，并且重復(fù)以上的步驟3.9時間軸與行為的結(jié)合：滑出式正文區(qū)

3.9.1基本概念

時間軸和行為配合使用，可以制作互動性強，表現(xiàn)形式也更為豐富的網(wǎng)頁。現(xiàn)在制作“滑出正文區(qū)”來把這Dreamweaver兩大核心技術(shù)用到一起。

如果正文慢慢浮現(xiàn)在屏幕上，再結(jié)合適合文字的音樂作為背景，確能提高瀏覽者對網(wǎng)頁的興趣。3.9.2上機操作插入嵌套層插入一幅背景圖像

在子層中插入文本，并且設(shè)置文本屬性。并且將子層移動到父層的最下方：子層的頂端與父層的底端平齊。打開【時間軸】面板。將子層拖入到時間軸面板中，并且拖動時間線到第400幀

左擊時間線的最后一幀。回到編輯窗口內(nèi)，拖動層至頂端，使Layer2的最下端在Layer1的最上端以上。有一條直線連接在Layer2的左上角

播放時間軸Timeline1

的行為添加【停止時間軸】行為，設(shè)置事件為“onMouseOver”。繼續(xù)添加【播放事件軸】設(shè)置事件為“onMouseOut”

3.10總結(jié)提高

本章通過講述“行為”和“時間軸”的應(yīng)用實例，介紹給了讀者大部分的“行為”操作。但是這里要提醒讀者使用“行為”的時候要注意確保合理和恰當(dāng)，建議讀者在同一個網(wǎng)頁中不要使用過多的“行為”。這里主要是因為“行為”其本質(zhì)是代碼，當(dāng)同時使用多個行為時，難免會出現(xiàn)個別變量在不同的行為中重復(fù)使用造成沖突，結(jié)果造成網(wǎng)頁無法正常顯示。而時間軸動畫主要是通過設(shè)置隨時間變化的層的位置、大小、可見性和疊放順序來創(chuàng)建動畫。

3.11本章習(xí)題

（1）一個行為是由________和________兩部分組成