CG 數位學習網 > Dreamweaver 教學



Dreamweaver 的行為可將 JavaScript 程式碼加入網頁,提供網頁與訪客互動的功能。您可以透過「行為」面板指定動作,並且指定觸發該動作的事件行為新增至頁面。由於行為程式碼是用戶端的 JavaScript 程式,因此加入的行為是在訪客的瀏覽器而不是在網站伺服器上執行的。Dreamweaver 提供了約 20 種行為動作,此外,您可以在 Adobe Exchange 網站與協力廠商網站免費下載或購買擴充程式,增加您需要的 Dreamweaver 行為。

請點選功能表 [ 視窗 > 行為 ] 開啟標籤檢視窗,就可以從行為面板選擇使用 Dreamweaver 內建或已安裝的行為。

 

事件實際上是瀏覽器產生的訊息,表示訪客做了某些事情。例如,當瀏覽者將指標移動到連結上時,瀏覽器會為該連結產生 onMouseOver 事件;接著,當該事件針對該連結而產生時,瀏覽器會檢查看看是否有一些瀏覽器應該呼叫的 JavaScript 程式碼 (在檢視的頁面中所指定的)。不同事件將因不同頁面元素而定義;例如,在大多數瀏覽器中,onMouseOver 和 onClick 事件是與連結相關聯,而 onLoad 則是與影像與文件的 body 區段相關聯。

在您將行為附加到頁面元素之後,每當您指定的事件因該元素而發生時,瀏覽器便會呼叫已經與該事件產生關聯的動作(即 JavaScript 程式碼)。例如,如果您將「彈出訊息」動作附加到連結,並指定由 onMouseOver 事件來觸發,那麼每當有人在瀏覽器中將滑鼠指標指向連結時,您的訊息便會在對話方塊中彈出。單一事件可觸發數個不同動作,並且可以指定動作發生的順序。

附註: Dreamweaver 提供的行為可以在 Internet Explorer 4.0 與 Netscape Navigator 4.0 以上版本的瀏覽器執行。雖然部份的行為在早期的瀏覽器可能無法執行,不過這些舊版的瀏器幾乎已經沒人使用了。此外,訪客可能會將瀏覽器的 JavaScript 功能關閉,您可以提供包含在 noscript 標籤的替代內容,讓不支援 JavaScript 的瀏覽器可以使用您的網站。

彈出訊息 (Popup Message)

彈出訊息動作可以在發生特定事件時顯示一段訊息。您可以在訊息中嵌入 JavaScript 函式呼叫、屬性、變數或運算式。若要嵌入 JavaScript 運算式,請將它放在大括號 { } 內。若要顯示大括號,則在它前面加上反斜線 (\{) 。

以下說明在網頁增加彈出訊息的步驟:

從標籤檢視窗的行為面板,按新增按鈕,再選擇「彈出訊息」。

接著在彈出訊息對話框,輸入彈出訊息的內容,再按下「確定」按鈕。

從標籤檢視窗可以看到在 <body> 標籤上新增的行為。

表示當指定的事件發生時( onLoad = 開啟網頁 ),瀏覽器就會呼叫與該事件產生關聯的動作(出現彈出訊息)。

請將網頁存檔,並且在利用瀏覽器開啟網頁,測試看看是否正確出現彈出訊息。

切換到程式碼檢視,彈出訊息的行為。

 

檢查瀏覽器

「檢查瀏覽器」動作可以判斷訪客的瀏覽器版本,自動導向到不同的網頁。例如,訪客使用 Internet Explorer 瀏覽器,您可能想要他們前往 PC 版網頁;若訪客使用 iOS Safari 瀏覽器,則前往為手機螢幕設計的網頁。 將這個行為附加到幾乎與任何瀏覽器相容 (和不使用任何其他 JavaScript) 之頁面的 body 標籤,將會很有用處;如此一來,訪客的瀏覽器即使關閉了 JavaScript 功能,仍可以看到說明的訊息。另一個選項,是將這個行為附加至 Null 連結 (如 <a href="javascript:;">),並且讓動作根據瀏覽者的瀏覽器版本決定連結的目的地。

拖曳 AP 元素 (Drap AP Element)

讓瀏覽者可以拖曳網頁上的 AP 元素。可以製作拼圖、滑動軸控制項,與其他可移動的介面元素。 您可以指定瀏覽者可拖曳圖層的方向 (水平、垂直或任何方向)、瀏覽者應該拖曳圖層所到的目標、是否將圖層貼齊目標 (如果圖層在一定數目的像素距離內)、當圖層碰到目標要做什麼事,等等。 因為在瀏覽者可以拖曳圖層之前必須呼叫「拖曳圖層」動作,請確定觸發動作的事件會在瀏覽者嘗試拖曳圖層之前發生。最好是將「拖曳圖層」附加到 body 物件(對於 onLoad 事件),雖然您也可以使用 onMouseOver 事件,將它附加到可以填滿整個圖層的連結(如影像周圍的連結)。

★★

 

前往 URL (Go To URL)

前往 URL 動作會在目前視窗或指定頁框開啟新的頁面。此行為可以設定多個頁框的超連結,訪客只要按一下滑鼠即可完成。

 

跳頁選單 (Jump Menu)

執行 [ 插入 > 表單物件 > 跳頁選單 ] 可在網頁建立跳頁選單,Dreamweaver 將會建立選單的跳頁選單行為。通常沒有必要手動將跳頁選單動作附加到物件。

開啟瀏覽器視窗 (Open Browser Window)

使用「開啟瀏覽器視窗」動作在新視窗開啟指定網頁。您可以設定新視窗的屬性,包括它的大小、屬性 (該視窗是否可調整大小、是否有選單列等等) 和名稱。例如,您可以使用這個行為在瀏覽者按一下縮圖影像時於不同視窗開啟大型影像;有了這個行為,您便可以將新視窗變成影像的確實大小。如果您沒有為視窗指定屬性,它會以啟動它的視窗之大小和屬性來開啟。指定視窗的任何屬性將自動關閉所有其他並非明確開啟的屬性。例如,如果您沒有為視窗設定屬性,它可能以 640 x 480 像素來開啟,而且擁有導覽列、位址列、狀態列和選單列。若您明確設定寬度為 640 和高度為 480,而沒有設定其他屬性,視窗將以 640 x 480 像素來開啟,而且完全沒有導覽列、位址列、狀態列、選單列、更改大小控制點和捲軸。

預先載入影像 (Preload Images)

[ 預先載入影像 ] 動作會將不能立即出現在頁面上的影像 (如將要與行為或 JavaScript 調換的影像),載入到瀏覽器的快取中。這樣就可避免在影像應該出現時由於下載而導致延遲。當您在「調換影像」對話方塊中選取「預先載入影像」選項時,「調換影像」動作會自動預先載入所有標示的影像,所以您在使用「調換影像」時不需手動新增「預先載入影像」。

設定導覽列影像

使用「設定導覽列影像」動作將影像變成導覽列影像,或變更導覽列中影像的顯示與動作 (如需詳細資訊,請參閱插入導覽列)。使用「設定導覽列影像」對話方塊的「基本」索引標籤,來建立或更新導覽列影像或一組影像、變更要顯示的 URL (當導覽列按鈕被按下時),以及選取要顯示 URL 的不同視窗。請使用「設定導覽列影像」對話方塊的「進階」索引標籤,根據目前按鈕的狀態在文件中變更其他影像的狀態。依預設值,按一下導覽列中的元素會自動造成導覽列中其他所有元素變成「一般」狀態;如果您想要在選取的影像為「按下」或「滑過」狀態時,將影像設定為不同狀態,請使用「進階」索引標籤。

設定狀態列文字

[ 設定狀態列文字 ] 動作會在瀏覽器視窗左下角的狀態列中顯示訊息。例如,您可以使用這個動作在狀態列中描述連結的目的地,而不是顯示與它相關的 URL。若要看看狀態訊息的範例,請將您的滑鼠滑過使用 Dreamweaver 中的任何一個導覽按鈕。瀏覽者經常忽略或漏看狀態列中的訊息 (而且並不是所有瀏覽器都對狀態列文字的設定提供完整支援);如果您的訊息很重要,請考慮將它顯示為彈出訊息或圖層的文字。您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。

顯示隱藏元素 (Show-Hide Elements)

[ 顯示隱藏圖層 ] 動作會顯示、隱藏或恢復一個或多個圖層的預設顯示。這個動作在瀏覽者與頁面互動而需顯示資訊時非常有用。例如,當使用者將滑鼠指標滑過植物的影像時,您可以顯示圖層來詳細說明植物的生長季節和區域、需要的日照、可以長到多大等等。「顯示隱藏圖層」對於建立預先載入圖層也很有用處 - 也就是說,大型圖層起先會使頁面內容模糊,然後在所有頁面元件已經完成載入時消失。

 

 

顯示彈出式選單

[ 顯示彈出式選單 ] 行為可在網頁上建立彈出式選單,或是開啟並修改您已經在 Dreamweaver 文件中插入的 Fireworks 彈出式選單。您要在「顯示彈出式選單」對話方塊中設定選項,以建立水平或垂直彈出式選單。您可以使用這個對話方塊來設定或修改彈出式選單的顏色、文字和位置。您必須使用 Dreamweaver「屬性」檢視窗中的「編輯」按鈕來編輯 Fireworks 影像彈出式選單中的影像。不過,您還是可以使用「顯示彈出式選單」命令來變更影像彈出式選單中的文字。如需關於在 Fireworks 中編輯影像的資訊,請參閱使用其他應用程式。若要在文件中檢視彈出式選單,您必須在瀏覽器視窗中開啟文件,然後將指標滑過觸發影像或連結。

調換影像 (Swap Image)

[ 調換影像 ] 動作會變更 img 標籤的 src 屬性來將一個影像與另一個調換。使用這個動作來建立按鈕變換影像和其他影像效果 (包括一次調換多個影像)。插入變換影像會自動將「調換影像」行為新增到您的頁面。因為只有 src 屬性會被這個動作影響,您應該調換與原來影像有相同維度 (高度和寬度) 的影像。否則,您調換進來的影像,會壓縮或擴張顯示以符合原來影像的尺寸。

復原調換影像 (Swap Image Restore)

復原調換影像動作會將上一組調換的影像復原為它們先前的原始檔案。這個動作是在每當您附加「調換影像」動作至物件時,才會自動加入的,若您在附加 [ 調換影像 ] 時保持 [ 恢復 ] 選項的選取狀態,就不需要另外選取 [ 復原調換影像 ] 動作。

驗證表單 (Validate Form)

驗證表單動作會檢查指定文字欄位的內容,以避免訪客未填或是輸入不正確的資料類型,否則在送出表單時可能會出現錯誤訊息,或是在資料庫產生無效的記錄,以上情況多少會造成訪客或網站管理者的困擾。

將這個動作附加到具有 onBlur 事件的個別文字欄位,以在使用者填寫表單時驗證欄位,或將它附加到具有 onSubmit 事件的表單,以在使用者按一下「送出」按鈕時一次評估數個文字欄位。如果有任何指定文字欄位包含無效資料,請將這個動作附加到表單以防止表單送出至伺服器。