7 行為和時間軸

1、第七章 行為和時間軸 1內(nèi)容簡介： 行為和時間軸是Dreamweaver MX為增強頁面效果、提高設(shè)計人員工作效率提供的功能，其實質(zhì)是在頁面上自動生成JavaScript函數(shù)，實現(xiàn)頁面上的交互和簡單動畫功能。 2學(xué)習(xí)目標：熟練掌握創(chuàng)立行為和時間軸的根本方法； 掌握常用行為和事件的應(yīng)用，以及常用時間軸動畫的設(shè)計；了解利用行為和時間軸定義所對應(yīng)的JavaScript函數(shù)及其調(diào)用。3JavaScript腳本的應(yīng)用改善了網(wǎng)頁的交互性能和顯示效果，但是程序代碼的編寫和調(diào)式限制了它的廣泛應(yīng)用。為了簡化頁面上JavaScript腳本的開發(fā)過程并提高工作效率，Dreamweaver MX提供了行為功能。行為是

2、Dreamweaver MX預(yù)置的JavaScript程序庫。使用行為，使得網(wǎng)頁制作人員不用編程就能夠?qū)崿F(xiàn)一些程序動作。 471 行為的事件和動作在Dreamweaver MX中設(shè)計行為是通過行為面板來實現(xiàn)的 .翻開行為面板，在行為面板中按下“增加行為按鈕，就展開行為面板菜單 5經(jīng)常用到的幾個動作主要是：播放聲音、彈出信息、交換圖象、翻開瀏覽器窗口、顯示一隱藏層等。常用的事件主要有以下幾種：onLoad：當頁面圖片被載入后，onLoad事件被觸發(fā)；onClick：當在頁面上單擊鼠標時，onClick事件被觸發(fā)；onMouseOver：當鼠標被移入頁面元素的上，onMouseOver事件被觸發(fā)；

3、onMouseOut：當鼠標移出頁面元素時，onMouseOut事件被觸發(fā)。 6實例1 彈出信息 新建網(wǎng)頁窗口添加彈出信息動作7添加第二個彈出信息動作8輸入文本信息972 行為應(yīng)用實例 一、 設(shè)置狀態(tài)欄文字 實例2 設(shè)計當翻開網(wǎng)頁頁面時在瀏覽器狀態(tài)欄中顯示歡送詞翻開一個音樂網(wǎng)頁點擊“增加行為按鈕，在面板菜單中選擇“設(shè)置文本設(shè)置狀態(tài)條文本，翻開設(shè)置狀態(tài)條對話框。 1011在消息欄中輸入文本 12事件列選擇OnLoad，動作列顯示的是“顯示狀態(tài)條文本，表示當文擋載入時瀏覽器狀態(tài)欄中顯示定義的文本 按F12鍵在瀏覽器中瀏覽效果13實例3 翻開新瀏覽器窗口新建一個網(wǎng)頁14翻開上個實例的網(wǎng)頁15添加翻開

4、瀏覽器窗口設(shè)置Doublclick Me!文字顏色為綠色、加下劃線、設(shè)置連接“#在行為面板添加 “翻開瀏覽器窗口行為動作，翻開對話框：16觸發(fā)事件設(shè)置為onDblClick，即當鼠標雙擊文本的時候，彈出新的瀏覽器窗口。1718三、制作彈出式菜單菜單的好處在于可以把很多暫時不需要的命令隱藏起來，只有當鼠標點擊菜單條時，才能以下拉菜單的形式顯示這些隱藏的命令。Dreamweaver MX中提供的“顯示彈出菜單和“隱藏彈出菜單就能夠設(shè)計這樣的菜單效果。19實例4 彈出式菜單(一)新建一個網(wǎng)頁在頁面上輸入網(wǎng)頁標題文字和說明文字，并插入一個14的表格，表格中輸入站點類別信息： 2021選中單元格中文本“

5、音樂和娛樂，在屬性檢查器中將連接地址設(shè)定為“#，并選中該文字鏈接；在行為面板中，翻開“顯示彈出式菜單對話框；22設(shè)定菜單工程 23外觀選項卡設(shè)置如下：24切換到“高級頁，設(shè)定彈出式菜單無邊框，其他工程為默認值。無邊框25切換到位置頁，設(shè)定“菜單位置為第二項，即“低于且位于觸發(fā)器的左邊緣 ；下面的“X、“Y欄用于指定菜單相對于文字鏈接左上角的位置，這里設(shè)置如圖；然后選中“在發(fā)生onMouseOut事件時隱藏菜單選項26此時控制面板窗口同時增加了兩項行為：按同樣步驟分別為文字“網(wǎng)絡(luò)媒體、“學(xué)校資源和“軟件資源創(chuàng)立出彈出菜單。27保存文件，在瀏覽器中瀏覽彈出菜單的效果。28實例5 彈出式菜單（二）新

6、建網(wǎng)頁文件在頁面上輸入網(wǎng)頁標題文字和說明文字，并插入一個14的表格，表格中輸入站點類別信息：2930添加層對象：先在網(wǎng)頁中添加一個層對象要為網(wǎng)絡(luò)導(dǎo)航的每個類別加上相應(yīng)的站點列表，為了實現(xiàn)想要得到的彈出菜單的效果，我們采用層對象來排布網(wǎng)站列表。添加表格為了整齊地排列站點列表，在層中插入一個51的表格。3132編輯站點列表和表格屬性33編輯層對象把層對象移動到站點類別的表格中對應(yīng)的單元格的下方，保持層對象和上面的表格有一定的重疊局部。為層取名為“amuse。添加動作首先選中“音樂和娛樂所在單元格，在行為浮動面板上，單擊添加按鈕，選擇“顯示-隱藏層動作，翻開顯示-隱藏層對話框。選中層amuse，單擊

7、顯示按鈕，設(shè)置該層可見。浮動面板上出現(xiàn)了第一個動作，該動作觸發(fā)事件是onMouseOver(鼠標移上)。 還是選中“音樂和娛樂所在單元格，同樣翻開顯示-隱藏層對話框。選中層amuse，單擊隱藏按鈕，設(shè)置本動作的功能是隱藏該層對象。浮動面板上出現(xiàn)了第二個動作，修改該動作觸發(fā)事件為onMouseout(鼠標移出)。3435選中層對象，在對應(yīng)的浮動面板中，設(shè)置層的顯示項為Hidden，即層對象初始的可見性為隱藏 為層添加動作選中amuse層對象，然后在行為面板中，為這個層對象添加兩個顯示-隱藏層動作。第一個動作是使amuse可見，觸發(fā)事件是onMouseOver。然后再添加一個使amuse層隱藏的顯

8、示-隱藏層動作，觸發(fā)事件設(shè)為onMouseOut。36添加其它站點列表37保存文件，瀏覽顯示最終效果。38四、檢查表單Dreamweaver MX的內(nèi)置行為中提供了一個“檢查表單的行為，目的是在用戶提交數(shù)據(jù)前檢查數(shù)據(jù)的合法性。 39實例 6 你填對了嗎？第一局部：我的注冊表-根本表單制作40第二局部：創(chuàng)立“檢查表單行為對表單數(shù)據(jù)進行合法性檢查添加動作選中網(wǎng)頁中的提交按鈕，添加一個檢查表單動作 414243設(shè)置username域檢查44設(shè)置truename域檢查45設(shè)置year域檢查46設(shè)置month域檢查47設(shè)置day域檢查48設(shè)置intro域檢查49設(shè)置password域檢查50 存盤預(yù)覽當

9、直接單擊提交按鈕時：51當成心將出生年月填錯：5273 時間軸動畫設(shè)計一、時間軸面板在Dreamweaver MX中提供了圖形化操作來定義動畫，這種操作是在時間軸面板中定義時間軸。使用動態(tài)HTML來改變層的屬性，或者隨時間來改變關(guān)鍵幀中圖象的屬性。5354時間軸下拉列表框：時間軸下拉列表框指定當前在時間軸面板中顯示文檔的哪個時間軸。在當前文檔中定義的所有時間軸都會在這個下拉列表中列出。行為通道：應(yīng)該在時間軸中特定幀處執(zhí)行的行為通道。播放欄：顯示當前在文檔窗口中顯示時間軸的哪一幀。動畫條：顯示每個對象的動畫的持續(xù)時間。倒帶：將播放欄移至?xí)r間軸中的第一幀。后退：將播放欄向左移動一幀。當前幀：指明當

10、前播放的幀數(shù)。55播放：將播放欄向右移動一幀。單擊“播放并按住鼠標可向前播放時間軸。動畫通道：顯示用于制作層和圖象動畫的動畫條。每秒幀數(shù)（fps）指示每秒鐘動畫播放的幀數(shù)。 自動播放：選中此項，當前頁在載入瀏覽器時即自動播放時間軸。 關(guān)鍵幀：動畫條中已經(jīng)為對象指定屬性（如位置）的幀。Dreamweaver MX會計算關(guān)鍵幀的中間值。小圓標記表示關(guān)鍵幀。 循環(huán)：選中此項，當前頁在載入瀏覽器時可以自動循環(huán)播放時間軸。56二、創(chuàng)立層動畫 時間軸主要用于創(chuàng)立和定義以層對象為基礎(chǔ)的網(wǎng)頁動畫，其的作用和功能特色為：它突破了GIF、Flash動畫等網(wǎng)頁動畫等網(wǎng)頁動畫只能在對象內(nèi)部展現(xiàn)動畫內(nèi)容的局限，使得設(shè)計

11、者可以在整個網(wǎng)頁范圍內(nèi)來建立動畫效果。通過時間軸工具和行為工具的結(jié)合使用，可以在網(wǎng)頁中建立帶有交互能力的動畫對象。Dreamweaver MX中通過時間軸工具生成的動畫是由JavaScript語句來建。Dreamweaver MX將自動生成動畫的源代碼，而不需要網(wǎng)頁編輯人員手動編輯，使得網(wǎng)頁編輯工作大大簡化。57實例7 動畫文字新建網(wǎng)頁文件58插入層對象59插入文本內(nèi)容60翻開時間軸浮動面板61添加動畫對象方法一：用鼠標拖拽層對象，將其拖拽到時間軸浮動面板中；方法二：選中層對象，用鼠標右鍵單擊層對象，在彈出菜單中選擇“添加對象；方法三：選中層對象，在時間軸浮動面板的第一幀的位置單擊鼠標右鍵，在

12、彈出菜單中選擇“添加對象。6263調(diào)整動畫長度64設(shè)置動畫起點65添加關(guān)鍵幀、設(shè)置關(guān)鍵幀位置6667設(shè)置播放方式68預(yù)覽動畫效果69添加第二個動畫對層對象添加第二個動畫，在原來的時間軸動畫后面添加一個默認長度為15幀的動畫對象。設(shè)置層對象屬性將當前幀設(shè)為46幀（即剛剛添加的動畫的第一幀），在浮動面板中，將層對象的顯示設(shè)置為Visible(可見)。7071在53幀處添加一個關(guān)鍵幀，并且在屬性浮動面板中設(shè)置網(wǎng)頁中的層對象在此關(guān)鍵幀處的可見性（顯示）為Hidden（隱藏）。72添加動作用鼠標點中時間軸浮動面板上標記為B欄處的第60幀的位置。然后在行為浮動面板上添加一個讓時間軸轉(zhuǎn)到某一幀的動作。737

13、475預(yù)覽修改文件存盤，預(yù)欄動畫效果。76實例8 網(wǎng)頁小天使翻開網(wǎng)頁文件：翻開實例7動畫文字網(wǎng)頁文件77 添加時間軸在時間軸浮動面板上單擊鼠標右鍵，在彈出的快捷菜單中，選擇“添加時間軸，向網(wǎng)頁添加一個新時間軸對象。78添加層對象79添加圖片80創(chuàng)立時間軸動畫81預(yù)覽動畫效果82調(diào)整動畫83錄制動畫路徑刪除建立好的小天使的時間軸動畫。在時間軸浮動面板中選中Timeline2中小天使的整個時間線動畫對象，然后單擊鼠標右鍵，在彈出的快捷菜單中，選擇刪除，刪除該動畫對象。讓小天使從網(wǎng)頁的右邊出來，將小天使的層對象，拖動到網(wǎng)頁的右邊隱藏起來。然后，在時間線浮動面板上，將當前幀設(shè)置為46幀，然后單擊鼠標右

14、鍵，在彈出的快捷菜單中，選擇“錄制層路徑。8485用鼠標拖拽小天使所在的層對象在網(wǎng)頁上移動，Dreamweaver MX會自動記錄下層對象運動的軌跡，作為動畫的路徑。86最終效果87實例9 圖象動畫圖象動畫是指可以切換顯示不同的動畫效果。制作這種效果，一般先在頁面內(nèi)插入一個圖象，然后為時間軸添加一個對象；在動畫條中添加關(guān)鍵幀，在關(guān)鍵幀處改變圖象的源，即可實現(xiàn)圖像的動畫。新建文件向頁面中插入一副圖像用鼠標拖動頁面上的圖像，將其放到時間軸面板中的第幀上。8889將15幀拉到60幀處，并在每10幀增加一個關(guān)鍵幀，并在每個關(guān)鍵幀處重新在屬性面板源文件欄處選擇新圖片文件。90選擇“自動播放和“循環(huán)選項，

15、瀏覽效果。91實10 滾動動畫92新建文件插入層層Layer1寬600px，高45px，在屬性面板上，將其屬性“溢出的值設(shè)為“Hidden，即當層中的內(nèi)容超過邊界時就隱藏。并設(shè)層背景為粉色。插入子層在Layer1中插入一子層Layer2，高度與Layer1同，“溢出欄選擇“visible，然后將光標放入到層Layer2中，錄入文本“北京電大，設(shè)置文字樣式。9394調(diào)整位置將層Layer2放到層外（被隱藏）。若Layer2寬度為140px，則其左邊距設(shè)置為-140px。95添加動畫對象用鼠標拖拽層Layer2對象，將其拖拽到時間軸浮動面板中。在結(jié)束關(guān)鍵幀上，將層Layer2對象拖拽到層Layer1右面，即設(shè)置層Layer2“左邊位置為6