- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
請使用本主題,了解如何在 Adobe Dreamweaver 中套用內建的 JavaScript 行為。
使用內建的行為
Dreamweaver 中所包含的行為,已經被撰寫為可搭配最新的瀏覽器一起運作。雖然這些行為在舊版的瀏覽器中無法運作,但不會出現錯誤。
Dreamweaver 動作已經過精心撰寫,盡可能使它們能夠在許多瀏覽器上運作。如果您從 Dreamweaver 動作中手動移除程式碼,或以自已的程式碼取代它,您可能會失去跨瀏覽器相容性。
雖然 Dreamweaver 在撰寫時已經儘量考慮到跨瀏覽器的相容性,有些瀏覽器完全不支援 JavaScript,而且許多瀏覽網頁的人會在他們的瀏覽器中將 JavaScript 關閉。為取得較佳的跨平台效果,請提供包含在 <noscript> 標籤中的替代介面,讓沒有 JavaScript 的人可以使用您的網站。
套用呼叫 JavaScript 行為
當事件發生時,「呼叫 JavaScript」行為會執行自訂函數或 JavaScript 程式碼行 (您可以親自撰寫 Script,或使用網路上各種免費 JavaScript 程式庫所提供的程式碼)。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「呼叫 JavaScript」。
-
輸入要執行的正確 JavaScript,或輸入函式的名稱。
例如,若要建立「上一步」按鈕,您可以輸入 if (history.length > 0){history.back()}。如果您已經在函式中封裝程式碼,只要輸入函式名稱 (例如,hGoBack()) 即可。
-
按一下「確定」,並確認預設事件是否正確。
套用變更屬性行為
請使用「變更屬性」行為來變更物件的其中一個屬性值 (例如,div 的背景顏色或表單的動作)。
只有在您非常熟悉 HTML 和 JavaScript 的情形下,才能使用這個行為。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「更改屬性」。
-
從「元素類型」選單中,選取元素類型,以顯示該類型的所有已識別元素。
-
從「元素 ID」選單中選取一個元素。
-
從「屬性」選單中選取屬性,或是在方塊中輸入屬性的名稱。
-
在「新的值」欄位中,輸入新屬性的新值。
-
按一下「確定」,並確認預設事件是否正確。
套用檢查外掛程式行為
請使用「檢查外掛程式」行為,根據瀏覽者是否已安裝指定的外掛程式來將他們送到不同的頁面。例如,如果瀏覽者有 Shockwave,您可能想要他們前往一個頁面;如果沒有的話,則前往另一個頁面。
您無法在 Internet Explorer 中使用 JavaScript 偵測特定的外掛程式。不過,選取 Flash 或 Director 時會將適當的 VBScript 程式碼加入您的頁面,以便在 Windows 的 Internet Explorer 中偵測外掛程式。在 Mac OS 的 Internet Explorer 中,無法偵測外掛程式。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「檢查外掛程式」。
-
從「外掛程式」選單中選取外掛程式,或是按 Enter 鍵,並在相鄰的方塊中,輸入外掛程式的確切名稱。
您必須使用外掛程式的確切名稱,如同在 Netscape Navigator 的「關於外掛程式」頁面上以粗體所指定的名稱 (在 Windows 中,請選取 Navigator 的「說明 > 關於外掛程式」命令;在 Mac OS 上,請從「Apple」選單中選取「關於外掛程式」)。
-
在「如果有,前往 URL」方塊中,為具有外掛程式的瀏覽者指定 URL。
如果您指定遠端 URL,必須將 http:// 前置詞包含在地址中。如果將該欄位保留空白,瀏覽者將會留在相同的頁面。
-
在「否則,前往 URL」方塊中,為沒有外掛程式的瀏覽者指定替代 URL。如果將該欄位保留空白,瀏覽者將會留在相同的頁面。
-
如果無法偵測外掛程式時,請指定要執行的動作。依預設值,當無法偵測時,瀏覽者會被送到「否則」方塊中列出的 URL。若要改成將瀏覽者送到第一個 (「如果有」) URL,請選取「如果無法偵測,永遠前往第一個 URL」選項。在選取之後,這個選項實際上表示:假設瀏覽者具有外掛程式,除非瀏覽器明確指出外掛程式不存在。一般來說,如果外掛程式內容對頁面而言是必要的,請選取此選項;如果不是,則不要選取此選項。註解:
這個選項只適用於 Internet Explorer;Netscape Navigator 永遠可以偵測外掛程式。
-
按一下「確定」,並確認預設事件是否正確。
套用拖曳 AP 元素行為
「拖曳 AP 元素」行為可讓瀏覽者拖曳絕對定位 (AP) 元素。請使用這個行為,建立拼圖、滑動軸控制項,以及其他可移動的介面元素。
您可以指定瀏覽者可拖曳 AP 元素的方向 (水平、垂直或任何方向)、瀏覽者應該拖曳 AP 元素到哪個目標、是否將 AP 元素貼齊目標 (如果 AP 元素與目標相距一定的像素數)、當 AP 元素碰到目標時所要執行的動作等等。
由於「拖曳 AP 元素」行為必須在瀏覽者拖曳 AP 元素之前先行呼叫,否則瀏覽者將無法拖曳,您應該將「拖曳 AP 元素」附加到 body 物件 (使用 onLoad 事件)。
-
選取「插入 > 版面物件 > AP Div」,或按一下「插入」面板上的「繪製 AP Div」按鈕,並且在「文件」視窗的「設計」檢視中繪製 AP Div。
-
在「文件」視窗左下角的標籤選取器中,按一下 <body>。
-
在「行為」面板中,從「增加行為」選單選取「拖曳 AP 元素」。
如果沒有「拖曳 AP 元素」選項可供選取,則您大概已經選取了 AP 元素。
-
在「AP 元素」彈出式選單中,選取「AP 元素」。
-
從「移動」彈出式選單中,選取「限制」或「不限制」。
不限制的移動適合拼圖和其他拖放遊戲。對於滑動軸控制項和活動布景 (如檔案抽屜、戲幕和迷你百葉窗),請選取限制的移動。
-
對於限制的移動,請在「上」、「下」、「左」、「右」方塊中輸入值 (以像素為單位)。
值是相對於 AP 元素的起始位置。若要將移動限制在矩形區域之內,請在四個方塊中全部輸入正值。若只要允許垂直移動,在「上」和「下」欄位輸入正值,而在「左」和「右」欄位輸入 0。若只要允許水平移動,在「左」和「右」欄位輸入正值,而在「上」和「下」欄位輸入 0。
-
在「左」和「上」方塊中,輸入放下目標的值 (以像素為單位)。
放下目標是您想要瀏覽者拖曳 AP 元素所到的地點。當 AP 元素的左上座標符合您在「左」和「上」方塊輸入的值時,它會被認為已經到達放下目標。數值是相對於瀏覽器視窗的左上角。按一下「取得目前位置」以將 AP 元素目前位置自動填入文字方塊。
-
在「靠齊距離」方塊輸入數值 (以像素為單位) 以決定瀏覽者必須多麼接近放下目標才能將 AP 元素貼齊目標。
較大的值使瀏覽者較容易找到放下目標。
-
對於簡單拼圖和布景操作,您可以就此打住。若要定義 AP 元素的拖曳控制點、追蹤 AP 元素拖曳時的移動,以及當 AP 元素被放下時觸發動作,請按一下「進階」索引標籤。
-
若要指定瀏覽者必須按一下 AP 元素的特定區域,才能拖曳 AP 元素時,請從「拖曳控制點」選單中選取「元素內區域」;然後輸入左側和上側的座標,以及拖曳控制點的寬度和高度。
在 AP 元素內部的影像有建議要拖曳的元素時 (例如標題列或抽屜把手),這個選項很有用處。如果您希望瀏覽者能夠在 AP 元素的任意處按一下而加以拖曳的話,請勿設定這個選項。
-
請選取您要使用的任何「拖曳時」選項:
如果 AP 元素在拖曳時應該移到堆疊順序最前面的話,請選取「將元素移至最前」。如果您選取這個選項,請使用彈出式選單來選取是否讓 AP 元素留在前面,或是回復它在堆疊順序中原來的位置。
在「呼叫 JavaScript」方塊輸入 JavaScript 程式碼或函數名稱 (例如 monitorAPelement()),以在拖曳圖層時重複執行程式碼或函數。例如,您可以撰寫函數來監視 AP 元素座標,並在文字方塊中顯示提示,例如「您就快找到了」或「您還沒接近放下目標」。
-
在第二個「呼叫 JavaScript」文字方塊輸入 JavaScript 程式碼或函式名稱 (例如 evaluateAPelementPos()),以在放下 AP 元素時執行程式碼或函式。如果 JavaScript 只有在 AP 元素到達放下目標時才應執行的話,請選取「只有在靠齊時」。
-
按一下「確定」,並確認預設事件是否正確。
收集關於可拖曳 AP 元素的資訊
當您將「拖曳 AP」元素行為附加到物件時,Dreamweaver 會將 MM_dragLayer() 函式插入您文件的 head 區段 (函數會保留 AP 元素的舊式命名慣例 [例如「圖層」],方便使用者編輯以舊版 Dreamweaver 建立的圖層)。除了將 AP 元素註冊為可拖曳的之外,這個函數還對每一個可拖曳的 AP 元素定義三個屬性 - MM_LEFTRIGHT、MM_UPDOWN 和 MM_SNAPPED - 您可以在自己的 JavaScript 函數中使用,以決定 AP 元素的相對水平位置、AP 元素的相對垂直位置,以及 AP 元素是否已經抵達放下目標。
此處所提供的資訊僅供有經驗的 JavaScript 程式設計人員參考。
例如,下列函數會在名為 curPosField 的表單欄位中顯示 MM_UPDOWN 屬性 (AP 元素的目前垂直位置)。(表單欄位在顯示連續更新的資訊方面很有用,因為它們是動態的;也就是說,您可以在頁面已經完成載入之後,變更它們的內容)
function getPos(layerId){ var layerRef = document.getElementById(layerId); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
您可以用各種其他方式來使用這些值,而不是在表單欄位中顯示 MM_UPDOWN 或 MM_LEFTRIGHT 的值。例如,您可以根據值接近放下區域的程度,來撰寫可以在表單欄位中顯示訊息的函數,或是呼叫其他函數,根據該值來顯示或隱藏 AP 元素。
當您在頁面上有數個 AP 元素,而這所有 AP 元素必須在瀏覽者可以前進到下一頁面或工作之前都抵達它們的目標時,讀取 MM_SNAPPED 屬性將特別有用。例如,您可能撰寫函式來計算多少 AP 元素具有 true 的 MM_SNAPPED 值,而在每當 AP 元素被放下時就呼叫它。當貼齊計數到達指定數目時,您便可以將瀏覽者送到下一頁或顯示道賀的訊息。
套用前往 URL 行為
「前往 URL」行為會在目前視窗或指定頁框中開啟新的頁面。這個行為在變更兩個以上的頁框內容時非常有用,只需按一下這些頁框即可。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「前往 URL」。
-
從「開啟於」清單中選取 URL 的目的地。
「開啟於」清單自動列出目前頁框組中的所有頁框以及主要視窗。如果沒有頁框,主要視窗就是唯一選項。
註解:如果有任何頁框命名為 top、blank、self 或 parent,這個行為可能會產生無法預期的結果。瀏覽器有時會將這些名稱誤認為保留的目標名稱。
-
按一下「瀏覽」以選取要開啟的文件,或在「URL」方塊輸入文件的路徑和檔案名稱。
-
重複步驟 2 和 3,開啟其他頁框中的其他文件。
-
按一下「確定」,並確認預設事件是否正確。
套用跳頁選單行為
當您使用「插入>表單>跳頁選單」建立跳頁選單時,Dreamweaver 會建立選單物件,並附加「跳頁選單」(或「跳頁選單前往」) 行為。通常沒有必要手動將「跳頁選單」行為附加到物件。
您可以用兩個方式之一來編輯現有跳頁選單:
您可以按兩下「行為」面板中的現有「跳頁選單」行為,以編輯並重新排列選單項目、變更要跳至的檔案,以及變更開啟那些檔案所在的視窗。
您可以選取選單並使用「屬性」檢視窗中的「清單值」按鈕,於選單中編輯項目,就像您在任何選單中編輯項目一樣。
-
如果您的文件中還沒有跳頁選單物件,請建立它。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「跳頁選單」。
-
依需要在「跳頁選單」對話方塊中進行變更,然後按一下「確定」。
套用跳頁選單前往行為
「跳頁選單前往」行為與「跳頁選單」行為密切相關;「跳頁選單前往」讓您可以將「前往」按鈕與跳頁選單產生關聯 (在使用這個行為之前,跳頁選單必須已在文件中)。按一下「前往」按鈕,便可開啟跳頁選單中已選取的連結。跳頁選單通常不需要「前往」按鈕;從跳頁選單選取一個項目時,通常會導致 URL 載入,而不需要任何進一步的使用者動作。但是如果瀏覽者選取的項目,與跳頁選單中已選取的項目相同時,則跳頁便不會發生。一般說來,這無關緊要,但如果跳頁選單顯示在頁框中,而跳頁選單項目又連結到其他頁框中的頁面時,「前往」按鈕通常就很有用;它允許瀏覽者重新選取跳頁選單中已選取的項目。
當您使用跳頁選單中的「前往」按鈕時,「前往」按鈕會成為唯一能夠讓使用者「跳至」與選單選項相關之 URL 的方法。選取跳頁選單中的選單項目,已經不再能夠將使用者自動重新導向至另一個頁面或頁框。
-
選取要做為「前往」按鈕的物件 (通常是按鈕影像),並在「行為」面板的「增加行為」選單中選擇「跳頁選單前往」。
-
在「選擇跳頁選單」選單中,選取要啟動「前往」按鈕的選單,並按一下「確定」。
套用開啟瀏覽器視窗行為
請使用「開啟瀏覽器視窗」行為,在新視窗開啟頁面。您可以指定新視窗的屬性,包括它的大小、屬性 (該視窗是否可調整大小、是否有選單列等等) 和名稱。例如,您可以使用這個行為在瀏覽者按一下縮圖影像時,於不同視窗中開啟大型影像;有了這個行為,您便可以讓新視窗使用影像的確切大小。
如果您沒有為視窗指定屬性,該視窗會以所在視窗的大小和屬性來開啟。指定視窗的任何屬性將自動關閉所有其他並非明確開啟的屬性。例如,如果您沒有為視窗設定任何屬性,它可能會以 1024 x 768 像素開啟,並具有導覽列 (顯示「上一頁」、「下一頁」、「首頁」和「重新載入」按鈕)、位置工具列 (顯示 URL)、狀態列 (在底部顯示狀態訊息) 以及選單列 (顯示「檔案」、「編輯」、「檢視」和其他選單)。如果您明確設定寬度為 640 和高度為 480,而沒有設定其他屬性,則視窗會以 640 x 480 像素開啟,並且沒有任何工具列。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「開啟瀏覽器視窗」。
-
按一下「瀏覽」以選取檔案,或輸入您想要顯示的 URL。
-
設定視窗寬度及高度 (以像素為單位) 的選項,並設定各種工具列、捲軸、調整大小控制點等組合的選項。如果您想要讓視窗成為連結的目標,或想要使用 JavaScript 來控制它,請為視窗命名 (不使用空格或特殊字元)。
-
按一下「確定」,並確認預設事件是否正確。
套用彈出訊息行為
「彈出訊息」行為會以您指定的訊息顯示 JavaScript 警告。因為 JavaScript 警告只有一個按鈕 (「確定」),請使用這個行為提供使用者資訊,而不要提供選擇。
您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將它放在大括號 ({}) 內。若要顯示大括號,則在它前面加上反斜線 (\{)。
範例:
The URL for this page is {window.location}, and today is {new Date()}.
瀏覽器會控制警告的外觀。如果您想要進一步控制外觀,請考慮使用「開啟瀏覽器視窗」行為。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「彈出訊息」。
-
在「訊息」方塊輸入您的訊息。
-
按一下「確定」,並確認預設事件是否正確。
套用預先載入影像行為
「預先載入影像」行為會快取頁面剛開始顯示時未顯示的影像 (例如,將要使用行為或 Script 調換的影像),以縮短顯示時間。
當您在「調換影像」對話方塊中選取「預先載入影像」選項時,「調換影像」行為會自動預先載入所有標示的影像,所以您在使用「調換影像」時不需手動加入「預先載入影像」。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「預先載入影像」。
-
按一下「瀏覽」以選取影像檔案,或是在「影像原始檔案」方塊中,輸入影像的路徑和檔案名稱。
-
按一下對話方塊頂端的加號 (+) 按鈕,便可將影像新增至「預先載入影像」清單中。
-
針對目前頁面上所要預先載入的所有其餘影像,重複步驟 2 和 3。
-
若要從「預先載入影像」清單中移除影像,請選取該影像,然後按一下減號 (–) 按鈕。
-
按一下「確定」,並確認預設事件是否正確。
套用設定頁框文字行為
「設定頁框文字」行為讓您可以動態設定頁框的文字,以您指定的內容取代頁框的內容和格式。這些內容可以包含任何有效的 HTML 編碼。使用這個行為來動態顯示資訊。
雖然「設定頁框文字」行為會取代頁框的格式,但您可以選取「保存背景顏色」來保存頁面背景和文字顏色屬性。
您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將它放在大括號 ({}) 內。若要顯示大括號,則在它前面加上反斜線 (\{)。
範例:
The URL for this page is {window.location}, and today is {new Date()}.
-
選取物件,並從「行為」面板的「增加行為」選單中,選擇「設定文字 > 設定頁框文字」。
-
在「設定頁框文字」對話方塊中,從「頁框」選單中選取目標頁框。
-
按一下「取得目前的 HTML」按鈕,便可複製目標頁框之 body 區段的目前內容。
-
在「新的 HTML」方塊中輸入訊息。
-
按一下「確定」,並確認預設事件是否正確。
套用設定容器文字行為
「設定容器文字」行為會在包含您所指定內容的頁面上,取代現有容器的內容與格式化動作 (也就是說,任何可能包含文字或其他元素的元素)。這些內容可以包含任何有效的 HTML 原始碼。
您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將它放在大括號 ({}) 內。若要顯示大括號,則在它前面加上反斜線 (\{)。
範例:
The URL for this page is {window.location}, and today is {new Date()}.
-
選取物件,並從「行為」面板的「增加行為」選單中,選取「設定文字 > 設定容器文字」。
-
在「設定容器文字」對話方塊中,使用「容器」選單來選取目標元素。
-
在「新的 HTML」方塊中,輸入新的文字或 HTML。
-
按一下「確定」,並確認預設事件是否正確。
套用設定狀態列文字行為
「設定狀態列文字」行為會在瀏覽器視窗左下方的狀態列中顯示訊息。例如,您可以使用這個行為,在狀態列中描述連結的目的地,而不是顯示與它相關的 URL。瀏覽者經常忽略或漏看狀態列中的訊息 (而且並不是所有瀏覽器都對狀態列文字的設定提供完整支援);如果您的訊息很重要,請考慮將它顯示為彈出訊息或 AP 元素的文字。
如果您使用 Dreamweaver 中的「設定狀態列文字」行為,則瀏覽器中的狀態列文字無法保證一定會跟著變更,因為某些瀏覽器需要進行特殊調整才能變更狀態列文字。舉例來說,當您使用 Firefox 時,就需要變更「進階」選項,這樣 JavaScript 才能變更狀態列文字。如需詳細資訊,請參閱瀏覽器說明文件。
您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將它放在大括號 ({}) 內。若要顯示大括號,則在它前面加上反斜線 (\{)。
範例:
The URL for this page is {window.location}, and today is {new Date()}.
-
選取物件,並從「行為」面板的「增加行為」選單中,選擇「設定文字 > 設定狀態列文字」。
-
在「設定狀態列文字」對話方塊的「訊息」方塊中輸入您的訊息。
訊息要保持簡明。如果狀態列無法容納訊息時,瀏覽器便會將訊息截斷。
-
按一下「確定」,並確認預設事件是否正確。
套用設定文字欄位文字行為
「設定文字欄位文字」行為會以您指定的內容,取代表單文字欄位的內容。
您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式,請將它放在大括號 ({}) 內。若要顯示大括號,則在它前面加上反斜線 (\{)。
範例:
The URL for this page is {window.location}, and today is {new Date()}.
建立命名的文字欄位
-
選取「插入 > 表單 > 文字欄位」。
如果 Dreamweaver 提示您加入表單標籤,請按一下「是」。
-
在「屬性」檢視窗中輸入文字欄位的名稱。請確定該名稱在頁面上是唯一的 (對同一頁面上的多個元素不要使用相同的名稱,即使它們在不同的表單中)。
套用設定文字欄位文字
-
選取文字欄位,並從「行為」面板的「增加行為」選單中,選擇「設定文字 > 設定文字欄位文字」。
-
從「文字欄位」選單中選取目標文字欄位,然後輸入新的文字。
-
按一下「確定」,並確認預設事件是否正確。
套用顯示隱藏元素行為
「顯示隱藏元素」行為會顯示、隱藏或恢復一個或多個頁面元素的預設顯示。這個行為在瀏覽者與頁面互動而需要顯示資訊時非常有用。例如,當使用者將指標移到植物的影像上時,您可以顯示一個頁面元素,提供植物的生長季節和區域、需要的日照、可以長到多大等詳細資訊。該行為只會顯示會隱藏有關的元素,並不會在頁面隱藏起來時,在頁面切換過程中實際移除其元素。
-
選取物件,並從「行為」面板的「增加行為」選單中選擇「顯示隱藏元素」。
如果沒有「顯示隱藏元素」選項可供選取,則您大概已經選取了 AP 元素。由於 AP 元素不接受 4.0 版兩種瀏覽器中的事件,因此您必須選取不同的物件,例如 <body> 標籤或連結 (<a> 標籤)。
-
從「元素」清單中,選取您要顯示或隱藏的元素,並按一下「顯示」、「隱藏」或「恢復」(恢復成預設顯示)。
-
針對您想要變更顯示狀態的所有其餘元素重複步驟 2 (您可以使用單一行為變更多個元素的顯示)。
-
按一下「確定」,並確認預設事件是否正確。
Dreamweaver CS5 已不再支援此行為。
套用調換影像行為
「調換影像」行為會藉由變更 <img> 標籤的 src 屬性,將一個影像與另一個影像調換。請使用這個行為,建立按鈕變換影像和其他影像效果 (包括一次調換一個以上的影像)。插入變換影像會自動將「調換影像」行為加入您的頁面。
因為只有 src 屬性會受此行為影響,因此您應該調換與原來影像有相同尺寸 (高度和寬度) 的影像。否則,便會縮小或擴大調換後的影像,以符合原來影像的尺寸。
另外,還有一種「復原調換影像」行為,此行為會將上一組調換的影像復原成它們先前的原始檔案。這個行為會在每次您將「調換影像」行為附加至物件時,就會自動加入;如果您在附加「調換影像」時,讓「恢復」選項保持選取狀態,應該就不再需要手動選取「復原調換影像」行為。
-
選取「插入 > 影像」,或是按一下「插入」面板上的「影像」按鈕以插入影像。
-
在「屬性」檢視窗中,於最左邊文字方塊輸入影像名稱。
命名影像並不是強制性的;當您將行為附加至物件時,影像就會自動重新命名。不過,如果所有影像都事先命名的話,在「調換影像」對話方塊中辨別影像會比較容易。
-
重複步驟 1 和 2 來插入其他影像。
-
選取物件 (通常是您將要調換的影像),然後在「行為」面板的「增加行為」選單中選擇「調換影像」。
-
從「影像」清單選取您想要變更來源的影像。
-
按一下「瀏覽」以選取新的影像檔案,或在「設定原始檔為」方塊中輸入新影像的路徑和檔案名稱。
-
針對任何其他您想要變更的影像重複步驟 5 和 6。對於所有您想要一次變更的影像,請使用相同的「調換影像」動作;否則,對應的「復原調換影像」動作就不會將它們全部復原。
-
選取「預先載入影像」選項,以便在頁面載入時快取新的影像。
這樣就可避免影像應該顯示時的下載延遲。
-
按一下「確定」,並確認預設事件是否正確。
套用驗證表單行為
「驗證表單」行為會檢查指定的文字欄位內容,以確保使用者已輸入正確的資料類型。請使用 具有 onBlur 事件的個別文字欄位,以在使用者填寫表單時驗證欄位,或將它附加到具有 onSubmit 事件的表單,以在使用者按一下「送出」按鈕時,立即評估數個文字欄位。將此行為附加至表單,可避免送出的表單中包含無效的資料。
-
選取「插入 > 表單」,或是按一下「插入」面板上的「表單」按鈕以插入表單。
-
選取「插入 > 表單 > 文字欄位」,或是按一下「插入」面板上的「文字欄位」按鈕以插入文字欄位。
重複這個步驟來插入其他文字欄位。
-
選擇驗證方法:
若要在使用者填寫表單時能驗證個別的欄位,請選取文字欄位並選取「視窗>行為」。
若要在使用者送出表單時驗證多個欄位,請在「文件」視窗左下角的標籤選取器中,按一下 <form> 標籤,再選取「視窗>行為」。
-
在「增加行為」選單中選取「檢驗表單」。
-
請執行下列其中一項作業:
如果您正在驗證個別欄位,請選取您在「文件」視窗的「欄位」清單中所選取相同欄位。
如果您要驗證多個欄位,請從「欄位」清單選取文字欄位。
-
如果欄位必須包含一些資料,請選取「必要項」選項。
-
選取下列其中一個「接受」選項:
任何東西
檢查必要欄位是否包含資料;資料可以是任何類型的資料。
使用電子郵件地址
檢查該欄位是否包含 @ 符號。
使用數字
檢查該欄位是否只包含數字。
使用數字從
檢查該欄位是否包含指定範圍內的數字。
-
如果您選擇要驗證多個欄位,請對其他您想要驗證的欄位重複步驟 6 和 7。
-
按一下「確定」。
如果您在使用者送出表單時驗證多個欄位,onSubmit 事件便會自動出現在「事件」選單中。
-
如果您要驗證個別的欄位,請檢查預設事件是否為 onBlur 或 onChange。如果不是,請選取其中一個事件。
這兩個事件在使用者從欄位移開時,都會觸發「驗證表單」行為。不同之處在於,無論使用者是否在欄位中進行輸入,都會發生 這兩者之間的差別在於,onBlur 不論使用者是否輸入欄位都會發生,而 onChange 只有在使用者變更欄位內容時才會發生。如果欄位為必填,選擇 onBlur 事件會比較好。