第10課行為技術(3)_第1頁
第10課行為技術(3)_第2頁
第10課行為技術(3)_第3頁
第10課行為技術(3)_第4頁
第10課行為技術(3)_第5頁
已閱讀5頁,還剩110頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

1、注意:1.表格畫在表單范圍里面。2.跳轉菜單中的網址別忘記http:/3.別忘記刪除按鈕前面的菜單的行為,保留按鈕的行為即可。問題導入彈出信息框、打開瀏覽器窗口、播放聲音等通常這些功能是通過編寫JavaScript代碼完成的,現在DW MX2004已經內置了20多種代碼在“行為面板”中,不熟悉代碼編寫或者不會編寫代碼的朋友也能輕松的制作帶有這些效果的網頁了。 行為是由一個事件觸發一個動作組成的 事件是訪問者對網頁所做的事情,比如把鼠標移動到一個鏈接上,這就生一個鼠標經過的事件, 這個事件觸發瀏覽器去執行執行一段JavaSceipt代碼,這就是動作,然后產生了JavaScript設計的效果,(打

2、開窗口、播放音樂等)這就是行為。 1 使用行為面板 操作步驟:1選擇【窗口】中的【行為】命令。2打開【行為】面板。 只顯示已設置的只顯示已設置的事件列表。事件列表。顯示所有事件列表打開行為菜單。選擇相應的行為命令后,會打開相應的對話框,設置完成后將為指定的對象添加行為。如菜單呈灰色顯示,說明指定的對象不能添加該行為。刪除選中的行為。向上移動或向下移動所選動作。演示:對圖片加行為:1 交換圖片2.單擊彈出信息:【顯示事件】,打開級聯菜單,提供10種不同瀏覽器的版本。 不同的瀏覽器支持的事件種類和數量是不一樣的, 通常高版本的瀏覽器支持更多的事件。(1) 交換圖像 【交換圖像】將一個圖像和另一個圖

3、像進行交換恢復圖像交換 【恢復交換圖像】是將最后一組交換的圖像恢復為以前的源文件。回憶回憶:插入插入鼠標經過圖像鼠標經過圖像會自動將一個【交換圖像】行為添加到網頁中 選擇“插入”菜單圖像對象鼠標經過圖像,選擇原始圖像,鼠標經過圖像,再設置其鏈接“彈出信息”行為將在訪問者觸發某個事件時打開一個顯示指定信息的對話框.(2) 彈出消息 鼠標滑過彈出信息(鼠標滑過彈出信息(文本和圖片彈出信息文本和圖片彈出信息.htm)1、新建一個文檔2、輸入“單擊看效果”,選中文本,在其鏈接輸入一個“#”,建立一個空鏈接。3、選中文本,添加行為“彈出信息”在對話框中輸入“can u see?”4、將動作設置為“onc

4、lick”. (圖片不需要建空鏈接,直接加動作,重復3,4步驟即可)(3) 打開瀏覽器窗口 注意區別:超級鏈接:打開新窗口打開瀏覽器窗口:可以設置彈出的窗口大小、屬性(是否可調整大小、是否有菜單欄等)以及名稱。 對比:See red建立鏈接看red.htmlAlso see red 空鏈接添加行為:打開瀏覽器窗口實例實例1 在圖片上按下鼠標彈出新窗口:在圖片上按下鼠標彈出新窗口: 1、新建一個文檔被打開的瀏覽器窗口.htm, 插入img動物里的d.jpg圖像,300300像素 設置頁面屬性,左邊距和上邊距均設為0像素。 3、在行為面板添加行為“打開瀏覽器窗口”2、再新建一個文檔打開瀏覽器窗口主

5、頁.htm,插入“dog.jpg”圖片,鼠標選中4、對事件進行設置:對事件進行設置:下拉菜單中選則選擇“onClick”(鼠標單擊)效果:用瀏覽器打開這個網頁,用鼠標圖片在圖片上按下的時候,彈出一個新的窗口。 提示:本例中使用了鼠標點擊,可以改為鼠標經過、鼠標移開、鼠標按下、鼠標雙擊等來觸發。 窗口寬度窗口寬度指定窗口的寬度(以像素為單位)。窗口高度窗口高度指定窗口的高度(以像素為單位)。導航工具欄導航工具欄是一行瀏覽器按鈕(包括“后退”、“前進”、“主頁”和“重新載入”)。地址工具欄地址工具欄瀏覽器選項(包括地址文本框)。狀態欄狀態欄是位于瀏覽器窗口底部的區域,在該區域中顯示消息。菜單欄:菜

6、單欄:需要時顯示滾動條需要時顯示滾動條指定如果內容超出可視區域應該顯示滾動條。 調整大小手柄調整大小手柄指定用戶能否調整窗口的大小,方法是拖動窗口的右下角或單擊右上角的最大化按鈕 (Windows) 或大小框 (Macintosh)。 窗口名稱窗口名稱是新窗口的名稱。如果您要通過 JavaScript 使用鏈接指向新窗口或控制新窗口,則應該對新窗口進行命名。此名稱不能包含空格或特殊字符。如果指定窗口無屬性,則窗口將按啟動窗口的屬性大小打開。指定任何屬性都將自動關閉所有其他屬性不指定任何屬性以啟動窗口的屬性大小打開,具有導航工具欄、位置欄、狀態欄和菜單欄。明確設置了窗口寬度高度640480, 而

7、沒有設置其他屬性:以640480像素打開窗口,無導航工具欄、位置欄等(4) 拖動層 在眾多網頁制作軟件中 Dreamweaver MX 2004 獨有層的功能。 Dreamweaver MX 2004的層與 Flash MX 和Photoshop 中的層不同,Dreamweaver MX 2004 的層可以游離在文檔之上,因此可以用來精確定位網頁元素;可以通過時間軸來移動或者變換位置,實現動畫效果【建立層建立層】 步驟一: 選擇“布局” “標準”格式:步驟二: 此時在文檔窗口就能看到建立了一個層: 鼠標點擊手柄或層標簽都能選中層 【層編號層編號】給層命名,使用行為或者JavaScrip來控制層

8、的時候,就必須用到名稱。 【左左】(上)(上):層與瀏覽器窗口左邊(上邊)的距離。 【寬寬】(高):(高):層的寬度和高度。 【Z軸軸】:屏幕X、Y軸,邏輯上增加了一個垂直于屏幕的Z軸,其數值代表垂直平面的方向上層的序號。 【背景圖像背景圖像】(顏色):(顏色):用來設置層的背景圖像和顏色。 【溢出溢出】:當層內的內容超過層的大小時的顯示方式 visible:層將向右向下擴大顯示層內的全部內容; hidden:只顯示層尺寸以內的內容; scroll:不改變層的大小,但增加滾動條,不管層夠不夠大均顯示滾動條。 auto:只有在層不夠大的時候才出項滾動條。 實踐:在小層中添加大圖片改變【溢出】看效

9、果。 【可見性可見性】:層的可見性。 default-默認; inherit-繼承; visible-可見; hidden-隱藏。 【剪輯剪輯】:指定層的哪一部分是可見的。 例如,若要使一個層中左上角 50 像素寬 75 像素高的矩形區域可見而其他內容均不可見,請將“左”設置為 0,將“右”設置為 50,將“上”設置為 0,將“下”設置為 75。 【層面板層面板】 “窗口”“層” 或者使用快捷鍵“F2”都可以打開層面板 可以實現以下功能: 選一個或者多個層 (shift+鼠標單擊) 修改層的Z軸順序 (直接修改) 修改層的可見性 禁止或者允許層重疊 (5)顯示隱藏層 【顯示隱藏層】動作顯示、隱

10、藏或恢復一個或多個層的默認可見性。效果:鼠標指向左側書名,右側顯示相應書籍內容簡介。1、建立6行2列表格,按圖示合并單元格。2、在右側合并后的表格內插入6個層(layer1-layer6),分別在每個層內插入內容簡介及封面圖片。3、選中“WAP基礎及應用教程”文本,建立空鏈接#將光標挺在文本內,添加行為:顯示/ 隱藏層。事件:OnMouseOver ,動作:顯示layer1,隱藏其他層。4、依次為下面幾行設置同樣的行為。5、將層初始均設為隱藏層。 地圖示例 選擇熱點添加顯示/隱藏層的行為【嵌套層嵌套層】建立一個嵌套層:1. 插入一個層。2. 打開“嵌套”選項。 首選參數-層-嵌套3. 將鼠標光

11、標定位在這個層內,然后插入層,這就形成了嵌套層。【嵌套層嵌套層】在“層”面板中將一個層嵌套到另一個層選擇一個層,然后通過按住 Ctrl 鍵并拖動 ,將層移動到目標層。按住 Ctrl 鍵并拖出,則取消。樹型結構,開始建立的層叫做父層,后插入的那個層叫做子層。父層和子層的Z軸位置是一樣的。 這種“父子關系” 是結構的關系。 子層不一定要在父層內, 子層移動位置,父層不發生變化, 而父層移動,子層會隨著父層移動。(建立二層看效果)時間軸與層密切相關隨著時間的變化改變層的位置、尺寸、可視性以及疊放順序可以實現更多的效果。 層結合時間軸層結合時間軸“時間軸”面板:用于創建時間軸1、打開“時間軸”:窗口時

12、間軸(Alt+F9)【播放頭】顯示當前頁面上的層是時間軸的哪一幀動畫通道【動畫通道】顯示層的動畫條。【動畫條】顯示每個對象的動畫持續時間。【關鍵幀】在動畫條中被指定動畫屬性的幀。【行為通道】顯示在時間軸上某一幀執行指令【幀頻】每秒鐘播放的幀數,但超過用戶瀏覽器可處理的速率則會被忽略掉,15Fps是平均較好的速率行為通道中可以看到循環的標簽1、直線運動:1)插入層層內插入圖像qiqiu.gif確定動畫的起始位置2)選中層-右鍵-添加到時間軸3)單擊時間軸的最后一幀確定動畫結束位置。創建時間軸動畫 4)使動畫播放的時間變長:拖動結尾幀標記5)改變動畫開始的時間:拖動開始幀2 、曲線運動:1)插入層

13、層內插入圖像qiqiu.gif確定動畫的起始位置2)選中層-右鍵-添加到時間軸3)單擊時間軸的最后一幀確定動畫結束位置。4)選中動畫條增加關鍵幀5)移動層的位置:按住關鍵幀處的層手柄,只改變關鍵幀處層的位置 若想改變整個動畫路徑的位置:層在非關鍵幀位置時,按住手柄移動 使層到達關鍵幀位置的時間提前或延后:拖動該關鍵幀3.創建復雜路徑的動畫 選中層-右鍵-錄制路徑應注意:層雖然能夠自由定位,但在不同瀏覽器中顯示時可能效果不同,有時還可能出現網頁元素顯示不正常的情況. 因此,層只適于制作頁面元素較少的網頁,或結合表格等技術進行。復習:直線播放1.將層移動到起始的位置,添加到時間軸。2.鼠標按住最后

14、的關鍵楨拖動,調節播放快慢。3.保持最后的關鍵楨被選中的狀態(如圖),將層移到需要的位置。4.將循環勾選。弧線播放1.選中前面的直線的時間軸,變色表示選中。2.在播放頭(紅色)鼠標右鍵,添加關鍵禎。3.拖動關鍵楨對應的層,則變成弧線。4.添加其他關鍵楨,拖動關鍵楨對應的層,則改變形狀。多個層添加到時間軸(直線/弧線)1.將層移到起始的位置,均添加到時間軸。2.拖動其始的關鍵禎,確定層開始出現的時間。3.調整各個層的結束的關鍵禎,確定結束位置。4.在不同的時間軸上添加各自的關鍵禎。多個層添加到時間軸(任意路徑)1.選中層。2.右鍵-記錄路徑。3.選中其他層。4.右鍵-記錄路徑。添加行為1.點擊行

15、為通道2.右鍵添加行為。3.選擇行為。4.當播放到該楨時,有播放音樂的行為。1. 勾選首選參數-層-嵌套2. 插入一個層。3. 在層面板取消防止重疊,將鼠標光標定位在這個層內,然后插入子層。尺寸略小于第一個層,并向層內添加文字。 4.有第二個子層添加在時間軸中。用層的嵌套用層的嵌套結合時間軸結合時間軸創建滾動的公告牌創建滾動的公告牌 5、在時間軸面板用鼠標選中初始幀,確定位置在第一層的下方。6、選中最后幀,用鼠標移動到公告牌的上方,從而定最后的幀位置。 7、層面板選中第一個層,屬性面板的“溢出”屬性設置為“hidden”第一個層父層溢出設定為隱藏,也就是在父層顯示范圍內可見。給滾動的公告條添加

16、行為:光標移上停止時間軸,移走播放時間軸8.選中滾動的層。9.為層添加行為。滾動條的文本可以有鏈接。水平歡迎詞的加入1.加父層2.加稍小的子層3.子層拖到起始位置,添加到時間軸。確定最后幀的位置。勾選循環和自動。4.父層“溢出”屬性設置為“hidden”注意:調整時間軸的最后幀的位置要確保行為通道的循環沒被勾選。確定好時間軸的快慢和最后位置后在勾選,加上循環。使用marquee標簽制作滾動字幕1.把光標插入點放在需要插入滾動字幕的地方。把光標插入點放在需要插入滾動字幕的地方。2.點擊插入面板的點擊插入面板的“標簽選擇器標簽選擇器 ”3.選擇選擇 marquee標簽,點擊標簽,點擊“插入插入”按

17、鈕。按鈕。4.轉換到代碼視圖。把光標插入點放在 marquee標簽內。輸入滾動的字。分行等全部輸入后在設計窗口再調整。5. 選擇“窗口”“標簽檢查器”。可以在“標簽檢查器”中設置標簽的各種用法。6.點擊behavior設置項右邊的下拉箭頭,選擇滾動字幕內容的運動方式 behavior用法 內容alternate在相反兩個方向滾來滾去 scroll內容向同一個方向滾動 slide內容接觸到字幕邊框就停止滾動 direction屬性設置字幕內容的滾動方向。direction用法down向下運動left向左運動right向右運動up向上運動 Scrollamount控制快慢2和100比較當需要對不同

18、時間軸添加行為時時,應該分別添加到不同的時間軸分別控制。添加多個時間軸1.添加五個層,分別放置模特和四件衣服。2.修改時間軸-添加時間軸3.將紅上衣所在的層添加到時間軸。4.選中最后一個關鍵楨,拖到第十五楨處。5.將最后的關鍵楨層的位置設置在模特上面。6.選中紅上衣圖片,添加行為:時間軸轉到時間軸楨OnclickOnDbclick 前往時間軸1 第1楨7.修改時間軸-添加時間軸28.將綠上衣所在的層添加到時間軸2。9.選中最后一個關鍵楨,拖到第十五楨處。10.將最后的關鍵楨層的位置設置在模特上面。11.選中綠上衣圖片,添加行為:時間軸轉到時間軸楨OnclickOnDbclick 前往時間軸2

19、第1楨(5) 拖動層 【拖動層】動作允許訪問者拖動層。使用此動作可創建拼板游戲和其他可移動的界面元素。 最佳的方法是(使用 onLoad 事件)將“拖動層”附加到 body 對象上 從“移動”彈出菜單中選擇“限制”或“不限制”。 不限制移動適用于拼板游戲和其它拖放游戲。 對于限制移動,在“上”、“下”、“左”和“右”文本框中輸入值(以像素為單位)。 這些值是相對于層的起始位置的。 限制在矩形區域中的移動,則四個都輸入正值。 只允許垂直移動,“上”和“下” 正值, “左”和“右” 0。 只允許水平移動,在“左”和“右” 中正值,“上”和“下” 0。 層的左坐標和上坐標與輸入的值匹配:認為層已經到

20、達拖放目標。 這些值是與瀏覽器窗口的左上角相對的。 單擊“取得目前位置”用層的當前位置自動填充這些文本框。 確定訪問者必須放目標多近,才能將層靠齊到目標。 較大的值可以使訪問者較容易找到拖放目標。 指定單擊層的特定區域才能拖動層,請從“拖動控制點”彈出菜單中選擇“層內區域”;然后輸入左坐標和上坐標以及拖動控制點的寬度和高度。 如果要讓訪問者單擊層的任何位置都可以拖動層,則不要設置此選項。 層在被拖動時應該移動到堆疊順序的頂部,則選擇“將層移至最前”。 輸入 JavaScript 代碼或函數名稱在拖動層時反復執行該代碼或函數。 例如,可以編一個函數(monitorLayer()) ,該函數監視層

21、的坐標并在一個文本框中顯示提示(如“您正在接近目標”或“您離拖放目標還很遠”)。輸入在放下層時執行JavaScript 代碼或函數名稱如果只有在層到達目標時才執行,則選擇“只有在靠齊時”。 呼叫JavaScript腳本alert(你真棒) 。1.插入一個層(layer1),層內插入圖片小貓拼圖/mao10 xt.gif。2.再插入層(layer2-layer5),層內分別插入圖片。3.將四個層拖入layer1的相應位置。 4、選中body文檔,添加行為拖動層,5.選定layer2取得目前位置,靠齊距離50像素(可改變)時放下目標。 在“高級”選項卡中設置放下時,呼叫JavaScript腳本al

22、ert(你真棒)即可。6、重復45步設置其他層的行為7、設置完畢,將layer2-layer5打亂順序,從layer1上拖出即可。(6)控制 Shockwave 或 Flash 播放、停止、倒放或轉到Macromedia Shockwave 或Macromedia Flash SWF文件中的幀。 1.選擇“插入”“媒體”“Shockwave” 或“插入”“媒體”“Flash”分別插入文件。 2. 屬性面板輸入名稱。若要用“控制 Shockwave 或 Flash”動作對影片進行控制,您必須進行命名。 3.選擇要用于控制 Shockwave 或 Flash SWF 文件的項。例如, “播放”按鈕

23、4.打開“行為”面板(“窗口”“行為”)。 5.單擊加號 (+) 按鈕并從“動作”彈出菜單中選擇“控制 Shockwave 或 Flash”。 6.從“影片”彈出菜單中選擇一個影片。 7.選擇是否播放、停止、倒帶或轉到影片中的幀。“播放”選項從動作發生的幀開始播放影片。 例子: 動畫播放、停止控制.(7) 播放聲音 用戶在每次鼠標指針滑過某個鏈接時播放一段聲音效果, 或在頁載入時播放音樂剪輯。 操作:操作:1. 選擇一個對象并打開“行為”面板。 2. 單擊加號 (+) 按鈕并從“動作”彈出菜單中選擇“播放聲音”。 3. 單擊“瀏覽”選擇一個聲音文件,或在“播放聲音”文本框中輸入路徑和文件名。 4. 單擊“確定”。(9) 顯示彈出菜單 步驟:1.選中文字,對其進行空鏈接#。2.添加行為,“顯示彈出菜單”。3.對彈出菜單進行編輯:雙擊“顯示彈出菜單” (10) 檢查插件 可以檢查訪問者的瀏覽器中是否安裝了指定的插件,可以分

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論