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