DW 交互(行為,javascript,時間軸).ppt

1、第8章交互,8.1利用行為制作動態(tài)頁面 8.2層和時間軸的綜合應(yīng)用 8.3在網(wǎng)頁中應(yīng)用javascript,8.1利用行為制作動態(tài)頁面,新課導(dǎo)入： 大家已經(jīng)會在網(wǎng)頁中制作一些簡單效果（如：鼠標(biāo)經(jīng)過圖象、腳本鏈接、插入背景音樂等），那具有特殊效果（如：彈出消息、檢查表單、設(shè)置導(dǎo)航文本、鼠標(biāo)的花瓣、棉花糖、下雪了、禮花綻放等）的動態(tài)網(wǎng)頁又是如何制作的呢？使用行為就可以實現(xiàn)。 教學(xué)目標(biāo)：熟練地應(yīng)用行為、層和時間軸，能夠隨心所欲地制作出具交互功能的網(wǎng)頁；培養(yǎng)大家的動手操作能力。,情感目標(biāo)： 通過對行為的學(xué)習(xí)應(yīng)用，增加網(wǎng)頁設(shè)計的特殊效果，提高學(xué)生對學(xué)習(xí)網(wǎng)頁制作的興趣。 教學(xué)內(nèi)容： 1.行為的概念和行為面

2、板簡介 2.行為的創(chuàng)建 3.使用DW內(nèi)置的行為（教學(xué)重點(diǎn)難點(diǎn)） 4. 高級行為的應(yīng)用（教學(xué)難點(diǎn)） 5. 層、行為和時間軸的綜合應(yīng)用（教學(xué)難點(diǎn)） 6.Javascript腳本的使用 教學(xué)方法： 任務(wù)驅(qū)動、引導(dǎo)教學(xué)、理論與操作緊密結(jié)合。,1、DW行為的引出 動態(tài)網(wǎng)頁是通過JaveScript或基JaveScript的DHTML代碼來實現(xiàn)的。包含JaveScript腳本的網(wǎng)頁，還能夠?qū)崿F(xiàn)用戶與頁面的簡單交互；但是編寫腳本既復(fù)雜又專業(yè)。而DW提供的“行為” 機(jī)制，在可視化環(huán)境中，通過指定一個動作并且指定觸發(fā)這個動作的事件就可以實現(xiàn)豐富的動態(tài)頁面效果，實現(xiàn)人與頁面的簡單交互。,8.1.1初步認(rèn)識行為,2

3、、行為的概念 行為：行為就是一段預(yù)定義好的程序代碼，通過瀏覽器的解釋并響應(yīng)用戶操作的過程。它由事件和由該事件觸發(fā)的動作組成，被用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果、執(zhí)行特定的任務(wù)。例如：將鼠標(biāo)移到一幅圖像上產(chǎn)生了一個事件，如果圖像發(fā)生變化(前面介紹過的鼠標(biāo)經(jīng)過圖像)，就導(dǎo)致發(fā)生了一個動作。 與行為相關(guān)的三個重要部分是對象、事件和動作。,對象(Object)對象是產(chǎn)生行為的主體，很多網(wǎng)頁元素都可以成為對象，如圖片、文字、多媒體文件等，甚至是整個頁面。 事件(Event)事件是瀏覽器生成的消息，指示該頁的瀏覽者執(zhí)行了某種操作；是在特定時間或用戶在某時所發(fā)出的指令后緊接著發(fā)生的，是觸發(fā)動態(tài)效果的原

4、因。它可以被附加到各種頁面元素上，也可以被附加到HTML標(biāo)記中。,一個事件總是針對頁面元素或標(biāo)記而言的。例如：將鼠標(biāo)移到圖片上、把鼠標(biāo)放在圖片之外、單擊鼠標(biāo)(onMouseOver、 onClick 、onMouseOut、) ，是與鼠標(biāo)有關(guān)的三個最常見的事件。 onClick和onMouseOver是與鏈接關(guān)聯(lián)的事件，onload是與圖像和文檔的body部分關(guān)聯(lián)的事件。 不同的瀏覽器 支持的事件種類和多少是不一樣的，通常高版本的瀏覽器支持更多的事件。,Dreamweaver提供了許多常用的能夠觸發(fā)的動作的事件： onAbort：當(dāng)瀏覽器用戶中斷瀏覽器正在載入圖像的操作時產(chǎn)生。 onAfter

5、Update：當(dāng)網(wǎng)頁中的數(shù)據(jù)元素已經(jīng)完成源數(shù)據(jù)的更新時產(chǎn)生該事件。 onBeforeUpdate：當(dāng)網(wǎng)頁中的數(shù)據(jù)元素已經(jīng)改變并且就要和瀏覽器用戶失去交互時產(chǎn)生該事件。,Dw中的常見事件參看課本P161-162。,onBlur：當(dāng)指定元素不再被瀏覽器用戶交互時產(chǎn)生。 onBounce：當(dāng)字幕（Marquee）中的內(nèi)容移動到該字幕邊界時產(chǎn)生。 onChange：當(dāng)瀏覽器用戶改變網(wǎng)頁中的某個值時產(chǎn)生。 onClick：當(dāng)瀏覽器用戶在指定的元素上單擊時產(chǎn)生。 onDblClick：當(dāng)瀏覽器用戶在指定的元素上雙擊時產(chǎn)生。 onError：當(dāng)瀏覽器在網(wǎng)頁或圖像載入產(chǎn)生錯誤時產(chǎn)生。 onFinish：當(dāng)字幕

6、（Marquee）中的內(nèi)容完成一次循環(huán)時產(chǎn)生。 onFocus：當(dāng)指定元素被瀏覽器用戶交互時產(chǎn)生。 onHelp：當(dāng)瀏覽器用戶單擊瀏覽器幫助按鈕或選擇瀏覽器菜單中的幫助菜單項時產(chǎn)生。 onKeyDown：當(dāng)按下任意鍵的同時產(chǎn)生。,onKeyPress：當(dāng)按下和松開任意鍵時產(chǎn)生。 onKeyUp：當(dāng)按下的鍵松開時產(chǎn)生。 onLoad：當(dāng)一圖像或網(wǎng)頁載入完成時產(chǎn)生。 onMouseDown：當(dāng)瀏覽器用戶按下鼠標(biāo)時產(chǎn)生。 onMouseMove：當(dāng)瀏覽器用戶將鼠標(biāo)在指定元素上移動時產(chǎn)生。 onMouseOut：當(dāng)鼠標(biāo)從指定元素上移開時產(chǎn)生。 onMouseOver：當(dāng)鼠標(biāo)移動到指定元素時產(chǎn)生。 on

7、MouseUp：當(dāng)鼠標(biāo)彈起時產(chǎn)生。 onMove：當(dāng)窗體或框架移動時產(chǎn)生。 onReadyStateChange：當(dāng)指定元素的狀態(tài)改變時產(chǎn)生。 onReset：當(dāng)表單內(nèi)容被重新設(shè)置為缺省值時產(chǎn)生。 onResize：當(dāng)瀏覽器用戶調(diào)整瀏覽器或框架大小時產(chǎn)生。 onRowEnter：當(dāng)數(shù)據(jù)源的當(dāng)前記錄指針已經(jīng)改變時產(chǎn)生。,onRowExit：當(dāng)數(shù)據(jù)源的當(dāng)前記錄指針將要改變時產(chǎn)生。 onScroll：當(dāng)瀏覽器用戶使用滾動條向上或向下滾動時產(chǎn)生。 onSelect：當(dāng)瀏覽器用戶選擇文本框中的文本時產(chǎn)生。 onStart：當(dāng)字幕（Marquee）內(nèi)容開始循環(huán)時產(chǎn)生。 onSubmit：當(dāng)瀏覽器用戶提交表

8、格時產(chǎn)生。 onUnload：當(dāng)瀏覽器用戶離開網(wǎng)頁時產(chǎn)生。,動作(Action) 動作是由javascript代碼組成的，事件發(fā)生后，這些代碼執(zhí)行特定的任務(wù)，使網(wǎng)頁做出發(fā)應(yīng)。行為就是通過動作來完成動態(tài)效果的，如：圖片翻轉(zhuǎn)、打開瀏覽器、播放聲音都是動作。 當(dāng)web 的瀏覽者與頁進(jìn)行交互時，瀏覽器生成事件，這些事件可用于調(diào)用引起動作發(fā)生的javascrit函數(shù)。 一個事件可以同多個動作相關(guān)聯(lián)(1：n)，即發(fā)生事件時可以執(zhí)行多個動作。,DW內(nèi)置了20多個行為動作，好象是一個現(xiàn)成的JaveScript庫。除此之外，第三方廠商提 供了更多的行為庫，下載并在DW中安裝行為庫中的文件，可以獲得更多的可操作行

9、為。使用DW內(nèi)置的行為往頁面中添加JaveScript代碼時，就不必自己編寫代碼了。若熟悉JaveScript語言，也可以自行設(shè)計新動作，添加到DW中。,3、認(rèn)識行為面板 在DW中，對行為的添加和控制主要通過“行為”面板來實現(xiàn)。 選擇窗口行為命令，或shift+f4打開行為面板。,行為面板的使用 在行為面板上可以進(jìn)行如下操作： 單擊“+”按鈕，打開動作菜單，添加行為； 單擊“-”按鈕，刪除行為。添加行為時，從動作菜單中選擇一個行為項，單擊事件列右方的三角，打開事件菜單，可以選擇事件。 單擊向上箭頭或向下箭頭，可將動作項向前移或向后移，改變動作執(zhí)行的順序。,8.1.2行為的創(chuàng)建、修改和更新,對行

10、為的添加和控制主要通過行為面板來實現(xiàn)。 創(chuàng)建行為創(chuàng)建行為一般有三個步驟：先在頁面中選擇要添加行為的對象,再在行為面板中為之添加所需的動作,最后調(diào)整觸發(fā)動作的事件。 注意：一個對象可添加多個行為，多個行為以字母順序顯示在行為面板上。為了實現(xiàn)需要的效果，我們還可以指定和修改動作發(fā)生的順序。,修改行為 添加行為之后可以修改觸發(fā)動作的事件、添加或刪除動作、修改動作的參數(shù)。 編輯動作的參數(shù)可雙擊行為名稱或選中后按enter鍵 修改給定事件的多個動作順序，可選定動作后按上下箭頭按鈕，或剪切后在所需順序處粘貼。 要刪除行為，選定后按“-”按鈕或按del鍵 更新行為 不同版本的dw做好的網(wǎng)頁中如有行為，在另一

11、低版本中打開時一般不會自動更新。實現(xiàn)行為更新的步驟：選定一個對象，打開行為面板，雙擊行為后確定。,8.1.3使用DW內(nèi)置的行為,dw8.0自帶的行為動作，使用于4.0以上版本的瀏覽器，同一動作在不同的瀏覽器中支持的程度不同。 dw8.0自帶的行為主要有: 1.彈出消息 其動作回顯示一個帶有指定消息的只有“確定”按鈕的javascript警告窗口，警告窗口的外觀取決于瀏覽者的瀏覽器。功能類似于腳本鏈接.,2、“播放聲音”實例:制作音樂下載頁面。用播放聲音的動作，可以在網(wǎng)頁中播放聲音文件，如背景音樂，或單擊某個按鈕(文字或圖片)播放一段聲音。（1）給網(wǎng)頁添加背景音樂 打開一個網(wǎng)頁，單擊編輯窗口狀態(tài)

12、欄上的標(biāo)記，選中整個網(wǎng)頁。 打開行為面板，單擊“+”按鈕，在菜單中選擇“播放聲音”。 在彈出的菜單中輸入音樂文件的路徑，單擊“確定”。把事件調(diào)整為onLoad(載入頁面后)。（2）給圖片添加聲音，方法同上。,3、跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單開始 創(chuàng)建一個菜單對象并向其附加一個“跳轉(zhuǎn)菜單”（或“跳轉(zhuǎn)菜單轉(zhuǎn)到”）行為。 4、網(wǎng)頁中的變色按鈕（改變屬性）,5、打開瀏覽器窗口：用于制作網(wǎng)站的公告通告或者廣告宣傳、單擊縮略圖可以彈出一個放大圖像、規(guī)定鏈接目標(biāo)網(wǎng)頁的大小和外觀等。 在一個新的窗口中打開URL。 6、調(diào)用javascript “調(diào)用 JavaScript”動作允許讀者使用“行為”面板指定當(dāng)發(fā)生某個事件

13、時應(yīng)該執(zhí)行的自定義函數(shù)或 JavaScript 代碼行。熟悉html和javascript的情況下使用。,7、檢查表單 該動作主要是檢查指定文本域的內(nèi)容以確保用戶輸入了正確的數(shù)據(jù)類型。Onblur事件分別將動作添加給各個文本域，在用戶提交表單時分別對各個域進(jìn)行檢查；onsubmit事件將動作添加給表單，在用戶提交表單時同時對多個域進(jìn)行檢查。 選定單個域或form進(jìn)行添加檢查表單動作。,8、檢查插件 根據(jù)瀏覽者是否安裝了指定的插件，轉(zhuǎn)到不同的頁。 9、檢查瀏覽器 使用該動作可以獲得用戶瀏覽網(wǎng)頁所使用的瀏覽器類型，可根據(jù)瀏覽者不同的類型和版本的瀏覽器，可以給瀏覽者顯示不的網(wǎng)頁。 10、交換圖象與恢

14、復(fù)交換圖象 只要一個對象添加交換圖象，恢復(fù)交換圖象也添加給它,11、預(yù)先載入圖象：“預(yù)先載入圖像”動作將不會立即出現(xiàn)在頁上的圖像載入瀏覽器緩存中。 12、控制shockshave或flash 使用該動作可以播放、停止、后退或轉(zhuǎn)到shockshave或flashswf 文件中幀 13、設(shè)置導(dǎo)航欄圖像 設(shè)置該動作可以將某個圖像變?yōu)閷?dǎo)航欄圖像，或修改導(dǎo)航條中圖像的顯示和動作。 14、設(shè)置文本 A：設(shè)置框架文本 B：設(shè)置層文本,C：設(shè)置狀態(tài)欄文本 瀏覽器下端的狀態(tài)行通常顯示當(dāng)前狀態(tài)的提示信息，利用“設(shè)置狀態(tài)欄文本”行為，可 以重新設(shè)置狀態(tài)行信息。選中要附加行為的對象，如網(wǎng)頁的標(biāo)記，或一個鏈接。單擊行為

15、面板上的“+”按鈕，在打開的動作菜單。選擇“設(shè)置文本”“設(shè)置狀態(tài)文本”命令，在打開的“信息”對話框中輸入需要的文本。按F12鍵，可以看到打開網(wǎng)頁后，瀏覽器下端的狀態(tài)行上有了新輸入的信息。 D：設(shè)置文本域文本,15、顯示彈出菜單（下拉菜單） （參看課本p228-232頁，效果見實例站點(diǎn)中dianzixiangce.html ） 使用“顯示彈出菜單”行為來創(chuàng)建或編輯 Dreamweaver 彈出式菜單，或者打開并修改已插入 Dreamweaver 文檔的 Fireworks 彈出式菜單。 16、顯示和隱藏層（效果見實例站點(diǎn)中g(shù)uodu2.html 中“娛樂”和qqshiyishi.html中的qq

16、虛擬試衣室） 顯示隱藏層：“顯示隱藏層”動作顯示、隱藏或恢復(fù)一個或多個層的默認(rèn)可見性。此動作用于在用戶與頁進(jìn)行交互時顯示信息。,17、拖動層 18、轉(zhuǎn)到url “轉(zhuǎn)到 URL”動作在當(dāng)前窗口或指定的框架中打開一個新頁。 19、滾動鏈接的層,8.1.4高級行為的應(yīng)用,1、插入滾動字幕 瀏覽網(wǎng)頁時，有時會看到網(wǎng)頁中有些文字會循環(huán)往復(fù)的移動。這種動畫效果是如何制作的呢？當(dāng)然我們可以采用Gif動畫或者利用flash來實現(xiàn)，但是這種方式往往占用的空間比較大，而且不如HTML標(biāo)記來得那么簡單。這個標(biāo)記就是Marquee標(biāo)記，中文翻譯為“跑馬燈”。IE3.0以上版本的瀏覽器中支持這個HTML標(biāo)記，而NetS

17、cape則不支持。因此我們在設(shè)計網(wǎng)頁的時候需要考慮這個問題。,選擇“常用插入欄”的“標(biāo)簽選擇器”命令按鈕，打開標(biāo)簽選擇器窗口從中選擇“html標(biāo)簽”下的marquee標(biāo)簽，單擊“插入”就在頁面的代碼視圖中插入一個marquee標(biāo)簽，在行為面板中設(shè)置標(biāo)簽檢查器中的標(biāo)簽。,Marquee標(biāo)記的基本語法結(jié)構(gòu),Marquee標(biāo)記的基本語法結(jié)構(gòu)如下所示 ： 夜鷹電腦教學(xué)網(wǎng)，電腦愛好者的樂園,其中ALIGN可以用來指定滾動字幕與左右文字的對齊方式，它的值可以有top、middle、bottom等； behavior用來指定滾動字幕的滾動方式，它的屬性值有scroll、slide和alternate三個，s

18、croll表示滾動字幕內(nèi)容向同一方向重復(fù)滾動，slide表示滾動字幕內(nèi)容從一端向另一端滾動并在另一端停止，alternate表示滾動字幕內(nèi)容在兩端之間來回往復(fù)滾動；,direction指定滾動字幕的滾動方向，它的屬性值有l(wèi)eft和right兩個，分別表示滾 動字幕由右向左和由左向右滾動；SCROLLAMOUNT用來設(shè)置多次滾動之間的間隔距離，其 單位是pixels（像素）； scrolling用來指定滾動字幕滾動一次所需要的時間，單位是ms（千分之一秒）， 其值的大小將直接影響滾動字幕的滾動速度； LOOP屬性是用來指定滾動字幕的滾動次數(shù) 的，當(dāng)它的值為“1”時，滾動字幕將連續(xù)滾動直到瀏覽器載

19、入下一個頁面； HSPACE和 VSPACE則分別用來指定滾動字幕與其上一級頁面在水平方向和豎直方向上的距離。 示例：文本自動向上循環(huán)滾動，鼠標(biāo)放到上面還會暫停,2、下載安裝擴(kuò)展插件 3、下載網(wǎng)頁特效，適當(dāng)修改相關(guān)代碼，再把代碼放到代碼視圖的具體位置。 舉例：飄落的花瓣 鼠標(biāo)棉花糖,8.2時間軸,時間軸是flash制作的關(guān)鍵，dw中的時間軸式根基flash制作動畫的原理演化出來的。 1.時間軸面板,在時間軸面板中： 時間軸選單：顯示目前所編輯的時間軸名稱。 播放頭： 紅色的播放頭指示在網(wǎng)頁中顯示的是哪一幀。 動畫條：即圖中的Layer11，Layer12，可顯示每個層對象的持續(xù)時間。 關(guān)鍵幀：

20、動畫條中的小圓圈是關(guān)鍵幀。 幀數(shù)：顯示播放頭的位置。 ：回轉(zhuǎn)，可將播放頭移到時間軸的初始幀。 ：后退，將播放頭往左移動一幀。 ：前進(jìn)，將播放頭往右移動一幀。 FPS：播放速度。每秒種播放的幀數(shù)。 自動播放：當(dāng)網(wǎng)頁載入到瀏覽器時使當(dāng)前時間軸自動播放。 循環(huán)：當(dāng)網(wǎng)頁載入到瀏覽器時使當(dāng)前時間軸循環(huán)播放。,說明： 一個網(wǎng)頁中可以創(chuàng)建多個時間軸，每個時間軸上可以創(chuàng)建多個動畫對象，每個對象對于一個動畫條。同一個時間軸內(nèi)的動畫對象同時開始，同時結(jié)束，并且播放速度也一樣。 關(guān)鍵幀在時間軸上以小圓圈標(biāo)識；一個動畫可以設(shè)計多個關(guān)鍵幀；起始幀和結(jié)束幀規(guī)定了動畫的起始狀態(tài)和結(jié)束狀態(tài)。 動畫的制作是以層位基礎(chǔ)的，要創(chuàng)建

21、的動畫的元素都必須放在一個層上，然后對層制作動畫。,2、時間軸和圖層的綜合運(yùn)用 （1）滾動字幕 （見實例站點(diǎn)中g(shù)uodu2.html中歡迎光臨！滾動文字字幕） 添加層，并在層上輸入文字，然后設(shè)置層的滾動軌跡，即可得到滾動文字效果。 （2）網(wǎng)頁浮動動畫，類似與（1）中的滾動文字，無非是把文字換成圖片，多增加幾個關(guān)鍵幀，使運(yùn)動軌跡更復(fù)雜化。 （見實例站點(diǎn)中g(shù)uodu2.html） （3）設(shè)置文字的陰影效果 插入父層和子層，都輸入相同的文字，設(shè)置不同的顏色，在設(shè)計視圖中調(diào)整二者的重疊程度以顯示陰影的效果。,（4）幻燈片效果，單擊換圖。 簡要操作步驟： 插入三個層，并分別插入三個圖片，調(diào)整大小一樣，把

22、它們在設(shè)計視圖中的左上邊距都設(shè)成一樣；分別拖放到同一個時間軸上的3個動畫條上，使三者首尾相接；最后分別為3個動畫條上對應(yīng)的第一關(guān)鍵幀添加顯示隱藏行為即可。給每一個動畫條的第一關(guān)鍵幀添加顯示（下一個圖像所在的）層，而隱藏其他層，行為面板中的相關(guān)事件改成onclick。 （見實例站點(diǎn)中g(shù)uodu2.html中幻燈片播放效果）,（5）控制圖像播放動畫 （見實例站點(diǎn)中g(shù)uodu2.html中展開圖像和閉合圖像） （a）.在設(shè)計視圖中插入一個層，并插入圖片,并將層的可見性和溢出屬性都設(shè)為“hidden”；然后將該層拖放到兩個時間軸上，第一個時間軸上起始幀和結(jié)尾幀對應(yīng)的層的大小分別為最小值（0，0）和最大

23、值（圖片實際大?。?，第二個時間軸上起始幀和結(jié)尾幀對應(yīng)的層的大小分別為最大值（圖片實際大?。┖妥钚≈担?，0） ；不勾選“自動播放”和“循環(huán)”復(fù)選框。,（6）制作滾動的折疊菜單：和（5）的操作類似。（相關(guān)操作可參看相關(guān)flash視頻） （7）具有預(yù)覽功能的電子相冊效果，自動換圖。（相關(guān)操作可參看課本p237-243頁，效果見實例站點(diǎn)中dianzixiangce.html）,8.3在網(wǎng)頁中應(yīng)用javascript,認(rèn)識代碼片段面板 應(yīng)用代碼片段 在在頁面中插入html代碼片段（在設(shè)計視圖中即可完成） 在網(wǎng)頁代碼視圖中插入javascript代碼片段 在html文檔的頭部插入如下代碼： ，然后把光標(biāo)

24、放在這個標(biāo)簽之間，選擇“代碼片段”面板中的“javascript”選項，從中選擇所需的代碼，單擊插入即可。,所有的腳本程序必須封裝在 這對標(biāo)簽之間，這對標(biāo)簽可以放在html中的任何地方（或者部分中）。大多數(shù)script代碼被定義成過程函數(shù)（fuction），放在部分，在部分調(diào)用函數(shù)時執(zhí)行它。 應(yīng)用舉例： 1.在代碼片段面板中選擇有關(guān)導(dǎo)航條的代碼片段，在網(wǎng)頁中插入合適的導(dǎo)航條； 2.將把光標(biāo)放在 這對標(biāo)簽之間，選擇“代碼片段”面板中的選擇javascript|瀏覽函數(shù)|禁止右鍵單擊（disablerightclick（）單擊插入即可實現(xiàn)禁止右擊的操作。（實例網(wǎng)站中的guodu1.html） 3.利用JavaScript實現(xiàn)全屏顯示網(wǎng)頁窗口（實例網(wǎng)站中的guodu3.html） 。,