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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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