Dreamweaver行为(Behavior).doc

迦密唐賓南紀念中學 電腦科Dreamweaver行爲（Behavior）實際上，Dreamweaver 中的行爲，只不過是一系列 JavaScript 程式的集成，它包括兩部分的內容，一個部分是事件，另一個部分是動作，動作是特定的 JavaScript 程式，只要在事件發生（如滑鼠點擊，或者頁面裝載）後，該程式（動作）就會自動運行。選擇視窗行為命令可以打開行爲面板，如圖：點擊當中的 + 號，彈出一個長長的功能表，裏面全是一些特效動作，所有當前不可用的選項都是灰色的，只有在設定一定條件下那些灰色的動作才能使用。如圖：對這些動作的解釋如下：前往 URL：跳轉頁面。在輸入欄中輸入網址，然後按確定，就可以到想去的網站。但在整個過程中，全是手工操作，而 前往URL 卻不同，只要你到了某個網頁，不用你再動手，它自己就會把你帶到另外的指定的網址去。最常見的例子是那些網址發生變化的網站，它們常常在舊網址的首頁上注明網址已變，然後通過設置舊網頁的前往URL 自動將訪問者帶到新的地址去。呼叫 JavaScript：調用 Javascript 腳本。 Dreamweaver 雖然內集了豐富的可供調用的 Javascript ，但如果你覺得不滿意的話，可以調用自己製作的 Javascript 或第三方開發的 Javascript ，而這時就需要使用本選項。彈出訊息：最常見的例子是訪問者進入某個頁面，該頁面就會自動彈出一個訊息方塊，顯示先設定好的文本，如歡迎訪問本站等等。復原調換影像復原翻滾圖，用以回復原圖。拖曳圖層：拖曳圖層，主要用來製作隨滑鼠移動而發生位移的網頁特效。控制 Shockwave or Flash：控制 Flash 影像。爲什麽要控制 Flash 影像？其實，並不是每個 Flash 動畫都是隨網頁打開就開始播放了，更多的是在網頁上做一些按鈕之類的帶交互作用的圖示，可以點擊它開始播放動畫，也可以通過拖拉進度條前進或後退，等等，而這，就需要 Control Shockwave or Flash 功能的支援。播放聲音選擇適當的聲音檔，然後按確定，就可以加入音樂。(這個功能有額外的關於聲音的javascript)更改屬性：改變屬性，如發生某個事件後，自動改變文本或圖片資訊，等等。檢查外掛程式：檢查外掛程式。甚麼是外掛程式？比如你做了個 Flash 動畫並放到自己的網頁上，當訪問者的瀏覽器有 Flash 播放外掛程式，則可以播放動畫，如果沒有，這時如果你的網頁具有 檢查外掛程式 功能，則可按你的解決方案對訪問者進行提醒，如你應該安裝 Flash 播放器，下載地址.。檢查瀏覽器：同一個網頁，在不同的瀏覽器上的顯示可能大爲不同，如果你要讓自己的網頁適合於大多數瀏覽器的話，可以分別針對不同的瀏覽器將所有的網頁製作成幾個不同的類別，然後再調用檢查瀏覽器 ，根據訪問者瀏覽器的不同，進入相應的網頁，從而讓你的網頁在每種瀏覽器上都是完美無缺的。表單驗證表單中如果有諸如密碼式，字元數目等的限制，就可以應用表單驗證功能。設定文字 / 設定狀態列文字：在狀態列顯示資訊。一般情況是，當滑鼠放到某幅圖像上會自動彈出資訊提示；或者當滑鼠指向某個連結會在該處自動顯示連結資訊，而狀態列中始終只有一個網頁圖示。要充分利用網頁的有效空間，避免資訊混雜現象，可以把那些事件資訊通過壯態欄進行顯示，這就需要在網頁中進行 設定狀態列文字 的設置。調換影像：翻滾圖，用它不僅可以建立一對一的翻滾圖，還可以建立一對多等更爲複雜的替換特效。開啟瀏覽器視窗可以利用新的視窗開啟網頁的同時，又可以設定新的視窗的一些屬性。預先載入影像：預取圖片，主要功能在於保持效果的連續性，避免事件發生時的讀取延遲。顯示隱藏圖層：非常通用的網頁特效，如當滑鼠移到某個物件上時，原來隱藏的圖層顯示出來，從而顯示出該圖層中的物件；當滑鼠離開原物件，顯示和圖層再次隱藏。實例一: 改變文字的背景我們先看下面的效圖，它的實際效果是這樣的，當點擊左邊那個改變背色的按鈕後，文本的背景色換一種顔色，當點擊右邊的按鈕後，文本又換一種背景色。總之當你點擊不同的換色按鈕後，文本的背景色也隨之改變。圖1 原來的背景色圖2 點擊左邊的按鈕後背景色改變了圖3 點擊右邊的按鈕後背景色又改變了製作方法：1、選擇插入版面物件圖層，插入一個圖層（或利用現有的圖層），並在該層上寫點文字或其他什麽東西均可，主要是讓人知道該區域的存在；2、在該頁上寫上這樣的文字“點擊這裏改變上面文字的顔色”（當然你也可以輸入別的文字），選取這段文字，並把它做成空鏈結，也就是在屬性面板的“Link”輸入 框中輸入一個“#”。3、點擊行為面板上的“+”圖示，在彈出的功能表中選擇更改屬性動作，將彈出一個如下圖所示的對話方塊：圖4 更改屬性動作對話方塊在上圖所示的對話方塊中：在物件類型中，我們可以選擇控制物件，也就是講我們想要改變那一個物件的屬性，在本例中，我們按右邊的倒三角按鈕，然後在下拉出的列表中選擇“DIV”；在命名物件中，我們可以選擇物件的代號的，因爲行為實際上插入一段Javascript程式，而Javascript程式要對物件施加動作，首先必須知道物件是誰，物件的代號（也可理解爲就是物件的名字）是唯一能識別物件的標識。在本例中，我們點擊輸入框右邊的倒三角按鈕，在下拉出的“層代號”列表中選擇剛插入層的代號，如：“div Layer1”；屬性中有兩種可選輸入，我們在這裏選擇要改變的具體屬性，在選取選擇框右邊的倒三角按鈕上點一下，在下拉出的功能表中選擇擇“Style.backgroundColor”；在新的值右邊的輸入窗中輸入背景顔色代碼（如#ccffff）；按“確定”按鈕返回到行為面板。你看到了吧！在行為面板下部的窗口中增加了一行代碼：onClick 更改屬性，這就是告訴你，對那個空超連結載入了一個動作，動作的觸發事件是onClick（單擊滑鼠），動作內容是改變物件屬性。若你用滑鼠點擊這行代碼，將看到中間有一個倒三角按鈕，你點一下那個按鈕，將下拉出一個觸發事件的列表，那上面有許多觸發事件供選擇，如：onClick（單擊滑鼠）、onDbClick（雙擊滑鼠）、onMouseDown（按下滑鼠）、onMouseOut（滑鼠移開）、onMouseOver（滑鼠稱到物件上）等等，你看Dreamweaver想得都周到（若你把行為面板上的顯示特定事件設置爲IE5.0將會有更多的觸發事件）！按F12，再把滑鼠在那個空超連結上單擊一下，你看那段文本的背景色改變了是不是！實例二: 彈出訊息彈出訊息 可以製作彈出資訊效果，也就是打開頁面，頁面自動彈出對話視窗並提示預設好的資訊。效果如圖:現在我們新建一個文件來製作彈出式效果。新建一個頁面，並用 檔案/另存新檔 命令將文件保存爲一個新文件。請仔細找到編輯視窗中左下角的 Body符號，如圖：選中 body符號，然後在行爲面板的行爲功能表中點按 彈出訊息 命令，如圖:然後會彈出如下圖的視窗， 訊息 輸入框中輸入的資訊將作爲提示資訊彈出。在輸入框中輸入歡迎大家來到我的網頁字樣。選擇確定。觸法事件要選onLoad，彈出式效果製作完畢。實例三: 用顯示隱藏圖層製作訊息你若感到用行為的彈出訊息動作製作的訊息方塊不太漂亮、缺乏個性，那麽你就用行為的顯示隱藏圖層動作來做吧，用它你可以隨心所欲地設計訊息方塊，當然在操作上比彈出訊息動作要複雜一點，不過也只是多點幾次滑鼠而已。先看下面的效果圖：圖1 超連結上的訊息方塊看到了吧！上圖中那黃色部分就是當滑鼠移到“返回”這個超連結上才彈出的訊息方塊，是不是有點個性。下面我們就以此爲例來介紹顯示隱藏圖層動作的應用方法。其製作思路是這樣的：在一個圖層上設計訊息方塊的內容及風格，由於圖層支援所有的網面製作技術，因此可以設計出很有個性的訊息方塊。顯示隱藏圖層動作的功能是顯示或隱藏指定的圖層，所以我們只要在需要顯示訊息方塊的地方載入這個動作，再用onMouseOver事件觸發顯示圖層動作，用onMouseout觸發隱藏圖層動作，不就實現了訊息方塊的顯示和關閉。製作步驟：1、先做一個超連結（爲什麽一定要做超連結，後面再講）；2、點擊插入功能表選擇版面物件，再選擇圖層插入一個圖層。然後在上面輸入有關的文字，並在顯示的選擇hidden。3、選取返回，並把它做成空鏈結，也就是在屬性面板的“Link”輸入 框中輸入一個“#”。在行為面板，按面板上的“+”圖示，在動作列表中選擇顯示隱藏圖層動作，立即彈出如下圖所示的對話方塊：圖2 顯示隱藏圖層動作對話方塊4、在上面這個顯示隱藏圖層動作對話方塊中，先在命名的圖層右面的選擇框裏選擇訊息方塊的所在圖層名，可不能選錯哦！然後，點擊顯示按鈕，選擇具體動作爲顯示圖層，按確定按鈕返回行為面板，把觸發事件改爲onMouseOver（當然也可選其他事件）；重復操作一次，具體動作選擇隱藏（隱藏圖層），再把觸發事件改爲onMouseOut。製作結束，按F12就可以看到你的個性訊息方塊了。由於行為的動作不能直接載入到普通文本，所以在第一步中做了一個超連結，若你需要在普通文本上彈出訊息方塊，可參考本專題的“用好行為基本功”一文的變通辦法處理一下就行了。顯示隱藏圖層動作是一個用處很大的動作，用它可以製作出各種各樣的下拉功能表、招之即出揮之即去的留言簿等等，我在互動學校的“活用圖層”系列文章中已介紹過，這裏不再重復。實例四: 控制狀態欄經常上網的朋友定會注意到，許多網站的網頁當滑鼠移到超連結上時，在瀏覽器的狀態欄裏會顯示鏈結的簡要說明，當滑鼠移到一張圖片上，在狀態欄裏又會顯示圖片的簡要說明，如此等等，狀態欄成了一個資訊提示欄，使有限的空間得到了充分利用。若會用Javascript編程式，實現這種效果當然沒問題。不會用Javascript編程式有了Dreamweaver 2004的行為實現這種效果也同樣輕鬆，這實際上也就是調用行為的設定文字 / 設定狀態列文字動作罷了，點點滑鼠就完成了。下面通過幾個例子來說明這種效果的製作方法。一、在狀態欄顯示普通文本的提示1、輸入一段文本，選取這段文本，並給它定義一種字體或顔色或其他什麽的，其目的是使這段文本有一個HTML標記把它框起來，以便載入設定文字 / 設定狀態列文字動作，這個動作幾乎可以載入到所有的HTML標記上，所以用起來很方便；2、按面板上的“+”圖示，在拉出的列表中，把滑鼠在設定文字上點一下，在其拉出的子列表中選擇設定狀態列文字動作，立即彈出如下圖所示的對話方塊：圖1 設定狀態列文字動作對話方塊3、上面這個設定狀態列文字動作對話方塊可能是所行為動作對話方塊中最簡單的一個了，它只有一個“訊息”輸入框，在上面輸入要在狀態欄顯示的資訊內容，然後按確定按鈕返回到行為面板，把觸發事件改爲你需要的事件，一般用onMouseOver 事件。一切就這樣輕鬆搞定了。4、按F12，再低頭看看狀態欄，資訊像預期的那樣在狀態欄裏顯示了，再仔細觀察一下，把滑鼠移開試試，唉！怎麽還在顯示那條資訊，這可不太好！解決這個問題很簡單，返回網頁編輯窗，在那段文本上再載入一個設定狀態列文字動作，只是這次在動作對話方塊中什麽都不要寫，直接按確定返回行為面板，把這次載入的設定狀態列文字動作的觸發事件改爲onMouseOut，再按F12看看，定會使你滿意的。二、在狀態欄顯示超連結的提示1、選取一個超連結；2、用行為面板載入兩個設定狀態列文字動作，一個有提示資訊的，觸發事件爲：onMouseOver；一個沒有提示資訊的，觸發事件爲：onMouseOut。三、在狀態欄顯示圖片的提示1、選取一張圖片；2、用行為面板載入兩個設定狀態列文字動作，一個有提示資訊的，觸發事爲：onMouseOver；一個沒有提示資訊的，觸發事件爲：onMouseOut。用類似的方法，你也可以在狀態欄顯示表單按鈕的提示資訊，總之你喜歡在狀態欄顯示那部分內容的提示資訊就在那裏載入設定狀態列文字動作，狀態欄完全在你的控制之中，就是這麽方便！實例五：用behaviors播放聲音一、在普通文本上播放聲音所謂在普通文本上播放聲音，就是當你的滑鼠移到某段文本上就開始播放聲音。要播放聲音，當然要準備一個音效檔案，比較簡單的辦法是用Windows的答錄機錄下一段聲音，保存爲*.Wav文件，由於音效檔案一般都很大，少則幾百KB，稍爲長一點時間的音效檔案就是幾MKB，對於網上傳輸來講，簡直是不可思義，所以一般時間要短點，另外，一定要採用壓縮文件，Windows的答錄機就具有編輯和壓縮音效檔案的功能，具體方法在此就不多講了。準備好了音效檔案，就可以用下面介紹的方法把它加到網頁上，在瀏覽網頁時播放了。下面介紹製作方法：1、輸入一段文本，選取這段文本，並給它定義一種字體或顔色或其他什麽的，其目的是使這段文本有一個HTML標記把它框起來，以便載入播放聲音動作，這個動作幾乎可以載入到所有的HTML標記上，所以用起來很方便；2、按行為面板上的“+”圖示，在拉出的列表中選擇播放聲音動作，立即彈出如下圖所示的對話方塊：圖1 播放聲音動作對話方塊3、上面這個播放聲音動作對話方塊是夠簡單的了，它只有一個播放聲音輸入框，在上面輸入要播放的音效檔案名（含相對路徑），然後按確定按鈕返回到行為面板，把觸發事件改爲你需要的事件，一般用onMouseOver 事件。一切就這樣輕鬆搞定了。4、按F12，把滑鼠移到可播放聲音的那段文字上，就可以聽到你美妙的聲音了，奇妙吧？！二、 按圖片播放聲音的說明播放圖片的說明，就是當你的滑鼠移到某張圖片上就開始播放圖片說明。1、錄製一個圖片說明的音效檔案；2、選取一張圖片；3、用行為面板載入一個播放聲音動作，在行為面板把觸發事件改爲：onMouseOver，大功告成。用類似的方法，你也可以在表單的按鈕上播放按鈕的提示聲音，用onunLoad觸發事件製作在瀏覽者離開網頁時播放“歡迎下次再來”的聲音的效果。但請你注意，由於音效檔案無論你怎樣處理，都是比較大的，所以不要濫用，否則將嚴重影響網頁的瀏覽速度，效果將適得其反。實例六：製作動態按鈕在你的網頁上適當地放幾個圖像動態按鈕，可起到畫龍點睛的效果，曾有人還製作了一個專門製作動態按鈕的叫做“按鈕工廠”的工具軟體，可見動態按鈕功效之一斑。其實用行為的調換影像動作來製作動態按鈕是手到拈來的事，根本用不著什麽專門的工具軟體。下面這實例是這樣的效果。當滑鼠移到按鈕上，按鈕的圖片立即變換，單擊按鈕將打開一個網頁。下面我們講具體的製作方法：1、要製作上面這種效果的動態按鈕，必需準備兩張同樣大小的圖片，然後插入一張圖片；2、運用 選取圖片或選擇插入影像來加入圖片。不要忘記在圖像的屬性面板上給圖片加上名稱（不是圖片的檔案名）如“image1”，這個名稱是用來告訴Javascript程式要對那張圖片進行變換的，其重要性我在前面的文章中間多次提及，在此不再重復。3、在行為面板，按面板上的“+”圖示，在拉出的動作列表中選擇調換影像動作，就會彈出如下圖所示的對話方塊：圖1 調換影像動作對話方塊上面這個調換影像動作對話方塊比較簡單，當中要在設定原始檔為右面的輸入框中輸入第二張圖片的檔案名（含相對路徑）就行了，當然你也可以點擊輸入框右面的瀏覽按鈕打開文件夾來選擇圖片。其他的參數不用管它，使用預設值。若你不是選取了圖片後才選擇調換影像，那麽還要在第一個框中選擇圖像的名稱，特別是當你的網頁上有多張圖片時更是如此。按確定按鈕，返回行為面板。我們看到在行為面板的窗口中一下加了兩個動作，一個是onMouseOver 調換影像 ，這個動作的意思是當滑鼠移到按鈕上時，變換圖片，也就是顯示第二張圖片；另一個動作是onMouseOut 復原調換影像，這個動作的意思是當滑鼠移開按鈕時，恢復到原來的圖片，即顯示第一張圖片。這正是我們所希望的效果，行為就是這麽聰明，一切都給我們想好了。從而使得我們只要點幾下滑鼠，就把動態按鈕做好了。當然，調換影像動作的作用不僅僅是用來製作動態按鈕，還可以做出許多網頁特效。例如：準備兩面張圖片， 一張是完全透明的圖片，看起來好象什麽都沒有，另一張是有內容的圖片，我們用一個超連結來控制圖片的變換。那麽當滑鼠移到超連結上時，圖片顯示了，當滑鼠移開超連結時，圖片又消失了，好象是招之即來，揮之即去，是不是有意思，不信你試試。實例七：動態圖片說明我們在網站開發的過程中，有時需要製作圖片集的網頁，當然能給每張圖片再配以文字說明，那確是錦上添花的事。但是若一幅圖片下面配一段文字說明，那麽頁面一定顯得很允長。若是能使所有圖片說明在一個地方顯示，且隨著滑鼠在圖片間移動，說明的文字也動態地隨之更換，那麽頁面就簡煉多了。行為的設定文字中的設定圖層文字動作可以幫我們實現這種動態效果。請留意下面的效果圖。圖1 滑鼠不在圖片上圖2 滑鼠在第一張圖片上 看到了吧！當滑鼠在第一張圖片上時，圖片的說明文字也改成了第一張圖片的說明了。效果還不錯吧？這種效果原來都是用Javascript做的，用行為的另一個動作顯示隠藏圖層也能實現，但操作要稍複雜些。好了，讓我們來看看運用設定圖層文字的製作方法。1、由於設定圖層文字動作實際上是往一個圖層上寫文本，因此要先插入一個圖層，注意要記一下圖層的名稱（在圖層的屬性面板上），一般在圖層上寫一些關於圖片集總的說明，免得一開始時圖層上一片空白。若想使圖層醒目一點，就給它加上背景色，另外適當注意一下圖層與圖片的相對位置；2、插入一張圖片，然後選取它，在行為面板上按“+”圖示，在拉出的列表中，把滑鼠在設定文字上點一下，在其拉出的子列表中選擇設定圖層文字動作，立即彈出如下圖所示的對話方塊：圖3 設定圖層文字動作對話方塊3、上圖設定圖層文字動作對話方塊中，圖層右面的選擇框是選擇圖層名稱的，也就是選擇你要往那個圖層寫資訊，這就是我爲什麽在第一步中要你記住圖層名稱的目的所在。在本例的網頁中，要寫資訊的圖層是“Layer2”，所以我選擇了它，你在製作時應選擇合適的圖層名（也可以點右面那個三角形按鈕，它將拉出當前頁面上的所有圖層名的列表供你選擇）；下面那個大框是