Dreamweaver的行為事件-Dreamweaver教程
2024-09-12 12:29:44
供稿：網友
dreamweaver這個名字相信大家都不會生疏了。自打上市以來以其鮮明的特性和完善的功能贏得了眾多網友的青睞。dreamweaver能夠在眾多的同類軟件中贏得一席之地，主要歸功于它完全開放的插件環境以及它所能創造出的那些另人耳目一新的網頁特效。我即將要向大家介紹的就是通過dreamweaver的行為事件所制作出的一些網頁特效。這其中有一些是通過dreamweaver的插件來實現的。希望大家可以通過這些特效使自己的網頁更加的絢麗多彩。
一．通過鏈接實現對flash的控制
為了使網頁本身活動起來，我們在制作網頁時往往會插入一些諸如flash的動畫，那么有沒有什么方法使瀏覽者在瀏覽時可以控制這些動畫的運程呢？答案是有的！
首先我們選中將要附加行為的對象，例如一段加有鏈接的文字。隨后按下快捷鍵f8，單擊行為面板上的" "按鈕，打開動作菜單，選擇"control shckwave or flash"此時會彈出如圖1的對話框。（當然在此之前你的網頁中一定要已經插入了flash的動畫，并對其命名）。從"movie"(動畫)下拉菜單中選擇將要控制的對象名稱以及嵌入對象所使用的標記。再在"action"(動作)區域選擇所要實現的效果。
·play（播放） 選擇該項是當鼠標移動到鏈接上時播放動畫。
·stop（停止） 選擇該項是當鼠標移動到鏈接上時停止動畫的播放。
·rewind（返回） 選擇該項是當鼠標移動到鏈接上時動畫返回到最前端。
·go to frame(跳轉) 選擇該項是當鼠標移動到鏈接上時動畫跳轉到所指定位置。并停
留在該位置上。
設置完后按快捷鍵f12，在瀏覽器中預覽。怎么樣這回flash聽話了吧！
二．可拖動的層
這個網頁特效可以使瀏覽者通過鼠標的拖動來移動一個層，這樣不但給了瀏覽者一定的
自主空間，同時在無形之中也給你的網頁加入了一條亮麗的風景線。
首先選中要拖動的層，按下快捷鍵f8，單擊行為面板上的" "，選擇"drag lager"（拖
動分層）命令，這時將彈出如圖2的對話框。在lager下拉菜單中選擇將要拖動的分層，在
"movement"選擇要拖動分層的移動方式。移動方式分為兩種，一種是受限制的移動方式（constrained）,指可移動層只能在你所規定的范圍內移動。你可在后方的文本框中定義可移動區域的位置值，單位是像素。另外一種是不受限制的移動方式（unconstrained）指可移動層可以在任意范圍內移動。在"drop target"區域可設置當前分層的移動，點擊"get cunrrent position"可獲得當前分層的位置。隨后單擊"ok"，按快捷鍵f12，在瀏覽器中預覽，怎么樣？剛才定義的那個分層是不是已經可以被鼠標拖動了？
三．彈出信息對話框
我們在制作主頁的過程中，總是有許多要說明的地方，假如把這些說明內容全部加入到頁面中，又會使頁面顯得過于凌亂。因此我們可以應用dreamweaver的行為事件所提供的另外一項功能解決這個問題。
首先我們假設要對一個鏈接進行說明，用鼠標選定該鏈接按下快捷鍵f8，單擊行為面板中的" "按鈕，在彈出的菜單中選擇"pop message"（彈出信息）。隨后在彈出對話框中的message文本框里輸入說明的內容，單擊"ok"。按下f12鍵在瀏覽器中預覽。當你的鼠標移動到該鏈接上時就會彈出信息對話框，對話框中就是你剛才所輸入的內容。
四．彈出菜單
我們在瀏覽別人的網頁時經常會碰到當你的鼠標移動到一個鏈接上時就會彈出一個菜單；而你的鼠標離開時該菜單又會自動的隱藏，這個網頁特效在fontpage中要加入四段代碼才可以實現，非常的麻煩。但在dreamweaver中我們可以運用行為事件中的顯示-隱藏-分層輕松搞定。
首先建立一個分層對其命名并將其設置為隱藏的形式，隨后選中一段有鏈接的文字，單擊行為面板上的" "，在彈出菜單中選擇"show-hide-layer"(顯示-隱藏-分層)。此時會彈出如圖3的對話框。在name layers文本框中顯示的是當前頁面中的所有分層，選定你剛才命名并隱藏的分層，點擊下方的show(顯示)按鈕。"ok"可以在瀏覽器中預覽了，將你的鼠標移動到你附加行為的鏈接上時，就會顯示出剛才隱藏的那個分層了。同時應用這個網頁特效你也可以使一個本來存在的分層消失，只要在定義分層屬性的時候選擇hide(隱藏)就可以了。|||
五．變換圖象
這個特效可以使圖象隨鼠標變化。當你的鼠標移動到一個圖片上時該圖就會變為另外一幅圖片。這樣可以生動的體現出圖片鏈接的內容。
首先我們預備好兩張大小完全相同的圖片，將其中一張（圖象1）插入到網頁之中，并對其命名。這張圖是預備在網頁中直接顯示的，選中它按下快捷鍵f8，點擊行為面板上的" "，選擇彈出菜單中的"swap image"（替換圖象）。此時會彈出如圖4的對話框。在"image"文本框中會顯示出當前頁面中的所有圖象。選中剛才命名的圖象點擊"set source to"文本框右方的"browse"，加入另一張事先預備好的圖象（圖象2）。假如你希望在瀏覽時當鼠標離開圖象2時圖象仍可恢復成原來狀態，則在下方的"restore image onmouseout"前打勾。"ok"大功告成，按下f12，在瀏覽器中預覽。效果如何，滿足嗎？
六．創建自動加入收藏夾功能。（插件）
`最近我在網上找到了一個插件(add favourite)，通過這個插件可以使你的網頁在每次顯示時都自動提醒瀏覽者將你的主頁放入收藏夾。雖然這樣做會很煩人，不過對于提高你的瀏覽量還是有一定的幫助的。該插件下載地址為：
http://dream.zj.cninfo.net/dream/plugin/behaviors/ieaddfavourite.zip
下載后解壓至…/dreamweaver/configuration/behaviors/actions/下，啟動dreamweaver。相應的在行為菜單中就會出現"ie add favourito"（添加收藏）。選擇該項就會彈出相應的對話框。只要在title in文本框中輸入收藏你的網站時計算機默認的名字就可以了。單擊"ok"，按f12預覽一下，怎么樣？
七．逐漸縮小的層（插件）
最近還找到了另外的一個插件，其效果是使一個層從四面向中間逐漸的縮小，最后消失。（division in）該插件下載鏈接為：
http://nic.shtle.net.cn/hato/dreamteam/download/dreamweaver_plugnis/behaviour/behaviour/division.zip
下面我就向大家介紹一下這個插件的使用方法。首先按照（六）的步驟將其安裝到相應的目錄內，啟動dreamweaver。建立一個分層并對其命名，為了可以看出演示效果最好對這個分層定義背景顏色或背景。按下快捷鍵f8，單擊行為面板上的" "，這時在行為菜單中會多出"transition:division in"（縮小分層）選項。在所彈出對話框的第一行文本框中輸入剛才定義的分層的名字，在第二行文本框中輸入你希望分層從縮小開始到完全消失所需要的時間，單位是秒。設置完畢后單擊"ok"，按下f12在瀏覽器中預覽！
八．使網頁背景隨時間變化（插件）
這個插件可以使你的網頁的背景隨時間逐漸的變化。下載地址為：
http://nic.shtel.net.cn/hato/dreamweaver/download/dreamweaver_plugnis/behaviour/behaviour/fade.zip
首先按照（六）的步驟將其安裝至相應的目錄內，然后啟動dreamweaver。按下快捷鍵f8鍵，單擊行為面板上的" "，你會發現在行為菜單中會多出"cross browser background fade"（瀏覽器背景轉換）選擇該項，在彈出對話框的第一行文本框中輸入網頁啟始背景顏色的相應代碼，在第二行文本框中輸入變化后顏色的代碼。最后一行中輸入整個變化過程所需要的時間，單位是秒。假如不進行設置系統默認的是由黑色變為白色，單位是一秒。好了可以在瀏覽器預覽了！按下f12，看看效果吧！
九．網頁右方滾動出現層
這個插件可以控制一個層，使其自動的從網頁右方出現并向左移動。 下載地址為：
http://dream.zj.cninfo.net/dream/plugin/behaviors/wm_chg_link_bh.zip
首先仍然按照（六）的步驟將其正確安裝至相應目錄內，隨后啟動dreamweaver。在網頁中建立一個分層，并對其命名。為了可以更好的看到演示效果建議對該層定義背景顏色或加入相應背景。隨后按下快捷鍵f8，單擊行為面板上的" "，在彈出的菜單中就會多出"cross browser emerge form right"（從右方穿過瀏覽器）。選擇該項，將彈出如圖5的對話框。在上方的layer文本框中選中剛才命名并加入背景的那個層。在下方的定義時間文本框中輸入完成整個移動過程所需要的時間，單位是秒。在最后一行中輸入該層將向左方移動的距離大小，單位是像素。設置完畢后單擊"ok"。在瀏覽器中看看效果如何吧！|||
以上的九中網頁特效都是通過dreamweaver的行為事件來完成的，很好的利用這些功能并對其進行不斷的完善和擴充，就會使你的網頁更加的亮麗，出眾。
