Dreamweaver MX網(wǎng)頁(yè)設(shè)計(jì)與制作課件：行為與時(shí)間軸

行為與時(shí)間軸

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

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

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

3.1.2上機(jī)操作單擊【行為】浮動(dòng)面板上的按鈕，打開(kāi)下拉菜單為文本添加動(dòng)作。在下拉菜單中，選擇【檢查瀏覽器】動(dòng)作。

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

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

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)頁(yè)的跳轉(zhuǎn)菜單是文檔內(nèi)的彈出菜單，對(duì)站點(diǎn)訪問(wèn)者課件，并列出鏈接到文檔或文件的選項(xiàng)?？梢詣?chuàng)建到整個(gè)Web站點(diǎn)上文檔的鏈接、電子右鍵鏈接、到圖形的鏈接，也可以創(chuàng)建到可以在瀏覽器打開(kāi)的任何文件類型的鏈接。跳轉(zhuǎn)菜單可包含三個(gè)基本部分：（可選）菜單選擇提示，如菜單項(xiàng)類別說(shuō)明，或一些提示信息等。（可選）“前往”按鈕。（必需）所鏈接菜單項(xiàng)的列表：用戶選擇某個(gè)選項(xiàng)，則鏈接的文檔或文件被打開(kāi)。

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

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

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

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

3.4拖動(dòng)層：拼圖游戲3.4.1基本概念

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

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

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

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

|【拖動(dòng)層】

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

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

true；”

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

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

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

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

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

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

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

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

3.6.1基本概念

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

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

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

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

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

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

3.8.1基本概念

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

對(duì)嵌套層添加行為l

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

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

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

3.9.1基本概念

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

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

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

左擊時(shí)間線的最后一幀?；氐骄庉嫶翱趦?nèi)，拖動(dòng)層至頂端，使Layer2的最下端在Layer1的最上端以上。有一條直線連接在Layer2的左上角

播放時(shí)間軸Timeline1

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

3.10總結(jié)提高

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

3.11本章習(xí)題

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