- 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 行為以在文件中放置 JavaScript 程式碼,讓瀏覽者可以變更網頁或起始某些工作。
Adobe Dreamweaver 行為會在文件中放置 JavaScript 程式碼,讓使用者可以用各種方式變更網頁或起始某些工作。行為是事件和該事件所觸發動作的組合。在「行為」面板中,您可以先指定動作,然後再指定觸發該動作的事件,行為新增至頁面。
行為程式碼是用戶端的 JavaScript;也就是說,它是在瀏覽器中,而不是在伺服器上執行。
「事件」實際上是瀏覽器所產生的訊息,表示您網頁的瀏覽者進行了某些動作。例如,當瀏覽者將指標移動到連結上時,瀏覽器便會為該連結產生 onMouseOver 事件;接著,瀏覽器會檢查是否應該呼叫某些 JavaScript 程式碼 (在檢視的頁面中所指定) 做為回應。 不同事件將因不同頁面元素而定義;例如,在大多數瀏覽器中,onMouseOver 和 onClick 事件是與連結相關聯,而 onLoad 則是與影像和文件的 body 區段相關聯。
「動作」是為執行某項工作而預先撰寫的 JavaScript 程式碼,例如開啟瀏覽器視窗、顯示或隱藏 AP 元素、播放聲音,或停止 Adobe Shockwave 影片。Dreamweaver 所提供的動作可提供最大的跨瀏覽器相容性。
在您將行為附加到頁面元素之後,每當某個事件因該元素而發生時,該行為便會呼叫已與該事件產生關聯的動作 (JavaScript 程式碼),而可以用來觸發既定動作的事件會因瀏覽器而不同。例如,如果您將「彈出訊息」動作附加到連結,並指定由 onMouseOver 事件來觸發,那麼每當有人將指標放在該連結上時,您的訊息便會彈出。
單一事件可以觸發數個不同動作,而且您可以指定那些動作發生的順序。
Dreamweaver 提供了約二十幾種動作;其他動作可以在 Exchange 網站 www.adobe.com/go/dreamweaver_exchange_tw 以及協力廠商開發人員網站上找到。如果精通 JavaScript 的話,您可以撰寫自己的動作。
「行為」和「動作」這兩個詞彙是 Dreamweaver 詞彙,而不是 HTML 詞彙。 從瀏覽器的觀點來看,動作就跟任何其他 JavaScript 程式碼的片段一樣。
行為面板總覽
您可以使用「行為」面板 (「視窗>行為」),將行為附加到頁面元素 (更精切地說是附加到標籤),並修改先前所附加之行為的參數。
已經附加到目前所選取頁面元素的行為會出現在「行為」清單 (面板的主要區域),並依事件的字母順序列出。如果相同的事件列出了數個動作,則動作將依它們在清單中顯示的順序來執行。如果行為沒有顯示在行為清單中,就表示沒有行為曾經附加到目前所選取的元素。
「行為」面板具有下列選項:
顯示設定事件
只會顯示已附加到目前文件的事件。事件會整理到用戶端或伺服器端的類別中。每個類別的事件會以可收合的清單顯示。「顯示設定事件」是預設的檢視。
顯示全部事件
會以字母順序顯示指定類別中所有事件的清單。
增加行為 (+)
會顯示可以附加到目前所選元素的動作選單。當您從這個清單選取動作時,會出現一個對話方塊,您可以在其中指定動作的參數。如果所有動作都呈現灰色,表示選取的元素不會產生任何事件。
移除事件 (–)
會從行為清單中移除選取的事件和動作。
向上和向下箭頭按鈕
可在特定事件的行為清單中,上下移動所選取的動作。您只能為特定事件變更動作的順序;例如,您可以為 onLoad 事件變更數個動作發生的順序,但所有 onLoad 動作都會在行為清單中放置在一起。對於無法在清單中上下移動的動作,箭頭按鈕便會停用。
事件
顯示可觸發動作之所有事件的彈出式選單,此選單只有在選取事件時才會顯示 (當您按一下所選取事件名稱旁邊的箭頭按鈕時,便會顯示此選單)。根據選取的物件不同,會出現不同的事件。如果您預期的事件沒有顯示,請確定所選取的是正確的頁面元素或標籤 (若要選取特定標籤,請使用「文件」視窗左下方的標籤選取器)。
括號中的事件名稱只供連結使用;只要選擇其中一個事件名稱便會自動將 Null 連結新增到選取的頁面元素,並附加行為至該連結,而非元素本身。Null 連結在 HTML 編碼中指定為 href="javascript:;"。
關於事件
每一個瀏覽器都會提供一組事件,您可以將這些事件與「行為」面板的「動作」(+) 選單中所列的動作建立關聯。當網頁的瀏覽者與網頁互動 (例如按一下影像) 時,瀏覽器便會產生事件,那些事件可以用來呼叫執行動作的 JavaScript 函數 Dreamweaver 提供許多可以和這些事件一起觸發的常用動作。
如需各瀏覽器所提供的事件名稱和描述,請參閱「Dreamweaver 支援中心」,網址為:www.adobe.com/go/dreamweaver_support_tw。
根據選取的物件不同,「事件」選單會出現不同的事件。若要查明指定瀏覽器支援指定頁面元素的哪些事件,請將頁面元素插入您的文件,並將行為附加至該元素,然後查看「行為」面板中的「事件」選單 (根據預設,事件是由 HTML 4.01 事件清單所繪製,而且大部分的新型瀏覽器都支援這些事件)。如果相關物件還沒有存在於頁面,或者選取的物件無法接受事件的話,事件可能停用 (暗淡顯示)。如果預期的事件未出現,請確認是否已選取正確的物件。
如果您正在將行為附加到影像,則有些事件 (如 onMouseOver) 便會出現在括號中。這些事件只供連結使用。當您選取其中一個事件時,Dreamweaver 會在影像前後加上 <a> 標籤,以便定義 Null 連結。Null 連結在「屬性」檢視窗的「連結」方塊中,會以 javascript:; 來呈現。如果想要將連結值變成到其他頁面的實際連結,您可以變更它,但如果您刪除 JavaScript 連結而不以其他連結來取代,這時便會移除行為。
若要查看在指定瀏覽器中,哪一個標籤可以與指定事件一起使用,請在 Dreamweaver/Configuration/Behaviors/Events 資料夾的其中一個檔案中搜尋該事件。
套用行為
您可以將行為附加到整個文件 (也就是到 <body> 標籤中),或是連結、影像、表單元素,或幾個其他的 HTML 元素。
您選取的目標瀏覽器,將會決定哪些事件會用來支援特定的元素。
您可以為每一個事件指定一個以上的動作。動作將依它們在「行為」面板的「動作」欄中所列出的順序來發生,但是您可以變更該順序。
-
請在頁面上選取元素,例如影像或連結。
若要附加行為到整個頁面,請在「文件」視窗左下方的標籤選取器中按一下 <body> 標籤。
-
選擇「視窗>行為」。
-
按一下加號 (+) 按鈕,並從「增加行為」選單中選取動作。
您無法選擇選單中呈現灰色的動作。它們可能是因為目前文件中必要的物件並不存在,所以才會呈現灰色。例如,如果文件中未包含 Shockwave 或 SWF 檔,「控制 Shockwave 或 SWF」動作便會呈現灰色。
當您選取動作時,便會顯示一個對話方塊,其中顯示該動作的參數和指示。
-
輸入動作的參數,然後按一下「確定」。
Dreamweaver 中提供的所有動作都可以在最新的瀏覽器中運作。儘管有些動作無法在舊版的瀏覽器運作,但是還不至於出現錯誤。
註解:目標元素需要唯一的 ID。例如,如果您希望將「調換影像」行為套用至影像中,則該影像需要一個 ID。如果元素沒有指定 ID,Dreamweaver 會自動為您指定一個。
-
要觸發動作的預設事件會在「事件」欄中出現。如果這不是您所要的觸發事件,請從「事件」彈出式選單中選取其他的事件 (若要開啟「事件」選單,請在「行為」面板中選取事件或動作,然後按一下顯示在事件名稱和動作名稱之間指向下方的黑色箭頭)。
變更或刪除行為
附加行為之後,您可以變更觸發動作的事件、新增或移除動作,以及變更動作的參數。
-
選取有附加行為的物件。
-
選擇「視窗>行為」。
-
進行所要的變更:
若要編輯動作的參數,請按兩下其名稱,或選取它再按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh);然後在對話方塊中變更參數,並按一下「確定」。
若要為指定事件變更動作順序,請選取動作,並按一下向上或向下箭頭。或者,您也可以選取動作,然後將它剪下並貼到其他動作中所要的位置。
若要刪除行為,請選取該行為,並按一下減號 (–) 按鈕,或是按 Delete 鍵。
更新行為
-
選取有附加行為的元素。
-
選擇「視窗>行為」,並按兩下該行為。
-
進行變更,然後在行為的對話方塊中按一下「確定」。
在那頁面中該行為的所有出現項目都將被更新。如果您網站上的其他頁面也有此行為,您必須逐頁更新此行為。
下載和安裝協力廠商行為
您可以在 Exchange for Dreamweaver 網站 (www.adobe.com/go/dreamweaver_exchange_tw) 上取得許多擴充功能。
-
選擇「視窗 > 行為」,並從「增加行為」選單中選取「取得更多行為」。
您的主要瀏覽器會開啟,然後出現 Exchange 網站。
-
瀏覽或搜尋套件。
-
下載並安裝您想要的擴充套件。
如需詳細資訊,請參閱「在 Dreamweaver 中加入和管理擴充功能」。