Dreamweaver 入門

本手冊將介紹 Macromedia Dreamweaver 8 的用法。本手冊中的教學課程會引導您建立簡單但有用的網站。

本手冊包含下列各章：

簡介

了解 Dreamweaver

Dreamweaver 基本概念

教學課程：設定網站和專案檔案

教學課程：建立表格式頁面版面

教學課程：加入頁面內容

教學課程：使用 CSS 設定頁面格式

教學課程：發佈您的網站

教學課程：使用程式碼

教學課程：建立 CSS 式頁面版面

教學課程：顯示 XML 資料

教學課程：開發網路應用程式

了解網路應用程式

安裝網站伺服器

ColdFusion 範例網站的設定

ASP.NET 範例網站的設定

ASP 範例網站的設定

JSP 範例網站的設定

PHP 範例網站的設定

檢視 LiveDocs 上的註解


簡介

Macromedia Dreamweaver 8 是用來設計、編碼和開發網站、網頁及網路應用程式的專業 HTML 編輯器。不論您喜歡手動撰寫 HTML 程式碼的控制感，或是喜歡在視覺編輯環境下工作，Dreamweaver 都提供您實用的工具來增強網站建立經驗。

如果您對 Macromedia Dreamweaver 8 的主要概念不熟悉，本手冊可為您介紹如何使用它。本手冊中的教學課程會引導您建立一個簡單且可供運作的網站。

本章包含下列主題：

利用 Dreamweaver 8 可完成的工作

Dreamweaver 8 新增功能

安裝 Dreamweaver 8

註冊 Dreamweaver 8

印刷慣例


利用 Dreamweaver 8 可完成的工作

Dreamweaver 中的視覺編輯功能讓您在不撰寫任何一行程式碼的情況下，就可以快速建立網頁。您可以檢視所有網站項目或資源，並將它們從方便使用的面板直接拖曳到文件中。您可以透過在 Macromedia Fireworks 或其他圖形應用程式中建立和編輯影像的方式簡化開發工作流程，再直接將影像匯入 Dreamweaver。Dreamweaver 也提供工具，讓您能輕鬆地將 Flash 資源加入網頁中。

除了可協助您建立網頁的拖放功能以外，Dreamweaver 還提供功能完整的編碼環境，其中包含程式碼編輯工具 (如程式碼色彩標示、標籤完成、編碼工具列和程式碼收合) 和「階層式樣式表」(CSS)、JavaScript、ColdFusion 標記語言 (CFML) 和其他語言的語言參考資料。Macromedia Roundtrip HTML 技術不需要重新格式化程式碼，就可以匯入您手動撰寫的 HTML 文件，然後您可以使用偏好的格式樣式來重新格式化程式碼。

Dreamweaver 也能讓您使用如 CFML、ASP.NET、ASP、JSP 和 PHP 等伺服器技術，建立動態、資料庫驅動的網路應用程式。如果您的偏好設定適用於 XML 資料，Dreamweaver 會提供可讓您輕鬆建立 XSLT 頁面、附加 XML 檔案並在網頁上顯示 XML 資料的各項工具。

Dreamweaver 可以完全自訂。您可以建立自己的物件和命令、修改快速鍵、甚至撰寫 JavaScript，用新的行為、「屬性」檢視窗和網站報告來擴充 Dreamweaver 功能。

如需關於學習 Dreamweaver 之可用資源的詳細資訊，請參閱了解 Dreamweaver。


Dreamweaver 8 新增功能

Dreamweaver 8 包括很多新功能，可協助您以最少的時間和心力建立網站和應用程式。Dreamweaver 讓複雜的技術變得簡單且容易使用，讓你事半功倍。

以下是 Dreamweaver 8 中的一些重要新功能：

  • 縮放工具和導引線
  • 視覺 XML 資料繫結
  • 新的 CSS 樣式面板
  • CSS 版面視覺化
  • 程式碼收合
  • 編碼工具列
  • 背景檔案傳輸
  • 插入 Flash Video 命令

如需 Dreamweaver 8 新功能的完整清單和說明，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的 Dreamweaver 8 新增功能。


安裝 Dreamweaver 8

本節說明如何安裝 Dreamweaver。

請務必閱讀 Macromedia 網站 (位於 www.macromedia.com/go/dw_documentation_tw) 上的版本說明，以取得最新的資訊或指示。

若要安裝 Dreamweaver：

  1. 將 Dreamweaver 光碟插入電腦的光碟機。
  2. 請執行下列其中一項作業：
    • 在 Windows 中，Dreamweaver 安裝程式會自動啟動。
    • 在 Macintosh 中，請按兩下出現在桌面上的 Dreamweaver 安裝程式圖示。
  3. 依照螢幕上的指示。

    安裝程式會提示您輸入必要的資訊。

  4. 如果有提示您重新啟動電腦，請依指示進行。


註冊 Dreamweaver 8

若要取得其他 Macromedia 支援，最好利用電子方式或是郵件，替您的 Macromedia Dreamweaver 8 版本註冊。

您註冊時，可登記索取有關升級和 Macromedia 新產品的最新通知。您也可以登記索取及時的電子郵件通知，提供您有關產品更新以及在 www.macromedia.com/tw/ 和 www-euro.macromedia.com 網站上出現的新內容。

若要註冊 Macromedia Dreamweaver 8，請執行下列其中一項作業：

  • 選取「說明＞線上註冊」並填妥電子表單。
  • 選取「說明＞列印註冊」，列出該表單，並將它寄到表單上所列的地址。


印刷慣例

本手冊使用下列印刷慣例：

  • 選單項目顯示格式：選單名稱＞選單項目名稱。子選單中的項目以這種格式顯示：選單名稱＞子選單名稱＞選單項目名稱。
  • 程式碼字體表示 HTML 標籤和屬性名稱，以及在範例中使用的文字。
  • 斜體程式碼字體 表示程式碼中可取代的項目 (有時稱為「移轉符號」)。
  • 粗體 Roman 文字表示您逐字輸入的文字。


了解 Dreamweaver

Macromedia Dreamweaver 8 包括多種資源，可協助您快速瞭解本程式並成為建立網頁的高手。所有的 Dreamweaver 文件都會以電子檔說明和 PDF 格式的方式提供使用。

本章包含下列主題：

從何開始

取得 Dreamweaver 文件的最新資訊

使用 Dreamweaver 說明系統


從何開始

Dreamweaver 文件包含適合各種不同背景讀者的資訊。本節協助您瞭解如何根據自己的背景和要使用 Dreamweaver 完成的工作，研讀利用本文件。

本節包含下列主題：

  • 網路設計初學者
  • 有經驗的網路設計人員
  • 有經驗的程式設計師
  • 網路應用程式開發人員


網路設計初學者

如果您是網路設計上相當新的初學者，本節指出 Dreamweaver 文件中非常適合您背景的章節。

對於網路設計初學者：

  1. 請先閱讀 Dreamweaver 基本概念。然後，執行本手冊中的教學課程繼續進行。教學課程分為兩個小節。前面五個教學課程適合初學者使用，它們會從頭到尾引導您開發一個小型但可供運作的網站。第二小節的教學課程則為您介紹更進階的概念。您可能希望在擁有建立網頁的開發經驗之前，就能進行更進階的教學課程。
  2. 在「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中，您所獲得的概念會比閱讀此「Dreamweaver 入門」手冊的探索工作區、設定 Dreamweaver 網站、管理檔案和建立和開啟文件內容更加完整。
  3. 閱讀「使用 Dreamweaver」中的使用 CSS 配置頁面和以表格呈現內容來瞭解頁面版面。
  4. 若要了解關於在網頁中格式化文字和加入影像的資訊，請閱讀「使用 Dreamweaver」中的插入和格式化文字和插入影像。
  5. 這就是您要開始製作高品質網站所真正需要做的事，但是當您準備好要了解如何使用進階工具時，可以依序閱讀「使用 Dreamweaver」中靜態網頁章節的其他部分。最好等到比較熟悉如何建立網頁之後再閱讀動態網頁章節。


有經驗的網路設計人員

如果您是有經驗的網路設計人員，本節指出 Dreamweaver 文件中非常適合您背景的小節。這裡有兩種不同的方式：一種是提供給剛接觸 Dreamweaver 的設計人員，另一種是提供給熟悉 Dreamweaver 但想要學習更多有關建立動態網頁資訊的設計人員。

對於有經驗但是新接觸 Dreamweaver 的網路設計人員：

  1. 利用閱讀此「Dreamweaver 入門」手冊中的教學課程開始進行。
  2. 在「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中，請閱讀探索工作區，以了解更多有關 Dreamweaver 使用者介面的資訊。
  3. 雖然設定 Dreamweaver 網站和管理檔案中的許多資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網站的章節。
  4. 如需有關使用 Dreamweaver 建立基本 HTML 網頁的有用詳細資訊，請閱讀插入和格式化文字和插入影像。
  5. 如需在 Dreamweaver 中撰寫程式碼的資訊，請參閱設定程式碼撰寫環境、在 Dreamweaver 中撰寫程式碼、程式碼最佳化和除錯和在設計檢視中編輯程式碼。
  6. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主題感興趣。

對於有經驗、熟悉 Dreamweaver，並且想要了解更多有關建立動態網頁資訊的網路設計人員：

  1. 利用閱讀了解網路應用程式和教學課程：開發網路應用程式開始進行。利用閱讀了解網路應用程式和教學課程：開發網路應用程式開始進行。
  2. 在「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中，請閱讀探索工作區，以了解有關 Dreamweaver 使用者介面新概念的資訊，再閱讀最佳化視覺開發的工作區。
  3. 若要熟悉 Dreamweaver 的動態網頁工作流程，請閱讀動態網頁設計的工作流程。
  4. 設定網路伺服器和應用程式伺服器(請參閱設定網路應用程式)。
  5. 連線到資料庫。(請參閱設定網路應用程式中的連線到資料庫)。
  6. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主題感興趣。


有經驗的程式設計師

如果您是有經驗的程式碼撰寫者，本節指出 Dreamweaver 文件中非常適合您背景的小節。

對於有經驗的程式設計師：

  1. 利用閱讀此「Dreamweaver 入門」手冊中的教學課程：使用程式碼開始進行。
  2. 在「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中，請閱讀探索工作區，以了解更多有關 Dreamweaver 使用者介面的資訊。
  3. 雖然設定 Dreamweaver 網站和管理檔案中的許多資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網站的章節。
  4. 請閱讀設定程式碼撰寫環境、在 Dreamweaver 中撰寫程式碼、程式碼最佳化和除錯和在設計檢視中編輯程式碼中更多有關使用 Dreamweaver 撰寫程式碼的資訊。
  5. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主題感興趣。


網路應用程式開發人員

如果您是網路應用程式開發人員，本節指出 Dreamweaver 文件中最適合您背景的小節。這裡有兩種不同的方式，視您先前是否使用過 Dreamweaver 而定。

對於沒有使用過 Dreamweaver 的網路應用程式開發人員：

  1. 請先快速閱讀「Dreamweaver 入門」手冊，以熟悉 Dreamweaver 的基本使用概念。
  2. 在「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中，請閱讀探索工作區，以了解更多有關 Dreamweaver 使用者介面的資訊。
  3. 雖然設定 Dreamweaver 網站和管理檔案中的許多資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網站的章節。
  4. 使用 Dreamweaver 設定網路伺服器和應用程式伺服器(請參閱設定網路應用程式)。
  5. 連線到資料庫。(請參閱設定網路應用程式中的連線到資料庫)。
  6. 請閱讀「使用 Dreamweaver」中其他各章開頭處的綜覽，來決定您是否對其主題感興趣。

對於有經驗並且使用過 Dreamweaver 的網路應用程式開發人員：

  1. 利用閱讀「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的 Dreamweaver 8 新增功能開始進行。新增功能小節位於簡介中。
  2. 略讀探索工作區以了解有關 Dreamweaver 使用者介面新概念的資訊。


取得 Dreamweaver 文件的最新資訊

Dreamweaver 包括各種媒體，可協助您快速瞭解本程式並成為建立網頁的高手。Dreamweaver 說明系統包括數份文件，可協助您瞭解 Dreamweaver、Dreamweaver 擴充功能和 ColdFusion。還有很多其他線上資源，可在您學習如何建立網頁時提供諮詢。

本節包含下列主題：

  • 存取 Dreamweaver 文件
  • 存取其他線上 Dreamweaver 資源

存取 Dreamweaver 文件

下列表格會摘要說明 Dreamweaver 說明系統中所包含的文件內容：

您可以購買所選取標題的書面列印版本。如需詳細資訊，請參閱 www.macromedia.com/go/buy_books。

標題

說明/對象

所在位置

Dreamweaver 入門

提供 Dreamweaver 概念和介面的基本簡介，以及詳細的初學者教學課程。專為初級使用者設計，還有想學習新功能的中級和進階使用者也適用。
  • 在 Dreamweaver 中檢視：選取「說明＞Dreamweaver 入門」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

使用 Dreamweaver

所有 Dreamweaver 功能的完整資訊。專為所有 Dreamweaver 使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞Dreamweaver 說明」或「說明＞使用 Dreamweaver」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

擴充 Dreamweaver 功能

說明 Dreamweaver 架構和應用程式設計介面 (API)。專為想要建立擴充功能或自訂 Dreamweaver 介面的進階使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞擴充 Dreamweaver 功能」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

Dreamweaver API 參考

說明公用程式 API 和 JavaScript API，兩者都可讓您在開發 Dreamweaver 擴充功能時，執行各種支援工作。專為想要建立擴充功能或自訂 Dreamweaver 介面的進階使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞Dreamweaver API 參考」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

使用 ColdFusion

包括 ColdFusion 文件集中精選的最重要書籍 (完整的文件集可在 LiveDocs 上取得)。專為對 ColdFusion 感興趣的使用者設計，從初學者到進階開發人員都適用。
  • 在 Dreamweaver 中檢視：選取「說明＞使用 ColdFusion」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_coldfusion/
  • 取得 PDF：www.macromedia.com/go/cf_documentation

參考

包括很多種與 HTML、伺服器模型和其他主題相關的參考手冊，主要都由 O悐eilly 發佈。專為需要編碼語法、概念等相關詳細資訊的使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞參考」。如需完整的手冊清單，請按一下「參考」面板中的「手冊」彈出式選單。

存取其他線上 Dreamweaver 資源

下列表格會摘要說明學習 Dreamweaver 所需的其他線上資源。

資源 | 說明/對象 | 所在位置
Dreamweaver 支援中心 | Dreamweaver 使用者專用的 TechNote、支援和問題解決資訊。 | www.macromedia.com/go/dreamweaver_support_tw
Dreamweaver 開發人員中心 | 文件和教學課程可協助您改善技巧並學習新的技巧。 | www.macromedia.com/go/dreamweaver_devcenter_tw
Dreamweaver 文件資源中心 | 取得 PDF 格式的手冊、勘誤表、教學課程和版本說明。 | www.macromedia.com/go/dw_documentation_tw
Macromedia 線上討論區 | 由 Dreamweaver 使用者、技術支援人員和 Dreamweaver 開發小組所提供的討論及問題解決資訊。 | www.macromedia.com/go/dreamweaver_newsgroup
Macromedia 訓練 | 針對實用工作和真實狀況設計的課程。 | www.macromedia.com/go/dreamweaver_training_tw


使用 Dreamweaver 說明系統

「說明」選單中的線上說明系統提供了您可以使用 Dreamweaver 執行的所有工作之詳細資訊。若要查看「說明」中可用的文件清單，請參閱存取 Dreamweaver 文件。

本節包含下列主題：

  • 開啟說明
  • 搜尋說明
  • 使用索引
  • 變更字體大小
  • 使用起始頁面
  • 列印 Dreamweaver 文件
  • 與 LiveDocs 討論 Dreamweaver 文件


開啟說明

在 Dreamweaver 中工作時，您可以存取產品內附的說明。

若要開啟 Dreamweaver 說明：

  • 選取「說明＞Dreamweaver 說明」。


搜尋說明

您可以進行 Dreamweaver 說明的全文檢索。

若要搜尋產品內附的說明 (Windows)：

  1. 在「Dreamweaver 說明」中，按一下「搜尋」索引標籤。
  2. 在文字方塊中輸入一個文字或文句，然後按一下「列出主題」。
  3. 按兩下結果清單中的主題以顯示它。

    提示

    若要搜尋特定的文句，請將以雙引號將它括住。

若要搜尋產品內附的說明 (Macintosh)：

  1. 在「Dreamweaver 說明」的「詢問問題」文字方塊中輸入一個文字或文句，然後按 Enter 鍵。
  2. 按兩下結果清單中的主題以顯示它。


使用索引

您可以利用索引快速尋找資訊。

若要使用索引 (Windows)：

  1. 在「Dreamweaver 說明」中，按一下「索引」索引標籤。
  2. 捲動到按照字母順序排列的清單中之索引項目，再按兩下某項目以顯示索引的資訊。

    提示

    您可以開始在文字方塊中輸入關鍵字以便快速捲動到索引項目。

若要使用索引 (Macintosh)：

  1. 在「Dreamweaver 說明」中，按一下目錄中的「索引」連結。
  2. 按一下某個字母，然後捲動到清單中的索引項目。
  3. 按一下項目旁邊的數字以顯示索引資訊。


變更字體大小

您可以變更說明系統所使用的字體大小。

若要變更 Windows 說明檢視器中的字體大小：

  1. 開啟 Internet Explorer。

    Windows 說明檢視器中的字體大小已在 Internet Explorer 中設定。

  2. 選取「檢視＞文字大小」，然後選取一種大小。

若要變更 Apple 說明檢視器中的字體大小：

  • 在說明中，選取「編輯＞減少字體大小」或「編輯＞增加字體大小」。


使用起始頁面

當您啟動 Dreamweaver 但未開啟文件時，Dreamweaver「起始頁面」便會出現在工作環境中。「起始頁面」可讓您快速存取 Dreamweaver 教學課程、最近使用的檔案和 Dreamweaver Exchange，您可以在該頁面上將新功能加入一些 Dreamweaver 功能中。「起始頁面」的用法與網頁的用法很類似。按一下您能看到要使用的任何功能。

若要停用「起始頁面」：

  1. 執行 Dreamweaver 但未開啟文件。

    「起始頁面」便會顯示。

  2. 按一下「不要再顯示」。


列印 Dreamweaver 文件

您可在 Macromedia 網站 (www.macromedia.com/go/dw_documentation_tw) 上取得 PDF 格式的下列手冊：

  • 使用 Dreamweaver
  • Dreamweaver 入門
  • 擴充 Dreamweaver 功能
  • Dreamweaver API 參考

您可以在自己的印表機上列印全部或部分的 PDF，或者將 PDF 送交複印商店處理。


與 LiveDocs 討論 Dreamweaver 文件

Dreamweaver 文件也可以從線上利用 LiveDocs 格式取得。LiveDocs 版本的 Dreamweaver 說明看起來很像產品內附的說明，但是它可讓您針對個別說明頁面的內容加以註解。您可以根據自己的經驗或從其他 Dreamweaver 設計人員和開發人員徵詢所得的建議，在特定的 Dreamweaver 主題上加入有用的資訊。

Dreamweaver LiveDocs 也可以在 http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw 上取得


Dreamweaver 基本概念

為了將 Macromedia Dreamweaver 8 經驗的功效發揮到極致，您應該要瞭解 Dreamweaver 工作區的基本元素。本章會介紹最重要且最常用的工作區元素，並告訴您如何在 Dreamweaver 中完成一些基本的工作。

本章包含下列各節：

認識 Dreamweaver 8 工作區

自訂 Dreamweaver 8 工作區

在 Dreamweaver 8 中完成基本工作


認識 Dreamweaver 8 工作區

Dreamweaver 工作區可讓您檢視文件和物件屬性。工作區的工具列中也放置了許多最常用的作業選項，因此，您可以快速地變更文件。

本節的設計可為您提供 Dreamweaver 8 工作區的綜覽。如需本節所介紹之任何工作區元素的更完整資訊，請參閱「使用 Dreamweaver」中的探索工作區。

本節包含下列主題：

  • 工作區版面
  • 文件視窗
  • 文件工具列
  • 狀態列
  • 插入列
  • 編碼工具列
  • 「屬性」檢視窗
  • 檔案面板
  • CSS 樣式面板


工作區版面

在 Windows 中，Dreamweaver 提供了一個全方位視窗整合式版面。整合式工作區中的所有視窗和面板，都整合成一個較大的單一應用程式視窗。

注意

Windows 工作區也有「程式碼撰寫者」選項，依預設，它會將面版群組停駐在左邊，並在「程式碼」檢視中顯示「文件」視窗。如需詳細資訊，請參閱「使用 Dreamweaver」中的使用程式碼撰寫者導向的工作區域 (僅適用於 Windows)。若要使用這個選項，請參閱選擇工作區版面 (僅適用於 Windows)。

在 Macintosh 上，Dreamweaver 可以於單一視窗內顯示多份文件，且會以索引標籤來識別每份文件。Dreamweaver 也可以顯示為浮動工作區的一部分，在該工作區中每份文件會出現在它自己的個別視窗中。面板群組一開始就停駐在一起，但是也可以回到自己的視窗。當您拖曳視窗或調整它們的大小時，它們會自動彼此貼齊、貼齊到畫面的邊上及貼齊到「文件」視窗。

不論在 Windows 或 Macintosh 中都可以於不同的版面之間切換。如需詳細資訊，請參閱選擇工作區版面 (僅適用於 Windows) 和顯示外框包圍的檔案 (Macintosh)。


文件視窗

「文件」視窗顯示目前的文件。您可以選取以下任何檢視：

設計檢視是可供開發視覺頁面版面、視覺編輯及快速應用程式的一種設計環境。在這種檢視中，Dreamweaver 會顯示文件的完全可編輯、視覺的表示法，類似您在瀏覽器中檢視頁面時所看到的。

程式碼檢視是一個手動撰寫程式碼的環境，用來撰寫及編輯 HTML、JavaScript、伺服器語言程式碼，如 PHP 或 ColdFusion 標記語言 (CFML)，以及各種其他的程式碼。如需詳細資訊，請參閱「使用 Dreamweaver」中的在 Dreamweaver 中撰寫程式碼。

程式碼和設計檢視可讓您在單一視窗中同時檢視同一個文件的「程式碼」檢視和「設計」檢視。

當「文件」視窗有標題列時，標題列會顯示頁面標題以及檔案路徑和檔案名稱 (以括號括住)。如果您對該檔案進行過變更而尚未儲存的話，Dreamweaver 會在檔案名稱之後顯示一個星號。

當「文件」視窗在整合式工作區版面 (僅適用於 Windows) 中為最大化時，「文件」視窗便沒有標題列，在這種情況下，頁面標題以及檔案路徑和檔案名稱會顯示在主要工作區視窗的標題列。

此外，當「文件」視窗最大化時，在「文件」視窗區域的頂端會出現索引標籤，顯示所有開啟文件的檔案名稱。若要切換到文件，請按一下它的索引標籤。

如需關於使用「文件」視窗的詳細資訊，請參閱「使用 Dreamweaver」中的探索工作區。


文件工具列

「文件」工具列包含能讓您在不同的文件檢視之間快速切換的按鈕：「程式碼」、「設計」和可同時顯示「程式碼」和「設計」檢視的分割檢視。

工具列還包含一些常用命令和選項，這些命令和選項都是與檢視文件、在本機和遠端網站之間傳送文件有關。

下列選項出現在「文件」工具列中：

顯示程式碼檢視只會在「文件」視窗中顯示「程式碼」檢視。

顯示程式碼和設計檢視會在「文件」視窗的一部份顯示「程式碼」檢視，另一部份則顯示「設計」檢視。當您選取此組合檢視時，「檢視選項」選單中的「設計檢視在上方」選項會變成可用狀態。使用這個選項來指定哪一個檢視要顯示在「文件」視窗的上方。

顯示設計檢視只會在「文件」視窗中顯示「設計」檢視。

伺服器除錯會顯示一份報告，協助您對目前的 ColdFusion 網頁進行除錯。這份報告會列出您網頁中的錯誤 (如果有的話)。

文件標題可讓您輸入要顯示在瀏覽器標題列中的文件標題。如果您的文件已有標題，它會出現在此欄位中。

沒有瀏覽器/檢查錯誤可供您檢查瀏覽器之間的相容性。

驗證標記可讓您驗證目前的文件或所選取的標籤。

檔案管理會顯示「檔案管理」彈出式選單。

在瀏覽器中預覽/除錯讓您能在瀏覽器中預覽文件及針對文件加以除錯。從彈出式選單中選取瀏覽器。

重新整理設計檢視會在您於「程式碼」檢視中進行變更之後，重新整理文件的「設計」檢視。在執行某些動作 (如儲存檔案或按一下這個按鈕) 之前，您在「程式碼」檢視中所作的變更不會自動出現在「設計」檢視中。

檢視選項可讓您設定「程式碼」檢視和「設計」檢視的選項，包括哪一個檢視應該出現在另一個檢視之上。目前檢視中的選單選項有：「設計」檢視、「程式碼」檢視或兩者。

視覺輔助讓您使用不同的視覺輔助來設計頁面。

如需關於使用「文件」工具列的詳細資訊，請參閱「使用 Dreamweaver」中的探索工作區。


狀態列

「文件」視窗底部的狀態列提供現在所建立文件的其他資訊。

標籤選取器會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。按一下 <body> 以選取整個文件的內文。若要在標籤選取器中設定標籤的 class 或 id 屬性，請按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 該標籤，並從快顯選單中選取類別或 ID。要選取標籤時，標籤選取器是較好的方法，因為它會確保您一定能準確選取標籤。

「手掌」工具可讓您按一下文件並在「文件」視窗中拖曳它。按一下「選取」工具停用「手掌」工具。

「縮放」工具和「設定顯示比例」彈出式選單可讓您設定文件的顯示比例等級。如需詳細資訊，請參閱「使用 Dreamweaver」中的放大和縮小顯示。

「視窗大小」彈出式選單 (只有「設計」檢視中看得到) 可讓您將「文件」視窗的大小調整為預先決定或自訂的尺寸。如需詳細資訊，請參閱「使用 Dreamweaver」中的調整文件視窗大小。

「視窗大小」彈出式選單的右邊是估計的文件大小和估計的頁面下載時間，包括所有相關檔案，如影像和其他媒體檔。如需詳細資訊，請參閱「使用 Dreamweaver」中的設定下載時間和大小偏好設定。

如需關於使用狀態列的詳細資訊，請參閱「使用 Dreamweaver」中的探索工作區。


插入列

「插入」列包含建立及插入物件 (如表格、圖層和影像) 所用的按鈕。在將指標滑過按鈕時，工具提示便會和按鈕名稱一起出現。

這些按鈕分成數個類別，您可在「插入」列的左邊切換。當目前文件含有伺服器程式碼時 (如 ASP 或 CFML 文件)，就會出現其他類別。在啟動 Dreamweaver 時，就會開啟您最後使用的類別。

部分類別的按鈕含有彈出式選單。當您從彈出式選單中選取某一選項後，該選項便會成為該按鈕的預設動作。例如，如果您從「影像」按鈕的彈出式選單中選取了「影像預留位置」，則下次當您按一下「影像」按鈕時，Dreamweaver 便會插入影像預留位置。每當您從彈出式選單中選取新的選項後，按鈕的預設動作就會變更。

「插入」列會以下列類別組織：

常用類別可讓您建立和插入最常使用的物件，如影像和表格。

版面類別可讓您插入表格、div 標籤、圖層和頁框。也可以選擇以下三種表格檢視的其中一種：標準 ( 預設檢視 )、展開表格和版面。當選取 「版面」模式時，可使用Dreamweaver 版面工具：「繪製版面儲存格」和 「繪製版面表格」。

表單類別包含建立表單和插入表單元素所用的按鈕。

文字類別可讓您插入各種文字和清單格式的標籤，如 b、em、p、h1 和 ul。

HTML 類別可讓您插入用在水平線、檔頭內容、表格、頁框和 Script 的 HTML 標籤。

伺服器程式碼類別僅適用於使用特定伺服器語言的網頁，這些語言包含 ASP、ASP.NET、CFML Basic、CFML Flow、CFML Advanced、JSP 和 PHP。這些類別每個都能提供可以在「程式碼」檢視中插入的伺服器程式碼物件。

應用程式類別可讓您插入動態元素，如資料集、重複區域以及記錄插入和更新表單。

Flash 元素類別可讓您插入 Macromedia Flash 元素。

最愛類別可讓您將最常用的「插入」列按鈕加以群組並排列組織在一個常用的地方。

如需關於使用「插入」列的詳細資訊，請參閱「使用 Dreamweaver」中的探索工作區。


編碼工具列

「編碼」工具列包含的按鈕能讓您執行許多標準的編碼作業，例如收合和展開程式碼選取範圍、反白標示無效的程式碼、套用和移除註解、縮排程式碼，以及插入最近使用過的程式碼片段等等。「編碼」工具列只有在「程式碼」檢視中才看得到，而且會垂直顯示在「文件」視窗的左邊。

您無法解除鎖定或移動「編碼」工具列，但是可以將它隱藏。如需詳細資訊，請參閱「使用 Dreamweaver」中的顯示工具列。

如需關於使用「編碼」工具列的詳細資訊，請參閱「使用 Dreamweaver」中的使用「編碼」工具列快速插入程式碼。


「屬性」檢視窗

「屬性」檢視窗可供您檢查及編輯目前選取的頁面元素 (如文字或插入的物件) 的最常用屬性。「屬性」檢視窗的內容會隨著選取的元素而不同。例如，如果您選取頁面上的影像，「屬性」檢視窗會變更為顯示影像的屬性 (比如說，若有的話會顯示影像的檔案路徑、影像的寬度和高度、影像周圍的邊框等等)。

依預設，「屬性」檢視窗位在工作區的下方，但您也可以依照需要，將其停駐在工作區的上方，或者，使其成為工作區中的浮動面版。如需關於移動「屬性」檢視窗的詳細資訊，請參閱「使用 Dreamweaver」中的停駐及解除鎖定面板和面板群組。

如需關於使用「屬性」檢視窗的詳細資訊，請參閱「使用 Dreamweaver」中的使用「屬性」檢視窗。


檔案面板

您會使用「檔案」面板來檢視及管理 Dreamweaver 網站中的檔案。

在「檔案」面板中檢視網站、檔案和資料夾時，您可以變更檢視區域的大小，以及展開或收合「檔案」面板。「檔案」面板收合時，會將本機網站、遠端網站或測試伺服器的內容顯示為檔案清單。「檔案」面板展開時，便會顯示本機網站以及遠端網站或者是測試伺服器。「檔案」面板也可以顯示本機網站的視覺網站地圖。

對於 Dreamweaver 網站，藉由變更收合的面板中預設出現的檢視 (不論是本機或遠端網站)，便可以自訂「檔案」面板。

如需關於使用「檔案」面板來管理網站的詳細資訊，請參閱「使用 Dreamweaver」中的管理檔案。


CSS 樣式面板

「CSS 樣式」面板能讓您追蹤影響目前選取的頁面元素之 CSS 規則和屬性 (「目前」模式)，或者追蹤影響整份文件的規則和屬性 (「全部」模式)。「CSS 樣式」面板上方有一個切換按鈕可以讓您切換這兩種模式。「CSS 樣式」面板也可以讓您在「全部」和「正在」模式中修改 CSS 屬性。

您可以拖曳窗格之間的邊框，藉此調整任一窗格的大小。

在「正在」模式中，「CSS 樣式」面板會顯示三種窗格：顯示文件中目前選取範圍之 CSS 屬性的「選取範圍摘要」窗格、顯示所選屬性位置 (或根據選取範圍顯示所選標籤的規則重疊顯示) 的「規則」窗格，以及可以讓您編輯定義選取範圍的規則之 CSS 屬性的「屬性」窗格。

在「全部」模式中，「CSS 樣式」面板會顯示兩種窗格：「所有規則」窗格 (上方)，以及「屬性」窗格 (下方)。「所有規則」窗格會顯示在目前文件中定義的規則清單，以及在所有附加於目前文件的樣式表中定義的規則。而「屬性」窗格能讓您編輯任何在「所有規則」窗格中所選規則的 CSS 屬性。

您在「屬性」窗格中所作的任何變更都會立即套用，讓您在變更的同時即可預覽您的工作。

如需關於「CSS 樣式」面板的詳細資訊，請參閱「使用 Dreamweaver」中的關於 CSS 樣式面板。


自訂 Dreamweaver 8 工作區

有一些基本的技巧您可以用來自訂 Dreamweaver 以符合自己的需求，不需要了解複雜的程式碼或編輯文字檔即可達成。

本節包含下列主題：

  • 選擇工作區版面 (僅適用於 Windows)
  • 顯示外框包圍的檔案 (Macintosh)
  • 隱藏和顯示起始頁面


選擇工作區版面 (僅適用於 Windows)

在 Windows 中，您可選擇使用「設計人員」或「程式碼撰寫者」工作區版面。第一次啟動 Dreamweaver 時，會有一個對話方塊讓您選擇工作區版面。您可隨時切換到不同的工作區。

若要在首次啟動 Dreamweaver 時選擇工作區版面：

  1. 選取下列其中一個版面：

    設計人員是使用 MDI (多重文件介面) 的一種整合式工作區，在該工作區中所有的「文件」視窗和面板都是整合到一個較大的應用程式視窗中，將面板群組停駐在右邊。

    程式碼撰寫者是相同的整合式工作區，但是將面板群組停駐在左邊，其版面類似 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所使用的版面，而且依預設，「文件」視窗會顯示「程式碼」檢視。

    注意

    您可以將面板群組停駐在任何版面的工作區的任一邊。
  2. 按一下「確定」。

若要在選定工作區之後切換到不同的工作區：

  • 選取「視窗＞工作區版面」，再選取您偏好的工作區版面。

除了「程式碼撰寫者」和「設計師」外，您也可以選擇「雙重螢幕」。如果您有第二個監視器，「雙重螢幕」會將所有面板放在第二個監視器上，並將「文件」視窗保留在主要監視器上。


顯示外框包圍的檔案 (Macintosh)

在 Macintosh 上，Dreamweaver 可以在單一「文件」視窗中顯示多份文件，並利用索引標籤來識別每份文件。Dreamweaver 也可以將這些文件顯示為浮動工作區的一部分，在該工作區中每份文件會出現在它自己的視窗中。

若要在另一個視窗中開啟外框包圍的檔案：

  • 按一下右鍵或 Control + 按一下索引標籤，再從快顯選單中選取「移至新視窗」。

若要將個別文件合併至以外框包圍的視窗中：

  • 選取「視窗＞以索引標籤方式組合」。

若要變更外框包圍的檔案預設值：

  1. 選取「Dreamweaver＞偏好設定」，然後選取「一般」類別。
  2. 選取或取消選取「在索引標籤中開啟文件」，再按一下「確定」。

    注意

    當您變更偏好設定時，Dreamweaver 並不會改變目前已開啟的文件顯示方式。但是，在您選取新的偏好設定後，隨後開啟的文件都將依據選取的偏好設定來顯示。


隱藏和顯示起始頁面

當您啟動 Dreamweaver 時，以及每當您沒有開啟任何文件時，便會出現 Dreamweaver「起始頁面」。您可以選擇隱藏「起始頁面」，並於稍後再顯示它。當隱藏「起始頁面」且沒有開啟文件時，「文件」視窗便會是空白的。

若要隱藏「起始頁面」：

  • 在「起始頁面」上選取「不要再顯示」核取方塊。

    當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便不會出現。

若要顯示「起始頁面」：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現並顯示「一般」偏好設定類別。

  2. 選取「顯示起始頁面」核取方塊。

    當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便會出現。


在 Dreamweaver 8 中完成基本工作

本節會說明如何完成基本工作，例如建立、開啟及儲存檔案。如需詳細資訊，請參閱「使用 Dreamweaver」中的建立和開啟文件。

本節包含下列主題：

  • 關於 Dreamweaver 檔案
  • 在 Dreamweaver 中建立新檔案
  • 在 Dreamweaver 中儲存檔案
  • 在 Dreamweaver 中開啟檔案


關於 Dreamweaver 檔案

在 Dreamweaver 中您可以處理各種檔案類型。要處理的主要檔案種類是 HTML 檔。HTML 檔 (或「超文字標記語言」檔) 包含了負責在瀏覽器中顯示網頁的標籤語言。您可以使用 .html 或 .htm 副檔名來儲存 HTML 檔。Dreamweaver 預設使用 .html 副檔名來儲存檔案。

以下是在 Dreamweaver 中工作時，您可能會使用的一些其他常用檔案類型：

CSS (或「階層式樣式表」檔) 具有 .css 副檔名。它們的用途是設定 HTML 內容的格式及控制各種頁面元素的定位。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的了解階層式樣式表。

GIF (或 Graphics Interchange Format 檔) 具有 .gif 副檔名。GIF 格式是常見的網頁圖形格式，適用於卡通、標誌、含透明區域的圖形和動畫。GIF 最多會包含 256 色。

JPEG (或 Joint Photographic Experts Group 檔，其名稱由來是以建立該格式的公司為名) 具有 .jpg 副檔名，而且通常是照片或高色彩的影像。JPEG 格式最適用於數位或掃描的照片、使用材質的影像、具有漸層色彩轉換的影像，以及任何需要 256 色以上的影像。

XML (或「可擴展標記語言」檔) 具有 .xml 副檔名。它們包含原始形式的資料，您可以利用 XSL (可擴展樣式表語言) 來設定資料格式。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的在網頁中顯示 XML 資料。

XSL (「可擴展樣式表語言」檔) 具有 .xsl 或 .xslt 副檔名。它們可用來設定您想要顯示在網頁上的 XML 資料的樣式。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的在網頁中顯示 XML 資料。

CFML (或「ColdFusion 標記語言」 檔) 具有 .cfm 副檔名。它們可用來處理動態網頁。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的快速建立 ColdFusion 應用程式。

ASPX (或 ASP.NET 檔) 具有 .aspx 副檔名。它們可用來處理動態網頁。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的快速建立 ASP.NET 應用程式。

PHP 或 PHP：超文字前置處理器 (PHP Hypertext Preprocessor) 檔具有 .php 副檔名。它們可用來處理動態網頁。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的快速建立 PHP 應用程式。


在 Dreamweaver 中建立新檔案

本節告訴您如何在 Dreamweaver 中建立新的空白文件。

您也可以根據 Dreamweaver 設計檔或現有的樣版，在 Dreamweaver 中建立新文件。如需詳細資訊，請參閱「使用 Dreamweaver」中的建立新文件。

若要建立新的空白文件：

  1. 選取「檔案＞開新檔案」。

    「新增文件」對話方塊便會出現。已選取「一般」標籤。

  2. 從「分類」清單中，選取「基本頁面」、「動態網頁」、「樣版頁面」、「其他」或「頁框組」，然後再從右側的清單中，選取要建立的文件類型。

    例如，選取「基本頁面」建立一個 HTML 文件，或選取「動態網頁」建立一個 ColdFusion 或 ASP 文件等等。

    如需此對話方塊中選項的詳細資訊，請按一下對話方塊中的「說明」按鈕。

  3. 按一下「建立」按鈕。

    新文件便會在「文件」視窗中開啟。

  4. 儲存文件 (請參閱在 Dreamweaver 中儲存檔案)。


在 Dreamweaver 中儲存檔案

建立新文件時，需要儲存此文件。

若要儲存新文件：

  1. 選取「檔案＞儲存」。

    提示

    將您的檔案儲存在 Dreamweaver 網站中，是個不錯的方法。如需詳細資訊，請參閱教學課程：設定網站和專案檔案。
  2. 在出現的對話方塊中，導覽到您要儲存檔案的資料夾。
  3. 在「檔案名稱」文字方塊中，輸入該檔案的名稱。

    在檔案和資料夾名稱中，請避免使用空格和特殊字元，同時也不要以數字做為檔名的開頭。特別針對您想放在遠端伺服器上的檔案名稱，請勿使用特殊字元 (如 é、ç 或 ¥) 或標點符號 (如冒號、斜線或句點)；很多伺服器會在上傳期間變更這些字元，這將造成與該檔案的任何連結中斷。

  4. 按一下「儲存檔案」。


在 Dreamweaver 中開啟檔案

在 Dreamweaver 中，您可以輕易地開啟並編輯文件。

若要開啟檔案：

  1. 選取「檔案＞開啟舊檔」。
  2. 在「開啟舊檔」對話方塊中，選取檔案再按一下「開啟」。


教學課程：設定網站和專案檔案

本教學課程介紹 Macromedia Dreamweaver 8 網站的概念，並說明如何設定 Cafe Townsend 範例網站的專案檔案。在 Dreamweaver 中，網站通常由兩個部分組成：本機電腦 (本機網站) 上的一組檔案，以及當您準備將檔案公佈時，所要上傳的遠端網站伺服器位置 (遠端網站)。您使用 Dreamweaver「檔案」面板來管理網站的檔案。

利用 Dreamweaver 建立網站最常用的方法，是在本機磁碟上建立及編輯頁面，然後再將這些頁面的複本上傳到遠端網站伺服器上，以便在網路上進行檢視。本教學課程僅教導如何設定本機網站，讓您能立即開始建立網頁。初步完成網站後，接著要學習如何建立遠端網站，以便將檔案上傳到網站伺服器。

在本教學課程中，您將會完成下列工作：

了解 Dreamweaver 網站

設定專案檔案

定義本機資料夾


了解 Dreamweaver 網站

在 Dreamweaver 中，「網站」一詞可指網站 (Website) 或是放置網站文件的本機儲存位置；這個本機儲存位置是建立網站之前必須先建立的。Dreamweaver 網站會組織所有網站相關文件，並讓您追蹤和維護連結、管理檔案、共用檔案，以及將網站檔案傳送到網站伺服器。

注意

Macromedia HomeSite 和 ColdFusion Studio 使用者可以將 Dreamweaver 網站想成是 HomeSite 或 Studio 專案。

Dreamweaver 網站由三個部份組成，會因您的計算環境及開發的網站類型而異：

本機資料夾是您的工作目錄。Dreamweaver 會將此資料夾視為您的本機網站。本機資料夾通常位於硬碟上。

遠端資料夾是您儲存檔案的地方，會因您測試、實際執行、共同作業和發佈的環境而異。Dreamweaver 會將此資料夾視為遠端網站。遠端資料夾位於執行網站伺服器的電腦上。執行網站伺服器的電腦通常 (但不一定) 是讓您的網站可供在網路上公開使用的電腦。

動態網頁資料夾 (測試伺服器資料夾) 是 Dreamweaver 處理動態網頁時所使用的資料夾。這個資料夾和遠端資料夾通常會是同一個資料夾。除非您要開發網路應用程式，否則無需使用這個資料夾。如需關於「測試伺服器」資料夾的詳細資訊，請參閱「使用 Dreamweaver」中的指定可以處理動態網頁的位置。

「網站定義精靈」會引導您完成設定程序，而「網站定義進階」設定則可讓您視需要分別設定本機、遠端和測試資料夾；這兩者都可以用來設定 Dreamweaver 網站。本教學課程將使用「網站定義進階」設定來設定您專案檔案的本機資料夾。稍後，您將學習如何設定遠端資料夾，以便將網頁發佈至網站伺服器，供大家使用。

如需關於如何使用「網站定義精靈」來設定 Dreamweaver 網站的詳細資訊，請參閱「使用 Dreamweaver」中的設定新的 Dreamweaver 網站。

如需關於如何設定遠端網站的詳細資訊，請參閱教學課程：發佈您的網站。

如需有關 Dreamweaver 網站的一般資訊，請參閱「使用 Dreamweaver」中的「設定 Dreamweaver 網站」。


設定專案檔案

當您建立本機網站時，您可以將任何現有的資源 (影像或其他內容片段) 放在本機網站的根資料夾 (網站的主要資料夾) 中。如此一來，當您準備好要將內容加入頁面時，表示這些資源已備妥並可供使用。

Dreamweaver 內附的範例檔案中會包含要利用這些「Dreamweaver 入門」教學課程建立的範例網站所需之資源。建立網站的第一步驟就是將範例檔案從 Dreamweaver 應用程式資料夾複製到硬碟上合適的資料夾。

  1. 在硬碟上建立名為 local_sites 的新資料夾。

    例如，在以下兩個位置中擇一建立名為 local_sites 的資料夾：

    • Windows：C:\Documents and Settings\your_user_name\My Documents\local_sites
    • Macintosh：Macintosh HD/Users/your_user_name/Documents/local_sites

      注意

      在 Macintosh 中，您的使用者資料夾中已經有一個資料夾稱為 Sites。Sites 資料夾不可以做為本機資料夾，Sites 資料夾是當您以 Macintosh 做為網站伺服器時，用來放置公用網頁的地方。
  2. 在硬碟上的 Dreamweaver 應用程式資料夾中找出 cafe_townsend 資料夾。

    如果您將 Dreamweaver 設定於預設的位置，資料夾的路徑即如下所示：

    • Windows：C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\。
    • Macintosh：Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend。

      關於…

      關於本機和遠端「根」資料夾 Dreamweaver 網站的本機「根」資料夾通常是網站的主要或最上層資料夾。通常在遠端網站 (網站伺服器) 上也會有一個對應的相同資料夾。根資料夾通常就是網站 URL 中，接在網域名稱之後的第一個部分。例如，如果本機根資料夾叫做 mywebsite，而您在遠端網站上定義了相同的根資料夾，那麼您網站的 URL 可能會像是 http://www.yahoo.com/mywebsite。

      某些情況下，本機根資料夾可能不會和遠端網站的根資料夾使用完全相同的名稱。例如，如果您擁有名為 www.mywebsite.com 的網域名稱，其遠端根目錄為 public_html，但您的本機根資料夾可能還是叫做 mywebsite。本機和遠端根目錄中的檔案可能完全相同；只有資料夾名稱 (在遠端網站上為 public_html，在本機電腦上是 mywebsite) 不一樣。
  3. 將 cafe_townsend 資料夾複製到 local_sites 資料夾中。

    cafe_townsend 資料夾將用來當作 Dreamweaver 網站的根資料夾 (主要資料夾)。


定義本機資料夾

您必須為您建立的每個新網站定義 Dreamweaver 本機資料夾。本機資料夾就是硬碟中用來儲存網站檔案工作複本的資料夾。如果您沒有定義本機資料夾，Dreamweaver 中的某些功能就無法正常運作。

定義本機資料夾除了可讓您管理檔案，還可以用一些檔案傳送方法來與網站伺服器往來傳送檔案。

現在請定義 cafe_townsend 資料夾，此資料夾已複製到 local_sites 資料夾中作為本機資料夾。

  1. 啟動 Dreamweaver，然後選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 按一下「新增」按鈕，然後選取「網站」。

    「網站定義」對話方塊便會出現。

  3. 如果出現這個精靈 (「基本」索引標籤)，請按一下「進階」索引標籤，然後從「類別」清單中選取「本機資訊」(應該是預設值)。
  4. 在「網站名稱」文字方塊中，輸入「Cafe Townsend」當作網站的名稱。
  5. 在「本機根資料夾」文字方塊中，指定您在上一節複製到 local_sites 資料夾中的 cafe_townsend 資料夾。

    您可以按一下資料夾圖示，瀏覽至該資料夾後加以選取，或在「本機根資料夾」文字方塊中輸入路徑。

  6. 在「預設影像資料夾」文字方塊中，指定已經存在於 cafe_townsend 資料夾中的影像資料夾。

    您可以按一下資料夾圖示，瀏覽至該資料夾後加以選取，或在「預設影像資料夾」文字方塊中輸入路徑。

    「網站定義」對話方塊現在看起來如下所示：

  7. 按一下「確定」。

    「管理網站」對話方塊便會出現，顯示您的新網站。

  8. 按一下「完成」，關閉「管理網站」對話方塊。

「檔案」面板現在會顯示您目前網站的新本機根資料夾。「檔案」面板中的檔案清單就像檔案管理員的角色一樣，可以讓您複製、貼上、刪除、移動及開啟檔案，就像您在電腦桌面上執行的動作一樣。

如需有關「檔案」面板運作方式的詳細資訊，請參閱檔案面板。

您現在已經定義了網站的本機根資料夾。本機根資料夾就是本機電腦上您用來儲存網頁的工作複本之位置。日後，如果您想要發佈網頁並讓它們可供公開使用，便需要定義一個遠端資料夾 (該資料夾位於執行網路伺服器的遠端電腦上，用來儲存本機檔案的發佈複本)。

您可以依照本手冊其他的教學課程，建立 Cafe Townsend 範例網站，或是處理您個人的網頁。完成頁面的建立與編輯後，請接著定義伺服器上的遠端資料夾，並發佈網頁。如需詳細資訊，請參閱教學課程：發佈您的網站。


教學課程：建立表格式頁面版面

本教學課程會說明如何在 Macromedia Dreamweaver 8 中建立表格式頁面版面。「頁面版面」會決定在瀏覽器中如何顯示頁面，例如，顯示選單、影像和 Macromedia Flash 內容的位置。

表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。您可以使用表格，輕鬆快速地建立版面。在這個教學課程中，您將在新的 Dreamweaver 文件中建立幾個表格。表格的列和儲存格其實是用來容納您稍後要加入內容的「容器方塊」。

在本教學課程中，您將會完成下列工作：

檢查設計樣稿

建立及儲存新頁面

插入表格

設定表格屬性

插入影像預留位置

新增頁面顏色


檢查設計樣稿

一般而言，當您著手建立網站時，不會馬上開啟 Dreamweaver 並配置頁面。一開始建立網站，通常是使用紙張或圖形編輯應用程式 (如 Macromedia Fireworks) 進行設計。為了向客戶展示網站的最初構想並取得認可，美工設計人員多半會先草繪一份完整的網站圖稿 (也稱為「樣稿」)。

樣稿由客戶要求的網站頁面元素組成，而這些頁面元素的數目不限。例如，客戶可能會說：「我希望將商標放在頁面頂部，頁面中則要安排可連結至其他頁面的導覽、一塊屬於網路商店的區域以及可讓我插入視訊片段的地方」。設計人員隨即根據這樣的要求，著手規劃網站版面並製作滿足客戶需求的範例頁面草稿。

本教學課程為您提供了一份已完成且經認可的樣稿，對象是需要設立網站的虛構餐廳 Cafe Townsend。身為網頁設計師，您的職責就是要將樣稿轉換成可以實際運作的網頁 (這可能需要其他美工設計人員和 Flash 開發人員從旁協助)。

您會注意到美工設計人員提供給您的網頁樣稿，包括很多內容區域，還有一些圖形概念。在下一節中，您將使用 Dreamweaver 來配置這份設計。

如果您想在電腦螢幕上查看原始樣稿檔，也可以開啟該檔案。您可以在 cafe_townsend 資料夾的 fireworks_assets 資料夾中找到樣稿 homepage-mockup.jpg (cafe_townsend 資料夾是在教學課程：設定網站和專案檔案中複製到硬碟上的資料夾)。甚至您可能會想將樣稿列印出來，如此在建立頁面時才能將樣稿放在手邊參考。


建立及儲存新頁面

設定了網站並檢查所有樣稿之後，即可準備開始建立網頁。首先要建立新頁面，然後將它儲存在網站的 cafe_townsend 本機根資料夾內。這個頁面最後會成為虛構餐廳 Cafe Townsend 的網站首頁。

如果您尚未建立 cafe_townsend 本機根資料夾，則必須先完成這項作業，才能繼續進行。如需相關說明，請參閱教學課程：設定網站和專案檔案。

  1. 在 Dreamweaver 中，選取「檔案＞新增」。
  2. 在「新增文件」對話方塊的「一般」索引標籤中，在「類別」清單中選取「基本頁面」，再於「基本頁面」清單中選取「HTML」，然後按一下「建立」。
  3. 選取「檔案＞另存新檔」。
  4. 在「另存新檔」對話方塊中，瀏覽到網站「本機根資料夾」的 cafe_townsend 資料夾並開啟它

    (您已於教學課程：設定網站和專案檔案中，在 local_sites 資料夾內建立了這個資料夾)。

  5. 在「檔案名稱」文字方塊中輸入「index.html」，然後按一下「儲存」。

    檔案名稱便會出現在應用程式視窗頂端的標題列中。

  6. 在新文件頂端的「文件標題」文字方塊中，輸入 Cafe Townsend。

    這是頁面的標題 (與檔案名稱不同)。當網頁瀏覽者在網頁瀏覽器中檢視頁面時，將會在瀏覽器標題列中看到這個標題。

  7. 請選取「檔案＞儲存」以儲存頁面。


插入表格

接下來，您將加入用來容納文字、圖形和 Macromedia Flash 資源的表格。

  1. 在頁面上按一下，將插入點置於頁面左上角。

  2. 選取「插入＞表格」。
  3. 在「插入表格」對話方塊中，執行下列動作：
    • 在「列」文字方塊中輸入 3。
    • 在「欄」文字方塊中輸入 1。
    • 在「表格寬度」文字方塊中輸入 700。
    • 從「表格寬度」彈出式選單中選取「像素」。
    • 在「邊框粗細」文字方塊中輸入 0。
    • 在「儲存格內距」文字方塊中輸入 0。
    • 在「儲存格間距」文字方塊中輸入 0。

  4. 按一下「確定」。

    含三列及一欄的表格便會在文件中出現。表格的寬度為 700 個像素，其中沒有邊框、儲存格內距或儲存格間距。

    關於…

    進一步瞭解表格表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。表格是由一列或多列所構成；而每一列則是由一個或多個儲存格構成。當您建立多個含多個儲存格的列時，儲存格便會形成欄。技術上來說，儲存格在是水平列內的分隔區塊，而欄則是這些儲存格區塊的垂直總合。

    在 Dreamweaver 中選取表格後或當插入點位於表格中時，它便會在「表格」選取器 (以綠色線標示) 中顯示表格寬度和每個表格欄的寬度。

    寬度旁邊是表格標題選單與欄標題選單的箭頭。您可以使用選單來快速存取常用的表格相關命令。您也可以選取「檢視＞視覺輔助＞表格寬度」來啟用或停用寬度和選單的顯示。

    表格可以有邊框，而表格的儲存格則可以有內距、間距或兩者都有。儲存格內距是指儲存格內容和儲存格邊界之間的像素數目。儲存格間距則是指相鄰表格儲存格之間的像素數目。

    如果您沒有明確指定儲存格內距和儲存格間距的值，則大部份瀏覽器會以儲存格內距設定為 1 且儲存格間距設定為 2 的方式顯示表格。如果要讓瀏覽器以沒有內距和間距的方式顯示表格，請將儲存格內距和儲存格間距設定為 0。

    如需關於表格的詳細資訊，請參閱「使用 Dreamweaver」中的以表格呈現內容。
  5. 按一下表格右方以取消選取它。
  6. 選取「插入＞表格」以插入另一個表格。
  7. 在「插入表格」對話方塊中，對第二個表格執行下列動作：
    • 在「列」文字方塊中輸入 1。
    • 在「欄」文字方塊中輸入 3。
    • 在「表格寬度」文字方塊中輸入 700。
    • 從「表格寬度」彈出式選單中選取「像素」。
    • 在「邊框粗細」文字方塊中輸入 0。
    • 在「儲存格內距」文字方塊中輸入 0。
    • 在「儲存格間距」文字方塊中輸入 0。
  8. 按一下「確定」。

    一列三欄的第二個表格便會出現在第一個表格下方。

  9. 按一下表格右方以取消選取。
  10. 選取「插入＞表格」以插入第三個表格，然後在「插入表格」對話方塊中輸入下列值：
    • 在「列」文字方塊中輸入 1。
    • 在「欄」文字方塊中輸入 1。
    • 在「表格寬度」文字方塊中輸入 700。
    • 從「表格寬度」彈出式選單中選取「像素」。
    • 在「邊框粗細」文字方塊中輸入 0。
    • 在「儲存格內距」文字方塊中輸入 0。
    • 在「儲存格間距」文字方塊中輸入 0。
  11. 按一下「確定」。

    一列一欄的第三個表格便會出現在第二個表格下方。

    按一下表格右方以取消選取。現在的頁面外觀應如下所示：

    注意

    插入表格之後，就會出現表格選取器 (以綠色線標示)。只要按一下表格外部，表格選取器便會消失。您也可以選取「檢視＞視覺輔助＞表格寬度」來停用「表格」選取器。


設定表格屬性

現在，請使用「展開表格」模式來設定精確的表格屬性，這個模式可在表格中暫時加入儲存格內距和間距以及增加表格邊框，方便您簡化編輯工作。更明確地說，「展開表格」模式可讓您精確地放置插入點，避免不小心誤選表格或其他表格內容。

注意

在「展開表格」模式中完成表格屬性的設定之後，一律會返回「標準」模式。「展開表格」模式並不是 WYSIWYG (所見即所得) 環境，所以有些作業並不會顯示預期的結果，例如調整大小
  1. 選取「檢視＞表格模式＞展開表格模式」。

    注意

    出現「展開表格模式入門」對話方塊時，按一下「確定」。
  2. 在第一個表格的第一列內按一下。

  3. 在「屬性」檢視窗 (「視窗＞屬性」) 的「儲存格高度 (H)」文字方塊中輸入「90」，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    注意

    如果您看不到「儲存格高度」文字方塊，請按一下「屬性」檢視窗右下角的展開箭頭。
  4. 在第一個表格的第二列內按一下。

  5. 在「屬性」檢視窗的「儲存格高度」文字方塊中輸入 166，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
  6. 在第一個表格的第三列內按一下。
  7. 在「屬性」檢視窗的「儲存格高度」文字方塊中輸入 24，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    第一個表格現在應該會有三個各具不同高度的列。

    接下來，請設定第二個表格 (包含三欄的表格) 的屬性。

  8. 在第二個表格的第一欄內按一下。

  9. 在「屬性」檢視窗的「儲存格寬度 (W)」文字方塊中輸入「140」，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
  10. 在第二個表格的第二欄內按一下。
  11. 在「屬性」檢視窗的「儲存格寬度」文字方塊中輸入「230」，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

  12. 將第三欄的寬度設定為 330 個像素。

    如果您已開啟「表格」選取器 (「檢視＞視覺輔助＞表格寬度」)，則可在個別的表格欄上方看到剛才輸入的三個像素值。

    您不需要替這個表格中的儲存格輸入任何高度值，因為這些儲存格的高度會隨著稍後加入的內容而增減。

  13. 最後，請在最後一個表格 (含一列及一欄的表格) 內按一下。
  14. 在「屬性」檢視窗的「儲存格高度」文字方塊中輸入 24，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    此時的版面外觀應如下所示：

  15. 按一下「文件」視窗頂端的「結束展開表格模式」連結，以返回「標準」模式。
  16. 儲存您的頁面。


插入影像預留位置

影像預留位置是將最終插圖加入網頁之前所使用的圖形。當您配置網頁時，影像預留位置非常有用，因為它可以讓您在實際建立影像之前，先在頁面上定位影像。

  1. 在「文件」視窗中，在第一個表格的第一列內按一下。
  2. 選取「插入＞影像物件＞影像預留位置」。
  3. 在「影像預留位置」對話方塊中，執行下列動作：
    • 在「名稱」文字方塊中輸入 banner_graphic。
    • 在「寬度」文字方塊中輸入 700。
    • 在「高度」文字方塊中輸入 90。
    • 按一下顏色方塊，然後在顏色挑選器中選取顏色。針對本教學課程，我們選擇紅棕色 (#993300)。
    • 將「替代文字」文字方塊保留空白。

      關於…

      替代文字的備註替代文字是網頁上與影像有關的文字說明。屬於 HTML 程式碼的一部分，但不會顯示在頁面上。為大部分的影像提供替代文字是很重要的，因為如此一來使用螢幕讀取器或純文字瀏覽器的使用者才能接收到影像所提供的資訊。如果是只顯示網站標誌的橫幅圖形的話，就不需要提供替代文字。在「影像預留位置」對話方塊中將「替代文字」文字方塊保留空白時，Dreamweaver 會在 img 標籤中加入 alt="" 屬性。如果日後要為影像加入替代文字，您可以選取該影像，再到「屬性」檢視窗中輸入替代文字。例如，如果您日後將標誌變更為包含電話號碼或地址，可能會想以替代文字的方式提供該項資訊。
  4. 按一下「確定」。

    影像預留位置便會出現在第一個表格內。影像預留位置會顯示一個標籤，以及您最後會放在該處的影像大小屬性。

    注意

    在瀏覽器中檢視時，影像預留位置的標籤和大小文字並不會出現。
  5. 儲存您的頁面。

    關於…

    關於影像預留位置 影像預留位置是將最終插圖加入到網頁之前所使用的圖形；它並不是顯示在瀏覽器中的圖形影像。發佈網站之前，請以適合在網頁上顯示的圖形檔 (如 GIF 或 JPEG)，來取代任何已經加入的影像預留位置。

    如果您有 Macromedia Fireworks，便可以在 Dreamweaver 影像預留位置中建立新的圖形。選取影像預留位置，再按一下「屬性」檢視窗中的「建立」按鈕，Fireworks 便會開啟，同時顯示新的畫布。這個新影像的大小會設定成與預留位置影像同樣的大小。接著，您可以依自己的喜好建立並編輯影像，然後取代 Dreamweaver 中的預留位置影像。如需關於在 Fireworks 中利用影像預留位置建立影像的詳細資訊，請參閱「使用 Dreamweaver」中的使用 Fireworks 修改 Dreamweaver 影像預留位置。


新增頁面顏色

現在，請為部分表格儲存格和頁面背景設定顏色，以增添頁面色彩。

  1. 在三欄表格的第一個儲存格內按一下。
  2. 按一下標籤選取器中的 <td> 標籤 (儲存格標籤) 以選取該儲存格。

  3. 在「屬性」檢視窗 (「視窗＞屬性」) 的「背景顏色」文字方塊內按一下。

    文字方塊就在「背景顏色 (Bg)」顏色方塊的旁邊。

    注意

    如果您看不到「背景顏色」文字方塊，請按一下「屬性」檢視窗右下角的展開箭頭。
  4. 在「背景顏色」文字方塊中輸入十六進位值 #993300，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    表格儲存格的顏色會變成紅棕色。

  5. 在三欄表格的第二個儲存格內按一下。
  6. 按一下標籤選取器中的 <td> 標籤 (儲存格標籤) 以選取該儲存格。
  7. 在「屬性」檢視窗的「背景顏色」文字方塊內按一下，再輸入十六進位值 #F7EEDF，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    表格儲存格的顏色會變成淺棕褐色。

  8. 重複步驟 5 至 7，將第三個表格儲存格的顏色同樣變更為淺棕褐色。
  9. 當您設完三個儲存格的顏色之後，在表格外按一下即可取消選取它。

接下來，請修改頁面屬性以變更整個頁面的背景顏色。「頁面屬性」對話方塊可供您設定一些頁面屬性，包括頁面字體的大小和顏色、查閱過連結的顏色和頁面邊界等選項。

  1. 請選取「修改＞頁面屬性」。
  2. 在「頁面屬性」對話方塊的「外觀」類別中，按一下「背景顏色」顏色方塊，然後從顏色挑選器中選取黑色 (#000000)。

    關於…

    挑選顏色 在 HTML 中，顏色會以十六進位值 (例如，#FF0000) 或顏色名稱 (red) 來表示。網頁安全色指使用 256 色模式時，Windows 和 Macintosh 系統上的 Netscape Navigator 和 Microsoft Internet Explorer 都能出現相同結果的顏色。總共有 216 種常用顏色，及組合 00、33、66、99、CC 或 FF (RGB 值分別是 0、51、102、153、204 和 255) 值對的任何十六進位值來代表網頁安全色。

    在 Dreamweaver 中選取顏色的方法，就是在適當的文字方塊中輸入十六進位值，或是從顏色挑選器中選取顏色。顏色挑選器使用 216 色網頁安全色的色盤；從這個色盤選取顏色便能顯示該顏色的十六進位色彩值。要使用顏色挑選器，只需按一下顏色方塊，再使用滴管游標選取顏色即可。

    您也可以使用顏色挑選器來配色。例如，如果頁面上的影像包含某個色度的藍色，而您希望表格儲存格的背景顏色能夠與它吻合，請先選取該表格儲存格，再按一下顏色方塊來開啟顏色挑選器，接著將滴管游標擺在影像中的藍色部分上，然後按一下滑鼠按鈕。顏色挑選器就會利用以滴管所選取的顏色，找一個最相近的可能顏色填入您所選取的區域。不過，使用這種方法選取顏色時，顏色挑選器所選擇的顏色不一定是網頁安全色。
  3. 按一下「確定」。

    頁面背景會變成黑色。

  4. 儲存您的工作。

您的頁面版面現在已完成了。版面會包含一些表格，讓您存放如影像、文字和 Flash 視訊 (FLV) 檔之類的資源。下一個教學課程教學課程：加入頁面內容中，您將學習如何使用 Dreamweaver 所提供的各種插入功能，將資源加入頁面。


教學課程：加入頁面內容

本教學課程示範如何在 Macromedia Dreamweaver 8 中加入網頁內容。您可以在網頁中加入許多不同種類的內容，包括圖形、Macromedia Flash 檔、Macromedia Flash 視訊檔及文字等。為頁面加入內容後，您可以使用瀏覽器進行預覽，查看您所設計的網頁在網路上的外觀。

在本教學課程中，您將會完成下列工作：

尋找您的檔案

檢視您的工作

插入影像

插入及播放 Flash 檔

插入 Flash 視訊

插入文字

建立連結

在瀏覽器中預覽頁面


尋找您的檔案

在此教學課程中，您將從在教學課程：建立表格式頁面版面中建立的表格式頁面版面 (index.html) 開始進行。如果您沒有完成上述單元的教學課程，可以先完成它再繼續進行此教學課程，或者開啟已完成的教學課程版本，再利用它開始著手進行。

該教學課程的已完成版本 table_layout.html 位在 completed_files/dreamweaver 資料夾內，而該資料夾位於您在教學課程：設定網站和專案檔案中複製到硬碟的 cafe_townsend 資料夾內。

注意

如果使用已完成的 table_layout.html 檔案來開始本教學課程，而非使用來自教學課程：建立表格式頁面版面的 index.html 檔案，教學課程中的一些步驟和圖例都會與您在畫面上看到的不符。


檢視您的工作

在此教學課程中，您要將資源加入 Cafe Townsend (虛構的餐廳) 的首頁。您會學習到如何加入影像、Macromedia Flash 檔、Macromedia Flash 視訊檔和文字。完成時，頁面外觀將如下所示：

您會注意到頁面上的文字並未設定格式。那是因為下一個教學課程中，您將學習到如何利用「階層式樣式表」(CSS) 來設定文字格式。

您可以在 cafe_townsend 根資料夾 (您在教學課程：設定網站和專案檔案中將該資料夾複製到硬碟上) 中找到本教學課程所需的資源。如果您還沒有完成上述教學課程，則必須先完成才能繼續進行。本教學課程可讓您在進行期間明確地知道資源的所在位置。


插入影像

建立頁面版面之後，即可開始為頁面加入資源。首先請加入影像。在 Dreamweaver 中，您可以使用數種方法來將影像加入網頁。在本節中，您將使用各種方法，為 Cafe Townsend 的索引頁面加入四個不同的影像。


取代影像預留位置

  1. 在 Dreamweaver 中，開啟您在教學課程：建立表格式頁面版面中建立的 index.html 檔案。

    注意

    如果您還沒有完成教學課程：建立表格式頁面版面，請參閱尋找您的檔案以瞭解如何繼續進行。
  2. 在頁面的頂端，按兩下影像預留位置 banner_graphic。

  3. 在「選取影像原始檔」對話方塊中，瀏覽至您定義為網站根資料夾的 cafe_townsend 資料夾，選取其中的 images 資料夾。
  4. 選取 banner_graphic.jpg 檔並按一下「確定」。

    Dreamweaver 便會使用 Cafe Townsend 的橫幅圖形來取代該影像預留位置。

  5. 在表格的外面按一下以取消選取影像。
  6. 儲存頁面 (「檔案＞儲存」)。


利用插入選單插入影像

  1. 在第一個表格的第三列內按一下 (位於您剛才插入的橫幅圖形下方、有色表格儲存格的正上方)。

  2. 選取「插入＞影像」。
  3. 在「選取影像原始檔」對話方塊中，瀏覽至 cafe_townsend 資料夾中的 images 資料夾，選取 body_main_header.gif 檔案，再按一下「確定」。

    注意

    如果出現「影像標籤輔助功能屬性」對話方塊，請按一下「確定」。

    一個有色的長形圖形便會出現在表格列中。這看起來可能更像是表格儲存格的背景顏色，而不是圖形。不過仔細看時，您會看到圖形具有圓角。圓角效果可讓您在加入所有資源之後，為頁面下半部的外觀增色不少。


利用拖曳方式插入影像

  1. 在頁面上最後一個表格的最後一列中按一下 (在有色表格儲存格的正下方)。
  2. 在「檔案」面板 (「視窗＞檔案」) 中找出 body_main_footer.gif 檔案 (該檔案位於 images 資料夾內)，再將檔案拖曳至最後一個表格中的插入點。

    注意

    如果出現「影像標籤輔助功能屬性」對話方塊，請按一下「確定」。

  3. 在表格外按一下，然後儲存頁面 (「檔案＞儲存」)。


從資源面板插入影像

  1. 在三欄表格的中間欄內按一下 (第一個淺棕褐色的表格儲存格)。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 的「水平」彈出式選單中選取「置中對齊」，再從「垂直」彈出式選單中選取「靠上對齊」。這麼做會在儲存格中央對齊表格儲存格的內容，並將儲存格內容推到儲存格頂端。

    注意

    如果看不到「垂直」或「水平」彈出式選單，請按一下「屬性」檢視窗右下角的展開箭頭。
  3. 按一下 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以加入更多空間。

  1. 按一下「檔案」面板中的「資源」索引標籤，或選取「視窗＞資源」。

    您的網站資源便會出現。

  2. 如果沒有選取「影像」檢視，請按一下「影像」以檢視您的影像資源。
  3. 在「資源」面板中，選取 street_sign.jpg 檔。

    關於…

    「資源」面板 您可以使用「資源」面板來檢視及管理目前網站中的資源。「資源」面板中會顯示與「文件」視窗內作用中文件相關的網站資源。

    您必須先定義本機網站，然後才可以在「資源」面板中檢視資源。如需詳細資訊，請參閱教學課程：設定網站和專案檔案或是「使用 Dreamweaver」。

    「資源」面板提供兩種檢視：

    「網站」清單會顯示您網站中的所有資源，包括網站的任何文件中所使用的顏色和 URL。

    「最愛」清單中只會顯示您明確選擇的資源。如果要將某資源加入「最愛」清單，請在「網站」清單中選取該資源，然後從「檔案」面板右上角的「選項」選單中，選取「加入至最愛」。

    當您按一下「資源」面板中的資源時，預覽區域便會顯示您所選取的資源。要變更預覽區域的大小，請拖曳預覽區域和資源欄標題之間的分隔線。

    如需詳細資訊，請參閱「使用 Dreamweaver」中的使用資源。
  4. 請執行下列其中一項作業：
    • 將 street_sign.jpg 檔案拖曳到表格儲存格中央的插入點。
    • 按一下「資源」面板底部的「插入」。

      注意

      如果出現「影像標籤輔助功能屬性」對話方塊，請按一下「確定」。

    street_sign.jpg 圖形便會出現在頁面上。

  5. 在表格的外面按一下以取消選取影像。
  6. 儲存頁面。


插入及播放 Flash 檔

接著，請插入一個 Flash 檔案，以播放 Cafe Townsend 主題食物項目的相片幻燈片。您插入的 Flash 檔是一個彈性的訊息區域，或是 FMA 檔。FMA 是 Flash 應用程式的常見類型，它會對使用者顯示資訊訊息。該訊息會根據業務需求而有所變更。例如，如果 Cafe Townsend 要舉行特殊的活動，FMA 可以輕易地變更 (不會影響網頁的其他內容) 為顯示活動相關資訊，而不是顯示主題食物項目。

若要插入 Flash FMA 檔，您需要插入可將檔案嵌入 Dreamweaver 網頁的 HTML 程式碼。最容易方式就是在頁面中插入 SWF 檔案 (匯出的 Flash 影片檔案)。當您在 Dreamweaver 中插入 SWF 檔案時，Dreamweaver 會自動寫入所有必要的 Flash HTML 程式碼。

  1. 在 Dreamweaver「文件」視窗中開啟 index.html 頁面時，在第一個表格的第二列內按一下

    (這個表格列就在前一節所插入橫幅圖形的正下方)。

  2. 在「屬性」檢視窗 (「視窗＞屬性」) 的「水平」彈出式選單中選取「置中對齊」，再從「垂直」彈出式選單中選取「置中對齊」。

    這麼做會將表格儲存格的內容放在儲存格中央。

    注意

    如果看不到「垂直」或「水平」彈出式選單，請按一下「屬性」檢視窗右下角的展開箭頭。
  3. 選取「插入＞媒體＞Flash」。

    在「選取檔案」對話方塊中，瀏覽至 flash_fma.swf 檔案 (位於網站的 cafe_townsend 根資料夾中)，選取檔案，再按一下「確定」。

    如果出現「物件標籤輔助功能屬性」對話方塊，請按一下「確定」。

    「文件」視窗中便會出現一個 Flash 內容預留位置，而非 FMA 檔本身的動畫畫面。這是因為 HTML 程式碼會「指向」SWF 檔案 flash_messaging_area.swf。當使用者載入 index.html 網頁時，瀏覽器便會播放 SWF 檔案。

    關於…

    關於 Flash 檔案 在 Macromedia Flash 中建立資源時，您所使用的是 FLA 檔案，這是 Flash 應用程式的預設檔案類型。副檔名為 .fla 的檔案便是 FLA 檔案。例如，如果您在處理網站的動畫標誌，Flash 檔案的檔案名稱就可能是 animated_logo.fla。

    當您在 Flash 中處理完 FLA 檔案以後，必須將檔案匯出為能在網頁上以 Flash Player 播放的格式。當您在 Flash 中匯出 FLA 時，會將它們轉換為 SWF 檔並指定加上 .swf 副檔名。SWF 檔 (不是 FLA 檔) 會在網頁瀏覽器中播放 Flash 內容，而且該種檔案類型一定要插入使用 Dreamweaver 建立的網頁中。

  1. 當您插入 SWF 檔案以後，只要不按頁面上的其他任何位置，Flash 內容預留位置就會維持在選取狀態。

    如果未選取，按一下 Flash 內容預留位置即可加以選取。

  2. 在「屬性」檢視窗 (視窗＞屬性) 中，按一下「播放」。

    注意

    如果看不到 Flash「播放」按鈕，請按一下「屬性」檢視窗右下角的展開箭頭。

    Dreamweaver 便會在「文件」視窗中播放 Flash 檔案，顯示網站瀏覽者以瀏覽器檢視網頁時會看到的內容。

  3. 在「屬性」檢視窗中，按一下「停止」以停止播放 Flash 檔。
  4. 儲存頁面。


插入 Flash 視訊

接著，您要使用所提供的資源來插入 Flash 視訊檔案。

  1. 在 Dreamweaver「文件」視窗中開啟 index.html 頁面後，在三欄表格的中間欄內，按一下您所放置圖形的正上方

    (在前一節中，您在插入圖形之前加入了一些空間，請按一下該處)。

  2. 選取「插入＞媒體＞Flash 視訊」。
  3. 在「插入 Flash 視訊」對話方塊中，從「視訊類型」彈出式選單中選取「漸進式下載視訊」。

    關於…

    關於 Flash 視訊Dreamweaver 中的「Insert Flash Video」命令可讓您在網頁中插入 Flash 視訊內容，而不需要使用 Flash 編寫工具。這個命令會插入 Flash 組件，當您在瀏覽器中進行檢視時，該組件便會顯示您所選取的 Flash 視訊內容以及一組播放控制項。

    「插入＞Flash 視訊」命令提供下列視訊內容傳遞選項，方便您的網站瀏覽者觀賞：

    「漸進式下載視訊」會將 Flash 視訊 (FLV) 檔案下載至網站瀏覽者的硬碟，然後再播放檔案。不同於傳統的「下載後播放」視訊傳遞方法，漸進式下載允許視訊檔案在下載完成之前開始播放。

    「串流視訊」會串流 Flash 視訊內容，並立即在網頁上播放它。但是，若要在網頁上啟用串流視訊，您必須具有 Macromedia Flash Communication Server 的存取權，它是唯一能夠串流 Flash 視訊內容的伺服器。

    如需關於使用 Flash 視訊的詳細資訊，請參閱「使用 Dreamweaver」中的插入 Flash 視訊內容。
  4. 在「URL」文字方塊中，指定 cafe_townsend_home.flv 檔的相對路徑，只要按一下「瀏覽」，瀏覽至 cafe_townsend_home.flv 檔 (位於網站的 cafe_townsend 根資料夾中)，再選取 FLV 檔即可。

  5. 從「外觀」彈出式選單中選取「Halo Skin 2」。

    所選取外觀的預覽便會出現在「外觀」彈出式選單的下方。「外觀」選項會指定包含 Flash 視訊內容之 Flash 視訊組件的外觀和感覺。

    如需有關如何為 Flash 視訊組件選取不同外觀的詳細資訊，請前往 www.macromedia.com/go/flv_tutorial。

  6. 在「寬度」和「高度」文字方塊中，執行下列動作：
    • 在「寬度」文字方塊中，輸入「180」。
    • 在「高度」文字方塊中，輸入「135」，並按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

      提示

      您可以按一下「偵測大小」來決定 FLV 檔案的確切寬度和高度。但是，有時候 Dreamweaver 無法決定 FLV 檔案的尺寸。如果發生這種情況，您必須手動輸入寬度和高度值。

    「寬度」和「高度」文字方塊中的值會以像素為單位來指定 FLV 檔案的寬度和高度。您可以任意調整這些值，以變更網頁上 Flash 視訊的大小。若是增加視訊的尺寸，視訊的圖片品質通常便會降低。

    注意

    「外觀元素的總計」就是 FLV 檔案的寬度和高度，加上所選外觀的寬度和高度。
  7. 其餘選項則請保留預設的選取項目：

    「限制」會將 Flash 視訊組件的寬度和高度維持在相同的比例。此選項為預設選取的選項。

    「自動播放」指定是否要在開啟網頁時播放視訊。此選項依預設是取消選取的。

    「自動倒帶」指定是否要在播放完視訊後，讓播放控制項返回起始位置。此選項依預設是取消選取的。

  8. 按一下「確定」關閉對話方塊，然後為網頁加入 Flash 視訊內容。

    「插入 Flash 視訊」命令會產生一個視訊播放程式 SWF 檔案和一個外觀 SWF 檔案，這些檔案可用來在網頁上顯示您的 Flash 視訊內容 (您可能需要在「檔案」面板中按一下「重新整理」按鈕以查看新的檔案)。這些檔案以及加入 Flash 視訊內容的 HTML 檔案 (在這裡指的是 cafe_townsend 根資料夾)，都會儲存在相同的目錄中。當您上傳內含 Flash 視訊內容的 HTML 網頁時，Dreamweaver 會將這些檔案當做相關檔案上傳 (只要您按一下「要上傳相關檔案嗎?」對話方塊中的「是」即可)。

  9. 儲存頁面。


插入文字

現在請在頁面中加入一些文字。您可以直接在 Dreamweaver「文件」視窗中輸入文字，或是從其他地方 (如 Microsoft Word 或純文字檔案) 剪下並貼上文字。然後，您會使用「階層式樣式表」(CSS) 來格式化文字。


插入內文文字

  1. 在「檔案」面板中，找出 sample_text.txt 檔案 (位於 cafe_townsend 根資料夾中) ，並按兩下該檔案的圖示，以便在 Dreamweaver 中開啟該檔案。

    由於這個檔案並非 HTML 檔案，您會注意到此視窗會使用「程式碼」檢視，而且無法切換為「設計」檢視 (您在此之前進行的作業都是使用「設計」檢視)。

  2. 在 sample_text.txt 的「文件」視窗中，按 Control + A 鍵 (Windows) 或 Command + A 鍵 (Macintosh) 以選取所有文字，然後選取「編輯＞複製」以複製文字。
  3. 按一下文件右上角的 X 以關閉 sample_text.txt 檔案。
  4. 在 index.html 的「文件」視窗中，在三欄表格的第三個表格儲存格內按一下 (這個儲存格就在內含圖形和 Flash 視訊的那一欄的右方)。
  5. 選取「編輯＞貼上」。

    取自文字檔的文字便會出現在選取的表格儲存格中。

    三欄表格會根據您監視器的解析度，變寬以容納文字。目前請先不要擔心這樣的問題。在下個教學課程中，您將學習如何使用 CSS 來設定文字的格式，讓所有的內容都能適合表格大小。

  6. 請確定插入點仍位於您剛貼上文字的表格儲存格內。如果不是的話，請在表格儲存格內按一下。
  7. 在「屬性」檢視窗 (「視窗＞屬性」) 中，從「垂直」彈出式選單中選取「靠上對齊」。如此一來，您剛才貼上的文字就會對齊表格儲存格的頂端。如果看不到「垂直」彈出式選單，請按一下「屬性」檢視窗右下角的展開箭頭。

  8. 儲存頁面。


插入導覽列的文字

接下來，請插入導覽列的文字。不過，您必須要在下個教學課程中設定文字格式，這些文字看起來才會像是導覽列。

  1. 在三欄表格的第一欄 (紅棕色的那一欄) 內按一下。
  2. 輸入文字「Cuisine」。

  3. 按下空格鍵並輸入「Chef Ipsum」。
  4. 重複前一個步驟，直到您將下列所有文字輸入完畢 (每個單字之間都要有空格)：「Articles」、「Special Events」、「Location」、「Menu」和「Contact Us」。

    輸入文字時，請勿按下 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。請使用空格鍵來分隔文字，並讓這些文字自動換行。表格儲存格的固定寬度會決定一行之內可容納的字數。

  5. 當插入點仍位於三欄表格的第一個儲存格內時，按一下標籤選取器中的 <td> 標籤。

  6. 在「屬性」檢視窗 (「視窗＞屬性」) 中，從「垂直」彈出式選單中選取「靠上對齊」。

    如此一來，您剛才輸入的文字就會對齊表格儲存格的頂端。

    注意

    如果看不到「垂直」彈出式選單，請按一下「屬性」檢視窗右下角的展開箭頭。
  7. 儲存您的頁面。


建立連結

一個連結就是插入網頁中的一項參考，它會指向另一個文件。您幾乎可以將任何類型的資源轉換為連結，但是最常見的連結種類是文字連結。

您可以在網站建立過程的任何階段中建立連結。在本節中，您將建立導覽列的連結 (雖然您還未將文字格式設定為導覽列的形式)。

cafe_townsend 網站根資料夾包含一個已完成的 HTML 網頁 (Cafe Townsend 的菜單網頁)，您可以連結到該網頁。導覽列中的所有連結都會連往這個頁面 (建立真正的網站時，各連結可能會連往不同的頁面)。

  1. 在「文件」視窗中開啟 index.html 頁面，選取您在三欄表格的第一個儲存格中輸入的「Cuisine」一字。請小心只選取「Cuisine」這個字，不要選取到它後面的空格。

  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，按一下「連結」文字方塊旁的資料夾圖示。

  3. 在「選取檔案」對話方塊中，瀏覽至 menu.html 檔案 (位於與 index.html 檔案相同的資料夾中)，並按一下「確定」(Windows) 或「選擇」(Macintosh)。
  4. 在頁面上按一下以取消選取 Cuisine 一字。Cuisine 文字變成藍色並具有底線，表示已經成為一項連結。
  5. 重複前一個步驟以連結您為導覽輸入的每個字或字集。您還想要再建立六個連結：Chef Ipsum、Articles、Special Events、Location、Menu 和 Contact Us。

    將每個字或字集連結至 menu.html 頁面，在建立連結時，請小心避免將單字或字集前後的空格也包含在內。這只是一組虛設連結；在實際情況中，您可能需要將各個導覽文字分別連結到個別頁面。

    注意

    在 Dreamweaver 的「文件」視窗中按一下連結時，並不會有作用；連結只在瀏覽器中才能運作。若要確定連結是否正確作用，請在瀏覽器中預覽頁面。如需關於如何執行此項作業的相關說明，請繼續進行在瀏覽器中預覽頁面。
  6. 儲存您的頁面。


在瀏覽器中預覽頁面

「設計」檢視能讓您大致瞭解頁面在網路上的外觀，但若要查看最後的結果，還是必須在瀏覽器中預覽頁面。使用瀏覽器進行檢視時的結果通常都差不多，但是在不同的瀏覽器版本中檢視 HTML 頁面時，顯示畫面可能稍有不同。Dreamweaver 嘗試在不同瀏覽器中，產生具有盡可能相似外觀的 HTML；不過有時仍是無法避免些許差異。因此，要確認您所發佈的頁面在網站瀏覽者瀏覽器中的外觀，唯一方法就是使用瀏覽器預覽您的工作。

  1. 在「文件」視窗中開啟 index.html 檔案。
  2. 按 F12 鍵 (Windows) 或 Option + F12 鍵 (Macintosh)。

    如果主要瀏覽器尚未啟動，該瀏覽器便會啟動並顯示索引頁面。

    注意

    Dreamweaver 會自動偵測您的主要瀏覽器，並使用該瀏覽器進行預覽。如果沒有出現預覽，或者如果頁面沒有出現在您預期的瀏覽器中，請切換回 Dreamweaver (如有必要) 並選取「檔案＞在瀏覽器中預覽＞編輯瀏覽器清單」。當「在瀏覽器中預覽」偏好設定對話方塊出現時，將正確的瀏覽器加入清單。如需詳細資訊，請按一下「偏好設定」對話方塊中的「說明」按鈕。
  3. (選擇性) 切換回 Dreamweaver 以進行任何必要的變更。

    儲存您的工作，並再次按下 F12 鍵，讓變更生效。

現在您的網頁已擁有完整的內容。下一步就是設定部分內容的格式，讓它更美觀大方。在下一個教學課程中，您會學習到如何使用 CSS 來設定所加入文字的格式。


教學課程：使用 CSS 設定頁面格式

此教學課程為您示範在 Dreamweaver 中，如何使用「階層式樣式表」(CSS) 設定頁面上文字的格式。CSS 讓您以 HTML 無法達成的方式來設定文字格式及定位，所以對頁面外觀能提供較佳的控制能力。

在本教學課程中，您將會完成下列工作：

尋找您的檔案

檢視您的工作

了解 CSS

建立新的樣式表

探索 CSS 樣式面板

附加樣式表

建立新的 CSS 規則

將類別樣式套用至文字

設定導覽列文字的格式

(選擇性) 將頁面內容置中


尋找您的檔案

在此教學課程中，您將從在教學課程：加入頁面內容中加入網頁內容的 Cafe Townsend 索引頁面開始進行。如果您沒有完成上述教學課程，可以先完成它再繼續進行此教學課程，或者開啟已完成的教學課程版本，再利用它開始著手進行。該教學課程的已完成版本 add_content.html 位在 completed_files/dreamweaver 資料夾中，而該資料夾位於您在教學課程：設定網站和專案檔案中複製到硬碟的 cafe_townsend 資料夾內。

注意

如果使用已完成的 add_content.html 檔案來開始本教學課程，而非使用來自教學課程：加入頁面內容的 index.html 檔案，教學課程中的一些步驟和圖例都會與您在畫面上看到的不符。


檢視您的工作

在此教學課程中，您會使用「階層式樣式表」(CSS) 來設定 Cafe Townsend (虛構的餐廳) 首頁文字的格式。還要建立不同種類的 CSS 規則來設定內文文字格式。您也會設定頁面左邊的連結文字格式，以建立導覽列。完成後，頁面看起來如下列範例所示：

如需有關 CSS 的詳細資訊，請繼續進行下一節。若要立即開始建立 CSS，請繼續進行建立新的樣式表。


了解 CSS

「階層式樣式表」(CSS) 是控制網頁內容外觀的格式規則集合。當您使用 CSS 來設定頁面格式時，會依呈現方式來分隔內容。頁面內容 (HTML 程式碼) 位於 HTML 檔內，但是定義程式碼呈現方式的 CSS 規則卻位於另一個檔案 (外部樣式表) 或位於 HTML 文件的另一個部分 (通常是 <head> 區段)。使用 CSS 可以讓您對網頁的確切外觀 (從版面的精確位置到特定的字體和樣式) 有相當大的彈性和控制能力。

CSS 能讓您控制無法單獨使用 HTML 控制的許多屬性。例如，您可以為選取的文字指定不同的字體大小和單位 (像素、點等等)。使用 CSS 以像素為單位設定字體大小，也可以確保頁面的版面和外觀在多種瀏覽器中具有更為一致的處理方式。

CSS 格式規則是由兩個部分構成：選取器和宣告。選取器是一種用語 (例如 P、H1、類別名稱或 id)，可用來識別格式化的元素，而宣告則會定義什麼是樣式元素。在以下範例中，H1 是選取器，而在大括弧 ({}) 中的所有內容都算是宣告：

H1 {font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}

宣告由兩個部分構成：屬性 (例如 font-family) 和值 (例如 Helvetica)。前面的範例會為 H1 標籤建立樣式：所有連結到這個樣式之 H1 標籤的文字大小都是 16 像素，而且使用粗體的 Helvetica 字體。

「階層式」一詞是指您可以套用多個樣式到同一個元素或網頁。例如，您可以建立一個 CSS 規則以套用顏色，然後建立另一個規則以套用邊界，最後將這兩個規則套用到網頁上相同的文字。而定義的樣式會「重疊」於網頁的元素下，最後建立您要的設計。

CSS 的主要優點是易於更新；當您在其中一個位置更新 CSS 規則時，使用這個定義的樣式之所有文件格式都會自動更新為新的樣式。

您可以在 Dreamweaver 中定義下列規則類型：

  • 自訂 CSS 規則，也稱為「類別樣式」，可以讓您將樣式屬性套用到任何文字範圍或區塊。所有類別樣式的開頭都是句點 (.)。例如，您可以建立一個類別樣式叫做 .red，將規則的 color 屬性設定為 red，再將樣式套用至已設定樣式之段落文字的一部分。
  • HTML 標籤規則會重新定義特定標籤 (例如 p 或 h1) 的格式。當您建立或變更 h1 標籤的 CSS 規則時，所有以 h1 標籤格式化的文字都會立即更新。
  • CSS 選取器規則 (進階樣式) 會為特定元素組合或其他 CSS 允許的選取器形式重新定義格式 (例如每當 h2 標題出現在表格儲存格內時，便會套用選取器 td h2)。進階樣式也會重新定義包含特定 id 屬性之標籤的格式 (例如，由 #myStyle 定義的樣式會套用至內含 id="myStyle" 屬性-值配對的所有標籤)。

如需詳細資訊，請參閱「使用 Dreamweaver」中的關於 Dreamweaver 中的文字格式化。


建立新的樣式表

首先，您會建立一個外部樣式表，內含會定義段落文字樣式的 CSS 規則。當您在外部樣式表中建立樣式時，便可以從中央位置控制多個網頁的外觀，而不必在每個個別網頁上設定樣式。

關於…

進一步瞭解 CSS 規則

CSS 規則可以存放在下列位置：

外部 CSS 樣式表是 CSS 規則的集合，儲存在分開的外部 .css 檔案 (並非 HTML 檔案) 中。該 .css 檔案使用文件 head 區段中的連結，連至一或更多個網站的頁面。

內部 (或內嵌) CSS 樣式表是 CSS 規則的集合，其包括在 HTML 文件 head 部份的 style 標籤中。例如，下列範例會定義文件中以段落標籤設定格式之所有文字的字體大小：

<head>
<style>
   p{
   font-size:80px
   }
</style>
</head>

行內樣式是使用整份 HTML 文件內的特定標籤實體加以定義。例如，<p style="font-size:9px"> 只會為以內含行內樣式之標籤設定格式的段落定義字體大小。

Dreamweaver 會呈現大部分您套用的樣式屬性並在「文件」視窗中顯示它們。您也可以在瀏覽器視窗中預覽文件，查看樣式套用的情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中所呈現出來的不一樣。
  1. 選取「檔案＞開新檔案」。
  2. 在「新文件」對話方塊中，選取「分類」欄中的「基本」頁面，在「基本頁面」欄中選取「CSS」，然後按一下「建立」。

    空白的樣式表會出現在「文件」視窗中。「設計」檢視和「程式碼」檢視按鈕便會停用。CSS 樣式表是純文字檔，它們的內容並非用於在瀏覽器中進行檢視。

  3. 將頁面儲存 (「檔案＞儲存」) 為 cafe_townsend.css。

    當您儲存樣式表時，請確定將它儲存在 cafe_townsend 資料夾 (網站的根資料夾)。

  4. 在樣式表中輸入下列程式碼：
    p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}

    輸入時，Dreamweaver 會使用程式碼提示做為您完成輸入時的建議選項。當您看到想要的程式碼時，請按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 讓 Dreamweaver 為您完成輸入。

    不要忘記在屬性值之後、每一行結尾處加上分號。

    完成時，程式碼看起來應該如下列範例所示：

    提示

    如需關於任何 CSS 屬性的詳細資訊，請參閱 Dreamweaver 所附的 O’Reilly 參考手冊。若要顯示手冊，請選取「說明＞參考」，再從「參考」面板中的彈出式選單內選取「O’Reilly CSS Reference」。
  5. 儲存樣式表。

接下來，您要將樣式表附加至 index.html 頁面。


附加樣式表

當您將樣式表附加至網頁時，樣式表中所定義的規則會套用至頁面上對應的元素。例如，將 cafe_townsend.css 樣式表附加至 index.html 頁面時，所有的段落文字 (HTML 程式碼中以 <p> 標籤設定格式的文字) 都是根據您定義的 CSS 規則設定格式的。

  1. 在「文件」視窗中，開啟 Cafe Townsend index.html 檔 (如果它已開啟的話，可以按一下它的索引標籤)。
  2. 選取您在教學課程：加入頁面內容中貼到頁面中之第一個段落的文字。

  3. 在「屬性」檢視窗中查看，並確定段落是以段落標籤設定格式。

    如果「屬性」檢視窗中的「格式」彈出式選單顯示出「段落」，表示段落是以段落標籤設定格式。如果「屬性」檢視窗中的「格式」彈出式選單顯示出「無」或其他項目，請選取「段落」來格式化段落。

  4. 為第二個段落重複步驟 3。
  5. 在「CSS 樣式」面板中 (「視窗＞CSS 樣式」)，按一下位於面板右下方角的「附加樣式表」按鈕。

  6. 在「附加外部樣式表」對話方塊中，按一下「瀏覽」並瀏覽至您在前一節中建立的 cafe_townsend.css 檔。
  7. 按一下「確定」。

    「文件」視窗中的文字會根據外部樣式表中的 CSS 規則來設定格式。


探索 CSS 樣式面板

「CSS 樣式」面板可讓您追蹤會影響目前選取之頁面元素的 CSS 規則和屬性，或會影響整個文件的規則和屬性。它也可以讓您修改 CSS 屬性，但不必開啟外部樣式表。

  1. 請確定在「文件」視窗中開啟 index.html 檔案。
  2. 在「CSS 樣式」面板 (「視窗＞CSS 樣式」) 中，按一下面板頂端的「全部」並檢查您的 CSS 規則。

    在「全部」模式中，CSS 面板會顯示套用至目前文件的所有 CSS 規則，不論這些規則是在外部樣式表中或位於文件本身。您應該會在「所有規則」窗格中看到兩個主要類別：「樣式」標籤類別和 cafe_townsend.css 類別。

  3. 如果「樣式」標籤類別還沒展開的話，請按一下加號 (+) 將它展開。
  4. 按一下內文規則。

    設定為 #000000 值的 background-color 屬性便會出現在下面的「屬性」窗格中。

    注意

    您可能需要收合另一個面板，如「檔案」面板，才能看到「CSS 樣式」面板的完整長度。您也可以改變「CSS 樣式」面板的長度，只要拖曳窗格間的邊框即可。

    在教學課程：建立表格式頁面版面中，您利用「修改頁面屬性」對話方塊來設定頁面的背景顏色。以這種方法設定頁面屬性時，Dreamweaver 會將 CSS 樣式寫入至文件內部。

  5. 按一下加號 (+) 展開 cafe_townsend.css 類別。
  6. 按一下 p 規則。

    您在外部樣式表中為 p 規則定義的所有屬性和值都會出現在下面的「屬性」窗格中。

  7. 在「文件」視窗中，於您剛才設定格式之兩個段落中的任一位置上按一下。
  8. 在「CSS 樣式」面板中，按一下面板頂端的「正在」並檢查您的 CSS 樣式。在「正在」模式中，CSS 面板會顯示目前選取範圍的屬性摘要。顯示出來的屬性會對應至外部樣式表中規則的屬性。

在下一節中，您將使用「CSS 樣式」面板來建立新規則。就像您剛開始建立外部樣式表時所做的一樣，使用「CSS 樣式」面板來建立新規則比手動輸入規則來得簡單得多。


建立新的 CSS 規則

在本節中，您要使用「CSS 樣式」面板來建立自訂的 CSS 規則或類別樣式。類別樣式可讓您為任何文字範圍或文字區塊設定樣式屬性，而且可套用至任何 HTML 標籤。如需不同 CSS 規則類型的詳細資訊，請參閱了解 CSS。

  1. 在「CSS 樣式」面板中，按一下面板右下角的「新增 CSS 規則」。

  2. 在「新增 CSS 規則」對話方塊中，從「選取器類型」選項中選取「類別」。依預設值，這個組件應該會選取。
  3. 在「名稱」文字方塊中輸入「.bold」。

    請確定在「bold」文字之前有輸入句點 (.)。所有類別樣式的開頭都必須是句點

  4. 從「定義在」彈出式選單中，選取 cafe_townsend.css。依預設值，這個組件應該會選取。

  5. 按一下「確定」。

    「CSS 規則定義」對話方塊便會出現，指出您正在 cafe_townsend.css 檔中建立一個叫做 .bold 的類別樣式。

  6. 在「CSS 規則定義」對話方塊中，執行下列動作：
    • 在「字體」文字方塊中，輸入「Verdana, sans-serif」。
    • 在「大小」文字方塊中，輸入「11」，並從正右邊的彈出式選單中選取像素。
    • 在「行高」文字方塊中，輸入「18」，並從正右邊的彈出式選單中選取像素。
    • 從「粗細」彈出式選單中選取「粗體」。
    • 在「顏色」文字方塊中輸入「#990000」。

      這是描述功能的圖片。.

      提示

      如需關於任何 CSS 屬性的詳細資訊，請參閱 Dreamweaver 所附的 O’Reilly 參考手冊。若要顯示手冊，請選取「說明＞參考」，再從「參考」面板中的彈出式選單內選取「O’Reilly CSS Reference」。
  7. 按一下「確定」。
  8. 按一下「CSS 樣式」面板頂端的「全部」。
  9. 如果還沒有展開 cafe_townsend.css 類別的話，請按一下 cafe_townsend.css 類別旁邊的加號 (+) 按鈕。

    您會看到 Dreamweaver 將 .bold 類別樣式加入外部樣式表中所定義的規則清單。如果您按一下「所有規則」窗格中的 .bold 規則，規則的屬性便會出現在「屬性」窗格中。新的規則也會出現在「屬性」檢視窗的「樣式」彈出式選單中。


將類別樣式套用至文字

現在您已建立了類別規則，接下來要將它套用至一些段落文字中。

  1. 在「文件」視窗中，選取第一個段落中的前四個字：Cafe Townsend’s visionary chef。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，從「樣式」彈出式選單選取bold。

    粗體的類別樣式便會套用至您的文字。

  3. 重複步驟 2 來將粗體類別樣式套用至第二個段落的前四個字。

  4. 儲存您的頁面。


設定導覽列文字的格式

接下來，您會使用 CSS 將樣式套用至導覽列的連結文字。很多網頁會使用有色的矩形影像並於影像內加入文字來建立導覽列，但使用 CSS 的話，您只需要將文字和一些格式加以連結即可。只要利用 display:block 屬性和設定區塊的寬度，便可以有效地建立矩形，不必使用個別的影像。


為導覽建立新規則

  1. 如果還沒有開啟 cafe_townsend.css 檔的話，請開啟它或在它的索引標籤上按一下進行查看。
  2. 在檔案中 .bold 類別樣式之後輸入下列程式碼，定義新的規則：
    .navigation {
}

    這是一個空的規則。

    檔案中的程式碼看起來應該如下列範例所示：

  3. 儲存 cafe_townsend.css 檔。

    接下來，您會使用「CSS 樣式」面板將屬性加入規則中。

  4. 如果還沒開啟 index.html 檔的話，請開啟它。
  5. 在「CSS 樣式」面板中，確定已選取「全部」模式，再選取新的 .navigation 規則，然後按一下面板右下角的「編輯樣式」。

  6. 在「CSS 規則定義」對話方塊中，執行下列動作：
    • 在「字體」文字方塊中輸入「Verdana, sans-serif」。
    • 從「大小」彈出式選單中選取「16」，再從「大小」彈出式選單正右邊的彈出式選單中選取「像素」。
    • 從「樣式」彈出式選單中選取「一般」。
    • 從「裝飾」清單中選取「無」。
    • 從「粗細」彈出式選單中選取「粗體」。
    • 在「顏色」文字方塊中輸入「#FFFFFF」

      提示

      如需關於任何 CSS 屬性的詳細資訊，請參閱 Dreamweaver 所附的 O’Reilly 參考手冊。若要顯示手冊，請選取「說明＞參考」，再從「參考」面板中的彈出式選單內選取「O’Reilly CSS Reference」。
  7. 按一下「確定」。

    現在您要使用「CSS 樣式」面板再將一些屬性加入 .navigation 規則中。

  8. 在「CSS 樣式」面板中，確定已選取 .navigation 規則，再按一下「顯示清單檢視」。

    清單檢視會將「屬性」窗格重新組織，將所有可用屬性，按字母順序成清單來顯示 (和前一個檢視相反，「設定屬性」檢視只會顯示您已設定的屬性)。

  9. 在 background-color 屬性右邊的欄中按一下。

    若要查看屬性的完整用語，請將滑鼠停留在屬性上。

  10. 輸入「#993300」做為十六進位值，並按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    提示

    若要查看您的工作如何影響外部樣式表，在工作時，請在「文件」視窗中保持開啟 cafe_townsend.css 檔。當您在「CSS 樣式」面板中進行選取時，便會看到 Dreamweaver 同時在樣式表中撰寫 CSS 程式碼。
  11. 找出 display 屬性 (您可能需要向下捲動)，在其右邊的欄中按一下，再從彈出式選單中選取區塊。

  12. 找出 padding 屬性，在其右邊的欄中按一下，輸入「8px」做為它的值，再按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
  13. 找出 width 屬性，在其右邊的欄中按一下，在第一個文字方塊中輸入「140」，從彈出式選單中選取「像素」，再按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
  14. 按一下「顯示設定屬性」，好讓您設定好的屬性出現在「屬性」窗格中。

  15. 在 cafe_townsend.css 檔上按一下以顯示它。您會看到 Dreamweaver 已將您指定的所有屬性加入檔案中。
  16. 儲存 cafe_townsend.css 檔並關閉它。

現在您已建立好可設定導覽列文字格式的規則。接下來，便要將規則套用至選取的連結。


套用規則

  1. 先在「文件」視窗中開啟 index.html 頁面，按一下「Cuisine」，將插入點放在該字中的某個位置。

  2. 在標籤選取器中，按一下最右邊的 <a> 標籤。

    這個動作會選取指定的 <a> 標籤的所有文字或連結。

  3. 在「屬性」檢視窗 (「視窗＞屬性」) 中，從「樣式」彈出式選單中選取「navigation」。

    在「文件」視窗中，Cuisine 文字的外觀便會完全改變。文字現在已根據您在前一節中所定義的 .navigation 規則的屬性，格式化成導覽列按鈕。

  4. 為導覽列中的每個連結重複步驟 1 至 3。

    您必須將 navigation 類別樣式指定給每個 <a> 標籤或連結，所以請務必使用標籤選取器分別選取每個連結，再分別為每個標籤或連結指定類別樣式。

    如果您在設定連結文字格式時遇到問題，請確定每個已連結的文字之間是空格 (而非換行)。還要確定兩個連結之間的空格本身並未設定連結。如果設定為連結的話，請小心選取已連結的空格，清除「屬性」檢視窗中的「連結」文字方塊，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

  5. 當您完成導覽列所有文字的格式設定之後，請儲存頁面，然後在瀏覽器中預覽工作 (「檔案＞在瀏覽器中預覽」)。

    您可以在連結上按一下以確定連結是否可以運作。


加入滑鼠變換影像效果

接下來，您要加入滑鼠變換影像效果，讓導覽列的背景顏色能在滑鼠指標滑過其中一個連結時進行變更。若要加入滑鼠變換影像效果，請加入包含 :hover 虛擬類別的新規則。

關於…

關於 :hover 虛擬類別虛擬類別是用來影響 HTML 文件中之某些元素的一種方法，它的根據基礎並不是文件本身的 HTML 程式碼，而是網頁瀏覽器所套用的其他外部條件。虛擬類別可以是動態的，當使用者與文件互動時，頁面上元素多少可能會得到或失去虛擬類別。

當使用者將滑鼠停留在已設定格式的頁面元素上時，:hover 虛擬類別會影響該元素的變更。例如，將 :hover 虛擬類別加入 .navigation 類別樣式 (.navigation:hover) 以建立新規則時，由 .navigation 規則設定其格式的所有文字元素便會根據 .navigation:hover 規則屬性進行變更。
  1. 開啟 cafe_townsend.css 檔。
  2. 選取整個 .navigation 規則。

  3. 複製文字 (「編輯＞複製」)。
  4. 在規則結尾處按一下，再按幾次 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以製造一些空間。

  5. 在您剛才建立的空間中貼上 (「編輯＞貼上」) 複製的文字。
  6. 將 :hover 虛擬類別加入貼上的 .navigation 選取器，如下所示：

  7. 在新的 .navigation:hover 規則中，以 #D03D03 取代目前的背景顏色 (background-color) (#993300)。

  8. 儲存檔案並關閉它。
  9. 在「文件」視窗中開啟 index.html 檔，並在瀏覽器中預覽頁面 (「檔案＞在瀏覽器中預覽」)。

    當您將滑鼠停留在任何連結上時，便可以看到新的滑鼠變換影像效果。


(選擇性) 將頁面內容置中

最後，您要使用標籤選取器來選取文件中的所有 HTML，將文件的內容置中。

注意

有些瀏覽器 (例如 Internet Explorer 6)，在您使用本節所述的方法時，會將頁面上表格儲存格內容的文字置中。如果您在瀏覽器中預覽頁面時對預覽結果不滿意，可能會想要略過此節，讓頁面內容保持靠左對齊。
  1. 在「文件」視窗中開啟 index.html 頁面，按一下標籤選取器中的 <body> 標籤。

    按一下 <body> 標籤會在「文件」視窗中選取 <body> 的開始和結束標籤之間的所有項目。若要查看選取範圍，請按一下「文件」視窗頂端的「程式碼」檢視。

  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，按一下「置中對齊」按鈕。

    Dreamweaver 會插入 CSS <div> 標籤，該標籤會將頁面的內文內容置中。在「設計」檢視中，會有虛線將 <div> 標籤置中的區域框起來。

  3. 儲存頁面。

現在您的頁面已完成了。建立網站的最後一項工作是發佈頁面。若要發佈頁面，您必須定義遠端網站上的資料夾，並將檔案上傳至該資料夾。如需相關說明，請繼續下一個教學課程。


教學課程：發佈您的網站

本教學課程將教您如何使用 Macromedia Dreamweaver 8 設定遠端網站並發佈網頁。遠端網站通常位於遠端電腦上，此遠端電腦執行網站伺服器並容納本機檔案的複本。當使用者在瀏覽器中檢視您的網頁時，會存取在此網站伺服器上執行的遠端網站。

在本教學課程中，您將會完成下列工作：

了解遠端網站

定義遠端資料夾

上傳本機檔案

疑難排解遠端資料夾設定 (選擇性)


了解遠端網站

建立網站之後，下一步是將檔案上傳到遠端資料夾，以便發佈網站。遠端資料夾是您儲存檔案的地方，會因您測試、實際執行、共同作業的環境而異。Dreamweaver 會將此資料夾視為遠端網站。

在繼續進行之前，您必須擁有對遠端網站伺服器 (如 ISP 的伺服器、您服務的用戶端所擁有之伺服器、您公司內的 Intranet 伺服器，或是 Windows 電腦上的網際網路資訊服務 (IIS)) 的存取權。如果您還沒有這類伺服器的存取權，請洽詢 ISP、客戶或系統管理員。

或者，您可以在本機電腦執行網站伺服器，例如 IIS (Windows) 或 Apache (Macintosh)。如需在本機電腦設定網站伺服器的詳細資訊，請參閱安裝網站伺服器。

本教學課程中所描述的程序在遠端根資料夾為空白時效果最佳。如果遠端網站已包含檔案，則請先在遠端網站中建立空的資料夾 (在伺服器上)，然後將這個空資料夾做為您的遠端根資料夾來使用。

開始之前，您必須先定義本機網站。如需詳細資訊，請參閱教學課程：設定網站和專案檔案。

如需 Dreamweaver 網站的詳細資訊，請參閱「使用 Dreamweaver」中的設定 Dreamweaver 網站。


定義遠端資料夾

現在，您將設定遠端資料夾以便發佈網頁。由於遠端網站通常為本機網站的完全複製，遠端資料夾和本機資料夾通常會有相同的名稱。也就是說，發佈到遠端資料夾的檔案和子資料夾是在本機所建立之檔案和子資料夾的複本。

  1. 在遠端伺服器上，於伺服器的網站根資料夾內建立空資料夾。

    將新的空資料夾命名為 cafe_townsend (與本機根資料夾相同的名稱)。

    關於…

    使用 Dreamweaver 建立遠端資料夾如果 Dreamweaver 是您存取遠端伺服器的唯一方式，則必須先完成 Dreamweaver 中的遠端設定並建立連線，才能在遠端伺服器上建立空資料夾。在此情況下，您可以將主機目錄定義為遠端資料夾，或在連線到伺服器之後建立遠端資料夾。不論您選擇哪個方法來建立遠端資料夾，都請依照本教學課程指示繼續進行，直到連線到遠端伺服器。建立連線之後，您可以使用 Dreamweaver「檔案」面板建立新的遠端資料夾。

    當您連線到遠端伺服器時，「檔案」面板會在「遠端」檢視中顯示遠端伺服器所有的檔案 (同樣地，它會在「本機」檢視中顯示電腦所有的本機檔案)。若要顯示「遠端」檢視，請從「檔案」面板上方的彈出式選單中選取「遠端」檢視，或按一下「檔案」面板工具列上的「擴展/收合」。當您按一下「擴展/收合」時，「檔案」面板會同時顯示「本機」檢視和「遠端」檢視。

    若要在「遠端」檢視中加入空資料夾，請先使用上述其中一個方法來顯示「遠端」檢視 (如果您一開始看不到連線，請按一下「檔案」面板工具列上的「重新整理」)。當您看到已連線到網站伺服器時，請在「遠端」檢視中按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh)，然後選取「新增資料夾」。

    如需詳細資訊，請參閱「使用 Dreamweaver」中的管理檔案。
  2. 在 Dreamweaver 中，選取「網站＞管理網站」。
  3. 在「管理網站」對話方塊中，選取 Cafe Townsend 網站。

    如果您尚未定義 Cafe Townsend 網站，請建立此網站的本機資料夾，然後再繼續。如需詳細資訊，請參閱教學課程：設定網站和專案檔案。

  4. 按一下「編輯」。
  5. 在「網站定義」對話方塊中，如果「進階」設定未顯示，請按一下「進階」索引標籤。
  6. 從左邊的「分類」清單中選取「遠端資訊」。
  7. 選取「存取」選項。

    網際網路上最常見的連線到伺服器方式就是 FTP 和 SFTP；而如果您使用內部網路上的伺服器(或本機電腦) 作為網站伺服器，最常見的連線到伺服器方式則是「本機/區域網路」。如果您不確定在這裡要選擇什麼選項，請洽詢伺服器系統管理員。

    如需詳細資訊，請按一下對話方塊中的「說明」。

  8. 如果您選取 FTP，請輸入下列選項：
    • 輸入伺服器的主機名稱 (如 ftp.macromedia.com)。
    • 在「主機目錄」文字方塊中，輸入伺服器從 FTP 根資料夾到遠端網站根資料夾 (cafe_townsend) 的路徑。如果您不確定路徑為何，請洽詢系統管理員。

      在很多情況下，這個文字方塊應該保留空白。

    • 在適當的文字方塊中輸入您的使用者名稱和密碼。
    • 如果您的伺服器支援 SFTP，請選取「使用安全 FTP (SFTP)」選項。
    • 按一下「測試」，測試連線設定。
    • 如果連結不成功，請洽詢系統管理員。

    如需詳細資訊，請按一下對話方塊中的「說明」。

  9. 如果您選取「本機 / 區域網路」，請按一下文字方塊旁邊的資料夾圖示，並瀏覽到遠端網站的根資料夾。

    如需詳細資訊，請按一下對話方塊中的「說明」。

  10. 按一下「確定」。

    Dreamweaver 會建立到遠端資料夾的連線。

  11. 按一下「完成」，關閉「管理網站」對話方塊。


上傳本機檔案

在設定本機和遠端資料夾後，便可以將本機資料夾的檔案上傳到網站伺服器。即使您是在本機電腦上執行網站伺服器，若要使頁面可供公開存取，您仍必須將這些頁面上傳。

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取網站的本機根資料夾 (cafe_townsend)。
  2. 按一下「檔案」面板工具列中的藍色「上傳檔案」箭頭圖示。

  3. 當 Dreamweaver 詢問您是否要上傳整個網站時，請按一下「確定」。

    Dreamweaver 會將所有檔案複製到您在定義遠端資料夾中所定義的遠端資料夾。這項作業會花一些時間，因為 Dreamweaver 必須上傳網站上的所有檔案。

  4. 在瀏覽器中開啟遠端網站，確保所有檔案都已正確上傳。


疑難排解遠端資料夾設定 (選擇性)

網站伺服器有許多設定方式。以下清單提供了設定遠端資料夾時，可能會遇到的一些常見問題的相關資訊，及解決方法：

  • Dreamweaver FTP 實作可能因為使用某些 Proxy 伺服器、多層防火牆及其他間接的伺服器存取形式而無法正常運作。

    如果您遇到 FTP 存取的問題，請洽詢本機系統管理員尋求協助。

  • 若是實作 Dreamweaver FTP，您必須連線至遠端系統的根資料夾 (在很多應用程式中，您可以連線至任何遠端目錄，然後瀏覽整個遠端檔案系統，尋找您要的目錄)。

    請確定已將遠端系統的根資料夾指定為主機目錄。

    如果連線發生問題，而您已使用單斜線 (/) 指定主機目錄，那麼可能需要指定從連線的目錄到遠端根資料夾的相對路徑。

    例如，如果遠端根資料夾是較高層的目錄，您可能必須使用 ../../ 來指定主機目錄。

  • 包含空格和特殊字元的檔案和資料夾名稱，經常會在傳送到遠端網站時造成問題。

    使用底線取代空格，並且盡可能避免在檔案和資料夾名稱中使用特殊字元。檔案或資料夾名稱中的冒號 (:)、斜線 (/)、句點 (.) 及省略符號 (') 尤其會造成問題。檔案或資料夾名稱中的特殊字元有時候也可能讓 Dreamweaver 無法建立網站地圖。

  • 如果您在使用長檔名時遇到問題，請以較短的名稱重新命名。在 Macintosh 上，檔案名稱長度不能超過 31 個字元。
  • 很多伺服器使用符號連結 (UNIX)、快速鍵 (Windows) 或別名 (Macintosh)，連結位於伺服器磁碟某一部份的資料夾與其他位置的資料夾。

    例如，伺服器主目錄中的 public_html 子目錄，實際上可能是伺服器另一個部份的連結。在大部份的情況下，這種別名對您連結至適當的資料夾或目錄並沒有影響，但是，如果可以連結至伺服器的某個部份卻無法連結至另一個部份，表示可能有別名矛盾存在。

  • 如果您遇到像「無法上傳檔案」之類的錯誤訊息時，表示您的遠端資料夾空間可能不足。如需詳細資訊，請查看 FTP 記錄。

    注意

    通常，當您遇到 FTP 傳輸問題時，可選取「進階＞FTP 記錄」來檢查 FTP 記錄。


教學課程：使用程式碼

當您在網頁上加入文字、影像和其他內容時，Dreamweaver 8 會產生 HTML 程式碼。這個教學課程將說明如何使用「程式碼」檢視來顯示文件的基本程式碼，以及如何以手動方式新增與編輯程式碼。

如果您已經安裝網站並且完成了前一個教學課程，您可以繼續使用相同的 index.html 檔案。

如果您還沒有完成前一個教學課程，仍然可以完成這個教學課程。首先，請遵循教學課程：設定網站和專案檔案的指示來安裝網站。接著，請使用 cafe_townsend/completed_files/dreamweaver 資料夾中的 index_code.html 檔案，來完成這個教學課程。index_code.html 是您在教學課程：使用 CSS 設定頁面格式中已完成的 index.html 檔案的複製備份。

注意

如果使用已完成的 index_code.html 檔案來開始本教學課程，而非使用來自教學課程：使用 CSS 設定頁面格式的 index.html 檔案，教學課程中的一些步驟和圖例都會與您在畫面上看到的不符。

在本教學課程中，您將會完成下列工作：

查看程式碼

切換為編碼工作區 (僅適用於 Windows)

使用標籤選擇程式新增標籤

編輯標籤

查詢關於標籤的資訊

以程式碼提示新增影像

檢查變更

列印程式碼


查看程式碼

Dreamweaver 提供您兩種檢視頁面的方式：「設計」檢視 (在這個檢視中文件看起來比較像在瀏覽器中看起來的樣子) 與「程式碼」檢視 (在這個檢視中可以看到基本的 HTML 程式碼)。您也可以使用同時顯示「程式碼」和「設計」檢視的分割檢視。

  1. 在「文件」視窗中開啟 index.html 檔案。

    注意

    如果您未進行前面的教學課程以完成 index.html 檔案，請參閱本教學課程的簡介。
  2. 在「文件」工具列中，選取「顯示程式碼與設計檢視」按鈕 (標示為「分割」)。

    注意

    如果看不到「文件」工具列，請選取「檢視＞工具列＞文件」。

    視窗便會分割以顯示「設計」檢視與基本的 HTML 程式碼。

    您可以在「程式碼」檢視中編輯程式碼。按一下「文件」工具列上的「重新整理」，或按一下「設計」檢視的任意處時，對程式碼所做的變更才會出現在「設計」檢視。

  3. (選擇性) 若要只顯示「設計」檢視，請按一下「設計」檢視。
  4. (選擇性) 若要只顯示「程式碼」檢視，請按一下「程式碼」檢視。

當您在自己的頁面上工作時，可以使用您喜歡的任何檢視方式。本手冊中大部份的教學課程都是假設您使用「設計」檢視。


切換為編碼工作區 (僅適用於 Windows)

如果您在安裝時沒有變更工作區，現在可以選擇讓 Windows 工作區的外觀與操作像 Macromedia HomeSite 和 ColdFusion Studio 的常用編碼環境。

注意

Macintosh 使用者不能夠變更工作區。

切換為程式碼工作區

  • 選取「視窗＞工作區版面＞程式碼撰寫者」。


使用標籤選擇程式新增標籤

接著，您將使用「標籤選擇程式」，在網頁上的其中一個影像前後加上 div 標籤。您可以視需要指定影像的邊界、邊框或顏色。在影像旁圍繞 div 標籤的方式有許多種，本節將說明如何使用「標籤選擇程式」，幫助您插入任何標籤並新增適當的屬性值。

  1. 開啟 index.html 檔案 (如果尚未開啟的話)。
  2. 在「設計」檢視中，按一下 Cafe Townsend 橫幅圖形 (banner_graphic.jpg) 以選取它。

  3. 按一下「文件」工具列上的「程式碼」檢視，或選取「檢視＞程式碼檢視」，切換到「程式碼」檢視。

    您會看到「程式碼」檢視中所選影像的程式碼將會顯示為已選取。請確定選取了整個 img 標籤，包括開頭和結尾角括弧。

  4. 選取「檢視＞程式碼檢視選項＞文字換行」以啟用文字換行 (如果尚未啟用)。
  5. 按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh) 選取的文字，然後從彈出式選單中選取「插入標籤」。

    「標籤選擇程式」就會出現。

  6. 在「標籤選擇程式」中，展開「HTML 標籤」類別的「格式與版面」子類別，然後選取「一般」。

    右窗格中會出現標籤名稱清單，請從清單中選取 div。

    注意

    您也可以選取「HTML 標籤」類別，然後在右窗格中選取 div 標籤，而不必先展開「格式與版面」。
  7. 按一下「插入」。

    div 標籤的標籤編輯器就會出現。

  8. 在標籤編輯器中，選取「樣式表/輔助功能」類別，並在 ID 文字方塊中輸入 banner。

  9. 按一下 [確定]，關閉標籤編輯器並插入標籤。

    Dreamweaver 會在頁面中插入 div 標籤，圍繞在影像標籤旁。

  10. 按一下「關閉」，關閉「標籤選擇程式」。
  11. 儲存您的頁面。


編輯標籤

接下來，您會使用「標籤」檢視窗以快速變更標籤屬性。「標籤」檢視窗會顯示「文件」視窗中所選標籤的屬性。

  1. 在「程式碼」檢視中開啟 index.html 頁面 (如果尚未開啟的話)。
  2. 選取「視窗＞標籤檢視窗」以開啟「標籤」檢視窗 (如果尚未開啟的話)。
  3. 選取「屬性」索引標籤。
  4. 在「標籤」檢視窗中，按一下「顯示清單檢視」，依字母順序檢視所選取之標籤所有的屬性。

  5. 在「文件」視窗的「程式碼」檢視中，於任何標籤的開啟和結束括號之間按一下。

    「標籤」檢視窗的「屬性」索引標籤會顯示關於標籤的 HTML 屬性資訊。

  6. 仍然在「程式碼」檢視中，尋找並按一下頁面頂端 banner_graphic.jpg 影像的 img 標籤。

    「標籤」檢視窗的「屬性」索引標籤會顯示關於 img 標籤屬性的資訊。

  7. 在「標籤」檢視窗中，按一下 alt 屬性旁的空白文字方塊，輸入 Cafe Townsend 後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    Dreamweaver 會顯示「標籤」檢視窗中的新值並變更「文件」視窗中的程式碼。

  8. 儲存您的頁面。


查詢關於標籤的資訊

如果您需要關於標籤屬性和屬性值的說明，請查詢 Dreamweaver 內的參考資訊。

  1. 在「程式碼」檢視中開啟 index.html 頁面 (如果尚未開啟的話)。
  2. 在「文件」視窗中，選取 img 標籤的 alt 屬性名稱 (不是屬性值)。
  3. 按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh) 選取的文字，然後從彈出式選單中選取「參考」。

    「參考」面板會開啟並顯示關於 alt 屬性的資訊。

    注意

    您也可以選取「視窗＞參考」，以顯示「參考」面板。
  4. 如需其他標籤或屬性的詳細資訊，請在「參考」面板中適當的彈出式選單內選取標籤或屬性。


以程式碼提示新增影像

若要手動將程式碼新增到頁面中，請在「程式碼」檢視中按一下，就可以開始輸入。您可以使用程式碼提示功能加快工作。

在本節中，您將使用程式碼提示，在 Cafe Townsend 索引頁中加入門牌影像。

  1. 開啟 index.html 頁面 (如果尚未開啟的話)。
  2. 在「設計」檢視中，選取 street_sign.jpg 影像 (在 Flash 視訊預留位置下方)，再按「刪除」。

    現在，您將使用程式碼提示重新插入影像，而不是如教學課程：加入頁面內容中一樣，從「資源」面板中拖曳。

  3. 按一下「文件」工具列上的「程式碼」檢視，或選取「檢視＞程式碼檢視」，切換到「程式碼」檢視。

    在「程式碼」檢視中，插入點應該介於開頭和結尾段落標籤中間，如下所示：

    如果您在結尾表格儲存格 </td> 標籤之前沒有看到開頭和結尾段落標籤，請如下所示輸入它們：

    然後再將插入點放在開頭 <p> 標籤和結尾 <p> 標籤之間。

  4. 刪除開頭 <p> 標籤和結尾 <p> 標籤之間的任何內容，例如，不斷行空白 (&nbsp;)。
  5. 在開頭 <p> 標籤和結尾 <p>標籤之間放置插入點之後，輸入開頭角括弧 (<)。

    插入點處就會出現標籤清單。

    注意

    選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後從左邊的類別清單中選取「程式碼提示」，就可以設定清單出現之前的延遲時間長度。您可以隨時在「程式碼」檢視中按 Control + 空格鍵以顯示程式碼提示選單，也隨時可以按 Esc 鍵以關閉程式碼提示選單。
  6. 從清單中選取 img 標籤，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 插入標籤的第一個部份。

    提示

    若要快速捲動到標籤，請開始鍵入標籤名稱。
  7. 按空格鍵以顯示標籤屬性的清單。
  8. 開始輸入 src，當提示選單選取了 src 屬性後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    您剛才所輸入的程式碼下方便會出現瀏覽字樣。

  9. 按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以瀏覽檔案。
  10. 在「選取檔案」對話方塊中，瀏覽至 street_sign.jpg 檔案 (位在 cafe_townsend 根資料夾的 images 資料夾中)，再按「確定」(Windows) 或「選擇」(Macintosh)。

    會將影像檔案的 URL 插入作為 src 的屬性值，並在結束引號之後顯示插入點。

  11. 按空白鍵，選取提示選單中的 alt 屬性，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
  12. 將引號保持空白，因為這個影像只是圖例。

    使用向右鍵將插入點移到引號的右側。

  13. 輸入結尾角括弧 (>) 以完成標籤。

  14. 儲存您的頁面。

    提示

    若要新增現有標籤的屬性，只需要將插入點放在標籤的最後一個屬性值之後，再按空白鍵。當屬性清單出現時，加入屬性並視需要指定一個值。


檢查變更

在變更程式碼之後，您可以立刻獲得視覺回應效果。

若要查看程式碼的視覺呈現，請執行下列其中一項作業：

  • 按一下「設計」檢視，或「文件」工具列上的「程式碼和設計檢視」(標示為「分割」)。
  • 按 F12 (Windows) 或 Option + F12 (Macintosh)，在網頁瀏覽器中預覽頁面。若要關閉瀏覽器並回到程式碼，請按 Alt + F4 (僅適用於 Windows)。


列印程式碼

您可列印程式碼，以便離線編輯、建檔或分發。

若要列印程式碼：

  1. 在「程式碼」檢視中檢視頁面。
  2. 選取「檔案＞列印程式碼」。
  3. 指定列印選項後按一下「確定」(Windows) 或「列印」(Macintosh)。


教學課程：建立 CSS 式頁面版面

在教學課程：建立表格式頁面版面，您已瞭解如何使用 Dreamweaver 的表格設計功能以建立頁面版面。在本教學課程中，您將學習如何使用「階層式樣式表」(CSS) 建立類似版面。許多設計人員偏好 CSS 式版面，因為 CSS 會提供對元素定位的更大控制、減少需要的程式碼數量，並讓您以邊界、邊框、顏色等格式化版面區塊。

如果您尚未定義 Dreamweaver 網站並建立 cafe_townsend 本機根資料夾，則必須先完成這些作業，才能繼續進行。如需相關說明，請參閱教學課程：設定網站和專案檔案。

在這個教學課程中，您將會完成下列工作：

了解 CSS 式頁面版面

檢查設計樣稿

建立及儲存新頁面

插入圖層

新增頁面顏色


了解 CSS 式頁面版面

許多網站使用表格式版面來顯示網頁資訊。表格對於呈現表格式資料 (例如重複元素的列和欄) 很有用，並且很容易在網頁上建立。但表格通常會產生大量難以讀取和維護的程式碼。此外，因為表格有大量必要標籤和可能的「巢狀結構」，對於使用螢幕讀取器檢視網頁的行動不便人士，可能會造成問題。

CSS 式版面使用區塊元素 (而不是表格列和欄)，比起相同特性的表格式版面，包含較少程式碼。CSS 式版面通常會使用 <div> 標籤 (而不是 <table> 標籤) 建立版面所使用的 CSS 版面區塊。您可以將這些 CSS 版面區塊定位在頁面任意處，並指定版面區塊的屬性，例如邊框、邊界、背景顏色等。此外，使用螢幕讀取器檢視網頁的人，在瀏覽 CSS 建置網頁時會輕鬆許多，這是因為程式碼比較簡單，也比較短。

Dreamweaver 可讓您建立圖層。Dreamweaver 圖層是您可以放置在頁面上任何地方的 HTML 頁面元素。更詳細地說，它是具有絕對位置的 <div> 標籤 (或任何其他標籤)。您可以使用 Dreamweaver 在頁面上拖曳圖層，然後在任意位置上放置圖層。圖層會做為容納影像、Flash 檔案、文字等資源的內容區塊。

Dreamweaver 圖層是絕對定位的元素。也就是說，它們的位置是相對於頁面的上邊界和左邊界設定。您不能使用圖層建立 CSS 式版面，然後再置中對齊頁面內容。因此，本教學課程中的版面與您在教學課程：建立表格式頁面版面中所建立的版面稍微不同。

如需 Dreamweaver 版面的詳細資訊，請參閱「使用 Dreamweaver」中的使用 CSS 配置頁面。


檢查設計樣稿

注意

如果您已完成教學課程：建立表格式頁面版面，並已檢查設計樣稿，則可以進行下節，立即開始建立 CSS 式版面。

一般而言，當您著手建立網站時，不會馬上開啟 Dreamweaver 並配置頁面。一開始建立網站，通常是使用紙張或圖形編輯應用程式 (如 Macromedia Fireworks) 進行設計。為了向客戶展示網站的最初構想並取得認可，美工設計人員多半會先草繪一份完整的網站圖稿 (也稱為「樣稿」)。

樣稿由客戶要求的網站頁面元素組成，而這些頁面元素的數目不限。例如，客戶可能會說：「我希望將商標放在頁面頂部，頁面中則要安排可連結至其他頁面的導覽、一塊屬於網路商店的區域以及可讓我插入視訊片段的地方」。設計人員隨即根據這樣的要求，著手規劃網站版面並製作滿足客戶需求的範例頁面草稿。

本教學課程為您提供了一份已完成且經認可的樣稿，對象是需要設立網站的虛構餐廳 Cafe Townsend。身為網頁設計師，您的職責就是要將樣稿轉換成可以實際運作的網頁 (這可能需要其他美工設計人員和 Flash 開發人員從旁協助)。

您會注意到美工設計人員提供的網頁樣稿中，包含了一些內容區域以及圖形設計。在下一節中，您將使用 Dreamweaver 來配置這份設計。

如果您想在電腦螢幕上查看原始樣稿檔，也可以開啟該檔案。您可以在 cafe_townsend 資料夾的 fireworks_assets 資料夾 (在教學課程：設定網站和專案檔案中，已複製到硬碟) 找到樣稿檔 homepage-mockup.jpg。最好將樣稿列印出來，這樣就可以在建置頁面時放在手邊參考。


建立及儲存新頁面

設定了網站並檢查所有樣稿之後，即可準備開始建立網頁。首先要建立新頁面，然後將它儲存在網站的 cafe_townsend 本機根資料夾內。這個頁面最後會成為虛構餐廳 Cafe Townsend 的網站首頁。

如果您尚未建立 cafe_townsend 本機根資料夾，則必須先完成這項作業，才能繼續進行。如需相關說明，請參閱教學課程：設定網站和專案檔案。

  1. 在 Dreamweaver 中，選取「檔案＞新增」。
  2. 在「新增文件」對話方塊的「一般」索引標籤中，在「類別」清單中選取「基本頁面」，再於「基本頁面」清單中選取「HTML」，然後按一下「建立」。
  3. 選取「檔案＞另存新檔」。
  4. 在「另存新檔」對話方塊中，瀏覽到網站「本機根資料夾」的 cafe_townsend 資料夾並開啟它

    (您已於教學課程：設定網站和專案檔案中，在 local_sites 資料夾內建立了這個資料夾)。

  5. 在「檔案名稱」文字方塊中輸入 index_css.html，然後按一下「儲存」。

    在應用程式視窗上方標題列中，該檔案名稱 (位於括號中) 便會出現。

  6. 在新文件頂端的「文件標題」文字方塊中，輸入 Cafe Townsend。

    這是頁面的標題 (與檔案名稱不同)。當網頁瀏覽者在網頁瀏覽器中檢視頁面時，將會在瀏覽器視窗標題列中看到這個標題。

  7. 請選取「檔案＞儲存」以儲存頁面。


插入圖層

接著，您將在頁面上加入圖層。圖層是可用來容納影像、文字、Flash 檔案及其他內容的絕對定位元素。如需關於圖層的詳細資訊，請參閱了解 CSS 式頁面版面。


繪製新圖層

  1. 在「文件」視窗中開啟 index_css.html 頁面之後，從「插入」列選取「版面」模式。

  2. 按一下「繪製圖層」。

    當您在頁面上移動滑鼠指標時，它會變成十字形狀。

  3. 拖曳任何大小的圖層至頁面，然後放開滑鼠按鈕。
  4. 按一下圖層左上角的選取範圍控點，確定選取圖層。
  5. 選取新圖層之後，在「屬性」檢視窗中 (「視窗＞屬性」) 執行下列動作：
    • 在「圖層編號」文字方塊中按一下，將圖層重新命名為 banner_graphic。
    • 在「寬 (W)」文字方塊中，輸入 700px。
    • 在「高 (H)」文字方塊中，輸入 90px。
    • 在「左 (L)」文字方塊中，輸入 20px。
    • 在「上 (T)」文字方塊中，輸入 20px。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。

    Dreamweaver 便會調整新圖層 banner_graphic 的大小和位置。banner_graphic 圖層是 700 像素寬、90 像素高。其位置距離頁面左邊界為 20 像素，距離頁面上邊界也是 20 像素。

    提示

    除了在「屬性」檢視窗中使用精確像素值定位 banner_graphic 圖層，您也可以拖曳所選圖層左上角的選取範圍控點，在頁面任意處定位圖層。
  6. 開啟「圖層」面板 (「視窗＞圖層」)。您會看到 Dreamweaver 已將新圖層 (banner_graphic) 加入至圖層清單中。
  7. 在新圖層外按一下，以取消選取它。
  8. 儲存您的頁面。


加入更多圖層

現在，您將在頁面上加入更多圖層。您將使用第一個圖層 (banner_graphic) 做為其他圖層定位的參考點。您也可以使用「CSS 圖層背景」功能，協助您定位並區別這些圖層。

  1. 在「插入」列的「版面」類別中，按一下「繪製圖層」按鈕，將另一個任意大小的圖層拖曳到頁面。

  2. 按一下新圖層的選取範圍控點，以選取它。
  3. 選取新圖層之後，在「屬性」檢視窗中執行下列動作：
    • 在「圖層編號」文字方塊中按一下，將圖層重新命名為 flash_fma。
    • 在「寬 (W)」文字方塊中，輸入 700px。
    • 在「高 (H)」文字方塊中，輸入 166px。
    • 在「左 (L)」文字方塊中，輸入 20px。
    • 在「上 (T)」文字方塊中，輸入 111px。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。

    Dreamweaver 便會調整新圖層 flash_fma 的大小和位置。

    這是描述功能的圖片。.

    flash_fma 圖層是 700 像素寬、166 像素高。其位置距離頁面左邊界為 20 像素，距離頁面上邊界為 111 像素。這個圖層距離頁面上邊界 111 像素，這樣才不會與 banner_graphic 圖層重疊。

    當圖層重疊時，您會注意到其中一個圖層 (尤其是下方圖層) 的邊框由虛線表示。

  4. 在新圖層外按一下，以取消選取它。
  5. 選取「檢視＞視覺輔助＞CSS 版面背景」。

    Dreamweaver 會加入圖層背景顏色。這些顏色是隨機選取，並不會在發佈的網頁上出現。它們只是 Dreamweaver 所提供的視覺輔助，協助您看清楚頁面上的圖層和其他區塊元素類型。

    您可以選取「檢視＞視覺輔助」，然後取消選取「CSS 版面背景」，以停用「CSS 版面背景」。

  6. 接著，再拖曳三個圖層到頁面，將它們放在 banner_graphic 圖層和 flash_fma 圖層底下。

    請記住，每次拖曳新圖層之前，必須按一下「插入」列上的「繪製圖層」。

  7. 頁面上有這三個新圖層之後，請使用「屬性」檢視窗執行下列動作：
    • 選取第一個圖層，將它命名為 header，並且指定其大小為 700 像素寬、24 像素高。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。

      提示

      選取圖層時，確定在圖層邊框的任意處或圖層的選取範圍控點上按一下，而不是在圖層內按一下。當您看到圖層邊框的調整大小控點，以及在「屬性」檢視窗的寬度和高度屬性時，可以確定圖層已選取。您也可以在「圖層」面板 (「視窗＞圖層」) 按一下圖層名稱，以選取圖層。
    • 選取第二個圖層，將它命名為 center_content，並且指定其大小為 700 像素寬、350 像素高。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。

      注意

      center_content 圖層大小指定為 350 像素高度時，它會與頁面上的其餘圖層重疊。進行下一個步驟之前，請選取其餘圖層，並拖曳選取範圍控點到頁面底部，以移動 center_content 圖層底下的其餘圖層。
    • 選取第三個圖層，將它命名為 footer，並且指定其大小為 700 像素寬、24 像素高。請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。

    完成時，頁面應該看起來如下圖：

  8. 接著，選取 header 圖層並拖曳選取範圍控點，直到 header 圖層位於 flash_fma 圖層底下。

    拖曳圖層時，您可以在圖層外按一下，取消選取它，以隨時檢查位置。

    提示

    您也可以按鍵盤方向鍵，一次移動所選取的圖層一個像素。嘗試使用「屬性」檢視窗，在距離頁面左邊界 20 像素處對齊 header 圖層。然後使用向上鍵，將圖層上移，直到接觸 flash_fma 圖層的下邊框。
  9. 選取並拖曳 center_content 圖層和 footer 圖層，或使用電腦上的方向鍵定位圖層，如下列範例所示：

    提示

    您也可以使用「文件」工具列上的「視覺輔助」按鈕，以啟用或停用「CSS 版面背景」。
  10. 圖層就定位之後，選取「檢視＞視覺輔助」，然後取消選取「CSS 版面背景」，以停用「CSS 版面背景」(如果未停用)。


在圖層內加入圖層

在 center_content 大圖層內部，將繪製最後幾個圖層。這些圖層相當於加入到頁面的表格儲存格 (如果您已完成教學課程：建立表格式頁面版面)。

  1. 在圖層右方按一下，確定沒有選取任何圖層。
  2. 在「插入」列的「版面」類別中，按一下「繪製圖層」，將另一個圖層拖曳到 center_content 圖層內，如下列範例所示：

  3. 按一下新圖層的選取範圍控點，確定已選取它。
  4. 選取新圖層之後，在「屬性」檢視窗中執行下列動作：
    • 在「圖層編號」文字方塊中按一下，將圖層重新命名為 navigation。
    • 在「寬 (W)」文字方塊中，輸入 140px。
    • 在「高 (H)」文字方塊中，輸入 350px。
    • 在「左 (L)」文字方塊中，輸入 20px。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。
  5. 使用鍵盤的向上鍵，移動 navigation 圖層直到完全位在 center_content 圖層內，如下列範例所示：

  6. 按一下「繪製圖層」並拖曳另一個圖層，在 center_content 圖層內建立另一個圖層，如下列範例所示：

  7. 按一下新圖層的選取範圍控點，確定已選取它。
  8. 選取新圖層之後，在「屬性」檢視窗中執行下列動作：
    • 在「圖層編號」文字方塊中按一下，將圖層重新命名為 flash_video。
    • 在「寬 (W)」文字方塊中，輸入 230px。
    • 在「高 (H)」文字方塊中，輸入 350px。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。
  9. 拖曳 flash_video 圖層或使用鍵盤方向鍵定位圖層，如下列範例所示：

  10. 再按一下「繪製圖層」並拖曳另一個圖層，在 center_content 圖層內建立另一個圖層，如下列範例所示：

  11. 按一下新圖層的選取範圍控點，確定已選取它。
  12. 選取新圖層之後，在「屬性」檢視窗中執行下列動作：
    • 在「圖層編號」文字方塊中按一下，將圖層重新命名為 text。
    • 在「寬 (W)」文字方塊中，輸入 330px。
    • 在「高 (H)」文字方塊中，輸入 350px。
    • 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的項目。
  13. 拖曳 text 圖層或使用鍵盤方向鍵定位圖層，如下列範例所示：

    注意

    如果圖層邊框出現虛線並不會造成問題。這表示圖層之間重疊一、二個像素。
  14. 儲存您的頁面。


新增頁面顏色

提示

您可以向左或向右拖曳欄標題的右邊框，以變更「圖層」面板的「名稱」欄寬度。
  1. 現在，請為部分圖層和頁面背景設定顏色，以增添頁面色彩。在「圖層」面板 (「視窗＞圖層」) 按一下 navigation 圖層名稱，以選取此圖層。

  2. 在「屬性」檢視窗的「背景顏色」文字方塊內按一下。

    文字方塊就在「背景顏色 (Bg)」顏色方塊的旁邊。

  3. 在「背景顏色」文字方塊中輸入十六進位值 #993300，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    navigation 圖層的背景顏色會變成紅棕色。

  4. 在「圖層」面板上選取 flash_video 圖層名稱，以選取此圖層。
  5. 在「屬性」檢視窗的「背景顏色」文字方塊內按一下，再輸入十六進位值 #F7EEDF，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    flash_video 圖層的顏色會變成淺棕褐色。

  6. 重複以上步驟，將 text 圖層的顏色也變成淺棕褐色。
  7. 設定這三個圖層的背景顏色之後，在所有圖層的右方按一下，確定沒有選取任何圖層。

    接下來，請修改頁面屬性以變更整個頁面的背景顏色。「頁面屬性」對話方塊可供您設定一些頁面屬性，包括頁面字體的大小和顏色、查閱過連結的顏色和頁面邊界等選項。

  8. 請選取「修改＞頁面屬性」。
  9. 在「頁面屬性」對話方塊的「外觀」類別中，按一下「背景顏色」顏色方塊，然後從顏色挑選器中選取黑色 (#000000)。

  10. 按一下「確定」。

    頁面背景會變成黑色。

  11. 儲存您的頁面。

現在您已完成 CSS 頁面版面。此版面包含一些可容納影像、文字和 Flash Vidoe 檔案等資源的圖層。下一個步驟是加入內容。

如果您已完成教學課程：加入頁面內容，便會知道可以使用 Dreamweaver 在頁面輕鬆插入資源。如果您尚未完成該教學課程，可以在加入內容至剛完成的 CSS 式頁面版面時，參考相關說明。

您可以在 cafe_townsend/completed_files/dreamweaver 資料夾中找到該教學課程的完成版本。


教學課程：顯示 XML 資料

本教學課程示範如何建立顯示 XML 資料的網頁。顯示 XML 資料包括擷取儲存在本機或遠端 XML 檔案中的資訊，並在網頁中呈現這項資訊。在網頁上使用 XML 資料最主要優點是能夠將內容從呈現方式中獨立出來。也就是說，您網頁上的內容 (資料) 會與網頁的呈現方式 (版面、文字樣式等) 分開。這樣一來，任何人都可以在 XML 檔案中執行作業，而無須修改呈現方式的頁面，反之亦然。

建議您在完成這項教學課程之前，先熟悉「階層式樣式表」(Cascading Style Sheets，CSS)。如果您還不熟悉 CSS 的話，您可能想要先完成教學課程：使用 CSS 設定頁面格式。

在這個教學課程中，您將會完成下列工作：

尋找您的檔案

檢視您的工作

了解搭配網頁使用 XML 和 XSL

了解 XSLT 頁面

將 HTML 頁面轉換為 XSLT 頁面

將 XML 資料來源附加至 XSLT 頁面

修改 XSLT 頁面版面

將 XML 資料繫結到 XSLT 頁面

在 XML 資料上套用樣式

建立動態連結

新增重複區域 XSLT 物件

附加 XSLT 頁面至 XML 頁面

了解其他部署選項


尋找您的檔案

完成此項教學課程所需的檔案放置在您先前複製到電腦的 cafe_townsend 根資料夾內部之 xml 資料夾中。(您應該已在教學課程：設定網站和專案檔案中完成檔案的複製。如果您未完成該教學課程，請務必先完成它，然後再進行其他步驟。)

這個 xml 資料夾包含您在此教學課程將處理的主要檔案 (xml_menu.html)、選單頁面的 CSS 樣式表 (xml_menu.css)、包含 XML 資料的檔案 (specials.xml)、images 資料夾，以及其他 HTML 頁面。

本教學課程的已完成版本 (xml_menu.xsl) 位於 cafe_townsend/completed_files/dreamweaver/xml 目錄中。


檢視您的工作

Cafe Townsend (虛構的餐廳) 在網站上公佈了每日特餐的清單。他們使用帶有一系列表格列的 HTML 表格來顯示資訊。每列的左邊欄位顯示了項目的名稱以及該項目的說明。每列的右邊欄位顯示了該項目的價格。頁面上所有的資訊都是人工撰寫而成 (亦即，這些資訊並不是來自動態資料來源)，並使用外部樣式表來格式化文字。

Cafe Townsend 的老闆已經決定要採用「動態方式」並使用 XML 檔案的資料，來顯示他們的每日特餐。XML 允許頁面內容 (特餐菜單) 與呈現方式 (版面、文字樣式等) 之間的分隔。就算是完全不了解 HTML 或網頁維護方式的員工，也可以藉由編輯 XML 檔案來更新資訊，並讓菜單資訊的網頁樣式保持不變。

在本教學課程中，您需要將現有的特餐頁面 (HTML 頁面) 轉換成 XSLT 頁面，以在頁面上顯示 XML 資料。同時，您將在 XML 資料上套用樣式，讓資料的外觀在整個頁面中維持一致。

如果您已熟悉 XML、XSLT 與用戶端變形，可以跳至將 HTML 頁面轉換為 XSLT 頁面。如果您並不熟悉這些概念，請閱讀下面各節。


了解搭配網頁使用 XML 和 XSL

「可擴展標記語言」(XML) 是一種可以讓您建立資訊結構的語言。就像 HTML 一樣，XML 可讓您使用標籤來建立資訊結構，但 XML 標籤並非和 HTML 標籤一樣是預先定義好的；不同的是，XML 可讓您建立最適合用來定義您的資料結構的標籤。標籤會以巢狀的方式層層包覆，以建立父標籤和子標籤的綱要。如同大部分的 HTML 標籤，XML 綱要中的所有標籤都有開頭和結尾標籤。

下面範例示範了 XML 檔案的基本結構：

<?xml version="1.0">
<mybooks>
   <book bookid="1">
      <pubdate>03/01/2004</pubdate>
      <title>Displaying XML Data with Macromedia Dreamweaver</title>
      <author>Charles Brown</author>
   </book>
   <book bookid="2">
      <pubdate>04/08/2004</pubdate>
      <title>Understanding XML</title>
      <author>John Thompson</author>
   </book>
</mybooks>

在這個範例中，每一個父 <book> 標籤都含有三個子標籤：<pubdate>、<title> 和 <author>。然而每一個 <book> 標籤同時也是 <mybooks> 標籤的子標籤，後者在綱要中高了一個層級。您可以使用任何您喜歡的方式來命名及建立 XML 標籤的結構，前提是要以巢狀方式來建立標籤結構，並替開頭的標籤指定一個相對應的結尾標籤。

XML 文件不包含任何格式設定-它們只是結構化資訊的容器。(您會注意到範例程式碼不包含字型、表格或標題標籤)。只要您有 XML 綱要，就可以使用「可擴展樣式表語言」(XSL) 來顯示這項資訊。如同「階層樣式表」(CSS) 可讓您格式化 HTML 的方式一般，XSL 可讓您格式化 XML 資料。您可以定義 XSL 檔案中的樣式、頁面元素與版面等，並且將它附加到 XML 檔案，以便當使用者在瀏覽器中檢視 XML 資料時，該資料可以根據您在 XSL 檔案中的定義進行格式化。將內容 (XML 資料) 和呈現方式 (由 XSL 檔案定義) 完全分開，讓您可以有效控制資訊在網頁上的顯示方式。基本上，XSL 是 XML 的呈現技術，而其主要輸出是 HTML 網頁。

「可擴展樣式表語言變形」(XSLT) 是 XSL 的一套子語言，讓您在網頁上顯示 XML 資料，並讓 XML 資料 (和 XSL 樣式一起)「變形」成可讀、樣式化且以 HTML 格式資訊。您可以使用 Dreamweaver 建立 XSLT 頁面，以便使用應用程式伺服器或瀏覽器來執行 XSL 變形。當您執行伺服器端的 XSL 變形時，伺服器會負責將 XML 和 XSL 變形，並顯示在頁面上。當您執行用戶端變形時，瀏覽器 (例如 Internet Explorer) 就會負責這項工作。

您最後採取的方法 (伺服器端變形或用戶端變形) 要視您嘗試要達到的最終結果、您可用的技術、您的 XML 原始檔的存取權層級以及其他因素而定。這兩種方式都有其優點與限制。舉例來說，伺服器端變形適用於所有伺服器，而用戶端變形則受限於最新的瀏覽器 (Internet Explorer 6、Netscape 8、Mozilla 1.8 和 Firefox 1.0.2)。伺服器端變形可以讓您從自己的伺服器或網路上的任何一處動態顯示 XML 資料，但是用戶端變形必須使用掛載在本機網站伺服器上的 XML 資料。此外，伺服器端變形要求您將網頁部署至已設定完成的應用程式伺服器，但是用戶端變形只要求至網站伺服器的存取。

本教學課程會帶領您建立 XSLT 頁面並執行用戶端變形 (因為用戶端的工作流程較容易執行，且不需要使用到應用程式伺服器)。如需關於其他部署 XSLT 頁面方式的詳細資訊，請參閱了解其他部署選項。


了解 XSLT 頁面

當使用伺服器端 XSL 變形時，您可用 Dreamweaver 來建立 XSLT 頁面以產生完整的 HTML 文件 (完整的 XSLT 頁面)，或產生部份 HTML 文件的 XSLT 片段。

完整的 XSLT 頁面類似於一般的 HTML 頁面，它包含一個 <body> 標籤一個和 <head> 標籤，並讓您將 HTML 和 XML 資料組合顯示在頁面上。XSLT 片段是獨立文件使用的程式碼，可以顯示格式化的 XML 資料。和完整的 XSLT 頁面不同的是，它是一個獨立的檔案，不包含 <body> 或 <head> 標籤。

如果您想要顯示專屬頁面上的 XML 資料，就要建立一個完整的 XSLT 頁面，然後將您的 XML 資料繫結到該頁面。另一方面，如果想要將 XML 資料顯示在現有動態頁面上的某一特定區段 (例如，運動用品商店的動態網頁，頁面的另一端顯示了來自 RSS 反饋檔案的比賽分數)，您必須建立一個 XSLT 片段，並將參考插入至動態頁面中。執行伺服器端變形時，較常見的方法是建立 XSLT 片段，然後結合其他動態頁面一起使用，以顯示 XML 資料。

在本教學課程中，您將建立一個完整的 XSLT 頁面，並使用它來變形範例 XML 檔案。這個變形為使用現代瀏覽器 (Internet Explorer 6、Netscape 8、Mozilla 1.8 或 Firefox 1.0.2) 的用戶端變形。伺服器端變形超出本教學課程的範圍，因為它們需要以變形引擎設定的應用程式伺服器。

如需關於伺服器端與用戶端 XSL 變形的綜合概觀，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的關於伺服器端 XSL 變形與關於用戶端 XSL 變形。

如需其他資源 (例如，教您更多關於伺服器端變形的教學課程)，請參閱 www.macromedia.com/go/dw_xsl_tw。


將 HTML 頁面轉換為 XSLT 頁面

在一開始，您將把 Cafe Townsend 現有的特餐頁面 (HTML 頁面) 轉換為可以顯示 XML 資料的 XSLT 頁面。

  1. 在「檔案」面板 (「視窗＞檔案」) 中，尋找 xml_menu.html，然後按兩下以開啟該檔案。xml_menu.html 檔案位於 cafe_townsend 根資料夾內部的 xml 資料夾。如需詳細資訊，請參閱尋找您的檔案。
  2. 選取「檔案＞轉換＞XSLT 1.0」。

    Dreamweaver 會在「文件」視窗中，開啟 xml_menu 頁面。新的頁面為 XSL 樣式表，儲存的副檔名為 .xsl。

  3. 按一下 xml_menu.html 頁面以關閉檔案。這樣一來，只有新的 xml_menu.xsl 頁面會顯示在 「文件」視窗中。


將 XML 資料來源附加至 XSLT 頁面

接下來您會使用「繫結」面板，將 XML 資料來源附加至頁面。

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下 XML 連結。

    注意

    您也可以按一下「繫結」面板右上角的「來源」連結，以新增 XML 資料來源。
  2. 選取「附加本機檔案」(根據預設，它應該是已選取的狀態)，按一下「瀏覽」按鈕，瀏覽至位於電腦上的 specials.xml 檔案 (也是位在 cafe_townsend/xml 資料夾)，然後按一下「確定」。
  3. 按一下「確定」以關閉「尋找 XML 來源」對話方塊。

    Dreamweaver 會以 XML 資料來源的綱要填入「繫結」面板。

    如需綱要中符號的指南，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的建立 XSLT 頁面。


修改 XSLT 頁面版面

現在您在頁面上使用的為 XML 資料而非靜態文字，因此您不需要所有的表格列。接下來您會刪除多數的表格列，僅留下其中之一來顯示資料。

  1. 按一下最後一表格列 (New York Cheesecake 列)，然後按一下標籤選取器中最右邊的 <tr> 標籤，以選取該列。

  2. 按 Delete 鍵。
  3. 重複上述的步驟，刪除 Grilled Pacific Salmon 列與 Thai Noodle Salad 列。結束後，頁面上會留下最後一列: Summer Salad 列。
  4. 選取左邊表格儲存格中的所有文字。

  5. 在「屬性」檢視窗 (「視窗＞屬性」) 中，選取「樣式」彈出式選單裡的「無」。

    這個步驟可以移除所選取文字的菜單類別樣式。在一般的工作流程中，您可能不會這樣做。但您在此移除所有的樣式，是為了稍後可以學習將樣式套用至 XML 資料的方法。

  6. 文字仍在選取狀態，請按 Delete 鍵。
  7. 儲存您的工作 (「檔案＞儲存檔案」)。


將 XML 資料繫結到 XSLT 頁面

現在您已經準備好將 XML 資料繫結至頁面上。

  1. 在「繫結」面板 (「視窗＞繫結」) 中，選取項目元素，然後將其拖曳至空的表格欄中。

    XML 資料預留位置便會出現在頁面上，而預留位置會反白標示並包含在大括號之中。預留位置會使用 XPath (XML 路徑語言) 語法以描述該 XML 綱要的階層式結構。

  2. 按鍵盤上的向右鍵，將插入點移動至 XML 資料預留位置的右側。
  3. 按空白鍵，輸入連字符號，再按空白鍵。

  4. 在「繫結」面板中，選取描述元素，並將之拖曳至插入點。

    另一個 XML 資料預留位置便會顯示在頁面上。視您螢幕的解析度而定，預留位置可能會移至下一行。但您不需擔心這個問題。稍後您在瀏覽器上顯示頁面時，資料將會照著填入表格中。

  5. 最後，選取右邊表格欄中的價格 (7)。
  6. 在「繫結」面板中，按兩下價格元素。

    同樣，XML 資料預留位置會影響頁面的版面。但您不需擔心這個問題。

    注意

    XML 資料預留位置所保留的價格會以菜單類別樣式來格式化，這是因為您並沒有先移除樣式 (像對左邊表格欄那樣)。
  7. 儲存頁面，然後按 F12 (Windows) 或 Option + F12 (Macintosh)，在瀏覽器中預覽您的工作。

    瀏覽器顯示頁面，而該頁面顯示來自 XML 檔案資料的一列。


在 XML 資料上套用樣式

現在，您將套用樣式至項目與描述的 XML 資料預留位置。當您將樣式套用至 XML 資料預留位置時，預留位置的文字會顯示樣式。稍後，當您在瀏覽器中預覽頁面時，XML 資料的結果將會顯示指定的樣式。

  1. 在左邊表格儲存格中按一下，然後按一下標籤選取器的最右邊 <td> 標籤，以選取該儲存格。

    選取該欄，這樣就可以一次格式化該欄所有的內容 (包括連字號)。

  2. 在「屬性」檢視窗中，選取「樣式」彈出式選單裡類別樣式清單中的菜單。
  3. 按一下左邊表格欄內部，以取消選取。
  4. 按一下 XML 項目資料預留位置，以選取它。
  5. 在「屬性」檢視窗中，按一下「斜體」按鈕。

  6. 儲存頁面，然後按 F12 (Windows) 或 Option + F12 (Macintosh)，在瀏覽器中預覽您的工作。

如需關於套用樣式至 XML 資料的詳細資訊，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的將樣式套用至 XSLT 片段。


建立動態連結

接下來，您將建立動態連結，讓特餐菜單上的項目名稱連結到包含該項目圖片的頁面。

  1. 在「文件」視窗中，按一下 XML 項目資料預留位置，以選取它。
  2. 在「屬性」檢視窗中，按一下「連結」文字方塊旁邊的「瀏覽檔案」圖示。

  3. 在「選取檔案」對話方塊中，選取「資料來源」。

    如果您的電腦使用 Windows 作業系統，這個選項位於對話方塊頂端。如果您的電腦使用 Macintosh 作業系統，這個選項位於對話方塊的底部。

  4. 當 XML 綱要出現在對話方塊中時，請選取連結元素。
  5. 按一下「確定」。

    Dreamweaver 將建立動態連結。在 XML 檔案中，每個連結元素均指向包含其對應菜單項目圖片的 HTML 頁面。

    注意

    若您開啟 specials.xml 檔案，並檢視程式碼，您將會發現每個 <link> 元素均包含含有其對應菜單項目圖片的 HTML 檔案名稱。事實上，這是通往 HTML 檔案的路徑，因為含有圖片的 HTML 頁面和您處理的 XSLT 頁面位於相同的 xml 目錄中。連結元素一直都是通往連結頁面的完整路徑，而且經常以 HTTP 位址的形式顯示。
  6. 儲存頁面，然後按 F12 (Windows) 或 Option + F12 (Macintosh)，在瀏覽器中預覽您的工作。

    瀏覽器將以即時連結顯示頁面。如果按一下連結，就會將您帶到新的頁面。


新增重複區域 XSLT 物件

「重複區域」XSLT 物件可讓您在網頁中顯示來自 XML 資料來源的重複元素。接下來，您將新增「重複區域」XSLT 物件至表格列，以在頁面上顯示多種特餐。

  1. 在「文件」視窗中，按一下包含 XML 資料預留位置表格列內部的任何一處。
  2. 在標籤選取器中，按一下最右邊的 <tr> 標籤，以選取表格列。
  3. 選取「插入＞XSLT 物件＞重複區域」。

  4. 在「XPath 運算式建立器」中，選取重複元素 menu_item。(重複元素已由小的加號符號指出)。

  5. 按一下「確定」。

    在「文件」視窗中，重複區域的四週會出現細細的灰色外框。(您將需要取消選取表格，才能看見它)。稍後，當您在瀏覽器中預覽工作時，灰色的外框將會消失，然後選取範圍會展開以顯示 XML 檔案中特定的重複元素。

    Dreamweaver 也會將 XML 資料預留位置的長度變短。這是因為 Dreamweaver 會更新 XML 資料預留位置的 XPath，以便使它能相對於重複元素的路徑。如需關於這個主題的詳細資訊，請參閱「使用 Dreamweaver」中的關於 XML 資料和重複元素。

  6. 儲存頁面，然後按 F12 (Windows) 或 Option + F12 (Macintosh)，在瀏覽器中預覽您的工作。

    瀏覽器現在會顯示展示出每個選單項目的頁面。


附加 XSLT 頁面至 XML 頁面

當您完成 XSLT 頁面後，請務必將其附加至 XML 頁面。當您使用 Dreamweaver 來附加頁面時，Dreamweaver 會在 XML 頁面頂端插入連至 XSLT 頁面的連結。

XML 頁面是網頁瀏覽者在線上檢視頁面時所瀏覽到的頁面。這是因為他們必須瀏覽到包含資料 (XML 檔案) 的「內容」頁面，而不是包含樣式 (XSLT 頁面) 的頁面。

注意

您用來進行用戶端變形的 XML 和 XSL 檔案，必須位於相同的目錄下。如果不是，瀏覽器將會讀取 XML 檔案，並尋找變形的 XSLT 頁面，但卻無法找到在 XSLT 頁面中相對連結所定義的資源 (樣式表、影像等)。
  1. 現在 xml_menu.xsl 頁面已在「文件」視窗中開啟，如果尚未開啟「繫結」面板的話，請使用「視窗＞繫結」將之開啟。
  2. 在「繫結」面板中，連按兩下 specials.xml 的「綱要」，以開啟 specials.xml 檔案。(您必須在這兩個字上按兩下，而不是按頁面圖示)。
  3. 選取「命令＞附加 XSLT 樣式表」。
  4. 在「附加 XSLT 樣式表」對話方塊中，按一下「瀏覽」按鈕，瀏覽至 xml_menu.xsl 頁面，然後選取並按一下「確定」。
  5. 按一下「確定」以關閉「附加 XSLT 樣式表」對話方塊。

    Dreamweaver 會將參考插入至 XML 文件上方的 XSLT 頁面。

  6. 儲存 specials.xml 頁面。
  7. 按 F12 (Windows) 或 Option + F12 (Macintosh)，以在瀏覽器中預覽 XML 頁面。

    瀏覽器將顯示這個 XML 頁面，並以您建立的 XSLT 頁面做為其樣式。

    請記住，一旦您將兩個頁面均部署至伺服器上，網站瀏覽者就會瀏覽到 XML 頁面 (而不是 XSLT 頁面)。如需詳細資訊，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的關於用戶端 XSL 變形。


了解其他部署選項

在本教學課程中，您將學習如何建立完整的 XSLT 頁面，以進行用戶端變形。您也可以使用完整的 XSLT 頁面進行伺服器端變形。使用完整的 XSLT 頁面進行伺服器端變形時，您必須以完全相同的方式來建立頁面。

一般執行伺服器端變形的方式，就是使用 XSLT 片段。XSLT 片段是獨立文件使用的程式碼，可以顯示格式化的 XML 資料。

如需關於完整 XSLT 頁面與 XSLT 片段的簡介，請參閱了解 XSLT 頁面。如需關於完整 XSLT 頁面與 XSLT 片段如何作用的詳細綜合概觀，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的關於伺服器端 XSL 變形。

如需教您關於處理 XSLT 片段的教學課程和其他資源，請至 www.macromedia.com/go/dw_xsl_tw。

下列是以 XSLT 頁面執行伺服器端變形的工作流程：

  • 設定 Dreamweaver 網站。請參閱「使用 Dreamweaver」中的設定 Dreamweaver 網站。
  • 選擇伺服器技術，並設定應用程式伺服器。請參閱「使用 Dreamweaver」中的設定應用程式伺服器。
  • 測試該應用伺服器以確認能正常運作。例如，建立一個要求處理的頁面，然後確定應用程式的確有處理該頁面。如需有關操作的教學課程，請瀏覽 www.macromedia.com/go/dw_xsl_tw。
  • 請執行下列其中一項作業：
    • 在您的 Dreamweaver 網站建立一個 XSLT 片段或完整的 XSLT 頁面。請參閱「使用 Dreamweaver」中的建立 XSLT 頁面。
    • 將現有的 HTML 頁面轉成完整的 XSLT 頁面。請參閱「使用 Dreamweaver」中的將 HTML 頁面轉換成 XSLT 頁面。
  • 如果程序尚未完成，請將 XML 資料來源附加至頁面。請參閱「使用 Dreamweaver」中的附加 XML 資料來源。
  • 將您的 XML 資料繫結至 XSLT 片段或完整的 XSLT 頁面。請參閱「使用 Dreamweaver」中的顯示 XSLT 頁面中的 XML 資料。
  • 如果適當的話，請新增「重複區域」XSLT 物件至包含 XML 資料預留位置的表格或表格列。請參閱「使用 Dreamweaver」中的顯示重複的 XML 元素。
  • 請執行下列其中一項作業：
    • 使用 XSL 變形伺服器行為以將參考資料插入至動態網頁的 XSLT 片段。請參閱「使用 Dreamweaver」中的在動態網頁中插入 XSLT 片段。
    • 刪除動態頁面中所有的 HTML 程式碼，然後使用「XSL 變形」伺服器行為，以將參考插入在動態頁面的完整 XSLT 頁面中。
  • 將動態網頁和 XSLT 片段 (或完整的 XSLT 頁面) 公佈到您的應用程式伺服器。如果您使用本機的 XML 檔案，您也需要將該檔案公佈出來。
  • 在瀏覽器中檢視動態網頁。當您這麼做時，應用程式伺服器會變形 XML 資料、將其插入動態頁面中，然後在瀏覽器中顯示。


教學課程：開發網路應用程式

在本教學課程中，您將學習如何使用 Macromedia Dreamweaver 8，快速啟動開發動態的資料庫驅動網路應用程式，讓您可以將資料庫資訊呈現在網頁上。

您將使用 Dreamweaver 提供的範例資料庫，在 Cafe Townsend 網站的網頁上顯示資料。您還將使用 Dreamweaver 建立一個插入記錄表單，供網頁瀏覽者留言。

在本教學課程中，您將會完成下列工作：

在您開始之前

檢視您的工作

開啟要使用的文件

定義資料集

顯示資料庫記錄

將動態欄位新增至表格

設定重複區域

檢視頁面

建立記錄插入表單

將檔案複製到伺服器

進階閱讀


在您開始之前

您必須先設定應用程式開發的 Dreamweaver 工作環境，才能完成本教學課程。如需設定資訊，請參閱下列清單中適合應用程式伺服器使用的設定章節。如果您不知道自己使用的應用程式伺服器，請洽系統管理員。

  • ColdFusion 範例網站的設定
  • ASP.NET 範例網站的設定
  • ASP 範例網站的設定
  • JSP 範例網站的設定
  • PHP 範例網站的設定

這些設定章節會教您如何完成下列工作：

  • 設定您的系統。
  • 設定 Dreamweaver 與選擇的應用程式伺服器一起使用。
  • 定義與資料庫的連結。

您必須完成這些工作，才能完成這個教學課程。

這個教學課程中的畫面範例顯示 Macromedia ColdFusion 對話方塊。但是您可以使用 Dreamweaver 支援的任何伺服器模式，完成這個教學課程。


檢視您的工作

您的工作是為 Cafe Townsend 網站建立下列動態網頁：

  • 一個能夠顯示資料庫現有意見的網頁。
  • 讓網頁瀏覽者傳送意見到公司 (然後儲存在資料庫) 的網頁。

讓 Cafe Townsend 員工檢視資料庫現有意見的網頁，看起來如下列範例：

讓網頁瀏覽者傳送意見的網頁，看起來如下列範例：


開啟要使用的文件

開始開發資料庫應用程式的較佳方式是先建立一個網頁，列出資料庫中儲存的記錄。您將在您在這個教學課程中建置的應用程式中建立一個動態網頁，列出由資料庫中的客戶意見表繪製的資訊。稍後，您將建立另一個動態網頁，讓客戶直接將意見或問題插入資料庫中。

讓我們先找到建立這些頁面時要使用的文件。

  1. 選取「視窗＞檔案」開啟「檔案」面板。

    「檔案」面板便會開啟。

  2. 在「網站」彈出式選單中，選取您在設定程序中定義的 Cafe Townsend 網站。

    如需詳細資訊，請參閱在您開始之前中列出的設定章節。

  3. 在「檔案」面板中，按兩下名為 view 的檔案開啟它。

    文件便會在「文件」視窗中開啟。

  4. 如果您現在正在「程式碼」檢視中檢視文件，請按一下「文件」工具列上的「顯示設計檢視」(標示為「設計」標籤) 或「顯示程式碼和設計檢視」(標示為「分割」標籤)；那麼當您完成教學課程時，便可以使用所提供的畫面範例做為檢查點。


定義資料集

現在您將建立資料集，選擇想要顯示的資料。資料集是藉由資料庫查詢，擷取自資料庫的一組資訊 (在 ASP.NET 中，資料集 (Recordset) 稱為資料集 (DataSet))。資料庫查詢是一種使用指定的搜尋條件向資料庫要求資料的方法，通常使用於 SQL 語言中。接下來，您將使用擷取的資料庫資訊，做為動態網頁的內容來源。

Dreamweaver 提供易於使用的介面，建立簡單的 SQL 查詢 (您不需要瞭解 SQL 就可以在 Dreamweaver 中建立資料集)。

您建立的資料集會選取教學課程資料庫 COMMENTS 表格中的所有值。

注意

您必須連接資料庫，才能完成這個程序。如需詳細資訊，請參閱在您開始之前。
  1. 使用 Dreamweaver 開啟 Cafe Townsend 文件之後，將插入點放在「客戶意見」標題底下。
  2. 請執行下列其中一項作業，開啟「資料集」(Recordset) 或「資料集」 (DataSet) 對話方塊 (ASP.NET)：
    • 在「插入」列的「應用程式」類別中，按一下「資料集」(在 ASP.NET 中為 Recordset) 或「資料集」(DataSet)。 這是描述功能的圖片。
    • 選取「視窗＞繫結」，開啟「繫結」面板，然後按一下加號 (+) 並選取「資料集」(在 ASP.NET 中為 Recordset) 或「資料集」(DataSet)。

    「資料集」(Recordset) 或「資料集」 (DataSet) 對話方塊 (ASP.NET) 便會出現。

    注意

    如果看到的對話方塊比前一個對話方塊複雜，請按一下「簡單」。
  3. 在「名稱」文字方塊中，輸入 rs_Comment。
  4. 在「資料來源」彈出式選單 (ColdFusion) 或「連線」彈出式選單 (其他伺服器頁面類型) 中，選取 connTownsend。

    「資料集」(Recordset) 或「資料集」(DataSet) 對話方塊便會更新為資料庫中的資料。

  5. 如果使用者名稱和密碼與資料來源或連線有關聯，請輸入之。如果您設定資料來源時並未提供使用者名稱或密碼，請讓這些方塊保持空白。
  6. 在「表格」彈出式選單中，保持選取 COMMENTS。
  7. 確定是在「欄」中選取「全部」，表示選取表格的所有欄。
  8. 讓「篩選」彈出式選單保持設定「無」，表示選取表格的所有列。
  9. 在第一個「排序」彈出式選單中選取 LAST_NAME，並在第二個彈出式選單中選取「遞增」。

    這個步驟指定根據客戶姓氏，按字母順序列出擷取的記錄。

  10. 按一下「測試」，測試資料集 (Recordset) 或資料集 (DataSet)。

    符合您資料集 (Recordset) 或資料集 (DataSet) 選取範圍準則的資料庫記錄，會出現在「測試 SQL 陳述式」視窗中。在這樣的情況下，您選取表格中的所有資料。

  11. 按一下「確定」關閉「測試 SQL 陳述式」視窗。
  12. 按一下「確定」關閉「資料集」(Recordset) 或「資料集」(DataSet) 對話方塊並且建立「資料集」(Recordset) 或「資料集」(DataSet)。

    資料集會在「繫結」面板中出現。「文件」視窗不變更。

    提示

    如果您在「繫結」面板中看不到所有資料集欄位，請按一下「資料集」(rs_Comment) 旁的加號 (+) (Windows) 或展開箭頭 (Macintosh)，展開資料集結構。


顯示資料庫記錄

接著，您將建立一個頁面，該頁面列出目前存在於 COMMENTS 表格中的記錄。您將動態地產生頁面，而不用手動輸入資訊。

首先，您先建立一張表格，建構該資料清單。

  1. 在 Cafe Townsend 文件中，將插入點放在「客戶意見」標題後的空白行上。
  2. 請使用下列其中一種方式插入表格：
    • 在「插入」列中選取「常用」類別，然後按一下「表格」按鈕 這是描述功能的圖片。 或將此按鈕拖曳到文件。
    • 選取「插入＞表格」。

    「表格」對話方塊便會出現。

  3. 在對話方塊中，設定下列選項：
    • 在「列」中，輸入 2。
    • 在「欄」中，輸入 4。
    • 將「表格寬度」保留 100 百分比的設定。
    • 讓「邊框粗細」保持設定 1。
    • 在「儲存格內距」中，輸入 2。
    • 在「儲存格間距」中，輸入 2。
    • 在「頁首」區段中，選取「上方」選項。

    在「摘要」文字方塊中提供類似下面的表格文字說明，方便瀏覽者使用螢幕讀取器時瞭解內容：

    這個表格列出網頁瀏覽者在資料庫中輸入的所有意見。

    完成的對話方塊應該看起來如下列範例：

  4. 按一下「確定」。

    表格便會插入文件中。

  5. 在表格第一列中，新增表格項目的標籤：
    • 在表格的第一儲存格中，輸入 FIRST_NAME。
    • 在下一個儲存格中，輸入 LAST_NAME。
    • 在下一個儲存格中，輸入 EMAIL。
    • 在下一個儲存格中，輸入 COMMENTS。
  6. 儲存您的頁面。


將動態欄位新增至表格

現在您已準備好將記錄集欄位新增至表格。

  1. 執行下列其中一項作業，開啟「繫結」面板 (如果它尚未開啟)。
    • 選取「視窗＞繫結」。
    • 按一下「應用程式」面板群組的展開箭頭，然後選取「繫結」面板。
  2. 執行下列其中一項作業，新增 FIRST_NAME 欄位至表格中。
    • 將插入點放在「名字」標籤下方的表格儲存格，然後在「繫結」面板中選取 FIRST_NAME，再按一下「插入」。
    • 將「繫結」面板中的 FIRST_NAME，拖曳到「名字」標籤的下方的表格儲存格。
  3. 重複步驟 2，將 LAST_NAME、EMAIL 和 COMMENTS (非 COMMENT_ID) 新增至表格。

    您的表格應該看起來類似下列範例。您可能要放寬「文件」視窗，才能看到整個表格。

  4. 儲存您的頁面。


設定重複區域

您建立的表格只包含一列資料。若要看到所有記錄，需要將表格列設定成重複區域。在瀏覽器中檢視表格時，每個符合資料集搜尋條件的記錄有一列。

  1. 在「文件」視窗中，執行下列其中一項作業，選取表格最後一列：
    • 按一下其中一個儲存格，然後在標籤選取器中，按一下清單中的最後一個 <tr> 標籤。
    • 將指標放在表格列的左側，當它變為向右箭頭時，按一下表格列的邊框，選取該列。
  2. 請使用下列其中一種方式建立重複區域：
    • 在「伺服器行為」面板中，按一下加號 (+)，然後選取「重複區域」。
    • 在「插入」列的「應用程式」類別中，按一下「重複區域」。
    • 選取「插入＞應用程式物件＞重複區域」。

    「重複區域」對話方塊便會出現。

  3. 在對話方塊中按一下「確定」，表示接受預設設定。

    表格列的四週會出現外框，外框左上方出現的索引標籤表示這是重複區域 (索引標籤的標籤因您使用的伺服器技術而異)。

  4. 儲存您的頁面。


檢視頁面

接著，您將檢視頁面。若要在Dreamweaver 中檢視經過伺服器處理後的頁面外觀，可以使用「即時資料」檢視。

在 Cafe Townsend 文件呈作用中狀態時，執行下列其中一項作業，檢視頁面資料：

  • 在「文件」工具列中，按一下「即時資料檢視」。 這是描述功能的圖片。
  • 選取「檢視＞即時資料」。

    頁面更新顯示從資料庫中解開的資料。


建立記錄插入表單

接著您要為 Cafe Townsend 網站建立一個能讓客戶在資料庫中新增意見的頁面。

Dreamweaver 包括一些應用程式物件，可協助您快速輕鬆地建立網路應用程式頁面。您將使用應用程式物件，建立插入頁面。「插入記錄」應用程式物件藉由建立 HTML 表單、對應到資料庫欄位的資料欄位和必要的伺服器 Script，建立動態網頁。

本節包含下列主題：

  • 新增記錄插入表單應用程式物件
  • 建立插入表單


新增記錄插入表單應用程式物件

您可以使用「記錄插入表單」應用程式物件，建立一個能讓使用者在資料庫中輸入資料的表單。應用程式物件讓您選取包含在表單中的欄位、設定欄位標籤，並選取要插入的表單物件類型。當使用者在表單欄位內輸入資料並按一下送出按鈕時，一筆新記錄便會插入資料庫中。您也可以在成功地送出一筆記錄之後，設定將開啟的頁面，如此一來，送出者就知道資料庫已更新。

  1. 在「檔案」面板中，找到檔名為 send 的檔案，然後按兩下檔案開啟它。

    文件便會在「文件」視窗中開啟。

  2. 將插入點放在含有段落之表格列下方的空白表格列。

    應用程式物件便會插入到空白列。

  3. 若要在頁面上新增記錄插入物件，請執行下列其中一項作業：
    • 在「插入」列的「應用程式」類別中，選取「插入記錄」彈出式選單中的「插入記錄表單精靈」 這是描述功能的圖片。 。
    • 選取「插入＞應用程式物件＞插入記錄＞記錄插入表單精靈」。

    「記錄插入表單」對話方塊便會出現。

  4. 在「資料來源」(ColdFusion) 或「連線」彈出式選單中，選取 connTownsend。
  5. 如果使用者名稱和密碼與資料來源或連線有關聯，請輸入之。

    如果您設定資料來源或連線時並未提供使用者名稱或密碼，請讓這些方塊保持空白。.

  6. 在「表格」彈出式選單中，確定 COMMENTS 已選取。
  7. 按一下「插入後，請前往」或「如果成功，請前往」(ASP.NET) 文字方塊旁的「瀏覽」按鈕。
  8. 在出現的對話方塊中，選取名為 view 的檔案，然後按一下「確定」，關閉對話方塊。

    為了測試，在輸入意見後，您會想要看到顯示所有意見的頁面。測試網路應用程式之後，請變更此設定，以顯示感謝瀏覽者意見的頁面。

  9. 遵循下一節的程序，完成精靈的其餘部分。
  10. 遵循建立插入表單的程序，完成精靈的其餘部分。


建立插入表單

在「記錄插入表單精靈」的「表單欄位」區段中，定義瀏覽者要輸入資料的表單。

  1. 在「記錄插入表單精靈」中執行下列作業，移除不希望包含在表單內的欄位：
    • 選取 COMMENT_ID，然後按一下「減號」(-)。
    • 選取 TELEPHONE，然後按一下「減號」(-)。
    • 選取 SUBMIT_DATE，然後按一下「減號」(-)。
    • 選取 ANSWERED，然後按一下「減號」(-)。
  2. 如果您建立 ASP.NET 的頁面，請依照下列步驟變更表單欄位的字母順序：
    • 在「欄」清單中，選取 COMMENTS，然後按一下向下鍵，將 COMMENTS 置於 LAST_NAME 下方。
    • 在「欄」清單中，選取 EMAIL，然後按一下向下鍵，將 EMAIL 置於 LAST_NAME 下方。
  3. 在「表單欄位」清單中，選取 FIRST_NAME，指定欄位在表單中顯示的方式。
  4. 在「標籤」文字方塊中鍵入 First Name，取代預設文字。

    這是將出現在文字方塊旁 HTML 表單中的標籤。

  5. 依照下列步驟為欄位設定表單物件類型：
    • 如果您使用 ASP.NET，請在「顯示為」彈出式選單中接受預設值「文字欄位」，並在「送出為」彈出式選單中將預設值 WChar 變更為 VARCHAR。
    • 如果您不是使用 ASP.NET 伺服器技術，請在「顯示為」彈出式選單中接受預設值「文字欄位」，並在「送出為」彈出式選單中接受預設值「文字」。
  6. 讓「預設值」欄位保持空白。

    在某些網路應用程式中，您可能想使用這個欄位設定欄位的起始文字，讓使用者知道應提供何種資訊。這裡的欄位標籤「名字」，明確指出使用者應該輸入自己的名字。

    完成時，FIRST_NAME 項目應該看起來像下列範例：

  7. 對 LAST_NAME 表單欄位重複執行步驟 3 到 6，這個欄位的標籤是「LAST_NAME:」，顯示為「文字欄位」，送出為「文字」。
  8. 對 EMAIL 表單欄位重複執行步驟 3 到 6，這個欄位的標籤是 「EMAIL:」，顯示為「文字欄位」，送出為「文字」。
  9. 在「表單」欄位清單中，選取 COMMENTS。
  10. 在「標籤」欄位中，輸入 Comments。
  11. 請執行下列其中一項作業，為「意見」表單欄位設定表單物件類型：
    • 如果您使用 ASP.NET，請在「顯示為」彈出式選單中選取「文字區域」，然後在「送出為」彈出式選單中選取 VARCHAR。
    • 如果您不是使用 ASP.NET 伺服器技術，請在「顯示為」彈出式選單中選取「文字區域」，然後在「送出為」彈出式選單中接受預設值「文字」。

    完成時，對話方塊應該看起來像下列的範例：

  12. 按一下「確定」關閉對話方塊並且建立記錄插入表單。

    「記錄插入表單」應用程式物件便會插入文件中。

  13. 儲存您的頁面。


將檔案複製到伺服器

接下來，要將更新過的檔案複製到伺服器上。複製檔案後，您可以檢視插入記錄頁面、新增意見或問題，並送出資料測試應用程式。

  1. 在「檔案」面板中，在名為 view 和 send 的檔案上用 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh)，然後按一下藍色「上傳檔案」箭頭圖示，將檔案上傳到伺服器。
  2. 如果 Dreamweaver 詢問您是否要將相關檔案複製到伺服器，請選取「是」。

    注意

    在有些伺服器模式下，Dreamweaver 會在本機資料夾中建立 Connections 資料夾。您也必需將該資料夾複製到您的遠端伺服器，讓網路應用程式可以執行。在「檔案」面板中，選取 Connections 資料夾，然後按一下「上傳檔案」將資料夾複製到伺服器。
  3. 當名為 send 的檔案作為作用中文件時，選取「檔案＞在瀏覽器中預覽」，或按 F12 鍵在瀏覽器中檢視頁面。
  4. 在表單中輸入測試資料，然後按一下文件中的「插入記錄」，將資料送出。

    應用程式伺服器會接收所送出的資訊、更新資料庫，然後顯示已更新的意見頁。


進階閱讀

這個教學課程提供資訊，說明您可以用來建立動態、資料驅動頁面的小型工具組。您已了解如何建立資料集，定義要在網站使用的資料，也已經使用 Dreamweaver 應用程式物件，建立了可與資料庫儲存的資料互動的有效網路應用程式。

如需有關如何開發網路應用程式的詳細資訊，請參閱「使用 Dreamweaver」中的下列主題：

  • 取得網頁的資料
  • 定義動態內容的來源
  • 新增動態內容到網頁
  • 顯示資料庫記錄


了解網路應用程式

網路應用程式是一組網頁，可以與使用者、本身的網頁以及網站伺服器上的各種資源 (包括資料庫) 互動。在開始建立自己的網路應用程式前，您應該要對本章所討論的概念有相當的認識。

本章包含下列主題：

關於網路應用程式

網路應用程式的運作方式

撰寫動態網頁

選擇伺服器技術

網路應用程式詞彙


關於網路應用程式

網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部都尚未決定。只有在使用者向網站伺服器要求網頁時，網頁的最後內容才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結果都不同，所以這種網頁便稱為動態網頁。

建立網路應用程式時，必須考慮到各種需要和問題。本節說明網路應用程式的常見用法，並提供一個簡單的範例。


網路應用程式的常見用法

網頁瀏覽者和開發人員應用網路應用程式的方法很多，其中包括：

  • 讓使用者在內容豐富的網站上輕鬆快速地找到資訊。

    這類型的網路應用程式可以根據使用者的需求，為使用者提供搜尋、組織和導覽內容的功能。範例包括公司的內部網路、Microsoft MSDN (www.msdn.microsoft.com) 和 Amazon.com (www.amazon.com)。

  • 收集、儲存和分析網站使用者所提供的資料。

    在過去，在 HTML 表格中輸入的資料是透過電子郵件傳送給員工，或以 CGI 應用程式的形式處理。網路應用程式可以將表格資料直接儲存到資料庫，還可以將資料擷取出來，建立網站報告以提供分析。常見的範例包括網路銀行網頁、商店的結帳網頁、意見調查和使用者意見表格等。

  • 更新經常變更內容的網站

    網路應用程式可以除去網頁設計師需要經常更新網站之 HTML 的負擔。如新聞編輯人員之類的內容提供者可以為網路應用程式提供內容，而網路應用程式即可自動更新網站。範例包含 Economist (www.economist.com) 和 CNN (www.cnn.com)。


網路應用程式範例

小珍是長時間使用 Dreamweaver 的專業網頁設計師，她負責為一家擁有 1000 名員工的中等規模公司維護其內部網路和網際網路網站。有一天，人力資源部門的王先生來向她請教一個問題。人力資源正在執行一項員工健康方案，不論是走路、騎腳踏車或跑步，員工所運動的每公里都可獲得點數。每個員工都必須用電子郵件將每月運動的里程數報告給王先生。每個月的月底，王先生會收集所有的電子郵件，並根據員工的總點數，提供小額的現金獎勵給員工。

王先生的問題是這項健康方案太過熱門，參加的員工數量太龐大，現在每到月底，王先生的信箱都快被蜂擁而來的電子郵件塞爆了。王先生問小珍有沒有可用的網路解決方案。

小珍建議他使用可執行下列工作的內部網路應用程式：

  • 讓員工在網頁上使用簡單的 HTML 表格輸入運動里程數
  • 將員工的里程數儲存在資料庫內
  • 根據里程數資料計算健康點數
  • 讓員工追蹤每月進度
  • 讓王先生在每月月底只要按一下便可以看到總點數

小珍在中午前靠 Dreamweaver 的工具，便輕鬆快速地建好了應用程式並開始執行。


網路應用程式的運作方式

網路應用程式是靜態和動態網頁的集合。靜態網頁不因網站使用者要求而變更：網站伺服器會直接將網頁傳送到要求的網頁瀏覽器而不修改。相反地，「動態網頁」在傳送到要求的瀏覽器前，會由伺服器進行修改。因為網頁會變更，所以才稱為動態。

例如，您可以設計顯示健康結果的網頁，並將某些資訊 (例如員工名稱和結果) 留到特定員工要求該網頁時才決定。

本節包含下列主題：

  • 處理靜態網頁
  • 處理動態網頁
  • 存取資料庫


處理靜態網頁

靜態的網站是由一組相關的 HTML 網頁和檔案 (存放在執行網站伺服器的電腦上) 所組成。

網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。當使用者在網頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文字方塊中輸入 URL 時，便會產生網頁要求。

靜態網頁的最後內容是由網頁設計師決定，不會在要求網頁時變更。以下是一個範例：

<html>
   <head>
      <title>Trio Motors Information Page</title>
   </head>
   <body>
      <h1>About Trio Motors</h1>
      <p>Trio Motors is a leading automobile manufacturer.</p>
   </body>
</html>

這個網頁的 HTML 程式碼的每一行都是由設計師所撰寫，然後才被放到伺服器上。因為 HTML 一旦放到伺服器上後就不會變更，所以這類網頁又稱為靜態網頁。

注意

嚴格說來，「靜態」網頁並不是靜態。例如，滑鼠變換影像或 Flash 內容 (SWF 檔案) 都會使靜態網頁變得活靈活現。不過，只要是在傳送到瀏覽器時沒有經過修改的網頁，這本手冊便將它稱為靜態網頁。

當網站伺服器接到靜態網頁的要求時，伺服器會讀取要求、找到網頁，然後將它傳送到要求的瀏覽器，如下圖所示：

以網路應用程式的例子而言，當使用者要求網頁時，某些特定的程式碼行是未決定的。將網頁傳送到瀏覽器前，您必須使用某些機制決定這些程式碼行。下一節中將討論這個機制。


處理動態網頁

當網站伺服器收到靜態網頁的要求時，伺服器會直接將網頁傳送到要求的瀏覽器。當網站伺服器收到動態網頁的要求時，卻會有不同的反應：它會將網頁傳送到負責完成網頁的特定軟體，這個特殊軟體稱為應用程式伺服器。

應用程式伺服器會讀取網頁上的程式碼、根據程式碼中的指示完成網頁，然後再將程式碼從網頁移除。然後應用程式伺服器會將靜態網頁傳回網站伺服器，後者則將該網頁傳送到要求的瀏覽器。瀏覽器在網頁到達時所取得的資料是純粹的 HTML。下面是處理過程的檢視：


存取資料庫

應用程式伺服器可以讓您使用資料庫之類的伺服器端資源，例如，動態網頁可以指示應用程式伺服器從資料庫擷取資料，並將其插入網頁的 HTML 中。如需詳細資訊，請參閱「使用 Dreamweaver」中的資料庫入門手冊。

從資料庫擷取資料的指示稱為資料庫查詢。查詢是由搜尋準則所組成，這些準則是以稱為 SQL (結構化查詢語言) 的資料庫語言表達。SQL 查詢會被寫入網頁的伺服器端 Script 或標籤。

應用程式伺服器無法直接與資料庫溝通，因為資料庫的專用格式會使資料變得無法辨認，就像在「記事本」或 BBEdit 中開啟 Word 文件會使文件變得無法辨認一樣。應用程式伺服器只能經由資料庫驅動程式這個媒介才能與資料庫進行溝通：資料庫驅動程式是軟體，作用就像應用程式伺服器和資料庫之間的解譯器。

驅動程式建立了通訊後，便可以針對資料庫進行查詢並建立資料集。資料集是從資料庫中的一或多個表格中擷取出的一組資料。資料集會傳回至應用程式伺服器，而伺服器會使用資料以完成動態網頁。

以下是一個以 SQL 所寫成的簡單資料庫查詢：

SELECT lastname, firstname, fitpoints
FROM employees

這個陳述式會建立一個三欄的資料集，並將資料庫中所有員工的姓、名和健康點數等列填入。如需詳細資訊，請參閱「使用 Dreamweaver」中的SQL 入門。

以下是查詢資料庫並將資料傳回瀏覽器的程序說明：

您的網路應用程式幾乎可以使用任何的資料庫，只要伺服器上安裝了適當資料庫驅動程式即可。

如果您計劃建立小型廉價的應用程式，可以使用以檔案為主的資料庫，例如以 Microsoft Access 建立的資料庫。如果您計劃建立商務關鍵性的完整應用程式，可以使用伺服器架構的資料庫，例如以 Microsoft SQL Server、Oracle 9i 或 MySQL 建立的資料庫。

如果存放資料庫的系統不是您的網站伺服器，請確定這兩個系統之間的連線速度夠快，這樣網路應用程式才能快速而有效地運作。


撰寫動態網頁

動態網頁的撰寫包含下列事項：先撰寫 HTML、然後在 HTML 中加入伺服器端 Script 或標籤，使網頁變成動態。當您檢視產生的程式碼時，該語言會以內嵌的形式出現在網頁的 HTML 中，所以這些語言被稱為 HTML 內嵌程式語言。下列基本範例使用的是「ColdFusion 標記語言」(CFML)：

<html>
   <head>
      <title>Trio Motors Information Page</title>
   </head>
   <body>
      <h1>About Trio Motors</h1>
      <p>Trio Motors is a leading automobile manufacturer.</p>
      <!--- embedded instructions start here --->
      <cfset department="Sales">
      <cfoutput>
      <p>Be sure to visit our #department# page.</p>
      </cfoutput>
      <!--- embedded instructions end here --->
   </body>
</html>

這個網頁上的內嵌指示會執行下列動作：

  1. 建立稱為 department 的變數，並將字串 "Sales" 指定給它。
  2. 在 HTML 程式碼中插入變數的值 "Sales"。

應用程式伺服器會將下列網頁傳回網站伺服器：

<html>
   <head>
      <title>Trio Motors Information Page</title>
   </head>
   <body>
      <h1>About Trio Motors</h1>
      <p>Trio Motors is a leading automobile manufacturer.</p>
      <p>Be sure to visit our Sales page.</p>
   </body>
</html>

網站伺服器會將網頁傳送給要求的瀏覽器，後者會將其顯示為：

About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

您需要視伺服器上提供的伺服器技術，選擇要使用的 Script 或標籤語言。以下是 Dreamweaver 所支援的五種伺服器技術最常用的語言：

伺服器技術 | 語言
ColdFusion | ColdFusion 標記語言 (CFML)
ASP.NET | Visual Basic C#
Active Server Pages (ASP) | VBScript JavaScript
Java Server Pages (JSP) | Java
PHP | PHP

如需詳細資訊，請參閱選擇伺服器技術。

Dreamweaver 可以建立網頁運作時必要的伺服器端 Script 或標籤，或者您也可以在 Dreamweaver 程式碼環境中自行撰寫。


選擇伺服器技術

您可以使用 Dreamweaver，應用五種伺服器技術建立網路應用程式：ColdFusion、ASP.NET、ASP、JSP 或 PHP。每種技術在 Dreamweaver 中都有相對應的文件類型。為網路應用程式選擇技術時必須考慮幾種因素，包括您對各種 Script 語言的熟悉程度以及您計劃使用的應用程式伺服器。

如果您不熟悉網路應用程式開發或一般的應用程式開發，您可能會偏好 ColdFusion，因為它提供容易學習的伺服器 Script 環境，可與 Dreamweaver 密切整合。如果您熟悉其他伺服器技術，例如 JSP、PHP、ASP，或 ASP.NET，Dreamweaver 也提供很好的支援。

選擇伺服器技術還要視您計劃用於網路應用程式的應用程式伺服器而定。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。例如，如果您有 ColdFusion MX 7 Server，便可以選擇 ColdFusion 做為伺服器技術。如果您存取使用 .NET Framework 執行 Microsoft Internet Information Server 5 (IIS) 的伺服器，您可以選擇 ASP.NET。如果您存取具有 PHP 應用程式伺服器的網站伺服器，便可選擇 PHP；如果您存取具有 JSP 應用程式伺服器 (例如 Macromedia JRun) 的網站伺服器，便可選擇 JSP。

ColdFusion MX 7 開發人員版可從 Dreamweaver CD （僅限於 Windows 版) 以及 Macromedia 網站上取得，網址為 www.macromedia.com/go/coldfusion/。

如需詳細資訊，請參閱「使用 Dreamweaver」中的設定應用程式伺服器。

若要了解更多有關 ColdFusion 的資訊，請從「說明」選單中選取「使用 ColdFusion」。

若要了解更多有關 ASP.NET 的資訊，請造訪 Microsoft 網站，網址是 http://msdn.microsoft.com/asp.net/。

若要了解更多有關 ASP 的資訊，請造訪 Microsoft 網站，網址是 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/activeservpages.asp。

若要了解更多有關 JSP 的資訊，請造訪 Sun Microsystems 網站，網址是 java.sun.com/products/jsp/。

若要了解更多有關 PHP 的資訊，請造訪 PHP 網站，網址是 www.php.net/。


網路應用程式詞彙

本節定義網路應用程式相關的常用詞彙。

應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。從伺服器要求這種網頁時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送給瀏覽器。如需詳細資訊，請參閱網路應用程式的運作方式。

常見的應用程式伺服器包括 Macromedia ColdFusion、Macromedia JRun Server、Microsoft .NET Framework、IBM WebSphere 和 Apache Tomcat。

資料庫是存放在表格中的資料集合。表格的每一列構成一筆記錄，而每一欄構成記錄中的欄位，如下列範例所顯示。

資料庫驅動程式是一種軟體，作用就像網路應用程式和資料庫之間的解譯器。資料庫中的資料是以專用格式儲存的。資料庫驅動程式可以讓網路應用程式讀取和操作無法用其他方式解讀的資料。

資料庫管理系統 (DBMS 或稱資料庫系統) 是用來建立和操作資料庫的軟體。常見的資料庫系統包括 Microsoft Access、Oracle 9i 和 MySQL。

資料庫查詢是從資料庫擷取資料集的作業。查詢是由搜尋準則所組成，這些準則是以稱為 SQL 的資料庫語言來表示。例如，查詢可以指定資料集內只能包含特定的欄或記錄。

動態網頁是在頁面傳送至瀏覽器前，由應用程式伺服器所自訂的網頁。如需詳細資訊，請參閱網路應用程式的運作方式。

資料集是從資料庫中的一或多個表格中擷取出的一組資料，如下列範例所示：

關聯式資料庫是包含多個表格並會在表格間共用資料的資料庫。下列資料庫是關聯式的，因為兩個表格共用 DepartmentID 欄。

伺服器技術是應用程式伺服器用來在執行階段修改動態網頁的技術。

Dreamweaver 開發環境支援下列伺服器技術：

  • Macromedia ColdFusion
  • Microsoft ASP.NET
  • Microsoft Active Server Pages (ASP)
  • Sun Java Server Pages (JSP)
  • PHP：Hypertext Preprocessor (PHP)

您也可以使用 Dreamweaver 編碼環境，開發未列於此處的其他伺服器技術的網頁。

靜態網頁是在頁面傳送至瀏覽器前，不會由應用程式伺服器修改的網頁。如需詳細資訊，請參閱處理靜態網頁。

網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部都尚未決定。這些網頁的最後內容只有在使用者向網站伺服器要求網頁時，才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結果都不同，所以這種網頁便稱為動態網頁。

網站伺服器是會對網頁瀏覽器的要求做出回應而傳送網頁的軟體。當使用者在瀏覽器中的網頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文字方塊中輸入 URL 時，便會產生網頁要求。

常見的網站伺服器包括 Microsoft Internet Information Server、Microsoft Personal Web Server、Apache HTTP Server、Netscape Enterprise Server 和 Sun ONE Web Server。


安裝網站伺服器

若要開發並測試動態網頁，您需要可運作的網站伺服器。本章說明大多數的 Windows 使用者如何在本機電腦上安裝並使用 Microsoft 網站伺服器。

如果 Windows 使用者要開發 ColdFusion 網站，則可以使用 Macromedia ColdFusion MX 7 應用程式伺服器的開發人員版中所包含的網站伺服器，開發人員版是可供免費安裝及使用的。如需詳細資訊，請參閱 ColdFusion 範例網站的設定。

如果是 Macintosh 使用者，則可以使用網路電腦上或虛擬主機公司提供的網站伺服器。如果要開發 PHP 應用程式，則可以使用已經安裝於 Macintosh 上的 Apache 網站伺服器。

本章包含下列各節：

入門

安裝 Internet Information Server

測試 IIS

測試 Macintosh 網站伺服器 (PHP 開發人員)

網站伺服器基本資訊

注意

Macromedia 不提供協力廠商軟體 (如 Microsoft Internet Information Server) 的技術支援。如果您需要 Microsoft 產品協助，請聯絡 Microsoft 技術支援。


入門

如果您是 Windows 使用者，可以在系統上安裝並執行 Internet Information Server (IIS)。您還可以在網路的 Windows 電腦上安裝網站伺服器，讓開發小組中的其他成員一起使用。

如果 Windows 使用者要開發 ColdFusion 應用程式，則也可以使用 ColdFusion MX 7 開發人員版所安裝的網站伺服器。如需詳細資訊，請參閱 ColdFusion 範例網站的設定。

您的電腦上可能已經安裝了 IIS。請檢查您的資料夾結構，看它是否包含 C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。

如果此資料夾不存在，請安裝 IIS。如需詳細資訊，請參閱安裝 Internet Information Server。

有興趣開發 PHP 應用程式的 Macintosh 使用者，則可以使用已經安裝於 Macintosh 上的 Apache 網站伺服器。如需詳細資訊，請參閱測試 Macintosh 網站伺服器 (PHP 開發人員)。

相關主題

  • 網站伺服器基本資訊


安裝 Internet Information Server

Windows 2000 和 Windows XP Professional 使用者應該安裝 Internet Information Server (IIS)。

如果您使用的是 Windows 2000 或 Windows XP Professional，請確定系統上已經安裝並執行了 IIS。執行這項作業的方法是尋找 C:\Inetpub 資料夾。如果資料夾不存在，表示系統上可能沒有安裝 IIS。

若要在 Windows 2000 和 XP Professional 上安裝 IIS：

  1. 選取「開始＞設定＞控制台＞新增/移除程式」，或「開始＞控制台＞新增/移除程式」。
  2. 選取「新增/移除 Windows 元件」。
  3. 選取「Internet Information Services (IIS)」，然後按一下「下一步」。
  4. 依照安裝說明執行。

您可以在安裝網站伺服器後進行測試。請參閱測試 IIS。

相關主題

  • 網站伺服器基本資訊


測試 IIS

若要測試網站伺服器，請建立稱為 myTestFile.html 的簡單 HTML 頁面，並將其儲存於網站伺服器所執行電腦的 Inetpub\wwwroot 資料夾。這個 HTML 頁面可以只有一行，如：

<p>My web server is working.</p>

接下來，請透過 HTTP 要求在網頁瀏覽器中開啟測試頁面。如果正在本機電腦上執行 IIS，請在網頁瀏覽器中輸入下列 URL：

http://localhost/myTestFile.html

如果正在網路電腦上執行 IIS，請用網路電腦的名稱當做網域名稱。例如，如果執行 IIS 的電腦名稱是 rockford-pc，請在瀏覽器中輸入下列 URL：

http://rockford-pc/myTestFile.html

注意

如需關於電腦名稱的詳細資訊，請參閱網站伺服器基本資訊。

如果瀏覽器顯示您的網頁，表示網站伺服器運作正常。

如果瀏覽器無法顯示網頁，請確定伺服器是否有執行。如果仍然無法開啟頁面，請確定測試頁面位於 Inetpub\wwwroot 資料夾中，且副檔名為 .htm 或 .html。


測試 Macintosh 網站伺服器 (PHP 開發人員)

您可以使用 Macintosh 上已安裝的 Apache 網站伺服器，開發 PHP 應用程式。

若要測試伺服器，請建立稱為 myTestFile.html 的簡單 HTML 頁面，並將其儲存於 Macintosh 上的 /Users/your_user_name/Sites/ 資料夾 (其中 your_user_name 是您的 Macintosh 使用者名稱)。這個 HTML 頁面可以只有一行，如：

<p>My web server is working.</p>

接下來，請在網頁瀏覽器中輸入下列 URL，以透過 HTTP 要求在網頁瀏覽器中開啟測試頁面：

http://localhost/~your_user_name/myTestFile.html

注意

依預設值，Apache 伺服器會執行於連接埠 80。

如果瀏覽器顯示您的網頁，表示網站伺服器運作正常。如果瀏覽器顯示無法顯示網頁，請開啟「系統偏好設定」查看「共用偏好設定」面板，確定已啟動網站伺服器。「個人網路共用」選項應該會啟用。

Apache 網站伺服器預設不使用 PHP，您必須設定才能使用。如需詳細資訊，請參閱設定系統 (PHP)。


網站伺服器基本資訊

網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。網站伺服器有時稱為 HTTP 伺服器。

假設您使用 IIS 來開發網路應用程式。網站伺服器的預設名稱是電腦的名稱。您可以變更電腦名稱以變更伺服器名稱。如果您的電腦沒有名稱，伺服器會使用 localhost 這個字。

伺服器名稱對應到伺服器的根資料夾，如果在 Windows 電腦上，通常是 C:\Inetpub\wwwroot。您可以在電腦上執行的瀏覽器中輸入下列 URL，開啟任何儲存在根資料夾內的網頁：

http://your_server_name/your_file_name

例如，如果伺服器名稱是 mer_noire，而 C:\Inetpub\wwwroot\ 中儲存了稱為 soleil.html 的網頁，則您可以在本機電腦上執行的瀏覽器中輸入下列 URL，開啟該網頁：

http://mer_noire/soleil.html

注意

請記得 URL 是使用正斜線，而非反斜線。

您也可以在 URL 中指定子資料夾，開啟儲存在根資料夾子資料夾內的任何網頁。例如，假設 soleil.html 檔案是儲存在稱為 gamelan 的子資料夾中，如下所示：

C:\Inetpub\wwwroot\gamelan\soleil.html

您可以在電腦上執行的瀏覽器中輸入下列 URL，開啟這個網頁：

http://mer_noire/gamelan/soleil.html

當網站伺服器在電腦上執行時，您可以用 localhost 取代伺服器名稱。例如，下列 URL 會在瀏覽器中開啟相同的網頁：

http://mer_noire/gamelan/soleil.html

http://localhost/gamelan/soleil.html

注意

除了伺服器名稱或 localhost 以外，另一項您可以使用的表示法是 127.0.0.1 (例如，http://127.0.0.1/gamelan/soleil.html)。

相關主題

  • 安裝 Internet Information Server
  • 測試 IIS
  • 測試 Macintosh 網站伺服器 (PHP 開發人員)


ColdFusion 範例網站的設定

Macromedia Dreamweaver 8 隨附有 ColdFusion 頁面，可以讓您建立小型的網路應用程式。本章描述如何設定範例應用程式。

設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義 Dreamweaver 網站。第三，將應用程式連結到資料庫。這本設定手冊依照這三個步驟進行。

本章包含下列各節：

ColdFusion 開發人員的設定檢查清單

設定系統 (ColdFusion)

定義 Dreamweaver 網站 (ColdFusion)

連線到範例資料庫 (ColdFusion)


ColdFusion 開發人員的設定檢查清單

若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中詳細描述。

設定系統：

  1. 安裝 ColdFusion 應用程式伺服器 (包含網站伺服器)。
  2. 建立根資料夾。

定義 Dreamweaver 網站：

  1. 複製範例檔案到硬碟上的資料夾。
  2. 將資料夾定義為 Dreamweaver 本機資料夾。
  3. 將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
  4. 指定要處理動態頁面的資料夾。
  5. 上傳範例檔案到網站伺服器。

連線到資料庫：

  1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。
  2. 在 Dreamweaver 中建立連線。

相關主題

  • 設定系統 (ColdFusion)
  • 定義 Dreamweaver 網站 (ColdFusion)
  • 連線到範例資料庫 (ColdFusion)


設定系統 (ColdFusion)

本節針對兩種常用的系統設定提供指示：其中一種是將 ColdFusion 安裝於您的硬碟上，而另一種是將 ColdFusion 安裝於遠端的 Windows 電腦上。若要使用不同的設定，請參閱「使用 Dreamweaver」中的設定網路應用程式。

下圖顯示本節所描述的兩種設定：

針對 Windows 使用者的本機設定，以及針對 Macintosh 及 Windows 使用者的遠端伺服器設定。

若要設定您的系統：

  1. 安裝 ColdFusion 應用程式伺服器 (請參閱安裝 ColdFusion MX 7)。
  2. 建立根資料夾 (請參閱建立根資料夾)。

    注意

    安裝應用程式伺服器是只需做一次即可的工作。


安裝 ColdFusion MX 7

若要處理動態網頁，則需要網站伺服器和應用程式伺服器。這兩種 ColdFusion MX 7 都有提供。網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。當瀏覽器要求這類網頁時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送網頁給瀏覽器。如需詳細資訊，請參閱了解網路應用程式。

您可以從 Macromedia 網站下載及安裝功能齊全的 ColdFusion MX 7 開發人員版，網址為 www.macromedia.com/go/coldfusion/。確定您選取 Windows 版本的 ColdFusion MX 7 開發人員版。Dreamweaver CD (僅限於 Windows 版) 中也有提供 ColdFusion MX 7 開發人員版。

注意

您也可以將 ColdFusion 安裝在執行 J2EE 伺服器 (例如 JRun 或 Tomcat) 的 Mac OS X 電腦上。如需詳細資訊，請參閱 Macromedia 網站，網址是 www.macromedia.com/go/cfmx7_mac。不過，安裝程序很複雜，目前還沒有在 Macintosh 上利用 ColdFusion 測試 Dreamweaver。此外，Macintosh 上的 ColdFusion 可能不易連接諸如 MySQL 的資料庫伺服器。

若要安裝 ColdFusion MX 7：

  1. 如果可以，請使用「管理員」使用者帳號登入 Windows 系統。
  2. 關閉所有開啟的應用程式。
  3. 按兩下 ColdFusion MX 7 安裝程式檔。
  4. 依照螢幕上的指示執行。

    安裝精靈中的部份螢幕已包含清楚的指示。然而，對於下列螢幕，請選取下列選項：

    • 在 Installer Configuration「安裝程式設定」螢幕上，請選取Server Configuration「伺服器設定」選項。

    • 在 Installation Directory「選取安裝目錄」螢幕上，請接受預設資料夾 C:\CFusionMX7，再按 Next「下一步」。

    • 在 Configure Web Server「設定網站伺服器」螢幕上，請選取螢幕底部的 Built-in Web Server「內建網站伺服器」選項。

    • 在 RDS Password「RDS 密碼」螢幕上，確定 Enable RDS「啟用 RDS」選項已選取，然後輸入並確認密碼。

如需詳細資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。

在安裝且啟動 ColdFusion 之後，請建立您網路應用程式的根資料夾。請參閱建立根資料夾。


建立根資料夾

安裝伺服器軟體之後，請在執行 ColdFusion 的系統上建立網路應用程式的根資料夾，並確定此資料夾有必要的權限。

若要建立網路應用程式的根資料夾：

  • 在執行 ColdFusion 的系統上的 CFusionMX7\wwwroot 資料夾中，建立稱為 MySampleApps 的資料夾。

    注意

    寫下這個資料夾名稱備用。稍後鍵入資料夾名稱時，大小寫必須和建立時用的完全相符。

依預設值，ColdFusion 會設定其網站伺服器將 CFusionMX7\wwwroot 資料夾內的網頁提供做為伺服器網頁。網站伺服器將提供這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽器所發出的 HTTP 要求。

設定系統之後，您必須定義 Dreamweaver 網站。請參閱定義 Dreamweaver 網站 (ColdFusion)。


定義 Dreamweaver 網站 (ColdFusion)

設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站以管理檔案。

若要定義 Dreamweaver 網站：

  1. 將範例檔案複製到硬碟上的資料夾 (請參閱複製範例檔案)。
  2. 將資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。
  3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。
  4. 指定處理動態網頁的資料夾 (請參閱指定處理動態網頁的位置)。
  5. 上傳範例檔案到網站伺服器 (請參閱上傳範例檔案)。


複製範例檔案

如果您尚未這樣做，請將範例檔案從 Dreamweaver 應用程式資料夾複製到硬碟上的資料夾。

若要複製範例檔案：

  1. 在硬碟上您的使用者資料夾中建立稱為 local_sites 的新資料夾。

    例如，建立下列其中一個資料夾：

    • C:\Documents and Settings\your_user_name\My Documents\local_sites (Windows)
    • /Users/your_user_name/Documents/local_sites (Macintosh)

      注意

      在 Macintosh 中，您的使用者資料夾中已經有一個資料夾稱為 Sites。Sites 資料夾不可以做為本機資料夾，Sites 資料夾是當您以 Macintosh 做為網站伺服器時，用來放置公用網頁的地方。
  2. 在硬碟上的 Dreamweaver 應用程式資料夾中找出 cafe_townsend 資料夾。

    如果您將 Dreamweaver 安裝於預設的位置，資料夾的路徑即如下所示：

    • Windows：C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\
    • Macintosh：Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend
  3. 將 cafe_townsend 資料夾複製到 local_sites 資料夾中，

    cafe_townsend 資料夾將用來當作 Dreamweaver 網站的根資料夾 (主要資料夾)。

複製 cafe_townsend 資料夾之後，請將此資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。


定義本機資料夾

複製 cafe_townsend 資料夾之後，將包含 ColdFusion 範例檔案的資料夾定義為 Dreamweaver 本機資料夾。

若要定義 Dreamweaver 本機資料夾：

  1. 在 Dreamweaver 中，選取「網站＞管理網站」。

    在「管理網站」對話方塊中，按一下「新增」，然後選取「網站」。

    「網站定義」對話方塊便會出現。

  2. 如果是顯示「基本」索引標籤，請按一下「進階」索引標籤。
  3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend ColdFusion。

    這個名稱在 Dreamweaver 中代表您的網站。

  4. 按一下「本機根資料夾」文字方塊旁的資料夾圖示，然後瀏覽至下列包含 ColdFusion 範例檔案的資料夾：
    • C:\Documents and Settings\your_user_name\My Documents\local_sites\cafe_townsend \contact\coldfusion (Windows)
    • /Users/your_user_name/Documents/local_sites/cafe_townsend/contact/coldfusion (Macintosh)
  5. 按一下「選取」，完成定義 Dreamweaver 本機資料夾。

讓「網站定義」對話方塊保持開啟。接下來，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。


定義遠端資料夾

定義本機資料夾之後，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。

若要定義 Dreamweaver 遠端資料夾：

  1. 在「網站定義」對話方塊的「進階」索引標籤中，從「類別」清單中選取「遠端資訊」。

    「遠端資訊」畫面便會出現。

  2. 在「存取」彈出式選單中，選擇您要在伺服器之間來回移動檔案的方式：透過區域網路 (「本機/區域網路」選項) 或使用 FTP。

    注意

    「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需其他選項的詳細資訊，請參閱「使用 Dreamweaver」。
  3. 輸入您在建立根資料夾中所建立網站伺服器資料夾的路徑或 FTP 設定。

    資料夾可位在您的硬碟或遠端電腦上。即使資料夾是建立在您的硬碟上，該資料夾仍然應視為遠端資料夾。如果選擇了「本機/區域網路」存取，而且遠端資料夾是位於您的 Windows 硬碟上，下列範例顯示可能的「遠端資料夾」路徑：

    遠端資料夾：C:\CFusionMX7\wwwroot\MySampleApps

    如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」中的設定 FTP 存取的遠端選項。

讓「網站定義」對話方塊保持開啟。接下來，定義要處理動態網頁的資料夾 (請參閱指定處理動態網頁的位置)。


指定處理動態網頁的位置

定義 Dreamweaver 遠端資料夾之後，請指定要處理動態網頁的資料夾。當您開發應用程式時，Dreamweaver 會使用這個資料夾顯示動態網頁並連線到資料庫。

若要指定處理動態頁面的資料夾：

  1. 在進階的「網站定義」對話方塊中，按一下「類別」清單中的「測試伺服器」。

    「測試伺服器」畫面便會出現。當您工作時，Dreamweaver 需要測試伺服器的服務以產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、開發用伺服器或實際執行伺服器，只要能處理 ColdFusion 頁面即可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」類別相同的設定 (請參閱定義遠端資料夾)，因為這些設定指向能夠處理 ColdFusion 頁面的伺服器。

  2. 從「伺服器模式」彈出式選單中選取「ColdFusion」。
  3. 在「存取」彈出式選單中，選取指定給存取遠端資料夾的相同方法 (「本機/區域網路」或 FTP)。

    Dreamweaver 便會輸入您在「遠端資訊」類別中指定的設定。讓設定保持不變。

  4. 在「URL 前置詞」文字方塊中，輸入您會在網路瀏覽器中輸入的根 URL，以要求網路應用程式的頁面。

    為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔、將其複製到網站的根資料夾，並試圖使用 URL 前置詞來要求它。

    注意

    Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接近的 URL 前置詞。但如果建議的 URL 前置詞不正確，請更正 URL 或輸入新的 URL 前置詞。如需詳細資訊，請參閱「使用 Dreamweaver」中的「設定 URL 前置詞」。

    如果「遠端資料夾」文字方塊中指定的資料夾是 c:\CFusionMX7\wwwroot\MySampleApps，那麼 URL 前置詞應該如下所示：

    http://localhost:8500/MySampleApps/

    注意

    依預設值，ColdFusion 網站伺服器會執行於連接埠 8500。

    提示

    URL 前置詞永遠應該指定到一個目錄，而不要指定網站上的特定頁面。此外，大小寫必須和建立資料夾時使用的完全相符。
  5. 按一下「確定」，定義網站並關閉「網站定義」對話方塊，然後按一下「完成」，關閉「管理網站」對話方塊。

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器 (請參閱上傳範例檔案)。


上傳範例檔案

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。即使網站伺服器是在本機電腦上執行，您也必須上傳檔案。

如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可能無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以「即時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁面時，按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。

若要上傳範例檔案到網站伺服器：

  1. 在「檔案」面板 (「視窗＞檔案」) 的「本機檢視」窗格中，選取網站的根資料夾。

    根資料夾是清單中的最上層資料夾。

  2. 在「檔案」面板工具列中按一下藍色「上傳檔案」箭頭圖示，確認要上傳整個網站。

    Dreamweaver 會將所有檔案複製到您在定義遠端資料夾中所定義的網站伺服器資料夾。

現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起安裝的範例資料庫 (請參閱連線到範例資料庫 (ColdFusion))。


連線到範例資料庫 (ColdFusion)

安裝時，Dreamweaver 會將 Microsoft Access 範例資料庫複製到您的硬碟。本節描述如何建立與範例資料庫的連線。

注意

如需有關連線到其他資料庫的詳細資訊，請參閱「使用 Dreamweaver」中的「適用於 ColdFusion 開發人員的資料庫連線」。

若要建立資料庫連線：

  1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。(請參閱設定資料庫 (遠端電腦上的伺服器))。
  2. 建立 ColdFusion 資料來源，並在 Dreamweaver 檢視連線 (請參閱連線到資料庫)。


設定資料庫 (遠端電腦上的伺服器)

本節僅適用於在遠端電腦上執行的網站伺服器。如果您的網站伺服器與 Dreamweaver 在同一部電腦一執行，請略過本節，直接跳至連線到資料庫。

在嘗試連線到範例資料庫之前，請先將資料庫複製到遠端電腦的硬碟。如果您將 Dreamweaver 安裝於預設的位置，則本機硬碟上資料庫檔案 (tutorial.mdb) 的路徑即如下所示：

  • C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb (Windows)
  • /Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend/data/tutorial.mdb (Macintosh)

您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資料夾。

注意

如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問題。檔案不宜放在公用資料夾中。

放置好資料庫之後，請建立 ColdFusion 資料來源 (請參閱連線到資料庫)。


連線到資料庫

若要連線到資料庫，您必須建立指向範例資料庫檔案且名為 connTownsend 的 ColdFusion 資料來源。

若要連線到資料庫：

  1. 在 Dreamweaver 中，開啟 ColdFusion 網頁，例如 send.cfm 和 view.cfm。
  2. 在「資料庫」面板 (「視窗＞資料庫」) 中，按一下「RDS 登入」連結，輸入 RDS 密碼，再按「確定」。
  3. 按一下「資料庫」面板工具列上的「加號」(+)，然後從彈出式選單中選取「Microsoft Access 連線」。

    注意

    如果「加號」按鈕未出現在「資料庫」面板，請重新啟動 Dreamweaver。
  4. 在「CF 資料來源名稱」文字方塊中，輸入 connTownsend。
  5. 在「資料庫檔案」文字方塊中，輸入 tutorial.mdb 資料庫檔案的路徑。

    如果 ColdFusion 是在本機電腦上執行，且 Dreamweaver 是安裝於預設的位置，請使用下列路徑：

    C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb

    如果 ColdFusion 在遠端電腦上執行，請輸入您在設定資料庫 (遠端電腦上的伺服器)中的遠端電腦資料庫檔案路徑。

    如需詳細資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。

  6. 按一下「確定」，建立這個連線。

    「資料庫」面板中便會出現此連線。

    如果連線未在面板中出現，請執行下列其中一項作業：

    • 檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定處理動態網頁的位置)。
    • 請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的「疑難排解資料庫連線」。
  7. 展開 connTownsend 分支，然後展開 Tables 分支。

    如果 Tables 分支包含三個如下所示的表格，表示範例 ColdFusion 應用程式已經設定好，可供「Dreamweaver 入門」教學課程使用。如需詳細資訊，請參閱教學課程：開發網路應用程式。

    如果 Tables 分支不包含這些表格，請按一下「資料庫」面板工具列上的「修改資料來源」圖示，重新檢視「設定和管理 ColdFusion MX」中的連線參數。特別確定資料庫檔案的路徑是正確的。


ASP.NET 範例網站的設定

Macromedia Dreamweaver 8 有隨附 ASP.NET 範例頁面，可以讓您建立小型的網路應用程式。本章說明一種建立範例應用程式的方法。

本章適用於 ASP.NET 開發人員。如需關於 ASP 的詳細資訊，請參閱 ASP 範例網站的設定。

設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義 Dreamweaver 網站。第三，將應用程式連結到資料庫。這個設定章節依照這三個步驟進行。

本章包含下列各節：

ASP.NET 開發人員的設定檢查清單

設定系統 (ASP.NET)

定義 Dreamweaver 網站(ASP.NET)

連線到範例資料庫 (ASP.NET)


ASP.NET 開發人員的設定檢查清單

若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中詳細描述。

設定系統：

  1. 確定您有網站伺服器。
  2. 安裝 Microsoft .NET Framework。
  3. 建立根資料夾。

定義 Dreamweaver 網站：

  1. 複製範例檔案到硬碟上的資料夾。
  2. 將資料夾定義為 Dreamweaver 本機資料夾。
  3. 將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
  4. 指定要處理動態頁面的資料夾。
  5. 上傳範例檔案到網站伺服器。

連線到資料庫：

  1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。
  2. 在 Dreamweaver 中建立連線。

相關主題

  • 設定系統 (ASP.NET)
  • 定義 Dreamweaver 網站(ASP.NET)
  • 連線到範例資料庫 (ASP.NET)


設定系統 (ASP.NET)

本節針對兩種常用的系統設定提供指示：其中一種是將 Windows 2000 或 Windows XP Professional 安裝於您的硬碟上，而另一種是將 Windows 2000 或 Windows XP Professional 安裝於遠端電腦上。如果您要使用不同的設定，請參閱「使用 Dreamweaver」中的設定網路應用程式。

下圖顯示本節所描述的兩種設定：

針對 Windows 2000 或 XP 使用者的本機設定，以及針對 Macintosh 及其他 Windows 使用者的遠端伺服器設定。

若要設定您的系統：

  1. 確定您有網站伺服器 (請參閱檢查網站伺服器)。
  2. 安裝 .NET Framework (請參閱安裝 .NET Framework)。
  3. 建立根資料夾 (請參閱建立根資料夾)。

    注意

    安裝網站伺服器和 .NET Framework 的工作是只需做一次就好的工作。


檢查網站伺服器

若要發展和測試動態網頁，您需要網站伺服器。網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。

ASP.NET 頁面只能用於一種網站伺服器：Microsoft IIS 5 或更新版本。因為 IIS 5 是 Windows 2000 和 Windows XP Professional 作業系統的服務，所以您能使用這兩種版本的 Windows 來執行 ASP.NET 應用程式。

請確定 IIS 5 是在執行 Windows 2000 或 Windows XP Professional 的電腦上安裝並執行。如果您有 Windows 2000 或 Windows XP Professional，即可使用本機電腦做為伺服器。

如果想要快速查出電腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。

如果未安裝 IIS，請現在安裝。如需詳細資訊，請參閱安裝 Internet Information Server。

安裝網站伺服器之後，請安裝 .NET Framework (請參閱安裝 .NET Framework)。


安裝 .NET Framework

若要處理動態網頁，您需要應用程式伺服器。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。當瀏覽器要求這類網頁時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送網頁給瀏覽器。如需詳細資訊，請參閱了解網路應用程式。

在 ASP.NET 中，應用程式伺服器稱為 Microsoft .NET Framework 1.1。若要開發 ASP.NET 網路應用程式，您還必須安裝 Microsoft .NET Framework 1.1 Software Development Kit (SDK)。請確定 Framework 和 SDK 是在執行 IIS 5 或更新版本的 Windows 2000 或 Windows XP Professional 系統上安裝並執行。

若要安裝 .NET Framework 和 SDK：

  1. 檢視「新增或移除程式」對話方塊 (「開始＞控制台＞新增或移除程式」) 中的應用程式清單，查看系統上是否已經安裝 .NET Framework。

    如果列出 Microsoft .NET Framework 1.1，表示已安裝 Framework，不需再次安裝它。跳到步驟 3。

  2. 如果系統上未安裝 .NET Framework，請從 Microsoft 網站 (網址是 http://msdn.microsoft.com/netframework/downloads/framework1_1/) 安裝 Microsoft .NET Framework 1.1 Redistributable 套件，並遵循網站上的安裝指示進行。

    Framework 會安裝成 Windows 更新。

  3. 從相同網站下載 Microsoft .NET Framework 1.1 Software Development Kit (SDK)，並遵循安裝指示進行。

安裝 Framework 和 SDK 之後，請建立網路應用程式的根資料夾 (請參閱建立根資料夾)。


建立根資料夾

在安裝伺服器軟體之後，請針對執行 Microsoft IIS 系統的網路應用程式建立根資料夾，並確定此根資料夾有必要的權限。

若要建立網路應用程式的根資料夾：

  1. 在執行 IIS 的系統上，建立名為 MySampleApps 的資料夾。

    注意

    寫下這個資料夾名稱備用。稍後鍵入資料夾名稱時，大小寫必須和建立時用的完全相符。

    建立資料夾的建議位置為 C:\Inetpub\wwwroot\。依預設值，IIS 網站伺服器會設定將 Inetpub\wwwroot 資料夾內的網頁，提供做為伺服器網頁。網站伺服器將提供這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽器所發出的 HTTP 要求。

  2. 若要確定資料夾啟用 Script 權限，請啟動 IIS 系統管理工具 (在 Windows XP 中選取「開始＞控制台」或「開始＞設定＞控制台」，然後按兩下「系統管理工具」，再按兩下「Internet Information Services」)。依序展開「本機電腦」清單、「網站」資料夾和「預設網站」資料夾。以滑鼠右鍵按一下 MySampleApps 資料夾，選取彈出式選單中的「屬性」。確定有選取「執行許可權」彈出式選單中的「僅 Script」選項 (基於安全因素，請勿選取「Script 和執行檔」選項)，然後按一下「確定」。

現在網站伺服器已在您根資料夾中設定完成提供伺服器網頁，回應網路瀏覽器所發出的 HTTP 要求。

設定系統之後，您必須定義 Dreamweaver 網站 (請參閱定義 Dreamweaver 網站(ASP.NET))。


定義 Dreamweaver 網站(ASP.NET)

設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站以管理檔案。

若要定義 Dreamweaver 網站：

  1. 將範例檔案複製到硬碟上的資料夾 (請參閱複製範例檔案)。
  2. 將資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。
  3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。
  4. 指定處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。
  5. 上傳範例檔案到網站伺服器 (請參閱上傳範例檔案)。


複製範例檔案

如果您尚未這樣做，請將範例檔案從 Dreamweaver 應用程式資料夾複製到硬碟上的資料夾。

若要複製範例檔案：

  1. 在硬碟上您的使用者資料夾中建立稱為 local_sites 的新資料夾。

    例如，建立下列其中一個資料夾：

    • C:\Documents and Setting\your_user_name\My Documents\local_sites (Windows)
    • /Users/your_user_name/Documents/local_sites (Macintosh)

      注意

      在 Macintosh 中，您的使用者資料夾中已經有一個資料夾稱為 Sites。Sites 資料夾不可以做為本機資料夾，Sites 資料夾是當您以 Macintosh 做為網站伺服器時，用來放置公用網頁的地方。
  2. 在硬碟上的 Dreamweaver 應用程式資料夾中找出 cafe_townsend 資料夾。

    如果您將 Dreamweaver 安裝於預設的位置，資料夾的路徑即如下所示：

    • Windows：C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\ cafe_townsend\
    • Macintosh：Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend
  3. 將 cafe_townsend 資料夾複製到 local_sites 資料夾中，

    cafe_townsend 資料夾將用來當作 Dreamweaver 網站的根資料夾 (主要資料夾)。

複製 cafe_townsend 資料夾之後，請將此資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。


定義本機資料夾

複製 cafe_townsend 資料夾之後，將包含 ASP.NET 範例檔案的資料夾定義為 Dreamweaver 本機資料夾。

若要定義 Dreamweaver 本機資料夾：

  1. 在 Dreamweaver 中，選取「網站＞管理網站」。在「管理網站」對話方塊中，按一下「新增」按鈕，然後選取「網站」。

    「網站定義」對話方塊便會出現。

  2. 如果是顯示「基本」索引標籤，請按一下「進階」索引標籤。
  3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend ASP.NET。

    這個名稱在 Dreamweaver 中代表您的網站。

  4. 按一下「本機根資料夾」文字方塊旁的資料夾圖示，然後瀏覽至下列包含 ASP.NET 範例檔案的資料夾：
    • C:\Documents and Setting\your_user_name\My Documents\local_sites\cafe_townsend\contact\aspnet (Windows)
    • /Users/your_user_name/Documents/local_sites/cafe_townsend/contact/aspnet (Macintosh)
  5. 按一下「選取」，完成定義 Dreamweaver 本機資料夾。

讓「網站定義」對話方塊保持開啟。接下來，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。


定義遠端資料夾

定義本機資料夾之後，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。

若要定義 Dreamweaver 遠端資料夾：

  1. 在「網站定義」對話方塊的「進階」索引標籤中，從「類別」清單中選取「遠端資訊」。

    「遠端資訊」畫面便會出現。

  2. 在「存取」彈出式選單中，選擇您要在伺服器之間來回移動檔案的方式：透過區域網路 (「本機/區域網路」選項) 或使用 FTP。

    注意

    「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需相關的詳細資訊，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」)。
  3. 輸入您在建立根資料夾中所建立網站伺服器資料夾的路徑或 FTP 設定。

    資料夾可位在您的硬碟或遠端電腦上。即使資料夾是建立在您的硬碟上，該資料夾仍然應視為遠端資料夾。如果選擇了「本機/區域網路」存取，而且遠端資料夾是位於您的 Windows 硬碟上，下列範例顯示可能的「遠端資料夾」路徑：

    遠端資料夾：C:\Inetpub\wwwroot\MySampleApps

    如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」中的設定 FTP 存取的遠端選項。

讓「網站定義」對話方塊保持開啟。接下來，定義要處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。


指定可以處理動態網頁的位置

定義 Dreamweaver 遠端資料夾之後，請指定要處理動態網頁的資料夾。當您開發應用程式時，Dreamweaver 會使用這個資料夾顯示動態網頁並連線到資料庫。

若要指定處理動態頁面的資料夾：

  1. 在進階的「網站定義」對話方塊中，按一下「類別」清單中的「測試伺服器」。

    「測試伺服器」畫面便會出現。當您工作時，Dreamweaver 需要測試伺服器的服務以產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、開發用伺服器或實際執行伺服器，只要能處理 ASP.NET 頁面即可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」類別相同的設定 (請參閱定義遠端資料夾)，因為這些設定指向能夠處理 ASP.NET 頁面的伺服器。

  2. 從「伺服器模式」彈出式選單中選取 ASP.NET VB 或 ASP.NET C#。
  3. 在「存取」彈出式選單中，選取指定給存取遠端資料夾的相同方法 (「本機/區域網路」或 FTP)。

    Dreamweaver 便會輸入您在「遠端資訊」類別中指定的設定。讓設定保持不變。

  4. 在「URL 前置詞」文字方塊中，輸入您會在網路瀏覽器中輸入的根 URL，以要求網路應用程式的頁面。

    為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔，將它複製到網站的根資料夾並試圖使用 URL 前置詞要求它。

    Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接近的 URL 前置詞。但是，所建議的 URL 前置詞可能不正確。如果 Dreamweaver 中的建議是錯誤的，請更正或輸入新的 URL 前置詞。如需詳細資訊，請參閱「使用 Dreamweaver」中的「設定 URL 前置詞」。

    例如，如果「遠端資料夾」文字方塊中指定的資料夾是 C:\Inetpub\wwwroot\MySampleApps，那麼 URL 前置詞應該如下所示：

    http://localhost/MySampleApps/

    提示

    URL 前置詞永遠應該指定到一個目錄，而不要指定網站上的特定頁面。此外，大小寫必須和建立資料夾時使用的完全相符。
  5. 按一下「確定」，定義網站並關閉「網站定義」對話方塊，然後按一下「完成」，關閉「管理網站」對話方塊。

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器 (請參閱上傳範例檔案)。


上傳範例檔案

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。即使網站伺服器是在本機電腦上執行，您也必須上傳檔案。

如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可能無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以「即時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁面時，按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。

若要上傳範例檔案到網站伺服器：

  1. 在「檔案」面板 (「視窗＞檔案」) 的「本機檢視」窗格中，選取網站的根資料夾。

    根資料夾是清單中的最上層資料夾。

  2. 在「檔案」面板工具列中按一下藍色「上傳檔案」箭頭圖示，確認要上傳整個網站。

    Dreamweaver 會將所有檔案複製到您在定義遠端資料夾中所定義的網站伺服器資料夾。

現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起安裝的範例資料庫 (請參閱連線到範例資料庫 (ASP.NET))。


連線到範例資料庫 (ASP.NET)

安裝時，Dreamweaver 會將 Microsoft Access 範例資料庫複製到您的硬碟。本節描述如何建立與範例資料庫的連線。

注意

如需連線到另一個資料庫的詳細資訊，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的ASP.NET 開發人員的資料庫連線。

若要建立資料庫連線：

  1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。(請參閱設定資料庫 (遠端電腦上的伺服器))。
  2. 在 Dreamweaver 中建立連線 (請參閱建立資料庫連線)。


設定資料庫 (遠端電腦上的伺服器)

本節僅適用於在遠端電腦上執行的網站伺服器。如果您的網站伺服器與 Dreamweaver 在同一部電腦一執行，請略過本節，直接跳至建立資料庫連線。

在嘗試連線到範例資料庫之前，請先將資料庫複製到遠端電腦的硬碟。如果您將 Dreamweaver 安裝於預設的位置，則本機硬碟上資料庫檔案 (tutorial.mdb) 的路徑即如下所示：

  • C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb (Windows)
  • /Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend/data/tutorial.mdb (Macintosh)

您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資料夾。在任一情況下，請在紙上寫下連至資料庫檔案的完整路徑。

注意

如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問題。檔案不宜放在公用資料夾中。

資料庫安置妥當之後，請連線至資料庫 (請參閱建立資料庫連線)。


建立資料庫連線

設定流程的最後一個步驟是建立資料庫的連線。

若要在 Dreamweaver 中建立資料庫連線：

  1. 在 Dreamweaver 中開啟任一 ASP.NET 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。
  2. 按一下「資料庫」面板上的加號 (+) 按鈕，並從彈出式選單中選取「OLE DB 連線」。

    「OLE DB 連線」對話方塊便會出現。

  3. 輸入 connTownsend 做為連線名稱。
  4. 按一下「樣版」按鈕。

    「連線字串樣版」對話方塊便會出現。

  5. 從樣版清單中，選取「Microsoft Access 2000 (Microsoft Jet 4.0 Provider)」並按一下「確定」。

    Dreamweaver 便會在「OLE DB 連線」對話方塊中新增連線字串樣版。這個樣版包含連線字串中遺失資訊的預留位置。

  6. 在「資料來源」文字方塊中，輸入您的硬碟上或遠端電腦硬碟上範例資料庫檔案的完整路徑。如果 ASP.NET 是在本機電腦上執行，且 Dreamweaver 是安裝於預設的位置，請使用下列路徑：

    C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutorial.mdb

    注意

    路徑會隨著 Dreamweaver 安裝的位置而跟著改變。

    例如，您可能會為本機硬碟上的資料庫，輸入此路徑做為「資料來源」的值：

    Data Source=C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutorial.mdb;

    或者您可能會為遠端伺服器上的資料庫，輸入此路徑：

    Data Source=C:\users\Denman\Sites\data\tutorial.mdb;

  7. 刪除「使用者 ID」和「密碼」行。

    Access 資料庫不需要使用者 ID 或密碼。

  8. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請執行下列動作：

    • 重複檢查連線到資料庫的路徑。
    • 檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。
    • 選取「網站＞進階＞部署支援檔案」，以部署支援檔案。
    • 請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的資料庫連線疑難排解。
  9. 按一下「確定」。

    「資料庫」面板中便會出現新的連線。

現在，ASP.NET 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學課程使用。如需詳細資訊，請參閱教學課程：開發網路應用程式。


ASP 範例網站的設定

Macromedia Dreamweaver 8 有隨附 Microsoft Active Server Pages (ASP) 範例網頁，可以建立小型的網路應用程式。本章將描述如何使用 Microsoft Internet Information Server (IIS) 設定範例應用程式。如需關於這個網站伺服器的詳細資訊，請參閱安裝網站伺服器。

本章僅適用於 ASP 開發人員。如需關於 ASP.NET 的詳細資訊，請參閱 ASP.NET 範例網站的設定。

設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義 Dreamweaver 網站。第三，將應用程式連結到資料庫。這個設定章節依照這三個步驟進行。

本章包含下列各節：

ASP 開發人員的設定檢查清單

設定系統 (ASP)

定義 Dreamweaver 網站 (ASP)

連線到範例資料庫 (ASP)


ASP 開發人員的設定檢查清單

若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中詳細描述。

設定系統：

  1. 確定您有網站伺服器。
  2. 安裝應用程式伺服器。
  3. 測試安裝。
  4. 建立根資料夾。

定義 Dreamweaver 網站：

  1. 複製範例檔案到硬碟上的資料夾。
  2. 將資料夾定義為 Dreamweaver 本機資料夾。
  3. 將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
  4. 指定要處理動態頁面的資料夾。
  5. 上傳範例檔案到網站伺服器。

連線到資料庫：

  1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。
  2. 在 Dreamweaver 中建立連線。

相關主題

  • 設定系統 (ASP)
  • 定義 Dreamweaver 網站 (ASP)
  • 連線到範例資料庫 (ASP)


設定系統 (ASP)

本節提供兩個最常用的 ASP 系統設定相關指示：其中一種是將 Microsoft IIS 安裝於您的硬碟上，而另一種是將 IIS 安裝於遠端的 Windows 電腦上。

下圖顯示本節所描述的兩種設定：

針對 Windows 使用者的本機設定，以及針對 Macintosh 及 Windows 使用者的遠端伺服器設定。

若要設定您的系統：

  1. 確定您有網站伺服器 (請參閱檢查網站伺服器)。
  2. 必要的話，安裝應用程式伺服器 (請參閱安裝 ASP 應用程式伺服器)。
  3. 測試安裝 (請參閱測試安裝)。
  4. 建立根資料夾 (請參閱建立根資料夾)。

    注意

    安裝網站伺服器和應用程式伺服器的工作可以一次完成。


檢查網站伺服器

若要發展和測試動態網頁，您需要網站伺服器。網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。

確定硬碟或遠端 Windows 電腦上安裝且執行的是 Microsoft IIS (Macintosh 使用者需要在遠端 Windows 電腦上安裝 Microsoft IIS)。如果想要快速查出電腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。

如果未安裝 IIS，請現在安裝。如需相關說明，請參閱安裝網站伺服器。

安裝網站伺服器之後，通常需要安裝應用程式伺服器 (請參閱安裝 ASP 應用程式伺服器)。


安裝 ASP 應用程式伺服器

若要處理動態網頁，您需要應用程式伺服器。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。當瀏覽器要求這類網頁時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送網頁給瀏覽器。如需詳細資訊，請參閱了解網路應用程式。

如果將 IIS 安裝於 Windows 的電腦上，就不需要獨立的 ASP 應用程式伺服器。IIS 也會像 ASP 應用程式伺服器一樣運作。如需關於安裝和測試 IIS 的詳細資訊，請參閱安裝網站伺服器。

您應該測試伺服器以確定它運作正常 (請參閱測試安裝)。


測試安裝

您可以執行測試頁面，測試 IIS 的 ASP 引擎。

若要測試 IIS 的 ASP 引擎：

  1. 在 Dreamweaver 或任何文字編輯器中，建立純文字檔並命名為 timetest.asp。
  2. 在這個檔案中，輸入下列程式碼：
    <p>This page was created at <b>
<%= Time %>
</b> on the computer running ASP.</p>

    此程式碼顯示在伺服器上處理頁面的時間。

  3. 將檔案複製到執行 IIS 的 Windows 電腦中的 C:\Inetpub\wwwroot 資料夾。
  4. 在您的網路瀏覽器中，輸入測試網頁的 URL 然後按 Enter。

    如果本機電腦執行 IIS，可以輸入下列 URL：

    http://localhost/timetest.asp

測試頁面應該會開啟及顯示一天中的時間，如下所示：

所指出的時間即稱為動態內容，因為只要您一要求頁面，它就變更一次。按一下瀏覽器上的「重新整理」按鈕，產生有不同時間的新頁面。

注意

查看原始碼 (Internet Explorer 中的「檢視＞原始檔」)，確定頁面並非使用任何用戶端的 JavaScript 來達到這個效果。

如果頁面未如預期般運作，請檢查以下可能的錯誤：

  • 檔案副檔名不是 .asp。
  • 您在瀏覽器「位址」文字方塊上輸入了頁面的檔案路徑 (C:\Inetput\wwwroot\timetest.asp)，而不是 URL (例如，http://localhost/timetest.asp)。

    如果您在瀏覽器中輸入檔案路徑 (如您在一般 HTML 頁面中所做的動作)，您將略過網站伺服器和應用程式伺服器。因此，您的頁面將無法由伺服器處理。

  • URL 包含輸入錯誤。檢查錯誤並確定檔名之後未跟著斜線，例如 http://localhost/timetest.asp/。
  • 頁面程式碼包含輸入錯誤。

安裝及測試伺服器軟體之後，請建立網路應用程式的根資料夾 (請參閱建立根資料夾)。


建立根資料夾

在安裝伺服器軟體之後，請針對執行 Microsoft IIS 系統的網路應用程式建立根資料夾，並確定此根資料夾有必要的權限。

若要建立網路應用程式的根資料夾：

  1. 在執行 IIS 的系統上，建立名為 MySampleApps 的資料夾。

    注意

    寫下這個資料夾名稱備用。稍後鍵入資料夾名稱時，大小寫必須和建立時用的完全相符。

    建立資料夾的建議位置為 C:\Inetpub\wwwroot\。依預設值，IIS 網站伺服器會設定將 Inetpub\wwwroot 資料夾內的網頁，提供做為伺服器網頁。網站伺服器將提供這個資料夾或其子資料夾中的任何頁面，回應網路瀏覽器所發出的 HTTP 要求。

  2. 若要確定該資料夾已啟用「讀取」和「Script」權限，請執行下列作業：
    1. 啟動 IIS 系統管理工具 (在 Windows XP 中選取「開始＞控制台」或「開始＞設定＞控制台」，然後按兩下「系統管理工具」，再按兩下「Internet Information Services」)。
    2. 依序展開「本機電腦」清單、「網站」資料夾和「預設網站」資料夾。
    3. 以滑鼠右鍵按一下 MySampleApps 資料夾，選取彈出式選單中的「屬性」。
    4. 確定有選取「執行許可權」彈出式選單中的「僅 Script」選項(基於安全因素，請勿選取「Script 和執行檔」選項)。
    5. 按一下「確定」。

現在網站伺服器已在您根資料夾中設定完成提供伺服器網頁，回應網路瀏覽器所發出的 HTTP 要求。

設定系統之後，必須定義 Dreamweaver 網站 (請參閱定義 Dreamweaver 網站 (ASP))。


定義 Dreamweaver 網站 (ASP)

設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站以管理檔案。

若要定義 Dreamweaver 網站：

  1. 將範例檔案複製到硬碟上的資料夾 (請參閱複製範例檔案)。
  2. 將資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。
  3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。
  4. 指定處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。
  5. 上傳範例檔案到網站伺服器 (請參閱上傳範例檔案)。


複製範例檔案

如果您尚未這樣做，請將範例檔案從 Dreamweaver 應用程式資料夾複製到硬碟上的資料夾。

若要複製範例檔案：

  1. 在硬碟上您的使用者資料夾中建立稱為 local_sites 的新資料夾。

    例如，建立下列其中一個資料夾：

    • C:\Documents and Setting\your_user_name\My Documents\local_sites (Windows)
    • /Users/your_user_name/Documents/local_sites (Macintosh)

      注意

      在 Macintosh 中，您的使用者資料夾中已經有一個資料夾稱為 Sites。Sites 資料夾不可以做為本機資料夾，Sites 資料夾是當您以 Macintosh 做為網站伺服器時，用來放置公用網頁的地方。
  2. 在硬碟上的 Dreamweaver 應用程式資料夾中找出 cafe_townsend 資料夾。

    如果您將 Dreamweaver 安裝於預設的位置，資料夾的路徑即如下所示：

    • Windows：C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\
    • Macintosh：Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend
  3. 將 cafe_townsend 資料夾複製到 local_sites 資料夾中，

    cafe_townsend 資料夾將用來當作 Dreamweaver 網站的根資料夾 (主要資料夾)。

    複製 cafe_townsend 資料夾之後，請將此資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。


定義本機資料夾

複製 cafe_townsend 資料夾之後，將包含 ASP 範例檔案的資料夾定義為 Dreamweaver 本機資料夾。

若要定義 Dreamweaver 本機資料夾：

  1. 在 Dreamweaver 中，選取「網站＞管理網站」。在「管理網站」對話方塊中，按一下「新增」按鈕，然後選取「網站」。

    「網站定義」對話方塊便會出現。

  2. 如果是顯示「基本」索引標籤，請按一下「進階」索引標籤。
  3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend ASP。

    這個名稱在 Dreamweaver 中代表您的網站。

  4. 按一下「本機根資料夾」文字方塊旁的資料夾圖示，然後瀏覽至下列包含 ASP 範例檔案的資料夾：
    • C:\Documents and Setting\your_user_name\My Documents\local_sites\cafe_townsend\contact\asp (Windows)
    • /Users/your_user_name/Documents/local_sites/cafe_townsend/contact/asp (Macintosh)
  5. 按一下「選取」，完成定義 Dreamweaver 本機資料夾。

讓「網站定義」對話方塊保持開啟。接下來，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。


定義遠端資料夾

定義本機資料夾之後，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。

若要定義 Dreamweaver 遠端資料夾：

  1. 在「網站定義」對話方塊的「進階」索引標籤中，從「類別」清單中選取「遠端資訊」。

    「遠端資訊」對話方塊便會出現。

  2. 在「存取」彈出式選單中，選擇要如何在伺服器之間來回移動檔案：透過區域網路 (「本機/區域網路」選項) 或使用 FTP。

    注意

    「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需這些選項的詳細資訊，請參閱「使用 Dreamweaver」。
  3. 輸入您在建立根資料夾中所建立網站伺服器資料夾的路徑或 FTP 設定。

    資料夾可位在您的硬碟或遠端電腦上。即使資料夾是建立在您的硬碟上，該資料夾仍然應視為遠端資料夾。如果選擇了「本機/區域網路」存取，而且遠端資料夾是位於您的 Windows 硬碟上，下列範例顯示可能的「遠端資料夾」路徑：

    遠端資料夾：C:\Inetpub\wwwroot\MySampleApps

    如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」中的設定 FTP 存取的遠端選項。

讓「網站定義」對話方塊保持開啟。接下來，定義要處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。


指定可以處理動態網頁的位置

定義 Dreamweaver 遠端資料夾之後，請指定要處理動態網頁的資料夾。當您開發應用程式時，Dreamweaver 會使用這個資料夾顯示動態網頁並連線到資料庫。

若要指定處理動態頁面的資料夾：

  1. 在進階的「網站定義」對話方塊中，按一下「類別」清單中的「測試伺服器」。

    「測試伺服器」畫面便會出現。當您工作時，Dreamweaver 需要測試伺服器的服務以產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、執行伺服器或生產伺服器，只要能處理 ASP 頁面即可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」類別相同的設定 (請參閱定義遠端資料夾)，因為這些設定指向能夠處理 ASP 頁面的伺服器。

  2. 從「伺服器模式」彈出式選單中選取 ASP JavaScript 或 ASP VBScript。
  3. 在「存取」彈出式選單中，選取指定給存取遠端資料夾的相同方法 (「本機/區域網路」或 FTP)。

    Dreamweaver 便會輸入您在「遠端資訊」類別中指定的設定。讓設定保持不變。

  4. 在「URL 前置詞」文字方塊中，輸入您會在網路瀏覽器中輸入的根 URL，以要求網路應用程式的頁面。

    為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔，將它複製到網站的根資料夾並試圖使用 URL 前置詞要求它。

    Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接近的 URL 前置詞。但是，所建議的 URL 前置詞可能不正確。如果 Dreamweaver 中的建議是錯誤的，請更正或輸入新的 URL 前置詞。如需詳細資訊，請參閱「使用 Dreamweaver」中的「設定 URL 前置詞」。

    例如，如果「遠端資料夾」文字方塊中指定的資料夾是 C:\Inetpub\wwwroot\MySampleApps，那麼 URL 前置詞應該如下所示：

    http://localhost/MySampleApps/

    提示

    URL 前置詞永遠應該指定到一個目錄，而不要指定網站上的特定頁面。此外，大小寫必須和建立資料夾時使用的完全相符。
  5. 按一下「確定」，定義網站並關閉「網站定義」對話方塊，然後按一下「完成」，關閉「管理網站」對話方塊。

指定處理動態頁面的資料夾之後，將範例檔案上傳到網站伺服器 (請參閱上傳範例檔案)。


上傳範例檔案

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。即使網站伺服器是在本機電腦上執行，您也必須上傳檔案。

如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可能無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以「即時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁面時，按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。

若要上傳範例檔案到網站伺服器：

  1. 在「檔案」面板 (「視窗＞檔案」) 的「本機檢視」窗格中，選取網站的根資料夾。

    根資料夾是清單中的最上層資料夾。

  2. 在「檔案」面板工具列中按一下藍色「上傳檔案」箭頭圖示，確認要上傳整個網站。

    Dreamweaver 會將所有檔案複製到您在定義遠端資料夾中所定義的網站伺服器資料夾。

現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起安裝的範例資料庫 (請參閱連線到範例資料庫 (ASP))。


連線到範例資料庫 (ASP)

安裝時，Dreamweaver 會將 Microsoft Access 範例資料庫複製到您的硬碟。本節描述如何建立與範例資料庫的連線。

注意

如需連線到另一個資料庫的詳細資訊，請參閱「使用 Dreamweaver」中的適用於 ASP 開發人員的資料庫連線。

若要建立資料庫連線：

  1. 如果使用遠端電腦做為伺服器，請將範例資料庫設定到遠端電腦 (請參閱設定資料庫 (遠端電腦上的伺服器))。
  2. 在 Dreamweaver 中建立連線 (請參閱建立資料庫連線)。


設定資料庫 (遠端電腦上的伺服器)

本節僅適用於在遠端電腦上執行的網站伺服器。如果您的網站伺服器與 Dreamweaver 在同一部電腦一執行，請略過本節，直接跳至建立資料庫連線。

在嘗試連線到範例資料庫之前，請先在執行網站伺服器的遠端電腦上執行下列工作：將範例資料庫複製到電腦硬碟中，並在電腦上建立指向資料庫的 DSN。

若要在遠端電腦上設定範例資料庫：

  1. 將資料庫複製到遠端電腦的硬碟上。如果您將 Dreamweaver 安裝於預設的位置，則本機硬碟上資料庫檔案 (tutorial.mdb) 的路徑即如下所示：
    • C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb (Windows)
    • /Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend/data/tutorial.mdb (Macintosh)

    您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資料夾。

    注意

    如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問題。檔案不宜放在公用資料夾中。
  2. 確定 4.0 版或以上的 Microsoft Access 驅動程式，已安裝在遠端電腦上。

    若要查出驅動程式是否已安裝，請參閱「使用 Dreamweaver」中的檢視安裝在 Windows 系統上的 ODBC 驅動程式。

    如果尚未安裝驅動程式，請下載並於遠端電腦上安裝 Microsoft Data Access Components (MDAC) 2.5 和 2.7 套件。您可以從 Microsoft 網站 (網址是 http://msdn.microsoft.com/data/mdac/downloads/) 免費下載 MDAC。這些套件包含最新的 Microsoft 驅動程式，包括 Microsoft Access 驅動程式。

    注意

    安裝 MDAC 2.7 之前，請先安裝 MDAC 2.5。
  3. 在遠端電腦上設定稱為 CafeTownsend 的 DSN，並指向範例資料庫。

    如需相關說明，請參閱 Microsoft 網站上的下列文章：

    • 如果遠端電腦執行 Windows 2000，請參閱文件 300596，網址為 support.microsoft.com/default.aspx?scid=kb;en-us;300596。
    • 如果遠端電腦執行 Windows XP，請參閱文件 305599，網址為 support.microsoft.com/default.aspx?scid=kb;en-us;305599。

妥當配置資料庫、資料庫驅動程式和 DSN 之後，請在 Dreamweaver 中建立資料庫連線 (請參閱建立資料庫連線)。


建立資料庫連線

設定流程的最後一個步驟是建立資料庫的連線。

如果網站伺服器執行於本機電腦上，您可以使用 Dreamweaver 在安裝時所建立的資料來源名稱 (DSN)，快速連線到範例資料庫。若要瞭解更多有關 DSN 的資訊，請參閱「使用 Dreamweaver」中的使用 DSN。

若要在 Dreamweaver 中建立資料庫連線：

  1. 在 Dreamweaver 中開啟任何 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。
  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中，選取「資料來源名稱 (DSN)」。

    「資料來源名稱 (DSN)」對話方塊便會出現。

  3. 輸入 connTownsend 做為連線名稱。
  4. (僅適用於 Windows) 請執行下列其中一項作業：
    • 如果伺服器執行於本機電腦上，請選取「使用本機 DSN」選項。
    • 如果伺服器執行於遠端系統上，請選取「使用測試伺服器上的 DSN」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有的資料庫連結都是使用測試伺服器上的 DSN。

  5. 按一下「DSN」按鈕，並從 DSN 清單中選取「CafeTownsend」。

    如果您在 Windows 電腦上使用 Dreamweaver，在安裝期間，Dreamweaver 會建立指向 Dreamweaver 應用程式資料夾的 Microsoft Access 資料庫、名為 CafeTownsend 的 DSN。

  6. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請執行下列動作：

    • 重複檢查 DSN。
    • 檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。
    • 請參閱「使用 Dreamweaver」中的資料庫連線疑難排解。
  7. 按一下「確定」。

    「資料庫」面板中便會出現新的連線。

現在，ASP 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學課程使用。如需詳細資訊，請參閱教學課程：開發網路應用程式。


JSP 範例網站的設定

Macromedia Dreamweaver 8 隨附有 Java Server Pages (JSP) 範例網頁，可以讓您建立小型的網路應用程式。本章將描述使用 Microsoft Internet Information Server (IIS) 設定範例應用程式的方法。如需關於這些網站伺服器的詳細資訊，請參閱安裝網站伺服器。如果您使用不同的網站伺服器，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的設定網路應用程式。

設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義 Dreamweaver 網站。第三，將應用程式連結到資料庫。這個設定章節依照這三個步驟進行。

本章包含下列各節：

JSP 開發人員的設定檢查清單

設定系統 (JSP)

定義 Dreamweaver 網站 (JSP)

連線到範例資料庫 (JSP)


JSP 開發人員的設定檢查清單

若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中詳細描述。

設定系統：

  1. 確定您有網站伺服器。
  2. 安裝 JSP 應用程式伺服器。
  3. 建立根資料夾。

定義 Dreamweaver 網站：

  1. 複製範例檔案到硬碟上的資料夾。
  2. 將資料夾定義為 Dreamweaver 本機資料夾。
  3. 將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
  4. 指定要處理動態頁面的資料夾。
  5. 上傳範例檔案到網站伺服器。

連線到資料庫：

  1. 安裝 JDBC-ODBC 橋接驅動程式.
  2. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。
  3. 在 Dreamweaver 中建立連線。

相關主題

  • 設定系統 (JSP)
  • 定義 Dreamweaver 網站 (JSP)
  • 連線到範例資料庫 (JSP)


設定系統 (JSP)

本節針對兩種常用的系統設定提供指示：其中一種是將 Microsoft IIS 安裝於您的硬碟上，而另一種是將 IIS 安裝於遠端的 Windows 電腦上。如果您要使用不同的設定，請參閱「使用 Dreamweaver」中的設定網路應用程式。

下圖顯示本節所描述的兩種設定：

針對 Windows 使用者的本機設定，以及針對 Macintosh 及 Windows 使用者的遠端伺服器設定。

若要設定您的系統：

  1. 確定您有網站伺服器 (請參閱檢查網站伺服器)。
  2. 安裝 JSP 應用程式伺服器 (請參閱安裝 JSP 應用程式伺服器)。
  3. 建立根資料夾 (請參閱建立根資料夾)。

    注意

    安裝網站伺服器和應用程式伺服器的工作可以一次完成。


檢查網站伺服器

若要發展和測試動態網頁，您需要網站伺服器。網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。

確定硬碟或遠端 Windows 電腦上安裝且執行的是 Microsoft IIS (Macintosh 使用者需要在遠端 Windows 電腦上安裝 Microsoft IIS)。如果想要快速查出電腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。

如果未安裝 IIS，請現在安裝。如需相關說明，請參閱安裝網站伺服器。

安裝網站伺服器之後，請安裝應用程式伺服器 (請參閱安裝 JSP 應用程式伺服器)。


安裝 JSP 應用程式伺服器

若要處理動態網頁，您需要應用程式伺服器。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。當瀏覽器要求這類網頁時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送網頁給瀏覽器。如需詳細資訊，請參閱了解網路應用程式。

確定已安裝 JSP 應用程式伺服器且在執行 IIS 的系統上執行 (IIS 可能位在本機硬碟或遠端電腦上)。

如果您沒有 JSP 應用程式伺服器，可以從 Macromedia 網站下載並安裝功能齊全的 JSP 應用程式伺服器 - Macromedia JRun 開發人員版，網址為 www.macromedia.com/go/jrun/。

JRun 適用於 Windows 和 Macintosh。但是本手冊不介紹如何在 Macintosh 上使用 JRun。

若要安裝 JRun：

  1. 如果可以，請使用「管理員」帳號登入 Windows 系統。
  2. 關閉所有開啟的應用程式。
  3. 按兩下 JRun 開發人員版安裝程式檔。

    開頭顯示畫面便會出現。

  4. 如果系統上沒有「Java 執行階段環境」(JRE)，請選取開頭顯示畫面上的選項來安裝。

    由於 JRun 應用程式伺服器依賴 Java，所以必須在要執行應用程式伺服器的系統上，先安裝 JRE。安裝 JRE 之後，您就可以安裝 JRun 應用程式伺服器。

  5. 選取開頭顯示畫面上的選項來安裝 JRun。
  6. 依照螢幕上的說明，完成程式的安裝與測試。
  7. 完成安裝之後，請選取「開始＞程式集＞Macromedia JRun 4＞網站伺服器設定」，以建立 IIS 網站伺服器的 JRun 連接器。

    如需相關說明，請參閱 JRun 文件。

安裝及啟動 JRun 之後，請建立網路應用程式的根資料夾 (請參閱建立根資料夾)。


建立根資料夾

在安裝伺服器軟體之後，請針對執行 Microsoft IIS 系統的網路應用程式建立根資料夾，並確定此根資料夾有必要的權限。

若要建立網路應用程式的根資料夾：

  1. 在執行 IIS 的系統上，建立名為 MySampleApps 的資料夾。

    注意

    寫下這個資料夾名稱備用。稍後鍵入資料夾名稱時，大小寫必須和建立時用的完全相符。

    建立資料夾的建議位置為 C:\Inetpub\wwwroot\。依預設值，IIS 網站伺服器會設定將 Inetpub\wwwroot 資料夾內的網頁，提供做為伺服器網頁。網站伺服器將提供這個資料夾或其子資料夾中的任何頁面，回應網路瀏覽器所發出的 HTTP 要求。

  2. 若要確定該資料夾已啟用「讀取」和「指令碼」權限，請執行下列其中一項作業：
    1. 啟動 IIS 系統管理工具 (在 Windows XP 中選取「開始＞控制台」或「開始＞設定＞控制台」，然後按兩下「系統管理工具」，再按兩下「Internet Information Services」)。
    2. 依序展開「本機電腦」清單、「網站」資料夾和「預設網站」資料夾。
    3. 以滑鼠右鍵按一下 MySampleApps 資料夾，選取彈出式選單中的「屬性」。
    4. 確定有選取「執行許可權」彈出式選單中的「僅 Script」選項 (基於安全因素，請勿選取「Script 和執行檔」選項)。
    5. 按一下「確定」。

現在網站伺服器已在您根資料夾中設定完成提供伺服器網頁，回應網路瀏覽器所發出的 HTTP 要求。

設定系統之後，您必須定義 Dreamweaver 網站 (請參閱定義 Dreamweaver 網站 (JSP))。


定義 Dreamweaver 網站 (JSP)

設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站以管理檔案。

若要定義 Dreamweaver 網站：

  1. 將範例檔案複製到硬碟上的資料夾 (請參閱複製範例檔案)。
  2. 將資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。
  3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。
  4. 指定處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。
  5. 上傳範例檔案到網站伺服器 (請參閱上傳範例檔案)。


定義本機資料夾

複製 cafe_townsend 資料夾之後，將包含 JSP 範例檔案的資料夾定義為 Dreamweaver 本機資料夾。

若要定義 Dreamweaver 本機資料夾：

  1. 在 Dreamweaver 中，選取「網站＞管理網站」。在「管理網站」對話方塊中，按一下「新增」按鈕，然後選取「網站」。

    「網站定義」對話方塊便會出現。

  2. 如果是顯示「基本」索引標籤，請按一下「進階」索引標籤。
  3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend JSP。

    這個名稱在 Dreamweaver 中代表您的網站。

  4. 按一下「本機根資料夾」文字方塊旁的資料夾圖示，然後瀏覽至下列包含 JSP 範例檔案的資料夾：
    • C:\Documents and Setting\your_user_name\My Documents\local_sites\cafe_townsend \contact\jsp (Windows)
    • /Users/your_user_name/Documents/local_sites/cafe_townsend/contact/jsp (Macintosh)
  5. 按一下「選取」，完成定義 Dreamweaver 本機資料夾。

讓「網站定義」對話方塊保持開啟。接下來，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。


定義遠端資料夾

定義本機資料夾之後，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。

若要定義 Dreamweaver 遠端資料夾：

  1. 在「網站定義」對話方塊的「進階」索引標籤中，從「類別」清單中選取「遠端資訊」。

    「遠端資訊」畫面便會出現。

  2. 在「存取」彈出式選單中，選擇您要在伺服器之間來回移動檔案的方式：透過區域網路 (「本機/區域網路」選項) 或使用 FTP。

    注意

    「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需這些選項的詳細資訊，請參閱「使用 Dreamweaver」。
  3. 輸入您在建立根資料夾中所建立網站伺服器資料夾的路徑或 FTP 設定。

    資料夾可位在您的硬碟或遠端電腦上。即使資料夾是建立在您的硬碟上，該資料夾仍然應視為遠端資料夾。如果選擇了「本機/區域網路」存取，而且遠端資料夾是位於您的 Windows 硬碟上，下列範例顯示可能的「遠端資料夾」路徑：

    遠端資料夾：C:\Inetpub\wwwroot\MySampleApps

    如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」(說明＞使用 Dreamweaver」中的設定 FTP 存取的遠端選項。

讓「網站定義」對話方塊保持開啟。接下來，定義要處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。


指定可以處理動態網頁的位置

定義 Dreamweaver 遠端資料夾之後，請指定要處理動態網頁的資料夾。當您開發應用程式時，Dreamweaver 會使用這個資料夾顯示動態網頁並連線到資料庫。

若要指定處理動態頁面的資料夾：

  1. 在進階的「網站定義」對話方塊中，按一下「類別」清單中的「測試伺服器」。

    「測試伺服器」畫面便會出現。當您工作時，Dreamweaver 需要測試伺服器的服務以產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、開發用伺服器或實際執行生產伺服器，只要能處理 JSP 頁面即可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」類別相同的設定 (請參閱定義遠端資料夾)，因為這些設定指向能夠處理 JSP 頁面的伺服器。

  2. 從「伺服器模式」彈出式選單中選取 JSP。
  3. 在「存取」彈出式選單中，選取指定給存取遠端資料夾的相同方法 (「本機/區域網路」或 FTP)。

    Dreamweaver 便會輸入您在「遠端資訊」類別中指定的設定。讓設定保持不變。

  4. 在「URL 前置詞」文字方塊中，輸入您會在網路瀏覽器中輸入的根 URL，以要求網路應用程式的頁面。

    為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔，將它複製到網站的根資料夾並試圖使用 URL 前置詞要求它。

    Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接近的 URL 前置詞。但是，所建議的 URL 前置詞可能不正確。如果 Dreamweaver 中的建議是錯誤的，請更正或輸入新的 URL 前置詞。如需詳細資訊，請參閱「使用 Dreamweaver」中的設定 URL 前置詞。

    例如，如果「遠端資料夾」文字方塊中指定的資料夾是 C:\Inetpub\wwwroot\MySampleApps，那麼 URL 前置詞應該如下所示：

    http://localhost/MySampleApps/

    提示

    URL 前置詞永遠應該指定到一個目錄，而不要指定網站上的特定頁面。此外，大小寫必須和建立資料夾時使用的完全相符。
  5. 按一下「確定」，定義網站並關閉「網站定義」對話方塊，然後按一下「完成」，關閉「管理網站」對話方塊。

指定處理動態頁面的資料夾之後，將範例檔案上傳到網站伺服器 (請參閱上傳範例檔案)。


上傳範例檔案

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。即使網站伺服器是在本機電腦上執行，您也必須上傳檔案。

如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可能無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以「即時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁面時，按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。

若要上傳範例檔案到網站伺服器：

  1. 在「檔案」面板 (「視窗＞檔案」) 的「本機檢視」窗格中，選取網站的根資料夾。

    根資料夾是清單中的最上層資料夾。

  2. 在「檔案」面板工具列中按一下藍色「上傳檔案」箭頭圖示，確認要上傳整個網站。

    Dreamweaver 會將所有檔案複製到您在定義遠端資料夾中所定義的網站伺服器資料夾。

現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起安裝的範例資料庫 (請參閱建立資料庫連線)。


連線到範例資料庫 (JSP)

安裝時，Dreamweaver 會將 Microsoft Access 範例資料庫複製到您的硬碟。本節描述如何建立與範例資料庫的連線。

注意

如需連線到另一個資料庫的詳細資訊，請參閱「使用 Dreamweaver」中的適用於 JSP 開發人員的資料庫連線。

若要建立資料庫連線：

  1. 安裝橋接驅動程式 (請參閱安裝橋接驅動程式)。
  2. 如果使用遠端電腦做為伺服器，請將範例資料庫設定到遠端電腦 (請參閱設定資料庫 (遠端電腦上的伺服器))。
  3. 在 Dreamweaver 中建立連線 (請參閱建立資料庫連線)。


安裝橋接驅動程式

在嘗試連線到範例資料庫之前，請先在執行網站伺服器的電腦上安裝 Sun JDBC-ODBC Bridge 驅動程式。橋接驅動程式讓您使用 Windows 資料來源名稱 (DSN) 來建立連結。這個驅動程式隨附適用於 Windows 的 Sun Java 2 SDK 標準版。

若要知道您是否已經有 Java 2 SDK 以及這個驅動程式，請檢查硬碟中是否有下列其中一個目錄：

C:\jdk1.2.x

C:\jdk1.3.x

C:\j2sdk1.4.x

注意

「Java 2」一詞係指 Java 1.2 和更新版本。

如果您沒有 SDK，請從 Sun 網站下載，網址為 http://java.sun.com/j2se/。在下載安裝檔案之後，按兩下該檔案以執行安裝程式。依照螢幕上的說明，並確定已從「選取組件」對話方塊中選取「Java 2 執行階段環境」組件。依預設值，這個組件應該會選取。當您安裝 SDK 時，該驅動程式會自動安裝。

雖然在開發階段使用低階的資料庫系統，例如 Microsoft Access，就已經足夠，但是 Sun JDBC-ODBC Bridge 驅動程式並不適用於生產階段。例如，它一次只讓一個 JSP 頁面連結到資料庫 (即不支援多個執行緒同時使用)。如需有關驅動程式限制的詳細資訊，請參閱「Macromedia 支援中心」的 TechNote 17392，網址為 www.macromedia.com/go/17392。

安裝橋接驅動程式之後，請依需要設定資料庫 (請參閱設定資料庫 (遠端電腦上的伺服器))，然後在 Dreamweaver 中建立資料庫連線 (請參閱建立資料庫連線)。


設定資料庫 (遠端電腦上的伺服器)

本節僅適用於在遠端電腦上執行的網站伺服器。如果您的網站伺服器與 Dreamweaver 在同一部電腦一執行，請略過本節，直接跳至建立資料庫連線。

在嘗試連線到範例資料庫之前，請先在執行網站伺服器的遠端電腦上執行下列工作：將範例資料庫複製到電腦硬碟中，在電腦上建立指向資料庫的 DSN 並在電腦上安裝 Sun JDBC-ODBC Bridge 驅動程式。

若要在遠端電腦上設定範例資料庫：

  1. 將資料庫複製到遠端電腦的硬碟上。如果您將 Dreamweaver 安裝於預設的位置，則本機硬碟上資料庫檔案 (tutorial.mdb) 的路徑即如下所示：
    • C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb (Windows)
    • /Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend/data/tutorial.mdb (Macintosh)

    您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資料夾。

    注意

    如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問題。檔案不宜放在公用資料夾中。
  2. 確定 4.0 版或以上的 Microsoft Access 驅動程式已安裝在遠端電腦上。

    若要查出驅動程式是否已安裝，請參閱「使用 Dreamweaver」中的檢視安裝在 Windows 系統上的 ODBC 驅動程式。

    如果尚未安裝驅動程式，請下載並於遠端電腦上安裝 Microsoft Data Access Components (MDAC) 2.5 和 2.7 套件。您可以從 Microsoft 網站 (網址是 http://msdn.microsoft.com/data/mdac/downloads/) 免費下載 MDAC。這些套件包含最新的 Microsoft 驅動程式，包括 Microsoft Access 驅動程式。

    注意

    安裝 MDAC 2.7 之前，請先安裝 MDAC 2.5。
  3. 在遠端電腦上設定稱為 CafeTownsend 的 DSN，並指向範例資料庫。

    如需相關說明，請參閱 Microsoft 網站上的下列文章：

    • 如果遠端電腦執行 Windows 2000，請參閱文件 300596，網址為 support.microsoft.com/default.aspx?scid=kb;en-us;300596。
    • 如果遠端電腦執行 Windows XP，請參閱文件 305599，網址為 support.microsoft.com/default.aspx?scid=kb;en-us;305599。
  4. 確定遠端電腦上有安裝 Sun JDBC-ODBC Bridge 驅動程式。

    您將使用這個驅動程式以及 DSN，建立資料庫連結。如需相關說明，請參閱安裝橋接驅動程式。

妥當配置資料庫、DSN 和橋接驅動程式之後，請在 Dreamweaver 中建立資料庫連線 (請參閱建立資料庫連線)。


建立資料庫連線

設定流程的最後一個步驟是建立資料庫的連線。

若要在 Dreamweaver 中建立資料庫連線：

  1. 在 Dreamweaver 中開啟任何 JSP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。
  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「Sun JDBC-ODBC 驅動程式 (ODBC 資料庫)」。

    「Sun JDBC-ODBC 驅動程式 (ODBC 資料庫)」對話方塊便會出現。

  3. 輸入 connTownsend 做為連線名稱。
  4. (僅適用於 Windows) 請執行下列其中一項作業：
    • 如果伺服器執行於本機電腦上，請選取「使用這台電腦上的驅動程式」選項。
    • 如果伺服器執行於遠端系統上，請選取「使用測試伺服器上的驅動程式」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有的資料庫連結都是使用測試伺服器上的驅動程式。

  5. 將 URL 文字方塊中的 [odbc dsn] 預留位置取代為 CafeTownsend。

    URL 文字方塊應該看起來像這樣：

    jdbc:odbc:CafeTownsend

    如果您在 Windows 電腦上使用 Dreamweaver，在安裝期間，Dreamweaver 會建立指向 Dreamweaver 應用程式資料夾的 Microsoft Access 資料庫、名為 CafeTownsend 的 DSN。

  6. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請執行下列動作：

    • 重複檢查 DSN 和另一個連線參數。
    • 檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。
    • 請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的資料庫連線疑難排解。
  7. 按一下「確定」。

    「資料庫」面板中便會出現新的連線。

現在，JSP 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學課程使用。如需詳細資訊，請參閱教學課程：開發網路應用程式。


PHP 範例網站的設定

Macromedia Dreamweaver 8 有隨附 PHP 範例頁面，可以讓您建立小型的網路應用程式。本章將描述使用 Microsoft Internet Information Server (IIS) 設定範例應用程式的方法。如需關於這個網站伺服器的詳細資訊，請參閱安裝網站伺服器。如果您使用不同的網站伺服器，請參閱「使用 Dreamweaver」中的設定網路應用程式。

如果是 Macintosh 使用者，您可以使用與作業系統一起安裝的 Apache 網站伺服器和 PHP 應用程式伺服器，於本機系統中連接遠端 PHP 伺服器或開發 PHP 網站。如需設定資訊，請參閱下列網站：

  • http://developer.apple.com/internet/opensource/php.html
  • www.entropy.ch/software/macosx/php/

設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義 Dreamweaver 網站。第三，將應用程式連結到資料庫。這本設定手冊依照這三個步驟進行。

本章包含下列各節：

PHP 開發人員的設定檢查清單

設定系統 (PHP)

定義 Dreamweaver 網站 (PHP)

連線到範例資料庫 (PHP)


PHP 開發人員的設定檢查清單

若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中詳細描述。

設定系統：

  1. 確定您有網站伺服器。
  2. 安裝 PHP 應用程式伺服器。
  3. 測試安裝。
  4. 建立根資料夾。

定義 Dreamweaver 網站：

  1. 複製範例檔案到硬碟上的資料夾。
  2. 將資料夾定義為 Dreamweaver 本機資料夾。
  3. 將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
  4. 指定要處理動態頁面的資料夾。
  5. 上傳範例檔案到網站伺服器。

連線到資料庫：

  1. 建立 MySQL 範例資料庫。
  2. 在 Dreamweaver 中建立連線。

相關主題

  • 設定系統 (PHP)
  • 定義 Dreamweaver 網站 (PHP)
  • 連線到範例資料庫 (PHP)


設定系統 (PHP)

您必須先設定系統，才能執行 PHP 頁面。尤其要注意的是，您必須確定網站伺服器和 PHP 應用程式伺服器已經安裝並執行於系統上，然後必須建立 PHP 檔案的根資料夾。

本節包含下列主題：

  • 設定 Windows 系統 (PHP)
  • 設定 Macintosh 系統 (PHP)


設定 Windows 系統 (PHP)

本節針對兩種常用的 Windows 設定提供指示：其中一種是將 Microsoft IIS 安裝於您的硬碟上，而另一種是將 IIS 安裝於遠端的 Windows 電腦上。如果您要使用不同的設定，請參閱「使用 Dreamweaver」中的設定網路應用程式。

下圖顯示本節所描述的兩種設定：

針對 Windows 使用者的本機設定，以及針對 Macintosh 及 Windows 使用者的遠端伺服器設定。

若要設定您的系統：

  1. 確定您有網站伺服器 (請參閱檢查網站伺服器 (Windows))。
  2. 安裝 PHP 應用程式伺服器 (請參閱安裝 PHP 應用程式伺服器 (Windows))。
  3. 測試安裝 (請參閱測試安裝 PHP (Windows))。
  4. 建立根資料夾 (請參閱建立根資料夾 (Windows))。

    注意

    安裝網站伺服器和應用程式伺服器的工作可以一次完成。


檢查網站伺服器 (Windows)

若要發展和測試動態網頁，您需要網站伺服器。網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。

確定硬碟或遠端 Windows 電腦上安裝且執行的是 Microsoft IIS 如果想要快速查出電腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。

如果未安裝 IIS，請現在安裝。如需相關說明，請參閱安裝網站伺服器。

安裝網站伺服器之後，請安裝應用程式伺服器 (請參閱安裝 PHP 應用程式伺服器 (Windows))。


安裝 PHP 應用程式伺服器 (Windows)

若要處理動態網頁，您需要應用程式伺服器。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網頁。當瀏覽器要求這類網頁時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送網頁給瀏覽器。如需詳細資訊，請參閱了解網路應用程式。

確定已安裝 PHP 應用程式伺服器且在執行 IIS 的系統上執行 (IIS 可能位於硬碟或遠端 Windows 電腦上)。您可以從 PHP 網站 (網址是 www.php.net/downloads.php) 下載並安裝此伺服器。

對於 PHP 5，Windows 安裝程式依預設不會安裝或啟用讓 PHP 搭配 MySQL 資料庫伺服器使用的擴充功能。您必須手動安裝並啟用它。

若要在 Windows 系統上安裝 PHP 5：

  1. 如果可以，請使用「管理員」帳號登入 Windows 系統。
  2. 從 PHP 網站 (網址是 www.php.net/downloads.php) 下載 Windows PHP 5.x 安裝程式。
  3. 按兩下您所下載的安裝程式檔，並依照螢幕上的安裝指示執行。
  4. 成功安裝 PHP 之後，請從 PHP 網站 (網址是 www.php.net/downloads.php) 下載 Windows PHP 5.x zip 套件，然後在硬碟的暫存資料夾中解壓縮此套件。

    此 zip 套件包含與 MySQL 搭配使用所需的擴充功能。

  5. 在包含解壓縮檔案的暫存資料夾中，尋找名為 ext 的資料夾，並將它複製到 C:\PHP\ 資料夾。

    ext 資料夾包含常用的 PHP 擴充功能，包括 MySQL 擴充功能。

  6. 在 C:\Windows 資料夾中，尋找名為 php.ini 的檔案，並在「記事本」中開啟它。

    您必須編輯這個檔案，以啟用 MySQL 擴充功能。

  7. 在 php.ini 檔案中尋找下面這一行：

    extension_dir = "./"

    這一行會指定 PHP 尋找擴充功能的位置。

  8. 如下所示，編輯此行：

    extension_dir = "C:\PHP\ext\"

    提示

    請勿省略最後一個斜線。
  9. 在 php.ini 檔案中尋找下面這一行：

    ;extension=php_mysql.dll

    行首的分號 (;) 會告訴 PHP 忽略此行。

  10. 刪除行首分號，以啟用擴充功能。

    extension=php_mysql.dll

  11. 儲存並關閉 php.ini 檔案。
  12. 在包含解壓縮 PHP 檔案的暫存資料夾中，尋找名為 libmysql.dll 的檔案，並將它複製到 C:\Windows\system32 資料夾。

    IIS 需要這個檔案，才能與 PHP 5 和 MySQL 搭配使用。

  13. 重新啟動 IIS。

如需啟用 MySQL 擴充功能的詳細資訊，請參閱 PHP 網站，網址是 www.php.net/manual/en/ref.mysql.php。如需應用程式伺服器的詳細資訊，請參閱 PHP 文件，您可以從 PHP 網站下載該文件，網址為 www.php.net/download-docs.php。

安裝 PHP 之後，您可以測試伺服器以確定運作正常 (請參閱測試安裝 PHP (Windows))。


測試安裝 PHP (Windows)

您可以執行測試頁面來測試 PHP 應用程式伺服器。

若要測試 PHP 應用程式伺服器：

  1. 在 Dreamweaver 或任何文字編輯器中，建立純文字檔並命名為 timetest.php。
  2. 在這個檔案中，輸入下列程式碼：
    <p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

    此程式碼顯示在伺服器上處理頁面的時間。

  3. 將檔案複製到執行 IIS 的 Windows 電腦中的 C:\Inetpub\wwwroot 資料夾。
  4. 在網頁瀏覽器中，輸入測試網頁的 URL 然後按 Enter。

    如果您在本機電腦上安裝了 PHP，就可以輸入下列 URL：

    http://localhost/timetest.php

測試頁面應該會開啟及顯示一天中的時間，如下所示：

所指出的時間即稱為動態內容，因為只要您一要求頁面，它就變更一次。按一下瀏覽器上的「重新整理」按鈕，產生有不同時間的新頁面。

注意

查看原始碼 (Internet Explorer 中的「檢視＞原始檔」)，確定頁面並非使用任何用戶端的 JavaScript 來達到這個效果。

如果頁面未如預期般運作，請檢查以下可能的錯誤：

  • 檔案副檔名不是 .php。
  • 您在瀏覽器「位址」文字方塊上輸入了頁面的檔案路徑 (C:\Inetput\wwwroot\timetest.php)，而不是 URL (例如，http://localhost/timetest.php)。

    如果您在瀏覽器中輸入檔案路徑 (如您在一般 HTML 頁面中所做的動作)，您將略過網站伺服器和應用程式伺服器。因此，您的頁面將無法由伺服器處理。

  • URL 包含輸入錯誤。檢查錯誤並確定檔名之後未跟著斜線，例如 http://localhost/timetest.php/。
  • 頁面程式碼包含輸入錯誤。

安裝及測試伺服器軟體之後，請建立網路應用程式的根資料夾 (請參閱建立根資料夾 (Windows))。


建立根資料夾 (Windows)

在安裝伺服器軟體之後，請針對執行 Microsoft IIS 系統的網路應用程式建立根資料夾，並確定此根資料夾有必要的權限。

若要建立網路應用程式的根資料夾：

  1. 在執行 IIS 的系統上，建立名為 MySampleApps 的資料夾。

    注意

    寫下這個資料夾名稱備用。稍後鍵入資料夾名稱時，大小寫必須和建立時用的完全相符。

    建立資料夾的建議位置為 C:\Inetpub\wwwroot\。依預設值，IIS 網站伺服器會設定將 Inetpub\wwwroot 資料夾內的網頁，提供做為伺服器網頁。網站伺服器將提供這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽器所發出的 HTTP 要求。

  2. 若要確定該資料夾已啟用「讀取」和「指令碼」權限，請執行下列其中一項作業：
    1. 啟動 IIS 系統管理工具 (在 Windows XP 中選取「開始＞控制台」或「開始＞設定＞控制台」，然後按兩下「系統管理工具」，再按兩下「Internet Information Services」)。
    2. 依序展開「本機電腦」清單、「網站」資料夾和「預設網站」資料夾。
    3. 以滑鼠右鍵按一下 MySampleApps 資料夾，選取彈出式選單中的「屬性」。
    4. 確定有選取「執行許可權」彈出式選單中的「僅 Script」選項 (基於安全因素，請勿選取「Script 和執行檔」選項)。
    5. 按一下「確定」。

現在網站伺服器已在您根資料夾中設定完成提供伺服器網頁，回應網路瀏覽器所發出的 HTTP 要求。

設定系統之後，您必須定義 Dreamweaver 網站 (請參閱定義 Dreamweaver 網站 (PHP))。


設定 Macintosh 系統 (PHP)

如果是 Macintosh 使用者，您可以使用與作業系統一起安裝的 Apache 網站伺服器和 PHP 應用程式伺服器，於您的電腦中執行 PHP 頁面。設定系統的動作包含：確定網站伺服器和 PHP 應用程式伺服器是在正常運作中，然後建立 PHP 檔案的根資料夾。

本節包含下列主題：

  • 測試安裝 PHP (Macintosh)
  • 建立根資料夾 (Macintosh)

如需 Macintosh 版本 Apache 和 PHP 的詳細資訊，請參閱下列網站：

  • http://developer.apple.com/internet/opensource/php.html
  • www.entropy.ch/software/macosx/php/


測試安裝 PHP (Macintosh)

您可以在 Macintosh 上執行測試頁面來測試 Apache 網站伺服器和 PHP 應用程式伺服器。

不過，若要使用網站伺服器來服務 PHP 頁面和 MySQL 資料庫內容，您必須先設定伺服器才能使用 PHP 和 MySQL。如需這個程序的詳細資訊，請參閱 www.macromedia.com/go/php_macintosh。

若要測試 Apache 網站伺服器和 PHP 應用程式伺服器：

  1. 依照 Macromedia 網站上文件的說明，設定伺服器。
  2. 在 Dreamweaver 或任何文字編輯器中，建立純文字檔並命名為 timetest.php。
  3. 在這個檔案中，輸入下列程式碼：
    <p>This page was created at <b>
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

    此程式碼顯示在伺服器上處理頁面的時間。

  4. 將檔案複製到 Macintosh 中的 /Users/your_user_name/Sites 資料夾。

    這個 Sites 資料夾是您個人的 Apache 網站伺服器根資料夾。

  5. 在網路瀏覽器中，輸入下列 URL 並按 Return：

    http://localhost/~your_user_name/timetest.php

測試頁面應該會開啟及顯示一天中的時間。

所指出的時間即稱為動態內容，因為只要您一要求頁面，它就變更一次。按一下瀏覽器上的「重新整理」按鈕，產生有不同時間的新頁面。

注意

查看原始碼 (Safari 中的「檢視＞檢視原始檔」)，確定頁面並非使用任何用戶端的 JavaScript 來達到這個效果。

如果頁面未如預期般運作，請檢查以下可能的錯誤：

  • 檔案副檔名不是 .php。
  • URL 包含輸入錯誤。檢查錯誤並確定檔名之後未跟著斜線，例如 http://localhost/~your_user_name/timetest.php/。同時也請確認在使用者名稱前有波狀符號 (~)。
  • 頁面程式碼包含輸入錯誤。
  • Apache 伺服器尚未執行。查看「共用」類別中的「系統偏好設定」，看看是否已經啟用「個人網頁共用」。

測試及測試伺服器軟體之後，請建立網路應用程式的根資料夾 (請參閱建立根資料夾 (Macintosh))。


建立根資料夾 (Macintosh)

安裝伺服器軟體之後，請在 Macintosh 中建立網路應用程式的根資料夾。

若要建立網路應用程式的根資料夾：

  • 在 /Users/your_user_name/Sites 資料夾中建立稱為 MySampleApps 的資料夾。

    Apache 將處理這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽器所發出的 HTTP 要求。

設定系統之後，您必須定義 Dreamweaver 網站 (請參閱定義 Dreamweaver 網站 (PHP))。


定義 Dreamweaver 網站 (PHP)

設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站以管理檔案。

若要定義 Dreamweaver 網站：

  1. 將範例檔案複製到硬碟上的資料夾 (請參閱複製範例檔案)。
  2. 將資料夾定義為 Dreamweaver 本機資料夾 (請參閱定義本機資料夾)。
  3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。
  4. 指定處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置 (PHP))。
  5. 上傳範例檔案到網站伺服器 (請參閱上傳範例檔案)。


定義本機資料夾

複製 cafe_townsend 資料夾之後，將包含 PHP 範例檔案的資料夾定義為 Dreamweaver 本機資料夾。

若要定義 Dreamweaver 本機資料夾：

  1. 在 Dreamweaver 中，選取「網站＞管理網站」。在「管理網站」對話方塊中，按一下「新增」按鈕，然後選取「網站」。

    「網站定義」對話方塊便會出現。

  2. 如果是顯示「基本」索引標籤，請按一下「進階」索引標籤。
  3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend PHP。

    這個名稱在 Dreamweaver 中代表您的網站。

  4. 按一下「本機根資料夾」文字方塊旁的資料夾圖示，然後瀏覽至下列包含 PHP 範例檔案的資料夾：
    • C:\Documents and Setting\your_user_name\My Documents\local_sites\cafe_townsend\contact\php (Windows)
    • /Users/your_user_name/Documents/local_sites/cafe_townsend/contact/php (Macintosh)
  5. 按一下「選取」，完成定義 Dreamweaver 本機資料夾。

讓「網站定義」對話方塊保持開啟。接下來，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。


定義遠端資料夾

定義本機資料夾之後，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。

若要定義 Dreamweaver 遠端資料夾：

  1. 在「網站定義」對話方塊的「進階」索引標籤中，從「類別」清單中選取「遠端資訊」。

    「遠端資訊」畫面便會出現。

  2. 在「存取」彈出式選單中，選擇您要在伺服器之間來回移動檔案的方式：透過區域網路 (「本機/區域網路」選項) 或使用 FTP。

    注意

    「存取」彈出式選單中尚有其他選項，但本章並不會討論這些選項。如需這些選項的詳細資訊，請參閱「使用 Dreamweaver」。
  3. 輸入您在建立根資料夾 (Windows) 中所建立網站伺服器資料夾的路徑或 FTP 設定。

    資料夾可位在您的硬碟或遠端電腦上。即使資料夾是建立在您的硬碟上，該資料夾仍然應視為遠端資料夾。如果選擇了「本機/區域網路」存取，而且遠端資料夾是位於您的 Windows 硬碟上，下列範例顯示可能的「遠端資料夾」路徑：

    遠端資料夾：C:\Inetpub\wwwroot\MySampleApps

    在 Macintosh 上，資料夾應該如下所示：

    遠端資料夾：/Users/your_user_name/Sites/MySampleApps

    如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」中的設定 FTP 存取的遠端選項。

讓「網站定義」對話方塊保持開啟。接下來，定義要處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置 (PHP))。


指定可以處理動態網頁的位置 (PHP)

定義 Dreamweaver 遠端資料夾之後，請指定要處理動態網頁的資料夾。當您開發應用程式時，Dreamweaver 會使用這個資料夾顯示動態網頁並連線到資料庫。

若要指定處理動態頁面的資料夾：

  1. 在進階的「網站定義」對話方塊中，按一下「類別」清單中的「測試伺服器」。

    「測試伺服器」畫面便會出現。當您工作時，Dreamweaver 需要測試伺服器的服務以產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、開發用伺服器或實際執行伺服器，只要能處理 ASP 頁面即可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」類別相同的設定 (請參閱定義遠端資料夾)，因為這些設定指向能夠處理 PHP 頁面的伺服器。

  2. 從「伺服器模式」彈出式選單中選取「PHP MySQL」。
  3. 在「存取」彈出式選單中，選取指定給存取遠端資料夾的相同方法 (「本機/區域網路」或 FTP)。

    Dreamweaver 便會輸入您在「遠端資訊」類別中指定的設定。讓設定保持不變。

  4. 在「URL 前置詞」文字方塊中，輸入您會在網路瀏覽器中輸入的根 URL，以要求網路應用程式的頁面。

    為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔，將它複製到網站的根資料夾並試圖使用 URL 前置詞要求它。

    Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接近的 URL 前置詞。但是，所建議的 URL 前置詞可能不正確。如果 Dreamweaver 中的建議是錯誤的，請更正或輸入新的 URL 前置詞。如需詳細資訊，請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」中的設定 URL 前置詞。

    對於 Windows 中的 PHP 範例內容，前置詞應該如下所示：

    URL 前置詞：http://localhost/MySampleApps/

    在 Macintosh 上，前置詞應該如下所示：

    URL 前置詞：http://localhost/~your_user_name/MySampleApps/

    提示

    URL 前置詞永遠應該指定到一個目錄，而不要指定網站上的特定頁面。此外，大小寫必須和建立資料夾時使用的完全相符。
  5. 按一下「確定」，定義網站並關閉「網站定義」對話方塊，然後按一下「完成」，關閉「管理網站」對話方塊。

指定處理動態頁面的資料夾之後，將範例檔案上傳到網站伺服器 (請參閱上傳範例檔案)。


上傳範例檔案

指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。即使網站伺服器是在本機電腦上執行，您也必須上傳檔案。

如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可能無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以「即時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁面時，按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。

若要上傳範例檔案到網站伺服器：

  1. 在「檔案」面板 (「視窗＞檔案」) 的「本機檢視」窗格中，選取網站的根資料夾。

    根資料夾是清單中的最上層資料夾。

  2. 在「檔案」面板工具列中按一下藍色「上傳檔案」箭頭圖示，確認要上傳整個網站。

    Dreamweaver 會將所有檔案複製到您在定義遠端資料夾中所定義的網站伺服器資料夾。

現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起安裝的範例資料庫 (請參閱連線到範例資料庫 (PHP))。


連線到範例資料庫 (PHP)

安裝時，Dreamweaver 會將 SQL Script 複製到您的硬碟。您可以使用這個 Script 自動建立範例 MySQL 資料庫。本節描述如何建立與範例資料庫的連線。

本節假設您已經在本機或遠端電腦上安裝並設定 MySQL。若要下載並安裝資料庫系統，請造訪 MySQL 網站，網址為 www.mysql.com。

若要建立資料庫連線：

  1. 使用 SQL Script 建立 MySQL 範例資料庫 (請參閱建立 MySQL 資料庫)。
  2. 在 Dreamweaver 中建立連線 (請參閱建立資料庫連線)。


建立 MySQL 資料庫

Dreamweaver 範例檔案包含 SQL Script，可以建立及填入 MySQL 範例資料庫。

在開始之前，確定 MySQL 已在您的本機或遠端電腦上安裝且設定好。請從 MySQL 網站 (網址是 http://dev.mysql.com/downloads/) 下載最新版本。為了開發目的，請下載並安裝 MySQL 資料庫伺服器的 Windows Essentials 版。

若要建立範例 MySQL 資料庫：

  1. 將 SQL Script 檔案 insert.sql 複製到有安裝 MySQL 的電腦中的適當資料夾。

    如果您將 Dreamweaver 安裝於預設的位置，Script 檔案的路徑即如下所示：

    • C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\insert.sql (Windows)
    • /Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend/data/insert.sql (Macintosh)

    如果是在 Windows 電腦上執行 MySQL，請將 insert.sql Script 複製到 Program Files\MySQL\MySQL Server 4.x\bin。如果是在 Macintosh 電腦上執行 MySQL，請將 insert.sql Script 複製到主資料夾的 Documents 資料夾中。

  2. 在已安裝 MySQL 的電腦上，啟動 MySQL Command Line Client (Windows) 或 Terminal (Macintosh)。
    • 在 Windows 上，選取「開始＞MySQL＞MySQL Server 4.x＞MySQL Command Line Client」，以啟動 MySQL Command Line Client。
    • 在 Macintosh 上，您可以到「應用程式」資料夾中開啟「公用程式」資料夾，並且按兩下 Terminal，以啟動 Terminal。
  3. 在 Windows，輸入使用者名稱 (如果有的話) 和密碼，然後按 Enter 鍵。

    MySQL 用戶端命令提示便會出現，如下所示：

    mysql>
  4. 在 Macintosh 上，輸入下列命令：
    mysql -uUser -pPassword

    例如，如果您的 MySQL 使用者名稱 (也稱為帳號名稱) 和密碼為 Tara 和 Telly3，請輸入下列命令：

    mysql -uTara -pTelly3

    如果您沒有密碼，請如下所示省略 -p 引數：

    mysql -uTara

    如果您在設定 MySQL 安裝時沒有定義使用者名稱，請如下所示輸入 root 當做使用者名稱：

    mysql -uroot

    MySQL 用戶端命令提示便會出現，如下所示：

    mysql>
  5. 在 MySQL 提示處輸入下列命令，建立新資料庫：
    mysql>CREATE DATABASE CafeTownsend;

    MySQL 會建立新的資料庫，但尚未包含任何表格或記錄。

  6. 在提示處輸入下列命令，登出 MySQL 用戶端：
    mysql>quit;
  7. (Windows) 選取「開始＞執行」，並在「執行」對話方塊中輸入 cmd，以開啟 Windows 命令提示字元。
  8. 在系統命令提示中，填入 MySQL 中的新 CafeTownsend 資料庫。

    在 Windows 中，使用下列命令：

    cd \
cd Program Files\MySQL\MySQL Server 4.x\bin
mysql -uUser -pPassword CafeTownsend < insert.sql

    在 Macintosh 上，使用下列命令：

    mysql -uUser -pPassword CafeTownsend < ~/Documents/insert.sql

    這個命令使用 insert.sql 檔案，將表格和記錄新增至您在步驟 5 所建立的 CafeTownsend 資料庫。

建立 MySQL 資料庫之後，在 Dreamweaver 中建立連至該資料庫的資料庫連線 (請參閱建立資料庫連線)。


建立資料庫連線

設定流程的最後一個步驟是建立資料庫的連線。

若要在 Dreamweaver 中建立資料庫連線：

  1. 在 Dreamweaver 中開啟任何 PHP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。
  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「MySQL 連線」。

    「MySQL 連結」對話方塊便會出現，

  3. 輸入 connTownsend 做為連線名稱。
  4. 在「MySQL 伺服器」文字方塊中，指定裝載 MySQL 的電腦。

    輸入 IP 位址或伺服器名稱。如果 MySQL 與 Dreamweaver 在同一台電腦上執行時，請輸入 localhost。

  5. 輸入 MySQL 使用者名稱和密碼。

    如果設定 MySQL 安裝時並未定義使用者名稱，請在「使用者名稱」中輸入 root。如果您沒有密碼，請如下所示讓「密碼」文字方塊空白。

  6. 在「資料庫」文字方塊中，輸入 CafeTownsend。

    CafeTownsend 是您所建立的 MySQL 範例資料庫名稱 (請參閱建立 MySQL 資料庫)。

  7. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請執行下列動作：

    • 請重複檢查伺服器名稱、使用者名稱和密碼。
    • 檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置 (PHP))。
    • 請參閱「使用 Dreamweaver」(「說明＞使用 Dreamweaver」) 中的資料庫連線疑難排解。
  8. 按一下「確定」。

    「資料庫」面板中便會出現新的連線。

現在，PHP 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學課程使用。如需詳細資訊，請參閱教學課程：開發網路應用程式。


Dreamweaver 基本概念

了解如何使用 Macromedia Dreamweaver 8 文件與其他資源，並設定 Dreamweaver 工作區，以配合您偏好的工作方式。接著規畫並設定網站，然後開始建立網頁。

這部份包含下列各章：

簡介

探索工作區

設定 Dreamweaver 網站

建立和開啟文件


簡介

Macromedia Dreamweaver 8 是用來設計、撰寫和開發網站、網頁及網路應用程式的專業 HTML 編輯器。不論您喜歡手動撰寫 HTML 程式碼的控制感，或是喜歡在視覺編輯環境下工作，Dreamweaver 都能提供實用的工具，增強您的網路建立經驗。

Dreamweaver 中的視覺編輯功能讓您在不撰寫任何一行程式碼的情況下就可以快速建立網頁。您可以檢視所有網站項目或資源，並將它們從方便使用的面板直接拖曳到文件中。您可以在 Macromedia Fireworks 或其他圖形應用程式中建立和編輯影像，然後將它們直接匯入到 Dreamweaver，或新增 Macromedia Flash 物件，來簡化開發工作流程。

Dreamweaver 也提供了功能完整的程式碼撰寫環境，包括程式碼編輯工具 (如程式碼色彩標示和標籤完成) 及階層式樣式表 (CSS) 語言參考資料、JavaScript 和 ColdFusion 標記語言 (CFML) 等等。Macromedia Roundtrip HTML 技術不需要重新格式化程式碼，就可以匯入您手動撰寫的 HTML 文件，然後您可以使用偏好的格式樣式來重新格式化程式碼。

Dreamweaver 也能讓您使用如 CFML、ASP.NET、ASP、JSP 和 PHP 等伺服器技術，建立動態支援資料庫的網路應用程式。

Dreamweaver 可以完全自訂。您可以建立自己的物件和命令、修改快速鍵、甚至撰寫 JavaScript，用新的行為、「屬性」檢視窗和網站報告來擴充 Dreamweaver 功能。

本章包含下列各節：

Dreamweaver 8 新增功能

從何開始

Dreamweaver 建立網站的工作流程

與其他應用程式配合使用 Dreamweaver

Dreamweaver 和輔助功能

Dreamweaver 教學媒體輔助

印刷慣例

HTML 和網路技術資源


Dreamweaver 8 新增功能

Dreamweaver 8 所包含的各種新功能擴大了適用範圍，而且無論您是使用設計或撰寫程式碼的環境，這些功能都能幫助您建立頁面。

第一，Dreamweaver 8 提供最佳實作及業界標準方面的支援，包括支援 CSS 進階用法、XML 和 RSS 反饋，以及輔助功能需求。

運用最佳實作
處理 XML 資料的視覺撰寫工具 | 使用功能強大的視覺工具將反饋作業整合至工作、揭開 XML 與 HTML 之間轉譯的神秘面紗，迎頭趕上 XML 風行潮流。運用簡便的拖放工作流程，將 XML 式資料 (如 RSS 反饋) 整合至網頁。跳到「程式碼」檢視，使用改良的 XML 和 XSLT 程式碼提示來自訂轉換。如需詳細資訊，請參閱在網頁中顯示 XML 資料。
新型而一致的 CSS 面板 | 使用新型而一致的 CSS 面板，透過視覺方式集中學習、了解和處理套用到網頁的 CSS 樣式。所有的 CSS 功能都已增強且合併為單一面板集，可協助您更容易且更有效率地處理 CSS 樣式。新的介面讓您更加容易檢視套用於特定元素的樣式階層，因此您可以輕易地識別定義在各處的屬性。屬性格線則有助於加快編輯速度。如需詳細資訊，請參閱使用 CSS 樣式面板。
CSS 版面視覺化 | 在設計階段運用視覺輔助來配置 CSS 版面邊框或為 CSS 版面上色。運用視覺輔助呈現複雜的巢狀配置和簡化選取操作。按一下 CSS 版面即可取得寶貴的工具提示，能幫助您瞭解設計的各種控制元素。請參閱使用 CSS 配置頁面。
樣式呈現方式工具列 | 由於新增了對 CSS 媒體類型的支援，不論傳遞機制如何，使用者都是以同樣的方式檢視內容。使用「樣式呈現方式」工具列切換到「設計」檢視，即可查看樣式在列印時、顯示於掌上型設備或螢幕上的樣子。請參閱樣式呈現方式工具列。
增強的 CSS 呈現方式 | 由於大幅增強了「設計」檢視的精確度，即使再複雜的 CSS 版面也能完美地呈現於大多數瀏覽器。Dreamweaver 如今完全支援進階的 CSS 技術，如溢位、虛擬元素和表單元素。
輔助功能：支援 WCAG/W3C 第二優先檢查點 | 如今 Dreamweaver 除了擁有符合 508 節和 WCAG 第一優先檢查點規範的整合式輔助功能評估工具，還附帶了包含 WCAG 第二優先檢查點的更新式評估工具，將同時支援 CSS 和輔助功能。
增強的 WebDAV | Dreamweaver 8 中的 WebDAV 如今支援摘要式驗證和 SSL 以提供安全的檔案傳輸，並支援更大規模的伺服器陣列以改善連線能力。請參閱使用 WebDAV 存回及取出檔案。

最佳化的使用者工作流程有助於縮短完成一般工作所需的時間，讓您達到事半功倍的效果。Dreamweaver 8 排除了各種繁雜瑣事，因此您可以將更多時間投注於設計和開發全方位的網站及應用程式。

事半功倍
背景檔案傳輸 | 當 Dreamweaver 8 上傳檔案到伺服器時，您還可以繼續工作。如需詳細資訊，請參閱管理檔案傳輸。
縮放 | 運用縮放從更多方面來控制您的設計。放大顯示後檢查影像或配置複雜的巢狀表格版面。縮小顯示則可預覽頁面的外觀。如需詳細資訊，請參閱放大和縮小顯示。
導引線 | 使用導引線測量頁面版面，以超高精確度的像素單位來比較頁面版面和頁面排版。視覺回應效果可協助您精確地測量距離，而且支援智慧型貼齊操作。如需詳細資訊，請參閱使用導引線。
編碼工具列 | 新的「編碼」工具列位於「程式碼」檢視的邊緣，包含一排按鈕以供您取用常用的程式碼撰寫功能。如需詳細資訊，請參閱使用「編碼」工具列快速插入程式碼。
程式碼收合 | 藉由隱藏及展開程式碼區塊，將焦點只集中在您想查看的程式碼。如需詳細資訊，請參閱收合與展開程式碼片段。
工作區版面 | 自訂和儲存工作區設定。Dreamweaver 8 依據設計人員和程式碼撰寫人員的需要，量身訂製了四種不同的設定。您也可以建立自訂工作區。如需詳細資訊，請參閱儲存自訂工作區版面。
Mac 專用外框包圍的檔案 | 專為 Mac 所新增的文件索引標籤既有助於簡化使用者介面，也使得選取文件更加容易。如需詳細資訊，請參閱顯示外框包圍的檔案 (Macintosh)。
新增初學者頁面 | 新的版面和設計讓您能夠迅速地建立網站。
改良的網站同步化及存回/取出 | 管理網站時享有更高的穩定度和信賴感。改良的網站同步功能可協助確保使用中的檔案永遠是最新的版本。使用改良的存回/取出功能來防止意外覆寫其他人的作品。如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。
比較檔案 | 迅速比較檔案以找出變更的部分。您可以比較兩個本機檔案、分別位於本機電腦和遠端電腦的兩個檔案，或位於遠端電腦的兩個檔案。在 Macintosh 和 Windows 平台上，搭配 Dreamweaver 使用您最偏好的檔案比較工具。如需詳細資訊，請參閱比較檔案差異。
貼上特殊效果 | 您可以在 Dreamweaver 中使用新的貼上選項，以保留您在 Microsoft Word 中建立的所有原始碼格式，或是僅貼上文字。如需詳細資訊，請參閱新增文字到文件。
網站相對參考 | 確保參考是相對於網站而非本機檔案，以在設計階段和執行階段緊密結合伺服器端包含。如需詳細資訊，請參閱設定新連結的相對路徑。
增強的程式碼編輯環境 | 配合您的程式碼撰寫風格，更有效地控制 Dreamweaver 提供程式碼提示和完成標籤的方式。如需詳細資訊，請參閱設定程式碼提示偏好設定選項。

Dreamweaver 8 盡力輔助使用者學習並善加利用新技術，包括 PHP 5、Flash Video、ColdFusion MX 7 和 Macromedia Web Publishing System。

整合最新技術和標準
支援 ColdFusion MX 7 | 更新的 ColdFusion MX 7 支援，包含新的伺服器行為和程式碼提示。為使程式碼提示和除錯能與正確的 ColdFusion 版本一致，Dreamweaver 第一次連到網站時會自動偵測伺服器版本。由於 Dreamweaver 與 ColdFusion 之間密切整合，您可以直接從「資料庫」面板新增和移除資料庫，並且只檢視目前網站上定義的 ColdFusion 組件。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。
支援 PHP 5 | 善加利用更新的 PHP 5 支援，包含伺服器行為和程式碼提示。
Flash 視訊 | 迅速而輕易地將 Flash 視訊檔案插入網頁。如需詳細資訊，請參閱插入 Flash 視訊內容。
Macromedia Web Publishing System：通知與事件記錄 | 持續追蹤網站內所發生的任何事件。Dreamweaver 中的事件會通知 Macromedia Web Publishing System 伺服器，因此位於 WPS 系統的網站所發生的一切變更都將記錄下來。
更新 O'Reilly 所提供的參考資料 | 諮詢新的 XML、XSLT 和 XPath 參考內容，以及 ASP 和 JSP 的更新內容。


從何開始

Dreamweaver 文件包含各種不同背景的讀者所需的資訊。若要充分利用這份文件，請從最適合您的部分開始閱讀。

如需有關 Dreamweaver 資源的資訊，請參閱 Dreamweaver 教學媒體輔助。

本節包含下列主題：

  • 網路設計初學者
  • 有經驗的網路設計人員
  • 有經驗的程式設計師
  • 網路應用程式開發人員


網路設計初學者

如果您是網路設計上相當新的初學者，本節指出 Dreamweaver 文件中非常適合您背景的章節。

對於網路設計初學者：

  1. 請先閱讀「Dreamweaver 入門」中的教學課程。
  2. 在「使用 Dreamweaver」中 (「說明＞使用 Dreamweaver」)，請閱讀探索工作區、設定 Dreamweaver 網站、管理檔案和建立和開啟文件。
  3. 請閱讀在版面模式中配置頁面，了解有關頁面版面的資訊。
  4. 若要了解關於在網頁中格式化文字和加入影像的資訊，請閱讀插入和格式化文字和插入影像。

這就是您要開始製作高品質網站所真正需要做的事，但是當您準備好要了解如何使用進階工具時，可以依序閱讀「使用 Dreamweaver 說明」靜態網頁章節的其他部分。最好等到比較熟悉如何建立網頁之後再閱讀動態網頁章節。


有經驗的網路設計人員

如果您是有經驗的網路設計人員，本節指出 Dreamweaver 文件中非常適合您背景的小節。這裡有兩種不同的方式：一種是提供給剛接觸 Dreamweaver 的設計人員，而一種是提供給熟悉 Dreamweaver 但想要學習更多有關建立動態網頁資訊的設計人員。

對於有經驗但是新接觸 Dreamweaver 的網路設計人員：

  1. 請先閱讀「Dreamweaver 入門」中的教學課程。
  2. 在「使用 Dreamweaver」中，請閱讀探索工作區，了解更多有關 Dreamweaver 使用者介面的資訊。
  3. 雖然設定 Dreamweaver 網站和管理檔案中的許多資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網站的章節。
  4. 如需有關使用 Dreamweaver 建立基本 HTML 網頁的有用詳細資訊，請閱讀插入和格式化文字和插入影像。
  5. 如需在 Dreamweaver 中撰寫程式碼的資訊，請參閱設定程式碼撰寫環境、在 Dreamweaver 中撰寫程式碼、程式碼最佳化和除錯和在設計檢視中編輯程式碼。
  6. 請閱讀「使用 Dreamweaver」中其他各章開頭處的綜覽，來決定您是否對其主題感興趣。

對於有經驗、熟悉 Dreamweaver，並且想要了解更多有關建立動態網頁資訊的網路設計人員：

  1. 請先閱讀「Dreamweaver 入門」中的了解網路應用程式和教學課程：開發網路應用程式。
  2. 在「使用 Dreamweaver」中，請略讀探索工作區，了解有關 Dreamweaver 使用者介面新概念的資訊，再閱讀最佳化視覺開發的工作區。
  3. 若要熟悉 Dreamweaver 的動態網頁工作流程，請閱讀動態網頁設計的工作流程。
  4. 設定網路伺服器和應用程式伺服器 (請參閱設定網路應用程式)。
  5. 連線到資料庫。(請參閱連線到資料庫)。
  6. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主題感興趣。
  7. 如果您對手動自訂 Dreamweaver 有興趣，請閱讀「Macromedia 支援中心」上的「自訂 Dreamweaver」，網址為 www.macromedia.com/go/customizing_dreamweaver_tw。如果您想要撰寫 Dreamweaver 的擴充功能，請閱讀「擴充 Dreamweaver 功能」。


有經驗的程式設計師

如果您是有經驗的程式碼撰寫者，本節指出 Dreamweaver 文件中非常適合您背景的小節。

對於有經驗的程式設計師：

  1. 在「使用 Dreamweaver」中，請閱讀探索工作區，了解更多有關 Dreamweaver 使用者介面的資訊。
  2. 雖然設定 Dreamweaver 網站和管理檔案中的許多資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網站的章節。
  3. 請閱讀設定程式碼撰寫環境、在 Dreamweaver 中撰寫程式碼、程式碼最佳化和除錯和在設計檢視中編輯程式碼中更多有關使用 Dreamweaver 撰寫程式碼的資訊。
  4. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主題感興趣。


網路應用程式開發人員

如果您是網路應用程式開發人員，本節指出 Dreamweaver 文件中最適合您背景的小節。這裡有兩種不同的方式，視您先前是否使用過 Dreamweaver 而定。

對於沒有使用過 Dreamweaver 的網路應用程式開發人員：

  1. 請先快速閱讀「Dreamweaver 入門」，以熟悉 Dreamweaver 的基本使用概念。
  2. 在「使用 Dreamweaver」中，請閱讀探索工作區，了解更多有關 Dreamweaver 使用者介面的資訊。
  3. 雖然設定 Dreamweaver 網站和管理檔案中的許多資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網站的章節。
  4. 使用 Dreamweaver 設定網路伺服器和應用程式伺服器 (請參閱設定網路應用程式)。
  5. 連線到資料庫 (請參閱連線到資料庫)。
  6. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主題感興趣。

對於有經驗並且使用過 Dreamweaver 的網路應用程式開發人員：

  1. 請先閱讀 Dreamweaver 8 新增功能。
  2. 在「使用 Dreamweaver」中，請略讀探索工作區，了解有關 Dreamweaver 使用者介面新概念的資訊。
  3. 如果您對手動自訂 Dreamweaver 有興趣，請閱讀「Macromedia 支援中心」上的「自訂 Dreamweaver」，網址為 www.macromedia.com/go/customizing_dreamweaver_tw。如果您想要撰寫 Dreamweaver 的擴充功能，請閱讀「擴充 Dreamweaver 功能」。


Dreamweaver 建立網站的工作流程

有很多方式可以建立網站。本文件中所述工作流程的第一步是從定義網站策略或目標開始。如果要開發網路應用程式，您必須視需要設定伺服器和資料庫，然後再設計網站的外觀和感覺。設計完成時，您就可以建立網站和撰寫網頁，新增內容和互動性；然後可以將網頁連結在一起，並測試網站的功能，及查看它是否符合定義的目標。您也可以將動態網頁包含在您的網站中。在這個循環的最後，您可將網站發佈到伺服器上。很多開發人員也會安排定期維護，確保網站保持最新狀態和實用功能。

本節包含下列主題：

  • 規劃網站
  • 管理網站檔案
  • 配置網頁
  • 將內容新增至頁面
  • 撰寫程式碼
  • 設定網路應用程式
  • 建立動態網頁
  • 快速應用程式開發


規劃網站

從一開始就仔細地規劃和組織您的網站便可以省去之後的時間。組織您的網站不只包括決定檔案存放的位置，也包括檢查網站需求、使用者設定檔和網站目標。此外，您應該考量如使用者存取、瀏覽器、外掛程式和下載限制等技術需求。

在您組織資訊並決定結構之後，就可以開始建立網站。

  • 請使用 Dreamweaver「檔案」面板來設定網站的組織化結構。在「檔案」面板中，便可以輕易地新增、刪除和重新命名檔案及資料夾，依照需要來變更組織 (請參閱設定 Dreamweaver 網站和管理檔案)。
  • 您可以先從建立簡單的網頁開始，之後再往更複雜的設計發展。根據預先設計好的頁面設計建立新的空白頁 (請參閱建立和開啟文件)。

如果您是在網路開發小組中工作，您可能也會對這些主題感興趣：

  • 設定系統來防止小組成員覆寫彼此的檔案 (請參閱存回和取出檔案)。
  • 使用「設計備註」來與網路小組成員聯繫 (請參閱在設計備註中儲存檔案資訊)。


管理網站檔案

Dreamweaver 的「檔案」和「資源」面板讓您可以更加容易地管理網站檔案。

  • 在 Dreamweaver「檔案」面板中，您會發現很多工具可以協助管理網站、在遠端伺服器間往來傳送檔案、設定「存回/取出」程序防止檔案覆寫，以及同步化本機和遠端網站上的檔案 (請參閱管理檔案)。
  • 使用「資源」面板可輕易地組織網站中的資源；然後您可以直接從「資源」面板將大部分的資源拖曳到 Dreamweaver 文件中 (請參閱管理網站資源和圖庫)。
  • 您可以使用 Dreamweaver 管理 Contribute 方面的網站 (請參閱使用 Dreamweaver 管理 Contribute 網站)。


配置網頁

Dreamweaver 提供您在模擬和製作頁面最終版面上的彈性。選擇適合您的版面技術，或者使用與其他版面結合的 Dreamweaver 版面選項，建立網站外觀。

  • 您可以使用 Dreamweaver 圖層或 CSS 定位樣式，以建立您的版面 (請參閱使用 CSS 配置頁面)。
  • Dreamweaver 中的表格工具和「版面」模式讓您藉由繪製，然後重新排列網頁結構來快速設計網頁 (請參閱以表格呈現內容和在版面模式中配置頁面)。
  • 如果您想要一次在網頁瀏覽器中顯示多個文件，您可以使用頁框來配置文件 (請參閱使用頁框)。
  • Dreamweaver 樣版讓您可以輕易地將可重複使用的內容和網頁設計套用到您的網站。您可以根據 Dreamweaver 範本來建立新的網頁，然後在範本變更時自動更新這些網頁的配置 (請參閱管理樣版)。


將內容新增至頁面

使用 Dreamweaver，您可以輕易地將不同的內容新增到網頁中。新增資源和設計項目，如文字、影像、顏色、影片、聲音和其他形式的媒體。

  • Dreamweaver 頁面建立功能，讓您可以指定網頁屬性，如網頁標題、背景影像和顏色。此外，Dreamweaver 提供多種工具，可以協助您最佳化網站效能，並測試頁面以確保能相容於不同的網路瀏覽器中 (請參閱使用頁面)。
  • 請直接在 Dreamweaver 文件中輸入文字，或從其他文件匯入文字，然後使用 Dreamweaver 的「屬性」檢視窗來格式化文字。您也可以很容易地建立自己的「階層式樣式表」(請參閱插入和格式化文字)。
  • 插入影像 (包括變換影像、影像地圖和 Fireworks 的分割影像)，並使用對齊工具將影像在頁面中定位﹔也可以直接在 Dreamweaver 中調整影像大小 (請參閱插入影像和使用其他應用程式)。
  • 使用 Dreamweaver，您可以建立標準的 HTML 連結，包括錨點連結和電子郵件連結，或輕易地設定圖形導覽系統，如跳頁選單和導覽列 (請參閱連結和導覽)。
  • 將其他類型的媒體插入到網頁中，如 Flash、Shockwave 和 QuickTime 影片、聲音和 Applet (請參閱新增音效、視訊和互動元素)。
  • 使用行為來執行工作，以回應特定的事件，如當使用者將指標移動到按鈕上時反白顯示按鈕，或是當使用者按一下「送出」按鈕時驗證表單，或是當主要網頁完成載入時開啟第二個瀏覽器視窗 (請參閱使用 JavaScript 行為)。


撰寫程式碼

手動撰寫網頁是建立頁面的另一種方法。Dreamweaver 不只提供容易使用的視覺編輯工具，還提供了精密的程式碼撰寫環境；您可以使用其中一種方法，或兩種方法並用，來建立和編輯頁面。

  • 您可以在程式碼環境下工作，而不需要視覺工具；程式碼撰寫工具可幫助您建立和編輯程式碼、格式化程式碼、確定您的程式碼是否符合標準 (請參閱設定程式碼撰寫環境、在 Dreamweaver 中撰寫程式碼和程式碼最佳化和除錯)。
  • 您也可以使用「設計」檢視視覺設計環境中的一些 Dreamweaver 程式碼撰寫工具 (請參閱在設計檢視中編輯程式碼)。


設定網路應用程式

許多網站包含動態網頁，允許瀏覽者檢視儲存在資料庫中的資訊，而且通常還允許某些瀏覽者在資料庫中新增新的資訊和編輯資訊。若要建立這樣的網頁，您必須先完成幾個準備步驟。

  • 設定網路伺服器和應用程式伺服器，然後再建立或修改 Dreamweaver 網站 (請參閱設定網路應用程式)。
  • 連線到資料庫 (請參閱連線到資料庫)。


建立動態網頁

在 Dreamweaver 中，您可以定義不同的動態內容來源，包括從資料庫抽取的資料集、表單參數和 JavaBeans 組件。若要將動態內容新增到網頁，只要將它拖曳到網頁中即可。

您可以設定您的網頁來一次顯示一筆或多筆記錄、顯示一頁以上的記錄、新增特殊連結以從一頁記錄移到下一頁 (和移回來)，以及建立記錄計數器來幫助使用者追蹤記錄。

  • 如果您不熟悉如何在 Dreamweaver 中建立網路應用程式，請了解如何使用 Dreamweaver 建立動態網頁 (請參閱最佳化視覺開發的工作區和動態網頁設計的工作流程)。
  • 在您的網頁上定義和顯示動態內容 (請參閱取得網頁的資料、定義動態內容的來源、新增動態內容到網頁和顯示資料庫記錄)。
  • 使用如 Macromedia ColdFusion 組件和網路服務等前端技術，來封裝應用程式或商務邏輯 (請參閱使用 ColdFusion 組件和使用網路服務)。
  • 如果需要更大的彈性，您可以建立自己的伺服器行為和互動式表單 (請參閱新增自訂的伺服器行為和建立表單)。


快速應用程式開發

Dreamweaver 提供許多快速應用程式開發 (RAD) 工具，包括伺服器行為和應用程式物件，可幫助您建立複雜的網路應用程式，而不需要撰寫任何伺服器端程式碼。

  • 快速建立搜尋和修改資料庫以及顯示結果的網頁 藉由限制您網頁的存取權來提供安全性 (請參閱快速建立 ColdFusion 應用程式、快速建立 ASP.NET 應用程式、快速建立 ASP 與 JSP 應用程式和快速建立 PHP 應用程式)。


與其他應用程式配合使用 Dreamweaver

將 Dreamweaver 與其他應用程式一起使用，可讓您輕易地將網站設計和開發過程都容納在其中。如需關於配合使用其他應用程式 (如瀏覽器、HTML 編輯器、影像編輯器和動畫工具) 的資訊，請參閱下列主題：

  • 如需關於將 Dreamweaver 配合使用其他 HTML 編輯器 (如 HomeSite 或 BBEdit) 的資訊，請參閱將外部 HTML 編輯器與 Dreamweaver 配合使用。
  • 您可以指定偏好的瀏覽器來預覽您的網站 (請參閱在瀏覽器中預覽和測試網頁)。
  • 您可以從 Dreamweaver 內啟動外部影像編輯器，如 Macromedia Fireworks 或 Adobe Photoshop (請參閱使用外部影像編輯器)。
  • 您可以設定 Dreamweaver 為不同的檔案類型啟動不同的編輯器 (請參閱啟動媒體檔案的外部編輯器)。
  • 如需關於使用 Macromedia Flash 將互動功能加入網站的資訊，請參閱插入和修改 Flash 按鈕物件、插入 Flash 文字物件或下載並安裝 Flash 元素。
  • 如需有關使用 ColdFusion 的資訊，請參閱「使用 ColdFusion」(「說明＞使用 ColdFusion」)。


Dreamweaver 和輔助功能

輔助功能可以協助有視障、聽障、運動障礙以及其他殘障人士使用網站及網路產品。螢幕讀取器支援、圖形的文字解說、鍵盤快速鍵、變更顯示顏色為高對比等，都是軟體產品和網站輔助功能特性的例子。

注意

如需有關兩項重要輔助功能初步規定的詳細資訊，請參閱 World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) 和聯邦康復法案 (Federal Rehabilitation Act) 508 節 (www.section508.gov)。

Dreamweaver 提供了讓產品具有輔助功能的工具，以及協助您撰寫具輔助功能內容的工具：

使用 Dreamweaver 輔助功能 對於需要使用輔助功能的 Dreamweaver 網路設計人員，Dreamweaver 提供了螢幕讀取器的支援、鍵盤操作和作業系統輔助功能的支援。

如需詳細資訊，請參閱使用 Dreamweaver 輔助功能特性。

針對輔助功能撰寫程式 對於需要建立具有輔助功能內容的 Dreamweaver 網路設計人員，Dreamweaver 能協助您建立具有輔助功能的頁面，頁面中包含對螢幕讀取器有用的內容並符合政府的指導方針。

在您插入頁面元素時，Dreamweaver 提供會提示您輸入輔助功能屬性的對話方塊 (請參閱最佳化具有輔助功能的頁面設計工作區)。例如，影像的輔助功能對話方塊會提醒您為圖像新增對等的文字解說。於是，當這個影像出現在視障使用者的頁面時，螢幕讀取器便會朗讀這段描述。

Dreamweaver 也提供為輔助功能設計的範例網頁 (請參閱以 Dreamweaver 設計檔建立文件)，以及您可以執行的輔助功能報表，用來測試網頁或網站是否符合 508 節輔助功能指導方針 (請參閱測試網站)。

注意

請記得，任何撰寫工具都不能自動化開發過程。設計具輔助功能的網站，您需要了解輔助功能的需求，並且不斷做出許多有關如何讓殘障使用者與網頁互動的個人判斷。審慎的規劃、開發、測試和評估，是確保網站符合輔助功能條件的最佳方式。


Dreamweaver 輔助功能驗證功能

Dreamweaver 中的輔助功能驗證功能採用 UsableNet 的技術。UsableNet 在開發易於使用的軟體以促進可用性自動化和輔助功能的測試與維修方面，堪稱執業界之牛耳。如需有關輔助功能測試方面的其他協助，請嘗試 UsableNet LIFT for Macromedia Dreamweaver，這是針對開發易於使用、具有輔助功能網站的完整解決方案。UsableNet Lift for Macromedia Dreamweaver 包括一些適用於複雜表格、表單及影像的修正精靈；全域「替代」編輯器；可自訂的報表；以及可於建置頁面時確保內容具有輔助功能的新型主動監測模式。如需 LIFT for Macromedia Dreamweaver 的示範，請前往 www.usablenet.com。


Dreamweaver 教學媒體輔助

Dreamweaver 包括各種媒體，可協助您快速瞭解本程式並成為建立網頁的高手。Dreamweaver 說明系統包括數份文件，可協助您瞭解 Dreamweaver、Dreamweaver 擴充功能和 ColdFusion。還有很多其他線上資源，可在您學習如何建立網頁時提供諮詢。

本節包含下列主題：

  • 存取 Dreamweaver 文件
  • 存取其他線上 Dreamweaver 資源

存取 Dreamweaver 文件

下列表格會摘要說明 Dreamweaver 說明系統中所包含的文件內容：

您可以購買所選取標題的書面列印版本。如需詳細資訊，請參閱 www.macromedia.com/go/buy_books。

標題

說明/對象

所在位置

Dreamweaver 入門

提供 Dreamweaver 概念和介面的基本簡介，以及詳細的初學者教學課程。專為初級使用者設計，還有想學習新功能的中級和進階使用者也適用。
  • 在 Dreamweaver 中檢視：選取「說明＞Dreamweaver 入門」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

使用 Dreamweaver

所有 Dreamweaver 功能的完整資訊。專為所有 Dreamweaver 使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞Dreamweaver 說明」或「說明＞使用 Dreamweaver」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

擴充 Dreamweaver 功能

說明 Dreamweaver 架構和應用程式設計介面 (API)。專為想要建立擴充功能或自訂 Dreamweaver 介面的進階使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞擴充 Dreamweaver 功能」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

Dreamweaver API 參考

說明公用程式 API 和 JavaScript API，兩者都可讓您在開發 Dreamweaver 擴充功能時，執行各種支援工作。專為想要建立擴充功能或自訂 Dreamweaver 介面的進階使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞Dreamweaver API 參考」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_dreamweaver_tw
  • 取得 PDF：www.macromedia.com/go/dw_documentation_tw

使用 ColdFusion

包括 ColdFusion 文件集中精選的最重要書籍 (完整的文件集可在 LiveDocs 上取得)。專為對 ColdFusion 感興趣的使用者設計，從初學者到進階開發人員都適用。
  • 在 Dreamweaver 中檢視：選取「說明＞使用 ColdFusion」
  • 線上檢視：http://livedocs.macromedia.com/go/livedocs_coldfusion/
  • 取得 PDF：www.macromedia.com/go/cf_documentation

參考

包括很多種與 HTML、伺服器模型和其他主題相關的參考手冊，主要都由 O悐eilly 發佈。專為需要編碼語法、概念等相關詳細資訊的使用者設計。
  • 在 Dreamweaver 中檢視：選取「說明＞參考」。如需完整的手冊清單，請按一下「參考」面板中的「手冊」彈出式選單。

存取其他線上 Dreamweaver 資源

下列表格會摘要說明學習 Dreamweaver 所需的其他線上資源。

資源 | 說明/對象 | 所在位置
Dreamweaver 支援中心 | Dreamweaver 使用者專用的 TechNote、支援和問題解決資訊。 | www.macromedia.com/go/dreamweaver_support_tw
Dreamweaver 開發人員中心 | 文件和教學課程可協助您改善技巧並學習新的技巧。 | www.macromedia.com/go/dreamweaver_devcenter_tw
Dreamweaver 文件資源中心 | 取得 PDF 格式的手冊、勘誤表、教學課程和版本說明。 | www.macromedia.com/go/dw_documentation_tw
Macromedia 線上討論區 | 由 Dreamweaver 使用者、技術支援人員和 Dreamweaver 開發小組所提供的討論及問題解決資訊。 | www.macromedia.com/go/dreamweaver_newsgroup
Macromedia 訓練 | 針對實用工作和真實狀況設計的課程。 | www.macromedia.com/go/dreamweaver_training_tw

若要充分利用 Dreamweaver 資源，請參閱從何開始。


印刷慣例

下列印刷慣例使用在 Dreamweaver「說明」中：

  • 選單項目以這個格式顯示：選單名稱＞選單項目名稱。子選單中的項目以這個格式顯示：選單名稱＞子選單名稱＞選單項目名稱。
  • 程式碼字體表示 HTML 標籤和屬性名稱，以及範例中所用的文字。
  • 斜體程式碼字體表示程式碼中可以取代的項目 (有時稱為移轉符號)。
  • 粗體 Roman 文字表示您逐字輸入的文字。

如需有關 Dreamweaver 資源的完整清單，請參閱 Dreamweaver 教學媒體輔助。


HTML 和網路技術資源

以下是一些可在網路上取得的實用資源：

注意

如需有關 Dreamweaver 資源的清單，請參閱 Dreamweaver 教學媒體輔助。

階層式樣式表，第一級規格 (Cascading Style Sheet, Level 1 Specification，CSS1) (www.w3.org/TR/REC-CSS1) 和第二級規格 (CSS2) (www.w3.org/TR/REC-CSS2/) 是「全球資訊網協會」官方的樣式表規格。

HTML 4.01 規格 (www.w3.org/TR/REC-html40/) 是「全球資訊網協會」官方的 HTML 規格。

索引 DOT HTML (www.blooberry.com/indexdot/html/) 是 HTML 標籤、屬性、值以及它們與各種瀏覽器相容性的綜合性清單。

XHTML 1.0 規格 (www.w3.org/TR/xhtml1/) 是「可擴展超文字標記語言」(Extensible HyperText Markup Language，XHTML) 的官方規格。

O'Reilly XML.com 網站 (www.xml.com/) 提供有關「可擴展標記語言」(Extensible Markup Language，XML) 以及其他網路技術的資訊、教學課程和秘訣。

xFront 網站 (www.xfront.com/rescuing-xslt.html) 為 XSL 轉換方面的新手提供相關簡介。

Microsoft ASP 綜覽網頁 (http://msdn.microsoft.com/library/en-us/dnasp/html/ASPover.asp) 提供有關 Active Server Pages (ASP) 的資訊。

Microsoft ASP.NET 網頁 (http://msdn.microsoft.com/asp.net/) 提供有關 ASP.NET 的資訊。

Sun JSP 網頁 (http://java.sun.com/products/jsp/) 提供有關 JavaServer Pages (JSP) 的資訊。

PHP 網站 (www.php.net/) 提供有關 PHP 的資訊。

MySQL 網站 (www.mysql.com/) 提供有關 MySQL 的資訊。

實體表 (www.bbsinc.com/iso8859.html) 列出 ISO 8859-1 (Latin-1) 中使用的實體名稱。

Macromedia ColdFusion 產品網頁 (www.macromedia.com/tw/software/coldfusion/) 提供有關 ColdFusion 的資訊。

Macromedia JRun Server 產品網頁 (www.macromedia.com/go/jrun/) 提供有關 JRun Java 應用程式伺服器的資訊。

揭開網路服務的面紗 (www.sitepoint.com/article/692) 說明什麼是網路服務以及網路服務如何運作。

JavaScript Bible，作者是 Danny Goodman (IDG 叢書)，綜合性地涵蓋 JavaScript 1.2 語言。

JavaScript:The Definitive Guide，作者是 David Flanagan (O'Reilly & Associates)，提供每個 JavaScript 功能、物件、方法、屬性和事件處理常式的參考資訊。

CGI 資源索引 (www.cgi-resources.com/) 是所有關於 CGI 事物的儲存機制，包括現成的 Script、文件、書籍，及程式設計人員。

Common Gateway Interface 網站 (http://hoohoo.ncsa.uiuc.edu/cgi/) 包含 CGI 的簡介。


探索工作區

若要取得最完整的 Macromedia Dreamweaver 8 經驗，您應該了解 Dreamweaver 工作區隱含的基本概念，並了解如何選取選項、使用檢視窗和面板，以及設定最符合您工作方式的偏好設定。

本章包含下列各節：

關於 Dreamweaver 工作區

在文件視窗中工作

使用工具列、檢視窗和快速選單

使用面板與面板群組

使用 Dreamweaver 輔助功能特性

最佳化具有輔助功能的頁面設計工作區

在 Dreamweaver使用視覺輔助

Dreamweaver 自訂基本概念

相關主題

  • 最佳化視覺開發的工作區


關於 Dreamweaver 工作區

Dreamweaver 工作區讓您可以檢視文件和物件屬性。工作區的工具列中也放置了許多常用的作業選項，因此，您可以快速地變更您的文件。

本節包含下列主題：

  • 工作區版面
  • Dreamweaver 工作區元素
  • 文件視窗
  • 文件工具列
  • 標準工具列
  • 狀態列
  • 插入列
  • 編碼工具列
  • 樣式呈現方式工具列
  • Dreamweaver 報表
  • 關於在多使用者系統中自訂 Dreamweaver


工作區版面

在 Windows 中，Dreamweaver 提供了一個全方位視窗整合式版面。在整合式工作區中，所有視窗和面板都整合在一個較大的單一應用程式視窗中。

注意

Windows 工作區也有「程式碼撰寫者」選項，依預設，它會將面版群組停駐在左邊，並在「程式碼」檢視中顯示「文件」視窗。如需詳細資訊，請參閱使用程式碼撰寫者導向的工作區域 (僅適用於 Windows)。若要使用這個選項，請參閱選擇工作區版面 (僅適用於 Windows)。

在 Macintosh 上，Dreamweaver 可以在單一視窗中顯示多份文件，並使用索引標籤來識別每份文件。Dreamweaver 也可以顯示浮動工作區，而將每份文件呈現於各自的視窗中。面板群組一開始會停駐在一起，但是可以解除停駐到各自的視窗中。當您拖曳視窗或調整它們的大小時，它們會自動彼此貼齊、貼齊到畫面的邊上及貼齊到「文件」視窗。

不論使用 Windows 或 Macintosh，您都可以在不同的版面之間切換。如需詳細資訊，請參閱選擇工作區版面 (僅適用於 Windows)和顯示外框包圍的檔案 (Macintosh)。

相關主題

  • Dreamweaver 工作區元素
  • 使用工具列、檢視窗和快速選單
  • 使用面板與面板群組


Dreamweaver 工作區元素

本節簡短地描述部分 Dreamweaver 工作區的元素。

注意

Dreamweaver 提供許多其他的面板、檢視窗和視窗。若要開啟 Dreamweaver 面板、檢視窗和視窗，請使用「視窗」選單。如果您找不到標示為開啟的面板、檢視窗或視窗，請選取「視窗＞排列面板」將所有開啟的面板配置整齊。

起始頁面可讓您開啟最近的文件或建立新文件。您也可以在起始頁面中，進入產品導覽課程或教學課程，增進對 Dreamweaver 的了解。

插入列包含將各種「物件」(如影像、表格和圖層) 插入文件中所需的按鈕。每個物件都是片段的 HTML 程式碼，當您將它插入文件時可在其中設定各種屬性。例如，可按一下「插入」列中的「表格」按鈕來插入表格。如果您想要的話，可以利用「插入」選單而非「插入」列來插入物件。

文件工具列包含按鈕 (可提供「文件」視窗的各種不同檢視方式，如「設計」檢視和「程式碼」檢視)、各種檢視選項，和一些常用的作業 (如在瀏覽器中預覽)。

標準工具列 (不會顯示在預設的工作區版面中) 包含「檔案」和「編輯」選單中常用作業的按鈕： 開新檔案、開啟舊檔、儲存檔案、全部儲存、剪下、複製、貼上、還原和重做。若要顯示「標準」工具列，請選取「檢視＞工具列＞標準」。

編碼工具列 (只顯示於「程式碼」檢視) 提供按鈕讓您執行許多標準的編碼作業。

樣式呈現方式工具列 (預設為隱藏) 提供按鈕讓您查看設計結果呈現於各種媒體類型時的外觀 (如果設計上使用了與媒體有關的樣式表)。此工具列也包含按鈕讓您啟用或停用 CSS 樣式。

文件視窗會在您建立及編輯目前文件時顯示該文件。

「屬性」檢視窗讓您檢視和變更已選取的物件或文字之各種屬性。每種物件有不同的屬性。在「程式碼撰寫者」工作區版面中，「屬性」檢視窗預設為未展開。

標籤選取器，是位在「文件」視窗下方的狀態列中，它會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。

面板群組是將一組相關面板一起群組在某個標題底下。若要展開面板群組，請按一下群組名稱左邊的展開箭頭；若要解除鎖定面板群組，請拖曳群組標題列左邊緣上的移駐夾。

檔案面板讓您不論網站檔案和資料夾是否屬於 Dreamweaver 網站或是在遠端伺服器上，都可以管理網站檔案和資料夾。「檔案」面板也可供您存取本機磁碟上所有的檔案，很像 Windows 檔案總管 (Windows) 或 Finder (Macintosh)。

相關主題

  • 在文件視窗中工作
  • 使用工具列、檢視窗和快速選單
  • 使用面板與面板群組
  • 管理檔案面板中的檔案和資料夾


文件視窗

「文件」視窗顯示目前的文件。您可以選取以下任何檢視：

設計檢視是可供開發視覺頁面版面、視覺編輯及快速應用程式的一種設計環境。在這種檢視中，Dreamweaver 會顯示文件的完全可編輯、視覺的表示法，類似您在瀏覽器中檢視頁面時所看到的。當您在文件上工作時，可以設定「設計」檢視以顯示動態內容 (請參閱在設計檢視中檢視即時資料)。

程式碼檢視是一個手動撰寫程式碼的環境，用來撰寫及編輯 HTML、JavaScript、伺服器語言程式碼，如 PHP 或 ColdFusion 標記語言 (CFML)，以及各種其他的程式碼。如需詳細資訊，請參閱在 Dreamweaver 中撰寫程式碼。

程式碼和設計檢視可讓您在單一視窗中看到同一個文件的「程式碼」檢視和「設計」檢視。

當「文件」視窗有標題列時，標題列會顯示頁面標題以及檔案路徑和檔案名稱 (以括號括住)。如果您對該檔案進行過變更而尚未儲存的話，Dreamweaver 會在檔案名稱之後顯示一個星號。

當「文件」視窗在整合式工作區版面 (僅適用於 Windows) 中為最大化時，「文件」視窗便沒有標題列，在這種情況下，頁面標題以及檔案路徑和檔案名稱會顯示在主要工作區視窗的標題列。

當「文件」視窗最大化時，在「文件」視窗區域的頂端會出現索引標籤，顯示所有開啟文件的檔案名稱。若要切換到文件，請按一下它的索引標籤。

相關主題

  • 在文件視窗中工作


文件工具列

「文件」工具列包含能讓您在不同的文件檢視之間快速切換的按鈕：「程式碼」、「設計」和可同時顯示「程式碼」和「設計」檢視的分割檢視。

工具列還包含一些常用命令和選項，這些命令和選項都是與檢視文件、在本機和遠端網站之間傳送文件有關。

下列選項出現在「文件」工具列中：

顯示程式碼檢視只在「文件」視窗中顯示「程式碼」檢視。

顯示程式碼和設計檢視在「文件」視窗的一部份顯示「程式碼」檢視，另一部份則顯示「設計」檢視。當您選取此組合檢視時，「檢視選項」選單中的「設計檢視在上方」選項會變成可用狀態。使用這個選項來指定哪一個檢視要顯示在「文件」視窗的上方。

顯示設計檢視只在「文件」視窗中顯示「設計」檢視。

伺服器除錯 顯示一份報告，可協助您對目前的 ColdFusion 網頁進行除錯。這份報告會列出您網頁中的錯誤 (如果有的話)。

文件標題讓您輸入文件的標題，顯示在瀏覽器的標題列。如果您的文件已有標題，它會出現在此欄位中。

沒有瀏覽器/檢查錯誤可供您檢查瀏覽器之間的相容性。

驗證標記讓您驗證目前的文件或選取的標籤。

檔案管理會顯示「檔案管理」彈出式選單。

在瀏覽器中預覽/除錯讓您能在瀏覽器中預覽文件及針對文件加以除錯。從彈出式選單中選取瀏覽器。

重新整理設計檢視會在您於「程式碼」檢視中進行變更之後，重新整理文件的「設計」檢視。在執行某些動作 (如儲存檔案或按一下這個按鈕) 之前，您在「程式碼」檢視中所作的變更不會自動出現在「設計」檢視中。

檢視選項讓您設定「程式碼」檢視和「設計」檢視的選項，包括哪一個檢視應該出現在另一個檢視之上。目前檢視中的選單選項有： 「設計」檢視、「程式碼」檢視或兩者。如需有關「程式碼」檢視選項的資訊，請參閱設定程式碼撰寫偏好設定。如需有關「設計」檢視選項的資訊，請參閱在「文件」視窗中選取元素、檢視和編輯檔頭內容和在 Dreamweaver使用視覺輔助。

視覺輔助讓您使用各種視覺輔助來設計頁面。

相關主題

  • 顯示工具列


標準工具列

「標準」工具列包含「檔案」和「編輯」選單中常用作業的按鈕： 開新檔案、開啟舊檔、儲存檔案、全部儲存、剪下、複製、貼上、還原和重做。使用這些按鈕就像使用對等的選單命令一樣。

如需有關「開啟舊檔」和「儲存檔案」等作業的詳細資訊，請參閱建立和開啟文件。

相關主題

  • 顯示工具列


狀態列

「文件」視窗底部的狀態列提供現在所建立文件的其他資訊。

標籤選取器會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就能選取該標籤及其所有內容。按一下 <body> 以選取整個文件的內文。若要在標籤選取器中設定標籤的 class 或 id 屬性，請對該標籤按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，並從快速選單中選取類別或 ID。

「手掌」工具讓您能在「文件」視窗中按一下文件並進行拖曳。按一下「選取」工具就會關閉「手掌」工具。

「縮放」工具和「設定顯示比例」彈出式選單可以讓您設定文件的顯示比例等級。如需詳細資訊，請參閱放大和縮小顯示。

「視窗大小」彈出式選單 (只有「設計」檢視中看得到) 可讓您將「文件」視窗的大小調整為預先決定或自訂的尺寸。如需詳細資訊，請參閱調整文件視窗大小。

「視窗大小」彈出式選單的右邊是估計的文件大小和估計的頁面下載時間，包括所有相關檔案，如影像和其他媒體檔。如需詳細資訊，請參閱設定下載時間和大小偏好設定。

相關主題

  • 設定狀態列偏好設定


插入列

「插入」列包含建立及插入物件 (如表格、圖層和影像) 所用的按鈕。在將指標滑過按鈕時，工具提示便會和按鈕名稱一起出現。

這些按鈕分成數個類別，您可在「插入」列的左邊切換。當目前文件含有伺服器程式碼時 (如 ASP 或 CFML 文件)，就會出現其他類別。Dreamweaver 每次啟動都會開啟您上次使用的類別。

注意

如果您比較喜歡將類別放在「插入」列上方當成索引標籤，則可變更「插入」列的版面 (請參閱設定 Dreamweaver 顯示的字體偏好設定)。

部分類別的按鈕含有彈出式選單。當您從彈出式選單中選取某一選項後，該選項便會成為該按鈕的預設動作。例如，如果您從「影像」按鈕的彈出式選單中選取了「影像預留位置」，則下次當您按一下「影像」按鈕時，Dreamweaver 便會插入影像預留位置。每當您從彈出式選單中選取新的選項後，按鈕的預設動作就會變更。

「插入」列會以下列類別組織：

一般類別可讓您建立和插入最常使用的物件，如影像和表格。

版面類別可讓您插入表格、div 標籤、圖層和頁框。也可以選擇以下三種表格檢視的其中一種：標準 (預設檢視)、展開表格和版面。在選取「版面」模式時，可使用 Dreamweaver 版面工具：「繪製版面儲存格」和「繪製版面表格」。

表單類別包含建立表單和插入表單元素所用的按鈕。

文字類別可讓您插入各種文字和清單格式的標籤，如 b、em、p、h1 和 ul。

HTML 類別可讓您插入用在水平線、檔頭內容、表格、頁框和 Script 的 HTML 標籤。

伺服器程式碼類別僅適用於使用特定伺服器語言的網頁，這些語言包含 ASP、ASP.NET、CFML Basic、CFML Flow、CFML Advanced、JSP 和 PHP。這些類別每個都能提供可以在「程式碼」檢視中插入的伺服器程式碼物件。

應用程式類別可讓您插入動態元素，如資料集、重複區域以及記錄插入和更新表單。

Flash 元素類別可讓您插入 Macromedia Flash 元素。

最愛類別讓您將最常用的「插入」列按鈕加以群組並排列組織在一個常用的地方。

您可以修改「插入」列中的任何物件或建立自己的物件 (請參閱「Macromedia 支援中心」上的「自訂 Dreamweaver」，網址為 www.macromedia.com/go/customizing_dreamweaver_tw)。

相關主題

  • 使用插入列


編碼工具列

「編碼」工具列包含的按鈕能讓您執行許多標準的編碼作業，例如收合和展開程式碼選取範圍、反白標示無效的程式碼、套用和移除註解、縮排程式碼、插入最近使用過的程式碼片段等等。「編碼」工具列只有在「程式碼」檢視中才看得到，而且垂直顯示在「文件」視窗的左邊。

您無法解除鎖定或移動「編碼」工具列，但是可以將它隱藏。如需詳細資訊，請參閱顯示工具列。

您也可以編輯「編碼」工具列來顯示更多按鈕 (例如「文字換行」、「顯示隱藏字元」和「自動縮排」)，或隱藏不想用的按鈕。但是若要這麼做，您必須編輯用來產生工具列的 XML 檔案。如需詳細資訊，請參閱「擴充 Dreamweaver 功能」。

相關主題

  • 使用「編碼」工具列快速插入程式碼
  • 顯示工具列


樣式呈現方式工具列

如果您使用了與媒體有關的樣式表，「樣式呈現方式」工具列 (預設為關閉) 包含的按鈕能讓您查看設計結果呈現於各種媒體類型時的外觀。此工具列也包含按鈕讓您啟用或停用 CSS 樣式。若要顯示工具列，請選取「檢視＞工具列＞樣式呈現方式」。

如果您的文件並未使用與媒體有關的樣式表，就無法使用這個工具列。例如，您的樣式表可能指定了用於列印的 body 規則，以及用於掌上型設備的另一種 body 規則。如需有關建立媒體相關樣式表的詳細資訊，請造訪 World Wide Web Consortium 網站，網址為 www.w3.org/TR/CSS21/media.html。

根據預設，Dreamweaver 會針對螢幕媒體類型來顯示您的設計 (亦即顯示網頁呈現於電腦螢幕上的樣子)。您可以在「樣式呈現方式」工具列中按一下對應的按鈕，來檢視下列媒體類型的呈現方式。

呈現螢幕媒體類型顯示網頁呈現於電腦螢幕上的樣子。

呈現列印媒體類型顯示網頁呈現於列印紙上的樣子。

呈現掌上型設備媒體類型顯示網頁呈現於掌上型設備中 (如行動電話和黑苺機 (BlackBerry)) 的樣子。

呈現投影媒體類型顯示網頁呈現於投影裝置中的樣子。

呈現 TTY 媒體類型顯示網頁呈現於打字機上的樣子。

呈現 TV 媒體類型顯示網頁呈現於電視螢幕上的樣子。

切換 CSS 樣式顯示讓您可以啟用或停用 CSS 樣式。此按鈕可以獨立運作，不受其他媒體按鈕所影響。

相關主題

  • 顯示工具列


Dreamweaver 報表

您可以在 Dreamweaver 中執行報表，以尋找內容、疑難排解或測試內容。您可以產生下列報表類型：

搜尋讓您可以搜尋標籤、屬性和標籤內的特定文字。若要搜尋程式碼，請參閱搜尋和取代標籤及屬性。

驗證讓您可以檢查程式碼或語法錯誤。若要驗證程式碼，請參閱驗證標籤。

檢查目標瀏覽器讓您可以測試文件中的 HTML，以查看是否有任何標籤和屬性不受目標瀏覽器的支援。若要執行檢查目標瀏覽器，請參閱檢查瀏覽器相容性。

連結檢查程式讓您可以發現並修正無效的連結、外部連結和孤立連結。若要執行連結檢查程式，請參閱檢查是否有無效、外部或孤立的連結。

網站報表讓您可以改進網站工作流程並測試網站中的 HTML 屬性。工作流程報表包含取出者、最近修改的項目和設計備註；HTML 報表包含可結合巢狀字體標籤、輔助功能、沒有替代文字、多餘的巢狀標籤、可移除的空標籤和無標題文件。若要執行網站報表，請參閱測試網站。

FTP 記錄讓您可以檢視所有 FTP 檔案傳送活動。若要檢視 FTP 記錄，請參閱從遠端伺服器下載檔案或上傳檔案到遠端伺服器。

伺服器除錯讓您可以檢視 ColdFusion 應用程式除錯資訊。若要檢視除錯資訊，請參閱使用 ColdFusion 除錯程式 (僅適用於 Windows)。


關於在多使用者系統中自訂 Dreamweaver

即使在多使用者作業系統中，如 Windows XP 或 Mac OS X，也能配合個人需求自訂 Dreamweaver。

Dreamweaver 會防止任何使用者的自訂設定影響其他使用者的自訂設定。為了達到這個目標，當您第一次在 Dreamweaver 能辨識的任一多使用者作業系統上執行它時，該應用程式就會為您建立很多份設定檔的複本。這些使用者設定檔會儲存在屬於您的資料夾中。

例如，Windows XP 的設定檔儲存在 C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver 8\Configuration (這可能位於隱藏的資料夾內)。

而在 Mac OS X 上，則會儲存在您的主資料夾，特別是在 Users/username/Library/Application Support/Macromedia/Dreamweaver 8/Configuration 中。

如果您重新安裝或升級 Dreamweaver，Dreamweaver 會自動製作現有使用者設定檔的備份複本，因此，如果您曾手動自訂這些檔案，還是能存取到自己所作的變更。

相關主題

  • Dreamweaver 自訂基本概念


在文件視窗中工作

「文件」視窗顯示目前的文件。您可以在「設計」檢視、「程式碼」檢視或「程式碼和設計」檢視中檢視文件。「文件」視窗的狀態列會提供有關目前文件的資訊。

本節包含下列主題：

  • 在文件視窗中切換檢視
  • 重疊顯示或並排顯示文件視窗
  • 調整文件視窗大小
  • 設定狀態列偏好設定

相關主題

  • 文件視窗
  • 狀態列


在文件視窗中切換檢視

您可以在「程式碼」檢視、「設計」檢視、或「程式碼和設計」檢視中的「文件」視窗中檢視文件。

若要在「文件」視窗中切換檢視，執行下列其中一項作業：

  • 使用「檢視」選單：
    • 選取「檢視＞程式碼」。
    • 選取「檢視＞設計」。
    • 選取「檢視＞程式碼和設計」。
  • 使用「文件」工具列：
    • 按一下「程式碼」按鈕。

    • 按一下「分割」按鈕。

    • 按一下「設計」按鈕。

若要在「程式碼」檢視和「設計」檢視間切換：

  • 按 Control + 波狀符號 (~) (Windows) 或 Command + 左單引號 (‘) (Macintosh)。

    注意

    如果「文件」視窗中同時顯示這兩種檢視，這組鍵盤快速鍵便可以將鍵盤焦點從一種檢視變更到另一種檢視。

相關主題

  • 文件視窗


重疊顯示或並排顯示文件視窗

如果您一次開啟數份文件，則可重疊顯示或並排顯示這些文件。

若要重疊顯示「文件」視窗，請執行下列動作：

  • 選取「視窗＞重疊顯示」。

若要並排顯示「文件」視窗，請執行下列其中一項作業：

  • 在 Windows 上，選取「視窗＞水平並排」或「視窗＞垂直並排」。
  • 在 Macintosh 上，選取「視窗＞並排顯示」。

相關主題

  • 選擇工作區版面 (僅適用於 Windows)
  • 顯示外框包圍的檔案 (Macintosh)
  • 儲存自訂工作區版面


調整文件視窗大小

狀態列顯示「文件」視窗的目前尺寸 (以像素為單位)。若要設計擁有特定最佳大小的頁面，您可以將「文件」視窗調整為任何預先決定的大小、編輯這些預先決定的大小或建立新的大小。

若要將「文件」視窗大小調整為預先決定的大小：

  • 從「文件」視窗底部的「視窗大小」彈出式選單中選取其中一種大小。

    注意

    在 Windows 中，可以將「文件」視窗最大化，讓它填滿整合式視窗的整個文件區。在「文件」視窗最大化的狀態下，將無法調整大小。

顯示出來的視窗大小反應出瀏覽器視窗內，不含邊框的尺寸；監視器大小會列在括號內。例如，如果您的瀏覽者傾向於在預設設定 640 x 480 的監視器上使用 Microsoft Internet Explorer 或 Netscape Navigator 的話，您就應該使用「536 x 196 (640 x 480，預設值)」的大小。

提示

若不需要那麼精準地調整大小的話，請使用作業系統調整視窗大小的標準方法，如拖曳視窗的右下角。

若要變更「視窗大小」彈出式選單中所列的值：

  1. 從「視窗大小」彈出式選單中選取「編輯大小」。
  2. 按一下「視窗大小」清單中的任何寬度或高度值，並輸入新值。

    若只要將「文件」視窗調整為特定寬度 (高度保持不變)，請選取高度值並刪除它。

  3. 按一下「說明」文字方塊以輸入與特定大小相關的描述性文字。
  4. 按一下「確定」以儲存變更並返回「文件」視窗。

若要在「視窗大小」彈出式選單中加入新的大小：

  1. 從「視窗大小」彈出式選單中選取「編輯大小」。
  2. 在「寬度」欄中最後一個值底下的空白處按一下。
  3. 輸入「寬度」和「高度」的值。

    若只要設定「寬度」或「高度」，只要將其中一個欄位保留空白即可。

  4. 按一下「說明」欄位以輸入與新增的大小相關之描述性文字。
  5. 按一下「確定」以儲存變更並返回「文件」視窗。

    例如，您可能在 800 x 600 像素監視器項目旁邊鍵入 SVGA 或平均 PC，而在 832 x 624 像素監視器項目旁邊鍵入 17 吋 Mac。大部份的監視器可以被調整成各種像素尺寸。


設定狀態列偏好設定

使用「偏好設定」對話方塊設定狀態列的偏好設定。

若要設定狀態列的偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單中選取「狀態列」，
  3. 設定偏好設定選項。

    如需詳細資訊，請參閱設定狀態列偏好設定。

  4. 按一下「確定」。

相關主題

  • 狀態列


使用工具列、檢視窗和快速選單

Dreamweaver 包含數種工具，讓您在建立或編輯文件時可以快速進行變更。

「文件」、「標準」和「編碼」工具列是用來編輯和使用目前文件的。「插入」列包含建立和插入物件 (如表格、圖層和影像) 所用的按鈕，而「屬性」檢視窗讓您可以為這些物件編輯屬性。

注意

您也可以使用標籤檢視窗檢視和編輯屬性 (請參閱使用標籤檢視窗變更屬性)。標籤檢視窗可讓您檢視和編輯每個和指定標籤相關的屬性，而「屬性」檢視窗只能顯示最常用的屬性。

快速選單是「插入」列和「屬性」檢視窗的替代方式，可以用來建立和編輯物件。

本節包含下列主題：

  • 顯示工具列
  • 使用插入列
  • 使用「屬性」檢視窗
  • 使用快速選單


顯示工具列

使用「文件」和「標準」工具列可以執行文件相關的或標準的編輯作業；使用「編碼」工具列可以快速插入程式碼；而使用「樣式呈現方式」工具列則可將網頁顯示成在各種媒體類型中所呈現的樣子。您可以視需要選擇顯示或隱藏工具列。

若要顯示或隱藏工具列，請執行下列其中一項作業：

  • 選取「檢視＞工具列」，然後選取工具列。
  • 以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 任何工具列，再從快速選單中選取工具列。

    注意

    若要在程式碼檢視窗中 (「視窗＞程式碼檢視窗」) 顯示或隱藏「編碼」工具列，您必須從檢視窗頂端的「檢視選項」彈出式選單中選取「編碼」工具列。

相關主題

  • 文件工具列
  • 標準工具列
  • 編碼工具列
  • 樣式呈現方式工具列


使用插入列

「插入」列包含建立和插入物件 (如表格和影像) 所用的按鈕。按鈕是以類別而組織排列的。在將指標滑過按鈕時，工具提示便會和按鈕名稱一起出現。

本節包含下列主題：

  • 顯示插入列以及其類別和選單
  • 使用插入列插入物件
  • 自訂和使用插入列中的最愛類別

相關主題

  • 插入列


顯示插入列以及其類別和選單

您可以視需要隱藏或顯示以及收合或展開「插入」列， 也可以顯示「插入」列的其他類別。「插入」列部分類別的按鈕包含具常用命令的選單。

如果您比較喜歡將類別當成索引標籤顯示在「插入」列上方，則可變更「插入」列的版面。

若要顯示或隱藏「插入」工具列，請執行下列其中一項作業：

  • 選取「視窗＞插入」。
  • 在「插入」列或是「文件」、「標準」或「編碼」工具列上，按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，再選取「插入列」。

若要顯示特定類別中的按鈕：

  • 在「插入」列的最左邊，按一下類別名稱旁的下拉式箭頭，然後從顯示彈出式選單中選取其他類別。

若要顯示按鈕的下拉式選單：

  • 按一下按鈕圖示旁的向下鍵。

若要將「插入」列類別顯示為索引標籤：

  • 在「插入」列的最左邊，按一下類別名稱旁的下拉式箭頭，然後選取「顯示為標籤」。

「插入」列就會將類別顯示成「插入」列上方的索引標籤。

注意

您可能需要按一下「插入」列的標題列，才能重新開啟「插入」列。

若要將「插入」列類別顯示為選單：

  • 在「插入」列上，按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「顯示為選單」。

「插入」列會在選單中顯示類別，而不是顯示在索引標籤中。

相關主題

  • 使用插入列插入物件
  • 自訂和使用插入列中的最愛類別


使用插入列插入物件

「插入」列是用來建立和插入物件的便捷方法。

若要插入物件：

  1. 從「插入」列左邊選取適當的類別。
  2. 請執行下列其中一項作業：
    • 按一下物件按鈕或將按鈕的圖示拖曳到「文件」視窗中。
    • 按一下按鈕上的箭頭，再從選單中選取選項。

視物件的不同會出現對應的物件插入對話方塊，提示您瀏覽到檔案或為物件指定參數。或者，Dreamweaver 可能會插入程式碼到文件中，或是插入程式碼前先開啟標籤編輯器 (請參閱使用標籤編輯器來編輯標籤) 或面板，以讓您指定資訊。

對有些物件而言，如果您在「設計」檢視中插入物件，則不會出現對話方塊，但是如果在「程式碼」檢視中插入物件就會出現一個標籤編輯器。對一些物件而言，在「設計」檢視中插入物件會讓 Dreamweaver 在插入物件之前，先切換到「程式碼」檢視。

注意

在瀏覽器視窗中檢視頁面時，有些物件是看不到的，如命名錨點。若要在「設計」檢視中顯示標示此類隱藏物件位置的圖示，請參閱顯示和隱藏隱藏元素。

若要略過物件插入對話方塊並插入一個空白的預留位置物件：

  • Control + 按一下 (Windows) 或 Option + 按一下 (Macintosh) 該物件的按鈕。

    例如，若要在不指定影像檔的情況下插入影像預留位置，請使用 Control + 按一下或 Option + 按一下「影像」按鈕。

    注意

    這個程序不會略過所有的物件插入對話方塊。很多物件 (包括導覽列、圖層、Flash 按鈕和頁框組) 不會插入預留位置或已預設值的物件。

若要修改「插入」列的偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊即顯示「一般」偏好設定類別。

  2. 取消選取「插入物件時顯示對話框」，即可在插入物件 (如影像、表格、Script 和標頭元素) 時，或者在按住 Control 鍵 (Windows) 或 Option 鍵 (Macintosh) 建立物件時，關閉對話方塊。

    提示

    當您在關閉此選項的情況下插入物件時，物件會被賦予預設的屬性值。在插入物件之後使用「屬性」檢視窗來變更物件屬性。
  3. 按一下「確定」。

相關主題

  • 顯示插入列以及其類別和選單
  • 自訂和使用插入列中的最愛類別


自訂和使用插入列中的最愛類別

「插入」列中的「最愛」類別可讓您將最常用的「插入」列按鈕加以分組和整理。您可以在「最愛」類別中新增、管理和刪除按鈕。

若要在「最愛」類別中新增、刪除或管理項目：

  1. 在「插入」列中選取任何類別。
  2. 在按鈕出現的區域按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) (不要在類別名稱上按滑鼠右鍵)，再選取「自訂物件」。

    「自訂最愛物件」對話方塊便會出現。

  3. 必要時進行變更。

    如需詳細資訊，請參閱設定自訂最愛物件對話方塊選項。

  4. 按一下「確定」。

    「最愛」類別便會反映所做的變更。

    提示

    如果不是在「最愛」類別中，請選取該類別以查看變更。

若要使用「最愛」類別中的按鈕插入物件：

  • 從「插入」列左邊選取「最愛」類別，再按一下任何您所新增「最愛」物件的按鈕。

    注意

    在您自訂「最愛」以新增物件前，「最愛」類別不含任何按鈕。

相關主題

  • 顯示插入列以及其類別和選單
  • 使用插入列插入物件


使用「屬性」檢視窗

「屬性」檢視窗可供您檢查及編輯目前選取的頁面元素 (如文字或插入的物件) 的最常用屬性。「屬性」檢視窗的內容會隨著選取的元素而不同。

注意

請用標籤檢視窗來檢視和編輯與指定的標籤屬性有關的每個屬性 (請參閱使用標籤檢視窗變更屬性)。

提示

依預設，「屬性」檢視窗位在工作區的下方，但您也可以依照需要，將其停駐在工作區的上方， 或者，使其成為工作區中的浮動面版。如需關於移動「屬性」檢視窗的詳細資訊，請參閱停駐及解除鎖定面板和面板群組。

若要顯示或隱藏「屬性」檢視窗：

  • 選取「視窗＞屬性」。

若要展開或收合「屬性」檢視窗：

  • 按一下「屬性」檢視窗右下角的展開箭頭。

若要檢視頁面元素的屬性：

  • 選取「文件」視窗中的頁面元素。

    注意

    您可能需要展開「屬性」檢視窗，以檢視選取元素的所有屬性。

若要變更頁面元素的屬性：

  1. 選取「文件」視窗中的頁面元素。
  2. 在「屬性」檢視窗中變更任何屬性。

    注意

    如需特定屬性的詳細說明，請在「文件」視窗中選取元素，再按一下「屬性」檢視窗右上角的「說明」圖示。

    您對屬性所做的大部分變更會立即套用在「文件」視窗中。

  3. 如果並未立即套用您的變更，請執行下列其中一項作業：
    • 按一下屬性編輯文字欄位以外的地方。
    • 按 Enter (Windows) 或 Return (Macintosh)。
    • 按 Tab 鍵以切換到其他屬性。


使用快速選單

Dreamweaver 擴充了快速選單的用法，快速選單讓您更方便地存取最有用的命令和屬性，而這些命令和屬性都與您使用中的物件或視窗相關。快速選單只會列出與目前選取範圍相關的那些命令。

若要使用快速選單：

  1. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 物件或視窗。

    選取物件或視窗的快速選單便會出現。

  2. 從快速選單中選取命令。


使用面板與面板群組

Dreamweaver 中的面板會在面板群組中分群組顯示。面板群組內所選取的面板會顯示成一個索引標籤。每個面板群組可以展開或收合，也可以和其他面板群組停駐在一起或從中卸除。

面板群組也可以停駐於整合式應用程式視窗中 (僅適用於 Windows)。這樣就能在不弄亂工作區的情況下，輕易便能存取到您所需的面板。

注意

當面板群組為浮動 (已卸除) 時，在面板群組的頂端會出現一個窄的空白列。在此文件中，「面板群組標題列」一詞是指顯示面板群組名稱的地方，而非指這個窄的空白列。

本節包含下列主題：

  • 檢視面板與面板群組
  • 停駐及解除鎖定面板和面板群組
  • 面板群組調整大小和重新命名
  • 設定面板偏好設定


檢視面板與面板群組

您可以視需要顯示或隱藏工作區中的面板群組或面板。

若要展開或收合面板群組，請執行下列其中一項作業:

  • 按一下面板群組標題列左邊的展開箭頭。 這是描述功能的圖片。
  • 按一下面板群組的標題。

若要關閉面板群組，使其不要出現在螢幕上：

  • 在面板群組的標題列，從「選項」選單中選取「關閉面板群組」。 這是描述功能的圖片。

    面板群組會從畫面上消失。

若要開啟螢幕上看不到的面板群組或面板：

  • 選取「視窗」選單，然後從選單中選取面板名稱。

    「視窗」選單中項目旁邊的核取記號表示該命名項目目前已開啟 (雖然它可能隱藏在其他視窗後面)。

    提示

    如果您找不到標示為開啟的面板、檢視窗或視窗，請選取「視窗＞排列面板」將所有開啟的面板配置整齊。

若要選取展開的面板群組內之面板：

  • 按一下面板的名稱。

若要在沒有顯示面板群組的「選項」選單時，查看其內容：

  • 按一下面板群組的名稱或展開箭頭來展開它。 這是描述功能的圖片。

    「選項」選單只有在展開面板群組時才看得到。

    提示

    部分選項可於面板群組的快速選單中使用，即使群組在收合狀態中也一樣；按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 面板群組的標題列，就能檢視快速選單。


停駐及解除鎖定面板和面板群組

您可以視需要移動面板和面板群組，並加以排列，讓其可於工作區中浮動或停駐。

大部份的面板只能停駐到整合式工作區中「文件」視窗區的左邊或右邊，但是其他的面板 (如「屬性」檢視窗和「插入」列) 則只能停駐到整合式視窗的頂端或底部。

若要卸除面板群組：

  • 使用面板群組的移駐夾 (位於面板群組標題列的左邊) 來拖曳面板群組，直到它的外框指示它已不再停駐了為止。 這是描述功能的圖片。

若要將面板群組停駐到其他面板群組 (浮動工作區) 或固定到整合式視窗 (僅適用於 Windows)：

  • 用面板群組的移駐夾來拖曳面板群組，直到它的外框指示它已停駐了為止。

若要將面板從面板群組中卸除：

  • 在面板群組標題列中的「選項」選單，選取「合併到＞新增面板群組」(「合併到」命令的名稱會隨著作用中面板的名稱而變更)。 這是描述功能的圖片。

    面板會出現在它自己的新面板群組中。

若要在面板群組中停駐面板：

  • 從面板群組「選項」選單的「合併到」子選單中，選取面板群組的名稱 (「合併到」命令的名稱會隨著作用中面板的名稱而變更)。

若要在未停駐的情況下拖曳浮動 (已卸除) 的面板群組：

  • 用標題列之上的列來拖曳面板群組。只要您沒有利用移駐夾來拖曳面板群組，面板群組就不會停駐。


面板群組調整大小和重新命名

您可以視需要變更面板群組的大小和名稱。

若要變更面板群組的大小：

  • 對於浮動面板，就像在作業系統中，您會拖曳任何視窗以調整大小一樣，拖曳面板群組即可調整大小的設定。

    例如，您可以拖曳位於面板群組右下角的調整大小區域。

  • 對於停駐的面板，請拖曳面板與「文件」視窗間的分隔軸。

若要最大化面板群組，請執行下列其中一項作業：

  • 在面板群組的標題列，從「選項」選單中選取「最大化面板群組」。 這是描述功能的圖片。
  • 在面板群組標題列的任何地方按兩下。

    面板群組會垂直放大以填滿所有可用的垂直空間。

若要重新命名面板群組：

  1. 在面板群組的標題列，從「選項」選單中選取「重新命名面板群組」。
  2. 輸入新名稱並按一下「確定」。


儲存面板群組

Dreamweaver 能讓您儲存和還原不同的面板群組，以便針對不同的活動自訂工作區。當您儲存工作區版面時，Dreamweaver 會記住指定的版面中的面板，以及其他屬性像是面板的位置和大小、面板的收合和展開狀態、應用程式視窗的位置和大小，還有「文件」視窗的位置和大小。

如需詳細資訊，請參閱儲存自訂工作區版面。


設定面板偏好設定

您可以設定偏好設定，指定哪些面板和檢視窗永遠要顯示在「文件」視窗的前方，以及哪些要使用「文件」視窗來隱藏。

若要設定面板的偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單中選取「面板」。
  3. 選取選項。

    如需詳細資訊，請參閱設定面板偏好設定。

  4. 按一下「確定」。


使用 Dreamweaver 輔助功能特性

Dreamweaver 提供一些輔助功能以協助殘障使用者。更明確地說，Dreamweaver 支援螢幕讀取器、作業系統輔助功能特性，以及鍵盤操作。

本節包含下列主題：

  • 使用螢幕讀取器配合 Dreamweaver
  • 支援作業系統的輔助功能特性
  • 使用鍵盤操作 Dreamweaver

相關主題

  • Dreamweaver 和輔助功能


使用螢幕讀取器配合 Dreamweaver

螢幕讀取器會朗讀出現在電腦螢幕上的文字， 也會讀出撰寫時在輔助功能標籤或屬性中提供的非文字資訊，例如應用程式中的按鈕標籤或影像描述。

Dreamweaver 的使用者可以使用螢幕讀取器，協助建立網頁。螢幕讀取器會從「文件」視窗的左上角開始朗讀。

Dreamweaver 支援由 Freedom Scientific (www.freedomscientific.com) 開發的 JAWS for Windows，以及由 GW Micro (www.gwmicro.com) 開發的 Window-Eyes 螢幕讀取器。

相關主題

  • 支援作業系統的輔助功能特性
  • 使用鍵盤操作 Dreamweaver


支援作業系統的輔助功能特性

Dreamweaver 同時支援 Windows 和 Macintosh 作業系統的輔助功能特性。例如，您可以在 Macintosh 使用「通用存取偏好設定」對話方塊 (「Apple＞系統偏好設定」) 設定視覺偏好。您的設定將會反映在 Dreamweaver 工作區。

Dreamweaver 也支援 Windows 作業系統的高對比設定。您可以透過 Windows 的「控制台」啟動這個選項。開啟高對比之後，會對 Dreamweaver 產生以下影響：

  • 對話方塊和面板會使用系統顏色設定。

    例如，如果您將顏色設成「黑底白字」，那麼 Dreamweaver 所有的對話方塊和面板都會以白色前景和黑色背景出現。

  • 「程式碼」檢視中的語法色彩標示會關閉。

    「程式碼」檢視會使用系統視窗和視窗文字顏色，忽略「偏好設定」中的顏色設定。例如，如果您將系統顏色設定為「黑底白字」，然後在「偏好設定＞程式碼色彩標示」中變更文字顏色，Dreamweaver 將會忽略「偏好設定」中的顏色設定，並且以白色前景和黑色背景來顯示程式碼文字。

  • 「設計」檢視會使用您在「修改＞頁面屬性」中設定的背景和文字顏色，讓設計頁面呈現出的顏色能與瀏覽器呈現的顏色一致。

相關主題

  • 使用螢幕讀取器配合 Dreamweaver
  • 使用鍵盤操作 Dreamweaver


使用鍵盤操作 Dreamweaver

您可以使用鍵盤操作 Dreamweaver 面板、檢視窗、對話方塊、頁框和表格，而不需要用到滑鼠。

本節包含下列主題：

  • 操作面板
  • 操作「屬性」檢視窗
  • 操作對話方塊
  • 操作頁框
  • 操作表格

相關主題

  • 使用螢幕讀取器配合 Dreamweaver
  • 支援作業系統的輔助功能特性


操作面板

您可以使用鍵盤來操作面板。

注意

只有 Windows 支援使用 Tab 鍵和方向鍵。

若要操作面板：

  1. 在「文件」視窗中，按 Control + Alt + Tab，將焦點移到面板。

    面板的標題列外會出現白色外框，表示焦點在這個面板上。螢幕讀取器會閱讀有焦點的面板標題列。

  2. 再按 Control + Alt + Tab，將焦點移到下一個面板。

    持續進行，直到焦點落在您要使用的面板上。

  3. 必要時，按 Control + Alt + Shift + Tab 會將焦點移回上一個面板。
  4. 如果您要使用的面板沒有開啟，請使用 Windows 選單中列出的鍵盤快速鍵，以顯示適當的面板，然後按 Control + Alt + Tab 將焦點移到這個面板。

    如果您要使用的面板是開啟的，但是沒有展開，請將焦點放在面板標題列上，然後按空格鍵。再按一次空格鍵即可收合面板。

  5. 按 Tab 鍵可以在面板的選項中依序移動。

    選項周圍的虛線外框表示焦點在這個選項上。

  6. 需要時請使用方向鍵：
    • 如果選項中有多項選擇，請使用方向鍵在選擇中捲動，然後按空格鍵選取。
    • 如果在面板群組中還有用來開啟其他面板的索引標籤，請將焦點置於開啟的索引標籤上，然後使用向左或向右鍵開啟其他索引標籤。開啟新的索引標籤之後，按 Tab 鍵就會在面板中的選項依序移動。

相關主題

  • 操作「屬性」檢視窗
  • 操作對話方塊
  • 操作頁框
  • 操作表格


操作「屬性」檢視窗

您可以使用鍵盤操作「屬性」檢視窗，對文件進行變更。

注意

只有 Windows 支援使用方向鍵。

若要操作「屬性」檢視窗：

  1. 在「屬性」檢視窗隱藏的情況下，按 Control + F3 (Windows) 或 Command + F3 (Macintosh) 予以顯示。
  2. (Windows) 按 Control + Alt + Tab 直到焦點移到「屬性」檢視窗為止。
  3. 按 Tab 鍵在「屬性」檢視窗選項中依序移動。
  4. (Windows) 使用方向鍵在選項中移到您要選擇的項目。
  5. 視需要按 Control + Tab (Windows) 或 Option + Tab (Macintosh)，開啟和關閉「屬性」檢視窗中展開的區段，或於焦點停在右下方的展開箭頭上時，按空格鍵。

相關主題

  • 操作面板
  • 操作對話方塊
  • 操作頁框
  • 操作表格


操作對話方塊

您可以使用鍵盤來操作對話方塊。

注意

只有 Windows 支援使用方向鍵。

若要操作對話方塊：

  1. 按 Tab 鍵可以在對話方塊的選項中依序移動。
  2. (Windows) 使用方向鍵可以在選項的各種選擇之間移動。

    例如，如果選項有彈出式選單，請將焦點移到這個選項，然後使用向下鍵在選擇間依序移動。

  3. 如果對話方塊有「分類」清單，請按 Control + Tab (Windows) 或 Option + Tab (Macintosh) 將焦點移到分類清單，然後使用方向鍵在清單內上下移動。
  4. 再按一次 Control + Tab (Windows) 或 Option + Tab (Macintosh) 移到類別的選項。
  5. 按 Enter (Windows) 或 Return (Macintosh) 結束對話方塊。

相關主題

  • 操作面板
  • 操作「屬性」檢視窗
  • 操作頁框
  • 操作表格


操作頁框

如果您的文件含有頁框，您可以使用方向鍵將焦點移到某個頁框。

注意

只有 Windows 支援使用方向鍵。

若要選取頁框：

  1. 請將插入點放在「文件」視窗中。
  2. 按 Alt + 向上鍵，選取目前有焦點的頁框。

    虛線表示有焦點的頁框。

  3. 繼續按 Alt + 向上鍵會將焦點移到頁框組上，然後再移到上層頁框組 (如果是巢狀結構的頁框組)。
  4. 按 Alt + 向下鍵會將焦點移到下層頁框組或頁框組中的單一頁框。
  5. 當焦點停留在單一頁框上時，按 Alt + 向左鍵或向右鍵可在頁框之間移動。
  6. 按 Alt + 向下鍵可將插入點置於「文件」視窗中。

相關主題

  • 操作面板
  • 操作「屬性」檢視窗
  • 操作對話方塊
  • 操作表格


操作表格

選取表格之後，您可以使用鍵盤來操作表格。

若要操作表格：

  1. 視需要使用方向鍵或按 Tab 鍵，移到表格中的其他儲存格。

    提示

    在最右邊的儲存格按 Tab 鍵會新增一列到表格。
  2. 若要選取儲存格，請在插入點位於儲存格內時按 Control + A (Windows) 或 Command + A (Macintosh)。
  3. 若要選取整個表格，請在插入點位於儲存格內時按兩次 Control + A (Windows) 或 Command + A (Macintosh)，或在選取儲存格時按一次。
  4. 若要離開表格，請在插入點位於儲存格內時按三次 Control + A (Windows) 或 Command + A (Macintosh)，或在選取儲存格時按兩次，或在選取表格時按一次；最後按向上、向左或向右鍵。

相關主題

  • 操作面板
  • 操作「屬性」檢視窗
  • 操作對話方塊
  • 操作頁框


最佳化具有輔助功能的頁面設計工作區

當您建立有輔助功能的頁面時，需要建立相關資訊 (例如標籤和描述) 與頁面物件的關聯，才能讓所有使用者都可以存取內容。

做法就是啟用每個物件的「輔助功能」對話方塊，這樣一來，當您插入物件時，Dreamweaver 就會提示您輔助功能資訊。您可對「偏好設定」中「輔助功能」類別的任何物件啟動對話方塊。

若要啟動「輔助功能」對話方塊：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單選取「輔助功能」。

    「偏好設定」對話方塊就會顯示「輔助功能」選項。

  3. 選取您要啟動「輔助功能」對話方塊的物件。

    如需詳細資訊，請參閱設定輔助功能偏好設定。

    注意

    當您插入新的表格時，「插入表格」對話方塊中便會自動出現輔助功能屬性。
  4. 按一下「確定」。

當您將每一種選取的物件插入文件時，「輔助功能」對話方塊便會提示您輸入輔助功能標籤和屬性。

相關主題

  • Dreamweaver 和輔助功能
  • 插入影像
  • 驗證 HTML 表單資料
  • 建立頁框和頁框組
  • 插入和編輯媒體物件
  • 插入表格與新增內容


在 Dreamweaver使用視覺輔助

Dreamweaver 提供數種視覺輔助，協助您設計文件及 (約略地) 預測它們出現在瀏覽器中的樣子。您可以執行下列任何一項作業：

  • 將「文件」視窗立即貼齊到想要的視窗大小，以查看元素對頁面的適宜程度 (請參閱調整文件視窗大小)。
  • 使用影像藍圖做為頁面背景可協助您複製利用圖例或影像編輯應用程式 (如 Macromedia Fireworks) 所建立的設計 (請參閱使用影像藍圖)。
  • 使用尺規和導引線來提供精準定位及調整頁面元素大小的視覺提示 (請參閱使用尺規、導引線和格線來配置頁面)。
  • 使用格線以便精確定位及調整圖層大小 (請參閱使用格線)。

    頁面上的格線標記可協助您對齊圖層，而且在啟用貼齊功能時，圖層會在移動或調整大小時自動貼齊最接近的格線點 (其他物件不會貼齊格線，如影像和段落)。無論是否顯示格線，貼齊功能都有作用。


Dreamweaver 自訂基本概念

有一些基本的技巧您可以用來自訂 Dreamweaver 以符合自己的需求，不需要了解複雜的程式碼或編輯文字檔即可達成。例如，您可以變更工作區版面、隱藏或顯示起始頁面、設定偏好設定、建立自己的鍵盤快速鍵和新增擴充功能至 Dreamweaver。

如需有關在工作區自訂面板版面的資訊，請參閱使用面板與面板群組。

注意

如需有關手動自訂設定檔的資訊，請參閱「Macromedia 支援中心」上的「自訂 Dreamweaver」，網址為 www.macromedia.com/go/customizing_dreamweaver_tw。

本節僅描述最常用的偏好設定選項。如需有關各種偏好設定選項的資訊，請參閱設定 Dreamweaver 偏好設定。

本節包含下列主題：

  • 選擇工作區版面 (僅適用於 Windows)
  • 顯示外框包圍的檔案 (Macintosh)
  • 儲存自訂工作區版面
  • 隱藏和顯示起始頁面
  • 設定 Dreamweaver 的一般偏好設定
  • 設定 Dreamweaver 顯示的字體偏好設定
  • 自訂鍵盤快速鍵
  • 新增擴充功能至 Dreamweaver

相關主題

  • 關於在多使用者系統中自訂 Dreamweaver
  • 擴充 Dreamweaver


選擇工作區版面 (僅適用於 Windows)

在 Windows 中，您可選擇使用「設計人員」或「程式碼撰寫者」工作區版面。當您初次啟動 Dreamweaver 時，就會出現對話方塊讓您選擇工作區版面。您可隨時切換到不同的工作區。

若要在首次啟動 Dreamweaver 時選擇工作區版面：

  1. 選取下列其中一個版面：

    設計人員是使用 MDI (多重文件介面) 的一種整合式工作區，在該工作區中所有的「文件」視窗和面板都是整合到一個較大的應用程式視窗中，將面板群組停駐在右邊。

    程式碼撰寫者是相同的整合式工作區，但是將面板群組停駐在左邊，其版面類似 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的版面，而且依預設，「文件」視窗會顯示「程式碼」檢視。

    注意

    任何一種版面都可以將面板群組停駐在工作區的任一邊。
  2. 按一下「確定」。

若要在選定工作區之後切換到不同的工作區：

  • 選取「視窗＞工作區版面」，再選取您所偏好的工作區版面。

除了選取「程式碼撰寫者」和「設計人員」之外，您還可以選取「雙重螢幕靠右」或「雙重螢幕靠左」。如果您的主要監視器右邊還有一台次要監視器，「雙重螢幕靠右」會將所有面板都放在右側監視器，並將「文件」視窗留在主要監視器。如果您的主要監視器左邊還有一台次要監視器，「雙重螢幕靠左」會將所有面板都放在左側監視器，並將「文件」視窗留在主要監視器。

相關主題

  • 工作區版面
  • 儲存自訂工作區版面
  • 重疊顯示或並排顯示文件視窗
  • 顯示外框包圍的檔案 (Macintosh)


顯示外框包圍的檔案 (Macintosh)

在 Macintosh 上，Dreamweaver 可以在單一「文件」視窗中顯示多份文件，並使用索引標籤來識別每份文件。Dreamweaver 也可以將這些文件顯示成浮動工作區的一部分，而將每份文件呈現於各自的視窗中。

若要在另一個視窗中開啟外框包圍的檔案：

  • 對索引標籤按一下右鍵或 Control + 按一下，再從快速選單選取「移至新視窗」。

若要將分開的文件組合成附帶索引標籤的視窗：

  • 選取「視窗＞以索引標籤方式組合」。

若要變更外框包圍的檔案預設值：

  1. 選取「Dreamweaver＞偏好設定」，然後選取「一般」類別。
  2. 選取或取消選取「在索引標籤中開啟文件」，再按一下「確定」。

    注意

    當您變更偏好設定時，Dreamweaver 並不會改變目前已開啟的文件顯示方式。但是，在您選取新的偏好設定後，隨後開啟的文件都將依據選取的偏好設定來顯示。

相關主題

  • 工作區版面
  • 儲存自訂工作區版面
  • 重疊顯示或並排顯示文件視窗


儲存自訂工作區版面

Dreamweaver 能讓您儲存和還原不同的面板集，以便針對不同的活動自訂工作區。當您儲存工作區版面時，Dreamweaver 會記住指定的版面中的面板，以及其他屬性像是面板的位置和大小、面板的收合和展開狀態、應用程式視窗的位置和大小，還有應用程式視窗的位置和大小。

若要儲存自訂工作區版面：

  1. 依照您的喜好來排列面板。
  2. 選取「視窗＞工作區版面＞儲存目前的版面」。
  3. 輸入版面名稱並按一下「確定」。

若要切換到另一個自訂工作區版面：

  • 選取「視窗＞工作區版面」，再選取您的自訂版面。

若要重新命名或刪除自訂的工作區版面：

  1. 選取「視窗＞工作區版面＞管理」。
  2. 選取版面，然後執行下列其中一項作業：
    • 若要重新命名版面，請按一下「重新命名」按鈕，輸入新的版面名稱，然後按一下「確定」。
    • 若要刪除版面，請按一下「刪除」按鈕。
  3. 按一下「確定」。

相關主題

  • 使用面板與面板群組
  • 選擇工作區版面 (僅適用於 Windows)
  • 顯示外框包圍的檔案 (Macintosh)


隱藏和顯示起始頁面

當您啟動 Dreamweaver 時，以及每當您沒有開啟任何文件時，便會出現 Dreamweaver「起始頁面」。您可以選擇隱藏「起始頁面」，並於稍後再將其顯示。當隱藏「起始頁面」且沒有開啟文件時，「文件」視窗便會是空白的。

注意

可選擇在每次啟動時讓 Dreamweaver 開啟您最後使用的文件。如需詳細資訊，請參閱設定 Dreamweaver 的一般偏好設定。

若要隱藏「起始頁面」：

  • 在「起始頁面」上選取「不要再顯示」核取方塊。

當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便不會出現。

若要顯示「起始頁面」：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現並顯示「一般」偏好設定類別。

  2. 選取「顯示起始頁面」核取方塊。

當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便會出現。


設定 Dreamweaver 的一般偏好設定

「一般」偏好設定控制 Dreamweaver 的一般外觀。

若要變更「一般」偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現並顯示「一般」偏好設定類別。

  2. 設定偏好設定選項。

    如需詳細資訊，請參閱設定一般偏好設定。

  3. 按一下「確定」。


設定 Dreamweaver 顯示的字體偏好設定

文件的編碼方式決定文件在瀏覽器中的顯示方式。Dreamweaver 字體偏好設定讓您以偏好的字體和大小來檢視指定的編碼方式，當別人在瀏覽器中檢視它時也不會影響文件的顯示。

若要設定 Dreamweaver 中針對每種編碼方式類型所用的字體：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單中選取「字體」。
  3. 從「字體設定」清單中選取編碼方式類型 (如「西歐語系 (Latin1)」或「日文」)，然後使用「字體設定」清單下方的字體彈出式選單，選取 Dreamweaver 內該編碼方式所用的字體。

    如需詳細資訊，請參閱設定 Dreamweaver 顯示的字體偏好設定。

    注意

    您選取的字體並不會影響文件在瀏覽者的瀏覽器中的顯示方式。
  4. 按一下「確定」。

相關主題

  • 了解文件編碼方式


自訂鍵盤快速鍵

您可使用「鍵盤快速鍵編輯器」建立您自己的鍵盤快速鍵，包括用在程式碼片段的鍵盤快速鍵。您可在「鍵盤快速鍵編輯器」中移除快速鍵、編輯現有的快速鍵，以及選取預先決定的快速鍵組。

注意

Macromedia 網站已將 Dreamweaver 中所有預設的鍵盤快速鍵整理成圖表，並彙集成快速參考指南以供免費下載，網址為 www.macromedia.com/go/dw_documentation_tw。

若要自訂鍵盤快速鍵：

  1. 選取「編輯＞鍵盤快速鍵」(Windows) 或「Dreamweaver ＞鍵盤快速鍵」(Macintosh)。

    「鍵盤快速鍵」對話方塊就會出現。

  2. 新增、刪除或編輯鍵盤快速鍵。

    如需詳細資訊，請參閱設定鍵盤快速鍵對話方塊選項。

  3. 按一下「確定」。


新增擴充功能至 Dreamweaver

擴充功能指您可以輕易加入 Dreamweaver 的新功能。您可以使用很多類型的擴充功能；例如，可讓您重新格式化表格、連結至後端資料庫或協助您撰寫瀏覽器的 Script 等擴充功能。

注意

若要在多使用者作業系統上安裝所有使用者都可以存取的擴充功能，您必須以 Administrator (Windows) 或 Root (Mac OS X) 的身份登入。如需關於多使用者系統的詳細資訊，請參閱關於在多使用者系統中自訂 Dreamweaver。

若要尋找 Dreamweaver 的最新擴充功能，請造訪 Macromedia Exchange 網站，網址為 www.macromedia.com/go/dreamweaver_exchange_tw/。您可以登入該網站並下載擴充功能 (很多擴充功能是免費的)、加入討論群組、檢視使用者評價和校閱，以及安裝和使用「擴充功能管理員」。您必須在安裝擴充功能之前，先安裝「擴充功能管理員」。

「擴充功能管理員」是一個個別的應用程式，可讓您安裝及管理 Macromedia 應用程式中的擴充功能。從 Dreamweaver 中選擇「命令＞管理擴充功能」來啟動「擴充功能管理員」。

若要安裝及管理擴充功能：

  1. 在 Macromedia Exchange 網站上，按一下擴充功能的下載連結。

    您的瀏覽器可能會讓您選擇直接從網站開啟並安裝，或將其儲存到磁碟。

    • 如果您是直接從網站開啟擴充功能，「擴充功能管理員」會自動處理安裝。
    • 如果您是將擴充功能儲存到磁碟上，電腦上 Dreamweaver 應用程式資料夾內的 Downloaded Extensions 資料夾會是儲存擴充功能套件檔 (.mxp) 的好地方。
  2. 按兩下該擴充功能套件檔，或者是開啟「擴充功能管理員」並選取「檔案＞安裝擴充功能」。

    擴充功能會安裝在 Dreamweaver 中。有些擴充功能在重新啟動 Dreamweaver 之前是無法存取的；您可能會收到提示，要求結束並重新啟動應用程式。

    注意

    使用「擴充功能管理員」來移除擴充功能或查看擴充功能的相關詳細資訊。


參考

本節提供這一章中所介紹的下列對話方塊和檢視窗的資訊，以及設定 Dreamweaver 偏好設定的相關資訊：

  • 設定字體偏好設定
  • 設定一般偏好設定
  • 設定標示偏好設定
  • 設定面板偏好設定
  • 設定狀態列偏好設定
  • 設定自訂最愛物件對話方塊選項
  • 設定重新命名面板群組對話方塊選項
  • 設定首字縮寫或縮寫對話方塊選項
  • 設定輔助功能偏好設定
  • 設定鍵盤快速鍵對話方塊選項
  • 設定 Dreamweaver 偏好設定


設定字體偏好設定

這個對話方塊讓您可以指定 Dreamweaver 用來顯示每種字體編碼方式的字體。如需關於為新文件設定預設編碼方式的資訊，請參閱建立和開啟文件。

注意

您選取的字體並不會影響文件在瀏覽者的瀏覽器中的顯示方式。

若要設定 Dreamweaver 中針對每種編碼方式類型所用的字體：

  1. 從「字體設定」清單中選取編碼方式類型 (如「西歐語系」或「日文」)。

    字體設定讓您指定 Dreamweaver 中使用既定編碼方式類型的文件所用之字體組。例如，若要指定日文文件所用的字體，請從「字體設定」清單中選取「日文」，然後從下方的選單中選取調和間距字體、固定字體、「程式碼」檢視字體和標籤檢視窗字體；則所有使用日文編碼方式的文件，都會在 Dreamweaver 中使用那些指定的字體顯示。

    若要指定美式英語和所有西歐語系所用的字體，請從「字體設定」清單中選取「西歐語系」，然後從字體彈出式選單中選取這組四種字體。若要為亞洲語系設定適當的雙位元組字體，請選取「日文」、「繁體中文」、「簡體中文」或「韓文」 (若要顯示亞洲語言，您必須使用支援雙位元組字體的作業系統)。您也可以選取「中歐語系」、「斯拉夫文」、「希臘文」、「冰島文 Mac」或「其他」編碼方式的字體。

  2. 使用「字體設定」清單下方的字體彈出式選單，選取 Dreamweaver 內該選取編碼方式所用的字體。為每種類別選取一組字體和大小。

    注意

    若要讓某字體出現在字體彈出式選單中，必須先將它安裝在電腦上。例如，若要查看日文文字，您必須安裝日文字體。

    調和間距字體是 Dreamweaver 用來顯示正常文字 (例如，段落、標題和表格中的文字) 的字體。預設值要視系統所安裝的字體而定。對大多數的美國系統而言，在 Windows 上的預設值是 Times New Roman 12 pt. (Medium)，而在 Macintosh 上則為 Times 12 pt.。

    固定字體是 Dreamweaver 用來顯示 pre、code 和 tt 標籤內文字的字體。預設值要視系統所安裝的字體而定。對大多數的美國系統而言，在 Windows 上的預設值是 Courier New 10 pt. (Small)，而在 Macintosh 上則為 Monaco 12 pt.。

    程式碼檢視是出現在「程式碼」檢視和「程式碼」檢視窗中的所有文字所用之字體。預設值要視系統所安裝的字體而定。

    使用動態映射字型是 Windows 平台上的 Unicode 編碼方式可用的選項。如果選取這個選項，Dreamweaver 便會檢查選定的字體系列是否已有呈現每個字元所需的 Glyph。如果字體系列缺少 Glyph，Dreamweaver 則以能夠顯示所需字元的適當字體系列取代。這對使用多語系的單一文件來說，可以避免出現不該有的字元。

    啟用這個選項後，網頁載入瀏覽器的時間會拖久一點。

    注意

    這個選項只能用在 Windows 平台。Macintosh 上的字體始終都是動態映射的。
  3. 按一下「確定」儲存偏好設定。


設定一般偏好設定

這個對話方塊可以讓您指定 Dreamweaver 一般外觀的偏好設定。「一般」偏好設定分成兩個子類別： 「文件選項」和「編輯選項」。

若要指定一般偏好設定：

  1. 請指定下列選項：

    在索引標籤中開啟文件會在含有索引標籤的單一視窗中開啟所有文件，讓您能在文件之間切換 (僅適用於 Macintosh)。

    顯示起始頁面會在啟動 Dreamweaver 時，或者在沒有開啟任何文件時，顯示 Dreamweaver 的「起始頁面」。

    啟動時重新開啟文件可開啟在您關閉 Dreamweaver 時仍為開啟狀態的任何文件。如果沒有選取這個選項，Dreamweaver 會在您啟動時顯示「起始頁面」或空白螢幕 (依您的「顯示起始頁面」設定而定)。

    當打開唯讀檔案時發出警告會在您開啟唯讀 (鎖定的) 檔案時警告您。已提供選項讓您解除鎖定/取出檔案、檢視檔案或取消。

    當移動檔案時更新連結決定在您移動、重新命名或刪除網站內的文件時，Dreamweaver 所要執行的動作。此偏好設定可設定為總是自動更新連結、永不更新連結或提示您執行更新 (請參閱管理連結)。

    變更工作區 (僅適用於 Windows) 讓您可以選取「設計人員」版面 (面板在右邊的整合式工作區) 或「程式碼撰寫者」版面 (面板在左邊的整合式工作區)。在「設計人員」版面中，文件依預設會出現在「設計」檢視中，然而，在「程式碼撰寫者」版面中，文件依預設會出現在「程式碼」檢視中。選取新的工作區之後，結束 Dreamweaver 並重新啟動以查看變更。如需詳細資訊，請參閱工作區版面。

    插入物件時顯示對話方塊會決定在您利用「插入」列或「插入」選單來插入影像、表格、Shockwave 影像和某些其他物件時，Dreamweaver 是否會提示您輸入其他資訊。如果此選項是關閉的，就不會顯示對話方塊，而且您必須使用「屬性」檢視窗來指定影像的原始檔、表格中的列數等等。如果插入的是滑鼠變換影像和 Fireworks HTML，則不論此選項的設定為何都會在您插入物件時出現對話方塊 (若要暫時覆寫此設定，請在建立和插入物件時，使用 Control + 按一下滑鼠 (Windows) 或 Command + 按一下滑鼠 (Macintosh))。

    打開雙位元行內輸入功能，如果您正在使用的開發環境或語言套件有助於雙位元組文字 (如日文字元) 的話，這個選項可讓您直接在「文件」視窗中輸入雙位元組文字。在取消選取此選項時，會出現一個輸入和轉換雙位元組文字專用的文字輸入視窗；接受它之後，文字便會出現在「文件」視窗 (請參閱設定 Dreamweaver 顯示的字體偏好設定)。

    在標題後切換為一般段落指定在「設計」檢視中於標題段落結尾處按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 時，會建立一個標有 p 標籤的新段落 (標題段落是加上 h1 或 h2 之類的標題標籤的段落)。當此選項被停用時，在標題段落的結尾處按 Enter 鍵或 Return 鍵，就會建立一個使用相同標題標籤的新段落 (可讓您在列中輸入多個標題，然後返回並填入詳細資料)。

    允許多個連續空白指定在「設計」檢視中輸入兩個或多個空白時建立不斷行空白，這些空白出現在瀏覽器中會當做多個空白 (例如，您可以在句子之間輸入兩個空白，就像使用打字機時的動作一樣)。此選項是針對大都習慣使用文書處理程式來輸入的人而設計。當此選項被停用時，多個空白會被視為單一空白 (因為瀏覽器會將多個空白視為單一的空白)。

    使用 <strong> 和 <em> 取代 <b> 和 <i> 指定 Dreamweaver 在您執行通常會套用 b 標籤的動作時，一律套用 strong 標籤；在您執行通常會套用 i 標籤的動作時，一律套用 em 標籤。這類動作包括在「HTML」模式的文字「屬性」檢視窗中按一下「粗體」或「斜體」按鈕，以及選擇「文字＞樣式＞粗體」或「文字＞樣式＞斜體」。若要在文件中使用 b 和 i 標籤，請取消選取這個選項。

    注意

    World Wide Web Consortium 不建議使用 b 和 i 標籤；strong 和 em 標籤提供的語法資訊比 b 和 i 標籤還要多。

    使用 CSS 取代 HTML 標籤會指定 Dreamweaver 在您利用「屬性」檢視窗格式化文字時，使用 CSS 樣式來取代 HTML 標籤。依照預設，Dreamweaver 會使用 CSS 來格式化文字。每當您定義了文字選取範圍的字體、大小或顏色後，Dreamweaver 便會建立文件專屬的新樣式，讓您稍後可以從「屬性」檢視窗的「樣式」彈出式選單中取用。唯一的例外是粗體和斜體，Dreamweaver 會對這兩者使用 HTML 標籤，而非 CSS。

    即使文件連結外部樣式表，新的樣式宣告仍將寫入文件檔頭中，而不是寫入 CSS 檔案中。

    在下列情況下，這種一般行為可能會有所不同：

    • 如果文件已經使用 font 標籤將所有內容格式化，Dreamweaver 將假設文件應該使用 font 標籤，並使用 HTML 程式碼來修改 body 標籤。
    • 如果文件的 body 標籤使用 HTML 設定網頁的外觀，但是並非整份網頁都使用 font 標籤，Dreamweaver 仍將使用 CSS 來格式化文字。

    如果您取消選取這個選項，Dreamweaver 將會使用 HTML 標籤 (例如 font 標籤) 來格式化文字，並在 body 標籤中使用 HTML 程式碼來設定網頁的外觀。

    在 <p> 或 <h1><h6> 標籤內放置可編輯的區域時發出警告可指定每當您所儲存的 Dreamweaver 樣版在段落標籤或標題標籤內含有可編輯的區域時，Dreamweaver 是否顯示警告訊息。警告訊息會告訴您，使用者將無法在該區域內建立其他段落。這個選項在預設中為啟用。

    操作記錄步驟的上限決定「操作記錄」面板保留和顯示的步驟數 (預設值對大多數使用者而言應已足夠)。如果您超過「操作記錄」面板的設定步驟數目的話，會捨棄最舊的步驟 (請參閱工作自動化)。

    拼字字典列出可用的拼字字典。如果字典包含多個衍生語言或拼字慣例 (如美式英語和英式英語)，則會在「字典」彈出式選單中分別列出各衍生語言。

  2. 按一下「確定」儲存偏好設定。

相關主題

  • 設定 Dreamweaver 的一般偏好設定


設定標示偏好設定

標示偏好設定可讓您自訂 Dreamweaver 用來識別樣版區域、圖庫項目、協力廠商標籤、版面元素和程式碼的顏色。

若要變更標示顏色：

  • 在要變更標示顏色的物件旁，按一下顏色方塊，然後使用顏色挑選器以選取新的顏色，或輸入十六進位值。

    注意

    如需有關使用顏色挑選器的詳細資訊，請參閱使用顏色

若要啟動或停用物件的標示：

  • 在要啟動或停用顏色標示的物件旁，選取或取消選取「顯示」核取方塊。

相關主題

  • 若要為表格、版面儲存格和 CSS 版面區塊指定標示顏色，請參閱選取表格元素、繪製版面儲存格和表格或變更 Div 標籤的反白標示顏色。
  • 若要在樣版和以樣版為基礎的檔案中，為可編輯區域和鎖定區域指定標示顏色，請參閱設定樣版區域的標示偏好設定。
  • 若要為圖庫項目指定標示顏色，請參閱設定圖庫標示偏好設定。
  • 若要為標有協力廠商標籤的內容，指定標示顏色，請選取「協力廠商的標籤」選項的顏色。如需有關協力廠商標籤的詳細資訊，請參閱「Macromedia 支援中心」上的「自訂 Dreamweaver」。
  • 如需檢視即時資料的詳細資訊，請參閱在設計檢視中檢視即時資料。


設定面板偏好設定

這個對話方塊讓您可以指定哪些面板和檢視窗永遠要顯示在「文件」視窗的前方，以及哪些要使用「文件」視窗來隱藏。

若要指定面板偏好設定：

  1. 請執行下列其中一項作業：
    • 將不要套用「永遠在最上層」選項的任何面板或檢視窗加以取消選取。

      注意

      當所有面板都是停駐時，「永遠在最上層」選項不能套用於整合式工作區。

      套用「永遠在最上層」選項時，任何面板、檢視窗和其他浮動視窗，都會依預設顯示在「文件」視窗的前方。如果您取消選取此清單中的項目，就可以在該項目之前移動「文件」視窗。

      例如，若要讓「文件」視窗隱藏「屬性」檢視窗，請取消選取「屬性」選項。現在只有在「屬性」檢視窗作用中時，它才會出現在「文件」視窗之前。

    • 若要透過自訂 Dreamweaver 的方式讓「文件」視窗隱藏您新增的任何浮動面板，請取消選取「全部其他面板」。
  2. 按一下「確定」儲存偏好設定。

相關主題

  • 設定面板偏好設定


設定狀態列偏好設定

這個對話方塊讓您可以指定狀態列顯示項目的偏好設定。

若要指定狀態列偏好設定：

  1. 請指定下列選項：

    視窗大小讓您自訂在狀態列彈出式選單中顯示的視窗大小 (請參閱調整文件視窗大小)。

    連線速度決定用來計算下載大小的連線速度 (以 KB/秒表示)。頁面的下載大小顯示在狀態列中。在「文件」視窗中選取某個影像時，該影像的下載大小會顯示在「屬性」檢視窗中。

  2. 按一下「確定」儲存偏好設定。

相關主題

  • 狀態列
  • 設定狀態列偏好設定


設定自訂最愛物件對話方塊選項

這個對話方塊讓您可以將「插入」列中最常使用的按鈕加以群組並排列組織。

若要完成「自訂最愛物件」對話方塊：

  1. 請執行下列其中一項作業：
    • 若要新增物件，在「可用的物件」窗格的左邊選取物件，再按一下兩個窗格間的箭頭，或按兩下「可用的物件」窗格中的物件。

      注意

      一次可以新增一個物件。您無法藉由選取類別名稱 (如「常用」)，將整個類別新增到最愛清單中。

      物件便會出現在「最愛物件」窗格的右邊。

    • 若要刪除物件或分隔符號，在「最愛的物件」窗格的右邊選取物件，然後按一下窗格上方的「移除最愛的物件清單中所選取的物件」按鈕。

      物件便會在「最愛的物件」窗格中消失。

    • 若要移動物件，在「最愛的物件」窗格的右邊選取物件，然後按一下窗格上方的向上或向下鍵按鈕。

      物件便會在「最愛的物件」窗格中移動。

    • 若要在物件下方新增分隔符號，在「最愛的物件」窗格的右邊選取物件，然後按一下窗格下方的「新增分隔符號」按鈕。

      分隔符號便會出現在選取物件的下方。

  2. 按一下「確定」。

    「插入」列的「最愛」類別會影響您作的變更。

相關主題

  • 自訂和使用插入列中的最愛類別


設定重新命名面板群組對話方塊選項

這個對話方塊讓您可以變更面板群組的名稱。

若要重新命名面板群組：

  1. 在「面板群組名稱」文字方塊中輸入新名稱。
  2. 按一下「確定」。

相關主題

  • 使用面板與面板群組


設定首字縮寫或縮寫對話方塊選項

這個對話方塊是用來輸入首字縮寫或縮寫的完整文字。

若要完成「首字縮寫」或「縮寫」對話方塊選項：

  1. 輸入首字縮寫或縮寫的完整文字。
  2. 輸入語言的名稱。
  3. 按一下「確定」。


設定輔助功能偏好設定

這個對話方塊是用來啟動輔助功能對話方塊。

若要啟動輔助功能對話方塊：

  1. 在「插入物件時顯示屬性」下，選取要啟動輔助功能對話方塊的物件。

    當您將每一種選取的物件類型插入文件時，「輔助功能」對話方塊便會提示您輸入輔助功能標籤或屬性。

    注意

    當您插入新的表格時，「插入表格」對話方塊中便會自動出現輔助功能屬性。
  2. 如果您想在開啟面板後就能逕行取用面板，請選取「保持焦點」選項。

    根據預設，當您開啟面板後，Dreamweaver 會將焦點保持在「設計」檢視或「程式碼」檢視。如果使用螢幕讀取器，這種預設情形會造成取用面板上的困難。選取此選項，可讓您取用面板而不必切換焦點。

  3. 如果您的螢幕讀取器有問題，請取消選取「超出螢幕的顯示」核取方塊。
  4. 按一下「確定」。

相關主題

  • 最佳化具有輔助功能的頁面設計工作區


設定鍵盤快速鍵對話方塊選項

這個對話方塊是用來建立自訂的快速鍵、編輯現有的快速鍵或選取預先決定的快速鍵組。

若要完成「鍵盤快速鍵」對話方塊：

  1. 請設定下列任一種選項：

    目前設定可讓您選擇 Dreamweaver 所含的預先決定快速鍵組，或您已定義的任何自訂快速鍵組。預先決定的快速鍵組會列在選單頂端。例如，如果您很熟悉 HomeSite 或 BBEdit 中的快速鍵，則藉由選擇對應的預先決定快速鍵組，就可以使用這些快速鍵。

    命令讓您選取要編輯的命令類別。例如，您可以編輯選單命令 (如「開啟」命令) 或程式碼編輯命令 (如「對稱的大括弧」)。

    提示

    若要為程式碼片段新增或編輯鍵盤快速鍵，請從「命令」彈出式選單中選取「片段」。如需建立程式碼片段的相關資訊，請參閱使用程式碼片段。

    命令清單會顯示您從「命令」彈出式選單中所選的類別之相關命令，還有指定的快速鍵。「選單命令」類別會將此清單顯示為樹狀檢視，它會複寫選單的結構。其他類別會依名稱 (如「結束應用程式」) 在平面清單中列出命令。

    快速鍵顯示指定給選取命令的所有快速鍵。

    新增項目 (+) 會將新快速鍵加入目前命令。按一下此按鈕在「快速鍵」文字方塊中加入新的空行。輸入新的按鍵組合，並按一下「變更」來為這個命令新增一個新的鍵盤快速鍵。您可以為每個命令指定兩個不同的鍵盤快速鍵；如果某個命令已有兩個指定的快速鍵，則「新增項目」按鈕將不會執行任何動作。

    移除項目 (-) 會從快速鍵清單中移除選取的快速鍵。

    按下按鍵會在您新增或變更快速鍵時，顯示所輸入的按鍵組合。

    變更會將「按下按鍵」文字方塊中所示的按鍵組合加入快速鍵清單中，或將選取的快速鍵變更為指定的按鍵組合。

    重製於原位會重製目前的快速鍵組。請為新的快速鍵組指定名稱；預設名稱是目前快速鍵組的名稱再加上「複製」字樣。

    重新命名會重新命名目前的快速鍵組。

    另存為 HTML 檔案會將目前的快速鍵組以 HTML 表格格式加以儲存，以便檢視及列印。您可以在瀏覽器中開啟 HTML 檔案並列印快速鍵作為簡易參考資料。

    刪除會刪除快速鍵組 (您無法刪除作用中的快速鍵組)。

  2. 按一下「確定」。

若要從命令移除快速鍵：

  1. 從「命令」彈出式選單中，選取一種命令類別。

    「命令」清單會顯示該類別中的命令。

  2. 在「命令」清單中，選取一種命令。

    指定給該命令的快速鍵會出現在「快速鍵」文字方塊中。

  3. 選取一個快速鍵。
  4. 按一下「移除項目 (-)」按鈕。

若要將快速鍵加入命令中：

  1. 從「命令」彈出式選單中，選取一種命令類別。

    「命令」清單會顯示該類別中的命令。

  2. 在「命令」清單中，選取一種命令。

    提示

    若要為程式碼片段新增鍵盤快速鍵，請從「命令」彈出式選單中選取「片段」。如需建立程式碼片段的相關資訊，請參閱使用程式碼片段。

    指定給該命令的快速鍵會出現在「快速鍵」文字方塊中。

  3. 執行下列其中一項作業來準備新增快速鍵：
    • 如果已指定給該命令的快速鍵少於兩個，請按一下「新增項目 (+)」按鈕。在「快速鍵」文字方塊中會出現一個新空行，而且插入點會移到「按下按鍵」文字方塊中。
    • 如果該命令已經指定了兩個快速鍵，請選取其中一個快速鍵 (該快速鍵就會由新的快速鍵取代)。然後在「按下按鍵」文字方塊中按一下。
  4. 按下按鍵組合。

    該按鍵組合便會出現在「按下按鍵」文字方塊中。

    注意

    如果該按鍵組合有問題 (例如，如果該按鍵組合已指定給另一個命令)，便會在「快速鍵」文字方塊下方出現說明訊息，而且您無法新增或編輯該快速鍵。
  5. 按一下「變更」。新的按鍵組合會指定給該命令。

若要編輯現有的快速鍵：

  1. 從「命令」彈出式選單中，選取一種命令類別。

    「命令」清單會顯示該類別中的命令。

  2. 在「命令」清單中，選取一種命令。

    指定給該命令的快速鍵會出現在「快速鍵」文字方塊中。

  3. 選取要變更的快速鍵。
  4. 在「按下按鍵」文字方塊中按一下並輸入新的按鍵組合。
  5. 按一下「變更」按鈕來變更快速鍵。

    注意

    如果該按鍵組合有問題 (例如，如果該按鍵組合已指定給另一個命令)，便會在「快速鍵」欄位下方出現說明訊息，而且您無法新增或編輯該快速鍵。

相關主題

  • 自訂鍵盤快速鍵


設定 Dreamweaver 偏好設定

Dreamweaver 的偏好設定可以控制 Dreamweaver 使用者介面的一般外觀和行為，還能控制與特定功能 (如圖層、樣式表、顯示 HTML 和 JavaScript、外部編輯器以及在瀏覽器中預覽) 相關的選項。

如需有關設定 Dreamweaver 偏好設定的詳細資訊，請參閱下列小節：

  • 設定 Dreamweaver 的一般偏好設定
  • 最佳化具有輔助功能的頁面設計工作區
  • 設定程式碼色彩標示偏好設定
  • 設定程式碼格式偏好設定選項
  • 設定程式碼提示偏好設定
  • 設定改寫程式碼偏好設定
  • 設定 CSS 樣式偏好設定
  • 在 Dreamweaver 中指定比較工具
  • 設定「檔案類型/編輯器」偏好設定選項
  • 設定外部影像編輯器偏好設定
  • 啟動媒體檔案的外部編輯器
  • 設定 Dreamweaver 顯示的字體偏好設定
  • 設定標示偏好設定
  • 設定隱藏元素偏好設定
  • 設定圖層偏好設定
  • 設定版面模式的偏好設定
  • 新增文件偏好設定對話方塊中的設定選項
  • 插入 Word 或 Excel 文件的連結
  • 設定面板偏好設定
  • 設定「在瀏覽器中預覽」偏好設定選項
  • 設定網站偏好設定選項
  • 設定狀態列偏好設定
  • 設定驗證工具偏好設定


設定 Dreamweaver 網站

網站是一組具有共用屬性的連結文件及資源，如相關主題、類似設計或共用目的等。Macromedia Dreamweaver 8 是一個網站建立和管理工具，所以除了個別文件之外，還可以用來建立完整的網站。

建立網站的第一步便是規劃。為了取得最佳結果，在建立網站所含的任何頁面之前，請先設計並規劃您的網站結構。

下一步是設定 Dreamweaver，而後可以處理網站的基本結構。如果您在網站伺服器上已經有了網站，可以使用 Dreamweaver 編輯該網站。

提示

當您開發網站內容時，請考慮將您的網頁以 Dreamweaver 樣版為基礎 請參閱關於 Dreamweaver 樣版和建立 Dreamweaver 樣版。

本章包含下列各節：

關於 Dreamweaver 網站

設定新的 Dreamweaver 網站

使用進階設定來設定 Dreamweaver 網站

編輯 Dreamweaver 網站的設定

在 Dreamweaver編輯現有的網站


關於 Dreamweaver 網站

Dreamweaver 網站提供了一種可以組織所有網站相關文件的方式。組織網站中的檔案，能讓您使用 Dreamweaver 將網站上傳至網站伺服器、自動追蹤及維護您的連線、管理檔案以及共用檔案。若要充分掌握 Dreamweaver 的功能，您應該定義一個網站。

Dreamweaver 網站由三個部份 (或資料夾) 組成，會因您的開發環境及開發的網站類型而異：

本機資料夾是您的工作目錄。Dreamweaver 會將此資料夾視為您的「本機網站」。這個資料夾可以位於您的本機機器或網路伺服器上。它就是使用 Dreamweaver 網站時，您儲存處理檔案的地方。

如果要定義 Dreamweaver 網站，您只需設定本機資料夾。若要將檔案傳送到網路伺服器或是要開發網路應用程式，您還需新增遠端網站的資訊，並測試伺服器。

遠端資料夾資訊是您儲存檔案的資料夾，會因您測試、實際執行、共同作業的開發環境而異。Dreamweaver 會將此資料夾視為「檔案」面板中的「遠端網站」。一般而言，您的遠端資料夾會位於執行網站伺服器的機器上。

本機和遠端資料夾一能使用，能讓您在本機磁碟和網站伺服器之間傳送檔案，以便可以更輕鬆地管理 Dreamweaver 網站中的檔案。

測試伺服器資料夾是 Dreamweaver 處理動態網頁的資料夾。如需詳細資訊，請參閱指定可以處理動態網頁的位置。

注意

如需設定本機和遠端資料夾的資訊，請參閱了解本機和遠端資料夾結構。

相關主題

  • 設定新的 Dreamweaver 網站


了解本機和遠端資料夾結構

在為 Dreamweaver 網站設定遠端資料夾的存取時 (請參閱設定遠端資料夾)，您必須決定遠端資料夾的主機目錄。您指定的主機目錄應該對應到本機資料夾的根資料夾。下圖左邊顯示範例本機資料夾，而右邊則是範例遠端資料夾。

如果您的遠端資料夾結構不符合本機資料夾的結構，Dreamweaver 會將檔案上傳到錯誤的位置，連線到這個網站的瀏覽者會看不到檔案，而且您的影像和連線路徑也都會無效。

在 Dreamweaver 連線到遠端根目錄之前，這個目錄就必須存在。如果您的遠端資料夾沒有根目錄，請自行建立或要求伺服器管理員為您建立根目錄。

即使您只打算編輯遠端網站的一部份，也必須將遠端網站相關分支的整個結構 (從遠端網站的根資料夾向下到您要編輯的檔案) 複製到本機環境上。

例如，如果遠端網站的根資料夾命名為 public_html，其中包含兩個資料夾 Project1 和 Project2，而您只想處理 Project1 中的 HTML 檔，則不需要下載 Project2 中的檔案，但是必須將本機根資料夾對應到 public_html，而非對應到 Project1。

相關主題

  • 關於 Dreamweaver 網站
  • 設定遠端資料夾


設定新的 Dreamweaver 網站

在您規劃網站結構之後，或如果您已有現存的網站，應該在開始開發之前，先在 Dreamweaver 中定義網站。設定 Dreamweaver 網站是一種組織所有與網站相關文件的方式。如需詳細資訊，請參閱關於 Dreamweaver 網站。

注意

不設定 Dreamweaver 網站，您也可以編輯檔案。如需詳細資訊，請參閱存取網站、伺服器和本機磁碟。

在設定 Dreamweaver 網站後，最好能夠匯出網站，這樣您就會有本機備份複本。如需詳細資訊，請參閱匯入和匯出網站。

若要設定 Dreamweaver 網站：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

    注意

    如果沒有定義任何 Dreamweaver 網站，就會出現「網站定義」對話方塊，您可略過下一個步驟。
  2. 按一下「新增」按鈕。

    「網站定義」對話方塊就會出現。

  3. 請執行下列其中一項作業：
    • 按一下「基本」索引標籤使用「網站定義精靈」，它會引導您逐步完成設定程序。

      注意

      我們鼓勵 Dreamweaver 的新使用者使用「網站定義精靈」。Dreamweaver 的資深使用者可能會偏好使用「進階」設定。
    • 按一下「進階」索引標籤使用「進階」設定，這樣您可以視需要分別設定本機、遠端和測試資料夾。

      注意

      若要開始動作，您可以完整設定一個 Dreamweaver 網站，或從設定本機資料夾為開始的第一步。
  4. 完成 Dreamweaver 網站設定程序：
    • 對於「網站定義精靈」，回答每個螢幕上的問題，再按一下「下一步」繼續進行安裝程序，或按一下「上一步」回到上一個畫面。
    • 對於「進階」設定，請視需要完成「本機資訊」類別、「遠端資訊」類別及「測試伺服器」類別 (請參閱使用進階設定來設定 Dreamweaver 網站)。

      提示

      在設定 Dreamweaver 網站後，最好能夠匯出網站，這樣您就會有本機備份複本。如需詳細資訊，請參閱匯入和匯出網站。

如果您設定 Dreamweaver 網站是要建立網路應用程式，請參閱設定網路應用程式。


使用進階設定來設定 Dreamweaver 網站

您可以使用「網站定義」對話方塊的「進階」設定，設定 Dreamweaver 網站。「進階」設定可讓您視需要分別設定本機、遠端及測試 (用於處理動態網頁) 資料夾。我們建議對 Dreamweaver 有經驗的使用者才使用這個方法。

注意

若要儘速開始，您可以只從設定 Dreamweaver 網站的第一步開始，設定您的本機資料夾。然後稍後再新增遠端和測試資訊。在開始使用 Dreamweaver 之前，您應該至少設定一個本機資料夾。

如果您對 Dreamweaver 不熟悉，可以使用「網站定義精靈」，而不是進階設定，來引導您完成設定程序 (請參閱設定新的 Dreamweaver 網站)。

如果您設定 Dreamweaver 網站是要建立網路應用程式，請跳過本節並參閱設定網路應用程式。

提示

在設定 Dreamweaver 網站後，最好能夠匯出網站，這樣您就會有本機備份複本。如需詳細資訊，請參閱匯入和匯出網站。

本節包含下列主題：

  • 設定本機資料夾
  • 設定遠端資料夾
  • 疑難排解遠端資料夾設定

相關主題

  • 關於 Dreamweaver 網站
  • 指定可以處理動態網頁的位置


設定本機資料夾

本機資料夾是您 Dreamweaver 網站的工作目錄。這個資料夾可以位於您的本機機器或網路伺服器上。

若要設定本機資料夾：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

    注意

    如果沒有定義任何 Dreamweaver 網站，就會出現「網站定義」對話方塊，您可略過下一個步驟。
  2. 按一下「新增」。

    「網站定義」對話方塊就會出現。

  3. 如果沒有顯示「進階」設定，請按一下「進階」按鈕。

    在「網站定義」對話方塊的「進階」索引標籤中，會顯示「本機資訊」類別選項。

  4. 輸入「本機資訊」選項。

    如需詳細資訊，請參閱設定本機資訊類別選項。

  5. (選擇性) 如果您現在準備要設定遠端伺服器，可略過其餘步驟，直接選取左邊的「遠端資訊」類別，再完成對話方塊。

    如需詳細資訊，請參閱設定遠端資訊類別選項。

  6. 按一下「確定」。

    Dreamweaver 會建立初始的網站快取，而新的 Dreamweaver 網站會出現在「檔案」面板中。

在您設定本機資料夾後，也可以新增遠端及測試資料夾 (請參閱設定遠端資料夾和指定可以處理動態網頁的位置)。

相關主題

  • 關於 Dreamweaver 網站
  • 管理檔案
  • 設定遠端資料夾


設定遠端資料夾

在設定 Dreamweaver 網站的本機資料夾之後 (請參閱設定本機資料夾)，就可以設定遠端資料夾。因開發環境而異，遠端資料夾是您儲存檔案以進行測試、共同作業、實際執行、部署等作業的位置。

注意

如果指定做為本機資料夾的資料夾，與建立在執行網路伺服器系統上、網站檔案所要用的資料夾相同時，則不需要指定遠端資料夾。這表示網站伺服器正在您的本機電腦上執行。

決定存取遠端資料夾以及加上連線資訊備註的方式。本節描述如何設定遠端資料夾以及如何連線到此資料夾。

若要設定遠端資料夾：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取現有的 Dreamweaver 網站。

    如果您沒有定義任何 Dreamweaver 網站，在繼續之前請先建立本機資料夾 (請參閱設定本機資料夾)。

  3. 按一下「編輯」。

    「網站定義」對話方塊就會出現。

  4. 如果沒有顯示「進階」設定，請按一下「進階」按鈕。
  5. 從左邊的「分類」清單中選取「遠端資訊」。
  6. 選取「存取」選項。

    如需詳細資訊，請參閱設定遠端資訊類別選項。

  7. 按一下「確定」。

    Dreamweaver 會建立到遠端資料夾的連線。如果您正在開發動態網站，可以新增「測試伺服器」資料夾，以便處理動態網頁 (請參閱指定可以處理動態網頁的位置)。

若要以 FTP 存取與遠端資料夾連線：

  • 在「檔案」面板中，按一下工具列上的「連結至遠端主機」按鈕。

若要以 FTP 存取從遠端資料夾中斷連線：

  • 「檔案」面板中，按一下工具列上的「中斷連結」按鈕。

若要以網路存取與遠端資料夾連線或中斷連線：

  • 您不需要連線到固定連線的遠端資料夾。按一下「重新整理」按鈕，查看遠端檔案。

相關主題

  • 關於 Dreamweaver 網站
  • 了解本機和遠端資料夾結構
  • 疑難排解遠端資料夾設定


疑難排解遠端資料夾設定

網站伺服器可以利用各式各樣的方式設定。以下清單提供了設定遠端資料夾時 (請參閱設定遠端資料夾)，可能會遇到的一些共同問題的相關資訊及其解決方法：

  • Dreamweaver FTP 實作因為使用某些 Proxy 伺服器、多層防火牆及其他間接的伺服器存取形式而無法正常運作。

    如果您遇到 FTP 存取的問題，請洽詢本機系統管理員尋求協助。

  • 若是實作 Dreamweaver FTP，您必須連線至遠端系統的根資料夾。(在很多應用程式中，您可以連結至任何遠端目錄，然後瀏覽整個遠端檔案系統，尋找您要的目錄)。

    請確定已將遠端系統的根資料夾指定為主機目錄。

    如果連線發生問題，而您已使用單斜線 (/) 指定主機目錄，那麼可能需要指定從連線的目錄到遠端根資料夾的相對路徑。

    例如，如果遠端根資料夾是較高層的目錄，您可能必須為主機目錄指定 ../../。

  • 包含空格和特殊字元的檔案和資料夾名稱，經常會在傳送到遠端網站時造成問題。

    使用底線取代空格，並且盡可能避免在檔案和資料夾名稱中使用特殊字元。檔案或資料夾名稱中的冒號、斜線、句點及省略符號 (') 尤其會造成問題。檔案或資料夾名稱中的特殊字元有時候也可能讓 Dreamweaver 無法建立網站地圖。

  • 如果您在使用長檔名時遇到問題，請以較短的名稱重新命名。在 Macintosh 上，檔案名稱長度不能超過 31 個字元。
  • 請注意很多伺服器使用符號連線 (UNIX)、快速鍵 (Windows) 或別名 (Macintosh)，連結位於伺服器磁碟某一部份的資料夾與其他位置的資料夾。

    例如，伺服器主目錄中的 public_html 子目錄，實際上可能是整個伺服器另一個部份的連結。在大部份的情況下，這種別名對您連結至適當的資料夾或目錄並沒有影響，但是，如果可以連結至伺服器的某個部份卻無法連結至另一個部份，表示可能有別名矛盾存在。

  • 如果您遇到像「無法上傳檔案」之類的錯誤訊息時，表示您的遠端資料夾空間可能不足。如需詳細資訊，請查看 FTP 記錄。

    注意

    一般而言，當您在使用 FTP 傳送時遇到問題，請選取「Window＞結果」(Windows) 或「網站＞FTP 記錄」(Macintosh)，再按一下「FTP 記錄」標籤，檢查 FTP 記錄。


編輯 Dreamweaver 網站的設定

使用「網站定義進階」設定，編輯 Dreamweaver 網站。

若要編輯 Dreamweaver 網站的設定，請執行下列其中一項作業：

  • 選取「網站＞管理網站」，在「管理網站」對話方塊中選取網站，再按一下「編輯」。
  • 在「檔案」面板中，從顯示目前網站、伺服器或磁碟的彈出式選單選取「管理網站」；在「管理網站」對話方塊中選取網站，再按一下「編輯」。

相關主題

  • 設定新的 Dreamweaver 網站


在 Dreamweaver編輯現有的網站

即使您不是使用 Dreamweaver 建立原始的網站，也可以使用 Dreamweaver 編輯現有的網站。您可以編輯本機系統上的現有網站，或遠端系統上的網站。

本節包含下列主題：

  • 在 Dreamweaver編輯本機磁碟中現有的網站
  • 在 Dreamweaver編輯現有的遠端網站


在 Dreamweaver編輯本機磁碟中現有的網站

即使您不是使用 Dreamweaver 建立原始的網站，也可以使用 Dreamweaver 編輯本機磁碟中現有的網站。

注意

本節會設定一個 Dreamweaver 網站，編輯現有的本機網站。您也可以編輯現有的網站，而不需要建立 Dreamweaver 網站。如需詳細資訊，請參閱存取網站、伺服器和本機磁碟。

若要編輯現有的本機網站：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 按一下「新增」。

    「網站定義」對話方塊就會出現。

  3. 如果沒有顯示「進階」設定，請按一下「進階」按鈕。

    在「網站定義」對話方塊的「進階」索引標籤中，會顯示「本機資訊」類別選項。

  4. 完成對話方塊。

    如需詳細資訊，請參閱設定本機資訊類別選項。

  5. 按一下「確定」。

相關主題

  • 在 Dreamweaver編輯現有的遠端網站


在 Dreamweaver編輯現有的遠端網站

即使不是使用 Dreamweaver 建立原始的網站，您也可以使用 Dreamweaver，將現有的遠端網站 (或遠端網站的任何分支) 複製到本機磁碟上，再對它進行編輯。

注意

本節會設定一個 Dreamweaver 網站，編輯現有的遠端網站。您也可以編輯現有的網站，而不需要建立 Dreamweaver 網站。如需詳細資訊，請參閱存取網站、伺服器和本機磁碟。

若要編輯現有的遠端網站：

  1. 建立本機資料夾以納入現有的網站，然後將它設定成該網站的本機資料夾 (請參閱設定本機資料夾)。

    注意

    您必須在本機上重製現有遠端網站其相關分支的整個結構。如需詳細資訊，請參閱了解本機和遠端資料夾結構。
  2. 使用您現有網站的相關資訊，設定遠端資料夾 (請參閱設定遠端資料夾)。

    確定為遠端網站選擇正確的根資料夾。

  3. 在「檔案」面板 (「視窗＞檔案」) 中，按一下「連結至遠端主機」(若以 FTP 存取)，或是工具列中的「重新整理」按鈕 (若以網路存取) 以檢視遠端網站。
  4. 依照您所要編輯的遠端網站數量，執行下列其中一項作業：
    • 如果您要使用整個網站，請選取「檔案」面板中遠端網站的根資料夾，然後在工具列中按一下「下載」，將整個網站下載到您的本機磁碟。
    • 如果您只想使用網站的一個檔案或資料夾，請先在「檔案」面板的「遠端」檢視中找出檔案或資料夾，然後在工具列中按一下「下載」，將檔案下載到本機磁碟。

    Dreamweaver 會自動複製遠端網站中您所需要的所有結構，並將下載的檔案放在網站階層的正確部份。在只編輯網站的某個部份時，您通常應該選擇包含相關檔案。

  5. 使用 Dreamweaver 處理網站。

相關主題

  • 在 Dreamweaver編輯本機磁碟中現有的網站


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定網站定義精靈編輯檔案選項
  • 設定網站定義精靈編輯檔案選項
  • 設定網站定義精靈編輯檔案選項
  • 設定網站定義精靈測試檔案選項
  • 設定測試用的本機/區域網路存取選項
  • 設定測試用的 FTP 存取選項
  • 設定測試用的 RDS 存取選項
  • 設定網站定義精靈測試檔案選項
  • 設定網站定義精靈共用檔案選項
  • 設定網站定義精靈共用檔案選項
  • 設定遠端存取的本機/網路選項
  • 設定遠端存取的 FTP 選項
  • 設定遠端存取的 WebDAV 選項
  • 設定網站定義精靈共用檔案選項
  • 網站定義精靈摘要選項
  • 設定本機資訊類別選項
  • 設定遠端資訊類別選項
  • 設定本機/網路存取的遠端選項
  • 設定 FTP 存取的遠端選項
  • 設定 RDS 存取
  • 設定 Microsoft Visual SourceSafe 存取
  • 設定 WebDAV 存取的遠端選項
  • 設定管理網站對話方塊選項


設定網站定義精靈編輯檔案選項

「網站定義」精靈具有下列三個部份，協助您設定 Dreamweaver 網站：「檔案編輯」、「檔案測試」及「檔案共用」。每個部份可能會有多個畫面 (因您選取的設定而異)。在對話方塊的頂端，粗體的區段名稱會指出您目前在設定程序的位置。不一定要在三個部份中都設定資料夾；精靈上的問題會協助您決定您的個別需求。

這個對話方塊是用來為您的 Dreamweaver 網站命名及指定其 URL。

若要命名您的 Dreamweaver 網站：

  • 輸入您的 Dreamweaver 網站名稱。

若要指定網站的 URL：

  • 輸入 Dreamweaver 網站的 URL (HTTP 位址)。

    Dreamweaver 使用這個位址來確定網站根目錄相對連結可在遠端伺服器上運作，因為遠端伺服器可能使用不同的資料夾當作網站根目錄。例如，如果您連結到硬碟上位於 C:\Sales\images\ 資料夾內的影像檔案 (其中 Sales 是您的本機根資料夾)，而完成的網站 URL 是 http://www.mysite.com/SalesApp/ (其中 SalesApp 是遠端根資料夾)，則在「HTTP 位址」文字方塊中輸入 URL 將可確保連結的影像在遠端伺服器上的路徑是 /SalesApp/images/。

相關主題

  • 關於 Dreamweaver 網站


設定網站定義精靈編輯檔案選項

這個對話方塊是用來指出您所建立的，是否為網路應用程式。網路應用程式是網頁的集合，這些網頁會與使用者互動、彼此互動，還會與網站伺服器上的各種資源 (包括資料庫) 互動。

如果是在建立網路應用程式，則必須選取可在您的網站伺服器上執行的伺服器技術。

若要選取伺服器技術：

  1. 如果您不打算使用伺服器技術建立網路應用程式，請選取「否」，如果您打算使用伺服器技術建立網路應用程式，請選取「是」。
  2. 如果選取「是」，請選取伺服器技術。

    您可以使用五種伺服器技術，利用 Dreamweaver 建立網路應用程式：Macromedia ColdFusion、ASP.NET、ASP、JSP 或 PHP。這些技術中的每一種都會對應到 Dreamweaver 中的文件類型。為網路應用程式選擇技術時必須考慮幾種因素，包括您對各種 Script 語言的熟悉程度以及您計劃使用的應用程式伺服器。

相關主題

  • 選擇您的應用程式伺服器


設定網站定義精靈編輯檔案選項

這個對話方塊是用來選取您的開發環境。

若要選取您的開發環境：

  1. 選取開發期間您要用來處理檔案的方法。
  2. 輸入儲存檔案的位置或按一下資料夾圖示，瀏覽資料夾。

    這就是 Dreamweaver 網站的工作目錄，也就是儲存 Dreamweaver 網站「進行中」檔案的位置。在 Dreamweaver 的「檔案」面板中，這個資料夾就是您的本機網站。

  3. 如果您選取的方法使用 FTP、SFTP、RDS 或 WebDAV，便可以選擇在每次儲存時，自動將檔案上傳到伺服器。


設定網站定義精靈測試檔案選項

這個對話方塊是用來選取 Dreamweaver 存取您測試伺服器時的存取方法。

當您工作時，Dreamweaver 使用測試伺服器產生及顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、執行伺服器或生產伺服器。只要伺服器可以處理您打算開發的動態網頁，選擇哪一個都沒關係。

若要選取測試伺服器的存取方法：

  • 從彈出式選單中選取存取方法：

    本機 / 網路如果您是要存取網路資料夾或者如果您正在本機機器上執行測試伺服器。

    FTP 如果您使用 FTP 連結到測試伺服器。

    RDS (遠端開發服務) 如果您使用 RDS 連結到網站伺服器。

    注意

    若要使用 RDS，您的遠端資料夾必須在執行 ColdFusion 的電腦上。


設定測試用的本機/區域網路存取選項

這個對話方塊是用來選取本機機器或網路上的資料夾，儲存測試用的檔案。

若要選取資料夾以便儲存用於測試的檔案：

  • 輸入要用來儲存測試檔案的本機或網路資料夾之路徑，或者按一下資料夾圖示瀏覽到資料夾。


設定測試用的 FTP 存取選項

這個對話方塊是用來提供以 FTP 存取測試伺服器 (也就是您儲存測試檔案的地方) 的相關資訊。

若要設定測試伺服器的 FTP 選項：

  1. 輸入您將上傳測試檔案的 FTP 主機名稱。

    您的 FTP 主機是電腦系統的完整 Internet 名稱，如 ftp.mindspring.com。請輸入不含其他文字的完整主機名稱。尤其不要在主機名稱前面加上通訊協定名稱。

    注意

    如果您不知道 FTP 主機位置，請連絡您的虛擬主機公司。
  2. 輸入您儲存測試檔案的資料夾路徑，或者按一下資料夾圖示瀏覽到資料夾。
  3. 輸入與 FTP 伺服器連線的登入名稱和密碼。
  4. 選取「使用安全的 FTP (SFTP)」核取方塊，使用 SFTP 進行安全驗證。

    SFTP 使用加密和公鑰，保護與測試伺服器的連線。

    注意

    您的測試伺服器必須是執行 SFTP 伺服器。
  5. 按一下「測試連結」，測試登入名稱及密碼。

相關主題

  • 了解本機和遠端資料夾結構


設定測試用的 RDS 存取選項

這個對話方塊是用來提供以 RDS 存取測試伺服器 (也就是您儲存檔案的地方) 的相關資訊。

若要設定測試伺服器的 RDS 選項：

  • 按一下「設定」按鈕，輸入存取資訊。


設定網站定義精靈測試檔案選項

這個對話方塊是用來指定 URL 前置詞，這樣在您工作時，Dreamweaver 就能使用測試伺服器來顯示資料並連結到資料庫。URL 前置詞是由網域名稱以及您的網站主目錄的任何子目錄或虛擬目錄所組成。

若要指定 URL 前置詞：

  1. 輸入使用者在自己的瀏覽器中鍵入以開啟網路應用程式的 URL，但是不要包含任何檔案名稱。

    假設您應用程式的 URL 是 www.macromedia.com/mycoolapp/start.jsp。在這個情況下，您會輸入下列 URL 前置詞：www.macromedia.com/mycoolapp/。

    如果執行 Dreamweaver 的電腦與網站伺服器所在的電腦相同，您可以使用 localhost 代替網域名稱。例如，假設您的應用程式的 URL 是 buttercup_pc/mycoolapp/start.jsp，則您可以輸入下列 URL 前置詞：http://localhost/mycoolapp/。

  2. 按一下「測試 URL」，確定 URL 可以運作。

相關主題

  • 連線到資料庫


設定網站定義精靈共用檔案選項

這個對話方塊是用來決定是否要設定遠端伺服器資料夾。

根據您的環境而定，這個資料夾就是做為測試、共同作業、生產、部署或一些其他狀況之用的檔案儲存位置。一般而言，您的遠端資料夾會位於執行網站伺服器的機器上。

在 Dreamweaver 的「檔案」面板中，這個資料夾就是您的遠端網站。遠端資料夾能讓您能在本機磁碟和網站伺服器之間傳送檔案，這讓您可以更輕易地管理 Dreamweaver 網站中的檔案。

若要選擇是否要設定遠端資料夾：

  • 選取「是」，設定遠端資料夾，或「否」，略過遠端資料夾設定。


設定網站定義精靈共用檔案選項

這個對話方塊是用來選取 Dreamweaver 存取您遠端資料夾的存取方法。

若要選取遠端伺服器的存取方法：

  • 從彈出式選單中選取存取方法：

    本機/區域網路如果您是要存取網路資料夾或者如果您正在本機機器上執行測試伺服器 請參閱設定遠端存取的本機/網路選項。

    FTP 如果您使用 FTP 連結到測試伺服器 請參閱設定遠端存取的 FTP 選項。

    RDS (遠端開發服務) 如果您使用 RDS 連結到網站伺服器。

    如果使用這個存取方法，您的遠端資料夾必須位於執行 ColdFusion 的電腦上。

    Microsoft Visual SourceSafe 如果您使用 Microsoft Visual SourceSafe 連結到網站伺服器。

    Microsoft Visual SourceSafe 支援僅適用於 Windows。若要將 Microsoft Visual SourceSafe 與 Windows 配合使用，您必須安裝 Microsoft Visual SourceSafe Client 版本 6。

    WebDAV (Web 架構的分散式撰寫和版本控制) 如果您使用 WebDAV 通訊協定連結到網站伺服器 請參閱設定遠端存取的 FTP 選項。

    如果使用這個存取方法，您的伺服器必須能支援此通訊協定 (如 Microsoft Internet Information Server (IIS) 5.0)，或者是已妥善設定安裝的 Apache 網站伺服器。


設定遠端存取的本機/網路選項

這個對話方塊是用來選取本機機器或網路上用來儲存檔案的資料夾。該資料夾通常是一個您可以透過本機網路連線的資料夾或遠端網站伺服器。

若要選取伺服器資料夾：

  • 輸入要用來儲存檔案的本機或網路資料夾的路徑，或是按一下資料夾圖示，瀏覽到資料夾。


設定遠端存取的 FTP 選項

這個對話方塊是用來完成以 FTP 存取遠端伺服器 (也就是您儲存檔案的位置) 的相關資訊。

若要完成遠端 FTP 資訊：

  1. 輸入您將上傳檔案的 FTP 主機名稱。

    您的 FTP 主機是電腦系統的完整 Internet 名稱，如 ftp.mindspring.com。請輸入不含其他文字的完整主機名稱。尤其不要在主機名稱前面加上通訊協定名稱。

    注意

    如果您不知道 FTP 主機位置，請連絡您的虛擬主機公司。
  2. 輸入您儲存檔案的資料夾路徑，或者按一下資料夾圖示瀏覽到資料夾。
  3. 輸入與 FTP 伺服器連線的登入名稱和密碼。
  4. 選取「使用安全的 FTP (SFTP)」核取方塊，使用 SFTP 進行安全驗證。

    SFTP 使用加密和公鑰，保護與測試伺服器的連線。

    注意

    您的測試伺服器必須是執行 SFTP 伺服器。
  5. 按一下「測試連結」，測試登入名稱及密碼。

相關主題

  • 了解本機和遠端資料夾結構


設定遠端存取的 WebDAV 選項

這些選項是用來指定 WebDAV 伺服器的連線設定。

若要指定 WebDAV 設定：

  1. 輸入您要連結的 WebDAV 伺服器上目錄的完整 URL。

    這個 URL 包含通訊協定、連接埠和目錄 (如果不是根目錄)。例如，http://webdav.mydomain.net/mysite。

  2. 在適當的文字方塊中輸入您的登入名稱和密碼。

    這項資訊是供伺服器驗證之用，與 Dreamweaver 不相關。如果您不確定自己的使用者名稱和密碼，請洽詢系統管理員或網站管理員。

  3. 如果您希望 Dreamweaver 在每次啟動新工作階段時記住密碼，請按一下「儲存」核取方塊。
  4. 按一下「測試連結」，測試連線設定。
  5. 如果您希望新增和刪除檔案時，能自動更新「檔案」面板的「遠端」窗格，請選取「自動重新整理遠端檔案清單」選項。

    若要加快檔案複製到遠端網站時的速度，請勿選取這個選項。

    注意

    若要以手動隨時重新整理「檔案」面板，請按一下工具列中的「重新整理」按鈕。

相關主題

  • 設定網站定義精靈共用檔案選項


設定網站定義精靈共用檔案選項

這個對話方塊是用來設定檔案「存回/取出」系統，如果您正在共同作業環境中工作 (或在多部機器上單獨工作) 的話便適用。

取出檔案會讓檔案無法在伺服器上使用，如此一來其他的小組成員就無法使用 Dreamweaver 編輯檔案。存回檔案讓其他人能取出及編輯檔案。

若要設定「存回/取出」系統：

  1. 如果您是在小組環境中工作 (或者在數部不同的機器上單獨工作)，請選取「是」，啟用存回/取出，或選取「否」，停用檔案存回/取出功能。

    如果要讓其他人知道您取出了某個檔案進行編輯，或提醒自己可能在別的電腦上存有較新版本的檔案，這個選項就很有用處。

  2. 如果您希望每次從「檔案」面板開啟檔案時就自動取出檔案，請選取「是」，如果您不希望在開啟檔案時自動取出檔案，則請選取「否」。

    注意

    使用「檔案＞開啟舊檔」開啟檔案時，即使選取了這個選項也不會取出檔案。
  3. 輸入名稱。

    您的名稱與取出的任何檔案一起出現在「檔案」面板中；這樣可讓小組成員在共用檔案時進行溝通。

    如果您獨自從幾部不同的電腦工作，請對每部電腦使用不同的取出者名稱 (例如，AmyR-HomeMac 和 AmyR-OfficePC)，以便在忘記存回檔案時，可以知道最新版本的檔案在哪裡。

  4. 輸入電子郵件位址。

    如果您輸入電子郵件地址然後取出檔案，您的名稱就會以連結的形式 (藍色並加底線) 出現在「檔案」面板中該檔案的旁邊。如果小組成員按一下連結，預設電子郵件程式會開啟新訊息，上面有您的電子郵件位址，還有對應到檔案和網站名稱的主旨。

相關主題

  • 存回和取出檔案


網站定義精靈摘要選項

這個頁面會顯示您為網站選取的設定。

若要完成您網站的設定，請執行下列其中一項作業：

  • 按一下「上一步」按鈕，返回上一頁變更設定。
  • 如果您對設定滿意並希望 Dreamweaver 建立網站的話，請按一下「完成」按鈕。

    當您按一下「完成」時，Dreamweaver 會建立網站並將它顯示在「檔案」面板中。

  • 如果您不希望 Dreamweaver 建立網站，請按一下「取消」按鈕。


設定本機資訊類別選項

這個對話方塊是用來設定 Dreamweaver 網站的本機資料夾 (也稱為本機網站)。

若要設定 Dreamweaver 網站的本機資料夾：

  1. 在「網站名稱」文字方塊中，輸入 Dreamweaver 網站的名稱。

    接著網站名稱便會顯示在「檔案」面板和「管理網站」對話方塊中。使用您喜歡的任何名稱；這個名稱僅供您參考之用，並不會出現在瀏覽器中。

  2. 在「本機根資料夾」文字方塊中，輸入本機磁碟上您用來儲存網站檔案、樣版和圖庫項目的資料夾名稱，或者按一下資料夾圖示瀏覽到資料夾。

    當 Dreamweaver 解析根目錄相對連結時，也會對這個資料夾進行相同的解析 (請參閱網站根目錄相對路徑)。如果本機根資料夾尚未存在，請從檔案瀏覽對話方塊內建立。

  3. 請使用「自動重新整理本機檔案清單」選項，指出 Dreamweaver 是否應該在每次您將檔案複製到本機網站時，自動重新整理本機檔案清單。

    複製這類檔案時，取消選取這個選項能改善 Dreamweaver 的速度，但是這表示「檔案」面板的「本機」檢視不會自動重新整理。您可以按一下「檔案」面板工具列中的「重新整理」按鈕，便能手動重新整理面板。

  4. (選擇性) 在「預設影像資料夾」文字方塊中，輸入這個網站的預設影像資料夾路徑，或是按一下資料夾圖示，瀏覽到資料夾。

    Dreamweaver 將您加入網站的影像，存放在這個資料夾內。例如，當您從桌面拖曳影像到作用中的文件時，Dreamweaver 會在預設的影像資料夾中將影像加入目前的網站。

  5. (選擇性) 如果您要變更網站中所建立其他頁面連結的相對路徑，請選取「連結的相關項目」選項。

    依預設值，Dreamweaver 會使用文件相對路徑建立連結。若要變更路徑設定，請選取「網站根目錄」選項。如需有關相對路徑的詳細資訊，請參閱了解文件位置和路徑。

    如果您選取「網站根目錄」選項，請確定在下個步驟中指定 HTTP 位址。

    變更這項設定後再按一下「確定」，並不會轉換現有連結的路徑。此設定只會套用到以視覺化方式使用 Dreamweaver 建立的新連結。

    注意

    當您在本機瀏覽器中預覽文件時，具有網站根目錄相對路徑的連結內容並不會出現，除非您指定一個測試伺服器，或是在「編輯＞偏好設定＞在瀏覽器中預覽」中選取「使用暫存檔預覽」選項。這是因為瀏覽器無法辨識網站根目錄，但伺服器可以辨識 (請參閱在瀏覽器中預覽和測試網頁)。
  6. (選擇性) 在「HTTP 位址」文字方塊中，輸入您完成的網站將會使用的 URL。

    這可以讓 Dreamweaver 確認使用絕對 URL 或網站根目錄相對路徑的網站內之連結 (請參閱檢查是否有無效、外部或孤立的連結)。Dreamweaver 也使用這個位址來確定網站根目錄相對連結可在遠端伺服器上運作，因為遠端伺服器可能擁有不同的網站根目錄。例如，如果您連結到硬碟上位於 C:\Sales\images\ 資料夾內的影像檔案 (其中 Sales 是您的本機根資料夾)，而完成的網站 URL 是 http://www.mysite.com/SalesApp/ (其中 SalesApp 是遠端根資料夾)，則在「HTTP 位址」文字方塊中輸入 URL 將可確保連結的影像在遠端伺服器上的路徑是 /SalesApp/images/。

  7. 如果您要在 Dreamweaver 檢查連結時，確定連結的大小寫和檔案名稱的大小寫是否一致，請選取「使用區分大小寫連結檢查」選項。

    這個選項在 UNIX 系統中特別有用，因為該系統的檔案名稱區分大小寫。

  8. 「啟動快取」選項會指定是否要建立本機快取，以改善連結速度和網站管理工作。

    如果您沒有選取這個選項，Dreamweaver 會在建立網站之前，詢問您是否要再建立快取。選取這個選項是個不錯的主意，因為「資源」面板 (位於「檔案」面板群組中) 只有在建立快取時才能使用。如需詳細資訊，請參閱樣版運算式。

相關主題

  • 關於 Dreamweaver 網站
  • 設定本機資料夾
  • 設定新連結的相對路徑


設定遠端資訊類別選項

這個對話方塊是用來選取，當 Dreamweaver 上傳或下載檔案到遠端資料夾 (亦稱為遠端網站) 所在的網站伺服器時，所用的存取方法。

若要選取存取方法：

  1. 從彈出式選單中選取存取方法。對話方塊會依您的選取範圍而變更。請選取下列其中一項：

    無如果您不打算將網站上傳至伺服器。

    本機 / 網路如果您是要存取網路資料夾或者如果您正在本機機器上執行網站伺服器。

    FTP 如果您使用 FTP 連結到網站伺服器。

    RDS (遠端開發服務) 如果您使用 RDS 連結到網站伺服器。

    如果使用這個存取方法，您的遠端資料夾必須位於執行 ColdFusion 的電腦上。

    Microsoft Visual SourceSafe 如果您使用 Microsoft Visual SourceSafe 連結到網站伺服器。

    Microsoft Visual SourceSafe 支援僅適用於 Windows。若要將 Microsoft Visual SourceSafe 與 Windows 配合使用，您必須安裝 Microsoft Visual SourceSafe Client 版本 6。

    WebDAV (Web 架構的分散式撰寫和版本控制) 如果您使用 WebDAV 通訊協定連結到網站伺服器。如需相關說明，請參閱設定 WebDAV 存取的遠端選項。

    如果使用這個存取方法，您的伺服器必須能支援此通訊協定 (如 Microsoft Internet Information Server (IIS) 5.0)，或者是已妥善設定安裝的 Apache 網站伺服器。

  2. 依據您所選取的存取方法，完成此對話方塊。

    如需相關說明，請參閱下列主題：

    • 如果選取「無」，請略過這個步驟。
    • 如果選取「本機/區域網路」，請參閱設定本機/網路存取的遠端選項。
    • 如果選取 FTP，請參閱設定 FTP 存取的遠端選項。
    • 如果選取 WebDAV，請參閱設定 WebDAV 存取的遠端選項。
    • 如果選取 RDS，請參閱設定 RDS 存取。
    • 如果選取 Microsoft Visual SourceSafe，請參閱設定 Microsoft Visual SourceSafe 存取。
  3. 按一下「確定」，便可關閉「網站定義」對話方塊的「遠端資訊」類別。


相關主題

  • 設定遠端資料夾
  • 存回和取出檔案


設定本機/網路存取的遠端選項

這個對話方塊是用來提供本機網路存取的相關資訊。

若要提供本機網路存取的相關資訊：

  1. 按一下「遠端資料夾」文字方塊旁邊的資料夾圖示，瀏覽並選取儲存網站檔案的資料夾。
  2. 如果您希望新增和刪除檔案時，能自動更新「檔案」面板的「遠端」窗格，請選取「自動重新整理遠端檔案清單」核取方塊。

    若要加快檔案複製到遠端網站時的速度，請勿選取這個選項。

    注意

    若要以手動隨時重新整理「檔案」面板，請按一下工具列中的「重新整理」按鈕。
  3. 如果您希望 Dreamweaver 自動同步化本機和遠端檔案，請選取「維護同步化資訊」核取方塊。(此選項依預設是選取的)。

    如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。

  4. 如果您希望 Dreamweaver 在儲存檔案時將檔案上傳到遠端網站，請選取「儲存時自動上傳檔案到伺服器」核取方塊。
  5. 如果您希望啟動「存回/取出」系統，請選取「啟動檔案存回和取出」核取方塊。

    如需詳細資訊，請參閱存回和取出檔案。

  6. 按一下「確定」。

相關主題

  • 設定遠端資訊類別選項
  • 了解本機和遠端資料夾結構


設定 FTP 存取的遠端選項

這個對話方塊是用來提供 FTP 存取的相關資訊。

若要提供 FTP 存取的相關資訊：

  1. 輸入您要為網站上傳檔案的 FTP 主機名稱。

    您的 FTP 主機是電腦系統的完整 Internet 名稱，如 ftp.mindspring.com。請輸入不含其他文字的完整主機名稱。尤其不要在主機名稱前面加上通訊協定名稱。

    注意

    如果您不知道 FTP 主機位置，請連絡您的虛擬主機公司。
  2. 輸入遠端網站上您用來儲存文件 (大家都看得到) 的主機目錄。

    如果您不確定要輸入什麼名稱做為「主機目錄」，請聯絡伺服器管理員。或是，讓文字方塊空白。有些伺服器上，您的根目錄就是第一次使用 FTP 連結的目錄。若要查清楚，請連線到伺服器。如果在您「檔案」面板的「遠端檔案」檢視中，出現的資料夾名稱含有像是 public_html 或 www 或是您的登入名稱時，則這個資料夾可能就是您應該在「主機目錄」文字方塊中使用的目錄。

  3. 輸入與 FTP 伺服器連線的登入名稱和密碼。
  4. 按一下「測試」，測試登入名稱及密碼。
  5. Dreamweaver 依照預設會儲存您的密碼。如果您偏好 Dreamweaver 在每次連線到遠端伺服器都會提示輸入密碼，請取消選取「儲存」核取方塊。
  6. 如果您的防火牆設定需要使用被動 FTP，請選取「使用被動 FTP」核取方塊。

    被動的 FTP 讓您的本機軟體設定 FTP 連線，而不是要求遠端伺服器設定 FTP 連線。如果您不確定所使用的是否為被動 FTP，請洽詢系統管理員。

    如需詳細資訊，請參閱 Macromedia 網站上的 TechNote 15220，網址為 www.macromedia.com/go/15220。

  7. 如果您從防火牆保護的環境連結到遠端伺服器，請選取「使用防火牆」核取方塊。
  8. 按一下「防火牆設定」，編輯防火牆主機或連接埠。

    如需詳細資訊，請參閱設定「檔案」面板的偏好設定。

  9. 如果您希望 Dreamweaver 自動同步化本機和遠端檔案，請選取「維護同步化資訊」核取方塊。(此選項依預設是選取的)。

    如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。

  10. 如果您希望 Dreamweaver 在儲存檔案時將檔案上傳到遠端網站，請選取「儲存時自動上傳檔案到伺服器」核取方塊。
  11. 如果您希望啟動「存回/取出」系統，請選取「啟動檔案存回和取出」核取方塊。

    如需詳細資訊，請參閱存回和取出檔案。

  12. 按一下「確定」。

相關主題

  • 設定遠端資訊類別選項
  • 了解本機和遠端資料夾結構


設定 RDS 存取

這個對話方塊是用來使用 RDS 設定與遠端伺服器的連線。

若要使用 RDS 設定與遠端伺服器的連線：

  1. 按一下「設定」按鈕，然後在「設定 RDS 伺服器」對話方塊中提供下列資訊：
    • 輸入安裝了網站伺服器的主機電腦名稱。

      主機名稱可能是 IP 位址或 URL。如果不確定，請詢問系統管理員。

    • 輸入連結的連接埠號碼。
    • 以主機目錄的型式輸入遠端根資料夾。

      例如，c:\inetpub\wwwroot\myHostDir\。

    • 輸入您的 RDS 使用者名稱與密碼。

      注意

      如果您在「ColdFusion 管理員」的安全性設定中，設定使用者名稱和密碼，這些選項可能不會顯示。
    • 如果要 Dreamweaver 記住您的設定，請選取「儲存」核取方塊。
  2. 按一下「確定」關閉「設定 RDS 伺服器」對話方塊。
  3. 如果您希望 Dreamweaver 在儲存檔案時將檔案上傳到遠端網站，請選取「儲存時自動上傳檔案到伺服器」核取方塊。
  4. 如果您希望啟動「存回/取出」系統，請選取「啟動檔案存回和取出」核取方塊。

    如需詳細資訊，請參閱存回和取出檔案。

相關主題

  • 設定設定伺服器對話方塊選項
  • 設定遠端資訊類別選項


設定 Microsoft Visual SourceSafe 存取

這個對話方塊是用來設定與 Microsoft Visual SourceSafe 資料庫的連線。

注意

「Microsoft Visual SourceSafe 資料庫」支援只能在 Windows 中使用。

若要設定與 Microsoft Visual SourceSafe 資料庫的連線：

  1. 按一下「設定」按鈕，然後在「開啟 Microsoft Visual SourceSafe 資料庫」對話方塊中提供下列資訊：
    • 在「資料庫路徑」文字方塊中按一下「瀏覽」，瀏覽您要的 Visual SourceSafe 資料庫，或輸入完整的檔案路徑。

      您選取的檔案，會變成用來初始化 Visual SourceSafe 的 srcsafe.ini 檔。

    • 在「專案」文字方塊中，輸入 Visual SourceSafe 資料庫中您想當做遠端網站根目錄的專案。
    • 在「使用者名稱」和「密碼」文字方塊中，輸入所選資料庫的登入使用者名稱和密碼。

      如果不知道您的使用者名稱和密碼，請洽詢系統管理員。

    • 如果要 Dreamweaver 記住您的設定，請選取「儲存」核取方塊。
  2. 按一下「確定」返回「網站定義」對話方塊。
  3. 如果您希望 Dreamweaver 自動同步化本機和遠端檔案，請選取「維護同步化資訊」核取方塊。(此選項依預設是選取的)。

    如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。

  4. 如果您希望 Dreamweaver 在儲存檔案時將檔案上傳到遠端網站，請選取「儲存時自動上傳檔案到伺服器」核取方塊。

相關主題

  • 設定遠端資訊類別選項


設定 WebDAV 存取的遠端選項

這些選項是用來使用 WebDAV 通訊協定，設定與遠端伺服器的連線。

若要設定 WebDAV 連結：

  1. 在「URL」文字方塊中，輸入您要連結的 WebDAV 伺服器上目錄的完整 URL。

    這個 URL 包含通訊協定、連接埠和目錄 (如果不是根目錄)。例如，http://webdav.mydomain.net/mysite。

  2. 在適當的文字方塊中輸入您的使用者名稱和密碼。

    這項資訊是供伺服器驗證之用，與 Dreamweaver 不相關。如果您不確定自己的使用者名稱和密碼，請洽詢系統管理員或網站管理員。

  3. 按一下「測試」，測試連線設定。
  4. 如果您希望 Dreamweaver 在每次啟動新工作階段時記住密碼，請按一下「儲存」核取方塊。
  5. 如果您希望新增和刪除檔案時，能自動更新「檔案」面板的「遠端」窗格，請選取「自動重新整理遠端檔案清單」選項。

    若要加快檔案複製到遠端網站時的速度，請勿選取這個選項。

    注意

    若要以手動隨時重新整理「檔案」面板，請按一下工具列中的「重新整理」按鈕。
  6. 如果您希望 Dreamweaver 自動同步化本機和遠端檔案，請選取「維護同步化資訊」核取方塊。(此選項依預設是選取的)。

    如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。

  7. 如果您希望 Dreamweaver 在儲存檔案時將檔案上傳到遠端網站，請選取「儲存時自動上傳檔案到伺服器」核取方塊。
  8. 如果您希望啟動「存回/取出」系統，請選取「啟動檔案存回和取出」核取方塊。

    如需詳細資訊，請參閱存回和取出檔案。

相關主題

  • 設定遠端資訊類別選項
  • 使用 WebDAV 存回及取出檔案


設定管理網站對話方塊選項

此對話方塊是用來讓您建立新的網站、編輯網站、重製網站、移除網站，或是匯入或匯出網站。

若要建立、編輯或刪除網站：

  1. 從視窗中選取網站。
  2. 按一下按鈕，選取其中一個選項：

    新增讓您建立新網站。

    如需詳細資訊，請參閱設定新的 Dreamweaver 網站。

    編輯讓您編輯現有的網站。

    如需詳細資訊，請參閱編輯 Dreamweaver 網站的設定。

    重製建立您所選網站的複本。

    複本會出現在網站清單視窗中。

    移除會刪除選取的網站。

    Dreamweaver 會警告您無法還原這個動作。

    匯出讓您將匯出的網站另存為 XML 檔。

    如需詳細資訊，請參閱匯入和匯出網站。

    匯入讓您選取 XML 檔供網站匯入。

    如需詳細資訊，請參閱匯入和匯出網站。

  3. 按一下「完成」關閉對話方塊。


建立和開啟文件

Macromedia Dreamweaver 8 提供一個彈性的環境，可以搭配使用各種網站設計及開發文件。除了 HTML 文件外，您也可以建立和開啟各種文字文件，包括 CFML、ASP、JavaScript 及 CSS。Dreamweaver 也支援原始碼檔案，如 Visual Basic、.NET、C# 及 Java。

Dreamweaver 提供了多種建立新文件的選項。您可以建立：

  • 新的空白文件或樣版
  • Dreamweaver 中預先設計的頁面版面建立的文件
  • 您的現有樣版建立的文件

除了這些選項之外，還有其他的文件選項。如果通常您是使用某種特定文件類型，可以將它設成新建立的預設文件類型。

在 Dreamweaver 中，您可以輕鬆地定義文件屬性，如 meta 標籤、文件標題和背景顏色，以及「設計」檢視或「程式碼」檢視中的數種其他頁面屬性。

本章包含下列各節：

建立新文件

儲存新文件

設定預設的新文件類型

為新的 HTML 文件設定預設副檔名

開啟現有文件

清理 Microsoft Word HTML 檔


建立新文件

Dreamweaver 提供了數種選擇，讓您選取要處理的新文件。您可以使用下列方式建立新文件：

  • 以空白文件開始 (請參閱建立新的空白文件)。
  • 根據 Dreamweaver 設計檔建立空白文件或樣版 (請參閱以 Dreamweaver 設計檔建立文件)。
  • 使用可定義文件外觀的樣版，並且設定文件的哪些部份可以編輯 (請參閱以現有的樣版建立文件)。

    提示

    如果您通常是使用某種特定文件類型，可以將它設成預設文件，讓 Dreamweaver 根據您定義的預設文件自動開啟新文件。如需相關資訊，請參閱設定預設的新文件類型。


建立新的空白文件

您可以選取想要建立的空白文件類型。

若要建立新的空白文件：

  1. 選取「檔案＞開新檔案」。

    「新增文件」對話方塊便會出現。已選取「一般」標籤。

  2. 從「分類」清單中，選取「基本頁面」、「動態網頁」、「樣版頁面」、「其他」或「頁框組」，然後再從右側的清單中，選取要建立的文件類型。

    例如，選取「基本頁面」建立一個 HTML 文件，或選取「動態網頁」建立一個 ColdFusion 或 ASP 文件等等。

    如需此對話方塊中選項的詳細資訊，請參閱新增文件對話方塊一般索引標籤的設定選項。

  3. 按一下「建立」按鈕。

    新文件便會在「文件」視窗中開啟。

  4. 儲存文件 (請參閱儲存新文件)。

相關主題

  • 以 Dreamweaver 設計檔建立文件
  • 以現有的樣版建立文件


以 Dreamweaver 設計檔建立文件

Dreamweaver 提供數種專業開發的頁面版面和設計元素檔。您可以用這些設計檔做為起點，設計網站中的頁面。當您以設計檔建立文件時，Dreamweaver 就會建立該檔案的複本。

注意

如果您以預先定義的頁框組建立文件，則只會複製頁框組結構而已，不會複製頁框內容。此外，您將必須分別儲存每個頁框檔。如需關於儲存頁框的資訊，請參閱儲存頁框和頁框組檔案。

若要從 Dreamweaver 設計檔建立新文件：

  1. 選取「檔案＞開新檔案」。

    「新增文件」對話方塊便會出現。已選取「一般」標籤。

  2. 在「分類」清單中，選取「CSS 樣式表」、「表格式版面」、「頁面設計」(CSS)、「頁面設計」或「頁面設計 (有輔助功能的)」，然後再從右側清單中選取設計檔。

    您可以預覽設計檔，並且讀取文件設計元素的簡短說明。

    如需此對話方塊中選項的詳細資訊，請參閱新增文件對話方塊一般索引標籤的設定選項。

  3. 按一下「建立」按鈕。

    新文件便會在「文件」視窗中開啟。如果您選取的是 CSS 樣式表，則 CSS 文件便會在「文件」視窗中出現，而「CSS 樣式表」會在「程式碼」檢視中開啟。

  4. 儲存文件 (請參閱儲存新文件)。

    如果檔案含有資源檔連結，「複製相關檔案」對話方塊便會出現，讓您儲存相關檔案的複本。

  5. 如果出現「複製相關檔案」對話方塊，請設定選項，再按一下「複製」以將資源複製到選取的資料夾中。

    您可以自行選擇相關檔的位置，或使用 Dreamweaver 所產生的預設資料夾位置 (依據設計檔的來源名稱)。

相關主題

  • 建立新的空白文件
  • 以現有的樣版建立文件


以現有的樣版建立文件

您可以選取、預覽並且以現有樣版建立新文件。您可以使用「新增文件」對話方塊，從任一個 Dreamweaver 定義的網站選取樣版，或是使用「資源」面板，以現有樣版建立新文件。

如需關於建立樣版的詳細資訊，請參閱建立 Dreamweaver 樣版。

提示

如果您的網站中沒有任何樣版，可以將文件當作樣版，儲存在「新增文件」對話方塊的設計檔案類別中，再以該樣版建立頁面。如需關於將設計檔儲存為樣版的詳細資訊，請參閱以 Dreamweaver 設計檔建立文件。

如要以樣版建立新文件：

  1. 選取「檔案＞開新檔案」。

    「新增文件」對話方塊便會出現。

  2. 按一下「樣版」索引標籤。
  3. 在「樣版，針對」清單中，選取含所要使用樣版的 Dreamweaver 網站，再從右側清單中選取樣版。

    如需此對話方塊中選項的詳細資訊，請參閱新增文件對話方塊一般索引標籤的設定選項。

  4. 按一下「建立」。

    新文件便會在「文件」視窗中開啟。

  5. 儲存文件 (請參閱儲存新文件)。

若要從「資源」面板中的樣版建立新文件：

  1. 請開啟「資源」面板 (「視窗＞資源」) (如果還沒有開啟的話)。
  2. 在「資源」面板中，請按一下左側的「樣版」圖示，便可檢視您現有網站中的樣版清單。 這是描述功能的圖片。

    提示

    如果您剛建立好想要套用的樣版，需要按一下「重新整理」按鈕後才能看到它。
  3. 按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 您要套用的樣板，再選取「從樣版新增」。

    文件便會在「文件」視窗中開啟。

相關主題

  • 建立新的空白文件
  • 以 Dreamweaver 設計檔建立文件


儲存新文件

建立新文件時，需要儲存此文件。

若要儲存新文件：

  1. 選取「檔案＞儲存」。
  2. 在出現的對話方塊中，導覽到您要儲存檔案的資料夾。

    提示

    將您的檔案儲存在 Dreamweaver 網站中，是個不錯的方法。如需詳細資訊，請參閱設定新的 Dreamweaver 網站。
  3. 在「檔案名稱」文字方塊中，輸入檔案的名稱。

    在檔案和資料夾名稱中，請避免使用空格和特殊字元，同時也不要以數字做為檔名的開頭。特別針對您想放在遠端伺服器上的檔案名稱，請勿使用特殊字元 (如 é、ç、¥) 或標點符號 (如冒號、斜線或句點)；很多伺服器會在上傳期間變更這些字元，這將造成與該檔案的任何連結中斷。

  4. 按一下「儲存檔案」。


設定預設的新文件類型

您可以定義 Dreamweaver 將哪一種文件類型設為網站的預設文件。

例如，若您網站中大部份的頁面會是某種特定的檔案類型，(如 Cold Fusion、HTML 或 ASP 文件)，您可以將文件偏好設定，設成自動建立指定的檔案類型新文件。

若要設定預設的新文件類型和偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

    提示

    您也可以按一下「新增文件」對話方塊中的「偏好設定」按鈕，設定當您建立新文件時，新文件的偏好設定 (請參閱建立新的空白文件)。
  2. 從左側的分類清單中，按一下「新增文件」。
  3. 必要時，設定或變更偏好設定。

    如需此對話方塊選項的詳細資訊，請參閱新增文件偏好設定對話方塊中的設定選項。

  4. 按一下「確定」。

    Dreamweaver 會儲存偏好設定。


為新的 HTML 文件設定預設副檔名

您可以為在 Dreamweaver 中建立的 HTML 文件定義預設副檔名。例如，您可以指示 Dreamweaver 對所有新的 HTML 文件使用 .htm 或 .html 副檔名。

若要為新的 HTML 文件設定預設副檔名：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

    提示

    您也可以按一下「新增文件」對話方塊中的「偏好設定」按鈕，設定當您建立新文件時，新文件的偏好設定 (請參閱建立新的空白文件)。
  2. 從左側的分類清單中，按一下「新增文件」。
  3. 在「預設文件類型」中，確定「HTML」已選取。
  4. 在「預設副檔名」文字方塊中，指定您在 Dreamweaver 新建立的 HTML 文件中要用的副檔名。

    在 Windows 中，可以指定下列副檔名：.html、.htm、.shtml、.shtm、.stm、.tpl、.lasso、.xhtml。

    在 Macintosh 中，可以指定下列副檔名：.html、.htm、.shtml、.shtm、.tpl、.lasso、.xhtml、.ssi。


開啟現有文件

在 Dreamweaver 中，您可以開啟現有的網頁或文字文件，即使它不是在 Dreamweaver 中建立的。您可以開啟此文件，使用 Dreamweaver 在「設計」檢視或「程式碼」檢視中編輯它。

如果所開啟的文件是儲存成 HTML 文件的 Microsoft Word 檔，您就可以使用「清理 Word HTML」命令，移除 Word 插入 HTML 檔中無關的標記標籤。如需詳細資訊，請參閱清理 Microsoft Word HTML 檔。

若要清理非 Microsoft Word 產生的 HTML 或 XHTML，請參閱清理程式碼。

您也可以開啟非 HTML 文字檔，如 JavaScript 檔、XML 檔、CSS 樣式表，或者由文書處理器或文字編輯器儲存的文字檔。

若要選取現有的檔案：

  1. 選取「檔案＞開啟舊檔」。

    「開啟舊檔」對話方塊便會出現。

    提示

    也可以使用「檔案」面板開啟檔案。如需詳細資訊，請參閱使用檔案面板中的檔案。
  2. 瀏覽並選取要開啟的檔案。

    注意

    如果還沒有開啟檔案，最好先整理計劃要開啟的檔案，然後在 Dreamweaver 網站中編輯，而不是從另一個位置開啟它們。如需設定 Dreamweaver 網站的資訊，請參閱設定新的 Dreamweaver 網站。
  3. 按一下「開啟」。

    文件便會在「文件」視窗中開啟。

    依預設值，JavaScript、文字檔和「CSS 樣式表」會在「程式碼」檢視中開啟。在 Dreamweaver 中工作時您可以更新文件，然後再將變更儲存在檔案中。如需關於設定外部文字編輯器，以檢視這些檔案類型的詳細資訊，請參閱啟動媒體檔案的外部編輯器。


清理 Microsoft Word HTML 檔

在 Dreamweaver 中，您可以開啟由 Microsoft Word 另存為 HTML 檔的文件，然後使用「清理 Word HTML」命令，移除 Word 所產生的無關 HTML 程式碼。「清理 Word HTML」命令適用於 Word 97 或更新版本的文件另存而成的 HTML 檔。

Dreamweaver 移除的程式碼主要是 Word 用來格式化文件並在 Word 中顯示文件之用，而這些程式碼對顯示 HTML 檔而言是不必要的。請保留一份原始的 Word (.doc) 檔做為備份，因為一旦套用「清理 Word HTML」功能之後，可能無法再於 Word 中重新開啟 HTML 文件。

若要清理非 Microsoft Word 產生的 HTML 或 XHTML，請參閱清理程式碼。

若要開啟並清理 Microsoft Word HTML 檔：

  1. 如果您尚未在 Microsoft Word 中將文件另存成 HTML 檔，請執行此動作。

    注意

    在 Windows 上，關閉 Word 中的檔案以免發生共享違反情形。
  2. 在 Dreamweaver 中開啟 HTML 檔。

    切換到「程式碼」檢視 (「檢視＞程式碼」)，以檢視 Word 產生的 HTML 程式碼。

  3. 選取「命令＞清理 Word 的 HTML」。

    「清理 Word 的 HTML」對話方塊便會出現。

    當 Dreamweaver 嘗試判定用來儲存檔案的 Word 版本時，可能會稍微延遲。如果 Dreamweaver 無法判斷，請使用彈出式選單選取正確的版本。

  4. 如果您希望的話，可以取消選取對話方塊中的選項。

    如需此對話方塊中選項的詳細資訊，請參閱清理 Word HTML 對話方塊的設定選項。

  5. 按一下「確定」。

    Dreamweaver 會將清理設定套用到 HTML 文件，接著出現變更記錄 (除非取消選取對話方塊中的該選項)。

相關主題

  • 匯入 Microsoft Office 文件 (僅適用於 Windows)


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定新增文件對話方塊選項
  • 新增文件對話方塊一般索引標籤的設定選項
  • 新增文件對話方塊樣版索引標籤的設定選項
  • 新增文件偏好設定對話方塊中的設定選項
  • 清理 Word HTML 對話方塊的設定選項


設定新增文件對話方塊選項

「新增文件」對話方塊是用來建立新文件。

此對話方塊具有兩個索引標籤，上面有新文件類型的選項：

「一般」索引標籤中含有建立新的空白頁面的文件類型，以及預先設計的頁面 (您可用預設頁面建立個人的頁面)。(如需「一般」索引標籤中設定選項的詳細資訊，請參閱新增文件對話方塊一般索引標籤的設定選項)。您可以從下列類別中選取文件類型：

  • 「基本頁面」、「動態頁面」、「頁框組」及「樣版」類別可讓您建立新的空白文件或樣版；
  • 「其他」類別可讓您以特殊檔案類型 (如 CSS、JavaScript、VBScript 或文字檔案)，建立空白的頁面。
  • 「CSS 樣式表」、「頁面設計」、「頁面設計 (CSS)」和「頁面設計 (有輔助功能的)」類別提供您預先建立好的設計檔，您可以用它們來建立自己的頁面。

    如果選取使用 CSS 樣式表，可以複製預先設計好的樣式表，將它套用到您的文件。

「樣版」索引標籤包含一份您已定義的 Dreamweaver 網站清單。您可以從列出的任何網站中選取一個樣版，以該樣版建立新文件。如需「樣版」索引標籤設定選項的詳細資訊，請參閱新增文件對話方塊樣版索引標籤的設定選項。

相關主題

  • 建立新的空白文件
  • 以 Dreamweaver 設計檔建立文件
  • 以現有的樣版建立文件


新增文件對話方塊一般索引標籤的設定選項

「新增文件」對話方塊「一般」索引標籤可讓您建立新的空白頁面，或是使用預先設計的頁面。

若要完成「新增文件」對話方塊的「一般」索引標籤：

  1. 從左側的「分類」清單中選取一種文件類別。

    右側的清單會依據您所做的選擇而變更。會顯示描述，大多數的類別也會出現所選取文件的預覽。

  2. 從右側的「基本頁面」清單中選取文件類型。
  3. 如果您選取「基本」、「動態」或「樣版」頁面類型，則可從「文件類型 (DTD)」彈出式選單中選取一種 XHTML 文件類型定義，以使頁面與 XHTML 相容。

    例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。如需詳細資訊，請參閱關於 Dreamweaver。

    XHTML (可擴展超文字標記語言) 可以將 HTML 重新設計成 XML。一般而言，使用 XHTML 可以讓您馬上體驗到 XML 的優點，同時又可確保網頁文件能同時具有回溯及未來的相容性。

    如需有關 XHTML 的詳細資訊，請造訪 World Wide Web Consortium (W3C) 網站，參閱 XHTML 1.1 - 模組架構式 XHTML 和 XHTML 1.0 的規格 (www.w3.org/TR/xhtml11/ 和 www.w3c.org/TR/xhtml1/)，或造訪網頁架構式檔案和本機檔案的 XHTML 驗證工具網站 (http://validator.w3.org/ 和 http://validator.w3.org/file-upload.html)。

    • 如果您選取「表格式版面」頁面類型，可依您希望的新文件儲存方式，選取「文件」或「樣版」選項。
  4. 如果希望設定預設文件的偏好設定 (如文件類型、編碼方式及副檔名)，請按一下對話方塊底部的「偏好設定」按鈕。
  5. 如果希望啟動 Dreamweaver Exchange，下載更多的頁面設計內容，請按一下對話方塊底部的「取得更多內容」連結。
  6. 按一下「建立」按鈕。

    新文件便會在「文件」視窗中開啟。

相關主題

  • 設定新增文件對話方塊選項


新增文件對話方塊樣版索引標籤的設定選項

「新增文件」對話方塊的「樣版」索引標籤可讓您以任何定義的網站樣版，建立新文件。

若要完成「新增文件」對話方塊的「樣版」索引標籤：

  1. 請從左側的清單中選取網站。
  2. 請從右側的清單中選取樣版。
  3. 如果不希望 Dreamweaver 在您變更依據的樣版時，隨時更新此頁面，請取消選取「當樣版改變後更新頁面」。

    如果取消選取此選項，此文件就是一個獨立的 HTML。

  4. 如果希望設定預設文件的偏好設定 (如文件類型、編碼方式及副檔名)，請按一下對話方塊底部的「偏好設定」按鈕。
  5. 如果希望啟動 Dreamweaver Exchange，下載更多的頁面設計內容，請按一下對話方塊底部的「取得更多內容」連結。
  6. 按一下「建立」按鈕。

    以選取的樣版建立的新文件，便會出現在「文件」視窗中。

相關主題

  • 設定新增文件對話方塊選項


新增文件偏好設定對話方塊中的設定選項

這個對話方塊是用來建立預設的新文件類型和偏好設定。

若要設定新增文件的偏好設定：

  1. 設定您想要套用的選項：
    • 若要設定預設開啟的文件，請在「預設文件」彈出式選單底下，選取網站日後建立的新頁面所要依據的文件。
    • 如果選取「HTML」當做預設文件，您就可以使用「預設副檔名」文字方塊，依個人偏好指定您在 Dreamweaver 中新建立的 HTML 網頁的副檔名 (.htm 或 .html)。如需詳細資訊，請參閱為新的 HTML 文件設定預設副檔名。

      注意

      其他檔案類型一律停用這個選項。
    • 若要使新頁面與 XHTML 相容，請從「預設文件類型 (DTD)」彈出式選單中選取一種 XHTML 文件類型定義 (DTD)。

      例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。如需詳細資訊，請參閱關於 Dreamweaver。

    • 若要設定文件的編碼方式，請使用「預設的編碼方式」彈出式選單。

      「預設的編碼方式」會指定在建立新頁面及未指定任何編碼方式的情況下開啟文件時，所要使用的編碼方式。如需詳細資訊，請參閱了解文件編碼方式。

      如果選取 Unicode (UTF-8) 為文件編碼方式，便不需要再為字元實體選取編碼方式，因為 UTF-8 可以呈現所有的字元。但若選取了其他的文件編碼方式，則可能需要實體編碼方式才能夠表示某些字元。如需字元實體的詳細資訊，請參閱 www.w3.org/TR/REC-html40/sgml/entities.html。

    • 如果您選取 Unicode (UTF-8) 當做預設的編碼方式，請選取一種 Unicode 標準化格式。

      Unicode 標準化格式有四種類型。最重要的一種是「標準化格式 C」，因為這是全球資訊網的字元模型 (Character Model) 最常用的格式。為求完整起見，Macromedia 也提供其餘三種 Unicode 標準化格式。

      在 Unicode 中，某些字元看起來很相似，但卻能以不同方式儲存於文件中。例如「ë」(e 母音變化) 可以表示為「e 母音變化」單一字元，也可以表示為「一般拉丁字母 e」+「組合母音變化」兩個字元。Unicode 組合字元是與前一個字元組合使用的字元，因此母音變化可能出現在「拉丁字母 e」的上面。這兩種格式的印刷結果看起來完全一樣，但是儲存至檔案的內容互不相同。

      標準化程序是為了確定，能以不同格式來儲存的所有字元全部儲存成相同格式。也就是說，文件中所有的「ë」字元都儲存成單一的「e 母音變化」，或者都儲存成「e」+「組合母音變化」，所以一份文件中不致於同時出現兩種格式。

      如需關於 Unicode 標準化以及可供使用的特定格式之詳細資訊，請造訪 Unicode 網站，網址是 www.unicode.org/reports/tr15。

    • 如果您選取 Unicode (UTF-8) 當做預設的編碼方式，就可以選取「包含 Unicode 簽名 (BOM)」選項，在文件中包含位元順序標記 (BOM)。

      BOM 是位於文字檔開頭處的 2 到 4 個位元組，用來識別檔案為 Unicode，以及指出後續位元組的位元順序。由於 UTF-8 沒有位元順序，所以加入 UTF-8 BOM 是選擇性的動作。但對於 UTF-16 和 UTF-32 而言則是必要的。

    • 對於 Windows，取消選取「按 Control + N 顯示新增文件對話方塊」(Macintosh 則為「按 Command + N」) 選項，以便使用按鍵命令自動建立屬於預設文件類型的新文件。
  2. 按一下「確定」。

相關主題

  • 設定預設的新文件類型


清理 Word HTML 對話方塊的設定選項

這個對話方塊是用來移除 Microsoft Word 所產生的無關 HTML 程式碼。

若要清理 Microsoft Word HTML：

  1. 選取此功能應該使用「基本」索引標籤中的哪些選項：

    移除所有 Word 自訂的標記會移除所有 Microsoft Word 專用的 HTML，包括源自 HTML 標籤的 XML、Word 自訂的 meta 資料和文件檔頭中的連結標籤、Word XML 標記、條件式標籤和它們的內容，以及源自樣式的空白段落和邊界。您可以利用「詳細」索引標籤，個別選取以上這些選項。

    清理 CSS 會移除所有 Word 專用的 CSS，包括可能的行內 CSS 樣式 (即上一層樣式有相同的樣式屬性)、以「mso」開頭的樣式屬性、非 CSS 樣式宣告、源自表格的 CSS 樣式屬性，以及源自檔頭的所有未使用的樣式定義。您可以利用「詳細」標籤，進一步自訂這個選項。

    清理 <font> 標籤會移除 HTML 標籤，將預設的內文文字大小轉換為大小為 2 的 HTML 文字。

    修正不正確的巢狀標籤會移除 Word 在段落和標題 (區塊層級) 標籤之外所插入的字體標記標籤。

    設定背景顏色讓您輸入一個十六進位值以設定文件的背景顏色。如果您沒有設定背景顏色，您的 Word HTML 文件將有灰色背景。Dreamweaver 設定的預設十六進位值是白色的。

    套用原始碼格式會將您在「HTML 格式」偏好設定和 SourceFormat.txt 中所指定的原始碼格式選項套用至文件。

    完成後顯示記錄會在清理動作完成時，顯示一個警告方塊，內含文件變更的相關詳細資料。

  2. 如果希望進一步自訂「移除所有 Word 自訂的標記」和「清理 CSS」選項，請按一下「詳細」索引標籤。
  3. 按一下「確定」。

    依據文件的大小和所選取選項的多寡，完成清理可能要花幾秒鐘的時間。您輸入的偏好設定會自動另存為預設的「清理 Word HTML」設定。

相關主題

  • 開啟現有文件
  • 清理 Microsoft Word HTML 檔


使用 Dreamweaver 網站

了解如何管理 Macromedia Dreamweaver 8 網站與網站專屬資源。

這部份包含下列各章：

管理檔案

管理網站資源和圖庫

使用 Dreamweaver 管理 Contribute 網站


管理檔案

Macromedia Dreamweaver 8 可以協助您組織和管理檔案。

Dreamweaver 包含了許多管理檔案以及與遠端伺服器往來傳送檔案的功能。當您在本機和遠端網站之間傳送檔案時，Dreamweaver 會在網站之間維持相同的檔案和資料夾結構。在網站之間傳送檔案時，如果其中某個網站上還沒有所需的資料夾，Dreamweaver 會自動建立它們。您也可以將本機和遠端網站上的檔案同步化；Dreamweaver 會依需要進行雙向檔案複製，並且在適當情況下移除不需要的檔案。

Dreamweaver 包含了一些可以讓網站上共同作業更簡便的功能。您可以存回及取出遠端伺服器上的檔案，讓 Web 團隊的成員可以看到誰正在使用檔案。您可以將「設計備註」新增到檔案中，與小組成員分享關於檔案的狀態和優先順序等資訊。您也可以使用「工作流程報表」功能來執行網站報表，藉以顯示有關存回/取出狀態的資訊，並且搜尋附加到檔案的「設計備註」。

本章包含下列各節：

關於網站管理

存取網站、伺服器和本機磁碟

檢視檔案和資料夾

比較檔案差異

復原檔案 (Contribute 使用者)

管理檔案面板中的檔案和資料夾

使用網站的視覺地圖

匯入和匯出網站

從網站清單中移除 Dreamweaver 網站

存回和取出檔案

下載和上傳伺服器檔案

同步化本機和遠端網站上的檔案

找出並刪除未使用的檔案

遮罩網站中的資料夾和檔案

在設計備註中儲存檔案資訊

測試網站


關於網站管理

Dreamweaver 包含了許多管理網站以及與遠端伺服器往來傳送檔案的功能。Dreamweaver 也包含了讓網站上的共同作業更為簡便的功能，如「存回/取出」和「設計備註」。

本節包含下列概念性主題：

  • 關於「存回/取出」系統
  • 關於背景檔案傳輸
  • 關於網站遮罩
  • 關於設計備註
  • 關於相關檔案


關於「存回/取出」系統

如果是在共同作業的環境中工作，您可以在本機和遠端伺服器之間存回和取出檔案。

注意

您可以對測試伺服器使用「下載」和「上傳」功能，但是您不能對測試伺服器使用「存回/取出」系統。如需關於使用「下載」和「上傳」的詳細資訊，請參閱下載和上傳伺服器檔案。

取出檔案就相當於宣告「我目前正在使用這個檔案─請不要碰它！」取出檔案後，Dreamweaver 就會在「檔案」面板中顯示檔案取出者的名稱，並且在檔案圖示旁附加一個紅色核取記號 (如果是小組成員取出這個檔案) 或綠色核取記號 (如果是您取出這個檔案)。

存回檔案就可以讓其他小組成員取出和編輯檔案。當您在編輯之後存回檔案時，本機版本會變成唯讀，而且在「檔案」面板中這個檔案的旁邊會出現鎖狀符號，防止您對檔案進行變更。

Dreamweaver 不會讓取出的檔案在遠端伺服器上成為唯讀。如果您使用 Dreamweaver 以外的應用程式傳送檔案，可能會覆寫取出的檔案。不過，在 Dreamweaver 以外的應用程式中，檔案階層中已取出檔案的旁邊會看到 LCK 檔案，可以協助您防止這類意外狀況。

如需關於 LCK 檔案以及「存回/取出」如何運作的詳細資訊，請參閱 Macromedia 網站上的 TechNote 15447，網址是：www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15447。

相關主題

  • 設定存回/取出系統
  • 存回和取出遠端資料夾的檔案


關於背景檔案傳輸

Dreamweaver 讓您可在下載或上傳檔案期間執行其他和伺服器無關的活動。背景檔案傳輸適用於 Dreamweaver 所支援的所有傳輸通訊協定：FTP、SFTP、LAN、WebDAV、Microsoft Visual SourceSafe 和 RDS。

和伺服器無關的活動包括一般作業，例如鍵入文字、編輯外部樣式表、產生全站台的報告以及建立新的網站。

Dreamweaver 無法在進行檔案傳輸時，執行某些與伺服器相關的活動，這些活動包括：

  • 上傳/下載/存回/取出檔案。
  • 還原取出。
  • 建立資料庫連線。
  • 繫結動態資料。
  • 預覽即時資料。
  • 插入網路服務。
  • 刪除遠端檔案或資料夾。
  • 在測試伺服器的瀏覽器中預覽。
  • 將檔案儲存到遠端伺服器。
  • 插入來自遠端伺服器的影像。
  • 開啟遠端伺服器的檔案。
  • 儲存時自動上傳檔案。
  • 將檔案拖曳到遠端網站。
  • 在遠端網站上執行剪下、複製或貼上檔案的動作。
  • 重新整理「遠端」檢視。

相關主題

  • 管理檔案傳輸


關於網站遮罩

網站遮罩可以讓您在某些作業 (如「下載」或「上傳」作業) 中排除某些資料夾和檔案類型。您可以遮罩個別資料夾，但是不能遮罩個別檔案。若要遮罩檔案，您必須選取檔案類型，然後 Dreamweaver 就會遮罩該類型的所有檔案。Dreamweaver 會記住您對每個網站的設定，所以日後在這個網站工作時，並不需要每次都進行選取。

例如，如果您在大型網站上工作，而且不想每天上傳多媒體檔案，您可以使用網站遮罩來遮罩多媒體資料夾，然後系統就會從您執行的作業中排除這個資料夾的檔案。

您可以遮罩遠端或本機網站上的資料夾和檔案類型。遮罩會從下列作業中排除被遮罩的資料夾和檔案：

  • 執行上傳、下載、存回和取出作業
  • 產生報表
  • 尋找本機和遠端的較新檔案
  • 執行整個網站的作業，如檢查和變更連結
  • 檔案同步化
  • 使用「資源」面板內容
  • 更新樣版和圖庫

    注意

    Dreamweaver 只會從「下載」和「上傳」作業中排除遮罩的樣版和圖庫項目。Dreamweaver 不會從批次作業中排除這些項目，因為這樣可能會造成它們與它們的實體之間不同步。

相關主題

  • 遮罩網站中的資料夾和檔案


關於設計備註

「設計備註」是您針對某個檔案所建立的備註。「設計備註」會與它們所說明的檔案關聯，但是儲存在另外的檔案中。您可以在「檔案」面板中看到哪些檔案附有「設計備註」：「設計備註」的圖示會出現在「備註」欄中。

您可以使用「設計備註」來記錄與文件關聯的額外檔案資訊，例如，影像原始檔案名稱和對檔案狀態的註解。例如，假設您要從某一個網站複製文件到另一個網站，您可以對這個文件新增「設計備註」，註解它的原始文件是在另一個網站資料夾中。

您也可以使用「設計備註」記錄基於安全理由而不能放在文件內的敏感資訊，如選擇特定價格或設定的原因、或哪些市場因素影響了設計決策。

如果您在 Macromedia Fireworks 或 Flash 中開啟檔案並且將其匯出為另一種格式，Fireworks 和 Flash 會自動將原始來源檔案的名稱儲存在「設計備註」中。例如，假設您在 Fireworks 中開啟 myhouse.png 並將其匯出到 myhouse.gif。Fireworks 會建立一個稱為 myhouse.gif.mno 的「設計備註」檔案。這個「設計備註」檔案含有原始檔案的名稱，如絕對 file:URL。因此，myhouse.gif 的「設計備註」可能會含有下面這行

fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"

類似的 Flash 「設計備註」可能含有下面這行：

fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"

注意

若要共用「設計備註」，使用者應該定義相同的網站根路徑 (例如，sites/assets/orig)。

當您將圖形匯入到 Dreamweaver 時，「設計備註」檔案也會自動與圖形一起複製到您的網站。當您在 Dreamweaver 中選取影像，並且選擇要使用 Fireworks 編輯它時 (請參閱啟動媒體檔案的外部編輯器)，Fireworks 便會開啟原始檔案讓您進行編輯。

相關主題

  • 啟動和停用網站的設計備註
  • 將設計備註與檔案建立關聯


關於相關檔案

當您使用「檔案」面板在本機與遠端資料夾之間傳輸文件時，Dreamweaver 會提供讓您傳輸文件相關檔案的選項。相關檔案是指文件會參考到的影像、外部樣式表以及其他檔案，當瀏覽器載入文件時也會載入這些檔案。

Dreamweaver 也會將圖庫項目視為是相關檔案。如需詳細資訊，請參閱關於圖庫項目。

當您上傳圖庫項目時，有些伺服器會報告發生錯誤。不過，您可以遮罩這些檔案，這樣就不會傳輸這些檔案。如需相關說明，請參閱遮罩網站中的資料夾和檔案。

相關主題

  • 從遠端伺服器下載檔案
  • 上傳檔案到遠端伺服器


存取網站、伺服器和本機磁碟

您可以存取、修改和儲存 Dreamweaver 網站中的檔案和資料夾，以及不屬於 Dreamweaver 網站的檔案和資料夾。除了 Dreamweaver 網站，您可以存取伺服器、本機磁碟或桌面。

您必須先將 Dreamweaver 設定為配合該部遠端伺服器運作，才能對其進行存取 (請參閱將 Dreamweaver 設定為沒有定義網站而運作)。

注意

管理檔案的最好方式是建立 Dreamweaver 網站 (請參閱設定新的 Dreamweaver 網站)。

若要開啟現有的 Dreamweaver 網站：

  • 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟之處) 選取網站。

如需關於變更網站檢視 (例如，檢視遠端資料夾) 的資訊，請參閱檢視檔案和資料夾。如需開啟您網站上檔案的資訊，請參閱使用檔案面板中的檔案。

若要開啟遠端 FTP 或 RDS 伺服器上的資料夾：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取伺服器名稱。

    注意

    您設定 Dreamweaver 要配合運作的伺服器其伺服器名稱出現。如果尚未設定伺服器，請參閱將 Dreamweaver 設定為沒有定義網站而運作。
  2. 以一般的操作方式瀏覽並編輯檔案。

    如需詳細資訊，請參閱使用檔案面板中的檔案。

若要存取本機磁碟或桌面：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取「桌面」、「本機磁碟」或「光碟機」。

  2. 瀏覽至檔案，然後執行下列任何作業：
    • 在 Dreamweaver 或其他應用程式中開啟檔案
    • 重新命名檔案
    • 複製檔案
    • 刪除檔案
    • 拖曳檔案

      當您將檔案由某個 Dreamweaver 網站拖曳到另一個網站或不屬於 Dreamweaver 網站的資料夾時，Dreamweaver 會將檔案複製到您放下的位置。如果您是在同一個 Dreamweaver 網站內拖曳檔案，Dreamweaver 會將檔案移動到您放下的位置。如果您是將不屬於 Dreamweaver 網站的檔案拖曳到不屬於 Dreamweaver 網站的資料夾，Dreamweaver 會將檔案移動到您放下的位置。

      注意

      若要移動 Dreamweaver 預設要複製的檔案，請在拖曳時按住 Shift 鍵 (Windows) 或 Command 鍵 (Macintosh)。若要複製 Dreamweaver 預設要移動的檔案，請在拖曳時按住 Control 鍵 (Windows) 或 Option 鍵 (Macintosh)。

相關主題

  • 檢視檔案和資料夾
  • 管理檔案面板中的檔案和資料夾


將 Dreamweaver 設定為沒有定義網站而運作

Dreamweaver 可讓您連結 FTP 或 RDS 伺服器，以在沒有建立 Dreamweaver 網站的文件上工作。

注意

如果您在沒有建立 Dreamweaver 網站的檔案上工作時，將無法執行整個網站的操作，如連結檢查。若要設定 Dreamweaver 網站，請參閱設定新的 Dreamweaver 網站。

若要從「文件」視窗將 Dreamweaver 設定為配合伺服器運作：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 按一下「新增」，再選取「FTP & RDS 伺服器」。

    「設定伺服器」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定設定伺服器對話方塊選項。

    注意

    對於要連線的每個伺服器，您只需要完成此對話方塊一次。
  4. 按一下「確定」。

    「檔案」面板便會顯示連線的遠端伺服器資料夾內容，而面板頂端的彈出式選單會出現伺服器名稱。

若要使用「檔案」面板將 Dreamweaver 設定為配合伺服器運作：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取「桌面」。

  2. 在「檔案」面板中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)「FTP 和 RD 伺服器」節點，然後選取「新增 FTP 伺服器」或「新增 RDS 伺服器」。

    「設定伺服器」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定設定伺服器對話方塊選項。

    注意

    對於要連線的每個伺服器，您只需要完成此對話方塊一次。
  4. 按一下「確定」。

    「檔案」面板便會顯示連線的遠端伺服器資料夾內容，而面板頂端的彈出式選單會出現伺服器名稱。

    注意

    對於大型資料夾，「檔案」面板可能需要花費一些時間才能顯示資料夾。

相關主題

  • 存取網站、伺服器和本機磁碟


檢視檔案和資料夾

您可以在「檔案」面板中檢視檔案和資料夾，不論它們是否與某個 Dreamweaver 網站相關聯。在「檔案」面板中檢視網站、檔案和資料夾時，您可以變更檢視區域的大小，而且您可以展開或收合 Dreamweaver 網站的「檔案」面板。

對於 Dreamweaver 網站，藉由變更收合的面板中預設出現的檢視 (不論是本機或遠端網站)，便可以自訂「檔案」面板。或者，您可以使用「永久顯示」選項，在展開的「檔案」面板中切換內容檢視 (請參閱設定「檔案」面板的偏好設定)。

若要開啟或關閉「檔案」面板：

  • 選取「視窗＞檔案」。

若要變更展開的「檔案」面板中的檢視區域大小：

  • 在「檔案」面板 (「視窗＞檔案」) 的面板展開時，請執行下列其中一項作業：
    • 拖曳檢視分隔框以增加或減少右邊或左邊窗格的顯示區域。
    • 使用「檔案」面板底部的捲軸在檢視的內容中捲動。
    • 在網站地圖中，拖曳檔案上方的箭頭來變更檔案之間的空間。

若要展開或收合「檔案」面板 (僅適用 Dreamweaver 網站)：

  • 在「檔案」面板 (「視窗＞檔案」) 中，按一下工具列的「展開/收合」按鈕。 這是描述功能的圖片。

    注意

    如果在面板鎖定時按一下「擴展/收合」按鈕展開面板，面板會放到最大，這樣就無法在「文件」視窗中工作了。如果要返回「文件」視窗，請再按一次「擴展/收合」按鈕以收合面板。如果在面板未鎖定時按一下「擴展/收合」按鈕展開面板，這樣還是可以在「文件」視窗中工作。您必須先收合面板，才能再次鎖定面板。

「檔案」面板收合時，會將本機網站、遠端網站或測試伺服器的內容顯示為檔案清單。「檔案」面板展開時，便會顯示本機網站以及遠端網站或者是測試伺服器。「檔案」面板也可以顯示本機網站的視覺網站地圖。

若要變更「檔案」面板中的網站檢視，請執行下列其中一項作業 (僅限 Dreamweaver 網站)：

  • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，從「網站檢視」彈出式選單選取「本機檢視」、「遠端檢視」、「測試伺服器」或「地圖檢視」。

    注意

    根據預設，「本機檢視」會出現在彈出式選單中。

  • 在「展開」的「檔案」面板 (「視窗＞檔案」) 中，按一下工具列上的「網站檔案」按鈕 (遠端網站)、「測試伺服器」按鈕或「網站地圖」按鈕。

    如果按一下「網站地圖」按鈕，您可以選擇檢視附有網站檔案的網站地圖，或者只檢視網站地圖。如需詳細資訊，請參閱檢視網站地圖。

    注意

    您必須先設定遠端網站或測試伺服器，才能加以檢視 (請參閱設定遠端資料夾或指定可以處理動態網頁的位置)。您必須先設定首頁，才能檢視網站地圖 (請參閱檢視網站地圖)。

相關主題

  • 存取網站、伺服器和本機磁碟
  • 自訂顯示於展開檔案面板中的檔案和資料夾詳細資料
  • 管理檔案面板中的檔案和資料夾


自訂顯示於展開檔案面板中的檔案和資料夾詳細資料

當您在展開的「檔案」面板中檢視 Dreamweaver 網站 (請參閱檢視檔案和資料夾) 時，Dreamweaver 會分欄顯示檔案和資料夾的相關資訊。例如，您可以看到檔案類型或檔案修改日期。

藉由執行下列作業之一，可自訂這些欄 (部分作業僅能用於您新增的欄，不適用於預設欄)：

  • 重新排序或重新對齊欄
  • 新增欄 (最多增為 10 欄)
  • 隱藏欄 (除了檔案名稱欄以外)
  • 指定連結至網站之所有使用者共用的欄
  • 刪除欄 (僅限自訂欄)
  • 重新命名欄 (僅限自訂欄)
  • 與設計備註相關 (僅限自訂欄)

若要在「檔案」面板中依據任一詳細資料欄來排序：

  • 按一下要用來排序的欄標題。

    提示

    再次按一下標題會反轉 Dreamweaver 排序該欄的順序 (遞增或遞減)。

若要新增、刪除或變更詳細資料欄：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 從左邊的「分類」清單選取「檔案檢視欄設定」。

    「網站定義」對話方塊便會顯示「檔案檢視欄設定」選項。

  4. 完成對話方塊。

    如需詳細資訊，請參閱設定檔案檢視欄類別選項。

  5. 按一下「確定」。


比較檔案差異

Dreamweaver 可以搭配檔案比較工具 (也稱為「差異工具」) 來使用 ，以比較相同檔案的本機和遠端版本、兩個不同的遠端檔案，或是兩個不同的本機檔案之間的程式碼差異。如果您正在本機使用檔案，並懷疑這個檔案在伺服器上的版本已遭到他人修改，這時候，比較本機和遠端版本就會很有幫助。您可以在不離開 Dreamweaver 的情況下，檢視遠端的變更並將變更合併到本機版本，然後才將檔案上傳到伺服器。

如果您保留了先前重新命名過的檔案版本，則比較兩個本機檔案或兩個遠端檔案也很有幫助。如果您忘了對舊的檔案版本做過什麼變更，快速比較一下就會讓您想起來。

在開始比較檔案之前，您必須先在系統上安裝協力廠商的檔案比較工具。如需關於檔案比較工具的詳細資訊，請參閱 Macromedia 網站，網址是：www.macromedia.com/go/dw8_compare_util。此外，安裝工具後，您也必須依照本節稍後的說明，在 Dreamweaver 中指定使用此工具。

本節包含下列主題：

  • 比較兩個檔案
  • 上傳檔案前先做比較
  • 同步化檔案時進行比較
  • 在 Dreamweaver 中指定比較工具


比較兩個檔案

在系統上安裝檔案比較工具，並在 Dreamweaver 中指定使用這個工具之後，您就可以從 Dreamweaver 執行下列任何工作：

  • 比較兩個本機檔案
  • 比較兩個遠端檔案
  • 將本機檔案和遠端檔案做比較
  • 將遠端檔案和本機檔案做比較
  • 將開啟的檔案和遠端檔案做比較

相關主題

  • 上傳檔案前先做比較
  • 同步化檔案時進行比較


比較兩個本機檔案

您可以比較位於電腦上任何地方的兩個檔案。

若要比較兩個本機檔案：

  1. 在「檔案」面板中，Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 兩個檔案，將它們選取。

    提示

    若要選取位於定義網站外的檔案，請從「檔案」面板的左側彈出式選單中選取本機磁碟，然後再選取檔案。
  2. 以右鍵按一下其中一個選取的檔案，然後從快速選單中選取「比較本機檔案」。

    注意

    如果您的滑鼠只有一個按鍵，請 Control + 按一下其中一個選取的檔案。

    檔案比較工具就會啟動並開始比較兩個檔案。


比較兩個遠端檔案

您可以比較位於遠端伺服器上的兩個檔案。您必須先定義一個具有遠端設定的 Dreamweaver 網站，然後才能完成這項工作。如需詳細資訊，請參閱設定新的 Dreamweaver 網站。

若要比較兩個遠端檔案：

  1. 在「檔案」面板中，從右側彈出式選單中選取「遠端檢視」，以顯示遠端伺服器上的檔案。
  2. Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 兩個檔案，將它們選取。
  3. 以右鍵按一下其中一個選取的檔案，然後從快速選單中選取「比較遠端檔案」。

    注意

    如果您的滑鼠只有一個按鍵，請 Control + 按一下其中一個選取的檔案。

    檔案比較工具就會啟動並開始比較兩個檔案。


將本機檔案和遠端檔案做比較

您可以將本機檔案和位於遠端伺服器上的檔案作個比較。若要進行這項比較，您必須先定義一個具有遠端設定的 Dreamweaver 網站。如需詳細資訊，請參閱設定新的 Dreamweaver 網站。

若要將本機檔案和遠端檔案做個比較：

  • 在「檔案」面板中，以右鍵按一下某個本機檔案，然後從快速選單中選取「和遠端檔案比較」。

    注意

    如果您的滑鼠只有一個按鍵，請 Control + 按一下本機檔案。

    檔案比較工具就會啟動並開始比較兩個檔案。


將遠端檔案和本機檔案做比較

您可以將遠端檔案和本機檔案做個比較，但是您必須先定義一個具有遠端設定的 Dreamweaver 網站，然後才能完成這項工作。如需詳細資訊，請參閱設定新的 Dreamweaver 網站。

若要將遠端檔案和本機檔案做個比較：

  1. 在「檔案」面板中，從右側彈出式選單中選取「遠端檢視」，以顯示遠端伺服器上的檔案。
    • 以右鍵按一下面板中的某個檔案，然後從快速選單中選取「和本機檔案比較」。

      注意

      如果您的滑鼠只有一個按鍵，請 Control + 按一下檔案。


將開啟的檔案和遠端檔案做比較

您可以將 Dreamweaver 中所開啟的檔案和它位於遠端伺服器上的對應檔案做個比較。

若要將 Dreamweaver 中所開啟的檔案和它的遠端版本做比較：

  • 在「文件」視窗中，選取「檔案＞和遠端檔案比較」。

    檔案比較工具就會啟動並開始比較兩個檔案。

    提示

    您也可以沿著「文件」視窗頂端以右鍵按一下文件索引標籤，然後從快速選單中選取「和遠端檔案比較」。


上傳檔案前先做比較

如果您在本機編輯檔案，然後試圖將它上傳到遠端伺服器，如果檔案的遠端版本已經變更，Dreamweaver 就會通知您。在您上傳檔案並覆寫遠端版本之前，Dreamweaver 會提供讓您比較這兩個檔案的選項。

開始進行比較之前，您必須先在系統上安裝檔案比較工具，並在 Dreamweaver 中指定使用這個工具。如需詳細資訊，請參閱在 Dreamweaver 中指定比較工具。

若要在上傳檔案時比較檔案：

  1. 在編輯 Dreamweaver 網站中的檔案之後，將檔案上傳 (「網站＞上傳」) 到遠端網站。

    如果檔案的遠端版本已經遭到修改，Dreamweaver 會通知您，並且提供讓您查看檔案差異的選項。

  2. 按一下「比較」按鈕，以檢視檔案差異。

    檔案比較工具就會啟動並開始比較兩個檔案。

    如果您尚未指定檔案比較工具，Dreamweaver 會提示您指定一個。

  3. 在工具中檢視或合併變更之後，就可以繼續執行「上傳」作業或者是取消這項作業。

相關主題

  • 比較兩個檔案
  • 同步化檔案時進行比較


同步化檔案時進行比較

當您使用 Dreamweaver 來同步化網站檔案時，可以比較檔案的本機版本和遠端版本。

開始進行比較之前，您必須先在系統上安裝檔案比較工具，並在 Dreamweaver 中指定使用這個工具。如需詳細資訊，請參閱在 Dreamweaver 中指定比較工具。

若要在進行同步化時比較檔案：

  1. 以右鍵按一下「檔案」面板中的任何地方，然後從快速選單中選取「同步化」。

    「同步化檔案」對話方塊便會出現。

  2. 完成「同步化檔案」對話方塊，然後按一下「預覽」。

    如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。

    按一下「預覽」之後，Dreamweaver 就會列出選取的檔案以及進行同步化時它會採取的動作。

  3. 在清單中，選取您要比較的每一個檔案，然後按一下「比較」按鈕 (有兩個小頁面的那個圖示)。

    注意

    比較的檔案必須是以文字為主的檔案，例如 HTML 或 ColdFusion 檔案。

    Dreamweaver 會啟動比較工具，比較您選取的每一個檔案的本機和遠端版本。

相關主題

  • 比較兩個檔案
  • 上傳檔案前先做比較


在 Dreamweaver 中指定比較工具

您必須先在系統上安裝協力廠商的檔案比較工具，才能從 Dreamweaver 進行檔案比較。如需關於檔案比較工具的詳細資訊，請參閱 Macromedia 網站，網址是：www.macromedia.com/go/dw8_compare_util。

完成檔案比較工具的安裝後，您必須接著根據本節稍後的說明，在 Dreamweaver 指定使用此比較工具。

若要指定檔案比較工具：

  1. 在 Dreamweaver 所在的系統上，安裝檔案比較工具。
  2. 在 Dreamweaver 中，選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，開啟「偏好設定」對話方塊，，然後選取「檔案比較」類別。
  3. 如果是 Windows，請按一下「瀏覽」按鈕，然後選取比較檔案的應用程式。
  4. 如果是 Macintosh，請按一下「瀏覽」按鈕，然後選取會從命令列啟動檔案比較工具的工具或 Script，而不要直接選取檔案比較工具本身。

    啟動工具或 Script 通常是位於 Macintosh 電腦的 usr/bin 資料夾中。例如，如果您想要使用 FileMerge，請瀏覽至 usr/bin 然後選取 opendiff (這就是會啟動 FileMerge 的工具)。

    下面表格列出 Macintosh 常用的檔案比較工具，並列出其啟動工具或 Script 在硬碟上的位置：

    如果您使用

    請選取這個檔案

    FileMerge

    usr/bin/opendiff

    BBEdit

    usr/bin/bbdiff

    TextWrangler

    usr/bin/twdiff

    注意

    在 Finder 中，通常不會顯示 usr 資料夾，不過，您還是可以在 Dreamweaver 中使用「瀏覽」按鈕來存取這個資料夾。

相關主題

  • 比較兩個檔案
  • 上傳檔案前先做比較
  • 同步化檔案時進行比較


復原檔案 (Contribute 使用者)

只要您啟用了 Contribute 相容性，Dreamweaver 便會自動為文件儲存多個版本。關於如何啟動 Contribute 相容性，請參閱準備 Contribute。

注意

您必須在同一部電腦上同時安裝 Contribute 與 Dreamweaver。

您也必須在 Contribute 的系統管理設定中，啟用檔案復原功能。如需詳細資訊，請參閱「管理 Contribute」。

若要復原檔案的先前版本：

  1. 在「檔案」面板中的某個檔案上，按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)。
  2. 選取「復原網頁」。

    如果系統有儲存網頁之前的某個版本，「復原」對話方塊便會出現。

  3. 選取您要復原的網頁版本，再按一下「復原」。

相關主題

  • 對 Contribute 網站上的遠端檔案進行刪除、移動或重新命名


管理檔案面板中的檔案和資料夾

您可以在連線過的伺服器上、或者本機磁碟或桌面上，組織及管理網站檔案和資料夾，不論它們是否屬於 Dreamweaver 網站。

注意

在先前版本的 Dreamweaver 中，「檔案」面板稱為「網站面板」。

本節包含下列主題：

  • 設定「檔案」面板的偏好設定
  • 使用檔案面板中的檔案
  • 在 Dreamweaver 網站中尋找檔案

相關主題

  • 使用檔案面板
  • 存取網站、伺服器和本機磁碟
  • 檢視檔案和資料夾


設定「檔案」面板的偏好設定

您可以選取偏好設定以控制「檔案」面板中的檔案傳送功能。

若要編輯「檔案」面板偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的分類清單選取「網站」。

    「網站」偏好設定選項便會出現。

  3. 依需要變更選項。

    如需詳細資訊，請參閱設定網站偏好設定選項

  4. 按一下「確定」。

    提示

    您可以自訂 Dreamweaver/Configuration 資料夾中的 FTPExtensionMap.txt 檔案 (在 Macintosh 上為 FTPExtensionMapMac.txt)，定義傳送的檔案類型是否要以 ASCII (文字檔) 或二進位檔傳送。如需詳細資訊，請參閱「擴充 Dreamweaver 功能」。

相關主題

  • 自訂顯示於展開檔案面板中的檔案和資料夾詳細資料


使用檔案面板中的檔案

您可開啟或重新命名檔案；新增、移動或刪除檔案；或在變更後重新整理「檔案」面板。

對 Dreamweaver 網站而言，您也可以判斷哪些檔案 (在本機或遠端網站上) 在上次傳送之後已經更新過了。如需關於使本機網站與遠端網站同步化的詳細資訊，請參閱同步化本機和遠端網站上的檔案。

若要開啟檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取網站、伺服器或磁碟。
  2. 瀏覽至您要開啟的檔案。
  3. 請執行下列其中一項作業：
    • 按兩下檔案的圖示。
    • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案的圖示，然後選取「開啟」。

Dreamweaver 在「文件」視窗中開啟檔案。

若要建立新的檔案或資料夾：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取檔案或資料夾。

    Dreamweaver 會在目前選取的資料夾內，或在目前所選取檔案的同一資料夾內建立新檔案或資料夾。

  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「開新檔案」或「新增資料夾」。
  3. 輸入新檔案或資料夾的名稱。
  4. 按 Enter (Windows) 或 Return (Macintosh)。

若要刪除檔案或資料夾：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取要刪除的檔案或資料夾。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「刪除」。

若要重新命名檔案或資料夾：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取要重新命名的檔案或資料夾。
  2. 請執行下列其中一項作業，啟動檔案或資料夾的名稱：
    • 在檔案名稱中按一下，暫停片刻，然後再按一下。
    • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案的圖示，然後選取「重新命名」。
  3. 在現有的名稱上鍵入新名稱。
  4. 按 Enter (Windows) 或 Return (Macintosh)。

若要移動檔案或資料夾：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取要移動的檔案或資料夾。
  2. 請執行下列其中一項作業：
    • 複製檔案或資料夾，再將其貼上到新的位置。
    • 將檔案或資料夾拖曳到新位置。
  3. 重新整理「檔案」面板，查看新位置上的檔案或資料夾。

若要重新整理「檔案」面板，請執行下列其中一項作業：

  • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 任何檔案或資料夾，然後選取「重新整理」。
  • (僅適用於 Dreamweaver 網站) 按一下「檔案」面板工具列的「重新整理」按鈕 (這個選項會同時重新整理兩邊的窗格)。

    注意

    當您在其他應用程式中進行變更然後返回 Dreamweaver 時，Dreamweaver 便會自動重新整理「檔案」面板。

相關主題

  • 檢視檔案和資料夾
  • 存取網站、伺服器和本機磁碟
  • 設定「檔案」面板的偏好設定
  • 在 Dreamweaver 網站中尋找檔案


在 Dreamweaver 網站中尋找檔案

Dreamweaver 讓您可以更加容易地在網站中尋找選取的、開啟的、取出的或最近修改過的檔案。您也可以尋找本機或遠端網站中較新的檔案。

若要在網站中尋找開啟的檔案：

  1. 在「文件」視窗中開啟檔案。
  2. 選取「網站＞指出在網站中位置」。

Dreamweaver 便會在「檔案」面板中選取檔案。

注意

如果「文件」視窗中開啟的檔案不屬於「檔案」面板中目前的網站，Dreamweaver 會嘗試判斷檔案屬於哪一個 Dreamweaver 網站，如果目前的檔案只屬於某一個本機網站，Dreamweaver 便會在「檔案」面板中開啟該網站，然後反白標示這個檔案。

若要找到並選取 Dreamweaver 網站中取出的檔案：

  • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下「檔案」面板右上角的「選項」選單，然後選取「編輯＞選取要取出的檔案」。

Dreamweaver 便會在「檔案」面板中選取檔案。

若要在本機或遠端網站中尋找選取的檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 的「本機」或「遠端」檢視中，選取檔案。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「本地網站中找出檔案」或「在遠端網站中找出檔案」(視選取檔案的位置而定)。

Dreamweaver 便會在「檔案」面板中選取檔案。

若要尋找並且選取在本機網站中比在遠端網站中新的檔案：

  • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下「檔案」面板右上角的「選項」選單，然後選取「編輯＞選取較新的本地檔案」。

Dreamweaver 便會在「檔案」面板中選取檔案。

若要尋找並且選取在遠端網站中比在本機網站中新的檔案：

  • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下「檔案」面板右上角的「選項」選單，然後選取「編輯＞選取較新的遠端檔案」。

Dreamweaver 便會在「檔案」面板中選取檔案。

若要在網站中尋找最近修改的檔案：

  1. 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下「檔案」面板右上角的「選項」選單，然後選取「編輯＞選取最近修改的檔案」。

    「選取最近修改的檔案」對話方塊便會出現。

  2. 完成對話方塊。

    如需詳細資訊，請參閱設定選取最近修改的檔案對話方塊選項。

  3. 按一下「確定」儲存設定。

Dreamweaver 便會在「檔案」面板中反白標示於所選時間內修改過的檔案。

相關主題

  • 存取網站、伺服器和本機磁碟
  • 檢視檔案和資料夾
  • 使用檔案面板中的檔案


使用網站的視覺地圖

您可以用連結圖示的視覺地圖來檢視 Dreamweaver 的本機資料夾，這個視覺地圖稱為「網站地圖」。可以使用網站地圖將新檔案新增至 Dreamweaver 網站，或者新增、修改或移除連結。

網站地圖會從首頁開始，以兩個層級的深度顯示網站結構。它會將頁面顯示為圖示，並依連結在原始碼中發生的順序加以顯示。

網站地圖很適合顯示網站的結構。您可以快速地設定網站的整個結構，然後建立網站地圖的圖像式影像。

注意

網站地圖只適用於本機網站。若要建立遠端網站的地圖，請將遠端網站的內容複製到本機磁碟的資料夾中，然後使用「管理網站」命令將這個網站定義為本機網站 (請參閱設定本機資料夾)。

本節包含下列主題：

  • 檢視網站地圖
  • 修改網站地圖版面
  • 使用網站地圖中的頁面
  • 顯示和隱藏網站地圖檔案
  • 從分支檢視網站
  • 儲存網站地圖

相關主題

  • 使用網站地圖連結文件


檢視網站地圖

您必須定義網站的「首頁」，然後才能顯示網站地圖。網站的首頁可以是網站中的任何網頁；不一定是網站中的主要網頁。在這裡所說的情況下，首頁只是地圖的起點。

若要定義網站的首頁：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟之處) 選取網站。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 要做為首頁的檔案，然後選取「設成首頁」。

    注意

    您也可以在「網站定義」對話方塊的「網站地圖版面」選項中設定首頁 (請參閱修改網站地圖版面)。

若要檢視網站地圖：

  1. 若要顯示網站地圖，在「檔案」面板 (「視窗＞檔案」) 中，請執行下列其中一項作業：
    • 在「收合」的「檔案」面板中，從「網站檢視」彈出式選單選取「地圖檢視」。

    • 在「展開」的「檔案」面板中，按一下工具列中的「網站地圖」按鈕，然後選取「只有地圖」或「地圖和檔案」。

      選取「只有地圖」檢視沒有本機檔案結構的網站地圖，或者選取「網站及地圖」檢視有本機檔案結構的網站地圖。

      注意

      如果尚未定義首頁，或者 Dreamweaver 在目前的網站找不到要做為首頁的 index.html 或 index.htm 頁面，Dreamweaver 便會提示您選取首頁。

    「檔案」面板會以兩個層級深度的網站結構來顯示網站地圖。

    注意

    根據預設，網站地圖不會顯示隱藏檔案和相關檔案。如需詳細資訊，請參閱顯示和隱藏網站地圖檔案。
  2. 按一下檔案名稱旁邊的加號 (+) 和減號 (-)，以顯示或隱藏第二層以下的連結頁面。
  3. 請注意網站地圖中的顏色：
    • 以紅色顯示的文字表示無效的連結。
    • 以藍色顯示並且有球形圖示標記的文字表示其他網站上的檔案或特殊連結 (例如電子郵件或 Script 連結)。
    • 綠色核取記號表示您已經取出的檔案。
    • 紅色核取記號表示別人已經取出的檔案。
    • 鎖狀圖示表示唯讀檔案 (Windows) 或鎖定的檔案 (Macintosh)。

相關主題

  • 修改網站地圖版面
  • 使用網站地圖中的頁面
  • 顯示和隱藏網站地圖檔案
  • 從分支檢視網站


修改網站地圖版面

使用「網站地圖版面」選項可以自訂網站地圖的外觀。您可以變更首頁、顯示的欄數、圖示標籤是否要顯示檔案名稱或頁面標題，以及是否要顯示隱藏和相關檔案。

若要修改網站地圖版面：

  1. 請執行下列其中一項作業，開啟「網站定義」對話方塊：
    • 選取「網站＞管理網站」。
    • 在「檔案」面板中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取「管理網站」。

    「管理網站」對話方塊便會出現。

  2. 按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 在左邊的「分類」清單中選取「網站地圖版面」。

    「網站定義」對話方塊便會顯示「網站地圖版面」選項。

  4. 必要時進行變更。

    如需詳細資訊，請參閱設定網站地圖版面類別選項。

  5. 按一下「確定」，關閉「網站定義」對話方塊。
  6. 按一下「完成」，關閉「管理網站」對話方塊 (如果它是開啟的)。

相關主題

  • 檢視網站地圖
  • 使用網站地圖中的頁面
  • 顯示和隱藏網站地圖檔案
  • 儲存網站地圖


使用網站地圖中的頁面

使用網站地圖時，您可以選取頁面、開啟頁面進行編輯、新增頁面到網站、建立檔案間的連結，以及變更頁面標題。

若要在網站地圖中選取多個頁面，請執行下列其中一項作業：

  • Shift + 按一下，以選取相鄰頁面的範圍。
  • 從檢視的空白部分開始，在檔案群組的周圍拖曳，以選取它們。
  • Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh)，以選取不相鄰的頁面。

若要在網站地圖中開啟頁面進行編輯，請執行下列其中一項作業：

  • 按兩下這個檔案。
  • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案，再選取「開啟」。

若要新增現有檔案到網站，請執行下列其中一項作業：

  • 從 Windows「檔案總管」或 Macintosh Finder 中將檔案拖曳到網站地圖中的檔案。這個頁面就會新增到網站，並且會在這個頁面和它被拖曳到的檔案之間建立連結。
  • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 網站地圖中的檔案，選取「連結到存在的檔案」，然後瀏覽至檔案。

若要建立新檔案並且新增連結到網站地圖：

  1. 選取網站地圖中的檔案。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「連結至新的檔案」。

    「連結至新的檔案」對話方塊便會出現。

  3. 輸入連結的名稱、標題和文字。
  4. 按一下「確定」。

    Dreamweaver 將這個檔案儲存在所選取檔案的同一個資料夾中。如果您新增檔案到隱藏的分支，這個新檔案也會隱藏 (請參閱顯示和隱藏網站地圖檔案)。

若要修改網站地圖中頁面的標題：

  1. 藉由按一下「收合」的「檔案」面板右上角中的「選項」選單，再選取「檔案＞重新命名檢視＞顯示頁面標題」，確認已顯示頁面標題。

  2. 選取網站地圖中的檔案，然後執行下列其中一項作業：
    • 按一下標題。當標題變成可編輯狀態時，輸入新的標題。
    • 按一下右上角的「選項」選單，再選取「檔案＞重新命名」。
  3. 輸入新名稱之後，請按 Enter (Windows) 或 Return (Macintosh)。

    注意

    當您在「檔案」面板中工作時，Dreamweaver 會自動更新名稱已經變更的所有連結。

若要在網站地圖中變更首頁，請執行下列其中一項作業：

  • 在「檔案」面板的「本機」檢視中，選取檔案，然後按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，再選取「設成首頁」。
  • 在「檔案」面板中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取「管理網站」，然後按一下「編輯」。在「網站定義」對話方塊分類清單中選取「網站地圖版面」。瀏覽到新的首頁，然後按一下「確定」。

若要在進行變更之後更新網站地圖顯示：

  1. 按一下網站地圖中的任何地方，以取消選取任何檔案。
  2. 按一下「檔案」面板工具列中的「重新整理」按鈕。

相關主題

  • 檢視網站地圖
  • 修改網站地圖版面
  • 儲存網站地圖


顯示和隱藏網站地圖檔案

您可以修改網站地圖的版面，以顯示或隱藏隱藏和相關檔案。如果您要強調重要主題或內容，或者取消強調較不重要的資料，這會很有用處。

若要使用網站地圖隱藏檔案，您必須將檔案標記為隱藏。當您隱藏檔案時，它的連結也會隱藏。當您顯示標記為隱藏的檔案時，圖示和它的連結在網站地圖中都可以看得見，但是名稱會以斜體顯示。

注意

根據預設，相關檔案原本就是隱藏的。

若要在網站地圖中將檔案標記為隱藏：

  1. 在網站地圖中，選取一個或多個檔案。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「顯示/隱藏連結」。

若要取消標記網站地圖中已標記為隱藏的檔案：

  1. 在網站地圖中，選取一個或多個檔案。
  2. 請執行下列其中一項作業：
    • 在網站地圖中按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「顯示/隱藏連結」。
    • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下右上角的「選項」選單，然後選取「檢視＞顯示標記為隱藏的檔案」。
    • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下右上角的「選項」選單，然後選取「檢視＞顯示/隱藏連結」。

若要顯示或隱藏網站地圖中標記為隱藏的檔案：

  1. 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下右上角的「選項」選單。

  2. 請執行下列其中一項作業：
    • 選取「檢視＞顯示標記為隱藏的檔案」。
    • 選取「檢視＞版面」以開啟「網站定義」對話方塊，然後選取「顯示標記為隱藏的檔案」選項。

若要在網站地圖中顯示相關檔案：

  1. 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下右上角的「選項」選單。
  2. 請執行下列其中一項作業：
    • 選取「檢視＞顯示相關檔案」。
    • 選取「檢視＞版面」以開啟「網站定義」對話方塊，然後選取「顯示相關檔案」選項。

相關主題

  • 檢視網站地圖
  • 修改網站地圖版面
  • 使用網站地圖中的頁面
  • 儲存網站地圖


從分支檢視網站

您可以將分支設定成網站地圖的焦點，藉以檢視網站特定部分的詳細資料。

若要在網站地圖中檢視不同的分支：

  1. 選取要檢視的頁面。
  2. 請執行下列其中一項作業：
    • 在網站地圖中按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「作為根目錄檢視」。
    • 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下右上角的「選項」選單，然後選取「檢視＞作為根目錄檢視」。

網站地圖就會在視窗中重新繪製，而指定的網頁會像是位於網站的根目錄一樣。網站地圖上方的「網站導覽」文字方塊會顯示從首頁到指定頁面的路徑。只要按一次，選取路徑中的任何項目，就可以從這個層級來檢視網站地圖。

若要在網站地圖中展開和收合分支：

  • 按一下分支的加號 (+) 或減號 (-) 按鈕。

相關主題

  • 檢視網站地圖
  • 修改網站地圖版面
  • 使用網站地圖中的頁面


儲存網站地圖

您可以將網站地圖儲存為影像，然後在影像編輯器中檢視 (或列印) 這個影像。

若要建立目前網站地圖的影像檔案：

  1. 在「收合」的「檔案」面板 (「視窗＞檔案」) 中，按一下右上角的「選項」選單，然後選取「檔案＞儲存網站地圖」。

    「儲存網站地圖」對話方塊出現。

  2. 在「檔案名稱」文字方塊中輸入名稱。
  3. 在「檔案類型」彈出式選單中，選取 .bmp 或 .png。
  4. 選取儲存檔案的位置，然後輸入影像的名稱。
  5. 按一下「儲存檔案」。

相關主題

  • 檢視網站地圖
  • 修改網站地圖版面
  • 使用網站地圖中的頁面


匯入和匯出網站

您可以將網站匯出為包含網站設定的 XML 檔案，然後再將網站匯入 Dreamweaver。這樣可以讓您在不同的電腦和產品版本之間移動網站，或與其他使用者共用設定。

提示

最好能將網站定期匯出，這樣一來，即使網站有任何情況發生時，還有備份複本可用。

若要匯出網站：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取一或多個要匯出的網站，然後按一下「匯出」按鈕。

    若要選取多個網站，請 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 每一個網站。若要選取相鄰的多個網站，請按 Shift + 按一下相鄰網站中的第一個和最後一個網站。

  3. 針對您要匯出的每一個網站，瀏覽至您要儲存網站的位置，然後按一下「儲存」。

    如果您匯出一個指定遠端伺服器使用者名稱和密碼的網站，Dreamweaver 會詢問您是否要備份設定，或者是否要和其他使用者共用設定。如果您要和其他使用者共用設定，請選取第二個選項，然後按一下「確定」。Dreamweaver 不會儲存不適用於其他使用者的資訊，例如您的遠端伺服器登入資訊和本機路徑。

    Dreamweaver 會將每一個網站儲存為 XML 檔案，並以 .ste 的副檔名存放在指定的位置。

  4. 按一下「完成」，關閉「管理網站」對話方塊。

若要匯入網站：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 按一下「匯入」按鈕。

    「匯入網站」對話方塊便會出現。

  3. 瀏覽並選取一或多個要匯入的網站 (副檔名為 .ste 的檔案)。

    若要選取多個網站，請 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 每一個 .ste 檔案。若要選取相鄰的多個網站，請按 Shift + 按一下相鄰檔案中的第一個和最後一個檔案。

  4. 按一下「開啟」，就會開始匯入網站。

    Dreamweaver 完成網站的匯入作業之後，網站名稱便會出現在「管理網站」對話方塊中。

  5. 按一下「完成」，關閉「管理網站」對話方塊。


從網站清單中移除 Dreamweaver 網站

如果您不再需要在 Dreamweaver 中使用某個網站，您可以從網站清單中移除這個網站。網站中的檔案並不會被移除。

注意

當您從清單中移除網站時，有關這個網站的所有設定資訊都會永久消失。

若要從網站清單中移除網站：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站名稱。
  3. 按一下「移除」。

    要求您確認刪除的對話方塊便會出現。

  4. 按一下「是」從清單移除網站，或按一下「否」保留這個網站名稱。

    如果您是按「是」，網站名稱會從清單中消失。

  5. 按一下「完成」，關閉「管理網站」對話方塊。


存回和取出檔案

如果是在共同作業的環境中工作，可以使用「存回和取出」系統，在本機和遠端伺服器之間存回和取出檔案。

如果您是唯一在遠端伺服器上工作的人，可以使用「上傳」和「下載」命令，而不需存回或取出檔案 (請參閱下載和上傳伺服器檔案)。

本節包含下列主題：

  • 設定存回/取出系統
  • 使用 WebDAV 存回及取出檔案
  • 存回和取出遠端資料夾的檔案
  • 還原取出動作

相關主題

  • 關於「存回/取出」系統


設定存回/取出系統

您必須建立本機網站與遠端伺服器的關聯，然後才能使用「存回/取出」系統 (請參閱設定遠端資料夾)。

若要設定「存回/取出」系統：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 從左邊的「分類」清單中選取「遠端資訊」。

    「網站定義」對話方塊會顯示「遠端資訊」選項。「存回/取出」區段會出現在對話方塊的底部。

  4. 選取「啟動檔案存回和取出」選項。

    其他選項便會出現。

    注意

    如果您沒有看見「存回/取出」選項，便必須設定遠端伺服器 (請參閱設定遠端資料夾)。
  5. 完成「存回/取出」區段。

    如需詳細資訊，請參閱設定存回/取出選項。

  6. 按一下「確定」。

相關主題

  • 關於「存回/取出」系統
  • 使用 WebDAV 存回及取出檔案
  • 存回和取出遠端資料夾的檔案
  • 還原取出動作


使用 WebDAV 存回及取出檔案

Dreamweaver 可以連線到使用 WebDAV (Web 架構的分散式撰寫和版本控制) 的伺服器，WebDAV 是一組 HTTP 通訊協定擴充功能，可讓使用者以共同作業的方式來編輯與管理遠端網站伺服器上的檔案。如需詳細資訊，請參閱 www.webdav.org。

若要在 Dreamweaver 中設定 WebDAV 存取：

  1. 如果您尚未做此設定，請定義一個 Dreamweaver 網站，以指定您用來存放專案檔案的本機資料夾。

    如需詳細資訊，請參閱設定本機資料夾。

  2. 選取「網站＞管理網站」，然後在清單中按兩下您的網站。

    「網站定義」對話方塊就會出現。

  3. 如果已選取「基本」索引標籤，請按一下「進階」索引標籤。
  4. 按一下「遠端資訊」類別，然後從「存取」彈出式選單中選取 WebDAV。

  5. 指定 Dreamweaver 應該以何種方式連線到 WebDAV 伺服器。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  6. 選取「啟動檔案存回和取出」選項，然後輸入下列資訊：
    • 在「取出者名稱」文字方塊中，輸入一個可代表您的名稱，以免和其他小組成員混淆。
    • 在「電子郵件地址」文字方塊中，輸入您的電子郵件地址。

    名稱和電子郵件地址都是用來識別 WebDAV 伺服器上的擁有權，並且會出現在「檔案」面板中，作連絡之用。

  7. 按一下「確定」。

    Dreamweaver 就會設定適合使用 WebDAV 存取的網站。

若要使用 WebDAV 存回及取出檔案：

  • 請使用存回和取出檔案中所述的標準存回及取出方法。

    當您在任何網站檔案上使用「存回」或「取出」命令時，Dreamweaver 會使用 WebDAV 來傳輸檔案。


存回和取出遠端資料夾的檔案

設定了「存回/取出」系統 (請參閱設定存回/取出系統) 後，您便可使用「檔案」面板或從「文件」視窗中，存回和取出遠端伺服器中的檔案。

若要使用「檔案」面板取出檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取要從遠端伺服器取出的檔案。

    注意

    您可以在「本機」或「遠端」檢視中選取檔案，而非「測試伺服器」檢視。

    紅色核取記號表示其他小組成員已經取出這個檔案，而鎖狀符號表示檔案是唯讀的 (Windows) 或鎖定的 (Macintosh)。

  2. 執行下列其中一項作業以取出檔案：
    • 按一下「檔案」面板工具列中的「取出」按鈕。
    • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後從快速選單選取「取出」。

    「相關檔案」對話方塊便會出現。

  3. 按一下「是」，將相關檔案與選取的檔案一起下載；或按一下「否」，不要下載相關檔案。

    注意

    取出新檔案時最好一併下載相關檔案，但是假如本機磁碟上已經有最新版本的相關檔案時，就沒有必要再加以下載了。

    綠色核取記號會出現在本機檔案的圖示旁邊，表示您已經取出這個檔案。

若要使用「檔案」面板存回檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取取出的檔案或新的檔案。

    注意

    您可以在「本機」或「遠端」檢視中選取檔案，但並非「測試伺服器」檢視。
  2. 執行下列其中一項作業以存回檔案：
    • 按一下「檔案」面板工具列中的「存回」按鈕。
    • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後從快速選單選取「存回」。

    「相關檔案」對話方塊便會出現。

  3. 按一下「是」，將相關檔案與選取的檔案一起上傳；或按一下「否」，不要上傳相關檔案。

    注意

    存回新檔案時最好一併上傳相關檔案，但是假如遠端伺服器上已經有最新版本的相關檔案時，就沒有必要再加以上傳了。

    鎖狀符號會出現在本機檔案的圖示旁邊，表示這個檔案目前是唯讀狀態。

若要從「文件」視窗存回或取出開啟的檔案：

  1. 確認要存回或取出的檔案在「文件」視窗中是作用中狀態。

    注意

    您一次只能存回一個開啟的檔案。
  2. 請執行下列其中一項作業：
    • 選取「網站＞存回」或「網站＞取出」。
    • 按一下「文件」視窗工具列中的「檔案管理」圖示，然後從彈出式選單選取「存回」或「取出」。

      注意

      如果目前的檔案不屬於「檔案」面板中目前的網站，Dreamweaver 會嘗試判斷目前的檔案屬於哪一個本機定義的網站。如果目前的檔案只屬於某一個本機網站，Dreamweaver 便會開啟該網站，然後執行存回或取出作業。

如果您取出目前作用中的檔案，這個檔案目前開啟的版本就會被新取出的版本所覆寫。如果您存回目前作用中的檔案，跟據您設定的偏好設定選項而定 (請參閱設定「檔案」面板的偏好設定)，這個檔案可能會在存回前先自動儲存。

相關主題

  • 關於「存回/取出」系統
  • 設定存回/取出系統
  • 還原取出動作


還原取出動作

如果您取出檔案，然後決定不要對其進行編輯 (或決定放棄您所做的變更)，則可以還原取出動作，檔案就會返回原始的狀態。

若要還原取出動作，請執行下列作業之一：

  • 在「文件」視窗中開啟檔案，再選取「網站＞還原取出」。
  • 在「檔案」面板中 (「視窗＞檔案」)，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「還原取出」。

    檔案的本機複本就會變成唯讀，而且您所做的任何變更都會消失。

相關主題

  • 關於「存回/取出」系統
  • 設定存回/取出系統
  • 存回和取出遠端資料夾的檔案


下載和上傳伺服器檔案

如果是在共同作業的環境中工作，可以使用「存回/取出」系統在本機和遠端網站之間傳送檔案 (請參閱存回和取出檔案)。不過，如果您是唯一在遠端伺服器上工作的人，可以使用「下載」和「上傳」命令傳送檔案，而不需存回或取出它們。

本節包含下列主題：

  • 從遠端伺服器下載檔案
  • 上傳檔案到遠端伺服器
  • 管理檔案傳輸


從遠端伺服器下載檔案

使用「下載」命令，從遠端網站將檔案複製到本機網站。可以使用「文件」視窗的「檔案」面板以下載檔案。

在進行傳輸時，Dreamweaver 會為檔案活動建立記錄檔，有關檢視或儲存此記錄檔的方式，請參閱管理檔案傳輸。

Dreamweaver 也會記錄所有 FTP 檔案的傳送活動。如果使用 FTP 傳送檔案時發生錯誤，網站 FTP 記錄可以協助您判斷問題出在哪裡。

若要使用「檔案」面板從遠端伺服器下載檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取要下載的檔案。

    通常是在「遠端」檢視中選取這些檔案，不過如果您願意，也可以在「本機」檢視中選取對應的檔案。如果「遠端」檢視是作用中，Dreamweaver 則會將選取的檔案複製到本機網站；如果「本機」檢視是作用中，Dreamweaver 則會將所選本機檔案的遠端版本複製到本機網站。

    注意

    如果只要下載遠端版本比本機版本新的檔案，請使用「同步化」命令 (請參閱同步化本機和遠端網站上的檔案)。
  2. 請執行下列其中一項作業以下載檔案：
    • 按一下「檔案」面板工具列中的「下載」按鈕。
    • 在「檔案」面板中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案，然後從快速選單選取「下載」。

    「相關檔案」對話方塊便會出現。

  3. 如果要下載相關檔案，請按一下「是」；要略過它們，請按一下「否」。

    注意

    如果您已經擁有相關檔案的本機複本，請按一下「否」。

    Dreamweaver 會下載選取的檔案，如下所示：

    • 如果您要使用「存回/取出」系統，下載檔案將會取得檔案的「唯讀」本機複本；遠端網站或測試伺服器上的檔案仍然可供其他小組成員取出 (請參閱存回和取出檔案)。
    • 如果您不使用「存回/取出」系統，下載檔案將會傳送同時具有「讀取和寫入」權限的複本。

    注意

    如果您是在共同作業的環境中工作 (也就是說，其他人也在同樣的檔案上工作)，您就不可以關閉「啟動檔案存回和取出」。如果其他人要對網站使用「存回/取出」系統，那麼您也應該使用這個系統。

如果在任何時間想要停止檔案傳送，請按一下狀態對話方塊中的「取消」按鈕。傳送不一定會立即停止。

若要使用「文件」視窗從遠端伺服器下載檔案：

  1. 請確定文件在「文件」視窗中為作用中。
  2. 請執行下列其中一項作業以下載檔案：
    • 選取「網站＞下載」。
    • 按一下「文件」視窗工具列中的「檔案管理」圖示，然後從彈出式選單選取「下載」。

      注意

      如果目前的檔案不屬於「檔案」面板中目前的網站，Dreamweaver 會嘗試判斷目前的檔案屬於哪一個本機定義的網站。如果目前的檔案只屬於某一個本機網站，Dreamweaver 便會開啟該網站，然後執行下載作業。

若要顯示 FTP 記錄：

  • 按一下「檔案」面板右上角的「選項」選單，然後選取「檢視＞網站 FTP 記錄」。

相關主題

  • 關於「存回/取出」系統
  • 關於背景檔案傳輸
  • 上傳檔案到遠端伺服器


上傳檔案到遠端伺服器

您可以從本機網站將檔案上傳到遠端網站，通常不會變更檔案的已取出狀態。

在下列兩種常見的情況下，您應該使用「上傳」命令而不要使用「存回」：

  • 您不是在共同作業的環境中工作，也沒有使用「存回/取出」系統。
  • 您要將檔案的目前版本上傳到伺服器，但是您將會持續編輯它。

    注意

    如果您上傳遠端網站先前沒有的檔案，而且使用了「存回/取出」系統，這個檔案會複製到遠端網站，然後再取出給您，讓您能夠繼續進行編輯。

您可以使用「檔案」面板或「文件」視窗來上傳檔案。在進行傳輸時，Dreamweaver 會為檔案活動建立記錄檔，有關檢視或儲存此記錄檔的方式，請參閱管理檔案傳輸。

Dreamweaver 也會記錄所有 FTP 檔案的傳送活動。如果使用 FTP 傳送檔案時發生錯誤，網站 FTP 記錄可以協助您判斷問題出在哪裡。

若要使用「檔案」面板上傳檔案到遠端或測試伺服器：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，選取要上傳的檔案。

    通常是在「本機」檢視中選取這些檔案，不過如果您願意，也可以在「遠端」檢視中選取對應的檔案。

    注意

    如果只要上傳本機版本比遠端版本新的檔案，請參閱同步化本機和遠端網站上的檔案。
  2. 請執行下列其中一項作業以上傳檔案：
    • 按一下「檔案」面板工具列中的「上傳」按鈕。
    • 在「檔案」面板中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案，然後從快速選單選取「上傳」。

    如果檔案還沒有儲存，便會出現對話方塊 (視您在「偏好設定」對話方塊的「網站」類別中的偏好設定而定)，讓您在上傳檔案到遠端伺服器之前先儲存檔案。

  3. 如果出現對話方塊，按一下「是」以儲存檔案，或者按一下「否」以上傳先前儲存的版本到遠端伺服器。

    注意

    如果您不儲存檔案，在上次儲存後所進行的任何變更都不會上傳至遠端伺服器。但是，這個檔案會保持開啟，讓您將檔案上傳到伺服器之後仍然能儲存變更 (如果您要的話)。

    「相關檔案」對話方塊便會出現。

  4. 如果要上傳相關檔案，請按一下「是」；要略過它們，請按一下「否」。

    注意

    如果遠端網站已經擁有相關檔案的複本，請按一下「否」。

若要停止檔案傳送，請按一下狀態對話方塊中的「取消」按鈕。傳送不一定會立即停止。

若要使用「文件」視窗將檔案上傳至遠端伺服器：

  1. 請確定文件在「文件」視窗中為作用中。
  2. 請執行下列其中一項作業以上傳檔案：
    • 選取「網站＞上傳」。
    • 按一下「文件」視窗工具列中的「檔案管理」圖示，然後從彈出式選單選取「上傳」。

      注意

      如果目前的檔案不屬於「檔案」面板中目前的網站，Dreamweaver 會嘗試判斷目前的檔案屬於哪一個本機定義的網站。如果目前檔案只屬於某一個本機網站，Dreamweaver 便會開啟該網站，再執行「上傳」作業。

若要顯示 FTP 記錄：

  • 按一下「檔案」面板右上角的「選項」選單，然後選取「檢視＞網站 FTP 記錄」。

相關主題

  • 關於「存回/取出」系統
  • 從遠端伺服器下載檔案
  • 關於背景檔案傳輸
  • 管理檔案傳輸


管理檔案傳輸

您可以檢視許多關於檔案傳輸作業的資訊，例如傳輸作業的狀態、已傳輸檔案的清單與傳輸結果 (傳輸成功、略過或失敗)，也可以儲存這類檔案活動的記錄。

注意

Dreamweaver 可以讓您在與某個伺服器進行檔案傳輸的時候，執行其他和伺服器無關的活動。如需詳細資訊，請參閱關於背景檔案傳輸。

若要取消檔案傳輸：

  • 按一下「取消」按鈕，或是關閉「背景檔案活動」對話方塊。

若要在檔案傳輸時隱藏「背景檔案活動」對話方塊：

  • 按一下「背景檔案活動」對話方塊中的「隱藏」按鈕。

若要檢視上次檔案傳輸的詳細資料：

  1. 按一下「檔案」面版底部的「記錄」按鈕，開啟「背景檔案活動」對話方塊。
  2. 按一下「詳細資料」的展開箭頭。

若要儲存上次檔案傳輸的記錄：

  1. 按一下「檔案」面版底部的「記錄」按鈕，開啟「背景檔案活動」對話方塊。
  2. 按一下「儲存記錄」按鈕，將資訊儲存為文字檔。

您可以使用 Dreamweaver 或任何文編輯器開啟此記錄檔，檢視檔案活動。

相關主題

  • 下載和上傳伺服器檔案


同步化本機和遠端網站上的檔案

當您在本機和遠端網站建立了檔案之後，可以在這兩個網站之間同步化這些檔案。

注意

如果遠端網站是 FTP 伺服器 (而不是網路伺服器)，那麼同步化檔案也會使用 FTP。

在同步化網站前，您可以確認要上傳、下載、刪除或忽略哪些檔案。完成同步化之後，Dreamweaver 也會確認哪些檔案已經更新了。

若要查看本機網站或遠端網站上哪些檔案比較新，但不要同步化，請執行下列其中一項作業：

  • 在「檔案」面板的右上角，按一下「選項」選單，然後選取「編輯＞選取較新的本地檔案」或「選取＞選取較新的遠端檔案」。

  • 在「檔案」面板中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「選取＞選取較新的本地檔案」或「選取＞選取較新的遠端檔案」。

若要同步化檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟之處) 選取網站。
  2. (選擇性) 選取特定的檔案或資料夾。

    如果您要同步化整個網站，請略過這個步驟。

  3. 按一下「檔案」面板右上角的「選項」選單，然後選取「網站＞同步化」。

    「同步化檔案」對話方塊便會出現。

  4. 完成對話方塊。

    如需詳細資訊，請參閱設定同步化檔案對話方塊選項。

  5. 按一下「預覽」按鈕。

    Dreamweaver 會顯示要同步化的檔案，並讓您在執行同步化之前，變更這些檔案的動作 (上傳、下載、刪除和忽略)。如果所有檔案都已經完成同步化，Dreamweaver 會讓您知道沒有必要執行同步化。

    如需詳細資訊，請參閱設定同步化檔案對話方塊選項。

相關主題

  • 存回和取出遠端資料夾的檔案
  • 從遠端伺服器下載檔案
  • 上傳檔案到遠端伺服器
  • 比較檔案差異


找出並刪除未使用的檔案

您可以找出那些不再為網站中其他檔案所使用的檔案，並將其刪除。

若要找出並刪除未使用的檔案：

  1. 選取「網站＞檢查整個網站的連結」。

    Dreamweaver 會檢查整個網站中的連結，並在「結果」面版中顯示無效的連結。

  2. 從「連結檢查程式」上的彈出式選單，選取「孤立檔案」。

    Dreamweaver 會顯示所有沒有其他頁面連結的檔案，也就是說，網站中沒有任何檔案，是連結到這些孤立檔案的。

  3. 選取要刪除的檔案，然後按 Delete 鍵 (Windows) 或 Command+Delete 鍵 (Macintosh)。

    小心

    雖然孤立檔案是沒有被網站中任何檔案連結的檔案，但這些列出的檔案中，有些可能會連結至其他檔案，因此在刪除檔案時，請小心謹慎。

相關主題

  • 檢查是否有無效、外部或孤立的連結
  • 遮罩網站中的資料夾和檔案


遮罩網站中的資料夾和檔案

網站遮罩可以讓您將網站中的某些資料夾和檔案類型排除於作業 (如下載或上傳) 之外。

本節包含下列主題：

  • 啟動和停用網站遮罩
  • 遮罩和取消遮罩網站資料夾
  • 遮罩和取消遮罩特定檔案類型
  • 取消遮罩所有資料夾和檔案

相關主題

  • 關於網站遮罩
  • 找出並刪除未使用的檔案


啟動和停用網站遮罩

網站遮罩預設為啟動。您可以永久或僅暫時停用遮罩，以便對所有檔案 (包括遮罩的檔案) 執行作業。當您停用網站遮罩時，所有被遮罩的檔案都會取消遮罩。當您再次啟動網站遮罩時，任何先前曾被遮罩的檔案又會再次被遮罩。

注意

您也可以使用「取消全部遮罩」選項來取消全部被遮罩的檔案，但是這樣並不會停用遮罩；而且，也沒有辦法重新遮罩先前曾被遮罩的所有資料夾和檔案，除非是再次針對每個資料夾和檔案類型設定遮罩。

若要啟動或停用網站遮罩：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取要選取的網站。
  2. 選取檔案或資料夾。
  3. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後執行下列其中一項作業：
    • 選取「啟動/停用遮罩」。
    • 選取「設定」，再從「進階網站定義」對話方塊左邊的目錄清單選取「遮罩」。選取或取消選取「啟動遮罩」，再按一下「確定」。

網站的遮罩就會被啟動或停用。

相關主題

  • 關於網站遮罩
  • 遮罩和取消遮罩網站資料夾
  • 遮罩和取消遮罩特定檔案類型
  • 取消遮罩所有資料夾和檔案


遮罩和取消遮罩網站資料夾

您可以遮罩特定的資料夾，但是不能遮罩所有資料夾或整個網站。遮罩特定資料夾時，您可以同時遮罩多個資料夾。

若要遮罩或取消遮罩網站中的特定資料夾：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取已啟用網站遮罩的網站。
  2. 選取您想要遮罩或取消遮罩的資料夾。
  3. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後從快速選單中選取「遮罩＞遮罩」或「遮罩＞取消遮罩」。

紅線通過資料夾的圖示就會出現或消失，表示這個資料夾已被遮罩或取消遮罩。

注意

您可以針對特定遮罩的資料夾執行作業，方法是在「檔案」面板中選取項目並且針對它執行作業。直接對檔案或資料夾執行作業會讓遮罩無效。

相關主題

  • 關於網站遮罩
  • 啟動和停用網站遮罩
  • 遮罩和取消遮罩特定檔案類型
  • 取消遮罩所有資料夾和檔案


遮罩和取消遮罩特定檔案類型

您可以指定要遮罩的特定檔案類型，讓 Dreamweaver 遮罩以指定模式結尾的所有檔案。例如，您可以遮罩以 .txt 副檔名結尾的所有檔案。輸入的檔案類型不一定是副檔名；也可以是在檔案名稱結尾的任何模式。

若要遮罩網站內的特定檔案類型：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取已啟用網站遮罩的網站。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「設定」。

    「網站定義」對話方塊便會顯示「遮罩」選項。

  3. 選取「遮罩有以下副檔名的檔案」核取方塊。
  4. 在文字方塊中輸入要遮罩的檔案類型。

    例如，您可以輸入 .jpg 來遮罩網站內名稱結尾為 .jpg 的所有檔案。

    注意

    多種檔案類型之間請用一個空格來分隔；不要使用逗號或分號。
  5. 按一下「確定」。

受影響的檔案會出現一條通過的紅線，表示它們已被遮罩。

提示

有些軟體會建立以特殊字尾 (例如 .bak) 結尾的備份檔案。您可以遮罩這類檔案。

注意

您可以針對特定遮罩的資料夾執行作業，方法是在「檔案」面板中選取項目並且針對它執行作業。直接對檔案或資料夾執行作業會讓遮罩無效。

若要取消遮罩網站內的特定檔案類型：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取已啟用網站遮罩的網站。
  2. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「遮罩設定」。

    「進階網站定義」對話方塊便會出現。

  3. 請執行下列其中一項作業：
    • 取消選取「遮罩有以下副檔名的檔案」核取方塊，以取消遮罩文字方塊中所列的所有檔案類型。
    • 從文字方塊中刪除特定的檔案類型，以取消遮罩這些檔案類型。
  4. 按一下「確定」。

    紅線就會從受影響的檔案消失，表示它們已經取消遮罩。

相關主題

  • 關於網站遮罩
  • 啟動和停用網站遮罩
  • 遮罩和取消遮罩網站資料夾
  • 取消遮罩所有資料夾和檔案


取消遮罩所有資料夾和檔案

您可同時取消遮罩網站中的所有資料夾和檔案。這個動作不能夠還原；沒有辦法可以重新遮罩先前曾被遮罩的所有項目。您必須個別地重新遮罩這些項目。

提示

如果您想要暫時取消遮罩所有資料夾和檔案，並於稍後再重新遮罩這些項目，請停用網站遮罩 (請參閱啟動和停用網站遮罩)。

若要取消遮罩網站內的所有資料夾和檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 中，從彈出式選單 (出現目前網站、伺服器或磁碟的地方) 選取已啟用網站遮罩的網站。
  2. 選取網站中的任何檔案或資料夾。
  3. 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「取消全部遮罩」。

    注意

    這個步驟也會取消選取「網站＞遮罩＞設定」中的「遮罩有以下副檔名的檔案」核取方塊。

紅線通過資料夾和檔案的圖示就會消失，表示網站中所有檔案和資料夾都已取消遮罩。

相關主題

  • 關於網站遮罩
  • 啟動和停用網站遮罩
  • 遮罩和取消遮罩網站資料夾
  • 遮罩和取消遮罩特定檔案類型


在設計備註中儲存檔案資訊

「設計備註」是與檔案相關聯的備註，但是會儲存在另外的檔案中。使用「設計備註」可以記錄與文件相關聯的額外檔案資訊，如，影像原始檔案名稱和對檔案狀態的註解。

本節包含下列主題：

  • 啟動和停用網站的設計備註
  • 將設計備註與檔案建立關聯
  • 使用設計備註

相關主題

  • 關於設計備註


啟動和停用網站的設計備註

您可以在「網站定義」對話方塊的「設計備註」類別中，啟動或停用網站的「設計備註」。啟動「設計備註」時，如果您願意，可以選擇只在本機使用它們。

若要啟動或停用網站的「設計備註」或只在本機使用「設計備註」：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 從左邊的「分類」清單中選取「設計備註」。

    「網站定義」對話方塊便會顯示「設計備註」選項。

  4. 完成對話方塊。

    如需詳細資訊，請參閱設定設計備註類別選項。

  5. 按一下「確定」。

相關主題

  • 關於設計備註
  • 將設計備註與檔案建立關聯
  • 使用設計備註


將設計備註與檔案建立關聯

您可以針對網站中的每一文件或樣版建立「設計備註」檔案。您也可以針對 Applet、ActiveX 控制項、影像、Flash 內容和 Shockwave 物件，以及文件中的影像欄位建立「設計備註」。

注意

如果您新增「設計備註」到樣版檔案，使用這個樣版建立的文件並不會繼承「設計備註」。

若要新增「設計備註」到文件：

  1. 請執行下列其中一項作業：
    • 在「文件」視窗中開啟檔案，再選取「檔案＞設計備註」。
    • 在「檔案」面板中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案，然後選取「設計備註」。

      注意

      如果檔案是在遠端網站上，您必須先取出或下載檔案，然後在本機資料夾中選取它 (請參閱存回和取出遠端資料夾的檔案或下載和上傳伺服器檔案)。

    「設計備註」對話方塊便會出現。

  2. 完成對話方塊。

    如需詳細資訊，請參閱設定設計備註對話方塊選項。

  3. 按一下「確定」儲存備註。

    Dreamweaver 會在目前檔案的同樣位置將備註儲存在名為 _notes 的資料夾。檔案名稱就是文件的檔案名稱，再加上 .mno 副檔名。

    例如，假設檔案名稱為 index.html，那麼關聯的「設計備註」檔案就會命名為 index.html.mno。

相關主題

  • 關於設計備註
  • 啟動和停用網站的設計備註
  • 使用設計備註


使用設計備註

將「設計備註」與檔案建立關聯之後 (請參閱將設計備註與檔案建立關聯)，您可以開啟「設計備註」，變更其狀態或加以刪除。

若要開啟與檔案關聯的「設計備註」，請執行下列其中一項作業：

  • 在「文件」視窗中開啟檔案，再選取「檔案＞設計備註」。
  • 在「檔案」面板中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案，然後選取「設計備註」。
  • 在「檔案」面板的「備註」欄中，按兩下黃色的「設計備註」圖示。

若要指定自訂的「設計備註」狀態：

  1. 開啟檔案或物件的「設計備註」(請參閱前面的程序)。
  2. 按一下「全部資訊」索引標籤。
  3. 按一下「加號」(+) 按鈕。
  4. 在「名稱」欄位中，輸入單字 status。
  5. 在「值」欄位中，輸入狀態。

    如果已經有狀態值，就會由新的值取代。

  6. 按一下「基本資訊」索引標籤，就會看到新狀態值出現在「狀態」彈出式選單中。

    注意

    同一時間裡，狀態選單中只能有一個自訂值。如果您再次按照這個程序進行，Dreamweaver 便會用輸入的新狀態值取代第一次輸入的狀態值。

若要從網站刪除未關聯的「設計備註」：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站，然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 從左邊的「分類」清單中選取「設計備註」。
  4. 按一下「清理」按鈕。

    Dreamweaver 會提示您確認刪除已不再與網站中檔案關聯的任何「設計備註」。

    如果您使用 Dreamweaver 刪除附有關聯「設計備註」檔案的檔案，Dreamweaver 會同時刪除「設計備註」檔案；所以通常是在 Dreamweaver 之外刪除或重新命名檔案時，才會造成孤立的「設計備註」檔案。

    注意

    如果您在按一下「清理」之前取消選取「維護設計備註」選項，Dreamweaver 將會刪除網站中所有「設計備註」檔案。

相關主題

  • 關於設計備註
  • 啟動和停用網站的設計備註


測試網站

Dreamweaver 提供數種協助您測試網站的功能，包含瀏覽器的預覽頁面和檢查功能。您也可以執行多種報表，如無效的連結報表。

本節包含下列主題：

  • 網站測試方針
  • 使用報表測試網站


網站測試方針

將網站上傳到伺服器並宣告可供檢視之前，最好先在本機上測試一下 (事實上，您最好經常針對網站的整個建構加以測試並排解疑難 - 這樣您可以即早發現問題並避免重複的問題一再出現)。

您應該確定在目標瀏覽器中，網頁的外觀和功能跟您預期的一樣，沒有無效的連結，而且下載網頁不需要花太長的時間。您也可以執行網站報表，對整個網站進行測試及疑難排解。

下列方針將有助於讓瀏覽者造訪您的網站時留下美好的經驗：

  • 確定您的網頁在目標瀏覽器中能如預期般的運作，以及在其他瀏覽器中也能運作或沒有出現重大錯誤。

    您的網頁應該要能在不支援樣式、圖層、外掛程式或 JavaScript 的瀏覽器中，也能清楚易讀且運作正常 (請參閱檢查瀏覽器相容性)。如果有網頁在較舊版的瀏覽器中發生錯誤而失敗，請考慮使用「檢查瀏覽器」行為，將瀏覽者自動重新導向到其他網頁 (請參閱檢查瀏覽器)。

  • 盡可能在很多不同的瀏覽器及各種不同平台上預覽網頁。

    這麼做讓您有機會看到版面、顏色、字體大小的差異，以及在目標瀏覽器檢查中無法預測的預設瀏覽器視窗大小 (請參閱在瀏覽器中預覽和測試網頁)。

  • 檢查網站中是否有無效的連結，然後加以修正。

    其他的網站也可能正在重新設計或重新組織，而您所連結的網頁可能已經移動或刪除了。您可以執行連結檢查報表以測試連結 (請參閱檢查是否有無效、外部或孤立的連結和修正無效的連結)。

  • 監視網頁的檔案大小，以及下載所需花費的時間 (請參閱設定下載時間和大小偏好設定)。

    請記住，有些瀏覽器中，如果網頁由大型表格所組成，在完成整個表格的載入之前，瀏覽者將看不到任何東西。考慮將大型表格分成幾份，如果不能這樣做，請考慮在網頁頂端的表格之外置入少量的內容 - 如歡迎訊息或廣告橫幅 - 如此一來使用者就能在下載表格時看到這份資料。

  • 執行網站報表對整個網站測試並進行疑難排解。

    您可以檢查整個網站的問題，例如無標題的文件、空白標籤及多餘的巢狀標籤 (請參閱測試網站)。

  • 驗證您的程式碼以找出標籤或語法錯誤 (請參閱驗證標籤)。
  • 一旦發佈了大量的網站資料之後，就要持續更新及維護。

    您可以用數種方式完成發佈網站 (也就是讓網站上線)，而且這個動作是一個持續進行的處理過程。這個處理過程很重要的部份是，使用 Dreamweaver 包含的工具或是透過外部的版本控制應用程式，定義及實作版本控制系統。

  • 請使用 Macromedia 網站上的 Dreamweaver 討論區，網址為：www.macromedia.com/go/dreamweaver_newsgroup。

    如需取得不同瀏覽器、平台等等的相關資訊，討論區是個絕佳的資源。您也可以討論技術問題並和其他 Dreamweaver 使用者分享有用的建議。


使用報表測試網站

您可以針對目前文件、選取的檔案或整個網站，執行工作流程或 HTML 屬性 (包括輔助功能) 的網站報表。

工作流程報表可以改善網路小組成員間的共同作業。您可以執行工作流程報表，以顯示檔案的取出者、哪些檔案具有相關聯的「設計備註」以及哪些檔案最近經過修改。您還可以指定 name/value 參數，使「設計備註」報表更完善。

注意

您必須先定義遠端網站的連線，才能執行工作流程報表。若要定義遠端網站，請參閱設定遠端資料夾。

HTML 報表可以讓您編譯和產生數種 HTML 屬性的報表。您可以檢查可結合巢狀字體標籤、輔助功能、遺失的替代文字 (ALT)、多餘的巢狀標籤、可移除的空標籤和無標題的文件。

執行報表之後，您可以將其儲存為 XML 檔案，然後匯入樣版實體、資料庫或試算表中，並加以列印，或將其顯示在網站上。

注意

您也可以透過 Macromedia Dreamweaver Exchange 網站，將不同的報表類型加入 Dreamweaver 中 (請參閱新增擴充功能至 Dreamweaver)。

若要使用「報表」命令檢查網站中的連結，請參閱檢查是否有無效、外部或孤立的連結。

若要執行報表測試網站：

  1. 選取「網站＞報表」。

    提示

    如果您只要執行網站的輔助功能報表，可以選取「檔案＞檢查頁面＞檢查輔助功能」，報表便會出現在「結果」面板群組的「網站報表」面板中。

    「報表」對話方塊便會出現。

  2. 選取要用的報表類別以及要執行的報表類型。

    如需詳細資訊，請參閱設定報表對話方塊選項。

  3. 按一下「執行」建立報表。

    依據您執行的報表類型，可能會提示您儲存檔案、定義網站，或選取資料夾 (如果您還沒有做這些動作的話)。

    結果清單會出現在「網站報表」面板中 (位於「結果」面板群組)。

若要使用和儲存報表：

  1. 執行報表 (請參閱前面的程序)。
  2. 在「網站報表」面板中，請執行下列其中一項作業以檢視報表：
    • 按一下要用來排序結果的欄標題。

      您可以依據檔案名稱、行號或說明來排序。您也可以執行數種不同的報表，並且讓不同的報表保持開啟。

    • 選取報表中任何一行，然後按一下「網站報表」面板左邊的「更多資訊」按鈕，以獲得問題的描述。

      資訊便會顯示於「參考」面板中。

    • 按兩下報表中的任何一行，即可在「文件」視窗中檢視對應的程式碼。

      注意

      如果您是在「設計」檢視中，Dreamweaver 會將檢視變更為分割檢視，以顯示程式碼中報表的問題。
  3. 按一下「儲存報表」以儲存報表。

    儲存報表時，您可以將它匯入現有的樣版檔案。然後您可以將檔案匯入到資料庫或試算表並列印它，或使用檔案在網站上顯示報表。

    提示

    在執行 HTML 報表之後，請使用「清理 HTML」命令，修正報表列出的任何 HTML 錯誤 (請參閱清理程式碼)。

相關主題

  • Dreamweaver 報表


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定設定伺服器對話方塊選項
  • 設定 FTP 的設定伺服器對話方塊選項
  • 設定 RDS 的設定伺服器對話方塊選項
  • 使用檔案面板
  • 設定網站偏好設定選項
  • 設定檔案檢視欄類別選項
  • 設定選取最近修改的檔案對話方塊選項
  • 設定網站地圖版面類別選項
  • 設定存回/取出選項
  • 設定同步化檔案對話方塊選項
  • 設定設計備註類別選項
  • 設定設計備註對話方塊選項
  • 設定遮罩類別選項
  • 設定報表對話方塊選項
  • 設定最近修改的檔案對話方塊選項
  • 設定匯出網站對話方塊選項


設定設定伺服器對話方塊選項

這個對話方塊是用來連線到遠端伺服器以編輯檔案。您可以使用這個對話方塊執行下列作業：

  • 設定 FTP 的設定伺服器對話方塊選項
  • 設定 RDS 的設定伺服器對話方塊選項

相關主題

  • 將 Dreamweaver 設定為沒有定義網站而運作


設定 FTP 的設定伺服器對話方塊選項

這個對話方塊是用來使用 FTP 存取以連線到遠端伺服器。

若要設定遠端伺服器的 FTP 存取：

  1. 在「描述」文字欄位中，輸入要給伺服器連線的名稱。

    這個名稱會顯示於「檔案」面板頂端的彈出式選單中。

  2. 從「存取」類型彈出式選單中選取 FTP。
  3. 輸入您要為網站上傳檔案的 FTP 主機名稱。

    您的 FTP 主機是電腦系統的完整 Internet 名稱，如 ftp.mindspring.com。請輸入不含其他文字的完整主機名稱。尤其不要在主機名稱前面加上通訊協定名稱。

    注意

    如果您不知道 FTP 主機位置，請連絡 ISP。
  4. 輸入遠端網站上您用來儲存文件 (大家都看得到) 的主機目錄。
  5. 輸入您用來連結 FTP 伺服器的登入名稱和密碼，再按一下「測試」，測試登入名稱和密碼。
  6. 如果要 Dreamweaver 記住您的密碼，請選取「儲存」核取方塊。

    如果不選取這個核取方塊，Dreamweaver 會在每次連線到遠端伺服器時，提示您輸入密碼。

  7. 如果您的防火牆設定需要使用被動 FTP，請選取「使用被動 FTP」核取方塊。

    被動的 FTP 讓您的本機軟體設定 FTP 連線，而不是要求遠端伺服器設定 FTP 連線。如果您不確定所使用的是否為被動 FTP，請洽詢系統管理員。

  8. 如果是連結到防火牆後的遠端伺服器，選取「使用防火牆」核取方塊，再按一下「防火牆設定」編輯防火牆主機或連接埠。

    如需詳細資訊，請參閱設定「檔案」面板的偏好設定。

  9. 請選取「使用安全 FTP (SFTP)」選項，以進行安全的 FTP 驗證。

    SFTP 使用加密和公鑰，保護與測試伺服器的連線。

    注意

    您的伺服器必須是執行 SFTP 的伺服器。
  10. 按一下「確定」。

相關主題

  • 將 Dreamweaver 設定為沒有定義網站而運作


設定 RDS 的設定伺服器對話方塊選項

這個對話方塊是用來使用 RDS 存取以連線到遠端伺服器。

若要設定遠端伺服器的 RDS 存取：

  1. 在「描述」文字欄位中，輸入要給伺服器的名稱。

    這個名稱會顯示於「檔案」面板頂端的彈出式選單中。

  2. 從「存取」類型彈出式選單中選取 RDS。
  3. 輸入使用者在自己的瀏覽器中鍵入以開啟網路應用程式的 URL，但是不要包含任何檔案名稱。

    假設您應用程式的 URL 是 www.macromedia.com/mycoolapp/start.jsp。在這個情況下，您會輸入下列 URL 前置詞：www.macromedia.com/mycoolapp/。

  4. 按一下「設定」按鈕，以完成存取資訊。

    「設定 RDS 伺服器」對話方塊便會出現。

  5. 完成這個對話方塊，然後按一下「確定」。

    如需詳細資訊，請參閱設定 RDS 存取。

  6. 按一下「確定」。

相關主題

  • 將 Dreamweaver 設定為沒有定義網站而運作


使用檔案面板

「檔案」面板讓您可以檢視檔案和資料夾 (不論是它們是否與 Dreamweaver 網站相關聯)，並提供標準檔案維護的作業，如開啟和移動檔案。

注意

在先前版本的 Dreamweaver 中，「檔案」面板稱為「網站面板」。

您可視需要移動「檔案」面板 (請參閱停駐及解除鎖定面板和面板群組)，並設定「檔案」面板的偏好設定 (請參閱設定「檔案」面板的偏好設定)。

使用本面板執行以下工作：

  • 存取網站、伺服器和本機磁碟
  • 檢視檔案和資料夾
  • 管理檔案面板中的檔案和資料夾
  • 使用網站的視覺地圖

對於 Dreamweaver 網站，使用以下選項顯示或傳送檔案：

注意

「網站檔案」檢視、「測試伺服器」檢視、「網站地圖」檢視和「同步化」按鈕，只出現在展開的「檔案」面板中。

網站檔案檢視會在「檔案」面板的各個窗格中顯示遠端和本機網站的檔案結構(偏好設定將會決定哪個網站要出現在左邊窗格，哪個網站要出現在右邊窗格，請參閱設定「檔案」面板的偏好設定)。「網站檔案」檢視是「檔案」面板的預設檢視。

測試伺服器檢視會顯示測試伺服器和本機網站的目錄結構。

網站地圖檢視會依據文件彼此連結的方式顯示網站的圖像式地圖。按住這個按鈕可以從彈出式選單中選取「只有地圖」或「地圖和檔案」。

現有彈出式選單列出您的 Dreamweaver 網站和已連結的伺服器，並讓您存取本機磁碟和桌面。

連線/離線(FTP、RDS、WebDAV 通訊協定和 Microsoft Visual SourceSafe) 可連線到遠端網站或離線。根據預設，如果閒置超過 30 分鐘 (僅限 FTP)，Dreamweaver 就會從遠端網站離線。若要變更時間限制，請選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後從左邊的分類清單中選取「網站」。

重新整理會重新整理本機和遠端目錄清單。如果您在「網站定義」對話方塊中取消選取了「自動重新整理本機檔案清單」或「自動重新整理遠端檔案清單」，請使用這個按鈕以手動方式重新整理目錄清單 (請參閱設定遠端資料夾)。

下載檔案會將選取的檔案從遠端網站複製到本機網站 (如果有檔案的現有本機複本的話，會將其覆寫)。如果開啟了「啟動檔案存回和取出」，本機複本將是唯讀狀態；遠端網站上的檔案會繼續讓其他小組成員取出。如果關閉了「啟動檔案存回和取出」，下載檔案將會傳送同時具有讀取和寫入權限的檔案複本。

Dreamweaver 所複製的檔案就是您在「檔案」面板的作用中窗格裡選取的檔案。如果「遠端」窗格是作用中，選取的遠端或測試伺服器檔案便會複製到本機網站；如果「本機」窗格是作用中，Dreamweaver 便會將所選取的本機檔案的遠端或測試伺服器版本複製到本機網站。如需詳細資訊，請參閱從遠端伺服器下載檔案。

上傳檔案會將選取的檔案從本機網站複製到遠端網站。

Dreamweaver 所複製的檔案就是您在「檔案」面板的作用中窗格裡選取的檔案。如果「本機」窗格是作用中，選取的本機檔案便會複製到遠端網站或測試伺服器；如果「遠端」窗格是作用中，Dreamweaver 就會將所選取的遠端伺服器檔案的本機版本複製到遠端網站。如需詳細資訊，請參閱上傳檔案到遠端伺服器。

如果要上傳遠端網站上還沒有的檔案，而且已經開啟了「啟動檔案取出和存回」，Dreamweaver 就會以「已取出」狀態將檔案新增到遠端網站上。如果您希望新增沒有「已取出」狀態的檔案，請按一下「存回檔案」。

取出檔案會將檔案複本從遠端伺服器傳送到本機網站 (如果有的話，會覆寫檔案的現有本機複本)，並且在伺服器上將檔案標記為已取出。如果目前網站關閉了「網站定義」對話方塊中的「啟動檔案存回和取出」，這個選項就無法使用。如需詳細資訊，請參閱存回和取出遠端資料夾的檔案。

存回檔案會將本機檔案的複本傳送到遠端伺服器，並且將檔案標示為可供其他人編輯。這個本機檔案就會變成唯讀。如果目前網站關閉了「網站定義」對話方塊中的「啟動檔案存回和取出」選項，這個選項就無法使用。如需詳細資訊，請參閱存回和取出遠端資料夾的檔案。

同步化可以將本機和遠端的資料夾同步化。如需詳細資訊，請參閱同步化本機和遠端網站上的檔案。

擴展/收合按鈕會展開或收合「檔案」面板，以顯示一個或兩個窗格。


設定網站偏好設定選項

這個對話方塊是用來設定「檔案」面板的網站偏好設定。

若要設定「檔案」面板的網站偏好設定：

  1. 請依需要變更下列選項：

    「永久顯示」是指定哪個網站 (遠端或本機) 為永遠顯示，以及本機和遠端檔案要出現在哪個「檔案」面板窗格 (左邊或右邊)。

    根據預設，本機網站永遠出現在右邊。沒有被選擇的窗格 (預設為左邊的窗格) 是可以變更的窗格：這個窗格可以顯示網站地圖，或顯示其他網站 (預設為遠端網站) 中的檔案。

    「相關檔案」會顯示傳送相關檔案 (例如影像、外部樣式表及 HTML 檔案中所參考的其他檔案) 的提示，瀏覽器會於載入 HTML 檔案時載入這些檔案。根據預設，「下載/登出時提示」和「上傳/存回時提示」兩者都已選取。

    提示

    若要強制「包含相關檔案」提示在沒有選取這些選項時也要出現，請按住 Alt (Windows) 或 Option (Macintosh) 同時選擇「下載」、「上傳」、「存回」或「取出」命令。

    「FTP 連線」是決定在閒置超過指定時間後，是否要中斷遠端網站的連線。

    「FTP 等待超過時限」是指定 Dreamweaver 可以嘗試連線遠端伺服器的秒數。

    如果過了指定的時間仍然沒有回應，Dreamweaver 就會顯示警告對話方塊，通知您這個狀況。

    「FTP 傳送選項」會決定，當對話方塊於檔案傳送時出現並且沒有使用者回應時，在指定的若干秒後，Dreamweaver 是否選取預設選項。

    「防火牆主機」指定了 Proxy 伺服器的位址；如果您是在防火牆後方，必須透過它來連線外部伺服器。

    如果您不是在防火牆後方，請保持空白。如果您是在防火牆後方，請在「網站定義」對話方塊中選取「使用防火牆」選項 (請參閱設定遠端資料夾)。

    「防火牆連接埠」是指定防火牆中的連接埠，您要透過它連線到遠端伺服器。如果您要透過 21 (FTP 的預設值) 以外的連接埠連結，請在這裡輸入編號。

    上傳選項：「上傳前先儲存檔案」表示未儲存的檔案在上傳到遠端網站之前會自動儲存。

    管理網站會開啟可以編輯現有網站或建立新網站的「管理網站」對話方塊。

  2. 按一下「確定」。

相關主題

  • 設定「檔案」面板的偏好設定


設定檔案檢視欄類別選項

這個對話方塊是用來對「檔案」面板中的檔案檢視欄進行變更。您可以變更欄的順序、新增欄或刪除欄。

若要變更欄的順序：

  • 選取欄的名稱，然後按一下向上鍵或向下鍵按鈕，以變更所選取欄的位置。

    注意

    您可以變更任何欄的順序，只有「名稱」欄例外，它永遠是第一欄。

若要新增欄：

  1. 按一下「加號」(+) 按鈕。
  2. 在「欄名」文字方塊中，輸入欄的名稱。
  3. 從「與設計備註相關」彈出式選單中選取一個值，或鍵入您自己的值。

    您必須將新的欄與「設計備註」相關聯，這樣才能將資料顯示在「檔案」面板中。

  4. 選取對齊選項，決定 Dreamweaver 要如何對齊欄內的文字。
  5. 選取或取消選取「顯示」選項，以顯示或隱藏這個欄。
  6. 選取「給此網站的所有使用者共享」選項，與連結到遠端網站的所有使用者共用這個欄。

若要刪除已新增的欄：

  • 選取要刪除的欄，然後按一下減號 (-) 按鈕。

    注意

    便會不經確認而立刻刪除此欄，所以在按下減號 (-) 按鈕之前，請務必確定您真的要刪除此欄。

相關主題

  • 自訂顯示於展開檔案面板中的檔案和資料夾詳細資料


設定選取最近修改的檔案對話方塊選項

這個對話方塊是用來設定網站中最近修改過檔案的選取選項，這樣您就可以將這些檔案上傳至伺服器。

若要設定最近修改過檔案的選取選項：

  1. 請執行下列其中一項作業，以指定報表的搜尋日期：
    • 若要報告在過去幾天內修改過的所有檔案，選取「幾天內建立或修改的檔案」選項按鈕，然後在文字方塊中輸入數字。
    • 若要報告在特定時間內修改過的所有檔案，選取「這段期間建立或修改的檔案」選項按鈕，然後指定日期範圍。
  2. (選擇性) 在「修改者」文字方塊中輸入使用者名稱，以限制要搜尋的檔案是由特定使用者於指定日期內所修改的。

    注意

    這個選項僅適用於 Contribute 網站的報表。
  3. 按一下「確定」。

Dreamweaver 便會在「檔案」面板中反白標示檔案。

相關主題

  • 在 Dreamweaver 網站中尋找檔案


設定網站地圖版面類別選項

這個對話方塊是用來自訂網站地圖的外觀。

若要自訂網站地圖的外觀：

  1. 在「首頁」文字方塊中，輸入網站首頁的檔案路徑，或按一下資料夾圖示，瀏覽到這個檔案。

    首頁必須在本機網站上。如果尚未指定首頁，或者 Dreamweaver 在根目錄找不到稱為 index.html 或 index.htm 的檔案，當您開啟網站地圖時，Dreamweaver 便會提示您選取首頁。

  2. 從「欄」選項中選取：
    • 在「欄數」文字方塊中輸入數字，設定網站地圖視窗中每一列所要顯示的頁數。
    • 在「欄寬度」文字方塊中輸入數字，以像素設定網站地圖欄的寬度。
  3. 在「圖示標籤」下，選取網站地圖中與文件圖示一起顯示的名稱，是否要以檔案名稱或頁面標題代表。
  4. 在「選項」下，選取要在網站地圖中顯示哪些檔案：
    • 選取「顯示標記為隱藏的檔案」，在網站地圖中顯示已標記為隱藏的 HTML 檔案。

      如果頁面是隱藏的，它的名稱和連結會以斜體顯示。如需關於隱藏檔案的相關資訊，請參閱顯示和隱藏網站地圖檔案。

    • 選取「顯示相關檔案」以顯示網站階層中的所有相關檔案。

      相關檔案是瀏覽器於載入主要網頁時載入的影像或其他非 HTML 內容。

相關主題

  • 修改網站地圖版面


設定存回/取出選項

「存回/取出」類別是用來設定檔案的「存回/取出」選項。

若要設定檔案的「存回/取出」選項：

  1. 如果您是在小組環境中工作 (或獨自從幾部不同的電腦工作)，請選取「啟動檔案存回和取出」選項。

    如果要讓其他人知道您取出了某個檔案進行編輯，或提醒自己可能在別的電腦上存有較新版本的檔案，這個選項就很有用處。

    注意

    如果遠端存取選項是「本機/區域網路」、「Microsoft Visual SourceSafe」或「WebDAV」，這將是您唯一的「存回/取出」選項。這一節中的其他選項僅適用於 FTP 存取。
  2. 如果您希望從「檔案」面板按兩下開啟檔案時即可自動取出檔案，請選取「開啟時取出檔案」選項。

    注意

    使用「檔案＞開啟舊檔」開啟檔案時，即使選取了這個選項也不會取出檔案。
  3. 輸入取出者名稱。

    取出者名稱會與取出的檔案一起出現在「檔案」面板中，這樣可以讓小組成員在需要取出的檔案時，可以找到適當的人溝通。

    如果您獨自從幾部不同的電腦工作，請對每部電腦使用不同的取出者名稱 (例如，AmyR-HomeMac 和 AmyR-OfficePC)，以便在忘記存回檔案時，可以知道最新版本的檔案在哪裡。

  4. 輸入電子郵件地址。

    當您取出檔案時，如果有輸入電子郵件位址，您的名稱便會以連結形式 (藍色並加底線) 顯示在「檔案」面板中的檔案名稱旁邊。如果小組成員按一下這個連結，他們的預設電子郵件程式就會以這個使用者電子郵件地址，開啟主旨為這個檔案和網站名稱的新郵件。

相關主題

  • 設定存回/取出系統


設定同步化檔案對話方塊選項

這個對話方塊是用來設定同步化檔案的選項。

若要設定同步化檔案的選項：

  1. 在「同步化」彈出式選單中，選取下列其中一個選項：
    • 若要同步化整個網站，請選取「整個網站名稱網站」。
    • 如果只要同步化選取的檔案，請選取「只同步已選取的本機檔案」(或者如果「檔案」面板的「遠端」檢視是您最後選取檔案的地方，則請選取「只同步已選取的遠端檔案」)。
  2. 選取您要複製檔案到哪裡：

    「上傳最新檔案到遠端」會上傳遠端伺服器上所沒有的或者是上次上傳後已經變更的所有本機檔案。

    「從遠端下載最新檔案」會下載本機所沒有的或者是上次下載後已經變更的所有遠端檔案。

    「上傳與下載最新檔案」會將所有檔案的最新版本同時置於本機和遠端網站。

  3. 選取是否要刪除在原始網站上沒有對應檔案的目標網站檔案 (如果從「方向」彈出式選單中選取「下載」和「上傳」就沒有這個選項)。

    如果您選取「上傳最新檔案到遠端」並且選取「刪除」選項，Dreamweaver 便會刪除遠端網站中沒有對應到本機檔案的任何檔案。如果您選取「從遠端下載最新檔案」，Dreamweaver 便會刪除本機網站中沒有對應到遠端檔案的任何檔案。

  4. 按一下「預覽」。

    在進行同步化之前，您必須先預覽 Dreamweaver 會為此工作執行哪些動作。

    如果所選取檔案的最新版本都已同時存在本機和遠端網站中，沒有任何東西需要刪除，就會出現一項警告，告訴您不需要同步化。否則，「同步化」對話方塊便會出現。如需詳細資訊，請參閱設定同步化對話方塊選項。

相關主題

  • 同步化本機和遠端網站上的檔案


設定同步化對話方塊選項

這個對話方塊是用來預覽 Dreamweaver 會執行哪些動作，以同步化檔案，並讓您視需要變更一或多項其中的動作。

若要變更同步化檔案時所執行的動作：

  1. 針對每個檔案，確認所要執行的動作。
  2. 若要變更對某特定檔案所要採取的動作，請選取該檔案，然後按一下預覽視窗底部的其中一個動作圖示。

    如果動作圖示呈灰色，就表示無法執行該動作。

    您必須安裝了檔案比較工具，並於 Dreamweaver 中指定使用該工具，才能使用「比較」動作。如需詳細資訊，請參閱比較檔案差異。

    「將選取的檔案標記為已同步化」按鈕可讓您告訴 Dreamweaver，您所選取的檔案已經完成同步化。

  3. 按一下「確定」，開始同步化檔案。

您可以將同步化的詳細資料儲存在本機檔案以便檢視。如需詳細資訊，請參閱管理檔案傳輸。

相關主題

  • 同步化本機和遠端網站上的檔案


設定設計備註類別選項

這個對話方塊是用來啟動或停用網站的「設計備註」。

若要啟動「設計備註」：

  1. 選取「維護設計備註」。
  2. 選取「上傳設計備註以供共享使用」，與其他文件一起上傳和網站關聯的「設計備註」。

    如果您選取這個選項，就可與小組的其他成員共用「設計備註」。上傳或下載檔案時，Dreamweaver 會自動上傳或下載關聯的「設計備註」檔案。

    如果您沒有選取這個選項，Dreamweaver 會在本機維護「設計備註」，但是不會隨檔案將它們上傳。如果您獨自在網站工作，可以取消選取這個選項來增進檔案傳送的效能。

  3. 按一下「確定」。

若要停用「設計備註」：

  1. 取消選取「維護設計備註」。
  2. 如果您希望 Dreamweaver 從網站刪除所有本機「設計備註」檔案，請按一下「清理」，然後按一下「是」。
  3. 按一下「確定」。

    就會出現對話方塊，詢問您是否要刪除現有的「設計備註」檔案。

  4. 按一下「是」刪除「設計備註」檔案，或按一下「否」讓它們留在原處。
  5. 按一下「確定」，關閉「網站定義」對話方塊。

如果只要在本機使用「設計備註」：

  • 取消選取「上傳供共享使用」。

當您存回/上傳檔案時，「設計備註」就不會傳送到遠端網站。您仍然可以在本機新增和修改網站的「設計備註」。

相關主題

  • 在設計備註中儲存檔案資訊
  • 將設計備註與檔案建立關聯


設定設計備註對話方塊選項

這個對話方塊是用來新增「設計備註」到檔案。

若要新增「設計備註」到檔案：

  1. 在「基本資訊」索引標籤中，從「狀態」彈出式選單選取文件的狀態。
  2. 按一下日期圖示 (在「備註」文字方塊正上方) 在您的備註中插入目前的本機日期。
  3. 在「備註」文字方塊輸入註解。
  4. 選取「檔案開啟時顯示」，讓「設計備註」檔案在每次檔案開啟時都會出現。
  5. 在「全部資訊」索引標籤中，按一下加號 (+) 按鈕，新增索引鍵/值配對；選取某個配對並且按一下減號 () 按鈕將其移除。

    例如，您可以將索引鍵命名為 Author (在「名稱」文字方塊中) 並且定義它的值為 Heidi (在「值」文字方塊中)。

  6. 按一下「確定」。

相關主題

  • 在設計備註中儲存檔案資訊
  • 將設計備註與檔案建立關聯


設定遮罩類別選項

這個對話方塊是用來啟動或停用遮罩，以及用來遮罩特定的檔案類型。

若要設定遮罩選項：

  1. 選取或取消選取「啟動遮罩」核取方塊，以啟動或停用遮罩。
  2. 選取或取消選取「遮罩有以下副檔名的檔案」核取方塊，以啟動或停用特定檔案類型的遮罩。
  3. 在文字方塊中輸入或刪除您想要遮罩或取消遮罩的副檔名。
  4. 按一下「確定」。

相關主題

  • 啟動和停用網站遮罩
  • 遮罩和取消遮罩特定檔案類型


設定報表對話方塊選項

這個對話方塊是用來執行文件或網站的報表。您可以執行報表以改善工作流程、測試網站及檢查輔助功能。

若要執行文件或網站的報表：

  1. 從「報表」彈出式選單中選取要針對何種對象執行報表。

    注意

    除非在「檔案」面板中已經選取檔案，否則無法執行「網站中選取的檔案」報表。
  2. 如果要在「工作流程」區段中執行報表，請選取以下任何一種報表：

    「取出者」會建立一份報表，列出由指定小組成員所取出的所有文件。

    「設計備註」會建立一份報表，列出選取文件或網站的所有「設計備註」。

    「最近修改的檔案」會建立一份報表，列出在指定時間內變更過的檔案。

  3. 如果要在 HTML 區段中執行報告，請選取以下任何一種報表：

    「可結合巢狀字體標籤」會建立一份報表，列出所有可結合以清理程式碼的巢狀字體標籤。

    例如，<font color="#FF0000"><font size="4">STOP!</font></font> 就會報告出來。

    「沒有替代文字」會建立一份報表，列出所有沒有替代文字的 img 標籤。

    對純文字瀏覽器或已設定為要手動下載影像的瀏覽器而言，影像的部份會出現替代文字。畫面讀取器會讀取替代文字，而某些瀏覽器會在使用者滑鼠滑過影像時顯示替代文字。

    「輔助功能」會建立一份報表，詳列您的內容中與 1998 聯邦康復法案 (1998 Rehabilitation Act) 508 節 (Section 508) 的輔助功能指導方針所衝突部分。

    「多餘的巢狀標籤」會建立一份報表，詳列所有應該清理的巢狀標籤。

    例如，<i> The rain <i> in</i> Spain stays mainly in the plain</i> 就會報告出來。

    「可移除的空標籤」會建立一份報表，詳列所有可以移除以清理 HTML 程式碼的空標籤。

    例如，您可能已在「程式碼」檢視中將某個項目或影像刪除了，但卻將套用於該項目的標籤留下來而未刪掉。

    「無標題文件」會建立一份報表，列出在選取參數內發現的所有無標題文件。Dreamweaver 會報告具有預設標題、重複標題或遺失標題標籤的所有文件。

  4. 如果您選取了工作流程報表，請按一下「報表設定」按鈕。否則，請略過這個步驟。

    注意

    如果選取了一個以上的工作流程報表，就必須按一下每個報表的「報表設定」按鈕。請選取報表，按一下「報表設定」後輸入設定；然後為任何其他工作流程報表重複以上程序。
    • 對於「取出者」，請輸入小組成員的名稱，然後按一下「確定」以返回「報表」對話方塊。
    • 對於「設計備註」，請輸入一或多個名稱和值配對，然後從對應的彈出式選單中選取比較值。按一下「確定」以返回「報表」對話方塊。
    • 如需「最近修改的檔案」的詳細資訊，請參閱設定最近修改的檔案對話方塊選項。
  5. 按一下「執行」建立一或多份報表。

    依據您執行的報表類型，可能會提示您儲存檔案、定義網站，或選取資料夾 (如果您還沒有做這些動作的話)。

相關主題

  • 測試網站


設定最近修改的檔案對話方塊選項

這個對話方塊是用來設定網站中最近修改過檔案的報表選項，這樣您就可以將這些檔案上傳至伺服器。

若要設定最近修改過檔案的報表選項：

  1. 請執行下列其中一項作業，以指定報表的搜尋日期：
    • 若要報告在過去幾天內修改過的所有檔案，選取「幾天內建立或修改的檔案」選項按鈕，然後在文字方塊中輸入數字。
    • 若要報告在特定時間內修改過的所有檔案，選取「這段期間建立或修改的檔案」選項按鈕，然後指定日期範圍。
  2. (選擇性) 在「修改者」文字方塊中輸入使用者名稱，以限制要搜尋的檔案是由特定使用者於指定日期內所修改的。

    注意

    這個選項僅適用於 Contribute 網站的報表。
  3. 依需要選取下列選項按鈕，以指定您要在報表中檢視列出檔案的位置：

    「本機電腦」如果網站包含靜態網頁。

    「測試伺服器」如果網站包含動態網頁。

    注意

    這個選項是假設您已經在「網站定義」對話方塊 (XREF) 中定義了「測試伺服器」。如果您尚未定義「測試伺服器」或尚未輸入該伺服器的 URL 前置詞，或者您是執行一個以上網站的報表，便無法使用這個選項。

    「其他位置」如果您要在文字方塊中輸入路徑。

    注意

    如果輸入的路徑無效，Dreamweaver 會在產生報表時警告您。
  4. 按一下「確定」以返回「報表」對話方塊。

相關主題

  • 設定報表對話方塊選項


設定匯出網站對話方塊選項

當您匯出一個指定遠端伺服器使用者名稱和密碼的網站時，便會出現這個對話方塊。

若要設定對話方塊選項：

  • 如果您想要備份網站設定，請選取第一個選項，然後按一下「確定」。

    Dreamweaver 便會儲存遠端伺服器登入資訊，例如使用者名稱和密碼，以及本機路徑資訊。

  • 如果您要和其他使用者共用設定，請選取第二個選項，然後按一下「確定」。

    Dreamweaver 不會儲存不適用於其他使用者的資訊，例如您的遠端伺服器登入資訊和本機路徑。

Dreamweaver 會將網站儲存成副檔名為 STE 的 XML 檔案。

相關主題

  • 匯入和匯出網站


管理網站資源和圖庫

在開發網站時，您會逐漸累積越來越多的資源。在某些情況下，您可能會在許多網站內使用相同的資源，或者您所有的網站都只使用一組您偏好的資源。您可以使用 Macromedia Dreamweaver 8 來管理自己的網站資源。您可以很輕易地記錄和預覽多種儲存在您網站中的資源，如影像、影片、顏色、Script 及連結；也可以將資源直接拖曳到目前的文件中，以將它插入頁面。

Dreamweaver 還可以讓您存取兩種特殊的資源類型：圖庫和樣版。圖庫項目和樣版都是連結的資源：編輯圖庫項目或樣版時也會更新已經套用這些資源的所有文件。圖庫項目是專為個別的設計元素所使用的，如網站的版權資訊或標誌。樣版可讓您控制較大的設計區域。如需詳細資訊，請參閱管理樣版。

本章包含下列主題：

關於圖庫項目

使用資源

建立和管理最愛資源的清單

使用圖庫項目


關於圖庫項目

圖庫是一種特殊的 Dreamweaver 檔案，其中包含一組個別的「資源」，或是您為了放在網頁中而建立的資源複本。這些圖庫中的資源就稱為圖庫項目。當您變更項目的內容後，就會同時更新使用這個圖庫項目的所有頁面。您可以將所有種類的頁面元素儲存在圖庫中，如影像、表格、聲音和 Flash 檔案。

以下是圖庫項目使用方式的範例：假設您要為公司建置一座大型網站。公司想要在網站的每一個頁面上顯示一段標語，但是行銷部門仍然在斟酌標語的文字。如果您建立一個含有這個標語的圖庫項目，然後將它使用在每一頁面上，那麼當行銷部門提供了定案的標語時，您只要變更這個圖庫項目就可以自動更新使用它的所有頁面。

Dreamweaver 會針對每個網站，將其圖庫項目儲存在本機根資料夾內的 Library 資料夾中。每一個網站都有其本身的圖庫。

注意

如果圖庫項目含有連結，這些連結不一定能在新的網站中運作。同時，圖庫項目中的影像也不會複製到新網站。

使用圖庫項目時，Dreamweaver 不會將圖庫項目直接插入網頁，而是插入圖庫項目的連結。也就是，Dreamweaver 會將這個項目的 HTML 原始碼複本插入文件中，並加上 HTML 註解，其中包含原始外部項目的參考。

外部圖庫項目的參考可使您只要變更圖庫項目，然後使用「修改＞圖庫」子選單中的更新命令，就能一次更新整個網站上的內容。接著，如果稍後需要變更圖庫項目的話 (例如變更一些文字或影像)，只要更新圖庫項目便會自動更新您已插入圖庫項目的任何頁面圖庫實體。

當您建立的圖庫項目含有附加 Dreamweaver 行為的元素時，Dreamweaver 會將這個元素和它的處理常式 (用以指定何種事件觸發何種動作，如 onClick、onLoad 或 onMouseOver，以及事件發生時要呼叫何種動作的屬性) 複製到圖庫項目檔案。Dreamweaver 不會將關聯的 JavaScript 函式複製到圖庫項目中，而是在您將圖庫項目插入文件時，自動將適當的 JavaScript 函式插入文件的 head 區段中 (如果還沒有的話)。

注意

如果是以手工撰寫 JavaScript (就是不以 Dreamweaver 行為來建立) 的話，便可以在使用「呼叫 JavaScript」行為執行這個程式碼時使其成為圖庫項目的一部分)。如果您不使用 Dreamweaver 行為來執行程式碼，就不會將程式碼保留做為圖庫項目的一部份。

在圖庫項目中編輯這些行為時，有一定的特殊條件 (請參閱編輯圖庫項目中的行為)。圖庫項目不能含有樣式表，因為其元素的程式碼是 head 區段的一部份。


相關主題

  • 使用圖庫項目


使用資源

資源包括您儲存在網站中的各種元素，如影像或影片檔案。

您可以從各種不同來源取得資源。例如，您可以在應用程式 (如 Macromedia Fireworks 或 Macromedia Flash) 中建立資源、從同僚那裡接收資源，或從美工圖案 CD 或是圖形網站複製資源。

本節包含下列主題：

  • 檢視「資源」面板中的資源
  • 重新整理資源面板
  • 在文件新增資源
  • 使用資源面板將顏色套用到文字
  • 使用資源面板將 URL 附加在影像或文字上
  • 選取和編輯資源
  • 將資源重複使用於另一個網站

相關主題

  • 建立和管理最愛資源的清單
  • 使用圖庫項目


檢視「資源」面板中的資源

您可以使用「資源」面板檢視和管理目前網站中的資源。在「資源」面板中，會顯示與「文件」視窗內作用中文件相關的資源。

注意

您必須先定義本機網站，然後才可以在「資源」面板中檢視資源。如需關於設定網站的詳細資訊，請參閱設定新的 Dreamweaver 網站。

「資源」面板提供兩種檢視：

「網站」清單會顯示您網站中的所有資源，包括網站的任何文件中所使用的顏色和 URL。

「最愛」清單中只會顯示您明確選擇的資源。

在這兩種清單中，資源都是以類別區分 (依序排在「資源」面板左側)。「除了」樣版和圖庫項目之外，其他的所有資源類別都可使用「網站」清單和「最愛」清單。

注意

大部分「資源」面板作業在「網站」清單和「最愛」清單中的運作方式都是一樣的。但是，有少數幾項工作只能在「最愛」清單中執行 (請參閱建立和管理最愛資源的清單)。

依預設值，指定類別中的資源是依名稱的字母順序列示。您可以以任何其他的準則列示資源，或是變更欄的大小，也可以在類別中預覽資源，並變更預覽區域的大小。

若要開啟「資源」面板：

  • 選取「視窗＞資源」。

    「資源」面板便會出現。依預設值，「影像」類別會已選取。

若要檢視「網站」清單：

  • 在「資源」面板中 (「視窗＞資源」)，請選取面板頂部的「網站」選項。

    注意

    在「樣版」和「圖庫」類別中 (「資源」面板左側)，無法使用「網站」和「最愛」選項。

若要檢視「最愛」清單：

  • 在「資源」面板中 (「視窗＞資源」)，請選取面板頂端的「最愛」選項。

    在您明確地加入資源之前，「最愛」清單會是空的。

    注意

    在「樣版」和「圖庫」類別中 (「資源」面板左側)，無法使用「網站」和「最愛」選項。

若要顯示特定類別的資源：

  • 按一下「資源」面板 (視窗＞資源) 左側的適當圖示。

若要依不同順序列示資源：

  • 請按一下某個欄標題。

    例如，若要依類型排序影像清單 (讓所有 GIF 影像排在一起、所有 JPEG 影像排在一起，依此類推)，請按一下「類型」欄標題。

若要變更欄寬：

  • 拖曳兩個欄標頭的分隔線。

若要預覽資源：

  • 在「資源」面板中選取資源。

    面板頂端的預覽區域就會顯示資源的視覺化預覽。

    例如，當您選取影片資源時，預覽區域會顯示一個圖示。若要檢視這段影片，請按一下預覽區域右上角的「播放」按鈕 (綠色三角形)。

若要變更預覽區域的大小：

  • 請將分隔列 (在預覽區域與資源清單之間) 向上或向下拖曳。

相關主題

  • 使用資源面板
  • 重新整理資源面板
  • 在文件新增資源
  • 選取和編輯資源


重新整理資源面板

「資源」面板可能需要花費數秒鐘建立「網站」清單，因為它必須讀取網站快取，才能建立這個清單。

有些變更不會在「資源」面板中立即顯示：

  • 在網站新增或移除資源時，這些變更要等到您按一下「重新整理網站清單」按鈕，重新整理「網站」清單後，才會在「資源」面板中顯示。如果在 Dreamweaver 之外新增或移除資源 (例如，使用 Windows Explorer 或 Finder)，則必須重建網站快取才能更新「資源」面板。
  • 當您移除網站中特定顏色或 URL 的唯一實體時，或是所儲存的新檔案含有網站中尚未使用的顏色或 URL 時，這些變更都要等到重新整理「網站」清單後，才會在「資源」面板中顯示。

若要以手動方式重新整理「網站」清單：

  1. 在「資源」面板中 (「視窗＞資源」)，請選取面板頂部的「網站」選項，查看「網站」清單。
  2. 按一下「資源」面板底部的「重新整理網站清單」按鈕。 這是描述功能的圖片。

    Dreamweaver 會建立網站快取或在必要時更新快取，並更新「資源」面板以顯示網站的資源。

若要以手動方式重建網站快取並重新整理「網站」清單：

  • 在「資源」面板中 (「視窗＞資源」)，在「資源」清單中按一下滑鼠右鍵 (Windows) 或 Command + 按一下清單 (Macintosh)，然後選取「重新整理網站清單」。

相關主題

  • 選取和編輯資源
  • 將資源重複使用於另一個網站


在文件新增資源

只要將資源拖曳到「文件」視窗中的「程式碼」檢視或「設計」檢視，或者是使用「插入」按鈕，便能將大部份的資源插入文件中。您可以在「設計」檢視中插入顏色和 URL，或將它們套用到選取的文字 (URL 也可以套用到「設計」檢視中的其他元素，例如影像)。

若要將資源插入文件：

  1. 將插入點放在「設計」檢視中您希望資源出現的地方。
  2. 在「資源」面板中 (「視窗＞資源」)，從面板左側選取您要插入的資源類型之類別。

    注意

    請選取「樣版」以外的任何類別。您只能將樣版套用到整個文件，而不能將其插入文件中。如需關於樣版的詳細資訊，請參閱管理樣版。
  3. 請選取面板頂部的「網站」或「最愛」，再找出要插入的資源。

    圖庫項目不能使用「網站」或「最愛」清單；請在插入圖庫項目時略過這個步驟。

  4. 請執行下列其中一項作業：
    • 將資源從面板拖曳到文件。

      您可以將 Script 拖曳到「文件」視窗的檔頭內容區域；如果這個區域沒有出現，請選取「檢視＞檔頭內容」。

    • 選取面板中的資源，再按一下面板底部的「插入」。

    資源就會插入到文件中。(如果資源是顏色，它會從插入點開始套用；換言之，後續的輸入都會以這種顏色顯示)。

相關主題

  • 使用資源面板將顏色套用到文字
  • 使用資源面板將 URL 附加在影像或文字上
  • 選取和編輯資源
  • 將資源重複使用於另一個網站


使用資源面板將顏色套用到文字

「資源」面板中的顏色代表套用到網站中各種不同元素的顏色，例如文字、表格邊框、背景顏色等。您可以使用「顏色」類別中的色票，將您選擇的顏色一致地套用到頁面上的物件。

如需關於在「顏色」類別中新增顏色的詳細資訊，請參閱在最愛清單中新增與移除資源。

若要變更文件中所選取文字的顏色：

  1. 在文件中選取文字。
  2. 在「資源」面板中 (「視窗＞資源」)，從面板左側選取「顏色」類別。 這是描述功能的圖片。
  3. 選取想要的顏色。
  4. 按一下面板底部的「套用」按鈕。

相關主題

  • 在文件新增資源
  • 使用資源面板將 URL 附加在影像或文字上
  • 選取和編輯資源
  • 將資源重複使用於另一個網站


使用資源面板將 URL 附加在影像或文字上

您可以利用「資源」面板，將選取的文字或影像變成有效的連結。

若要在文件中目前的選取範圍附加新的連結：

  1. 選取您想要附加 URL 的文字或影像。
  2. 在「資源」面板中 (「視窗＞資源」)，從面板左側選取 URL 類別。 這是描述功能的圖片。
  3. 選取想要的 URL。
  4. 請執行下列其中一項作業：
    • 將 URL 從面板拖曳到「設計」檢視中的選取範圍。
    • 選取 URL，然後按一下「插入」按鈕。

相關主題

  • 在文件新增資源
  • 使用資源面板將顏色套用到文字
  • 選取和編輯資源
  • 將資源重複使用於另一個網站


選取和編輯資源

「資源」面板可以讓您一次選取多個資源，也提供了一種開始編輯資源的快速方法。

若要選取多個資源：

  1. 請在「資源」面板中 (「視窗＞資源」) 選取其中一個資源。
  2. 以下列其中一種方式選取其他資源：
    • Shift + 按一下以選取一連串連續的資源。
    • Control + 按一下 (Windows) 或 Command + 按一下資源 (Macintosh)，便可將個別的資源加入選取範圍 (即使是與目前選取範圍不相鄰的資源亦可)。Control + 按一下或 Command + 按一下已選取的資源，便可取消選取。

若要編輯資源：

  1. 在「資源」面板中 (「視窗＞資源」)，請執行下列其中一項作業：
    • 在這個資源連按兩下。
    • 選取資源後，按一下面板底部的「編輯」按鈕。 這是描述功能的圖片。

    對於某些資源種類 (例如影像) 編輯資源會啟動外部編輯應用程式。編輯資源時，您只能在「最愛」清單中變更顏色和 URL 的資源值。(而無法編輯「網站」清單中的顏色和 URL)。對於樣版和圖庫項目，編輯資源可以讓您在 Dreamweaver 內變更資源。

    注意

    如果無法以外部編輯器開啟必須使用編輯器的資源時，請選擇「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，選取「檔案類型/編輯器」類別，然後確定已經針對這個資源的檔案類型定義了外部編輯器。請參閱啟動媒體檔案的外部編輯器。
  2. 依需要變更資源。
  3. 當您編輯資源完成時，請執行下列其中一項作業：
    • 如果資源是檔案架構式資源 (顏色或 URL 以外的任何東西)，請將其儲存 (使用您用來編輯它的任何編輯器) 後關閉。
    • 如果資源是 URL，請在完成「編輯 URL」對話方塊中的編輯時按一下「確定」。
    • 如果資源是顏色，當您挑選顏色時，Dreamweaver 顏色挑選器就會自動關閉。

      注意

      (若要關閉顏色挑選器而不挑選顏色，請按 Esc 鍵)。

相關主題

  • 檢視「資源」面板中的資源
  • 重新整理資源面板
  • 將資源重複使用於另一個網站


將資源重複使用於另一個網站

「資源」面板會顯示目前網站的所有資源 (可辨認的類型) 若要將目前網站的資源用於另一個網站，您必須將其複製到這個網站。您可以複製個別資源、一組個別資源，或一次複製整個「最愛」資料夾。

想要與網站互傳資源時，需要在「檔案」面板中，找出與「資源」面板的資源對應的檔案。

注意

「檔案」面板顯示的網站，可能會與「資源」面板所顯示的不同，這是因為「資源」面板是與作用中文件相關聯。

若要找到「檔案」面板中的資源檔案：

  1. 請在「資源」面板中 (「視窗＞資源」)，從面板左側選取要尋找的資源類型之類別。
  2. 在「資源」面板中，按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 資源的名稱或圖示，再從快速選單中選取「指出在網站中位置」。

    注意

    「指出在網站中位置」無法用於尋找顏色和 URL，因為它們並不與網站中的檔案對應。

    然後便會開啟「檔案」面板，並選取了這個資源檔案。請注意，「指出在網站中位置」會尋找與資源本身對應的檔案，而非尋找使用這項資源的檔案。

若要將資源從「資源」面板的「網站」清單或「最愛」清單中，複製到另一個網站：

  1. 在「資源」面板中 (「視窗＞資源」)，從面板左側選取要複製的資源類型之類別。
  2. 按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 資源或是要複製的資源，選取「複製到網站」，再從子選單中選取目標網站的名稱。(子選單會列出您已定義的所有網站)。

    注意

    在「最愛」清單中，可以複製「最愛」資料夾以及個別資源 如需關於「最愛」資料夾的詳細資訊，請參閱將資源分組為最愛資料夾。

    將資源複製到指定網站時，會放在與它們在目前網站中位置相對應的位置。Dreamweaver 會視需要在目標網站的階層中建立新資料夾。這些資源也會同時加入指定網站的「最愛」清單中。

當您開啟目標網站中的文件時，「資源」面板便會切換到這個網站，並顯示複製的資源。

注意

如果所複製的資源是顏色或 URL，則只會在其他網站的「最愛」清單中出現，而不會出現在「網站」清單中。這是因為顏色或 URL 並沒有相對應的檔案，所以無法將任何檔案複製到其他網站。

相關主題

  • 檢視「資源」面板中的資源
  • 重新整理資源面板
  • 選取和編輯資源


建立和管理最愛資源的清單

由於「資源」面板的「網站」清單會將網站中所有可辨認的資源一律列出，所以對某些大型網站而言，這個清單會變得太累贅。您可以將常用的資源加入「最愛」清單，將相關的資源分組在一起，然後取個易於區分用途的別稱，這樣就能夠輕易地在「資源」面板中找到它們。

注意

「最愛」資源並不會在磁碟上以個別檔案儲存，而只是「網站」清單中資源的參考。Dreamweaver 會記錄「網站」清單的哪些資源要顯示在「最愛」清單中。

「最愛」清單中與「網站」清單中的大部分「資源」面板作業都完全相同。但是，也有少數幾項工作只能在「最愛」清單中執行。

本節包含下列主題：

  • 在最愛清單中新增與移除資源
  • 建立最愛資源的別稱
  • 將資源分組為最愛資料夾


在最愛清單中新增與移除資源

有好幾種方法可以在「資源」面板的「最愛」清單中新增資源。

將顏色或 URL 加入「最愛」清單則需要額外的步驟。請注意，您不能將新的顏色或 URL 加入「網站」清單；「網站」清單只能包含已在網站中使用的資源。

注意

樣版和圖庫項目沒有「最愛」清單。

若要新增資源到「最愛」清單，請執行下列其中一項作業：

  • 在「資源」面板的「網站」清單中選取一項或多項資源，再按一下面板底部的「加入至最愛」按鈕。 這是描述功能的圖片。
  • 在「資源」面板上的「網站」清單中選取一或多個資源，按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「加入至最愛」。
  • 在「檔案」面板上選取一或多個檔案，按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「加入至最愛」。

    Dreamweaver 會略過「資源」面板中不符合類別的檔案。

  • 在「文件」視窗的「設計」檢視中，按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 元素，然後選取快速選單命令，將元素加到適當的「最愛」類別中。

    請注意，文字的快速選單會包含「加入至最愛的顏色」或「加入至最愛的 URL」，依文字是否有附加的連結而定。同時也請注意，符合「資源」面板中某種類別的元素才可以新增到「最愛」清單。

若要將新的顏色或 URL 加入最愛清單：

  1. 在「資源」面板中 (「視窗＞資源」)，選取面板左側的「顏色」或 URL 類別。 這是描述功能的圖片。
  2. 選取面板頂端的「最愛」選項，以顯示「最愛」清單。
  3. 按一下面板底部的「新增顏色」或「新增 URL」按鈕。 這是描述功能的圖片。
  4. 請執行下列其中一項作業
    • 使用「顏色挑選器」來選取顏色，然後依喜好為顏色取一個別稱 (請參閱建立最愛資源的別稱)。

      若要結束顏色挑選器而不選擇顏色，請按 Esc 鍵或按一下顏色挑選器頂端的灰色列。如需關於使用顏色挑選器的詳細資訊，請參閱使用顏色。

    • 在「將新的 URL 加入」對話方塊中輸入 URL 與別稱，然後按一下「確定」。

若要從「最愛」清單移除資源：

  1. 在「資源」面板中 (「視窗＞資源」)，請選取面板頂端的「最愛」選項。
  2. 在「最愛」清單中選取一項或多項資源 (或是資料夾)。
  3. 按一下「資源」面板底部的「從最愛中移除」按鈕。 這是描述功能的圖片。

    資源就會從「最愛」清單中移除，但是它們仍然會出現在「網站」清單中。如果您移除「最愛」資料夾，這個資料夾和其中的所有資源都會從「最愛」清單中移除。

相關主題

  • 檢視「資源」面板中的資源
  • 建立最愛資源的別稱
  • 將資源分組為最愛資料夾


建立最愛資源的別稱

您可以為「最愛」清單中的資源指定別稱。資源在指定後便會以別稱顯示，而非顯示資源檔名或值。例如，如果有個顏色名為 #999900，您可以為它取個具有描述性的別稱，例如 PageBackgroundColor 或 ImportantTextColor。

您可以為「資源」面板的「最愛」清單的資源指定別稱。在「網站」清單中，資源會依照它們真正的檔名 (對於顏色和 URL 則為值) 列示。

若要對最愛資源指定別稱：

  1. 在「資源」面板中 (「視窗＞資源」)，請在面板左側選取含您資源的類別。
  2. 選取面板頂部的「最愛」選項，顯示「最愛」清單。
  3. 請執行下列其中一項作業：
    • 按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)「資源」面板中的資源名稱或圖示，然後選擇「編輯別稱」。
    • 按一下資源的名稱，暫停，然後再按它一下。
  4. 輸入資源的別稱後，按 Enter (Windows) 或 Return (Macintosh)。

    「別稱」欄中就會出現這個別稱。

相關主題

  • 檢視「資源」面板中的資源
  • 在最愛清單中新增與移除資源
  • 將資源分組為最愛資料夾


將資源分組為最愛資料夾

您可以在「資源」面板中，將「最愛」清單中的資源分組到資料夾內。例如，如果您有一組影像專用於電子商務網站中的許多目錄頁面，您可以將其分組在一起成為 CatalogImages 資料夾。

注意

將資源放在「最愛」資料夾中，並不會變更資源檔案在磁碟上的位置。

若要建立「最愛」資料夾：

  1. 在「資源」面板中 (「視窗＞資源」)，請選取面板頂部的「最愛」選項。
  2. 按一下面板底部的「新增最愛資料夾」按鈕。 這是描述功能的圖片。
  3. 輸入資料夾名稱，再按 Enter (Windows) 或 Return (Macintosh)。
  4. 將資源拖曳到資料夾中。

相關主題

  • 檢視「資源」面板中的資源
  • 在最愛清單中新增與移除資源
  • 建立最愛資源的別稱


使用圖庫項目

圖庫可以用來儲存您想要在整個網站上經常重複使用或更新的頁面元素 (如影像、文字和其他物件)。這些元素都稱為圖庫項目。

本節包含下列主題：

  • 建立圖庫項目
  • 將圖庫項目插入文件
  • 編輯圖庫項目
  • 設定圖庫標示偏好設定
  • 編輯圖庫項目的屬性
  • 使圖庫項目在文件中成為可編輯狀態
  • 編輯圖庫項目中的行為

相關主題

  • 關於圖庫項目


建立圖庫項目

您可以將文件的 body 區段中任何元素，建立成為圖庫項目，包括文字、表格、表單、Java Applet、外掛程式、ActiveX 元素、導覽列及影像。

對於連結的項目 (例如影像)，圖庫只是儲存這個項目的參考。原始檔案必須保持在特定的位置，圖庫項目才能正確地運作。

不過將影像儲存在圖庫項目中仍然很有用處；例如，您可以在圖庫項目中儲存完整的 img 標籤，以便輕易地變更整個網站上影像的 alt 文字，甚至是影像的 src 屬性。(不過，請不要用這種技巧變更影像的 width 和 height 屬性，除非您同時使用影像編輯器來變更影像的實際大小)。

以選取範圍建立圖庫項目：

  1. 在「文件」視窗中，請選取要另存成圖庫項目的文件部份。
  2. 請執行下列其中一項作業：
    • 將所選項目拖曳到「資源」面板上的「圖庫」類別 (「視窗＞資源」)。
    • 在「資源」面板上的「圖庫」類別底部，按一下「新增圖庫項目」按鈕 (「視窗＞資源」)。 這是描述功能的圖片。
    • 選取「修改＞圖庫＞將物件加入圖庫」。
  3. 輸入新圖庫項目的名稱，再按 Enter (Windows) 或 Return (Macintosh)。

    Dreamweaver 會在網站本機根資料夾的 Library 資料夾中，將每個圖庫項目儲存成個別的檔案 (其副檔名為 .lbi)。

若要建立空的圖庫項目：

  1. 請確定在「文件」視窗中沒有選取任何東西。

    如果選取了任何東西，它就會被放到新圖庫項目中。

  2. 請在「資源」面板中 (「視窗＞資源」) 選取面板左側的「圖庫」類別。 這是描述功能的圖片。
  3. 按一下「資源」面板底部的「新增圖庫項目」按鈕。 這是描述功能的圖片。

    未命名的新圖庫項目就會新增到面板中的清單。

  4. 於選取了該項目的同時，為它輸入一個名稱，然後再按 Enter (Windows) 或 Return (Macintosh)。

相關主題

  • 將圖庫項目插入文件
  • 編輯圖庫項目
  • 設定圖庫標示偏好設定


將圖庫項目插入文件

當您將圖庫項目加入頁面時，實際內容會與圖庫項目的參考一起插入到文件中。

若要在文件中插入圖庫項目：

  1. 請將插入點放在「文件」視窗中。
  2. 請在「資源」面板中 (「視窗＞資源」) 選取面板左側的「圖庫」類別。 這是描述功能的圖片。
  3. 請執行下列其中一項作業：
    • 將圖庫項目從「資源」面板拖曳到「文件」視窗中。

      提示

      若要在文件中插入圖庫項目的內容，但是不包含項目的參考，請按 Control (Windows) 或 Option (Macintosh) 並同時將項目拖曳到「資源」面板的「圖庫」類別之外。如果以這種方式插入項目，就可以在文件中編輯此項目，但是當您更新使用這個圖庫項目的頁面時，並不會同時更新文件。
    • 先選取資源項目，再按一下面板底部的「插入」按鈕。

相關主題

  • 建立圖庫項目
  • 編輯圖庫項目
  • 編輯圖庫項目的屬性
  • 使圖庫項目在文件中成為可編輯狀態


編輯圖庫項目

在編輯圖庫項目時，也會同時更新所有使用這個項目的文件。如果選擇不要更新，文件仍會保持與圖庫項目相關聯；您可以稍後再更新它們。

其他的圖庫項目變更包括了將項目重新命名以中斷與文件或樣版的連結、從網站的圖庫中刪除項目，以及重新建立遺失的圖庫項目等。

注意

當您編輯圖庫項目時不會出現「CSS 樣式」面板，這是因為圖庫項目只能含有 body 元素，而 CSS 樣式表程式碼則是插入文件的 head 區段。「頁面屬性」對話方塊也不會出現，因為圖庫項目不能包含 body 標籤或其屬性。

若要編輯圖庫項目：

  1. 請在「資源」面板中 (「視窗＞資源」) 選取面板左側的「圖庫」類別。 這是描述功能的圖片。
  2. 選取圖庫項目。

    圖庫項目的預覽便會出現在「資源」面板的頂端 (您不能在預覽畫面中編輯任何項目)。

  3. 請執行下列其中一項作業：
    • 請按一下面板底部的「編輯」按鈕。 這是描述功能的圖片。
    • 連按兩下圖庫項目。

    Dreamweaver 便會開啟新視窗讓您編輯這個圖庫項目。這個視窗非常類似「文件」視窗，但是其「設計」檢視的背景是灰色，表示您是在編輯圖庫項目而不是文件。

  4. 請編輯圖庫項目，然後儲存您做的變更。
  5. 在出現的對話方塊中，選擇是否要在本機網站上同時更新使用這個已編輯圖庫項目的文件：
    • 選取「更新」，更新本機網站中所有含有已編輯圖庫項目的文件。
    • 選取「不要更新」，在您使用「修改＞圖庫＞更新目前頁面」或「更新頁面」之前，都不要變更任何文件。

若要將目前文件，更新成使用所有圖庫項目的最新版本：

  • 請選取「修改＞圖庫＞更新目前頁面」。

若要更新整個網站或使用特定圖庫項目的所有文件：

  1. 請選擇「修改＞圖庫＞更新頁面」。

    「更新頁面」對話方塊便會出現。

  2. 請在「查詢」彈出式選單中，執行下列其中一項作業：
    • 選取「整個網站」，然後從旁邊的彈出式選單中，選取網站名稱。

      這樣會更新選取網站中的所有頁面，以使用所有圖庫項目的目前版本。

    • 選取「使用的檔案」，然後從旁邊的彈出式選單中，選取圖庫項目名稱。

      這樣便會更新目前網站中使用所選圖庫項目的所有頁面。

  3. 請確定已在「更新」選項中選取「圖庫項目」。

    提示

    若要同時更新樣版，請確定也選取了「樣版」。如需詳細資訊，請參閱開啟樣版進行編輯。
  4. 按一下「開始」。

    Dreamweaver 就會按照指示更新檔案。如果您選取了「顯示記錄」選項，Dreamweaver 就會提供它所嘗試更新的檔案之相關資訊，包括它們是否已成功更新的資訊。

若要將圖庫項目重新命名：

  1. 請在「資源」面板中 (「視窗＞資源」) 選取面板左側的「圖庫」類別。
  2. 選取您要重新命名的圖庫項目，暫停，然後再按它一次。
  3. 當名稱變成可編輯狀態時，輸入新的名稱。

    注意

    這種重新命名的方法和在 Windows Explorer (Windows) 或 Finder (Macintosh) 中重新命名檔案是一樣的。就像在 Windows Explorer 和 Finder 中一樣，按滑鼠的動作之間要有短暫的停頓。不要連按兩下名稱；因為這樣會開啟圖庫項目進行編輯。
  4. 在別的地方按一下，或是按 Enter (Windows) 或 Return (Macintosh)。
  5. Dreamweaver 會詢問您是否也要更新使用這個項目的文件。
    • 若要更新網站中使用這個項目的所有文件，請按一下「更新」。
    • 如果不要更新使用此項目的任何文件，請按一下「不要更新」。

若要從圖庫刪除圖庫項目：

  1. 請在「資源」面板中 (「視窗＞資源」) 選取面板左側的「圖庫」類別。
  2. 選取要刪除的圖庫項目。
  3. 請執行下列其中一項作業：
    • 按一下面板底部的「刪除」按鈕，然後確認是否要刪除此項目。
    • 按「刪除」鍵，然後確認要刪除此項目。

      小心

      請小心，圖庫項目一旦刪除後，就無法再用「還原」來復原。不過，您還可以依照下個程序中的說明重新建立它。

    Dreamweaver 會從圖庫中移除圖庫項目，但不會變更任何使用此項目的文件內容。

若要重新建立遺失或已刪除的圖庫項目：

  1. 請在您的任何文件中選取這個項目的實體。
  2. 按一下「屬性」檢視窗 (「視窗＞屬性」) 中的「重新建立」按鈕。

相關主題

  • 建立圖庫項目
  • 使圖庫項目在文件中成為可編輯狀態
  • 編輯圖庫項目中的行為


設定圖庫標示偏好設定

您可以藉由設定「標示」偏好設定，自訂圖庫項目的標示顏色，以及顯示或隱藏圖庫項目的標示。

若要變更圖庫項目的標示顏色：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 選取清單左側的「標示」類別。
  3. 按一下「圖庫項目」顏色方塊，再使用顏色挑選器 (或在文字方塊中輸入標示顏色的十六進位值)，選取標示顏色。

    如需關於使用顏色挑選器的詳細資訊，請參閱使用顏色。

  4. 選取「顯示」，在「文件」視窗中顯示標示圖庫顏色。
  5. 按一下「確定」。

若要在「文件」視窗中檢視反白標示顏色：

  • 請選取「檢視＞視覺輔助＞隱藏元素」。

    只有在啟用了「檢視＞視覺輔助＞隱藏元素」，並在「標示」偏好設定中啟用了適當選項時，標示顏色才會出現在「文件」視窗中。

相關主題

  • 建立圖庫項目
  • 編輯圖庫項目
  • 編輯圖庫項目的屬性


編輯圖庫項目的屬性

在圖庫項目上，您可以使用「屬性」檢視窗；開啟圖庫項目，進行編輯；將選取的圖庫項目從原始檔中分離；或是以目前選取的圖庫，覆寫某個項目。

若要編輯圖庫項目的屬性：

  1. 選取文件中的圖庫項目。
  2. 根據您想要執行的動作，按一下「屬性」檢視窗 (「視窗＞屬性」) 中的按鈕。

    如需詳細資訊，請參閱設定圖庫項目屬性。

相關主題

  • 建立圖庫項目
  • 將圖庫項目插入文件
  • 設定圖庫標示偏好設定
  • 使圖庫項目在文件中成為可編輯狀態


使圖庫項目在文件中成為可編輯狀態

如果將圖庫項目加入文件後，想要只編輯這個頁面的該項目時，您必須先中斷文件的這個項目與圖庫的連結。當圖庫項目的實體變成可編輯狀態後，這個實體就不會再隨著圖庫項目的變更而更新。

若要使圖庫項目成為可編輯狀態：

  1. 請在目前文件中選取圖庫項目。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中按一下「從原始檔中分離」。

    選取的圖庫項目實體就會被取消標示 (如果原來看得見標示)，而且不會再隨著原始圖庫項目的變更而更新了。

相關主題

  • 建立圖庫項目
  • 將圖庫項目插入文件
  • 編輯圖庫項目
  • 編輯圖庫項目的屬性


編輯圖庫項目中的行為

若要編輯圖庫項目中的行為，您必須先將這個項目插入文件，然後使這個項目在文件中變成可編輯狀態。在完成想要的變更後，您便可以重新建立圖庫項目，用文件中已編輯的項目來取代圖庫中的項目。

如需關於行為的詳細資訊，請參閱使用 JavaScript 行為。

若要編輯圖庫項目中的行為：

  1. 開啟含有圖庫項目的文件。

    請記下圖庫項目的名稱，以及它包含的確切標籤。您以後會用到這一資訊。

  2. 選取圖庫項目後，按一下「屬性」檢視窗 (「視窗＞屬性」) 中的「從原始檔中分離」。
  3. 選取附加了行為的元素。
  4. 在「行為」面板 (「視窗＞行為」) 中，連按兩下您想要變更的動作。
  5. 在出現的對話方塊中，先進行必要的變更，再按一下「確定」。
  6. 請在「資源」面板中 (「視窗＞資源」) 選取面板左側的「圖庫」類別。
  7. 請確定您已記錄原始圖庫項目的確切名稱，選取原始圖庫項目後，按一下面版底部的「刪除」按鈕。
  8. 在「文件」視窗中，選取構成這個圖庫項目的所有元素。

    請務必要選取和原始圖庫項目中一模一樣的元素。

  9. 在「資源」面板中，按一下「新增圖庫項目」按鈕，並將新項目指定為與您所刪除項目相同的名稱。

    不論拼法和大小寫都必須一模一樣。

  10. 若要更新網站其他文件中的圖庫項目，請選取「修改＞圖庫＞更新頁面」。
  11. 在「更新頁面」對話方塊中，從「查詢」彈出式選單中，選取「使用的檔案」。
  12. 在旁邊的彈出式選單中，選取剛才您建立的圖庫項目名稱。
  13. 請確定在「更新」選項中選取了「圖庫項目」，然後按一下「開始」。
  14. 更新完成後，請按一下「關閉」結束「更新頁面」對話方塊。

相關主題

  • 建立圖庫項目
  • 將圖庫項目插入文件
  • 編輯圖庫項目


參考

本節將提供這一章裡所介紹的面板和「屬性」檢視窗之相關資訊：

  • 使用資源面板
  • 設定圖庫項目屬性


使用資源面板

資源包括您儲存在網站中的各種元素，如影像或影片檔案。「資源」面板提供了兩種檢視資源的方式：

「網站」清單會顯示您網站中的所有資源。

「最愛」清單中只會顯示您明確選擇的資源。

如需關於變更檢視的詳細資訊，請參閱檢視「資源」面板中的資源。

在這兩種清單中，都將資源區分為「資源」面板左側的以下幾個類別：

影像表示 GIF、JPEG 或 PNG 格式的影像檔。請參閱插入影像 這是描述功能的圖片。 。

顏色表示使用於網站中文件和樣式表的顏色，包括文字顏色、背景顏色和連結顏色。 這是描述功能的圖片。

URLs 表示目前網站文件中的外部連結。這個類別包括下列連結類型：FTP、gopher、HTTP、HTTPS、JavaScript、電子郵件 (mailto) 及本機檔案 (file://) 這是描述功能的圖片。 。

Flash 檔案表示任何版本的 Macromedia Flash 格式檔案。「資源」面板只會顯示 SWF 檔案 (壓縮的 Flash 檔案)，而不會顯示 FLA (原始檔) 檔案。請參閱插入和修改 Flash 按鈕物件。 這是描述功能的圖片。

Shockwave 影片表示任何版本的 Macromedia Shockwave 格式檔案。請參閱插入 Shockwave 影片。 這是描述功能的圖片。

影片表示 QuickTime 或 MPEG 格式的檔案。請參閱新增音效、視訊和互動元素。 這是描述功能的圖片。

Script 表示 JavaScript 或 VBScript 檔案。請留意，HTML 檔案中的 Script (而非單獨的 JavaScript 或 VBScript 檔案) 並不會出現在「資源」面板中。 這是描述功能的圖片。

樣版可讓您輕易地在多個頁面上重複使用相同的頁面版面，並會在修改樣版時，同時修改所有連結到該樣版的頁面上之版面。請參閱關於 Dreamweaver 樣版。 這是描述功能的圖片。

圖庫項目是您在多個頁面中使用的元素；當您修改圖庫項目時，含有這個項目的所有頁面都會被更新。請參閱使用圖庫項目。 這是描述功能的圖片。

注意

只有符合這些類別的檔案才會顯示在「資源」面板中。還有一些其他檔案類型有時也稱為資源，但並不會在面板中顯示。

相關主題

  • 檢視「資源」面板中的資源
  • 重新整理資源面板
  • 在文件新增資源
  • 使用資源面板將顏色套用到文字
  • 選取和編輯資源
  • 將資源重複使用於另一個網站


設定圖庫項目屬性

請使用圖庫項目屬性來指定項目的原始檔案、使其成為可編輯的項目，或是在文件中編輯過圖庫項目的實體後，重新建立原始的圖庫項目。

若要設定圖庫項目的屬性：

選取下列任一選項：

原始檔會顯示圖庫項目原始檔案的檔名和位置。您不能編輯這項資訊。

開啟舊檔會開啟圖庫項目的原始檔案，以進行編輯。這相當於在「資源」面板中選取項目後，按一下「編輯」按鈕。

從原始檔中分離會中斷選取的圖庫項目與其原始檔案的連結。當項目分離後，就可以在文件中編輯它，但是它已不再是圖庫項目，也不會隨著您變更原始圖庫項目而更新。

重新建立會使用目前的選取範圍來覆寫圖庫項目。如果原始圖庫項目遺失或不小心被刪除時，請使用這個選項以重新建立圖庫項目。

相關主題

  • 建立圖庫項目
  • 編輯圖庫項目的屬性


使用 Dreamweaver 管理 Contribute 網站

Macromedia Contribute 是由網頁瀏覽器及基本的網頁編輯器所組成。透過此產品，您的同事或客戶可以瀏覽由您建立之網站上的網頁，而且如果他們擁有權限的話，還可以對網頁進行編輯或更新。Contribute 的使用者可以新增並更新基本的網頁內容，包括格式化文字、影像、表格及連結。Contribute 網站的系統管理員可以限制一般使用者 (非系統管理員) 在網站內的活動。

注意

本章假設您是 Contribute 系統管理員。

身為網站的系統管理員，您應建立連線索引鍵然後傳送給非系統管理員，賦予他們編輯網頁的能力。如需詳細資訊，請參閱「使用 Contribute」。您也可以使用 Macromedia Dreamweaver 8 建立與 Contribute 網站的連線，這樣您或其他使用者便能像處理其他任何 Dreamweaver 網站一樣，修改 Contribute 網站中的檔案。這對於想要連線到您的 Contribute 網站、但又希望使用 Dreamweaver 代替 Contribute 進行連線的人來說是很好用的。例如，網站設計人員或許想要連線到您的 Contribute 網站，但又希望取用 Dreamweaver 中所有的編輯能力。

Contribute 是利用 Contribute Publishing Server (CPS) 為網站附加功能；Contribute Publishing Server (CPS) 是一組發佈應用程式和使用者管理工具，讓您能夠整合 Contribute 與公司的使用者目錄服務，例如 Lightweight Directory Access Protocol (LDAP) 或 Active Directory。一旦您將 Dreamweaver 網站啟用成為 Contribute 網站，則每當連線到遠端網站時，Dreamweaver 便會讀取 Contribute 的系統管理設定。如果 Dreamweaver 偵測到 CPS 已啟用，便會直接與 CPS 通訊。如此一來，Dreamweaver 就能繼承 CPS 的某些功能，如檔案復原和事件記錄。

本章包含下列各節：

關於管理 Contribute 網站

準備 Contribute

使用 Dreamweaver 管理 Contribute 網站

使用 Dreamweaver 管理 Contribute 檔案

Contribute 網站疑難排解


關於管理 Contribute 網站

您可以使用 Dreamweaver 連線到 Contribute 網站，並修改該網站上的檔案，方法和修改其他 Dreamweaver 網站上的檔案完全相同。在 Contribute 網站上，大部分 Dreamweaver 功能的運作方式與在其他網站上運作時相同。在 Contribute 網站上處理檔案的方式與在其他網站上處理檔案的方式只有幾個地方不同。

本節包含下列概念性主題：

  • Contribute 網站的網站結構與網頁設計
  • 支援 Contribute 相容性的網站連線
  • 將檔案從 Contribute 網站上傳或下載
  • Contribute 伺服器上的檔案及資料夾權限
  • Contribute 特殊檔案


Contribute 網站的網站結構與網頁設計

為了準備讓 Contribute 的使用者可以編緝您的網站，您必須建立適當的網站結構。

請先建立 Contribute 的使用者在編輯網頁時需要用到的資料夾，再為這些資料夾建立索引頁面，然後再為這些頁面加入基本導覽。您或許會想要建立專供使用者練習用的使用者特定資料夾。也可能想要建立 CSS 樣式表來為各個頁面或資料夾定義樣式。這類設定工作有一部分可以在 Contribute 中進行，但使用 Dreamweaver 設定網站比較容易。

此外，您還可以建立樣版供 Contribute 使用者用來建立新的網頁 (請參閱建立 Contribute 網站的樣版)。

如果想要建立網站，讓 Contribute 的使用者不費吹灰之力即可新增網頁，請參閱以下建議：

  • 網站結構必須保持簡單。

    資料夾的巢狀結構不宜過深。將相關的項目集中置於同一資料夾內。

  • 伺服器資料夾的讀寫權限必須設定正確。

    如需詳細資訊，請參閱讓 Contribute 使用者在不存取根資料夾的情況下存取樣版。

  • 當您在建立資料夾結構時，請為資料夾加上索引頁面，使 Contribute 的使用者能更容易地將新增頁面置於正確的資料夾內。

    例如，如果 Contribute 的使用者將提供包含會議記錄資訊的網頁，您可以在網站的根資料夾中建立名為 meeting_minutes 的資料夾，並在該資料夾中建立索引頁面。接著，您可以提供從網站首頁連至會議記錄索引頁面的連結。這樣 Contribute 的使用者便能瀏覽至該索引頁面，並以該索引頁面為連結起點，為某次會議的記錄建立新的頁面；新的頁面會在 meeting_minutes 資料夾中自動建立。

  • 每個資料夾的索引頁面，都會提供該資料夾內個別內容頁面與文件的連結清單。
  • 頁面設計越簡單越好，避免過份花俏的格式。
  • CSS 樣式的命名必須清楚。

    如果 Contribute 在您網站上作業的使用者，是使用 Microsoft Word 的一組標準樣式，請將您的 CSS 樣式命名為與對應的 Word 樣式相同之名稱。如此一來，當使用者將 Word 文件中的資訊複製至 Contribute 網頁時，Contribute 便可完成樣式對應工作。

  • 如果您不想讓 Contribute 使用者使用 CSS 樣式，您可以變更該樣式的名稱，而以「mmhide_」做為該名稱的開頭。

    例如，如果您在網頁中使用名為 RightJustified 的樣式，但您不想讓 Contribute 使用者使用該樣式，則可將該樣式重新命名為 mmhide_RightJustified。

    注意

    您必須在「程式碼」檢視中 (而不能在 CSS 面板中) 為樣式名稱加上「mmhide_」。
  • 使用 CSS 來取代 HTML 標籤。

    Contribute 會辨識 CSS 樣式並允許使用者加以套用。

  • 儘量不使用大量 CSS 樣式，以保持畫面簡單清爽。
  • 如果您在 HTML 頁面元素使用伺服器端文件 (SSI)，例如頁首或頁尾，請建立一個未連結的簡單 HTML 頁面，其中包含這些包含檔的連結。

    這樣 Contribute 的使用者便可標記該頁面，並使用該頁面來瀏覽包含檔以進行編輯。

相關主題

  • 設定 Dreamweaver 網站
  • 建立新文件
  • 使用階層式樣式表來格式化文字
  • 使用伺服器端包含


支援 Contribute 相容性的網站連線

在 Dreamweaver 中，您可以連線到現有的 Contribute 網站，並修改該網站上的檔案，方法與修改其他 Dreamweaver 網站上的檔案完全相同 (設定新的 Dreamweaver 網站)。當您連線的網站是設定為 Contribute 網站時 (且已有網站系統管理員)，Dreamweaver 會提示您啟動 Contribute 相容性。

如果您要為 Contribute 使用者準備一個現有的 Dreamweaver 網站，那麼您需要明確啟動 Contribute 相容性，才能使用 Contribute 相關的功能，Dreamweaver 並不會提示您這個動作。如需詳細資訊，請參閱準備 Contribute。

Dreamweaver 讓您可以透過多種方式連線到遠端網站 (包含 Contribute 網站)，但並不是所有的連線方式都支援 Contribute 相容性。特別要注意的是，連線方式受到以下限制：

  • 如果您使用 WebDAV 或 Microsoft Visual SourceSafe 連線到遠端網站，您就不能啟動 Contribute 相容性，因為這些來源控制系統與 Dreamweaver 用來管理 Contribute 網站的「設計備註」及「存回/取出」系統不相容。
  • 如果您使用 RDS 連線到遠端網站，則可啟動 Contribute 相容性，但啟動之後必須自訂連線，才能與 Contribute 使用者共用連線。
  • 如果您將本機電腦當作網路伺服器使用，則必須使用 FTP 或本機電腦的網路連線 (而不只是本機資料夾路徑) 來對網站進行設定，才能與 Contribute 使用者共用連線。


將檔案從 Contribute 網站上傳或下載

Contribute 使用的系統和 Dreamweaver 的「存回/取出」系統十分類似，確保一次僅能有一位使用者對特定的網頁進行編輯。當您啟動 Dreamweaver 中的 Contribute 相容性功能時，Dreamweaver 的「存回/取出」系統將會自動啟動。

當您使用 Dreamweaver 將檔案從 Contribute 網站上傳或下載時，請務必使用「存回/取出」命令。如果您並未使用「存回/取出」命令，而是用「上傳」及「下載」命令來傳送檔案，可能會覆寫 Contribute 的使用者先前對檔案所做的修改。

注意

如果您在 Contribute 網站上使用「上傳」命令，Dreamweaver 會自動將檔案存回，然後再將檔案取出，以減少您與其他使用者所做的變更互相衝突的機會。

將檔案從 Contribute 網站上取出的方法和從其他網站上取出完全相同。

當您將檔案存回 Contribute 網站時，Dreamweaver 會自動為該檔案先前存回的版本製作一份備份複本儲存在 _baks 資料夾中，並將您的使用者名稱及日期戳記加入「設計備註」檔案中，使其他人看見該檔案是何時存回的，以及是被誰存回的。如需關於自動備份複本的詳細資訊，請參閱讓 Contribute 使用者在不存取根資料夾的情況下存取樣版。

相關主題

  • 存回和取出檔案
  • 準備 Contribute


Contribute 伺服器上的檔案及資料夾權限

Contribute 可以讓您管理每個使用者角色 (由您所定義) 的檔案及資料夾權限。如需詳細資訊，請參閱 Contribute 中的「管理 Contribute」。Dreamweaver 的使用者不會受到這些權限影響，但 Contribute 會強制在 Contribute 使用者身上執行這些權限。

然而，您將無法透過 Contribute，管理伺服器指定給各個檔案及資料夾的讀寫權限。您可以直接在伺服器上管理這些權限。

您不妨將 Contribute 使用者角色，視為伺服器讀寫權限的表層覆蓋結構，例如，如果有一名使用者不具有某伺服器資料夾的寫入權限，因此即使他屬於某個角色的成員，而該角色根據 Contribute 的權限設定可對該資料夾進行寫入動作，他仍然無法寫入該資料夾。

如果有一名 Contribute 的使用者不具有伺服器上某個相關檔案的讀取權限 (例如在某個網頁中顯示的影像檔)，則該相關檔案的內容將不會出現在 Contribute 視窗中。例如，如果使用者不具有某個影像資料夾的讀取權限，則該資料夾中的影像在 Contribute 中會以中斷的影像圖示顯示。同樣地，Dreamweaver 的樣版儲存在網站根資料夾的某個子資料夾中，所以當 Contribute 的使用者不具有根資料夾的讀取權限時，便無法使用該網站的樣版，除非您將樣版複製至適當的資料夾。

當您設定網站時，必須要授予使用者適當的讀取權限，讓他們得以存取伺服器上 /_mm 資料夾 (根資料夾的 _mm 子資料夾)、/Templates 資料夾以及其他使用者會用到的資料夾。

如果因為某些原因而無法授予使用者讀取 /Templates 資料夾的權限，請參閱讓 Contribute 使用者在不存取根資料夾的情況下存取樣版，為使用者提供樣版。


Contribute 特殊檔案

Contribute 使用各種特殊檔案。當有瀏覽者前往您的網站時，正常情況下應該不會看到這些特殊檔案。這些檔案包括下列項目：

  • 共用設定檔案，具有模糊的檔名，副檔名則為 CSI，這個檔位於網站根資料夾下的 _mm 資料夾中，內含 Contribute 用來管理該網站的資訊
  • 檔案的先前版本，位於名為 _baks 的資料夾中 (請參閱讓 Contribute 使用者在不存取根資料夾的情況下存取樣版)
  • 網頁的暫時版本，供使用者預覽變更之用
  • 暫時鎖定檔案，表示某個頁面正在被人編輯或預覽
  • 「設計備註」檔案，包含網頁的中繼資料

一般說來，請勿使用 Dreamweaver 編輯任何一個 Contribute 的特殊檔案；Dreamweaver 會自動管理這些檔案。

如果不希望這些 Contribute 的特殊檔案出現在任何人都可以存取的伺服器上，您可以設定一個開發用伺服器，讓 Contribute 的使用者進行網頁作業。接著，您便可以定期將這些網頁從開發用伺服器複製至網路上的實際執行伺服器。如果您採用的是這種開發用伺服器方式，請勿將上述任何一個 Contribute 的特殊檔案複製至實際執行伺服器，僅需複製網頁即可。特別要注意的是，請勿將 _mm 及 _baks 資料夾複製至實際執行伺服器。

注意

如果您想要知道如何對伺服器進行設定，以避免瀏覽者看到以底線開頭之資料夾內含的檔案，請參閱「使用 Contribute」中的「網站安全性」。

在某些情況下，您或許會需要以手動方式刪除 Contribute 特殊檔案。例如，當使用者已完成預覽，Contribute 在某些狀況下可能無法刪除暫時預覽頁面；發生這種狀況時，您必須以手動方式刪除這些暫時頁面。暫時預覽頁面的檔名是以 TMP 開頭。

同樣地，在某些狀況下，過期的鎖定檔案可能會被不小心留在伺服器上。發生這樣的狀況時，您必須以手動方式將鎖定檔案刪除，其他使用者方能編輯該網頁。如需關於如何刪除鎖定檔案的資訊，請參閱解除鎖定 Contribute 網站上的檔案。


準備 Contribute

在使用 Dreamweaver 管理 Contribute 網站之前，您必須啟動 Contribute 相容性。根據連線的網站不同，可能會自動出現提示，要您啟動 Contribute 相容性。

注意

當您啟動 Contribute 相容性時，Dreamweaver 會自動啟動「設計備註」(包括「上傳設計備註以供共享使用」選項) 及「存回/取出」系統。

如果要為定義好的 Dreamweaver 網站啟動 Contribute 相容性功能：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 按一下「進階」索引標籤。
  4. 從左邊的分類清單中選取「Contribute」類別。
  5. 選取「啟用 Contribute 相容性」選項並完成該對話方塊。

    如需詳細資訊，請參閱設定「網站定義」對話方塊中 Contribute 類別的選項。

  6. 按一下「確定」，關閉「網站定義」對話方塊。
  7. 按一下「完成」，關閉「管理網站」對話方塊。

相關主題

  • 支援 Contribute 相容性的網站連線
  • 使用 Dreamweaver 管理 Contribute 網站


使用 Dreamweaver 管理 Contribute 網站

在啟用 Contribute 相容性之後 (請參閱準備 Contribute)，可以使用 Dreamweaver 啟動 Contribute，執行網站管理工作。

注意

您必須在同一部電腦上同時安裝 Contribute 與 Dreamweaver。

如果您是 Contribute 的網站系統管理員，您可以執行下列任何一項作業：

  • 變更網站的系統管理設定。

    Contribute 系統管理設定，是一組套用於網站上所有使用者的設定，您可以利用這些設定仔細地調整 Contribute，讓使用者享有更為順暢的使用經驗。

  • 變更授予給 Contribute 中使用者角色的權限。
  • 設定 Contribute 使用者。

    Contribute 的使用者需要特定的網站資訊，方能連結至該網站。您可以將這些資訊全都匯集在一個叫做「連線索引鍵」的檔案中，再傳送給 Contribute 使用者。

    注意

    連線索引鍵與 Dreamweaver 的匯出網站檔案並不相同。如果要匯出網站資訊來配合 Dreamweaver 使用，請參閱匯入和匯出網站。

    提示

    在傳送必要的連線資訊給 Contribute 使用者以便其編緝網頁之前，必須使用 Dreamweaver 為您的網站建立基本的資料夾階層 (請參閱 Contribute 網站的網站結構與網頁設計)，並且建立網站所需的任何樣版與 CSS 樣式表 (請參閱建立 Contribute 網站的樣版)。

如果要在 Dreamweaver 中管理 Contribute 網站：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 按一下「進階」索引標籤。
  4. 從左邊的分類清單中選取「Contribute」類別。
  5. 按一下「使用 Contribute 管理網站」按鈕。

    注意

    如果沒有啟動 Contribute 相容性，這個按鈕是不會出現的。如需關於如何啟用這一選項的資訊，請參閱準備 Contribute。
  6. 如果出現提示，請輸入系統管理員密碼，然後按一下「確定」。

    「管理網站」對話方塊便會出現。

  7. 請執行下列任何作業：
    • 若要變更系統管理設定，請從左側的清單中選取一個類別，然後依需要變更設定。
    • 若要變更角色設定，請在「使用者和角色」類別中按一下「編輯角色設定」按鈕，然後依需要變更設定。
    • 如果要傳送連線索引鍵以設定使用者，請在「使用者和角色」類別中按一下「傳送連線索引鍵」按鈕，並完成「連線精靈」。

      提示

      如需關於系統管理設定、管理使用者角色，或建立連線索引鍵的詳細資訊，請參閱「使用 Contribute」。
  8. 按一下「關閉」，關閉「管理網站」對話方塊。
  9. 按一下「確定」，關閉「網站定義」對話方塊。
  10. 按一下「完成」，關閉「編輯網站」對話方塊。

相關主題

  • 使用 Dreamweaver 管理 Contribute 檔案


使用 Dreamweaver 管理 Contribute 檔案

在 Contribute 網站上，大部分 Dreamweaver 功能的運作方式與在其他任何網站上運作時相同。不過，當您使用 Dreamweaver 對 Contribute 網站進行管理時，Dreamweaver 會自動執行某些檔案管理作業，例如儲存某份文件的多種修訂版本，以及記錄特定事件到 CPS 主控台。

本章旨在說明 Contribute 網站的檔案作業方式和其他網站的檔案作業有何不同。

如需關於如何從 Contribute 網站傳入與傳出檔案的詳細資訊，請參閱將檔案從 Contribute 網站上傳或下載。如需關於 Contribute 特殊檔案的詳細資訊，請參閱 Contribute 特殊檔案。

注意

Contribute 系統管理員可以將使用者指派至不同的「角色」，並指定各個角色的成員能夠執行哪些動作。當您使用 Dreamweaver 管理 Contribute 網站上的檔案時，將不會受到角色的限制；只有伺服器上的讀取和寫入權限會對您造成限制。如需關於各種不同權限的詳細說明，請參閱 Contribute 伺服器上的檔案及資料夾權限。

本節包含下列主題：

  • 對 Contribute 網站上的遠端檔案進行刪除、移動或重新命名
  • 對 Contribute 網站上的遠端檔案進行刪除、移動或重新命名
  • 讓 Contribute 使用者在不存取根資料夾的情況下存取樣版
  • 解除鎖定 Contribute 網站上的檔案
  • 記錄事件


對 Contribute 網站上的遠端檔案進行刪除、移動或重新命名

刪除裝載 Contribute 網站的遠端伺服器上的檔案，和刪除裝載 Dreamweaver 網站的伺服器上的檔案，兩者方法十分類似。然而，當您要刪除 Contribute 網站上的檔案時，Dreamweaver 會詢問您是否要刪除該檔案的所有先前版本。如果您選擇保留先前版本，Dreamweaver 會同時儲存目前版本的備份，供您日後復原之用。

對 Contribute 網站上的遠端檔案進行重新命名或移動至另一資料夾的動作，與在任何 Dreamweaver 網站上進行是一樣的。在 Contribute 網站上，Dreamweaver 也會對檔案的先前版本 (儲存於 _baks 資料夾中) 進行重新命名或移動的動作。

如果要刪除遠端檔案：

  1. 在「檔案」面板 (「視窗＞檔案」) 的遠端窗格中選取該檔案，然後按 Backspace 鍵 (Windows) 或 Delete 鍵 (Macintosh)。

    接著會出現對話方塊，詢問您是否真的要刪除該檔案。

  2. 如果確認對話方塊中出現「刪除復原版本」選項，請採用下列其中一種方法：
    • 如果要刪除所有先前版本及目前版本，請選取「刪除復原版本」選項。
    • 如果要保留伺服器上的先前版本，請取消選取「刪除復原版本」選項。
  3. 按一下「是」，刪除該檔案。

    檔案將被刪除。如果您選擇刪除先前版本，則這些檔案也會被刪除。如果您選擇不要刪除先前版本，則目前版本的備份將會被儲存於 _baks 資料夾中，做為該檔案的最新修訂版本。

相關主題

  • 讓 Contribute 使用者在不存取根資料夾的情況下存取樣版
  • 解除鎖定 Contribute 網站上的檔案


讓 Contribute 使用者在不存取根資料夾的情況下存取樣版

在 Contribute 網站上，您是直接在伺服器上管理其內的檔案和資料夾權限。如需詳細資訊，請參閱 Contribute 伺服器上的檔案及資料夾權限。

當您設定網站時，必須要授予使用者適當的讀取權限，讓他們得以存取伺服器上 /_mm 資料夾 (根資料夾的 _mm 子資料夾)、/Templates 資料夾以及其他使用者會用到的資料夾。建議您最好也授予使用者讀取伺服器上 /Templates 資料夾的權限。

如果因為某些因素而無法授予使用者讀取 /Templates 資料夾的權限，您仍然可以提供使用者樣版。

如果要讓 Contribute 的使用者在不具有主要網站根資料夾讀取權限的狀況下，仍能使用樣版：

  1. 對 Contribute 網站進行設定，使網站的根資料夾成為使用者眼中的根目錄。
  2. 使用「檔案」面板，以手動方式將樣版資料夾從主要網站的根資料夾複製至 Contribute 網站的根資料夾中。
  3. 在您完成主要網站的樣版更新之後，如果有必要的話，請將變更之後的樣版重新複製至對應的子資料夾中。

如果您採用的是這種方式，請不要在子資料夾中使用網站根目錄相對連結。與「網站根目錄相對連結」相對應的是伺服器上的主要根資料夾，而不是您在 Dreamweaver 中所定義的根資料夾。Contribute 的使用者無法建立「網站根目錄相對連結」。如需關於「網站根目錄相對連結」的詳細資訊，請參閱了解文件位置和路徑。

如果 Contribute 網頁中的連結出現中斷的情況，問題可能是出自資料夾權限，特別是當該連結是連線至 Contribute 使用者的根資料夾以外的網頁。請檢查伺服器上的資料夾讀寫權限。


解除鎖定 Contribute 網站上的檔案

有時 Contribute 網站上的遠端檔案看似已被取出，但事實上該檔案在使用者的電腦上並未被鎖定。發生這種狀況時，請將該檔案解除鎖定，讓使用者得以進行編輯。

注意

在依照此程序進行之前，請先確定該檔案事實上並未被取出。如果您在某個 Contribute 使用者仍在編輯檔案時將該檔案解除鎖定，就有可能發生數名使用者同時編輯該檔案的狀況。

如果要將某個被取出的檔案解除鎖定：

  1. 請執行下列其中一項作業：
    • 開啟「文件」視窗中的檔案，然後選取「網站＞還原取出」。
    • 在「檔案」面板中 (「視窗＞檔案」)，按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「還原取出」。

    接著可能會出現對話方塊，說明取出該檔案的人是誰，並請您確認是否要將該檔案解除鎖定。

  2. 如果出現此對話方塊，請按一下「是」加以確認。

    伺服器上的該檔案已經解除鎖定。


記錄事件

如果您正在連線的遠端網站已啟用 Contribute Publishing Server (CPS)，那麼每次當您觸發網路作業，例如存回、復原或發佈檔案時，Dreamweaver 便會通知 CPS，CPS 便會將這些事件記錄下來，您也可以在 CPS 系統管理主控台中檢視記錄檔。

注意

使用 Contribute 會自動啟用 CPS。如需詳細資訊，請參閱「管理 Contribute」。

若要開始記錄事件：

  • 請啟動 Dreamweaver 中的「Contribute 相容性」功能。

    如需詳細資訊，請參閱準備 Contribute。

若要檢視事件記錄檔：

  • 請切換到 CPS 系統管理主控台。

    如需詳細資訊，請參閱「管理 Contribute」。

若要停止記錄事件：

  • 請關閉「Contribute 相容性」功能。


Contribute 網站疑難排解

如果您遇到 Contribute 網站方面的疑難，請參閱以下特定主題來解決問題：

  • 如果您在連線到 Contribute 網站時遇到問題，請參閱 Contribute 網站連線問題的疑難排解。
  • 如果您在使用系統管理工具時遇到問題，請參閱 Contribute 系統管理工具的疑難排解。

如需關於疑難排解的詳細資訊，請參閱「管理 Contribute」中的疑難排解章節。


Contribute 網站連線問題的疑難排解

當您按一下關聯 Contribute 網站管理的任何按鈕時，Dreamweaver 就會驗證它是否能夠連線到您的遠端網站，以及您所提供的「網站根目錄 URL」是否有效。如果 Dreamweaver 無法連線或 URL 無效，則會出現錯誤訊息。

如果要檢查 Contribute 連線：

  1. 要在「網站定義」對話方塊的 Contribute 類別中檢查「網站根目錄 URL」，只需在瀏覽器中開啟該 URL，以確認是否開啟了正確的網頁即可。
  2. 使用位於「網站定義」對話方塊的「遠端資訊」類別中的「測試」按鈕，確定您可以順利連上該網站。
  3. 如果 URL 是正確的，但按下「測試」按鈕後卻出現錯誤訊息，請向您的系統管理員求助。

相關主題

  • Contribute 網站連線問題的疑難排解


Contribute 系統管理工具的疑難排解

如果系統管理工具無法正常運作，問題可能是出在 _mm 資料夾。

如果要檢查 _mm 資料夾：

  1. 請確認您擁有伺服器 _mm 資料夾的讀寫權限，需要的話，也請取得可執行權限。
  2. 請確認 _mm 資料夾含有副檔名為 CSI 的共用設定檔案。
  3. 如果沒有該檔案的話，請使用「連線精靈」(Windows) 或「連線小幫手」(Macintosh)，建立與網站的連線，並成為該網站的系統管理員。

    當您成為系統管理員時，該共用設定檔案會自動建立。如需關於成為現有 Contribute 網站系統管理員的詳細資訊，請參閱「管理 Contribute」。

相關主題

  • Contribute 網站連線問題的疑難排解


參考

本節將提供有關「網站定義」對話方塊中 Contribute 類別的相關資訊：

  • 設定「網站定義」對話方塊中 Contribute 類別的選項


設定「網站定義」對話方塊中 Contribute 類別的選項

請使用「網站定義」對話方塊中此類別的選項，啟動 Macromedia Contribute 相容性功能。

注意

您必須在同一部電腦上同時安裝 Contribute 與 Dreamweaver°C

若要配合使用 Dreamweaver 與 Contribute：

  1. 選取「啟動 Contribute 相容性」選項，使用 Dreamweaver 管理 Contribute 網站。

    當您啟動 Contribute 相容性時，Dreamweaver 會自動啟動「設計備註」(包括「上傳設計備註以供共享使用」選項) 及「存回/取出」系統。

  2. 如果出現對話方塊，說明您必須啟動「設計備註」及「存回/取出」，請按一下「確定」。
  3. 如果您尚未提供您的「存回/取出」聯絡資訊，就會出現對話方塊要您提供資訊；請在對話方塊中輸入您的姓名及電子信箱地址，然後按一下「確定」。

    「網站定義」對話方塊中會出現復原狀態、CPS 狀態、「網站根目錄 URL」文字方塊和「管理網站」按鈕。

    如果 Contribute 已啟用復原功能，您就可以將曾在 Dreamweaver 中變更過的檔案復原回先前的版本。如需詳細資訊，請參閱復原檔案 (Contribute 使用者)。

    如果遠端網站已啟用 CPS，那麼每次當您觸發網路作業，例如存回、復原或發佈檔案時，Dreamweaver 便會通知 CPS，CPS 便會將這些事件記錄下來，您也可以在 CPS 系統管理主控台中檢視記錄檔。如需詳細資訊，請參閱記錄事件。

    注意

    您必須先連線到遠端網站，才能啟用 Contribute 相容性，否則 Dreamweaver 會無法讀取 Contribute 的系統管理設定，也就無法得知是否已啟用 CPS 和復原功能。
  4. 檢查 Dreamweaver「網站根目錄 URL」中提供的 URL 是否正確，然後做必要的更正。

    Dreamweaver 會根據您所提供的其他網站定義資料，來建構網站根目錄 URL，但是有時所建構的 URL 並非完全正確。您必須確定 Dreamweaver 所使用的網站根目錄 URL 是正確的，才能開始管理 Contribute 網站。

  5. 請按一下「測試」按鈕，以確認您輸入的 URL 是正確的。

    注意

    如果您已準備好傳送連線索引鍵或執行 Contribute 網站管理工作，請略過其餘的步驟並參閱使用 Dreamweaver 管理 Contribute 網站。
  6. 按一下「使用 Contribute 管理網站」按鈕，開始管理。
  7. 按一下「確定」，關閉「網站定義」對話方塊。


設計頁面版面

在 Macromedia Dreamweaver 8 中使用視覺設計工具，建立複雜的頁面版面。

這部份包含下列各章：

使用 CSS 配置頁面

以表格呈現內容

在版面模式中配置頁面

使用頁框

管理樣版


使用 CSS 配置頁面

在 Macromedia Dreamweaver 8 中，您可以使用 CSS 樣式來配置頁面。您可以手動插入 Div 標籤後再套用 CSS 定位樣式，或是使用 Dreamweaver 圖層來建立版面。Dreamweaver 裡的圖層是一項 HTML 的頁面元素─尤其是 Div 標籤或任何其他標籤─可以指定絕對位置。

注意

即使您並未使用「圖層」繪製工具建立那些 Div 標籤，Dreamweaver 會以圖層絕對位置的方式，處理所有 Div 標籤。

提示

您可以使用 Dreamweaver 設計的檔案作為 CSS 版面的切入點。從「新增文件」對話方塊的「頁面設計 (CSS)」類別中，選取檔案 (請參閱以 Dreamweaver 設計檔建立文件)。

無論您是使用 CSS、表格或是頁框來配置頁面，Dreamweaver 都能以尺規和格線做為版面中的視覺化導引。Dreamweaver 也具有影像藍圖功能，可以用來重新建立在圖形應用程式中所建立的頁面設計。

注意

如果您不習慣使用圖層和「階層式樣式表 (CSS)」，但習慣使用表格的話，也可以嘗試使用表格或「版面」模式來設計頁面的版面 (請參閱以表格呈現內容和在版面模式中配置頁面)。

本章包含下列各節：

有關圖層－針對 Dreamweaver

插入圖層

設定圖層偏好設定和屬性

管理圖層

操作圖層

將圖層轉換為表格

將圖層做成動畫

插入版面的 Div 標籤

使用版面的 Div 標籤

變更 Div 標籤的反白標示顏色

使用 CSS 版面視覺化

使用尺規、導引線和格線來配置頁面

使用影像藍圖


有關圖層－針對 Dreamweaver

圖層是一項 HTML 頁面元素─尤其是 Div 標籤或任何其他標籤─可以指定絕對位置。圖層可以包含文字、影像或任何其他可以放在 HTML 文件內文中的內容。

注意

本章中所描述的圖層是指 Dreamweaver 的版面配置概念，而非「圖層」標籤。

本節包含下列概念性主題：

  • 了解圖層
  • 圖層的 HTML 程式碼


了解圖層

您可以使用 Dreamweaver 圖層來配置網頁。您可以重疊圖層、隱藏某些圖層時顯示其他圖層，以及將圖層橫越整個螢幕。您可以在一個圖層中放入背景影像，然後在上面加上第二個含有文字而背景透明的圖層。

圖層在放置內容上提供很大的彈性。然而，使用非常舊版網頁瀏覽器的網站瀏覽者，可能無法檢視圖層。為了確保每個人都可以檢視您的網頁，您可以使用圖層設計網頁，再將圖層轉換成表格。如需詳細資訊，請參閱將圖層轉換為表格。不過，如果您的使用者已使用任何較新的瀏覽器，您就可以完全使用圖層來設計版面，不需轉換成表格。

相關主題

  • 圖層的 HTML 程式碼
  • 管理圖層


圖層的 HTML 程式碼

當您將圖層放入文件時，Dreamweaver 會在程式碼中插入該圖層的 HTML 標籤。依預設值，Dreamweaver 是使用 Div 標籤來建立圖層。

注意

還有另外兩個標籤也可以用來建立圖層：layer 和 ilayer。然而，只有 Netscape Navigator 4 支援這些標籤，Internet Explorer 並不支援，而且 Netscape 在更新版本的瀏覽器中也並未繼續支援這些標籤。Dreamweaver 雖然可以辨識 layer 和 ilayer 標籤，但不會使用這些標籤建立圖層。

當您使用「繪製圖層」工具繪製圖層時，Dreamweaver 會在文件中插入 Div 標籤，然後指定圖層 ID 數值 (根據預設，Layer1 就是您繪製的第一個圖層，Layer2 就是您繪製的第二個圖層，依此類推)。然後，您可以使用「圖層」面板或「屬性」檢視窗，以您想要的任何名稱為圖層重新命名。Dreamweaver 也在文件檔頭中使用內嵌 CSS 以為圖層定位，並決定圖層確切的尺寸。

以下是圖層的 HTML 程式碼範例：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Layers Page</title>
<style type="text/css">
<!--
#Layer1 {

position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;

}
-->
</style>
</head>

<body>
<div id="Layer1"></div>
</body>
</html>

您可以設定頁面上的圖層屬性，包括「X」和「Y」座標、Z 軸 (也稱為堆疊順序) 以及顯示與否。如需詳細資訊，請參閱設定圖層偏好設定和屬性。

相關主題

  • 了解圖層


插入圖層

Dreamweaver 讓您在頁面上輕鬆建立圖層並精確定位。您也可以建立巢狀圖層。如需詳細資訊，請參閱巢狀化圖層。

注意

您可以使用 Dreamweaver 設計的檔案作為 CSS 版面的切入點。從「新增文件」對話方塊的「頁面設計 (CSS)」類別中，選取檔案 (請參閱以 Dreamweaver 設計檔建立文件)。

當您插入圖層時，Dreamweaver 會根據預設顯示該圖層的邊框，並當您將滑鼠指標移動至該區塊上時將該區塊反白顯示。您可以藉由同時停用「檢視＞視覺輔助」選單中的「圖層外框」和「CSS 版面外框」，來顯示圖層邊框。在設計時，您也可以開啟圖層的背景與方塊模型，以做為視覺輔助。如需詳細資訊，請參閱使用 CSS 版面視覺化。

若要變更圖層的反白標示顏色，或停用反白標示功能，請參閱變更 Div 標籤的反白標示顏色。

在您建立圖層後，藉由將插入點放在圖層中，然後就像將內容新增至頁面一樣來新增內容，即可以將內容新增到圖層中。

繪製單一或連續繪製多個圖層：

  1. 在「插入」列的「版面」類別中，按一下「繪製圖層」按鈕。 這是描述功能的圖片。
  2. 請在「文件」視窗的「設計」檢視中，請執行下列其中一項作業：
    • 拖曳以繪製單一圖層。
    • 按住 Control (Windows) 或 Command (Macintosh) 不放並拖曳，以連續繪製多個圖層。

      只要您不放開 Control 或 Command 鍵，就可以繼續繪製新圖層。

將圖層插入文件中的特定位置：

  • 將插入點放置在「文件」視窗中，然後選取「插入＞版面物件＞圖層」。

    注意

    這個程序會將圖層的標籤放置在您在「文件」視窗中所按的地方。圖層的視覺呈現，可能會影響圖層周圍的其他頁面元素 (例如文字)。

在圖層中放置插入點：

  • 在圖層邊框內任何地方按一下。

圖層的邊框便會反白標示，而選取範圍控制點便會出現，但不會選取圖層本身。如需關於選取圖層的詳細資訊，請參閱選取圖層。

顯示圖層邊框：

  • 請選取「檢視＞視覺輔助」，然後選取「圖層外框」或「CSS 版面外框」。

    注意

    同時選取兩個選項會產生相同的效果。

隱藏圖層邊框：

  • 請選取「檢視＞視覺輔助」，然後同時取消選取「圖層外框」與「CSS 版面外框」。

相關主題

  • 巢狀化圖層
  • 設定圖層偏好設定和屬性
  • 管理圖層
  • 操作圖層


巢狀化圖層

巢狀圖層是其程式碼包含在另一個圖層中的圖層。巢狀結構經常用來將圖層組成群組。巢狀圖層會隨著它的父圖層移動，而且可以設定是否要顯示繼承父圖層。

您可以開啟「巢狀結構」選項，那麼在另一個圖層內部繪製圖層時，便能夠自動巢狀化。

繪製巢狀圖層：

  1. 在「插入」列的「版面」類別中，按一下「繪製圖層」按鈕。 這是描述功能的圖片。
  2. 在「文件」視窗的「設計」檢視中，拖曳以便在現有的圖層內繪製圖層：

    如果「圖層」偏好設定中的「巢狀化」是關閉的，請按住 Alt 鍵 (Windows) 或 Option 鍵 (Macintosh) 不放，同時在現有圖層內部拖曳以巢狀化圖層。

    提示

    巢狀圖層在不同瀏覽器中可能顯示結果不同。在建立巢狀圖層的設計過程中，要經常在各種瀏覽器上檢查它們的外觀。

插入巢狀圖層：

  • 在「文件」視窗「設計」檢視中，將插入點放在現有圖層內，然後選取「插入＞圖層」。

使用圖層面板將現有圖層在另一個圖層內巢狀化：

  1. 選取「視窗＞圖層」以開啟「圖層」面板。
  2. 在「圖層」面板中選取圖層，然後按住 Control 鍵 (Windows) 或 Command 鍵 (Macintosh)，再拖曳圖層到「圖層」面板中的目標圖層。
  3. 當目標圖層的名稱反白標示時，放開滑鼠按鈕。

當您從另一個圖層內部開始繪製圖層時自動巢狀化圖層：

  • 選取「圖層」偏好設定中的「巢狀結構」選項。

    如需詳細資訊，請參閱設定圖層偏好設定。

相關主題

  • 插入圖層
  • 管理圖層
  • 操作圖層


設定圖層偏好設定和屬性

您可以指定圖層的預設設定。您可以使用「屬性」檢視窗，檢視與設定一或多個圖層的各種不同屬性。

本節包含下列主題：

  • 設定圖層偏好設定
  • 檢視和設定單一圖層的屬性
  • 檢視和設定多個圖層的屬性


設定圖層偏好設定

使用「偏好設定」對話方塊中的「圖層」類別，為您建立的新圖層指定預設值。

檢視或設定圖層偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 在左側的「分類」清單中選取「圖層」。
  3. 必要時進行變更。

    如需詳細資訊，請參閱設定圖層偏好設定對話方塊選項。

  4. 按一下「確定」。

相關主題

  • 檢視和設定單一圖層的屬性
  • 檢視和設定多個圖層的屬性


檢視和設定單一圖層的屬性

當您選取圖層時，「屬性」檢視窗便會顯示圖層屬性。

檢視和設定圖層屬性：

  1. 選取圖層 (請參閱選取圖層)。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，按一下右下角的展開箭頭 (如果還沒有展開)，檢視所有的屬性。

  3. 視需要設定屬性，以變更圖層的屬性。

    如需詳細資訊，請參閱設定圖層屬性。

相關主題

  • 設定圖層偏好設定
  • 檢視和設定多個圖層的屬性
  • 管理圖層


檢視和設定多個圖層的屬性

當您選取兩個或更多圖層時，圖層「屬性」檢視窗便會顯示文字屬性和完整圖層屬性的子集，以便您一次修改數個圖層。

選取多個圖層：

  • 按住 Shift 鍵，同時選取圖層 (請參閱選取圖層)。

檢視並設定多個圖層的屬性：

  1. 選取多個圖層。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，按一下右下角的展開箭頭 (如果還沒有展開)，檢視所有的屬性。

  3. 設定屬性以變更圖層的屬性。

    如需詳細資訊，請參閱設定多個圖層的屬性。

相關主題

  • 設定圖層偏好設定
  • 檢視和設定單一圖層的屬性
  • 管理圖層


管理圖層

您可以選取圖層來加以使用。您也可以更改圖層的堆疊順序和顯示與否。「圖層」面板提供了方便的管理圖層方式。

本節包含下列主題：

  • 使用圖層面板
  • 選取圖層
  • 變更圖層的堆疊順序
  • 變更圖層顯示狀態


使用圖層面板

「圖層」面板可以管理文件中的圖層。使用「圖層」面板以防止重疊、變更圖層的顯示、巢狀化或堆疊圖層，以及選取一個或多個圖層。

開啟圖層面板：

  • 選取「視窗＞圖層」。

圖層以名稱清單的方式顯示，以 Z 軸為排列順序。根據預設，第一個建立的圖層 (Z 軸值為 1)，會出現在清單的底部，而最新建立的圖層 (Z 軸值大於 1) 會出現在清單的頂端。您可以更改圖層的 Z 軸值；然而，要在堆疊順序中更改其位置。例如，如果您建立了八個圖層，且想讓第四個圖層做為堆疊順序的「頂端」圖層，您可以指定一個比其他所有圖層都高的 Z 軸值給它。

如需關於使用「圖層」面板的詳細資訊，請參閱下列各主題：

  • 插入圖層
  • 選取圖層
  • 變更圖層的堆疊順序
  • 變更圖層顯示狀態
  • 避免圖層重疊


選取圖層

您可以選取一個或多個圖層，以操作或變更其屬性。

選取圖層面板中的圖層：

  • 在「圖層」面板 (「視窗＞圖層」) 中，按一下圖層的名稱。

選取文件視窗中的圖層，請執行下列其中一項作業：

  • 按一下圖層的選取範圍控制點。

    如果看不到選取範圍控制點，請在圖層內任何地方按一下便能看到控制點。

  • 按一下圖層的邊框。
  • 於圖層內按下 Control + Shift 鍵 (Windows) 或 Command + Shift 鍵 (Macintosh)。
  • 按一下圖層內部，然後按 Control + A (Windows) 或 Command + A (Macintosh)，以選取圖層的內容。再按 Control + A 或 Command + A，以選取圖層。
  • 按一下圖層內部，然後在標籤選取器中選取圖層的標籤。

選取多個圖層，請執行下列其中一項作業：

  • 在「圖層」面板 (「視窗＞圖層」) 中，按住 Shift 鍵，再按一下兩個或多個圖層的名稱。
  • 在「文件」視窗中，按住 Shift 鍵，再於兩個或更多圖層中的邊框上按一下。

相關主題

  • 插入圖層
  • 設定圖層偏好設定和屬性
  • 管理圖層
  • 操作圖層


變更圖層的堆疊順序

使用「屬性」檢視窗或「圖層」面板，變更圖層的堆疊順序。「圖層」面板清單頂端的圖層即是堆疊順序的頂端，並且在其他圖層的前面出現。

在 HTML 程式碼中，圖層的堆疊順序 (或 z 軸) 決定了它們在瀏覽器中繪製的順序。圖層的 Z 軸值越高，圖層在堆疊順序中的位置也就越高。您可以使用「圖層」面板或「屬性」檢視窗，來變更每一個圖層的 Z 軸。

在圖層面板中變更圖層的堆疊順序：

  1. 選取「視窗＞圖層」以開啟「圖層」面板。
  2. 將圖層上下拖曳成想要的堆疊順序。

    當您移動圖層時會出現一條線，指示圖層出現的位置。當位置線出現在堆疊順序的所需位置時，放開滑鼠按鈕。

使用「屬性」檢視窗變更圖層的堆疊順序：

  1. 選取「視窗＞圖層」以開啟「圖層」面板，查看目前的堆疊順序。
  2. 在「圖層」面板或「文件」視窗中選取圖層。
  3. 在圖層「屬性」檢視窗 (「視窗＞屬性」) 的「Z 軸」文字方塊中，輸入數字。
    • 輸入較大數字，將圖層的堆疊順序往上移。
    • 輸入較小數字，將圖層的堆疊順序往下移。

相關主題

  • 使用圖層面板
  • 選取圖層
  • 變更圖層顯示狀態


變更圖層顯示狀態

在文件上工作時，您可以使用「圖層」面板手動顯示和隱藏圖層，看看頁面在不同狀況下的外觀。

注意

目前所選取的圖層一律都會顯示，並會在選取時在其他圖層前面出現。

變更圖層顯示狀態：

  1. 選取「視窗＞圖層」以開啟「圖層」面板。
  2. 按一下圖層的眼睛圖示欄，以變更顯示狀態。
    • 張開的眼睛表示圖層會顯示。
    • 閉上的眼睛表示圖層不顯示。
    • 如果沒有眼睛圖示，圖層通常會繼承其父圖層的顯示狀態。(例如圖層不是巢狀時，父圖層就是一律都會顯示的文件內文)。

      而在沒有指定是否要顯示時 (這在「屬性」檢視窗中以「預設」顯示方式出現)，眼睛圖示便不會出現。

一次變更所有圖層的顯示：

  • 在「圖層」面版 (「視窗＞圖層」) 中，按一下欄位頂端的標題眼睛圖示。

    注意

    這個程序可以將所有圖層設定為顯示或隱藏，但不是繼承。

相關主題

  • 使用圖層面板
  • 變更圖層的堆疊順序


操作圖層

使用頁面版面時，您可以選取、移動、調整大小和對齊圖層。您必須先選取圖層，才可以進行移動、調整大小和對齊等操作。

若要在移動和調整圖層大小時，防止圖層彼此重疊，請使用「避免重疊」選項 (請參閱避免圖層重疊)。

本節包含下列主題：

  • 調整圖層大小
  • 移動圖層
  • 對齊圖層


調整圖層大小

您可以調整個別圖層的大小，或同時調整多個圖層大小，好讓它們具有相同的寬度和高度。

如果「避免重疊」選項是開啟的，您將無法調整圖層的大小以讓圖層與其他圖層重疊 (請參閱避免圖層重疊)。

調整圖層大小：

  1. 在「設計」檢視中，選取圖層 (請參閱選取圖層)。
  2. 請執行下列其中一項作業以調整圖層大小：
    • 若要以拖曳方式調整大小，請拖曳圖層的任何一個調整大小控制點。
    • 若要一次調整一個像素，請按住 Control (Windows) 或 Option (Macintosh)，再按方向鍵。

      方向鍵只能移動圖層的右方和下方邊框；您無法以這個技巧移動上方和左方邊框來調整大小。

    • 若要以貼齊格線距離來調整大小，請先按住 Shift + Control (Windows) 或 Shift + Option (Macintosh)，再按方向鍵。

      如需關於設定貼齊格線距離的詳細資訊，請參閱使用影像藍圖。

    • 在「屬性」檢視窗 (「視窗＞屬性」) 中，輸入寬度 (W) 和高度 (H) 的值。

調整圖層大小會變更圖層的寬度和高度，這不會定義圖層所顯示的內容多寡。若要定義圖層內的顯示區域，請參閱設定圖層偏好設定和屬性。

一次調整多個圖層的大小：

  1. 在「設計」檢視中，選取兩個或更多圖層 (請參閱選取圖層)。
  2. 請執行下列其中一項作業：
    • 選取「修改＞對齊＞設定成同寬度」或「修改＞對齊＞設定成同高度」。

      首先選取的圖層，與最後選取圖層的寬度和高度會一致。

    • 在「屬性」檢視窗 (「視窗＞屬性」) 中的「多重圖層」之下，輸入寬度和高度值。

    這些值會套用到所有選取的圖層。

相關主題

  • 移動圖層
  • 對齊圖層
  • 使用影像藍圖


移動圖層

您可以在「設計」檢視中，以常見基本圖形應用程式中移動物件方式來移動圖層。

如果「防止重疊」選項是開啟的，您將無法調整圖層的大小而使圖層與其他圖層重疊。請參閱避免圖層重疊。

移動一或多個已選取的圖層：

  1. 在「設計」檢視中，選取一個或多個圖層 (請參閱選取圖層)。
  2. 請執行下列其中一項作業：
    • 若要以拖曳的方式來移動，請拖曳最後選取圖層 (以黑色標示) 的選取範圍控制點。
    • 若要一次移動一個像素，請使用方向鍵。

      按住 Shift 鍵，再按方向鍵，以依照目前貼齊格線的距離來移動圖層。如需關於設定貼齊格線距離的詳細資訊，請參閱使用影像藍圖。

相關主題

  • 調整圖層大小
  • 對齊圖層
  • 使用影像藍圖


對齊圖層

使用「圖層對齊」命令，可以將一個或多個圖層與最後選取圖層的邊框對齊。

當您對齊圖層時，未選取的子圖層，可能會因為其父圖層已選取與移動而跟著移動。若要防止這點，請不要使用巢狀圖層。

對齊兩個或更多圖層：

  1. 在「設計」檢視中，選取圖層 (請參閱選取圖層)。
  2. 選取「修改＞排列」，然後選取對齊選項。

    例如，如果您選取「靠上對齊」，所有圖層都會移動，使上邊框與最後選取圖層 (以黑色標示) 的上邊框處於相同的垂直位置。

相關主題

  • 調整圖層大小
  • 移動圖層
  • 使用影像藍圖


將圖層轉換為表格

有些網頁設計師在建立版面配置時，偏好使用圖層而不願使用表格或「版面」模式。Dreamweaver 可以讓您使用圖層來製作版面，然後 (如果想要) 再轉換成表格。例如，您若要支援 4.0 版之前的瀏覽器，就可能必須要將圖層轉換為表格。

注意

您無法將樣版文件中或已套用樣版的文件中之表格或圖層互相轉換。因此，您必須在非樣版文件中建立版面，並在儲存為樣版之前先將其轉換。

您可以在圖層和表格之間來回轉換，調整版面以使網頁設計達到最佳化。您無法只轉換頁面上特定的表格或圖層，而必須將整個頁面上所有的圖層轉換為表格，或將所有的表格轉換為圖層。

注意

從圖層轉換為表格可能會導致表格中有大量的空白儲存格。

本節包含下列主題：

  • 避免圖層重疊
  • 在圖層和表格之間轉換


避免圖層重疊

因為表格儲存格無法重疊，Dreamweaver 無法自重疊的圖層建立表格。如果您打算將文件中的圖層轉換為表格，請使用「防止重疊」選項來限制圖層的移動和定位，使圖層不至於重疊。

當這個選項開啟時，就無法在現有圖層之前建立、移動圖層或調整圖層大小，或是在現有圖層內建立巢狀圖層。如果您在建立重疊圖層之後啟動這個選項，請將每一個重疊圖層拖曳離開其他圖層。當您啟用「防止圖層重疊」時，Dreamweaver 不會自動修正頁面中現有的重疊圖層。

啟用防止圖層重疊與和貼齊選項後，如果在會造成兩個圖層重疊的情況下，就不會貼齊格線。如果不會重疊，便會貼齊最接近圖層的邊緣。

注意

這是新的「註解」表格，附加於某個 Table_anchor 段落標籤上。若要建立，請從參考頁面複製後再貼上。

注意即使啟用「防止重疊」選項，某些特定動作仍允許您重疊圖層。如果您使用「插入」選單以插入圖層、在「屬性」檢視窗中輸入數字，或編輯 HTML 原始碼將圖層重新定位，可以在這個選項啟用時使圖層重疊或巢狀化。如果發生重疊情形，請在「設計」檢視中拖曳重疊的圖層來分開。

防止圖層重疊，請執行下列其中一項作業：

  • 在「圖層」版面 (「視窗＞圖層」) 中，選取「防止重疊」選項。
  • 在「文件」視窗中，選取「修改＞排列＞防止圖層重疊」。

相關主題

  • 在圖層和表格之間轉換


在圖層和表格之間轉換

您可以使用圖層建立版面，然後將圖層轉換為表格，以便在較舊的瀏覽器中檢視版面。

在轉換為表格之前，請先確定圖層並未重疊 (請參閱避免圖層重疊)。

將圖層轉換為表格：

  1. 選取「修改＞轉換＞圖層轉換為表格」。

    「圖層轉換為表格」對話方塊便會出現。

  2. 選取您要的選項。

    如需詳細資訊，請參閱設定圖層轉換為表格對話方塊選項。

  3. 按一下「確定」。

    圖層轉換為表格。

轉換表格為圖層：

  1. 選取「修改＞轉換＞表格轉換為圖層」。

    「表格轉換為圖層」對話方塊便會出現。

  2. 選取您要的選項。

    如需詳細資訊，請參閱設定表格轉換為圖層對話方塊選項。

  3. 按一下「確定」。

    表格便會轉換為圖層。空的儲存格除非有背景顏色，否則不會轉換為圖層。

    注意

    表格外部的頁面元素也會放在圖層中。


將圖層做成動畫

動態 HTML 或 DHTML 表示 HTML 與 Script 程式語言 (可以讓您變更 HTML 元素的樣式或定位屬性) 的結合。在 Dreamweaver 裡的時間軸會使用動態 HTML 以隨時間變更圖層和影像的屬性。使用時間軸建立動畫並不需要任何 ActiveX 控制項、外掛程式或 Java Applet (但一定要有 JavaScript)。

注意

動態這個字在不同與網站有關的內容中有不同的意義。不要將動態 HTML 與動態網頁的概念搞混了，後者表示網頁在提供給瀏覽者之前，先由伺服器端程式碼動態所產生的。

時間軸可以讓您變更圖層的位置、大小、顯示和堆疊順序。(時間軸的圖層函式只可以在 4.0 版或更新的瀏覽器中使用)。如果要在頁面載入後產生其他動作，時間軸也很有用處。例如，時間軸可以變更影像標籤的原始檔案，讓不同的影像隨時間出現在頁面中。

若要查看時間軸產生的 JavaScript，請開啟「文件」視窗的「程式碼檢視」。時間軸程式碼在 MM_initTimelines 函式 (在文件 head 區段的 Script 標籤內) 中。

編輯文件的 HTML (含有時間軸) 時，請確定您沒有移動、重新命名或刪除時間軸所參考到的任何項目。


使用時間軸面板

「時間軸」面板會顯示圖層和影像的屬性隨時間變更的方式。選取「視窗＞時間軸」，開啟「時間軸」面板。

時間軸彈出式選單指定目前顯示在「時間軸」面板中的文件時間軸。

播放頭指出目前顯示在「文件」視窗中的時間軸影格。

影格編號表示影格的順序號碼。「後退」和「播放」按鈕之間的數字就是目前的影格編號。您可以設定影格總數和每秒的影格數 (fps)，控制動畫的持續時間。每秒 15 影格的預設值對大多數在一般 Windows 和 Macintosh 系統執行的瀏覽器來說，是不錯的平均速率。

注意

較快的速率不一定能增進效能。即使影格無法獲得指定的影格速率，瀏覽器還是會播放動畫的每一個影格。如果影格速率比瀏覽器所能處理的要高，則影格速率會被忽略。

快速選單包含各種時間軸相關命令。

行為控制版是時間軸中特定影格上應執行行為的控制板。

動畫列顯示每個物件的動畫持續時間。單獨一列可以包含多個代表不同物件的控制列。不同控制列不能控制相同影格中的相同物件。

關鍵影格是控制列中的影格，您在控制列中已經指定物件的屬性 (例如位置)。Dreamweaver 會替關鍵影格之間的影格計算中間值。關鍵影格由小圓圈標示。

動畫控制板顯示動畫圖層和影像的控制列。


播放選項

以下是用來檢視動畫的播放選項。

倒帶移動播放頭到時間軸中的第一個影格。

後退將播放頭向左移動一個影格。按一下「後退」並按住滑鼠按鈕，可以將時間軸倒帶播放。

播放將播放頭向右移動一個影格。按一下「播放」並按住滑鼠按鈕，可以將時間軸向前播放。

自動播放會在目前頁面載入瀏覽器時，使時間軸進行自動播放。「自動播放」會附加行為至頁面的 body 標籤，這個行為會在頁面載入時執行「播放時間軸」動作。

重複使頁面在瀏覽器中開啟時，不斷重複目前的時間軸。「重複」會在動畫的最後影格之後，將「前往時間軸影格」行為插入「行為」控制板中。按兩下「行為」控制板中的行為標記，可以編輯這個行為的參數並變更重複的次數。


使用時間軸動畫移動圖層

最常見的時間軸動畫類型包括沿著路徑移動圖層。時間軸只會移動圖層。若要讓影像或文字移動，請使用「插入」列上的「繪製圖層」按鈕建立圖層，然後在圖層中插入影像、文字或任何其他類型的內容 (請參閱插入圖層)。

時間軸也可以變更圖層和影像的其他屬性。如需詳細資訊，請參閱使用時間軸變更影像和圖層的屬性。

使用時間軸將圖層做成動畫：

  1. 將圖層移動到動畫開始時的位置。
  2. 選取「視窗＞時間軸」。
  3. 選取您要做成動畫的圖層。

    請確定您已經選取需要的元素。按一下圖層標記或圖層選取範圍控制點，或使用「圖層」面板選取圖層。如需詳細資訊，請參閱操作圖層。選取圖層時，控制點便會出現在周圍，如下圖所示。

    按一下圖層內部，便會在圖層內置入閃爍的插入點，但這並沒有選取圖層。

  4. 選取「修改＞時間軸＞新增物件至時間軸」，或只是拖曳選取的圖層到「時間軸」面板內。

    控制列便會在時間軸的第一個控制板中出現。圖層的名稱便會在控制列中出現。

  5. 按一下控制列末端的關鍵影格標記。
  6. 將頁面上的圖層移動到動畫結束時的位置。

    「文件」視窗中會出現一條線，顯示動畫的路徑。

  7. 如果您要圖層以曲線方式移動，請選取它的動畫列，並按住 Control 鍵 (Windows) 或 Command 鍵 (Macintosh)，再用滑鼠按一下動畫列中間的影格，在您按下的影格上新增關鍵影格，或按一下動畫列中間的影格，並自快速選單中選取「新增關鍵影格」。

    重複這個步驟，定義其他關鍵影格。

  8. 按住「播放」按鈕，預覽頁面上的動畫。

    重複程序以將額外的圖層和影像增加至時間軸，建立更為複雜的動畫。


拖曳路徑以建立時間軸

如果您要建立含有複雜路徑的動畫，比較有效率的作法，是在拖曳圖層時記錄路徑，而不是個別地建立關鍵影格。

拖曳路徑以建立時間軸：

  1. 選取圖層。
  2. 將圖層移動到動畫開始時的位置。

    請確定您已經選取圖層，如果插入點在圖層中，就表示沒有選取圖層。若要選取圖層，按一下圖層標記或圖層選取範圍控制點，或使用「圖層」面板。如需詳細資訊，請參閱操作圖層。

  3. 選取「修改＞時間軸＞紀錄圖層路徑」。
  4. 在頁面上四處拖曳圖層以建立路徑。
  5. 在動畫應該停止的地方放開圖層。

    Dreamweaver 會將動畫列新增至時間軸，內含相對數目的關鍵影格。

  6. 在「時間軸」面板中按一下「倒帶」按鈕，然後按住「播放」按鈕預覽動畫。


修改時間軸

定義時間軸的基本元件之後，您即可進行變更，例如新增和移除影格、變更動畫的開始時間等。

修改時間軸，請執行下列其中一項作業：

  • 若要讓動畫播放的時間長一點，請向右拖曳結尾影格標記。動畫中的所有關鍵影格都會移位，好讓彼此的相對位置保持不變。若要防止其他關鍵影格移動，請按住 Control 鍵，再拖曳結尾影格標記。
  • 若要讓圖層早一點或晚一點到達關鍵影格位置，請在控制列中向左或向右移動關鍵影格標記。
  • 若要變更動畫的開始時間，請選取一個或多個與動畫相關的控制列 (按下 Shift 鍵一次選取一個以上的控制列) 並向左或向右拖曳。
  • 若要移動整個動畫路徑的位置，請選取整個控制列，然後拖曳頁面上的物件。Dreamweaver 會調整所有關鍵影格的位置。對選取的整個控制列進行任何類型的變更，將會變更所有關鍵影格。
  • 若要在時間軸中新增或移除影格，請選取「修改＞時間軸＞新增影格」或「修改＞時間軸＞移除影格」。
  • 若要讓時間軸在頁面於瀏覽器中開啟時自動播放，請按一下「自動播放」。在頁面載入時，「自動播放」會附加行為至執行「播放時間軸」動作的頁面。
  • 若要讓時間軸持續重複，請按一下「重複」。「重複」會在動畫的最後影格之後，將「前往時間軸影格」動作插入「行為」控制板中。您可以編輯這個行為的參數，定義重複的次數。


使用時間軸變更影像和圖層的屬性

除了以時間軸來移動圖層之外，您還可以變更圖層的顯示、大小和堆疊順序，也可以變更影像的原始檔案。

使用時間軸變更影像和圖層的屬性：

  1. 在「時間軸」面板中，請執行下列其中一項作業：
    • 在控制您要變更物件的控制列中，選取現有關鍵影格 (起始和結尾影格永遠是關鍵影格)。
    • 按一下動畫列中間的影格，建立新關鍵影格，並選擇「修改＞時間軸＞新增關鍵影格」。您也可以按住 Control 鍵 (Windows) 或 Command 鍵 (Macintosh)，再按一下動畫列中的影格，建立新關鍵影格。
  2. 請執行下列其中一項作業，為物件定義新屬性：
    • 若要變更影像的原始檔案，請在「屬性」檢視窗中按一下緊鄰「原始檔」文字方塊的資料夾圖示，然後瀏覽並選取新影像。
    • 若要變更圖層是否顯示，請在「屬性」檢視窗的「顯示」文字方塊中，從彈出式選單選取「繼承」、「顯示」或「隱藏」。或者，使用「圖層」面板中的眼睛圖示。請參閱變更圖層顯示狀態。
    • 若要變更圖層的大小，請拖曳圖層的調整大小控制點或在「屬性」檢視窗的「寬度」和「高度」文字方塊中輸入新值。不是所有瀏覽器都會動態變更圖層的大小。
    • 若要變更圖層的堆疊順序，請在「Z 軸」文字方塊輸入新值，或使用「圖層」面板來變更目前圖層的堆疊順序 (請參閱變更圖層的堆疊順序)。
  3. 按住「播放」按鈕以觀看動畫。


使用多個時間軸

與其以一個時間軸來嘗試控制頁面上的所有動作，倒不如使用控制頁面上不同部份的不同時間軸來得輕鬆。例如，頁面可能包括許多互動元素，每一個元素都會觸發不同的時間軸。

管理多個時間軸，請執行下列其中一項作業：

  • 若要建立新時間軸，請選取「修改＞時間軸＞新增時間軸」。
  • 若要移除選取的時間軸，請選取「修改＞時間軸＞移除時間軸」。這會從選取的時間軸中永久移除所有動畫。
  • 若要重新命名選取的時間軸，請選取「修改＞時間軸＞重新命名時間軸」，或在「時間軸」面板的「時間軸」彈出式選單中輸入新名稱。
  • 若要在「時間軸」面板中檢視不同時間軸，請從「時間軸」面板裡的「時間軸」彈出式選單中，選取新時間軸。


複製和貼上動畫

一旦有喜歡的連續動畫，您就可以將它複製並貼到目前時間軸的其他區域、相同文件的其他時間軸，或其他文件的時間軸中。您也可以一次複製並貼上多個連續圖畫。

剪下或拷貝並貼上連續動畫：

  1. 按一下動畫列，選取連續圖畫。若要選取多個連續圖畫，請按住 Shift 鍵，再按下多個動畫列。若要選取所有連續圖畫，請按下 Control + A (Windows) 或 Command + A (Macintosh)。
  2. 複製或剪下選取範圍。
  3. 請執行下列其中一項作業：
    • 將播放頭移動到目前時間軸的另一點。
    • 從「時間軸」彈出式選單選取另一個時間軸。
    • 開啟另一個文件，或建立一個新文件，然後在「時間軸」面板中按一下。
  4. 將選取範圍貼入時間軸。

    具有相同物件的動畫列無法重疊，因為圖層不能同一時間在兩個地方 (影像也不能同時擁有兩個不同來源)。如果要貼上的動畫列將會與另一個相同物件的動畫列重疊，Dreamweaver 便會自動將選取範圍移到沒有重疊的第一個影格。

在將連續動畫貼入另一個文件時，有兩個原則要牢記：

  • 如果您複製圖層的連續動畫，而新文件包含也相同名稱的圖層，Dreamweaver 便會在新文件中將動畫屬性套用至現有圖層中。
  • 如果您複製圖層的連續動畫，而新文件不包含相同名稱的圖層，Dreamweaver 將會從原始文件連同連續動畫貼上圖層及其內容。若要在新文件中將貼上的連續動畫套用至另一個圖層，請從快速選單中，選取「變更物件」，並自彈出式選單中，選取第二個圖層的名稱。如果需要的話，請刪除貼上的圖層。請參閱套用連續動畫至不同物件。


套用連續動畫至不同物件

若要節省時間，您可以一次建立連續動畫，並套用至文件中剩餘的各個圖層。

套用現有連續動畫至其他物件：

  1. 在「時間軸」面板中，選取連續動畫並複製。
  2. 按一下「時間軸」面板的任何影格，並在該影格貼上連續圖畫。
  3. 在貼上的連續動畫上，按一下滑鼠右鍵 (Windows) 或按 Control + 按一下 (Macintosh)，再從快速選單中，選取「變更物件」。
  4. 在出現的對話方塊中，從彈出式選單選取另一個物件，然後按一下「確定」。
  5. 針對您要接續的相同連續動畫的其他物件，重複步驟 2 到 4。

您也可以在建立連續動畫之後改變主意，決定哪一個圖層應該做成動畫，只要遵照上述的步驟 3 和 4 (複製或貼上不是必要的)。


重新命名時間軸

您可以重新命名時間軸。

重新命名目前顯示在時間軸面板中的時間軸：

  1. 請選取「修改＞時間軸＞重新命名時間軸」。
  2. 在「重新命名時間軸」對話方塊中輸入新名稱。

如果您的文件含有「播放時間軸」行為動作 (例如，如果它含有瀏覽者必須按一下以啟動時間軸的按鈕)，您必須編輯行為以反映新的時間軸名稱。


時間軸的動畫提示

下列建議可以改進您動畫的效能，讓動畫製作更為容易：

  • 顯示和隱藏圖層，而不要變更多重影像動畫的原始檔案。切換影像的原始檔案必須要下載新的影像，因此動畫會變慢。如果在動畫執行之前所有影像都在隱藏圖層中一次下載，將不會發生顯著的暫停或沒有影像的情形。
  • 延長動畫列以產生順暢的動作。如果動畫看起來很不穩定而影像會跳片，請拖曳圖層動畫列的結尾影格來延長更多影格的動作。延長動畫列可以在動作的起點和終點之間產生更多資料點，並且可以使物件移動更緩慢。嘗試增加每秒的影格數 (fps) 來改善速度，但請注意大多數一般系統中執行的瀏覽器，其播放動畫的速度不會比 15 fps 快多少。在不同系統以不同瀏覽器測試動畫，找出最佳設定。
  • 不要製作大型點陣圖的動畫。將大型影像做成動畫會產生緩慢的動畫。請您建立合成影像並移動影像的一小部份。例如，只要將輪子做成動畫就可以表現汽車在移動。
  • 建立簡單動畫。不要建立所需的影格數超過現行瀏覽器所能提供的動畫。即使在系統或網際網路效能減低時，瀏覽器在時間軸動畫中還是會播放每一個影格。


插入版面的 Div 標籤

您可以使用 Div 標籤建立 CSS 版面區塊，並將其定位在您的文件中。如果將含有定位樣式的現有 CSS 樣式表附加到文件，便會特別有用處。Dreamweaver 可以讓您快速插入 Div 標籤後，再套用現有的樣式。

注意

您可以使用 Dreamweaver 設計的檔案作為 CSS 版面的切入點。從「新增文件」對話方塊的「頁面設計 (CSS)」類別中，選取檔案 (請參閱以 Dreamweaver 設計檔建立文件)。

插入 Div 標籤：

  1. 在「文件」視窗中，將插入點放在您想要 Div 標籤出現的位置上。
  2. 請執行下列其中一項作業：
    • 選取「插入＞版面物件＞Div 標籤」。
    • 在「插入」列的「版面」類別中，按一下「Div 標籤」按鈕。 這是描述功能的圖片。

    「插入 Div 標籤」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定插入 Div 標籤對話方塊選項。

  4. 按一下「確定」。

    Div 標籤便會在文件中以方塊顯示，其中包含預留位置文字。當您將滑鼠指標移過方塊邊緣上時，Dreamweaver 就會將其反白標示。

如果 Div 標籤以絕對方式定位，其作用就會跟 Dreamweaver 圖層相同。如需關於使用圖層的詳細資訊，請參閱設定圖層偏好設定和屬性、管理圖層或操作圖層。

如需關於使用未絕對定位之 Div 標籤的詳細資訊，請參閱使用版面的 Div 標籤。

相關主題

  • 變更 Div 標籤的反白標示顏色
  • 使用版面的 Div 標籤


使用版面的 Div 標籤

在插入 Div 標籤之後 (請參閱插入版面的 Div 標籤)，您就可以操作它或是在上面新增內容。

注意

已完成絕對定位的 Div 標籤，也就是 Dreamweaver 圖層。如需關於使用這些 Div 標籤的詳細資訊，請略過這一節，然後參閱設定圖層偏好設定和屬性、管理圖層或操作圖層。

當您指定邊框給 Div 標籤或選取「CSS 版面外框」時，Div 標籤便會顯示邊框。(根據預設，便會選取在「檢視＞視覺輔助」選單中的「CSS 版面外框」)。當您將滑鼠指標移過 Div 標籤上時，Dreamweaver 便會反白標示該標籤。若要變更反白標示顏色，或停用反白標示功能，請參閱變更 Div 標籤的反白標示顏色。

當您選取 Div 標籤時，您可以在「CSS 樣式」面板中檢視並編輯其規則。您也可以藉由將插入點放置在 Div 標籤內部，將內容新增至 Div 標籤，然後就像將內容新增至頁面一樣，將內容新增到標籤中。

檢視並編輯套用至 Div 標籤的規則：

  1. 請執行下列其中一項作業以選取 Div 標籤：
    • 按一下 Div 標籤的邊框。

      提示

      尋找標示以便查看邊框。
    • 按一下 Div 標籤的內部，然後按 Control + A (Windows) 或按 Command + A (Macintosh) 兩次。
    • 按一下 Div 標籤的內部，然後從「文件」視窗底部的標籤選取器中，選取 Div 標籤。
  2. 選取「視窗＞CSS 樣式」，開啟「CSS 樣式」面板 (如果面板尚未開啟)。

    套用至 Div 標籤的規則，便會出現在面板中。

  3. 視需要進行編輯。

將插入點放置在 Div 標籤中，以新增內容：

  • 按一下標籤邊框內部的任何一處。

更改 Div 標籤中的預留位置文字：

  • 選取文字，並直接輸入以覆寫該文字，或是按 Delete 鍵。

    注意

    就像新增內容至頁面一樣，您可以將內容新增至 Div 標籤。

相關主題

  • 插入版面的 Div 標籤
  • 使用 CSS 樣式面板


變更 Div 標籤的反白標示顏色

當您在「設計」檢視中，將滑鼠指標移過 div 標籤的邊緣，Dreamweaver 便會反白標示標籤的邊框。您就可以依需要啟用或停用反白標示功能，或是在「偏好設定」對話方塊中，變更反白標示的顏色。

變更 Div 標籤的反白標示偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 選取左側的分類清單中的「標示」。
  3. 執行下列其中一項變更：
    • 若要變更 Div 標籤的反白標示顏色，請按一下「滑鼠移過」顏色方塊，然後使用顏色挑選器選取反白標示顏色 (或在文字方塊中，輸入反白標示顏色的十六進位值)。

      如需關於使用顏色挑選器的詳細資訊，請參閱使用顏色。

    • 若要啟用或停用 Div 標籤的反白標示功能，請選取或取消選取「滑鼠移過」的「顯示」核取方塊。

      注意

      這些選項會影響到所有的物件，例如表格，尤其是那些 Dreamweaver 在您將滑鼠指標移過去時就會將其反白標示的表格。
  4. 按一下「確定」。


使用 CSS 版面視覺化

Dreamweaver 包含了幾項視覺化功能，讓您在「設計」檢視中，顯示 CSS 版面的元素。例如，您可以顯示未指定邊框的 Div 標籤外框，或顯示 Div 標籤暫時的背景顏色，讓您可以在頁面上檢視它們的位置。

本節包含下列主題：

  • 關於 CSS 版面視覺化
  • 檢視 CSS 版面區塊
  • 使用有 CSS 版面區塊的設計階段樣式表


關於 CSS 版面視覺化

當您在「設計」檢視中進行作業時，Dreamweaver 會讓您視覺化 CSS 版面區塊。CSS 版面區塊是一項 HTML 頁面元素，您可以將它放置在頁面上的任何一處。更明確地說，CSS 版面區塊是不含 display:inline 的 Div 標籤，或包含 display:block、position:absolute 或 position:relative CSS 宣告的任何其他頁面元素。下列是一些在 Dreamweaver 中被當成 CSS 版面區塊元素的範例：

  • Div 標籤
  • 指定了絕對或相對位置的影像
  • 指定了 display:block 樣式的 a 標籤
  • 指定了絕對或相對位置的段落

    注意

    為了視覺上的呈現，CSS 版面區塊不包含行內元素 (也就是程式碼位於一行文字內的元素)，或簡單區塊元素，像是段落。

Dreamweaver 提供了幾項檢視 CSS 版面區塊的視覺輔助。例如，當您設計時，可以啟用 CSS 版面區塊的外框、背景和方塊模型。當您將滑鼠指標滑過版面區塊時，您也可以檢視顯示選取的 CSS 版面區塊屬性的工具提示。

下列清單說明 Dreamweaver 針對每一個項目所呈現的 CSS 版面區塊視覺輔助：

CSS 版面外框顯示頁面上所有 CSS 版面區塊的外框。

CSS 版面背景顯示暫時指定給個別 CSS 版面區塊的背景顏色，與隱藏一般顯示在頁面上的背景顏色或影像。

每當您啟用視覺輔助以檢視 CSS 版面區塊背景時，Dreamweaver 便會自動指定每個 CSS 版面區塊的不同背景顏色。(Dreamweaver 利用一種演算程序來選取顏色，您無法自己指定顏色)。指定的顏色看起來都不同，且是專為協助您在 CSS 版面區塊之間進行分辨而已設計。

CSS 版面方塊模型顯示選取的 CSS 版面區塊之方塊模型 (也就是欄位間隔和邊界)。

相關主題

  • 檢視 CSS 版面區塊
  • 使用有 CSS 版面區塊的設計階段樣式表


檢視 CSS 版面區塊

您可以視需要開啟或關閉 CSS 版便區塊的視覺輔助。如需關於各個視覺輔助顯示的詳細說明，請參閱關於 CSS 版面視覺化。

檢視 CSS 版面區塊外框：

  • 選取「檢視＞視覺輔助＞CSS 版面外框」。

檢視 CSS 版面區塊背景：

  • 選取「檢視＞視覺輔助＞CSS 版面背景」。

檢視 CSS 版面區塊方塊模型：

  • 選取「檢視＞視覺輔助＞CSS 版面方塊模型」。

您也可以按一下「文件」工具列上的「視覺輔助」按鈕，以存取「CSS 版面區塊視覺輔助」選項。

相關主題

  • 使用有 CSS 版面區塊的設計階段樣式表


使用有 CSS 版面區塊的設計階段樣式表

您可以使用「設計階段」樣式表以顯示元素的背景、邊框或方塊模型 (一般來說，這些並不視為 CSS 版面區塊)。這麼做的話，您首先必須建立指定 display:block 屬性至適當頁面元素的「設計階段」樣式表。

使用具有非 CSS 版面區塊元素的 CSS 版面區塊視覺輔助：

  1. 透過選取「檔案＞新增」、「分類」欄中的「基本頁面」，以及「基本頁面」欄中的 CSS，來建立外部 CSS 樣式表，然後按一下「建立」。
  2. 在新樣式表中建立規則，將 display:block 屬性指定到您想顯示為 CSS 版面區塊的頁面元素中。

    例如，如果您想要顯示段落和清單項目的背景顏色，可以利用下列的規則建立樣式表：

    p{
display:block;
}
li{
display:block;
}
  3. 儲存檔案。
  4. 在「設計」檢視中，開啟您想要附加新樣式的頁面。
  5. 選取「文字＞CSS 樣式＞設計階段」。
  6. 在「設計階段樣式表」對話方塊中，按一下「僅於設計階段時顯示」文字方塊上方的「加號 (+)」按鈕，選取您剛建立的樣式表，然後按一下「確定」。
  7. 按一下「確定」以結束「設計階段樣式表」對話方塊。

    樣式表就會附加至您的文件。如果您使用上述的範例建立樣式表，所有的段落與清單項目都會以 display:block 屬性格式化，因此允許您啟用或停用段落和清單項目的 CSS 版面區塊視覺輔助。

相關主題

  • 關於 CSS 版面視覺化
  • 檢視 CSS 版面區塊
  • 使用設計階段樣式表


使用尺規、導引線和格線來配置頁面

在「文件」視窗的「設計」檢視中，使用尺規、導引線和格線做為視覺輔助來放置、測量元素或是調整元素大小。


使用尺規

尺規可以協助您測量、組織及規劃版面配置。尺規會出現在頁面邊框的左方和上方，以像素、英吋或公分為單位來標記。

變更尺規設定，請執行下列其中一項作業：

  • 將尺規切換為開啟及關閉，請選取「檢視＞尺規＞顯示」。
  • 若要變更原點，請將「文件」視窗中「設計」檢視左上角的尺規原點圖示，拖曳到頁面上任何位置。

    若要將原點重設為其預設位置，請選取「檢視＞尺規＞重設原點」。

  • 若要變更度量單位，請從「檢視＞尺規」子選單中選取「像素」、「英吋」或「公分」。


使用導引線

導引線是指您從尺規拖曳到文件上的線，能協助您更精確地放置及對齊物件。您也可以使用導引線來測量頁面元素的大小，或是用來模擬網頁瀏覽器「摺疊」(顯示區域)。

為了協助您對齊元素，Dreamweaver 可以讓您將元素貼齊導引線，或是將導引線貼齊元素 (元素必須以絕對方式定位，貼齊功能才能運作)。您也可以鎖定導引線，防止其他使用者不小心移動了導引線。

建立水平或垂直導引線：

  1. 拖曳相對應的尺規。
  2. 將導引線放到「文件」視窗中，然後放開滑鼠按鍵。

    您可以再次拖曳導引線，將其重新定位。

    注意

    根據預設，導引線是以絕對像素的測量方法從文件的上方或左方開始進行記錄，並以相對於尺規原點的方式顯示。若要以百分比的方式記錄導引線，請在建立或移動導引線時按住 Shift 鍵。

顯示或隱藏導引線：

  • 選取「檢視＞導引線＞顯示導引線」。

將元素貼齊導引線：

  • 選取「檢視＞導引線＞貼齊導引線」。

    注意

    當您重新調整元素 (例如圖層、表格和影像) 大小時，重新調整大小後的元素便會貼齊導引線。

將導引線貼齊元素：

  • 選取「檢視＞導引線＞導引線貼齊元素」。

鎖定或解除鎖定所有導引線：

  • 選取「檢視＞導引線＞鎖定導引線」。

將導引線移至特定位置：

  1. 按兩下導引線。
  2. 在「移動導引線」對話方塊中輸入新位置，然後按一下「確定」。

檢視導引線的位置：

  • 將滑鼠指標放在導引線上方。

檢視導引線之間的距離：

  • 按 Control 鍵 (Windows) 或 Command 鍵 (Macintosh)，然後將滑鼠指標放在兩條導引線之間。

    注意

    導引線測量的單位和尺規測量的單位相同。

變更導引線的色彩：

  1. 選取「檢視＞導引線＞編輯導引線」。
  2. 從「導引線色彩」彈出式選單中選取新導引線色彩，然後按一下「確定」。

變更指示導引線之間的距離顏色：

  1. 選取「檢視＞導引線＞編輯導引線」。
  2. 從「距離色彩」彈出式選單中，選取顏色，然後按一下「確定」。

模擬網頁瀏覽器的摺疊 (顯示區域)：

  • 選取「檢視＞導引線」，然後從選單中選取預設的瀏覽器大小。

移除導引線：

  • 將導引線拖曳到文件外。

清除所有導引線：

  • 選取「檢視＞導引線＞清除導引線」。

搭配樣版使用導引線

在 Dreamweaver 樣版中加入導引線時，所有樣版實體都會繼承導引線。不過，樣版實體中的導引線會被當成是可以編輯的區域，因此使用者可以修改導引線。每當以主樣版更新樣版實體時，實體中修改過的導引線就會還原成原來的位置。

您也可以在樣版實體中加入自己的導引線，當您以主樣版更新樣版實體時，以這種方式加入的導引線就不會被覆寫。

相關主題

  • 調整圖層大小
  • 移動圖層
  • 對齊圖層


使用格線

格線會在「文件」視窗中顯示一組有秩序的水平和垂直線，可以用來協助您精確地放置物件。您可以設定使絕對位置的頁面元素在您將其移動時自動貼齊格線，並透過指定格線設定，來變更格線或控制貼齊行為。不論格線是否顯示，貼齊動作都會執行。

顯示或隱藏格線：

  • 選取「檢視＞格線＞顯示格線」。

啟用或停用貼齊：

  • 選取「檢視＞格線＞貼齊格線」。

變更格線設定：

  1. 選取「檢視＞格線＞格線設定」。

    「格線設定」對話方塊便會出現。

  2. 依需要設定選項。

    如需詳細資訊，請參閱設定格線設定對話方塊選項。

  3. 按一下「確定」。

相關主題

  • 調整圖層大小
  • 移動圖層
  • 對齊圖層


使用影像藍圖

您可以使用影像藍圖做為導引，重新建立已在圖形應用程式 (如 Macromedia Freehand 或 Fireworks) 中建立的頁面設計。

影像藍圖是一個 JPEG、GIF 或 PNG 影像，它會放置在「文件」視窗的背景中。您可以隱藏影像、設定它的不透明度及變更它的位置。

在文件視窗中放置影像藍圖：

  1. 請執行下列其中一項作業：
    • 選取「檢視＞影像藍圖＞載入」。
    • 選取「修改＞頁面屬性」，然後再按一下「影像藍圖」文字方塊旁的「瀏覽」按鈕。
  2. 在出現的對話方塊中，選取影像檔後按一下「選取」(Windows) 或「選擇」(Macintosh)。

    「頁面屬性」對話方塊便會出現。

  3. 藉由拖曳「影像透明度」滑動軸以指定影像透明度；然後按一下「確定」。

若要隨時切換到另一個影像藍圖，或是變更目前影像藍圖的透明度，請選取「修改＞頁面屬性」。

顯示或隱藏影像藍圖：

  • 選取「檢視＞影像藍圖＞顯示」。

影像藍圖只有在 Dreamweaver 中看得到。當您在瀏覽器中檢視頁面時絕對看不到它。顯示影像藍圖時，無法在「文件」視窗中看到頁面實際的背景影像與顏色；但是，在瀏覽器中檢視頁面時，就看得到背景影像和顏色。

變更影像藍圖位置：

  1. 選取「檢視＞影像藍圖＞調整位置」。
  2. 請執行下列其中一項作業：
    • 若要精確指定影像藍圖的位置，請在 X 和 Y 文字方塊中輸入座標值。
    • 若要一次將影像移動一個像素，請使用方向鍵。
    • 若要一次將影像移動 5 個像素，請按 Shift 鍵和方向鍵。

重設影像藍圖的位置：

  • 選取「檢視＞影像藍圖＞重設位置」。

    影像藍圖會回到「文件」視窗的左上角 (0,0)。

將影像藍圖與選取的元素對齊：

  1. 在「文件」視窗中選取元素。
  2. 選取「檢視＞影像藍圖＞對齊選取範圍」。

    影像藍圖的左上角會與選取元素的左上角對齊。


參考

本節提供這一章中所介紹的下列對話方塊和檢視窗的資訊：

  • 設定插入 Div 標籤對話方塊選項
  • 設定 Div 標籤屬性
  • 設定圖層偏好設定對話方塊選項
  • 設定圖層屬性
  • 設定多個圖層的屬性
  • 設定圖層轉換為表格對話方塊選項
  • 設定表格轉換為圖層對話方塊選項
  • 設定格線設定對話方塊選項
  • 設定導引線對話方塊選項


設定插入 Div 標籤對話方塊選項

這個對話方塊是用來插入 Div 標籤，以建立 CSS 版面區塊。

完成插入 Div 標籤對話方塊：

  1. 從「插入」彈出式選單中選取插入選項，以指出您希望 Div 標籤出現的位置。
  2. (選擇性) 按一下「新增 CSS 規則」按鈕，以開啟「新增 CSS 規則」對話方塊並建立一個新的樣式。
  3. 如果您選取了「在標籤前」、「在標籤結尾前」、「在標籤後」或「在標籤開始後」，請從右邊的彈出式選單上選取標籤。
  4. (選擇性) 從彈出式選單中選取類別。

    如果附加了樣式表，在清單中便會出現該樣式表中所定義的類別。

  5. (選擇性) 從彈出式選單中選取 ID。

    如果附加了樣式表，在清單中便會出現該樣式表中所定義的 ID。Dreamweaver 不會列出文件中已存在的區塊 ID。

    注意

    Dreamweaver 如果您輸入與文件中另一個標籤相同的編號時，程式便會發出警告。

相關主題

  • 插入版面的 Div 標籤


設定 Div 標籤屬性

請使用「屬性」檢視窗，設定用來建立 CSS 版面區塊的 Div 標籤屬性。

設定 Div 標籤的屬性：

  • 請設定下列任一種選項：

    Div ID 讓您變更用來識別 Div 標籤的名稱。

    類別顯示目前套用至標籤的類別樣式。使用此彈出式選單來執行下列其中一項作業：

    • 選取您想要套用至標籤的樣式。
    • 選取「無」以移除目前選取的樣式。
    • 選取「附加樣式表」以開啟對話方塊，讓您可以附加外部的樣式表。

    編輯 CSS 開啟「CSS 樣式」面板。


設定圖層偏好設定對話方塊選項

這個對話方塊是用來設定「圖層」偏好設定。

完成圖層偏好設定對話方塊：

  1. 請指定下列其中一項選項：

    顯示決定圖層是否要預設為顯示。

    選項有「預設」、「繼承」、「顯示」和「隱藏」。如需關於這些選項的詳細資訊，請參閱設定圖層屬性。

    寬度與高度指定您使用「插入＞圖層」建立之圖層的預設寬度與高度值 (單位為像素)。

    背景顏色指定預設背景顏色。

    請從顏色挑選器選取顏色。

    背景影像指定預設背景影像。

    按一下「瀏覽」，找到電腦上的影像檔案。

    巢狀架構：「如果在圖層中則使用巢狀」指定您從現有圖層界限內的一點開始繪製的圖層是否為巢狀圖層。當您繪製圖層時按住 Alt 鍵 (Windows) 或 Option 鍵 (Macintosh)，可以暫時變更這項設定。

    Netscape 4 相容性：插入圖層時新增調整大小修正在文件的 head 內容中插入 JavaScript 程式碼，以修正 Netscape 4 瀏覽器中的已知問題，這問題會在瀏覽者調整瀏覽器視窗大小時，造成圖層失去定位座標。

    JavaScript 強制頁面在每次調整瀏覽器視窗大小時重新載入，並重新指定圖層到正確的位置。藉由選取「命令＞增加/移除 Netscape 調整大小修正」，您也可以手動新增或移除 JavaScript 程式碼。

  2. 按一下「確定」。

相關主題

  • 設定圖層偏好設定


設定圖層屬性

使用「屬性」檢視窗來檢視和設定圖層的屬性。

設定圖層的屬性：

  1. 請設定下列任一種選項：

    圖層編號可以讓您指定圖層名稱，以便在「圖層」面板和 JavaScript 程式碼中識別圖層。

    輸入名稱。請只使用標準的英數字元，不要使用特殊字元，例如空格、連字符號、斜線或句號。每一個圖層必須有其唯一的編號。

    L 與 T (左邊與頂端) 指定圖層左上角的位置，相對於頁面或父圖層 (如果巢狀化的話) 左上角的位置。

    W 與 H 指定圖層的寬度與高度。

    注意

    如果圖層的內容超過指定的大小，圖層的底部會延伸 (如 Dreamweaver「設計」檢視所顯示)，以容納所有內容 (當圖層出現在瀏覽器時，除非「溢位」屬性設定為「顯示」，否則下緣不會延伸)。

    位置和大小的預設單位為像素 (px)。您也可以改成下列單位：pc (Picas)、pt (點)、in (英吋)、mm (公釐)、cm (公分) 或 % (父圖層對應值的百分比)。縮寫必須緊接數值，不需空格：例如，3mm 表示 3 公釐。

    Z 軸決定了圖層的 Z 軸值或堆疊順序。

    在瀏覽器中，編號較高的圖層出現在編號較低的圖層前面。值可以是正數或負數。使用「圖層」面板變更圖層的堆疊順序，要比輸入特定的 Z 軸值來得容易 (請參閱變更圖層的堆疊順序)。

    注意

    Netscape 圖層 (亦即使用 layer 或 ilayer 標籤的圖層) 可以用與頁面上其他圖層的相對位置來堆疊。當您選取 Netscape 圖層時，兩個其他選項會出現在「屬性」檢視窗的右下角。從右下角的新彈出式選單中，選取另一個圖層的名稱 (僅您已經定義，出現在這個選單中的圖層名稱)；然後利用 A/B 選項，指出特定的圖層應出現在目前圖層「之上」(之前) 或「之下」(之後)。請注意，您不能針對指定圖層，同時指定其「之上/之下」堆疊順序與 Z 軸值。

    顯示指定圖層是否一開始就要顯示。選取下列選項：

    • 「預設」不指定顯示屬性。

      在沒有指定是否顯示時，大多數瀏覽器預設為「繼承」。

    • 「繼承」會使用圖層的父圖層之顯示屬性。
    • 「顯示」會顯示圖層內容，而不論上一層的值為何。
    • 「隱藏」會隱藏圖層內容，而不論上一層的值為何。

      請注意，以 ilayer 建立的隱藏圖層仍會占用相同空間，與顯示圖層相同。

    使用 Script 程式語言 (例如 JavaScript) 控制顯示屬性並動態顯示圖層內容。

    背景影像指定圖層的背景影像。

    按一下資料夾圖示瀏覽並選取影像檔案。

    背景顏色指定圖層的背景顏色。

    讓這個選項保持空白可以指定透明背景。

    標籤指定用來定義圖層的 HTML 標籤。

    溢位會控制當內容超出圖層指定大小時，圖層在瀏覽器中的顯示方式。

    「顯示」指示額外的內容要出現在圖層中。實際上，圖層會延伸以容納內容。「隱藏」指定另外的內容不要顯示在瀏覽器中。「捲動」會使瀏覽器針對圖層而增加捲軸，不論是否需要。「自動」會使瀏覽器只在需要時 (也就是，圖層內容超過界限時)，才顯示圖層的捲軸。

    注意

    各種瀏覽器對 overflow 選項的支援並不相同。

    使用左上或 PageX、PageY (只限 layer 和 ilayer) 讓您可以指定圖層是否要相對於父圖層或頁面來定位。

    「左上」選項將圖層放置在對應到父圖層左上角的位置。「PageX、PageY」選項將圖層放置在相對於頁面左上角的絕對位置，不論父圖層的位置如何。

    裁切定義圖層的顯示區域。

    指定左、上、右和下方座標以定義圖層座標空間 (自圖層的左上角算起) 中的矩形。圖層已經過「裁切」，所以只會顯示指定的矩形範圍。例如，若要使除了圖層左上角寬 50 像素、高 75 像素的矩形範圍之外，其餘的圖層內容都不顯示，便可以設定左為 0、上為 0、右為 50 及下為 75。

    注意

    雖然階層式樣式表的規格對 clip 下了幾種不同的定義，Dreamweaver 解譯 clip 的方式，與大多數瀏覽器相同。

    原始檔 (只限 layer 和 ilayer) 讓您可以在圖層內顯示另一個 HTML 文件。按一下資料夾圖示瀏覽並選取文件。

    請注意，Dreamweaver 不會在圖層中顯示其他文件。

  2. 如果您已經在文字方塊輸入值，請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

相關主題

  • 檢視和設定單一圖層的屬性


設定多個圖層的屬性

使用「屬性」檢視窗來檢視和設定多個圖層的屬性。

一次設定多個圖層的屬性：

  1. 請設定下列任一種選項：

    L 與 T (左邊與頂端) 指定圖層左上角的位置，相對於頁面或父圖層 (如果巢狀化的話) 左上角的位置。

    W 與 H 指定圖層的寬度與高度。

    注意

    如果圖層的內容超過指定的大小，圖層的底部會延伸 (如 Dreamweaver「設計」檢視所顯示)，以容納所有內容 (當圖層出現在瀏覽器時，除非「溢位」屬性設定為「顯示」，否則下緣不會延伸)。

    位置和大小的預設單位為像素 (px)。您也可以改成下列單位：pc (Picas)、pt (點)、in (英吋)、mm (公釐)、cm (公分) 或 % (父圖層對應值的百分比)。縮寫必須緊接數值，不需空格：例如，3mm 表示 3 公釐。

    顯示指定圖層是否一開始就要顯示。選取下列選項：

    • 「預設」不指定顯示屬性。

      在沒有指定是否顯示時，大多數瀏覽器預設為「繼承」。

    • 「繼承」會使用圖層的父圖層之顯示屬性。
    • 「顯示」會顯示圖層內容，不論父圖層的值為何。
    • 「隱藏」會隱藏圖層內容，而不論上一層的值為何。

      請注意，以 ilayer 建立的隱藏圖層仍會占用相同空間，與顯示圖層相同。

    使用 Script 程式語言 (例如 JavaScript) 控制顯示屬性並動態顯示圖層內容。

    標籤指定用來定義圖層的 HTML 標籤。

    背景影像指定圖層的背景影像。

    按一下資料夾圖示瀏覽並選取影像檔案。

    背景顏色指定圖層的背景顏色。

    讓這個選項保持空白可以指定透明背景。

  2. 如果您已經在文字方塊輸入值，請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

相關主題

  • 檢視和設定多個圖層的屬性


設定圖層轉換為表格對話方塊選項

這個對話方塊是用來將圖層轉換為表格，以便更相容於舊版的瀏覽器。

完成圖層轉換為表格對話方塊：

  1. 請指定下列其中一項選項：

    最精確的為每一個圖層建立儲存格，加上任何保存圖層間距所需的儲存格。

    最小：合併空的儲存格圖層邊緣如果定位在指定的像素數之內，則應該要對齊。

    如果您選取這個選項，產生的表格將會有較少的空白列和欄，但可能無法精確符合您要的版面。

    使用透明的 GIF 會以透明的 GIF 填滿表格的最後一列。這可以確保表格在所有瀏覽器中會以相同欄位寬度顯示。

    啟用這個選項時，您無法拖曳欄位以編輯產生的表格。停用這個選項時，產生的表格將不包含透明的 GIF，但欄位寬度可能會因瀏覽器不同而有變動。

    置中於頁面會將產生的表格置中於頁面。

    如果停用這個選項，表格將起始於頁面的左邊緣。

  2. 選取所需的版面工具和格線選項後，按一下「確定」。

相關主題

  • 將圖層轉換為表格


設定表格轉換為圖層對話方塊選項

這個對話方塊是用來將表格轉換為圖層。

完成表格轉換為圖層對話方塊：

  1. 請指定下列其中一項選項：

    顯示格線和貼齊格線可以讓您使用格線來協助定位圖層 (請參閱使用影像藍圖)。

    防止圖層重疊可以在建立、移動和調整圖層大小時限制其位置，避免圖層間有所重疊 (請參閱避免圖層重疊)。

    顯示圖層面板可以顯示「圖層」面板 (請參閱使用圖層面板)。

  2. 按一下「確定」。

表格便會轉換為圖層。空的儲存格除非有背景顏色，否則不會轉換為圖層。

注意

表格外部的頁面元素也會放在圖層中。

相關主題

  • 將圖層轉換為表格


設定格線設定對話方塊選項

這個對話方塊是用來編輯格線設定。

完成格線設定對話方塊：

  1. 請依需要設定下列選項：

    顏色指定格線顏色。

    按一下色票並從顏色挑選器選取顏色，或在文字方塊中輸入十六進位數字。

    顯示格線會使格線顯示在「設計」檢視中。

    貼齊格線讓頁面元素貼齊格線的線條。

    間距控制格線之間的距離。

    在文字方塊中輸入數字並從選單選取「像素」、「英吋」或「公分」。

    顯示指定格線以實線或點狀顯示。

  2. 按一下「套用」以套用變更而不關閉對話方塊，或按一下「確定」以套用變更並關閉對話方塊。

    注意

    如果沒有選取「顯示格線」，格線就不會出現，也不會看到任何變更。

相關主題

  • 使用影像藍圖


設定導引線對話方塊選項

這個對話方塊是用來編輯導引線設定。

完成導引線對話方塊：

  1. 請設定下列選項：

    導引線色彩會指定導引線的色彩。

    按一下色票並從顏色挑選器選取顏色，或在文字方塊中輸入十六進位數字。

    距離色彩當您將滑鼠指標放在導引線之間時，距離色彩會指定做為距離指示器線的顏色。

    按一下色票並從顏色挑選器選取顏色，或在文字方塊中輸入十六進位數字。

    顯示導引線可以讓您在「設計」檢視中看見導引線。

    貼齊導引線讓您在頁面上四處移動頁面元素時，可以讓元素貼齊導引線。

    鎖定導引線會將導引線鎖定在某個位置。

    導引線貼齊元素讓您在拖曳導引線時，使導引線貼齊頁面上的元素。

    全部清除會清除頁面上所有的導引線。

  2. 按一下「確定」。

相關主題

  • 使用導引線


以表格呈現內容

表格是用於在頁面上呈現表格式資料，並可配置文字和圖形的強大工具。

許多設計人員都會使用表格來配置網頁。Macromedia Dreamweaver 8 提供下列兩種檢視和操作表格的方式：「標準」模式是以列和欄的格線來呈現表格；「版面」模式則可讓您在頁面上繪製、調整大小和移動方格，同時仍然能夠使用表格的結構框架 (請參閱在版面模式中配置頁面)。

注意

您也可以使用 CSS 定位來配置版面 (請參閱使用 CSS 配置頁面)。

本章包含下列各節：

關於表格

插入表格與新增內容

匯入和匯出表格式資料

選取表格元素

使用展開表格模式讓表格編輯更容易

格式化表格和儲存格

調整表格、欄和列的大小

新增和移除列與欄

分割和合併儲存格

複製、貼上及刪除儲存格

巢狀結構表格

排序表格


關於表格

表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。表格是由一列或多列所構成；而每一列則是由一個或多個儲存格構成。雖然 HTML 程式碼中通常不會明確地指定欄，但是使用 Dreamweaver 時還是可以像處理列與儲存格一般地處理欄。

在 Dreamweaver 中選取表格後或當插入點位於表格中時，便會顯示表格寬度與表格中各欄的欄寬。寬度旁邊是表格標題選單與欄標題選單的箭頭。使用選單可以快速存取一些常用的表格相關命令。您可以視需要啟用或停用寬度和選單功能 (請參閱顯示表格與欄位寬度以及選單)。

如果您看不到表格或欄的寬度，表示 HTML 程式碼中並無該表格或欄的指定寬度。如果出現了兩個數字，則表示其在「設計」檢視中所顯示的視覺寬度與 HTML 程式碼中指定的寬度不符。發生此問題的原因可能是由於您拖曳了表格的右下角，或是在儲存格中加入了超出其設定寬度的內容，改變了表格尺寸。

例如，如果您將欄的寬度設成 200 像素，然後加入內容後使其延伸為 250 像素，該欄便會出現兩個數字：200 是程式碼中所指定的寬度，括號中的 (250) 則是畫面上呈現欄時的視覺寬度。

若要調整欄寬，請參閱使程式碼中的欄寬與視覺寬度一致。

本節包含下列概念性主題：

  • HTML 中表格格式的優先順序
  • 關於分割和合併表格儲存格

相關主題

  • 插入表格與新增內容


HTML 中表格格式的優先順序

在「設計」檢視中格式化表格時，您可以針對整個表格，或針對表格中選取的列、欄或儲存格設定屬性。當屬性 (例如背景顏色或對齊) 針對整個表格設定為某個值，而針對個別儲存格又設定成另一個值的時候，這個儲存格的格式會優先於列的格式，而列的格式則又會優先於表格的格式。

表格格式的優先順序如下：

  1. 儲存格
  2. 列
  3. 表格

例如，假設您將某個單一儲存格的背景顏色設為藍色，然後又將整個表格的背景顏色設為黃色，則藍色儲存格並不會變成黃色，因為儲存格格式優先於表格格式。

注意

當您設定欄的屬性時，Dreamweaver 會變更對應到此欄中每一個儲存格的 td 標籤屬性。

相關主題

  • 格式化表格和儲存格


關於分割和合併表格儲存格

您可以合併任何數量的相鄰儲存格 (只要整個選取範圍是一行或一個儲存格矩形區塊) 來產生跨越幾欄或幾列的單一儲存格。您也可以將儲存格分割成任何數量的列或欄，而不論它先前是否經過合併。Dreamweaver 會自動重新建構表格 (新增必要的 COLSPAN 或 ROWSPAN 屬性)，以建立出指定的排列方式。

在以下的圖例中，是將前兩列中間的儲存格，合併為跨越兩列的單一儲存格。

相關主題

  • 分割和合併儲存格


插入表格與新增內容

使用「插入」列或「插入」選單建立新表格。接著，在表格儲存格中加入文字與影像，就像在表格外加入文字和影像一樣 (請參閱插入和格式化文字與插入影像)。

若要插入表格：

  1. 在「文件」視窗的「設計」檢視中，將插入點置於您希望表格出現的位置。

    注意

    如果文件為空白，那麼您只能將插入點置於文件的開頭位置上。
  2. 請執行下列其中一項作業：
    • 選取「插入＞表格」。
    • 在「插入」列的「常用」類別中，按一下「表格」按鈕。

    「插入表格」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定表格對話方塊選項。

  4. 按一下「確定」。

表格就會出現在文件中。

相關主題

  • 檢視與設定表格、儲存格、列及欄的屬性
  • 編輯表格的輔助功能屬性


匯入和匯出表格式資料

您可以將其他應用程式 (例如 Microsoft Excel) 所建立並儲存為分隔符號文字格式 (將項目以 Tab 字元、逗號、冒號、分號或其他分隔符號分隔) 的表格式資料，匯入 Dreamweaver 中並格式化成為表格。

您也可以從 Dreamweaver 將表格資料匯出到文字檔中，其相鄰儲存格內容會以分隔符號來分隔。您可以使用逗號、冒號、分號或空格作為分隔符號。當您轉存表格時，整個表格都會被轉存；您不可以選取表格的某些部分進行轉存。

提示

如果您只需要表格中的某些資料 (例如，前六列或前六欄)，請複製含有這些資料的儲存格，將這些儲存格貼到表格的外面 (以建立新表格)，然後再轉存這個新表格。

若要匯入表格資料：

  1. 請執行下列其中一項作業：
    • 選取「檔案＞匯入＞表格式資料」。
    • 選取「插入＞表格物件＞匯入表格式資料」。

    「匯入表格式資料」對話方塊便會出現。

  2. 在對話方塊中，輸入含有您資料之檔案的相關資訊。

    如需詳細資訊，請參閱設定匯入表格式資料的對話方塊選項。

  3. 按一下「確定」。

若要匯出表格：

  1. 將插入點置於表格的任何儲存格內。
  2. 選取「檔案＞匯出＞表格」。

    「匯出表格」對話方塊便會出現。

  3. 在「匯出表格」對話方塊中，指定轉存表格的選項。

    如需詳細資訊，請參閱設定匯出表格的對話方塊選項。

  4. 按一下「匯出」。

    「表格匯出為」對話方塊便會出現。

  5. 輸入檔案的名稱。
  6. 按一下「儲存檔案」。


選取表格元素

您可以一次選取整個表格，也可以選取一列或一欄。您也可以選取一個或多個別的儲存格。

當您將滑鼠指標移過表格、列、欄或儲存格上方時，Dreamweaver 會將該選取範圍中所有的儲存格反白標示，讓您能清楚知道按下選取範圍時選取了哪些儲存格。當您的表格中不含邊框、橫跨多欄或多列的儲存格，或是巢狀表格時，這會非常有用。您可以在偏好設定中變更反白標示的顏色。

提示

如果您將滑鼠指標移到表格的邊框上，然後 Control 鍵 (Windows) 或是 Command 鍵 (Macintosh)，便會將整個表格整個結構 (也就是表格中所有的儲存格) 反白標示。當您有巢狀表格並想要查看其中一個表格的結構時，這就非常有用。

若要變更選取表格元素的反白標示顏色：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 選取左側的分類清單中的「標示」。
  3. 執行下列其中一項變更：
    • 若要變更表格元素的反白標示顏色，請按一下「滑鼠移過」顏色方塊，然後使用顏色挑選器來選取反白標示顏色 (或是在文字方塊中輸入標示顏色的十六進位值)。

      如需關於使用顏色挑選器的詳細資訊，請參閱使用顏色。

    • 若要啟用或停用表格元素的反白標示功能，請選取或取消選取「滑鼠滑過」的「顯示」核取方塊。

      注意

      這些選項會影響到所有的物件，如當您將滑鼠指標移過去時 Dreamweaver 就會反白標示的圖層以及「版面」模式檢視的表格與儲存格。
  4. 按一下「確定」。

本節包含下列主題：

  • 選取表格
  • 選取列或欄
  • 選取儲存格

相關主題

  • 格式化表格和儲存格
  • 調整表格、欄和列的大小
  • 複製、貼上及刪除儲存格


選取表格

有好幾種方法可以一次選取整個表格。

若要選取整個表格，請執行下列其中一項作業：

  • 在表格的左上角、表格的頂端或底部邊緣上任一處，或是列或欄的邊框上按一下。

    注意

    滑鼠指標會在您可以選取表格時，變為表格格線圖示 (除非您按一下列或欄邊框)。 這是描述功能的圖片。

  • 在表格儲存格中按一下，然後在「文件」視窗左下角的標籤選取器中，選取 <table> 標籤。
  • 在表格儲存格中按一下，然後選取「修改＞表格＞選取表格」。
  • 在表格儲存格中按一下後，再按一下表格標題選單，然後選取「選取表格」。

    所選表格的下方與右方邊緣便會顯示選取範圍控制點。

相關主題

  • 選取列或欄
  • 選取儲存格


選取列或欄

您可以選取個別的列或欄或者是多個列或欄。

若要選取個別或多個列或欄：

  1. 將指標指向列的左方邊緣或欄的上方邊緣。
  2. 當指標變成選取用的箭頭時，請按一下以選取列或欄，或者以拖曳方式選取多個列或欄。

若要選取單一欄：

  1. 在欄中按一下。
  2. 按一下欄標題選單，然後選取「選取欄」。

相關主題

  • 選取表格
  • 選取儲存格


選取儲存格

您可以選取單一的儲存格、一整列或整個區塊的儲存格，或是不相鄰的儲存格。若要選取整列或整欄，請參閱選取列或欄。

若要選取單一儲存格，請執行下列其中一項作業：

  • 在儲存格中按一下，然後在「文件」視窗左下角的標籤選取器中，選取 <td> 標籤。
  • 在儲存格中以 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh)。
  • 在儲存格中按一下，然後選取「編輯＞全選」。

    提示

    在已選取儲存格時，再一次選取「編輯＞全選」，即可選取整個表格。

若要選取一行或一個儲存格區塊，請執行下列其中一項作業：

  • 從一個儲存格拖曳到另一個儲存格。
  • 按一下儲存格，在同一儲存格中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 將其選取後，再於另一個儲存格上 Shift + 按一下。

    這樣便會選取這兩個儲存格所定義直線或矩形區域內的所有儲存格。

若要選取不相鄰的儲存格：

  • Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 您要選取的儲存格、列或欄。

    如果您 Control + 按一下或 Command + 按一下的儲存格、列或欄是尚未選取的，便會將其加入選取範圍中。如果是已經選取的，就會從選取範圍中將其移除。

相關主題

  • 選取表格


使用展開表格模式讓表格編輯更容易

「展開表格」模式會在文件中所有的表格中暫時加入儲存格內距及間距，並增加表格邊框以便於編輯。此模式可讓您選取表格中的數個項目，或是精確地放置插入點。

例如，展開表格後再將插入點放在影像的左邊或右邊，就不會不小心選取到影像或表格儲存格。

注意

一旦您做好選取或放置插入點之後，應該回到「設計」檢視的「標準」模式以進行編輯。因為某些視覺化作業，如調整大小，就無法在「展開表格」模式中出現預期結果。

若要切換為「展開表格」模式：

  1. 如果您正在使用「程式碼」檢視，請先選取「檢視＞設計」或「檢視＞程式碼和設計」。

    因為在「程式碼」檢視中無法切換為「展開表格」模式。

  2. 請執行下列其中一項作業：
    • 選取「檢視＞表格模式＞展開表格模式」。
    • 在「插入」列的「版面」類別中，按一下「展開表格模式」按鈕。

「文件」視窗的頂端便會出現標示為「展開表格模式」的列。Dreamweaver 會在頁面上所有的表格加入儲存格內距與間距，並增加表格的邊框。

若要切換為「展開表格模式」，請執行下列其中一項作業：

  • 在「文件」視窗的頂端標示為「展開表格模式」的列中按一下「結束」。
  • 選取「檢視＞表格模式＞標準模式」。
  • 在「插入」列的「版面」類別中，按一下「標準模式」按鈕。

Dreamweaver 便會回到「標準模式」。


格式化表格和儲存格

您可以設定表格及其儲存格的屬性，或將預先設定的設計套用到表格，藉以變更表格的外觀。在您設定表格與儲存格的屬性之前，最好能先了解哪些屬性優先於其他的屬性 (請參閱 HTML 中表格格式的優先順序)。

提示

若要格式化表格儲存格中的文字，請使用您格式化表格外部文字時所用的相同程序。如需詳細資訊，請參閱插入和格式化文字。

本節包含下列主題：

  • 檢視與設定表格、儲存格、列及欄的屬性
  • 編輯表格的輔助功能屬性
  • 使用設計配置來格式化表格

相關主題

  • 調整表格、欄和列的大小


檢視與設定表格、儲存格、列及欄的屬性

在選取表格或儲存格後，您可以使用「屬性」檢視窗來檢視和變更其屬性。

注意

在您變更表格元素的屬性之前，最好能先了解哪些屬性優先於其他的屬性 (請參閱 HTML 中表格格式的優先順序)。

若要檢視和設定表格或表格元素屬性：

  1. 選取某個表格、儲存格、列或欄 (請參閱選取表格元素)。
  2. 在「屬性」檢視窗中 (「視窗＞屬性」)，按一下右下角的展開箭頭以查看所有的屬性。
  3. 視需要變更屬性。

    如需詳細資訊，請參閱設定表格屬性或設定儲存格、列及欄的屬性。

    注意

    當您設定欄的屬性時，Dreamweaver 會變更對應到此欄中每一個儲存格的 td 標籤屬性。不過，當您設定列的特定屬性時，Dreamweaver 會變更 tr 標籤的屬性，而不是變更列裡面每個 td 標籤的屬性；當您要將同樣的格式套用到列裡面的所有儲存格時，將格式套用到 tr 標籤可以產生更乾淨、更精簡的 HTML 程式碼。

相關主題

  • 編輯表格的輔助功能屬性


編輯表格的輔助功能屬性

如果您插入表格時沒有加入輔助功能屬性 (插入表格與新增內容)，但之後需要加入，或是需要編輯輔助功能屬性時，可以在「程式碼」檢視或「設計」檢視中執行此作業。

若要在「程式碼」檢視中加入或編輯表格的輔助功能值：

  • 在程式碼中編輯適當的屬性。

    提示

    若要在程式碼中快速找到標籤，請在表格中按一下，然後在「文件」視窗底部的標籤選取器中選取 <table> 標籤。

若要在「設計」檢視中加入或編輯表格的輔助功能值，請執行下列任何作業：

  • 若要編輯表格註解，請將該註解反白標示後輸入新的註解。
  • 若要編輯註解的對齊方式，請將插入點放在表格註解中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「編輯標籤程式碼」。
  • 若要編輯表格摘要，請選取表格，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「編輯標籤程式碼」。

相關主題

  • 檢視與設定表格、儲存格、列及欄的屬性


使用設計配置來格式化表格

使用「表格格式」命令可將預設的設計快速地套用到表格，然後再選取各種選項進一步自訂設計。

注意

使用預設的設計只能格式化簡單的表格。您無法使用這些設計來格式化含有合併儲存格 (colspan 或 rowspan) 的表格或欄組，或是任何其他非由簡單矩形儲存格格線所組成的表格。

若要使用預設的表格設計：

  1. 選取表格 (請參閱選取表格)。
  2. 選取「命令＞表格格式」。

    「表格格式」對話方塊便會出現。

  3. 請依您的喜好自訂選項。

    如需詳細資訊，請參閱設定格式化表格的對話方塊選項。

  4. 按一下「套用」或「確定」，用選取的設計格式化您的表格。


調整表格、欄和列的大小

您可以調整整個表格或個別列和欄的大小。如果無法調整大小，您可以清除欄寬或列高，然後再重來一次。

有時在 HTML 程式碼中設定的表格欄寬，與畫面上所顯示的寬度並不相符。如果發生這種情況，您可以將寬度改為一致。Dreamweaver 中顯示的表格與欄位寬度和標題選單，可以幫助您配置表格，您可以視需要啟用或停用欄寬與選單功能。

本節包含下列主題：

  • 調整表格大小
  • 調整欄與列的大小
  • 使程式碼中的欄寬與視覺寬度一致
  • 清除已設定的寬度與高度
  • 顯示表格與欄位寬度以及選單


調整表格大小

您可以透過拖曳其中一個選取範圍控點來調整表格大小。當您選取表格或將插入點放到表格中時，Dreamweaver 會在表格頂端或底部顯示表格寬度以及表格標題選單。

注意

您可以視需要停用表格寬度和表格標題選單功能 (請參閱顯示表格與欄位寬度以及選單)。

當您調整整個表格的大小時，表格中的所有儲存格都會依比列變更大小。如果已明確地指定表格儲存格的寬度或高度，調整表格大小只會變更儲存格在「文件」視窗中的可視大小，但是不會變更儲存格的已指定寬度與高度。若要清除已設定的寬度或高度，請參閱清除已設定的寬度與高度。

若要調整表格大小：

  1. 選取表格 (請參閱選取表格)。

    表格上會顯示選取範圍控點。

  2. 請執行下列其中一項作業：
    • 若要水平調整表格的大小，請拖曳右邊的選取範圍控點。
    • 若要垂直調整表格的大小，請拖曳底部的選取範圍控點。
    • 若要同時調整表格的水平和垂直方向大小，請拖曳右下角的選取範圍控制點。

相關主題

  • 調整欄與列的大小


調整欄與列的大小

您可以使用「屬性」檢視窗或拖曳欄或列的邊框，變更欄寬或是列高。如果無法調整大小，您可以清除欄寬或列高，然後重新試著調整一次 (請參閱清除已設定的寬度與高度)。

注意

您也可以使用「程式碼」檢視，直接在 HTML 程式碼中變更儲存格寬度和高度。如需詳細資訊，請參閱在 Dreamweaver 中撰寫程式碼。

當您選取表格或將插入點放到表格中時，Dreamweaver 會在欄位頂端或底部顯示欄寬以及欄標題選單。如需詳細資訊，請參閱關於表格。

注意

您可以視需要停用欄寬和欄標題選單功能 (請參閱顯示表格與欄位寬度以及選單)。

若要變更欄寬並保持整個表格的寬度不變：

  • 拖曳您要變更之欄位的右側邊框。

    相鄰的欄寬度也會變更，所以實際上是調整兩個欄的大小。視覺回應效果會顯示欄位調整的結果，整個表格的寬度並沒有改變。

    注意

    在以百分比 (而不是像素) 表示寬度的表格中，當您拖曳最右端欄的右邊框時，就會變更整個表格的寬度，而且所有的欄都會依比例變寬或變窄。

若要變更欄寬並保持其他欄位的寬度不變：

  • 按住 Shift 鍵後，拖曳該欄位的邊框。

    便會變更該欄位的寬度。視覺回應效果會顯示欄位調整的結果；整個的表格寬度會變更以配合您正在調整大小的欄位。

若要以視覺化方式變更列高：

  • 拖曳列的下方邊框。

若要使用「屬性」檢視窗來設定欄寬或列高：

  1. 選取欄或列 (請參閱選取列或欄)。
  2. 在「屬性」檢視窗中 (「視窗＞屬性」)，在「寬」文字欄位中輸入值以作為欄寬，或是在「高」文字欄位中輸入值以作為列高。

    如需詳細資訊，請參閱設定儲存格、列及欄的屬性。

    提示

    您可以用像素或百分比來指定寬度和高度，而且也可以在這兩者之間互相轉換。
  3. 按 Tab 或 Enter 鍵 (Windows) 或是 Return (Macintosh) 鍵，以套用該值。

相關主題

  • 調整表格大小
  • 使程式碼中的欄寬與視覺寬度一致
  • 清除已設定的寬度與高度
  • 顯示表格與欄位寬度以及選單


使程式碼中的欄寬與視覺寬度一致

如果您看到欄寬出現兩個數字，則表示 HTML 程式碼中設定的欄寬與畫面上所顯示的欄寬不符。您可以將程式碼中指定的寬度與視覺寬度設為一致。如需詳細資訊，請參閱關於表格。

將寬度設為一致：

  1. 在儲存格中按一下。
  2. 按一下表格標題選單，然後選取「將所有寬度設為一致」。

    Dreamweaver 會重設程式碼中指定的寬度，以符合視覺寬度。

相關主題

  • 調整表格大小
  • 調整欄與列的大小
  • 清除已設定的寬度與高度


清除已設定的寬度與高度

在您調整表格大小之前，或是在調整表格個別欄或列時發生問題而想要重來一次時，可能會想要清除已設定的寬度與高度。

注意

當您拖曳表格的其中一個選取範圍控制點，來調整表格的大小時，您只是變更表格中儲存格的視覺大小，但並未變更儲存格指定的任何寬度或高度。因此在調整大小之前最好先清除已設定的寬度與高度。

若要清除表格中所有已設定的寬度或高度：

  1. 選取表格 (請參閱選取表格)。
  2. 請執行下列其中一項作業：
    • 選取「修改＞表格＞清除儲存格寬度」或「修改＞表格＞清除儲存格高度」。
    • 這是描述功能的圖片。 在「屬性」檢視窗中 (「視窗＞屬性」)，按一下「清除列高度」按鈕或「清除欄寬度」按鈕。 這是描述功能的圖片。
    • 按一下表格標題選單，然後選取「清除全部的高度」或「清除全部的寬度」。

若要清除已設定的欄寬：

  1. 在欄中按一下。
  2. 按一下欄標題選單，然後選取「清除欄寬」。

相關主題

  • 調整表格大小
  • 調整欄與列的大小
  • 使程式碼中的欄寬與視覺寬度一致


顯示表格與欄位寬度以及選單

當您選取表格或將插入點放到表格中時，Dreamweaver 會顯示表格與欄的寬度，以及用來存取表格標題選單與欄標題選單的箭頭。如需詳細資訊，請參閱關於表格。您可以視需要啟用或停用寬度和選單功能。

若要啟用或停用表格與欄寬度及選單，請執行下列其中一項作業：

  • 選取「檢視＞視覺輔助＞表格寬度」。
  • 在表格中按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「表格＞表格寬度」。

相關主題

  • 調整表格大小
  • 調整欄與列的大小


新增和移除列與欄

若要新增和移除列與欄，請使用「修改＞表格」或是欄標題選單。

提示

在表格的最後一個儲存格按 Tab 鍵，會自動新增另一列到表格。

若要新增單一的列或欄：

  1. 在儲存格中按一下。
  2. 請執行下列其中一項作業：
    • 選取「修改＞表格＞插入列」或是「修改＞表格＞插入欄」。

      在插入點上便會出現一列，或是在插入點左邊出現一欄。

    • 按一下欄標題選單，然後選取「在左邊插入欄」或「在右邊插入欄」。

      這時在插入點的左邊或右邊便會出現一欄。

若要新增多列或欄：

  1. 在儲存格中按一下。
  2. 選取「修改＞表格＞插入列或欄」。

    「插入列或欄」對話方塊便會出現。

  3. 選擇「列」或「欄」，然後完成對話方塊。

    如需詳細資訊，請參閱設定插入列或欄對話方塊選項。

  4. 按一下「確定」。

列或欄便會出現在表格中。

若要刪除列或欄，請執行下列其中一項作業：

  • 按一下要刪除的列或欄中的儲存格，然後選取「修改＞表格＞刪除列」或「修改＞表格＞刪除欄」。
  • 選取完整的列或欄 (請參閱選取列或欄)，然後選取「編輯＞清除」或按 Delete 鍵。

整個列或欄便會從表格中消失。

若要使用「屬性」檢視窗新增或刪除列或欄：

  1. 選取表格 (請參閱選取表格)。
  2. 在「屬性」檢視窗中 (「視窗＞屬性」)，請執行下列其中一項作業：
    • 增加或減少「列數」的值，以新增或刪除列。

      Dreamweaver 就會在表格的底部新增和移除列。

    • 增加或減少「欄數」的值，以新增或刪除欄。

      Dreamweaver 就會在表格的右邊新增和移除欄。

      注意

      如果您要刪除含有資料的列和欄，Dreamweaver 不會警告您。

相關主題

  • 分割和合併儲存格
  • 插入重複表格
  • 顯示多筆資料集結果


分割和合併儲存格

請使用「屬性」檢視窗或「修改＞表格」子選單中的命令來分割或合併儲存格。如需詳細資訊，請參閱關於分割和合併表格儲存格。

Dreamweaver 也提供了一些用來增加和減少儲存格所合併列數或欄數的工具，作為另一種合併和分割儲存格的方式。

若要合併表格中的兩個或多個儲存格：

  1. 選取連續行並呈矩形形狀中的多個儲存格。

    在下面的圖例中，選取範圍是儲存格構成的矩形範圍，所以這些儲存格可以合併。

    在以下的圖例中，由於選取範圍不是矩形，所以這些儲存格不能合併。

  2. 請執行下列其中一項作業：
    • 選取「修改＞表格＞合併儲存格」。
    • 在展開的「屬性」檢視窗中 (「視窗＞屬性」)，按一下「合併儲存格」按鈕。 這是描述功能的圖片。

      注意

      如果您沒有看到按鈕，請按一下「屬性」檢視器右下角的箭頭，就可以看到所有的選項。

    個別儲存格的內容就會置於所產生的合併儲存格中。選取的第一個儲存格的屬性會套用到合併後的儲存格。

若要分割儲存格：

  1. 在儲存格中按一下。
  2. 請執行下列其中一項作業：
    • 選取「修改＞表格＞分割儲存格」。
    • 在展開的「屬性」檢視窗中 (「視窗＞屬性」)，按一下「分割儲存格」按鈕。 這是描述功能的圖片。

      注意

      如果您沒有看到按鈕，請按一下「屬性」檢視器右下角的箭頭，就可以看到所有的選項。
  3. 在「分割儲存格」對話方塊中，指定要如何分割儲存格。

    如需詳細資訊，請參閱設定分割儲存格的對話方塊選項。

若要增加或減少儲存格所合併的列數或欄數：

  1. 選取儲存格。
  2. 請執行下列其中一項作業：
    • 選取「修改＞表格＞增加列合併」或「修改＞表格＞增加欄合併」。
    • 選取「修改＞表格＞減少列合併」或「修改＞表格＞減少欄合併」。


複製、貼上及刪除儲存格

您可以複製、貼上或刪除單一表格儲存格或一次處理多個儲存格，並且保留儲存格的格式。

您可以將儲存格貼到插入點或現有表格中選取的位置。若要貼上多個表格儲存格，「剪貼簿」的內容必須與表格結構或表格中要貼上儲存格的選取範圍相容。

若要剪下或複製表格儲存格：

  1. 選取一個儲存格或連續行並呈矩形形狀中的多個儲存格。

    在下面的圖例中，選取範圍是矩形範圍的儲存格，所以可以剪下或複製這些儲存格。

    在以下的圖例中，由於選取範圍不是矩形，所以無法剪下或複製這些儲存格。

  2. 選取「編輯＞剪下」或「編輯＞複製」。

    注意

    如果您選取了一整列或一整欄並且選取「編輯＞剪下」時，整個列或欄就會從表格中移除 (而不只是儲存格的內容)。

若要貼上表格儲存格：

  1. 選取要貼上儲存格的位置：
    • 若要以貼上的儲存格取代現有的儲存格，請選取一組與剪貼簿上儲存格具有相同版面的現有儲存格。

      例如，如果您已經複製或剪下了一塊 3 x 2 的儲存格區塊，便可以選取另一塊 3 x 2 的儲存格區塊，再按貼上以將其取代。

    • 若要將一整列儲存格貼到特定儲存格上方，請在這個儲存格中按一下。
    • 若要將一整欄儲存格貼到特定儲存格的左邊，請在這個儲存格中按一下。

      注意

      如果剪貼簿上不是一整列或一整欄儲存格，而您在某個儲存格中按一下，並且從剪貼簿貼上儲存格，那麼您剛才按的儲存格和相鄰的儲存格，可能會由貼上的儲存格所取代 (視其在表格中的位置而定)。
    • 若要以貼上的儲存格建立新表格，請將插入點置於表格的外面。
  2. 選取「編輯＞貼上」。

    如果您是將整列或整欄貼到現有表格中，這些列或欄就會新增到表格。如果您是貼上個別儲存格，所選取儲存格的內容就會被取代。是果您是在表格之外貼上，這些列、欄或儲存格就會被用來定義新的表格。

若要移除儲存格內容但是不動儲存格：

  1. 選取一個或多個儲存格。

    注意

    請確定選取範圍不是完全由整列或整欄所構成。
  2. 選取「編輯＞清除」或按 Delete。

    注意

    如果您在選取「編輯＞清除」或按 Delete 時只選取了整列或整欄，那麼整列或整欄 (而不只是它們的內容) 就會從表格移除。

若要刪除含有合併儲存格的列或欄：

  1. 選取列或欄。
  2. 選取「修改＞表格＞刪除列」或「修改＞表格＞刪除欄」。


巢狀結構表格

巢狀表格就是一個表格位於另一表格的儲存格中。您可以格式化巢狀表格，就像任何其他表格一樣；但是它的寬度會受到它所出現之儲存格的寬度所限制。

若要將表格以巢狀結構置於另一表格儲存格中：

  1. 按一下現有表格的儲存格。
  2. 選取「插入＞表格」。

    「插入表格」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定表格對話方塊選項。

  4. 按一下「確定」。

    表格便會出現在現有的表格中。


排序表格

您可以依據單一欄的內容來排序表格的列。您也可以依據兩欄的內容執行較複雜的表格排序。

您不可以對含有 colspan 或 rowspan 屬性的表格 (也就是含有合併儲存格的表格) 進行排序。如需詳細資訊，請參閱分割和合併儲存格。

若要排序表格：

  1. 選取表格 (請參閱選取表格)，或是在任何儲存格中按一下。
  2. 選取「命令＞表格排序」。

    「表格排序」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定表格排序對話方塊選項。

  4. 按一下「確定」。


參考

本節提供這一章中所介紹的下列對話方塊和檢視窗的資訊：

  • 設定表格對話方塊選項
  • 設定匯入表格式資料的對話方塊選項
  • 設定表格屬性
  • 設定儲存格、列及欄的屬性
  • 設定格式化表格的對話方塊選項
  • 設定插入列或欄對話方塊選項
  • 設定分割儲存格的對話方塊選項
  • 設定表格排序對話方塊選項
  • 設定匯出表格的對話方塊選項


設定表格對話方塊選項

這個對話方塊是用以在插入表格之前指定表格的屬性。

若要完成「插入表格」對話方塊：

  1. 在「表格大小」區段中，請指定下列選項：

    列數決定表格擁有的列數。

    欄數決定表格擁有的欄數。

    表格寬度是以像素為單位，或以瀏覽器視窗寬度的百分比，指定表格的寬度。

    邊框粗細是以像素為單位，來指定表格邊框的寬度。

    提示

    如果您並未明確指定邊框粗細的值，大部分瀏覽器會以邊框粗細 1 的狀態來顯示表格。若要讓瀏覽器在顯示表格時不顯示邊框，請將邊框粗細設定為 0。若要在邊框粗細設定為 0 時，檢視儲存格與表格邊界，請選取「檢視＞視覺輔助＞表格邊框」。

    儲存格內距決定了儲存格邊框和其內容之間的像素數目。

    儲存格間距決定相鄰表格儲存格之間的像素數目。

    提示

    如果您沒有明確指定「儲存格間距」和「儲存格內距」的值，則大部份瀏覽器會以「儲存格內距」為 1 而「儲存格間距」為 2 的設定顯示表格。若要讓瀏覽器以沒有內距和間距的方式顯示表格，請將「儲存格內距」和「儲存格間距」設定為 0。
  2. 在「標題」區段中，請選取其中一個標題選項：

    無不會對表格啟用欄或列標題。

    靠左對齊可讓表格的第一欄成為標題欄，以便您針對表格的每一「列」輸入其標題。

    靠上對齊可讓表格的第一列成為標題列，以便您針對表格的每一「欄」輸入標題。

    兩者皆有可以讓您在表格中輸入欄和列標題。

    提示

    在您的網站使用標題，對於使用螢幕助讀程式來瀏覽網頁的使用者非常有幫助。螢幕助讀程式會讀取表格標題，並可協助螢幕助讀程式的使用者掌握表格資訊。
  3. 在「輔助功能」區段中，請指定下列選項：

    註解可提供顯示在表格外部的表格標題。

    對齊註解可指定表格註解相對於表格的顯示位置。

    摘要可提供表格說明。螢幕助讀程式會讀取摘要文字，但該文字不會在使用者的瀏覽器中顯示。

  4. 按一下「確定」，建立這個表格。

相關主題

  • 插入表格與新增內容


設定匯入表格式資料的對話方塊選項

這個對話方塊可以讓您指定關於表格式資料檔案的資訊，並可指定要使用這些資料來建立之表格的屬性。

若要完成「匯入表格式資料」對話方塊：

  1. 請指定下列選項：

    資料檔案是指要匯入的檔案名稱。按一下「瀏覽」按鈕以選取檔案。

    分隔符號是指所匯入檔案中使用的分隔符號。

    如果選取「其他」，彈出式選單右邊就會出現一個文字方塊。輸入檔案中使用的分隔符號。

    注意

    請務必要指定這個資料檔案儲存時所使用的分隔符號。如果沒有指定，檔案將無法正確匯入，而資料也無法以正確格式出現在表格中。

    表格寬度是所要建立之表格的寬度。

    • 選取「符合資料大小」可讓每個欄的寬度足夠在欄中容納最長的文字字串。
    • 選取「設為」時，可以用像素為單位來指定固定的表格寬度，或是指定為瀏覽器視窗寬度的百分比。

    儲存格內距是儲存格內容和儲存格邊界之間的像素數目。

    儲存格間距是相鄰表格儲存格之間的像素數目。

    提示

    如果您沒有明確指定「儲存格間距」和「儲存格內距」的值，則大部份瀏覽器會以「儲存格內距」為 1 而「儲存格間距」為 2 的設定顯示表格。若要讓瀏覽器以沒有內距和間距的方式顯示表格，請將「儲存格內距」和「儲存格間距」設定為 0。

    格式化第一橫列會決定要在表格的第一列套用何種格式 (如果有的話)。請從下列四個格式選項中選取：無格式、粗體、斜體或粗斜體。

    邊框是以像素為單位來指定表格邊框的寬度。

    提示

    如果您並未明確指定邊框的值，大部分瀏覽器會以邊框為 1 的狀態來顯示表格。若要讓瀏覽器在顯示表格不顯示邊框，請將「邊框」設定為 0。若要在邊框設定為 0 時，檢視儲存格與表格邊界，請選取「檢視＞視覺輔助＞表格邊框」。
  2. 按一下「確定」。

相關主題

  • 匯入和匯出表格式資料


設定表格屬性

此「屬性」檢視窗可讓您設定表格的屬性。

若要設定表格屬性：

  1. 請設定下列任一種選項：

    表格 ID 是表格的 ID。

    列和欄是表格中列和欄的數目。

    寬與高是以像素為單位，或以瀏覽器視窗寬度百分比，表示表格的寬度和高度。

    注意

    通常您並不需要設定表格的高度。

    內距是儲存格內容和儲存格邊界之間的像素數目。

    間距是相鄰表格儲存格之間的像素數目。

    提示

    如果您沒有明確指定「儲存格間距」和「儲存格內距」的值，則大部份瀏覽器會以「儲存格內距」為 1 而「儲存格間距」為 2 的設定顯示表格。若要讓瀏覽器以沒有內距和間距的方式顯示表格，請將「儲存格內距」和「儲存格間距」設定為 0。

    對齊會決定表格相對於同一段落中其他元素 (例如文字或影像) 顯示的位置。

    「靠左對齊」會讓表格對齊其他元素的左邊 (讓同一段落中的文字在表格的右邊換行)、「靠右對齊」會讓表格對齊其他元素的右邊 (文字在它左邊換行)，而「置中對齊」是將表格置中 (文字出現在表格的上、下)。「預設」是表示瀏覽器應該使用它的預設對齊方式。

    提示

    如果對齊是設定為「預設」，其他的內容就不會顯示在表格旁邊。若要將表格顯示在其他內容的旁邊，請使用「靠左對齊」或「靠右對齊」。

    邊框是以像素為單位來指定表格邊框的寬度。

    提示

    如果您並未明確指定邊框的值，大部分瀏覽器會以邊框為 1 的狀態來顯示表格。若要讓瀏覽器在顯示表格不顯示邊框，請將「邊框」設定為 0。若要在邊框設定為 0 時，檢視儲存格與表格邊界，請選取「檢視＞視覺輔助＞表格邊框」。

    清除欄寬度和清除列高度按鈕會從表格刪除明確指定的列高或欄寬值。

    將表格寬度轉換為像素和將表格高度轉換為像素按鈕會將表格中每一欄的寬度或高度，設定為目前的像素寬度 (也會將整個表格的寬度設定為目前的像素寬度)。

    將表格寬度轉換為百分比和將表格高度轉換為百分比按鈕會以「文件」視窗的寬度百分比，表示表格中每一欄的寬度或高度目前的寬度或高度 (也會以「文件」視窗的寬度百分比，表示整個表格目前的寬度)。

    背景顏色是表格的背景顏色。

    邊框顏色是表格的邊框顏色。

    背景影像是表格的背景影像。

  2. 如果您已經在文字方塊輸入值，請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

相關主題

  • 檢視與設定表格、儲存格、列及欄的屬性
  • 使用顏色
  • 連結檔案和文件
  • 選取表格元素
  • 檢視與設定表格、儲存格、列及欄的屬性


設定儲存格、列及欄的屬性

此「屬性」檢視窗可以讓您設定表格元素 (儲存格、列和欄) 的屬性。

注意

當您設定欄的屬性時，Dreamweaver 會變更對應到此欄中每一個儲存格的 td 標籤屬性。不過，當您設定列的特定屬性時，Dreamweaver 會變更 tr 標籤的屬性，而不是變更列裡面每個 td 標籤的屬性；當您要將同樣的格式套用到列裡面的所有儲存格時，將格式套用到 tr 標籤可以產生更乾淨、更精簡的 HTML 程式碼。

若要設定表格元素的屬性：

  1. 請設定下列任一種選項：

    水平指定了儲存格、列或欄內容的水平對齊方式。您可以將內容靠左對齊、靠右對齊或置中對齊儲存格，也可以指定瀏覽器使用它的預設對齊方式 (通常一般儲存格為靠左對齊，標題儲存格為置中對齊)。

    垂直指定了儲存格、列或欄內容的垂直對齊方式。您可以將內容對齊儲存格的上方、中間、下方或基線，也可以指定瀏覽器使用它的預設對齊方式 (通常為置中對齊)。

    寬與高是以像素為單位，或以整個表格寬度或高度百分比，表示所選儲存格的寬度和高度。若要指定百分比，請在值後面加上百分比符號 (%)。若要讓瀏覽器依據儲存格內容以及其他列和欄的寬度與高度來決定適當的寬度或高度，請將欄位留白 (預設)。

    依預設值，瀏覽器會選擇能容納欄中最寬影像或最長行的欄。這就是為什麼有時新增內容到表格時，某個欄會比表格中的其他欄寬很多。

    依預設值，瀏覽器會選擇能容納列中所有文字和影像的列高。

    注意

    您可以將高度指定為整個表格高度的百分比，但是列不一定能以指定的百分比高度在瀏覽器中顯示。

    背景 (上方文字欄位) 是儲存格、欄或列的背景影像檔案名稱。按一下資料夾圖示以瀏覽影像，或使用「指向檔案」圖示來選取影像檔案。

    背景 (下方顏色色票與文字欄位) 是儲存格、欄或列的背景顏色，以顏色挑選器來選擇。

    邊框是儲存格的邊框顏色。

    合併儲存格按鈕會將選取的儲存格、列或欄結合成一個儲存格 (請參閱分割和合併儲存格)。選取的儲存格必須構成一個矩形或直線區塊，才可以使用合併儲存格。

    分割儲存格按鈕會將儲存格分割，形成兩個以上的儲存格 (請參閱分割和合併儲存格)。您一次只能分割一個儲存格；如果選取了一個以上儲存格，這個按鈕就無法使用。

    不換行會阻止換行，而使指定儲存格內的文字保持在同一行中。如果啟用了「不換行」，當您在儲存格輸入或貼上資料時，儲存格就會加寬來容納所有的資料 (一般而言，儲存格會先水平擴展以容納儲存格中最長的字或最寬的影像，然後視需要垂直擴展以容納其他內容)。

    標題會將選取的儲存格格式化成為表格標題儲存格。表格標題儲存格的內容預設為粗體並且置中。

  2. 如果您已經在文字方塊輸入值，請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

相關主題

  • 檢視與設定表格、儲存格、列及欄的屬性
  • 選取表格元素
  • 檢視與設定表格、儲存格、列及欄的屬性
  • 使用顏色
  • 連結檔案和文件


設定格式化表格的對話方塊選項

這個對話方塊可以讓您選取預先格式化的表格設計，以套用到表格上。

若要完成「表格格式」對話方塊：

  1. 從左邊的清單中選取設計配置。

    範例表格會顯示所選取設計的範例。

  2. 請指定下列選項：

    橫列顏色選項是指定要套用到列的顏色，以及隔多少列要交替顏色。

    第一橫列選項是指定表格第一列 (可能包含欄標題) 的對齊方式、文字樣式、背景顏色和文字顏色。

    最左直行選項是指定表格最左欄 (可能包含列標題) 的對齊方式和文字樣式。

    邊框是以像素為單位的表格邊框寬度。

    提示

    如果您並未明確指定邊框的值，大部分瀏覽器會以邊框為 1 的狀態來顯示表格。若要讓瀏覽器在顯示表格不顯示邊框，請將「邊框」設定為 0。若要在邊框設定為 0 時，檢視儲存格與表格邊界，請選取「檢視＞視覺輔助＞表格邊框」。

    將所有屬性套用到 TD 標籤而不是 TR 標籤會將設計套用到表格儲存格 (td 標籤)，而不是套用到表格列 (tr 標籤)。

    依預設值，在「表格格式」對話方塊中指定的格式會套用至整列，而不是套用至個別儲存格。當您要將同樣的格式套用到列裡面的所有儲存格時，將格式套用到 tr 標籤時，會產生更乾淨、更精簡的 HTML 程式碼。不過，此選項也可以讓您將格式套用到個別儲存格，以配合您的程式碼撰寫習慣。如需詳細資訊，請參閱格式化表格和儲存格。

  3. 請執行下列其中一項作業：
    • 按一下「套用」將格式套用到表格而不關閉對話方塊。然後對格式進行變更，或按一下「確定」或「取消」關閉對話方塊。
    • 按一下「確定」將格式套用到表格並且關閉對話方塊。


設定插入列或欄對話方塊選項

這個對話方塊可以讓您將一個或多個列或欄插入表格中。

若要完成「插入列或欄」對話方塊：

  1. 請指定下列選項：

    插入可指定要插入列或是欄。

    列數或欄數是要插入的列數或欄數。

    位置則可指定列或欄應該出現在所選儲存格前面還是後面。

  2. 按一下「確定」。

相關主題

  • 新增和移除列與欄


設定分割儲存格的對話方塊選項

這個對話方塊可讓您指定如何分割表格儲存格。

若要完成「分割儲存格」對話方塊：

  1. 請指定下列選項：

    儲存格分割成可指定要將儲存格分割成多列或是分割成多欄。

    列數/欄數可指定儲存格要分割成多少列或欄。

  2. 按一下「確定」。


設定表格排序對話方塊選項

這個對話方塊可讓您指定應該如何排序表格。

若要完成「表格排序」對話方塊：

  1. 請指定下列選項：

    排序可決定使用哪一欄的值將表格的列排序。

    順序是決定要依字母順序或依數字順序來排序欄，以及要依據遞增順序 (A 到 Z、小數字到大數字) 或遞減順序來排序。

    如果欄的內容為數字時，請選取「依照數字大小」。將字母順序排序套用到一位數字或兩位數字，會將排序的數字視為單字 (產生如 1、10、2、20、3、30 這樣的順序) 而不是當作數值來排序 (產生如 1、2、3、10、20、30 這樣的順序)。

    再排序/順序是決定對另一欄進行次要排序的排序順序。在「再排序」彈出式選單指定次要排序的欄，並且在「順序」彈出式選單中指定次要排序的順序。

    第一個橫列也要排序是指定表格的第一列也要排序。如果第一列是不應該移動的標題，請不要選取這個選項。

    排序首頁列可指定使用與主列相同的準則，排序表格 thead 區段 (如果有) 內的所有列。(請注意，即使在排序之後，thead 列仍會保持在 thead 區段中並在表格的頂端顯示)。如需關於 thead 標籤的詳細資訊，請參閱「參考」面板 (選取「說明＞參考」)。

    排序首尾列可指定使用與主列相同的準則，排序表格 tfoot 區段 (如果有) 內的所有列。(請注意，即使在排序之後，tfoot 列仍會保持在 tfoot 區段中並在表格的底部顯示)。如需關於 tfoot 標籤的詳細資訊，請參閱「參考」面板 (選取「說明＞參考」)。

    完成排序後將全部列的顏色保持相同可用來指定在排序後，表格列屬性 (例如顏色) 仍應與原來的內容維持關聯。如果您將表格列格式化成兩種交替的顏色，請不要選取這個選項，以確保排序後的表格仍然保有交替顏色的列。如果列屬性是針對每一列的內容，請選取這個選項，以確保這些屬性在排序後的表格中仍然會與正確的列關聯。

  2. 按一下「套用」或「確定」。


設定匯出表格的對話方塊選項

這個對話方塊可以讓您針對要從表格匯出資料而建立的文字檔，設定其分隔符號和斷行樣式。

若要完成「匯出表格」對話方塊：

  1. 請指定下列選項：

    分隔符號是指定要使用哪一種分隔符號字元，分隔所匯出檔案中的項目。

    分行符號是指定您要在哪種作業系統開啟匯出的檔案：Windows、Macintosh 或 UNIX (不同作業系統表示文字行結尾的方式也不相同)。

  2. 按一下「匯出」。


在版面模式中配置頁面

建立頁面版面最常見的方法之一，就是使用 HTML 表格來定位元素。不過，就版面配置而言，表格可能不易使用，因為它們原本就是為了顯示表格式資料而建立，而不是為了配置網頁。為了簡化使用表格進行頁面配置的程序，Macromedia Dreamweaver 8 提供了「版面」模式。

在「版面」模式中，您可以按照以下的結構，使用表格來設計頁面，而避免使用傳統方式進行表格式設計時，經常發生的某些問題。

注意

如需關於在「標準」模式中使用表格的詳細資訊，請參閱以表格呈現內容。或者，除了在「標準」或「版面」模式中使用表格以外，您也可以使用 CSS 定位來配置版面 (請參閱插入版面的 Div 標籤)。

本章包含下列各節：

關於版面模式

從標準切換為版面模式

在版面模式中繪製

新增內容到版面儲存格

清除自動設定儲存格高度

調整大小和移動版面儲存格與表格

格式化版面儲存格和表格

設定欄寬

設定版面模式的偏好設定


關於版面模式

在「版面」模式中，您在新增內容之前，使用版面儲存格和表格來配置頁面。例如，您可以沿著頁面頂端繪製一個儲存格來放置標題圖形，在頁面左邊繪製另一個儲存格用來放置導覽列，而第三個在右邊的儲存格則用來放置內容。當您在新增內容時，您可以根據需要來四處移動儲存格以調整版面。

提示

為了取得最大的彈性，您可以在已經準備要將內容置入儲存格時才描繪每個儲存格。如此可讓您在版面表格中時常保留較大的空間，以便更輕易地移動或調整儲存格的大小。

頁面上的版面表格在顯示綠色外框，版面儲存格則顯示藍色外框。若要變更預設的外框顏色，請參閱設定版面模式的偏好設定。當您將滑鼠指標移過表格儲存格時，Dreamweaver就會將儲存格反白標示。若要啟用或停用反白標示，或變更反白標示顏色，請參閱繪製版面儲存格和表格。

您可以在一個版面表格中使用數個版面儲存格來配置頁面，這也是網頁配置最常見的方式﹔或者在較複雜的版面中，也可以使用許多個別的版面表格。使用多個版面表格可將版面區分為幾個區域，以免受到其他區域變更的影響。

您也可以將版面表格巢狀化，只要將新版面表格放入現有版面表格內即可 (請參閱繪製巢狀版面表格)。當版面某部份的列或欄與其他部份的列或欄並不對齊時，這種結構可以簡化表格的結構。舉例來說，使用巢狀版面表格讓您輕易地製作兩欄的版面，其中左邊的欄有四列，而右邊的欄則有三列。

本節包含下列概念性主題：

  • 關於在「版面」模式中檢視表格與儲存格寬度
  • 版面表格與儲存格格線
  • 固定欄寬與自動延伸欄
  • 間隔影像

相關主題

  • 從標準切換為版面模式
  • 在版面模式中繪製


關於在「版面」模式中檢視表格與儲存格寬度

當您選取表格或將插入點放入表格中時，版面表格與儲存格 (以像素或是依頁面寬度的百分比計算) 寬度便會在表格的頂端或底部顯示。寬度旁邊是表格標題選單與欄標題選單的箭頭。使用選單可以快速存取一些常用的命令。

注意

若要停用欄寬以及表格索引標籤與標題選單，您必須停用所有的視覺輔助 (「檢視＞視覺輔助＞隱藏全部」)。

有時候可能不會顯示欄寬；您可能會看到如下所示的任何情況：

  • 沒有顯示寬度。如果您看不到表格或欄的寬度，表示 HTML 程式碼中並無該表格或欄的指定寬度。若要指定固定寬度，請參閱將欄設定為自動延伸或固定寬度。
  • 顯示兩個數字。如果出現了兩個數字，則表示其在「設計」檢視中所顯示的視覺寬度與 HTML 程式碼中指定的寬度不符。發生此問題的原因可能是由於您拖曳了表格的右下角，或是在儲存格中加入了超出其設定寬度的內容。

    例如，如果您將欄的寬度設成 200 像素，然後加入內容後使其延伸至 250 像素，該欄頂端便會出現兩個數字：200 是程式碼中所指定的寬度，括號中的 (250) 則是畫面上呈現欄時的視覺寬度。

    若要調整欄寬，請參閱使程式碼中的欄寬與視覺寬度一致。

  • 顯示波狀線。設定為自動延伸的欄會顯示波狀線。如需關於將欄設定為自動延伸的詳細資訊，請參閱將欄設定為自動延伸或固定寬度。
  • 顯示雙列。含有間隔影像的欄，其欄寬周圍會有雙列。如需關於間隔影像的詳細資訊，請參閱使用間隔影像。

相關主題

  • 設定欄寬


版面表格與儲存格格線

當您在版面表格中繪製版面儲存格時，會出現淡淡的格線，由任何新版面儲存格邊緣延伸至其所屬的版面表格邊緣。這些格線可以協助您利用原有儲存格來對齊新的儲存格，讓您對於基本的 HTML 表格結構有所掌握。

Dreamweaver 會自動貼齊新儲存格的邊緣，使其與附近的現有儲存格邊緣對齊 (「版面」儲存格不可以重疊)。如果您繪製一個靠近表格邊緣的儲存格，儲存格的邊緣也會自動貼齊包含的版面表格邊緣。

您也可以利用固定且不會根據儲存格位置而變的 Dreamweaver 格線，協助您配置頁面 (請參閱使用影像藍圖)。

相關主題

  • 關於版面模式


固定欄寬與自動延伸欄

「版面」模式中的欄可以設為固定寬度，或是自動延伸至瀏覽器視窗可容納的最大寬度 (即「自動延伸」)。

固定寬度欄有特定數值的寬度，例如 300 像素。Dreamweaver 將在欄的頂端或底部顯示每個固定寬度欄的欄寬。

自動延伸欄會根據瀏覽器視窗的寬度自動變更。如果版面中包含自動延伸欄，則版面會始終填滿使用者的整個瀏覽器視窗寬度。在每個特定的版面表格中，您只能設定一個欄寬自動延伸。自動延伸欄會在欄寬區域內顯示波狀線。

一般的版面是會讓包含頁面主要內容的欄寬自動延伸，而自動設定其他的欄為固定寬度。例如，假設您的版面在頁面左邊有一張寬的影像，而右邊有一欄文字，您可以將左欄設定為固定寬度，並且讓邊列區域自動延伸。

當您設定某欄自動延伸時，Dreamweaver 會在固定寬度的欄中插入間隔影像，以確保這些欄保持應有的寬度 (除非您指定不使用間隔影像)。間隔影像是一種透明的影像，用來控制間距，在瀏覽器視窗中是看不見的。如需詳細資訊，請參閱間隔影像。

相關主題

  • 將欄設定為自動延伸或固定寬度


間隔影像

間隔影像 (又稱為「間隔 GIF」) 是一種透明影像，可用來控制自動延伸表格中的間距。間隔影像由單一像素的透明 GIF 影像組成，延伸為一個指定數字的像素寬。由於瀏覽器無法繪製出一個比該欄中包含最寬影像的儲存格還窄的表格欄，因此在表格欄中加入間隔影像，可以讓瀏覽器將欄位保持至少與影像同寬。

除非您指定不使用間隔影像，否則 Dreamweaver 將自動在您設定欄寬自動延伸時加入間隔影像。如果喜歡的話，您也可以手動插入和移除每個欄中的間隔影像。包含間隔影像的欄在顯示欄寬處會出現雙列。

您可以手動插入或移除指定欄中的間隔影像，或者移除頁面中所有間隔影像。

相關主題

  • 使用間隔影像


從標準切換為版面模式

您必須先從「標準」模式切換為「版面」模式，才能繪製版面表格或版面儲存格。雖然您是在「版面」模式中建立表格，但在表格中加入內容或編輯表格之前，最好還是切換回「標準」模式。

注意

如果您在「標準」模式中建立表格，然後切換為「版面」模式，則呈現出的版面表格可能會包含空白的版面儲存格。您必須先刪除這些空白的版面儲存格，才能夠建立新的版面儲存格或將其移動。

若要切換為「版面」模式：

  1. 如果您正在使用「程式碼」檢視，請先選取「檢視＞設計」或「檢視＞程式碼和設計」。

    因為在「程式碼」檢視中無法切換為「版面」模式。

  2. 請執行下列其中一項作業：
    • 選取「檢視＞表格模式＞版面模式」。
    • 在「插入」列的「版面」類別中，按一下「版面模式」按鈕。

「文件」視窗的頂端就會顯示標示為「版面模式」的列。如果頁面上有表格，它們會顯示為版面表格。

若要切換為「版面」模式，請執行下列其中一項作業：

  • 在「文件」視窗的頂端標示為「版面」模式的列中按一下「結束」。
  • 選取「檢視＞表格模式＞標準模式」。
  • 在「插入」列的「版面」類別中，按一下「標準模式」按鈕。

Dreamweaver 便會回到「標準模式」。


在版面模式中繪製

「版面」模式可讓您繪製儲存格和表格，包括其他表格中的巢狀表格在內。貼齊格線可協助您對齊儲存格 (請參閱使用影像藍圖)。

本節包含下列主題：

  • 繪製版面儲存格和表格
  • 繪製巢狀版面表格


繪製版面儲存格和表格

您可以在「版面」模式中，於頁面上繪製版面儲存格和表格。當您在版面表格之外繪製版面儲存格時，Dreamweaver 便會自動建立另一個版面表格以作為該儲存格的容器。版面儲存格一定是包含在版面表格內。

注意

在「版面」模式中，您無法使用可以在「標準」模式中使用的「插入表格」與「繪製圖層」工具。若要使用這些工具，您必須先切換為「標準」模式。

即使您變更「文件」視窗的大小，當 Dreamweaver 自動建立版面表格時，表格將自動出現，填滿整個「設計」檢視。這個全視窗預設版面表格讓您能夠在「設計」檢視中隨處繪製版面儲存格。只要按一下表格的邊框，再拖曳表格的調整大小控制點，便可將表格設定為特定的大小。

當您將滑鼠指標移過該版面儲存格時，Dreamweaver 就會將其反白標示。您可以在偏好設定中啟用或停用反白標示，或變更反白標示顏色。

若要繪製版面儲存格：

  1. 請確定您是在「版面」模式中 (請參閱從標準切換為版面模式)。
  2. 在「插入」列的「版面」類別中，按一下「繪製版面儲存格」按鈕。 這是描述功能的圖片。

    滑鼠指標會變為加號 (+)。

  3. 將滑鼠指標放在您想要在頁面上起始儲存格的位置，然後拖曳來建立版面儲存格。

    提示

    若要繪製一個以上的版面儲存格而不要重複選取「繪製版面儲存格」，那麼當您繪製版面儲存格時，請按住 Control (Windows) 或 Command (Macintosh) 並進行拖曳。只要您持續按住 Control 或 Command 鍵，便可繪製出多個版面儲存格。

    如果您繪製了一個靠近版面表格邊緣的儲存格，儲存格邊緣便會自動貼齊包圍的版面表格邊緣。若要暫時關閉貼齊功能，請在繪製儲存格時按下 Alt (Windows) 或 Option (Macintosh)。

在頁面上，這個儲存格會呈現藍色外框。若要變更外框顏色，請參閱設定版面模式的偏好設定。

若要繪製版面表格：

  1. 請確定您是在「版面」模式中 (請參閱從標準切換為版面模式)。
  2. 在「插入」列的「版面」類別中，按一下「繪製版面表格」按鈕。 這是描述功能的圖片。

    滑鼠指標會變為加號 (+)。

  3. 將滑鼠指標放在頁面上，然後拖曳來建立版面表格。

    提示

    若要繪製一個以上的版面表格而不要重複選取「繪製版面儲存格」，那麼當您繪製板面表格時，請按住 Control (Windows) 或 Command (Macintosh) 並進行拖曳。只要您持續按住 Control 或 Command 鍵，便可繪製出多個版面表格。

    您可以在頁面版面的空白區域，或是在現有的版面儲存格和表格的附近建立版面表格，或是在現有版面表格內建立巢狀表格。如果您的頁面中包含內容，而您希望在頁面版面的空白區域中加入版面表格時，便只能在現有內容的底部上繪製新的版面表格。

    提示

    若您試圖在現有內容底部繪製版面表格，但繪圖指標並未出現，請試著調整「文件」視窗的大小，以便在現有內容底部與視窗底部之間建立更多的空間。

    注意

    表格不允許互相重疊，但是可以完全包含於另一個表格內。如需詳細資訊，請參閱繪製巢狀版面表格。

在頁面上，「版面」表格會呈現綠色外框。若要變更外框顏色，請參閱設定版面模式的偏好設定。

若要變更版面儲存格的反白標示偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 選取左側的分類清單中的「標示」。
  3. 執行下列其中一項變更：
    • 若要變更反白標示顏色，請按一下「滑鼠滑過時」顏色方塊，然後使用顏色挑選器來選取反白標示顏色 (或是在文字方塊中輸入反白標示顏色的十六進位值)。

      如需關於使用顏色挑選器的詳細資訊，請參閱使用顏色。

    • 若要啟用或停用反白標示，請選取或取消選取「滑鼠滑過」的「顯示」核取方塊。

      注意

      這些選項會影響到所有的物件，如當您將滑鼠指標移過去時 Dreamweaver 便會反白標示的表格與版面。
  4. 按一下「確定」。


繪製巢狀版面表格

您可以在另一個版面表格內繪製版面表格，藉以建立巢狀表格。巢狀表格內的儲存格不受其外圍表格所做變更的影響；例如，當您在外圍表格中變更列或欄的大小時，其內部表格的儲存格大小不會改變。

您可以插入多個巢狀表格層級。巢狀版面表格不可大於包含它的表格。

注意

在繪製版面儲存格前，如果您在頁面中間繪製版面表格，則您所繪製的表格會自動成為較大表格內的巢狀表格。

若要繪製巢狀版面表格：

  1. 請確定您是在「版面」模式中 (請參閱從標準切換為版面模式)。
  2. 在「插入」列的「版面」類別中，按一下「繪製版面表格」按鈕。 這是描述功能的圖片。

    滑鼠指標會變為加號 (+)。

  3. 將指標指向現有版面表格中的空白 (灰色) 區域，然後拖曳來建立巢狀版面表格。

    注意

    您無法在版面儲存格內建立版面表格。只能在現有版面表格的空白區域或現有儲存格周圍建立巢狀版面表格。

若要在現有版面儲存格或表格周圍繪製版面表格：

  1. 請確定您是在「版面」模式中 (請參閱從標準切換為版面模式)。
  2. 在「插入」列的「版面」類別中，按一下「繪製版面表格」按鈕。

    滑鼠指標會變為加號 (+)。

  3. 在一組現有版面儲存格或表格周圍拖曳滑鼠，繪製出一個矩形。

    新的巢狀版面表格便會出現，包圍住現有的儲存格或表格。

    提示

    若要讓現有的版面儲存格與新的巢狀表格其中一個角落緊貼，請向儲存格角落開始拉近，新表格的角落便會貼齊儲存格的角落。您無法從版面儲存格的中間開始拖曳，因為您無法在版面儲存格內完整地建立版面表格。


新增內容到版面儲存格

您可以在「版面」模式中，將文字、影像或其他內容新增到版面儲存格中，就像您在「標準」模式中將內容新增到表格儲存格一樣。按一下您想要加入內容的儲存格，然後輸入文字或插入其他內容。

您只能將內容插入版面儲存格內，不能插入版面表格的空白 (灰色) 區域。因此，您必須先建立版面儲存格，然後才能加入內容 (請參閱在版面模式中繪製)。

若要在版面儲存格加入文字：

  1. 將插入點放在您想要加入文字的版面儲存格中。
  2. 請執行下列其中一項作業：
    • 在儲存格內輸入文字。

      必要的話，該儲存格將在您輸入文字時自動延伸。

    • 貼上由另一份文件複製而來的文字。

      如需詳細資訊，請參閱插入文字。

若您新增的內容大於儲存格的寬度，版面儲存格便會自動延伸。當儲存格延伸時，該儲存格所在的欄也會跟著延伸，周圍的儲存格大小可能因而受到影響。該欄的寬度會變更，藉以顯示程式碼中出現的寬度，接續顯示於括號內的欄視覺寬度 (也就是畫面中顯示的欄寬)。如需關於欄寬的詳細資訊，請參閱設定欄寬。

若要新增影像到版面儲存格：

  1. 將插入點放在您想要新增影像的版面儲存格上。
  2. 請執行下列其中一項作業：
    • 選取「插入＞影像」。
    • 在「插入」列的「常用」類別中，按一下「影像」按鈕上的箭頭，然後選取「影像」。

      提示

      如果「插入」列中顯示了「影像」按鈕 (如下列範例所示)，您只需要按一下此按鈕即可，不需要使用彈出式選單。

    「選取影像原始檔」對話方塊便會出現。

  3. 選取影像檔。

    如需詳細資訊，請參閱插入影像。

  4. 按一下「確定」。

影像便會出現在版面儲存格中。


清除自動設定儲存格高度

當您建立版面儲存格時，Dreamweaver 便會自動指定該儲存格的高度，使其與您繪製的高度相當 (即使該儲存格空白)。在您將內容插入儲存格後，您就不需要再指定高度，因此您可以移除表格的明確儲存格高度。

若要清除儲存格高度，請執行下列其中一項作業：

  • 按一下表格標題選單，然後選取「清除全部的高度」。

  • 按一下表格頂端的索引標籤以選取版面表格，然後按一下「屬性」檢視窗 (「視窗＞屬性」) 中的「清除列高」按鈕 這是描述功能的圖片。
    。

Dreamweaver 便會清除所有該表格中指定的高度。有些表格儲存格可能就會垂直縮短。


調整大小和移動版面儲存格與表格

若要調整頁面的版面，您可以移動及調整版面儲存格和巢狀版面表格的大小 (最外層的版面表格則只能調整大小)。

注意

若要在移動或調整儲存格與表格大小時，使用 Dreamweaver 格線做為導引，請參閱使用影像藍圖。

本節包含下列主題：

  • 調整大小和移動版面儲存格
  • 調整大小和移動版面表格


調整大小和移動版面儲存格

您可以調整大小或移動版面儲存格，但它們不可以重疊。您無法移動或調整儲存格大小，使其跨越包含它的版面表格之邊緣。版面儲存格不能小於其內容。

如需關於調整大小或移動版面表格的詳細資訊，請參閱調整大小和移動版面表格。

若要調整版面儲存格大小：

  1. 按一下儲存格邊緣將其選取，或者在該儲存格的任一處按住 Control (Windows) 或 Command (Macintosh) + 按一下滑鼠。

    選取範圍控點便會出現在儲存格外圍。

  2. 拖曳選取範圍控點來調整儲存格大小。

    儲存格的邊緣將自動貼齊，以與其他儲存格的邊緣對齊。

若要移動版面儲存格：

  1. 按一下儲存格邊緣將其選取，或者在該儲存格的任一處按住 Control (Windows) 或 Command (Macintosh) + 按一下滑鼠。

    選取範圍控點便會出現在儲存格外圍。

  2. 請執行下列其中一項作業：
    • 將儲存格拖曳至其所在的版面表格中的另一個位置。
    • 按一下箭號，一次讓儲存格移動一個像素的距離。

      提示

      在按下箭號時同時按住 Shift，便可以一次移動儲存格 10 個像素的距離。


調整大小和移動版面表格

版面表格也不能被調整到小於可包含其所有儲存格的最小矩形。版面表格的大小調整如果會使其與其他表格或儲存格重疊的話，此項作業也無法執行。

若要調整大小和移動版面儲存格，請參閱調整大小和移動版面儲存格。

若要調整版面表格大小：

  1. 按一下表格頂端的標籤將其選取。

    選取範圍控點便會出現在表格外圍。

  2. 拖曳選取範圍控點來調整表格大小。

    表格的邊緣將自動貼齊，以對齊其他儲存格和表格的邊緣。

若要移動版面表格：

  1. 按一下表格頂端的標籤將其選取。

    選取範圍控點便會出現在表格外圍。

    注意

    您只能移動位在版面表格內的巢狀版面表格。
  2. 請執行下列其中一項作業：
    • 拖曳表格到頁面上的另一個位置。
    • 按一下箭號，一次讓表格移動一個像素的距離。

      提示

      在按下箭號時同時按住 Shift，便可以一次將表格移動 10 個像素的距離。


格式化版面儲存格和表格

您可以利用「屬性」檢視窗變更任何版面儲存格或表格的外觀。

本節包含下列主題：

  • 格式化版面儲存格
  • 格式化版面表格


格式化版面儲存格

您可以在「屬性」檢視窗中設定版面儲存格的各種屬性，包括寬度與高度、背景顏色及儲存格內容的對齊方式。

若要在「屬性」檢視窗中格式化版面儲存格：

  1. 按一下儲存格邊緣將其選取，或者在該儲存格的任一處按住 Control (Windows) 或 Command (Macintosh) + 按一下滑鼠。
  2. 如果尚未開啟的話，請開啟「屬性」檢視窗 (「視窗＞屬性」)。

  3. 請設定屬性以變更儲存格的格式。

    如需詳細資訊，請參閱設定版面儲存格屬性。


格式化版面表格

您可以在「屬性」檢視窗中設定版面表格的各種屬性，包括寬度、高度、欄位內距及間距。

若要格式化版面表格：

  1. 按一下表格頂端的標籤將其選取。
  2. 如果尚未開啟的話，請開啟「屬性」檢視窗 (「視窗＞屬性」)。

  3. 請設定屬性以變更表格的格式。

    如需詳細資訊，請參閱設定版面表格屬性。


設定欄寬

您可以將欄設定成特定的寬度，或是讓它能延伸以儘可能填滿瀏覽器的視窗。您也可以使用間隔影像來指定欄的最小寬度。

有時在 HTML 程式碼中設定的表格欄寬，與畫面上所顯示的寬度並不相符。如果發生這種情況，您可以將寬度改為一致。

本節包含下列主題：

  • 將欄設定為自動延伸或固定寬度
  • 使用間隔影像
  • 使程式碼中的欄寬與視覺寬度一致


將欄設定為自動延伸或固定寬度

表格中的欄可以設為固定寬度或自動延伸。如需詳細資訊，請參閱固定欄寬與自動延伸欄。

若在版面配置完成前將某欄設定為自動延伸，表格版面上可能會出現無法預期的結果。若要防止欄無法預期地變得過寬或過窄，請在設定欄寬自動延伸之前建立完整的版面，並且在設定欄寬自動延伸時使用間隔影像。(不過，如果每個欄中都包含可使其保持理想寬度的內容時，就不需要間隔影像了)。

若要設定欄寬自動延伸：

  1. 請執行下列其中一項作業：
    • 按一下欄標題選單，然後選取「設定欄寬自動延伸」。

    • 請按一下儲存格的邊緣來選取欄中的儲存格，然後再按一下「屬性」檢視窗中的「自動延伸」。

      注意

      在每個特定表格中，您只能將一個欄設定為自動延伸。

    如果您尚未設定此網站的間距影像，便會出現「選擇間隔影像」對話方塊。

  2. 如果出現了「選擇間隔影像」對話方塊，請選取一個選項，然後按一下「確定」。

    如需詳細資訊，請參閱設定選擇間隔影像的對話方塊選項。

自動延伸欄的底部或頂端會顯示一條波狀線。包含間距影像的欄位底部或頂端會顯示雙列。

若要設定欄寬為固定，請執行下列其中一項作業：

  • 按一下欄標題選單，然後選取「設定固定欄寬」。

    「設定固定欄寬」可以指定欄 (在程式碼中) 的寬度，使其符合目前該欄的視覺寬度。

  • 請按一下儲存格的邊緣來選取欄中的儲存格，然後再按一下「固定」並且在「屬性」檢視窗中輸入其數值。

    如果您輸入的數值小於欄內容的寬度，Dreamweaver 便會自動設定寬度，以使其符合內容的寬度。

欄的頂端或底部會顯示欄寬。

相關主題

  • 使用間隔影像
  • 使程式碼中的欄寬與視覺寬度一致


使用間隔影像

若需要欄能設成特定的最小寬度，您可以在該欄中插入間隔影像。如需詳細資訊，請參閱間隔影像。您可以移除單一的欄位中或整個表格中的間隔影像。

您會在第一次插入間隔影像時，設定該網站的間隔影像。您可以設定間隔影像的偏好設定 (請參閱設定版面模式的偏好設定)。

若要在欄位中插入間隔影像：

  1. 按一下欄標題選單，然後選取「增加間隔影像」。

    如果您尚未設定此網站的間距影像，便會出現「選擇間隔影像」對話方塊。

  2. 如果出現了「選擇間隔影像」對話方塊，請選取一個選項，然後按一下「確定」。

    如需詳細資訊，請參閱設定選擇間隔影像的對話方塊選項。

Dreamweaver 會在欄位中插入間隔影像。雖然您看不見這個影像，但是欄位還是會稍微的位移，而由其頂端所顯示的雙列也可判別其中含有間隔影像。

若要移除單一欄位的間隔影像：

  • 按一下欄標題選單，然後選取「移除間隔影像」。

Dreamweaver 便會移除間隔影像。該欄可能會位移。

若要從表格中移除所有的間隔影像，請執行下列其中一項作業：

  • 按一下表格標題選單，然後選取「移除全部間隔影像」。
  • 選取表格，然後再按一下「屬性」檢視窗 (「視窗＞屬性」) 中的「移除全部間隔」按鈕。 這是描述功能的圖片。

整個表格的版面可能會位移。如果某些欄沒有內容，可能就會從「設計」檢視中完全消失。


使程式碼中的欄寬與視覺寬度一致

如果您看到欄寬出現兩個數字，則表示 HTML 程式碼中設定的欄寬與畫面上所顯示的欄寬不符。您可以將程式碼中指定的寬度與視覺寬度設為一致。如需詳細資訊，請參閱關於在「版面」模式中檢視表格與儲存格寬度。

將寬度設為一致：

  1. 在儲存格中按一下。
  2. 請執行下列其中一項作業：
    • 按一下表格標題選單，然後選取「將所有寬度設為一致」。

    • 選取表格，然後再按一下「屬性」檢視窗 (「視窗＞屬性」) 中的「移除全部間隔」按鈕。 這是描述功能的圖片。

    Dreamweaver 會重設程式碼中指定的寬度，以符合視覺寬度。

相關主題

  • 將欄設定為自動延伸或固定寬度
  • 使用間隔影像


設定版面模式的偏好設定

您可以指定間隔影像檔案以及 Dreamweaver 用來繪製版面表格與版面儲存格的顏色偏好設定。

如要設定「版面」模式偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左側的分類清單中選取「版面模式」。
  3. 必要時進行變更。

    如需詳細資訊，請參閱設定版面模式偏好設定的對話方塊選項。

  4. 按一下「確定」。


參考

這一節提供有關本章中所介紹對話方塊和檢視窗的資訊：

  • 設定版面儲存格屬性
  • 設定版面表格屬性
  • 設定選擇間隔影像的對話方塊選項
  • 設定版面模式偏好設定的對話方塊選項


設定版面儲存格屬性

此「屬性」檢視窗讓您可以設定版面儲存格的屬性。

若要設定版面儲存格的屬性：

  1. 請設定下列任一種選項：

    固定將儲存格設定為固定寬度。以像素為單位，在鄰近的文字方塊中輸入寬度 (請參閱設定欄寬)。

    自動延伸可以將儲存格設定為自動延伸 (請參閱設定欄寬)。

    高度就是儲存格的高度 (以像素為單位)。

    背景顏色就是版面儲存格的背景顏色。按一下顏色方塊，然後在「顏色挑選器」中選擇一種顏色，或者輸入一個對應於鄰近文字方塊中顏色的 16 進位數字。

    水平可設定儲存格內容的水平對齊方式。您可以設定對齊方式為「靠左對齊」、「置中對齊」、「靠右對齊」或「預設」。

    垂直可設定儲存格內容的垂直對齊方式。您可以設定對齊方式為「靠上對齊」、「置中對齊」、「靠下對齊」、「基準線」或「預設」。

    不換行可避免文字換行。選取這個選項後，版面儲存格會因應文字來加寬，而不是讓文字接續到新的一行。

  2. 如果您已經在文字方塊輸入值，請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

相關主題

  • 格式化版面儲存格和表格


設定版面表格屬性

此「屬性」檢視窗讓您可以設定版面表格的屬性。

若要設定版面表格的屬性：

  1. 請設定下列任一種選項：

    固定將表格設定為固定寬度。

    以像素為單位，在鄰近的文字方塊中輸入寬度 (請參閱設定欄寬)。

    自動延伸會將表格最右側的欄設定為自動延伸 (請參閱設定欄寬)。

    高度就是表格的高度 (以像素為單位)。

    內距可設定版面儲存格的內容與儲存格邊緣之間距大小 (以像素為單位)。

    如果您變更了儲存格內距，而版面表格顯示了一個括號中的欄寬的話，請使用「將寬度設為一致」選項。

    間距可設定鄰近版面儲存格之間的間距大小 (以像素為單位)。

    如果您變更了儲存格間距，而版面表格顯示了一個括號中的欄寬的話，請使用「將寬度設為一致」選項。

    清除列高度可移除版面表格中所有儲存格的明確高度設定值。

    Dreamweaver 會在您繪製版面時指定儲存格明確高度以顯示版面，即使有些儲存格是空的也是一樣。因此，您最好在版面儲存格中放入內容後再按這個按鈕，否則空白的儲存格可能會垂直收合。

    注意

    清除列高可能會在版面表格中的空白 (灰色) 區域 (也就是不包含任何儲存格的區域) 中，產生無法預期的結果。更詳細地說，有些空白列可能會自表格中完全移除，而表格的總長度會減少許多。

    設定儲存格寬度一致如果版面中含有固定寬度儲存格的話，便會使 HTML 程式碼中的儲存格寬度符合畫面上所顯示的寬度。

    當您按下「將寬度設為一致」時，Dreamweaver 會為表格中的每個儲存格重設它們在 HTML 中指定的寬度，以符合該儲存格中內容的寬度。

    移除全部間隔可從版面表格移除間隔影像 (用來控制版面間距的透明影像) (如需詳細資訊，請參閱使用間隔影像)。

    注意

    移除間隔影像可能會導致表格的某些欄變得非常窄。一般來說，除非每欄所包含的其他內容都使該欄符合指定的寬度，否則您應該保留間隔影像。

    移除巢狀結構會移除位於版面表格內的巢狀版面表格，而不遺失其任何內容。

    內部的版面表格會消失；它所涵蓋的版面儲存格則成為外部表格的一部分。

  2. 如果您已經在文字方塊輸入值，請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

相關主題

  • 格式化版面儲存格和表格


設定選擇間隔影像的對話方塊選項

如果您將欄設定為自動延伸，這個對話方塊可以讓您選擇是否要使用間隔影像，以及要使用哪一個間隔影像。

如果您要將間隔影像加入欄中，這個對話方塊可以讓您選擇要使用哪一個間隔影像。

若要完成「選擇間隔影像」對話方塊：

  1. 選取下列其中一個選項：

    建立間隔影像檔可建立用來做為間隔影像的 GIF 影像，並且可讓您選擇用以儲存間隔影像檔的資料夾，如您網站的影像資料夾。除非您已經針對您的網站建立了間隔影像檔，否則此為建議選項。

    使用現有的間隔影像檔案讓您指定要在自動延伸表格中使用的現有間隔影像檔案。間隔影像必須為單一像素的透明 GIF。

    自動延伸表格不要用間隔影像可指定 Dreamweaver 不將間隔影像自動加入表格 (如果您沒有將欄寬設成自動延伸而插入間隔影像時，便不會顯示這個選項)。如果您選取這個選項，版面中的固定寬度欄可能會收合為較小寬度，甚至等於零；間隔影像可幫助維持您原先所繪製的版面結構。請在您已經在固定寬度欄中放入足夠內容以使其不會收合時，或是已經手動加入間隔影像時，才使用這個選項。

  2. 按一下「確定」。

相關主題

  • 使用間隔影像


設定版面模式偏好設定的對話方塊選項

這個對話方塊可以讓您設定「版面模式」偏好設定。

若要完成「版面模式偏好設定」對話方塊：

  1. 請指定下列其中一項選項：

    自動加入間距可指定當您將欄寬設為自動延伸時，Dreamweaver 是否要自動插入間隔影像 (請參閱設定欄寬)。

    注意

    如果您選擇不要在自動延伸的表格中使用間隔影像，這可能會改變固定寬度欄的大小，當儲存格中不含內容時，甚至還可能因而從「設計」檢視中完全消失 (不過，即使這些欄並未在「設計」檢視中顯示，還是存在於程式碼中)。

    間隔影像可設定您網站的間隔影像檔案。

    從「網站」選單中選擇一個網站，然後按一下「建立」按鈕來建立新的間隔影像檔，或是按一下「瀏覽」按鈕，尋找該網站中現有的間隔影像檔案。

    儲存格外框可設定版面儲存格的外框顏色。

    儲存格反白標示可設定當滑鼠指標指向某儲存格時，該版面儲存格的外框要變更為何種顏色。

    表格外框可設定版面表格的外框顏色。

    表格背景可設定版面表格沒有儲存格的區域所要使用的顏色。

  2. 按一下「確定」。

相關主題

  • 設定版面模式的偏好設定


使用頁框

頁框可以將瀏覽器視窗分割為多個區域，而每個區域都能夠顯示不同的 HTML 文件。最常見的頁框使用方式就是：一個頁框用來顯示包含導覽控制項的文件，另一個頁框則用來顯示包含內容的文件。

注意

本章節並不包含：設計和使用頁框的詳盡方式以及寫出這些頁框所需的程式碼的細節討論。如果您需要關於進階頁框版面使用的程式碼的詳細資訊，請參考頁框及頁框組的相關書籍。

本章包含下列各節：

關於頁框和頁框組

在文件視窗中使用頁框組

建立頁框和頁框組

選取頁框和頁框組

在頁框中開啟文件

儲存頁框和頁框組檔案

檢視和設定頁框屬性

檢視和設定頁框組屬性

使用連結控制頁框內容

處理無法顯示頁框的瀏覽器

頁框使用 JavaScript 行為


關於頁框和頁框組

「頁框」就是瀏覽器視窗中的一個區域，可以獨立顯示 HTML 文件，並且可和瀏覽器視窗其餘部分所顯示的 HTML 文件不同。

「頁框組」是一種 HTML 檔案，可定義一組頁框的版面和屬性，包括頁框的數目、頁框的大小和位置，以及在每個頁框中最初所顯示的頁面之 URL。頁框組檔案本身並未包含要在瀏覽器中顯示的 HTML 內容，除了 noframes 區段之外 (請參閱處理無法顯示頁框的瀏覽器)；頁框組檔案只對瀏覽器提供關於一組頁框應該顯示的方式，以及頁框中應該顯示之文件的資訊。

本節包含下列概念性主題：

  • 了解頁框和頁框組如何工作
  • 決定是否要使用頁框
  • 了解巢狀頁框組

相關主題

  • 在文件視窗中使用頁框組
  • 建立頁框和頁框組


了解頁框和頁框組如何工作

「頁框」就是瀏覽器視窗中的一個區域，可以獨立顯示 HTML 文件，並且可和瀏覽器視窗其餘部分所顯示的 HTML 文件不同。「頁框組」是一個 HTML 檔案，可定義一組頁框的版面和屬性。

若要在瀏覽器中檢視一組頁框，請輸入頁框組檔案的 URL；接著瀏覽器就會開啟要在這些頁框中顯示的相關文件。網站的頁框組檔案通常命名為 index.html，因此若瀏覽者沒有指定檔案名稱，依預設會顯示此檔名。

下列範例會顯示由三個頁框所組成的頁框版面：側邊窄小的頁框包含了導覽列，橫越視窗頂端也有一個頁框，其中包含了標誌和網站的標題，另一個較大的頁框則佔滿了頁面的其他空間，且包含了主要內容。每個頁框都會顯示不同的 HTML 文件。

在這個範例中，頂端頁框中顯示的文件絕不會在瀏覽者瀏覽網站時變動。側邊的頁框導覽列包含連結；只要按其中一個連結，主要內容頁框中的內容就會變更，但是側邊頁框的內容保持不變。右邊的主要內容頁框則會因應瀏覽者在左邊所按下的連結，顯示出適當的文件。

請注意頁框不是一個檔案。您可以將目前在頁框中顯示的文件，簡單地看做是整個頁框的一個部份，但文件其實並不是頁框的一部份。頁框是一個可容納文件的容器，任何頁框可以顯示任何文件。

注意

「頁面」可泛指單一的 HTML 文件或是在特定期間中瀏覽器視窗中的所有內容 (即使一次有多份 HTML 文件同時顯示)。舉例來說，所謂「使用頁框的頁面」通常是指一組頁框，以及在這些頁框中最初出現的文件。

在瀏覽器中以單一頁面顯示、而且由三個頁框組成的網站實際上至少由四個獨立的 HTML 文件組成：頁框組檔案，再加上三份文件，這三份文件包含頁框內最初顯示的內容。當您在 Dreamweaver 中使用頁框組設計頁面時，您必須儲存這四個檔案，才能使頁面在瀏覽器中作業正常。

相關主題

  • 決定是否要使用頁框
  • 了解巢狀頁框組


決定是否要使用頁框

頁框最常用來做導覽之用。一組頁框中通常包括一個包含導覽列的頁框，以及另一個用來顯示主要內容頁面的頁框。

然而，使用頁框來設計也可能有些困擾，在很多情況下，您可以建立沒有頁框的網頁，而它們也同樣能達成許多一組頁框所能完成的目標。舉例來說，假如您想讓頁面的左邊顯示導覽列，您可以用一組頁框來取代頁面，或者只要在網站中的每個頁面加入導覽列即可 (Dreamweaver 可協助您建立多個使用相同版面的頁面，請參閱關於 Dreamweaver 樣版)。下圖顯示的頁面設計並未使用頁框，但看起來卻像是個頁框版面設計。

很多專業的網站設計者不偏好使用頁框，而多數瀏覽網站的瀏覽者也不喜歡頁框。造成這個現象的原因可能是因為他們瀏覽的網站沒有善用頁框，或者在非必要時使用頁框 (例如，使用的頁框組在瀏覽者每按一次瀏覽按鈕時，就重新載入導覽頁框的內容)。不過，如果使用頁框得當的話 (例如，它們可使某一頁框中的導覽控制項固定，同時又允許另一個頁框的內容變動)，對某些網站而言這是很有幫助的。

不是所有的瀏覽器都可完善地支援頁框，它們對無法瀏覽頁框之瀏覽者可能會造成不便，因此，如果您使用頁框時，請在頁框組中提供 noframes 區段，讓無法檢視頁框的瀏覽者也能使用 (請參閱處理無法顯示頁框的瀏覽器)。您也可以提供可前往該網站無頁框版本的直接連結，讓那些雖然瀏覽器支援頁框，但不喜歡使用頁框的瀏覽者可以使用。

使用頁框的優點如下：

  • 瀏覽者的瀏覽器不需要每個頁面都重新載入用於導覽的相關圖片。
  • 每個頁框都有自己的捲軸 (如果內容太大，視窗無法容納)，瀏覽者可以分別捲動頁框。

    (例如，如果導覽列位於不同的頁框中，那麼已經在頁框中將很長的頁面內容捲動到底部的瀏覽者，就不需要捲動回頂端才能使用導覽列)。

使用頁框的缺點如下：

  • 不同頁框中的元素圖像對齊不易精確。
  • 測試導覽需耗費很多時間。
  • 個別的含頁框頁面的 URL 不會顯示在瀏覽器中，因此瀏覽者不容易標記特定的頁面 (除非您提供伺服器程式碼，可以讓他們載入特定頁面的含頁框版本)。

相關主題

  • 了解頁框和頁框組如何工作
  • 處理無法顯示頁框的瀏覽器


了解巢狀頁框組

位於另一個頁框組裡面的頁框組就叫做巢狀頁框組。單一頁框組檔案可以包含多個巢狀頁框組。大多使用頁框的網頁其實都是使用巢狀頁框，而大多在 Dreamweaver 中預先定義的頁框組也都使用巢狀結構。只要一組頁框中包含有列或欄個數不相同的頁框，就必須使用巢狀頁框組。

舉例來說，最常用的頁框版面就是在頂端的列中有一個頁框 (顯示公司的標誌)，並且在底部的列中有兩個頁框 (即導覽頁框和內容頁框)。這個版面需要巢狀頁框組：兩列的頁框組，有兩欄的頁框組巢狀化於第二列中。

Dreamweaver 也可以在需要時處理巢狀頁框組；如果您在 Dreamweaver 中使用頁框分割工具，您就無需擔心哪些頁框要巢狀化，而哪些不需巢狀化的細節問題。如需關於頁框分割工具的詳細資訊，請參閱設計頁框組。

在 HTML 中巢狀化頁框組的方式有兩種：內部的頁框組可被定義為與外部頁框組屬於同一個檔案，或者分屬於各自的檔案。在 Dreamweaver 預先定義的每個頁框組都會將其所有頁框組定義於同一檔案中。

兩種巢狀結構都有相同的視覺效果；若不查看程式碼，很難分辨所使用的是哪一種巢狀結構。外部頁框組檔案會被使用於 Dreamweaver 最可能的原因就是：使用「開啟於頁框」命令，在頁框內開啟頁框組檔案；執行此作業可能會產生設定連結目標的問題。一般而言，最簡便的方式還是將所有頁框組定義於同一個檔案中。

相關主題

  • 了解頁框和頁框組如何工作
  • 決定是否要使用頁框


在文件視窗中使用頁框組

Dreamweaver 可讓您檢視及編輯與一組頁框相關的所有文件，而且全部都在一個「文件」視窗中。這個方法可讓您在編輯的同時便可看到含頁框頁面在瀏覽器中大概的樣貌。然而，在您尚未適應之前，這個方式的某些方面還是有點複雜。

尤其是每個頁框都顯示一個獨立的 HTML 文件。即使文件是空白的，您還是必須先將它們全部儲存後才能預覽 (因為頁框組只有在包含要在每個頁框顯示的文件的 URL 時，才可以正確地預覽)。

若要確認頁框組在瀏覽器中正確地呈現：

  1. 建立頁框組並指定每個頁框要顯示的文件 (請參閱建立頁框和頁框組)。
  2. 儲存每一個要顯示在頁框中的檔案 (請參閱儲存頁框和頁框組檔案)。

    請記得，每個頁框都會顯示不同的 HTML 文件，除了頁框組檔案之外，您還必須儲存每一份文件。

  3. 設定每個頁框以及頁框組的屬性 (請參閱檢視和設定頁框屬性和檢視和設定頁框組屬性)。

    包含為頁框命名、設定捲動以及非捲動選項等等。

  4. 請確定已在「屬性」檢視窗中設定所有連結的「目標」屬性，如此連結的內容才會出現在正確的區域 (請參閱使用連結控制頁框內容)。


建立頁框和頁框組

在 Dreamweaver 中建立頁框組有兩種方式：您可以從數個預先定義的頁框組中選取，或是自行設計頁框組。

選擇預先定義的頁框組時，便會自動設定所有頁框組，以及建立版面時所需的頁框，這是想快速建立頁框式版面最簡易的方式。您只可以在「文件」視窗的「設計」檢視中，插入預先定義的頁框組。

本節包含下列主題：

  • 使用預先定義的頁框組
  • 設計頁框組


使用預先定義的頁框組

預先定義的頁框組方便您選取想要建立的頁框組類型。如果您想要設計自己的頁框組，請參閱設計頁框組。

建立預先定義的頁框組有兩種方式：

  • 「插入」列可讓您建立頁框組，並且將目前的文件顯示在其中一個新的頁框組中。
  • 「新增文件」對話方塊可以建立新的空白頁框組。

若要建立預先定義的頁框組和顯示頁框中現有文件：

  1. 請將插入點放在文件上。
  2. 請執行下列其中一項作業：
    • 從「插入＞HTML＞頁框」子選單中，選擇預先定義的頁框組。
    • 請在插入列的「版面」類別中，按一下「頁框」按鈕上的下拉箭頭，然後選取預先定義的頁框組。

    「頁框組」圖示可以提供您套用到目前文件之每個頁框組的視覺呈現。頁框組圖示的藍色區域代表目前的文件，而白色區域則代表會顯示其他文件的頁框。

    注意

    當您套用頁框組時，Dreamweaver 會自動設定頁框組，並且在其中一個頁框中顯示目前的文件 (插入點目前所在的文件)。

    如果您已設定 Dreamweaver 提示您設定頁框輔助功能屬性，「頁框標籤輔助功能屬性」對話方塊便會出現 (請參閱最佳化具有輔助功能的頁面設計工作區)。

  3. 如果「頁框標籤輔助功能屬性」對話方塊出現，請完成每一個頁框的對話方塊，然後再按一下「確定」。

    如需詳細資訊，請參閱設定頁框標籤輔助功能屬性對話方塊選項。

    注意

    如果您按「取消」，頁框組會出現在文件中，但是 Dreamweaver 並不會將輔助功能標籤或屬性與頁框組建立關聯。

    若要編輯頁框標籤輔助功能屬性，請參閱檢視和設定頁框屬性。

若要建立空白的預先定義頁框組：

  1. 選取「檔案＞開新檔案」。
  2. 在「新增文件」對話方塊中，選取「頁框組」類別。
  3. 從「頁框組」清單中選取頁框組。
  4. 按一下「建立」。

    如果您已啟動「偏好設定」中的對話方塊，則頁框組就會出現在您的文件中，而且「頁框標籤輔助功能屬性」對話方塊也會出現 (請參閱最佳化具有輔助功能的頁面設計工作區)。

  5. 如果「頁框標籤輔助功能屬性」對話方塊出現，請完成每一個頁框的對話方塊，然後再按一下「確定」。

    如需詳細資訊，請參閱設定頁框標籤輔助功能屬性對話方塊選項。

    注意

    如果您按「取消」，頁框組會出現在文件中，但是 Dreamweaver 並不會將輔助功能標籤或屬性與頁框組建立關聯。

    若要編輯頁框標籤輔助功能屬性，請參閱檢視和設定頁框屬性。


設計頁框組

您可以將「分隔軸」新增到視窗中，便能在 Dreamweaver 中設計您自己的頁框組。如果您想要使用預先定義的頁框組，請參閱使用預先定義的頁框組。

提示

在建立頁框組或使用頁框前，請選擇「檢視＞視覺輔助＞頁框邊框」，即可在「文件」視窗的「設計」檢視中看到頁框邊框。

若要建立頁框組：

  • 選取「修改＞頁框組」，然後再從子選單中選取分割項目 (如「向左分割頁框」或「向右分割頁框」)。

    Dreamweaver 會將視窗分割成頁框。如果有現有的文件已經開啟時，它會顯示在其中一個頁框中。

若要將頁框分割為更小的頁框，請執行下列其中一項作業：

  • 若要從插入點所在的頁框開始分割，請從「修改＞頁框組」子選單中選擇分割項目。
  • 若要垂直或水平分割單一頁框或一組頁框，請將頁框邊框從「設計」檢視邊緣拖曳到「設計」檢視的中間。
  • 若要分割一個使用不在「設計」檢視邊緣之頁框邊框的頁框，請按 Alt (Windows) 或 Option (Macintosh) 並拖曳頁框邊框。
  • 若要將一個頁框分割為四個頁框，請將頁框邊框從「設計」檢視的某個角落拖曳到頁框的中間。

    提示

    若要建立三個頁框，請先分割為兩個頁框，然後再分割其中一個頁框即可。要在沒有編輯頁框組程式碼的情況下，合併兩個鄰近的頁框並不容易，也就是說將四個頁框變為三個頁框時，會比將兩個頁框變為三個頁框還要困難。

若要刪除頁框：

  • 在頁面四周或到父系頁框的邊框拖曳一個頁框邊框。

    如果在已經移除之頁框內的文件中有未儲存的內容，Dreamweaver 會提示您儲存此文件。

    注意

    您無法利用拖曳邊框來將頁框組完全移除。若要移除頁框組，請關閉顯示它的「文件」視窗。如果頁框組檔案已經儲存，請刪除該檔案。

若要調整頁框的大小，請執行下列其中一項作業：

  • 若要設定頁框的約略大小，請在「文件」視窗的「設計」檢視中拖曳頁框邊框。
  • 若要指定正確的大小，並指定當瀏覽器視窗大小不允許頁框呈現完整大小時，瀏覽器對頁框所分配之列和欄的空間大小，請使用「屬性」檢視窗 (請參閱檢視和設定頁框組屬性)。


選取頁框和頁框組

若要變更頁框或頁框組的屬性，請先選取您想要變更的頁框或頁框組。您可以在「文件」視窗或者使用「頁框」面板選取頁框或頁框組。

本節包含下列主題：

  • 在頁框面板中選取頁框和頁框組
  • 在文件視窗中選取頁框和頁框組


在頁框面板中選取頁框和頁框組

「頁框」面板可提供頁框組內頁框的視覺呈現。它會使用一種在「文件」視窗中可能不明顯的方式，來顯示頁框組結構的階層。在「頁框」面板中，每個頁框組都圍繞著粗的邊框；而每個頁框則是由細的灰線所圍繞，並且按照頁框名稱來識別。

若要顯示「頁框」面板：

  • 選取「視窗＞頁框」。

若要在「頁框」面板中選取頁框：

  • 按一下「頁框」面板中的該頁框。

    在「頁框」面板和「文件」視窗的「設計」檢視中，頁框的外圍會出現選取範圍外框。

若要在「頁框」面板中選取頁框組：

  • 在「頁框」面板中按一下圍繞該頁框組的邊框。

    在「頁框」面板和「文件」視窗的「設計」檢視中，頁框組的外圍會出現選取範圍外框。

相關主題

  • 在文件視窗中選取頁框和頁框組
  • 檢視和設定頁框屬性
  • 檢視和設定頁框組屬性


在文件視窗中選取頁框和頁框組

在「文件」視窗的「設計」檢視中，當選取頁框時，其邊緣會出現虛線外框；在選取頁框組時，頁框組內的所有頁框邊框，則是淡色的虛線外框。

注意

將插入點放在顯示於頁框內的文件中，與選取頁框是不相同的。有許多作業都必須選取頁框才能執行 (例如設定頁框屬性)。

若要在「文件」視窗中選取頁框：

  • 於「設計」檢視中，在頁框內按下 Alt (Windows) 或 Option 和 Shift (Macintosh) + 按一下滑鼠。

    選取範圍外框會顯示在頁框的外圍。

若要在「文件」視窗中選取頁框組：

  • 在「設計」檢視中，按一下頁框組中其中一個內部頁框的邊框 (頁框邊框必須看得到才能執行此作業；如果看不到頁框邊框，請選擇「檢視＞視覺輔助＞頁框邊框」，便能看到頁框邊框)。

    選取範圍外框會顯示在頁框組的外圍。

    注意

    一般而言，在「頁框」面板中選取頁框組，會比在「文件」視窗中更容易。如需詳細資訊，請參閱在頁框面板中選取頁框和頁框組。

若要選取不同的頁框或頁+框組，請執行下列其中一項作業：

  • 若要選取在相同階層中的下一個或前一個頁框或頁框組，以做為目前的選擇，請按下 Alt + 向左鍵或 Alt + 向右鍵 (Windows) 或者 Command + 向左鍵或 Command + 向右鍵 (Macintosh)。使用這些按鍵，您就可以在頁框和頁框組之間循環切換 (按照頁框組檔案中已定義的順序)。
  • 若要選取父系頁框組 (包含目前選擇的頁框組)，請按下 Alt + 向上鍵 (Windows) 或 Command + 向上鍵 (Macintosh)。
  • 若要選取目前選取之頁框組中的第一個子頁框或頁框組 (亦即，在頁框組檔案中依順序所定義的第一項)，請按下 Alt + 向下鍵 (Windows) 或 Command + 向下鍵 (Macintosh)。

相關主題

  • 在頁框面板中選取頁框和頁框組
  • 檢視和設定頁框屬性
  • 檢視和設定頁框組屬性


在頁框中開啟文件

藉由將新內容加入頁框中的空白文件或者開啟頁框中的現有文件，您就可以指定頁框的初始內容。

若要在頁框中開啟現有文件：

  1. 將插入點放在頁框中。
  2. 選擇「檔案＞開啟於頁框」。
  3. 選取要在頁框中開啟的文件，然後按一下「確定」(Windows) 或「選擇」(Macintosh)。

    文件便會出現在頁框中。

  4. (選擇性) 若要使此文件成為瀏覽器開啟頁框組時要在頁框中顯示的預設文件，請先儲存該頁框組。如需詳細資訊，請參閱儲存頁框和頁框組檔案。


儲存頁框和頁框組檔案

若想在瀏覽器中預覽某個頁框組，您必須先儲存該頁框組檔案以及所有要顯示在頁框中的文件。您可以分別儲存每個頁框組檔案和頁框文件，或是一次儲存頁框組檔案以及頁框中出現的所有文件。

注意

當您使用 Dreamweaver 中的視覺工具來建立一組頁框時，在該頁框中出現的每份新文件都會被賦予預設的檔名。例如，第一個頁框組檔案就名為 UntitledFrameset-1，而頁框中的第一份文件則是 UntitledFrame-1。

若要儲存頁框組檔案：

  1. 在「頁框」面板或「文件」視窗中選取頁框組 (請參閱選取頁框和頁框組)。
  2. 請執行下列其中一項作業：
    • 若要儲存頁框組檔案，請選擇「檔案＞儲存頁框組」。
    • 若要將頁框組檔案儲存成新檔案，請選擇「檔案＞另存新頁框組」。

    如果之前未儲存頁框組檔案，這兩個命令的作用就是相同的。

若要儲存頁框中顯示的文件：

  • 在頁框中按一下滑鼠，然後選擇「檔案＞儲存頁框」或是「檔案＞另存頁框」。

若要儲存所有與一組頁框相關的檔案：

  • 選擇「檔案＞儲存全部頁框」。

    這個指令將儲存頁框組中所有開啟的文件，包括頁框組檔案和所有頁框文件。如果尚未儲存頁框組檔案，「設計」檢視中的頁框組四周就會出現深色的邊框，並且會出現對話方塊讓您可以選擇檔名。對於尚未儲存的每一個頁框，在頁框的四周會出現深色的邊框，並且會出現對話方塊讓您可以選擇檔名。

    注意

    如果您使用「檔案＞開啟於頁框」在頁框中開啟文件，那麼當您在儲存頁框組時，在頁框中開啟的文件將成為顯示於該頁框中的預設文件。如果您不想讓這份文件成為預設文件，請不要儲存此頁框組檔案。


檢視和設定頁框屬性

使用「屬性」檢視窗來檢視及設定多數的頁框屬性。

您可能也需要設定一些頁框屬性，例如標題屬性 (這和名稱屬性不同)，以增強輔助功能。當您建立頁框時，可以啟用頁框的輔助功能編寫選項以設定屬性 (請參閱最佳化具有輔助功能的頁面設計工作區)，或者也可以在插入頁框後再設定屬性。若要編輯頁框的輔助功能屬性，您可以使用標籤檢視窗來直接編輯 HTML 程式碼。

若要設定頁框組的屬性，請參閱檢視和設定頁框組屬性。

若要檢視或設定頁框屬性：

  1. 請使用下列其中一種方式選取頁框：
    • 按 Alt (Windows) 或 Shift 和 Option (Macintosh)，並按一下「文件」視窗的「設計」檢視中的頁框。
    • 按一下「頁框」面板中的頁框 (視窗＞頁框)。
  2. 在「屬性」檢視窗中 (視窗＞屬性)，按一下右下角的展開箭頭以查看所有頁框屬性。

  3. 必要時進行變更。

    如需關於如何在頁框「屬性」檢視窗中設定特定選項的說明，請參閱設定頁框「屬性」檢視窗選項。

    提示

    若要變更頁框的背景顏色，請在頁面屬性中設定頁框中的文件背景顏色。

若要設定頁框的輔助功能值：

  1. 在「頁框」面板中 (視窗＞頁框)，將插入點放在其中一個頁框中以選取該頁框。
  2. 選取「修改＞編輯標籤」。

    標籤編輯器便會出現。

  3. 從左邊的「分類」清單中選取「樣式表/輔助功能」。
  4. 請輸入所需的值。
  5. 按一下「確定」。

若要編輯頁框的輔助功能值：

  1. 如果您目前正在「設計」檢視中，請顯示文件的「程式碼」檢視或同時顯示「程式碼」和「設計」檢視。
  2. 在「頁框」面板中 (視窗＞頁框)，將插入點放在其中一個頁框中以選取該頁框。

    Dreamweaver 會標示程式碼中的頁框標籤。

  3. 在程式碼中按下滑鼠右鍵 (Windows) 或按 Control (Macintosh) + 按一下程式碼，然後再選取「編輯標籤」。

    標籤編輯器便會出現。

  4. 必要時進行變更。
  5. 按一下「確定」。

若要變更頁框中文件的背景顏色：

  1. 將插入點放在頁框中。
  2. 請選取「修改＞頁面屬性」。

    「頁面屬性」對話方塊便會出現。

  3. 按一下「背景」顏色彈出式選單，然後選取顏色。
  4. 按一下「確定」。

相關主題

  • 建立頁框和頁框組


檢視和設定頁框組屬性

使用「屬性」檢視窗來檢視和設定大部份的頁框組屬性。若要設定頁框的屬性，請參閱檢視和設定頁框屬性。

若要檢視或設定頁框組屬性：

  1. 請依下列其中一種方式來選取頁框組：
    • 在「文件」視窗的「設計」檢視中，按一下頁框組中兩個頁框之間的邊框。
    • 在「頁框」面板中 (視窗＞頁框) 按一下環繞著頁框組的邊框。
  2. 在「屬性」檢視窗中 (視窗＞屬性)，按一下右下角的展開箭頭以查看所有的頁框組屬性。

  3. 必要時進行變更。

    如需關於如何在頁框組「屬性」檢視窗中設定特定選項的說明，請參閱設定頁框組「屬性」檢視窗選項。

若要設定頁框組文件的標題：

  1. 請依下列其中一種方式來選取頁框組：
    • 在「文件」視窗的「設計」檢視中，按一下頁框組中兩個頁框之間的邊框。
    • 在「頁框」面板中 (視窗＞頁框) 按一下環繞著頁框組的邊框。
  2. 在「文件」工具列的「標題」欄位中，輸入頁框組文件的名稱。

    當瀏覽者檢視瀏覽器中的頁框組時，這個標題就會出現在瀏覽器的標題列中。

相關主題

  • 建立頁框和頁框組


使用連結控制頁框內容

若要使用某頁框中的連結來開啟另一頁框中的文件，您必須設定該連結的目標。連結的 target 屬性會指定要在其中開啟連結內容的頁框或視窗。

舉例來說，如果導覽列位於左邊的頁框，而您想讓連結的資料出現在右邊的主要內容頁框，您必須指定主要內容視窗的名稱為導覽列連結的目標。如此一來，當瀏覽者按一下導覽連結時，指定的內容就會在主要頁框中開啟。

若要指定頁框目標：

  1. 在「設計」檢視中，選取文字或物件。
  2. 在「屬性」檢視窗的「連結」欄位中 (視窗＞屬性)，執行下列其中一項作業：
    • 按一下資料夾圖示，然後選取要連結的檔案。
    • 將「指向檔案」圖示拖曳到「檔案」面板來選取要連結的檔案。
  3. 在「屬性」檢視窗的「目標」彈出式選單中，選擇連結文件應該會在其中出現的頁框或視窗。
    • _blank 會在新瀏覽器視窗中開啟連結的文件，讓目前的視窗保持原狀。
    • _parent 會在顯示連結的頁框之父系頁框組中開啟連結的文件，取代整個頁框組。
    • _self 會在目前的頁框中開啟連結，取代該頁框目前的內容。
    • _top 會在目前的瀏覽器視窗中開啟連結的文件，取代所有頁框。

    頁框名稱也會出現在這個功能表中。選取已命名頁框來開啟該頁框中連結的文件。

    注意

    頁框名稱只有在您是在頁框組內編輯文件時才會出現。當您在文件本身的「文件」視窗中編輯該份文件時，頁框名稱不會顯示在「目標」彈出式選單中。如果您在頁框組外編輯文件，可以在「目標」文字方塊中輸入目標頁框的名稱。

    提示

    如果您要連結到網站外的頁面，請使用 target="_top" 或 target="_blank"，以確保該頁面不會顯示成您的網站的一部份。

相關主題

  • 設定頁框「屬性」檢視窗選項


處理無法顯示頁框的瀏覽器

Dreamweaver 可讓您指定內容顯示於不支援頁框的文字架構瀏覽器以及較舊版的瀏覽器。這些內容會儲存於頁框組檔案中，並在 noframes 標籤中將文字斷行。當瀏覽器不支援頁框載入頁框組檔案時，瀏覽器只會顯示由 noframes 標籤中所包含的內容。

注意

noframes 區域中的內容會多次出現下列提示：「請升級為可處理頁框的瀏覽器」。有些人可能因為某些原因而選用不支援檢視頁框的系統。請盡量使內容存取容易，以方便這些瀏覽者檢視。

若要對不支援頁框的瀏覽器提供內容：

  1. 請選擇「修改＞頁框組＞編輯無頁框內容」。

    Dreamweaver 會清除「設計」檢視，而且「設計」檢視頂端也會顯示「無頁框的內容」字樣。

  2. 若要建立不含頁框的內容，請執行下列其中一項作業：
    • 在「文件」視窗中，如一般文件處理方式來輸入或插入內容。
    • 請選擇「視窗＞程式碼檢視窗」，將插入點放置於 noframes 標籤內所顯示的 body 標籤之間，再輸入該內容的 HTML 程式碼。
  3. 請再次選擇「修改＞頁框組＞編輯無頁框內容」，便可返回頁框組文件的一般檢視。


頁框使用 JavaScript 行為

有幾種 JavaScript 行為和導覽相關的命令特別適用於頁框。

設定頁框文字可替換內容並且用您指定的內容將特定的頁框格式化。這些內容可以包含任何有效的 HTML。利用這個動作來靈活地顯示頁框中的資訊 (請參閱設定頁框文字)。

前往 URL 可在目前視窗或指定頁框中開啟新的頁面。這個動作在變更二到多個頁框的內容上特別有用，只要按一下滑鼠即可完成。請參閱前往 URL。

插入導覽列可將導覽列新增到頁面中；在插入導覽列後，您就可以將行為附加到其影像上，並且依據瀏覽者的動作來設定要顯示哪個影像。舉例來說，您可能想顯示按鈕影像的「一般」或「按下」狀態，讓瀏覽者知道自己目前正在檢視網站的哪個頁面 (請參閱插入導覽列)。

插入跳頁選單可讓您設定連結的選單清單，只要按一下這些連結就可以在瀏覽器視窗中開啟檔案。您也可以指定用來開啟文件的特定視窗或頁框 (請參閱插入跳頁選單)。


參考

本節提供這一章中所介紹的下列對話方塊和檢視窗的資訊：

  • 設定頁框「屬性」檢視窗選項
  • 設定頁框組「屬性」檢視窗選項
  • 設定頁框標籤輔助功能屬性對話方塊選項


設定頁框「屬性」檢視窗選項

使用這個「屬性」檢視窗來命名頁框，並且設定邊框和邊界。

提示

請記得按一下「屬性」檢視窗左下角的展開箭頭，以查看所有的頁框屬性。

設定頁框屬性將覆蓋頁框組中該屬性的設定。舉例來說，設定頁框的邊框屬性便會將頁框組中設定的邊框屬性覆蓋掉。

若要指定選取頁框的屬性：

  1. 為頁框命名：

    頁框名稱就是連結的 target 屬性或指令碼參考頁框時所用的名稱。

    頁框的名稱必須是一個字，允許有底線 (_)，但是不能有連字符號 (－)、句號 (.) 和空格。頁框的名稱必須以字母開頭 (而不是數字)，而且有區分大小寫。請勿使用為 JavaScript 所保留字的詞彙 (如 top 或 navigator) 來做為頁框名稱。

    提示

    若要使連結變為另一個頁框中的內容，您必須為目標頁框命名。為方便日後建立跨頁框連結，請在建立每個頁框時為其命名。
  2. 依喜好變更下列選項：

    來源可指定要在頁框中顯示的來源文件。按一下要瀏覽的資料夾圖示並選取檔案。

    捲動可指定頁框中是否顯示捲軸。將這個選項設定為「預設」時，並不會設定對應屬性的值，而是讓每個瀏覽器都使用其預設值。大多數的瀏覽器會預設為「自動」，也就是捲軸只會在瀏覽器視窗的空間不足以顯示目前頁框中的所有內容時，才會出現。

    不可調整大小可防止瀏覽者拖曳頁框邊框，來調整瀏覽器頁框的大小

    注意

    您可以隨時在 Dreamweaver 中調整頁框大小，但這個選項只適用於在瀏覽器檢視頁框的瀏覽者。

    邊框可顯示或隱藏目前頁框的邊框，如果是在瀏覽器中檢視它的話。選取頁框的「邊框」選項時，將會覆蓋頁框組的邊框設定。

    這些選項有「是」(顯示邊框) 或「否」(隱藏邊框) 以及「預設」；除非父系頁框組已將「邊框」設定為「否」，否則大多數的瀏覽器會預設為顯示邊框。只有在共用該邊框的所有頁框都將「邊框」設定為「否」時，頁框才會隱藏，否則當父系頁框組的「邊框」設定為「否」時，共用該邊框的頁框便會將「邊框」設定為「預設」。

    邊框顏色可設定所有頁框邊框的顏色。這個顏色套用在所有觸及此頁框的邊框，而且會覆蓋頁框組的指定邊框色彩。

    注意

    哪種頁框邊框要套用哪種特定的邊框顏色有基礎邏輯可循，不過這個邏輯有點複雜；要了解為何當指定邊框顏色後，某些邊框的顏色會改變並不容易。如需關於指定邊框顏色之影響的詳細資訊，請參考頁框或頁框組的相關書籍。
  3. 您可以選擇設定下列的邊界選項 (如果看不到邊界選項，請按一下「屬性」檢視窗右下角的展開箭頭)：

    邊界寬度可以像素為單位來設定左和右邊界的寬度 (也就是頁框邊框和內容的間距)。

    邊界高度可以像素為單位來設定上方和下方邊界的寬度 (也就是頁框邊框和內容的間距)。

    注意

    設定頁框的邊界框度和高度，與在「修改＞頁面屬性」對話方塊中設定邊界不同。

相關主題

  • 檢視和設定頁框屬性


設定頁框組「屬性」檢視窗選項

使用這個「屬性」檢視窗來設定頁框組的邊框和頁框大小。

提示

請記得按一下「屬性」檢視窗左下角的展開箭頭，以查看所有的頁框組屬性。

設定頁框屬性將覆蓋頁框組中該屬性的設定。舉例來說，設定頁框的邊框屬性便會將頁框組中設定的邊框屬性覆蓋掉。

若要指定選取頁框組的邊框屬性：

  1. 按照喜好來變更下列的邊框選項：

    邊框可決定當在瀏覽器檢視文件時，頁框周圍是否出現邊框。若要顯示邊框，請選擇「是」；若不要讓瀏覽器顯示邊框，請選擇「否」。若要讓瀏覽器決定如何顯示邊框，請選擇「預設」。

    邊框寬度可指定頁框組中所有邊框的寬度。

    邊框顏色可設定邊框的顏色。使用顏色挑選器來選取顏色，或輸入顏色的 16 進位值。

  2. 若要設定選取之頁框組的列和欄的頁框大小，請按一下「列欄選取範圍」區域左邊或頂端的標籤，然後在「值」文字方塊中輸入高度或寬度。

  3. 若要指定瀏覽器分配給每個頁框的空間大小，請從「單位」選單的下列選項中做選擇：

    像素可利用絕對值來設定選取欄或列的大小。這個選項最適合用於需要維持固定大小的頁框，例如導覽列。以像素指定大小的頁框的空間分配會早於依百分比或相對性指定大小的頁框。頁框大小最常見的設定方式，就是將左邊的頁框設定為固定的像素寬度，而右邊的頁框大小則是相對寬度。如此一來，右邊的頁框就會在像素寬度分配好後自動延伸，並且佔滿所有剩餘的空間。

    注意

    如果所有的寬度都以像素來指定，而瀏覽者在瀏覽器中檢視的頁框組，對您所指定的寬度而言過寬或過窄時，則頁框就會依比例來延伸或縮小，以便填滿可用的空間。這個情形也同樣發生在以像素指定的高度上。因此，最好的方式就是至少指定一個寬度或高度為「相對」。

    百分比可指定選取的欄或列佔頁框組的總寬度和高度之百分比。單位設定為「百分比」的頁框的空間分配會在設定為「像素」的單位之後，而在設定為「相對」之前。

    相對可指定選取的欄或列在設定為「像素」和「百分比」的頁框空間分配完成後，進行空間分配；剩下的空間就會依比例分配給這些設定大小為「相對」的頁框。

    注意

    當您從「單位」選單中選擇「相對」時，任何在「值」欄位中輸入的數字都會消失；如果您想要指定數字，就必須重新輸入。然而，如果只有一個欄或列設定為「相對」，就不需要輸入數字，因為該欄或列會在其他列或欄的空間完成分配後，接收所有剩餘的空間。若要確認完整的跨瀏覽器相容性，您可以在「值」欄位中輸入 1；這就等於沒有輸入值。

    頁框的空間分配有些複雜；如需詳細資訊，請參考頁框和頁框組的書籍。

相關主題

  • 檢視和設定頁框組屬性


設定頁框標籤輔助功能屬性對話方塊選項

這個對話方塊是用來設定頁框輔助功能選項。

若要設定頁框輔助功能選項：

  1. 從彈出式選單中選取頁框。
  2. 為頁框輸入有意義的名稱。

    提示

    選擇「視窗＞頁框」，以檢視您所命名的頁框圖表。

    如果瀏覽者使用螢幕讀取器，當螢幕讀取器在頁面中遇到頁框時就會讀取這個名稱。

  3. 針對每個頁框重複這個步驟。
  4. 按一下「確定」。

    注意

    如果您按「取消」，頁框組會出現在文件中，但是 Dreamweaver 並不會將輔助功能標籤或屬性與頁框組建立關聯。

如果您對這個對話方塊不做任何變更，並且按一下「確定」，Dreamweaver 就會以頁框的名稱做為標題。頁框名稱會和它在頁框組中的位置 (左頁框、右頁框等等) 相對應。

相關主題

  • 使用預先定義的頁框組
  • 設計頁框組


管理樣版

Macromedia Dreamweaver 8 樣版是一種特殊的文件，可用來設計「固定」的頁面版面，您可以接著使用樣版來建立文件，以繼承該樣版的頁面版面。當您設計樣版時，要指定以該樣版為架構的文件中有哪些區域是使用者可以編輯的。

注意

樣版可讓您控制大的設計區域，並重複使用完成的版面。如果您想要重複使用個別的設計元素 (例如網站的版權資訊或標誌)，可以建立圖庫項目。如需詳細資訊，請參閱管理網站資源和圖庫。

本章包含下列各節：

關於 Dreamweaver 樣版

建立 Dreamweaver 樣版

建立 Contribute 網站的樣版

建立可編輯區域

建立重複區域

使用選擇性區域

定義可編輯標籤屬性

建立巢狀樣版

編輯和更新樣版

管理樣版

匯出和匯入樣版 XML 內容

匯出不含樣版標記的網站

對現有的文件套用或移除樣版

編輯以樣版為架構的文件內容


關於 Dreamweaver 樣版

樣版作者將「固定」的頁面版面設計在樣版中。然後作者會在樣版中建立可編輯的區域，讓使用者可以在依據該樣版而建立的文件中編輯這些區域；如果作者沒有定義可編輯的區域，那麼樣版使用者就無法編輯該區域中的內容。樣版可讓樣版作者控制哪些頁面元素是樣版使用者 (例如作家、平面藝術家或其他 Web 開發人員) 可以編輯的。有幾種樣版區域可讓樣版作者加入文件中。

樣版有一項非常最強大的用途，就是能夠一次更新多個頁面。從樣版建立的文件會保持與這個樣版的連結 (除非您稍後讓文件與樣版分離)。您可以修改樣版，並且立即更新以它為依據之所有文件中的設計。

本節包含下列概念性主題：

  • 樣版區域的類型
  • 設計和程式碼檢視中的樣版和以樣版為架構的文件
  • 樣版標籤語法
  • 樣版中的連結
  • 巢狀樣版
  • 樣版中的伺服器 Script 和以樣版為架構的文件
  • 樣版參數
  • 樣版運算式

相關主題

  • 建立 Dreamweaver 樣版


樣版區域的類型

當您將文件儲存為樣版時，Dreamweaver 會自動鎖定文件的大部分區域。撰寫樣版時，您可以在樣版中插入可編輯區域或可編輯參數，藉以定義以樣版為架構的文件中哪些區域可以編輯。

當您建立樣版時，您可以同時對可編輯區域和鎖定區域進行變更。但是在依據樣版的文件中，樣版使用者只能在可編輯區域中進行變更；而鎖定區域則無法修改。

樣版區域有四種類型：

可編輯區域是以樣版為架構之文件中的未鎖定區域；也就是樣版使用者可以編輯的區段。樣版作者可以將樣版的任何區域指定為可編輯。若要讓樣版生效，它必須至少含有一個可編輯區域；否則將無法編輯以樣版為架構的頁面。如需關於插入可編輯區域的詳細資訊，請參閱插入可編輯區域。

重複區域是文件版面中設定為重複的區域。例如，您可以將表格列設為重複。通常重複區域是可編輯的，好讓樣版使用者可以編輯重複元素的內容，而設計本身則是在樣版作者的掌控下。樣版使用者可以依其需要，使用重複區域控制選項來新增或刪除以樣版為架構的文件中重複區域的副本。

您可以在樣版中插入兩種重複區域：重複區域和重複表格。如需關於在樣版中插入重複區域的詳細資訊，請參閱在樣版中建立重複區域。如需關於建立重複表格的詳細資訊，請參閱插入重複表格。如需關於在以樣版為架構的頁面中使用重複區域的詳細資訊，請參閱新增、刪除和變更重複區域項目的順序。

選擇性區域是指定為選擇性的樣版區段，可用來放置不一定會出現在以樣版為架構之文件中的內容，例如選擇性的文字或影像。在以樣版為架構的頁面中，樣版使用者通常可控制是否要顯示內容。如需關於在樣版中設定選擇性區域的詳細資訊，請參閱插入選擇性區域。如需關於在以樣版為架構的頁面中編輯選擇性區域的詳細資訊，請參閱修改樣版屬性。

可編輯的標籤屬性可以讓您取消鎖定樣版中的標籤屬性，以便在以樣版為架構的頁面中編輯屬性。例如，您可以「鎖定」哪些影像要出現在文件中，但是允許樣版使用者將對齊方式設定成靠左、靠右或置中對齊。如需關於設定可編輯標籤屬性的詳細資訊，請參閱在樣版中指定可編輯的標籤屬性。如需關於在以樣版為架構的頁面中編輯標籤的詳細資訊，請參閱修改樣版屬性。

相關主題

  • 建立可編輯區域
  • 建立重複區域
  • 使用選擇性區域
  • 定義可編輯標籤屬性


設計和程式碼檢視中的樣版和以樣版為架構的文件

您可以檢視「設計」或「程式碼」檢視中的樣版和以樣版為架構的文件。

本節包含下列主題：

  • 在設計檢視中檢視樣版
  • 在程式碼檢視中檢視樣版
  • 在設計檢視中檢視以樣版為架構的文件
  • 在程式碼檢視中檢視以樣版為架構的文件


在設計檢視中檢視樣版

在樣版中，可編輯區域會顯示在「文件」視窗的「設計」檢視中，周圍有矩形外框圍繞，並以預先設定的標示顏色顯示。每個區域的左上角都會有一個小標籤，以顯示該區域的名稱。

注意

如需關於設定標示顏色偏好設定的詳細資訊，請參閱設定樣版區域的標示偏好設定。

您可以查看「文件」視窗的標題列，以辨識檔案是否為樣版檔。樣版檔的標題列中會包含 <<樣版>> 的字樣，樣版檔的副檔名則為 .dwt。

相關主題

  • 在程式碼檢視中檢視樣版
  • 在設計檢視中檢視以樣版為架構的文件
  • 在程式碼檢視中檢視以樣版為架構的文件


在程式碼檢視中檢視樣版

在「程式碼」檢視中，您可以變更樣版中的可編輯和鎖定的 HTML 原始碼。

提示

您可以使用程式碼色彩標示偏好設定來設定自己的配色，以便在「程式碼」檢視中檢視文件時可以很容易地辨別樣版區域 (請參閱自訂樣版的程式碼色彩標示偏好設定)。

可編輯內容的區域是以下列的 HTML 註解來標示：

<!-- TemplateBeginEditable> 和 <!-- TemplateEndEditable -->

在以樣版為架構的文件中，這些註解之間的所有內容都是可以編輯的。可編輯區域的 HTML 原始碼應該類似這樣：

<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
  <tr bgcolor="#333366">
    <td>Name</td>
    <td><font color="#FFFFFF">Address</font></td>
    <td><font color="#FFFFFF">Telephone Number</font></td>
  </tr>
  <!-- TemplateBeginEditable name="LocationList" -->
  <tr>
    <td>Enter name</td>
    <td>Enter Address</td>
    <td>Enter Telephone</td>
  </tr>
  <!-- TemplateEndEditable -->
</table>

注意

請注意，當您在「程式碼」檢視中編輯樣版程式碼時，請勿變更 Dreamweaver 所依據的任何樣版註解標籤。

相關主題

  • 在設計檢視中檢視樣版
  • 在設計檢視中檢視以樣版為架構的文件
  • 在程式碼檢視中檢視以樣版為架構的文件


在設計檢視中檢視以樣版為架構的文件

在依據樣版而建立的文件中 (以樣版為架構的文件)，可編輯區域會出現在「文件」視窗的「設計」檢視中，周圍環繞矩形外框，並以預設的標示顏色顯示。每個區域的左上角都會有一個小標籤，以顯示該區域的名稱。

注意

如需關於設定標示顏色偏好設定的詳細資訊，請參閱設定樣版區域的標示偏好設定。

除了可編輯區域的外框之外，整個頁面周圍也環繞不同顏色的外框，右上方會有一個標籤，顯示出該文件所依據之樣版的名稱。這個反白標示的矩形是希望提醒您，這個文件是以樣版為架構，您無法變更可編輯區域外面的任何項目。

相關主題

  • 在設計檢視中檢視樣版
  • 在程式碼檢視中檢視樣版
  • 在程式碼檢視中檢視以樣版為架構的文件


在程式碼檢視中檢視以樣版為架構的文件

在「程式碼」檢視中，從樣版衍生的文件可編輯區域會以不同於不可編輯區域中程式碼的顏色顯示。您只能變更可編輯區域中的程式碼或可編輯參數； Dreamweaver 不允許您在鎖定區域內輸入。

可編輯內容是以下列 Dreamweaver 的 HTML 註解來標示：

<!-- InstanceBeginEditable> 和 <!--InstanceEndEditable -->

在以樣版為架構的文件中，這些註解之間的所有內容都是可以編輯的。可編輯區域的 HTML 原始碼應該類似這樣：

<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
  <tr bgcolor="#333366">
    <td>Name</td>
    <td><font color="#FFFFFF">Address</font></td>
    <td><font color="#FFFFFF">Telephone Number</font></td>
  </tr>
  <!-- InstanceBeginEditable name="LocationList" -->
  <tr>
    <td>Enter name</td>
    <td>Enter Address</td>
    <td>Enter Telephone</td>
  </tr>
  <!-- InstanceEndEditable -->
</table>
</body>

無法編輯的文字，預設的顏色是灰色；您可以在「偏好設定」對話方塊中，針對可編輯和不可編輯區域分別選取不同的顏色。如需詳細資訊，請參閱自訂樣版的程式碼色彩標示偏好設定。

相關主題

  • 在設計檢視中檢視樣版
  • 在程式碼檢視中檢視樣版
  • 在設計檢視中檢視以樣版為架構的文件


樣版標籤語法

本節將說明一般語法規則並列出 HTML 註解標籤，Dreamweaver 會使用這些註解標籤在樣版和以樣版為架構的文件中指定區域。當您插入樣版物件時，Dreamweaver 會在程式碼中自動插入樣版標籤。

注意

Dreamweaver 會使用 HTML 註解標籤來定義樣版區域，因此以樣版為架構的文件算是有效的 HTML 檔。

本節包含下列主題：

  • 一般語法規則
  • 樣版標籤
  • 實體標籤


一般語法規則

以下為一般語法規則：

  • 只要有空格出現，您就可以用任何數量的空白 (空格、Tab 字元、斷行) 來取代它。除了在註解的開頭和結尾之外，其他地方一定要有空白。
  • 屬性可以用任何順序指定。例如，在 TemplateParam 中，您可以在名稱前面指定類型。
  • 註解和屬性名稱必須區分大小寫。
  • 所有屬性都必須以引號括住。單引號或雙引號都可以使用。

如需關於檢查語法的詳細資訊，請參閱檢查樣版語法。

相關主題

  • 樣版標籤
  • 實體標籤


樣版標籤

Dreamweaver 會使用下列的樣版標籤：

<!-- TemplateBeginEditable name="..." -->
<!-- TemplateEndEditable -->

<!-- TemplateParam name="..." type="..." value="..." -->

<!-- TemplateBeginRepeat name="..." -->
<!-- TemplateEndRepeat -->

<!-- TemplateBeginIf cond="..." -->
<!-- TemplateEndIf -->

<!-- TemplateBeginPassthroughIf cond="..." -->
<!-- TemplateEndPassthroughIf -->

<!-- TemplateBeginMultipleIf -->
<!-- TemplateEndMultipleIf -->

<!-- TemplateBeginPassthroughMultipleIf -->
<!-- TemplateEndPassthroughMultipleIf -->

<!-- TemplateBeginIfClause cond="..." -->
<!-- TemplateEndIfClause -->

<!-- TemplateBeginPassthroughIfClause cond="..." -->
<!-- TemplateEndPassthroughIfClause -->

<!-- TemplateExpr expr="..." --> (equivalent to @@...@@)

<!-- TemplatePassthroughExpr expr="..." -->

<!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->

相關主題

  • 一般語法規則
  • 實體標籤


實體標籤

Dreamweaver 會使用下列的實體標籤：

<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked="..." -->
<!-- InstanceEnd -->
<!-- InstanceBeginEditable name="..." -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="..." type="..." value="..." passthrough="..." -->
<!-- InstanceBeginRepeat name="..." -->
<!-- InstanceEndRepeat -->
<!-- InstanceBeginRepeatEntry -->
<!-- InstanceEndRepeatEntry -->

相關主題

  • 一般語法規則
  • 樣版標籤


樣版中的連結

若要在樣版檔案中建立連結，請使用「屬性」檢視窗中的資料夾圖示或「指向檔案」圖示；不要輸入要連結之檔案的名稱。如果您輸入名稱，這個連結可能不會運作。本節將說明 Dreamweaver 如何處理樣版中的連結。

當您從現有頁面建立樣版檔案，然後將這個頁面儲存為樣版時，Dreamweaver 便會更新連結，使它們指向與先前相同的檔案。由於樣版是儲存在 Templates 資料夾中，文件相對連結的路徑會隨著您將頁面儲存為樣版而變更。在 Dreamweaver 中，當您建立以這個樣版為架構的新文件並且儲存它時，所有文件相對連結就會更新，繼續指向正確的檔案。

但是當您將新的文件相對連結加入樣版檔案時，如果您將路徑輸入「屬性」檢視窗的連結文字方塊中，很容易會輸入錯誤的路徑名稱。正確的路徑是從 Templates 資料夾到連結文件的路徑，而不是從這個以樣版為架構之文件的資料夾，到所連結文件的路徑。

如需關於使用指向檔案圖示進行連結的詳細資訊，請參閱連結檔案和文件。

注意

在某些情況下 (例如樣版中事件處理常式中的檔案路徑)，您就不能使用資料夾圖示或「指向檔案」圖示；在這些情況下，您必須輸入正確的路徑名稱。


巢狀樣版

巢狀樣版是以其他樣版做為其設計和可編輯區域架構的樣版。若要建立巢狀樣版，您必須先儲存原始或基本樣版，接著以這個樣版為架構建立新文件，然後再將這個文件儲存為樣版。在這個新樣版中，您可以從基本樣版中原來定義為可編輯的區塊中，再定義可編輯區域。

在共用許多設計元素，但頁面之間有少許變更的網站中，巢狀樣版對於控制這些頁面的內容很有用處。例如，基本樣版可能含有較大的設計區域，可適用於網站的許多內容撰稿人；而巢狀樣版則可針對網站中的特定部分，進一步定義頁面中的可編輯區域。

基本樣版中的可編輯區域會傳遞給巢狀樣版，而且會在從巢狀樣版建立的頁面中保持可編輯，除非這些區域中又插入了新的樣版區域。

對於基本樣版的變更，會自動更新以這個基本樣版為架構的樣版，以及所有以這個主樣版和巢狀樣版為架構的樣版文件。

在下面的範例中，樣版含有三個可編輯區域，名稱分別是 Body、Nav Bar 以及 Footer：

為了建立巢狀樣版，我們以這個樣版為架構建立了一個新文件，然後將這個文件儲存為樣版，並且將它命名為 TrioNested。在巢狀樣版中，我們在名稱為內文的可編輯區域中新增了兩個含有內容的可編輯區域。

當您在傳遞給巢狀樣版的可編輯區域中新增可編輯區域時，這個可編輯區域的反白標示顏色就會變成橙色。您在可編輯區域中加入的內容 (例如 editableColumn 中的圖形)，在以這個巢狀樣版為架構的文件中就不再是可編輯了。藍色反白標示的可編輯區域 (不論是在巢狀樣版中新增，或是從基本樣版傳遞過來)，在以這個巢狀樣版為架構的文件中仍然保持可編輯。沒有插入可編輯區域的樣版區域，會當做可編輯區域傳遞給樣版文件。

相關主題

  • 建立巢狀樣版


樣版中的伺服器 Script 和以樣版為架構的文件

有些伺服器 Script 是插入在文件的開頭或結尾 (在 <html> 標籤之前，或在 </html> 標籤之後)。這種 Script 在樣版和以樣版為架構文件中必須特別處理。在一般情況下，如果您對樣版中 <html> 標籤之前或 </html> 標籤之後的 Script 程式碼做了變更，這些變更不會被複製到以這個樣版為架構的文件。如果樣版主體中的其他伺服器 Script 必須以這個沒有被複製的 Script 為依據的話，就會造成伺服器錯誤。因此，如果您對樣版中 <html> 標籤之前或 </html> 標籤之後的 Script 做了變更，Dreamweaver 便會警告您。

若要避免這種問題，您可以將下列程式碼插入樣版的 head 區段：

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

樣版中有了這段程式碼之後，在 <html> 標籤之前或 </html> 標籤之後所做的 Script 變更，就會複製到以這個樣版為架構的文件中。但是，您將無法在以這個樣版為架構的文件中編輯這些 Script。因此，您可以選擇要能夠在樣版中編輯這些 Script，或是能夠在以這個樣版為架構的文件中編輯，但是不能兩者兼顧。


樣版參數

樣版參數是指可控制以樣版為架構之文件內容的值。您可以使用樣版參數來設定選擇性區域或可編輯的標籤屬性，或者設定您要傳遞給附加文件的值。對於每一個參數，您必須選取名稱、資料類型和預設值。每個參數都必須擁有唯一的名稱，而且每個名稱都必須區分大小寫。

樣版參數會以實體參數的形式傳遞給文件。在大部分情況下，樣版使用者可以編輯參數的預設值，以便自訂哪些項目會出現在以樣版為架構的文件中。有時候，樣版作者可以依據樣版運算式的值，來決定文件中會出現哪些內容 (請參閱樣版運算式)。

相關主題

  • 使用選擇性區域
  • 定義可編輯標籤屬性


樣版運算式

樣版運算式是用來計算或求值的陳述式。

您可以使用運算式來儲存值，並且將它顯示在文件中。例如，簡單的運算式可以只是個參數值，例如 @@(Param)@@，複雜的可能需要計算在表格列替換背景顏色的值，例如 @@((_index & 1) ? red :blue)@@。

您也可以定義 if 和多重 if 條件的運算式 (如需範例，請參閱樣版程式碼中的多重 If 條件)。當運算式使用於條件陳述式中時，Dreamweaver 會將它計算成 true 或 false。如果條件為 True，則選擇性區域就會顯示在以樣版為架構的文件中；如果為 False 則不顯示。

當您插入選擇性區域時，可以在「程式碼」檢視或在「選擇性區域」對話方塊中定義運算式。如需撰寫樣版運算式的詳細資訊，請參閱樣版運算式語言。

在「程式碼」檢視中，有兩種方法可以定義樣版運算式：使用 <!-- TemplateExpr expr="您的運算式"--> 註解或 @@(您的運算式)@@。當您在樣版程式碼中插入運算式時，運算式標記就會出現在「設計」檢視中。當您套用樣版時，Dreamweaver 會計算這個運算式，並且將值顯示在以樣版為架構的文件中。

本節包含下列主題：

  • 樣版運算式語言
  • 樣版程式碼中的多重 If 條件


樣版運算式語言

樣版運算式語言是小型的 JavaScript 子集合，並且使用 JavaScript 語法和優先規則。您可以使用 JavaScript 運算子來撰寫運算式，如下所示：

@@(firstName+lastName)@@

以下是支援的功能和運算子：

  • 數值常值、字串常值 (僅限雙引號的語法)、布林常值 (true 或 false)
  • 變數參考 (請參閱本節稍後所列的已定義變數列表)。
  • 欄位參考 (「點」運算子)
  • 一元運算子： +, -, ~, !
  • 二元運算子： +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
  • 條件運算子： ?:
  • 小括弧： ()

下列是使用的資料類型：布林值、IEEE 64 位元浮點數、字串和物件。Dreamweaver 樣版不支援使用 JavaScript 的「null」或「undefined」類型。也不允許物件中隱含數量類型；因此，運算式 "abc".length 將會造成錯誤，而不是產生值「3」。

唯一可用的物件是由運算式物件模型所定義的物件。下列是已定義的變數：

_document

含有文件層級的樣版資料，同時樣版中各個參數也都有各自的欄位。

_repeat

只針對出現在重複區域內的運算式定義。提供有關該區域的內建資訊：

_index 目前項目的數值索引 (從 0 開始)。

_numRows 這個重複區域內項目的總數。

_isFirst 如果目前項目是重複區域內的第一個項目，則為 True。

_isLast 如果目前項目是重複區域內的最後一個項目，則為 True。

_prevRecord 前一個項目的 _repeat 物件。區域中第一個項目存取這個屬性會發生錯誤。

_nextRecord 下一個項目的 _repeat 物件。區域中最後一個項目存取這個屬性會發生錯誤。

_parent 在巢狀重複區域中，這是指定封合 (外層) 重複區域的 _repeat 物件。在巢狀重複區域之外存取這個屬性會發生錯誤。

在計算運算式時，_document 物件和 _repeat 物件的所有欄位都是以隱含方式出現。例如，您可以輸入 title (而不是 _document.title) 來存取文件的 title 參數。

發生欄位衝突時，_repeat 物件的欄位會優先於 _document 物件的欄位。因此，除了重複區域之內可能需要 _document，以便參考由重複區域參數所隱藏的文件參數之外，您應該不需要明確地參考 _document 或 _repeat。

使用巢狀重複區域時，只有最內層重複區域的欄位會以隱含方式出現。其他區域必須使用 _parent 明確地參考。


樣版程式碼中的多重 If 條件

您也可以定義 if 和多重 if 條件的樣版運算式 (請參閱樣版運算式)。這個範例示範了如何定義一個名為 Dept 的參數、設定初始值，並且定義一個可決定要顯示哪個標誌的多重 If 條件。

下面這個範例是可以在樣版的 head 區段中輸入的程式碼：

<!-- TemplateParam name="Dept" type="number" value="1" -->

以下的條件陳述式會檢查指定給 Dept 參數的值。當條件為 True 或相符時，就會顯示適當的影像。

<!-- TemplateBeginMultipleIf -->
<!-- checks value of Dept and shows appropriate image-->

<!-- TemplateBeginClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause -->

<!-- TemplateEndMultipleIf -->

當您建立以樣版為架構的文件時，樣版參數就會自動傳遞給此文件。樣版使用者可以接著決定要顯示哪個影像 (請參閱修改樣版屬性)。


建立 Dreamweaver 樣版

您可以從現有文件 (如 HTML、Macromedia ColdFusion 或 Microsoft Active Server Pages 文件) 來建立樣版，也可以從新的空白文件來建立樣版。

建立樣版之後，您就可以插入樣版區域 (請參閱樣版區域的類型)。您也可以為樣版設定程式碼色彩標示以及樣版區域反白標示的顏色偏好設定 (請參閱自訂樣版的程式碼色彩標示偏好設定和設定樣版區域的標示偏好設定)。

提示

您可以在樣版的「設計備註」檔案中儲存有關樣版的其他資訊，例如：建立者是誰、上次變更的日期，或者您為何要採用這種版面 (請參閱將設計備註與檔案建立關聯)。以樣版為架構的文件並不會繼承樣版的「設計備註」。

若要建立樣版：

  1. 開啟您想要另存為樣版的文件：
    • 若要開啟現有的文件，請選取「檔案＞開啟舊檔」，然後選取文件。
    • 若要開啟新的空白文件，請選取「檔案＞開新檔案」。在出現的對話方塊中，選取「基本頁面」或「動態頁面」，再選取您想要使用的頁面類型，然後按一下「建立」。

      注意

      如需關於建立新文件的詳細資訊，請參閱建立新的空白文件。
  2. 當文件開啟時，請執行下列其中一項作業：
    • 選取「檔案＞另存成樣版」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「製作樣版」。

      注意

      除非您過去曾經選取「不要再顯示這個對話方塊」，否則便會收到一則警告，指出您要儲存的文件沒有可編輯區域。按一下「確定」將文件儲存為樣版，或按一下「取消」結束這個對話方塊而不建立樣版。

    「另存成樣版」對話方塊便會出現。

  3. 從「網站」彈出式選單選取用來儲存樣版的網站，然後在「另存新檔」文字方塊中為樣版輸入一個唯一的名稱。
  4. 按一下「儲存檔案」。

    Dreamweaver 會將樣版檔儲存在網站之本機根資料夾的 Templates 資料夾中，其副檔名為 .dwt。如果網站中還沒有 Templates 資料夾，Dreamweaver 會在您儲存新樣版時自動建立它。

    注意

    請勿將樣版移出 Templates 資料夾，或將任何非樣版檔案放在 Templates 資料夾中。同時，也不可將 Templates 資料夾移到本機根資料夾之外。否則將會造成樣版中的路徑錯誤。

若要使用「資源」面板來建立新的樣版

  1. 在「資源」面板中 (「視窗＞資源」)，選取面板左邊的「樣版」類別。 這是描述功能的圖片。

    「資源」面板的「樣版」類別便會出現。

  2. 按一下「資源」面板底部的「新增樣版」按鈕。 這是描述功能的圖片。

    未命名的新樣版就會新增到「資源」面板的樣版清單中。

  3. 在樣版仍為選取狀態時，輸入樣版的名稱，然後按 Enter (Windows) 或 Return (Macintosh)。

    Dreamweaver 會在「資源」面板和「樣版」資料夾中建立一個空白的新樣版。

相關主題

  • 自訂樣版的程式碼色彩標示偏好設定
  • 設定樣版區域的標示偏好設定
  • 建立 Contribute 網站的樣版
  • 插入可編輯區域


自訂樣版的程式碼色彩標示偏好設定

程式碼色彩偏好設定可控制文字、背景顏色，以及「程式碼」檢視中所顯示文字的樣式屬性。您可以設定自己的配色，以便在「程式碼」檢視中檢視文件時可以很容易地辨別樣版區域。

若要對樣版設定「程式碼」檢視配色：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單中選取「程式碼色彩標示」。
  3. 在「文件類型」清單中選取「HTML」，然後按一下「編輯頁面配色」按鈕。

    「編輯頁面配色」對話方塊便會出現。

  4. 在「樣式」清單中選取「樣版」標籤。
  5. 請執行下列作業，設定「程式碼」檢視文字的顏色、背景顏色和樣式屬性：
    • 如果您要變更文字顏色，請在「文字顏色」文字方塊中輸入您要套用到選取文字之顏色的十六進位值，或者使用顏色挑選器來選取要套用到文字的顏色。在「背景」欄位中執行同樣的動作，對選取的文字新增或變更現有背景顏色。
    • 如果您要新增樣式屬性到選取的程式碼，請按一下 B (粗體)、I (斜體) 或 U (底線) 按鈕，來設定想要的樣式。
  6. 按一下「確定」。

相關主題

  • 設定樣版區域的標示偏好設定


設定樣版區域的標示偏好設定

您可以使用 Dreamweaver 標示偏好設定，來自訂「設計」檢視中樣版之可編輯和鎖定區域外框的反白標示顏色。可編輯區域顏色會出現在樣版以及以樣版為架構的文件中。

如需在「設計」檢視中檢視樣版和以樣版為架構之文件的詳細資訊，請參閱在設計檢視中檢視樣版和在設計檢視中檢視以樣版為架構的文件。

若要變更樣版反白標示顏色：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 選取左側的分類清單中的「標示」。
  3. 按一下「可編輯區域」、「巢狀區域」或「鎖定區域」顏色方塊，然後使用顏色挑選器選取反白標示顏色 (或在文字方塊中輸入反白標示顏色的十六進位值)。

    如需關於使用顏色挑選器的詳細資訊，請參閱使用顏色。

  4. (選擇性) 如有需要，請針對其他樣版區域類型重複上述程序。
  5. 請按一下「顯示」選項，啟用或停用在「文件」視窗中顯示顏色。

    注意

    「巢狀區域」沒有「顯示」選項；它的顯示是由「可編輯區域」選項所控制。
  6. 按一下「確定」。

若要在「文件」視窗中檢視反白標示顏色：

  • 請選取「檢視＞視覺輔助＞隱藏元素」。

    只有在啟用了「檢視＞視覺輔助＞隱藏元素」，並且在「標示」偏好設定中啟用了適當選項時，反白標示顏色才會出現在「文件」視窗中。

    注意

    如果出現了隱藏元素，但沒有出現反白標示的顏色，請選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後選取「反白標示」類別。確定已選取適當標示顏色旁邊的「顯示」選項。同時確定一下想要的顏色在頁面的背景顏色襯托下能否顯示。

相關主題

  • 自訂樣版的程式碼色彩標示偏好設定


建立 Contribute 網站的樣版

您可以使用 Dreamweaver 建立樣版，協助 Macromedia Contribute 的使用者建立新的頁面、維持網站一致的外觀和感覺，並可以讓您一次更新許多頁面的版面。

當您建立好樣版並將它上傳至伺服器時，除了您已對其設定樣版使用限制的 Contribute 角色以外，所有連線至您網站的 Contribute 使用者都可以使用該樣版。如果您已對樣版使用設定了限制，便可能需要將每個新樣版，新增到 Contribute 使用者可使用的樣版清單中 (請參閱「管理 Contribute」)。

注意

請確定在每一位 Contribute 使用者的網站定義中所定義的網站根資料夾，與您在 Dreamweaver 內網站定義中所定義的網站根資料夾相同。如果使用者的網站根資料夾與您的不符，則該使用者便無法使用樣版。

除了 Dreamweaver 樣版外，您還可以使用 Contribute 管理工具來建立「非 Dreamweaver 樣版」。所謂的非 Dreamweaver 樣版，即是 Contribute 使用者可以用來建立新頁面的現有頁面，與 Dreamweaver 樣版相似，唯一的差別在於當您變更該樣版時，以該樣版為架構的頁面並不會隨著更新。同時，非 Dreamweaver 樣版無法包含如可編輯、鎖定、重複及選擇性區域等的 Dreamweaver 樣版元素。

當 Contribute 使用者在包含 Dreamweaver 樣版的網站中建立新的文件時，Contribute 會在「新增網頁」對話方塊中列出可用的樣版 (包括 Dreamweaver 和非 Dreamweaver 的樣版)。

如果您的網站包含的頁面必須使用 Latin-1 以外的編碼方式，您可能會需要建立樣版 (Dreamweaver 樣版或非 Dreamweaver 樣版)。Contribute 可以編輯使用任何編碼方式的頁面，但當 Contribute 的使用者建立新的空白頁面時，它會使用 Latin-1 編碼方式。如果要建立使用不同編碼方式的頁面，Contribute 的使用者可以為使用不同編碼方式的現有頁面建立複本，或是使用具有不同編碼方式的樣版。然而，如果該網站上沒有使用其他編碼方式的頁面或樣版時，則您必須先在使用其他編碼方式的 Dreamweaver 中建立頁面或樣版。

如需關於建立、編輯及更新 Dreamweaver 樣版的詳細資訊，請參閱關於 Dreamweaver 樣版。

如果要建立非 Dreamweaver 樣版：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 選取網站然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 按一下「進階」索引標籤。
  4. 從左邊的分類清單中選取「Contribute」類別。
  5. 如果您未曾如此做，您需要啟動 Contribute 相容性功能。

    選取「啟動 Contribute 相容性」選項，然後輸入網站的根 URL。

    如需詳細資訊，請參閱準備 Contribute。

  6. 按一下「使用 Contribute 管理網站」按鈕。
  7. 如果出現提示，請輸入系統管理員密碼，然後按一下「確定」。

    「管理網站」對話方塊便會出現。

  8. 在「使用者和角色」類別中，選取某個角色，然後按一下「編輯角色設定值」按鈕。
  9. 請選取「新網頁」類別，並將現有的頁面加入「複製此清單中的頁面以建立新頁面」選項下方的清單中。

    如需詳細資訊，請參閱「管理 Contribute」。

  10. 按一下「確定」，關閉「編輯設定」對話方塊。
  11. 按一下「關閉」，關閉「管理網站」對話方塊。

相關主題

  • 建立 Dreamweaver 樣版


建立可編輯區域

可編輯樣版區域會控制以樣版為架構的頁面中使用者可以編輯哪些區域。

本節包含下列主題：

  • 插入可編輯區域
  • 選取可編輯區域
  • 移除可編輯區域
  • 變更可編輯區域的名稱

相關主題

  • 樣版區域的類型


插入可編輯區域

插入可編輯區域之前，您應該先將正在使用的文件儲存為樣版 (請參閱建立 Dreamweaver 樣版)。

注意

如果您是在文件而非樣版檔案中插入可編輯區域，Dreamweaver 會警告您這個文件將會自動儲存為樣版。

您可以在頁面的任何地方放置可編輯區域，但如果您要將表格或圖層設為可編輯，請考慮下列事項：

  • 您可以將整個表格或個別表格儲存格標記為可編輯，但是您不能將多個表格儲存格標記為單一的可編輯區域。如果選取了 <td> 標籤，可編輯區域會包括儲存格周圍的區域；如果沒有，可編輯區域只會影響儲存格內部的內容。
  • 圖層和圖層內容是單獨的元素；使圖層成為可編輯時，可以讓您變更圖層的位置和它的內容，但是讓圖層的內容成為可編輯時，只能讓您變更圖層的內容，而不能變更其位置。

若要插入可編輯樣版區域：

  1. 請在「文件」視窗中執行下列其中一項作業，來選取區域：
    • 選取您要設定為可編輯區域的文字或內容。
    • 將插入點放在您要插入可編輯區域的地方。
  2. 請執行下列其中一項作業以插入可編輯區域：
    • 選取「插入＞樣版物件＞可編輯區域」。
    • 按一下滑鼠右鍵 (Windows) 或按 Control (Macintosh)，然後選取「樣版＞新增可編輯區域」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「可編輯區域」。

    「可編輯區域」對話方塊便會出現。

  3. 在「名稱」文字方塊中，為這個區域輸入唯一的名稱 (在特定樣版中，您不可以對一個以上可編輯區域使用相同的名稱)。

    注意

    不可在「名稱」文字方塊中使用特殊字元。
  4. 按一下「確定」。

    樣版中的可編輯區域會以 (使用偏好設定中所設定的反白標示顏色) 標示的矩形外框圍繞。區域的左上角會有一個標籤，顯示這個區域的名稱。如果您在文件中插入空白的可編輯區域，則區域的名稱也會出現在區域中。

    注意

    如需關於設定樣版標示選項的資訊，請參閱設定樣版區域的標示偏好設定。

相關主題

  • 選取可編輯區域
  • 移除可編輯區域
  • 變更可編輯區域的名稱


選取可編輯區域

在樣版文件和以樣版為架構的文件中，您都可以很容易地識別和選取樣版區域。

若要在「文件」視窗中選取可編輯區域：

  • 請按一下可編輯區域左上角的標籤。

若要在文件中尋找可編輯區域並且選取它：

  • 請選取「修改＞樣版」，並且從子選單底部的清單中選取區域的名稱。

    注意

    重複區域內的可編輯區域則不會出現在選單中。您必須在「文件」視窗中藉由尋找標籤式邊框來找出這些區域。

這個可編輯區域就會在文件中被選取。

相關主題

  • 設定樣版區域的標示偏好設定
  • 插入可編輯區域
  • 移除可編輯區域
  • 變更可編輯區域的名稱


移除可編輯區域

如果您已將樣版檔案的某個區域標記為可編輯，然後又想將它再次鎖定 (讓它在以樣版為架構的文件中成為不可編輯)，請使用「移除樣版標記」命令。

若要移除可編輯區域：

  1. 請按一下可編輯區域左上角的標籤，以選取該區域。
  2. 請執行下列其中一項作業：
    • 選取「修改＞樣版＞移除樣版標記」。
    • 按一下滑鼠右鍵 (Windows) 或按 Control + 按一下 (Macintosh)，然後選取「樣版＞移除樣版標記」。

    這個區域就成為不可編輯了。

相關主題

  • 插入可編輯區域


變更可編輯區域的名稱

插入可編輯區域之後，您可在稍後變更其名稱。

若要變更可編輯區域的名稱：

  1. 請按一下可編輯區域左上角的標籤，以選取該區域。
  2. 在「屬性」檢視窗中 (視窗＞屬性) 輸入新的名稱。
  3. 按 Enter (Windows) 或 Return (Macintosh)。

Dreamweaver 會將新的名稱套用至可編輯區域。

相關主題

  • 插入可編輯區域


建立重複區域

重複區域是樣版中的一塊區段，可以在以樣版為架構的頁面中依照需要的頻率進行複製。重複區域通常是用於表格，不過您也可以對其他頁面元素定義重複區域。

重複區域可經由重複特定項目 (例如目錄項目和描述版面) 或資料列 (例如項目清單)，讓您控制頁面版面。

您可以使用的重複區域樣版物件有兩種：重複區域和重複表格。

本節包含下列主題：

  • 在樣版中建立重複區域
  • 插入重複表格
  • 在重複表格中設定可替換的背景顏色

相關主題

  • 樣版區域的類型


在樣版中建立重複區域

重複區域可讓樣版使用者在樣版中依其所需無限複製指定的區域。重複區域不是可編輯區域。

如果要讓重複區域中的內容成為可編輯 (例如，允許使用者在以樣版為架構之文件的表格儲存格中輸入文字)，您必須將可編輯區域插入重複區域中 (請參閱插入可編輯區域)。

如需關於建立可編輯重複表格的詳細資訊，請參閱插入重複表格。

若要在樣版中插入重複區域：

  1. 在「文件」視窗中，執行下列其中一項作業：
    • 選取您要設定為重複區域的文字或內容。
    • 將插入點放在文件中您想要插入重複區域的地方。
  2. 請執行下列其中一項作業以建立重複區域：
    • 選取「插入＞樣版物件＞重複區域」。
    • 按一下滑鼠右鍵 (Windows) 或按 Control (Macintosh)，然後選取「樣版＞新增重複區域」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「重複區域」。

    「新增重複區域」對話方塊便會出現。

  3. 在「名稱」文字方塊中，為這個樣版區域輸入唯一的名稱(您不可以對樣版中一個以上重複區域使用相同的名稱)。

    注意

    命名區域時，請勿使用特殊字元。
  4. 按一下「確定」。

    重複區域就會插入到樣版中。

    注意

    以樣版為架構之文件中的重複區域無法進行編輯，除非它含有可編輯區域。如需關於插入可編輯區域的詳細資訊，請參閱插入可編輯區域。


插入重複表格

您可以使用重複表格來建立含有重複列的可編輯區域 (使用表格格式)。您可以定義表格屬性，並且設定哪些表格儲存格是可以編輯的。

若要插入重複表格：

  1. 在「文件」視窗中，將插入點放在您想要插入重複表格的位置。
  2. 請執行下列其中一項作業：
    • 選取「插入＞樣版物件＞重複表格」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「重複的表格」。

    「插入重複的表格」對話方塊便會出現。

  3. 輸入您想要的新值。

    如需詳細資訊，請參閱設定插入重複的表格對話方塊選項。

  4. 按一下「確定」。

    重複表格就會出現在樣版中。

相關主題

  • 在重複表格中設定可替換的背景顏色


在重複表格中設定可替換的背景顏色

在樣版中插入重複表格之後 (請參閱插入重複表格)，您就可以變更表格資料列的背景顏色，自訂重複表格。

若要設定替換的表格列背景顏色：

  1. 在「文件」視窗中，選取重複表格中的某個資料列。
  2. 按一下「文件」工具列中的「顯示程式碼檢視」或「顯示程式碼和設計檢視」按鈕，以便存取所選取表格列的程式碼。
  3. 在「程式碼」檢視中，編輯 <tr> 標籤，以包含下列程式碼：
    <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">

    您可以選擇其他顏色來取代 #FFFFFF 和 #CCCCCC 十六進位值。

  4. 儲存樣版。

下面是一個表格程式碼範例，含有可替換的表格列背景顏色：

<table width="75%"  border="1"  cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
  <!-- TemplateEndRepeat -->

</table>


使用選擇性區域

選擇性區域是樣版中的一塊區域，使用者可以設定在以樣版為架構的文件中要顯示或隱藏此區域。如果您要設定在文件中顯示內容的條件，請使用選擇性區域。

當您插入選擇性區域時，可以替樣版參數設定特定值或在樣版中定義條件陳述式；如有需要，您也可以在稍後修改此選擇性區域。依據您定義的條件，樣版使用者可以在他們以樣版為架構建立的文件中編輯參數，並自行控制是否要顯示這個選擇性區域 (請參閱修改樣版屬性)。

本節包含下列主題：

  • 插入選擇性區域
  • 修改選擇性區域

相關主題

  • 樣版區域的類型


插入選擇性區域

請使用選擇性區域，控制在以樣版為架構的文件中要顯示或不要顯示的內容。選擇性區域物件有兩種：

  • 選擇性區域可讓樣版使用者顯示和隱藏特殊標記的區域，但不讓他們編輯內容。

    選擇性區域的「樣版」標籤前面一定有單字 if。依據樣版中設定的條件，樣版使用者可以在他們建立的頁面中定義這個區域是否可以檢視。

  • 可編輯的選擇性區域可讓樣版使用者設定是要顯示或隱藏區域，並可讓他們編輯區域中的內容。

    例如，如果選擇性區域包含影像或文字，樣版使用者可以設定這個內容是否要顯示，並且可以視需要編輯這個內容。可編輯區域是由條件陳述式所控制。

    注意

    若要設定是否要在以樣版為架構的文件中顯示或隱藏選擇性區域，請參閱修改樣版屬性。

若要插入選擇性區域：

  1. 在「文件」視窗中，選取您要設定為選擇性區域的元素。
  2. 請執行下列其中一項作業：
    • 選取「插入＞樣版物件＞選擇性區域」。
    • 以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 選取的內容，然後選取「樣版＞新增選擇性的區域」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「選擇性區域」。

    「選擇性區域」對話方塊便會出現。

  3. 指定選擇性區域的選項。

    如需關於定義選擇性區域的詳細資訊，請參閱設定選擇性區域對話方塊選項。

  4. 按一下「確定」。

若要插入可編輯選擇性區域：

  1. 在「文件」視窗中，將插入點置於您要插入選擇性區域的位置。

    提示

    您不能圈選一個選取範圍來建立可編輯選擇性區域。插入區域，然後將內容插入區域中。
  2. 請執行下列其中一項作業，開啟「選擇性區域」對話方塊：
    • 選取「插入＞樣版物件＞可編輯的選擇性區域」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「可編輯的選擇性區域」。

    「選擇性區域」對話方塊便會出現。

  3. 輸入選擇性區域的名稱，如果您想要設定其他選項，那麼請按一下「進階」索引標籤。

    如需關於定義選擇性區域的詳細資訊，請參閱設定選擇性區域對話方塊選項。

  4. 按一下「確定」。

相關主題

  • 修改選擇性區域


修改選擇性區域

將區域插入樣版中後，您可以編輯選擇性區域設定。例如，您可以變更是否要顯示內容的預設值、將參數連結到現有的選擇性區域，或者修改樣版運算式。

注意

若要設定是否要在以樣版為架構的文件中顯示或隱藏選擇性區域，請參閱修改樣版屬性。

若要重新開啟「選擇性區域」對話方塊：

  1. 在「文件」視窗中，執行下列其中一項作業：
    • 在「設計」檢視中，按一下您要修改之選擇性區域的樣版標籤。
    • 在「設計」檢視中，將插入點置入樣版區域中；然後在「文件」視窗底部的標籤選取器中選取 <mmtemplate:if> 樣版標籤。
    • 在「程式碼」檢視中，按一下您要修改的樣版區域的註解標籤。
  2. 在「屬性」檢視窗中 (視窗＞屬性)，按一下「編輯」。

    「選擇性區域」對話方塊便會出現。

  3. 必要時進行變更。

    如需關於此對話方塊中選項的詳細資訊，請參閱設定選擇性區域對話方塊選項。

  4. 按一下「確定」。


定義可編輯標籤屬性

您可以允許樣版使用者修改從樣版所建立之文件中所指定的標籤屬性。

例如，您可以在樣版文件中設定背景顏色，同時允許樣版使用者為他們自己建立的頁面設定不同的背景顏色。使用者只能更新您指定為可編輯的屬性。

注意

若要在以樣版為架構的文件中修改可編輯的標籤屬性，請參閱修改樣版屬性。

本節包含下列主題：

  • 在樣版中指定可編輯的標籤屬性
  • 使可編輯標籤屬性成為不可編輯

相關主題

  • 樣版區域的類型


在樣版中指定可編輯的標籤屬性

您可以在頁面中設定多個可編輯的屬性，以便樣版使用者可以在以樣版為架構的文件中修改這類屬性。以下是支援的資料類型：文字、布林值 (true/false)、顏色和 URL。

若要定義可編輯標籤屬性：

  1. 在「文件」視窗中，選取您要設定可編輯標籤屬性的項目。
  2. 選取「修改＞樣版＞將屬性設為可編輯」。

    「可編輯的標籤屬性」對話方塊便會出現。

  3. 請針對想要設為可編輯的每一個屬性來完成此對話方塊。

    如需關於完成此對話方塊的詳細資訊，請參閱設定可編輯的標籤屬性對話方塊選項。

  4. 按一下「確定」。

    建立可編輯標籤屬性會在程式碼中插入樣版參數。屬性的初始值是在以樣版為架構的文件中設定的；建立樣版架構式文件時，它會繼承這參數。然後樣版使用者就可以在以樣版為架構的文件中編輯這個參數 (請參閱修改樣版屬性)。

相關主題

  • 使可編輯標籤屬性成為不可編輯


使可編輯標籤屬性成為不可編輯

先前標記為可編輯的標籤可以標記為不可編輯。

若要重設可編輯標籤屬性：

  1. 請在樣版文件中，按一下與可編輯屬性關聯的元素，或使用標籤選取器選取標籤。
  2. 選取「修改＞樣版＞將屬性設為可編輯」。

    「可編輯的標籤屬性」對話方塊便會出現。

  3. 在「屬性」彈出式選單中，選取您想要改變的屬性。
  4. 取消選取「將屬性設為可編輯」核取方塊。
  5. 按一下「確定」。
  6. 依據樣版來更新文件。

相關主題

  • 在樣版中指定可編輯的標籤屬性


建立巢狀樣版

巢狀樣版可以讓您建立基本樣版的各種變化。您可以先儲存以某個樣版為架構的文件，然後將這份文件另存成新樣版，藉此來建立巢狀樣版。您可以用巢狀結構處理多個樣版來定義逐漸增加的特定版面。如需詳細資訊，請參閱巢狀樣版。

依預設值，基本樣版的所有可編輯樣版區域，都會透過巢狀樣版傳遞到以巢狀樣版為架構的文件。換言之，假如您在基本樣版中建立一個可編輯區域，然後建立一個巢狀樣版，如果您沒有在巢狀樣版中的這個區域中插入任何新的樣版區域時，這個可編輯區域便會出現在以這個巢狀樣版為架構的文件中。

在巢狀樣版中，所傳遞的可編輯區域具有藍色的邊框。您可以在可編輯區域內插入樣版標記，這樣它就不會在以巢狀樣版為架構的文件中當做可編輯區域傳遞出去。這樣的區域會有橘色的外框而不是藍色的外框。

若要建立巢狀樣版：

  1. 從想要用來做為巢狀樣版之架構的樣版來建立文件：
    • 在「資源」面板的「樣版」類別中，以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 您想要用來建立新文件的樣版，然後從快速選單中選取「從樣版新增」。
    • 選取「檔案＞開新檔案」。在「新增文件」對話方塊中，按一下「樣版」標籤，選取含有您要使用之樣版的網站，在文件清單中，按兩下這個樣版，建立新文件。

    新文件就會出現在「文件」視窗中。

  2. 請執行下列其中一項作業，將新文件另存成巢狀樣版：
    • 選取「檔案＞另存成樣版」。
    • 在「插入」列的「常用」類別中，按一下「樣版」按鈕上的箭頭，然後選取「製作巢狀樣版」。

    「另存成樣版」對話方塊便會出現。

  3. 在「另存新檔」文字方塊中輸入名稱，然後按一下「確定」。

在以這個巢狀樣版為架構的文件中，您可以在從基本樣版傳遞的可編輯區域中新增或變更內容，也可以在新樣版中所建立的可編輯區域中新增或變更內容。

如果不要將可編輯區域傳遞給巢狀樣版：

  1. 在「程式碼」檢視中，找出不想傳遞的可編輯區域。

    可編輯區域是由樣版註解標籤所定義。

  2. 請以下列標記來包裹可編輯區域 (包括註解標籤)：
    @@(" ")@@

    如需詳細資訊，請參閱 Macromedia 網站上的 TechNote 16416，網址為 www.macromedia.com/go/16416。


編輯和更新樣版

當您變更並儲存樣版時，Dreamweaver 可以自動更新所有附加到此樣版的文件。如有需要，您也可以手動更新以樣版為架構的文件。

注意

若要編輯 Contribute 網站的樣版，必須使用 Dreamweaver；您無法在 Contribute 中編輯樣版。

Dreamweaver 會在您儲存樣版時，自動檢查樣版語法。當您編輯樣版時，可能也需要檢查樣版語法。

注意

如需關於編輯以樣版為架構之文件的詳細資訊，請參閱編輯以樣版為架構的文件內容。

本節包含下列主題：

  • 開啟樣版進行編輯
  • 手動更新以樣版為架構的文件
  • 更新 Contribute 網站中的樣版
  • 檢查樣版語法


開啟樣版進行編輯

您可以直接開啟樣版檔來編輯，或者是開啟以樣版為架構的文件，然後再開啟所附的樣版來進行編輯。

當您變更樣版時，Dreamweaver 會提示您更新以這個樣版為架構的文件。

注意

如有需要，您也可以針對樣版的變更來手動更新文件 (請參閱手動更新以樣版為架構的文件)。

若要開啟及編輯樣版檔案：

  1. 在「資源」面板中 (「視窗＞資源」)，選取面板左邊的「樣版」類別。 這是描述功能的圖片。

    「資源」面板會列出網站所有可用的樣版，並顯示所選取樣版的預覽畫面。

  2. 在可用的樣版清單中，執行下列其中一項作業：
    • 按兩下您想要編輯之樣版的名稱。
    • 選取要編輯的樣版，然後按一下「資源」面板底部的「編輯」按鈕 這是描述功能的圖片。 。

    樣版就會在「文件」視窗中開啟。

  3. 依需要來修改樣版的內容。

    提示

    若要修改樣版的頁面屬性，請選取「修改＞頁面屬性」(以樣版為架構的文件會繼承這個樣版的頁面屬性)。
  4. 儲存樣版。

    Dreamweaver 會提示您更新以這個樣版為架構的頁面。

  5. 按一下「更新」，來更新以修改過的樣版為架構的所有文件；如果您不想更新以修改過的樣版為架構的文件，請按一下「不要更新」。

    Dreamweaver 會顯示一個記錄，列出更新過的檔案。

若要開啟及修改目前文件所附的樣版：

  1. 在「文件」視窗中開啟以樣版為架構的文件。
  2. 請執行下列其中一項作業：
    • 選取「修改＞樣版＞開啟所附的樣版」。
    • 按一下滑鼠右鍵 (Windows) 或按 Control (Macintosh)，然後選取「樣版＞開啟所附的樣版」。
  3. 依需要來修改樣版的內容。

    提示

    若要修改樣版的頁面屬性，請選取「修改＞頁面屬性」(以樣版為架構的文件會繼承這個樣版的頁面屬性)。
  4. 儲存樣版。

    Dreamweaver 會提示您更新以這個樣版為架構的頁面。

  5. 按一下「更新」，來更新以修改過的樣版為架構的所有文件；如果您不想更新以修改過的樣版為架構的文件，請按一下「不要更新」。

    Dreamweaver 會顯示一個記錄，列出更新過的檔案。

相關主題

  • 手動更新以樣版為架構的文件
  • 更新 Contribute 網站中的樣版
  • 檢查樣版語法


手動更新以樣版為架構的文件

當您變更樣版時，Dreamweaver 會提示您更新以這個樣版為架構的文件，但如有需要，您也可以手動更新目前的文件或整個網站。手動更新以樣版為架構的文件和重新套用樣版是一樣的。

若要將樣版變更套用到目前以樣版為架構的文件：

  1. 在「文件」視窗中開啟文件。
  2. 請選取「修改＞樣版＞更新目前頁面」。

Dreamweaver 會以樣版中的任何變更來更新文件。

若要更新整個網站或使用特定樣版的所有文件：

  1. 請選取「修改＞樣版＞更新頁面」。

    「更新頁面」對話方塊便會出現。

  2. 請完成此對話方塊，然後按一下「開始」。

    如需詳細資訊，請參閱設定更新頁面對話方塊選項。

    Dreamweaver 就會按照指示更新檔案。如果您選取了「顯示記錄」選項，Dreamweaver 就會提供它所嘗試更新的檔案之相關資訊，包括它們是否已成功更新的資訊。

  3. 按一下「關閉」以關閉此對話方塊。

相關主題

  • 開啟樣版進行編輯
  • 更新 Contribute 網站中的樣版
  • 檢查樣版語法


更新 Contribute 網站中的樣版

Contribute 使用者無法對 Dreamweaver 的樣版進行變更。不過，您可以使用 Dreamweaver 來變更 Contribute 網站的樣版。

當您在更新 Contribute 網站中的樣版時，請牢記以下重要因素：

  • Contribute 只有在以下兩種情況，才會從網站上擷取變更之後的新樣版：當 Contribute 啟動時，以及有 Contribute 的使用者變更其連線資訊時。如果您在變更某個樣版的同時，有 Contribute 的使用者正在編輯以該樣版為架構的檔案，則使用者必須重新啟動 Contribute，否則將無法看到樣版的變更情形。
  • 如果您在將某個可編輯區域從樣版中移除的同時，有 Contribute 的使用者正在編輯以該樣版為架構的頁面，則他可能會不知道該如何處理原先位於可編輯區域中的內容。

如果要編輯 Contribute 網站上的樣版：

  1. 使用 Dreamweaver 編輯樣版。

    如需詳細資訊，請參閱開啟樣版進行編輯。

  2. 通知所有正在網站上工作的 Contribute 使用者，請他們重新啟動 Contribute。


檢查樣版語法

當您儲存樣版時，Dreamweaver 會自動檢查樣版語法，但您可以在儲存樣版之前先手動檢查樣版語法。例如，假如您在「程式碼」檢視中新增了樣版參數或運算式，可以檢查程式碼是否遵循正確的語法。

若要檢查樣版語法是否有效：

  1. 在「文件」視窗中開啟想要檢查的文件。
  2. 請選取「修改＞樣版＞檢查樣版語法」。

如果語法格式錯誤，就會出現錯誤訊息。錯誤訊息會描述錯誤，並且指出程式碼中這項錯誤所在的特定行。

相關主題

  • 樣版標籤語法
  • 樣版運算式


管理樣版

您可以使用「資源」面板的「樣版」類別來管理現有的樣版，包括重新命名樣版檔以及刪除樣版檔。

注意

您也可以使用「資源」面板將樣版套用到文件 (請參閱編輯和更新樣版) 或是編輯樣版 (請參閱開啟樣版進行編輯)。

若要在「資源」面板中重新命名樣版：

  1. 在「資源」面板中 (「視窗＞資源」)，選取面板左邊的「樣版」類別。 這是描述功能的圖片。
  2. 按一下樣版名稱來選取它。
  3. 再按一次這個名稱，讓文字成為可選取，然後輸入新的名稱。

    這種重新命名的方法和在 Windows Explorer (Windows) 或 Finder (Macintosh) 中重新命名檔案是一樣的。就像在 Windows Explorer 和 Finder 中一樣，按滑鼠的動作之間要有短暫的停頓。不要按兩下名稱，因為這樣會開啟樣版來進行編輯。

  4. 按一下「資源」面板中的其他區域，或是按 Enter (Windows) 或 Return (Macintosh) 讓變更生效。

    Dreamweaver 會詢問您是否要更新以這個樣版為架構的文件。

  5. 若要更新網站中所有以這個樣版為架構的文件，請按一下「更新」。如果不要更新任何以這個樣版為架構的文件，請按一下「不要更新」。

若要刪除樣版檔案：

  1. 在「資源」面板中 (「視窗＞資源」)，選取面板左邊的「樣版」類別。 這是描述功能的圖片。
  2. 按一下樣版名稱來選取它。
  3. 按一下面板底部的「刪除」按鈕，然後確認您要刪除該樣版。 這是描述功能的圖片。

    小心

    在刪除樣版檔案後，您就不能再擷取它。樣版檔案就會從網站刪除。

    以刪除之樣版為架構的文件並不會從樣版分離；它們仍會維持這樣版檔案被刪除前所保有的結構和可編輯區域。若要將這樣的文件轉換成不包含可編輯或鎖定區域的一般 HTML 檔，請參閱使文件從樣版分離。

相關主題

  • 建立 Dreamweaver 樣版
  • 對現有的文件套用或移除樣版
  • 編輯和更新樣版


匯出和匯入樣版 XML 內容

您可以將以樣版為架構的文件想成是包含了由名稱/值配對表示的資料。每個配對都是由可編輯區域的名稱和該區域的內容構成。

Dreamweaver 可以讓您將名稱/值配對匯出到 XML 檔案中，讓您可以在 Dreamweaver 之外 (例如在 XML 編輯器或文字編輯器中，或在資料庫應用程式中) 處理資料。反之，如果您擁有結構適當的 XML 文件，也可以將資料從它匯入到以 Dreamweaver 樣版為架構的文件中。

若要將文件的可編輯區域匯出為 XML：

  1. 開啟含有可編輯區域之以樣版為架構的文件。
  2. 選取「檔案＞匯出＞將樣版資料匯出為 XML」。

    「將樣版資料匯出為 XML」對話方塊便會出現。

  3. 選取其中一個「註釋」選項：
    • 如果樣版含有重複區域或樣版參數，請選取「使用標準的 Dreamweaver XML 標籤」。
    • 如果樣版沒有包含重複區域或樣版參數，請選取「使用可編輯區域名稱來當做 XML 標籤」。
  4. 按一下「確定」。

    會出現一個對話方塊讓您儲存 XML 檔。

  5. 選取資料夾位置，輸入 XML 檔的名稱，然後按一下「儲存」。

    Dreamweaver 便會產生一個含有來自文件參數和可編輯區域 (包括重複區域或選擇性區域內的可編輯區域) 中資料的 XML 檔案。這個 XML 檔案包括了原始樣版的名稱，以及每個樣版區域的名稱和內容。

    注意

    不可編輯區域中的內容不會匯出為 XML 檔案。

若要匯入 XML 內容：

  1. 請選取「檔案＞匯入＞將 XML 匯入樣版」。

    「匯入 XML」對話方塊便會出現。

  2. 選取 XML 檔，然後按一下「開啟」。

Dreamweaver 便會以 XML 檔案中指定的樣版為架構建立新文件，並且用 XML 檔案的資料填入這個文件中每個可編輯區域的內容。產生的文件便會出現在新的「文件」視窗中。

提示

如果您的 XML 檔案沒有完全按照 Dreamweaver 預期的方式設定，您可能無法匯入資料。解決這種問題其中一個方法，就是先從 Dreamweaver 匯出一個虛設的 XML 檔案，這樣您就會具有結構完全正確的 XML 檔案。然後再從您的原始 XML 檔案將資料複製到這個匯出的 XML 檔案中。如此一來，就產生了一個結構正確而且含有適當資料的 XML 檔案，可以進行匯入了。

相關主題

  • 匯出不含樣版標記的網站


匯出不含樣版標記的網站

如果您要將以樣版為架構的文件匯出到其他網站，且不想該文件中包含樣版標記，請使用「匯出網站為非樣版文件」命令。

若要匯出不含樣版標記的網站：

  1. 請選取「修改＞樣版＞匯出為非樣版文件」。

    「匯出網站為非樣版文件」對話方塊便會出現。

  2. 選取要匯出網站的目的資料夾，然後依所需選取其他匯出選項。

    注意

    您必須選取在現有網站外的資料夾。

    如需詳細資訊，請參閱設定匯出網站為非樣版文件的對話方塊選項。

  3. 按一下「確定」。


對現有的文件套用或移除樣版

當您將樣版套用到現有文件時，Dreamweaver 會將內容納入樣版中相符的區域，或是要求您解析不相符的地方。如果您需要變更鎖定的區域，可在稍後移除樣版。

本節包含下列主題：

  • 將樣版套用到現有文件
  • 使文件從樣版分離


將樣版套用到現有文件

當您將樣版套用到包含現有內容的文件時，Dreamweaver 會試圖將現有內容納入樣版中相符的區域。如果您正在套用其中一個現有樣版的修訂版本，那麼名稱就很可能會相符。

如果您將樣版套用到從未套用過樣版的文件，因為沒有可編輯區域可供比較，就會發生不相符的情況。Dreamweaver 會追蹤這些不相符的地方，好讓您選取要將目前的頁面內容移到哪個 (或哪些) 區域，或者您也可以刪除不相符的內容。

您可以使用「資源」面板或是從「文件」視窗來將樣版套用到現有文件。如有需要，您也可以還原套用樣版的程序。

若要使用「資源」面板將樣版套用到現有文件：

  1. 開啟您要套用樣版的目標文件。
  2. 在「資源」面板中 (「視窗＞資源」)，選取面板左邊的「樣版」類別。 這是描述功能的圖片。
  3. 請執行下列其中一項作業：
    • 將您要套用的樣版從「資源」面板拖曳到「文件」視窗。
    • 選取要套用的樣版，然後按一下「資源」面板底部的「套用」按鈕。

    如果存在文件中的內容無法自動指派到某個樣版區域，「不一致的區域名稱」對話方塊便會出現。

  4. 如果您有未解析的內容，請替此內容選取一個目的地，然後按一下「確定」。

    如需關於將現有內容移到文件中可編輯區域的詳細資訊，請參閱解決不一致的區域名稱。

若要從「文件」視窗將樣版套用到現有文件：

  1. 開啟您要套用樣版的目標文件。
  2. 選取「修改＞樣版＞將樣版套用到頁面」。

    「選取樣版」對話方塊便會出現。

  3. 從清單選擇樣版，然後按一下「選取」。

    如果存在文件中的內容無法自動指派到某個樣版區域，「不一致的區域名稱」對話方塊便會出現。

  4. 如果您有未解析的內容，請替此內容選取一個目的地，然後按一下「確定」。

    如需關於將現有內容移到文件中可編輯區域的詳細資訊，請參閱解決不一致的區域名稱。

若要還原樣版變更：

  • 選取「編輯＞還原套用樣版」。

文件會回復至套用樣版之前的狀態。

相關主題

  • 使文件從樣版分離


使文件從樣版分離

若要變更樣版文件中的鎖定區域，您必須使文件從樣版分離。當文件分離出來時，整份文件就會變成可編輯。

若要使文件從樣版分離：

  1. 開啟您要分離的以樣版為架構的文件。
  2. 選取「修改＞樣版＞從樣版中分離」。

    文件就會從樣版分離，而且所有樣版程式碼都會被移除。

相關主題

  • 將樣版套用到現有文件


編輯以樣版為架構的文件內容

Dreamweaver 樣版可以為以樣版為架構的文件，指定哪些是鎖定的區域 (無法編輯)，其他的區域則為可編輯區域 (請參閱關於 Dreamweaver 樣版)。

在以樣版為架構的頁面中 (請參閱以現有的樣版建立文件)，樣版使用者只能編輯可編輯區域中的內容。您可以很容易地辨識並選取可編輯區域，以便編輯內容 (請參閱選取可編輯區域)。樣版使用者無法編輯鎖定區域中的內容

注意

如果您嘗試在關閉反白標示的情況下編輯樣版文件中的鎖定區域，則滑鼠指標將會變更，表示您不能按一下鎖定的區域。 這是描述功能的圖片。

樣版使用者也可以在以樣版為架構的文件中修改屬性以及編輯重複區域的項目。

本節包含下列主題：

  • 修改樣版屬性
  • 新增、刪除和變更重複區域項目的順序


修改樣版屬性

當樣版作者在樣版中建立參數時 (請參閱樣版參數)，以這個樣版為架構的文件會自動繼承這些參數和它們的初始值設定。樣版使用者可以更新可編輯標籤屬性和其他樣版參數 (例如選擇性區域設定)。

若要修改可編輯的標籤屬性：

  1. 開啟以樣版為架構的文件。
  2. 選取「修改＞樣版屬性」。

    「樣版屬性」對話方塊便會開啟，顯示出可用的屬性清單。此對話方塊會顯示選擇性區域和可編輯的標籤屬性。

  3. 在「名稱」清單中選取屬性。

    對話方塊底部區域就會更新，以顯示選取屬性的標籤和它的指定值。

  4. 在屬性標籤右邊的欄位中，請編輯值來修改文件中的屬性。

    注意

    欄位名稱和可更新的值是定義在樣版中。「名稱」清單中沒有出現的屬性在以樣版為架構的文件中無法更新。
  5. 如果您想要將可編輯屬性傳遞給以這個巢狀樣版為架構的文件，請選取「允許巢狀樣版控制這個項目」核取方塊。

若要修改選擇性區域樣版參數：

  1. 開啟以樣版為架構的文件。
  2. 選取「修改＞樣版屬性」。

    「樣版屬性」對話方塊便會開啟，顯示出可用的屬性清單。此對話方塊會顯示選擇性區域和可編輯的標籤屬性。

  3. 在「名稱」清單中選取屬性。

    對話方塊就會更新，以顯示選取屬性的標籤和它的指定值。

  4. 請選取「顯示」核取方塊來顯示文件中的選擇性區域，或取消選取這個核取方塊來隱藏它。

    注意

    欄位名稱和預設設定是定義在樣版中。
  5. 如果您想要將可編輯屬性傳遞給以這個巢狀樣版為架構的文件，請選取「允許巢狀樣版控制這個項目」核取方塊。

相關主題

  • 定義可編輯標籤屬性
  • 使用選擇性區域


新增、刪除和變更重複區域項目的順序

請使用重複區域控制項，在以樣版為架構的文件中新增、刪除或變更項目的順序。當您新增重複區域項目時，會新增整個複製的重複區域。若要更新重複區域中的內容，原始樣版的重複區域中必須包含可編輯區域。

若要新增、刪除或變更重複區域的順序：

  1. 請將插入點放在重複區域中以選取它。
  2. 請執行下列其中一項作業：
    • 按一下加號 (+) 按鈕，在目前選取項目下面新增重複區域。
    • 按一下減號 (-) 按鈕，刪除選取的重複區域項目。
    • 按一下「向下鍵」按鈕，將選取的項目向下移動一個位置。
    • 按一下「向上鍵」按鈕，將選取的項目向上移動一個位置。

      注意

      此外，您也可以選取「修改＞樣版」，然後選取靠近快速選單底部的某個重複項目選項。您可以使用這個選單來插入新重複項目，或移動選取項目的位置。

若要剪下、複製和刪除項目：

  1. 請將插入點放在重複區域中以選取它。
  2. 請執行下列其中一項作業：
    • 若要剪下重複項目，請選取「編輯＞重複項目＞剪下重複項目」。
    • 若要複製重複項目，請選取「編輯＞重複項目＞複製重複項目」。
    • 若要移除重複項目，請選取「編輯＞重複項目＞刪除重複項目」。
    • 若要貼上重複項目，請選取「編輯＞貼上」。

      注意

      貼上會插入新項目，不是取代現有的項目。

相關主題

  • 建立重複區域


參考

本節將提供這一章裡所介紹之下列對話方塊和面板的相關資訊：

  • 設定另存成樣版對話方塊選項
  • 設定新增可編輯區域對話方塊選項
  • 設定新增重複區域對話方塊選項
  • 設定插入重複的表格對話方塊選項
  • 設定選擇性區域對話方塊選項
  • 解決不一致的區域名稱
  • 設定可編輯的標籤屬性對話方塊選項
  • 使用資源面板管理樣版
  • 設定更新頁面對話方塊選項
  • 設定將樣版資料匯出為 XML 對話方塊
  • 設定匯出網站為非樣版文件的對話方塊選項
  • 設定樣版說明對話方塊選項


設定另存成樣版對話方塊選項

這個對話方塊是用來將文件儲存成樣版。

若要完成「另存成樣版」對話方塊：

  1. 從「網站」彈出式選單選取用來儲存樣版的網站。
  2. 在「另存新檔」文字方塊中為樣版輸入一個唯一的名稱。
  3. 按一下「儲存檔案」。

    Dreamweaver 會將樣版檔儲存在網站之本機根資料夾的 Templates 資料夾中，其副檔名為 .dwt。如果網站中還沒有 Templates 資料夾，Dreamweaver 會在您儲存新樣版時自動建立它。

    注意

    請勿將樣版移出 Templates 資料夾，或將任何非樣版檔案放在 Templates 資料夾中。同時，也不可將 Templates 資料夾移到本機根資料夾之外。否則將會造成樣版中的路徑錯誤。

相關主題

  • 建立 Dreamweaver 樣版


設定新增可編輯區域對話方塊選項

這個對話方塊是用來命名樣版中的可編輯區域。

若要完成「新增可編輯區域」對話方塊：

  1. 為這個區域輸入唯一的名稱 (在特定樣版中，您不可以對一個以上可編輯區域使用相同的名稱)。

    注意

    不可在「名稱」欄位中使用特殊字元。
  2. 按一下「確定」。

    樣版中的可編輯區域周圍會以 (使用偏好設定中所設定的反白標示顏色) 標示的矩形外框圍繞顯示。區域的左上角會有一個標籤，顯示這個區域的名稱。如果您在文件中插入空白的可編輯區域，則區域的名稱也會出現在區域中。

相關主題

  • 插入可編輯區域


設定新增重複區域對話方塊選項

這個對話方塊是用來命名樣版中的新重複區域。重複區域是樣版中的一塊區段，可以在以樣版為架構的頁面中依照需要的頻率進行複製。

若要完成「新增重複區域」對話方塊：

  1. 在「名稱」文字方塊中，為這個樣版區域輸入唯一的名稱(您不可以對樣版中一個以上重複區域使用相同的名稱)。

    注意

    不可在「名稱」文字方塊中使用特殊字元。
  2. 按一下「確定」。

    重複區域就會插入到文件中。

    注意

    以樣版為架構之文件中的重複區域無法進行編輯，除非它含有可編輯區域。如需關於插入可編輯區域的詳細資訊，請參閱插入可編輯區域。

相關主題

  • 在樣版中建立重複區域


設定插入重複的表格對話方塊選項

這個對話方塊是用來讓您在插入重複表格前，先指定它的屬性。

若要完成「插入重複表格」對話方塊：

  1. 請指定下列選項：

    列數決定表格擁有的列數。

    欄數決定表格擁有的欄數。

    儲存格內距可決定儲存格內容和儲存格邊界之間的像素數目。

    儲存格間距決定相鄰表格儲存格之間的像素數目。

    提示

    如果您沒有明確指定「儲存格內距」和「儲存格間距」的值，則大部份瀏覽器會以「儲存格內距」為 1 而「儲存格間距」為 2 的設定顯示表格。若要讓瀏覽器以沒有內距和間距的方式顯示表格，請將「儲存格內距」和「儲存格間距」設定為 0。

    寬度會以像素為單位，或以瀏覽器視窗寬度的百分比來指定表格的寬度。

    邊框是以像素為單位來指定表格邊框的寬度。

    提示

    如果您並未明確指定邊框的值，大部分瀏覽器會以邊框為 1 的狀態來顯示表格。若要讓瀏覽器在顯示表格不顯示邊框，請將「邊框」設定為 0。若要在邊框設定為 0 時，檢視儲存格與表格邊界，請選取「檢視＞視覺輔助＞表格邊框」。

    重複表格中的列會指定表格中哪些列要包含在重複區域中。

    起始列會將輸入的列號設定成要包含在重複區域中的第一列。

    結束列會將輸入的列號設定成要包含在重複區域中的最後一列。

    區域名稱可讓您對重複區域設定唯一的名稱。

  2. 請按一下「確定」以插入表格。

相關主題

  • 插入重複表格


設定選擇性區域對話方塊選項

這個對話方塊是用來建立樣版參數，並且定義樣版區域的條件陳述式 (If...else 陳述式)。您可以使用簡單的 true/false 作業，或者定義較複雜的條件陳述式和運算式。

在「進階」索引標籤中，您可以將多個選擇性區域連結到一個命名參數。在以樣版為架構的文件中，兩種區域都會顯示或隱藏為一個單位。例如，您可以對銷售項目顯示「大拍賣」的影像和售價文字區域。

您也可以使用「進階」索引標籤來撰寫樣版運算式 (請參閱樣版運算式)，用來評估選擇性區域的某個值，並且依據這個值來決定顯示或隱藏它。

若要完成「選擇性區域」對話方塊：

  1. 在「基本」索引標籤中，於「名稱」文字方塊中輸入參數的名稱。
  2. 選取「預設顯示」核取方塊，以便將選取區域設定成要在文件中顯示。取消選取它會將預設值設成 false。

    注意

    若要將參數設定成其他的值，請在「程式碼」檢視中從文件的 head 區段找出參數，並且編輯它的值。
  3. (選擇性) 按一下「進階」索引標籤，然後設定下列選項：
    • 如果您想要連結選擇性區域參數，請按一下「進階」索引標籤、選取「使用參數」，然後再從彈出式選單中選取您要將所選內容連結到的現有參數。
    • 如果您想要撰寫樣版運算式來控制選擇性區域的顯示，請按一下「進階」索引標籤、選取「輸入運算式」，然後再將運算式輸入文字方塊中。

      注意

      Dreamweaver 會自動在您輸入的文字前後插入雙引號。
  4. 按一下「確定」。

當您使用「選擇性區域」樣版物件時，Dreamweaver 就會將樣版註解插入程式碼中。樣版參數是定義在 head 區段中，如下面範例所示：

<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->

在插入選擇性區域的位置，會出現類似下列的程式碼：

<!-- TemplateBeginIf cond="departmentImage" -->
<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>

<!-- TemplateEndIf -->您可以在以樣版為架構的文件中存取和編輯樣版參數 (請參閱修改樣版屬性)。

相關主題

  • 插入選擇性區域


解決不一致的區域名稱

這個對話方塊是用來將文件中的內容，指定給樣版的某個區域。

若要將現有內容指定到新文件中的可編輯區域：

  1. 從「將內容移到新區域」彈出式選單中，執行下列其中一項作業：
    • 在新樣版中選取一個要移動現有內容的目標區域。
    • 選取「以下皆不」將內容從文件移除。
  2. 若要將所有未解析的內容移到選取的區域，請按一下「全部套用」。
  3. 按一下「確定」來套用樣版，或按一下「取消」來取消將樣版套用至文件。

相關主題

  • 將樣版套用到現有文件


設定可編輯的標籤屬性對話方塊選項

這個對話方塊是用來將所選取標籤的屬性設為可編輯。

  1. 請執行下列其中一項作業，以選取屬性：
    • 如果您想要設成可編輯的屬性已列在「屬性」彈出式選單中，請選取它。
    • 如果您想要設成可編輯的屬性並未列在「屬性」彈出式選單中，請按一下「新增」，並且在開啟的對話方塊中輸入您要新增的屬性名稱，然後再按一下「確定」。
  2. 請確定已選取「將屬性設為可編輯」選項。
  3. 在「標籤」文字方塊中，為這個屬性輸入唯一的名稱。

    提示

    為方便您日後辨識特定的可編輯標籤屬性，請使用能夠識別元素和屬性的標籤。例如，您可以將來源可編輯的影像標示為 logoSrc，或將背景顏色可編輯的 body 標籤標示為 bodyBgcolor。
  4. 在「類型」彈出式選單中，請設定下列其中一個選項，來選取這個屬性允許值的類型：
    • 如果要讓使用者能夠輸入屬性的文字值，請選取「文字」。

      例如，您可以對文字使用 align 屬性；然後使用者就可以將這個屬性值設定為 left、right 或 center。

    • 若要插入元素的連結 (例如影像的檔案路徑)，請選取 URL。

      使用 URL 可以讓 Dreamweaver 自動更新連結中使用的路徑。如果使用者將影像移到新的資料夾，「更新連結」對話方塊就會開啟。

    • 如果要讓顏色挑選器出現以便選取值，請選取「顏色」。
    • 如果要讓樣版使用者輸入數值來更新屬性 (例如，變更影像的高度或寬度值)，請選取「數字」。
  5. 「預設值」文字方塊會顯示樣版中所選取標籤屬性的值。請在這個文字方塊中輸入新值，替以樣版為架構的文件中的參數設定不同的初始值。
  6. (選擇性) 如果您想要變更所選取標籤的其他屬性，請選取屬性，然後針對該屬性來完成此對話方塊。
  7. 按一下「確定」。

相關主題

  • 在樣版中指定可編輯的標籤屬性


使用資源面板管理樣版

「資源」面板的「樣版」類別是用來建立和管理網站的樣版。

您可以使用這個對話方塊執行下列作業：

  • 建立 Dreamweaver 樣版
  • 對現有的文件套用或移除樣版
  • 編輯和更新樣版
  • 管理樣版


設定更新頁面對話方塊選項

這個對話方塊是可以讓您根據樣版變更進行頁面更新。您可以更新網站中的所有頁面，或是只針對特定樣版來更新頁面。

若要完成「更新頁面」對話方塊：

  1. 請在「查詢」彈出式選單中，執行下列其中一項作業：
    • 若要更新網站中的所有檔案，請選取「整個網站」，然後從旁邊的彈出式選單中選取網站名稱。

      這個選項會將所選取網站中的所有頁面更新成它們所對應的樣版。

    • 若要針對特定樣版來更新檔案，請選取「使用的檔案」，然後從旁邊的彈出式選單中選取樣版名稱。

      這樣會更新目前網站中使用選取樣版的所有頁面。

  2. 請確定在「更新」選項中已選取「樣版」。
  3. 如果您不想看 Dreamweaver 更新檔案的記錄，請取消選取「顯示記錄」選項；否則，請保留該選項的選取狀態。
  4. 按一下「開始」。

    Dreamweaver 就會按照指示更新檔案。如果您選取了「顯示記錄」選項，Dreamweaver 就會提供它所嘗試更新的檔案之相關資訊，包括它們是否已成功更新的資訊。

  5. 按一下「關閉」以關閉此對話方塊。

相關主題

  • 手動更新以樣版為架構的文件


設定將樣版資料匯出為 XML 對話方塊

這個對話方塊是用來設定樣版可編輯區域的匯出選項。

若要完成「將樣版資料匯出為 XML」對話方塊：

  1. 選取其中一個「註釋」選項：
    • 如果樣版含有重複區域或樣版參數，請選取「使用標準的 Dreamweaver XML 標籤」。
    • 如果樣版沒有包含重複區域或樣版參數，請選取「使用可編輯區域名稱來當做 XML 標籤」。
  2. 按一下「確定」。

相關主題

  • 匯出和匯入樣版 XML 內容


設定匯出網站為非樣版文件的對話方塊選項

這個對話方塊是用來將網站中以樣版為架構的文件，以不包含樣版標記的方式，匯出到另一個網站中。

若要完成「匯出網站為非樣版文件」對話方塊：

  1. 在「資料夾」文字欄位中，輸入您要將檔案匯出的目的資料夾之檔案路徑，或是按一下「瀏覽」，然後選取資料夾。

    您必須選取目前網站以外的資料夾，才能將這個網站擷取過去。

  2. 如果您想要將匯出之以樣版為架構的文件儲存成 XML 版本，請選取「保存樣版資料檔案」。
  3. 若要更新先前所匯出檔案的變更，請選取「僅匯出變更過的檔案」。
  4. 按一下「確定」。

相關主題

  • 匯出不含樣版標記的網站


設定樣版說明對話方塊選項

這個對話方塊是用來提供樣版說明。選取樣版時，使用者會在「新增文件」對話方塊中看見樣版的說明。

若要為樣版提供說明：

  • 請輸入說明，然後按一下「確定」。


將內容新增至頁面

在 Macromedia Dreamweaver 8 中使用視覺工具，將各種內容加入您的網頁。新增元素並加以格式化，如文字、影像、顏色、影片、聲音，以及其他形式的媒體。請確定殘障人士瀏覽者也可以存取您的網頁。

這部份包含下列各章：

使用頁面

插入和格式化文字

插入影像

連結和導覽

使用其他應用程式

新增音效、視訊和互動元素

使用 JavaScript 行為


使用頁面

Macromedia Dreamweaver 8 提供許多功能可協助您建立新的網頁，這些頁面建立功能可以協助您更輕易地指定網頁屬性，如頁面標題、背景影像和顏色，以及文字和連結顏色。此外，Dreamweaver 提供多種工具，可以協助您最佳化網站效能，建立並測試頁面以確保能相容於不同的網路瀏覽器中

本章包含下列各節：

有關使用頁面

儲存網頁

指定 HTML 取代 CSS

設定頁面屬性

使用顏色

在「文件」視窗中選取元素

放大和縮小顯示

使用操作記錄面板

工作自動化

使用 JavaScript 行為來偵測瀏覽器和外掛程式

在瀏覽器中預覽和測試網頁

設定下載時間和大小偏好設定


有關使用頁面

在建立網頁時，您必須考慮使用者將會使用何種瀏覽器和作業系統來檢視您的網頁，以及您可能需要支援哪些語言集。以下各節可協助您了解如何選取顏色以便能在不同網路瀏覽器中正確顯示、如何為不同字元 (字體) 的不同語言選取編碼方式，以及如何檢查網路瀏覽器是否與您的網站相容。

本節包含下列主題：

  • 關於設定頁面屬性
  • 關於操作記錄面板
  • 關於網頁安全色
  • 了解文件編碼方式
  • 關於使用儲存命令與重新執行步驟


關於設定頁面屬性

您可以使用「頁面屬性」對話方塊，指定每一個在 Dreamweaver 中所建立頁面的版面和格式化屬性 (修改＞頁面屬性)。「頁面屬性」對話方塊可讓您指定頁面的預設字體系列和字體大小、背景顏色、邊界、連結樣式，以及許多頁面設計的其他方面。您可以指定每個新建立頁面的新增頁面屬性，並修改現有頁面的屬性。

依預設值，Dreamweaver 會使用 CSS (階層式樣式表) 來格式化文字。您可以使用「偏好設定」對話方塊 (「編輯＞偏好設定」)，將頁面格式偏好設定變更為 HTML。在使用 CSS 頁面屬性時，Dreamweaver 對於在「頁面屬性」對話方塊之「外觀」、「連結」和「標題」類別中所定義的所有屬性，都會使用 CSS 標籤。CSS 標籤定義這些嵌入在頁面 head 區域的屬性。

注意

您所選擇的頁面屬性只會套用至作用中文件。如果頁面使用外部 CSS 樣式表，Dreamweaver 將不會覆寫樣式表中所設定的標籤，因為這會影響到所有使用該樣式表的其他頁面。

CSS 與 HTML 頁面屬性

依預設值，Dreamweaver 會使用 CSS 來指定頁面屬性。如果您想要改用 HTML 標籤，便必須在「偏好設定」對話方塊中加以指定 (請參閱指定 HTML 取代 CSS 以獲得詳細資訊)。

如果您選擇使用 HTML 取代 CSS，「屬性」檢視窗仍會顯示「樣式」彈出式選單。然而字體、大小、顏色和對齊控制項將只會使用 HTML 標籤顯示屬性集。您將再也看不到套用至目前選取範圍的 CSS 屬性值，並且將會停用「大小」彈出式選單。

相關主題

  • 指定 HTML 取代 CSS
  • 設定頁面屬性
  • 設定標題/編碼方式頁面屬性選項


關於操作記錄面板

「操作記錄」面板會顯示從您建立或開啟文件後，您在該作用中文件內執行過的步驟清單，最多到指定的最大步驟數目為止。(「操作記錄」面板不會顯示您在其他頁框、其他「文件」視窗或「網站」面板中所執行的步驟)。它讓您可以還原一或多個步驟；它還能讓您重新執行步驟並建立新指令將重複的工作自動化。

在「操作記錄」面板中，滑動軸或縮圖一開始會指向您執行過的上一個步驟。

相關主題

  • 使用操作記錄面板


關於網頁安全色

在 HTML 中，顏色會以十六進位值 (例如，#FF0000) 或顏色名稱 (red) 來表示。網頁安全色指執行 256 色模式時，Windows 和 Macintosh 系統上的 Netscape Navigator 和 Microsoft Internet Explorer 都能出現相同的顏色。傳統的作法有 216 種常用顏色，及組合 00、33、66、99、CC 或 FF (RGB 值分別是 0、51、102、153、204 和 255) 值對的任何十六進位值來代表網頁安全色。

但是，測試顯示只有 212 種網頁安全色，而不是完整的 216 色，因為 Windows 上的 Internet Explorer 不會正確呈現 #0033FF (0、51、255)、#3300FF (51、0、255)、#00FF33 (0、255、51) 和 #33FF00 (51、255、0) 顏色。

當網路瀏覽器首次呈現外觀時，大部份的電腦都只顯示 265 色 (8 位元)。今日大部份的電腦皆顯示幾千或幾百萬種顏色 (16 和 32 位元)，因此如果您是為使用現行電腦系統的使用者開發網站，使用網頁安全色盤的齊行需求已大幅縮減。

使用網頁安全色盤的原因之一是如果您是在其他網頁裝置上進行開發工作，例如 PDA 和行動電話顯示畫面。許多這類裝置只提供黑白 (1 位元) 或 256 色 (8 位元) 顯示畫面。

在 Dreamweaver 中，「立方體色 (預設)」和「連續色調」色盤使用 216 色的網頁安全色盤；從這些色盤選取顏色時，會顯示該顏色的十六進位色彩值。

若要選擇網頁安全範圍之外的顏色，請按一下 Dreamweaver 顏色挑選器右上角的「色輪」按鈕，就能開啟系統顏色挑選器。系統顏色挑選器不限於網頁安全色。

Netscape Navigator 的 UNIX 版本使用的色盤與 Windows 和 Macintosh 版本所用的色盤不同。如果您是獨佔開發 UNIX 瀏覽器 (或您的目標對象是使用 24 位元監視器的 Windows 或 Macintosh 使用者和使用 8 位元監視器的 UNIX 使用者)，請考慮使用組合 00、40、80、BF 或 FF 值對的十六進位值，它會產生 SunOS 適用的網頁安全色。

相關主題

  • 使用顏色


了解文件編碼方式

文件編碼方式可指定文件中字元所用的編碼方式。文件編碼方式會指定在文件檔頭的 meta 標籤中；它會告知瀏覽器和 Dreamweaver 應如何解碼此文件，以及應該使用何種字體來顯示解碼的文字。

例如，如果您指定「西歐語系 (Latin1)」，就會插入這個 meta 標籤：<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">。Dreamweaver 會使用您在「西歐語系 (Latin1)」編碼方式的「字體偏好設定」中指定的字體來顯示文件；瀏覽器則會使用瀏覽器使用者對「西歐語系 (Latin1)」編碼方式指定的字體來顯示文件。

如果您指定「日文 (Shift JIS)」，就會插入這個 meta 標籤：<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">。Dreamweaver 會使用「日文」編碼方式所指定的字體來顯示文件；瀏覽器則使用瀏覽器使用者為「日文」編碼方式所指定的字體來顯示文件。

若要變更頁面的文件編碼方式，請參閱設定頁面屬性。若要變更 Dreamweaver 建立新文件所用的預設編碼方式，請參閱設定預設的新文件類型。若要變更 Dreamweaver 顯示每一種編碼方式所用的字體，請參閱設定 Dreamweaver 顯示的字體偏好設定。


關於使用儲存命令與重新執行步驟

Dreamweaver 可讓您錄製暫時命令供短期使用，或是您可以從「操作記錄」面板來重新執行步驟。

當您錄製暫時命令時：

  • 這些步驟會在您執行時錄製，如此一來您便不需要在重新執行步驟之前，先在「操作記錄」面板中選取它們。
  • 在錄製期間，Dreamweaver 會防止您執行無法錄製的滑鼠移動 (如在視窗中按一下以選取某項目，或是將頁面元素拖曳到新位置)。
  • 如果您在錄製時切換到另一個文件，Dreamweaver 並不會錄製您在另一個文件中所做的變更。若要判斷任何特定時刻是否錄製您的動作，請查看滑鼠指標。

相關主題

  • 工作自動化
  • 重複步驟
  • 錄製命令


儲存網頁

您可以使用文件目前的名稱和位置來儲存此文件，或是使用不同的名稱和位置來儲存文件的複本。

在命名檔案時，請避免在檔案和資料夾名稱中使用空格和特殊字元。特別針對您想放在遠端伺服器上的檔案名稱，請勿使用特殊字元 (如 é、ç, 或 ¥) 或標點符號 (如冒號、斜線或句點)；很多伺服器會在上傳期間變更這些字元，這將造成與該檔案的任何連結中斷。而且，不要以數字做為檔案名稱的開頭。

若要儲存文件：

  1. 請執行下列其中一項作業：
    • 若要覆寫磁碟上目前的版本，並且儲存您所做的任何變更，請選取「檔案＞儲存」。
    • 若要在不同的資料夾中，或是使用不同的名稱儲存檔案，請選取「檔案＞另存新檔」。
  2. 在出現的「另存新檔」對話方塊中，請導覽到您要儲存檔案的資料夾。
  3. 在「檔案名稱」文字方塊中，輸入檔案的名稱。
  4. 按一下「儲存檔案」來儲存檔案。

若要儲存所有開啟的文件：

  1. 請選取「檔案＞全部儲存」。
  2. 這時如果有開啟任何未儲存的文件，便會顯示每筆未儲存文件的「另存新檔」對話方塊。

    在出現的對話方塊中，導覽到您要儲存檔案的資料夾。

  3. 在「檔案名稱」文字方塊中，輸入檔案的名稱。
  4. 按一下「儲存檔案」來儲存檔案。

若要回復成文件上次儲存的版本：

  1. 請選取「檔案＞回復」。

    這時會出現一個對話方塊，詢問您是否要捨棄變更，並且回復成之前儲存的版本。

  2. 請按一下「是」，回復成前一個版本；按一下「否」便可保留您的變更。

    注意

    如果您儲存文件，然後結束 Dreamweaver，當您重新啟動 Dreamweaver 時，將無法回復前版的文件。

相關主題

  • 建立新文件
  • 儲存新文件


指定 HTML 取代 CSS

依預設值，Dreamweaver 會使用 CSS 標籤來指定頁面屬性。如果您希望使用 HTML 標籤取代 CSS，則必須取消選取「偏好設定」對話方塊「一般設定」類別中的「使用 CSS 取代 HTML 標籤」選項。

若要對頁面屬性指定 HTML 來取代 CSS 標籤：

  1. 選取「編輯＞偏好設定」。

    「偏好設定」對話方塊便會出現。

  2. 在「頁面屬性」對話方塊的「一般設定」類別中，取消選取 使用 CSS 取代 HTML 標籤核取方塊。

    此核取方塊位於「一般偏好設定」面板的「可編輯選項」類別中。

  3. 按一下「確定」。

相關主題

  • 關於設定頁面屬性


設定頁面屬性

頁面標題、背景影像和顏色、文字和連結顏色及邊界，是每個網頁文件的基本屬性。您可以使用「頁面屬性」對話方塊，來設定或變更頁面屬性。

若要設定文件屬性：

  1. 選取「修改＞頁面屬性」，或按一下文字「屬性」檢視窗中的「頁面屬性」按鈕。

    「頁面屬性」對話方塊就會開啟。

  2. 視需要來變更頁面屬性。

    如需關於完成「頁面屬性」對話方塊的資訊，請參閱關於設定頁面屬性。

  3. 按一下「確定」。

相關主題

  • 關於設定頁面屬性
  • 變更文件標題
  • 設定 CSS 連結底線樣式
  • 設定背景影像或背景頁面顏色


變更文件標題

HTML 頁面標題可協助網站瀏覽者持續追蹤瀏覽時的檢視內容，並在瀏覽者的操作記錄及書籤清單中識別該頁面。如果您沒有頁面標題，頁面在瀏覽者視窗、書籤清單和操作記錄清單中，將會顯示為「無標題文件」。

注意

對文件提供檔名 (藉由儲存它)，與對頁面提供標題是不相同的。

若要找到網站中所有的未命名文件，請使用「網站＞報表」命令 (請參閱測試網站)。

若要變更頁面標題：

  1. 開啟文件之後，執行下列其中一項作業。
    • 請選取「修改＞頁面屬性」。
    • 請選取「檢視＞工具列＞文件」(如果尚未選取的話)。
    • 在文件的空白區域中按一下右鍵 (Windows) 或 Control + 按一下滑鼠 (Macintosh)，然後選取「頁面屬性」。
  2. 在「標題」文字方塊中，輸入頁面標題，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
  3. 如果您是在「頁面屬性」對話方塊中編輯標題，請按一下「確定」。

    標題便會出現在「文件」視窗的標題列中 (以及在「文件」工具列中，如果它有顯示的話)。頁面的檔案名稱及儲存檔案的資料夾，會出現在標題列中標題旁邊的括號中。星號表示該文件包含尚未儲存的變更。

相關主題

  • 關於設定頁面屬性


設定 CSS 連結底線樣式

如果您使用的是預設的「CSS 頁面屬性」對話方塊，Dreamweaver 能讓指定特殊 CSS 連結樣式變得更容易。使用 CSS 連結選項時，您可以選擇永遠不在連結上加底線、只有在滑鼠越過連結時才加底線，或是當滑鼠越過連結時關閉它們。

若要設定 CSS 連結樣式：

  1. 選取「修改＞頁面屬性」，或是從「文件」視窗之「設計」檢視的快速選單中選取「頁面屬性」。
  2. 選取「CSS 頁面屬性」對話方塊中的「連結」類別。
  3. 從「底線樣式」彈出式選單中，選取您要用來做為網頁預設值的底線樣式。
  4. 按一下「確定」。

相關主題

  • 關於設定頁面屬性
  • 連結和導覽

設定背景影像或背景頁面顏色

若要定義頁面背景的影像或顏色，請使用「頁面屬性」對話方塊。

如果您同時使用背景影像及背景顏色，則會在下載影像時出現顏色，然後影像會遮住顏色。如果背景影像包含任何透明的像素，就會顯透出背景顏色。

若要定義背景影像或顏色：

  1. 選取「修改＞頁面屬性」，或是從「文件」視窗之「設計」檢視的快速選單中選取「頁面屬性」。
  2. 選取「頁面屬性」對話方塊中的「外觀」類別。
  3. 若要設定背景影像，請按一下「瀏覽」按鈕，然後瀏覽到影像並選取它。或者，在「背景影像」方塊中輸入背景影像的路徑。

    如果背景影像沒有填滿整個視窗時，Dreamweaver 會並排顯示 (重複) 該背景影像，就像瀏覽器的顯示一樣 (若要避免背景影像並排顯示，請使用「階層式樣式表」來停用影像並排顯示。請參閱定義 CSS 樣式背景屬性)。

  4. 若要設定背景顏色，請按一下「背景顏色」方塊並從顏色挑選器中選取一種顏色。

相關主題：

  • 關於設定頁面屬性


使用顏色

在 Dreamweaver 中，很多對話方塊及很多頁面元素的「屬性」檢視窗，都包含一個顏色方塊，可以開啟顏色挑選器。請使用顏色挑選器來選取頁面元素的顏色。

若要在 Dreamweaver 中選取顏色：

  1. 按一下任何對話方塊或「屬性」檢視窗中的顏色方塊。

    顏色挑選器便會出現。

  2. 請執行下列其中一項作業：
    • 使用滴管游標從色盤中選取一種色票。「立方體色」(預設) 和「連續色調」色盤中的所有顏色都是網頁安全的顏色；其他色盤則否 如需詳細資訊，請參閱關於網頁安全色。
    • 請使用滴管游標，從螢幕上的任一處 (甚至在 Dreamweaver 視窗外部) 挑選一種顏色 如要從桌面或其他應用程式挑選顏色，按住滑鼠按鈕讓滴管游標保持聚焦，然後選取 Dreamweaver 之外的顏色。如果按一下桌面或其他應用程式，Dreamweaver 會挑選您所按之處的顏色。然而如果您切換至另一個應用程式，您可能需要按一下 Dreamweaver 視窗以便繼續在 Dreamweaver 中工作。
    • 若要展開您的顏色選取範圍，請使用顏色挑選器右上角的彈出式選單。您可以選取「立方體色」、「連續色調」、Windows OS、Mac OS、「灰階」及「選取網頁安全色」色板。

      注意

      「立方體色」和「連續色調」色板都是網頁安全的顏色，而 Windows OS、Mac OS 和「灰階」則否。如果您使用的色盤不是網頁安全的顏色，但您選擇了「接近網頁安全色」，Dreamweaver 會以最接近的網頁安全顏色來取代選取的顏色。換句話說，可能無法取得您所看到的顏色。

      若要清除目前的顏色而不要選擇不同的顏色，請按一下「預設顏色」 這是描述功能的圖片。 按鈕。

      若要開啟系統顏色挑選器，請按一下「色輪」按鈕。如需詳細資訊，請參閱 這是描述功能的圖片。 關於網頁安全色。


定義預設的文字顏色

在「頁面屬性」對話方塊中定義標準文字、連結、查閱過連結和作用中的連結之預設顏色，或是選擇預先設定的顏色配置來定義頁面背景和文字顏色 (請參閱使用顏色)。

注意

作用中的連結顏色就是在按一下連結時，該連結所變更的顏色。有些網頁瀏覽器可能不會使用您指定的顏色。

若要定義預設的文字顏色，請執行下列其中一項作業：

  • 選取「修改＞頁面屬性」，然後選擇「文字顏色」、「連結顏色」、「查閱過連結」和「作用中的連結」選項的顏色。
  • 選取「命令＞設定頁面配色」，然後選取背景顏色以及文字和連結的顏色組。

    範例方塊顯示瀏覽器中顏色配置的樣子。

    注意

    如果您使用「頁面屬性」對話方塊的預設 CSS 標籤定義這些設定，「頁面配色」命令將不會影響您的頁面外觀。這是因為 CSS 標籤比 HTML 標籤具有較高的優先權。

相關主題

  • 關於設定頁面屬性


在「文件」視窗中選取元素

若要在「文件」視窗的「設計」檢視中選取元素，您通常要按一下該元素。如果看不到元素，您必須在選取它之前，先讓它能被看得到。如需關於隱藏元素的詳細資訊，請參閱顯示和隱藏隱藏元素。

若要選取元素，請使用這些技術：

  • 若要在「文件」視窗中選取看得見的元素，請按一下元素或拖曳跨過元素。
  • 若要選取隱藏的元素，請按一下「檢視＞視覺輔助＞隱藏元素」(如果尚未選取該選單項目的話)，然後在「文件」視窗中按一下元素的標記。

    有些物件在頁面上出現的位置與插入其程式碼的位置不同。例如，圖層可能出現在頁面的任何位置，但是定義圖層的程式碼則在固定的位置。在顯示隱藏的元素時，Dreamweaver 會在「文件」視窗中顯示標記，藉以顯示此類元素的程式碼位置。選取標記會選取整個元素；例如，選取圖層的標記就會選取整個圖層 (請參閱顯示和隱藏隱藏元素)。

  • 若要選取完整的標籤 (包括它的所有內容)，請在「文件」視窗左下方的標籤選取器中按一下任一個標籤 (標籤選取器會出現在「設計」檢視和「程式碼」檢視中)。標籤選取器永遠會顯示包含目前選取範圍或插入點的標籤。最左邊的標籤就是包含目前選取範圍或插入點的最外面標籤。下一個標籤已包含在該最外面標籤內，以此類推；最右邊的標籤就是包含目前選取範圍或插入點的最內部標籤。

    在以下範例中，插入點位於段落標籤 <p> 內。若要選取其中包含欲選取段落的表格，您可以從 <table> 標籤選取到 <p> 標籤的左邊。

若要查看與選取文字或物件相關的 HTML 程式碼，請執行下列其中一項作業：

  • 在「文件」工具列中，按一下「顯示程式碼檢視」按鈕。
  • 選取「檢視＞程式碼」。
  • 在「文件」工具列中，按一下「顯示程式碼」和「設計檢視」按鈕。
  • 選取「檢視＞程式碼和設計」。
  • 選取「視窗＞程式碼檢視窗」。

如需關於「程式碼」檢視的詳細資訊，請參閱檢視程式碼。

當您在程式碼編輯器 (「程式碼」檢視或「程式碼」檢視窗) 中選取某個項目時，通常也會在「文件」視窗中選取此項目。在顯示選取範圍之前，您可能需要先將這兩個檢視同步化；請參閱檢視程式碼。


顯示和隱藏隱藏元素

有些 HTML 程式碼在瀏覽器中沒有看得見的表示法。例如，comment 標籤便不會出現在瀏覽器中。但是，在建立頁面時能夠選取此類隱藏元素是很有用的，因為您可以編輯、移動及刪除它們。

Dreamweaver 可讓您指定在「文件」視窗的「設計」檢視中，是否顯示標記出隱藏元素之位置的圖示。若要指出在您選取「檢視＞視覺輔助＞隱藏元素」時會出現哪些元素標記，您可以設定「隱藏元素」偏好設定中的選項。例如，您可以指定命名錨點應可看得見，而不是斷行符號。

您可以利用「插入」列「常用」類別中的按鈕，建立某些隱藏元素，例如註解和命名錨點 (請參閱使用插入列)。然後您可以利用「屬性」檢視窗來修改這些元素。

若要顯示或隱藏隱藏元素的標記圖示：

  • 請選取「檢視＞視覺輔助＞隱藏元素」。

    注意

    顯示隱藏元素時，可能會因為將其他元素移動一些像素而造成頁面版面些微變更，所以為了得到更精確的版面，請隱藏瀏覽器中看不到的元素。

若要變更「隱藏元素」偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後再按一下「隱藏元素」。
  2. 選取要顯示哪些元素。

    對話方塊中元素名稱旁邊的核取標記表示當「檢視＞視覺輔助＞隱藏元素」被選取時，可以看見該元素。

    如需詳細資訊，請參閱設定隱藏元素偏好設定。

  3. 按一下「確定」。


放大和縮小顯示

Dreamweaver 可以讓您縮放文件的顯示大小，以便您能檢查圖形的像素精確度、更輕易地選取小項目、設計含有小型文字的頁面，或設計大型頁面等等。

注意

縮放工具只能在「設計」檢視中使用。

若要放大顯示頁面：

  1. 選取位於「文件」視窗右下角的「縮放」工具 (放大鏡圖示)。
  2. 請執行下列其中一項作業：
    • 在頁面中按一下您想要放大的地方，直到達成需要的顯示比例為止。
    • 在您想要放大的頁面區域上拖曳出一個方塊，然後放開滑鼠按鈕。
    • 從「縮放」彈出式選單中選取某個預設的顯示比例等級。
    • 在「縮放」文字方塊中輸入顯示比例等級。

      提示

      除了縮放工具以外，您也可以使用以下的鍵盤組合進行放大：Control+= (Windows) 或 Command+= (Macintosh)。

若要縮小顯示頁面：

  1. 選取「縮放」工具。
  2. 按 Alt 鍵 (Windows) 或 Option 鍵 (Macintosh)，然後按一下頁面。

    提示

    除了縮放工具以外，您也可以使用以下的鍵盤組合進行放大：Control+- (Windows) 或 Command+- (Macintosh)。

若要在縮放後編輯頁面：

  • 選取位於「文件」視窗右下角的「選取」工具 (指標圖示)，然後按一下頁面內部。

若要在縮放後調整頁面的取景位置：

  1. 選取位於「文件」視窗右下角的「手掌」工具 (手掌圖示)。
  2. 拖曳頁面。

若要將某個選取範圍填滿「文件」視窗：

  1. 在頁面上選取元素。
  2. 選取「檢視＞符合選取範圍」。

若要將整個頁面填滿「文件」視窗：

  • 選取「檢視＞符合全部」。

若要將整頁寬度填滿「文件」視窗：

  • 選取「檢視＞符合寬度」。

相關主題

  • 狀態列


使用操作記錄面板

「操作記錄」面板會追蹤您在 Dreamweaver 中工作的每個步驟。您可以使用「操作記錄」面板一次還原多個步驟。

若要在文件中還原您所執行的最後一個作業，請選取「編輯＞還原」，就像您在任何其他應用程式中所執行的動作一樣 (「還原」命令的名稱在「編輯」選單中會改變以反應您執行過的上一個作業)。

「操作記錄」面板也能讓您重新執行已執行過的步驟，並且藉由建立新命令來自動化工作。如需詳細資訊，請參閱工作自動化。

若要開啟「操作記錄」面板：

  • 選取「視窗＞操作記錄」。

若要還原上一個步驟：

  • 將「操作記錄」面板滑動軸拖曳到清單中的上一個步驟。這樣做跟選擇「編輯＞還原」的效果相同。

    已還原的步驟會變成灰色。

若要一次還原多個步驟，請執行下列其中一項作業：

  • 將滑動軸拖曳，指向任何步驟。
  • 按一下沿著滑動軸的路徑到步驟的左邊；滑動軸會自動捲動到該步驟，並在捲動時還原步驟。

    注意

    若要自動捲動到某個特別步驟，您必須按一下到步驟的左邊；按一下步驟本身的動作就會選取該步驟。選取步驟與回到該步驟在您的還原操作記錄中是不同的。

就像還原單一步驟一樣，如果您還原一系列的步驟，再於文件中執行某個新步驟，將無法再重做那些已還原的步驟；它們會從「操作記錄」面板中消失。

若要設定「操作記錄」面板保留及顯示的步驟數目：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「一般設定」。
  3. 為「操作記錄步驟的上限」輸入一個數目。

    預設值對大多數使用者需求而言應該已足夠。數目愈高，「操作記錄」面板所需的記憶體愈多。這可能會影像效能並明顯降低您電腦的速度。當「操作記錄」面板達到這個步驟數目上限時，會將最早的步驟捨棄。

    注意

    您無法重新排列「操作記錄」面板中步驟的順序。不要將「操作記錄」面板想像成任意的命令集合一樣；要將它想成是檢視您已執行之步驟的一種方法，而且是以您執行它們時的順序來檢視。

若要清除目前文件的操作記錄清單：

  • 在「操作記錄」面板的快速選單中，選取「清除操作記錄」。

    這個命令也會清除目前文件的所有還原資訊；在選擇「清除操作記錄」之後，您將無法還原已清除的步驟 (請注意，「清除操作記錄」不會還原步驟；它只會將這些步驟的記錄從 Dreamweaver 的記憶體中移除)。

相關主題

  • 關於操作記錄面板


工作自動化

在建立文件時，您可能希望執行好幾次相同的工作。

若要重複一系列步驟一次或兩次， 請直接從「操作記錄」面板重新執行該些步驟，該面板會在您處理文件時錄製步驟。如需關於「操作記錄」面板的基本資訊，請參閱關於操作記錄面板。若要將您經常執行的工作自動化，您可以建立一個會自動執行該工作的新命令。

有些滑鼠移動無法重播或是另存為已儲存命令的一部份，如藉由按一下或拖曳的方式在「文件」視窗中選取某項目。當您進行此類移動時，「操作記錄」面板中會出現一個黑色行 (雖然在您執行另一個動作之前，該行並不會變得很明顯)。為了避免無法重播移動，在「文件」視窗內移動插入點時請使用方向鍵，而不要使用滑鼠。若要進行或擴充選取範圍，請在按方向鍵的同時按住 Shift 鍵。

提示

在您執行稍後要重複的工作時，如果出現黑色的滑鼠移動指標行，您可以還原該步驟，並嘗試另一個方法，也許可以使用方向鍵。

有些其他步驟也是無法重複的，如將頁面元素拖曳到頁面上的其他位置。當您執行此類步驟時，「操作記錄」面板中會出現內含紅色小 X 的選單命令圖示。

相關主題

  • 重複步驟
  • 將步驟套用至另一個物件
  • 將步驟套用至多個物件
  • 在文件間複製並貼上步驟
  • 從操作記錄步驟建立新命令
  • 錄製命令


重複步驟

您可以使用「操作記錄」面板重複您執行的上一個步驟、重複一系列相鄰步驟，或重複一系列不相鄰的步驟。如需關於「操作記錄」面板的基本資訊，請參閱關於操作記錄面板。

若要重複一個步驟，請執行下列其中一項作業：

  • 選取「編輯＞重做」。

    這個命令的名稱在「編輯」選單中會變更，以反映您上一個執行的步驟；例如，若您剛輸入一些文字，命令名稱就是「重做輸入」。

  • 在「操作記錄」面板中，選取一個步驟並按一下「重新執行」按鈕。

    此步驟會重新執行，在「操作記錄」面板中也會出現一個複本。

若要重複一系列相鄰的步驟：

  1. 藉由執行下列其中一項作業來選取「操作記錄」面板中的步驟：
    • 從一個步驟拖曳到另一個步驟 (請勿拖曳滑動軸；只要從某個步驟的文字標籤，拖曳到另一個步驟的文字標籤即可)。
    • 選取第一個步驟，然後 Shift + 按一下前一個步驟；或者選取前一個步驟，然後 Shift + 按一下第一個步驟。

    執行的步驟便是選取 (標示) 的步驟，並不一定是目前滑動軸所指向的步驟。

    注意

    雖然您可以選取包含黑色滑鼠移動指標行的一系列步驟，但是當您重新執行這些步驟時，會略過該滑鼠移動。
  2. 按一下「重新執行」。

    步驟會依序重新執行，而且在「操作記錄」面板中會出現一個標記「重新執行步驟」的新步驟。

若要重複不相鄰的步驟：

  1. 選取步驟，然後 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 其他步驟。

    您也可以 Control + 按一下滑鼠或 Command + 按一下滑鼠以取消選取已選取的步驟。

  2. 按一下「重新執行」。

    選取的步驟會依序重新執行，而且在「操作記錄」面板中會出現一個標記「重新執行步驟」的新步驟。

相關主題

  • 將步驟套用至另一個物件
  • 將步驟套用至多個物件


將步驟套用至另一個物件

您可以從「操作記錄」面板將一組步驟套用至「文件」視窗中的任何物件。

若要將「操作記錄」面板步驟套用至新物件：

  1. 選取物件。
  2. 在「操作記錄」面板中選取相關步驟，然後再按一下「重新執行」。


將步驟套用至多個物件

如果您在文件中選取多個物件，然後從「操作記錄」面板將步驟套用至它們，這些物件會被視為單一的選取範圍，而且 Dreamweaver 也會嘗試將步驟套用至該組合的選取範圍。

例如，您無法一次選取五個影像，並且對每個影像套用相同的大小變更；大小變更作業必須要套用至每一個影像，而不能套用至影像的集合組合。

若要將一系列步驟套用至物件組中的每個物件，您必須讓系列步驟中的最後一個步驟為選取物件組中的下一個物件。下列程序示範特別情況下的這個原則：設定一系列影像的垂直和水平間距。

若要設定一系列影像的垂直和水平間距：

  1. 從每行包含小型影像 (如圖形項目符號或圖示)、後接文字的文件開始著手。目標是將影像與文字分開，並與它們上方及下方的其他影像分開。

  2. 開啟「屬性」檢視窗 (如果尚未開啟的話，選取「視窗＞屬性」)。
  3. 選取第一個影像。
  4. 在「屬性」檢視窗中，請於「垂直距離」和「水平距離」文字方塊中輸入數字，來設定影像的間距。
  5. 再按一下影像讓「文件」視窗呈作用中狀態，但是不移動插入點。
  6. 按向左鍵將插入點移到影像的左邊。然後按向下鍵將插入點向下移動一行，就停留在系列中第二個影像左邊的位置。然後按 Shift + 向右鍵來選取那第二個影像。

    注意

    不要用按一下的方式來選取影像，否則您將無法重新執行所有步驟。
  7. 在「操作記錄」面板中，請選取對應到變更影像間距和選取下一個影像的步驟。按一下「重新執行」便可重新執行那些步驟。

    目前影像的間距就會變更，並且選取下一個影像。

  8. 繼續按一下「重新執行」，直到所有影像間距都正確為止。

若要將步驟套用至另一個文件中的物件，請使用「複製步驟」按鈕 (請參閱在文件間複製並貼上步驟)。


在文件間複製並貼上步驟

每個開啟的文件都有自己的步驟操作記錄。您可以從某個文件複製步驟，再將它們貼到另一個文件中。

關閉文件會清除它的操作記錄。如果您知道自己在關閉文件之後，會想要使用來自該文件的步驟，請在關閉該文件之前，使用「複製步驟」來複製步驟 (或將步驟另存為命令，請參閱從操作記錄步驟建立新命令)。

若要在另一個文件中重複使用來自某文件的步驟：

  1. 從包含您想要重複使用的步驟之文件開始著手。
  2. 在「操作記錄」面板中選取步驟。
  3. 按一下「操作記錄」面板的「複製步驟」按鈕，便可複製那些步驟。 這是描述功能的圖片。

    注意

    「複製步驟」(「操作記錄」面板中的按鈕) 與「複製」(位於「編輯」選單中) 是不同的。雖然您的確是使用「編輯＞貼上」來貼上步驟，但是卻無法使用「編輯＞複製」來複製步驟。

    在複製包含「複製」或「貼上」命令的步驟時要小心：

    • 如果其中一個步驟是「複製」命令，則請勿使用「複製步驟」；您可能無法依照想要的方式來貼上此類步驟。
    • 如果步驟包括「貼上」命令，則您無法貼上這些步驟，除非在「貼上」命令之前也包括「複製」命令。
  4. 開啟另一個文件。
  5. 將插入點放在您想要的位置，或選取要套用該些步驟的物件。
  6. 選取「編輯＞貼上」來貼上步驟。

    當步驟貼到文件的「操作記錄」面板中時，就會重新執行。「操作記錄」面板會將它們顯示為一個步驟，叫做「貼上步驟」。

    如果您將步驟貼到文字編輯器，或是「程式碼」檢視或「程式碼」檢視窗中，則它們會顯示為 JavaScript 程式碼。這對於學習如何撰寫自己的 Script 是很好用的。如需關於在 Dreamweaver 中使用 JavaScript 的詳細資訊，請參閱撰寫和編輯程式碼。


從操作記錄步驟建立新命令

您可以將一組操作記錄步驟另存為命名的命令，然後將它變成「命令」選單中可用的命令。

如果未來有任何機會再次用到特定的一組步驟，特別是如果您希望在下次啟動 Dreamweaver 時能使用這些步驟的話，請建立並儲存一個新命令；儲存的命令會永久保留 (除非您刪除它們)，但錄製的命令會在您結束 Dreamweaver 時便捨棄，而且複製的步驟順序也會在您複製其他東西時加以捨棄。如需關於錄製命令的詳細資訊，請參閱錄製命令。

您可以編輯已放在「命令」選單中的命令名稱，也可以從「命令」選單中將它們刪除。若要編輯及刪除「命令」選單中內建的命令 (也就是並非您明確新增的命令)，則較為複雜。

若要建立命令：

  1. 在「操作記錄」面板中選取一個步驟或一組步驟。
  2. 按一下「儲存為命令」按鈕，或是從「操作記錄」面板的快速選單中選取「儲存為命令」。
  3. 輸入命令名稱並按一下「確定」。

    命令便會出現在「命令」選單中。

    注意

    命令會在您的 Dreamweaver/Configuration/Commands 資料夾中另存為 JavaScript 檔 (或有時會存為 HTML 檔)。如果您在多使用者的作業系統中使用 Dreamweaver，該檔案會儲存在特定使用者的「命令」資料夾中。

若要使用儲存的命令：

  1. 選取要套用命令的物件，或將插入點放在您想要的位置。
  2. 從「命令」選單中選取命令。

若要編輯「命令」選單中的命令名稱：

  1. 選取「命令＞編輯命令清單」。
  2. 選取要重新命名的命令並為它輸入新名稱。
  3. 按一下「關閉」。

若要從「命令」選單刪除名稱：

  1. 選取「命令＞編輯命令清單」。
  2. 選取命令。
  3. 按一下「刪除」，然後再按一下「關閉」。


錄製命令

您可以錄製暫時命令供短期使用。Dreamweaver 一次只保留一項錄製的命令，一旦開啟錄製新命令，就會遺失舊的命令。

若要儲存新命令又不要遺失錄製的命令，請從「操作記錄」面板儲存命令。如需詳細資訊，請參閱從操作記錄步驟建立新命令。如需關於將使用錄製的命令與從「操作記錄」面板重新執行步驟加以比較的詳細資訊，請參閱使用操作記錄面板。

若要暫時錄製一系列經常使用的步驟：

  1. 選取「命令＞開始錄製」，或按 Control+Shift+X (Windows) 或 Command+Shift+X (Macintosh)。

    指標會變更以指示您正在錄製命令。

  2. 完成錄製時，請選取「命令＞停止錄製」，或按 Control+Shift+X (Windows) 或 Command+Shift+X (Macintosh)。

若要重新執行錄製的命令：

  • 選取「命令＞執行預先錄製的命令」，或按 Control+Shift+R (Windows) 或 Command+Shift+R (Macintosh)。

若要儲存錄製的命令：

  1. 選取「命令＞執行預先錄製的命令」，便可重新執行命令。

    在「操作記錄」面板的步驟清單中，會出現一個名為「執行命令」的步驟。

  2. 選取「執行命令」步驟並按一下「另存為命令」按鈕。
  3. 輸入命令名稱並按一下「確定」。

    命令便會出現在「命令」選單中。


使用 JavaScript 行為來偵測瀏覽器和外掛程式

您可以使用行為判斷瀏覽者所用的是哪種瀏覽器，以及他們是否安裝了特別的外掛程式。如需關於行為的詳細資訊，請參閱使用 JavaScript 行為。

「檢查瀏覽器」會根據瀏覽者的瀏覽器品牌和版本，將他們傳送到不同的網頁 (請參閱檢查瀏覽器)。例如，如果瀏覽者使用的是 Netscape Navigator 4.0 或更新版本，您可能希望他們連到某個網頁，而如果瀏覽者是使用 Microsoft Internet Explorer 4.0 或更新版本，您可能希望他們連到另一個網頁，或者如果瀏覽者使用的是任何其他種類的瀏覽器，您可能希望他們停留在目前的網頁。

「檢查外掛程式」會根據瀏覽者是否安裝了指定的外掛程式，將他們傳送到不同的網頁 (請參閱檢查外掛程式)。例如，如果瀏覽者安裝了 Macromedia Shockwave，您可能希望他們連到某個網頁，如果沒有安裝，則連到另一個網頁。


在瀏覽器中預覽和測試網頁

您隨時都可以在瀏覽器中預覽文件，而不一定要先儲存文件或將文件上傳至網站伺服器。

本節包含下列主題：

  • 在瀏覽器中預覽
  • 設定預覽偏好設定
  • 在 Internet Explorer (Windows) 中預覽有效內容


在瀏覽器中預覽

您可以使用 Dreamweaver 所提供的功能，在瀏覽器中預覽和測試文件。

若要在瀏覽器中預覽和測試文件：

  1. 請執行下列其中一項作業來預覽頁面：
    • 選取「檔案＞在瀏覽器中預覽」，然後再選取任一個列出的瀏覽器。

      注意

      如果您尚未選取瀏覽器，請選取「編輯＞偏好設定」或「Dreamweaver＞偏好設定」(Macintosh)，然後再選取左邊的「在瀏覽器中預覽」類別，便可選取瀏覽器。請參閱設定「在瀏覽器中預覽」偏好設定選項。
    • 按 F12 (Windows) 或 Option+F12 (Macintosh)，便可以在主要瀏覽器中顯示目前的文件。
    • 按 Control+F12 (Windows) 或 Command+F12 (Macintosh) 會在次要瀏覽器中顯示目前的文件。
  2. 請按一下頁面中的連結並測試內容。

    在大部分的情況下，所有瀏覽器相關功能應該都可以正常運作，包括 JavaScript 行為、文件的相對和絕對連結、ActiveX 控制項和 Netscape Navigator 外掛程式 (只要您已在瀏覽器中安裝必要的外掛程式或 ActiveX 控制項)。

    如果您是在已安裝 Service Pack 2 的 Windows XP 平台上執行 Internet Explorer，瀏覽器可能會顯示訊息通知您，表示它不能讓檔案顯示有效內容。若要解決這個問題，請在檔案中加入「Mark of the Web」程式碼。如需詳細資訊，請參閱在 Internet Explorer (Windows) 中預覽有效內容。

    注意

    當您在本機瀏覽器中預覽文件時，具有網站根目錄相對路徑的連結內容並不會出現，除非您指定一個測試伺服器，或是在「編輯＞偏好設定＞在瀏覽器中預覽」中選取「使用暫存檔預覽」選項。這是因為瀏覽器無法辨識網站根目錄，但伺服器可以辨識。

    提示

    若要預覽以根目錄相對路徑所連結的內容，請將檔案放在遠端伺服器上，然後再選取「檔案＞在瀏覽器中預覽」便可檢視 (請參閱網站根目錄相對路徑)。
  3. 當您完成測試時，請關閉瀏覽器中的頁面。


設定預覽偏好設定

您可以定義最多用 20 個瀏覽器來預覽。在下列瀏覽器中預覽是不錯的做法：Internet Explorer 6.0、Netscape Navigator 7.0 和 Macintosh 專用的 Safari 瀏覽器。除了這些普遍通用的圖形化瀏覽器之外，您可能想要使用純文字的瀏覽器測試您的頁面，例如 Lynx。

若要設定或變更主要和次要瀏覽器的偏好設定：

  1. 執行下列其中一項作業開啟「在瀏覽器中預覽」選項：
    • 選擇「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後從左邊的分類清單中選取「在瀏覽器中預覽」。
    • 選擇「檔案＞在瀏覽器中預覽＞編輯瀏覽器清單」。

    這時會出現包含「在瀏覽器中預覽」選項的「偏好設定」對話方塊。

  2. 必要時進行變更。

    如需詳細資訊，請參閱設定「在瀏覽器中預覽」偏好設定選項。

  3. 按一下「確定」。


在 Internet Explorer (Windows) 中預覽有效內容

如果您已安裝 Windows XP Service Pack 2 更新，那麼在 Internet Explorer 中預覽包含有效內容的文件時，瀏覽器可能會無法正確地顯示文件。瀏覽器會顯示訊息通知您，表示它不能讓檔案顯示有效內容。若要解決這個問題，請在文件中插入「Mark of the Web」程式碼。

Internet Explorer 會封鎖任何試圖在近端電腦區域中執行的有效內容或編寫程式。因為近端電腦區域往往是惡意攻擊者的目標之一，為了加強安全性，Microsoft 便提高了這個區域的可執行內容預設限制。這時您可以利用「Mark of the Web」程式碼，便可以讓瀏覽器在其他區域執行有效內容，以這個例子來說，就是指網際網路區域。

若要在 Windows XP SP2 平台以 Internet Explorer 預覽有效內容：

  • 在 Dreamweaver 中開啟檔案，然後選取「命令＞插入 Mark of the Web」。

    Dreamweaver 便會在檔案的程式碼中，插入以下程式碼行：

    <!-- saved from url=(0014)about:internet -->

    有了這行程式碼，瀏覽器便會略過近端電腦區域，而在網際網路區域中執行有效內容。

您也可以在檔案實際上線之前，移除這個「Mark of the Web」程式碼。

若要移除「Mark of the Web」程式碼：

  1. 在 Dreamweaver 中開啟含有「Mark of the Web」程式碼的檔案。
  2. 選取「命令＞移除 Mark of the Web」。

如需詳細資訊，請參閱 Macromedia 網站上的 TechNote 19578，網址為 www.macromedia.com/go/19578。


設定下載時間和大小偏好設定

Dreamweaver 會依據頁面的整個內容來計算大小，包括所有連結的物件，如影像和外掛程式。Dreamweaver 會依據「狀態列」偏好設定中輸入的連線速度，來評估下載時間。實際下載時間會依一般 Internet 狀況而有所不同。

提示

檢查特別網頁的下載時間時，經常使用的準則是 8 秒規則。也就是說，大多數的使用者在等待載入一篇網頁時，等候時間最多不會超過 8 秒。

若要設定下載時間和大小的偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單中選取「狀態列」，

    「狀態列」偏好設定選項便會出現。

  3. 請選取用來計算下載時間的連線速度。

    美國地區的平均連結速度是 28.8。如果您是設計用於內部網路，可能希望能選取 1500 (T1 速度)。

    如需關於狀態列偏好設定的詳細資訊，請參閱設定狀態列偏好設定。

  4. 按一下「確定」。


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定頁面屬性 (文件類型) 對話方塊選項
  • 設定標題/編碼方式頁面屬性選項
  • 設定 HTML 外觀頁面屬性選項
  • 設定 CSS 外觀頁面屬性選項
  • 設定 CSS 連結頁面屬性選項
  • 設定 CSS 標題頁面屬性選項
  • 設定影像藍圖頁面屬性選項
  • 設定隱藏元素偏好設定
  • 設定「在瀏覽器中預覽」偏好設定選項


設定頁面屬性 (文件類型) 對話方塊選項

當文件未指定任何類型時，便可以利用這個對話方塊選取文件類型。您可以根據撰寫網頁時所使用的語言，為文件指定專屬的編碼方式類型，也可以針對該編碼方式類型，指定所要使用的 Unicode 標準化格式。

文件類型 (DTD) 指明了文件類型定義。例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。如需詳細資訊，請參閱關於 Dreamweaver。

文件編碼方式可指定文件中字元所用的編碼方式。如需關於文件編碼方式的詳細資訊，請參閱了解文件編碼方式。

如果選取 Unicode (UTF-8) 為文件編碼方式，便不需要再為字元實體選取編碼方式，因為 UTF-8 可以呈現所有的字元。但若選取了其他的文件編碼方式，則可能需要實體編碼方式才能夠表示某些字元。如需字元實體的詳細資訊，請參閱 www.w3.org/TR/REC-html40/sgml/entities.html。

Unicode 標準化格式只會在您選取 UTF-8 當做文件編碼方式時才會啟動。Unicode 標準化格式有四種類型。最重要的一種是「標準化格式 C」，因為這是全球資訊網中字元模型 (Character Model) 最常用的格式。為求完整起見，Macromedia 也提供其餘三種 Unicode 標準化格式。

在 Unicode 中，某些字元看起來很相似，但卻能以不同方式儲存於文件中。例如「ë」(e 母音變化) 可以表示為「e 母音變化」單一字元，也可以表示為「一般拉丁字母 e」+「組合母音變化」兩個字元。Unicode 組合字元是與前一個字元組合使用的字元，因此母音變化可能出現在「拉丁字母 e」的上面。這兩種格式的印刷結果看起來完全一樣，但是儲存至檔案的內容互不相同。

標準化程序是為了確定，能以不同格式來儲存的所有字元全部儲存成相同格式。也就是說，文件中所有的「ë」字元都儲存成單一的「e 母音變化」，或者都儲存成「e」+「組合母音變化」，所以一份文件中不致於同時出現兩種格式。

如需關於 Unicode 標準化以及可供使用的特定格式之詳細資訊，請造訪 Unicode 網站，網址是 www.unicode.org/reports/tr15。

包含 Unicode 簽名 (BOM) 讓您可以在文件中包含位元順序標記 (BOM)。BOM 是位於文字檔開頭處的 2 到 4 個位元組，用來識別檔案為 Unicode，而且若有 BOM 的話，也會指出後續位元組的位元順序。由於 UTF-8 沒有位元順序，所以加入 UTF-8 BOM 是選擇性的動作。但對於 UTF-16 和 UTF-32 而言則是必要的。

重新載入讓您以新的編碼方式重新開啟現有文件。


設定標題/編碼方式頁面屬性選項

「標題/編碼方式」頁面屬性類別可讓您根據撰寫網頁所使用的語言，指定專屬的文件編碼方式類型，以及針對該編碼方式類型，指定所要使用的 Unicode 標準化格式。

標題會指定出現在「文件」視窗和大多數瀏覽器視窗的標題列中之頁面標題。請參閱變更文件標題。

文件類型 (DTD) 指明了文件類型定義。例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。如需詳細資訊，請參閱關於 Dreamweaver。

編碼方式是用來指定文件中字元所用的編碼方式。如需關於文件編碼方式的詳細資訊，請參閱了解文件編碼方式。

Unicode 標準化格式只會在您選取 UTF-8 當做文件編碼方式時才會啟動。Unicode 標準化格式有四種類型。最重要的一種是「標準化格式 C」，因為這是全球資訊網中字元模型 (Character Model) 最常用的格式。為求完整起見，Macromedia 也提供其餘三種 Unicode 標準化格式。

在 Unicode 中，某些字元看起來很相似，但卻能以不同方式儲存於文件中。例如「ë」(e 母音變化) 可以表示為「e 母音變化」單一字元，也可以表示為「一般拉丁字母 e」+「組合母音變化」兩個字元。Unicode 組合字元是與前一個字元組合使用的字元，因此母音變化可能出現在「拉丁字母 e」的上面。這兩種格式的印刷結果看起來完全一樣，但是儲存至檔案的內容互不相同。

標準化程序是為了確定，能以不同格式來儲存的所有字元全部儲存成相同格式。也就是說，文件中所有的「ë」字元都儲存成單一的「e 母音變化」，或者都儲存成「e」+「組合母音變化」，所以一份文件中不致於同時出現兩種格式。

如需關於 Unicode 標準化以及可供使用的特定格式之詳細資訊，請造訪 Unicode 網站，網址是 www.unicode.org/reports/tr15。

包含 Unicode 簽名 (BOM) 讓您可以在文件中包含位元順序標記 (BOM)。BOM 是位於文字檔開頭處的 2 到 4 個位元組，用來識別檔案為 Unicode，而且若有 BOM 的話，也會指出後續位元組的位元順序。由於 UTF-8 沒有位元順序，所以加入 UTF-8 BOM 是選擇性的動作。但對於 UTF-16 和 UTF-32 而言則是必要的。


設定 HTML 外觀頁面屬性選項

「HTML 外觀」頁面屬性類別可讓您指定網頁的數種基本頁面版面選項。

背景影像和背景顏色會指定頁面的背景影像和背景顏色。請參閱設定背景影像或背景頁面顏色。

文字和連結可定義文字、連結、查閱過連結和作用中之連結的預設顏色 (請參閱使用顏色)。您也可以使用 CSS 樣式表來控制這些顏色 (請參閱套用類別樣式)。

左邊界 和上邊界可指定 body 標籤中頁面邊界的大小，僅適用於 Microsoft Internet Explorer。Netscape Navigator 會略過這些值，它使用「邊界寬度」和「邊界高度」來取代。為了得到最佳的跨瀏覽器結果，請提供兩種瀏覽器都適用的邊界值，而不是只提供某種瀏覽器適用的值；請填入四個邊界值，不要只填入兩個值。若要確保沒有邊界出現在任一個瀏覽器中，請將四個值皆設定為 0。Dreamweaver 在「文件」視窗中不會顯示頁面邊界；若要查看邊界，請使用「在瀏覽器中預覽」。

邊界寬度和邊界高度指定 body 標籤中的頁面邊界大小，僅適用於 Netscape Navigator。Internet Explorer 會略過這些值，它使用「左邊界」和「上方邊界」來取代。為了得到最佳的跨瀏覽器結果，請提供兩種瀏覽器都適用的邊界值，而不是只提供某種瀏覽器適用的值；請填入四個邊界值，不要只填入兩個值。若要確保兩種瀏覽器中都沒有邊界，請將四個值皆設定為 0。Dreamweaver 在「文件」視窗中不會顯示頁面邊界；請使用「在瀏覽器中預覽」來查看邊界。

相關主題

  • 關於設定頁面屬性
  • 指定 HTML 取代 CSS


設定 CSS 外觀頁面屬性選項

「CSS 外觀」頁面屬性類別可讓您指定網頁的數種基本頁面版面選項。

字體可以指定要在網頁中使用的預設字體系列。Dreamweaver 將會使用您所指定的字體系列，除非對文字元素特別設定另一種字體。

大小可以指定要在網頁中使用的預設字體大小。Dreamweaver 將會使用您所指定的字體大小，除非對文字元素特別設定另一種字體大小。

文字顏色可指定要字體呈現時的預設顏色。

背景顏色可指定頁面所使用的背景顏色。

背景影像可指定頁面的背景影像。請參閱設定背景影像或背景頁面顏色。

重複定義了背景影像在網頁中的顯示方式：

  • 選取「不重複」選項，背景影像便只會顯示一次。
  • 選取「重複」選項，便會以水平和垂直排列方式重複 (並排) 顯示背景影像。
  • 選取「水平重複」選項，會以水平排列方式顯示影像。
  • 選取「垂直重複」選項，會以垂直排列方式顯示影像。

左和右邊界可指定左側和右側頁面邊界的大小。

上方和下方邊界可指定上方和下方頁面邊界的大小。

相關主題

  • 關於設定頁面屬性
  • 指定 HTML 取代 CSS


設定 CSS 連結頁面屬性選項

「CSS 連結」頁面屬性類別可讓您定義預設字體、字體大小，以及連結、查閱過連結和作用中的連結之顏色：

字體可以指定要對連結文字使用的預設字體系列。依預設值，Dreamweaver 會使用對整個頁面所指定的字體系列，除非您指定另外的字體。

大小可以指定要對連結文字使用的預設字體大小。

連結顏色可指定要套用至連結文字的顏色。

查閱過連結可以指定要套用至查閱過連結的顏色。

滑鼠滑過時連結可以指定當滑鼠 (或游標) 停留在連結上時，要套用的顏色。

作用中的連結可以指定當滑鼠 (或游標) 按一下連結時，要套用的顏色。

底線樣式可以指定要套用至連結的底線樣式。

如果您的頁面已經定義底線連結樣式 (例如，透過外部 CSS 樣式表)，則「底線樣式」彈出式選單會預設成「不更改」選項。此選項是用於警告您已經定義了連結樣式，而且您無法更改底線連結樣式。如果您使用「頁面屬性」對話方塊來修改底線連結樣式，則 Dreamweaver 會變更之前的連結定義。

相關主題

  • 關於設定頁面屬性
  • 指定 HTML 取代 CSS


設定 CSS 標題頁面屬性選項

「CSS 標題」類別可讓您指定 CSS 頁面中標題的字體系列和字體大小：

字體可以指定要在網頁中使用的預設字體系列。Dreamweaver 將會使用您所指定的字體系列，除非對文字元素特別設定另一種字體。

標題 1 到標題 6 可指定對最多六個層次的標題標籤所使用的字體大小和顏色。

相關主題

  • 關於設定頁面屬性
  • 指定 HTML 取代 CSS


設定影像藍圖頁面屬性選項

「影像藍圖」類別可讓您插入影像檔，以做為設計頁面時的指引。

影像藍圖指定要做為複製設計的輔助之用的影像。這個影像僅供參考之用，而且當文件顯示在瀏覽器中時，並不會顯示該影像。

透明可決定影像藍圖的不透明度，從完全透明到完全不透明。

相關主題

  • 關於設定頁面屬性
  • 指定 HTML 取代 CSS


設定隱藏元素偏好設定

請使用「隱藏元素」偏好設定，指定當選取「檢視＞視覺輔助＞隱藏元素」時，可以看見哪些種類的元素。

若要變更「隱藏元素」偏好設定：

  • 選取要讓哪些元素可以看得到，再按一下「確定」。

您可以顯示或隱藏這些隱藏元素的標記：

命名錨點顯示標記文件中每個命名錨點 (a name = "") 位置的圖示。

Script 顯示文件內文中標記 JavaScript 或 VBScript 位置的圖示。在「屬性」檢視窗中選取圖示來編輯 Script，或連結至外部 Script 檔。

註解顯示標記 HTML 註解位置的圖示。在「屬性」檢視窗中選取圖示來查看註解。

斷行符號顯示標記每個斷行符號 (BR) 位置的圖示。此選項依預設是取消選取的。

用戶端影像地圖顯示標記文件中每個用戶端影像地圖位置的圖示。

內嵌樣式會顯示一個圖示，指出文件的內文區段中內嵌的 CSS 樣式之位置。如果 CSS 樣式放在文件的檔頭區段中，則它們不會出現在「文件」視窗中。

表單隱藏欄位會顯示一個圖示，標記其 type 屬性設定為 hidden 的表單欄位位置。

表單分隔符號會在表單周圍顯示邊框，讓您看到什麼位置可以插入表單元素。邊框顯示 form 標籤的範圍，所以在該邊框內的任何表單元素都會適當包含在 form 標籤內。

圖層的錨點會顯示標記定義圖層的程式碼位置之圖示。圖層本身可以位於頁面的任何位置 (圖層不是隱藏元素；只有定義圖層的程式碼是隱藏的)。選取圖示來選取圖層；然後您就可以看到圖層的內容，即使圖層被標記為隱藏也一樣看得到。

對齊元素的錨點會顯示一個圖示，指出接受 align 屬性的元素之 HTML 程式碼的位置。這些包括影像、表格、ActiveX 物件、外掛程式和 Applet。在有些情況下，元素的程式碼可能會與可見的物件分隔開來。

視覺伺服器標記標籤和非視覺伺服器標記標籤顯示伺服器標記標籤 (如 Active Server Pages 標籤和 ColdFusion 標籤) 的位置，它們的內容無法顯示在「文件」視窗中。

相關主題

  • 顯示和隱藏隱藏元素


設定「在瀏覽器中預覽」偏好設定選項

這個對話方塊是用來設定「在瀏覽器中預覽」類別的使用者偏好設定。這個對話方塊會顯示目前已定義的主要和次要瀏覽器及其設定值。

若要設定瀏覽器預覽的偏好設定：

  1. 若要將瀏覽器加入清單中，請按一下加號 (+) 按鈕，完成「增加瀏覽器」對話方塊，然後再按一下「確定」。

    新的瀏覽器名稱會出現在清單中。

  2. 若要從清單中刪除瀏覽器，請選取瀏覽器，然後再按一下減號 (-) 按鈕。

    瀏覽器名稱就會從清單中消失。

  3. 若要變更選取瀏覽器的設定，請按一下「編輯」按鈕，在「編輯瀏覽器」對話方塊中進行變更，然後按一下「確定」。
  4. 選取「主要瀏覽器」或「次要瀏覽器」選項，指定選取的瀏覽器是主要或次要的瀏覽器。

    按 F12 (Windows) 或 Option+F12 (Macintosh) 可開啟主要瀏覽器；按 Control+F12 (Windows) 或 Command+F12 (Macintosh) 可開啟次要瀏覽器。

  5. 選取「使用暫存檔預覽」選項，建立供預覽和伺服器除錯之用的暫存檔。

    如果您要直接更新文件，請取消選取這個選項。

相關主題

  • 在瀏覽器中預覽和測試網頁


插入和格式化文字

Macromedia Dreamweaver 8 提供了幾種方式，讓您能在文件中新增文字並加以格式化。您可以插入文字、設定字體類型、大小、顏色和對齊屬性，以及使用「階層式樣式表」(CSS) 來建立及套用自己自訂的樣式。

本章包含下列主題：

關於 Dreamweaver 中的文字格式化

插入文字

格式化段落和文件結構

格式化文字

使用階層式樣式表來格式化文字

拼字檢查

搜尋和取代文字


關於 Dreamweaver 中的文字格式化

Dreamweaver 提供了數種工具和命令，能讓您使用 CSS 或 HTML 來格式化文字。

本節包含下列主題：

  • 關於插入文字
  • 有關格式化文字
  • 了解階層式樣式表
  • 關於衝突的 CSS 規則
  • 速記 CSS 屬性
  • 「屬性」檢視窗和文字格式化
  • 關於 CSS 樣式面板


關於插入文字

Dreamweaver 讓您可以直接將文字鍵入網頁中、從另一份文件複製及貼上文字，或是從另一個應用程式拖曳文字，便能將文字新增到頁面中。網路專業人員會收到文字內容需要合併到網頁的典型文件類型，包括 ASCII 文字檔、Rich Text Format (RTF) 檔案及 Microsoft Office 文件。Dreamweaver 可讓您從上述任何一種文件類型擷取文字，並將其併入網頁中。

相關主題

  • 插入文字
  • 新增文字到文件
  • 匯入表格式資料文件
  • 匯入 Microsoft Office 文件 (僅適用於 Windows)


有關格式化文字

在 Dreamweaver 中格式化文字，就像是使用標準的文書處理器。您可以設定文字區塊的預設格式化樣式 (段落、標題 1、標題 2 等)、變更所選文字的字體、大小、顏色和對齊方式，或是套用文字樣式，如粗體、斜體、程式碼 (固定寬度) 和底線。

依預設值，Dreamweaver 會使用「階層式樣式表」(CSS) 來格式化文字。對於網站設計者及開發人員來說，CSS 對網頁設計提供更多的控制，同時又能提供增強的輔助功能及降低檔案大小。當您使用 Dreamweaver 的格式化命令來格式化和對齊文字時，CSS 規則便已嵌入目前的文件內。如此您便能更輕易地重複使用現有的樣式，並可為您建立的樣式命名。CSS 已變成格式化文字和配置網頁時大家喜用的方法。

如果喜歡的話，您可以選擇使用 HTML 標記標籤來格式化及對齊網頁中的文字。如果您需要使用 HTML 標籤來取代 CSS，您必須變更 Dreamweaver 預設的文字格式化偏好設定 (如需詳細資訊，請參閱指定 HTML 取代 CSS)。

使用 CSS 是控制網頁樣式的方法，而不需與其架構妥協。藉由將視覺設計元素 (字體、顏色、邊界等) 從網頁的結構邏輯中分離出來，CSS 便能同時將視覺和排版控制提供給網頁設計者，不需犧牲內容的完整性。此外，從單一明確的程式碼區塊中定義排版設計和頁面版面，不需依靠影像地圖、font 標籤、表格及間隔影像 GIF，便能達到更快速的下載、有效率的網站維護，並提供可控制多個網頁之設計屬性的單一位置。

CSS 會在特定類別中定義所有文字的格式，或針對特定 HTML 標籤 (例如 h1、h2、p 或 li) 重新定義格式。

您可以將使用 CSS 建立的樣式直接儲存於文件中 (使用「屬性」檢視窗設定文字樣式時的預設行為)，如果需要更有效率和彈性的方式，您可以將樣式儲存於外部樣式表中。如果您將外部樣式表附加到好幾個網頁，您在這個樣式表上所做的變更都會自動套用在這些網頁。若要存取頁面的所有 CSS 規則，請使用「CSS 樣式」面板 (「視窗＞CSS 樣式」)。

如需有關使用文字「屬性」檢視窗來套用 HTML 或 CSS 的詳細資訊，請參閱設定文字屬性選項。如需有關使用「CSS 樣式」面板來套用樣式的詳細資訊，請參閱「使用 Dreamweaver」中的使用 CSS 樣式面板。

注意

您可以將 CSS 和 HTML 3.2 格式化合併於同一個頁面內使用。格式化會以階層方式進行套用：HTML 3.2 格式化會覆寫由外部 CSS 樣式表所套用的格式化，而文件內嵌的 CSS 會覆寫外部 CSS。如需詳細資訊，請參閱使用階層式樣式表來格式化文字。

相關主題

  • 插入文字
  • 格式化文字


了解階層式樣式表

階層式樣式表 (CSS) 是控制網頁內容外觀的格式規則集合。當您使用 CSS 來格式化網頁時，您會將內容和呈現方式分開。網頁的內容 (HTML 程式碼) 存在於 HTML 檔案本身，而 CSS 規則在另一個檔案 (外部樣式表) 或是 HTML 文件的另一部份 (通常是 head 區段) 中定義程式碼的呈現方式。使用 CSS 可以讓您對網頁的確切外觀 (從版面的精確位置到特定的字體和樣式) 有相當大的彈性和控制。

CSS 能讓您控制許多 HTML 無法單獨控制的屬性。例如，您可以為選取的文字指定不同的字體大小和單位 (像素、點等等)。使用 CSS 以像素為單位設定字體大小，也可以確保頁面的版面和外觀在多種瀏覽器中具有更為一致的處理方式。

除了文字格式以外，您還可以使用 CSS 控制網頁中區塊層級元素的格式和定位。例如，您可以設定區塊層級元素的邊界和邊框、環繞於其他文字的浮動文字等等。

CSS 格式規則是由兩個部分構成：選取器和宣告。選取器是辨認有格式化之元素的名詞 (例如 P、H1、類別名稱或 ID)，而宣告則是定義樣式元素為何。在以下範例中，H1 是選取器，而在大括弧 ({}) 中的所有內容都算是宣告：

H1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight: bold;
}

宣告是由兩個部分構成：屬性 (例如 font-family) 和值 (例如 Helvetica)。在上述的 CSS 規則中，已經為 H1 標籤建立特定的樣式：所有連結到這個樣式的 H1 標籤，它們的文字大小將會是 16 像素，而且字體為粗體的 Helvetica。

階層式一詞是指您可以套用多個樣式表到同一個元素。例如，您可以建立一個 CSS 規則以套用顏色，然後建立另一個以套用邊界，最後將這兩個 CSS 規則套用到網頁上同一段文字。而定義的樣式會「重疊」於網頁的元素下，最後建立您要的設計。

CSS 的主要優點是易於更新；當您在其中一個位置更新 CSS 規則時，使用這個定義的樣式之所有文件格式都會自動更新為新的樣式。

您可以在 Dreamweaver 中定義下列樣式類型：

  • 自訂 CSS 規則，也稱為類別樣式，可以讓您套用樣式屬性到任何文字範圍或區塊 (請參閱套用類別樣式)。
  • HTML 標籤樣式會重新定義特定標籤 (例如 h1) 的格式。當您建立或變更 h1 標籤的 CSS 樣式時，所有以 h1 標籤格式化的文字都會立即更新。
  • CSS 選取器樣式 (進階樣式) 會重新定義特定元素組合或其他 CSS 所允許之選取器形式 (例如，只要 h2 標題出現在表格儲存格之內，選取器 td h2 就可以使用) 的格式。進階樣式也會重新定義包含特定 id 屬性之標籤的格式 (例如，由 #myStyle 定義的樣式會套用至內含 id="myStyle" 屬性-值配對的所有標籤)。

CSS 規則可以存放在下列位置：

外部 CSS 樣式表是 CSS 規則的集合，儲存在分開的外部 CSS (.css) 檔案中 (並非 HTML 檔案)。該檔案使用文件 head 區段中的連結，連至一或多個網站的頁面。

內部 (或內嵌) CSS 樣式表是 CSS 規則的集合，其包括在 HTML 文件 head 部份的 style 標籤中。

行內樣式是在整份 HTML 文件內的特定標籤實體中定義。

現有文件中定義的樣式只要能符合 CSS 樣式的尺標，Dreamweaver 就能夠辨認。

提示

若要顯示 Dreamweaver 所附的 O'Reilly CSS 參考手冊，請選取「說明＞參考」，然後從「參考」面板的彈出式選單選取 O'Reilly CSS Reference。

手動 HTML 格式可能會覆寫使用 CSS 套用的格式。若要讓 CSS 規則控制段落的格式，您必須移除所有的手動 HTML 格式。

Dreamweaver 會在「文件」視窗中呈現大部分您直接套用的樣式屬性。您也可以在瀏覽器視窗中預覽文件，查看樣式套用的情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape、Opera 和 Apple Safari 中的呈現方式會有所不同，而且有些目前已沒有任何瀏覽器支援。


關於衝突的 CSS 規則

當您套用兩個以上 CSS 規則到相同的文字時，這些規則有可能會發生衝突，產生無法預期的結果。瀏覽器會以下列方式套用 CSS 規則：

  • 如果兩種規則套用到相同的文字，除非有特定的屬性衝突，否則瀏覽器將會顯示這兩種規則的所有屬性。例如，一種規則可能指定藍色為文字顏色，而另一種規則則指定紅色為文字顏色。
  • 如果套用到相同文字的兩種規則發生屬性衝突，瀏覽器會顯示最內層規則 (最接近文字本身的規則) 的屬性。因此，如果文字元素同時具有會影響它的外部樣式表和行內樣式，則會套用行內樣式。
  • 如果發生直接衝突，自訂 CSS 規則 (以 class 屬性套用的規則) 的屬性會覆寫 HTML 標籤樣式的屬性。

在下面的範例中，針對 h1 定義的樣式可能會指定所有 h1 段落的字體、大小和顏色，但是套用到這個段落的自訂 CSS 規則 .Blue 會覆寫 h1 樣式中設定的顏色。第二個自訂 CSS 規則 .Red 又會覆寫 .Blue，因為它是在 .Blue 樣式的內層。

<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span>
Now we're back to the .Blue style.</span></h1>


速記 CSS 屬性

CSS 規格允許使用已知的速記 CSS 縮寫語法建立樣式。速記 CSS 能讓您使用單一屬性標籤指定幾種屬性的值。例如，font 屬性讓您能在單一語法中設定 font-style、font-variant、font-weight、font-size、line-height，和 font-family 屬性。

當使用速記 CSS 時要注意的關鍵問題是，速記 CSS 屬性忽略的值會指定為其預設值。當兩個或更多 CSS 規則指定到相同的標籤時，這可能會造成頁面顯示不正確。

例如，下列顯示的 H1 標籤使用普通書寫的 CSS 語法。請注意 font-variant、font-stretch、font-size-adjust，和 font-style 屬性已指定為其預設值。

H1 {

font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none

}

重新撰寫為單一語法，速記屬性，相同標籤以下列方式呈現：

H1 { font: bold 16pt/18pt Arial }

當使用速記標記法撰寫時，忽略的值會自動指定為其預設值。因此，上述的速記範例忽略了 font-variant、font-style、font-stretch，和 font-size-adjust 標籤。

如果您同時使用 CSS 語法的縮寫與長表單，在一個以上的位置定義樣式 (例如，同時內嵌在 HTML 頁面和從外部樣式表匯入)，請注意忽略的屬性可能會覆寫 (或重疊顯示) 另一方明確設定的屬性。

基於此原因，Dreamweaver 預設使用 CSS 標記法的長表單。這樣可避免速記規則覆寫普通書寫規則可能造成的問題。如果您在 Dreamweaver 中開啟使用速記 CSS 標記法編碼的網頁時，請注意 Dreamweaver 將會使用普通書寫形式建立任何新增 CSS 規則。您可以藉由變更「偏好設定」對話方塊的「CSS 樣式」類別中之 CSS 編輯偏好設定，來指定 Dreamweaver 要如何建立與編輯 CSS 規則 (Windows 中「編輯＞偏好設定」，Macintosh 的「Dreamweaver＞偏好設定」)。

注意

「CSS 樣式」面板只能使用普通書寫標記法建立規則。如果您使用「CSS 樣式」面板建立網頁或 CSS 樣式表，請注意手動撰寫的速記 CSS 規則，可能會導致速記屬性覆寫使用普通書寫形式建立的規則。基於這個原因，請使用普通書寫 CSS 標記法建立您的樣式。

相關主題

  • 關於衝突的 CSS 規則
  • 關於 CSS 樣式面板


「屬性」檢視窗和文字格式化

文字「屬性」檢視窗可讓您格式化目前所選取的文字。當您使用「屬性」檢視窗來格式化文字時，Dreamweaver 會追蹤您對每一個文字元素所指定的格式屬性，並使用命名慣例來對每個元素指定標籤：樣式 1、樣式 2、樣式 3、樣式 n。如果您為兩個以上的文字元素指定相同的格式化屬性，Dreamweaver 便會將這些元素標示成相同的標題，以減少多餘的樣式名稱。Dreamweaver 套用至指定內文的標籤，之後可以使用「樣式」彈出式選單進行套用，能讓您建立頁面中的樣式資料庫，並只要藉由選取頁面中的文字元素，然後從「樣式」彈出式選單選取樣式，便能套用這些相同的樣式。您可以使用更有意義的標籤重新命名樣式，例如 Heading1、Heading2、Body 和 TableBody。

「樣式」彈出式選單會在頁面中顯示兩種樣式名稱，以及樣式屬性的預覽。預覽中顯示的屬性為字體系列、字體大小、字體粗細、文字顏色和背景色。

相關主題

  • 格式化段落
  • 設定和變更字體和樣式
  • 重新命名樣式
  • 使用階層式樣式表來格式化文字


關於 CSS 樣式面板

CSS 樣式面板讓您追蹤影響目前選取之頁面元素的 CSS 規則和屬性 (「正在」模式)，或影響整份文件的規則和屬性 (「全部」模式)。「CSS 樣式」面板上方有一個切換按鈕可以讓您切換這兩種模式。「CSS 樣式」面板也可以讓您在「全部」和「正在」模式中修改 CSS 屬性。

本節包含下列主題：

  • 目前模式中的 CSS 樣式面板
  • 全部模式中的 CSS 樣式面板


目前模式中的 CSS 樣式面板

在「正在」模式中，「CSS 樣式」面板會顯示三種窗格：顯示文件中目前選取範圍之 CSS 屬性的「選取範圍摘要」窗格、顯示所選屬性位置 (或根據選取範圍顯示所選標籤的規則重疊顯示) 的「規則」窗格，以及可以讓您編輯定義選取範圍的規則之 CSS 屬性的「屬性」窗格。

您可以拖曳窗格之間的邊框來調整任何窗格的大小。

「選取範圍摘要」窗格會針對目前在作用中文件所選的項目，顯示其 CSS 屬性摘要。而摘要會顯示直接套用到選取範圍的所有規則之屬性。不過，只會顯示設定屬性。

例如，以下規則會建立類別樣式和標籤 (此處的段落) 樣式：

.foo{
color: green;
font-family: ‘Arial’;
}

P{
font-family: ‘serif’;
font-size: 12px;
}

當您在「文件」視窗以 .foo 的類別樣式選取段落文字時，「選取範圍摘要」窗格會顯示這兩種規則的相關屬性，因為這兩種規則都套用到選取範圍中。在這種情況下，「選取範圍摘要」窗格會列出下列屬性：

font-size: 12px
font-family: ‘Arial’
color: green

「選取範圍摘要」窗格會以明確性遞增順序排列屬性。在上述範例中，標籤樣式定義字體大小，而類別樣式則定義字體系列和顏色。(由類別樣式定義的字體系列會覆寫標籤樣式定義的字體系列，因為類別選取器的明確性比標籤選取器更高。如需有關 CSS 明確性的詳細資訊，請參閱 www.w3.org/TR/CSS2/cascade.html)。

「規則」窗格會顯示兩種不同的檢視 (「關於」檢視或「規則」檢視)，端視您的選取範圍而定。在「關於」檢視 (預設的檢視方式) 中，窗格會顯示定義所選 CSS 屬性之規則的名稱，以及含有規則之檔案的名稱。在「規則」檢視中，窗格會顯示直接或間接套用到目前選取範圍之規則的重疊 (也就是階層)。(規則直接套用的標籤會顯示在右邊欄位中)。您可以藉由按一下「規則」窗格右上角的「顯示所選屬性的相關資訊」和「顯示所選標籤的規則重疊顯示」按鈕，切換這兩種檢視方式。

當您在「選取範圍摘要」窗格中選取屬性時，定義規則的所有屬性都會出現在「屬性」窗格中。(如果選取「規則」檢視，則也會選取定義規則)。例如，如果您有一條名為 .maintext 的規則會定義字體系列、字體大小和顏色，則在「選取範圍摘要」窗格中選取任何一種屬性，將會在「屬性」窗格中顯示由 .maintext 規則定義的所有屬性，以及在「規則」窗格中所選的 .maintext 規則。(此外，如果在「規則」窗格中選取任何一種規則，則會在「屬性」窗格中顯示那個規則的屬性。)接著，不論是已內嵌於目前文件中，或是使用附加樣式表連結，您都可以使用「屬性」窗格快速修改 CSS。依預設值，「屬性」窗格只會顯示之前已經設定的屬性，並且按字母順序排列這些屬性。

您可以選擇在其他兩種檢視中顯示「屬性」窗格。「類別」檢視會顯示按類別 (例如「字體」、「背景」、「區塊」、「邊框」等) 分類的屬性，並且將設定屬性放置於每種類別的上方，並以藍色文字顯示。「清單」檢視會按字母順序顯示所有可用屬性，且同樣將設定屬性排序到上方，以藍色文字顯示。若要切換檢視，請按一下「屬性」窗格左下角的「顯示類別檢視」、「顯示清單檢視」或「僅顯示設定屬性」等按鈕。

在所有檢視中，設定屬性都會顯示為藍色；與選項不相關的屬性則會以紅色刪除線顯示。當滑鼠游標停留在不相關的規則上時，會顯示訊息說明為何此屬性是不相關的。通常因為屬性已被覆寫或是並非繼承的屬性，屬性才會不相關。

您在「屬性」窗格中所作的任何變更都會立即套用，讓您在變更的同時即可預覽您的工作。

相關主題

  • 全部模式中的 CSS 樣式面板
  • 使用 CSS 樣式面板


全部模式中的 CSS 樣式面板

在「全部」模式中，「CSS 樣式」面板會顯示兩種窗格：「所有規則」窗格 (上方)，以及「屬性」窗格 (下方)。「所有規則」窗格會顯示在目前文件中定義的規則清單，以及在所有附加於目前文件的樣式表中定義的規則。而「屬性」窗格能讓您編輯任何在「所有規則」窗格中所選規則的 CSS 屬性。

您可以拖曳窗格之間的邊框來調整窗格大小。

當您在「所有規則」窗格中選取規則時，所有在此規則中定義的屬性都會顯示在「屬性」窗格中。接著，不論是已內嵌於目前文件中，或是使用附加樣式表連結，您都可以使用「屬性」窗格快速修改 CSS。依預設值，「屬性」窗格只會顯示之前已經設定的屬性，並且按字母順序排列這些屬性。

您可以選擇在其他兩種檢視中顯示屬性。「類別」檢視會顯示按類別 (「字體」、「背景」、「區塊」、「邊框」等) 分類的屬性，並且將設定屬性放置於每種類別的上方。「清單」檢視會顯示按字母順序排列的所有可用屬性，且同樣將設定屬性排序到上方。若要切換檢視，請按一下「屬性」窗格左下角的「顯示類別檢視」、「顯示清單檢視」或「僅顯示設定屬性」等按鈕。在所有檢視中，設定屬性都會顯示為藍色。

您在「屬性」窗格中所作的任何變更都會立即套用，讓您在變更的同時即可預覽您的工作。

相關主題

  • 目前模式中的 CSS 樣式面板
  • 使用 CSS 樣式面板


插入文字

Dreamweaver 會利用直接鍵入、複製及貼上或是匯入的方式，讓您輕鬆地將文字插入文件中。您也可以在文字的字元和行之間插入額外的空格。

相關主題

  • 新增文字到文件
  • 匯入表格式資料文件
  • 匯入 Microsoft Office 文件 (僅適用於 Windows)
  • 格式化段落和文件結構
  • 加入段落間距


新增文字到文件

若要將文字新增到 Dreamweaver 文件，您可以直接在 Dreamweaver 文件視窗中鍵入文字，或是用剪下及貼上的方法。您也可以從其他文件匯入文字 (請參閱匯入表格式資料文件和匯入 Microsoft Office 文件 (僅適用於 Windows))。

如果您要將文字貼到 Dreamweaver 文件中，您可以使用「貼上」或「貼上特殊效果」命令。「貼上特殊效果」命令讓您能以不同的方式指定貼上文字的格式。例如，如果您要將文字從格式化的 Microsoft Word 文件貼到 Dreamweaver 文件中，但是想要去除所有的格式，以便套用您自己的 CSS 樣式表到貼上的文字，您可以在 Word 中選取文字、將文字複製到剪貼簿，然後使用「貼上特殊效果」命令選取能讓您只貼上文字的選項。

此外，如果使用「貼上」命令貼上其他應用程式的文字，您可以設定貼上偏好設定為預設選項。如需詳細資訊，請參閱設定複製/貼上偏好設定。

若要新增文字到文件，請執行下列其中一項作業：

  • 直接在「文件」視窗中輸入文字。
  • 從其他應用程式複製文字、切換到 Dreamweaver、將插入點置於「文件」視窗的「設計」檢視中，然後再選取「編輯＞貼上」或「編輯＞貼上特殊效果」。

    當您選取「編輯＞貼上特殊效果」時，會出現對話方塊讓您可以使用數種貼上格式選項。如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

    您也可以利用下列的鍵盤快速鍵來貼上文字：

    貼上選項

    鍵盤快速鍵

    貼上

    Control + V (Windows)

    Command + V (Macintosh)

    貼上特殊效果

    Control + Shift + V (Windows)

    Command + Shift + V (Macintosh)

    注意

    Control + V (Windows) 和 Command + V (Macintosh) 只能在「程式碼檢視」中貼上文字 (無格式)。


設定複製/貼上偏好設定

使用「編輯＞貼上」來貼上其他應用程式的文字時，您可以設定特殊的貼上偏好設定為預設選項。例如，如果您總是要將文字貼成純文字，或含有基本格式的文字，您可以在「複製/貼上偏好設定」對話方塊中設定預設選項。

注意

在「複製/貼上偏好設定」對話方塊中設定的偏好設定，只會套用至貼到「設計檢視」中的資料。

若要設定複製與貼上的預設選項：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 按一下「複製/貼上」類別。
  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請按一下「說明」按鈕。


匯入表格式資料文件

您可以將表格式資料匯入文件，方法是先將這些檔案 (如 Microsoft Excel 檔或資料庫檔案) 儲存成分隔符號的文字檔。

如需關於匯入和格式化表格資料的詳細資訊，請參閱匯入和匯出表格式資料。如需關於從 Microsoft Word HTML 文件匯入文字的詳細資訊，請參閱開啟現有文件。

您也可以將 Excel 檔的內容匯入網頁中 (請參閱匯入 Microsoft Office 文件 (僅適用於 Windows))，即可將 Microsoft Excel 文件的文字新增到 Dreamweaver 文件。

若要匯入表格式資料：

  1. 選取「檔案＞匯入＞匯入表格式資料」，或選取「插入＞表格物件＞匯入表格式資料」。

    「匯入表格」對話方塊就會出現。

  2. 以瀏覽方式找出您要的檔案，或在文字方塊中輸入名稱。
  3. 選取檔案被儲存為分隔符號格式文字時所使用的分格符號。選項包括「Tab 字元分隔」、「逗號分隔」、「冒號分隔」、「分號分隔」和「其他」。

    如果您選取「其他」，選項旁邊就會出現空白欄位。請輸入當做分隔符號的字元。

  4. 使用其餘的選項來格式化或定義資料要匯入的表格。
  5. 按一下「確定」。


匯入 Microsoft Office 文件 (僅適用於 Windows)

您可以將 Microsoft Word 或 Excel 文件的完整內容插入到新的或現有的網頁中。當您從 Word 或 Excel 文件匯入內容時，Dreamweaver 會接收已轉換的 HTML，然後插入到您的網頁中。在 Dreamweaver 接收已轉換的 HTML 後，檔案大小必須小於 300K。

提示

除了匯入檔案的完整內容以外，您也可以貼上 Word 文件的一部分並保留格式。如需詳細資訊，請參閱新增文字到文件。

注意

如果您使用的是 Microsoft Office 97，則無法匯入 Word 或 Excel 文件的內容；您必須將連結插入文件中。如需相關資訊，請參閱插入 Word 或 Excel 文件的連結。

若要將 Word 或 Excel 文件插入新的或現有的網頁中：

  1. 開啟您要插入 Word 或 Excel 檔案的網頁。
  2. 請確定此時您是在「設計」檢視中。否則，請按一下「設計」檢視按鈕。
  3. 請執行下列其中一項作業以選取檔案：
    • 將檔案從目前的位置拖曳到您要此內容出現的頁面中。「插入文件」對話方塊出現時，請設定選項然後按一下「確定」。如需詳細資訊，請按一下對話方塊中的「說明」按鈕。
    • 選取「檔案＞匯入＞Word 文件」，或「檔案＞匯入＞Excel 文件」。在「匯入文件」對話方塊中，請瀏覽您要新增的檔案、在對話方塊的底部選取格式選項，然後按一下「開啟」。

      格式選項如下：

      只有文字讓您插入未格式化的文字。如果原始文字已經格式化，所有格式都會移除。

      具有結構的文字讓您插入保留結構的文字，但是不保留基本格式。例如，您可以貼上文字並且保留段落、清單和表格的結構，但是不保留粗體、斜體和其他格式。

      具有結構與基本格式的文字讓您同時插入結構化和簡單 HTML 格式化的文字 (例如段落和表格，以及使用 b、i、u、strong、em、hr、abbr 或 acronym 標籤格式化的文字)。

      具有結構與完整格式的文字讓您插入保留所有結構、HTML 格式和 CSS 樣式的文字。

      清理 Word 段落間距讓您在貼上文字時清除段落之間的額外間距 (如果已選取「具有結構的文字」或「基本格式」)。

    Word 或 Excel 文件的內容便會出現在網頁中。

相關主題

  • 插入 Word 或 Excel 文件的連結


插入 Word 或 Excel 文件的連結

您可以將 Microsoft Word 或 Excel 文件的連結插入現有的頁面中。

若要建立 Word 或 Excel 文件的連結：

  1. 開啟您希望該連結出現的頁面。
  2. 將檔案從目前的位置拖曳到 Dreamweaver 頁面中，並放置在您要的位置。

    「插入文件」對話方塊便會出現。

  3. 選取「建立連結」，然後按一下「確定」。
  4. 如果您要連結的文件是位於網站根資料夾之外，則 Dreamweaver 會提示您將該文件複製到網站的根目錄。

    透過將文件複製到網站的根資料夾，即可確定在發佈此網站時可以提供該文件。

  5. 當您上傳網頁到網站伺服器時，請確定也上傳 Word 或 Excel 檔。

網頁現在會包含 Word 或 Excel 文件的連結。連結文字是連結檔的名稱；若要變更連結文字，請參閱管理連結。


格式化段落和文件結構

Dreamweaver 支援所有在頁面及物件格式化中使用的網路標準。本節描述如何格式化段落，以及如何插入水平線和日期。

相關主題

  • 設定頁面屬性
  • 格式化段落
  • 對齊文字
  • 縮排文字
  • 加入段落間距
  • 使用水平線
  • 插入日期


格式化段落

請使用「屬性」檢視窗中的「格式」彈出式選單，或「文字＞段落格式」子選單，套用標準段落和標題標籤。

若要套用段落或標題標籤：

  1. 將插入點置於段落中，或在段落中選取一些文字。
  2. 使用「文字＞段落格式」子選單或「屬性」檢視窗中的「格式」彈出式選單，選取選項：
    • 選取段落格式 (例如，標題 1、標題 2、預先格式化的文字等)。與選取樣式關聯的 HTML 標籤 (例如，與標題 1 關聯的 h1、與標題 2 關聯的 h2、與預先格式化的文字關聯的 pre 等等) 就會套用到整個段落。
    • 選取「無」以移除段落格式。

當您將標題標籤套用到段落時，Dreamweaver 會自動將下一行文字新增為標準段落。若要變更這項設定，請選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後在「一般」類別中，確定已取消選取「編輯選項」下的「在標題後切換為一般段落」。

相關主題

  • 設定文字屬性選項
  • 定義 CSS 類型屬性


對齊文字

您可以使用「屬性」檢視窗或「文字＞對齊」子選單，對齊頁面上的文字。您可以使用「文字＞對齊＞置中對齊」命令，將頁面中的任何元素置中對齊。

若要對齊文字：

  1. 選取您要對齊的文字，或將指標插入文字的開頭。
  2. 按一下「屬性」檢視窗中的對齊選項 (「靠左對齊」、「靠右對齊」或「置中對齊」)，或選取「文字＞對齊」再選取對齊命令。

若要讓元素置中對齊：

  1. 選取您要置中對齊的元素 (影像、外掛程式、表格或其他頁面元素)。
  2. 選取「文字＞對齊＞置中對齊」。

    注意

    您可以對齊並置中整個文字區塊，不能對齊或置中標題或段落的一部分。


縮排文字

請使用「縮排」命令將 blockquote HTML 標籤套用到文字段落，讓文字在頁面的兩邊縮排。

若要縮排文字和移除縮排：

  1. 將插入點置於您要縮排的段落中。
  2. 按一下「屬性」檢視窗中的「縮排」或「凸排」按鈕，選取「文字＞縮排」或「文字＞凸排」，或從快速選單中選取「清單＞縮排」或「清單＞凸排」。

    注意

    您可以套用多重縮排到段落。每選取這個命令一次，文字就會從文件的兩邊再縮排一次。


加入段落間距

Dreamweaver 的運作方式和許多文字處理應用程式類似：按 Enter (Windows) 或 Return (Macintosh) 就可以建立新段落。網頁瀏覽器會自動在段落之間插入間隔的空白行。您可以在段落之間插入斷行符號，加入單行間距。

若要新增段落標記：

  • 按 Enter (Windows) 或 Return (Macintosh)。

若要新增斷行，請執行下列其中一項作業：

  • 按 Shift + Enter (Windows) 或 Shift + Return (Macintosh)。
  • 在「插入」列的「文字」類別中，選取「字元」，然後按一下「斷行」圖示。
  • 選取「插入＞HTML＞特殊字元＞斷行」。


使用水平線

水平線對於組織資訊非常有用。在頁面上，您可以用一條或多條線，以視覺的方式來分隔文字和物件。

若要建立水平線：

  1. 在「文件」視窗中，將插入點置於您要插入水平線的地方。
  2. 請執行下列其中一項作業：
    • 選取「插入＞HTML＞水平線」。
    • 在「插入」列的「HTML」類別中，按一下「水平線」按鈕。

若要修改水平線：

  1. 在「文件」視窗中，選取水平線。
  2. 選取「視窗＞屬性」，以開啟「屬性」檢視窗，再依需要修改屬性。

    W 和 H 是以像素為單位或以頁面大小的百分比，指定水平線的寬度和高度。

    對齊指定水平線的對齊方式 (預設、靠左對齊、置中對齊或靠右對齊)。這項設定只適用於水平線寬度小於瀏覽器視窗寬度的情況。

    立體效果指定繪製的水平線要不要陰影。取消選取這個選項將會以單一顏色繪製水平線。


建立項目清單和編號清單

您可以在「文件」視窗中從現有的文字或輸入的新文字，建立編號 (有順序) 清單、項目 (無順序) 清單和定義清單。

「定義」清單不使用類似項目點或編號的開頭字元，常使用於詞彙或描述。這些清單也可以是巢狀結構。巢狀結構清單就是在清單中還有其他清單。例如，您可以將編號清單或項目清單，以巢狀結構置於另一個編號清單內。

如需有關設定整個清單或特定清單項目的特定清單類型和其他清單選項 (例如，在編號清單中重設編號或使用羅馬數字，或設定方形項目符號) 的詳細資訊，請參閱設定清單屬性對話方塊選項。

若要建立新清單：

  1. 在 Dreamweaver 文件中，將插入點放在您要新增清單的地方，然後執行下列其中一項作業：
    • 按一下「屬性」檢視窗中的「項目清單」或「編號清單」按鈕。
    • 選取「文字＞清單」，選取想要的清單類型 (「項目清單」、「編號清單」或「定義清單」)。

    指定之清單項目的開頭字元便會出現在「文件」視窗中。

  2. 輸入清單項目文字，然後按 Enter (Windows) 或 Return (Macintosh) 即可建立另一個清單項目。
  3. 若要結束這個清單，請按兩次 Enter (Windows) 或按兩次 Return (Macintosh)。

若要使用現有文字建立清單：

  1. 選取要放到清單中的連續段落。
  2. 按一下「屬性」檢視窗中的「項目清單」或「編號清單」按鈕，或選取「文字＞清單」並選取想要的清單類型 (「項目清單」、「編號清單」或「定義清單」)。

若要建立巢狀結構清單：

  1. 選取您要建立為巢狀結構的清單項目。
  2. 按一下「屬性」檢視窗中的「縮排」按鈕，或選取「文字＞縮排」。

    Dreamweaver 便會縮排文字，並且用原始清單的 HTML 屬性建立另一個清單。

  3. 請按照上述使用的相同程序，將新的清單類型或樣式套用到縮排的文字。


格式化文字

您可以將文字格式化套用至一個字母，或整個網站的文字段落和區塊。

相關主題

  • 設定和變更字體和樣式
  • 修改字體組合
  • 變更文字顏色
  • 插入日期
  • 插入特殊字元
  • 在字元之間加入空白
  • 建立新的 CSS 規則


設定和變更字體和樣式

請使用「屬性」檢視窗中的選項或「文字」選單，設定或變更選取文字的字體特性。您可以設定字體類型、樣式 (例如粗體或斜體) 和大小。

若要設定或變更字體特性：

  1. 選取文字。如果沒有選取文字，變更會套用到您接下來輸入的文字。
  2. 選取下列選項：
    • 若要變更字體，請從「屬性」檢視窗或「文字＞字體」子選單選取字體組合。

      選取「預設」移除先前套用的字體，「預設」會對選取的文字套用預設字體 (瀏覽器的預設字體，或是在 CSS 樣式表中指定給這個標籤的字體)。

    • 若要變更字體樣式，請按一下「屬性」檢視窗中的「粗體」或「斜體」，或從「文字＞樣式」子選單中選取字體樣式 (粗體、斜體、底線等)。

      注意

      當您使用「屬性」檢視窗套用粗體或斜體樣式時，Dreamweaver 會自動個別套用 <strong> 或 <em> 標籤。如果您設計的頁面，是針對擁有 3.0 或更舊版本瀏覽器的瀏覽者，您應該變更「一般」類別 (「偏好設定」對話方塊內) 中的這個偏好設定 (「編輯＞偏好設定」)。
    • 若要變更字體大小，請從「屬性」檢視窗或「文字＞大小」子選單選取大小 (1 到 7)。

      HTML 字體大小為相對 (非特定) 的點數。使用者會設定瀏覽器的預設字體點數；這是當您在「屬性」檢視窗或「文字＞大小」子選單中選取「預設」或「3」時，使用者將會看到的字體大小。大小「1」和「2」看起來會比預設字體大小小一些，大小「4」到「7」則會大一些。而且，Windows 中的字體看起來通常會比在 Macintosh 上大一些，不過 Macintosh Internet Explorer 5 則是使用與 Windows 相同的字體大小。

      提示

      有一種方式可以確保字體大小的一致性，就是對字體大小使用以像素為單位設定的 CSS 樣式。如需有關 CSS 的詳細資訊，請參閱使用階層式樣式表來格式化文字。
    • 若要增大或減小選取文字的大小，請從「屬性」檢視窗或「文字＞大小變更」子選單選取相對大小 (+ 或 –1 到 + 4 或 –3)。

      注意

      這些數字是表示與基本字體大小的相對差異。預設基本字體值為 3。因此，一個 + 4 的值會產生 3 + 4 (也就是 7) 的字體大小。字體大小值的最大總和為 7。如果您嘗試設定成更高的值，顯示出來的仍然是 7。雖然 Dreamweaver 不顯示 basefont 標籤 (在 head 區段中)，不過瀏覽器中仍會正確顯示字體大小。若要測試這種方式，請比較設定為 3 的文字和設定為 +3 的文字。

相關主題

  • 修改字體組合


重新命名樣式

當您格式化文字時，Dreamweaver 會追蹤您在每一頁中建立的樣式，並且建立您可以重複使用的樣式庫。這讓套用相同的格式化到文字區塊變得更簡單，同時讓您能建立更一致的頁面外觀。

若要重新命名樣式：

  1. 從文字「屬性」檢視窗「樣式」彈出式選單中選取「重新命名」。

    「重新命名樣式」對話方塊便會出現。

  2. 從「重新命名樣式」彈出式選單中，選取要重新命名的樣式。
  3. 在「新名稱」文字欄位中輸入新的名稱。
  4. 按一下「確定」。


修改字體組合

請使用「編輯字體清單」命令，設定出現在「屬性」檢視窗和「文字＞字體」子選單中的字體組合。

字體組合會決定瀏覽器顯示網頁文字的方式。瀏覽器會使用安裝於使用者系統上之組合中的第一種字體；如果組合中的字體一種也沒有安裝，瀏覽器將會依照使用者瀏覽器偏好設定所指定的方式顯示文字。

若要修改字體組合：

  1. 選取「文字＞字體＞編輯字體清單」。
  2. 從對話方塊頂端的清單選取字體組合。

    所選取組合中的字體就會列在對話方塊左下角的「已選取的字體」清單中。右邊則是系統上已安裝的所有可用字體清單。

  3. 請執行下列其中一項作業：
    • 若要從字體組合新增或移除字體，請按一下「已選取的字體」清單和「可用的字體」清單之間的箭頭按鈕 (<< 或 >>)。
    • 若要新增或移除字體組合，請按一下對話方塊頂端的加號 (+) 和減號 (–) 按鈕。
    • 若要新增系統上未安裝的字體，請在「可用的字體」清單下方的文字欄位中輸入字體名稱，並且按一下「<<」按鈕將它新增到組合中。當您在 Macintosh 上開發網頁而要指定 Windows 專用字體時，新增系統上未安裝的字體就很有用處。
    • 若要將清單中的字體組合上移或下移，請按一下對話方塊頂端的箭頭按鈕。

若要新增組合到字體清單：

  1. 選取「文字＞字體＞編輯字體清單」。
  2. 從「可用的字體」清單選取字體，然後按一下「<<」按鈕將字體移到「已選取的字體」清單。
  3. 對組合中接下來的每一種字體重複步驟 2。

    若要新增系統上未安裝的字體，請在「可用的字體」清單下方的文字欄位中輸入字體名稱，按一下「<<」按鈕將字體新增到組合中。當您在 Macintosh 上開發網頁而要指定 Windows 專用字體時，新增系統上未安裝的字體就很有用處。

  4. 完成選取特定字體後，請從「可用的字體」選單選取一般字體系列，並且按一下「<<」按鈕將這些一般字體系列移到「已選取的字體」清單。

    一般字體系列包括 Cursive、Fantasy、Monospace、Sans-serif 和 Serif。如果使用者系統上完全沒有「已選取的字體」清單中的字體，文字就會使用與一般字體系列相關的預設字體來顯示。例如，在大多數系統上的預設 Monospace 字體是 Courier。


變更文字顏色

您可以變更選取文字的顏色，讓新顏色覆寫「頁面屬性」中設定的文字顏色 (如果「頁面屬性」中沒有設定文字顏色，預設的文字顏色為黑色)。

若要變更文字的顏色：

  1. 選取文字。
  2. 請執行下列其中一項作業：
    • 在屬性檢視器中按一下顏色挑選器，從色盤選取顏色。
    • 選取「文字＞顏色」。系統的顏色挑選器對話方塊便會出現。選取顏色，然後按一下「確定」。
    • 在「屬性」檢視窗欄位中輸入顏色名稱，或直接輸入十六進位數字。
    • 若要定義預設文字顏色，請使用「修改＞頁面屬性」命令 (請參閱定義預設的文字顏色)。

若要將文字還原成預設顏色：

  1. 在「屬性」檢視窗中，按一下顏色方塊開啟網頁安全色的色盤。
  2. 按一下「刪除線」按鈕 (有條紅線穿過的白色方形按鈕，位於右上角)。


插入日期

Dreamweaver 提供了一個方便的「日期」物件，可以用您喜歡的任何格式 (不論要不要附加時間) 插入目前的日期，並且提供能在儲存檔案時更新日期的選項。

注意

「插入日期」對話方塊中顯示的日期和時間並不是目前的日期，也不是反映訪客到訪網站時所看到的日期/時間，這只是用來示範顯示這項資訊的方法。

若要將目前日期插入文件：

  1. 在「文件」視窗中，將插入點置於您要插入日期的位置。
  2. 請執行下列其中一項作業：
    • 選取「插入＞日期」。
    • 在「插入」列的「常用」類別中，按一下「日期」按鈕。
  3. 在出現的對話方塊中，選取星期格式、日期格式，以及時間格式。
  4. 如果您希望每次儲存文件時更新插入的日期，請選取「儲存時自動更新」。如果您希望日期在插入時能成為純文字，而且絕不要自動更新，請取消選取這個選項。
  5. 按一下「確定」插入日期。

    提示

    如果您選取了「儲存時自動更新」，您可以在日期插入文件之後，按一下格式化的文字，並且在「屬性」檢視窗中選取「編輯日期格式」來編輯日期格式。


插入特殊字元

有些特殊字元在 HTML 中是由名稱或數字來表示，稱為實體。HTML 包含了如版權符號 (&copy;)、& 符號 (&amp;) 和註冊商標符號 (&reg;) 這類字元的實體名稱。每個實體都有一個名稱 (例如 &mdash;) 和一個數值表示法 (例如 &#151;)。

提示

HTML 會在程式碼中使用角括弧 (<>)，但是您有時會需要表示大於或小於之類的特殊字元，而不希望 Dreamweaver 將它們解譯為程式碼。在這種情況下，請使用 &gt; 來表示大於 (>)；使用 &it; 來表示小於 (<)。

不幸的是，許多瀏覽器 (尤其是舊型的瀏覽器，以及 Netscape Navigator 和 Internet Explorer 以外的瀏覽器) 並不能正確地顯示許多命名的實體。

若要將特殊字元插入文件：

  1. 在「文件」視窗中，將插入點置於您要插入特殊字元的地方。
  2. 請執行下列其中一項作業：
    • 從「插入＞HTML＞特殊字元」子選單中選取字元名稱。
    • 在「插入」列的「文字」類別中，按一下「字元」按鈕，然後選取您想要的字元。

      提示

      有許多其他特殊字元可以使用，若要選取其中之一，請選取「插入＞HTML＞特殊字元＞其他」，或選取「插入」列的「HTML」類別，按一下「字元」功能表，然後選取「其他字元」。從「插入其他字元」對話方塊中選取字元，然後按一下「確定」。


在字元之間加入空白

HTML 只允許字元之間有一個空白；若要在文件中加入額外空白，您必須插入不斷行空白。您可以設定偏好設定，在文件中自動加入不斷行空白。

若要插入不斷行空白，請執行下列其中一項作業：

  • 在「插入」列的「HTML」類別中，按一下「字元」按鈕，然後選取「插入不斷行空白」。
  • 選取「插入＞HTML＞特殊字元＞不斷行空白」。
  • 按 Control + Shift + 空白鍵 (Windows) 或 Option + 空白鍵 (Macintosh)。

若要設定偏好設定以新增不斷行空白：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 在「一般」類別中，請確定已勾選「允許多個連續空白」。


使用階層式樣式表來格式化文字

依預設值，Dreamweaver 會使用「階層式樣式表」(CSS) 來格式化文字。您使用「屬性」檢視窗或選單命令來套用至文字的樣式，會建立嵌入至目前文件檔頭的 CSS 規則。CSS 對於頁面外觀可提供更大的彈性及控制，從版面的精確定位到特定的字體和文字樣式。

您也可以使用「CSS 樣式」面板建立並編輯 CSS 規則和屬性。「CSS 樣式」面板是比「屬性」檢視窗更加穩定的編輯器，可以顯示所有為目前文件定義的 CSS 規則 (不論這些規則內嵌於文件檔頭或外部樣式表中)。Macromedia 建議您使用「CSS 樣式」面板 (而不是「屬性」檢視窗) 作為建立和編輯 CSS 的主要工具。如此，您的程式碼將會更加乾淨，並且更容易維護。

除了建立的樣式和樣式表之外，您還可以使用 Dreamweaver 所附的樣式表，將樣式套用到文件 (請參閱以 Dreamweaver 設計檔建立文件)。

相關主題

  • 了解階層式樣式表
  • 關於 CSS 樣式面板
  • 使用 CSS 樣式面板
  • 建立新的 CSS 規則
  • 套用類別樣式
  • 匯出樣式以建立 CSS 樣式表
  • 連結或匯入外部 CSS 樣式表
  • 編輯 CSS 規則
  • 編輯 CSS 樣式表
  • 使用設計階段樣式表
  • 關於衝突的 CSS 規則


使用 CSS 樣式面板

您可以使用「CSS 樣式」面板來檢視、建立、編輯和移除 CSS 樣式，以及將外部樣式表附加到文件上 (如需這個面板的綜覽，請參閱關於 CSS 樣式面板)。

若要開啟「CSS 樣式」面板：

  • 請執行下列其中一項作業：
    • 選取「視窗＞CSS 樣式」。
    • 按下 Shift + F11。
    • 按一下「屬性」檢視窗中的「CSS」按鈕。

若要在「CSS 樣式」面板中編輯規則 (「正在」模式)：

  1. 按一下「CSS 樣式」面板上方的「正在」按鈕。
  2. 選取目前頁面中的文字元素，以顯示其屬性。
  3. 請執行下列其中一項作業：
    • 按兩下「選取範圍摘要」窗格中的屬性以顯示「CSS 規則定義」對話方塊，然後開始進行變更。
    • 在「選取範圍摘要」窗格中選取屬性，然後在下方的「屬性」窗格中編輯屬性。
    • 在「規則」窗格中選取規則，然後在下方的「屬性」窗格中編輯規則的屬性。

      注意

      您可以變更 Dreamweaver 偏好設定來變更編輯 CSS 所用的按兩下行為以及其他行為。如需詳細資訊，請參閱「使用 Dreamweaver」中的設定 CSS 樣式偏好設定。

若要在「CSS 樣式」面板中編輯規則 (「全部」模式)：

  1. 按一下「CSS 樣式」面板上方的「全部」按鈕。
  2. 請執行下列其中一項作業：
    • 按兩下「所有規則」窗格中的規則以顯示「CSS 規則定義」對話方塊，然後開始進行變更。
    • 在「所有規則」窗格中選取規則，然後在下方的「屬性」窗格中編輯規則的屬性。
    • 在「所有規則」窗格中選取規則，然後按一下「CSS 樣式」面板右下角的「編輯樣式」按鈕。

若要新增規則屬性：

  1. 請選取「所有規則」窗格中的規則 (「全部」模式)，或選取「選取範圍摘要」窗格中的屬性 (「正在」模式)。
  2. 請執行下列其中一項作業：
    • 如果「屬性」窗格中的「僅顯示設定屬性」檢視已選取，請按一下「新增屬性」連結然後新增屬性。
    • 如果「屬性」窗格中的「類別」檢視或「清單」檢視已選取，請為要新增的屬性填入一個數值。

不論是在「全部」或「正在」模式中，「CSS 樣式」面板都含有三種可以讓您更改「屬性」窗格 (最下方的窗格) 檢視方式的按鈕： 這是描述功能的圖片。

類別檢視會將 Dreamweaver 支援的 CSS 屬性區分成八種類別：字體、背景、區塊、邊框、方框、清單、定位及擴充功能。每一個類別的屬性都包含在清單中，您可以按一下類別名稱旁的加號 (+) 按鈕來展開或收合。設定屬性會出現 (以藍色顯示) 在清單的頂端。

清單檢視會以字母順序顯示所有 Dreamweaver 支援的 CSS 屬性。設定屬性會出現 (以藍色顯示) 在清單的頂端。

設定屬性檢視只會顯示已經設定的屬性。預設的檢視方式是「設定屬性」檢視。

不論是在「全部」或「正在」模式中，「CSS 樣式」面板也都會含有以下的按鈕：

附加樣式表會開啟「附加外部樣式表」對話方塊。選取要連結或匯入目前文件的外部樣式表。如需有關附加外部樣式表的詳細資訊，請參閱連結或匯入外部 CSS 樣式表。

新增 CSS 規則會開啟對話方塊，讓您選取要建立的樣式類型 (例如，建立類別樣式、重新定義 HTML 標籤，或是定義 CSS 選取器)。如需詳細資訊，請參閱建立新的 CSS 規則。

編輯樣式會開啟對話方塊，讓您編輯目前文件或外部樣式表中的樣式。如需有關更新樣式表的詳細資訊，請參閱編輯 CSS 規則。

刪除 CSS 規則會從「CSS 樣式」面板移除選取的規則或屬性，並且從套用此規則或屬性的任何元素移除格式。(不過，它並不會移除那個樣式的參考)。

提示

用右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh)「CSS 樣式」面板，開啟使用 CSS 樣式表命令的選項快速選單。

相關主題

  • 套用類別樣式
  • 連結或匯入外部 CSS 樣式表
  • 編輯 CSS 樣式表


建立新的 CSS 規則

您可以建立 CSS 規則來自動格式化 HTML 標籤或以 class 屬性所識別的文字範圍。

若要建立新的 CSS 規則：

  1. 將插入點置於文件中，然後執行下列其中一項作業以開啟「新增 CSS 規則」對話方塊：
    • 在「CSS 樣式」面板中 (「視窗＞CSS 樣式」)，按一下位於面板右下方的「新增 CSS 規則」按鈕 (+)。
    • 選取「文字＞CSS 樣式＞新增 CSS 規則」。
  2. 定義您要建立的 CSS 樣式類型：
    • 若要建立可以做為 class 屬性套用到文字範圍或文字區塊的自訂樣式，請選取「類別」選項，然後在「名稱」文字方塊中輸入樣式名稱。

      注意

      類別名稱必須以句點開頭，並可包含任何字母和數字的組合 (例如，.myhead1)。如果沒有輸入開頭的句點，則 Dreamweaver 會自動為您將其輸入。
    • 若要重新定義特定 HTML 標籤的預設格式，請選取「標籤」選項，然後在「標籤」文字方塊中輸入 HTML 標籤，或從彈出式選單中選取。
    • 若要定義特定標籤組合或含有特定 Id 屬性之所有標籤的格式，請選取「進階」，然後在「選取器」文字方塊中輸入一或多個 HTML 標籤，或從彈出式選單中選取。彈出式選單中可用的選取器 (即為已知的虛擬類別選取器) 為 a:active、a:hover、a:link 和 a:visited。
  3. 選取要定義樣式的位置：
    • 若要建立外部樣式表，請選取「新增樣式表檔」。
    • 若要在目前的文件中嵌入樣式，請選取「只有此文件」。
  4. 按一下「確定」。

    「樣式定義」對話方塊便會出現。

  5. 選取您要為新 CSS 規則設定的樣式選項。
  6. 完成設定樣式屬性時，請按一下「確定」。

如需有關特定 CSS 樣式設定的詳細資訊，請參閱下列主題：

  • 定義 CSS 類型屬性
  • 定義 CSS 樣式背景屬性
  • 定義 CSS 樣式區塊屬性
  • 定義 CSS 樣式方框屬性
  • 定義 CSS 樣式邊框屬性
  • 定義 CSS 樣式清單屬性
  • 定義 CSS 樣式定位屬性
  • 定義 CSS 樣式擴充功能屬性

相關主題

  • 使用 CSS 樣式面板
  • 套用類別樣式
  • 編輯 CSS 規則


套用類別樣式

類別樣式是能夠套用到文件中任何文字 (不論是哪個標籤控制這些文字) 的唯一 CSS 樣式類型。所有與目前文件相關聯的類別樣式會顯示在「CSS 樣式」面板中 (名稱前會附加句點 [.])，以及顯示在文字屬性檢測表的「樣式」彈出式選單中。

您會看到大部分的樣式都立即更新了，但是您仍然應該在瀏覽器中預覽頁面，以確認樣式是否如預期般套用。當您套用兩個以上 CSS 樣式到相同的文字時，這些樣式有可能會發生衝突，產生無法預期的結果。如需詳細資訊，請參閱關於衝突的 CSS 規則。

提示

當預覽在外部 CSS 樣式表中定義的樣式時，請確定儲存樣式表，以確保當在瀏覽器中預覽頁面時會立即反應變更。

若要套用自訂 CSS 樣式：

  1. 在文件中選取您要套用 CSS 樣式的文字。

    將插入點置於段落中，將樣式套用到整個段落。

    如果您在單一段落中選取一段文字範圍，CSS 樣式只會影響選取的範圍。

    若要指定應該套用 CSS 樣式的確切標籤，請在位於「文件」視窗左下方的標籤選取器中選取標籤。

  2. 若要套用類別樣式，請執行下列其中一項作業：
    • 在「CSS 樣式」面板中 (「視窗＞CSS 樣式」)，選取「全部」模式，以右鍵按一下要套用樣式的名稱，再從快速選單中選取「套用」。
    • 在文字「屬性」檢視窗中，從「樣式」彈出式選單中選取要套用的類別樣式。
    • 在「文件」視窗中，按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 選取的文字，在快速選單中選取「CSS 樣式」，然後再選取要套用的樣式。
    • 選取「文字＞CSS 樣式」，在子選單中選取您要套用的樣式。

若要從選取範圍移除自訂樣式：

  1. 選取要移除樣式的物件或文字。
  2. 在文字「屬性」檢視窗 (「視窗＞屬性」) 中，選取「樣式」彈出式選單裡的「無」。

相關主題

  • 了解階層式樣式表
  • 關於 CSS 樣式面板
  • 編輯 CSS 規則


匯出樣式以建立 CSS 樣式表

您可以從文件匯出樣式，建立新的 CSS 樣式表。然後您可以連結到其他文件以套用這些樣式。

若要從文件匯出 CSS 樣式並建立 CSS 樣式表：

  1. 選取「檔案＞匯出＞CSS 樣式」，或選取「文字＞CSS 樣式＞匯出」。

    「匯出樣式為 CSS 檔案」對話方塊便會出現。

  2. 輸入樣式表的名稱並按一下「儲存檔案」。

    這個樣式就會儲存為 CSS 樣式表。

相關主題

  • 使用 CSS 樣式面板
  • 連結或匯入外部 CSS 樣式表
  • 編輯 CSS 樣式表
  • 使用設計階段樣式表


連結或匯入外部 CSS 樣式表

當您編輯外部 CSS 樣式表時，所有連結到這個 CSS 樣式表的文件都會更新，以反映這些編輯。您可以匯出文件中的 CSS 樣式，建立新的 CSS 樣式表，並且附加或連結到外部樣式表以套用樣式。

當然，您可以將任何您所建立的樣式表附加到頁面中，或是複製到網站中。此外，Dreamweaver 隨附有預先建置的樣式表，可以自動移動到您的網站且附加到您的頁面。如需有關使用 Dreamweaver 所附設計樣式表的詳細資訊，請參閱以 Dreamweaver 設計檔建立文件。

如需有關套用樣式的詳細資訊，請參閱套用類別樣式。

若要連結或匯入外部 CSS 樣式表：

  1. 請執行下列其中一項作業，開啟「CSS 樣式」面板：
    • 選取「視窗＞CSS 樣式」。
    • 按 Shift + F11。
  2. 在「CSS 樣式」面板中，按一下「附加樣式表」按鈕。(按鈕位於面板的右下角)。
  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

相關主題

  • 使用 CSS 樣式面板
  • 匯出樣式以建立 CSS 樣式表
  • 編輯 CSS 樣式表


使用範例 Dreamweaver 樣式表

Dreamweaver 提供了範例樣式表，您可以套用至您的頁面，或用來做為起點以開發自己的樣式。

若要套用 Dreamweaver 樣式表：

  1. 請執行下列其中一項作業，開啟「CSS 樣式」面板：
    • 選取「視窗＞CSS 樣式」。
    • 按下 Shift + F11。
  2. 在「CSS 樣式」面板中，按一下「附加外部樣式表」按鈕。(按鈕位於面板的右下角)。
  3. 在「附加外部樣式表」對話方塊中，按一下「範例樣式表」。
  4. 從「範例樣式表」對話方塊中的清單方塊選取樣式表。

    當您選取清單方塊中的樣式表時，「預覽」窗格中便會顯示所選樣式表的文字和顏色格式。

  5. 按一下「預覽」按鈕以套用樣式表，並且確定它有將您希望的樣式套用至目前的頁面。

    如果套用的樣式並非如您的預期，請從清單中選取另一份樣式表，再按一下「預覽」以套用這些樣式。

  6. 依預設值，Dreamweaver 會將樣式表儲存在名為 CSS 的資料夾中，該資料夾就在您對頁面所定義的網站根目錄下方。如果該資料夾不存在，Dreamweaver 便會建立此資料夾。按一下「瀏覽」，再瀏覽至另一個資料夾，即可將檔案儲存到另一個位置。
  7. 當找到格式化尺標符合您的設計準則的樣式表時，按一下「確定」。


編輯 CSS 規則

您可以輕鬆地編輯已經套用到文件的內部和外部規則。

編輯控制文件中文字的 CSS 樣式表時，將會立即重新格式化這個 CSS 樣式表所控制的所有文字。編輯外部樣式表將會影響所有連結到外部樣式表的文件。

您可以設定外部編輯器，編輯樣式表。如需有關設定外部編輯器的詳細資訊，請參閱啟動媒體檔案的外部編輯器。

若要編輯 CSS 規則：

  1. 選取「視窗＞CSS 樣式」，開啟「CSS 樣式」面板。
  2. 將插入點置於要編輯 CSS 規則的文字中。
  3. 使用「CSS 樣式」面板來編輯規則。如需相關說明，請參閱使用 CSS 樣式面板。

    所做的變更會立即套用至目前的文件，讓您可以預覽所做的變更。如果您編輯儲存在外部樣式表中的規則，請務必儲存您的變更以確定更新已套用。

    如果所修改的 CSS 規則，是在由一個以上文件所使用的樣式表中，則這些變更也會在這些頁面中反映出來。

相關主題

  • 編輯 CSS 樣式表
  • 使用設計階段樣式表


編輯 CSS 樣式表

CSS 樣式表通常包含一或多個規則。您可以使用「CSS 樣式」面板編輯 CSS 樣式表中個別的規則 (請參閱編輯 CSS 規則)，或是如果您想要的話，您可以直接在 CSS 樣式表中編輯。

若要編輯 CSS 樣式表：

  1. 在「CSS 樣式」面板中 (「視窗＞CSS 樣式」)，選取「全部」模式。
  2. 在「所有規則」窗格中，按兩下您要編輯的樣式表名稱。
  3. 在「文件」視窗中，依需要修改樣式表，然後儲存樣式表。

相關主題

  • 使用 CSS 樣式面板
  • 編輯 CSS 規則
  • 使用設計階段樣式表


更新 Contribute 網站上的 CSS 樣式表

Macromedia Contribute 使用者無法對 CSS 樣式表進行變更。若要變更 Contribute 網站的樣式表，請使用 Dreamweaver。

當您在更新 Contribute 網站上的樣式表時，請牢記以下重要因素：

  • 如果您在變更某個樣式表的同時，有 Contribute 的使用者正在編輯使用該樣式表的頁面，除非使用者發佈該頁面，否則他將無法看到樣式表的變更。
  • 即使您已將某個樣式自樣式表中刪除，該樣式的名稱仍會保留在使用該樣式表的頁面中；但由於該樣式已不存在，所以顯示結果將與 Contribute 使用者所預期的不同。因此，如果有使用者向您反應，當他們套用某個特定的樣式，卻甚麼都沒發生時，問題可能出在該樣式已從該樣式表中刪除。

如果要編輯 Contribute 網站上的 CSS 樣式表：

  1. 使用 Dreamweaver 樣式表編輯工具來編輯樣式表。如需詳細資訊，請參閱使用階層式樣式表來格式化文字。
  2. 通知所有正在網站上工作的 Contribute 使用者，請他們先發佈使用該樣式表的頁面，再重新編輯這些頁面以檢視新的樣式表。


使用設計階段樣式表

「設計階段樣式表」可以讓您在 Dreamweaver 文件中工作時，顯示或隱藏由 CSS 樣式表所套用的設計。例如，在設計頁面時，您可以使用這個選項來包含或排除 Macintosh 專用或 Windows 專用樣式表的效果。

「設計階段」樣式表只有在您是在 Dreamweaver 文件中工作時才適用；當頁面在瀏覽器視窗中顯示時，只有實際附加或內嵌到文件中的樣式才會出現在瀏覽器中。

若要在設計階段顯示或隱藏 CSS 樣式表：

  1. 請執行下列其中一項作業，開啟「設計階段樣式表」對話方塊：
    • 在「CSS 樣式」面板中按一下右鍵，然後在快速選單中選取「設計階段」。
    • 選取「文字＞CSS 樣式＞設計階段」。
  2. 在對話方塊中，設定要顯示或隱藏所選取樣式表的選項。
    • 如果要在設計階段顯示 CSS 樣式表，請按一下「僅於設計階段時顯示」上方的加號 (+) 按鈕，然後在「選取樣式表」對話方塊中，瀏覽到要顯示的 CSS 樣式表。
    • 如果要隱藏 CSS 樣式表，請按一下「設計階段時隱藏」上方的加號 (+) 按鈕，然後在「選取樣式表」對話方塊中，瀏覽到要顯示的 CSS 樣式表。
    • 若要從這兩種清單中移除樣式表，請按一下要移除的樣式表，然後按一下適當的減號 (-) 按鈕。
  3. 按一下「確定」關閉對話方塊。

「CSS 樣式」面板會以選取的樣式表名稱進行更新，並且顯示「隱藏」或「設計」指示器來反映樣式表的狀態。

相關主題

  • 使用 CSS 樣式面板
  • 匯出樣式以建立 CSS 樣式表
  • 連結或匯入外部 CSS 樣式表
  • 編輯 CSS 樣式表


拼字檢查

使用「文字」選單中的「拼字檢查」命令，可以檢查目前文件中的拼字。「拼字檢查」命令會忽略 HTML 標籤和屬性值。

依預設值，拼字檢查程式會使用美式英文拼字字典。若要變更字典，請選取「編輯＞偏好設定＞一般設定」(Windows) 或「Dreamweaver＞偏好設定＞一般設定」(Macintosh)，然後在「拼字字典」彈出式選單中，選取要使用的字典。其他語言的字典可以從 Dreamweaver 支援中心 (www.macromedia.com/support/dreamweaver) 下載。

若要檢查並且更正拼字：

  1. 選取「文字＞拼字檢查」或按 Shift + F7。

    當 Dreamweaver 碰到不認得的單字，「拼字檢查」對話方塊便會出現。

  2. 請依照您希望的差異處理方式，選取適當的選項：

    如需詳細資訊，請參閱設定拼字選項。


搜尋和取代文字

您可以使用「尋找和取代」命令，在文件或一組文件中，搜尋文字以及 HTML 標籤和屬性。

注意

若要搜尋網站中的檔案，請使用不同的命令：「本機網站中找出檔案」和「在遠端網站中找出檔案」。

若要搜尋文件內的文字及 HTML：

  1. 開啟文件以便在其中搜尋，或是選取「檔案」面板中的文件或資料夾。
  2. 選取「編輯＞尋找和取代」。

    「尋找和取代」對話方塊便會出現。

  3. 請指定要在其中搜尋哪些檔案，然後再指定您要執行的搜尋種類，以及要搜尋的文字或標籤。或者，也指定取代文字。接著再按一下其中一個「尋找」按鈕，或是其中一個「取代」按鈕。

    如需詳細資訊，請參閱設定尋找和取代對話方塊選項。

  4. 當您完成時，請按一下「關閉」按鈕以關閉對話方塊。

若要再搜尋一次而不顯示「尋找和取代」對話方塊：

  • 按 F3 (Windows) 或 Command + G (Macintosh)。


參考

本節將提供這一章裡所介紹的對話方塊、「屬性」檢視窗，以及面板的相關資訊：

  • 設定文字屬性選項
  • 設定清單屬性對話方塊選項
  • 設定 CSS 樣式偏好設定
  • 定義 CSS 類型屬性
  • 定義 CSS 樣式背景屬性
  • 定義 CSS 樣式區塊屬性
  • 定義 CSS 樣式方框屬性
  • 定義 CSS 樣式邊框屬性
  • 定義 CSS 樣式清單屬性
  • 定義 CSS 樣式定位屬性
  • 定義 CSS 樣式擴充功能屬性
  • 設定附加外部樣式表對話方塊選項
  • 設定拼字選項
  • 設定拼字選項
  • 設定尋找和取代對話方塊選項
  • 設定特定標籤搜尋的尋找和取代對話方塊選項
  • 設定進階文字搜尋的尋找和取代對話方塊選項
  • 設定搜尋面板選項
  • 設定貼上特殊效果對話方塊選項
  • 設定複製/貼上偏好設定對話方塊
  • 設定插入文件對話方塊選項
  • 設定重新命名類別或重新命名樣式對話方塊選項


設定文字屬性選項

文字「屬性」檢視窗會顯示文件中選取之文字的目前格式屬性。您可以設定新選項，變更格式。樣式會立即套用到文字。

您可以使用文字「屬性」檢視窗，套用 HTML 格式或階層式樣式表 (CSS) 格式。HTML 格式可以讓您選取文字格式選項 (例如字體、大小、粗體和斜體)，而 CSS 格式可以讓您將 CSS 類別樣式套用到選取的文字。

當您使用「屬性」檢視窗套用粗體或斜體樣式時，Dreamweaver 會自動個別套用 <strong> 或 <em> 標籤。如果您設計的頁面，是針對擁有 3.0 或更舊版本瀏覽器的瀏覽者，您應該變更「一般」類別 (「偏好設定」對話方塊內) 中的這個偏好設定 (「編輯＞偏好設定」)。

如需有關建立類別樣式的詳細資訊，請參閱建立新的 CSS 規則。

若要設定格式選項：

  1. 開啟「屬性」檢視窗 (如果尚未開啟的話，選取「視窗＞屬性」)。
  2. 選取您要格式化的文字。
  3. 設定您要套用到選取文字的 CSS 選項。

    格式設定選取之文字的段落樣式。「段落」會套用 <p> 標籤的預設格式，「標題 1」會新增 H1 標籤，依此類推。

    樣式會顯示目前套用到選取之文字的類別樣式。如果選取範圍還沒有套用任何樣式，彈出式選單就會顯示「沒有 CSS 樣式」。如果選取範圍套用了多種樣式，彈出式選單便會顯示空白。

    請使用「樣式」彈出式選單執行下列其中一項作業：

    • 選取您要套用到選取範圍的類別樣式。
    • 選取「無」以移除目前選取的樣式。
    • 選取「附加樣式表」以開啟對話方塊，讓您可以附加外部的樣式表。

    粗體會根據「偏好設定」對話方塊中「一般」類別內設定的樣式偏好設定，在選取的文字上套用 <b> 或 <strong>。

    斜體會根據「偏好設定」對話方塊中「一般」類別內設定的樣式偏好設定，在選取的文字上套用 <i> 或 <em>。

    如需有關設定「一般」偏好設定的詳細資訊，請參閱設定 Dreamweaver 的一般偏好設定。

若要設定 HTML 格式選項：

  1. 開啟「屬性」檢視窗 (如果尚未開啟的話，選取「視窗＞屬性」)。
  2. 選取您要格式化的文字。
  3. 設定您要套用到選取文字的選項。

    格式設定選取之文字的段落樣式。「段落」會套用 <p> 標籤的預設格式，「標題 1」會新增 H1 標籤，依此類推。

    字體組合會將選取的字體組合套用到文字。請使用彈出式選單，選取要套用的字體組合，或選取「編輯字體清單」，建立或編輯字體組合。

    大小會套用特定的字體大小 (1 到 7) 或相對於基本字體大小的字體大小 (+ 或 1 到 + 或 7，預設為 3)。

    文字顏色會以選取的顏色顯示文字。請按一下顏色方塊，或在相鄰的文字欄位中輸入十六進位值 (例如，#FF0000)，選取網頁安全色。

    粗體會根據「偏好設定」對話方塊中「一般」類別內設定的樣式偏好設定，在選取的文字上套用 <b> 或 <strong>。

    斜體會根據「偏好設定」對話方塊中「一般」類別內設定的樣式偏好設定，在選取的文字上套用 <i> 或 <em>。

    如需有關設定「一般」偏好設定的詳細資訊，請參閱設定 Dreamweaver 的一般偏好設定。

    靠左對齊、置中對齊和靠右對齊會套用各自的對齊方式。

    連結可以讓您建立選取之文字的超文字連結。請按一下資料夾圖示，選取網站中的檔案；輸入 URL；拖曳指向檔案圖示到「網站」面板中的檔案，或從「網站」面板將檔案拖曳到方塊中。

    目標可以讓您指定要載入連結文件的頁框或視窗：

    • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
    • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的，則會在完整的瀏覽器視窗中載入連結的檔案。
    • _self 會在與連結所在的同一個頁框或視窗載入連結的檔案。這是預設的目標，所以您通常不需要指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的檔案，同時移除所有頁框。

    項目清單會建立選取之文字的項目清單。如果沒有選取文字，就會啟動新的項目清單。

    編號清單會建立選取之文字的編號清單。如果沒有選取文字，就會啟動新的編號清單。

    清單項目會開啟「清單屬性」對話方塊。請參閱設定清單屬性對話方塊選項。

    文字縮排和文字凸排會套用或移除 blockquote 標籤，將選取的文字縮排或移除縮排。在清單中，縮排會建立巢狀結構的清單，而移除縮排則會取消清單的巢狀結構。

相關主題

  • 格式化段落
  • 設定和變更字體和樣式
  • 建立新的 CSS 規則
  • 設定 Dreamweaver 的一般偏好設定


設定清單屬性對話方塊選項

您可以使用「清單屬性」對話方塊，設定整個清單或個別清單項目的外觀。您可以設定數字樣式、重設計數，或者設定個別清單項目或整個清單的項目符號樣式選項。

如需有關使用 CSS 樣式表設定清單屬性的詳細資訊，請參閱定義 CSS 樣式清單屬性。

若要設定整個清單的清單屬性：

  1. 請在「文件」視窗中至少建立一個清單項目。新的樣式將會自動套用到您新增到清單的額外項目。
  2. 將插入點置於清單項目的文字中，選取「文字＞清單＞屬性」以開啟「清單屬性」對話方塊。
  3. 在出現的對話方塊中，設定您要定義清單的選項：

    清單類型會指定清單屬性，而清單項目則是指定清單中的個別項目。請使用彈出式選單來選取項目清單、編號清單、目錄清單或選單清單。對話方塊會依據您選取的「清單類型」顯示不同的選項。

    樣式決定使用於編號清單或項目清單的數字或項目符號的樣式。除非您對清單中的項目指定了新樣式，否則清單中所有項目都會使用這種樣式。

    計算起始值設定編號清單中第一個項目的值。

  4. 按一下「確定」，設定選項並關閉對話方塊。

若要設定清單項目的清單屬性：

  1. 在「文件」視窗中，將插入點置於您要設定的清單項目文字中。
  2. 選取「文字＞清單＞屬性」。
  3. 在出現的對話方塊中，在「清單項目」下，設定您要定義清單的選項：

    新增樣式可以讓您指定選取之清單項目的樣式。「新增樣式」彈出式選單中的樣式會與「清單類型」彈出式選單中顯示的清單類型相關。例如，如果「清單項目」彈出式選單顯示的是「項目清單」，則「新增樣式」彈出式選單中只會出現項目符號選項。

    重設計算數目可以讓您設定用來編號清單項目的特定數目。

  4. 按一下「確定」，設定選項並關閉對話方塊。


設定 CSS 樣式偏好設定

CSS 樣式偏好設定會控制 Dreamweaver 如何撰寫定義 CSS 樣式的程式碼。CSS 樣式可以撰寫成容易使用的速記形式。但是有些舊版的瀏覽器確無法正確地解譯這種速記法。

若要顯示 CSS 樣式偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，並從「分類」清單中選取「CSS 樣式」。
  2. 設定要套用的 CSS 樣式選項：

    當建立 CSS 規則時在下面項目使用速記可以讓您選取 Dreamweaver 要以速記撰寫的 CSS 樣式屬性。

    當編輯 CSS 規則時使用速記控制 Dreamweaver 是否要以速記改寫現有的樣式。

    選取「只有在原本就使用速記法時」時，Dreamweaver 會讓所有樣式保持原樣。

    選取「根據以上的設定」會讓 Dreamweaver 以速記改寫在「在下列項目使用速記」中所選取屬性的樣式。

    在 CSS 面板中按兩下時可以讓您選取在 Dreamweaver 中要用來編輯 CSS 規則的工具。

  3. 按一下「確定」。

相關主題

  • 速記 CSS 屬性
  • 使用 CSS 樣式面板


定義 CSS 類型屬性

您可以使用「CSS 規則定義」對話方塊中的「類型」類別，定義 CSS 樣式的基本字體和類型設定。

另請參閱使用階層式樣式表來格式化文字和編輯 CSS 規則。

若要定義 CSS 樣式的類型設定：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下開啟現有的樣式，以便在「程式碼」檢視或「CSS 屬性」索引標籤中編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「類型」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    字體設定樣式的字體家族 (或家族系列)。瀏覽器會以使用者系統上所安裝字體系列中的第一種字體來顯示文字。如需考量與 Internet Explorer 3.0 的相容性，請先列出 Windows 字體。兩種瀏覽器都支援字體屬性。

    大小定義文字的大小。您可以選取數字和度量單位，選擇特定大小，也可以選擇相對大小。以像素為單位可以防止因瀏覽器而造成文字扭曲。兩種瀏覽器都支援大小屬性。

    樣式指定字體樣式為「一般」、「斜體」或「偏斜體」。預設的設定值為「一般」。兩種瀏覽器都支援樣式屬性。

    行高設定文字行的高度。這項設定習慣上稱為行距。選取「一般」可以自動計算字體大小的行高，或是輸入一個精確值並且選取度量單位。兩種瀏覽器都支援行高屬性。

    裝飾會對文字加上底線、上端線或刪除線，或讓文字閃爍。一般文字的預設設定為「無」。連結的預設設定為「底線」。當您將連結設定設成無時，可以定義特殊類別來移除連結的底線。兩種瀏覽器都支援裝飾屬性。

    粗細會將特定或相對的粗細套用到字體。「一般」相當於 400、「粗體」相當於 700。兩種瀏覽器都支援粗細屬性。

    變形會對文字設定小型大寫字的變體。Dreamweaver 不會在「文件」視窗中顯示這個屬性。Internet Explorer 支援這個變形屬性，但 Navigator 不支援。

    大小寫可將選取範圍中每個單字的第一個字母設定成大寫，或將文字設定成全部大寫或全部小寫。兩種瀏覽器都支援大小寫屬性。

    顏色設定文字的顏色。兩種瀏覽器都支援顏色屬性。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式背景屬性

您可以使用「CSS 規則定義」對話方塊的「背景」類別，定義 CSS 樣式的背景設定。您可以將背景屬性套用到網頁中的任何元素。例如，建立會將背景顏色或背景影像新增到任何頁面元素 (例如在文字、表格、頁面等後面) 的樣式。您也可以設定背景影像的定位方式。另請參閱使用階層式樣式表來格式化文字和編輯 CSS 規則。

若要定義背景設定：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下開啟現有的樣式，以便在「程式碼」檢視或「CSS 屬性」索引標籤中編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「背景」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    背景顏色設定元素的背景顏色。兩種瀏覽器都支援背景顏色屬性。

    背景影像設定元素的背景影像。兩種瀏覽器都支援背景影像屬性。

    重複決定背景影像是否要重複，以及重複的方式。兩種瀏覽器都支援「重複」屬性。

    「不重複」只在元素的開頭顯示影像一次。

    「重複」會以水平並排和垂直並排方式，將影像排列在元素的後面。

    「水平重複」和「垂直重複」會分別以水平和垂直排列方式顯示影像。影像會裁切成剛好能嵌入元素的邊界內。

    注意

    使用「重複」屬性重新定義 body 標籤，並設定不是並排或重複的背景影像。

    附件決定背景影像是否要固定在原來位置，或是要隨內容捲動。請注意，有些瀏覽器會將「固定」選項當做「捲動」處理。Internet Explorer 支援這個屬性，但是 Netscape Navigator 不支援。

    水平位置和垂直位置會指定背景影像相對於元素的初始位置，可以用來將背景影像對齊 (水平和垂直方向) 頁面的中心。如果附著方式屬性為「固定」，那麼這個位置將是相對於「文件」視窗，而不是元素。Internet Explorer 支援這個屬性，但是 Netscape Navigator 不支援。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式區塊屬性

您可以使用「CSS 規則定義」對話方塊的「區塊」類別，定義標籤和屬性的間距和對齊設定。

若要定義區塊設定：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下開啟現有的樣式，以便在「程式碼」檢視或「CSS 屬性」索引標籤中編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「區塊」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    單字間距設定單字之間的間距。若要設定特定的值，請在彈出式選單中選取「值」，然後輸入數值。在第二個彈出式選單中，選取度量單位 (例如，像素、點等等)。

    注意

    您可以指定負值，但是顯示的情況會依瀏覽器而有所不同。Dreamweaver 不會在「文件」視窗中顯示這個屬性。

    字母間距增加或減少字母或字元之間的間距。若要減少字元之間的間距，請指定負值，例如 (-4)。字母間距設定會覆寫文字齊行設定。Internet Explorer 4 以後版本和 Netscape Navigator 6 都支援「字母間距」屬性。

    垂直對齊指定套用到的元素垂直對齊方式。當這個屬性套用到 <img> 標籤時，Dreamweaver 才會在「文件」視窗中顯示屬性。

    文字對齊設定文字在元素內的對齊方式。兩種瀏覽器都支援「文字對齊」屬性。

    文字縮排指定文字的第一行要縮排多少。負值可以用來建立凸排，但是顯示的情況會依瀏覽器而有所不同。當標籤套用到區塊層級的元素時，Dreamweaver 才會在「文件」視窗中顯示這個屬性。兩種瀏覽器都支援「文字縮排」屬性。

    空白決定要如何處理元素內的空白。從三個選項中選取：「正常」會收合空白；「保留原狀」會將文字視同包含於 pre 標籤的方式處理 (也就是說，所有空白都會保留，包括空格、Tab 字元和 Return 字元)；「不換行」會指定文字只在碰到 br 標籤時才換行。Dreamweaver 不會在「文件」視窗中顯示這個屬性。Netscape Navigator 和 Internet Explorer 5.5 都支援「空白」屬性。

    顯示指定要不要顯示元素，如果要，應該如何顯示。「無」會關閉顯示指定的元素。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式方框屬性

請使用「CSS 規則定義」對話方塊的「方框」類別，定義控制頁面上元素位置的標籤和屬性設定。

套用欄位間隔和邊界設定時，您可以將這些設定套用到元素的某一邊，或使用「全部一樣」設定將同樣的設定套用到元素的每一邊。

若要定義元素放置在頁面上的方式：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下開啟現有的樣式，以便在「程式碼」檢視或「CSS 屬性」索引標籤中編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「方框」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    寬和高設定元素的寬度和高度。

    浮動設定其他元素 (例如文字、圖層、表格等) 要環繞在元素的哪一邊浮動。其他元素會按一般方式環繞浮動元素換行。兩種瀏覽器都支援「浮動」屬性。

    清除定義不允許有圖層的邊。如果圖層出現在清除的邊上，有清除設定的元素就會移到它的下面。兩種瀏覽器都支援「清除」屬性。

    欄位間隔指定元素的內容與其邊框 (如無邊框則為邊界) 之間的空間數量。如果要針對元素的某一邊設定欄位間隔，請取消選取「全部一樣」選項。

    全部一樣會將相同的欄位間隔屬性，設定到所套用元素的上、下、左、右各邊。

    邊界指定元素邊框 (如無邊框則為欄位間隔) 與其他元素之間的空間數量。只有在這個屬性套用到區塊層級的元素 (段落、標題、清單等) 時，Dreamweaver 才會在「文件」視窗中顯示這個屬性。如果要針對元素的某一邊設定邊界，請取消選取「全部一樣」。

    全部一樣會將相同的邊界屬性，設定到所套用元素的上、下、左、右各邊。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式邊框屬性

請使用「CSS 規則定義」對話方塊的「邊框」類別，定義環繞元素的邊框設定值，如寬度、顏色和樣式。

若要設定元素的邊框樣式：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下開啟現有的樣式，以便在「程式碼」檢視或「CSS 屬性」索引標籤中編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「邊框」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    樣式設定邊框的樣式外觀。樣式呈現的方式會依瀏覽器而有所不同。Dreamweaver 在「文件」視窗中會將所有樣式以實線呈現。兩種瀏覽器都支援樣式屬性。如果要針對元素的某一邊設定邊框樣式，請取消選取「全部一樣」。

    全部一樣會將相同的邊框樣式屬性，設定到所套用元素的上、下、左、右各邊。

    寬度設定元素邊框的粗細。兩種瀏覽器都支援「寬度」屬性。如果要針對元素的某一邊設定邊框寬度，請取消選取「全部一樣」。

    全部一樣會將相同的邊框寬度，設定到所套用元素的上、下、左、右各邊。

    顏色設定邊框的顏色。您可以單獨設定每一邊的顏色，但是顯示的情況會依瀏覽器而有所不同。如果要針對元素的某一邊設定邊框顏色，請取消選取「全部一樣」。

    全部一樣會將相同的邊框顏色，設定到所套用元素的上、下、左、右各邊。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式清單屬性

「CSS 規則定義」對話方塊的「清單」類別，可以定義清單標籤的清單設定，如項目符號大小和類型。

若要定義清單樣式：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下現有的樣式，開啟以進行編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「清單」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    類型設定項目符號或編號數字的外觀。兩種瀏覽器都支援「類型」。

    項目符號影像可以讓您指定項目符號的自訂影像。請按一下「瀏覽」(Windows) 或「選擇」(Macintosh) 以瀏覽至影像，或鍵入影像的路徑。

    位置設定清單項目文字是否換行及縮排 (外部) 或文字是否靠左邊界換行 (內部)。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式定位屬性

「定位」樣式屬性會使用「圖層」偏好設定中設定用來定義圖層的預設標籤，將選取文字的標籤或區塊變更為新的圖層 (請參閱設定圖層偏好設定和屬性)。

若要設定圖層定位屬性：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 選取現有的樣式、按一下右鍵以顯示快速選單，再選取「編輯」將其開啟以進行編輯。
    • 選取現有的樣式，再按一下「CSS 樣式」面板右下角的「編輯樣式」按鈕。
  3. 在「CSS 規則定義」對話方塊中，選取「定位」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    類型決定瀏覽器定位圖層的方式，如下所示：

    絕對的會使用「位置」方塊中輸入的座標 (相對於頁面左上角) 來放置圖層。

    相對的會使用「位置」方塊中輸入的座標 (相對於物件在文件文字流向中的位置) 來放置圖層。這個選項不會顯示在「文件」視窗中。

    靜態會將圖層放到它在文字流向中的位置。

    顯示決定圖層的初始顯示條件。如果您不指定顯示屬性，依預設值大部份瀏覽器會繼承上一層的值。請選擇下列其中一個可見性選項：

    繼承會繼承這個圖層的上一層可見性屬性。如果這個圖層沒有上一層，便會顯示。

    顯示會顯示圖層內容，而不論上一層的值為何。

    隱藏會隱藏圖層內容，而不論上一層的值為何。

    Z 軸決定圖層的堆疊順序。數字高的圖層會出現在數字低的圖層上方。值可以是正數或負數。(使用「圖層」面板變更圖層的堆疊順序會比較簡單 (請參閱變更圖層的堆疊順序)。

    溢位 (僅適用於 CSS 圖層) 決定圖層內容超過其大小時應如何處理。這些屬性會控制這種展開的處理方式，如下所示：

    顯示會增加圖層的大小，讓所有內容都能顯示。圖層向下及右方展開。

    隱藏會維持圖層的大小，並且裁切任何超出的內容。這裡不提供任何捲軸。

    捲動會新增捲軸到圖層，不論內容是否超過圖層的大小。明確地提供捲軸可以避免在動態環境中捲軸時而出現、時而消失所造成的混淆。這個選項不會顯示在「文件」視窗中，而且只適用於支援捲軸的瀏覽器。Internet Explorer 和 Netscape Navigator 6 都支援。

    自動會讓捲軸在圖層內容超過其邊界時才出現。這個選項不會顯示在「文件」視窗中。

    置入指定圖層的位置和大小。瀏覽器解譯位置的方式會依「類型」上的設定而有所不同。如果圖層的內容超過指定的大小，「大小」的值就會被覆寫。

    位置和大小的預設單位是像素。您也可以替 CSS 圖層指定下列單位：pc (Pica)、pt (點)、in (吋)、mm (公釐)、cm (公分)、em (字體高)、ex (字母高) 或 % (上層值的百分比)。縮寫必須緊接數值，不需空格：例如，3mm。

    裁切定義圖層的顯示部分。如果指定了裁切區域，您就可以使用 Script 語言 (例如 JavaScript) 存取，並且操作這些屬性來建立特殊效果 (例如擦去)。這種擦去效果可以用「變更屬性」行為來設定。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


定義 CSS 樣式擴充功能屬性

「擴充功能」樣式屬性包括篩選器、分頁和游標選項，其中大部份都不受任何瀏覽器支援，或是只有在 Internet Explorer 4.0 及以上的瀏覽器中才受支援。

若要指定擴充功能屬性：

  1. 開啟「CSS 樣式」面板 (Shift + F11，如果還沒有開啟的話)。
  2. 執行下列其中一項作業，開啟「CSS 規則定義」對話方塊：
    • 新增新的樣式。如需詳細資訊，請參閱建立新的 CSS 規則。
    • 按兩下現有的樣式，開啟以進行編輯。
  3. 在「CSS 規則定義」對話方塊中，選取「擴充功能」，然後設定您要的樣式屬性。

    下列的屬性，對樣式不重要的可以保持空白：

    分頁在列印時強制在這個樣式所控制的物件之前或之後分頁。請在彈出式選單中，選取要設定的選項。任何 4.0 版瀏覽器都不支援這個選項，不過將來的瀏覽器可能會支援。

    游標在指標移到這個樣式所控制的物件上時，會改變指標影像。請在彈出式選單中，選取要設定的選項。Internet Explorer 4.0 以後版本和 Netscape Navigator 6 都支援這個屬性。

    篩選器會將特殊效果套用到這個樣式所控制的物件，包括模糊和反轉。請從彈出式選單中選取效果。

  4. 完成設定這些選項後，請在面板左邊選取另一個 CSS 類別，設定其他樣式屬性，或按一下「確定」。


設定附加外部樣式表對話方塊選項

請使用「附加外部樣式表」對話方塊，選取並附加 CSS 樣式表到目前文件。

若要附加外部樣式表到目前文件：

  1. 請執行下列其中一項作業：
    • 按一下「瀏覽」以導覽至外部 CSS 樣式表。
    • 將樣式表的路徑鍵入在「檔案/URL」方塊中。
  2. 在「增加成為」中，選取其中一個選項：
    • 若要建立目前文件與外部樣式表之間的連結，請選取「連結」。這樣將會在 HTML 程式碼中建立連結 href 標籤，並且參考到已發佈樣式表所在的 URL。Microsoft Internet Explorer 和 Netscape Navigator 都支援這種方式。
    • 您無法使用連結標籤，將外部樣式表中的參考新增到另一個樣式表。如果您想要巢狀化樣式表，則必須使用匯入指示詞。部份而非所有的瀏覽器也能辨識頁面內 (而不是只有樣式表內) 的匯入指示詞。當連結或匯入到頁面的外部樣式表中存在重疊尺標時，解決這兩種狀況中衝突屬性的方法有微妙的差異。如果您希望匯入 (而不是連結) 外部樣式表時，請選取「匯入」。
  3. 在「媒體」彈出式選單中，指定樣式表的目標媒體。

    如需關於媒體相關之樣式表的詳細資訊，請參閱 World Wide Web Consortium 網站 (www.w3.org/TR/CSS21/media.html)。

  4. 按一下「預覽」按鈕，以確定樣式表有將您希望的樣式套用至目前的頁面。

    如果套用的樣式並非如您的預期，請按一下「取消」以移除樣式表。此頁面便會回復成之前的外觀。

  5. 按一下「確定」。

相關主題

  • 連結或匯入外部 CSS 樣式表


設定拼字選項

使用「文字」選單中的「拼字檢查」命令可以檢查目前文件中的拼字。

若要檢查並且更正拼字：

  1. 選取「文字＞拼字檢查」或按 Shift + F7。

    當 Dreamweaver 碰到不認得的單字，「拼字檢查」對話方塊便會出現。

  2. 請依照您希望的差異處理方式，選取適當的選項：

    加入個人資料會將不認得的單字新增到您的個人字典。

    忽略會忽略這一個不認得的單字。

    全部忽略會忽略所有這個不認得的單字出現的地方。

    更改會以您在「變更為」文字方塊中鍵入的文字，或在「建議」清單中選取的字，取代這一個不認得的單字。

    全部變更會以相同方式，取代所有這個不認得的單字。

相關主題

  • 拼字檢查


設定尋找和取代對話方塊選項

請使用「尋找和取代」對話方塊搜尋文件中的文字或標籤，並以其他文字或標籤取代所找到的資料。

若要設定尋找和取代選項：

  1. 請使用「尋找範圍」選項指定要搜尋哪些檔案：

    目前文件會將搜尋限制為作用中的文件。

    開啟文件搜尋所有目前開啟的文件。

    目前整個本機網站會將搜尋擴展為目前網站中所有的 HTML 文件、圖庫檔案和文字文件。

    在網站中選取的檔案會將搜尋限制為「檔案」面板中，目前選取的檔案和資料夾。

    資料夾會將搜尋限定為特定的資料夾。在選擇「資料夾」後，請按一下資料夾圖示以瀏覽並選取要搜尋的資料夾。

    選取的文字會將搜尋限定為在目前作用的文件中所選取文字。

  2. 請使用「搜尋」彈出式選單指定要執行的搜尋種類：

    原始碼可以讓您搜尋 HTML 原始碼中特定的文字字串。您可以使用此選項搜尋特定的標籤，但「特定標籤」搜尋能提供更富彈性的方法來搜尋標籤。

    文字可讓您搜尋文件文字中特定的文字字串。文字搜尋會忽略中斷字串的 HTML。例如，搜尋 the black dog，將會同時找到 the black dog 和 the <i>black</i> dog。

    文字 (進階) 可以讓您搜尋一或多個標籤內外特定的文字字串。例如，在含有下列 HTML 的文件中，搜尋 tries 並指定「沒有在標籤中」及 i 標籤時，只會找到單字 tries 第二次出現的位置：John <i>tries</i> to get his work done on time, but he doesn't always succeed.He tries very hard.請參閱設定進階文字搜尋的尋找和取代對話方塊選項。

    特定標籤可以讓您搜尋特定的標籤、屬性和屬性值，例如所有 valign 設定為 top 的 td 標籤 (請參閱設定特定標籤搜尋的尋找和取代對話方塊選項)。

    注意

    按 Control + Enter 或 Shift + Enter (Windows)，或 Control + Return、Shift + Return 或 Command + Return (Macintosh)，會在文字搜尋欄位中加入斷行，讓您搜尋 Return 字元。在執行這類搜尋時，如果您不使用規則運算式時，請取消選取「忽略空白差異」選項。請注意，這種搜尋會特地尋找 Return 字元，而不只是斷行的地方；例如，它不會尋找 <br> 標籤或 <p> 標籤。Return 字元在「設計」檢視中顯示為空白，而不是斷行。
  3. 請使用下列選項，擴展或限制搜尋：

    大小寫相符會將搜尋限制成與您所要尋找的文字大小寫完全相符的文字。例如，如果您搜尋 the brown derby，就不會找到 The Brown Derby。

    忽略空白在進行比對時，會將所有空白視為單一空格。例如，選取這個選項之後，this text 會與 this text 及 this      text 相符，但與 thistext 不相符。選取「使用規則運算式」選項時，這個選項不會出現，您必須明確地撰寫規則運算式以忽略空白。請注意，<p> 和 <br> 標籤不算是空白。

    整個單字相符會將搜尋限定為符合一個或多個完整單字的文字。

    注意

    使用此選項時，與執行規則運算式並搜尋以 \b 開頭和結束的字串相同，即單字界限規則運算式。

    使用規則運算式會讓搜尋字串中的某些字元和短字串 (例如 ?、*、\w 和 \b) 解譯為規則運算式的運算子。例如，搜尋 the b\w*\b dog，將會找到 the black dog 和 the barking dog (請參閱規則運算式)。

    注意

    如果您是在「程式碼」檢視中工作，而且要對您的文件進行變更，並嘗試尋找和取代原始碼以外的任何項目，便會出現對話方塊，告訴您 Dreamweaver 正在同步處理這兩種檢視，然後才會開始搜尋。如需同步檢視的詳細資訊，請參閱檢視程式碼。
  4. 若只要搜尋而不取代時，請按一下「找下一個」或「全部尋找」按鈕。

    找下一個會跳至目前文件中下一個搜尋的文字或標籤，並加以選取。如果目前文件中沒有其他標籤的實體，而您是在一份以上的文件中進行搜尋時，Dreamweaver 就會繼續搜尋下一份文件。

    全部尋找會開啟「結果」面板群組中的「搜尋」面板。如果您是在單一文件中進行搜尋，則「尋找全部」會顯示搜尋文字或標籤的所有項目，以及一些圍繞的上下文。如果您是在搜尋目錄或網站，「尋找全部」便會顯示一份包含此標籤的文件清單。

  5. 若要取代找到的文字或標籤，請按一下「取代」或「全部取代」按鈕。

相關主題

  • 搜尋和取代文字
  • 搜尋和取代標籤及屬性


設定特定標籤搜尋的尋找和取代對話方塊選項

請使用「尋找和取代」對話方塊搜尋文件中的文字或標籤，並以其他文字或標籤取代所找到的資料。

若要設定特定標籤搜尋的尋找和取代選項：

  1. 在「搜尋」彈出式選單中，選取「特定標籤」。
  2. 從「搜尋」彈出式選單旁的彈出式選單中，選取特定的標籤或 [任意標籤]，或是將標籤名稱鍵入文字方塊中。
  3. (選擇性)請使用下列標籤修飾詞限制搜尋：

    含有屬性可讓您指定一個屬性，而且標籤必須包含它才會符合。您可以為這個屬性指定一個特殊的值，或選取 [任意值]。

    不含屬性可讓您選取一個屬性，而標籤必須不包含它才會符合。例如，選取這個選項可搜尋所有不含 alt 屬性的 img 標籤。

    包含可指定文字或標籤，而原始標籤內必須包含它才會符合。例如，在程式碼 <b><font size="4">heading 1</font></b> 中，font 標籤是包含在 b 標籤內。

    不包含可指定文字或標籤，而原始標籤內必須不包含它才會符合。

    在標籤中可指定一個標籤，而目標標籤必須包含在此標籤中才會符合。

    沒有在標籤中可指定一個標籤，而它必須不包含目標標籤才會符合。

  4. (選擇性)若要進一步限定搜尋，請按一下加號 (+) 按鈕再重複步驟 3。
  5. 如果您在步驟 3 和 4 中並未套用任何標籤修飾詞，則請按一下減號 (-) 按鈕以移除標籤修飾詞彈出式選單。
  6. 如果您想要在找到標籤時執行動作 (例如移除或取代標籤)，請從「動作」彈出式選單中選取動作，並指定任何執行動作所需的額外資訊 (如果可以的話)。
  7. 請依照設定尋找和取代對話方塊選項中的程序，設定其他的選項並開始搜尋。


設定進階文字搜尋的尋找和取代對話方塊選項

請使用「尋找和取代」對話方塊搜尋文件中的文字或標籤，並以其他文字或標籤取代所找到的資料。

若要設定進階文字搜尋的尋找和取代選項：

  1. 在「尋找」彈出式選單中，選取「文字 (進階)」。
  2. 將文字輸入與「尋找」彈出式選單相鄰的文字欄位中。

    例如，鍵入單字 Untitled。

  3. 選取「在標籤中」或「沒有在標籤中」，然後從相鄰的彈出式選單中選取標籤。

    例如，選取「在標籤中」，然後選取 title。

  4. (選擇性)按一下加號 (+) 按鈕，以使用下列其中一種標籤修飾詞來限制搜尋：

    含有屬性可讓您指定一個屬性，而且標籤必須包含它才會符合。您可以為這個屬性指定一個特殊的值，或選取 [任意值]。

    不含屬性可讓您選取一個屬性，而標籤必須不包含它才會符合。例如，選取這個選項可搜尋所有不含 alt 屬性的 img 標籤。

    包含可指定文字或標籤，而原始標籤內必須包含它才會符合。例如，在程式碼 <b><font size="4">heading 1</font></b> 中，font 標籤是包含在 b 標籤內。

    不包含可指定文字或標籤，而原始標籤內必須不包含它才會符合。

    在標籤中可指定一個標籤，而目標標籤必須包含在此標籤中才會符合。

    沒有在標籤中可指定一個標籤，而它必須不包含目標標籤才會符合。

  5. (選擇性)若要進一步限定搜尋，請重複步驟 4。
  6. 請依照設定尋找和取代對話方塊選項中的程序，設定其他的選項並開始搜尋。


設定搜尋面板選項

「結果」面板群組中的「搜尋」面板，會顯示「全部尋找」搜尋的結果。

若要檢視內容中特殊的搜尋結果：

  • 按兩下「搜尋」面板中的某一行。

    如果您是在搜尋目前的檔案，在「文件」視窗中便會顯示包含該搜尋結果的行。

    如果您是在搜尋一組檔案，便會開啟包含該搜尋結果的檔案。

若要再執行一次相同的搜尋：

  • 按一下「尋找和取代」按鈕。

若要停止進行中的搜尋：

  • 按一下「停止」按鈕。


設定貼上特殊效果對話方塊選項

使用「貼上特殊效果」對話方塊，指定從其他應用程式或 Dreamweaver 中貼上之文字的格式選項。

若要完成「貼上特殊效果」對話方塊：

  1. 請選取下列其中一項：

    只有文字讓您貼上未格式化的文字。如果原始文字已經格式化，所有格式 (包括斷行和段落) 都會移除。

    具有結構的文字讓您貼上保有結構的文字，但是不會保留基本格式。例如，您可以貼上文字並且保留段落、清單和表格的結構，但是不保留粗體、斜體和其他格式。

    具有結構與基本格式的文字讓您同時貼上結構化和簡單 HTML 格式化的文字 (例如段落和表格，以及使用 b、i、u、strong、em、hr、abbr 或 acronym 標籤格式化的文字)。

    具有結構與完整格式的文字讓您貼上保留所有結構、HTML 格式和 CSS 樣式的文字。

    注意

    「完整格式」選項無法保留來自外部樣式表的 CSS 樣式，如果做為貼上來源的應用程式在貼到剪貼簿時沒有保留樣式，則此選項也無法保留樣式。
  2. 選取「保留斷行」保留貼上之文字的斷行。

    如果您已選取「只有文字」，就無法使用這個選項。

  3. 如果已選取「具有結構的文字」或「具有結構與基本格式的文字」，並且想要在貼上文字時清除段落之間的額外間距，請選取「清理 Word 段落間距」。
  4. 如果您想要的話，您可以按一下「貼上偏好設定」，選取適當的選項然後按一下「確定」，設定從其他應用程式貼上時的預設選項。
  5. 按一下「確定」。


設定複製/貼上偏好設定對話方塊

請使用「複製/貼上偏好設定」對話方塊設定從其他應用程式貼上文字的預設選項。

注意

在這個對話方塊中設定的偏好設定，只會套用貼到「設計」檢視中的資料。

若要完成「複製/貼上偏好設定」對話方塊：

  1. 請選取下列其中一項：

    只有文字讓您貼上未格式化的文字。如果原始文字已經格式化，所有格式 (包括斷行和段落) 都會移除。

    具有結構的文字讓您貼上保有結構的文字，但是不會保留基本格式。例如，您可以貼上文字並且保留段落、清單和表格的結構，但是不保留粗體、斜體和其他格式。

    具有結構與基本格式的文字讓您同時貼上結構化和簡單 HTML 格式化的文字 (例如段落和表格，以及使用 b、i、u、strong、em、hr、abbr 或 acronym 標籤格式化的文字)。

    具有結構與完整格式的文字讓您貼上保留所有結構、HTML 格式和 CSS 樣式的文字。

    注意

    「完整格式」選項無法保留來自外部樣式表的 CSS 樣式，如果做為貼上來源的應用程式在貼到剪貼簿時沒有保留樣式，則此選項也無法保留樣式。
  2. 選取「保留斷行」保留貼上之文字的斷行。

    如果您已選取「只有文字」，就無法使用這個選項。

  3. 如果已選取「具有結構的文字」或「具有結構與基本格式的文字」，並且想要在貼上文字時清除段落之間的額外間距，請選取「清理 Word 段落間距」。
  4. 按一下「確定」。


設定插入文件對話方塊選項

使用「插入文件」對話方塊指定是否插入文件的完整內容，或在網頁中建立文件的連結。如果您要插入完整的文件內容，則也可以為要插入的文字指定格式選項。

若要完成這個對話方塊的選項：

  1. 如果您想要插入完整的文件內容到頁面中，請選取「插入內容」並選取下列其中一個選項：

    只有文字讓您插入未格式化的文字。如果原始文字已經格式化，所有格式都會移除。

    具有結構的文字讓您插入保留結構的文字，但是不保留基本格式。例如，您可以貼上文字並且保留段落、清單和表格的結構，但是不保留粗體、斜體和其他格式。

    具有結構與基本格式的文字讓您同時插入結構化和簡單 HTML 格式化的文字 (例如段落和表格，以及使用 b、i、u、strong、em、hr、abbr 或 acronym 標籤格式化的文字)。

    具有結構與完整格式的文字讓您插入保留所有結構、HTML 格式和 CSS 樣式的文字。

    注意

    「完整格式」選項無法保留來自外部樣式表的 CSS 樣式，如果做為貼上來源的應用程式在貼到剪貼簿時沒有保留樣式，則此選項也無法保留樣式。

    清理 Word 段落間距讓您在貼上文字時清除段落之間的額外間距 (如果已選取「具有結構的文字」或「基本格式」)。

  2. 如果您想要改成建立文件的連結，請選取「建立連結」。
  3. 按一下「確定」。


設定重新命名類別或重新命名樣式對話方塊選項

這個對話方塊讓您重新命名 CSS 類別。

若要設定選項：

  • 輸入新的名稱，然後按一下「確定」。


插入影像

在 Macromedia Dreamweaver 8 中，您可以在「設計」檢視或「程式碼」檢視中工作，將影像插入文件中。當您在 Dreamweaver 文件中新增影像時，您可以設定或修改影像屬性，並且直接在「文件」視窗中檢視變更。

若要設定有效率的 Web 設計工作流程，您可以選取影像編輯器偏好設定，並且當您在 Dreamweaver 中工作時自動啟動它來編輯影像。

本章包含下列各節：

關於影像

插入影像

調整影像大小

裁切影像

使用 Fireworks 最佳化影像

調整影像的亮度和對比

銳利化影像

建立滑鼠變換影像

使用外部影像編輯器

套用行為到影像


關於影像

圖形檔格式有許多不同的類型，但一般使用於網頁的圖形檔格式有三種 - GIF、JPEG 和 PNG。就目前來講，GIF 和 JPEG 檔案格式受支援的情況最好，大部分的瀏覽器都能檢視。

PNG 檔案由於彈性大、檔案小，所以幾乎能適合任何 Web 圖形的類型；但是，只有在 Microsoft Internet Explorer (4.0 及更新版的瀏覽器) 和 Netscape Navigator (4.04 及更新版的瀏覽器) 中，才能局部支援顯示 PNG 影像。因此，除非您要設計針對使用支援 PNG 格式之瀏覽器的特定目標對象，否則請使用 GIF 或 JPEG 才能迎合更廣闊的使用者族群。

GIF (Graphic Interchange Format) 檔案最多使用 256 色，最適合顯示非連續色調影像或有大區域單調顏色的影像 (例如導覽列、按鈕、圖示、標誌)，或其他具有單一顏色和色調的影像。

JPEG (Joint Photographic Experts Group) 檔案格式是適用於照片或連續色調影像的較佳格式，因為 JPEG 檔案可以包含數百萬色。不過 JPEG 檔案雖然改善了品質，但同時也增加了檔案的大小和檔案的下載時間。您通常可以藉由壓縮 JPEG 檔案，而在影像品質與檔案大小之間取得良好的平衡點。

PNG (Portable Network Group) 檔案格式是沒有專利權的 GIF 替代品，包含了對索引色、灰階和全彩影像的支援，以及透明的 Alpha 色板支援。PNG 是 Macromedia Fireworks 原有的檔案格式。PNG 檔案會保留所有原始圖層、向量、顏色和效果資訊 (如陰影)，而且所有元素都可隨時進行編輯。檔案必須具有 .png 副檔名，Dreamweaver 才能將它辨認為 PNG 檔案。


編輯 Dreamweaver 中的影像

Dreamweaver 提供了基本的影像編輯功能，可讓您修改影像而不需要啟動外部影像編輯應用程式 (如 Macromedia Fireworks)。Dreamweaver 影像編輯工具的設計，讓您能輕易地與負責建立您網站上所用之影像檔的內容設計人員一起工作。

注意

若要使用 Dreamweaver 影像編輯功能，您不需要在電腦上安裝 Macromedia Fireworks。

Dreamweaver 具有下列的影像編輯功能：

影像重新取樣會增加或減少重新調整大小之 JPEG 與 GIF 影像檔的像素，以盡量符合原始影像的外觀。重新取樣影像會縮減影像檔的大小，使得下載效能改善。

當您重新調整 Dreamweaver 中的影像大小時，您可以重新取樣以容納其新的尺寸。當重新取樣點陣圖物件時，會在影像中增加或移除像素，以使其變大或縮小。將影像重新取樣提高解析度，基本上會造成品質些許流失。然而將影像重新取樣降低解析度，則一定會造成資料流失，品質也通常會降低。

裁切能讓您藉由縮小影像範圍來編輯影像。通常您會想要裁切影像以強調影像的主題，並移除影像中感興趣的範圍四周不想要之環景。

亮度/對比可修改影像中像素的對比或亮度。這會影響到影像的標示、陰影和中間色調。在更正太暗或太亮的影像時，通常您會使用「亮度/對比」。

銳利化會藉由增加影像內所發現之邊界的對比來調整影像焦點。當您掃瞄影像或拍攝數位相片時，大部份影像擷取軟體的預設動作，都是柔化影像中的物件邊緣。其可避免過度精緻的細節，在組成數位影像的像素中遺失。然而要在數位影像檔中帶出細節，通常需要銳利化影像，同時增加邊緣對比，並使影像顯得更銳利。

注意

Dreamweaver 影像編輯功能只能套用在 JPEG 和 GIF 影像檔格式。其他點陣圖影像檔格式無法使用這些影像編輯功能進行編輯。

相關主題

  • 調整影像大小
  • 裁切影像
  • 調整影像的亮度和對比
  • 銳利化影像


插入影像

當您將影像插入 Dreamweaver 文件時，Dreamweaver 會自動在 HTML 原始碼中產生影像檔的參考。若要確保這個參考的正確性，影像檔必須位於目前的網站中。如果它不在目前的網站中，Dreamweaver 會詢問您是否要將檔案複製到這個網站。

您也可以動態地插入影像。動態影像便是經常變更的影像。例如，廣告橫幅旋轉系統需要從可能的橫幅清單中，隨機選取單一的橫幅，然後在要求頁面時，再以動態方式顯示所選取橫幅的影像。如需詳細資訊，請參閱使影像成為動態。

若要插入影像：

  1. 在「文件」視窗中將插入點置於您想要影像出現的地方，然後執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，按一下「影像」圖示。 這是描述功能的圖片。
    • 在「插入」列的「常用」類別中，將影像圖示拖曳到「文件」視窗 (如果您要在程式碼中工作，則拖曳到「程式碼」檢視視窗)。
    • 選取「插入＞影像」。
    • 將影像從「資源」面板 (「視窗＞資源」) 拖曳到「文件」視窗中想要的位置；然後跳到步驟 3。
    • 將影像從「網站」面板拖曳到「文件」視窗中想要的位置；然後跳到步驟 3。
    • 將影像從桌面拖曳到「文件」視窗中想要的位置；然後跳到步驟 3。
  2. 在出現的對話方塊中，執行下列其中一項作業：
    • 選取「檔案系統」來選擇圖形檔。
    • 選取「資料來源」來選擇動態影像來源。
  3. 以瀏覽方式選取您要插入的影像或內容來源。

    如果您是在未儲存的文件中工作，Dreamweaver 會產生一個 file:// 影像檔參考。當您將文件儲存在網站中的任何位置時，Dreamweaver 會將這個參考轉換為文件的相對路徑。

  4. 按一下「確定」。

    如果您已啟動「偏好設定」中的對話方塊，就會出現「影像標籤輔助功能屬性」對話方塊 (請參閱最佳化具有輔助功能的頁面設計工作區)。

  5. 在「替代文字」和「詳細說明」文字方塊中輸入值，然後再按一下「確定」。

    注意

    您可以視需要在其中一個文字方塊，或是兩個方塊中都輸入資訊。

    如需詳細資訊，請參閱設定影像標籤存取屬性對話方塊選項。

    影像就會出現在文件中。

    注意

    如果您按一下「取消」，影像會出現在文件中，但是 Dreamweaver 不會將存取標籤或屬性與該影像建立關聯。
  6. 在「屬性」檢視窗中 (視窗＞屬性)，設定影像的屬性。

    如需詳細資訊，請參閱設定影像屬性。

    若要編輯影像的輔助功能屬性，請參閱編輯影像的輔助功能屬性。

相關主題

  • 設定背景影像或背景頁面顏色
  • 使用間隔影像

編輯影像的輔助功能屬性

如果您對影像插入輔助功能屬性 (請參閱插入影像)，就可以在 HTML 程式碼中編輯這些值。

若要編輯影像的存取值：

  1. 在「文件」視窗中，選取影像。
  2. 請執行下列其中一項作業：
    • 在「程式碼」檢視中編輯適當的影像屬性。
    • 按下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後再選取「編輯標籤程式碼」。
    • 在「屬性」檢視窗中編輯「Alt」值。


插入影像預留位置

影像預留位置是將最終插圖加入到網頁之前所使用的圖形。

若要插入影像預留位置：

  1. 在「文件」視窗中，將插入點置於您想要插入預留位置圖形的地方。
  2. 請執行下列其中一項作業：
    • 在「常用插入」列中，按一下「影像預留位置」圖示。 這是描述功能的圖片。
    • 選取「插入＞影像預留位置」。

    「影像預留位置」對話方塊便會出現。

  3. 在對話方塊中，選取影像預留位置的選項。

    您可以設定預留位置的大小和顏色，並且對它提供文字標籤。如需關於設定這些選項的詳細資訊，請參閱完成「影像預留位置」對話方塊。

  4. 按一下「確定」。

預留位置的顏色、大小屬性和標籤便會出現，如下所示。

如果在瀏覽器視窗中檢視，標籤和大小文字並不會出現。

相關主題

  • 取代影像預留位置
  • 調整影像大小
  • 設定影像預留位置屬性
  • 使用 Fireworks 修改 Dreamweaver 影像預留位置

取代影像預留位置

影像預留位置並非瀏覽器中顯示的圖形影像。發佈網站之前，您應該以適合 Web 的圖形檔 (如 GIF 或 JPEG)，來取代任何已經加入的影像預留位置。

如果您有 Fireworks，便可以從 Dreamweaver 影像預留位置來建立新的圖形。這個新影像會設定成與預留位置影像同樣的大小。您可以編輯這個影像，然後在 Dreamweaver 中取代它。如需關於在 Fireworks 中建立取代影像的詳細資訊，請參閱使用 Fireworks 修改 Dreamweaver 影像預留位置。

若要更新影像來源：

  1. 在「文件」視窗中，執行下列其中一項作業：
    • 按兩下影像預留位置
    • 請按一下影像預留位置來選取它；然後在「屬性」檢視窗中 (「視窗＞屬性」)，按一下「原始檔」文字方塊旁的資料夾圖示。

    「影像來源」對話方塊便會出現。

  2. 在這個對話方塊中，移至您要用來取代影像預留位置的影像。
  3. 按一下「確定」。

    選取的影像就會出現在文件中。


對齊影像

您可以將影像對齊文字、其他影像、外掛程式或同一行中的其他元素。您也可以設定影像的水平對齊方式。

若要對齊影像：

  1. 在「設計」檢視中選取影像。
  2. 在「屬性」檢視窗中設定影像的對齊屬性。

您可以設定與同一段落或行中其他元素的對齊方式。

注意

HTML 並未提供像某些文字處理應用程式一樣，以文字圍繞影像輪廓來換行的方式。

下列為對齊選項：

預設通常是指定基準線對齊 (這個預設值會依網站訪客的瀏覽器而有所不同)。

基準線和靠下對齊會將文字 (或同一段落中其他元素) 的基準線對齊選取物件的底部。

靠上對齊會將影像的頂端對齊目前行中最高項目 (影像或文字) 的頂端。

置中對齊會將影像的中央對齊目前行的基準線。

文字上方會將影像的頂端，與文字行中最高字元的頂端對齊。

絕對中間會將影像的中央對齊目前行中文字的中央。

絕對下方會將影像的底部對齊行中文字 (包括筆畫低於基線的字母，如字母 g) 的底部。

靠左對齊會將選取的影像置於左方邊界，讓文字在它的右方換行。如果靠左對齊的文字優先於行中的物件，它通常會強制靠左對齊的物件換行到新行。

靠右對齊會將影像置於右方邊界，讓文字在它的左方換行。如果靠右對齊的文字優先於行中的物件，它通常會強制靠右對齊的物件換行到新行。


調整影像大小

您可以在 Dreamweaver 中，以目視方式調整元素 (如影像、外掛程式、Macromedia Shockwave 或 Flash 影片、Applet 及 ActiveX 控制項等) 的大小。

以目視方式調整 Dreamweaver 中的影像大小，讓您能夠看見影像在不同尺寸時影響版面的方式。以目視方式調整影像大小不會將影像檔縮放為您指定的比例。如果您是使用目視方式調整 Dreamweaver 中影像的大小，而不是使用影像編輯應用程式 (例如 Macromedia Fireworks) 將影像檔縮放為需要的大小，則使用者的瀏覽器在載入該頁面時必須縮放影像。這可能同時造成頁面下載時間延長，並且該影像無法適當地在使用者的瀏覽器中顯示。若要減少下載時間並確保所有影像實體以相同大小出現，請使用影像編輯應用程式來縮放影像。

若要目視調整元素大小：

  1. 在「文件」視窗中選取元素 (例如影像或 SWF 檔案)。

    調整大小控制點就會出現在元素的底部、右邊和右下角。如果調整大小控制點沒有出現，請在您想要調整大小的元素外面按一下，將它重新選取，或按一下標籤選取器中的適當標籤來選取此元素。

  2. 請依下列其中一種方式來調整元素大小：
    • 若要調整元素的寬度，請拖曳右邊的選取範圍控點。
    • 若要調整元素的高度，請拖曳底部的選取範圍控點。
    • 若要同時調整元素的寬度和高度，請拖曳角落的選取範圍控點。
    • 若要在調整元素尺寸時保存它的比例 (它的寬高比)，請按住 Shift 並拖曳角落的選取範圍控點。

以目視方式調整元素大小，最小可調整成 8 x 8 像素。若要將元素的寬度和高度調整為更小的大小 (例如 1 x 1 像素)，請使用「屬性」檢視窗輸入數值。

若要將調整過的元素還原成原來的尺寸，請在「屬性」檢視窗中刪除「W」和「H」文字方塊中的值，或按一下「重設大小」按鈕。

若要將影像回復為原來的大小：

  • 按一下影像「屬性」檢視窗中的「重設大小」按鈕。 這是描述功能的圖片。

若要重新取樣調整過大小的影像：

  1. 如上述重新調整影像的大小。
  2. 按一下影像「屬性」檢視窗中的「重新取樣」按鈕。 這是描述功能的圖片。

    注意

    您只能重新取樣點陣圖影像，而不能重新取樣影像預留位置或元素。

相關主題

  • 編輯 Dreamweaver 中的影像


裁切影像

Dreamweaver 讓您能夠裁切 (或修剪) 點陣圖檔案影像。

注意

當您使用 Dreamweaver 裁切影像時，磁碟上的來源影像檔會變更，因此您可能想要保留影像檔的備份複本，以便當需要時可以回復到原來的影像。

若要裁切影像檔：

  1. 開啟包含您想要裁切之影像的頁面，選取該影像，然後執行下列其中一項作業：
    • 按一下影像「屬性」檢視窗中的「裁切工具」圖示。 這是描述功能的圖片。
    • 選取「修改＞影像＞裁切」。

    裁切控制點會出現在選取影像的周圍。

  2. 請調整裁切控制點，直到邊界方框圍繞您要保留之點陣圖影像的區域為止。
  3. 在邊界方框內按兩下，或是按 Enter 鍵來裁切選取範圍。

    這時會出現一個對話方塊，通知您磁碟上正在裁切的影像檔將會變更。按一下「確定」。

    這時會移除在邊界方框外所選取點陣圖中的每一個像素，但文件中的其他物件則維持不變。

  4. 請預覽此影像，並確定它能符合您預期的樣子。

若要還原裁切命令造成的效果：

  • 選取「編輯＞還原裁切」以回復至原來的影像。

    您可以還原「裁切」命令造成的效果 (並回復至原來的影像檔) 直到您離開 Dreamweaver，或是在外部影像編輯應用程式編輯檔案為止。

相關主題

  • 編輯 Dreamweaver 中的影像
  • 調整影像的亮度和對比
  • 銳利化影像


使用 Fireworks 最佳化影像

您可以使用 Dreamweaver 最佳化您網頁中的影像。

若要最佳化影像：

  1. 開啟包含您想要最佳化之影像的頁面，選取該影像，然後執行下列其中一項作業：
    • 按一下影像「屬性」檢視窗中的「使用 Fireworks 最佳化」按鈕。 這是描述功能的圖片。
    • 選取「修改＞影像＞最佳化 Fireworks 中的影像」。

    便會出現「Fireworks 最佳化影像」對話方塊。

  2. 按一下「確定」。

相關主題

  • 編輯 Dreamweaver 中的影像
  • 插入影像
  • 裁切影像
  • 銳利化影像


調整影像的亮度和對比

亮度/對比可修改影像中像素的對比或亮度。這會影響到影像的標示、陰影和中間色調。在更正太暗或太亮的影像時，通常您會使用「亮度/對比」。

若要調整影像的亮度和對比：

  1. 開啟包含您想要調整之影像的頁面，選取該影像，然後執行下列其中一項作業：
    • 請按一下影像「屬性」檢視窗中的「亮度/對比」按鈕 這是描述功能的圖片。
    • 選取「修改＞影像＞亮度/對比」

    「亮度/對比」對話方塊便會出現。

  2. 請拖曳「亮度和對比」滑動軸來調整設定值。

    值的範圍從 -100 到 100。

  3. 按一下「確定」。

相關主題

  • 編輯 Dreamweaver 中的影像
  • 插入影像
  • 裁切影像
  • 銳利化影像


銳利化影像

銳利化會增加物件邊緣四周的像素對比，並增加影像的定義或銳利。

若要銳利化影像：

  1. 開啟包含您想要銳利化之影像的頁面，選取該影像，然後執行下列其中一項作業：
    • 按一下影像「屬性」檢視窗中的「銳利化」按鈕。 這是描述功能的圖片。
    • 選取「修改＞影像＞銳利化」。

    「銳利化」對話方塊便會出現。

  2. 您可以藉由拖曳滑動軸控制項來指定 Dreamweaver 套用在影像的銳利化程度，或在文字方塊中輸入介於 0 到 10 的值。

    由於您使用「銳利化」對話方塊調整影像的銳利程度，您可以預覽影像的變更。

  3. 按一下「確定」。
  4. 請選取「檔案＞儲存」來儲存您的變更，或是選取「編輯＞還原銳利化」來回復至原始的影像。

若要還原銳利化命令造成的效果：

  • 選取「編輯＞還原銳利化」來回復至原始的影像。

    您只能在儲存包含該影像的頁面之前，還原「銳利化」命令造成的效果 (並回復至原始的影像檔)。一旦您儲存該頁面，對影像所做的變更將永久儲存。

相關主題

  • 編輯 Dreamweaver 中的影像
  • 裁切影像
  • 調整影像的亮度和對比


建立滑鼠變換影像

您可以在頁面中插入滑鼠變換影像。滑鼠變換影像是一種在瀏覽器中檢視時，當指標滑過它時會變更的影像。

在開始之前，請先取得一對或多對要進行滑鼠變換影像的影像。您可以使用兩個影像檔來建立滑鼠變換影像。主要影像 (頁面剛載入時顯示的影像) 和次要影像 (指標滑過主要影像上方時出現的影像)。變換影像中的兩個影像必須大小一樣；如果影像不是同樣大小，則 Dreamweaver 會自動調整第二個影像的大小以符合第一個影像的屬性。

滑鼠變換影像會自動設定成回應「滑鼠滑過時」事件。如需關於設定影像以回應不同事件 (例如，滑鼠按下) 或有關編輯調換影像以顯示不同影像的詳細資訊，請參閱調換影像。

若要建立變換影像：

  1. 在「文件」視窗中，將插入點置於您想要變換影像出現的地方。
  2. 使用下列其中一種方法插入變換影像：
    • 在「插入」列中，選取「常用」，然後按一下「滑鼠變換影像」圖示。
    • 在「插入」列中，選取「常用」，然後將「滑鼠變換影像」圖示拖曳到「文件」視窗中想要的位置。
    • 選取「插入＞互動式影像＞滑鼠變換影像」。

      「插入滑鼠變換影像」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定影像滑鼠變換影像對話方塊選項。

  4. 按一下「確定」。
  5. 選取「檔案＞在瀏覽器中預覽」，或按 F12 鍵。

    您無法在「設計」檢視中看到滑鼠變換影像的效果。

  6. 在瀏覽器中，移動指標滑過原始影像。

    顯示應該會切換為滑鼠變換影像。

相關主題

  • 插入導覽列


使用外部影像編輯器

即使在 Dreamweaver 中，您仍然可以在外部影像編輯器中開啟選取的影像；當您儲存編輯的影像檔並且返回 Dreamweaver 後，您對影像所做的任何變更都可以在「文件」視窗中看到。

您可以將 Fireworks 設定為您主要的外部編輯器。如需詳細資訊，請參閱使用 Fireworks。

若要啟動外部影像編輯器，請執行下列其中一項作業：

  • 按兩下您要編輯的影像。
  • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 您要編輯的影像，然後再選取「編輯程式＞瀏覽」並選取編輯器。
  • 選取您要編輯的影像，然後按一下「屬性」檢視窗中的「編輯」。
  • 在「網站」面板中按兩下影像檔，啟動主要影像編輯器。如果您還沒有指定影像編輯器，則 Dreamweaver 會啟動這個檔案型態預設的編輯器。

    注意

    當您從「網站」面板開啟影像時，Fireworks 的整合功能不會發生作用；Fireworks 不會開啟原始 PNG 檔案。若要使用 Fireworks 整合功能，請從「文件」視窗開啟影像。

如果回到 Dreamweaver 視窗時看不到更新過的影像，請選取這個影像然後按一下「屬性」檢視窗中的「重新整理」按鈕。

相關主題

  • 指定從 Dreamweaver 啟動的編輯器
  • 設定外部影像編輯器偏好設定


套用行為到影像

您可以將任何可用的行為套用到影像或影像連結區。當您將行為套用到連結區時，Dreamweaver 會將 HTML 原始碼插入到 area 標籤中。有三個專門套用到影像的行為：「預先載入影像」、「調換影像」和「復原調換影像」。

「預先載入影像」會將不能立即出現在頁面上的影像 (如將要與行為、圖層或 JavaScript 對調的影像)，載入到瀏覽器的快取中。這樣就可避免在影像應該出現時由於下載而導致延遲 (請參閱預先載入影像)。

「調換影像」會藉由變更 img 標籤的 SRC 屬性，將一個影像與另一個影像調換。請使用這個動作來建立按鈕變換影像和其他影像效果 (包括一次調換多個影像)。(請參閱調換影像)。

「復原調換影像」會將上一組調換的影像復原為它們先前的原始檔案。只要您將「調換影像」動作附加到物件，這個動作就會依預設值自動被加入；您應該不需要以手動方式選取它 (請參閱復原調換影像)。

您也可以使用行為來建立較複雜的導覽系統，例如導覽列或跳頁選單 (請參閱使用導覽列和插入跳頁選單)。


參考

本節將提供這一章裡所介紹的下列面板、對話方塊和檢視窗的相關資訊：

  • 設定影像屬性
  • 設定影像標籤存取屬性對話方塊選項
  • 設定影像描述對話方塊選項
  • 完成「影像預留位置」對話方塊
  • 設定影像預留位置屬性
  • 設定外部影像編輯器偏好設定
  • 設定影像滑鼠變換影像對話方塊選項
  • 設定亮度和對比對話方塊選項
  • 設定銳利化影像對話方塊選項


設定影像屬性

這個「屬性」檢視窗可以讓您設定影像的屬性。如果您看不到所有的影像屬性 (如下列畫面範例所示)，請按一下右下角的展開箭頭。

若要設定影像屬性：

  1. 請使用縮圖影像下方的文字欄位來設定名稱，以便在使用 Dreamweaver 行為 (例如「調換影像」) 或使用 Script 語言 (例如 JavaScript 或 VBScript) 時能夠參考這個影像。
  2. 請設定下列任一種選項：

    寬和高是以像素為單位的影像寬度和高度。當您將影像插入頁面時，Dreamweaver 會自動以影像原始的尺寸來更新這些文字方塊。

    如果您將「寬」和「高」設定成無法對應影像實際寬度和高度的值，影像可能無法在瀏覽器中正確顯示 (若要回復原始值，按一下「寬」和「高」文字方塊標籤，或出現在輸入新值之「寬」和「高」文字方塊右邊的「重設」影像大小按鈕。)

    注意

    您可以變更這些值來縮放這個影像實體的顯示大小，但是這樣並不會減少下載時間，因為在縮放影像前瀏覽器仍會下載所有的影像資料。若要減少下載時間並確保所有影像實體以相同大小出現，請使用影像編輯應用程式來縮放影像。

    原始檔會指定影像的原始檔案。請按一下資料夾圖示來選擇原始檔案，或輸入路徑。

    如需關於動態影像來源的詳細資訊，請參閱使影像成為動態。

    連結會指定影像的超連結。請將「指向檔案」圖示拖曳到「網站」面板中的檔案，按一下資料夾圖示來選擇網站上的文件，或以手動方式輸入 URL。如需關於建立連結的詳細資訊，請參閱建立連結。

    對齊會對齊同一行中的影像和文字 (請參閱對齊影像)。

    替代會指定在純文字瀏覽器或設定成手動下載影像之瀏覽器中，要出現在這個影像位置上的替代文字。對於配合純文字瀏覽器使用語音合成器的視障使用者，這些文字會大聲地唸出來。在某些瀏覽器中，當指標滑過影像時這個文字也會出現。

    地圖名稱和連結區工具可以讓您標記和建立用戶端影像地圖 (請參閱使用影像地圖)。

    垂直間距和水平間距會以像素為單位沿著影像的邊加入間距。「垂直間距」會沿著影像的頂端和底部加入間距。「水平間距」會沿著影像的左邊和右邊加入間距。

    目標會指定要在其中載入連結頁面的頁框或視窗(如果影像沒有連結到另外的檔案，則此選項就不會出現)。目前頁框組中所有頁框的名稱會出現在「目標」清單中。您也可以選擇下列保留的目標名稱：

    • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
    • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的，則會在完整的瀏覽器視窗中載入連結的檔案。
    • _self 會在與連結所在的同一個頁框或視窗載入已連結的檔案。這個目標是預設值，所以您通常不需要指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的檔案，同時移除所有頁框。

    低解析來源會指定應該在主影像之前載入的影像。許多設計人員會使用主影像的 2 位元 (黑白) 版本，因為它能快速載入，讓訪客知道將會看到什麼。

    邊框是以像素為單位的影像邊框寬度。預設是沒有邊框。

    編輯會啟動您在「外部編輯器」偏好設定中指定的影像編輯器，並且開啟選取的影像 如需關於設定外部影像編輯器的詳細資訊，請參閱使用外部影像編輯器。

    最佳化會開啟「最佳化」對話方塊。 這是描述功能的圖片。 如需關於最佳化影像的資訊，請參閱從 Dreamweaver 來最佳化 Fireworks 影像。

    裁切 這是描述功能的圖片。 能讓您修剪影像大小，或從選取的影像移除不需要的區域。如需關於在 Dreamweaver 中編輯影像的資訊，請參閱編輯 Dreamweaver 中的影像。

    重新取樣 這是描述功能的圖片。 能讓您重新取樣調整過大小的影像，依其新的大小及形狀改善影像品質。如需關於在 Dreamweaver 中編輯影像的資訊，請參閱編輯 Dreamweaver 中的影像。

    亮度/對比能讓您調整影像的亮度和對比設定。 這是描述功能的圖片。 如需關於在 Dreamweaver 中調整影像亮度和對比設定的資訊，請參閱編輯 Dreamweaver 中的影像。

    銳利化能讓您調整影像的銳利度。 這是描述功能的圖片。 如需關於在 Dreamweaver 中調整影像銳利度的資訊，請參閱編輯 Dreamweaver 中的影像。

    重設大小 這是描述功能的圖片。 會將「寬」和「高」的值重設成影像的原始大小。當您調整所選取影像的值時，此按鈕會出現在「寬」和「高」文字方塊的右邊。


設定影像標籤存取屬性對話方塊選項

這個對話方塊是用來設定影像標籤輔助功能選項。您可以依需求輸入其中一個屬性，或是兩個都輸入。螢幕讀取器會讀取影像的「替代」屬性。

若要設定影像標籤輔助功能選項：

  1. 在「替代」文字方塊中，輸入影像的名稱或簡短描述。

    螢幕讀取器會朗讀您在這裡輸入的資訊。輸入的資訊限制在 50 個字元左右。如需較詳細的描述，可考慮在「詳細說明」文字方塊中提供該檔案的連結，以便對影像提供更詳細的資訊。

  2. 在「詳細說明」文字方塊中，請輸入當使用者按一下影像或按一下資料夾圖示來瀏覽檔案時，將會顯示之檔案的位置。

    這個文字方塊會提供與影像相關，或是能提供有關影像詳細資訊的檔案連結。

  3. 按一下「確定」。

    注意

    如果您按「取消」，則影像會出現在文件中，但是 Dreamweaver 並沒有將存取標籤或屬性與影像建立關聯。

相關主題

  • 插入影像


設定影像描述對話方塊選項

這個對話方塊是用來指定影像描述。螢幕讀取器會朗讀這項影像描述。

若要指定影像描述：

  1. 在「影像描述 (替代文字)」文字方塊中，輸入影像的名稱或簡短描述。

    螢幕讀取器會朗讀您在這裡輸入的資訊。輸入的資訊限制在 50 個字元左右。

  2. 按一下「確定」。


完成「影像預留位置」對話方塊

這個對話方塊是用來建立影像預留位置圖形。

若要建立影像預留位置圖形：

  1. 在「名稱」文字方塊中，輸入您想要顯示為影像預留位置標籤的文字。這是個選擇性步驟；如果您不想顯示標籤，請讓文字方塊保留空白。

    這個名稱必須以字母開頭而且只能含有字母和數字；不允許有空格和高 ASCII 字元。

  2. (必要項) 在「寬度」和「高度」文字方塊中，請輸入以像素為單位來設定影像大小的數字。
  3. (選擇性) 對於「顏色」，請執行下列其中一項作業來套用顏色：
    • 使用顏色挑選器來選取顏色。
    • 請輸入顏色的十六進位值 (例如 #FF0000)。
    • 請輸入網頁安全色的名稱 (例如，紅色)。
  4. (選擇性) 在「替代文字」中，請針對只使用文字瀏覽器的檢視者，輸入可描述影像的文字。
  5. 按一下「確定」。

    影像預留位置便會出現在文件中。

    注意

    影像標籤會自動插入到含有空白 src 屬性的 HTML 程式碼中。


設定影像預留位置屬性

若要設定影像預留位置的屬性，請在「文件」視窗中選取預留位置，然後再選取「視窗＞屬性」來顯示「屬性」檢視窗。若要查看所有屬性，請按一下右下角的展開箭頭。

使用「屬性」檢視窗來設定預留位置影像的名稱、寬度、高度、影像來源、替代文字描述、對齊和顏色。

在預留位置「屬性」檢視窗中，灰色的文字方塊和「對齊」文字方塊是停用的。當您用影像取代預留位置時，您可以在影像「屬性」檢視窗中設定這些屬性。

若要設定影像預留位置屬性：

  • 請設定下列任一種選項：

    寬和高是以像素為單位設定影像的寬度和高度。

    原始檔會指定影像的原始檔案。對於預留位置影像，這個文字方塊是空白。按一下「瀏覽」按鈕來選取預留位置圖形的取代影像。

    連結會指定影像預留位置的超連結。請將「指向檔案」圖示拖曳到「網站」面板中的檔案，按一下資料夾圖示來選擇網站上的文件，或以手動方式輸入 URL。

    替代會指定在純文字瀏覽器或設定成手動下載影像之瀏覽器中，要出現在這個影像位置上的替代文字。對於配合純文字瀏覽器使用語音合成器的視障使用者，這些文字會大聲地唸出來。在某些瀏覽器中，當指標滑過影像時這個文字也會出現。

    建立可以讓您啟動 Fireworks 來建立取代影像。除非您的電腦上也安裝了 Fireworks，否則「建立」按鈕是停用的。如需關於在 Fireworks 中建立取代影像的詳細資訊，請參閱使用 Fireworks 修改 Dreamweaver 影像預留位置。

    重設大小會將「寬」和「高」的值重設成影像的原始大小。

    顏色可以讓您指定影像預留位置的顏色。


設定外部影像編輯器偏好設定

使用「檔案型態/編輯器」偏好設定來選取開啟和編輯圖形檔的影像編輯器。您可以設定編輯器會開啟哪些檔案型態；您也可以選取多個影像編輯器。例如，您可以設定 Dreamweaver 在您想要編輯 GIF 時應該啟動 Fireworks，而在您想要編輯 JPG 或 JPEG 時則啟動不同的影像編輯器。

若要設定現有檔案型態的外部影像編輯器：

  1. 請執行下列其中一項作業，開啟「檔案型態/編輯器偏好設定」對話方塊：
    • 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後在左邊的「分類」清單中選取「檔案型態/編輯器」。
    • 選取「編輯＞使用外部編輯器編輯」，然後再選取「檔案型態/編輯器」。
  2. 在「副檔名」清單中，選取您要對它設定外部編輯器的副檔名。
  3. 按一下「編輯器」清單上方的「新增」(+) 按鈕。
  4. 在「選取外部編輯器」對話方塊中，選取您要針對這種檔案型態啟動作為編輯器的應用程式。
  5. 在「偏好設定」對話方塊中，如果您要這個編輯器成為這種檔案型態的主要編輯器，請按一下「設為主要的」。
  6. 如果您還要對這個檔案型態設定其他編輯器，請重複步驟 3 和 4。

    當您選擇要編輯這種影像類型時，Dreamweaver 會自動使用主要編輯器。您也可以在「文件」視窗中，從影像的快速選單中選取其他列出的編輯器。

若要新增檔案型態到「副檔名」清單：

  1. 在「檔案型態/編輯器偏好設定」對話方塊中，按一下「副檔名」清單上方的「新增」(+) 按鈕。

    「副檔名」清單中就會出現一個文字方塊。

  2. 輸入您想要針對它啟動編輯器之檔案型態的副檔名。
  3. 若要針對這個檔案型態選取外部編輯器，請按一下「編輯器」清單上方的「新增」(+) 按鈕。
  4. 在出現的對話方塊中，選取您要用來編輯這種影像類型的應用程式。
  5. 如果您要這個編輯器成為這種影像類型的主要編輯器，請按一下「設為主要的」。

若要變更現有編輯器的偏好設定：

  1. 在「檔案型態/編輯器偏好設定」對話方塊中，於「副檔名」清單選取您要變更以檢視現有編輯器的檔案型態。
  2. 在「編輯器」清單中，選取您想要的編輯器，然後執行下列其中一項作業：
    • 按一下「編輯器」清單上方的「新增」(+) 或「刪除」(-) 按鈕，以新增或移除編輯器。
    • 按一下「設為主要的」按鈕，以變更編輯時預設要啟動的編輯器。

如需「外部編輯器」偏好設定中其他選項的詳細資訊，請參閱啟動媒體檔案的外部編輯器。


設定影像滑鼠變換影像對話方塊選項

滑鼠變換影像是一種在瀏覽器中檢視時，當指標滑過它時會變更的影像。

注意

若要插入滑鼠變換影像，您必須有兩個影像：即主要影像和次要影像。變換影像中的兩個影像必須大小一樣；如果影像不是同樣大小，則 Dreamweaver 會自動調整第二個影像的大小以符合第一個影像的屬性。

若要設定「影像滑鼠變換影像」對話方塊選項：

  1. 在「影像名稱」文字方塊中，輸入變換影像的名稱。
  2. 在「原始影像」文字方塊中，請按一下「瀏覽」並且選取要在頁面載入時顯示的影像，或是直接在文字方塊中輸入影像檔的路徑。
  3. 在「滑鼠變換影像」文字方塊中，按一下「瀏覽」並選取要在指標滑過原始影像時顯示的影像，或是直接在文字方塊中輸入影像檔的路徑。
  4. 如果您希望影像預先載入到瀏覽器快取中，讓使用者指標滑過影像時不會發生延遲，請選取「預先載入影像」選項。
  5. (選擇性) 在「替代文字」中，請針對只使用文字瀏覽器的檢視者，輸入可描述影像的文字。
  6. 在「按下時，前往的 URL」文字方塊中，請按一下「瀏覽」並且選取檔案，或輸入要在使用者按一下滑鼠變換影像時開啟之檔案的路徑。

    注意

    如果您不設定影像的連結，Dreamweaver 會在變換影像行為所在的 HTML 原始碼中，插入一個 Null 連結 (#)。如果您移除這個 Null 連結，滑鼠變換影像將無法繼續運作。
  7. 按一下「確定」以關閉「插入滑鼠變換影像」對話方塊。

相關主題

  • 建立滑鼠變換影像
  • 調換影像


設定亮度和對比對話方塊選項

亮度/對比可修改影像中像素的對比或亮度。

若要調整影像的亮度或對比：

  1. 請拖曳「亮度和對比」滑動軸來調整設定值。

    值的範圍從 -100 到 100。

  2. 按一下「確定」。

相關主題

  • 編輯 Dreamweaver 中的影像
  • 調整影像的亮度和對比


設定銳利化影像對話方塊選項

銳利化會增加物件邊緣四周的像素對比，並增加影像的定義或銳利。

若要銳利化影像：

  1. 藉由拖曳滑動軸控制項來指定套用在影像的銳利化程度，或在文字方塊中輸入介於 0 到 10 的值。

    由於您使用「銳利化」對話方塊調整影像的銳利程度，您可以預覽影像的變更。

  2. 當您對影像的變更感到滿意時，請按一下「確定」。
  3. 請選取「檔案＞儲存」來儲存您的變更，或是選取「編輯＞還原銳利化」來回復至原始的影像。

相關主題

  • 編輯 Dreamweaver 中的影像
  • 銳利化影像


連結和導覽

一旦您設定 Macromedia Dreamweaver 8 網站以便儲存網站文件，並且建立 HTML 網頁之後，便會希望能建立您的文件與其他文件之間的連結。

Dreamweaver 提供了數種方式，讓您能建立到文件、影像、多媒體檔或可下載軟體的超文字連結。您可以在文件內的任何文字或影像上建立連結，包括位於標題、清單、表格、圖層或頁框中的文字或影像。

若要檢視檔案連結在一起的樣子，請使用網站地圖。在網站地圖中，您可以將新文件加入網站中、建立和移除文件連結，以及檢查相關檔案的連結。如需詳細資訊，請參閱檢視網站地圖。

有數種不同的方式可以建立和管理連結。有些網頁設計人員喜歡在工作時，先建立與不存在之網頁或檔案的連結，但是有些人則喜歡先建立所有的檔案和網頁，再新增這些連結。管理連結的另一個方式是建立「預留位置」網頁，這是為了最後檔案而預留的，讓您在實際完成所有網頁之前，能快速地新增連結並檢查連結。如需有關檢查連結的詳細資訊，請參閱檢查是否有無效、外部或孤立的連結。

本章包含下列各節：

了解文件位置和路徑

跳頁選單

導覽列

關於影像地圖

建立連結

管理連結

插入跳頁選單

使用導覽列

使用影像地圖

將 JavaScript 行為附加到連結

檢查是否有無效、外部或孤立的連結

修正無效的連結

在 Dreamweaver 中開啟連結的文件


了解文件位置和路徑

了解連結的來源文件，和連結的目的文件之間的檔案路徑，對建立連結而言是必要的。

每個網頁都有唯一的位址，稱為「網址」(URL) 如需有關 URL 的詳細資訊，請參閱 World Wide Web Consortium 網站上的「命名和定址」網頁，網址是 www.w3.org/Addressing/。

但是，當您建立本機連結時 (在同一網站上，從某文件連結到另一個文件)，通常不需要替要連結的文件指定完整的 URL，可以只指定目前文件，或網站根目錄資料夾的相對路徑即可。

共有三種類型的連結路徑：

  • 絕對路徑 (如 http://www.macromedia.com/support/dreamweaver/contents.html)。如需詳細資訊，請參閱絕對路徑。
  • 文件相對路徑 (如 dreamweaver/contents.html)。如需詳細資訊，請參閱文件相對路徑。
  • 網站根目錄相對路徑 (如 /support/dreamweaver/contents.html)。如需詳細資訊，請參閱網站根目錄相對路徑。

使用 Dreamweaver，您可以很輕易地選取要對連結建立的文件路徑類型 (請參閱連結檔案和文件)。

注意

最好使用您喜歡且方便使用的連結類型 - 可以是網站或文件的相對路徑。與自行輸入路徑相反的方式是瀏覽連結，後者能確保輸入的路徑永遠都正確。


絕對路徑

絕對路徑 提供連結文件的完整 URL，包括要使用的通訊協定 (網頁通常使用 http://)。例如，http://www.macromedia.com/support/dreamweaver/contents.html 是絕對路徑。

您必須使用絕對路徑，才能連結到另一部伺服器上的文件。雖然本機連結 (連結到相同網站中的文件) 也可以使用絕對路徑連結，但是我們不鼓勵使用這個方法 — 如果您將網站移到另一個網域，則所有的本機絕對路徑連結都將會中斷。針對本機連結而言，如果您需要在網站內移動檔案，使用相對路徑也能提供較大的彈性。

注意

插入影像 (非連結) 時：如果您在位於遠端伺服器上且無法在本機硬碟上取用的影像上使用絕對路徑，您將無法在文件視窗中檢視影像，您必須在瀏覽器中預覽文件才能看到。如果可能的話，影像請使用文件或網站根目錄相對路徑。如需詳細資訊，請參閱插入影像。


文件相對路徑

文件相對路徑 對大多數網站中的本機連結而言，是最適合使用的路徑。當目前的文件和連結文件位於同一個資料夾，且未來可能仍會放在一起時，則文件相對路徑就特別好用。您也可以使用文件相對路徑，連結到另一個資料夾中的文件，只要透過資料夾階層，將路徑從目前的文件指定到連結的文件即可。

文件相對路徑的基本概念是省略目前文件和連結文件中相同的絕對 URL 部份，只提供路徑中不同的部份。

例如，假設您的網站結構如下：

您可以建立從 contents.html 到其他檔案的連結，如下所示：

  • 若要從 contents.html 連結到 hours.html (兩個檔案都位於相同的資料夾中)，檔案名稱就是相對路徑：hours.html。
  • 若要連結至 tips.html (位於名為 resources 的子資料夾中)，請使用相對路徑 resources/tips.html。

    每個正斜線 (/) 代表在資料夾階層中向下移動一層。

  • 若要連結至 index.html (位於父資料夾中，即 contents.html 所在位置的上一層)，請使用相對路徑 ../index.html。

    每個 ../ 代表資料夾階層向上移動一層。

  • 若要連結至 catalog.html (位於父資料夾的不同子資料夾中)，請使用相對路徑 ../products/catalog.html。

    ../ 會向上移到父資料夾，products/ 則是向下移動到 products 子資料夾。

當您將檔案群組視為一個群組移動時，例如，當您移動整個資料夾時，在該資料夾內的所有檔案，彼此之間會保留相同的相對路徑，您不需要更新在這些檔案之間的文件相對連結。但是，當您移動了內含文件相對連結的個別檔案，或移動了透過文件相對連結來連結的個別檔案時，就必須更新這些連結 (如果您使用「網站」面板移動或重新命名檔案，Dreamweaver 會自動更新所有相對連結)。

相關主題

  • 設定新連結的相對路徑
  • 設定本機資訊類別選項


網站根目錄相對路徑

網站根目錄相對路徑提供從網站根目錄資料夾到文件的路徑。如果您正在處理使用數個伺服器的大型網站，或裝載數個不同網站的伺服器，您可能會要使用這些路徑類型。但是，如果您不熟悉這種路徑類型，可能會侷限在使用文件相對路徑。

網站根目錄相對路徑以正斜線為開頭，這個斜線代表網站根目錄資料夾。例如，/support/tips.html 是到網站根目錄資料夾之 support 子資料夾內檔案 (tips.html) 的網站根目錄相對路徑。

如果是需要經常在資料夾間移動 HTML 檔的網站，網站根目錄相對路徑通常能提供指定網站中連結的最佳方式。移動內含根目錄相對連結的文件時，您不需要變更連結；例如，如果 HTML 檔對相關檔案 (如影像) 使用根目錄相對連結，則在您移動 HTML 檔時，它的相關檔案連結仍然有效。

但是，當您移動或重新命名具有根目錄相對連結的連結文件時，就必須更新這些連結，即使文件彼此相對的路徑並未變更。例如，如果您移動了資料夾，就必須更新該資料夾內檔案的所有根目錄相對連結 (如果您使用「網站」面板移動或重新命名檔案，Dreamweaver 會自動更新所有相對連結)。

相關主題

  • 設定新連結的相對路徑
  • 設定本機資訊類別選項


跳頁選單

跳頁選單是文件的彈出式選單，網站瀏覽者可以看到，其中列出連結到文件或檔案的選項。您可以建立到本身網站中文件的連結、到其他網站中文件的連結、電子郵件連結、到圖形或到任何可以在瀏覽器中開啟的檔案類型的連結。

跳頁選單可以包含三種基本元件：

  • (選擇性) 選單選項提示 (如選單項目的類別描述)，或是指示 (如「選擇一個：」)。
  • (必要項) 連結的選單項目清單：使用者會選取選項，而連結的文件或檔案會開啟。
  • (選擇性)「前往」按鈕。

相關主題

  • 插入跳頁選單


導覽列

導覽列由一個影像 (或一組影像) 組成，顯示方式會根據使用者的動作而有所變更。導覽列通常可提供一種簡單的方式，在網站上的網頁和檔案之間移動。

導覽列項目有四種狀態：

  • 一般狀態：當使用者還沒按過元素或還沒與元素進行互動時，影像所呈現的狀態。

    例如，在這個狀態中，元素看起來就像還沒有被按過。

  • 滑過：當指標移動滑過「一般狀態」的影像時，影像所出現的狀態。元素的外觀會變更 (例如，它可能變得較淡)，讓使用者知道可以與它進行互動。

  • 按下：按下元素之後，影像所出現的狀態。

    例如，當使用者按一下元素時，新的網頁會載入，而且導覽列仍會顯示，但是按過的元素會變暗，表示已經選取它。

  • 按下後滑過：按下元素之後，當指標滑過「按下」狀態的影像時，影像所出現的狀態。

    例如，影像變成暗灰色或灰色。您可以將這個狀態當做給使用者的視覺線索，表示當使用者還停留在網站的同一個位置時，不能再按這個元素。

您不必將這四個狀態都納入導覽列影像中；例如，您可能只需要「一般」和「按下」狀態。

相關主題

  • 使用導覽列


關於影像地圖

影像地圖指的是已分成數個區域或「連結區」的影像，當使用者按一下連結區時，就會發生動作 (例如，開啟新檔案)。

用戶端影像地圖會在 HTML 文件中儲存超文字連結資訊，不像伺服器端影像地圖是在個別的地圖檔中儲存。當網站瀏覽者按一下影像中的連結區時，相關的 URL 就會直接傳送給伺服器。這讓用戶端影像的地圖比伺服器端影像的地圖還快，因為伺服器不需要轉譯瀏覽者所按的位置。Netscape Navigator 2.0 和更新版本、NCSA Mosaic 2.1 和 3.0，以及所有版本的 Internet Explorer 都支援用戶端影像地圖。

Dreamweaver 不會變更現有文件中對伺服器端影像地圖的參考，您可以在同一個文件中使用用戶端影像地圖和伺服器端影像地圖。但是，可同時支援兩種影像地圖類型的瀏覽器會優先處理用戶端影像地圖。若要在文件中包含伺服器端影像地圖，您必須寫入適當的 HTML 程式碼。

相關主題

  • 使用影像地圖


建立連結

您可以在文件中建立數種連結類型：

  • 連結到另一個文件或檔案，如圖形檔、影片、PDF 或音效檔 (請參閱連結檔案和文件)。
  • 命名錨點連結會跳到文件內的特定位置 (請參閱連結到文件中的指定位置)。
  • 電子郵件連結會建立新的空白電子郵件，並已填妥收件者的地址 (請參閱建立電子郵件連結)。
  • Null 和 Script 連結可讓您將行為附加至物件，或建立會執行 JavaScript 程式碼的連結 (請參閱建立 Null 和 Script 連結)。

    注意

    在建立連結之前，請確定您了解文件相對路徑、網站根目錄相對路徑和絕對路徑的運作方式 (請參閱了解文件位置和路徑)。


連結檔案和文件

您可以使用「屬性」檢視窗和指向檔案圖示，建立從影像、物件或文字到另一個文件或檔案的連結。如需關於使用網站地圖來建立連結的相關資訊，請參閱修改網站地圖中的連結。

Dreamweaver 使用文件相對路徑，以建立連到網站上其他頁面的連結。您也可以指示 Dreamweaver 使用網站根目錄相對路徑來建立新連結。

注意

在建立文件相對路徑之前，務必要先儲存新檔案，文件相對路徑在沒有特定起點的情況下是無效的。如果您在儲存檔案之前就建立了文件相對路徑，Dreamweaver 會暫時使用 file:// 為開頭的絕對路徑，直到您儲存檔案為止。當您儲存檔案時，Dreamweaver 會將 file:// 路徑轉換成相對路徑。

本節包含下列主題：

  • 使用「屬性」檢視窗連結到文件
  • 使用指向檔案圖示來連結文件
  • 使用網站地圖連結文件
  • 使用「超連結」命令
  • 設定新連結的相對路徑

相關主題

  • 了解文件位置和路徑


使用「屬性」檢視窗連結到文件

您可以使用「屬性」檢視窗的資料夾圖示或「連結」文字方塊，建立從影像、物件或文字到另一個文件或檔案的連結。

若要利用「屬性」檢視窗的資料夾圖示或「連結」文字方塊來連結文件：

  1. 請在「文件」視窗的「設計」檢視中選取文字或影像。
  2. 開啟「屬性」檢視窗 (「視窗＞屬性」)，然後再執行下列其中一項作業：

    • 按一下「連結」文字方塊右邊的資料夾圖示來瀏覽並選取檔案。

      連結文件的路徑會出現在 URL 文字方塊中。使用「選取 HTML 檔案」對話方塊中的「相對於」彈出式選單，指出要製作文件相對或根目錄相對的路徑，然後再按一下「選取」。您所選取的路徑類型只會套用到目前的連結。如需詳細資訊，請參閱了解文件位置和路徑。

      您可以變更網站的「相對於」文字方塊預設設定。如需詳細資訊，請參閱設定新連結的相對路徑。

    • 在「連結」文字方塊中輸入文件的路徑和檔案名稱。

      若要連結至網站中的文件，請輸入文件相對或網站根目錄相對路徑。若要連結至網站外的文件，請輸入包含通訊協定 (如 http://) 的絕對路徑。您可以使用這個方法，輸入尚未建立之檔案的連結。

    對於文件相對路徑而言，會省略目前文件和連結文件中相同的絕對 URL 部份。如果您所連結的檔案與目前的文件在相同的資料夾中，請輸入檔案名稱；如果它是在子資料夾中，請提供子資料夾的名稱，然後再一個正斜線 (/)，然後是檔案名稱；如果它是在父資料夾中，請在檔案名稱前加上 ../ (其中“..”表示「在資料夾階層中向上一層」)。

  3. 從「目標」彈出式選單中，選取要開啟文件的位置。

    若要讓已連結的文件出現在目前視窗或頁框以外的其他地方，請在「屬性」檢視窗上的「目標」彈出式選單中選取選項：

    • _blank 會在新的且未命名的瀏覽器視窗中載入連結的文件。
    • _parent 會在上一層頁框或包含連結的頁框之上一層視窗中載入連結的文件。如果包含連結的頁框不是巢狀的，則會在完整的瀏覽器視窗中載入連結的文件。
    • _self 會在與連結相同的頁框或視窗中載入連結的文件。這個目標為預設值，因此您通常不用指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的文件，然後移除所有頁框。

      提示

      如果網頁上的所有連結都將設定為相同的目標，您可以選擇「插入＞檔頭標籤＞基本」，選取目標資訊，就可以一次指定這個目標。如需有關目標頁框的相關資訊，請參閱使用連結控制頁框內容。


使用指向檔案圖示來連結文件

指向檔案圖示可讓您建立從影像、物件或文字到另一個文件或檔案的連結。

若要使用「指向檔案」圖示來連結文件：

  1. 請在「文件」視窗的「設計」檢視中選取文字或影像。
  2. 在「屬性」檢視窗中，拖曳「連結」文字方塊右邊的指向檔案圖示，並將它指向另一個開啟的文件、已開啟的文件中可以看到的錨點，或是「檔案」面板中的文件。

    「連結」文字方塊會更新以顯示連結。

    注意

    只有在「文件」視窗中的文件沒有未最大化的情況下，才可以連結到開啟的文件。當您指向開啟的文件時，該文件會在您進行選取範圍時移到畫面的前景。
  3. 放開滑鼠按鈕。

若要在開啟的文件中建立選取範圍的連結：

  1. 請在「文件」視窗中選取文字。
  2. 從選取範圍按住 Shift 然後拖曳。

    「指向檔案」圖示會在您拖曳時出現。

  3. 將它指向另一個開啟的文件，或開啟文件中可以看到的錨點，或者「檔案」面板上的文件。

    注意

    只有在「文件」視窗中的文件沒有未最大化的情況下，才可以連結到開啟的文件。當您指向開啟的文件時，該文件會在您進行選取範圍時移到畫面的前景。
  4. 放開滑鼠按鈕。

相關主題

  • 設定新連結的相對路徑


使用網站地圖連結文件

您可以使用網站地圖來建立連結。您所建立的連結會放在所選 HTML 檔的底部，讓您可以快速建立跨越網站的連結。

若要使用網站地圖和「指向檔案」圖示來連結文件：

  1. 請按住網站地圖圖示並選取「地圖和檔案」，就能展開「檔案」面板，並顯示「網站檔案」和「網站地圖」檢視。
  2. 在網站地圖中選取 HTML 檔。

    「指向檔案」圖示會出現在檔案旁邊。

  3. 拖曳「指向檔案」圖示，並將它指向網站地圖中的另一個檔案，或是指向「網站檔案」檢視中的本機檔案。
  4. 放開滑鼠按鈕。

    在選取的 HTML 檔底部會放置含有連結檔名稱的超文字連結。當您建立網站以及要快速建立跨網站連結時，這個方法可以發揮良好的功能。

若要連結網站地圖中的文件，請執行下列其中一項作業：

  • 從 Windows 的「檔案總管」或 Macintosh 的 Finder 將網頁拖曳到網站地圖中的網頁。

    注意

    請確定「檔案」面板是鎖定的，然後按一下「擴展」箭頭。按住「網站地圖」按鈕，然後再選取「檔案和地圖」。
  • 在網站地圖中選取 HTML 網頁，然後選取「網站＞連結到存在的檔案」(Windows) 或「網站＞檢視網站地圖＞連結到存在的檔案」(Macintosh)，或從快速選單中選取「連結到存在的檔案」。
  • 在網站地圖中選取 HTML 網頁，然後選取「網站＞連結到新的檔案」(Windows) 或「網站＞檢視網站地圖＞連結到新的檔案」(Macintosh)，或從快速選單中選取「連結到新的檔案」。

相關主題

  • 設定新連結的相對路徑


使用「超連結」命令

「超連結」命令可讓您建立到影像、物件或是到另一個文件或檔案的文字連結。

若要使用「超連結」命令新增超連結：

  1. 將插入點放在文件中您希望超連結出現的位置上。
  2. 執行下列其中一項作業，就會顯示「插入超連結」對話方塊：
    • 選取「插入＞超連結」。
    • 在「插入」列的「常用」類別中，按一下「超連結」按鈕。

    「超連結」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定超連結選項。

  4. 按一下「確定」。

相關主題

  • 修改網站地圖中的連結
  • 連結到文件中的指定位置
  • 建立電子郵件連結
  • 建立 Null 和 Script 連結
  • 設定新連結的相對路徑


設定新連結的相對路徑

根據預設，Dreamweaver 使用文件相對路徑，以建立連到網站上其他頁面的連結。您可以指示 Dreamweaver 改用網站根目錄相對路徑來建立連結。如需有關相對路徑的詳細資訊，請參閱了解文件位置和路徑。

若要使用網站根目錄相對路徑，必須先選擇某個本機根目錄資料夾，當做伺服器上的文件根目錄，在 Dreamweaver 中定義本機資料夾 (請參閱設定新的 Dreamweaver 網站)。Dreamweaver 使用這個資料夾，判斷檔案的網站根目錄相對路徑。

您將在「網站定義」對話方塊中設定新連結的相對路徑。

若要設定新連結的相對路徑：

  1. 選取「網站＞管理網站」。

    「管理網站」對話方塊便會出現。

  2. 在清單中，按兩下您的網站。

    「網站定義」對話方塊就會出現。

  3. 如果沒有顯示「進階」設定，請按一下「進階」索引標籤。

    在「網站定義」對話方塊的「進階」索引標籤中，會顯示「本機資訊」類別選項。

  4. 選取「文件」或「網站根目錄」選項，以設定新連結的相對路徑。

    變更這項設定後再按一下「確定」，並不會轉換現有連結的路徑。這個設定只會套用到使用 Dreamweaver 建立的新連結。

    注意

    當您在本機瀏覽器中預覽文件時，具有網站根目錄相對路徑的連結內容並不會出現，除非您指定一個測試伺服器，或是在「編輯＞偏好設定＞在瀏覽器中預覽」中選取「使用暫存檔預覽」選項。這是因為瀏覽器無法辨識網站根目錄，但伺服器可以辨識 (請參閱在瀏覽器中預覽和測試網頁)。

    提示

    若要預覽以根目錄相對路徑所連結的內容，請將檔案放在遠端伺服器上，然後再選取「檔案＞在瀏覽器中預覽」便可檢視它 (請參閱網站根目錄相對路徑)。
  5. 針對網站根目錄相對路徑，請在「HTTP 位址」文字方塊中，輸入您完成的網站將會使用的 URL。

    Dreamweaver 使用這個位址來確定根目錄相對連結可在遠端伺服器上運作，因為遠端伺服器可能擁有不同的網站根目錄。例如，如果您連結影像檔案到硬碟中的 C:\Sales\images\ 資料夾 (其中 Sales 是您的本機根資料夾)，而完成之網站的 URL 是 http://www.mysite.com/SalesApp/ (其中 SalesApp 是遠端根資料夾)，則在「HTTP 位址」文字方塊中輸入 URL 可確保連結的檔案在遠端伺服器上的路徑是 /SalesApp/images/。

    注意

    在先前的版本中，Dreamweaver 未能附加上正確的遠端根資料夾，以致於網頁會在執行階段失效。
  6. 按一下「確定」。

新的路徑設定只會套用到目前的網站。

相關主題

  • 了解文件位置和路徑
  • 使用進階設定來設定 Dreamweaver 網站
  • 設定本機資訊類別選項


連結到文件中的指定位置

只要先建立好命名錨點，您就可以使用「屬性」檢視窗，連結到文件的特定區段。已命名錨點讓您能在文件中設定標記，這些標記通常會放在文件的特定主題或頂端的地方。然後，您就可以建立這些命名錨點的連結，這些連結可以快速地將瀏覽者引導到指定的位置。

建立命名錨點的連結有兩個步驟。首先，要建立命名錨點；然後再建立到這個命名錨點的連結。

若要建立命名錨點：

  1. 在「文件」視窗的「設計」檢視中，將插入點放在您希望命名錨點出現的位置上。
  2. 請執行下列其中一項作業：
    • 選取「插入＞命名錨點」。
    • 按 Control + Alt + A (Windows) 或 Command + Option + A (Macintosh)。
    • 在「插入」列的「常用」類別中，按一下「命名錨點」按鈕。

    「已命名錨點」對話方塊便會出現。

  3. 在「錨點名稱」文字方塊中，輸入錨點的名稱，然後按一下「確定」。

    如需詳細資訊，請參閱設定「命名錨點」選項。

    錨點標記會出現在插入點的位置。

    注意

    如果您沒有看到錨點標記，請選取「檢視＞視覺輔助＞隱藏元素」。

若要連結到命名錨點：

  1. 在「文件」視窗的「設計」檢視中，請選取要對其建立連結的文字或影像。
  2. 在「屬性」檢視窗的「連結」文字方塊中，輸入一個數字符號 (#) 和錨點名稱。例如：
    • 若要連結到目前文件中名為「top」的錨點，請輸入 #top。
    • 若要連結到相同資料夾內不同文件中名為「top」的錨點，請輸入 filename.html#top。

      注意

      錨點名稱要區分大小寫。

若要使用指向檔案的方法連結到命名錨點：

  1. 開啟包含您要的命名錨點之文件。

    注意

    如果您沒有看到錨點，請選取「檢視＞視覺輔助＞隱藏元素」，就能讓它變成看得見。
  2. 在「文件」視窗的「設計」檢視中，請選取您要開始連結的文字或影像 (如果這是另一個開啟的文件，您必須切換到這個文件)。
  3. 請執行下列其中一項作業：
    • 請按一下「屬性」檢視窗中「連結」文字方塊右邊的「指向檔案」圖示，並將它拖曳到您要連結到的錨點上：可能是相同文件內的錨點或另一個開啟文件中的錨點。
    • 在「文件」視窗中，從選取的文字或影像位置按住 Shift 然後拖曳到您要連結的錨點：可能是相同文件內的錨點或另一個開啟文件中的錨點。

相關主題

  • 連結檔案和文件
  • 建立電子郵件連結
  • 建立 Null 和 Script 連結

建立電子郵件連結

在按一下後，會開啟電子郵件連結，並且顯示新的空白訊息視窗 (使用與使用者瀏覽器相關的郵件程式)。在電子郵件訊息視窗中，「收件者」文字方塊會自動更新為電子郵件連結中所指定的位址。

若要使用「插入電子郵件連結」命令建立電子郵件連結：

  1. 在「文件」視窗的「設計」檢視中，將插入點放在要電子郵件連結出現的位置上，或是選取您希望以電子郵件連結形式出現的文字或影像。
  2. 執行下列其中一項作業，插入連結：
    • 選取「插入＞電子郵件連結」。
    • 在「插入」列的「常用」類別中，按一下「電子郵件連結」按鈕。

    就會出現「電子郵件連結」對話方塊。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定電子郵件連結選項。

  4. 按一下「確定」。

若要使用「屬性」檢視窗建立電子郵件連結：

  1. 請在「文件」視窗的「設計」檢視中選取文字或影像。
  2. 在「屬性」檢視窗的「連結」文字方塊中，輸入 mailto: 後面再加入電子郵件位址。

    在冒號和電子郵件位址之間請勿輸入任何空格。例如，輸入 mailto:jlydon@macromedia.com。

相關主題

  • 連結到文件中的指定位置
  • 連結到文件中的指定位置
  • 建立 Null 和 Script 連結

建立 Null 和 Script 連結

人們最熟悉的連結種類是連結到文件和命名錨點 (請參閱連結檔案和文件和連結到文件中的指定位置)，但是還有其他類型的連結可以使用。

Null 連結是一種未指定的連結。請使用 Null 連結，將行為附加到網頁上的物件或文字。一旦建立了 Null 連結之後，您就可以附加行為，當指標移動滑過連結時，就會調換影像或顯示圖層。如需附加行為到物件的相關資訊，請參閱套用行為。

Script 連結會執行 JavaScript 或呼叫 JavaScript 函式，在不離開目前網頁的情況下，還能提供項目的額外相關資訊，這種連結對瀏覽者而言，很有幫助。Script 連結也可以在瀏覽者按一下特定項目時，執行計算、表單驗證和其他處理工作。

若要建立 Null 連結：

  1. 在「文件」視窗的「設計」檢視中選取文字、影像或物件。
  2. 在「屬性」檢視窗中，於「連結」文字方塊中輸入 javascript:; (javascript 這個字後面可以是冒號或分號)。

若要建立 Script 連結：

  1. 在「文件」視窗的「設計」檢視中選取文字、影像或物件。
  2. 在「屬性」檢視窗的「連結」文字方塊中，輸入 javascript:後面再加入一些 JavaScript 或函式呼叫。

    例如，在「連結」文字方塊中輸入 javascript:alert('This link leads to the index')，會產生一個連結，按一下這個連結時就會顯示 JavaScript 警告方塊，並附上訊息「This link leads to the index」。

    注意

    因為 JavaScript 程式碼在 HTML 中會顯示在雙引號之間 (如 href 屬性的值一樣)，所以您在 Script 程式碼中必須使用單引號，或是在雙引號之前加上反斜線來「略過」任何的雙引號 (例如，\"This link leads to the index\")。

相關主題

  • 連結到文件中的指定位置
  • 建立電子郵件連結


管理連結

若要避免網站中發生無效的連結，您可以啟動連結管理，當您進行變更時，Dreamweaver 能自動更新連結。您也可以使用網站的視覺呈現來修改連結，或是以一次變更的方式將所有的連結更新到一個特殊檔案中。

相關主題

  • 自動更新連結
  • 修改網站地圖中的連結
  • 更改整個網站的連結

自動更新連結

無論您何時在本機網站內移動或重新命名文件，Dreamweaver 都能更新文件的來源和目標連結。當您在本機磁碟上儲存整個網站 (或儲存網站的整個獨立檔案區段) 時，這個功能最好用。在您將本機檔案放置或存回遠端伺服器之前，Dreamweaver 不會變更遠端資料夾中的檔案。

若要加快更新處理程序，Dreamweaver 可以建立快取檔案，儲存本機資料夾中所有連結的相關資訊。當您新增、變更或刪除本地網站上的檔案連結時，無法看到快取檔的更新。

若要啟用 Dreamweaver 中的連結管理：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。

    「偏好設定」對話方塊便會出現。

  2. 從左邊的「分類」清單中選取「一般設定」。

    「一般設定」偏好設定選項便會出現。

  3. 在「文件選項」區段中，從「當移動檔案時更新連結」彈出式選單中選取「總是」或「先詢問」。

    如果您選取「總是」，無論您何時移動或重新命名選取的文件，Dreamweaver 都會自動更新文件的所有來源或目標連結 (如需刪除檔案步驟的特定說明，請參閱更改整個網站的連結)。

    如果您選擇「先詢問」時，Dreamweaver 會先顯示一個對話方塊，列出所有受變更影響的檔案。按一下「更新」來更新這些檔案中的連結，或按一下「不要更新」，讓檔案維持原樣。

  4. 按一下「確定」。

若要建立網站的快取檔：

  1. 選取「網站＞管理網站」。

    就會出現「管理網站」對話方塊。

  2. 選取網站，然後按一下「編輯」。

    「網站定義」對話方塊就會出現。

  3. 按一下「進階」索引標籤以顯示「網站定義」對話方塊的「進階」類別。
  4. 從左邊的分類清單選取「本地資訊」。

    「網站定義」對話方塊會顯示「本地資訊」選項。

  5. 在「本地資訊」類別中，選取「啟動快取」核取方塊。

啟動 Dreamweaver 之後，在第一次於本機資料夾中變更或刪除檔案的連結時，Dreamweaver 會提示您要載入快取。如果您按一下「是」，就會載入快取，而且 Dreamweaver 會更新剛變更的檔案之所有連結。如果您按一下「否」，就不會在快取中備註變更，快取不會載入，Dreamweaver 也不會更新連結。

在較大的網站上載入快取可能要花費幾分鐘的時間，大部份的時間是用來將本機網站上的時間戳記與快取中所記錄的時間戳記加以比較，才能看出快取是不是最新的。如果您尚未在 Dreamweaver 之外變更任何檔案，在它出現時您可以放心地按一下「停止」按鈕。

若要重新建立網站的快取：

  • 在「檔案」面板中，請選取「網站＞進階＞重新建立網站快取」。

修改網站地圖中的連結

您可以新增、變更和移除連結，修改網站地圖中的網站結構，Dreamweaver 會自動更新網站地圖，顯示網站的變更。

若要變更連結：

  1. 在網站地圖中，選取要變更連結的網頁 (如此一來，目前連結到這個網頁的文件將會指向另一個網頁)，然後執行下列其中一項作業：
    • 選取「網站＞更改連結」(Windows) 或「網站＞檢視網站地圖＞更改連結」(Macintosh)。

      注意

      使用「檔案」面板的「網站」選單。
    • 按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，再從快速選單中選取「更改連結」。
  2. 瀏覽到您要連結指向的檔案或輸入 URL。
  3. 按一下「確定」。

若要移除連結：

  1. 選取網站地圖中的頁面。
  2. 請執行下列其中一項作業：
    • 選取「網站＞移除連結」(Windows) 或「網站＞檢視網站地圖＞移除連結」(Macintosh)。

      注意

      使用「檔案」面板的「網站」選單。
    • 按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，再從快速選單中選取「移除連結」。

移除連結並不會刪除檔案，只會從指向連結的網頁上的 HTML 原始碼，移除連結。

若要開啟連結原始碼：

  1. 選取網站地圖中的檔案。
  2. 請執行下列其中一項作業：
    • 選擇「網站＞開啟連結的原始檔」(Windows) 或「網站＞檢視網站地圖＞開啟連結的原始檔」(Macintosh)。
    • 按滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，再從快速選單中選取「開啟連結的原始檔」。

「屬性」檢視窗和包含連結的原始檔會在「文件」視窗中開啟，內含標示的連結。

相關主題

  • 連結檔案和文件
  • 使用網站的視覺地圖


更改整個網站的連結

除了讓 Dreamweaver 在您移動或重新命名檔案時自動更新連結之外，您可以手動將所有連結 (包括電子郵件、FTP、Null 和 Script 連結) 變更為指向其他位置。

您可以隨時使用這個選項 (例如，您可能希望將整個網站中的「本月影片」字眼連結到 /movies/july.html，而在八月一日這天，您必須將這些連結變更為指向 /movies/august.html)，但是這個選項在您要刪除從其他檔案連結過來的檔案時，特別好用。

若要變更整個網站的連結：

  1. 在「檔案」面板的「本地」檢視中選取檔案。

    注意

    如果您要變更的是電子郵件、FTP、Null 或 Script 連結，就不需要選取檔案。
  2. 選取「網站＞更改整個網站的連結」。

    「更改整個網站連結」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定變更整個網站的連結選項。

  4. 按一下「確定」。

    Dreamweaver 會利用已用於文件中的路徑格式 (例如，如果舊路徑是文件相對的，新路徑也會是文件相對路徑)，來更新連結到選取檔案的任何文件，讓它們指向新檔。不論連結類型是文件或根目錄相對路徑都沒有關係，Dreamweaver 都會自動更新連結。

在您變更整個網站的連結之後，選取的檔案會變成孤立檔案 (也就是本機磁碟上沒有任何檔案指向它)。您可以放心地刪除它，不會中斷本機 Dreamweaver 網站中的任何連結。

注意

因為這些變更都是在本機上進行，您必須手動刪除遠端資料夾中對應的孤立檔，而且要放置或存回已變更連結的檔案；否則，造訪網站的瀏覽者將看不到變更。


插入跳頁選單

跳頁選單可讓您將 URL 與彈出式選單清單中的選項建立關聯。藉由從清單中選擇某個項目，便能將使用者重新導向到 (或「跳到」) 指定的 URL。跳頁選單會插入「跳頁選單」表單物件中。

若要插入跳頁選單：

  1. 開啟文件，然後將插入點放在「文件」視窗中。
  2. 請執行下列其中一項作業：
    • 選取「插入＞表單＞跳頁選單」。
    • 在「插入」列的「表單」類別中，按一下「跳頁選單」按鈕。

      「插入跳頁選單」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定插入跳頁選單選項。

  4. 按一下「確定」。

    跳頁選單會出現在文件中。

相關主題

  • 跳頁選單
  • 編輯跳頁選單項目
  • 跳頁選單疑難排解

編輯跳頁選單項目

若要編輯跳頁選單項目，您可以變更項目所連結的清單順序或檔案，或是新增、刪除或重新命名項目。

若要變更已連結檔案的開啟位置，或要新增或變更選單選項提示，您必須使用「行為」面板 (請參閱跳頁選單)。

若要使用「屬性」檢視窗編輯跳頁選單項目：

  1. 選取「視窗＞屬性」可開啟「屬性」檢視窗 (如果它尚未開啟的話)。
  2. 在「文件」視窗的「設計」檢視中，請按一下跳頁選單物件來選取它。

    清單/選單圖示會出現在「屬性」檢視窗中。

  3. 在「屬性」檢視窗中，按一下「清單值」按鈕。

    「清單值」對話方塊便會出現。

  4. 依需求在選單項目進行變更，然後按一下「確定」。

相關主題

  • 跳頁選單
  • 插入跳頁選單
  • 跳頁選單疑難排解

跳頁選單疑難排解

在使用者選取跳頁選單項目後，如果他們導覽回到該網頁，或者在「開啟 URL 的位置」文字方塊中指定頁框時，就沒有辦法再重新選取該選單項目。有兩個方式可以解決這個問題：

  • 使用選單選項提示 (如類別)，或是使用者指示，例如「選擇一個：」。在選取每個選單選項之後，會自動重新選取選單選項提示。
  • 使用「前往」按鈕可讓使用者重新瀏覽目前選擇的連結。

    注意

    在「插入跳頁選單」對話方塊中的每個跳頁選單上，請只選取一個選項，因為選項會套用到整個跳頁選單。

相關主題

  • 跳頁選單
  • 插入跳頁選單
  • 編輯跳頁選單項目


使用導覽列

導覽列由一個影像 (或一組影像) 組成，顯示方式會根據使用者的動作而有所變更。

在使用「插入導覽列」命令之前，必須先為每個導覽元素的顯示狀態建立一組影像(將導覽列項目想像為按鈕可能會有所幫助，因為當您按一下時，它會將使用者引導到另一個網頁)。

建立好文件的導覽列之後，您可以使用「修改導覽列」命令，在導覽列中加入影像，或將影像從導覽列中移除。您可以使用這個命令，變更單一影像或一組影像、變更按下元素時所要開啟的檔案、選取要在其中開啟檔案的不同視窗或頁框，以及重新調整影像順序。

本節包含下列主題：

  • 插入導覽列
  • 修改導覽列

相關主題

  • 導覽列

插入導覽列

插入導覽列時，請為導覽列項目命名，並為它們選取要使用的影像。

提示

您可以建立導覽列，將它複製到網站的其他網頁，與頁框一起使用，再編輯網站行為，就能在存取網頁時顯示不同的狀態。

若要建立導覽列：

  1. 請執行下列其中一項作業：
    • 選取「插入＞影像物件＞導覽列」。
    • 在「插入」列的「通用」類別中，按一下「影像」選單，然後選取「導覽列」按鈕。

    「插入導覽列」對話方塊便會出現。

  2. 完成對話方塊。

    如需詳細資訊，請參閱設定導覽列選項。

  3. 按一下「確定」。

相關主題

  • 導覽列
  • 修改導覽列

修改導覽列

建立好文件的導覽列之後，您可以使用「修改導覽列」命令，在導覽列中加入影像，或將影像從導覽列中移除。

若要修改導覽列：

  1. 在作用的頁面中選取導覽列。
  2. 請選取「修改＞導覽列」。

    「修改導覽列」對話方塊便會出現。

  3. 在「導覽列項目」清單中，選取您要編輯的元素。
  4. 必要時進行變更。

    如需詳細資訊，請參閱設定導覽列選項。

  5. 按一下「確定」。

相關主題

  • 導覽列
  • 插入導覽列


使用影像地圖

影像地圖指的是已分成數個區域或「連結區」的影像，當使用者按一下連結區時，就會發生動作 (例如，開啟新檔案)。

本節包含下列主題：

  • 插入用戶端影像地圖
  • 修改影像地圖

相關主題

  • 關於影像地圖

插入用戶端影像地圖

當您插入用戶端影像地圖時，就會建立連結區域，然後定義使用者按一下連結區時會開啟的連結。

注意

您可以建立多個連結區，但是它們仍屬於同一個影像地圖。

若要建立用戶端影像地圖：

  1. 在「文件」視窗中，選取影像。
  2. 在「屬性」檢視窗中，按一下右下角的展開器箭頭，查看所有屬性。
  3. 在「地圖名稱」文字方塊中，輸入影像地圖的唯一名稱。

    注意

    如果您正在同一文件中使用多個影像地圖，請確定每個地圖都有唯一的名稱。
  4. 若要定義影像地圖區，請執行下列其中一項作業：
    • 選取圓形工具並將指標拖曳滑過影像，建立圓形連結區。
    • 選取矩形工具並將指標拖曳滑過影像，建立矩形連結區。
    • 選取多邊形工具，並按一下每一個端點，定義不規則形狀的連結區。按一下箭頭工具關閉形狀。

    在您建立連結區之後，就會出現連結區「屬性」檢視窗。

  5. 輸入連結區「屬性」檢視窗所需資訊。

    如需詳細資訊，請參閱設定「連結區屬性」檢視窗選項。

  6. 當您完成影像對應時，請在文件中的空白區按一下以變更「屬性」檢視窗。

相關主題

  • 關於影像地圖
  • 修改影像地圖

修改影像地圖

您可以輕易地編輯在影像地圖中建立的連結區。您可以移動連結區、調整連結區大小，或在圖層中將連結區向前或向後移動。

您也可以將含連結區的影像在文件之間複製，或複製影像中的一或多個連結區，再貼到另一個影像中，與影像相關的連結區也會被複製到新文件中。

若要選取影像地圖中的多個連結區：

  1. 使用指標連結區工具選取連結區。
  2. 請執行下列其中一項作業：
    • Shift + 按一下您要選取的其他連結區。
    • 按 Control + A (Windows) 或 Command + A (Macintosh) 來選取所有連結區。

若要移動連結區：

  1. 使用指標連結區工具，選取您要移動的連結區。
  2. 請執行下列其中一項作業：
    • 將連結區拖曳到新區域。
    • 使用 Shift + 方向鍵，將連結區往選取的方向移動 10 個像素。
    • 使用方向鍵將連結區往選取的方向移動 1 個像素。

若要調整連結區大小：

  1. 使用指標連結區工具，選取您要調整大小的連結區。
  2. 拖曳連結區選取器控制點，變更連結區的大小或形狀。

相關主題

  • 關於影像地圖
  • 插入用戶端影像地圖


將 JavaScript 行為附加到連結

您可以將行為附加到文件中的任何連結 (請參閱套用行為)。當您將連結的元素插入文件時，請考慮使用下列行為：

設定狀態列的文字可決定訊息的文字，並將它顯示在瀏覽器視窗左下方的狀態列中。例如，您可以使用這個動作在狀態列中描述連結的目的地，而不是顯示與它相關的 URL (請參閱設定狀態列文字)。

開啟瀏覽器視窗會在新視窗中開啟 URL。您可以指定新視窗的屬性，包括它的大小、屬性 (該視窗是否可調整大小、是否有選單列等等) 和名稱 (請參閱開啟瀏覽器視窗)。

跳頁選單可以編輯跳頁選單。您可以變更選單清單、指定不同的連結檔，或變更可在其中開啟連結文件的瀏覽器位置 (請參閱跳頁選單)。

設定導覽列影像可以變更導覽列作用的方式。使用這個行為，自訂影像在導覽列中的顯示方式。例如，當指標滑過導覽列的某個部份時，會變更其他影像在導覽列或文件中的顯示方式 (請參閱設定導覽列影像)。


檢查是否有無效、外部或孤立的連結

使用「檢查連結」功能，在已開啟的檔案、本機網站的某個部份，或整個本機網站中，搜尋無效的連結和沒有參考 (亦稱為孤立) 的檔案 (指仍存在網站中，但網站中已沒有其他檔案會連結過去的檔案)。

Dreamweaver 會確認的唯一連結是網站內的文件連結；Dreamweaver 會編譯一份清單，列出現在所選取的一個或多個文件中之外部連結，但不會確認這些連結。

您也可以辨識並刪除網站中不再由其他檔案所使用的檔案。如需詳細資訊，請參閱找出並刪除未使用的檔案。

若要檢查目前文件內的連結：

  1. 將檔案儲存到本機 Dreamweaver 網站內的位置。
  2. 選取「檔案＞檢查頁面＞檢查連結」。

    「無效的連結」報表會出現在「連結檢查程式」面板上 (位於「結果」面板群組中)。

  3. 在「連結檢查程式」面板中，請從「顯示」彈出式選單中選取「外部連結」，便可檢視另一份報表。

    「外部連結」報表會出現在「連結檢查程式」面板中 (位於「結果」面板群組中)。

    提示

    當您在整個網站中檢查連結時，可以檢查是否有「孤立檔案」。
  4. 若要儲存報表，請按一下「連結檢查程式」面板中的「儲存報表」按鈕。

    注意

    目標瀏覽器報表是一個暫存檔，如果您沒有將它儲存時就會遺失。

若要檢查本機網站某個部份內的連結：

  1. 在「檔案」面板中，請從「目前的網站」彈出式選單中選取網站。
  2. 在「本機」檢視中，選取要檢查的檔案或資料夾。
  3. 執行下列任一動作開始檢查：
    • 以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 其中一個選取的檔案，然後從快速選單中選取「檢查連結＞選取的檔案/資料夾」。
    • 選取「檔案＞檢查頁面＞檢查連結」。

    「無效的連結」報表會出現在「連結檢查程式」面板上 (位於「結果」面板群組中)。

  4. 在「連結檢查程式」面板中，請從「顯示」彈出式選單中選取「外部連結」，便可檢視另一份報表。

    「外部連結」報表會出現在「連結檢查程式」面板中 (位於「結果」面板群組中)。

    提示

    如果您是檢查整個網站的連結，那麼也可以檢查「孤立檔案」(請參閱下一個程序)。
  5. 若要儲存報表，請按一下「連結檢查程式」面板中的「儲存報表」按鈕。

若要檢查整個網站中的連結：

  1. 在「檔案」面板中，請從「目前的網站」彈出式選單中選取網站。
  2. 選取「網站＞檢查整個網站的連結」。

    「無效的連結」報表會出現在「連結檢查程式」面板上 (位於「結果」面板群組中)。

  3. 在「連結檢查程式」面板中，請從「顯示」彈出式選單中選取「外部連結」或「孤立檔案」，便可檢視另一份報表。

    「連結檢查程式」對話方塊中會出現一份清單，列出符合選取報表類型的檔案。

    注意

    如果您選取「孤立檔案」作為報表類型，則從清單中選取檔案再按 Delete 鍵，便可以直接從「連結檢查程式」面板刪除孤立檔案。
  4. 若要儲存報表，請按一下「連結檢查程式」面板中的「儲存報表」按鈕。


修正無效的連結

在您執行連結報表後，您可以直接在「連結檢查程式」面板中修正無效的連結和影像參考，或者您可以從清單中開啟檔案，然後在「屬性」檢視窗中修正連結。

若要在「連結檢查程式」面板中修正連結：

  1. 執行連結檢查報表 (請參閱檢查是否有無效、外部或孤立的連結)。
  2. 在「連結檢查程式」面板 (位於「結果」面板群組中) 的「無效的連結」欄中 (不是「檔案」欄)，選取無效的連結。

    資料夾圖示會出現在無效的連結旁邊。

  3. 按一下資料夾圖示，瀏覽要連結的正確檔案，或輸入正確的路徑和檔案名稱。
  4. 按下 Tab 或 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。

    如果有其他的無效參考連結到這個相同的檔案，會出現一個對話方塊提示您要同時修正其他檔案中的這些參考。按一下「是」讓 Dreamweaver 更新清單上參考這個檔案的所有文件。按一下「否」讓 Dreamweaver 只更新目前的參考。

    注意

    如果開啟了網站的「啟用檔案存回和取出」，Dreamweaver 會試著將需要變更的檔案取出。如果它無法取出檔案，Dreamweaver 會顯示一個警告對話方塊並保留未變更的無效參考。請參閱存回和取出檔案。

若要在「屬性」檢視窗中修正連結：

  1. 執行連結檢查報表 (請參閱檢查是否有無效、外部或孤立的連結)。
  2. 在「連結檢查程式」面板上 (位於「結果」面板群組中)，按兩下「檔案」欄中的項目。

    Dreamweaver 會開啟文件、選取違規的影像或連結，並在「屬性」檢視窗中標示路徑和檔案名稱。(如果看不到「屬性」檢視窗，請選取「視窗＞屬性」來將它開啟)。

  3. 若要在「屬性」檢視窗中設定新路徑和檔案名稱，請按一下資料夾圖示，瀏覽到正確的檔案，或在標示上輸入要取代的文字。

    如果您正在更新影像參考，而新的影像出現了不正的大小，請在「屬性」檢視窗中按一下 W 和 H 標籤或按一下「重新整理」按鈕，重設高度和寬度值。「寬」和「高」標籤會將類型從粗體變更為一般。

  4. 儲存檔案。

因為已經修正連結，所以「連結檢查程式」清單中就不會出現連結的項目。您在「連結檢查程式」中輸入新路徑或檔案名稱之後 (或者在「屬性」檢視窗中儲存變更之後)，如果清單中仍出現項目，表示 Dreamweaver 找不到新的檔案，仍將它視為無效的連結。


在 Dreamweaver 中開啟連結的文件

連結在 Dreamweaver 內沒有作用，也就是說，您無法按一下「文件」視窗中的連結，開啟連結的文件。

若要在 Dreamweaver 中開啟連結的文件，請執行下列其中一項作業：

  • 選取連結後，再選取「修改＞開啟連結網頁」。
  • 按 Control (Windows) 或 Command (Macintosh) 並按兩下連結。

    注意

    連結的文件必須位於本機磁碟上。

相關主題

  • 在瀏覽器中預覽和測試網頁
  • 檢查是否有無效、外部或孤立的連結
  • 修正無效的連結


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定「命名錨點」選項
  • 設定超連結選項
  • 設定電子郵件連結選項
  • 設定變更整個網站的連結選項
  • 設定插入跳頁選單選項
  • 設定導覽列選項
  • 設定「連結區屬性」檢視窗選項


設定「命名錨點」選項

這個對話方塊是用來提供命名錨點的名稱。

若要指定命名錨點的名稱：

  1. 輸入命名錨點的名稱。

    錨點名稱不能包含空格，而且不應該放在圖層內。

  2. 按下「確定」。

相關主題

  • 連結到文件中的指定位置


設定超連結選項

這個對話方塊是用來建立超連結。

若要設定超連結的選項：

  1. 在「文字」文字方塊中，輸入要在文件中顯示為超連結的文字。
  2. 在「連結」文字方塊中，輸入要連結的檔案名稱，或按一下資料夾圖示瀏覽並選取檔案。
  3. 在「目標」彈出式選單中，請選取其中檔案應該在「目標」文字方塊中開啟的視窗。

    您在目前文件中已命名的所有頁框名稱，都會出現在彈出式清單中。如果您指定了不存在的頁框，在瀏覽器中開啟文件時，就會在已指定名稱的新視窗中，載入已連結的網頁。

    您也可以從下列保留的目標名稱中選取：

    • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
    • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的，則會在完整的瀏覽器視窗中載入連結的檔案。
    • _self 會在與連結所在的同一個頁框或視窗載入已連結的檔案。這個目標是預設值，所以您通常不需要指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的檔案，同時移除所有頁框。
  4. 在「表格索引」文字方塊中，輸入索引標籤順序的數字。
  5. 在「標題」文字方塊中，輸入超連結的標題。
  6. 在「存取鍵」文字方塊中，輸入對等的鍵盤按鍵 (一個字母)，您可以用它在瀏覽器中選取超連結。

相關主題

  • 建立電子郵件連結


設定電子郵件連結選項

這個對話方塊是用來建立電子郵件連結。

若要設定電子郵件連結的選項：

  1. 在「文字」文字方塊中，輸入或編輯要在文件中做為電子郵件連結的文字。
  2. 在「電子郵件連結」文字方塊中，輸入郵件應該寄達的電子郵件位址。
  3. 按一下「確定」。

相關主題

  • 建立電子郵件連結


設定變更整個網站的連結選項

這個對話方塊是用來變更您網站中檔案的連結。

若要指定命名錨點的名稱：

  1. 在「更改所有連結到」文字方塊旁邊，按一下資料夾圖示，瀏覽並選取您要變更舊連結的檔案。

    注意

    如果您要變更的是電子郵件、FTP、Null 或 Script 連結，請輸入您要變更連結的完整文字。
  2. 在「變成新連結」文字方塊旁邊，按一下資料夾圖示，瀏覽並選取要連結的新檔案。

    如果您要變更的是電子郵件、FTP、Null 或 Script 連結，請輸入取代連結的完整文字。例如，若要更新指向舊位址的所有電子郵件連結，您可能要在「更改所有連結到」文字方塊中輸入 mailto:juser@isp.com，並在「變成新連結」文字方塊中輸入 mailto:juser-interface@isp.com 。

  3. 按一下「確定」。

相關主題

  • 更改整個網站的連結


設定插入跳頁選單選項

這個對話方塊是用來設定跳頁選單。

若要設定跳頁選單的選項：

  1. 按一下加號 (+) 按鈕便可新增選單項目。

    再按一次按鈕就能新增其他選單項目。選取選單項目，並按一下減號 (-) 按鈕就可移除項目。

  2. 選取選單項目，然後使用方向鍵在清單中向上或向下移動項目。
  3. 在「文字」文字方塊中，請輸入要在選單項目的選單清單中顯示的文字。

    若要使用選單選項提示，如「選擇一個」，請在「文字」文字方塊中輸入第一個選單項目的選項文字。

  4. 在「選擇時，前往的 URL」文字方塊中，按一下資料夾圖示，瀏覽要開啟的檔案，或在文字方塊輸入檔案路徑。
  5. 在「開啟 URL 於」彈出式選單中，選取開啟檔案的位置：
    • 「主視窗」會在相同視窗中開啟檔案。
    • 「頁框」會在您選取的頁框中開啟檔案。

      注意

      如果您要的目標頁框沒有出現在「開啟 URL 於」彈出式選單中，請關閉「插入跳頁選單」對話方塊，再於文件中命名此頁框。如需有關命名頁框的相關資訊，請參閱檢視和設定頁框屬性。
  6. 在「選單名稱」文字方塊中，輸入選單項目的名稱。
  7. 在「選項」底下，選取「選單之後插入前往按鈕」，會新增「前往」按鈕，而不是新增選單選項提示。
  8. 如果您使用選單選項提示 (如「選擇一個」) 的話，請在「選項」底下，選取「URL 更改後選擇第一個項目」。
  9. 按一下「確定」。

相關主題

  • 插入跳頁選單
  • 跳頁選單疑難排解


設定導覽列選項

這個對話方塊是用來命名導覽列項目，並且為它們選取要使用的影像。

若要設定導覽列的選項：

  1. 在「項目名稱」文字方塊中，請輸入導覽列項目的名稱，例如，Home。

    每個項目會對應到一個按鈕，按鈕包含一組狀態影像 (最多四個)。項目名稱會出現在「導覽列項目」清單中。使用箭頭按鈕在導覽列中排列項目。

  2. 在「一般狀態影像」文字方塊中，按一下「瀏覽」選取一開始要顯示的影像。

    注意

    這個文字方塊是必要項，其他影像狀態選項則是選擇性的。
  3. 在「滑鼠經過影像」文字方塊中，按一下「瀏覽」，選取當使用者將滑鼠滑過顯示「一般狀態」影像的元素時，所要顯示的影像。
  4. 在「滑鼠按下影像」文字方塊中，按一下「瀏覽」，選取在使用者按過元素之後所要顯示的影像。
  5. 在「按下時滑鼠經過影像」欄位中，按一下「瀏覽」，選取在使用者將指標滑過「按下」的影像時所要顯示的影像。
  6. 在「替代文字」文字方塊中，輸入元素的描述性名稱。

    對純文字瀏覽器或已設定為要手動下載影像的瀏覽器而言，影像的部份會出現替代文字。畫面讀取器會讀取替代文字，有些瀏覽器會在使用者將滑鼠滑過導覽列項目時，顯示替代文字。

  7. 在「按下時，前往的 URL」文字方塊中，請按一下「瀏覽」按鈕來選取要開啟的連結檔案，然後再從彈出式選單中選取檔案將會開啟的位置。請選取下列其中一項：
    • 選取「主視窗」會在相同視窗中開啟檔案。
    • 如果導覽列位於頁框組中，則選取要在其中開啟檔案的頁框。

      注意

      如果您要的目標頁框沒有出現在彈出式選單中，請關閉「插入導覽列」對話方塊，再命名此頁框 (請參閱檢視和設定頁框屬性)。
  8. 選取「預先載入影像」就能在載入網頁時下載影像。

    如果您沒有選取這個選項，則當使用者將指標滑過滑鼠變換影像時，可能發生延遲的現象。

  9. 選取「最初顯示按下影像」時，會在網頁顯示時就以「按下」狀態顯示所選取的項目，而不是其預設的「一般」狀態。

    例如，在載入首頁時，導覽列上的 Home 元素應該就是在「按下」狀態。

    選取這個選項時，在「導覽列項目」清單中的項目之後會出現星號 (*)。

  10. 在「插入」彈出式選單中，請選取要在文件中以垂直或水平方式插入導覽列項目。
  11. 選取「使用表格」核取方塊，將導覽列項目如表格般插入。
  12. 按一下加號 (+) 按鈕，將另一個項目加入導覽列，然後重複前述步驟來定義項目。
  13. 當您完成導覽列中新增和定義項目的動作時，請按一下「確定」。

相關主題

  • 插入導覽列
  • 修改導覽列


設定「連結區屬性」檢視窗選項

這個對話方塊是用來建立用戶端影像地圖。

若要設定「連結區屬性」檢視窗的選項：

  1. 在連結區「屬性」檢視窗的「連結」文字方塊中，請按一下資料夾圖示，瀏覽並選取當使用者按一下連結區時要開啟的檔案，或是輸入檔案名稱。

    如果您要連結的檔案是來自相同的網站，請輸入文件的相對路徑 (以 file:// 為開頭的檔案名稱不是相對路徑)。

  2. 在「目標」彈出式選單中，請選取其中檔案應該在「目標」文字方塊中開啟的視窗。

    您在目前文件中已命名的所有頁框名稱，都會出現在彈出式清單中。如果您指定了不存在的頁框，在瀏覽器中開啟文件時，就會在已指定名稱的新視窗中，載入已連結的網頁。您也可以從下列保留的目標名稱中選取：

    • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
    • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。如果包含連結的頁框不是巢狀的，則會在完整的瀏覽器視窗中載入連結的檔案。
    • _self 會在與連結所在的同一個頁框或視窗載入已連結的檔案。這個目標是預設值，所以您通常不需要指定它。
    • _top 會在完整的瀏覽器視窗中載入連結的檔案，同時移除所有頁框。

      注意

      直到選取的連結區包含連結之後，才可以使用目標選項。
  3. 在「替代」文字方塊中，輸入您要在純文字瀏覽器或已設定為要手動下載影像的瀏覽器中，出現的替代文字。

    有些瀏覽器會在使用者將滑鼠指標暫停在連結區上時，顯示這個文字做為工具提示。

  4. 重複步驟 4 至 7 便能在影像地圖中定義其他連結區。
  5. 當您完成影像對應時，請在文件的空白區中按一下以變更「屬性」檢視窗。

相關主題

  • 使用影像地圖


使用其他應用程式

Macromedia Fireworks 8 和 Macromedia Flash 8 是功能強大的網頁開發工具，其設計目的是建立圖形和 SWF 影片以便在網頁中檢視。您可以將 Macromedia Dreamweaver 8 與這些工具緊密整合，以便簡化網頁的設計流程。

您可以在 Dreamweaver 文件中輕鬆插入 Fireworks 影像或表格以及 Flash 影片 (SWF 檔)。接著，您也能夠利用 Dreamweaver 和 Fireworks 或 Flash 之間的整合功能，變更已經插入 Dreamweaver 文件中的影像或影片。

注意

若要配合 Fireworks 和 Flash 使用 Dreamweaver，在您的電腦上必須安裝這三種應用程式。

本章包含下列各節：

關於 Fireworks 和 Flash 整合

最佳化 Fireworks 和 Flash 的工作環境

使用 Fireworks

使用 Flash


關於 Fireworks 和 Flash 整合

交互編輯和「設計備註」可讓 Dreamweaver 能將 Fireworks 和 Flash 的作業進行整合。交互編輯能確保程式碼程式可以在 Dreamweaver 和其他應用程式間正確地轉換 (例如，保留變換影像行為，或是到其他檔案的連結)。

「設計備註」是讓 Dreamweaver 找到匯出影像或影片檔之適當來源文件的小型檔案。當您直接從 Fireworks 或 Flash 直接匯出檔案到 Dreamweaver 定義的網站時，包含 PNG 或 Flash 編寫檔案 (FLA) 參考的「設計備註」會與網站可用檔案 (GIF、JPEG 或 SWF) 自動匯出到網站。如需相關資訊，請參閱關於設計備註。

除了找出資訊外，「設計備註」還包含其他關於匯出檔案的有用資訊。例如，當您匯出 Fireworks 表格時，Fireworks 會寫入該表格中每個匯出影像檔案的「設計備註」。如果這個匯出檔案包含連結區或變換影像，這些連結區或變換影像的 JavaScript 就會包含在 Fireworks 匯出的 HTML 文件中。


最佳化 Fireworks 和 Flash 的工作環境

若要利用 Fireworks 或 Flash 來建立整合流暢的工作流程，首要的工作就是最佳化工作環境。

若要最佳化 Fireworks 和 Flash 的工作環境：

  1. 請確定您的 Dreamweaver 網站已啟用「設計備註」。

    除非您變更預設的網站設定，否則「設計備註」會自動啟動。如需關於啟動「設計備註」的資訊，請參閱啟動和停用網站的設計備註。如需關於「設計備註」之角色的詳細資訊，請參閱關於 Fireworks 和 Flash 整合。

  2. 如果要從 Dreamweaver 輕易地啟動 Fireworks，請將 Fireworks 設定為 Dreamweaver 的主要外部影像編輯器。

    將 Fireworks 設定為圖形檔案類型 (即 GIF、PNG 和 JPEG 檔) 的主要編輯器。如需詳細資訊，請參閱設定外部影像編輯器偏好設定。

  3. 將 Fireworks 和 Flash 來源以及網站可用的檔案，儲存在已定義的 Dreamweaver 網站資料夾中。

    這個動作可以確保共享網站的使用者可以在下列時機找出來源文件：編輯 Fireworks 影像或表格、使用 Dreamweaver 時編輯 SWF 影片。

  4. 在匯出 Fireworks 影像檔時，請將它們匯出到 Dreamweaver 網站資料夾中。

    當您從 Fireworks 匯出 GIF 或 JPEG 圖片到 Dreamweaver 網站資料夾時，Fireworks 便會在相同的資料夾中建立了一個名為 _notes 的資料夾。此資料夾中包含 Dreamweaver 與 Fireworks 一起工作時所需的「設計備註」。

相關主題

  • 關於 Fireworks 和 Flash 整合


使用 Fireworks

Dreamweaver 和 Fireworks 可以辨識和共用許多相同的檔案編輯程序，包括連結的變更、影像地圖、表格分割等。整合使用時，這兩個應用程式提供有效率的工作流程，包括編輯、最佳化以及放置網站圖片檔案到 HTML 頁面中。

本節包含下列主題：

  • 插入 Fireworks 影像
  • 從 Dreamweaver 來編輯 Fireworks 影像或表格
  • 從 Dreamweaver 來最佳化 Fireworks 影像
  • 使用 Fireworks 修改 Dreamweaver 影像預留位置
  • 在 Dreamweaver 中編輯 Fireworks 彈出式選單
  • 指定 Fireworks 來源檔案的啟動和編輯偏好設定1
  • 在 Dreamweaver 文件中插入 Fireworks HTML 程式碼
  • 將 Fireworks HTML 貼到 Dreamweaver
  • 更新置入 Dreamweaver 的 Fireworks HTML
  • 建立網站相簿

相關主題

  • 關於 Fireworks 和 Flash 整合


插入 Fireworks 影像

要在 Dreamweaver 文件中置入 Fireworks 圖片的方式有很多種。您可以使用「插入影像」命令，將 Fireworks 匯出的圖片直接置入 Dreamweaver 文件中，或是從 Dreamweaver 影像預留位置來建立新的 Fireworks 圖形 (請參閱使用 Fireworks 修改 Dreamweaver 影像預留位置)。

若要在 Dreamweaver 文件中插入 Fireworks 影像：

  1. 在 Dreamweaver 文件中，將插入點放在要讓影像出現的位置，然後再執行下列其中一項作業：
    • 選取「插入＞影像」。
    • 在「插入」列的「一般」類別中，按一下「影像」按鈕或將它拖曳到文件中。
  2. 瀏覽到想要的 Fireworks 匯出檔案，然後按一下「確定」(Windows) 或「開啟」(Macintosh)。

    注意

    如果這個 Fireworks 檔案並不在目前的 Dreamweaver 網站中，將會出現詢問是否要複製檔案到根資料夾的訊息。按一下「是」。


從 Dreamweaver 來編輯 Fireworks 影像或表格

您可以從 Dreamweaver 來啟動 Fireworks，編輯已插入 Dreamweaver 文件的影像。當您開啟和編輯影像或 Fireworks 表格中部分的影像分割時，Dreamweaver 便會啟動 Fireworks，以開啟該影像或表格所匯出的 PNG 檔案。

當影像為 Fireworks 表格的一部份時，只要 <!--fw table--> 註解存在於 HTML 程式碼，您便可以啟動整份 Fireworks 表格來編輯。如果來源 PNG 是使用 Dreamweaver 樣式的 HTML 和影像設定，從 Fireworks 匯出至 Dreamweaver 網站，Fireworks 表格的註解會自動插入 HTML 程式碼中。

若要啟動和編輯置入 Dreamweaver 的 Fireworks 影像：

  1. 在 Dreamweaver 中，請選取「視窗＞屬性」來開啟「屬性」檢視窗 (如果它尚未開啟的話)。
  2. 按一下影像或影像分割以選取。

    當您選取了由 Fireworks 匯出的影像時，「屬性」檢視窗會將選取範圍識別為 Fireworks 影像或表格，並且顯示 PNG 來源檔案的名稱。

  3. 若要啟動 Fireworks 進行編輯，請執行下列其中一項作業：
    • 在「屬性」檢視窗中按一下「編輯」。
    • 按住 Control (Windows) 或 Command (Macintosh)，然後按兩下選取的影像。
    • 以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 選取的影像，然後從快速選單中選取「使用 Fireworks 編輯」。

    Fireworks 啟動並開啟要編輯的相關 PNG。

    注意

    如果 Fireworks 找不到來源檔案，系統會出現要您找出 PNG 來源檔案的提示。當您使用 Fireworks 來源檔案時，變更會同時儲存於來源檔案和匯出檔案中，否則只會更新匯出檔案。
  4. 在 Fireworks 中編輯來源 PNG。
  5. 完成編輯後，請按一下「完成」。

    Fireworks 會將變更儲存在 PNG 檔案，匯出更新的影像 (或 HTML 和影像)，然後畫面轉回 Dreamweaver。在 Dreamweaver 中，便會出現更新的影像或表格。

相關主題

  • 在 Dreamweaver 中編輯 Fireworks 彈出式選單


從 Dreamweaver 來最佳化 Fireworks 影像

您可以從 Dreamweaver 啟動 Fireworks，以便對置入的 Fireworks 影像和動畫進行快速匯出變更 (例如調整影像大小或變更檔案類型)。Fireworks 可以讓您針對最佳化設定、動畫設定以及匯出影像的大小及區域進行變更。

若要變更置入 Dreamweaver 的 Fireworks 影像之最佳化設定：

  1. 在 Dreamweaver 中，選取要使用的影像，然後再選取「命令＞使用 Fireworks 最佳化影像」。
  2. 如果出現提示，請指定是否要啟動置入影像的來源 Fireworks 檔案。
  3. 在 Fireworks 的「最佳化」對話方塊中進行您要的編輯：
    • 若要編輯最佳化設定，請按一下「選項」標籤。如需詳細資訊，請參閱「使用 Fireworks」。
    • 若要編輯匯出影像的大小和區域，請按一下「檔案」標籤。
  4. 完成影像編輯後，請按一下「更新」。

    按一下「更新」便可以使用新的最佳化設定匯出影像，更新置入 Dreamweaver 中的 GIF 或 JPEG 檔案，並且儲存 PNG 來源檔案 (如果有選取來源檔案)。

    如果您變更影像的格式，Dreamweaver 連結檢查程式會提示您更新影像的參考資料。舉例來說，如果您將名為 my_image 的影像格式，由 GIF 變為 JPEG，那麼只要按一下這個提示上的「確定」，就可以將您網站上所有 my_image.gif 的參考資料改為 my_image.jpg。

相關主題

  • 在 Dreamweaver 中編輯 Fireworks 彈出式選單


使用 Fireworks 修改 Dreamweaver 影像預留位置

您可以在 Dreamweaver 文件中建立預留位置影像，然後啟動 Fireworks 設計圖片影像或 Fireworks 表格來取代它。如需關於插入影像預留位置的資訊，請參閱插入影像預留位置。

若要從影像預留位置建立新影像，系統中必須安裝 Dreamweaver 和 Fireworks。

若要在 Fireworks 中編輯 Dreamweaver 預留位置影像：

  1. 請確定已將 Fireworks 設定為 .png 檔案的影像編輯器。如需相關資訊，請參閱設定外部影像編輯器偏好設定。
  2. 在「文件」視窗中，按一下影像預留位置以選取。
  3. 請執行下列其中一項作業，啟動 Fireworks 以進行編輯：
    • 在「屬性」檢視窗中按一下「建立」。
    • 按下 Control (Windows) 或 Command (Macintosh)，然後按兩下影像預留位置。
    • 按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 影像預留位置，然後選取「在 Fireworks 中建立影像」。

    Fireworks 便會以「從 Dreamweaver 編輯」模式來啟動。

  4. 使用 Fireworks 選項設計影像。

    Fireworks 可以辨認下列的影像預留位置設定值，它們可能是您在 Dreamweaver 中處理影像預留位置時已經設定的：與 Fireworks 畫布大小對應的影像大小、Fireworks 用來做為您建立的來源和匯出檔案的預設文件名稱之影像編號、文字對齊以及 Fireworks 可辨識的行為 (例如調換影像、彈出式選單、導覽列以及設定文字)。Fireworks 也可以辨識您在使用 Dreamweaver 時附加在影像預留位置的連結。

    注意

    雖然您在 Fireworks 中無法看到已新增到影像預留位置中的連結，但已將它們保留。如果您在 Fireworks 中畫出連結區並加入連結，它並不會刪除您在 Dreamweaver 中已加入影像預留位置中的連結；不過，如果您在 Fireworks 中對新的影像畫出分割，它就會在您取代影像預留位置時，刪除 Dreamweaver 文件中的連結。

    由於 Fireworks 無法辨識下列影像預留位置設定，因此在影像預留位置的「屬性」檢視窗中會將它們停用：影像對齊、顏色、垂直間距和水平間距以及地圖。

  5. 完成後，按一下「完成」。

    便會出現「另存新檔」對話方塊。Fireworks 會提示您儲存 PNG 檔案。

  6. 在「儲存於」文字方塊中，請選取您已定義為 Dreamweaver 本機網站資料夾的資料夾。

    如果您在將影像預留位置插入 Dreamweaver 文件時有命名，Fireworks 會在「檔案名稱」文字方塊中顯示該名稱。您也可以任意變更名稱。

  7. 按一下「儲存檔案」便可儲存 PNG 檔。

    便會出現「匯出」對話方塊。請使用此對話方塊，將影像以 GIF、JPEG 格式匯出，如果是分割影像則是以 HTML 和影像格式匯出。

  8. 在「匯出」對話方塊的「儲存於」中，請選取 Dreamweaver 本機網站資料夾。
  9. 「名稱」文字方塊將自動更新為您使用的 PNG 檔案名稱。若要變更名稱，請在這裡輸入文字。
  10. 在「存檔類型」中選取要匯出的一個或多個檔案類型，如「只有影像」或「HTML 和影像」。
  11. 按一下「儲存檔案」，可以儲存匯出的檔案。

    此時檔案已儲存，而且畫面又會回到 Dreamweaver。在 Dreamweaver 文件中，匯出的檔案或 Fireworks 表格將取代影像預留位置。


在 Dreamweaver 中編輯 Fireworks 彈出式選單

您可以在 Fireworks 8 或更新的版本中建立彈出式選單，然後使用 Dreamweaver 或 Fireworks (使用交互編輯) 來編輯，但是不能同時使用。如果您在 Dreamweaver 中編輯選單，然後在 Fireworks 中編輯，您將會失去除了文字內容以外的先前編輯成果。

如果您想要使用 Dreamweaver 編輯選單，您可以使用 Fireworks 建立彈出式選單，然後單獨使用 Dreamweaver 來調整和自訂此選單。

如果您想要在 Fireworks 中編輯選單，您可以使用 Dreamweaver 的交互編輯功能，但是不應該直接在 Dreamweaver 中編輯選單。

若要使用交互編輯來編輯 Fireworks 彈出式選單：

  1. 在 Dreamweaver 中，選取包含彈出式選單的 Fireworks 表格，然後在「屬性」檢視窗中按一下「編輯」。

    原始 PNG 檔就會在 Fireworks 中開啟。

  2. 在 Fireworks 中，使用「彈出式選單編輯器」編輯選單，然後按一下 Fireworks 工具列上的「完成」。

    Fireworks 會將已編輯的彈出式選單傳送回 Dreamweaver。

如果您在 Fireworks MX 2004 或更早版本中建立彈出式選單，就可以使用「顯示彈出式選單」對話方塊在 Dreamweaver 中編輯它。

若要編輯在 Fireworks MX 2004 或更早版本中建立的彈出式選單：

  1. 在 Dreamweaver 中，選取觸發彈出式選單的連結區或影像。
  2. 在「行為」面板 (Shift + F3) 中，在「動作」清單中按兩下「顯示彈出式選單」。

    「顯示彈出式選單」對話方塊便會出現。「顯示彈出式選單」行為讓您可以編輯或更新 Fireworks 中 HTML 彈出式選單的內容。您可以新增、刪除或變更選單項目、重新排列以及設定選單於頁面中的位置。如需有關設定或修改彈出式選單選項的詳細資訊，請參閱顯示彈出式選單。

  3. 對彈出式選單進行您想要的變更，然後按一下「確定」。

相關主題

  • 關於 Fireworks 8 彈出式選單


指定 Fireworks 來源檔案的啟動和編輯偏好設定

使用 Fireworks 來編輯影像時，您放在網頁中的影像，通常是由 Fireworks 從來源 PNG 檔所匯出。當您在 Dreamweaver 中開啟 (「啟動」) 影像檔來進行編輯時，Fireworks 會自動開啟來源 PNG 檔，如果找不到 PNG 檔時會提示您找出此檔案。如果您願意的話，可以設定 Fireworks 中的偏好設定，以便讓 Dreamweaver 開啟插入的影像，或是您可以選擇每次當您在 Dreamweaver 中開啟影像時，讓 Fireworks 提供選項以使用插入的影像檔或 Fireworks 來源檔。

注意

Dreamweaver 只有在特定的情況下，才能識別 Fireworks 啟動和編輯偏好設定。更精確的說，您必須開啟並最佳化不屬於 Fireworks 表格一部分，以及包含前往來源 PNG 檔案之正確「設計備註」路徑的影像。

若要指定 Fireworks 的啟動和編輯偏好設定：

  1. 在 Fireworks 中，請選取「編輯＞偏好設定」或「Fireworks＞偏好設定」(Macintosh)，然後按一下「啟動和編輯」索引標籤 (Windows)，或是從彈出式選單中選取「啟動和編輯」(Macintosh)。
  2. 指定在編輯或最佳化置於外部應用程式中的 Fireworks 影像時，要使用的偏好設定選項：

    永遠使用來源 PNG 自動開啟在「設計備註」中定義的 Fireworks PNG 檔案，做為置入影像的來源。來源 PNG 和其對應的置入影像都會進行更新。

    永不使用來源 PNG 無論來源 PNG 檔案是否存在，都自動開啟置入的 Fireworks 影像。只有置入影像會進行更新。

    啟動時詢問每次都讓您指定是否要開啟來源 PNG 檔案。當您編輯或最佳化置入影像時，Fireworks 會顯示訊息，提示您做出啟動和編輯的決定。您也可以從這個訊息指定統一的啟動和編輯偏好設定。


在 Dreamweaver 文件中插入 Fireworks HTML 程式碼

Fireworks 中的「匯出」命令，可以讓您匯出並儲存最佳化影像和 HTML 檔案到您要的 Dreamweaver 網站資料夾中的特定位置。您可以在 Dreamweaver 中插入這個檔案。如需關於將 Fireworks 檔案匯出為 HTML 的資訊，請參閱「使用 Fireworks」。

Dreamweaver 讓您可以插入 Fireworks 產生的 HTML 程式碼以及相關影像、分割和 JavaScript 到文件中。這項插入功能可以讓您輕易地在 Fireworks 中建立設計元素，然後再將它們併入現有的 Dreamweaver 文件中。

若要將 Fireworks HTML 插入 Dreamweaver 文件：

  1. 在 Dreamweaver 中，將插入點放在您要 Fireworks HTML 程式碼起始的文件上。
  2. 請執行下列其中一項作業：
    • 請選取「插入＞互動式影像＞Fireworks HTML」。
    • 在「插入」列的「一般」類別中，按一下「插入 Fireworks HTML」按鈕。
  3. 在出現的對話方塊中，請按一下「瀏覽」來選取所要的 Fireworks HTML 檔。
  4. 完成作業後，請選取「插入後刪除檔案」選項，將原始的 Fireworks HTML 檔案移動到「資源回收筒」(Windows) 或「垃圾筒」(Macintosh)。

    在插入後，如果不再需要這個 Fireworks HTML 檔案，請使用這個選項。這個選項並不影響與這個 HTML 檔案相關的來源 PNG 檔案。

    注意

    如果 HTML 檔案位於網路磁碟中，就會被永久刪除，而不是移到「資源回收筒」或「垃圾筒」。
  5. 按一下「確定」插入 HTML 程式碼以及相關影像、分割和 JavaScript 到 Dreamweaver 文件中。

相關主題

  • 將 Fireworks HTML 貼到 Dreamweaver


將 Fireworks HTML 貼到 Dreamweaver

要將 Fireworks 產生的影像和表格放置到 Dreamweaver 中的快速方式就是：直接將 Fireworks HTML 程式碼複製並貼到 Dreamweaver 文件。

若要複製並將 Fireworks HTML 程式碼貼到 Dreamweaver 文件：

  1. 在 Fireworks 中，請選取「編輯＞複製 HTML 程式碼」。
  2. 請依照精靈指示，依序完成匯出 HTML 和影像的設定。出現提示時，請指定要做為匯出影像目的地的 Dreamweaver 網站資料夾。

    精靈便會匯出影像到指定的目的地，並且複製 HTML 程式碼到「剪貼簿」。

  3. 在 Dreamweaver 中，將插入點放在您要貼上 HTML 程式碼的文件中，然後再選取「編輯＞貼上」。

    此時，所有與匯出 Fireworks 檔案相關的 HTML 和 JavaScript 都會複製到 Dreamweaver 文件，所有影像的連結也會更新。

若要匯出並將 Fireworks HTML 貼到 Dreamweaver：

  1. 在 Fireworks 中，請選取「檔案＞匯出」。
  2. 在「匯出」對話方塊中指定要做為匯出影像目的地的 Dreamweaver 網站資料夾。
  3. 在「存檔類型」彈出式選單中，請選取「HTML 和影像」。
  4. 在 HTML 彈出式選單中，請選取「複製至剪貼簿」，然後再按一下「存檔」。
  5. 在 Dreamweaver 中，將插入點放在您要貼上匯出之 HTML 程式碼的文件中，然後再選取「編輯＞貼上」。

    此時，所有與匯出 Fireworks 檔案相關的 HTML 和 JavaScript 都會複製到 Dreamweaver 文件，所有影像的連結也會更新。

相關主題

  • 在 Dreamweaver 文件中插入 Fireworks HTML 程式碼


更新置入 Dreamweaver 的 Fireworks HTML

在 Fireworks 中，更新置入 Dreamweaver 的 Fireworks 檔案的方法，除了啟動和編輯之外，還有一種就是「檔案＞更新 HTML」命令。您可以使用「更新 HTML」編輯 Fireworks 中的來源 PNG 影像，然後自動更新任何置入 Dreamweaver 文件中的匯出 HTML 程式碼和影像檔案。這個命令甚至可以讓您在未執行 Dreamweaver 時更新 Dreamweaver 檔案。

若要更新置入 Dreamweaver 的 Fireworks HTML：

  1. 在 Fireworks 中開啟來源 PNG 檔案，進行編輯。
  2. 選取「檔案＞儲存」。
  3. 在 Fireworks 中，請選取「檔案＞更新 HTML」。
  4. 瀏覽至包含您要更新 HTML 的 Dreamweaver 檔案，然後按一下「開啟舊檔」。
  5. 瀏覽到您要放置更新影像檔案的目標資料夾，然後按一下「選取」(Windows) 或「選擇」(Macintosh)。

    Fireworks 便會更新 Dreamweaver 文件中的 HTML 和 JavaScript。Fireworks 也會匯出與這個 HTML 相關的更新影像，並且將影像放置在指定的目標資料夾內。

    如果 Fireworks 找不到相符的 HTML 程式碼進行更新，就會出現將新的 HTML 程式碼插入 Dreamweaver 文件中的選項。Fireworks 會將新程式碼的 JavaScript 區段放在文件的起始處，並且將 HTML 表格或影像連結放在結尾處。


建立網站相簿

您可以自動產生能展示特定資料夾中影像相簿的網站。Dreamweaver 會使用 Fireworks，對資料夾中每一個影像建立縮圖影像和較大的影像。然後，Dreamweaver 就會建立包含所有縮圖影像的網頁，以及到較大影像的連結。若要建立網站相簿，您必須在系統中已安裝 Dreamweaver 和 Fireworks 4 或以上版本。

開始之前，您必須將相簿中的影像放置到單一資料夾內 (這個資料夾不一定要在網站中)。此外，請確定影像檔名具有下列任一種副檔名：.gif、.jpg、.jpeg、.png、.psd、.tif 或 .tiff。無法辨識檔案副檔名的影像就無法加入相簿。

若要建立網站相簿：

  1. 在 Dreamweaver 中，請選取「命令＞建立網站相簿」。
  2. 在「相簿標題」文字方塊中輸入標題。這個標題會以灰色矩形框起，顯示在包含縮圖的頁面頂端。

    您也可以在「副標資訊」和「其他資訊」文字方塊中輸入附加文字，最多兩行，讓它顯示在標題的正下方。

  3. 請按一下「原始影像資料夾」文字方塊旁的「瀏覽」按鈕，便可選取包含來源影像的資料夾。接下來，按一下「目標資料夾」文字方塊旁的「瀏覽」按鈕，選取 (或建立) 放置所有匯出影像和 HTML 檔的目標資料夾。

    目標資料夾中不應包含相簿，如果已經有相簿，而且新影像中有任何與之前使用影像有相同檔名的話，現有的縮圖和影像檔案就會被覆寫。

  4. 指定縮圖影像的顯示選項：
    • 從「縮圖大小」彈出式選單中選取縮圖影像的大小。影像是依比例建立縮圖，而這些縮圖會顯示在指定像素尺寸的方形內。
    • 若要在對應縮圖下顯示每個原始影像的檔案名稱，請選取「顯示檔案名稱」。
    • 輸入顯示這些縮圖的表格之欄位號碼。
  5. 從「縮圖格式」彈出式選單中，選取縮圖影像的格式：

    GIF 接近網頁 128 色建立 GIF 縮圖，使用最高達 128 色的網站最適化調色盤。

    GIF 接近網頁 256 色建立 GIF 縮圖，使用最高達 256 色的網站最適化調色盤。

    JPEG─較高品質可以建立相對而言品質較高及較大型檔案的 JPEG 縮圖。

    JPEG─較小檔案可建立品質相對而言較差，但檔案較小型的 JPEG 縮圖。

  6. 從「相片格式」彈出式選單中，選取大型影像的格式。便會建立每張原始影像的指定格式大型影像。指定給大型影像的格式可以與指定給縮圖的格式不同。

    注意

    「建立網站相簿」命令無法讓您使用原始影像檔案做為大型影像，因為非 GIF 和 JPEG 格式的原始影像可能無法在所有瀏覽器上正常顯示。請注意如果您的原始影像是 JPEG 檔案，產生的大型影像可能檔案更大，或是品質比原始檔案差。
  7. 選取大型影像的「縮放」百分比。

    設定縮放比例為 100% 時，建立的大型影像會與原始影像大小相同。請注意，這個縮放比例會套用到所有影像，如果原始影像的大小不盡相同時，將它們依相同比例縮放可能無法產生所要的結果。

  8. 選取「為每張相片建立導覽頁面」便可建立每張來源影像的個別網頁，其中包含標示為「上一頁」、「首頁」以及「下一頁」的導覽連結。

    如果您選取這個選項，這些縮圖便可以連結到導覽頁面，如果沒有選取這個選項，縮圖會直接連結到大型影像。

  9. 按一下「確定」，建立網站相簿的 HTML 和影像檔案。

    Fireworks 便會啟動 (如果它尚未執行的話)，並且建立縮圖和大型影像。如果您加入了大量的影像檔案，這個動作可能需耗費幾分鐘。整個程序完成後，Dreamweaver 便會再次作用並且建立包含這些縮圖的頁面。

  10. 當對話方塊顯示「相簿已經建立」時，請按一下「確定」。

    請稍候數秒等待相簿網頁出現。縮圖將會按照檔案名稱的字母先後順序來顯示。

    注意

    在程序開始後按下 Dreamweaver 對話方塊中的「取消」按鈕並無法停止建立相簿的程序，這個動作只能阻止 Dreamweaver 顯示主要相簿頁面。


使用 Flash

您可以使用 Dreamweaver 來設定網頁中 Flash 影片的播放和顯示選項，或是更新影片中的連結。如果已安裝 Flash，也可以選取 Dreamweaver 文件中的 SWF 檔案，再啟動 Flash 來編輯它。

本節包含下列主題：

  • 在 Dreamweaver 中編輯 Flash 內容
  • 更新 SWF 檔案中的連結

相關主題

  • 關於 Fireworks 和 Flash 整合
  • 插入和修改 Flash 按鈕物件
  • 插入 Flash 文字物件
  • 插入 Flash 內容


在 Dreamweaver 中編輯 Flash 內容

如果已安裝 Flash，您也可以選取 Dreamweaver 文件中的 SWF 檔案，再開啟 Flash 來編輯它。Flash 不會直接編輯 SWF 檔案，它會編輯來源文件 (FLA 檔)，然後再重新匯出 SWF 檔。

若要開啟並編輯從 Dreamweaver 插入的 Flash 內容：

  1. 在 Dreamweaver 中，請選取「視窗＞屬性」來開啟「屬性」檢視窗 (如果它尚未開啟的話)。
  2. 在 Dreamweaver 文件中執行下列其中一項作業。
    • 按一下 SWF 檔案預留位置來選取它，然後在「屬性」檢視窗中按一下「編輯」。

      注意

      如果您沒有 Flash，就無法使用「編輯」按鈕。
    • 按住 Control (Windows) 或 Command (Macintosh) 並且按兩下要編輯影片的影片預留位置。
    • 按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 所要的影像，然後從快速選單中選取「使用 Flash 編輯」。

    Dreamweaver 會啟動 Flash，而 Flash 會嘗試找出所選 SWF 檔的 Flash 編寫檔案 (.FLA)。如果 Flash 找不到 Flash 編寫檔案，系統會顯示尋找的提示。您無法直接更新 SWF 檔案，必須對來源檔案進行變更，然後再以 SWF 影片檔案匯出。

    注意

    如果 FLA 檔案或 SWF 檔案是鎖定的，Dreamweaver 會提示您檢查檔案、取消請求或者檢視檔案。
  3. 在 Flash 中編輯影片。「文件」視窗會顯示您正在修改 Dreamweaver 的影片。
  4. 完成編輯後，請按一下「完成」。

    Flash 會更新 Flash 編寫文件 (FLA 檔)、重新匯出影片檔案 (SWF 檔)、關閉，然後再將畫面返回 Dreamweaver 文件中。

  5. 只要按一下「屬性」檢視窗中的「播放」，或按 F12 鍵在瀏覽器視窗中預覽頁面，就可以檢視文件中已更新的 SWF。

更新 SWF 檔案中的連結

您可以使用 Dreamweaver 來更新 Flash 檔案 (SWF 檔) 中的連結，然後再更新 Flash 編寫文件 (FLA 檔) 中的變更。

若要更新 SWF 檔案中的 URL 連結：

  1. 如果您尚未設定此網站的首頁，請開始設定。

    您必須設定首頁才能建立網站地圖。在「網站地圖」檢視中，您必須顯示相關的檔案才能更新 SWF 檔案中的連結。依預設值，網站地圖無法顯示相關的檔案。如需關於顯示相關檔案的資訊，請參閱顯示和隱藏網站地圖檔案。如需關於「網站地圖」檢視的資訊，請參閱檢視網站地圖。

  2. 開啟「網站地圖」檢視。
  3. 若要顯示相關檔案，請執行下列其中一項作業：
    • 選取「檢視＞顯示相關檔案」。
    • 選取「檢視＞版面」以開啟「網站定義」對話方塊，然後選取「顯示相關檔案」選項。

    連結便會出現在 SWF 檔案下方。

  4. 請執行下列其中一項作業來變更連結：
    • 若要變更選取之 SWF 中的連結，請以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 連結，然後選取「變更連結」，接著在 URL 文字方塊所顯示的對話方塊中，輸入新的 URL 路徑。
    • 若要更新此連結的所有實體，請選取「網站＞更改整個網站的連結」，然後在出現之對話方塊的「更改所有舊連結」文字方塊中，瀏覽或輸入您要變更之連結的路徑，最後在「變成新連結」文字方塊中，瀏覽到新的 URL 或輸入其路徑。
  5. 按一下「確定」。

當執行啟動和編輯時，SWF 檔案中所有 Dreamweaver 更新的連結都會傳遞到 FLA 來源檔案。Dreamweaver 自動在「設計備註」中將連結變更記錄到 SWF 檔案，而當 Flash 將變更傳送到 FLA 檔案時，就會將這些變更自「設計備註」中移除。


新增音效、視訊和互動元素

Macromedia Dreamweaver 8 可以讓您將音效和影片快速而輕鬆地新增到網站中。您可以將「設計備註」附加到這些物件，與團隊通訊。您也可以從 Dreamweaver 本身中插入 Macromedia Flash 8 按鈕和文字物件。

本章包含下列各節：

關於媒體檔

插入和編輯媒體物件

啟動媒體檔案的外部編輯器

對媒體物件使用設計備註

插入和修改 Flash 按鈕物件

插入 Flash 文字物件

插入 Flash 內容

下載並安裝 Flash 元素

插入 Flash 元素

編輯 Flash 元素屬性

插入 FlashPaper 文件

插入 Flash 視訊內容

插入 Shockwave 影片

新增視訊 (非 Flash)

新增音效到頁面

插入 Netscape Navigator 外掛程式內容

插入 ActiveX 控制項

插入 Java Applet

使用行為控制媒體


關於媒體檔

您可以將下列媒體檔合併到 Dreamweaver 網頁中：Flash 和 Shockwave 影片、QuickTime、AVI、Java Applet、Active X 控制項及各種格式的音效檔。

本節包含下列概念性主題：

  • 關於 Flash 檔案類型
  • 關於音效檔格式


關於 Flash 檔案類型

無論您是否在電腦上安裝 Flash，皆可以使用 Dreamweaver 隨附的 Flash 物件。如果您有 Flash，請參閱使用 Flash 中有關以整合方式使用這些應用程式的相關資訊。

使用 Dreamweaver 中可用的 Flash 命令之前，您應該瞭解三種不同的 Flash 檔案類型：

Flash 檔案 (.fla) 是任何專案的來源檔，並且是在 Flash 程式中建立的。這種類型的檔案只能在 Flash 中開啟 (不能在 Dreamweaver 或瀏覽器中開啟)。您可以在 Flash 中開啟 Flash 檔，然後再將它匯出為 SWF 或 SWT 檔以便在瀏覽器中使用。

Flash SWF 檔 (.swf) 是壓縮版本的 Flash (.fla) 檔，已經最佳化可供在網路上檢視。此檔案可以在瀏覽器中播放，也可以在 Dreamweaver 中預覽，但是不能在 Flash 中編輯。這是在使用 Flash 按鈕和 Flash 文字物件時，所建立的檔案類型。如需詳細資訊，請參閱插入和修改 Flash 按鈕物件、插入 Flash 文字物件和插入 Flash 內容。

Flash 樣版檔案 (.swt) 可以讓您修改和取代 Flash SWF 檔案中的資訊。Flash 按鈕物件中可以使用這些檔案，讓您用自己的文字或連結來修改樣版，以便建立在文件中插入的自訂 SWF。在 Dreamweaver 中，這些樣版檔案的位置是在 Dreamweaver/Configuration/Flash Objects/Flash Buttons and Flash Text 資料夾中。

您可以從 Macromedia Exchange for Dreamweaver 網站 ( www.macromedia.com/go/dreamweaver_exchange_tw) 下載新的按鈕樣版，並且將它們放在 Flash Button 資料夾中。如需關於建立新按鈕樣版的詳細資訊，請參閱有關這個主題的文章，網址為 www.macromedia.com/go/flash_buttons。

Flash 元素檔 (.swc) 是讓您將其包含在網頁中，以建立豐富 Internet 應用程式的 Flash SWF 檔案。Flash 元素擁有可自訂化的參數，您可以修改以執行不同的應用程式功能。如需詳細資訊，請參閱插入 Flash 元素和編輯 Flash 元素屬性。

Flash 視訊檔案格式 (.flv) 是包含透過 Flash Player 傳遞之編碼音訊和視訊資料的視訊檔案。例如，如果您有 QuickTime 或 Windows Media 視訊檔案，就可以使用編碼器 (例如，Flash 8 Video Encoder 或 Sorensen Squeeze) 將視訊檔案轉換為 FLV 檔。如需詳細資訊，請參閱 Flash 視訊開發人員中心，網址為 www.macromedia.com/go/flv_devcenter_tw。

相關主題

  • 使用其他應用程式
  • 插入和修改 Flash 按鈕物件
  • 插入 Flash 文字物件
  • 插入 Flash 內容
  • 插入 Flash 視訊內容


關於音效檔格式

以下清單描述較常見的音效檔格式，以及在網頁設計上的一些優點和缺點。

.midi 或 .mid (Musical Instrument Digital Interface) 格式適用於樂器演奏的音樂。許多瀏覽器都支援 MIDI 檔，而且不需要外掛程式。雖然這種檔案的音效品質非常好，不過這得視瀏覽者的音效卡而定，其效果不盡相同。一個小小的 MIDI 檔可以提供很長的音效片段。MIDI 檔案不能夠錄音，而且必須用特殊的硬體和軟體在電腦上合成。

.wav (Waveform Extension) 格式檔案具有很好的音效品質，且大部份瀏覽器都支援，同時也不需要外掛程式。您可以從 CD、錄音帶、麥克風等錄製自己的 WAV 檔案。但是這種檔案太大，會嚴重限制可以在網頁上使用的音效片段之長度。

.aif (Audio Interchange File Format，AIFF) 格式和 WAV 格式一樣，擁有很好的音效品質，大部份瀏覽器都能播放，而且不需要外掛程式。您也可以從 CD、錄音帶、麥克風等來錄製 AIFF 檔案。但是，這種檔案太大，嚴重限制了可以在網頁上使用的音效片段長度。

.mp3 (Motion Picture Experts Group Audio，MPEG-Audio Layer-3) 格式是一種可使音效檔大幅減小的壓縮格式。音效品質非常好：MP3 檔案如果經過適當錄製和壓縮，品質可與 CD 相當。MP3 技術讓您可以用「資料流」方式來處理檔案，讓瀏覽者不需要等到整個檔案下載之後才能聽到。但是，這種檔案大小會比 Real Audio 檔案來得大，所以在一般的撥接 (電話線) 數據機連線上仍然要花相當長的時間才能下載整首歌曲。若要播放 MP3 檔案，瀏覽者必須下載和安裝輔助工具應用程式或外掛程式，例如 QuickTime、Windows Media Player 或 RealPlayer。

.ra、.ram、.rpm 或 Real Audio 格式壓縮程度非常高，所以檔案大小比 MP3 更小。整首歌曲在短時間內就可以下載完畢。由於一般網路伺服器可以用「資料流方式」處理檔案，所以瀏覽者在檔案完全下載之前就可以收聽音效。瀏覽者必須下載和安裝 RealPlayer 輔助工具應用程式或外掛程式，才能播放這些檔案。

.qt、qtm、mov 或 QuickTime 都是 Apple Computer 開發的音效及影片格式。QuickTime 是隨附在 Apple Macintosh 作業系統中，是用在大部份使用音效、影片或動畫的 Macintosh 應用程式上。PC 也可以撥放 QuickTime 格式的檔案，不過需要特殊的 QuickTime 驅動程式。QuickTime 支援大部份的編碼格式，包括 Cinepak、JPEG 和 MPEG。

注意

除了上述所列的常用格式之外，在網頁上還有許多不同的音效和影片檔案格式可以使用。如果您遇到不熟悉的媒體檔案格式，請尋找該格式的建立廠商，以獲得如何使用及部署該格式的最佳方式資訊。

相關主題

  • 插入和編輯媒體物件
  • 連結到音效檔
  • 嵌入聲音檔案


插入和編輯媒體物件

您可以在 Dreamweaver 文件中插入 Flash SWF 檔案或物件、QuickTime 或 Shockwave 影片、Java Applet、ActiveX 控制項或其他音訊或視訊物件。

若要在頁面中插入媒體物件：

  1. 將插入點放在「文件」視窗中您想要插入物件的位置上。
  2. 請執行下列其中一項作業來插入物件：
    • 在「插入」列的「常用」類別中，請按一下「媒體」按鈕，然後選取您想要插入的物件類型按鈕。

    • 從「插入＞媒體」子選單中選取適當的物件。
    • 如果您要插入的物件並非 Flash、Shockwave、Applet 或 ActiveX 物件，請使用 Netscape Navigator 外掛程式按鈕 (即「插入」列上的拼圖圖示) 來將它插入。如需詳細資訊，請參閱插入 Netscape Navigator 外掛程式內容。

    大部分情況下，會出現一個對話方塊，讓您選取媒體物件的原始檔案和指定某些參數。

    提示

    如果不想讓這類對話方塊出現，請選取「編輯＞偏好設定＞一般設定」(Windows) 或「Dreamweaver＞偏好設定＞一般設定」(Macintosh)，並取消選取「插入物件時顯示對話方塊」選項。如果要覆寫已經對顯示對話方塊所設定的任何偏好設定，請在插入物件時按住 Control (Windows) 或 Option (Macintosh) 鍵 (例如，若要在不指定檔案的情況下插入 Shockwave 影片的預留位置，按住 Control 或 Option，然後在「常用插入」列的「媒體」彈出式選單中按一下 Shockwave 按鈕，或選取「插入>媒體>Shockwave」)。
  3. 請完成「選取檔案」或「插入 Flash」對話方塊。
  4. 按一下「確定」。

    如果您已啟動「偏好設定」中的對話方塊，就會出現「物件標籤輔助功能屬性」對話方塊 (請參閱最佳化具有輔助功能的頁面設計工作區)。

  5. 如果「物件標籤輔助功能屬性」對話方塊出現，請完成對話方塊，然後再按一下「確定」。

    如需詳細資訊，請參閱設定「物件標籤輔助功能屬性」對話方塊選項。

    媒體物件便會出現在文件中。

    注意

    如果您按一下「取消」，媒體物件預留位置會出現在文件中，但是 Dreamweaver 並沒有將存取標籤或屬性與它建立關聯。

    若要指定來源檔案、設定尺寸及其他參數和屬性，請使用每個物件的「屬性」檢視窗。如需關於編輯物件輔助功能屬性的資訊，請參閱編輯媒體物件的輔助功能屬性。


編輯媒體物件的輔助功能屬性

如果您對媒體物件插入輔助功能屬性 (請參閱插入和編輯媒體物件)，可以在 HTML 程式碼中編輯這些值。

若要編輯媒體物件的存取值：

  1. 在「文件」視窗中選取物件。
  2. 請執行下列其中一項作業：
    • 在「程式碼」檢視中編輯適當的屬性。
    • 按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「編輯標籤程式碼」。


啟動媒體檔案的外部編輯器

您可以從 Dreamweaver 來啟動外部編輯器，以便編輯大部份的媒體檔案。您也可以指定您希望由 Dreamweaver 啟動用來編輯檔案的編輯器。

本節包含下列主題：

  • 從 Dreamweaver 啟動外部編輯器
  • 指定從 Dreamweaver 啟動的編輯器

從 Dreamweaver 啟動外部編輯器

您可以從 Dreamweaver 來啟動外部編輯器，以便編輯大部份的媒體檔案。

若要從 Dreamweaver 啟動外部編輯器：

  1. 請確定媒體檔案類型已關聯到您系統上的編輯器。

    若要查明何種編輯器關聯到檔案類型，在 Dreamweaver 中請選取「編輯＞偏好設定」，再從「分類」清單中選取「檔案型態/編輯器」。按一下「副檔名」欄中的檔案副檔名，便可檢視「編輯器」欄中相關的編輯器。您可以變更關聯到某種檔案類型的編輯器。如需詳細資訊，請參閱指定從 Dreamweaver 啟動的編輯器。

  2. 按兩下「網站」面板中的媒體檔案，便可在外部編輯器中開啟此檔案。

    當您在「網站」面板中按兩下檔案時所啟動的編輯器，就稱為主要編輯器。例如，如果您按兩下影像檔案，Dreamweaver 便會在主要外部影像編輯器中 (如 Macromedia Fireworks) 開啟此檔案。

  3. 如果您不希望使用主要外部編輯器來編輯檔案，可以藉由執行下列其中一項作業，使用系統上另一個編輯器來編輯檔案：
    • 在「網站」面板中，按下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh) 檔案名稱，並從快速選單中選取「開啟使用」
    • 在「設計」檢視中，在目前頁面的媒體元素上按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，並從快速選單中選取「編輯程式」。


指定從 Dreamweaver 啟動的編輯器

您可以指定希望 Dreamweaver 用來編輯檔案類型的編輯器，並且新增或刪除 Dreamweaver 可以辨識的檔案類型。

若要對於指定的檔案類型，明確指定應該啟動哪種外部編輯器：

  1. 選取「編輯＞偏好設定」，再從「分類」清單中選取「檔案類型/編輯器」。

    副檔名 (例如 .gif、.wav 和 .mpg) 就會列在左邊「副檔名」的下方。與所選取副檔名關聯的編輯器則會列在右邊「編輯器」的下方。

  2. 在「副檔名」清單中選取該檔案類型的副檔名，再執行下列其中一項作業：
    • 若要將新的編輯器與檔案類型建立關聯，按一下「編輯器」清單上方的加號 (+) 按鈕，再完成出現的對話方塊。

      例如，選取 Acrobat 的應用程式圖示，並將它關聯到檔案類型。

    • 若要將編輯器設定成某種檔案類型的主要編輯器 (亦即，當您在「網站」面板中按兩下檔案時所開啟的編輯器)，請於「編輯器」清單中選取編輯器，再按一下「設為主要的」。
    • 若要取消檔案類型與編輯器的關聯，請於「編輯器」清單中選取編輯器，再按一下「編輯器」清單上的減號 (-) 按鈕。

若要新增檔案類型和關聯的編輯器：

  1. 按一下「副檔名」清單上的加號 (+) 按鈕，再輸入檔案類型副檔名 (包括副檔名開頭的句點)，或是輸入幾個以空格分隔的相關副檔名。

    例如，您可以輸入 .xml .xsl，以便建立它們與您系統上已安裝之 XML 編輯器的關聯。

  2. 請按一下「編輯器」清單上的加號 (+) 按鈕，再完成出現的對話方塊，便能選取檔案類型的編輯器。

若要移除檔案類型：

  • 在「副檔名」清單中選取該檔案類型，再按一下「副檔名」清單上的減號 (-) 按鈕。

    注意

    在移除檔案類型後將無法還原，所以請確定您的確要將它移除。

相關主題

  • 設定外部影像編輯器偏好設定


對媒體物件使用設計備註

就像對 Dreamweaver 中的其他物件一樣，您可以將「設計備註」新增到媒體物件。「設計備註」是關聯到特殊檔案的備註，並儲存在個別的檔案中。您可以使用「設計備註」來記錄與文件關聯的額外檔案資訊，如影像原始檔案名稱和對檔案狀態的註解。如需關於使用「設計備註」的詳細資訊，請參閱在設計備註中儲存檔案資訊。

若要新增「設計備註」到媒體物件：

  1. 在「文件」視窗中用滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 物件。

    注意

    新增「設計備註」到任何物件之前，您必須先定義網站 (請參閱啟動和停用網站的設計備註)。
  2. 從快速選單中選取「設計備註」。
  3. 在「設計備註」中輸入您要的資訊。

    提示

    您也可以從「網站」面板新增「設計備註」到媒體物件，方法是選取檔案，顯示快速選單，然後從快速選單選擇「設計備註」。


插入和修改 Flash 按鈕物件

當您在 Dreamweaver 中工作時，可以在文件中建立、插入和修改 Flash 按鈕；不一定需要 Macromedia Flash。Flash 按鈕物件是依據 Flash 樣版的可更新按鈕。您可以自訂 Flash 按鈕物件、新增文字、背景顏色以及到其他檔案的連結。

本節包含下列主題：

  • 建立和插入 Flash 按鈕
  • 修改 Flash 按鈕物件
  • 在文件中播放 Flash 按鈕物件

相關主題

  • 關於 Flash 檔案類型
  • 插入 Flash 文字物件
  • 插入 Flash 內容
  • 使用 Flash


建立和插入 Flash 按鈕

當您在「設計」檢視或「程式碼」檢視中工作時，可以在文件中建立和插入 Flash 按鈕。

注意

插入 Flash 按鈕或文字物件之前，您必須先儲存文件。

若要插入 Flash 按鈕物件：

  1. 在「文件」視窗中，將插入點放在您要插入 Flash 按鈕的位置上。
  2. 若要開啟「插入 Flash 物件」對話方塊，請執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請選取「媒體」然後按一下「Flash 按鈕」圖示。 這是描述功能的圖片。
    • 選取「插入＞媒體＞Flash 按鈕」。

    「插入 Flash 按鈕」對話方塊便會出現。

  3. 請完成「插入 Flash 按鈕」對話方塊，再按一下「套用」或「確定」，以便在「文件」視窗中插入 Flash 按鈕。

    提示

    若要在「設計」檢視中預覽按鈕，請按一下「套用」。此時對話方塊會維持開啟，而且您可以預覽文件中的按鈕。

相關主題

  • 修改 Flash 按鈕物件
  • 在文件中播放 Flash 按鈕物件


修改 Flash 按鈕物件

您可以修改 Flash 按鈕物件的屬性和內容。

若要修改 Flash 按鈕物件：

  1. 在「文件」視窗中，請按一下 Flash 按鈕物件來選取它。
  2. 開啟「屬性」檢視窗 (如果還沒有開啟的話)。

    「屬性」檢視窗就會顯示 Flash 按鈕屬性。您可以使用「屬性」檢視窗來修改按鈕的 HTML 屬性，如寬度、高度和背景顏色。

  3. 若要變更內容，請使用下列其中一種方法來顯示「插入 Flash 按鈕」對話方塊：
    • 按兩下 Flash 按鈕物件。
    • 在「屬性」檢視窗中按一下「編輯」。
    • 按一下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，並從快速選單中選取「編輯」。
  4. 在「插入 Flash 按鈕」對話方塊中，請於先前所述的文字方塊 (請參閱插入和修改 Flash 按鈕物件) 內進行編輯。

    在「設計」檢視中，您可以使用調整大小控制點，輕易地調整物件大小。您也可以在「屬性」檢視窗中選取「重設大小」，將物件還原成原始大小 (請參閱調整影像大小)。

相關主題

  • 建立和插入 Flash 按鈕
  • 在文件中播放 Flash 按鈕物件


在文件中播放 Flash 按鈕物件

您可以在 Dreamweaver「文件」視窗中預覽 Flash 按鈕。

若要在「文件」視窗中查看 Flash 按鈕物件播放：

  1. 在「設計」檢視的文件中，請選取 Flash 按鈕物件。
  2. 在「屬性」檢視窗中，按一下「播放」。
  3. 按一下「停止」即可結束預覽。

    注意

    您不能對正在播放的 Flash 按鈕物件進行編輯。

您最好先在瀏覽器中預覽文件，以查看 Flash 按鈕的正確外觀。

相關主題

  • 建立和插入 Flash 按鈕
  • 修改 Flash 按鈕物件


插入 Flash 文字物件

Flash 文字物件可以讓您建立和插入只含有文字的 Flash SWF 檔案。用喜歡的設計者字體和文字，建立小型的向量圖形影片。

若要插入 Flash 文字物件：

  1. 在「文件」視窗中，將插入點置於您要插入 Flash 文字的位置上。
  2. 若要開啟「插入 Flash 文字」對話方塊，請執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請選取「媒體」然後按一下「Flash 文字」圖示。 這是描述功能的圖片。
    • 選取「插入＞媒體＞Flash 文字」。

    「插入 Flash 文字」對話方塊便會出現。

  3. 請完成「插入 Flash 文字」對話方塊，再按一下「套用」或「確定」，以便在「文件」視窗中插入 Flash 文字。

    如果您按一下「套用」，這個對話方塊會保持開啟，讓您預覽文件中的文字。

若要修改或播放 Flash 文字物件，請使用與 Flash 按鈕相同的程序 (請參閱修改 Flash 按鈕物件)。

相關主題

  • 關於 Flash 檔案類型
  • 插入和修改 Flash 按鈕物件
  • 插入 Flash 內容
  • 使用 Flash


插入 Flash 內容

您可以使用 Dreamweaver 在頁面中插入 Flash 內容。

若要插入 SWF 檔案 (Flash 內容)：

  1. 在「文件」視窗的「設計」檢視中，將插入點置於您要插入內容的位置，然後執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請選取「媒體」然後按一下「插入 Flash」圖示。 這是描述功能的圖片。
    • 選取「插入＞媒體＞Flash」。
  2. 在出現的對話方塊中，選取 Flash 檔案 (.swf)。

    Flash 預留位置便會出現在「文件」視窗中 (與 Flash 按鈕和文字物件不同)。如需關於設定 Flash SWF 檔案屬性的資訊，請參閱設定 Flash 和 Shockwave 影片屬性。

若要在「文件」視窗中預覽 Flash 內容：

  1. 在「文件」視窗中，按一下 Flash 預留位置來選取您要預覽的 Flash 內容。
  2. 在「屬性」檢視窗中，按一下「播放」按鈕。按一下「停止」即可結束預覽。您也可以按 F12 鍵，在瀏覽器中預覽 Flash 內容。

    提示

    若要預覽頁面中所有的 Flash 內容，請按 Control + Alt + Shift + P (Windows) 或 Shift + Option + Command + P (Macintosh)。所有 Flash 物件和 SWF 檔案就會設定成「播放」。

相關主題

  • 關於 Flash 檔案類型
  • 插入和修改 Flash 按鈕物件
  • 插入 Flash 文字物件
  • 使用 Flash
  • 插入 Flash 視訊內容


下載並安裝 Flash 元素

若要在您的網頁中使用 Flash 元素，您必須先使用「擴充功能管理員」將元素新增至 Dreamweaver。「擴充功能管理員」是一個個別的應用程式，可讓您安裝及管理 Macromedia 應用程式中的擴充功能。從 Dreamweaver 中選擇「命令＞管理擴充功能」來啟動「擴充功能管理員」。

若要尋找 Dreamweaver 的最新 Flash 元素，請造訪 Macromedia Exchange 網站，網址為 http://www.macromedia.com/go/dreamweaver_exchange_tw。您可以登入該網站並下載 Flash 元素和其他 dreamweaver 擴充功能 (很多是免費的)、加入討論群組、檢視使用者評價和校閱，以及安裝和使用「擴充功能管理員」。在您安裝新增 Flash 元素或其他 Dreamweaver 擴充功能前，您必須安裝「擴充功能管理員」。

如需關於使用「擴充功能管理員」安裝 Flash 元素 (以及其他 Dreamweaver 擴充功能) 的資訊，請參閱新增擴充功能至 Dreamweaver。


插入 Flash 元素

藉由使用 Dreamweaver，您可以將 Flash 元素插入至文件中。Flash 元素讓您可以使用預先建立的元素，快速輕鬆地建立 Rich Internet Application。如需關於 Flash 元素，以及在網頁中如何使用它們的詳細資訊，請參閱關於 Flash 檔案類型。

若要插入 Flash 元素：

  1. 在「文件」視窗中，將插入點置於您要插入 Flash 元素的位置，然後執行下列其中一項作業：
    • 在「插入」列的 Flash 元素類別中，按一下您想要插入的 Flash 元素圖示。
    • 選取「插入＞媒體＞Flash 元素名稱」。

      Dreamweaver 包括了一個 Flash 元素，稱為「影像檢視器」。

    「儲存 Flash 元素」對話方塊便會出現。

  2. 輸入 Flash 元素的檔案名稱，並將其儲存在網站的適當位置中。
  3. 按一下「確定」。

    Flash 元素預留位置便會出現在文件中。您可以使用「標籤」和「屬性」檢視窗修改 Flash 元素的屬性。如需詳細資訊，請參閱編輯 Flash 元素屬性。

  4. 選取「檔案＞在瀏覽器中預覽」，便可預覽 Flash 元素。


編輯 Flash 元素屬性

使用「屬性」和「標籤」檢視窗編輯 Flash 元素屬性。

若要編輯 Flash 元素屬性：

  1. 請在「文件」視窗中執行下列其中一項作業：
    • 在「設計」檢視中，請選取 Flash 元素。
    • 在「程式碼」檢視中，請按一下 Flash 組件的名稱或其內容的任意處。
  2. 如果其尚未顯示，請開啟標籤檢視窗 (「視窗>標籤檢視窗」)。
  3. 使用「標籤」檢視窗和「屬性」檢視窗編輯 Flash 元素屬性。
  4. 按 Enter (Windows) 或 Return (Macintosh)，或按一下標籤檢視窗中的其他地方，以更新文件中的標籤。

    如需關於完成「標籤」檢視窗的資訊，請參閱設定 Flash 元素檢視窗。

相關主題

  • 插入 Flash 元素


插入 FlashPaper 文件

您可以在網頁中插入 Macromedia FlashPaper 文件。在瀏覽器中開啟含有 FlashPaper 文件的網頁時，使用者就可以在 FlashPaper 文件中瀏覽所有的網頁，而不需要載入新網頁。使用者還可以搜尋、列印並放大或縮小顯示文件。

如需 FlashPaper 的詳細資訊，請參閱 Macromedia 網站，網址為 www.macromedia.com/go/flashpaper_tw。

若要在網頁中插入 FlashPaper 文件：

  1. 在「文件」視窗中，請在您希望網頁顯示 FlashPaper 文件的地方放置插入點，然後選取「插入＞媒體＞FlashPaper」。
  2. 在「插入 FlashPaper」對話方塊中，瀏覽並選取 FlashPaper 文件。
  3. 如果需要的話，您可以輸入寬度和高度 (以像素為單位)，來指定網頁上 FlashPaper 物件的尺寸。

    FlashPaper 將會調整文件以符合指定的寬度。

  4. 按一下「確定」將文件插入網頁。

    由於 FlashPaper 文件是 Flash 物件，因此網頁上會顯示 Flash 預留位置。

  5. 若要預覽 FlashPaper 文件，請按一下預留位置，再按一下「屬性」檢視窗中的「播放」按鈕。

    按一下「停止」即可結束預覽。您也可以按 F12 鍵，在瀏覽器中預覽文件。FlashPaper 工具列可以完全地在瀏覽器中發揮作用。

    提示

    若要預覽頁面中所有的 Flash 內容，請按 Control + Alt + Shift + P (Windows) 或 Shift + Option + Command + P (Macintosh)。所有 Flash 物件和 SWF 檔案就會設定成「播放」。
  6. 如果需要的話，您可以在「屬性」檢視窗中設定其他屬性。

    就 Flash 物件而言，FlashPaper 物件會共用 Flash 物件的「屬性」檢視窗。如需關於設定屬性的詳細資訊，請按一下「屬性」檢視窗中的「說明」按鈕。


插入 Flash 視訊內容

Dreamweaver 可讓您輕易地在網頁中插入 Flash 視訊內容，而不需要使用 Flash 撰寫工具。Dreamweaver 會插入 Flash 視訊組件；當您在瀏覽器中進行檢視時，這個組件會顯示您所選取的 Flash 視訊內容以及一組播放控制項。

本節包含下列主題：

  • 關於插入 Flash 視訊
  • 插入 Flash 視訊
  • 偵測用來檢視 Flash 視訊的 Flash Player 版本
  • 編輯和刪除 Flash 視訊組件

如需關於 Flash 視訊的詳細資訊，請造訪 Flash 視訊開發人員中心，網址為 www.macromedia.com/go/flv_devcenter_tw。


關於插入 Flash 視訊

Dreamweaver 提供下列 Flash 視訊內容傳遞選項，方便您的網站瀏覽者觀賞：

漸進式下載視訊會將 Flash 視訊 (FLV) 檔案下載至網站瀏覽者的硬碟，然後再播放檔案。不同於傳統的「下載後播放」視訊傳遞方法，漸進式下載允許視訊檔案在下載完成之前開始播放。

串流視訊會串流 Flash 視訊內容，並在確保播放流暢的短暫緩衝時間過後，在網頁上播放該內容。若要在網頁上啟用串流視訊，您必須具有 Macromedia Flash Communication Server 的存取權。

您必須具備編碼的 Flash 視訊 (FLV) 檔案，才可以用在 Dreamweaver 中。您可以插入兩種轉碼器 (壓縮/解壓縮技術) 所建立的視訊檔案：Sorenson Squeeze 和 On2。

  • 如果您是以 Sorenson Squeeze 轉碼器來建立視訊，網站瀏覽者必須使用 Flash Player 7 或更新版本，來播放漸進式下載視訊，或是使用 Flash Player 6.0.79 或更新版本，來播放串流視訊。
  • 如果您是以 On2 轉碼器來建立視訊，網站瀏覽者則必須使用 Flash Player 8 或更新版本。

將 Flash 視訊檔案插入網頁之後，您就可以在網頁中插入程式碼，以偵測使用者是否使用正確的 Flash Player 版本來檢視 Flash 視訊。如果使用者未使用正確的版本，便會出現提示，要求他們下載最新版本的 Flash Player。如需詳細資訊，請參閱偵測用來檢視 Flash 視訊的 Flash Player 版本。

如需關於 Flash 視訊的詳細資訊，請造訪 Flash 視訊開發人員中心，網址為 www.macromedia.com/go/flv_devcenter_tw。

相關主題

  • 插入 Flash 視訊內容
  • 偵測用來檢視 Flash 視訊的 Flash Player 版本
  • 編輯和刪除 Flash 視訊組件


插入 Flash 視訊

您可以使用 Dreamweaver 將 Flash 視訊內容插入網頁中。在插入內容之前，您必須具備編碼的 Flash 視訊 (FLV) 檔案。如需詳細資訊，請參閱關於 Flash 檔案類型。

若要將 Flash 視訊插入網頁：

  1. 選取「插入＞媒體＞Flash 視訊」。
  2. 在「插入 Flash 視訊」對話方塊中，從「視訊類型」彈出式選單中選取「漸進式下載視訊」或「串流視訊」。

    如需關於這兩個選項的詳細資訊，請參閱關於插入 Flash 視訊。

  3. 完成對話方塊的其他選項。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

    您可以選取能夠插入程式碼，以偵測用來檢視 Flash 視訊的必要 Flash Player 版本，並在使用者未具備正確 Flash Player 版本時，提示使用者下載最新版 Flash Player 的選項。如需詳細資訊，請參閱偵測用來檢視 Flash 視訊的 Flash Player 版本。

  4. 按一下「確定」。

相關主題

  • 設定「插入 Flash 視訊」對話方塊選項
  • 偵測用來檢視 Flash 視訊的 Flash Player 版本
  • 編輯和刪除 Flash 視訊組件


偵測用來檢視 Flash 視訊的 Flash Player 版本

在網頁中插入 Flash 視訊檔案時，您也可以插入程式碼，以偵測使用者是否使用正確的 Flash Player 版本來檢視 Flash 視訊。如果使用者未使用正確的版本，便會出現提示，要求他們下載最新版本的 Flash Player。

依建立視訊所使用的轉碼器而定，可能需要使用不同的 Flash Player 版本來檢視 Flash 視訊。如果您的視訊是以 Sorenson Squeeze 轉碼器建立，網站瀏覽者必須使用 Flash Player 7 或更新版本，來播放漸進式下載視訊，並使用 Flash Player 6.0.79 或更新版本，來播放串流視訊。如果您的視訊是以 On2 轉碼器建立，網站瀏覽者則必須使用 Flash Player 8 或更新版本。

若要插入會偵測 Flash Player 版本的程式碼：

  1. 將 Flash 視訊插入網頁時，請選取「插入 Flash 視訊」對話方塊中的「必要的話，請提示使用者下載 Flash Player」選項。

    如果網頁中已經有 Flash 視訊，請以選取的選項來偵測該視訊並再次插入。

    注意

    如果您插入其他 Flash 視訊，而該視訊必須使用與第一個視訊不同的更新版 Flash Player 才能檢視，偵測程式碼將會提示使用者下載更新的版本。
  2. 接受預設警告訊息，或提供自己的警告訊息。

如果您決定從網頁移除 Flash 視訊，您將不再需要偵測程式碼。您可以使用 Dreamweaver 來進行移除。

若要移除會偵測 Flash Player 版本的程式碼：

  • 選取「命令＞移除 Flash 視訊偵測」。

相關主題

  • 設定「插入 Flash 視訊」對話方塊選項
  • 插入 Flash 視訊
  • 編輯和刪除 Flash 視訊組件


編輯和刪除 Flash 視訊組件

若要變更網頁中 Flash 視訊內容的設定，您必須在 Dreamweaver「文件」視窗中，選取 Flash 視訊組件預留位置，並使用「屬性」檢視窗，或是選取「插入＞媒體＞Flash 視訊」，以刪除 Flash 視訊組件並再重新插入。

若要編輯 Flash 視訊組件：

  1. 按一下預留位置中央的 Flash 視訊圖示，以便在 Dreamweaver「文件」視窗中，選取 Flash 視訊組件預留位置。
  2. 開啟「屬性」檢視窗 (「視窗＞屬性」)。
  3. 進行您要的變更。

    「屬性」檢視窗中的選項與「插入 Flash 視訊」對話方塊的選項相似。如需詳細資訊，請參閱設定「插入 Flash 視訊」對話方塊選項。

    注意

    您無法使用「屬性」檢視窗來變更視訊類型 (例如，從漸進式下載視訊變更為串流視訊)。若要變更視訊類型，您必須先刪除 Flash 視訊組件，再選取「插入＞媒體＞Flash 視訊」重新插入組件。

若要刪除 Flash 視訊組件：

  • 在 Dreamweaver「文件」視窗中，選取 Flash 視訊組件預留位置，並按 Delete 鍵。

相關主題

  • 插入 Flash 視訊內容


插入 Shockwave 影片

您可以使用 Dreamweaver 在文件中插入 Shockwave 影片。Shockwave 為 Macromedia 網頁互動式多媒體的標準，是一種壓縮格式，可以讓大部分常用瀏覽器快速地下載和播放在 Macromedia Director 中建立的媒體檔案。

若要插入 Shockwave 影片：

  1. 在「文件」視窗中，將插入點置於您要插入 Shockwave 影片的位置，然後執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請從選單按一下「媒體」按鈕並選取 Shockwave 圖示。 這是描述功能的圖片。
    • 選取「插入＞媒體＞Shockwave」。
  2. 在出現的對話方塊中，選取影片檔案。
  3. 在「屬性」檢視窗的「寬」和「高」文字方塊中，輸入影片的寬度和高度。

    如需關於其他屬性的資訊，請參閱設定 Flash 和 Shockwave 影片屬性。


新增視訊 (非 Flash)

您在以使用不同方式和不同格式，將視訊新增到網頁。視訊可以下載到使用者端，也可以用資料流方式邊下載邊播放。

如果要在頁面中併入簡短的視訊片段，讓使用者可以下載：

  1. 先將片段放在網站資料夾中。

    這些影片片段通常是 AVI 或 MPEG 檔案格式。

  2. 在頁面中連結到此片段或將它嵌入。

    若要連結到片段，請輸入連結的文字，如「下載片段」，選取文字後再按一下「屬性」檢視窗中的資料夾圖示。請瀏覽至視訊檔並選取它。

如需關於如何在網頁中併入串流視訊的詳細資訊，請參閱插入 Netscape Navigator 外掛程式內容。

注意

使用者必須下載輔助工具應用程式，才能檢視一般串流格式，如 Real Media、QuickTime 和 Windows 媒體。


新增音效到頁面

您可以在網頁中加入音效。音效檔和格式有好幾種不同的類型，包括 .wav、.midi 和 .mp3。如需詳細資訊，請參閱關於音效檔格式。決定新增音效格式和方法之前，必須先考量以下因素：目的、訴求對象、檔案大小、音效品質以及瀏覽器的差異。

注意

不同的瀏覽器處理音效檔的方式各有不同，彼此也不一致。您或許可以將音效檔新增到 Flash SWF 檔案，然後再將 SWF 檔案嵌入以增進一致性。

本節包含下列主題：

  • 連結到音效檔
  • 嵌入聲音檔案

連結到音效檔

連結到音效檔，是新增音效到網頁的一種簡單而有效的方式。這種整合音效檔案的方法，可以讓瀏覽者選擇是否要聽這個檔案，也可以讓檔案供更多瀏覽者使用。

若要建立音效檔的連結：

  1. 選取您要用做音效檔連結的文字或影像。
  2. 在「屬性」檢視窗中，按一下資料夾圖示來瀏覽音效檔，或在「連結」文字方塊中輸入檔案的路徑和名稱。


嵌入聲音檔案

嵌入音效會直接將音效包含在網頁中，但是網站瀏覽者必須擁有所選取音效檔的正確外掛程式，才能播放這個音效。如果您要音效當做背景音樂，或是想要控制音量、頁面上播放器的外觀，或是音效檔的開始和結束點，請嵌入檔案。

提示

當您將音效檔包含在網頁中時，請審慎考量其在網站中的適當使用方式，以及您的網站瀏覽者如何使用這些媒體資源。請一定要提供啟用或停用音效播放的控制項，因為網站瀏覽者也許不想要聆聽音效內容。

若要嵌入音效檔：

  1. 在「設計」檢視中，將插入點置於您要嵌入檔案的位置，然後執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，按一下「媒體」按鈕，然後選取外掛程式圖示。
    • 選取「插入＞媒體＞Plugin」。

    如需關於「外掛程式」物件的詳細資訊，請參閱插入 Netscape Navigator 外掛程式內容。

  2. 在「屬性」檢視窗中，按一下資料夾圖示來瀏覽音效檔，或在「連結」文字方塊中輸入檔案的路徑和名稱。
  3. 在適當文字方塊中輸入值，或在「文件」視窗中調整外掛程式預留位置的大小，輸入寬度和高度。

    這些值會決定瀏覽器中所顯示音效控制項的大小。


插入 Netscape Navigator 外掛程式內容

您可以對 Netscape Navigator 外掛程式建立像是 QuickTime 影片的內容，然後再使用 Dreamweaver 將該內容插入 HTML 文件中。典型的外掛程式包括 RealPlayer 和 QuickTime，而其他的內容檔則包括 MP3 和 QuickTime 影片。

本節包含下列主題：

  • 在網頁中插入外掛程式內容
  • 在文件視窗中播放外掛程式
  • Netscape Navigator 外掛程式疑難排解


在網頁中插入外掛程式內容

您的網頁可以包含將會在使用者瀏覽器的外掛程式中執行的內容。

若要插入 Netscape Navigator 外掛程式內容：

  1. 在「文件」視窗的「設計」檢視中，將插入點置於您要插入內容的位置，然後執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請選取「媒體」，然後按一下外掛程式圖示。 這是描述功能的圖片。
    • 選取「插入＞媒體＞Plugin」。
  2. 在出現的對話方塊中，選取 Netscape Navigator 外掛程式的內容檔案。

    如需可用屬性的相關資訊，請參閱設定 Netscape Navigator 外掛程式屬性。

相關主題

  • 在文件視窗中播放外掛程式
  • Netscape Navigator 外掛程式疑難排解


在文件視窗中播放外掛程式

您可以直接在「文件」視窗的「設計」檢視中，預覽使用 Netscape Navigator 外掛程式的影片和動畫。您可以一次播放所有外掛程式元素，查看使用者在網頁上看到的外觀，或者您也可以分開來個別播放，以確保嵌入了正確的媒體元素。

注意

您無法在預覽使用 ActiveX 控制項的影片或動畫。

若要在「設計」檢視中播放影片，您的電腦上必須安裝適當的外掛程式。

若要在「文件」視窗中播放外掛程式內容：

  1. 請選取「插入＞媒體＞Shockwave」、「插入＞媒體＞Flash」或是「插入＞媒體＞外掛程式」，便可插入一個或多個媒體元素。
  2. 請執行下列其中一項作業：
    • 選取一個已經插入的媒體元素，然後選取「檢視＞外掛程式＞執行」，或是在「屬性」檢視窗中按一下「執行」按鈕。
    • 選取「檢視＞外掛程式＞全部執行」，可播放所選取網頁上使用外掛程式的所有媒體元素。

      注意

      「全部播放」只能套用到目前的文件，不能套用到頁框組中的其他文件。

若要停止播放外掛程式內容：

  • 選取媒體元素再選取「檢視＞外掛程式＞停止」，或在「屬性」檢視窗中按一下「停止」按鈕。

    您也可以選取「檢視＞外掛程式＞全部停止」，便可停止播放所有的外掛程式內容。


Netscape Navigator 外掛程式疑難排解

如果您按照步驟在「文件」視窗中播放外掛程式內容，但是有些外掛程式內容不會播放，請嘗試下列方法：

  • 請確定您的電腦上已安裝了關聯的外掛程式，而且這個內容與您擁有的外掛程式版本相容。
  • 在文字編輯器中開啟 Configuration/Plugins/UnsupportedPlugins.txt 檔案，查看是否列出了有問題的外掛程式。這個檔案會追蹤在 Dreamweaver 中造成問題，因此而不支援的外掛程式。(如果在使用特定外掛程式時遇到問題，可以考慮將它加入這個檔案)。
  • 請檢查您擁有足夠的記憶體。有些外掛程式需要額外的 2 到 5 MB 記憶體才能執行。


插入 ActiveX 控制項

您可以在頁面中插入 ActiveX 控制項。ActiveX 控制項 (以往稱為 OLE 控制項) 是可重複使用的元素，有點類似小型的應用程式，作用就像瀏覽器外掛程式一樣，它們是在 Windows 上的 Internet Explorer 中執行，但是不能在 Macintosh 或 Netscape Navigator 上執行。Dreamweaver 中的 ActiveX 物件，可讓您對瀏覽者其瀏覽器中的 ActiveX 控制項，提供屬性和參數。

若要插入 ActiveX 控制項內容：

  1. 在「文件」視窗中，將插入點置於您要插入內容的位置，然後執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請按一下「媒體」按鈕上的下拉箭頭，然後再選取 ActiveX 圖示。 這是描述功能的圖片。
    • 在「插入」列的「常用」類別中，請按一下「媒體」按鈕上的下拉箭頭，然後再選取 ActiveX 圖示。使用「插入」列中顯示的 ActiveX 圖示，可以將圖示拖曳至「文件」視窗
    • 選取「插入＞媒體＞ActiveX」。

    圖示就會標記出 ActiveX 控制項將會出現在 Internet Explorer 網頁上的位置。

    如需可用屬性的相關資訊，請參閱設定 ActiveX 屬性。


插入 Java Applet

您可以使用 Dreamweaver，將 Java Applet 插入 HTML 文件中。Java 是一種程式語言，可用來開發能嵌入網頁的小型應用程式 (Applet)。

若要插入 Java Applet：

  1. 在「文件」視窗中，將插入點置於您要插入 Applet 的位置上，然後再執行下列其中一項作業：
    • 在「插入」列的「常用」類別中，請按一下「媒體」按鈕上的下拉箭頭，然後再選取 Applet 圖示 這是描述功能的圖片。 。
    • 選取「插入＞媒體＞Applet」。
  2. 在出現的對話方塊中，選取含有 Java Applet 的檔案。

    如需可用屬性的相關資訊，請參閱設定 Java Applet 屬性。


使用行為控制媒體

您可以將行為新增到頁面，以便啟動或停止各種媒體物件。

控制 Shockwave 或 Flash 可以讓您播放、停止、倒帶或移至 Shockwave 影片或 Flash SWF 檔案中的某個影格 (請參閱控制 Shockwave 或 Flash)。

播放聲音可以讓您播放音效。例如，您可以在使用者將滑鼠指標移動到連結上的時候，播放音效 (請參閱播放聲音)。

檢查外掛程式可讓您檢查網站的瀏覽者，是否已安裝所需的外掛程式，然後再依據他們是否擁有正確的外掛程式，將他們導引到不同的 URL。這只適用於 Netscape Navigator 外掛程式，因為「檢查外掛程式」行為不會檢查 ActiveX 控制項。如需詳細資訊，請參閱檢查外掛程式。


參考

本節將提供這一章裡所介紹的下列對話方塊和「屬性」檢視窗相關資訊：

  • 設定 Flash 物件屬性
  • 使用參數控制媒體物件
  • 設定「插入 Flash 視訊」對話方塊選項
  • 設定 Flash 和 Shockwave 影片屬性
  • 設定 Netscape Navigator 外掛程式屬性
  • 設定 ActiveX 屬性
  • 設定 Java Applet 屬性
  • 設定「物件標籤輔助功能屬性」對話方塊選項
  • 設定「插入 Flash 按鈕」對話方塊選項
  • 設定 Flash 元素檢視窗
  • 設定 Flash 元素「編輯陣列」對話方塊選項


設定 Flash 物件屬性

Flash 物件的「屬性」檢視窗 (在 Dreamweaver 中產生的按鈕和文字物件)，最初會顯示最常用的屬性。按一下右下角的展開箭頭即可查看更多屬性。

名稱指定識別以 Script 處理的按鈕名稱。在「屬性」檢視窗最左邊沒有標籤的文字方塊中輸入名稱。

W 和 H 以像素為單位，指定物件的寬度和高度。

檔案是指定 Flash 物件檔案的路徑。請按一下資料夾圖示來瀏覽檔案，或輸入路徑。

編輯會開啟 Flash 物件的對話方塊，讓您對選取的 Flash 物件進行編輯。

重設大小會將選取的物件重設為原始大小。

垂直距離和水平距離是以像素為單位，指定按鈕上、下以及兩邊空白區域的數目。

品質為定義按鈕的 object 及 embed 標籤設定 quality 參數。設定值較高的 Flash 內容品質會比較好，但是需要較快速的處理器才能正確地呈現在螢幕上。「低」是強調速度重於品質，而「高」則是品質重於速度。「自動降低」會先強調速度，但是也會儘可能增進品質。「自動提高」是同時強調兩者，但必要時可犧牲品質以換取速度。

縮放設定 object 和 embed 標籤 (定義按鈕或文字物件) 的 scale 參數。這個參數定義如何在 width 和 height 值定義的 SWF 檔案區域內顯示 Flash 內容。可用選項包括：「預設 (全部顯示)」、「無邊框」和「精確符合」。「全部顯示」會在指定的區域內顯示整個 SWF 檔案，維持 SWF 檔案的比例並且防止失真；背景顏色的邊框可能會出現在 SWF 檔案的兩邊。「無邊框」有些類似「全部顯示」，不同的是 SWF 檔案的某些部分可能會被裁切。使用「精確符合」的話，整個 SWF 檔案會填滿指定的區域，但是無法維持 SWF 檔案的比例，而且有可能會失真。

對齊定義物件在頁面上對齊的方式。如需每個選項的描述，請參閱對齊影像。

背景指定物件的背景顏色。

播放/停止可以讓您在「文件」視窗中預覽 Flash 物件。按一下綠色的「播放」按鈕可以在「播放」模式中查看物件；按一下紅色的「停止」按鈕即可停止物件並且可以編輯物件。

參數會開啟對話方塊以便輸入其他參數 (請參閱使用參數控制媒體物件)。


使用參數控制媒體物件

使用「參數」對話方塊，可以輸入針對 Shockwave 和 Flash SWF 檔、ActiveX 控制項、Netscape Navigator 外掛程式和 Java Applet 已定義的特別參數值。這些參數是配合 object、embed 和 applet 標籤使用。這些參數會設定所要插入物件類型特有的屬性。例如，Flash 物件可以有物件標籤的品質參數 <param name="quality" value="best">。您可以在「屬性」檢視窗中看到「參數」對話方塊。請參閱您所使用物件的文件，以瞭解有關其所需參數的資訊。

注意

目前還沒有普遍接受的標準可供識別 ActiveX 控制項的資料檔。請參閱您所使用之 ActiveX 控制項的文件，以瞭解應使用哪些參數。

若要開啟「參數」對話方塊：

  1. 請在「文件」視窗中選取可以擁有參數的物件 (如 Shockwave 影片、ActiveX 控制項、Netscape Navigator 外掛程式或 Java Applet)。
  2. 使用下列任何方式之一開啟對話方塊：
    • 以滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh) 此物件，然後再從快速選單中選取「參數」。
    • 開啟「屬性」檢視窗 (如果還沒有開啟的話)，然後按一下位於「屬性」檢視窗下半部的「參數」按鈕。(請確定「屬性」檢視窗已經展開)。

若要在「參數」對話方塊中輸入參數值：

  1. 按一下「加號」(+) 按鈕。
  2. 在「參數」欄中輸入參數名稱。
  3. 在「值」欄中輸入參數值。

若要移除參數：

  • 請先選取參數再按減號 (-) 按鈕。

若要重新排列參數：

  • 選取參數然後使用向上鍵和向下鍵按鈕。


設定「插入 Flash 視訊」對話方塊選項

這個對話方塊可讓您針對已插入網頁的 Flash 視訊 (FLV) 檔案設定選項。

若要完成「漸進式下載視訊」的「插入 Flash 視訊」對話方塊：

  1. 從「視訊類型」彈出式選單中選取「漸進式下載視訊」。
  2. 請指定下列選項：

    URL 指定 FLV 檔案的相對路徑或絕對路徑。若要指定相對路徑 (例如，mypath/myvideo.flv)，請按一下「瀏覽」按鈕，瀏覽並選取 FLV 檔案。若要指定絕對路徑，請輸入 FLV 檔案的 URL (例如，http://www.example.com/myvideo.flv)。

    注意

    為了讓視訊播放程式正常運作，FLV 檔案必須包含中繼資料。以 Flash Communication Server 1.5.2、FLV Exporter 1.2 版和 Sorenson Squeeze 4.0 建立的 FLV 檔案會自動包含中繼資料。

    在 Macintosh 上，如果您所指向的 FLV 檔案位於 HTML 檔上面兩層以上的目錄，就必須使用絕對路徑。

    外觀指定 Flash 視訊組件的外觀。您所選取的外觀預覽畫面會出現在「外觀」彈出式選單的下方。

    寬度指定了 FLV 檔案的寬度 (以像素為單位)。若要讓 Dreamweaver 判斷 FLV 檔案的確切寬度，請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷寬度，您就必須輸入寬度值。

    高度指定了 FLV 檔案的高度 (以像素為單位)。若要讓 Dreamweaver 判斷 FLV 檔案的確切高度，請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷高度，您就必須輸入高度值。

    注意

    外觀的總計，就是 FLV 檔案的寬度和高度，加上所選外觀的寬度和高度。

    限制會將 Flash 視訊組件的寬度和高度維持在相同的比例。此選項為預設選取的選項。

    「自動播放」指定是否要在開啟網頁時播放視訊。

    「自動倒帶」指定是否要在播放完視訊後，讓播放控制項返回起始位置。

    如有需要提示使用者下載 Flash Player 會在網頁中插入程式碼，以偵測用來檢視 Flash 視訊的必要 Flash Player 版本，並在使用者未具備必要的版本時，提示使用者下載最新版 Flash Player。如需詳細資訊，請參閱偵測用來檢視 Flash 視訊的 Flash Player 版本。

    訊息指定了所要顯示的訊息，該訊息會在使用者需要下載最新版 Flash Player 以檢視 Flash 視訊時顯示。

  3. 按一下「確定」關閉對話方塊，然後為網頁加入 Flash 視訊內容。

    「插入 Flash 視訊」命令會產生一個視訊播放程式 SWF 檔案和一個外觀 SWF 檔案，這些檔案可用來在網頁上顯示您的 Flash 視訊內容 (您可能需要在「檔案」面板中按一下「重新整理」按鈕以查看新的檔案)。這些檔案以及加入 Flash 視訊內容的 HTML 檔案，均儲存在相同的目錄中。當您上傳含有 Flash 視訊內容的 HTML 網頁時，Dreamweaver 會上傳這些檔案做為相關檔案 (只要您在按一下「要上傳相關檔案嗎?」對話方塊中按一下「是」)。

若要完成「串流視訊」的「插入 Flash 視訊」對話方塊：

  1. 從「視訊類型」彈出式選單中選取「串流視訊」。
  2. 請指定下列選項：

    伺服器 URI 指定 rtmp://www.example.com/app_name/instance_name 格式中的伺服器名稱、應用程式名稱和實體名稱。

    串流名稱會指定您要播放的 FLV 檔案名稱 (例如，myvideo.flv)。.flv 副檔名為選擇性。

    注意

    為了讓視訊播放程式正常運作，FLV 檔案必須包含中繼資料。以 Flash Communication Server 1.5.2、FLV Exporter 1.2 版和 Sorenson Squeeze 4.0 建立的 FLV 檔案會自動包含中繼資料。

    外觀指定 Flash 視訊組件的外觀。您所選取的外觀預覽畫面會出現在「外觀」彈出式選單的下方。

    寬度指定了 FLV 檔案的寬度 (以像素為單位)。若要讓 Dreamweaver 判斷 FLV 檔案的確切寬度，請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷寬度，您就必須輸入寬度值。

    高度指定了 FLV 檔案的高度 (以像素為單位)。若要讓 Dreamweaver 判斷 FLV 檔案的確切高度，請按一下「偵測大小」按鈕。如果 Dreamweaver 無法判斷高度，您就必須輸入高度值。

    注意

    外觀的總計，就是 FLV 檔案的寬度和高度，加上所選外觀的寬度和高度。

    限制會將 Flash 視訊組件的寬度和高度維持在相同的比例。此選項為預設選取的選項。

    即時視訊播送指定了是否要即時播送 Flash 視訊內容。如果選取了「即時視訊播送」，Flash Player 將會播放 Flash Communication Server 用資料流方式處理的即時視訊播送。即時視訊播送的名稱即為「串流名稱」文字方塊中指定的名稱。

    注意

    當您選取「即時視訊播送」時，組件的外觀上只會出現音量控制項，因為您無法操作即時視訊。此外，「自動播放」和「自動倒帶」也都無法使用。

    「自動播放」指定是否要在開啟網頁時播放視訊。

    「自動倒帶」指定是否要在播放完視訊後，讓播放控制項返回起始位置。

    緩衝時間指定在視訊開始播放之前，緩衝所需要的時間 (以秒為單位)。預設緩衝時間是設定為 0，在您按下「播放」按鈕之後，視訊就會立即開始播放 (如果選取了「自動播放」，則只要連線到伺服器，視訊就會開始播放)。如果要傳遞的視訊具有大於網站瀏覽者連線速度的位元速率，或者 Internet 流量可能會造成頻寬或連線問題，您都可以設定緩衝時間。例如，如果您想要在網頁開始播放視訊之前，先傳送 15 秒的視訊到網頁，請將緩衝時間設定為 15。

    如有需要提示使用者下載 Flash Player 會在網頁中插入程式碼，以偵測用來檢視 Flash 視訊的必要 Flash Player 版本，並在使用者未具備必要的版本時，提示使用者下載最新版 Flash Player。如需詳細資訊，請參閱偵測用來檢視 Flash 視訊的 Flash Player 版本。

    訊息指定了所要顯示的訊息，該訊息會在使用者需要下載最新版 Flash Player 以檢視 Flash 視訊時顯示。

  3. 按一下「確定」關閉對話方塊，然後為網頁加入 Flash 視訊內容。

    「插入 Flash 視訊」命令會產生一個視訊播放程式 SWF 檔案和一個外觀 SWF 檔案，這些檔案是用來在網頁上顯示您的 Flash 視訊內容 這個命令也會產生必須上傳到 Flash Communication Server 的 main.asc 檔案 (您可能需要在「檔案」面板中按一下「重新整理」按鈕以查看新的檔案)。這些檔案以及加入 Flash 視訊內容的 HTML 檔案，均儲存在相同的目錄中。當您上傳含有 Flash 視訊內容的 HTML 網頁時，請記得將這些 SWF 檔案上傳至您的網站伺服器，並將 main.asc 檔案上傳到 Flash Communication Server。

    注意

    如果您的伺服器上已經有 main.asc 檔案，請務必先向您的伺服器管理員進行確認，再上傳「插入 Flash 視訊」命令所產生的 main.asc 檔案。

    在 Dreamweaver「文件」視窗中，選取 Flash 視訊組件預留位置，並按一下「屬性」檢視窗 (「視窗＞屬性」) 中的「上傳媒體」按鈕，即可上載所有必要的媒體檔案。如果要參閱必要檔案清單，請按一下「顯示必要檔案」。

    注意

    「上傳媒體」按鈕不會上傳含有 Flash 視訊內容的 HTML 檔案。

相關主題

  • 關於插入 Flash 視訊
  • 插入 Flash 視訊
  • 偵測用來檢視 Flash 視訊的 Flash Player 版本
  • 編輯和刪除 Flash 視訊組件


設定 Flash 和 Shockwave 影片屬性

為確保在 Internet Explorer 和 Netscape Navigator 中都能獲得最佳效果，Dreamweaver 會同時使用 object 和 embed 標籤來插入 Flash 和 Shockwave 影片。(object 標籤是由 Microsoft 對 ActiveX 控制項所定義的；embed 則是由 Netscape Navigator 對外掛程式所定義的)。若要在「屬性」檢視窗中檢視下列屬性，請選取 Flash SWF 檔案或 Shockwave 影片。如需詳細資訊，請參閱插入和修改 Flash 按鈕物件和插入 Shockwave 影片。

若要查看所有 Flash SWF 檔案屬性，請按一下「屬性」檢視窗右下角的展開箭頭。

名稱是指定用來識別要以 Script 處理的影片名稱。在「屬性」檢視窗最左邊沒有標籤的文字方塊中輸入名稱。

W 與 H 指定影片的寬度和高度 (以像素為單位)。

檔案是指定 Flash 或 Shockwave 檔案的路徑。請按一下資料夾圖示來瀏覽檔案，或輸入路徑。

原始檔是當電腦上同時安裝了 Dreamweaver 和 Flash 時，用來指定 Flash 原始文件 (FLA)。若要編輯 Flash 檔案 (SWF)，您必須更新影片的來源文件。

編輯可以讓您啟動 Flash，以更新 FLA 檔案。如果您的電腦上未載入 Flash，這個按鈕會是停用的。如需關於編輯已插入之 Flash SWF 檔案的資訊，請參閱在 Dreamweaver 中編輯 Flash 內容。

重設大小會將選取的影片重設為原來的大小。

重複， 選取之後會讓影片不斷地播放。如果沒有選取，影片播放一次就會停止。

自動播放， 選取之後，只要頁面載入就會自動播放影片。

垂直距離和水平距離是以像素為單位，指定影片上、下以及兩邊的空白區域。

品質是控制影片播放時的消除鋸齒效果。設定值較高的影片品質會比較好，但是需要較快速的處理器才能正確地呈現在螢幕上。「低」是強調速度重於品質，而「高」則是品質重於速度。「自動降低」會先強調速度，但是也會儘可能增進品質。「自動提高」是同時強調兩者，但必要時可犧牲品質以換取速度。

縮放是決定影片要如何配合在寬度和高度文字方塊中設定的尺寸。「預設」設定值會顯示整個影片。

無邊框會讓影片配合設定好的尺寸，不會顯示邊框，而且會維持原來的比例。

精確符合會配合尺寸縮放影片，不管比例為何。

對齊決定影片在頁面上如何對齊。如需每種對齊選項的描述，請參閱對齊影像。

背景指定影片區域的背景顏色。這個顏色在影片停止播放時 (載入並且播放之後) 也會顯示。

參數會開啟對話方塊，以便輸入要傳遞給影片的其他參數。如需關於新增或刪除參數的詳細資訊，請參閱使用參數控制媒體物件。影片必須已經設計好接受這些其他參數。


設定 Netscape Navigator 外掛程式屬性

在插入 Netscape Navigator 外掛程式的內容之後 (請參閱插入 Netscape Navigator 外掛程式內容)，請使用「屬性」檢視窗來設定該內容的參數。若要在「屬性」檢視窗檢視下列屬性，請選取 Netscape Navigator 外掛程式物件。

「屬性」檢視窗一開始會顯示最常用的屬性。按一下右下角的展開箭頭即可查看所有屬性。

名稱指定用來識別要以 Script 處理的外掛程式名稱。在「屬性」檢視窗最左邊沒有標籤的文字方塊中輸入名稱。

W 和 H 以像素為單位，指定頁面上配置給物件的寬度和高度。

原始檔指定原始資料檔。請按一下資料夾圖示瀏覽檔案，或輸入檔案名稱。

外掛 URL 指定 pluginspace 屬性的 URL。請輸入使用者可以下載外掛程式的網站完整 URL。如果檢視這個網頁的使用者沒有外掛程式，瀏覽器會嘗試從這個 URL 下載。

對齊決定物件在頁面上如何對齊。如需每個選項的描述，請參閱對齊影像。

垂直距離和水平距離是以像素為單位，指定外掛程式上、下以及兩邊的空白數量。

邊框指定環繞外掛程式的邊框寬度。

參數會開啟對話方塊，以便輸入要傳遞給 Netscape Navigator 外掛程式的其他參數 (請參閱使用參數控制媒體物件)。許多外掛程式會回應特定的參數。例如，Flash 外掛程式含有 bgcolor、salign 和 scale 的參數。

您也可以按一下「屬性」按鈕，檢視指定給所選取外掛程式的屬性。您可以在這個對話方塊中編輯、新增和刪除如寬度和高度這類屬性。


設定 ActiveX 屬性

在插入 ActiveX 物件 (請參閱插入 ActiveX 控制項) 之後，請使用「屬性」檢視窗來設定 object 標籤的屬性和 ActiveX 控制項的參數。在「屬性」檢視窗中按一下「參數」，輸入「屬性」檢視窗中沒有出現之屬性的名稱和值。目前還沒有普遍接受的標準格式可供識別 ActiveX 控制項的參數。如需找出要使用的參數，請參考您正使用之 ActiveX 控制項的文件。

「屬性」檢視窗一開始會顯示最常用的屬性。按一下右下角的展開箭頭即可查看所有屬性。

名稱指定用來識別要以 Script 處理的 ActiveX 物件名稱。在「屬性」檢視窗最左邊沒有標籤的文字方塊中輸入名稱。

W 和 H 以像素為單位，指定物件的寬度和高度。

Class ID 是對瀏覽器識別 ActiveX 控制項。請輸入值，或是從彈出式選單中選取其中一項。載入網頁時，瀏覽器會使用這個 Class ID，尋找與這個網頁關聯的 ActiveX 物件所需要的 ActiveX 控制項。如果瀏覽器找不到指定的 ActiveX 控制項，它會嘗試從「基本」中所指定的位置來下載它。

內嵌會將 embed 標籤加入到 ActiveX 控制項的 object 標籤之內。如果 ActiveX 控制項擁有同等效果的 Netscape Navigator 外掛程式，embed 標籤就會啟動這個外掛程式。Dreamweaver 會將您輸入做為 ActiveX 屬性的值，指定給它們同等效果的 Netscape Navigator 外掛程式。

對齊決定物件在頁面上如何對齊。如需每個選項的描述，請參閱對齊影像。

參數會開啟對話方塊，以便輸入要傳遞給 ActiveX 物件的其他參數 (請參閱使用參數控制媒體物件)。許多 ActiveX 控制項會回應特定的參數。

原始檔是定義在「內嵌」選項開啟時，要使用於 Netscape Navigator 外掛程式的資料檔。如果沒有輸入值，Dreamweaver 會嘗試從已經輸入的 ActiveX 屬性來判斷這個值。

垂直距離和水平距離是以像素為單位，指定物件上、下以及兩邊的空白數量。

路徑指定含有 ActiveX 控制項的 URL。如果瀏覽者的系統上尚未安裝這個 ActiveX 控制項，Internet Explorer 就會從這個位置來下載它。如果沒有指定「基本」參數而且瀏覽者也沒有安裝相關 ActiveX 控制項，則瀏覽器就無法顯示這個 ActiveX 物件。

替代影像可指定當瀏覽器不支援 object 標籤時，將會顯示的影像。必須取消選取「內嵌」選項，這個選項才會出現。

資料指定 ActiveX 控制項要載入的資料檔。許多 ActiveX 控制項 (例如 Shockwave 和 RealPlayer) 不使用這個參數。


設定 Java Applet 屬性

在插入 Java Applet (請參閱插入 Java Applet) 之後，請使用「屬性」檢視窗來設定參數。若要在「屬性」檢視窗中檢視下列屬性，請選取 Java Applet。

「屬性」檢視窗一開始會顯示最常用的屬性。按一下右下角的展開箭頭即可查看所有屬性。

名稱指定用來識別要以 Script 處理的 Applet 名稱。在「屬性」檢視窗最左邊沒有標籤的文字方塊中輸入名稱。

W 與 H 指定 Applet 的寬度和高度 (以像素為單位)。

程式檔可指定包含這個 Applet 之 Java 程式碼的檔案。請按一下資料夾圖示瀏覽檔案，或輸入檔案名稱。

路徑識別含有所選取 Applet 的資料夾。當您選取 Applet 時，這個文字方塊便會自動填入。

對齊決定物件在頁面上如何對齊。如需每個選項的描述，請參閱對齊影像。

替代可指定當使用者的瀏覽器不支援 Java Applet 或已停用 Java 時，將會顯示的替代內容 (通常為影像)。如果您輸入文字，Dreamweaver 會將文字插入 Applet’ 的 alt 的屬性中當做值。如果您選取影像，則 Dreamweaver 會在開啟和結束的 applet 標籤之間，插入 img 標籤。

注意

若要指定可以同時在 Netscape Navigator (已停用 Java) 和 Lynx (文字瀏覽器) 檢視的替代內容，請選取影像，然後在「程式碼」檢視窗中以手動方式將 alt 屬性加入 img 標籤中。

垂直距離和水平距離是以像素為單位，指定 Applet 上、下以及兩邊的空白數量。

參數會開啟對話方塊，以便輸入要傳遞給 Applet 的其他參數 (請參閱使用參數控制媒體物件)。許多 Applet 會回應特定的參數。


設定「物件標籤輔助功能屬性」對話方塊選項

這個對話方塊是用來設定媒體物件輔助功能選項。其讓螢幕讀取器讀取物件的標題。

若要設定媒體物件輔助功能選項：

  1. 在「標題」文字方塊中輸入媒體物件的標題。
  2. 在「存取鍵」文字方塊中輸入鍵盤對應值 (單一字母)，以便在瀏覽器中選取表單物件。

    其讓網站瀏覽者配合「存取鍵」來使用 Control 鍵和「存取鍵」 (Windows) 物件。例如，如果您輸入 B 做為「存取鍵」，請使用 Control + B 在瀏覽器中選取物件。

  3. 在「定位停駐點索引」文字方塊中，輸入表單物件的 Tab 鍵順序編號。

    如果頁面上有其他連結和表單物件，而且需要使用者依特定順序以 Tab 鍵在其中依序移動，設定 Tab 鍵順序就很有用處。如果您針對物件設定了 Tab 鍵順序，就必須對所有物件都設定 Tab 鍵順序。

  4. 按一下「確定」。

    注意

    如果您按「取消」，媒體物件預留位置便會出現在文件中，但是 Dreamweaver 並沒有將輔助功能標籤或屬性與該媒體物件預留位置建立關聯。

相關主題

  • 插入和編輯媒體物件


設定「插入 Flash 按鈕」對話方塊選項

當您在「設計」檢視或「程式碼」檢視中工作時，可以在文件中建立和插入 Flash 按鈕。

若要設定「插入 Flash 按鈕」對話方塊選項：

  1. 從「樣式」清單選取您要的按鈕樣式。

    然後在「範例」文字方塊中檢視按鈕的範例。按一下範例，查看在瀏覽器中的運作情形。

    注意

    當您定義 Flash 按鈕時 (例如，變更文字或字體選項)，「範例」文字方塊不會自動更新以反映這些變更。當您關閉這個對話方塊並且在「設計」檢視中檢視按鈕時，這些變更才會出現。
  2. (選擇性) 在「按鈕文字」文字方塊中，鍵入您希望顯示的文字。

    選取的按鈕必須已定義 {Button Text} 參數，這個欄位才會接受變更。這些變更會顯示在「範例」文字方塊中。當您預覽檔案時，您所輸入的文字將會取代 {Button Text}。

  3. 在「字體」彈出式選單中，選取您要使用的字體。

    如果系統上沒有按鈕的預設字體，請從彈出式選單選取另一種字體。您在「範例」文字方塊中不會看到所選取的字體，但是您可以按一下「套用」將按鈕插入頁面，便能查看這些文字看起來的外觀。

  4. 在「大小」文字方塊中，請輸入字體大小的數值。
  5. (選擇性) 在「連結」文字方塊中，請輸入此按鈕的文件相對或絕對連結。

    這是當瀏覽者按下按鈕時瀏覽器將會開啟的 URL。

  6. (選擇性) 在「目標」文字方塊中，請指定連結的文件將會開啟的位置。您可以在彈出式選單中選取頁框或視窗選項。只有在 Flash 物件是在頁框組中進行編輯時，頁框名稱才會列示出來。
  7. (選擇性) 在「背景顏色」文字方塊中，設定 Flash SWF 檔案的背景顏色。請使用顏色挑選器或輸入網頁顏色的十六進位值 (例如 #FFFFFF)。
  8. 在「另存新檔」文字方塊中，請輸入用來儲存新的 SWF 檔的檔案名稱。

    您可以使用預設的檔案名稱 (例如 button1.swf)，或輸入新名稱。如果檔案含有文件相對連結，您必須將這個檔案儲存在與目前 HTML 文件相同的目錄中，以保持文件的相對連結。

  9. 請按一下「取得更多樣式」，前往 Macromedia Exchange 網站，下載更多按鈕樣式。

    如需詳細資訊，請參閱新增擴充功能至 Dreamweaver。

  10. 按一下「套用」或「確定」，將 Flash 按鈕插入「文件」視窗中。

    提示

    選取「套用」，在「設計」檢視中查看變更，同時讓對話方塊保持開啟，這樣您就可以繼續對按鈕進行變更。


設定 Flash 元素檢視窗

Flash 元素檢視窗可讓您檢視並修改 Flash 元素 (組件) 的屬性。

注意

「標籤」檢視窗及「屬性」檢視窗都可以讓您檢視和編輯 Flash 組件的屬性。標籤檢視窗可讓您檢視及編輯每個與特定標籤有關聯的自訂屬性 (參數)。「屬性」檢視窗可以讓您修改 Flash 元素的高度、寬度和 SRC 屬性，也可以在「設計」檢視中預覽 Flash 元素。

若要使用標籤檢視窗編輯 Flash 元素的屬性：

  • 若要變更屬性值，請選取值，然後再編輯 (請參閱下面的程序)。
  • 若要為沒有值的屬性新增一個值，請按一下屬性右邊的屬性-值欄，然後新增值 (請參閱下面的程序)。

若要編輯或新增屬性值，請執行下列其中一項作業：

  • 在屬性名稱右邊的屬性-值欄中，輸入屬性的新值。
  • 如果屬性接受預先定義的值，請從屬性-值欄右邊的彈出式選單 (或顏色挑選器) 中選取值。
  • 如果屬性接受 URL 值，請輸入 URL。
  • 如果屬性接受來自動態內容來源 (例如資料庫) 的值，請按一下屬性-值欄右邊的「動態資料」按鈕。然後選取來源。

    如需有關定義動態內容來源的詳細資訊，請參閱定義動態內容的來源。

相關主題

  • 設定 Flash 和 Shockwave 影片屬性
  • 插入 Flash 元素
  • 編輯 Flash 元素屬性


設定 Flash 元素「編輯陣列」對話方塊選項

使用「編輯陣列」對話方塊在表單選單中加入項目。

若要編輯 Flash 元素陣列：

  • 使用加號 (+) 和減號 () 按鈕，新增及移除清單中的項目。

    輸入您想要加入的每個陣列項目值。

    項目在標籤檢視窗中出現的順序與其在「編輯陣列」對話方塊中出現的順序相同。

相關主題

  • 設定 Flash 和 Shockwave 影片屬性
  • 插入 Flash 元素
  • 編輯 Flash 元素屬性


使用 JavaScript 行為

Macromedia Dreamweaver 8 行為會將 JavaScript 程式碼放入文件，讓瀏覽者可以和網頁進行互動，以便用各種方式來變更頁面，或是讓特定工作能執行。行為是事件和該事件所觸發動作的組合。在「行為」面板中，您可以先指定動作，然後再指定觸發該動作的事件，行為新增至頁面。

注意

行為程式碼是用戶端的 JavaScript；也就是說，它是在瀏覽器中，而不是在伺服器上執行。

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

動作由預先寫好以執行特定工作的 JavaScript 程式碼所構成，例如開啟瀏覽器視窗、顯示或隱藏圖層、播放聲音，或停止 Macromedia Shockwave 影片。Dreamweaver 所提供的動作，是由 Dreamweaver 工程師精心撰寫以便提供最大的跨瀏覽器相容性。

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

單一事件可以觸發數個不同動作，而且您可以指定那些動作發生的順序。

Dreamweaver 提供了約二十幾種行為動作；其他動作可以在 Macromedia Exchange 網站以及協力廠商開發人員網站上找到 (請參閱下載和安裝協力廠商的行為)。如果精通 JavaScript 的話，您可以撰寫自己的行為動作。如需撰寫行為動作的詳細資訊，請參閱「擴充 Dreamweaver 功能」(「說明＞擴充 Dreamweaver 功能」)。

注意

行為和動作這兩個詞是 Dreamweaver 語彙，而不是 HTML 語彙。從瀏覽器的觀點來看，動作就跟任何其他 JavaScript 程式碼的片段一樣。

本章包含下列各節：

使用行為面板

關於事件

套用行為

將行為附加到文字

變更行為

更新行為

建立新動作

下載和安裝協力廠商的行為

使用 Dreamweaver 發行的行為動作


使用行為面板

使用「行為」面板將行為附加到頁面元素 (更精切地說是附加到標籤)，並修改先前所附加之行為的參數。如需關於什麼是行為和它們如何運作的背景資訊，請參閱使用 JavaScript 行為。如需關於如何將行為附加到事件的詳細資訊，請參閱套用行為。

若要開啟「行為」面板：

  • 選取「視窗＞行為」。

已經附加到目前所選取頁面元素的行為會出現在「行為」清單 (面板的主要區域)，並依事件的字母順序列出。如果相同事件有數個動作，動作將依它們在清單中出現的順序來執行。如果行為沒有在「行為」清單中出現，就表示沒有行為曾經附加到目前所選取的元素。


關於事件

每一個瀏覽器都會提供一組事件，您可以將它們與列示於「行為」面板的「動作」(+) 彈出式選單建立關聯。當來到您網頁的瀏覽者與頁面互動 (例如按一下影像) 時，瀏覽器將產生事件，那些事件可以用來呼叫導致動作發生的 JavaScript 函式 (事件沒有使用者互動也可以產生，例如當您將頁面設定為每 10 秒自動重新載入時)。Dreamweaver提供許多可以用這些事件來觸發的常用動作。

如需各瀏覽器所提供之事件的名稱和說明，請參閱 www.macromedia.com/go/dreamweaver_support_tw 上的 Dreamweaver 支援中心。

根據選取的物件和「顯示特定事件」子選單中指定的瀏覽器，「事件」彈出式選單中會出現不同的事件。若要查明既定瀏覽器對既定頁面元素支援哪些事件，請將頁面元素插入您的文件並附加行為給它，然後查看「行為」面板中的「事件」彈出式選單。如果相關物件還沒有存在於頁面，或者選取的物件無法接受事件的話，事件可能停用 (暗淡顯示)。如果期待的事件沒有出現，請確定所選取的是正確的物件，或是在「顯示特定事件」彈出式選單中變更目標瀏覽器。

如果您正在將行為附加到影像，則有些事件 (如 onMouseOver) 便會出現在括號中。這些事件只供連結使用。當您選取其中一個事件時，Dreamweaver 會在影像前後加上 a 標籤，以便定義 Null 連結。Null 連結在「屬性」檢視窗的「連結」文字方塊中，會以 javascript:; 來呈現。如果想要將連結值變成到其他頁面的實際連結，您可以變更它，但如果您刪除 JavaScript 連結而不以其他連結來取代，這時便會移除行為。

如需進一步詳細了解既定瀏覽器中哪一個標籤可以用於既定事件，請於 Dreamweaver/Configuration/Behaviors/Events 資料夾中的檔案搜尋該事件。


套用行為

您可以將行為附加到整個文件 (也就是到 body 標籤中)，或是連結、影像、表單元素，或任何幾個其他的 HTML 元素。

您選取的目標瀏覽器，將會決定哪些事件會用來支援特定的元素。例如，Internet Explorer 4.0 對於每一個元素具有的事件，遠比 Navigator 4.0 或任何 3.0 瀏覽器來得多。

注意

您不可以將行為附加到純文字中。如需詳細資訊，請參閱將行為附加到文字。

您可以為每一個事件指定一個以上的動作。動作將依它們在「行為」面板「動作」欄中所列出的順序來發生。如需關於變更動作順序的詳細資訊，請參閱變更行為。

若要附加行為：

  1. 請在頁面上選取元素，例如影像或連結。

    若要附加行為到整個頁面，請在「文件」視窗左下方的標籤選取器中按一下 <body> 標籤。

  2. 選取「視窗＞行為」便可開啟「行為」面板。
  3. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選擇動作。

    無法選擇選單中暗淡顯示的動作。它們可能是因為目前文件中所需的物件並不存在，才會暗淡顯示。例如，如果文件中未包含 Shockwave 或 Macromedia Flash SWF 檔案時，「控制 Shockwave 或 Flash」動作便會暗淡顯示。如果選取的物件沒有可用的事件，所有動作都會暗淡顯示。

    當您選取動作時，便會出現一則對話方塊，顯示該動作的參數和指示。

  4. 輸入動作的參數，然後按一下「確定」。

    Dreamweaver 提供的所有動作都可以在 4.0 和更新版本的瀏覽器中使用。某些動作在舊版瀏覽器中無法使用。請參閱使用 Dreamweaver 發行的行為動作。

  5. 要觸發動作的預設事件會在「事件」欄中出現。如果這不是您想要的觸發事件，請從「事件」彈出式選單中選取其他的事件 (若要開啟「事件」彈出式選單，請先在「行為」面板中選取事件或動作，然後按一下出現在事件名稱和動作名稱之間指向下方的黑色箭頭)。


將行為附加到文字

您不可以將行為附加到純文字中。像 p 和 span 之類的標籤不會在瀏覽器中產生事件，所以絕對無法從那些標籤來觸發動作。

不過，您可以將行為附加到連結。因此，若要將行為附加到文字，最簡單的方法就是將 Null 連結 (不指向任何項目) 新增到文字，然後再將行為附加到此連結。請注意，如果您這麼做的話，文字將顯示為連結。如果您真的不想讓它看起來像連結一樣，可以變更連結顏色並移除底線，不過這樣一來，網站瀏覽者可能不曉得要去按一下該文字。

若要將行為附加到選取的文字：

  1. 在「屬性」檢視窗的「連結」文字方塊中輸入 javascript:;。請確定要同時包括冒號和分號。

    注意

    必要時，您也可以在「連結」文字方塊中使用數字符號 (#) 來代替。使用數字符號的問題是，當瀏覽者按一下連結時，有些瀏覽器可能會跳到頁面頂端，而按一下 JavaScript Null 連結時，頁面上完全不會產生作用，所以 JavaScript 是一般慣用的方法。
  2. 請在仍選取文字的同時，開啟「行為」面板 (「視窗＞行為」)。
  3. 從「動作」彈出式選單中選取動作，輸入動作的參數，然後再選取要觸發該動作的事件。如需詳細資訊，請參閱套用行為。

若要變更連結文字的外觀，讓它看起來不像是連結：

  1. 選擇「檢視＞程式碼」，便可開啟「文件」視窗的「程式碼」檢視。
  2. 尋找連結。
  3. 在連結的 a href 標籤中，插入以下屬性：style="text-decoration:none; color:black"。

    這個屬性設定會停用底線並將文字設定為黑色 (當然，如果周圍文字有不同的顏色，就使用該顏色來代替黑色)。

    請注意，這個屬性是行內 CSS 樣式。套用至單一連結的行內樣式會覆寫其他套用至該連結的 CSS 樣式，但對該連結外部則沒有效果。若要在網頁或整個網站上變更連結文字的外觀，請使用 CSS 樣式為連結建立新樣式。如需詳細資訊，請參閱插入和格式化文字。


變更行為

附加行為之後，您可以變更觸發動作的事件、新增或移除動作，以及變更動作的參數。

若要變更行為：

  1. 選取有附加行為的物件。
  2. 選擇「視窗＞行為」，便可開啟「行為」面板。

    行為會根據事件依字母順序在面板中出現。如果相同事件有數個動作，動作會依即將執行的順序來顯示。

  3. 請執行下列其中一項作業：
    • 若要編輯動作的參數，請連按兩下行為名稱，或選取它再按下 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)；然後在對話方塊中變更參數，並按一下「確定」。
    • 若要為既定事件變更動作順序，請選取動作並按一下向上或向下箭頭按鈕。或者是，您也可以選取動作，將它剪下和貼到其他動作中所要的位置上。
    • 若要刪除行為，請選取它再按一下減號 (-) 按鈕，或是按下 Delete 鍵。


更新行為

如果您的頁面包含 Dreamweaver 1 或 Dreamweaver 2 所建立的行為，當您在 Dreamweaver 的目前版本開啟頁面時，那些行為不會自動更新。然而，當您在頁面中更新行為的其中一個出現的項目時 (遵照以下程序)，那頁面中該行為的所有其他項目也會被更新。Dreamweaver 3 中建立的行為在 Dreamweaver 4 中不經修改即可執行。

注意

如上面所述，當您在頁面中更新行為的其中一個出現的項目時，則頁面上該行為的所有其他項目也會更新。不過，您必須對網站中的每一頁更新行為。

若要在頁面中更新行為：

  1. 選取有附加行為的元素。
  2. 開啟「行為」面板。
  3. 連按兩下行為。
  4. 在「行為」對話方塊中按一下「確定」。

在那頁面中該行為的所有出現項目都將被更新。


建立新動作

動作由 JavaScript 和 HTML 程式碼所組成。如果您精通 JavaScript，即可以撰寫新動作並將它們新增至「行為」面板中的「動作」彈出式選單。如需詳細資訊，請參閱「擴充 Dreamweaver 功能」。


下載和安裝協力廠商的行為

Dreamweaver其中一個最有用的功能就是擴充性 - 也就是說，它提供機會讓精通 JavaScript 的使用者撰寫 JavaScript 來擴充 Dreamweaver 的功能。這些使用者中有許多人，已經選擇將他們的擴充功能提交給 Macromedia Exchange Dreamweaver 網站 ( www.macromedia.com/go/dreamweaver_exchange_tw)，以便與其他人共用。

若要從 Macromedia Exchange 網站下載並安裝新的行為：

  1. 開啟「行為」面板並從「動作 (+)」彈出式選單中選取「取得更多行為」。

    您的主要瀏覽器會開啟，然後出現 Exchange 網站 (您必須連線到網頁來下載行為)。

  2. 瀏覽或搜尋套件。
  3. 下載並安裝您想要的擴充套件。

    如需詳細資訊，請參閱新增擴充功能至 Dreamweaver。


使用 Dreamweaver 發行的行為動作

Dreamweaver 中所提供的行為動作已經寫好要在 Netscape Navigator 4.0 和更新版本，以及 Internet Explorer 4.0 和更新版本中執行。這些行為動作也大多可以在 Netscape Navigator version 3.0 和更新版本中工作 (圖層相關的行為不能在 Netscape Navigator 3.0 中執行)。這些行為動作在 Internet Explorer 3.0 版中大多數將不顯示錯誤訊息而產生失敗。

注意

Dreamweaver動作已經過精心撰寫，儘可能使它能夠在許多瀏覽器上執行。如果您從 Dreamweaver 動作手動移除程式碼，或以自已的程式碼取代它，您可能會失去跨瀏覽器相容性。

雖然 Dreamweaver 動作經過撰寫以求取最大的跨瀏覽器相容性，仍有某些動作在較舊的瀏覽器中無法執行。同樣地，某些瀏覽器完全不支援 JavaScript，而且許多瀏覽網頁的人會在他們的瀏覽器中將 JavaScript 功能關閉。為取得較佳的跨平台效果，請提供包含在 noscript 標籤中的替代介面，以便沒有 JavaScript 的人仍舊可以使用您的網站。

本節包含下列主題：

  • 呼叫 JavaScript
  • 變更屬性
  • 檢查瀏覽器
  • 檢查外掛程式
  • 控制 Shockwave 或 Flash
  • 拖曳圖層
  • 前往 URL
  • 跳頁選單
  • 開啟瀏覽器視窗
  • 播放聲音
  • 彈出訊息
  • 預先載入影像
  • 設定導覽列影像
  • 設定頁框文字
  • 設定圖層文字
  • 設定狀態列文字
  • 設定文字欄位文字
  • 顯示隱藏圖層
  • 顯示彈出式選單
  • 調換影像
  • 復原調換影像
  • 驗證表單


呼叫 JavaScript

「呼叫 JavaScript」動作讓您可以使用「行為」面板來指定，當事件發生時應該執行某個自訂函式或某行 JavaScript(您可以親自撰寫 JavaScript，或使用網站上各種免費 JavaScript 程式庫提供的程式碼)。

若要使用「呼叫 JavaScript」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並且從「動作」彈出式選單中選取「呼叫 JavaScript」。
  3. 輸入要執行的正確 JavaScript，或輸入函式的名稱。

    例如，若要建立「後退」按鈕，您可能會輸入 if (history.length > 0){history.back()}。如果您已經在函式中封裝程式碼，只要輸入函式名稱 (例如，hogback()) 即可。

  4. 按一下「確定」。
  5. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


變更屬性

使用「變更屬性」動作來變更物件的其中一個屬性值 (例如，圖層的背景顏色或表單的動作)。您可以變更的屬性，是由瀏覽器來決定；在 Internet Explorer 4.0 中，此行為可以變更的屬性，比 Internet Explorer 3.0 或 Netscape Navigator 3.0 或 4.0 中更多。例如，您可以動態設定圖層背景顏色。

注意

只有在您非常熟悉 HTML 和 JavaScript 的情形下才能使用這個動作。

若要使用「變更屬性」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「更改屬性」。
  3. 從「物件類型」彈出式選單中，請選取您想要變更其屬性的物件類型。

    「命名物件」彈出式選單現在會列出所有您所選擇類型的命名物件。

  4. 從「命名物件」彈出式選單選擇物件。
  5. 從「屬性」彈出式選單中選取屬性，或是在文字方塊中輸入屬性的名稱。

    若要查看各瀏覽器中可以變更的屬性，請從「瀏覽器」彈出式選單中選取不同的瀏覽器，或是瀏覽器版本。如果您要輸入屬性名稱，請務必使用屬性的確實 JavaScript 名稱 (並記得 JavaScript 屬性會區分大小寫)。

  6. 在「新的值」文字方塊中輸入屬性的新值，然後按一下「確定」。
  7. 檢查預設事件是否為您所要的。(當事件發生時，動作將會執行而且屬性會變更)。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


檢查瀏覽器

使用「檢查瀏覽器」動作根據瀏覽者的瀏覽器種類和版本將他們送到不同頁面。例如，如果瀏覽者有 Netscape Navigator 4.0 或更新版本，您可能想要他們前往一個頁面；如果他們有 Internet Explorer 4.0 或更新版本，則前往另一個頁面；如果他們有任何其他類型的瀏覽器，則留在目前頁面中。

將這個行為附加到幾乎與任何瀏覽器相容 (和不使用任何其他 JavaScript) 之頁面的 body 標籤，將會很有用處；如此一來，前來頁面的瀏覽者在關閉 JavaScript 功能時，仍可以看到一些東西。

另一個選項，是將這個行為附加至 Null 連結 (如 <a href="javascript:;">)，並且讓動作根據瀏覽者的瀏覽器種類和版本，來決定連結的目的地。

若要使用「檢查瀏覽器」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「檢查瀏覽器」。
  3. 決定您想要如何區分瀏覽者：根據瀏覽器種類、瀏覽器版本，或兩者。

    例如，您想要具有 4.0 瀏覽器的人看到一個頁面，而其他所有的人看到不同頁面嗎？或許您想要 Netscape Navigator 使用者看到一個頁面，而 Internet Explorer 使用者看到另一個頁面。

  4. 指定 Netscape Navigator 的版本。
  5. 在相鄰的彈出式選單中，請選取選項以查看當瀏覽器是您所指定的 Netscape Navigator 版本或更新版本時，應該執行何種動作；如果不是，又應該執行何種動作。

    選項有「前往 URL」、「前往替代 URL」和「留在此頁」。

  6. 指定 Internet Explorer 的版本。
  7. 在相鄰的彈出式選單中，請選取選項以查看當瀏覽器是您所指定的 Internet Explorer 版本或更新版本時，應該執行何種動作；如果不是，又應該執行何種動作。

    選項有「前往 URL」、「前往替代 URL」和「留在此頁」。

  8. 如果瀏覽器不是 Netscape Navigator 也不是 Internet Explorer 的話，請從「其他瀏覽器」彈出式選單中選取某個選項，以指定要執行何種動作 (例如，瀏覽者可能正在使用文字瀏覽器像 Lynx)。

    「留在此頁」對於 Netscape Navigator 和 Internet Explorer 以外的瀏覽器而言是最佳的選項，因為大部份瀏覽器都不支援 JavaScript - 而如果它們不能讀取這個行為，則無論如何它們都會留在這個頁面中。

  9. 在對話方塊底部的文字方塊輸入 URL 的路徑和檔案名稱以及替代 URL。如果要輸入遠端 URL，除了 www 地址之外還必須輸入 http:// 前置詞。
  10. 按一下「確定」。
  11. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。請記得這個行為的用途在於檢查不同的瀏覽器版本，所以最好是選擇可以在 3.0 和更新版本瀏覽器上執行的事件。


檢查外掛程式

使用「檢查外掛程式」動作，根據瀏覽者是否已經安裝指定的外掛程式來將他們送到不同頁面。例如，如果瀏覽者有 Shockwave，您可能想要他們前往一個頁面；如果沒有的話，則前往另一個頁面。

注意

您在 Internet Explorer 中無法使用 JavaScript 偵測特定外掛程式。不過，選取 Flash 或 Director 時會將適當的 VBScript 程式碼新增至您的頁面，以便在 Windows 上偵測 Internet Explorer 中的外掛程式。在 Macintosh 上，IE 的外掛程式偵測是不可能的。

若要使用「檢查外掛程式」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「檢查外掛程式」。
  3. 從「外掛程式」彈出式選單中選取外掛程式，或是按一下 Enter 鍵並在相鄰文字方塊中，輸入外掛程式的確實名稱。

    您必須使用外掛程式的確實名稱，如同在 Navigator 的「關於外掛程式」頁面中，以粗體字體所指定的名稱 (在 Windows 中選取 Navigator 的「說明＞關於外掛程式」命令；在 Macintosh 中，從 Apple 選單中選取「關於外掛程式」)。

  4. 在「如果有，前往 URL」文字方塊中為具有外掛程式的瀏覽者指定 URL。

    如果您指定遠端 URL，必須將 http:// 前置詞包含在地址中。

    若要使具有外掛程式的瀏覽者留在相同頁面，請將這個欄位保持空白。

  5. 在「否則，前往 URL」文字方塊中，對於沒有外掛程式的瀏覽者，請指定替代的 URL。

    若要使沒有外掛程式的瀏覽者留在相同頁面，請將這個欄位保持空白。

  6. 外掛程式偵測在 Macintosh 的 Internet Explorer 中是不可能的，而大部份外掛程式也無法在 Windows 的 Internet Explorer 中偵測出來。依預設值，當無法偵測時，瀏覽者會被送到「否則」文字方塊中列出的 URL。若反而要將瀏覽者送到第一個 (「如果有」) URL，請選取「如果無法偵測，永遠前往第一個 URL」選項。在選取之後，這個選項實際上表示假設瀏覽者具有外掛程式，除非瀏覽器明確指出外掛程式不存在。

    一般來說，如果外掛程式內容對頁面而言為必要時，請選取「如果無法偵測，永遠前往第一個」選項，瀏覽器會提示不具外掛程式的瀏覽者下載外掛程式；如果外掛程式內容對您的頁面不是必要的，就讓這個選項保持取消選取狀態。

    這個選項只適用 Internet Explorer；Netscape Navigator 永遠可以偵測外掛程式。

  7. 按一下「確定」。
  8. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


控制 Shockwave 或 Flash

使用「控制 Shockwave 或 Flash」動作來播放、停止、倒帶或前往 Macromedia Shockwave 或 Macromedia Flash SWF 檔中的影格。若要使用「控制 Shockwave 或 Flash」動作：

  1. 請選取「插入＞媒體＞Shockwave」或「插入＞媒體＞Flash」，分別插入 Shockwave 或 Flash SWF 檔案。
  2. 選取「視窗＞屬性」，並且在左上方文字方塊中 (在 Shockwave 或 Flash 圖示旁)，輸入影片的名稱。您必須替影片命名以便使用「控制 Shockwave 或 Flash」動作來控制它。
  3. 選取您想要用來控制 Shockwave 或 Flash SWF 檔案的項目。例如，如果您有將用來播放影片之「播放」按鈕的影像時，請選取該影像。
  4. 開啟「行為」面板 (「視窗＞行為」)。
  5. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「控制 Shockwave 或 Flash」。

    參數的對話方塊便會出現。

  6. 從「影片」彈出式選單中選取影片。

    Dreamweaver 自動列出目前文件中的所有 Shockwave 和 Flash SWF 檔案名稱。(尤其是，Dreamweaver 會列出 object 或 embed 標籤中以 .dcr、.dir、.swf 或 .spl 為結尾的檔案名稱的影片)。

  7. 請選取要播放、停止、倒帶或是前往影片中的影格。「播放」選項會從動作發生地方的影格開始播放影片。
  8. 按一下「確定」。
  9. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「事件」彈出式選單的「顯示特定事件」子選單中變更目標瀏覽器。


拖曳圖層

「拖曳圖層」動作讓瀏覽者可以拖曳圖層。使用這個動作可以建立拼圖、滑動軸控制項，和其他可移動的介面元素。

您可以指定瀏覽者可拖曳圖層的方向 (水平、垂直或任何方向)、瀏覽者應該拖曳圖層所到的目標、是否將圖層貼齊目標 (如果圖層在一定數目的像素距離內)、當圖層碰到目標要做什麼事，等等。

因為在瀏覽者可以拖曳圖層之前必須呼叫「拖曳圖層」動作，請確定觸發動作的事件會在瀏覽者嘗試拖曳圖層之前發生。最好是將「拖曳圖層」附加到 body 物件 (對於 onLoad 事件)，雖然您也可以使用 onMouseOver 事件，將它附加到可以填滿整個圖層的連結 (如影像周圍的連結)。

若要使用「拖曳圖層」動作：

  1. 選擇「插入＞圖層」，或是按一下「插入」列上的「繪製圖層」按鈕，並且在「文件」視窗的「設計」檢視中繪製圖層。
  2. 在「文件」視窗底部的標籤選取器中按一下 <body> 以選取 body 標籤。
  3. 開啟「行為」面板。
  4. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「拖曳圖層」。

    如果無法使用「拖曳圖層」，您大概已經讓圖層被選取了。因為在兩個 4.0 瀏覽器中圖層都不接受事件，所以您必須選取不同的物件─如 body 標籤或連結 (a 標籤)─或是在「顯示事件」彈出式選單中，將目標瀏覽器變更為 Internet Explorer 4.0。

  5. 在「圖層」彈出式選單中，選取您想讓它成為可拖曳的圖層。
  6. 從「移動」彈出式選單中，選取「限制」或「不限制」。

    不限制的移動適合拼圖和其他拖放遊戲。對於滑動軸控制項和活動布景 (如檔案抽屜、戲幕和迷你百葉窗)，請選取限制的移動。

  7. 對於限制的移動，可在「上」、「下」、「左」、「右」文字方塊中輸入數值 (以像素為單位)。

    數值是相對於圖層的起始位置。若要將移動限制在矩形區域之內，請在四個文字方塊中全部輸入正值。若只要允許垂直移動，在「上」和「下」欄位輸入正值，而在「左」和「右」欄位輸入 0。若只要允許水平移動，在「左」和「右」欄位輸入正值，而在「上」和「下」欄位輸入 0。

  8. 在「左」和「上」文字方塊輸入放下目標的值 (以像素為單位)。

    放下目標是您想要瀏覽者拖曳圖層所到的地點。當圖層的左上座標符合您在「左」和「上」文字方塊輸入的值時，它會被認為已經抵達放下目標。數值是相對於瀏覽器視窗的左上角。按一下「取得目前位置」以將圖層目前位置自動填入文字方塊。

  9. 在「靠齊距離」文字方塊輸入數值 (以像素為單位) 以決定瀏覽者必須多麼接近放下目標才能將圖層貼齊目標。

    較大的值使瀏覽者較容易找到放下目標。

  10. 對於簡單拼圖和布景操作，您可以就此打住。若要定義圖層的拖曳控制點、追蹤圖層拖曳時的移動，以及當圖層被放下時觸發動作，請按一下「進階」索引標籤。
  11. 若要指定瀏覽者必須按一下圖層特定區域，才能拖曳圖層時，請從「拖曳控制點」彈出式選單中選取「圖層內區域」；然後再輸入左側和上側的座標，以及拖曳控制點的寬度和高度。

    在圖層內部的影像有建議要拖曳的元素時 (例如標題列或抽屜把手)，這個選項很有用處。如果您想要瀏覽者能夠按下圖層任何地方來拖曳的話，請不要設定這個選項。

  12. 請選取您要使用的任何「拖曳時」選項：
    • 如果圖層被拖曳時應該移到堆疊順序最前面的話，請選取「將圖層移至最前」。如果您選取這個選項，請使用彈出式選單來選取讓圖層留在前面，或是回復它在堆疊順序中的原來位置。
    • 在「呼叫 JavaScript」文字方塊輸入 JavaScript 程式碼或函式名稱 (例如 monitorLayer())，以在拖曳圖層時重複執行程式碼或函式。例如，您可以撰寫函數來監視圖層座標，並且在文字方塊中顯示提示，如「您就快找到了」或「您還沒接近放下目標」。如需詳細資訊，請參閱收集關於可拖曳圖層的資訊。
  13. 在第二個「呼叫 JavaScript」文字方塊輸入 JavaScript 程式碼或函式名稱 (例如 evaluateLayerPos())，以在放下圖層時執行程式碼或函式。如果 JavaScript 只有在圖層抵達放下目標時才應執行的話，請選取「只有在靠齊時」。
  14. 按一下「確定」。
  15. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。請記得 3.0 瀏覽器不支援圖層功能。

    注意

    您無法將「拖曳圖層」動作附加到具有 onMouseDown 或 onClick 事件的物件。


收集關於可拖曳圖層的資訊

當您將「拖曳圖層」動作附加到物件時，Dreamweaver 會將 MM_DragLayer() 函式插入您文件的 head 區段。除了將圖層註冊為可拖曳的之外，這個函數還對每一個可拖曳的圖層定義三個屬性 - MM_LEFTRIGHT、MM_UPDOWN 以及 MM_SNAPPED - 您可以在自己的 JavaScript 函數中使用，以決定圖層的相對水平位置、圖層的相對垂直位置，以及圖層是否已經抵達放下目標。

注意

以下提供的資訊僅供有經驗的 JavaScript 程式設計人員參考之用。

例如，下列函式會在稱為 curPosField 的表單欄位中顯示 MM_UPDOWN 屬性 (圖層的目前垂直位置) 的值 (表單欄位在顯示連續更新的資訊方面很有用，因為它們在 Netscape Navigator 和 Internet Explorer 中都是動態的；也就是說，您可以在頁面已經完成載入之後，變更它們的內容)。

function getPos(layername){
   var layerRef = MM_findObj(layername);
   var curVertPos = layerRef.MM_UPDOWN;
   document.tracking.curPosField.value = curVertPos;
}

您可以用各種其他的方式來使用這些值，而不是在表單欄位中顯示 MM_UPDOWN 或 MM_LEFTRIGHT 的值。例如，您可以根據值接近放下區域的程度，來撰寫可以在表單欄位中顯示訊息的函數，或是呼叫其他函數，根據該值來顯示或隱藏圖層。

當您在頁面上有數個圖層，而這所有圖層必須在瀏覽者可以前進到下一頁面或工作之前都抵達它們的目標時，讀取 MM_SNAPPED 屬性將特別有用。例如，您可能撰寫函式來計算多少圖層具有 true 的 MM_SNAPPED 值，而在每當圖層被放下時就呼叫它。當貼齊計數到達指定數目時，您便可以將瀏覽者送到下一頁或顯示道賀的訊息。

如果您已經使用 onMouseOver 事件將「拖曳圖層」動作附加到幾個圖層內的連結，您必須對 MM_DragLayer() 函式做一點小變更以防止貼齊圖層的 MM_SNAPPED 屬性在滑鼠指標滑過圖層時被重設為 false (如果您已經使用「拖曳圖層」來建立拼圖，這情形將會發生，因為瀏覽者很可能在放置圖塊時將滑鼠指標滑過其他貼齊的圖塊)。MM_dragLayer() 函數並不會防止這個行為，因為有時也會需要它 - 例如，如果您想要為單一圖層設定多個放下目標的話。

若要防止貼齊圖層的重新註冊：

  1. 在對程式碼進行任何變更之前，請備份您的文件 (您可以在 Dreamweaver 中的「網站」面板，或在 Windows Explorer (Windows) 或 Finder (Macintosh) 中進行這項作業)。
  2. 選取「編輯＞尋找」。
  3. 從「尋找項目」彈出式選單中選取「HTML 原始碼」。
  4. 在相鄰的文字方塊中輸入 (!curDrag) (包括括弧在內)。
  5. 按一下「找下一個」。

    如果 Dreamweaver 問您是否想要繼續從文件開頭搜尋，請按一下「是」。Dreamweaver 會尋找以下陳述式：

    if (!curDrag) return false;
  6. 關閉「尋找」對話方塊，然後在「文件」視窗的「程式碼」檢視或「程式碼」檢視窗中，將陳述式修改如下：
    if (!curDrag || curDrag.MM_SNAPPED != null) return false;

    兩個 | 字元 (||) 代表 「或」，而 curDrag 則代表已註冊為可拖曳之圖層的變數。用一般語言說明，該陳述式表示「如果 curDrag 不是物件，或者如果它已經具有 MM_SNAPPED 值，則不用再執行函數的其餘部份」。


前往 URL

「前往 URL」動作會在目前視窗或指定頁框中開啟新的頁面。這個動作在變更二到多個頁框的內容上特別有用，只要按一下滑鼠即可完成。

若要使用「前往 URL」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「前往 URL」。
  3. 從「開啟於」清單中選取 URL 的目的地。

    「開啟於」清單自動列出目前頁框組中的所有頁框以及主要視窗。如果沒有頁框，主要視窗就是唯一選項。

    注意

    如果有任何頁框命名為 top、blank、self 或 parent，這個動作可能會產生意料之外的結果。瀏覽器有時會將這些名稱誤認為保留的目標名稱。
  4. 按一下「瀏覽」以選取要開啟的文件，或在「URL」文字方塊輸入文件的路徑和檔案名稱。
  5. 重複步驟 3 和 4 來開啟其他頁框中的額外文件。
  6. 按一下「確定」。
  7. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


跳頁選單

當您使用「插入＞表單物件＞跳頁選單」建立跳頁選單時，Dreamweaver 會建立選單物件並附加「跳頁選單」(或「跳頁選單前往」) 行為。通常沒有必要手動將「跳頁選單」動作附加到物件。如需關於跳頁選單和如何建立它們的詳細資訊，請參閱跳頁選單。

您可以用兩個方式之一來編輯現有跳頁選單：

  • 您可以連按兩下「行為」面板中的現有「跳頁選單」動作，來編輯並重新排列選單項目、變更要跳至的檔案，以及變更開啟檔案所在的視窗。
  • 您可以選取選單並使用「屬性」檢視窗中的「清單值」按鈕，於選單中編輯項目，就像您在任何選單中編輯項目一樣。如需詳細資訊，請參閱插入 HTML 表單選項。

若要使用「行為」面板編輯跳頁選單：

  1. 如果您的文件中還沒有跳頁選單物件，請建立它。
  2. 選取跳頁選單物件並開啟「行為」面板。
  3. 在「動作」欄中連按兩下「跳頁選單」。
  4. 依需要在「跳頁選單」對話方塊中進行變更，然後按一下「確定」。


跳頁選單前往

「跳頁選單前往」動作與「跳頁選單」動作密切相關；「跳頁選單前往」讓您可以將「前往」按鈕與跳頁選單產生關聯(在使用這個動作之前，跳頁選單必須已經存在於文件中)。按一下「前往」按鈕，便可開啟跳頁選單中已選取的連結。跳頁選單通常不需要「前往」按鈕；從跳頁選單選擇一個項目時，通常會導致 URL 載入，而不需要任何進一步的使用者動作。但如果瀏覽者選擇的項目，與跳頁選單中已選取的項目相同時，則跳頁便不會發生。一般說來，這無關緊要，但如果跳頁選單在頁框中出現，而跳頁選單項目又連結到其他頁框中的頁面時，「前往」按鈕通常就很有用；它可允許瀏覽者重新選擇跳頁選單中已經選取的項目。

若要新增「跳頁選單前往」動作：

  1. 選取要做為「前往」按鈕的物件 (通常是按鈕影像)，並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「跳頁選單前往」。
  3. 在「選擇跳頁選單」彈出式選單中，請選取要啟動「前往」按鈕的選單。
  4. 按一下「確定」。


開啟瀏覽器視窗

使用「開啟瀏覽器視窗」動作在新視窗開啟 URL。您可以指定新視窗的屬性，包括它的大小、屬性 (該視窗是否可調整大小、是否有選單列等等) 和名稱。例如，您可以使用這個行為在瀏覽者按一下縮圖影像時於不同視窗開啟大型影像；有了這個行為，您便可以將新視窗變成影像的確實大小。

如果您沒有為視窗指定屬性，它會以啟動它的視窗之大小和屬性來開啟。指定視窗的任何屬性將自動關閉所有其他並非明確開啟的屬性。例如，如果您沒有為視窗設定屬性，它可能以 640 x 480 像素來開啟，而且擁有導覽列、位址列、狀態列和選單列。如果您明確設定寬度為 640 和高度為 480，而沒有設定其他屬性，視窗將以 640 x 480 像素來開啟，而且完全沒有導覽列、位址列、狀態列、選單列、更改大小控制點和捲軸。

若要使用「開啟瀏覽器視窗」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「開啟瀏覽器視窗」。
  3. 按一下「瀏覽」以選取檔案，或輸入您想要顯示的 URL。
  4. 請設定下列任一種選項：

    視窗寬度指定以像素為單位的視窗寬度。

    視窗高度指定以像素為單位的視窗高度。

    瀏覽工具列是一列包括「上一頁」、「下一頁」、「首頁」和「重新載入」的瀏覽器按鈕。

    位置列工具列是一列包括位置文字方塊的瀏覽器選項。

    狀態工具列位於瀏覽器視窗底部的區域，可以在其中出現訊息 (例如剩餘的載入時間以及與連結相關的 URL)。

    「選單列」是瀏覽器視窗 (Windows) 或桌面 (Macintosh) 上顯示選單 (例如「檔案」、「編輯」、「檢視」、「前往」和「說明」) 的區域。如果您想要瀏覽者能夠在新視窗中導覽，便應明確設定這個選項。如果您不設定這個選項，使用者只能在新視窗中關閉或最小化視窗 (Windows)，或者關閉視窗或結束應用程式 (Macintosh)。

    捲軸 (有需要的話) 指定如果內容超過顯示區域的話，應該要出現捲軸。如果您沒有明確設定這個選項，捲軸便不會出現。「如果更改大小控制點」選項也被關閉，瀏覽者便很難有辨法看到延伸超過視窗原始大小的內容 (雖然他們也許能夠用拖曳至視窗邊緣的方式讓視窗捲動)。

    更改大小控制點指定使用者能夠藉由拖曳視窗右下角或按一下右上角的最大化按鈕 (Windows) 或 Size Box (Macintosh) 的方式來調整視窗大小。如果這個選項沒有被明確設定，將無法使用調整大小控制項，而且右下角也不能拖曳。

    視窗名稱是新視窗的名稱。如果您想要以連結加以標定，或用 JavaScript 控制的話，便應該命名新視窗。這個名稱不能包含空格或特殊字元。

  5. 按一下「確定」。
  6. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


播放聲音

使用「播放聲音」動作來播放聲音。例如，您可能想要在每當滑鼠指標滑過連結時播放音效，或者您可能想要在頁面載入時播放音樂片段。

注意

瀏覽器可能需要某種額外的音效支援 (例如音效外掛程式) 來播放聲音。因此，具有不同外掛程式的不同瀏覽器播放的音效也不相同。來到您網站的瀏覽者，對於您所提供的音效有什麼樣的感受，是很難確實預測的。

若要使用「播放聲音」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「播放聲音」。
  3. 按一下「瀏覽」以選取聲音檔，或在「播放聲音」文字方塊輸入路徑和檔案名稱。
  4. 按一下「確定」。
  5. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


彈出訊息

「彈出訊息」動作以您指定的訊息顯示 JavaScript 警告。因為 JavaScript 警告只有一個按鈕 (「確定」)，請使用這個動作提供資訊，而不要向使用者提出選擇。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式，請將它放在大括號 ({}) 內。若要顯示大括號，則在它前面加上反斜線 (\{)。

範例

The URL for this page is {window.location}, and today is {new Date()}.

注意

您無法控制 JavaScript 警告的外觀；因為那是由瀏覽者的瀏覽器所決定的。如果您想要進一步控制訊息外觀，請考慮使用「開啟瀏覽器視窗」行為。如需詳細資訊，請參閱開啟瀏覽器視窗。

若要使用「彈出訊息」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「彈出訊息」。
  3. 在「訊息」文字方塊輸入您的訊息。
  4. 按一下「確定」。
  5. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


預先載入影像

「預先載入影像」動作會將不能立即出現在頁面上的影像 (如將要與行為或 JavaScript 調換的影像)，載入到瀏覽器的快取中。這樣就可避免在影像應該出現時由於下載而導致延遲。

注意

當您在「調換影像」對話方塊中選取「預先載入影像」選項時，「調換影像」動作會自動預先載入所有標示的影像，所以您在使用「調換影像」時不需手動新增「預先載入影像」。

若要使用「預先載入影像」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「預先載入影像」。
  3. 按一下「瀏覽」來選取要預先載入的影像檔案，或是在「影像原始檔案」文字方塊中，輸入影像的路徑和檔案名稱。
  4. 按一下對話方塊頂端的加號 (+) 按鈕，便可將影像新增至「預先載入影像」清單中。

    注意

    如果您在未輸入下一個影像之前按一下加號按鈕，則您剛才選擇的影像，將會被清單中下一次選取的影像所取代。
  5. 針對您想要在目前頁面上預先載入的所有其餘影像重複步驟 3 和 4。
  6. 若要從「預先載入影像」清單中移除影像，請在清單中選取該影像，然後按一下減號 (-) 按鈕。
  7. 按一下「確定」。
  8. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


設定導覽列影像

使用「設定導覽列影像」動作將影像變成導覽列影像，或變更導覽列中影像的顯示與動作 (如需詳細資訊，請參閱插入導覽列)。

使用「設定導覽列影像」對話方塊的「基本」索引標籤，來建立或更新導覽列影像或一組影像、變更要顯示的 URL (當導覽列按鈕被按下時)，以及選取要顯示 URL 的不同視窗。

請使用「設定導覽列影像」對話方塊的「進階」索引標籤，根據目前按鈕的狀態在文件中變更其他影像的狀態。依預設值，按一下導覽列中的元素會自動造成導覽列中其他所有元素變成「一般」狀態；如果您想要在選取的影像為「按下」或「滑過」狀態時，將影像設定為不同狀態，請使用「進階」索引標籤。

若要編輯「設定導覽列影像」動作：

  1. 在導覽列選取要編輯的影像，然後開啟「行為」面板。
  2. 在「行為」面板的「動作」欄中，請按兩下與您要變更之事件相關的「設定導覽列影像」動作。
  3. 在「設定導覽列影像」對話方塊的「基本」索引標籤中，選取影像編輯選項。

若要為「導覽列」按鈕設定多個影像：

  1. 在導覽列選取要編輯的影像，然後開啟「行為」面板。
  2. 在「行為」面板的「動作」欄中，請按兩下與您要變更之事件相關的「設定導覽列影像」動作。
  3. 按一下「設定導覽列影像」對話方塊的「進階」索引標籤。
  4. 在「當元素正在顯示時」彈出式選單中，請選取影像狀態。
    • 如果您想要在使用者按一下選取的影像之後，變更另一個影像的顯示，請選取「滑鼠按下影像」。
    • 如果您想要在指標滑過選取的影像時，變更另一個影像的顯示，請選取「滑鼠經過影像」或「按下時滑鼠經過影像」。

    如需關於影像狀態的詳細資訊，請參閱使用導覽列。

  5. 在「同時設定影像」清單中，選取頁面上要設定的其他影像。
  6. 按一下「瀏覽」以選取要顯示的影像檔案，或在「變成影像檔案」文字方塊中輸入影像檔案的路徑。
  7. 如果您在步驟 4 選取「滑過影像」或「按下後滑過影像」，便還有其他的選項。在「按下時，變成影像檔案」文字欄位中，請按一下「瀏覽」來選取影像檔案，或是輸入要顯示的影像檔案路徑。


設定頁框文字

「設定頁框文字」動作讓您可以動態設定頁框的文字，以您指定的內容取代頁框的內容和格式。這些內容可以包含任何有效的 HTML 程式碼。使用這個動作來動態顯示資訊。

雖然「設定頁框文字」動作會取代頁框的格式，您可以選取「保存背景顏色」來保存頁面背景和文字顏色屬性。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式，請將它放在大括號 ({}) 內。若要顯示大括號，則在它前面加上反斜線 (\{)。

範例

The URL for this page is {window.location}, and today is {new Date()}.

若要建立頁框組：

  • 請選取「修改＞頁框組＞向左、右、上或下分割頁框」。

    如需詳細資訊，請參閱建立頁框和頁框組。

若要使用「設定頁框文字」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「設定文字＞設定頁框文字」。
  3. 在「設定頁框文字」對話方塊中，請從「頁框」彈出式選單中選取目標頁框。
  4. 按一下「取得目前的 HTML」按鈕，便可複製目標頁框之 body 區段的目前內容。
  5. 在「新的 HTML」文字方塊中輸入訊息，再按一下「確定」。
  6. 檢查預設事件是否為您所要的。如果不是，請從彈出式選單中選取其他事件。

    如果沒有看到您想要的事件，請在「顯示事件」彈出式選單中變更目標瀏覽器。


設定圖層文字

「設定圖層文字」動作會以您指定的內容取代頁面上現有圖層的內容和格式。這些內容可以包含任何有效的 HTML 原始碼。

「設定圖層文字」將取代圖層的內容和格式，但會保留圖層屬性，包括顏色在內。在「設定圖層文字」對話方塊的「新的 HTML」文字方塊中包含 HTML 標籤，可以格式化內容。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式，請將它放在大括號 ({}) 內。若要顯示大括號，則在它前面加上反斜線 (\{)。

範例

The URL for this page is {window.location}, and today is {new Date()}.

若要建立圖層：

  1. 選取「插入＞圖層」。

    如需詳細資訊，請參閱插入圖層。

  2. 在「屬性」檢視窗中輸入圖層的名稱。

若要使用「設定圖層文字」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「設定文字＞設定圖層文字」。
  3. 在「設定圖層文字」對話方塊中，請使用「圖層」彈出式選單來選取目標圖層。
  4. 在「新的 HTML」文字方塊中輸入訊息，再按一下「確定」。
  5. 檢查預設事件是否為您所要的。如果不是，請從彈出式選單中選取其他事件。

    如果沒有看到您想要的事件，請在「顯示事件」彈出式選單中變更目標瀏覽器。


設定狀態列文字

「設定狀態列文字」動作會在瀏覽器視窗左下角的狀態列中顯示訊息。例如，您可以使用這個動作在狀態列中描述連結的目的地，而不是顯示與它相關的 URL。若要看看狀態訊息的範例，請將您的滑鼠滑過使用 Dreamweaver 中的任何一個導覽按鈕。瀏覽者經常忽略或漏看狀態列中的訊息 (而且並不是所有瀏覽器都對狀態列文字的設定提供完整支援)；如果您的訊息很重要，請考慮將它顯示為彈出訊息或圖層的文字。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式，請將它放在大括號 ({}) 內。若要顯示大括號，則在它前面加上反斜線 (\{)。

範例

The URL for this page is {window.location}, and today is {new Date()}.

若要使用「設定狀態列文字」動作：

  1. 選取物件並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「設定文字＞設定狀態列文字」。
  3. 在「設定狀態列文字」對話方塊中的「訊息」文字方塊輸入您的訊息。

    訊息要保持簡明。如果狀態列無法容納訊息時，瀏覽器便會將它截斷。

  4. 按一下「確定」。
  5. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


設定文字欄位文字

「設定文字欄位文字」動作會以您指定的內容，取代表單文字欄位的內容。

您可以在文字中嵌入任何有效的 JavaScript 函式呼叫、屬性、全域變數或其他運算式。若要嵌入 JavaScript 運算式，請將它放在大括號 ({}) 內。若要顯示大括號，則在它前面加上反斜線 (\{)。

範例

The URL for this page is {window.location}, and today is {new Date()}.

若要建立命名的文字欄位：

  1. 選取「插入＞表單＞文字欄位」。

    如果 Dreamweaver 提示您要新增表單標籤，請按一下「是」。如需詳細資訊，請參閱建立表單。

  2. 在「屬性」檢視窗中輸入文字欄位的名稱。請確定名稱在頁面上是唯一的 (對同一頁面上的多個元素不要使用相同名稱，即使它們在不同的表單中)。

若要使用「設定文字欄位文字」動作：

  1. 選取文字欄位並開啟「行為」面板。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「設定文字＞設定文字欄位文字」。
  3. 在「設定文字欄位文字」對話方塊中，請從「文字欄位」彈出式選單中選取目標文字欄位。
  4. 在「新的文字」欄位中輸入文字，然後按一下「確定」。
  5. 檢查預設事件是否為您所要的。如果不是，請從彈出式選單中選取其他事件。

    如果沒有看到您想要的事件，請在「顯示事件」彈出式選單中變更目標瀏覽器。


顯示隱藏圖層

「顯示隱藏圖層」動作會顯示、隱藏或恢復一個或多個圖層的預設顯示。這個動作在瀏覽者與頁面互動而需顯示資訊時非常有用。例如，當使用者將滑鼠指標滑過植物的影像時，您可以顯示圖層來詳細說明植物的生長季節和區域、需要的日照、可以長到多大等等。

「顯示隱藏圖層」對於建立預先載入圖層也很有用處 - 也就是說，大型圖層起先會使頁面內容模糊，然後在所有頁面元件已經完成載入時消失。

若要使用「顯示隱藏圖層」動作：

  1. 選取「插入＞圖層」，或是在「插入」列中按一下「圖層」按鈕，並且在「文件」視窗中繪製圖層。

    重複這個步驟來建立其他圖層。

  2. 在「文件」視窗中按一下以取消選取圖層，然後開啟「行為」面板。
  3. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「顯示隱藏圖層」。

    如果無法使用「顯示隱藏圖層」，您大概已經讓圖層被選取了。因為在兩個 4.0 瀏覽器中圖層都不接受事件，所以您必須選取不同的物件 — 如 body 標籤或連結 (a 標籤) — 或是在「顯示特定事件」彈出式選單中，將目標瀏覽器變更為 Internet Explorer 4.0。

  4. 從「命名的圖層」清單選取您想要變更顯示的圖層。
  5. 按一下「顯示」可顯示圖層，按一下「隱藏」可隱藏圖層，或是按一下「預設」可回復圖層的預設顯示。
  6. 針對您此時想要變更顯示的所有其餘圖層重複步驟 4 和 5 (您可以使用單一行為變更多個圖層的顯示)。
  7. 按一下「確定」。
  8. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。

在 Netscape Navigator 瀏覽器視窗中檢視時，圖層可能會縮小以符合內容的大小。若要防止這件事發生，請將文字或影像新增到圖層，或設定圖層裁切值。

若要建立預先載入圖層：

  1. 在插入列的「常用」類別中，按一下「繪製圖層」按鈕，並且在「文件」視窗的「設計」檢視中繪製大型圖層。

    請確定圖層遮蓋頁面上所有內容。

  2. 在「圖層」面板中將圖層名稱拖曳到圖層清單的頂端，以指定圖層應該在堆疊順序的最前面。
  3. 如果未選取圖層時請選取它，並使用圖層「屬性」檢視窗中最左邊的文字方塊，將它命名為 loading。
  4. 在圖層仍選取的同時，在「屬性」檢視窗中將圖層的背景顏色，設定成與頁面背景的顏色相同。

  5. 如果需要的話，請按一下圖層內部 (此時頁面內容的其餘部份應該變成模糊的) 並輸入訊息。

    例如，「頁面載入時請稍候」或「正在載入...」等訊息，都是告訴瀏覽者正在發生的事情，以便他們能知道頁面含有內容。

  6. 在「文件」視窗左下角的標籤選取器中按一下 <body> 標籤。
  7. 在「行為」面板中，請從「動作」彈出式選單中選取「顯示隱藏圖層」。
  8. 從「命名的圖層」清單選取稱為 loading 的圖層。
  9. 按一下「隱藏」。
  10. 按一下「確定」。
  11. 請確定在「行為」清單中緊鄰「顯示隱藏圖層」動作列出的事件是 onLoad (如果不是的話，請選取事件並按一下在事件和動作之間出現的倒三角形。然後，再從彈出式選單的事件清單中選取 onLoad)。


顯示彈出式選單

您可以使用「顯示彈出式選單」行為來建立或編輯 Dreamweaver 彈出式選單，或是開啟並修改您已經在 Dreamweaver 文件中插入的 Fireworks 彈出式選單。

您要在「顯示彈出式選單」對話方塊中設定選項，以建立水平或垂直彈出式選單。您可以使用這個對話方塊來設定或修改彈出式選單的顏色、文字和位置。

注意

您必須使用 Dreamweaver「屬性」檢視窗中的「編輯」按鈕來編輯 Fireworks 影像彈出式選單中的影像。不過，您還是可以使用「顯示彈出式選單」命令來變更影像彈出式選單中的文字。如需關於在 Fireworks 中編輯影像的資訊，請參閱使用其他應用程式。

若要在文件中檢視彈出式選單，您必須在瀏覽器視窗中開啟文件，然後將指標滑過觸發影像或連結。

若要使用「顯示彈出式選單」動作：

  1. 選取要附加行為的物件並開啟「行為」面板 (Shift + F4)。
  2. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「顯示彈出式選單」。
  3. 在出現的「顯示彈出式選單」對話方塊中，使用下列索引標籤來設定彈出式選單的選項：

    內容可以讓您設定個別選單項目的名稱、結構、URL 和目標。

    外觀可以讓您設定選單的「一般」狀態和「滑過」狀態的外觀，並可設定選單項目文字的字體選擇。

    進階可以讓您設定選單儲存格的屬性。例如，您可以設定儲存格寬度和高度、儲存格顏色和邊框寬度、文字縮排，以及使用者移動指標滑過觸發元素之後，選單出現之前的延遲時間。

    位置可以讓您設定選單相對於觸發影像或連結的位置。

本節包含下列主題：

  • 新增、移除和變更彈出式選單項目的順序
  • 設定彈出式選單的外觀
  • 設定進階外觀選項
  • 設定彈出式選單在文件中的位置
  • 修改彈出式選單


新增、移除和變更彈出式選單項目的順序

您使用「顯示彈出式選單」對話方塊中的「內容」索引標籤來建立選單項目。您也可以使用這個索引標籤來移除現有項目，或變更它們在選單中出現的順序。

若要新增彈出式選單項目：

  1. 請執行下列作業，在「內容」索引標籤中建立彈出式選單項目：

    在「文字」文字欄位中選取預設文字 (新項目)，然後輸入您想要在彈出式選單中出現的文字。

  2. 請依您的喜好設定其他選項。

    如果您想要在按下選單項目時開啟另一個檔案，請在「連結」文字方塊中輸入檔案路徑，或按一下「資料夾」圖示並瀏覽至您想要開啟的文件。

    如果您想要設定文件開啟的位置 (例如在新視窗或特定頁框中)，請在「目標」彈出式選單中選取想要的位置。

    注意

    如果您想要標定的頁框未出現在「目標」彈出式選單上，請關閉「顯示彈出式選單」對話方塊，然後在「文件」視窗中選取並命名該頁框。
  3. 按一下加號 (+) 按鈕，可將其他項目新增到「顯示彈出式選單」預覽清單中。

    當您完成新增選單項目時，請按一下「確定」來接受預設設定，或選取另外的「顯示彈出式選單」索引標籤來設定其他選項。

若要建立子選單項目：

在「顯示彈出式選單」清單中，選取您想要加入子選單項目的項目，然後再執行下列其中一項作業：

  • 若要在選單清單中縮排項目，按一下「縮排項目」按鈕。
  • 若要移除縮排，按一下「凸排項目」按鈕。

    注意

    您不可以讓子選單項目成為第一個選單項目。

若要變更選單中項目的順序：

  • 在「顯示彈出式選單」清單中，選取您想要上移或下移的項目，然後按一下上或下方向鍵，將項目移動到您想要它出現的位置。

若要從選單移除項目：

  1. 在「內容」索引標籤中選取您想要在「顯示彈出式選單」清單中移除的選單項目。
  2. 按一下減號 (-) 按鈕。


設定彈出式選單的外觀

在建立選單項目之後，請使用「顯示彈出式選單」的「外觀」索引標籤，來設定彈出式選單的方向、字體屬性和按鈕狀態屬性。

注意

「外觀」索引標籤的預覽窗格，對於您在這個索引標籤中所設定的選項，會提供大致的樣子。

若要設定彈出式選單的外觀：

  1. 在「外觀」索引標籤頂端的彈出式選單中，請選取「水平選單」或「垂直選單」來設定選單的方向。
  2. 設定您想要的文字格式選項：

    在「字體」彈出式選單中選取您想要套用至選單項目的字體。

    注意

    如果您想要套用的字體不在字體清單中，請使用「編輯字體清單」選項將字體新增到字體清單。若要確保選單能依照想要的方式出現，您應該選取網站瀏覽者可能具有的字體。

    設定選單項目文字的字體大小、樣式屬性和文字對齊或齊行選項。

  3. 在「一般狀態」和「滑過狀態」方塊，使用顏色挑選器來設定選單項目按鈕的文字和儲存格顏色。
  4. 當您完成設定外觀選項時，按一下「確定」或選取另外的「顯示彈出式選單」索引標籤來設定其他選項。


設定進階外觀選項

使用「進階」索引標籤中的選項來指定選單儲存格的其他屬性。例如，您可以設定寬度、高度、儲存格間距或選單按鈕欄位間隔、縮排文字，以及設定邊框屬性。

若要設定彈出式選單的進階格式屬性：

  1. 按一下「進階」索引標籤，然後設定您想要套用至選單項目的選項：

    儲存格寬度設定選單按鈕以像素為單位的特定寬度。「儲存格寬度」自動根據最寬的項目來設定；若要增加儲存格寬度，請在彈出式選單中選取「像素」並輸入大於「儲存格寬度」文字方塊顯示值的值。

    儲存格高度設定選單按鈕以像素為單位的特定高度。若要增加儲存格高度，請在彈出式選單中選取「像素」並輸入大於「儲存格高度」文字方塊顯示值的值。

    儲存格內距可指定儲存格內容和其邊界之間的像素數目。

    儲存格間距指定與相鄰儲存格之間的像素數目。

    文字縮排可以讓您指定選單項目中文字在儲存格內縮排的距離 (以像素為單位)。

    選單延遲設定使用者移動指標滑過觸發影像或連結，和選單出現時，這中間的時間長度。數值以毫秒計算，所以預設值 1000 等於 1 秒。對於您想要延遲的每一秒，都請加上 000；例如，若要延遲 3 秒，就輸入 3000。

    彈出式邊框決定邊框是否要出現在選單項目的周圍。如果您想要邊框出現在選單項目周圍，請確定已核取「彈出式邊框」核取方塊。

    邊框寬度可以像素為單位來設定邊框的寬度。

    陰影、邊框顏色和標示可以讓您為這些邊框選項挑選顏色。陰影和標示不會反映在預覽中。

  2. 當您完成設定進階外觀選項時，按一下「確定」或選取另外的「顯示彈出式選單」索引標籤來設定其他選項。


設定彈出式選單在文件中的位置

使用位置選項，設定彈出式選單相對於觸發影像或連結而顯示的地方。您也可以設定，在使用者移動指標離開觸發元素時，是否要隱藏選單。

若要設定彈出式選單位置選項：

  1. 在「顯示彈出式選單」對話方塊中按一下「位置」索引標籤。
  2. 請執行下列其中一項作業，設定彈出式選單的位置：
    • 請選取其中一個預先設定的選項。
    • 在「X」文字方塊輸入數字設定水平座標，並在「Y」文字方塊輸入數字設定垂直座標以設定自訂位置座標。座標從選單左上角起算。
  3. 若要在指標不在上面時隱藏彈出式選單，請確定選取了「隱藏」選單的「滑鼠滑出時」事件。若要離開顯示的選單，請取消選取這個選項。
  4. 當您完成建立或修改彈出式選單時，按一下「確定」。


修改彈出式選單

「顯示彈出式選單」行為可以讓您編輯或更新彈出式選單的內容。您可以新增、刪除或變更選單項目、重新排列它們，以及設定選單相對於觸發影像或連結的位置。

若要開啟現有 HTML 的彈出式選單：

  1. 在 Dreamweaver 文件中選取觸發彈出式選單的連結或影像。
  2. 如果「行為」面板未開啟的話，請按 Shift + F4 開啟，然後在「動作」清單中，按兩下「顯示彈出式選單」。

    「顯示彈出式選單」對話方塊便會出現。

  3. 對彈出式選單進行您想要的變更。
  4. 當您完成修改彈出式選單時，請按一下「確定」。

如需關於「設定彈出式選單」選項的詳細資訊，請參閱顯示彈出式選單。


調換影像

「調換影像」動作會變更 img 標籤的 src 屬性來將一個影像與另一個調換。使用這個動作來建立按鈕變換影像和其他影像效果 (包括一次調換多個影像)。插入變換影像會自動將「調換影像」行為新增到您的頁面。

注意

因為只有 src 屬性會被這個動作影響，您應該調換與原來影像有相同維度 (高度和寬度) 的影像。否則，您調換進來的影像，會壓縮或擴張顯示以符合原來影像的尺寸。

若要使用「調換影像」動作：

  1. 選取「插入＞影像」，或是按一下「插入」列上的「影像」按鈕，便可插入影像。
  2. 在「屬性」檢視窗中，於最左邊文字方塊輸入影像名稱。

    如果您不替影像命名的話，「調換影像」動作仍然會進行；它會在您將行為附加到物件時自動命名為未命名的影像。不過，如果所有影像都事先命名的話，在「調換影像」對話方塊中辨別影像會比較容易。

  3. 重複步驟 1 和 2 來插入其他影像。
  4. 選取物件 (通常是您將要調換的影像)，再開啟「行為」面板。
  5. 按一下加號 (+) 按鈕，並從「動作」彈出式選單中選取「調換影像」。
  6. 從「影像」清單選取您想要變更來源的影像。
  7. 按一下「瀏覽」以選取新的影像檔案，或在「設定原始檔為」文字方塊中輸入新影像的路徑和檔案名稱。
  8. 針對任何其他您想要變更的影像重複步驟 6 和 7。對所有您想要一次變更的影像，請使用相同的「調換影像」動作；否則，對應的「復原調換影像」動作就不會將它們全部恢復。
  9. 請選取「預先載入影像」選項，在載入頁面時將新影像載入瀏覽器的快取中。

    這樣就可避免在影像應該出現時由於下載而導致延遲。

  10. 按一下「確定」。
  11. 檢查預設事件是否為您所要的。

    如果不是，請從彈出式選單中選取其他事件。如果您想要的事件沒有列出來，請在「顯示特定事件」彈出式選單變更目標瀏覽器。


復原調換影像

「復原調換影像」動作會將上一組調換的影像復原為它們先前的原始檔案。這個動作是在每當您附加「調換影像」動作至物件時，才會自動加入的；如果您在附加「調換影像」時，讓「恢復」選項保持選取狀態，便應該永遠不需手動選取「復原調換影像」動作。


驗證表單

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

若要使用「驗證表單」動作：

  1. 選擇「插入＞表單」，或是按一下「插入」列中的「表單」按鈕來插入表單。
  2. 選取「插入＞表單物件＞文字欄位」，或是按一下「插入」列中的「文字欄位」按鈕來插入文字欄位。

    重複這個步驟來插入其他文字欄位。

  3. 請執行下列其中一項作業：
    • 若要在使用者填寫表單時能驗證個別的欄位，請選取文字欄位並選取「視窗＞行為」。
    • 若要在使用者送出表單時能驗證多個欄位，請在「文件」視窗左下角的標籤選取器中，按一下 <form> 標籤，再選取「視窗＞行為」。
  4. 從「動作」彈出式選單中選取「驗證表單」。
  5. 請執行下列其中一項作業：
    • 如果您要驗證個別欄位，請選取已經在「文件」視窗中從「命名的欄位」清單所選取的相同欄位。
    • 如果您要驗證多個欄位，請從「命名的欄位」清單選取文字欄位。
  6. 如果欄位必須包含一些資料，請選取「必要項」選項。
  7. 請從下列其中一個「接受」選項來選取：

    如果欄位是必要的但不限定包含任何特定資料類型，請使用任何東西 (如果沒有選取「必要項」選項，則「任何東西」選項便毫無意義 — 也就是說，這就像「驗證表單」動作未附加到欄位一樣)。

    使用電子郵件地址，檢查該欄位是否包含 @ 符號。

    使用數字，檢查欄位是否只包含數字。

    使用數字從，檢查該欄位是否包含指定範圍內的數字。

  8. 如果您要驗證多個欄位，請對其他您想要驗證的欄位重複步驟 6 和 7。
  9. 按一下「確定」。

    如果您在使用者送出表單時驗證多個欄位，onSubmit 事件便會自動出現在「事件」彈出式選單中。

  10. 如果您要驗證個別的欄位，請檢查預設事件為 onBlur 或 onChange。

    如果不是，請從彈出式選單中選取 onBlur 或是 onChange。這兩個事件在使用者移動離開欄位時，都會觸發「驗證表單」動作。它們之間的差別在於，onBlur 不論使用者是否輸入欄位都會發生，而 onChange 只有在使用者變更欄位內容時才會發生。當您已指定欄位為必要時，用 onBlur 事件會比較好。


參考

本節將提供這一章裡所介紹的「行為」面板以及 Fireworks 8 彈出式選單之相關資訊：

  • 設定行為面板選項
  • 關於 Fireworks 8 彈出式選單


設定行為面板選項

「行為」面板具有下列選項：

顯示設定事件只會顯示已經附加到目前文件的事件。事件會排列到用戶端或伺服器端類別中。每一個類別的事件都包含在可收合的清單中，您可以按一下其名稱旁的加/減號按鈕，便能展開或收合此清單。「顯示設定事件」是預設的檢視。

顯示全部事件會以遞減字母順序顯示指定類別中的所有事件。

新增行為 (+) 是可以附加到目前所選元素之動作的彈出式選單。當您從這個清單選取動作時，會出現一個對話方塊，您可以在其中指定動作的參數。如果所有動作都暗淡顯示，即表示沒有事件可由選取的元素產生。

刪除 (-) 會從「行為」清單移除選取的事件和動作。

向上和向下箭頭按鈕可為特定事件在「行為」清單中來上下移動選取的動作。既定事件的動作會依指定順序執行。動作的順序只可以針對一個特定事件來變更 - 例如，您可以對 onLoad 事件變更數個動作發生的順序，但所有 onLoad 動作都會在行為清單中放置在一起。對於無法在清單中上下移動的動作，則箭頭按鈕便會停用。

事件 (當您按一下緊鄰「行為」清單內已選取事件名稱的箭頭按鈕時所出現的選單) 是所有會觸發動作之事件的彈出式選單。這個選單只有在「行為」清單中的事件被選取時才會顯示。根據選取的物件不同，會出現不同的事件。如果您期待的事件沒有出現，請確定所選取的是正確的頁面元素或標籤 (若要選取特定標籤，請使用「文件」視窗左下方的標籤選取器)。同樣請確定您已經選取正確的瀏覽器，或是「顯示事件」子選單中的瀏覽器。

注意

括號中的事件名稱只供連結使用；只要選擇其中一個事件名稱便會自動將 Null 連結新增到選取的頁面元素，並附加行為至該連結，而非元素本身。Null 連結在 HTML 程式碼中指定為 a href="javascript:;"。

顯示特定事件 (「事件」選單中的子選單) 會指定目前行為要在其中執行的瀏覽器。您從這個選單所做的選取將決定哪一個事件會出現在「事件」彈出式選單中。舊版瀏覽器通常比新版瀏覽器支援較少的事件，而在大部分情況中，您選擇的目標瀏覽器越平常，出現的事件就越少，因為只有所有要求的瀏覽器都能執行的事件才會顯示。例如，如果您選取「3.0 或更新版的瀏覽器」，那麼所能選取的事件，只有在 3.0 版以後的所有 Netscape Navigator 和 Microsoft Internet Explorer 中可用的事件，這是非常有限的事件清單。


關於 Fireworks 8 彈出式選單

Fireworks 8 可讓您輕鬆快速地建立 CSS 彈出式選單。Fireworks 所產生的 CSS 程式碼比 Dreamweaver 產生的 JavaScript 程式更容易讓人瞭解、維護和修改，因為它較為簡易且精簡。

除了更具擴展性且可以更快迅地下載的優點之外，利用 Fireworks 建立的彈出式選單提供您下列優點：

  • 可以依搜尋引擎來編排選單項目的索引
  • 可以透過螢幕讀取器讀取選單項目，讓您的頁面更容易存取。
  • Fireworks 所產生的程式碼符合標準，並且可以通過驗證

您可以利用 Dreamweaver 或 Fireworks 來編輯 Fireworks 彈出式選單，但這兩者不能同時使用。Fireworks 不會保留 Dreamweaver 所做的變更。如需詳細資訊，請參閱在 Dreamweaver 中編輯 Fireworks 彈出式選單。


使用頁面程式碼

在 Dreamweaver 8 中使用進階程式碼撰寫工具，以建立或修改頁面。

注意

若要取得語言參考說明，請在程式碼檢視中按 Shift+F1。

這部份包含下列各章：

設定程式碼撰寫環境

在 Dreamweaver 中撰寫程式碼

程式碼最佳化和除錯

在設計檢視中編輯程式碼


設定程式碼撰寫環境

您可以在 Macromedia Dreamweaver 8 中調整程式碼撰寫環境，讓它能適合您工作的方式。例如，您可以變更檢視程式碼的方式、設定不同的鍵盤快速鍵，或者匯入及使用您最愛的標籤資料庫。

本章包含下列主題：

檢視程式碼

使用程式碼撰寫者導向的工作區域 (僅適用於 Windows)

設定程式碼撰寫偏好設定

自訂鍵盤快速鍵

依預設值在程式碼檢視中開啟檔案

設定驗證工具偏好設定

管理標籤資料庫

匯入自訂標籤到 Dreamweaver

將外部 HTML 編輯器與 Dreamweaver 配合使用


檢視程式碼

您可以使用數種方式檢視目前文件的原始碼：您可以開啟「程式碼」檢視，以便在「文件」視窗中顯示程式碼，您可以分割「文件」視窗，以便同時顯示頁面和其相關的程式碼，或是在「程式碼」檢視窗中工作，這是一個分隔的程式碼撰寫視窗。「程式碼」檢視窗作業時就像「程式碼」檢視，您可以將它視為目前文件之可分開的「程式碼」檢視。

本節包含變更檢視程式碼的方式說明。

若要在「文件」視窗中檢視程式碼：

  • 請選取「檢視＞程式碼」。

若要在「文件」視窗中同時撰寫程式碼，以視覺方式編輯頁面：

  1. 選取「檢視＞程式碼和設計」。

    程式碼會出現在上窗格，頁面顯示在下窗格。

  2. 若要將頁面顯示在上方，請選取「檢視＞設計檢視在上方」。
  3. 若要調整「文件」視窗中的窗格大小，請將分隔列拖曳到想要的位置。

    分隔列位於兩個窗格之間。

    當您在「設計」檢視中進行變更時，「程式碼」檢視會自動更新。但是，在「程式碼」檢視中進行變更之後，您必須在「設計」檢視中按一下，或是按 F5 鍵，才能以手動來更新「設計」檢視中的文件。

若要在分隔視窗中檢視程式碼：

  • 請選取「視窗＞程式碼檢視窗」。


使用程式碼撰寫者導向的工作區域 (僅適用於 Windows)

在 Windows 中，您可以使用外觀與 Macromedia HomeSite 中的工作區域類似的工作區域，也就是面板群組停駐在主視窗左方，而非右方。在這個工作區版面中，「屬性」檢視窗依預設值是收合的，而「文件」視窗則預設出現在「程式碼」檢視中。如需使用此選項的資訊，請參閱選擇工作區版面 (僅適用於 Windows)。

相關主題

  • 依預設值在程式碼檢視中開啟檔案.


設定程式碼撰寫偏好設定

藉由設定程式碼格式、改寫及色彩標示等等的偏好設定，您就可以自訂 Dreamweaver 程式碼撰寫環境，以便符合您的特定需要。

注意

若要設定進階的偏好設定，請使用「標籤資料庫編輯器」(請參閱管理標籤資料庫)。

本節包含下列主題：

  • 設定程式碼檢視選項
  • 設定程式碼格式偏好設定
  • 將新的格式偏好設定套用到現有文件
  • 設定程式碼提示偏好設定
  • 設定改寫程式碼偏好設定
  • 設定程式碼色彩標示偏好設定


設定程式碼檢視選項

您可以從「檢視＞程式碼檢視選項」選單中，設定文字換行、顯示程式碼的行號、標示無效的程式碼、設定程式碼元素的彩色標示語法、設定縮排，以及顯示隱藏字元等。

若要設定「程式碼」檢視和「程式碼」檢視窗的選項：

  1. 在「程式碼」檢視或「程式碼」檢視窗中檢視文件。
  2. 請執行下列其中一項作業：
    • 選取「檢視＞程式碼檢視選項」
    • 請按一下「程式碼」檢視或「程式碼」檢視窗上方工具列中的「檢視選項」按鈕。 這是描述功能的圖片。
  3. 若要啟用或停用下列任一個選項，請從選單中選取它們。

    自動換行會將程式碼換行，讓您不必水平捲動便能檢視程式碼。這個選項不會插入斷行符號；它只是讓程式碼變得更容易檢視。

    行號會在程式碼的邊上顯示行號。

    隱藏字元會顯示特殊字元以取代空白。例如：以點取代每個空格、以兩個山形取代每個定位點，並以段落標記取代每個斷行。

    注意

    Dreamweaver 用來表示文字換行的軟式斷行符號並不會顯示成段落標記。

    反白標示無效的程式碼可以讓 Dreamweaver 以黃色來標示所有無效的 HTML 程式碼。當您選取無效的標籤時，「屬性」檢視窗會顯示關於如何修正錯誤的資訊。

    彩色標示語法會啟用或停用程式碼彩色標示。如需變更頁面配色的詳細資訊，請參閱設定程式碼色彩標示偏好設定。

    自動縮排會自動縮排您的程式碼 (如果您在撰寫程式碼時按 Enter 鍵的話)。程式碼新的一行會縮排到與前一行相同的階層。如需變更縮排間距的詳細資訊，請參閱設定程式碼格式偏好設定中的「定位鍵距離」選項。

相關主題

  • 檢視程式碼
  • 編碼工具列


設定程式碼格式偏好設定

您可以藉由指定格式的偏好設定，如縮排、行長度和標籤與屬性名稱的大小寫，便可變更程式碼的外觀。

請注意，除了「改寫大小寫」之外，所有的偏好設定只會影響新文件，以及現有文件的新增部份。也就是說，當您開啟先前建立的 HTML 文件時，這些格式選項並不會套用在這份文件上。若要重新格式化現有的 HTML 文件，請使用「套用原始碼格式」命令。如需詳細資訊，請參閱將新的格式偏好設定套用到現有文件。

若要設定程式碼格式偏好設定：

  1. 選取「編輯＞偏好設定」。
  2. 從左邊的「分類」清單中選取「程式碼格式」。

    「程式碼格式」偏好設定便會出現。

  3. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定程式碼格式偏好設定選項。


將新的格式偏好設定套用到現有文件

您在「程式碼格式」偏好設定中所指定的程式碼格式選項，只會自動套用至您後續以 Dreamweaver 所建立的新文件。不過，您可以將新的格式偏好設定套用到現有的文件上。

若要將新的格式偏好設定套用到現有文件：

  1. 在 Dreamweaver 中開啟文件。
  2. 選取「命令＞套用原始碼格式」。


設定程式碼提示偏好設定

程式碼提示可讓您就像在「程式碼」檢視或「快速標籤編輯器」中輸入程式碼一樣，快速地插入標籤名稱、屬性和數值。如需詳細資訊，請參閱使用程式碼提示或在快速標籤編輯器中使用提示選單。

提示

即使已停用程式碼提示，您還是可以按下 Control+Spacebar，便能在「程式碼」檢視中顯示彈出式提示。

若要設定程式碼提示偏好設定：

  1. 選取「編輯＞偏好設定」。
  2. 從左邊的「分類」清單中選取「程式碼提示」。

    程式碼提示偏好設定便會出現。

  3. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定程式碼提示偏好設定選項。

相關主題

  • 使用程式碼提示


設定改寫程式碼偏好設定

當您開啟文件時，Dreamweaver 會修正 (或改寫) 某幾種技術上不合法的程式碼，視您所指定的程式碼改寫偏好設定而定。當您在「程式碼」檢視中編輯 HTML 或 Script 時，這些偏好設定並沒有效果。

如果您停用改寫選項，Dreamweaver 會在「文件」視窗中對可能要改寫的 HTML 顯示無效的標記項目。

若要設定改寫程式碼偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「改寫程式碼」。

    「改寫程式碼」偏好設定便會出現。

  3. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定改寫程式碼偏好設定選項。

相關主題

  • 清理 Microsoft Word HTML 檔


設定程式碼色彩標示偏好設定

請使用程式碼色彩標示偏好設定，來指定標籤和程式碼元素的一般分類，如表單相關的標籤或 JavaScript 識別名稱。若要設定特定標籤的色彩偏好設定，請在「標籤資料庫編輯器」中編輯標籤定義。如需詳細資訊，請參閱編輯資料庫、標籤和屬性。

若要設定程式碼色彩標示偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「程式碼色彩標示」。

    「程式碼色彩標示」偏好設定便會出現。

  3. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定程式碼色彩標示偏好設定選項。

相關主題

  • 自訂樣版的程式碼色彩標示偏好設定


自訂鍵盤快速鍵

您可以在 Dreamweaver 中使用自己喜歡的鍵盤快速鍵。如果您習慣使用特定的鍵盤快速鍵，例如，按 Control + Enter 鍵來新增斷行符號、按 Control + G 鍵前往程式碼中的特定位置，或按 Shift + F6 鍵來驗證檔案等，您可以使用「鍵盤快速鍵編輯器」將它們加入 Dreamweaver。如需詳細資訊，請參閱自訂鍵盤快速鍵。

相關主題

使用程式碼片段


依預設值在程式碼檢視中開啟檔案

當您開啟通常不包含任何 HTML (例如，JavaScript 檔) 的檔案類型時，檔案會在「程式碼」檢視 (或「程式碼」檢視窗) 中開啟檔案，而不是在「設計」檢視中開啟。您可以指定在「程式碼」檢視中會開啟何種檔案類型。

若要設定非 HTML 檔的預設檢視：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「檔案型態/編輯器」。

    「檔案類型/編輯器」偏好設定便會出現。

  3. 於「在程式碼檢視中開啟」文字方塊中，請新增您要在「程式碼」檢視中自動開啟之檔案類型的檔案名稱副檔名。

    在檔案名稱副檔名之間輸入一個空格。您可以依自己的喜好來新增任意數量的副檔名。

相關主題

  • 設定「檔案類型/編輯器」偏好設定選項


設定驗證工具偏好設定

您可以在 Dreamweaver 中使用「驗證工具」，快速找出程式碼中的標籤或語法錯誤 (請參閱驗證標籤)。您可以指定「驗證工具」應該檢查的標籤架構語言、「驗證工具」應該檢查的特定問題，以及「驗證工具」應該報告的錯誤類型。

注意

在驗證明確指定 doctype 的文件時，「驗證工具」的偏好設定會被忽略。

若要設定「驗證工具」的偏好設定：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「驗證工具」。

    「驗證工具」偏好設定便會出現。

  3. 請選取要進行驗證的標籤資料庫，並且設定這些資料庫的選項。

    如需詳細資訊，請參閱設定驗證工具偏好設定選項。


管理標籤資料庫

在 Dreamweaver 中的標籤資料庫，是一種特殊類型標籤的集合，以及關於 Dreamweaver 應該如何格式化標籤的資訊。標籤資料庫可提供有關 Dreamweaver 對程式碼提示、目標瀏覽器檢查、標籤選擇程式，及其他撰寫程式碼功能所使用之標籤的資訊。使用「標籤資料庫編輯器」，您可以新增及刪除標籤資料庫、標籤和屬性；設定標籤資料庫的屬性；以及編輯標籤和屬性。

本節包含下列主題：

  • 開啟和關閉標籤資料庫編輯器
  • 新增資料庫、標籤和屬性
  • 編輯資料庫、標籤和屬性
  • 刪除資料庫、標籤和屬性

另請參閱匯入自訂標籤到 Dreamweaver。


開啟和關閉標籤資料庫編輯器

若要管理標籤資料庫，請使用標籤資料庫編輯器。

若要開啟標籤資料庫編輯器：

  • 選取「編輯＞標籤資料庫」。

標籤資料庫編輯器便會顯示 (這個對話方塊的內容，會視選取的標籤而變更)。

若要關閉標籤資料庫編輯器，並且儲存變更：

  • 按一下「確定」。

若要關閉標籤資料庫編輯器，而不儲存變更：

  • 請按一下「取消」。

    注意

    當您按一下「取消」時，會捨棄您已在標籤資料庫編輯器中進行的所有變更。如果您刪除標籤或標籤資料庫，會將它回復。


新增資料庫、標籤和屬性

您可以使用標籤資料庫編輯器，將標籤資料庫、標籤和屬性加入 Dreamweaver 的標籤資料庫。

注意

若要匯入標籤，請參閱匯入自訂標籤到 Dreamweaver。

若要新增標籤資料庫：

  1. 在「標籤資料庫」編輯器中 (「編輯＞標籤資料庫」)，請按一下加號 (+) 按鈕，並選取「新增標籤資料庫」。

    「新增標籤資料庫」對話方塊便會出現。

  2. 在「資料庫名稱」文字方塊中，請輸入名稱 (例如，雜項標籤)。
  3. 按一下「確定」。

若要將標籤新增至標籤資料庫：

  1. 在「標籤資料庫」編輯器中 (「編輯＞標籤資料庫」)，請按一下加號 (+) 按鈕，並選取「新增標籤」。

    「新增標籤」對話方塊便會出現。

  2. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定「新增標籤」對話方塊選項。

  3. 按一下「確定」。

若要在標籤中加入一或多個屬性：

  1. 在「標籤資料庫」編輯器 (「編輯＞標籤資料庫」) 中，請按一下加號 (+) 按鈕，並選取「新增屬性」。

    「新增屬性」對話方塊便會出現。

  2. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定「新增屬性」對話方塊選項。

  3. 按一下「確定」。

相關主題

  • 管理標籤資料庫
  • 編輯資料庫、標籤和屬性
  • 刪除資料庫、標籤和屬性


編輯資料庫、標籤和屬性

您可以使用「標籤資料庫」編輯器，來設定標籤資料庫的屬性，並且編輯資料庫中的標籤和屬性─不論它是其屬性和屬性值，或是其格式 (以便在程式碼中可以輕易地識別)。

若要設定標籤資料庫的屬性：

  1. 在「標籤資料庫」編輯器中 (「編輯＞標籤資料庫」)，請選取「標籤」清單中的標籤資料庫 (而不是標籤)。

    注意

    只有選取標籤資料庫之後，標籤資料庫的屬性才會出現。「標籤」清單最上層的資料夾代表標籤資料庫，例如，「HTML 標籤」資料夾代表標籤資料庫，而「HTML 標籤」資料夾中的 ABBR 資料夾代表標籤。
  2. 在「用於」清單中，請選取應該使用標籤資料庫的每種文件類型。

    您在此處所選取的文件類型，可決定何種文件類型能對指定的標籤資料庫，提供程式碼提示。例如，如果對指定的標籤資料庫並未選取 HTML 選項，則該標籤資料庫的程式碼提示，便不會顯示於 HTML 檔中。

  3. 如果標籤資料庫中的標籤需要前置詞，請在「標籤前置詞」文字方塊中輸入前置詞。

    注意

    前置詞是用來將程式碼中的標籤，識別為特殊標籤資料庫的一部份。部份的標籤資料庫並未使用前置詞。
  4. 如果您已完成「標籤資料庫」編輯器中的變更，請按一下「確定」。

若要編輯標籤資料庫中的標籤：

  1. 在「標籤資料庫」編輯器中 (「編輯＞標籤資料庫」)，請展開「標籤」清單中的標籤資料庫，並選取其中的標籤。
  2. 請設定下列其中一項「標籤格式」選項：

    斷行可指定 Dreamweaver 是否要對標籤插入斷行符號。

    內容可指定 Dreamweaver 插入標籤內容的方式；也就是說，是否將斷行、格式化和縮排規則套用至內容。

    大小寫指定特定標籤的大小寫。從「預設」、「小寫」、「大寫」或「大小寫混合」中選取。如果您選取「大小寫混合」，便會出現「標籤名稱大小寫混合」對話方塊。在插入標籤時，請輸入 Dreamweaver 應該使用的大小寫 (例如，getProperty)，再按一下「確定」。

    設定預設值會設定所有標籤的預設大小寫。在出現的「預設標籤大小寫」對話方塊中，請選取 <UPPERCASE> 或 <lowercase>，再按一下「確定」。

    提示

    您可能希望將預設的大小寫設定為小寫，以便符合 XML 和 XHTML 標準。

若要編輯標籤屬性：

  1. 在標籤資料庫編輯器中 (「編輯＞標籤資料庫」)，請展開「標籤」清單中的標籤資料庫、展開標籤，並選取標籤屬性。
  2. 在「大小寫」彈出式選單中，請選取「預設值」、「小寫」、「大寫」或「大小寫混合」。

    如果您選取「大小寫混合」，便會出現「屬性名稱大小寫混合」對話方塊。在插入屬性時，請輸入 Dreamweaver 應該使用的大小寫 (例如，onClick)，再按一下「確定」。

    按一下「設定預設值」連結，便可以設定所有屬性名稱的預設大小寫。

  3. 在「屬性類型」彈出式選單中，請選取屬性的類型。

    如果您選取「列舉」，請在「值」文字方塊中輸入屬性的每個允許值。以逗點來分隔值，且不含空格。例如，cfchart 標籤之 showborder 屬性的列舉值，便會顯示為 yes,no。

相關主題

  • 管理標籤資料庫
  • 新增資料庫、標籤和屬性
  • 刪除資料庫、標籤和屬性


刪除資料庫、標籤和屬性

您可以使用「標籤資料庫」編輯器，來刪除標籤資料庫、標籤和屬性。

若要刪除資料庫、標籤或屬性：

  1. 在「標籤資料庫」編輯器 (「編輯＞標籤資料庫」) 中，請於「標籤」方塊中選取標籤資料庫、標籤或屬性。
  2. 按一下減號 (-) 按鈕。
  3. 如果要求您確認刪除時，請按一下「確定」，便可永久地刪除此項目。

    該項目便會從「標籤」方塊中移除。

  4. 按一下「確定」，便可關閉「標籤資料庫」編輯器，並且完成刪除動作。

相關主題

  • 管理標籤資料庫
  • 新增資料庫、標籤和屬性
  • 編輯資料庫、標籤和屬性


匯入自訂標籤到 Dreamweaver

您可以將自訂標籤匯入 Dreamweaver，使它成為撰寫環境中的一個完整部份。例如，當您在「程式碼」檢視中開始輸入匯入的自訂標籤時，會出現一個程式碼提示選單，列出標籤的屬性，並且讓您選取其中一個。

本節包含下列主題：

  • 從 XML 檔匯入標籤
  • 匯入自訂的 ASP.NET 標籤
  • 從檔案匯入 JSP 標籤
  • 從伺服器匯入 JSP 標籤 (web.xml)
  • 匯入 JRun 標籤


從 XML 檔匯入標籤

您可以從「XML 文件類型定義」(Document Type Definition，DTD) 檔或資料結構匯入標籤。

若要從 XML DTD 或資料結構匯入標籤：

  1. 開啟「標籤資料庫」編輯器 (「編輯＞標籤資料庫」)。
  2. 按一下加號 (+) 按鈕，並選取「DTD Schema＞匯入 XML DTD 或資料結構檔」。
  3. 請輸入檔案名稱，或是 DTD 的 URL 或資料結構檔。
  4. 輸入要與標籤配合使用的前置詞。

    注意

    前置詞是用來將程式碼中的標籤，識別為特殊標籤資料庫的一部份。部份的標籤資料庫並未使用前置詞。
  5. 按一下「確定」。


匯入自訂的 ASP.NET 標籤

您可以將自訂的 ASP.NET 標籤匯入 Dreamweaver。

在開始之前，請先確定「網站定義」對話方塊中所定義的測試伺服器上已安裝了自訂標籤 (請參閱指定可以處理動態網頁的位置)。編譯好的標籤 (.dll 檔) 必須放在網站根目錄的 /bin 資料夾中。未編譯的標籤 (.ascx 檔) 可以位於伺服器的任何虛擬目錄或子目錄上。如需詳細資訊，請參閱 Microsoft ASP.NET 文件。

若要將 ASP.NET 自訂標籤匯入 Dreamweaver：

  1. 在 Dreamweaver 中開啟 ASP.NET 頁面。
  2. 開啟「標籤資料庫」編輯器 (「編輯＞標籤資料庫」)。
  3. 按一下加號 (+) 按鈕，並執行下列其中一項作業：
    • 若要從應用程式伺服器匯入所有的 ASP.NET 自訂標籤，請選取「ASP.NET＞匯入全部的 ASP.NET 自訂標籤」。
    • 若只要從應用程式伺服器匯入某些自訂標籤，請選取「ASP.NET＞匯入選取的 ASP.NET 自訂標籤」。

    「匯入選取的 ASP.NET 自訂標籤」對話方塊便會出現，列出應用程式伺服器上安裝的每個 ASP.NET 自訂標籤。從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 標籤，然後按一下「確定」。


從檔案匯入 JSP 標籤

您可從各式各樣的檔案類型，將 JSP 標籤資料庫匯入 Dreamweaver。

若要將 JSP 標籤資料庫匯入 Dreamweaver：

  1. 在 Dreamweaver 中開啟 JSP 頁面。
  2. 開啟「標籤資料庫」編輯器 (「編輯＞標籤資料庫」)。
  3. 按一下加號 (+) 按鈕，並選取「JSP＞從檔案匯入 (*.tld、*.jar、*.zip)」。
  4. 請輸入檔案名稱、URI 和前置詞。

    如需詳細資訊，請參閱設定 JSP 標籤資料庫「從檔案匯入」對話方塊選項。

  5. 按一下「確定」。


從伺服器匯入 JSP 標籤 (web.xml)

您可從 JSP 伺服器上的 web.xml 檔，將 JSP 標籤資料庫匯入 Dreamweaver。

若要從伺服器匯入 JSP 標籤：

  1. 在 Dreamweaver 中開啟 JSP 頁面。
  2. 開啟「標籤資料庫」編輯器 (「編輯＞標籤資料庫」)。
  3. 按一下加號 (+) 按鈕，並選取「JSP＞從伺服器匯入 (web.xml)」。

    「從伺服器匯入」對話方塊便會出現。

  4. 輸入檔案名稱和 URI。

    如需詳細資訊，請參閱設定 JSP 標籤資料庫「從伺服器匯入」對話方塊選項。

  5. 按一下「確定」。


匯入 JRun 標籤

如果您使用 Macromedia JRun，可以將 JRun 標籤匯入 Dreamweaver。

若要將 JRun 標籤匯入 Dreamweaver：

  1. 在 Dreamweaver 中開啟 JSP 頁面。
  2. 開啟「標籤資料庫」編輯器 (「編輯＞標籤資料庫」)。
  3. 在「標籤資料庫」編輯器中按一下加號 (+) 按鈕，並選取「JSP＞從資料夾匯入 JRun 伺服器標籤」。
  4. 請輸入資料夾名稱、URI 和前置詞。

    如需詳細資訊，請參閱設定「從資料夾匯入 JRun 伺服器標籤」對話方塊選項。

  5. 按一下「確定」。


將外部 HTML 編輯器與 Dreamweaver 配合使用

您可以從 Dreamweaver 啟動外部的 HTML 或文字編輯器，以便編輯目前文件的原始碼，然後再切換回 Dreamweaver 繼續圖形方式的編輯作業。Dreamweaver 會偵測從外部儲存至文件的任何變更，並在返回時提示您重新載入文件。

您可以使用下列整合的 HTML 編輯器：Macromedia HomeSite (僅適用於 Windows) 或 BBEdit (僅適用於 Macintosh)。您也可以使用任何其他文字編輯器，如「記事本」、WordPad、TextPad、TextEdit、SimpleText、vi 或 emacs。

本節包含下列主題：

  • 使用整合的 HTML 編輯器
  • 設定檔案類型和外部編輯器偏好設定


使用整合的 HTML 編輯器

當您安裝 Dreamweaver 時，可以在 Windows 中安裝 HomeSite，或在 Macintosh 上安裝試用版的 BBEdit。Dreamweaver 已經與這些工具緊密整合。

因為已經整合，您可以在 Dreamweaver 和 HomeSite/BBEdit 中編輯文件，從一個應用程式切換到另一個應用程式，並且在兩個應用程式中自動保持文件的同步化。此外，兩個程式都會追蹤目前的選取範圍，例如，如果您在 Dreamweaver 中選取文字再切換到 BBEdit，則 BBEdit 中也會選取相同的元素。

您可以從 Dreamweaver 開啟其他外部編輯器 (除了 HomeSite 或 BBEdit 之外)，但是文件不會像在 HomeSite 或 BBEdit 中一樣，能在兩個應用程式中保持同步化。當您在 HomeSite 或 BBEdit 以外的外部編輯器中完成變更之後，必須在 Dreamweaver 中以手動重新整理文件。


使用 HomeSite (僅適用於 Windows)

您不需要啟用 HomeSite 的整合；它在安裝這兩項應用程式時，便已經自動整合。

若要使用 HomeSite：

  1. 選取「編輯＞使用 HomeSite 編輯」。
  2. 在 HomeSite 中編輯文件並儲存變更。
  3. 若要返回 Dreamweaver，請按一下「編輯器」工具列中的 Dreamweaver。


使用 BBEdit (僅適用於 Macintosh)

如果您不想使用 BBEdit 時，可以停用 BBEdit 整合。如果已停用 BBEdit 整合時，不會追蹤在 Dreamweaver 和 BBEdit 之間的選取範圍。不過，如果已停用 BBEdit 整合時，在 Dreamweaver 中編輯時速度可能較快。

若要將 BBEdit 與 Dreamweaver 配合使用：

  1. 選取「編輯＞使用 BBEdit 編輯」。
  2. 在 BBEdit 中編輯文件。
  3. 按一下 BBEdit 中「HTML 工具」色盤上的 Dreamweaver 按鈕，便可回到 Dreamweaver。

若要停用 BBEdit 整合：

  1. 請選取「編輯＞偏好設定」或「Dreamweaver＞偏好設定」(Mac OS X)，再選取「檔案型態/編輯器」。
  2. 取消選取「啟動 BBEdit 整合」，再按一下「確定」。


設定檔案類型和外部編輯器偏好設定

您可以指定在編輯各種檔案名稱副檔名時，要使用何種外部應用程式。

若要選取外部 HTML 編輯器：

  1. 選取「編輯＞偏好設定」。
  2. 從左邊的「分類」清單中選取「檔案型態/編輯器」。

    「檔案類型/編輯器」偏好設定便會出現。

  3. 請調整對話方塊中的任一項設定。

    如需詳細資訊，請參閱設定「檔案類型/編輯器」偏好設定選項。

  4. 按一下「確定」。

若要啟動外部 HTML 編輯器：

  • 請選取「編輯＞使用 [編輯器名稱] 編輯」。

相關主題

  • 依預設值在程式碼檢視中開啟檔案
  • 設定外部影像編輯器偏好設定
  • 啟動媒體檔案的外部編輯器
  • 使用整合的 HTML 編輯器


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定「標籤資料庫」編輯器對話方塊選項
  • 設定程式碼格式偏好設定選項
  • 設定程式碼提示偏好設定選項
  • 設定改寫程式碼偏好設定選項
  • 設定程式碼色彩標示偏好設定選項
  • 設定驗證工具偏好設定選項
  • 設定「新增標籤」對話方塊選項
  • 設定「新增屬性」對話方塊選項
  • 設定 JSP 標籤資料庫「從檔案匯入」對話方塊選項
  • 設定 JSP 標籤資料庫「從伺服器匯入」對話方塊選項
  • 設定「從資料夾匯入 JRun 伺服器標籤」對話方塊選項
  • 設定「檔案類型/編輯器」偏好設定選項
  • 設定「程式碼」檢視窗選項


設定「標籤資料庫」編輯器對話方塊選項

這個對話方塊是用來新增、編輯和刪除標籤資料庫、標籤和屬性，以及匯入標籤資料庫。

工作

  • 新增資料庫、標籤和屬性
  • 編輯資料庫、標籤和屬性
  • 刪除資料庫、標籤和屬性
  • 匯入自訂標籤到 Dreamweaver


設定程式碼格式偏好設定選項

這個對話方塊可讓您指定 Dreamweaver 在格式化程式碼時所用的偏好設定。

注意

除了「改寫大小寫」之外的所有偏好設定，只會影響新文件，以及現有文件的新增部份。也就是說，當您開啟先前建立的 HTML 文件時，這些格式選項並不會套用在這份文件上。若要重新格式化現有的 HTML 文件，請使用「套用原始碼格式」命令。如需詳細資訊，請參閱將新的格式偏好設定套用到現有文件。

若要指定程式碼格式偏好設定：

  1. 請指定下列其中一項選項：

    縮排指出 Dreamweaver 所產生的程式碼，是否應該縮排 (按照這些偏好設定中指定的縮排規則)。

    注意

    此對話方塊中大部份的縮排選項，只適用於 Dreamweaver 所產生的程式碼，而不是您所輸入的程式碼。若要讓您所輸入之程式碼的每一個新行，都能縮排成與前一行相同的階層，請使用「程式碼」檢視之「檢視選項」選單中的「自動縮排」選項。如需詳細資訊，請參閱設定程式碼檢視選項。

    使用 (文字方塊和彈出式選單) 指定 Dreamweaver 應該用多少空格或定位鍵，來縮排所產生的程式碼。例如，如果您在文字方塊中輸入 3，然後在彈出式選單中選取「定位鍵」，則 Dreamweaver 所產生的程式碼會在每一個縮排階層中使用三個定位鍵字元。

    定位鍵距離可決定在「程式碼」檢視中，每一個定位鍵字元顯示時佔多少字元的寬度。例如，如果「定位鍵距離」設成 4，則「程式碼」檢視中的每一個定位鍵，會顯示為四個字元寬的空格。此外，如果「縮排大小」設成 3 個「定位鍵」，則 Dreamweaver 所產生的程式碼，便會以每一個縮排階層使用三個定位鍵字元的方式縮排，而在「程式碼」檢視中便會顯示為十二個字元寬的空格。

    注意

    Dreamweaver 會使用空格或定位鍵來縮排；在插入程式碼時，它不會將空格的執行轉換成定位鍵。

    自動換行會在一行到達指定的欄寬時，插入一個斷行符號 (亦稱為「強迫」換行符號)。(Dreamweaver 插入斷行字元的位置，並不會變更文件在瀏覽器中的外觀，所以有些行可能還是比「自動換行」選項所指定的長度還長。相反地，「程式碼」檢視中的「換行」選項會顯示較長的行 (超過視窗的寬度)，就像它們包含了斷行字元一樣，但實際上並未插入斷行字元。

    斷行類型會指定裝載遠端網站的遠端伺服器類型 (Windows、Macintosh 或 UNIX)。選擇正確的斷行字元類型可以確保在遠端伺服器上檢視時，您的 HTML 原始碼能正確顯示 當您使用只能辨識某幾種斷行符號的外部文字編輯器時，這個設定也很有用。例如，如果「記事本」是您的外部編輯器，請使用 CR LF (Windows)，如果 SimpleText 是您的外部編輯器，則使用 CR (Macintosh)。

    注意

    對於您使用 FTP 來連線的伺服器，此選項只適用於二進位傳送模式；在 Dreamweaver 中的 ASCII 傳送模式，則會忽略此選項。如果您使用 ASCII 模式下載檔案，Dreamweaver 會根據電腦的作業系統來設定斷行。如果您使用 ASCII 模式上傳檔案，則斷行符號會全部設定為 CR LF。

    預設標籤大小寫和預設屬性大小寫控制標籤和屬性名稱的大小寫。這些選項會套用至您在「設計」檢視中，所插入或編輯的標籤和屬性，但不會套用到您在「程式碼」檢視中直接輸入的標籤和屬性，或是當您開啟文件時，套用至文件中已有的標籤和屬性 (除非您也選取其中一個「改寫大小寫」選項，或是兩者皆選)。

    改寫大小寫：標籤和屬性指定是否隨時 (包括開啟現有的 HTML 文件時) 強制執行您所指定的大小寫選項。當您選取其中一個選項，並按一下「確定」來取消對話方塊時，目前文件中的所有標籤或屬性，都會立即轉換成指定的大小寫，從此時開始，您所開啟的每個文件中所有的標籤或屬性，也都會如此 (直到您再次取消選取這個選項為止)。您在「程式碼」檢視和「快速標籤編輯器」中，所輸入的標籤或屬性也會轉換為指定的大小寫，就像您使用「插入」列所插入的標籤或屬性一樣。例如，如果您希望標籤名稱固定能轉換為小寫，請在「預設標籤大小寫」中指定小寫，然後選取「改寫大小寫」：標籤」選項。然後，當您開啟包含大寫標籤名稱的文件時，Dreamweaver 會將它們全都轉換為小寫。

    注意

    舊版的 HTML 允許大寫或小寫的標籤和屬性名稱，但 XHTML 對於標籤和屬性名稱則要求小寫。網路的趨勢為 XHTML，所以通常最好是使用小寫的標籤和屬性名稱。

    置中對齊可指定當您按一下「屬性」檢視窗中的「置中對齊」按鈕時，是否應該使用 divalign="center" 或 center 標籤將元素置中。

    注意

    這兩種置中的方法，在 HTML 4.01 規格中已正式不再支援；您應該使用 CSS 樣式來將文字置中。這兩種方法對於 XHTML 1.0 Transitional 規格而言，在技術上仍屬有效，但它們在 XHTML 1.0 Strict 規格中已經不再有效。


設定程式碼提示偏好設定選項

這個對話方塊可以讓您指定 Dreamweaver 如何且何時在「程式碼」檢視及「快速標籤編輯器」中顯示程式碼提示。

提示

即使已停用程式碼提示，您還是可以按下 Control+Spacebar，便能在「程式碼」檢視中顯示彈出式提示。

若要指定程式碼提示偏好設定：

  • 請指定下列其中一項選項：

    結束標籤可讓您指定 Dreamweaver 要以何種方式插入結束標籤。根據預設，Dreamweaver 會在您輸入字元 </ 之後，自動插入結束標籤。您可以變更這個預設行為，改成在輸入開啟標籤的結束角括號 (＞) 之後再插入結束標籤，或是乾脆不插入結束標籤。

    啟用程式碼提示可以在您於「程式碼」檢視中輸入程式碼時，能顯示程式碼提示。請拖曳「延遲」滑動軸，來設定在 Dreamweaver 顯示適當提示前的秒數。

    選單可以在輸入時，讓您明確地設定您希望顯示何種類型的程式碼提示。您可以使用所有或部份的選單。

相關主題

  • 使用程式碼提示
  • 在快速標籤編輯器中使用提示選單


設定改寫程式碼偏好設定選項

這個對話方塊可讓您指定在開啟文件、複製及貼上表單元素、以及利用 Dreamweaver 工具 (如「屬性」檢視窗) 輸入屬性值和 URL 時，Dreamweaver 如何以及是否修改程式碼的偏好設定。當您在「程式碼」檢視中編輯程式碼時，這些偏好設定沒有效果。

如果您停用改寫選項，Dreamweaver 會在「文件」視窗中對可能要改寫的 HTML 標籤，顯示無效的標記項目。

若要指定程式碼改寫偏好設定：

  • 請指定下列其中一項選項：

    修正不正確的巢狀標籤和未結束的標籤會改寫重疊的標籤。例如，<b><i>text</b></i> 會被改寫為 <b><i>text</i></b>。這個選項也會插入結束引號和結束括號 (如果有遺失的話)。

    當貼上時重新命名表單項目可確保您沒有重複的表單物件名稱。這個選項依預設值是啟動的。

    注意

    不像此偏好設定對話方塊中的其他選項，此選項在您開啟文件時並不會套用，只有在您複製並貼上表單元素時才會套用。

    移除多餘的結束標籤會刪除沒有對應開始標籤的結束標籤。

    當修改或是移除標籤時發出警告會顯示 Dreamweaver 嘗試更正技術上不正確的 HTML 摘要。這個摘要會註明問題的位置 (使用行號和欄號)，讓您可以找到更正的內容，並確保更正能如預期般顯示。

    永不改寫程式碼：在有副檔名的檔案中可讓您防止 Dreamweaver 改寫具有指定檔案名稱副檔名之檔案中的程式碼。這個選項對包含協力廠商標籤的檔案而言特別有用。

    使用 & 將屬性值中的 <、>、& 和 " 編碼可確保您使用 Dreamweaver 工具 (如「屬性」檢視窗) 來輸入或編輯的屬性值，只包含合法的字元。這個選項依預設值是啟動的。

    注意

    此選項和下列的選項，不適用於您在「程式碼」檢視中輸入的 URL。而且，它們也不會造成變更檔案中已經存在的程式碼。

    不要將特殊字元編碼可避免 Dreamweaver 將 URL 變更成只使用合法的字元。

    使用 &# 將 URL 中的特殊字元編碼可確保您在使用 Dreamweaver 工具 (如「屬性」檢視窗) 來輸入或編輯 URL 時，這些 URL 中只包含合法的字元。這個選項依預設值是啟動的。

    使用 % 將 URL 中的特殊字元編碼運作的方式，與前面的選項相同，但使用不同的方法來編碼特殊字元。這種編碼方法 (使用百分比符號) 可能會更相容於舊的瀏覽器，但可能較不適用於部份語言的字元。


設定程式碼色彩標示偏好設定選項

這個對話方塊可讓您指定 Dreamweaver 將顏色套用到程式碼時，所用方法的偏好設定。

若要設定特定標籤的色彩偏好設定，請在「標籤資料庫編輯器」中編輯標籤定義。如需詳細資訊，請參閱編輯資料庫、標籤和屬性。

若要指定程式碼色彩標示偏好設定：

  1. 請使用「預設背景」選項，來選取「程式碼」檢視和「程式碼」檢視窗的預設背景顏色。
  2. 在「程式碼色彩標示」偏好設定對話方塊中選取文件類型，再按一下「編輯頁面配色」。

    「編輯頁面配色」對話方塊便會出現。

  3. 選取項目並設定其文字顏色、背景顏色及 (如果需要的話) 樣式 (粗體、斜體或底線)。

    在「預覽」窗格中的範本程式碼會變更，以便符合新的顏色和樣式。

  4. 完成時按一下「確定」。

相關主題

  • 自訂樣版的程式碼色彩標示偏好設定


設定驗證工具偏好設定選項

您可以在 Dreamweaver 中使用「驗證工具」，快速找出程式碼中的標籤或語法錯誤 (請參閱驗證標籤)。您可以指定「驗證工具」應該檢查的標籤架構語言、「驗證工具」應該檢查的特定問題，以及「驗證工具」應該報告的錯誤類型。

注意

在驗證明確指定 doctype 的文件時，「驗證工具」的偏好設定會被忽略。

若要指定「驗證工具」偏好設定：

  1. 請選取要加以驗證的語言。

    您無法選取相同語言的多個版本；例如，如果您選取 HTML 4.0，便無法也選取 HTML 3.2 或 HTML 2.0。請選取您希望驗證的最早版本；例如，如果文件中包含有效的 HTML 2.0 程式碼，它也將會是有效的 HTML 4.0 程式碼。

  2. 按一下「選項」。

    「驗證工具選項」對話方塊便會出現。

  3. 請選取「驗證工具」報表中，您希望包含之錯誤和警告類型的「顯示」選項。
  4. 選取「驗證工具」應該檢查的項目：

    文字引號指出 Dreamweaver 應該在每次於文件的文字中使用引號時警告您；在 HTML 文件的文字中，您應該使用 &quot; 實體而不是引號。

    文字實體指出 Dreamweaver 應該建議將某些字元 (如 & 符號 (&)、小於 (<) 和大於 (>))，變更成它們的 HTML 實體等同項。

  5. 按一下「確定」來關閉「驗證工具選項」對話方塊。


設定「新增標籤」對話方塊選項

這個對話方塊是用來將新的標籤加入標籤資料庫中。

注意

如需關於如何匯入標籤的詳細資訊，請參閱匯入自訂標籤到 Dreamweaver。

若要指定「新增標籤」選項：

  1. 在「標籤資料庫」彈出式選單中，請選取標籤資料庫。
  2. 在「標籤名稱」文字方塊中，請輸入新標籤的名稱。

    若要新增一個以上的標籤，請輸入各標籤的名稱。使用逗點和空格來分隔標籤名稱 (例如：cfgraph, cfgraphdata)。

  3. 如果新標籤具有對應的結束標籤 (</...>)，請選取「使用對稱結束標籤」。


設定「新增屬性」對話方塊選項

這個對話方塊是用來將新的屬性加入標籤資料庫中的標籤。

若要指定「新增屬性」選項：

  1. 在「標籤資料庫」彈出式選單中，請選取標籤資料庫。
  2. 在「標籤」彈出式選單中，請選取標籤。
  3. 在「屬性名稱」文字方塊中，請輸入新屬性的名稱。

    若要新增一個以上的屬性，請輸入各屬性的名稱。使用逗點和空格來分隔屬性名稱 (例如：width, height)。


設定 JSP 標籤資料庫「從檔案匯入」對話方塊選項

這個對話方塊是用來將 JSP 標籤資料庫，從檔案匯入 Dreamweaver 中。

若要指定匯入選項：

  1. 按一下「瀏覽」按鈕或是輸入檔案名稱，來指定包含標籤資料庫的 .tld、.jar 或 .zip 檔。
  2. 輸入會識別標籤資料庫的 URI。

    URI (Uniform Resource Identifier) 通常由維護標籤資料庫的組織之 URL 所組成。這個 URL 並非用來檢視組織的網站；而是當做標籤資料庫的唯一識別。

  3. 輸入要與標籤配合使用的前置詞。

    注意

    前置詞是用來將程式碼中的標籤，識別為特殊標籤資料庫的一部份。部份的標籤資料庫並未使用前置詞。


設定 JSP 標籤資料庫「從伺服器匯入」對話方塊選項

這個對話方塊是用來將 JSP 標籤資料庫，從 JSP 伺服器匯入 Dreamweaver 中。

若要指定匯入選項：

  1. 選取標籤資料庫。
  2. 輸入會識別標籤資料庫的 URI。

    URI (Uniform Resource Identifier) 通常由維護標籤資料庫的組織之 URL 所組成。這個 URL 並非用來檢視組織的網站；而是當做標籤資料庫的唯一識別。


設定「從資料夾匯入 JRun 伺服器標籤」對話方塊選項

這個對話方塊是用來將 JRun 伺服器標籤匯入 Dreamweaver 中。

若要指定匯入選項：

  1. 指定包含 JRun 標籤的資料夾。
  2. 輸入會識別標籤資料庫的 URI。

    URI (Uniform Resource Identifier) 通常由維護標籤資料庫的組織之 URL 所組成。這個 URL 並非用來檢視組織的網站；而是當做標籤資料庫的唯一識別。

  3. 輸入要與標籤配合使用的前置詞。

    注意

    前置詞是用來將程式碼中的標籤，識別為特殊標籤資料庫的一部份。部份的標籤資料庫並未使用前置詞。


設定「檔案類型/編輯器」偏好設定選項

這個對話方塊能讓您指定每種檔案類型要使用哪種編輯器的偏好設定。

若要指定檔案類型/編輯器偏好設定：

  1. 請指定檔案名稱副檔名，以便在「程式碼」檢視中自動開啟。
  2. (僅適用於 Macintosh) 若要使用非 BBEdit 的 HTML 編輯器，請取消選取「啟動 BBEdit 整合」選項。若要使用 BBEdit，則保持選取「啟動 BBEdit 整合」，並略過這些其餘的步驟。
  3. 按一下「外部程式碼編輯器」文字方塊旁的「瀏覽」按鈕，然後再選取文字編輯器。
  4. 在「重新載入修改的檔案」選項中，請指定當 Dreamweaver 偵測到於 Dreamweaver 中開啟的文件，在外部受到變更時應該要執行的動作。
  5. 在「啟動時儲存」選項中，請指定 Dreamweaver 在啟動編輯器之前，應該永遠儲存目前的文件、永不儲存文件，或是在您每次啟動外部編輯器時顯示提示，詢問您是否要儲存文件。
  6. 指定各種媒體檔案類型的編輯器。如需詳細資訊，請參閱設定外部影像編輯器偏好設定。

相關主題

  • 依預設值在程式碼檢視中開啟檔案
  • 啟動媒體檔案的外部編輯器
  • 使用整合的 HTML 編輯器


設定「程式碼」檢視窗選項

「程式碼」檢視窗是用來讓您可以在分隔的程式碼撰寫視窗中作業。「程式碼」檢視窗作業時就像「程式碼」檢視，您可以將它視為目前文件之可分開的「程式碼」檢視。

若要使用「程式碼」檢視窗選項，請執行下列任何作業：

  • 若要使用「檢視選項」按鈕，請參閱設定程式碼檢視選項。
  • 若要使用「程式碼導覽」按鈕，請參閱跳到 JavaScript 或 VBScript 函式。
  • 使用「參考」按鈕開啟「參考」面板。如需詳細資訊，請參閱使用語言參考資料。
  • 使用「重新整理設計檢視」按鈕更新「設計」檢視中的文件，以反映您對程式碼所做的任何變更。在執行某些動作 (如儲存檔案或按一下這個按鈕) 之前，您在程式碼中所作的變更不會自動出現在「設計」檢視中。
  • 使用「在瀏覽器中預覽/除錯」按鈕在瀏覽器中預覽文件或對文件加以除錯。
  • 使用「檔案管理」以上傳或下載檔案。
  • 若要使用視窗左邊的「編碼」工具列，請參閱使用「編碼」工具列快速插入程式碼。

相關主題

  • 設定程式碼格式偏好設定
  • 設定程式碼提示偏好設定
  • 設定程式碼色彩標示偏好設定


在 Dreamweaver 中撰寫程式碼

Macromedia Dreamweaver 8 提供了針對任何類型 Web 開發而設計的程式碼撰寫環境，從撰寫簡單的 HTML 網頁到設計、測試和部署複雜的網路應用程式，功能非常完整。

注意

如需關於從 Macromedia HomeSite 移轉到 Dreamweaver 的資訊，請參閱 Dreamweaver 支援中心，網址為 www.macromedia.com/go/migrate_from_homesite。

本章包含下列主題：

關於在 Dreamweaver 中撰寫程式碼

撰寫和編輯程式碼

搜尋和取代標籤及屬性

快速變更程式碼選取範圍

使用語言參考資料

列印程式碼

相關主題

  • 設定程式碼撰寫環境
  • 程式碼最佳化和除錯
  • 在設計檢視中編輯程式碼
  • 比較檔案差異


關於在 Dreamweaver 中撰寫程式碼

Dreamweaver 中的程式碼撰寫環境，可讓您撰寫、編輯和測試您頁面中的程式碼 (使用各種語言)。Dreamweaver 不會變更您手寫的程式碼，除非您啟用特定的選項來重新撰寫某些種類的不正確程式碼。

本節包含下列主題：

  • 支援的語言
  • 關於修正不正確的標記
  • Dreamweaver 中的自動程式碼修改
  • 關於 Dreamweaver
  • 伺服器端包含
  • 規則運算式
  • 關於伺服器行為程式碼

相關主題

  • 檢視程式碼


支援的語言

除了文字編輯功能外，Dreamweaver 還提供了各種的功能 (如程式碼提示)，可以協助您使用某些語言來撰寫程式碼。這些語言包括：

  • HTML
  • XHTML
  • CSS
  • JavaScript
  • ColdFusion 標記語言 (CFML)
  • Visual Basic (適用於 ASP 和 ASP.NET)
  • C# (適用於 ASP.NET)
  • JSP
  • PHP

Dreamweaver 的語言特定程式碼功能並不支援某些語言 (如 Perl)；您雖然可以使用 Dreamweaver 建立和編輯 Perl 檔案，但是像程式碼提示等功能便會不適用於該語言。

相關主題

  • Dreamweaver 中的自動程式碼修改
  • 使用程式碼提示


關於修正不正確的標記

如果您的文件中包含不正確的程式碼，Dreamweaver 便會在「設計」檢視中顯示該程式碼，並在「程式碼」檢視中選擇性地將它標示出來。如果您在任一種檢視中選取該程式碼，「屬性」檢視窗便會顯示不正確的原因和修正方法的相關資訊。

您可以在 Dreamweaver 中指定偏好設定，以便在您開啟文件時能自動重新撰寫各種不正確的程式碼。

相關主題

  • Dreamweaver 中的自動程式碼修改
  • 設定改寫程式碼偏好設定


Dreamweaver 中的自動程式碼修改

您可以設定選項，以指示 Dreamweaver 按照您所指定的準則來自動清除手寫的程式碼。不過，Dreamweaver 絕不會重新撰寫您的程式碼，除非您啟用了程式碼重新撰寫選項，或是您所執行的動作變更了程式碼。例如，除非您使用「套用原始碼格式」命令，否則 Dreamweaver 是不會更改您保留的空白，也不會變更屬性的大小寫。

預設會啟用一些程式碼改寫選項。如需關於如何停用這些選項，或啟用其他選項的資訊，請參閱設定改寫程式碼偏好設定。

Dreamweaver 中的「交互 HTML」功能，可讓您在文字 HTML 編輯器和 Dreamweaver 之間來回移動您的文件，而不太會 (或根本不會) 影響文件原始 HTML 原始碼的內容和結構。這些功能表包括下列項目：

  • Dreamweaver 可以讓您啟動協力廠商的文字編輯器，來編輯目前的文件。如需詳細資訊，請參閱將外部 HTML 編輯器與 Dreamweaver 配合使用。
  • 依預設，除非您啟用程式碼改寫選項，否則即便在其他 HTML 編輯器所建立或編輯的程式碼是無效的，Dreamweaver 都不會該程式碼中進行變更。
  • Dreamweaver 不會變更它無法辨識的標籤 (包括 XML 標籤在內)，因為它沒有用來判斷這些標籤的準則。如果無法辨識的標籤與其他標籤發生重疊 (例如，<MyNewTag><em>text
    </MyNewTag></em>)    ，Dreamweaver 會將它標記為錯誤，但不會改寫程式碼。
  • 或者，您也可以設定 Dreamweaver，讓它在「程式碼」檢視中以黃色標示出無效的程式碼。當您選取這種被標示的區段時，「屬性」檢視窗便會顯示如何修正這項錯誤的資訊。

相關主題

  • 設定程式碼撰寫偏好設定
  • 關於伺服器行為程式碼


關於 Dreamweaver

Dreamweaver 會以符合多數 XHTML 需求的方式產生 XHTML 程式碼，並且清除現有的 XHTML 程式碼。對於其餘少數的 XHTML 需求，Dreamweaver 也為您提供了所需的工具。

注意

本節中描述的一些需求也是各種不同版本的 HTML 所需要的。

下表即描述 Dreamweaver 能自動符合的 XHTML 需求。

XHTML 需求

Dreamweaver 為滿足此需求所執行的動作

文件中的根元素前面必須要有 DOCTYPE 宣告，而且這個宣告必須參考三種 XHTML 的「文件型別定義」(DTD) 檔案 (嚴格、過渡或頁框組) 中的其中一種。

新增 XHTML DOCTYPE 到 XHTML 文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或者，如果 XHTML 文件擁有頁框組：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

文件的根元素必須為 html，而且這個 html 元素必須指定 XHTML 名稱空間。

新增 namespace 屬性到 html 元素，如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">

標準的文件必須具有 head、title 和 body 等結構元素。頁框組文件必須具有 head、title 和 frameset 等結構元素。

在標準的文件中，包括 head、title 和 body 等元素。在頁框組文件中，包括 head、title 和 frameset 等元素。

文件中的所有元素都必須以適當的巢狀結構處理：

<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>

產生正確的巢狀結構程式碼，並且在清除 XHTML 時，更正程式碼中不是由 Dreamweaver 產生的巢狀結構。

所有元素和屬性名稱都必須小寫。

在產生的 XHTML 程式碼中 (以及在清除 XHTML 時)，強制 HTML 元素和屬性名稱成為小寫，不論標籤和屬性的大小寫偏好設定為何。

每個元素都必須具有結束標籤，除非它在 DTD 中宣告為 EMPTY。

在產生的程式碼中 (以及在清理 XHTML 時) 插入結束標籤。

空元素必須具有結束標籤，否則開啟標籤必須以 /> 結束。例如，<br> 是無效的，正確的格式應該是 <br></br> 或 <br/>。下列都是空元素：area、base、basefont、br、col、frame、hr、img、input、isindex、link、meta 和 param。

為了能與不具備 XML 能力的瀏覽器回溯相容，在 /> 前面必須要有一個空格 (例如，<br /> 而不是 <br/>)。

在產生的程式碼中 (以及在清理 XHTML 時)，在空標籤結尾斜線前面插入有空格的空元素。

屬性不能最小化，例如，<td nowrap> 是無效的，正確的格式應該是 <td nowrap="nowrap">。

這會影響下列屬性：checked、compact、declare、defer、disabled、ismap、multiple、noresize、noshade、nowrap、readonly 以及 selected。

在產生的程式碼中 (以及在清理 XHTML 時) 插入屬性-值配對。

注意：如果 HTML 瀏覽器不支援 HTML 4，可能就無法解譯以完整格式出現的布林屬性。

所有的屬性值都必須以引號括住。

在產生的程式碼以及在清理 XHTML 時，用引號括住屬性值。

下列元素必須具有 id 屬性，以及 name 屬性：a、applet、form、frame、iframe、img 以及 map。例如，<a name="intro">Introduction</a> 是無效的，正確格式應該是

<a id="intro">Introduction</a> 或 <a id="section1" name="intro">
Introduction</a>。

在 Dreamweaver 產生的程式碼中及清理 XHTML 時，只要 name 屬性是由「屬性」檢視窗所設定的，就將 name 和 id 屬性設定為相同的值。

對於具有列舉類型值的屬性，這些值必須是小寫。

列舉類型值是來自允許值之指定清單的值，例如，align 屬性便擁有下列的允許值：center (置中對齊)、justify (齊行)、left (靠左對齊) 以及 right (靠右對齊)。

在產生的程式碼中 (以及在清理 XHTML 時)，強制列舉型別的值成為小寫。

所有 script 和 style 元素都必須有 type 屬性。

(script 元素的 type 屬性，從 HTML 4 開始已成為必要項，因為不再支援 language 屬性)。

在產生的程式碼中以及在清理 XHTML 時，設定 script 元素的 type 和 language 屬性，以及 style 元素中的 type 屬性。

所有的 img 和 area 元素都必須具有 alt 屬性。

在產生的程式碼中以及在清理 XHTML 時，請設定這些屬性，並且報告缺少的 alt 屬性。

相關主題

  • 使頁面與 XHTML 相容


伺服器端包含

伺服器端包含是在瀏覽器從伺服器要求您的文件時，伺服器併入您文件中的檔案。

當瀏覽者的瀏覽器要求具有包含指令的文件時，您的伺服器便會處理包含指令，並且建立一份新文件，其中會以包含檔案的內容取代包含指令。接著伺服器便會將此新文件，傳送到瀏覽者的瀏覽器中。但是，當您在瀏覽器中直接開啟本機文件時，沒有伺服器可以處理這份文件中的包含指令，所以瀏覽器會開啟文件但是不處理這些指令，而且原本應該包含的檔案，也不會出現在瀏覽器中。因此，如果不使用 Dreamweaver，就不太容易看到在您將本機檔案放到伺服器上後，呈現給瀏覽者的外觀。

使用 Dreamweaver 的話，不論是在「設計」檢視或是在瀏覽器中預覽時，您都可以預覽文件放到伺服器上之後的外觀。

將伺服器端包含置於文件中，只是插入外部檔案的參考；不是在目前文件中插入指定檔案的內容。Dreamweaver 會在「設計」檢視中顯示外部檔案的內容，讓設計網頁變得更方便。

您不能直接在文件中編輯包含檔案。若要編輯伺服器端包含的內容，則必須直接編輯您正在包含的檔案。請注意，對外部檔案的任何變更，會自動反映到包含它的每份文件。

伺服器端包含有兩種類型：「虛擬」和「檔案」。請選取下列適合您所使用之網站伺服器類型的項目：

  • 如果您的伺服器是 Apache 網站伺服器，請選取「虛擬」。在 Apache 中，「虛擬」可適用於所有狀況，而「檔案」僅能適用某些狀況。
  • 如果您的伺服器是 Microsoft Internet Information Server (IIS)，請選取「檔案」(「虛擬」只在某些特定情況下能適用於 IIS)。

    注意

    不幸的是，IIS 不允許在資料夾階層中目前資料夾以上的資料夾中包含檔案，除非伺服器上已安裝特殊軟體。如果您需要包含 IIS 伺服器上資料夾階層中較上層資料夾的檔案，請向系統管理員洽詢是否已安裝必要軟體。
  • 對於其他種類的伺服器，或是您不知道使用的是何種伺服器時，請向系統管理員洽詢應使用何種選項。

有些伺服器是設定成檢查所有檔案，以便查看它們是否含有伺服器端包含；其他伺服器則是設定成只檢查具有特定副檔名的檔案，如 .shtml、.shtm 或 .inc。如果伺服器端包含無法運作，請與系統管理員聯絡，詢問您是否需要在使用包含的檔案名稱中，使用特殊的副檔名 (例如，如果檔案名為 canoe.html，您或許必須將它重新命名為 canoe.shtml)。如果您想要讓檔案保留 .html 或 .htm 副檔名，請要求系統管理員將伺服器針對伺服器端包含設定成檢查所有檔案 (而不僅僅是某些特定副檔名)。不過，剖析檔案是否有伺服器端包含，會多花一點時間，所以經過伺服器剖析的檔案，會比其他檔案來得慢一些；因此，有些系統管理員不會提供剖析所有檔案的選項。

相關主題

  • 插入伺服器端包含
  • 編輯伺服器端包含的內容


規則運算式

規則運算式是描述文字中字元組合的模式。在程式碼搜尋中使用它們時，有助於描述一些像是「以 "var" 開頭的行」和「含有數字的屬性值」等的概念。如需關於搜尋的詳細資訊，請參閱搜尋和取代標籤及屬性。

下表所列為規則運算式中的一些特殊字元、它們的意義以及使用方法的範例。若要搜尋表格中含有特殊字元之一的文字，請在特殊字元前面加上反斜線，讓它成為「逸出字元」。例如，假設要在片語 some conditions apply* 中搜尋實際的星號，搜尋模式應該像是這樣：apply\*。如果您不讓星號成為逸出字元，您將會找到所有「apply」(以及任何「appl」、「applyy」和「applyyy」) 出現的地方，而不只有後面接著星號的「apply」。

字元 | 符合 | 範例
^ | 輸入或行的開頭。 | ^T 會找出「This good earth」中符合的「T」，但是在「Uncle Tom's Cabin」中則找不到符合
$ | 輸入或行的結尾。 | h$ 會找出「teach」中符合的「h」，但是在「teacher」中則找不到符合
* | 前面的字元出現 0 次以上。 | um* 會在「rum」中找到符合的「um」、在「yummy」中找到符合的「umm」，以及在「huge」中找到符合的「u」
+ | 前面的字元出現 1 次以上。 | um+ 會在「rum」中找到符合的「um」、在「yummy」中找到符合的「umm」，但是在「huge」中找不到任何符合
? | 前面的字元最多出現一次 (表示這個字元是選擇性的)。 | st?on 會在「Johnson」中找到符合的「son」、在「Johnston」中找到符合的「ston」，但是在「Appleton」或「tension」中找不到任何符合
. | 除了新行以外的任何單一字元。 | .an 會在片語「bran muffins can be tasty」中找到符合的「ran」和「can」
x|y | 非 x 即 y。 | FF0000|0000FF 會在 bgcolor='#FF0000' 中找到符合的「FF0000」並且在 font color='#0000FF' 中找到符合的「0000FF」
{n} | 前面的字元必須剛好出現 n 次。 | o{2} 會在「loom」中找到符合的「oo」、在「mooooo」中找到前面兩個「o」，但是在「money」中則找不到任何符合
{n,m} | 前面的字元至少出現 n 次，最多出現 m 次。 | F{2,4} 會在「#FF0000」中找到符合的「FF」，以及在「#FFFFFF」中找到前面四個「F」
[abc] | 方括弧內的任何一個字元。用連字符號可以指定字元的範圍 (例如，[a-f] 就相當於 [abcdef])。 | [e-g] 會在「bed」中找到符合的「e」、在「folly」中找到符合的「f」，以及在「guard」中找到符合的「g」
[^abc] | 方括弧內未包含的任何字元。用連字符號可以指定字元的範圍 (例如，[^a-f] 就相當於 [^abcdef])。 | [^aeiou] 一開始會在「orange」中找到符合的「r」，在「book」中找到符合的「b」，以及在「eek!」中找到符合的「k」
\b | 單字界限 (例如空格或換行字元)。 | \bb 會在「book」中找到符合的「b」，但是在「goober」或「snob」中則找不到任何符合
\B | 這是單字界限外的任何項目。 | \Bb 會在「goober」中找到符合的「b」，但是在「book」中則找不到任何符合
\d | 任何數字字元。相當於 [0-9]。 | \d 會在「C3PO」中找到符合的「3」，以及在「apartment 2G」中找到「2」
\D | 任何非數字字元。相當於 [^0-9]。 | \D 會在「900S」中找到符合的「S」，並且在「Q45」中找到符合的「Q」
\f | 換頁字元。 |
\n | 換行符號。 |
\r | 換行字元。 |
\s | 任何單一的空白字元，包括空格、Tab 字元、換頁字元或換行符號。 | \sbook 會在「blue book」中找到符合的「book」，但是在「notebook」中則找不到任何符合
\S | 任何單一的非空白字元。 | \Sbook 會在「notebook」中找到符合的「book」，但是在「blue book」中則找不到任何符合
\t | Tab 字元。 |
\w | 任何英數字元，包括底線。相當於 [A-Za-z0-9_]。 | b\w* 會在「the barking dog」中找到符合的「barking」，以及在「the big black dog」中找到符合的「big」和「black」
\W | 任何非英數字元。相當於 [^A-Za-z0-9_]。 | \W 會在「Jake & Mattie」中找到符合的「&」，以及在「100%」中找到符合的「%」
Control + Enter 或 Shift + Enter (Windows)；或者，Control + Return 或 Shift + Return 或 Command + Return (Macintosh) | Return 字元。進行這種搜尋時，如果不使用規則運算式，請取消選取「忽略空白差異」選項。請注意，這樣會符合特定的字元，而不是一般的斷行符號；例如，它不符合 <br> 標籤或 <p> 標籤。Return 字元在「設計」檢視中會顯示為空白，而不是斷行。 |

請使用小括號，將規則運算式中稍後要參考的群組分開。接著，再於「取代為」欄位中使用 $1、$2、$3 等等，來參考第一個、第二個、第三個等等要放在小括號內的群組。

注意

在「尋找」欄位中，若要參考之前在規則運算式中放在小括號內的群組，請使用 \1、\2、\3 等等，而不是 $1、$2、$3。

例如，搜尋 (\d+)\/(\d+)\/(\d+) 並且將它取代為 $2/$1/$3 時，會在以反斜線分隔的日期中，將日和月對調，藉以在美式日期與歐式日期間轉換。

相關主題

  • 搜尋標籤、屬性或是特定標籤中所含的文字
  • 儲存搜尋模式


關於伺服器行為程式碼

當您開發動態網頁，並且從「伺服器行為」面板中選取某個伺服器行為時，Dreamweaver 便會將一個或多個程式碼區塊插入網頁，讓伺服器行為能運作。

如果您手動變更程式碼區塊中的程式碼，便無法再使用像是「繫結」和「伺服器行為」面板來編輯伺服器行為。Dreamweaver 會在頁面程式碼中尋找特定的模式，以便偵測伺服器行為，並且將它們顯示在「伺服器行為」面板中。如果您以任何方式變更程式碼區塊的程式碼，Dreamweaver 就無法再偵測這個伺服器行為，亦不會將它顯示在「伺服器行為」面板中。不過，這個伺服器行為仍然存在於頁面中，而且您可以在 Dreamweaver 的程式碼撰寫環境中編輯它。

相關主題

  • Dreamweaver 中的自動程式碼修改
  • 最佳化視覺開發的工作區
  • 顯示資料庫記錄


撰寫和編輯程式碼

Dreamweaver 提供了幾種功能，可協助您更有效率地撰寫和編輯程式碼。

本節包含下列主題：

  • 使用程式碼提示
  • 使用程式碼片段
  • 使用「編碼」工具列快速插入程式碼
  • 使用插入列快速插入程式碼
  • 使用標籤選擇程式插入標籤
  • 使用標籤編輯器來編輯標籤
  • 收合程式碼
  • 縮排程式碼區塊
  • 複製並貼上程式碼
  • 插入 HTML 註解
  • 跳到 JavaScript 或 VBScript 函式


使用程式碼提示

程式碼提示功能可協助您快速插入和編輯程式碼，沒有任何錯誤。當您在「程式碼」檢視中輸入一些字元，如標籤的第一個字母或是 CSS 屬性名稱，這時會出現一份清單，建議一些可以幫助您完成輸入的選項。您可以使用這項功能來插入或編輯程式碼，或是只查看標籤的可用屬性、函式的可用參數，或物件的可用方法。

多種的程式碼都具有程式碼提示。當您輸入特殊字元來指示程式碼片段的開頭時，便會出現一份適當的項目清單；例如，若要顯示 HTML 標籤名稱的程式碼提示，請輸入開頭角括弧 (<)。

提示

若要取得最佳效果，特別是在對函式和物件使用程式碼提示時，請將「程式碼提示」偏好設定對話方塊中的「延遲」選項，設定成 0 秒的延遲。如需詳細資訊，請參閱設定程式碼提示偏好設定。

當您按下 Backspace (Windows) 或 Delete (Macintosh) 時，程式碼提示便會消失。

若要顯示程式碼提示選單 (如果沒有自動顯示的話)：

  • 按 Control + 空格鍵 (Windows) 或 Command + 空格鍵 (Macintosh)。

若要使用程式碼提示，在「程式碼」檢視中插入標記或其他程式碼：

  1. 輸入程式碼片段的起端。例如，若要插入標籤，請輸入開頭角括弧 (<)；若要插入屬性，請將插入點放在標籤名稱後方，再按下 Spacebar 鍵。

    這時會出現一份項目清單 (如標籤名稱或屬性名稱)。

    提示

    若要隨時關閉清單，請按 Escape 鍵。
  2. 請使用捲軸或「向上鍵」和「向下鍵」來捲動以瀏覽清單。
  3. 若要從清單中插入項目，請對它連按兩下，或是先選取它再按 Enter (Windows) 或 Return (Macintosh)。

    提示

    如果最近建立的 CSS 樣式並未出現在 CSS 樣式的程式碼提示清單中，請從程式碼提示清單中選取「重新整理樣式清單」。如果顯示「設計」檢視，在您選取「重新整理樣式清單」後，可能會在「設計」檢視中暫時出現一些不正確的程式碼；若要從「設計」檢視中移除不正確的程式碼，在您完成插入樣式後，請按 F5 鍵再次重新整理「設計」檢視。

若要插入結束標籤：

  • 鍵入 </ (斜線)。

    根據預設，Dreamweaver 會判斷需要結束哪個標籤，並為您結束該標籤。您可以變更這個預設行為，讓 Dreamweaver 在您輸入開啟標籤的結尾角括號 (＞) 之後即插入結束標籤，或者乾脆不插入結束標籤。選取「編輯＞偏好設定＞程式碼提示」，再選取其中一個「結束標籤」選項。

若要使用程式碼提示來編輯標籤，請執行下列任一項作業：

  • 若要以不同的屬性來取代某個屬性，請先刪除該屬性及其值，然後再按照前一個程序中描述的方式，新增新的屬性和其值。
  • 若要變更某個值，請先刪除該值，然後再按照前一個程序中描述的方式來新增新的值。

相關主題

  • 設定程式碼提示偏好設定


使用程式碼片段

程式碼片段可以讓您儲存內容以便快速重複使用。您可以建立和插入 HTML、JavaScript、CFML、ASP、JSP 等的片段。Dreamweaver 也包含一些預先定義的片段，您可以用來做為起始點。

本節描述如何插入、建立、編輯或刪除程式碼片段。它也描述如何管理您的程式碼片段，並且與您小組中的其他成員共享這些片段。

注意

在 Dreamweaver 8 中，已經將含有 <font> 標籤以及其他不支援元素和屬性的片段移到「片段」面板的「Legacy」資料夾中。

若要插入程式碼片段：

  1. 將插入點放在您想要插入程式碼片段的地方，或選取圍繞著片段的程式碼。
  2. 在「片段」面板中 (「視窗＞片段」)，請按兩下該片段。

    以滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)，按「程式碼」檢視中的標籤或是「設計」檢視中的物件，再從彈出式選單中選取「編輯標籤」。

若要建立程式碼片段：

  1. 在「片段」面板中，按一下面板底部的新增片段圖示。

    「片段」對話方塊便會出現。

  2. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定「片段」對話方塊選項。

若要編輯程式碼片段：

  • 在「片段」面板中，請選取片段並且按一下面板底部的「編輯片段」按鈕。 這是描述功能的圖片。

若要刪除程式碼片段：

  • 在「片段」面板中，請選取片段並且按一下面板底部的「移除」按鈕。 這是描述功能的圖片。

若要建立程式碼片段資料夾並且管理程式碼片段：

  1. 在「片段」面板中，請按一下面板底部的「新增片段資料夾」按鈕。
  2. 視需要將片段拖曳到新資料夾或是其他資料夾中。

若要新增或編輯片段的鍵盤快速鍵：

  1. 在「片段」面板中，用滑鼠右鍵按一下 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「編輯鍵盤快速鍵」。

    「快速鍵盤編輯器」便會出現。

  2. 在「命令」彈出式選單中，選取「片段」。

    片段清單便會出現。

  3. 選取片段並指定快速鍵。

    如需詳細資訊，請參閱自訂鍵盤快速鍵。

若要與小組的其他成員共用片段：

  1. 在 Dreamweaver 應用程式資料夾中，請尋找對應到您要在 Configuration/Snippets 資料夾中共用之片段的檔案。
  2. 將片段檔案複製到您電腦或網路上的共用資料夾。
  3. 告訴其他小組成員，將這個片段檔案複製到他們的 Configuration/Snippets 資料夾中。


使用「編碼」工具列快速插入程式碼

您可以使用「編碼」工具列快速地將程式碼新增到您的頁面。

若要快速插入程式碼：

  1. 請確定您是在「程式碼」檢視中 (「檢視＞程式碼」)。
  2. 將插入點放在程式碼中，或者選取程式碼區塊。
  3. 按一下「編碼」工具列上的按鈕，或從工具列的彈出式選單中選取項目。

若要瞭解每個按鈕的用途，請將滑鼠指標移到按鈕的上面，直到出現工具提示為止。「編碼」工具列預設會顯示下列按鈕。

開啟文件會列出已開啟的文件。當您選取其中一個文件時，該文件就會顯示在「文件」視窗中。

收合完整標籤會將一組開啟和結束標籤之間的內容 (例如 <table> 和 </table> 之間的內容) 收合起來。您必須先將插入點放在開啟或結束標籤中，然後再按「收合完整標籤」按鈕來收合標籤。

提示

您也可以在開啟或結束標籤中放置插入點，並按住 Alt 鍵 (Windows) 或 Option 鍵 (Macintosh)，再按一下「收合完整標籤」按鈕，以收合完整標籤之外的程式碼。此外，按住 Control 鍵，再按一下這個按鈕，「智慧收合」功能便會停用，如此，Dreamweaver 就不會調整完整標籤之外已收合的內容。如需詳細資訊，請參閱關於收合程式碼。

收合選取範圍將會收合選取的程式碼。

提示

您也可以按住 Alt 鍵 (Windows) 或 Option 鍵 (Macintosh)，再按一下「收合選取範圍」按鈕，以收合選取範圍之外的程式碼。此外，按住 Control 鍵，再按一下這個按鈕，「智慧收合」功能便會停用，所以這時您不必在 Dreamweaver 中進行任何操作，就能收合已經選取的確實內容。如需詳細資訊，請參閱關於收合程式碼。

全部展開會還原所有已收合的程式碼。

選取上一層標籤會選取插入點所在位置的內容及其周圍的開啟和結束標籤。如果您持續按「選取上一層標籤」按鈕，而且標籤都是成對的，Dreamweaver 最後將會選取最外層的 html 和 /html 標籤。

平衡大括弧會選取插入點所在位置那一行的內容及其周圍的小括弧、大括弧或方括弧。如果您持續按這個按鈕，而且周圍的符號都是成對的，Dreamweaver 最後將會選取文件中最外層的大括弧、小括弧或方括弧。

顯示行號可讓您隱藏或顯示每一行程式碼開頭的編號。

反白標示無效的程式碼會以黃色來標示無效的程式碼。

套用註解可讓您用註解標籤將選取的程式碼包圍起來，或是開啟新的註解標籤。

  • 套用 HTML 註解時，選取的程式碼會被 <!-- 和 --!> 包圍在中間；而如果沒有選取程式碼的話，就會開啟新的標籤。
  • 套用 // 註解時，會在選取的 CSS 或 JavaScript 程式碼的每一行開頭插入 //；而如果沒有選取程式碼的話，便會插入單一 // 標籤。
  • 套用 /* */ 註解時，選取的 CSS 或 JavaScript 程式碼會被 /* 和 */ 包圍在中間。
  • 套用 ' 註解適用於 Visual Basic 程式碼，它會在每一行 Visual Basic Script 的開頭插入一個單引號；而如果沒有選取程式碼的話，便在插入點的位置插入一個單引號。
  • 當您處理 ASP、ASP.NET、JSP、PHP 或 Macromedia ColdFusion 檔案時，如果選取「套用伺服器註解」選項，Dreamweaver 將會自動偵測正確的註解標籤，並將它套用到選取範圍。

移除註解會移除選取的程式碼之註解標籤。如果選取範圍包含巢狀註解，則只會移除外層的註解標籤。

用標籤圍繞將會使用您在「快速標籤編輯器」中選定的標籤來包圍選取的程式碼。

最近使用的片段可以讓您從「片段」面板中選取最近用過的程式碼片段，同時插入該片段。如需詳細資訊，請參閱使用程式碼片段。

縮排程式碼會將選取範圍向右移。

凸排程式碼會將選取範圍向左移。

格式原始碼會對選取的程式碼套用先前指定的程式碼格式，而如果沒有選取程式碼，便會套用於整個頁面。您也可以從「格式原始碼」按鈕上選取「程式碼格式設定」，或是選取「編輯標籤資料庫」來編輯標籤資料庫，以快速地設定程式碼格式化偏好設定。

「編碼」工具列上的可用按鈕數目會隨著「程式碼」檢視在「文件」視窗中的大小不同而有所變化。如果您想看到所有可用的按鈕，可以調整「程式碼」檢視視窗的大小，或按一下「編碼」工具列底部的展開箭頭。

您也可以編輯「編碼」工具列來顯示更多按鈕 (例如「文字換行」、「隱藏字元」和「自動縮排」)，或隱藏不想用的按鈕。但是若要這麼做，您必須編輯用來產生工具列的 XML 檔案。如需詳細資訊，請參閱「擴充 Dreamweaver 功能」。

注意

檢視隱藏字元的選項並非「編碼」工具列上的預設按鈕，但是您也可以從「檢視」選單中取用這個按鈕 (「檢視＞程式碼檢視選項＞隱藏字元」)。

相關主題

  • 編碼工具列
  • 顯示工具列
  • 驗證標籤和大括弧是否成對


使用插入列快速插入程式碼

您可以使用「插入」列快速地將程式碼新增到您的頁面。

若要快速插入程式碼：

  1. 將插入點放在程式碼中。
  2. 在「插入」列中選取適當的類別。
  3. 按一下「插入」列中的按鈕，或從「插入」列的彈出式選單中選取項目。

    當您按一下圖示時，程式碼就會立即出現在您的頁面中，或者會出現一個對話方塊，要求更多資訊來完成程式碼。

若要了解每個按鈕的用途，請將滑鼠游標指向該按鈕，再等候工具提示出現。視目前的文件類型而定，在「插入」列中可用的按鈕數目和類型會不盡相同。它也會依據您使用的是「程式碼」檢視或「設計」檢視而有所不同。

雖然「插入」列提供了許多常用的標籤，但是它並非無所不包。若要從更廣泛的標籤選取範圍來進行選擇，請使用「標籤選擇程式」。

相關主題

  • 插入列
  • 使用標籤選擇程式插入標籤


使用標籤選擇程式插入標籤

您可以使用「標籤選擇程式」，在您的頁面中插入 Dreamweaver 標籤資料庫 (包括 Macromedia ColdFusion 和 ASP.NET 標籤資料庫) 中的任何標籤。如需關於標籤資料庫的詳細資訊，請參閱管理標籤資料庫。

若要使用「標籤選擇器」來插入標籤：

  1. 請將插入點置於程式碼中，然後再按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後再選取「插入標籤」。

    「標籤選擇程式」便會出現。左邊窗格中包含了支援的標籤資料庫清單，右邊窗格則是顯示所選取之標籤資料庫資料夾中的個別標籤。

  2. 選取並插入標籤。

    如需詳細資訊，請參閱設定「標籤選擇程式」對話方塊選項。

  3. 若要關閉「標籤選擇程式」，請按一下「關閉」按鈕。

相關主題

  • 使用標籤編輯器來編輯標籤


使用標籤編輯器來編輯標籤

標籤編輯器可讓您檢視、指定和編輯標籤的屬性。

若要使用標籤編輯器來編輯標籤：

  1. 按下滑鼠右鍵 (Windows) 或 Control + 按一下 (Macintosh)「程式碼」檢視中的標籤，或是「設計」檢視中的物件，再從彈出式選單中選取「編輯標籤」。
  2. 指定或編輯標籤的屬性，再按一下「確定」。

    提示

    若要取得有關標籤編輯器中標籤的詳細資訊，請按一下「標籤資訊」。


收合程式碼

您可以最佳化「程式碼」檢視，藉由收合或展開所選取的程式碼片段，根據自己的需求顯示程式碼。您也可以剪下、貼上或移動已收合的程式碼區段。

本節包含下列主題：

  • 關於收合程式碼
  • 收合與展開程式碼片段
  • 貼上並移動收合的程式碼片段


關於收合程式碼

Dreamweaver 允許您收合與展開程式碼片段，讓您不需使用捲軸就可以檢視文件中不同的章節。舉例來說，如果您想要檢視套用到頁面下端 div 標籤之 head 標籤的所有 CSS 規則，您可以將 head 標籤與 div 標籤之間的項目進行收合，這樣就可以一次看見兩個程式碼區段。雖然您可以在「設計」檢視或「程式碼」檢視中選取程式碼片段，但是您只能在「程式碼」檢視中收合程式碼。

當您選取程式碼時，Dreamweaver 會在選取範圍旁邊加入一組收合按鈕 (在 Windows 中為減號符號，在 Macintosh 中則為垂直三角形)。若要收合選取範圍，請按一下其中一個按鈕。收合程式碼之後，收合按鈕會變成展開按鈕 (在 Windows 中為加號按鈕，在 Macintosh 中則為水平三角形)。若要展開收合的選取範圍，請按一下展開按鈕。如需關於其他收合程式碼處理方式的詳細資訊，請參閱收合與展開程式碼片段。

有時候，Dreamweaver 可能不會收合和您所選取完全相同的程式碼片段。Dreamweaver 使用「智慧收合」為選取範圍做出一般與視覺美觀的收合動作。舉例來說，如果您選取了縮排標籤，同時選取了標籤之前的縮排空格，Dreamweaver 將不會收合縮排的空格，因為大部分的使用者會希望保留縮排。如果您想要停用智慧收合，並強制 Dreamweaver 收合您選取的範圍，可以在收合程式碼前先按住 Control 鍵。

此外，如果程式碼片段包含錯誤或某些瀏覽器不支援的程式碼，Dreamweaver 會在收合的程式碼片段上放置警告圖示。

注意

Dreamweaver 範本建立的檔案會以完全展開的方式顯示所有的程式碼，即使該範本檔案 (.dwt) 包含了已收合的程式碼片段。

相關主題

  • 收合與展開程式碼片段
  • 貼上並移動收合的程式碼片段
  • 清理程式碼
  • 使用「編碼」工具列快速插入程式碼


收合與展開程式碼片段

若要收合程式碼：

  1. 選取一些程式碼。
  2. 選取「編輯＞程式碼收合＞收合選取範圍」，或按一下選取範圍旁邊的其中一個收合按鈕。

若要收合選取範圍之外的程式碼：

  1. 在「程式碼」檢視中，選取一些程式碼。
  2. 選取「編輯＞程式碼收合＞收合外部選取範圍」。

    提示

    您也可以按住 Alt 鍵 (Windows) 或 Option 鍵 (Macintosh)，再按一下其中一個收合按鈕或「編碼」工具列中的「收合選取範圍」按鈕，以收合選取範圍之外的程式碼。

若要收合標籤以及標籤所括住的所有內容：

  1. 在「程式碼」檢視中，將插入點放置在開啟或結束標籤裡 (例如，在 <table> 或 </table> 標籤裡面)。
  2. 選取「編輯＞程式碼收合＞收合完整標籤」。

    提示

    您也可以在標籤選取器中的標籤上按一下滑鼠右鍵，然後選取「收合完整標籤」來收合完整標籤。

若要收合完整標籤之外的程式碼：

  1. 請執行下列其中一項作業：
    • 在「程式碼」檢視中，將插入點放置在開啟或結束標籤裡 (例如，在 <table> 或 </table> 標籤裡面)。
    • 在「程式碼」檢視中，選取開啟或結束標籤的一部分。
  2. 選取「編輯＞程式碼收合＞收合外部完整標籤」。

    提示

    您也可以在標籤選取器中的標籤上按一下右鍵，然後選取「收合外部完整標籤」，或是將插入點放置在開啟或結束標籤裡，按住 Alt 鍵，再按一下「編碼」工具列上的「收合完整標籤」按鈕，以收合完整標籤之外的程式碼。

若要選取收合的程式碼片段：

  • 在「程式碼」檢視中，按一下收合的程式碼片段。

    注意

    當您在「設計」檢視中，選取一部分收合的程式碼片段時，Dreamweaver 會自動在「程式碼」檢視中展開該片段。當您在「設計」檢視中選取完整的程式碼片段，該片段會在「程式碼」檢視中維持收合的狀態。

若要展開程式碼片段：

  • 請執行下列其中一項作業：
    • 在「程式碼」檢視中，按兩下程式碼片段。
    • 選取「編輯＞程式碼收合＞展開選取範圍」。

若要不需展開收合的程式碼片段即可檢視其中的程式碼：

  • 將滑鼠游標停留在收合的程式碼片段上。

若要展開所有收合的程式碼片段：

  • 選取「編輯＞程式碼收合＞全部展開」。

您也可以使用下列的鍵盤快速鍵來執行上述的任一命令：

命令 | Windows | Macintosh
收合選取範圍 | Control + Shift + C | Command + Shift + C
收合外部選取範圍 | Control + Alt + C | Command + Alt + C
展開選取範圍 | Control + Shift + E | Command + Shift + E
收合完整標籤 | Control + Shift + J | Command + Shift + J
收合外部完整標籤 | Control + Alt + J | Command + Alt + J
全部展開 | Control + Alt + E | Command + Alt + E

相關主題

  • 關於收合程式碼
  • 貼上並移動收合的程式碼片段
  • 清理程式碼
  • 使用「編碼」工具列快速插入程式碼


貼上並移動收合的程式碼片段

若要複製與貼上收合的程式碼片段：

  1. 選取收合的程式碼片段。
  2. 選取「編輯＞複製」。
  3. 將插入點放置在您想要貼上程式碼的位置。
  4. 選取「編輯＞貼上」。

    注意

    您可以貼至其他應用程式，但將不會保留程式碼片段的收合狀態。

若要拖曳收合的程式碼片段：

  1. 選取收合的程式碼片段。
  2. 將選取範圍拖曳至新的位置。

    提示

    若要拖曳選取範圍的副本，請按住 Control 鍵 (Windows) 或 Alt 鍵 (Macintosh) 並進行拖曳。

    注意

    您無法將它拖曳至其他的文件。

相關主題

  • 關於收合程式碼
  • 收合與展開程式碼片段
  • 清理程式碼
  • 使用「編碼」工具列快速插入程式碼


縮排程式碼區塊

當您在「程式碼」檢視或「程式碼」檢視窗中撰寫和編輯程式碼時，可以變更所選區塊或程式碼行的縮排階層，使用一個定位鍵將它向右或向左移動。

若要縮排所選的程式碼區塊，請執行下列其中一項作業：

  • 按 Tab 鍵。
  • 選取「編輯＞縮排程式碼」。

若要取消縮排所選的程式碼區塊，請執行下列其中一項作業：

  • 按下 Shift + Tab。
  • 選取「編輯＞凸排程式碼」。

相關主題

  • 快速變更程式碼選取範圍
  • 設定程式碼格式偏好設定選項


複製並貼上程式碼

您可以從其他應用程式或是從「程式碼」檢視本身，來複製和貼上程式碼。

若要複製程式碼並將它貼上成為文字：

  1. 請從 Dreamweaver 或從其他應用程式中複製程式碼。
  2. 將插入點放在「程式碼」檢視中，然後再選取「編輯＞貼上」。

相關主題

  • 貼上並移動收合的程式碼片段


插入 HTML 註解

註解是您插入 HTML 程式碼中，用來說明該程式碼或是提供其他資訊的描述性文字。註解的文字只會顯示在「程式碼」檢視中，而不會顯示在瀏覽器中。

若要在插入點上插入註解：

  • 選取「插入＞註解」。

    在「程式碼」檢視中，Dreamweaver 會插入註解標籤，並將插入點放在標籤的中間。輸入您的註解。

    在「設計」檢視中，Dreamweaver 會顯示「註解」對話方塊。輸入您的註解，再按一下「確定」。

若要在「設計」檢視中顯示註解標記：

  • 選取「檢視＞視覺輔助＞隱藏元素」。

    請確定在「隱藏元素」偏好設定中已經選取「註解」選項，否則註解標記將不會出現。

若要編輯現有的註解，請執行下列其中一項作業：

  • 在「設計」檢視中，請選取「註解」標記，並且在「屬性」檢視窗中編輯註解的文字。
  • 在「程式碼」檢視中，尋找該註解並且編輯其文字。


跳到 JavaScript 或 VBScript 函式

您可以在「程式碼」檢視和「程式碼」檢視窗中，檢視程式碼中所有 JavaScript 或 VBScript 函式的清單，並跳到任何一個函式中。

若要跳到程式碼中的 JavaScript 或 VBScript 函式：

  1. 在「程式碼」檢視 (「檢視」＞「程式碼」) 或「程式碼」檢視窗 (「視窗」＞「程式碼檢視窗」) 中檢視文件。
  2. 請執行下列其中一項作業：
    • 如果您使用「程式碼」檢視，請在「程式碼」檢視中的任何地方按一下右鍵 (Windows) 或 Control 鍵 + 按一下 (Macintosh)，然後從快速選單中選取「函式」子選單。

      注意

      「函式」子選單不會出現在「設計」檢視中。

      如果您的程式碼含有 JavaScript 或 VBScript 函式，它們將會出現在子選單中。

      提示

      若要依英文字母順序檢視函式，請在「程式碼」檢視中用 Control 鍵 + 按一下右鍵 (Windows)，或 Option 鍵 + Control 鍵 + 按一下 (Macintosh)，然後選取「函式」子選單。
    • 如果您使用「程式碼」檢視窗，請按一下工具列上的「程式碼導覽」按鈕。

      按鈕是由一對大括號 ({ }) 構成。

  3. 從子選單中選取函式名稱，即可跳到程式碼中的該函式。


搜尋和取代標籤及屬性

您可以使用 Dreamweaver 來搜尋並取代您程式碼中的標籤和屬性。

本節包含下列主題：

  • 搜尋標籤、屬性或是特定標籤中所含的文字
  • 儲存搜尋模式

相關主題

  • 規則運算式
  • 搜尋和取代文字
  • 比較檔案差異


搜尋標籤、屬性或是特定標籤中所含的文字

您可以搜尋特定的標籤、屬性和屬性值。例如，您可以搜尋所有沒有 alt 屬性的 img 標籤。

您也可以搜尋在 (或不在) 一組容器標籤內的特定文字字串。例如，您可以搜尋夾在 title 標籤之間的單字 Untitled，以便尋找網站上所有未命名的網頁。

若要搜尋程式碼中的標籤、屬性或是文字：

  1. 開啟文件以便在其中搜尋，或是選取「檔案」面板中的文件或資料夾。
  2. 選取「編輯＞尋找和取代」。

    「尋找和取代」對話方塊便會出現。

  3. 請指定要在其中搜尋哪些檔案，然後再指定您要執行的搜尋種類，以及要搜尋的文字或標籤。或者，也指定取代文字。接著再按一下其中一個「尋找」按鈕，或是其中一個「取代」按鈕。

    如需詳細資訊，請參閱設定尋找和取代對話方塊選項。

  4. 當您完成時，請按一下「關閉」按鈕來關閉對話方塊。

若要再搜尋一次而不顯示「尋找和取代」對話方塊：

  • 按 F3 (Windows) 或 Command + G (Macintosh)。

相關主題

  • 儲存搜尋模式
  • 規則運算式


儲存搜尋模式

您可以儲存搜尋的模式，而且之後再重複使用它。

若要儲存搜尋模式：

  1. 在「尋找和取代」對話方塊中 (「編輯＞尋找和取代」)，請設定搜尋的參數。

    如果您要執行標籤或進階文字搜尋，請參閱搜尋標籤、屬性或是特定標籤中所含的文字中有關設定其他搜尋參數的資訊。

  2. 按一下「儲存查詢」按鈕 (即磁碟圖示)。
  3. 在出現的對話方塊中，請導覽到您要儲存查詢的資料夾。接著輸入用來識別查詢的檔案名稱，再按一下「儲存」。

    例如，如果搜尋模式是要尋找沒有 alt 屬性的 img 標籤，您可以將此查詢命名為 img_no_alt.dwr。

    注意

    已儲存的查詢其副檔名為 .dwr。有些在舊版 Dreamweaver 中所儲存的查詢，其副檔名為 .dwq。

若要重新叫出搜尋模式：

  1. 請選取「編輯＞尋找和取代」。
  2. 按一下「載入查詢」按鈕 (資料夾圖示)。
  3. 請瀏覽到您儲存查詢所在的資料夾。然後，選取查詢檔案並按一下「開啟」。
  4. 請按一下「找下一個」、「全部尋找」、「取代」或「全部取代」，即可開始搜尋。

相關主題

  • 搜尋標籤、屬性或是特定標籤中所含的文字
  • 規則運算式


快速變更程式碼選取範圍

您可以先選取程式碼，再使用快速選單來快速變更此程式碼。

若要快速變更所選的程式碼：

  1. 在「程式碼」檢視中，請選取一些程式碼，再按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)。在快速選單中，請選取「選取範圍」子選單。
  2. 請從子選單中選取下列其中一個選項：

    註解行會在所選的行周圍加上註解標籤。如果只選取行的一部份，則會為整行加上註解。在對頁面進行除錯時，您可以使用此工具對可能不正確的程式碼加上註解。

    取消註解行可以在加上註解的選取範圍中，從任一行的開頭和結束中移除註解標記。它只適用於整行，而不適用於行中的註解。

    Tab 轉換為 Space 會將選取範圍內的每一個 Tab 轉換為等同於「程式碼格式」偏好設定中所設定「定位鍵距離」值的 Space (空格) 數目。如需詳細資訊，請參閱設定程式碼格式偏好設定。

    Space 轉換為 Tab 會將選取範圍中的空格執行，轉換成定位鍵。每一個具有等於定位鍵大小之空格數目的空格執行，都會轉換成一個定位鍵。

    縮排會縮排選取的範圍，將其向右移。如需關於縮排和凸排的詳細資訊，請參閱縮排程式碼區塊。

    凸排將選取範圍向左移。

    移除全部的標籤會移除選取範圍中所有的標籤。

    線段轉換為表格會將不含屬性之 table 標籤中的選取範圍換行。

    新增斷行會在選取範圍之每一行的結束位置加上 br 標籤。

    轉換為大寫會將選取範圍中所有的字母 (包括標籤與屬性名稱和值) 轉換成大寫。

    轉換為小寫會將選取範圍中所有的字母 (包括標籤與屬性名稱和值) 轉換成小寫。

    轉換標籤為大寫會將選取範圍中，所有的標籤與屬性名稱和屬性值轉換成大寫。

    轉換標籤為小寫會將選取範圍中，所有的標籤與屬性名稱和屬性值轉換成小寫。


使用語言參考資料

「參考」面板提供了標記語言、程式設計語言及 CSS 樣式的快速參考工具，它提供了您在「程式碼」檢視 (或「程式碼」檢視窗) 中，所使用之特定標籤、物件或樣式的相關資訊。「參考」面板還提供了範例程式碼，讓您可以貼到文件中。

若要開啟「參考」面板：

  1. 在「程式碼」檢視中執行下列其中一項作業：
    • 按一下右鍵 (Windows) 或 Control 鍵 + 按一下 (Macintosh) 標籤、屬性或關鍵字，然後從快速選單中選取「參考」。
    • 將插入點置於標籤、屬性或關鍵字上，然後按下 Shift + F1。

    「參考」面板便會開啟，並且顯示您所按的標籤、屬性或關鍵字的相關資訊。

  2. 若要調整「參考」面板中的文字大小，請從選項選單 (面板右上方的小箭頭) 中選取「大型字」、「中型字」或「小型字」。

若要將範例程式碼貼到您的文件：

  1. 在參考內容中範例程式碼的任何地方按一下。

    Dreamweaver 會反白標示整個程式碼範例。

  2. 選取「編輯＞複製」，然後將範例程式碼貼到「程式碼」檢視的文件中。

若要瀏覽參考內容：

  1. 若要顯示其他書籍中的標籤、物件或樣式，請從「書籍」彈出式選單中選取另一本書籍。
  2. 若要檢視關於特定項目的資訊，請從「標籤」、「物件」、「樣式」或 CFML 彈出式選單 (視您所選取的書籍而定) 選取該項目。
  3. 若要檢視關於選取項目之屬性的資訊，請從「標籤」、「物件」、「樣式」或 CFML 彈出式選單旁的彈出式選單中選取該屬性。

    此選單中包含您所選取之項目的屬性清單。預設的選項為「說明」，它會顯示所選取項目的描述。


列印程式碼

您可以列印程式碼，以便離線編輯、建檔或分發。

若要列印程式碼：

  1. 在「程式碼」檢視中開啟頁面。
  2. 選取「檔案＞列印程式碼」。
  3. 指定列印選項，然後按一下「確定」(Windows) 或「列印」(Macintosh)。


參考

本節將提供這一章裡所使用之下列面板和對話方塊的相關資訊：

  • 設定「片段」對話方塊選項
  • 設定「註解」對話方塊選項
  • 設定註解「屬性」檢視窗選項
  • 設定「標籤選擇程式」對話方塊選項


設定「片段」對話方塊選項

這個對話方塊是用來建立或編輯「片段」面板的程式碼片段。

若要建立或編輯程式碼片段：

  1. 在「名稱」文字方塊中，輸入片段的名稱。

    注意

    片段名稱不可包含在檔案名稱中無效的字元，如斜線 (/ 或 \)、特殊字元或雙引號 (")。
  2. (選擇性) 在「說明」文字方塊中，輸入片段的文字說明。這樣可以使其他的小組成員更容易使用這個片段。
  3. 對於「片段類型」，請選取「圍繞選取範圍」或「插入區塊」。
  4. 如果您選擇「圍繞選取範圍」，請將程式碼新增到下列文字方塊中：

    插入前面會在目前選取範圍前面，輸入或貼上要插入的程式碼。

    插入後面會在目前選取範圍後面，輸入或貼上要插入的程式碼。

    若要設定區塊的預設間距，請使用斷行符號；再於文字方塊內按 Enter (Windows) 或 Return (Macintosh)。

    注意

    由於片段可以建立成開始和結束區塊，所以您可以用它們來圍繞其他標籤和內容。這對於插入特殊格式、連結、導覽元素和 Script 區塊很有用處。只要將您想要圍繞的內容標示起來，就可以插入片段。
  5. 如果您選擇「插入區塊」，請輸入或貼上要插入的程式碼。
  6. (選擇性) 請選取「預覽類型」：「程式碼」或「設計」。

    如果您選取「設計」，則 Dreamweaver 便會轉譯程式碼，並且在「片段」面板的「預覽」窗格中向您展示。如果您選取「程式碼」，則 Dreamweaver 會在「預覽」窗格中顯示該程式碼。

  7. 按一下「確定」。

相關主題

  • 使用程式碼片段


設定「註解」對話方塊選項

這個對話方塊是用來在「設計」檢視的頁面中輸入 HTML 註解。

若要輸入 HTML 註解：

  • 輸入註解並且按一下「確定」。

相關主題

  • 插入 HTML 註解


設定註解「屬性」檢視窗選項

這個「屬性」檢視窗是用來修改頁面中的 HTML 註解。

若要修改 HTML 註解：

  • 請編輯註解的文字，然後再於「文件」視窗中按一下。

相關主題

  • 插入 HTML 註解


設定「標籤選擇程式」對話方塊選項

這個對話方塊是用來選取和插入標籤。

若要使用「標籤選擇器」來插入標籤：

  1. 左邊窗格中包含了支援的標籤資料庫清單，右邊窗格則是顯示所選取之標籤資料庫資料夾中的個別標籤。
  2. 請展開左側窗格中的標籤資料庫。
  3. 從標籤資料庫中選取標籤的類別，或是展開類別後再選取子類別。
  4. 從右側窗格中選取標籤。
  5. 若要檢視「標籤選擇器」中某標籤的語法和使用方法資訊，請按一下「標籤資訊」按鈕。

    如果有的話，標籤的相關資訊便會顯示。

  6. 若要檢視關於「參考」面板中標籤的相同資訊，請按一下 <?> 圖示。

    如果有的話，標籤的相關資訊便會顯示。

  7. 若要將選取的標籤插入您的程式碼中，請按一下「插入」。

    如果標籤顯示在右側窗格中並加上角括弧 (例如，<title></title>)，則它不需要其他的資訊，而且會立即在插入點將它插入文件中。

    如果標籤不需要其他的資訊，這時會出現標籤編輯器。

  8. 如果某個標籤編輯器開啟了，請輸入其他資訊並且按一下「確定」。
  9. 若要關閉「標籤選擇程式」，請按一下「關閉」按鈕。

相關主題

  • 使用標籤編輯器來編輯標籤


程式碼最佳化和除錯

您可以使用 Macromedia Dreamweaver 8 來為您的程式碼進行最佳化和除錯。例如，您可以驗證標籤、使文件與 XHTML 相容，或為 Macromedia ColdFusion 程式碼進行除錯。

本章包含下列主題：

清理程式碼

驗證標籤和大括弧是否成對

檢查瀏覽器相容性

驗證標籤

使頁面與 XHTML 相容

使用 ColdFusion 除錯程式 (僅適用於 Windows)


清理程式碼

Dreamweaver 可以自動移除空白標籤、組合巢狀結構的字體標籤，或是改善混亂或無法閱讀的 HTML 或 XHTML 程式碼。

如需關於如何清理 Microsoft Word 文件產生的 HTML 的詳細資訊，請參閱開啟現有文件。

若要清理程式碼：

  1. 開啟一份文件：
    • 如果文件是以 HTML 撰寫的，請選取「命令＞清理 HTML」。
    • 如果文件是以 XHTML 撰寫的，請選取「命令＞清理 XHTML」。

      如果是 XHTML 文件，「清理 XHTML」命令除了執行 HTML 清除作業，還會修正 XHTML 語法錯誤、將標籤屬性的大小寫設定成小寫，以及新增或報告標籤遺失的必要屬性。

  2. 在出現的對話方塊中，選取其中任一選項。

    如需詳細資訊，請參閱設定清理 HTML 對話方塊選項。

  3. 按一下「確定」。

    依據文件的大小和所選取選項的多寡，完成清理可能要花幾秒鐘的時間。

相關主題

  • 設定程式碼格式偏好設定
  • 設定程式碼色彩標示偏好設定


驗證標籤和大括弧是否成對

您可以檢查頁面中的標籤、小括弧 (( ))、大括弧 ({ }) 和方括弧 ([ ]) 是否成對。成對的意思是指每個開頭的標籤、小括弧、大括弧或方括弧都有對應的結束標籤或括弧，反之亦然。

若要檢查標籤是否成對：

  1. 在「程式碼」檢視中開啟文件。
  2. 將插入點放在您要檢查的巢狀程式碼中。
  3. 選取「編輯＞選取上一層標籤」。

    這時就會選取程式碼中成對的相符標籤 (和其內容)。如果您持續選取「編輯＞選取上一層標籤」，而且標籤都是成對的，最後 Dreamweaver 將會選取最外層的 html 和 /html 標籤。

若要檢查小括弧、大括弧或方括弧是否成對：

  1. 在「程式碼」檢視中開啟文件。
  2. 將插入點放在您要檢查的程式碼中。
  3. 選取「編輯＞平衡大括弧」。

    這時便會選取在成對的小括弧、大括弧或方括弧之間的所有程式碼。再選擇一次「編輯＞平衡大括弧」，會選取包含新的選取範圍的小括弧、大括弧或方括弧內的所有程式碼。


檢查瀏覽器相容性

Dreamweaver 可以讓您使用所有主要圖形瀏覽器都支援的元素 (例如影像和文字)，以及只有較新版的瀏覽器才支援的元素 (例如 CSS 樣式) 來建立網頁。

請決定您的網站可能的瀏覽對象，以及他們可能會使用的瀏覽器類型。如果大部份的使用者都是使用 Netscape 4 (例如在某些學術內部網路環境中，仍然使用此瀏覽器)，就應該要避免使用該瀏覽器所不支援的標籤。

「檢查目標瀏覽器」功能會測試文件中的程式碼，看看是否有任何目標瀏覽器所不支援的標籤、屬性、CSS 屬性或 CSS 值。這個檢查動作完全不會變更文件。

檢查目標瀏覽器會提供三種不同層級之潛在問題的資訊：錯誤、警告以及資訊訊息。下列敘述將會解釋三種層級之間的差異為何：

  • 「錯誤」指的是可能會在特定瀏覽器中造成嚴重且看得見的問題程式碼，例如造成部份頁面消失等問題 (在某些情況下，具有未知效果的程式碼也會標示為錯誤)。
  • 「警告」指的是無法在特定瀏覽器中正確顯示、但不會造成任何嚴重顯示問題的一段程式碼。
  • 「資訊訊息」指的是並未受到特定瀏覽器支援、但不會造成任何看得見的影響的程式碼；例如，某些瀏覽器並未支援 img 標籤的 galleryimg 屬性，但這些瀏覽器會忽略這項屬性，因此不會有看得見的影響。

依預設值，只要您開啟文件，Dreamweaver 就會自動執行檢查目標瀏覽器。您也可以針對文件、資料夾或整個網站，手動執行檢查目標瀏覽器。

注意

檢查目標瀏覽器不會持續更新。在變更程式碼之後，請手動執行檢查目標瀏覽器，確認您是否已清除與目標瀏覽器不合的程式碼。

檢查目標瀏覽器不會檢查網站中的 Script。而且，檢查目標瀏覽器也不是語法驗證工具，它只會偵測目標瀏覽器中不支援的標記。

注意

「檢查目標瀏覽器」功能會使用稱為瀏覽器描述檔的文字檔，來判斷指定的瀏覽器能支援哪些標籤。如需有關如何修改現有的描述檔或建立新描述檔的資訊，請參閱 www.macromedia.com/go/dreamweaver_support_tw 網站上的＜自訂 Dreamweaver＞文章。

若要選取 Dreamweaver 要檢查的瀏覽器：

  1. 在「文件」工具列中，選取「檢查目標瀏覽器」選單中的「設定」。 這是描述功能的圖片。

    「檢查目標瀏覽器」對話方塊便會出現。

  2. 將您想要檢查的各個瀏覽器旁邊的核取方塊選取起來。
  3. 從對應的彈出式選單中，為所選取的每個瀏覽器選取要檢查的最低版本。

    例如，若要確認文件的所有標記在 Microsoft Internet Explorer 3.0 以上的版本以及 Netscape Navigator 4.0 以上的版本中都有受到支援，請選取這些瀏覽器名稱旁邊的核取方塊，然後從 Microsoft Internet Explorer 彈出式選單中選取 3.0，再從 Netscape Navigator 彈出式選單中選取 4.0。

若要檢視自動檢查目標瀏覽器的結果，請執行下列其中一項作業：

  • 開啟檔案，然後在「程式碼」檢視中檢視檔案 (「檢視＞程式碼」或「檢視＞程式碼和設計」)。
  • 在「程式碼」檢視中進行變更之後，按一下「屬性」檢視窗中的「重新整理」按鈕，或按 F5。

只要有任何一個項目在您的目標瀏覽器中會視為一項錯誤，該項目的名稱下方就會出現波狀的紅色底線 (警告和資訊訊息不會在「程式碼」檢視中標記出來；若要檢視警告和資訊訊息，請檢視整份文件的報表)。如果 Dreamweaver 找不到不支援的標記，就不會出現底線，而且「文件」工具列中的「檢查目標瀏覽器」選單圖示會改變，指出沒有錯誤。

提示

若要輕鬆地使用與檢查目標瀏覽器有關的各種命令，請在任何有紅色底線的項目上按滑鼠右鍵 (Windows) 或按 Control + 按一下 (Macintosh)。

若要查看有哪些瀏覽器不支援有紅色底線的特定項目：

  • 將指標指向有紅色底線的文字。

工具提示便會出現，指出哪些瀏覽器不支援該項目。

若要檢視整份文件的「檢查目標瀏覽器」報表：

  • 在「文件」工具列的「檢查目標瀏覽器」選單中，選取「顯示全部錯誤」。

「結果」面板群組便會出現，並已選取「檢查目標瀏覽器」面板。錯誤是以紅色驚嘆號做為標示，警告是以黃色驚嘆號做為標示，而資訊訊息則是以氣泡文字圖示做為標示。

若要在「檢查目標瀏覽器」面板中檢視較長的錯誤訊息：

  1. 開啟「檢查目標瀏覽器」面板。
  2. 選取因為太長而無法在面板中閱讀的錯誤訊息。
  3. 按一下「更多資訊」按鈕。 這是描述功能的圖片。

「說明」對話方塊便會出現，顯示所選取錯誤訊息的完整文字。

若要停用自動檢查目標瀏覽器：

  • 在「文件」工具列中，取消選取「檢查目標瀏覽器」選單中的「開啟時自動檢查」。

若要跳到程式碼中的下一個或上一個錯誤：

  • 在「文件」工具列中，選取「檢查目標瀏覽器」選單中的「下一個錯誤」或「上一個錯誤」。

若要從「檢查目標瀏覽器」面板跳到特定的錯誤：

  • 按兩下錯誤訊息。

「程式碼」檢視中便會選取不支援的標記。

若要在目前的檔案上，手動執行檢查目標瀏覽器：

  • 選取「檔案＞檢查頁面＞檢查目標瀏覽器」。

報表便會出現在「檢查目標瀏覽器」面板中 (位於「結果」面板群組中)。

若要在網站或一組已選取的檔案上，手動執行檢查目標瀏覽器：

  1. 在「檔案」面板的「本機」檢視中，選取一組檔案，或選取包含整個網站的資料夾。
  2. 選取「檔案＞檢查頁面＞檢查目標瀏覽器」。

    報表便會出現在「檢查目標瀏覽器」面板中 (位於「結果」面板群組中)。

  3. 若要在執行時取消報表，請按一下「檢查目標瀏覽器」面板中的「停止」按鈕。

若要在檢視目前文件的報表以及檢視完整的網站報表之間切換：

  • 在「檢查目標瀏覽器」面板中，從彈出式選單中選取「目前文件」或「網站報表」。

若要儲存檢查目標瀏覽器報表：

  • 按一下「檢查目標瀏覽器」面板中的「儲存報表」按鈕。

    注意

    檢查目標瀏覽器報表並不會自動儲存；如果您想要保留一份複本以供日後參考，請自行儲存。

若要在瀏覽器中檢視檢查目標瀏覽器報表：

  • 按一下「檢查目標瀏覽器」面板中的「瀏覽報表」按鈕。

若要修正錯誤：

  • 移除未受到支援的程式碼，或是將這段程式碼變更為目標瀏覽器支援的其他程式碼。

若要指定 Dreamweaver 忽略特定類型之錯誤：

  • 在標有紅色底線的程式碼上按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後從快速選單中選取「忽略錯誤」。

這種類型的錯誤將會變更為警告，而 Dreamweaver 則會停止在所有文件中為這種類型的錯誤標上底線。

相關主題

  • 驗證標籤


驗證標籤

您可以使用 Dreamweaver 來檢查程式碼是否有標籤或語法錯誤。Dreamweaver 可以驗證使用多種語言撰寫的文件，包括 HTML、XHTML、ColdFusion 標記語言 (CFML)、JavaServer Pages (JSP)、無線傳輸標記語言 (WML) 和 XML。

注意

若要驗證文件的可存取性，請參閱測試網站。

您可以驗證目前的文件或選取的標籤。

若要驗證標籤：

  1. 請執行下列其中一項作業：
    • 如果是 XML (或 XHTML) 檔案，請選取「檔案＞檢查頁面＞驗證為 XML」。
    • 否則，請選取「檔案＞檢查頁面＞驗證標記」。

    「結果」面板的「驗證」索引標籤會顯示「找不到錯誤或警告」訊息，或是將它找到的語法錯誤一一列出。

  2. 按兩下錯誤訊息，將文件中的錯誤標示出來。
  3. 若要將報表儲存成 XML 檔案，按一下「儲存報表」按鈕。
  4. 若要在您的主要瀏覽器 (可讓您列印報表者) 中檢視報表，請按一下「瀏覽報表」按鈕。

您可以設定「驗證工具」的偏好設定，例如指定「驗證工具」應該檢查的標籤架構式語言、「驗證工具」應該檢查的特定問題，以及「驗證工具」應該報告的錯誤類型。如需詳細資訊，請參閱設定驗證工具偏好設定。

相關主題

  • 檢查瀏覽器相容性


使頁面與 XHTML 相容

當您建立新頁面時，可以讓它與 XHTML 相容。您也可以使現有的 HTML 文件與 XHTML 相容。

若要建立 XHTML 相容的新文件：

  1. 選取「檔案＞開新檔案」。

    「新增文件」對話方塊便會出現。

  2. 選取要建立的頁面類別和類型。
  3. 從「文件類型 (DTD)」彈出式選單中選取其中一個 XHTML 文件類型定義 (DTD)。

    例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。

    注意

    並非所有的文件類型都可以與 XHTML 相容。
  4. 按一下「確定」。

若要建立預設與 XHTML 相容的文件：

  1. 選取「編輯＞偏好設定」或「Dreamweaver＞偏好設定」(Mac OS X)，然後選取「新增文件」類別。
  2. 在「新增文件」類別中選取預設文件，然後從「文件類型 (DTD)」彈出式選單中選取其中一個 XHTML 文件類型定義 (DTD)。

    例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。

  3. 按一下「確定」。

若要使現有的 HTML 文件與 XHTML 相容：

  • 開啟文件，然後執行下列其中一項作業：
    • 如果是沒有頁框的文件，請選取「檔案＞轉換」，然後選取其中一個 XHTML 文件類型定義。

      例如，您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。

    • 如果是有頁框的文件，請選取頁框，再選取「檔案＞轉換」，然後選取其中一個 XHTML 文件類型定義。

      若要轉換整個文件，請對每一頁框和頁框組文件重複這個步驟。

      注意

      您不能轉換樣版實體，因為樣版實體所使用的語言必須與它的基本樣版相同。例如，以 XHTML 樣版為基礎的文件，永遠都是使用 XHTML；以非 XHTML 相容的 HTML 樣版為基礎的文件，則永遠都是使用 HTML，而且無法轉換成 XHTML 或任何其他的語言。

相關主題

  • 關於 Dreamweaver


使用 ColdFusion 除錯程式 (僅適用於 Windows)

如果您是使用 Macromedia ColdFusion 做為 Dreamweaver 測試伺服器的 ColdFusion 開發人員，則您不需要離開 Dreamweaver 便可檢視 ColdFusion 除錯資訊。

注意

Macintosh 不支援這項功能。Macintosh 開發人員可以使用「在瀏覽器中預覽」(F12)，在另一個瀏覽器中開啟 ColdFusion 頁面。如果頁面有錯誤，有關導致錯誤之可能原因的相關資訊就會出現在頁面底部。

如果您正在執行 ColdFusion MX 6.1 或是更早的版本，在開始除錯前，請先確定已啟動「ColdFusion 管理員」中的除錯設定。如需詳細資訊，請參閱「使用 Dreamweaver」中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。如果您正在執行 ColdFusion MX 7 或更新的版本，Dreamweaver 會為您啟用設定。

同時，請確認您的 Dreamweaver 測試伺服器正在執行 ColdFusion。如需 Dreamweaver 測試伺服器的詳細資訊，請參閱指定可以處理動態網頁的位置。

提示

若要確保內部瀏覽器每次顯示頁面時都會重新整理除錯資訊，請讓 Internet Explorer 在每次要求檔案時檢查是否有較新版本的檔案。在 Internet Explorer 中，選取「工具＞Internet 選項」，選取「一般」索引標籤，然後按一下「Temporary Internet Files」區域中的「設定」按鈕。在「設定」對話方塊中，請選取「每次查閱畫面時」選項。

若要除錯 ColdFusion 頁面：

  1. 在 Dreamweaver 中開啟 ColdFusion 頁面。
  2. 按一下「文件」工具列上的「伺服器除錯」圖示。 這是描述功能的圖片。

    Dreamweaver 會向 ColdFusion 伺服器要求頁面，並且顯示在內部的 Internet Explorer 瀏覽器視窗中。如果頁面有錯誤，錯誤的可能原因就會出現在頁面底部。

    同時，「伺服器除錯」面板也會開啟。這個面板提供了大量有用的資訊，例如伺服器為呈現該頁面而處理的所有頁面、頁面上執行的所有 SQL 查詢，以及所有伺服器變數和它們的值 (如果有)。這個面板也提供了執行時間的摘要。

  3. 如果「伺服器除錯」面板中出現「例外狀況」類別，請按一下加號 (+) 圖示展開這個類別。

    如果伺服器在頁面上碰到問題，「例外狀況」類別就會出現。請擴展這個類別，查看問題的詳細資訊。

  4. 在「伺服器除錯」面板的「位置」欄中，按一下頁面上的 URL，在「程式碼」檢視中開啟這個頁面並且進行修正。

    如果 Dreamweaver 找到了這個頁面，頁面就會開啟並且標示有問題的行。如果 Dreamweaver 找不到這個頁面，它會詢問您頁面的位置。

  5. 請修正錯誤，將檔案儲存到伺服器，然後按一下「瀏覽」。

    Dreamweaver 就會在內部瀏覽器中再次呈現頁面，並且更新「伺服器除錯」面板。如果頁面沒有問題了，面板中就不會再出現「例外狀況」類別。

  6. 若要離開除錯模式，請切換到「程式碼」檢視 (「檢視＞程式碼」) 或「設計」檢視 (「檢視＞設計」)。


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定清理 HTML 對話方塊選項


設定清理 HTML 對話方塊選項

這個對話方塊的用途，是指定 Dreamweaver 應如何清理程式碼。

若要指定清理選項：

  1. 選取下列任一選項：

    移除空的容器標籤會移除任何沒有內容的標籤。例如，<b></b> 和 <font color="#FF0000"></font> 都是空白標籤，但是在 <b>some text</b> 中的 <b> 標籤則不是。

    移除多餘的巢狀標籤會移除標籤的所有多餘實體。例如，在程式碼 <b>This is what I <b>really</b> wanted to say</b> 中，包圍在單字「really」外的 b 標籤就是多餘的，可以移除。

    移除不屬於 Dreamweaver 的 HTML 註解會移除所有不是由 Dreamweaver 插入的註解。例如，<!--begin body text--> 就會被移除，但是 <!-- TemplateBeginEditable name="doctitle" --> 則不會，因為它是樣版中標記可編輯區域開頭的 Dreamweaver 註解。

    移除 Dreamweaver 特殊標記會移除註解，該註解是 Dreamweaver 新增到程式碼中的，讓文件在樣版及圖庫項目更新時，可以自動更新。如果您在以樣版為依據的文件中清理程式碼時，選取這個選項，文件就會從樣版分離。如需詳細資訊，請參閱使文件從樣版分離。

    移除指定的標籤會移除在相鄰文字方塊中的指定標籤。使用這個選項可以移除由其他視覺輔助編輯器插入的自訂標籤，以及您不想顯示在網站上的其他標籤 (例如，blink)。請用逗號來分隔多個標籤 (例如，font,blink)。

    儘可能合併巢狀的 <font> 標籤會將兩個以上的 font 標籤合併起來 (如果它們控制的文字範圍相同)。例如，<font size="7"><font color="#FF0000">big red</font></font> 會變更為 <font size="7" color="#FF0000">big red</font>。

    完成後顯示記錄會在清理動作完成時，顯示一個警告方塊，內含文件變更的相關詳細資料。

  2. 按一下「確定」。


在設計檢視中編輯程式碼

Macromedia Dreamweaver 8 可以讓您以視覺化的方式建立和編輯網頁，而不需顧慮它們的原始程式碼，但是您有時候仍然會需要編輯程式碼，藉以加強控制或對網頁進行疑難排解。Dreamweaver 可以讓您在「設計」檢視中工作時，編輯一些程式碼。

本章是針對喜歡在「設計」檢視中工作，同時又希望能夠快速存取程式碼的人設計的。

本章包含下列主題：

使用「屬性」檢視窗編輯程式碼

使用標籤檢視窗變更屬性

使用快速標籤編輯器編輯程式碼

使用標籤選取器編輯程式碼

編輯 Script

使用伺服器端包含

使用 JavaScript 行為

檢視和編輯檔頭內容


使用「屬性」檢視窗編輯程式碼

您可以使用「屬性」檢視窗來檢查和編輯頁面上文字或物件的屬性。「屬性」檢視窗中所顯示的屬性，通常是對應到標籤的屬性；在「屬性」檢視窗中變更屬性，與在「程式碼」檢視中變更相對應的屬性，效果通常是相同的。

注意

標籤檢視窗和「屬性」檢視窗都可以讓您檢視和編輯標籤的屬性。標籤檢視窗可讓您檢視並編輯與特定標籤有關的各項屬性。「屬性」檢視窗雖然只會顯示最常用的屬性，但是會提供一組更完整的控制，用來變更這些屬性的值，讓您能夠編輯並未對應到特定標籤的特定物件 (例如表格欄)。

若要使用「屬性」檢視窗：

  1. 在文字中按一下，或選取頁面上的物件。

    該文字或物件的「屬性」檢視窗就會出現在「文件」視窗下面。如果看不見「屬性」檢視窗，請選取「視窗＞屬性」。

  2. 在「屬性」檢視窗中變更屬性。

相關主題

  • 使用標籤檢視窗變更屬性
  • 使用「屬性」檢視窗


使用標籤檢視窗變更屬性

您可以使用標籤檢視窗，在類似其他整合式開發環境 (IDE) 中所使用的屬性表中編輯標籤及物件。

注意

標籤檢視窗和「屬性」檢視窗都可以讓您檢視和編輯標籤的屬性。標籤檢視窗可讓您檢視並編輯與特定標籤有關的各項屬性。「屬性」檢視窗雖然只會顯示最常用的屬性，但是會提供一組更完整的控制，用來變更這些屬性的值，讓您能夠編輯並未對應到特定標籤的特定物件 (例如表格欄)。

若要使用標籤檢視窗編輯屬性：

  1. 請在「文件」視窗中執行下列其中一項作業：
    • 在「程式碼」檢視 (或「程式碼」檢視窗) 中，按一下標籤名稱或標籤內容中的任何地方。
    • 在「設計」檢視中選取物件，或是在「標籤選取器」中選取標籤。
  2. 開啟標籤檢視窗 (「視窗＞標籤檢視窗」)，再選取「屬性」索引標籤。

    選取範圍的屬性和其目前的值會出現在標籤檢視窗中。

  3. 在標籤檢視窗中執行下列其中一項作業：
    • 若要檢視依照類別整理的屬性，請按一下「顯示類別檢視」按鈕。 這是描述功能的圖片。
    • 若要依照英文字母順序檢視屬性，請按一下「顯示清單檢視」按鈕。 這是描述功能的圖片。
    • 若要變更屬性值，請選取值，然後再編輯 (請參閱下面的程序)。
    • 若要為沒有值的屬性新增一個值，請按一下屬性右邊的屬性-值欄，然後新增值 (請參閱下面的程序)。
    • 若要刪除屬性值，請選取值，然後按退位鍵 (Windows) 或 Delete 鍵 (Macintosh)。
    • 若要變更屬性的名稱，請選取屬性名稱，然後再編輯。

      注意

      如果您變更標準屬性的名稱，然後新增該屬性的值，屬性和它的新值便會移到適當的類別中。
    • 若要新增尚未列出的新屬性，請按一下最後一個列出的屬性名稱下方的空白處，然後輸入新的屬性名稱。
  4. 按 Enter (Windows) 或 Return (Macintosh)，或按一下標籤檢視窗中的其他地方，以更新文件中的標籤。

若要編輯或新增屬性值，請執行下列其中一項作業：

  • 在屬性名稱右邊的屬性-值欄中，鍵入屬性的新值。
  • 如果屬性接受預先定義的值，請從屬性-值欄右邊的彈出式選單 (或顏色挑選器) 中選取值。
  • 如果該屬性接受的是 URL 值，請按一下「瀏覽」按鈕、或是使用「指向檔案」圖示選取檔案，或是在文字方塊中輸入 URL。
  • 如果屬性接受來自動態內容來源 (例如資料庫) 的值，請按一下屬性-值欄右邊的「動態資料」按鈕，然後選取來源。 這是描述功能的圖片。

    如需有關定義動態內容來源的詳細資訊，請參閱定義動態內容的來源。

相關主題

  • 使用「屬性」檢視窗編輯程式碼
  • 使用 JavaScript 行為
  • 使用階層式樣式表來格式化文字


使用快速標籤編輯器編輯程式碼

您可以使用「快速標籤編輯器」快速檢查和編輯 HTML 標籤，而不需離開「設計」檢視。若要開啟「快速標籤編輯器」，請按 Control + T (Windows) 或 Command + T (Macintosh)。如需詳細資訊，請參閱設定快速標籤編輯器選項。

本節包含下列主題：

  • 使用快速標籤編輯器插入 HTML 標籤
  • 使用快速標籤編輯器編輯 HTML 標籤
  • 使用快速標籤編輯器將 HTML 套用至選取範圍
  • 在快速標籤編輯器中使用提示選單


使用快速標籤編輯器插入 HTML 標籤

您可以使用「快速標籤編輯器」在文件中插入 HTML 標籤。

若要使用「快速標籤編輯器」插入 HTML 標籤：

  1. 在「設計」檢視中，在頁面中按一下，將插入點置於您要插入程式碼的位置。
  2. 按 Control + T (Windows) 或 Command + T (Macintosh)。

    「快速標籤編輯器」就會以「插入 HTML」模式開啟。

  3. 輸入 HTML 標籤然後按 Enter。

    這個標籤以及對應的結束標籤 (如果適用) 就會插入程式碼中。

  4. 按 Escape 鍵結束而不做任何變更。

相關主題

  • 使用快速標籤編輯器編輯 HTML 標籤
  • 使用快速標籤編輯器將 HTML 套用至選取範圍
  • 在快速標籤編輯器中使用提示選單
  • 設定快速標籤編輯器選項


使用快速標籤編輯器編輯 HTML 標籤

您可以使用「快速標籤編輯器」在文件中編輯 HTML 標籤。

若要使用「快速標籤編輯器」編輯 HTML 標籤：

  1. 在「設計」檢視中選取物件。

    您也可以從「文件」視窗底部的標籤選取器選取想要編輯的標籤。如需詳細資訊，請參閱使用標籤選取器編輯程式碼。

  2. 按 Control + T (Windows) 或 Command + T (Macintosh)。

    「快速標籤編輯器」就會以「編輯標籤」模式開啟。

  3. 輸入新屬性、編輯現有屬性，或編輯標籤名稱。
  4. 按 Tab 鍵可從一個屬性跳到下一個；按 Shift+Tab 則會往回跳。

    依預設值，當您按 Tab 或 Shift+Tab 時，變更就會套用至文件。若要停用自動更新，請選取「編輯＞偏好設定＞快速標籤編輯器」或「Dreamweaver＞偏好設定＞快速標籤編輯器」(Mac OS X)。「快速標籤編輯器偏好設定」對話方塊便會出現。取消選取「編輯時立即套用變更」選項並且按一下「確定」。

    如需詳細資訊，請參閱設定 Script 對話方塊選項。

  5. 若要關閉「快速標籤編輯器」並套用所有變更，請按 Enter。
  6. 若要結束而不進行任何變更，請按 Escape。

相關主題

  • 使用快速標籤編輯器插入 HTML 標籤
  • 使用快速標籤編輯器將 HTML 套用至選取範圍
  • 在快速標籤編輯器中使用提示選單
  • 設定快速標籤編輯器選項


使用快速標籤編輯器將 HTML 套用至選取範圍

您可以使用「快速標籤編輯器」，以開啟和結束 HTML 標籤括住目前的選取範圍。

若要使用「快速標籤編輯器」將 HTML 套用至選取範圍：

  1. 在「設計」檢視中選取未格式化的文字或物件。

    注意

    如果選取了包含開頭或結束 HTML 標籤的文字或物件，「快速標籤編輯器」便會以「編輯標籤」模式開啟，而不是以「用標籤圍繞」模式開啟。
  2. 按 Control + T (Windows) 或 Command + T (Macintosh)，或者按一下「屬性」檢視窗中的「快速標籤編輯器」按鈕。

    「快速標籤編輯器」就會以「用標籤圍繞」模式開啟。

  3. 輸入單一開頭標籤，例如 strong，然後按 Enter (Windows) 或 Return (Macintosh)。

    這個標籤就會插入到目前選取範圍的開頭，並且在結尾插入對應的結束標籤。

  4. 若要結束而不進行任何變更，不要按 Enter，而是按 Escape。

相關主題

  • 使用快速標籤編輯器插入 HTML 標籤
  • 使用快速標籤編輯器編輯 HTML 標籤
  • 在快速標籤編輯器中使用提示選單
  • 設定快速標籤編輯器選項


在快速標籤編輯器中使用提示選單

在「快速標籤編輯器」中時，可以存取屬性提示選單，它會列出您要編輯或插入標籤的全部有效屬性。

您也可以在「快速標籤編輯器」中停用提示選單，或調整選單彈出前的延遲時間。

若要查看列出有效標籤屬性的提示選單，在「快速標籤編輯器」中編輯屬性名稱時請稍做停頓。提示選單便會出現，列出您所編輯標籤的全部有效屬性。

同樣地，若要查看列出有效標籤名稱的提示選單，在「快速標籤編輯器」中輸入或編輯標籤名稱時請稍做停頓。

注意

「快速標籤編輯器」程式碼提示偏好設定是由一般程式碼提示偏好設定所控制。如需詳細資訊，請參閱設定程式碼提示偏好設定。

若要使用提示選單：

  1. 請執行下列其中一項作業：
    • 開始輸入標籤或屬性名稱。「程式碼提示」選單中的選取範圍會跳至以您所輸入的字母開頭的第一個項目。
    • 使用向上鍵或向下鍵選取項目。
    • 使用捲軸尋找項目。
  2. 按 Enter 插入所選取的項目，或按兩下該項目便可插入。
  3. 若要關閉提示選單而不插入任何項目，請按 Escape 或繼續輸入即可。

若要停用提示選單或變更它出現前的延遲時間：

  1. 選取「編輯＞偏好設定」(Windows) 或「Dreamweaver＞偏好設定」(Macintosh)，然後選取「快速標籤編輯器」。

    「快速標籤編輯器偏好設定」對話方塊便會出現。

  2. 若要停用提示選單，請取消選取「打開標籤提示」選項。
  3. 若要變更選單出現前的延遲時間，請調整「延遲」滑動軸。

    如需詳細資訊，請參閱設定 Script 對話方塊選項。

  4. 按一下「確定」。

相關主題

  • 設定快速標籤編輯器選項
  • 使用快速標籤編輯器編輯 HTML 標籤


使用標籤選取器編輯程式碼

您可以使用標籤選取器來選取、編輯或移除標籤，而不需離開「設計」檢視。標籤選取器是位於「文件」視窗底部的狀態列中，會顯示一系列的標籤，如下所示：

若要編輯標籤：

  1. 在文件中按一下。

    套用在插入點的標籤就會出現在標籤選取器中。

  2. 在標籤選取器中的標籤上按滑鼠右鍵 (Windows) 或按 Control + 按一下 (Macintosh)。

    彈出式選單便會出現。

  3. 從選單中選取「編輯標籤」。

「快速標籤編輯器」就會出現。如需詳細資訊，請參閱使用快速標籤編輯器編輯 HTML 標籤。

若要移除標籤：

  1. 在文件中按一下。

    套用在插入點的標籤就會出現在標籤選取器中。

  2. 在標籤選取器中的標籤上按滑鼠右鍵 (Windows) 或按 Control + 按一下 (Macintosh)。

    彈出式選單便會出現。

  3. 從選單中選取「移除標籤」。

若要選取與標籤對應的物件：

  1. 在文件中按一下。

    套用在插入點的標籤就會出現在標籤選取器中。

  2. 按一下標籤選取器中的標籤。

頁面中標籤所代表的物件就會被選取。

提示

請使用這種技巧選取個別表格列 (tr 標籤) 或儲存格 (td 標籤)。


編輯 Script

在「程式碼」和「設計」檢視中都可以使用用戶端 JavaScripts 和 VBScripts。

本節包含下列主題：

  • 在設計檢視中撰寫用戶端 Script
  • 連結到外部 Script 檔案
  • 在設計檢視中編輯 Script


在設計檢視中撰寫用戶端 Script

您可以撰寫頁面的 JavaScript 或 VBScript 而不需離開「設計」檢視。

在開始之前，請選取「檢視＞視覺輔助＞隱藏元素」，以確保 Script 標記會出現在頁面中。

若要在「設計」檢視中插入用戶端 Script：

  1. 將插入點置於您想要插入 Script 的位置。
  2. 選取「插入＞Script 物件＞Script」。

    「Script」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定 Script 對話方塊選項。

相關主題

  • 連結到外部 Script 檔案
  • 在設計檢視中編輯 Script


連結到外部 Script 檔案

您可以在文件中建立外部 Script 檔案的連結，而不需離開「設計」檢視。

在開始之前，請選取「檢視＞視覺輔助＞隱藏元素」，以確保 Script 標記會出現在頁面中。

若要連結到外部 Script 檔案：

  1. 將插入點置於您想要插入 Script 的位置。
  2. 選取「插入＞Script 物件＞Script」。

    「Script」對話方塊便會出現。

  3. 按一下「確定」，在「內容」方塊中不輸入任何資料。
  4. 在「文件」視窗的「設計」檢視中選取 Script 標記。
  5. 在「屬性」檢視窗中，按一下資料夾圖示以瀏覽並選取外部 Script 檔案，或在「來源」方塊中輸入檔案名稱。

相關主題

  • 在設計檢視中撰寫用戶端 Script
  • 在設計檢視中編輯 Script


在設計檢視中編輯 Script

您可以編輯 Script 而不需離開「設計」檢視。

在開始之前，請選取「檢視＞視覺輔助＞隱藏元素」，以確保 Script 標記會出現在頁面中。

若要在「設計」檢視中編輯 Script：

  1. 選取 Script 標記。
  2. 在「屬性」檢視窗中，按一下「編輯」按鈕。

    Script 就會出現在「Script 屬性」對話方塊中。

    如果您連結到外部 Script 檔案，這個檔案就會在可以進行編輯的「程式碼」檢視中自動開啟。

    注意

    如果在 Script 標籤之間有程式碼，那麼即使也有外部 Script 檔案的連結，「Script 屬性」對話方塊還是會開啟。
  3. 編輯 Script，然後按一下「確定」。

    如需詳細資訊，請參閱設定 Script 屬性對話方塊選項。

相關主題

  • 在設計檢視中撰寫用戶端 Script
  • 連結到外部 Script 檔案


使用伺服器端包含

伺服器端包含是針對 Web 伺服器的指令，告訴它將網頁提供到瀏覽器之前，要先在網頁中包含指定的檔案。如需詳細資訊，請參閱伺服器端包含。

您可以使用 Dreamweaver 在頁面中插入伺服器端包含、編輯包含，或是預覽含有包含的頁面。

本節包含下列主題：

  • 插入伺服器端包含
  • 編輯伺服器端包含的內容


插入伺服器端包含

您可以使用 Dreamweaver 在頁面中插入伺服器端包含。

若要插入伺服器端包含：

  1. 選取「插入＞伺服器端包含」。
  2. 在出現的對話方塊中，瀏覽並選取檔案。

    根據預設，Dreamweaver 會插入包含 (include) 的檔案類型。

  3. 若要變更包含的類型，請在「文件」視窗中選取伺服器端包含，然後在「屬性」檢視窗 (「視窗＞屬性」) 中變更類型，如下所示：
    • 如果您的伺服器是 Apache 網站伺服器，請選取「虛擬」。在 Apache 中，「虛擬」可適用於所有狀況，而「檔案」僅能適用某些狀況。
    • 如果您的伺服器是 Microsoft Internet Information Server (IIS)，請選取「檔案」(「虛擬」只在某些特定情況下能適用於 IIS)。

      注意

      不幸的是，IIS 不允許在資料夾階層中目前資料夾以上的資料夾中包含檔案，除非伺服器上已安裝特殊軟體。如果您需要包含 IIS 伺服器上資料夾階層中較上層資料夾的檔案，請向系統管理員洽詢是否已安裝必要軟體。
    • 對於其他種類的伺服器，或是您不知道使用的是何種伺服器時，請向系統管理員洽詢應使用何種選項。

若要變更包含的檔案：

  1. 請在「文件」視窗中選取伺服器端包含。
  2. 開啟「屬性」檢視窗 (「視窗＞屬性」)。
  3. 請執行下列其中一項作業：
    • 按一下資料夾圖示，瀏覽並選取要包含的新檔案。
    • 在文字方塊中，輸入要包含之新檔案的路徑和檔案名稱。

相關主題

  • 伺服器端包含
  • 編輯伺服器端包含的內容


編輯伺服器端包含的內容

您可以使用 Dreamweaver 來編輯伺服器端包含。若要編輯與所包含檔案關聯的內容，您必須開啟這個檔案。

若要編輯伺服器端包含：

  1. 在「設計」檢視或「程式碼」檢視中選取伺服器端包含，然後在「屬性」檢視窗中按一下「編輯」。

    被包含的檔案就會在新的「文件」視窗中開啟。

  2. 編輯檔案，然後儲存它。

    變更就會立即反映到目前的文件，以及您後續開啟包含該檔案的任何文件中。

  3. 視需要將包含檔案上傳到遠端網站。

相關主題

  • 伺服器端包含
  • 插入伺服器端包含


使用 JavaScript 行為

標籤檢視窗的「行為」索引標籤可以讓您輕鬆地將 JavaScript (用戶端) 行為附加至頁面元素。如需詳細資訊，請參閱使用 Dreamweaver 發行的行為動作。


檢視和編輯檔頭內容

您可以利用「檢視」選單、「文件」視窗的「程式碼」檢視或「程式碼」檢視窗來檢視文件 head 區段中的元素。

若要檢視文件 head 區段中的元素：

  • 選取「檢視＞檔頭內容」。針對 head 內容的每個元素，「設計」檢視的「文件」視窗頂端會出現一個標記。

    注意

    如果您的「文件」視窗設定為只顯示「程式碼」檢視，則「檢視＞檔頭內容」會暗淡顯示。

若要將元素插入文件的 head 區段：

  1. 請執行下列其中一項作業：
    • 在「插入」列的「檔頭」類別中，按一下其中一個物件按鈕來選取。
    • 從「插入＞檔頭標籤」子選單中選取一個項目。
  2. 在出現的對話方塊或「屬性」檢視窗中輸入該元素的選項。

若要編輯文件 head 區段中的元素：

  1. 選取「檢視＞檔頭內容」。
  2. 按一下 head 區段內其中一個圖示來選取它。
  3. 在「屬性」檢視窗中設定或修改元素的屬性。

如需關於特定 head 元素屬性的詳細資訊，請參閱下列主題：

  • 設定 Meta 屬性
  • 設定標題屬性
  • 設定關鍵字屬性
  • 設定說明屬性
  • 設定重新整理屬性
  • 設定路徑基準屬性
  • 設定連結標籤的屬性


參考

本節將提供這一章裡所介紹的下列對話方塊和「屬性」檢視窗相關資訊：

  • 設定快速標籤編輯器選項
  • 設定 Script 對話方塊選項
  • 設定 Script 屬性對話方塊選項
  • 設定 Script「屬性」檢視窗選項
  • 設定伺服器端包含「屬性」檢視窗選項
  • 設定 ColdFusion 標籤「屬性」檢視窗選項
  • 設定 ASP Script「屬性」檢視窗選項
  • 設定 Meta 屬性
  • 設定標題屬性
  • 設定關鍵字屬性
  • 設定說明屬性
  • 設定重新整理屬性
  • 設定路徑基準屬性
  • 設定連結標籤的屬性
  • 設定程式碼屬性
  • 使用選取子項目命令


設定快速標籤編輯器選項

「快速標籤編輯器」的用途是快速插入及編輯 HTML 標籤，而不需離開「設計」檢視。

如果您在「快速標籤編輯器」中輸入無效的 HTML，Dreamweaver 會視需要插入結束引號或結束角括弧，試著為您進行修正。

若要設定「快速標籤編輯器」選項：

  • 按 Control + T (Windows) 或 Command + T (Macintosh) 以開啟「快速標籤編輯器」。

「快速標籤編輯器」有三種模式：

  • 「插入 HTML」模式是用來插入新的 HTML 程式碼。
  • 「編輯標籤」模式是用來編輯現有的標籤。
  • 「用標籤圍繞」模式是用新標籤圍繞目前的選取範圍。

    注意

    開啟「快速標籤編輯器」的模式是由「設計」檢視中的目前選取範圍決定。

在這三種模式中，使用「快速標籤編輯器」的基本程序都是一樣的：開啟編輯器、輸入或編輯標籤和屬性，然後關閉編輯器。

您可以在「快速標籤編輯器」開啟時按 Control + T (Windows) 或 Command + T (Macintosh)，依序切換不同模式。

相關主題

  • 使用快速標籤編輯器插入 HTML 標籤
  • 使用快速標籤編輯器編輯 HTML 標籤
  • 使用快速標籤編輯器將 HTML 套用至選取範圍
  • 在快速標籤編輯器中使用提示選單


設定 Script 對話方塊選項

這個對話方塊的用途，是在程式碼中插入用戶端 Script。

若要插入 Script：

  1. 從「語言」彈出式選單中選取 Script 語言。

    如果您使用的是 JavaScript 而且不確定是哪種版本，請選取 JavaScript，而不要選取 JavaScript1.1 或 JavaScript1.2。

  2. 在「內容」文字方塊中輸入或貼上 Script 程式碼。

    您不需要包含開頭和結束的 Script 標籤。

  3. 在「No Script」文字方塊中輸入或貼上 HTML 程式碼。如果瀏覽器不支援所選擇的 Script 語言，便會顯示此程式碼，而非執行此 Script。

相關主題

  • 編輯 Script


設定 Script 屬性對話方塊選項

這個對話方塊的用途是修改 Script。

若要修改 Script：

  1. 在「語言」文字方塊中，指定 JavaScript 或 VBScript 作為 Script 語言。
  2. 在「類型」彈出式選單中，指定 Script 的類型 (用戶端或伺服器端)。
  3. (選擇性) 在「來源」文字方塊中，指定外部連結的 Script 檔案。

    按一下資料夾圖示或「瀏覽」按鈕以選取檔案，或輸入路徑。

  4. 在「Script」文字方塊中，編輯 Script。
  5. 按一下「確定」套用編輯。

相關主題

  • 在設計檢視中編輯 Script


設定 Script「屬性」檢視窗選項

這個「屬性」檢視窗的用途，是檢查和修改頁面上的 Script。

若要變更 Script 的選項：

  1. 請在「語言」彈出式選單中選取 Script 語言，或在「語言」文字方塊中輸入語言名稱。

    如果您使用的是 JavaScript 而且不確定是哪種版本，請選取 JavaScript，而不要選取 JavaScript1.1 或 JavaScript1.2。

  2. 在「類型」彈出式選單中，指定 Script 的類型 (用戶端或伺服器端)。
  3. (選擇性) 在「來源」文字方塊中，指定外部連結的 Script 檔案。

    按一下資料夾圖示以選取檔案，或輸入路徑。

  4. 按一下「編輯」以修改 Script。

    如需詳細資訊，請參閱設定 Script 屬性對話方塊選項。

相關主題

  • 在設計檢視中編輯 Script


設定伺服器端包含「屬性」檢視窗選項

這個「屬性」檢視窗的用途，是在「設計」檢視中檢查和修改伺服器端包含。

若要變更伺服器端包含的選項：

  1. 若要變更文件中所要包含的檔案，請執行下列其中一項作業：
    • 按一下資料夾圖示，瀏覽並選取要包含的新檔案。
    • 在文字方塊中，輸入要包含之新檔案的路徑和檔案名稱。
  2. 若要編輯伺服器端包含，請按一下「編輯」按鈕，編輯出現在新「文件」視窗中的檔案，然後儲存它。

    變更就會立即反映到目前的文件，以及您後續開啟包含該檔案的任何文件中。

  3. 若要變更伺服器端包含的類型，請選取某個類型選項，如下所示：
    • 如果您的伺服器是 Apache 網站伺服器，請選取「虛擬」。在 Apache 中，「虛擬」可適用於所有狀況，而「檔案」僅能適用某些狀況。
    • 如果您的伺服器是 Microsoft Internet Information Server (IIS)，請選取「檔案」(「虛擬」只在某些特定情況下能適用於 IIS)。

      注意

      不幸的是，IIS 不允許在資料夾階層中目前資料夾以上的資料夾中包含檔案，除非伺服器上已安裝特殊軟體。如果您需要包含 IIS 伺服器上資料夾階層中較上層資料夾的檔案，請向系統管理員洽詢是否已安裝必要軟體。
    • 對於其他種類的伺服器，或是您不知道使用的是何種伺服器時，請向系統管理員洽詢應使用何種選項。

相關主題

  • 插入伺服器端包含
  • 編輯伺服器端包含的內容
  • 伺服器端包含


設定 ColdFusion 標籤「屬性」檢視窗選項

這個「屬性」檢視窗的用途，是在「設計」檢視中檢查和修改 ColdFusion 標記。

若要變更 ColdFusion 程式碼的選項：

  1. 按一下「屬性」按鈕，編輯標籤的屬性或新增屬性。
  2. 如果在標籤的開頭和結束標籤間已有內容，請按一下「內容」按鈕來編輯它。

    選取的標籤必須不是空白標籤 (必須同時具有開頭和結束標籤)，「內容」按鈕才會出現。

  3. 如果標籤含有條件運算式，請在「運算式」文字方塊中進行變更。


設定 ASP Script「屬性」檢視窗選項

這個「屬性」檢視窗的用途，是在「設計」檢視中檢查和修改 ASP 伺服器端 Script。

若要變更 ASP 程式碼的選項：

  1. 按一下「編輯」按鈕。
  2. 在出現的對話方塊中編輯 ASP 伺服器端 Script。
  3. 按一下「確定」套用編輯。


設定 Meta 屬性

meta 標籤是一個 head 元素，它會記錄目前頁面的相關資訊，如字元編碼方式、作者、版權或關鍵字。這些標籤也可以用來提供資訊給伺服器，如逾期日期、重新整理間隔和頁面的 PICS 分級 (PICS 指的是 Internet 內容選取平台 (Platform for Internet Content Selection)，它提供對網頁指定分級的方法，如電影分級)。

Attribute 指定 meta 標籤是否包含與頁面相關的描述性資訊 (name) 或 HTTP 標題資訊 (http-equiv)。

Value 指定您在此標籤中提供的資訊類型。有些值，如 description、keywords 和 refresh 已經定義完整 (而且在 Dreamweaver 中有它們自己個別的「屬性」檢視窗)，但是實際上您可以指定任何值 (例如，creationdate、documentID 或 level)。

Content 是實際的資訊。例如，如果您將 Value 指定為 level，則您可能會將 Content 指定為 beginner、intermediate 或 advanced。


設定標題屬性

只有一個標題屬性：頁面的標題。標題會出現在 Dreamweaver 的「文件」視窗標題列中，還有當您在大多數的瀏覽器中檢視頁面時，標題也會出現在瀏覽器的標題列中。標題也會出現在工具列中。在「標題」文字方塊中輸入頁面標題。


設定關鍵字屬性

很多搜尋引擎 Robot (自動瀏覽網站的程式，它會收集搜尋引擎的資訊以編列索引) 會讀取「關鍵字」meta 標籤的內容，並使用該資訊將您的頁面編列到它們的資料庫索引中。因為有些搜尋引擎會限制編列索引的關鍵字或字元數，或者如果您超過該限制便會略過所有關鍵字，所以最好只使用一些經過適當挑選的關鍵字。

在標記為「關鍵字」的文字方塊中輸入關鍵字，以逗號分隔。


設定說明屬性

很多搜尋引擎 Robot (自動瀏覽網站的程式，它會收集搜尋引擎的資訊以編列索引) 會讀取「說明」meta 標籤的內容。有些會使用該資訊將您的頁面編列到它們的資料庫索引中，而有些也會在搜尋結果頁面上顯示該資訊 (而不是顯示文件的前幾行)。很多搜尋引擎在編列索引時會對字數加以限制，因此最好將您的敘述限制在幾個單字之內 (例如 Pork barbecue catering in Albany, Georgia 或 web design at reasonable rates for clients worldwide)。

在標記為「說明」的文字方塊中輸入描述性文字。


設定重新整理屬性

在一段特定時間之後，使用「重新整理」元素來指定瀏覽器自動重新整理您的頁面，方式是重新載入目前的頁面或前往不同的頁面。這個元素經常用來將使用者從某個 URL 重新導向另一個 URL，通常是在顯示 URL 已變更的文字訊息之後。

Delay 是指瀏覽器重新整理頁面之前所等待的時間 (以秒計算)。若要讓瀏覽器在完成載入之後立即重新整理頁面，請在這個文字方塊中輸入 0。

Action 會指定在指定的延遲時間之後，瀏覽器應該前往不同的 URL 或重新整理目前的頁面。若要開啟不同的 URL (而不是重新整理目前的頁面)，請按一下「瀏覽」按鈕，然後瀏覽到要載入的頁面並選取它。


設定路徑基準屬性

使用「路徑基準」元素來設定相對於頁面中之所有文件相對路徑的基底 URL。

Href 是基底 URL。按一下「瀏覽」按鈕，瀏覽到檔案並選取它，或在文字方塊中輸入路徑。

Target 會指定應該在其中開啟所有連結文件的頁框或視窗。選取目前頁框組中的任一頁框或下列任一保留名稱：

  • _blank 會在新的且未命名的瀏覽器視窗中載入連結的文件。
  • _parent 會在上一層頁框組或包含連結的頁框視窗中載入連結的文件。如果包含連結的頁框不是巢狀的，則它的作用就等於 _top；它會在完整的瀏覽器視窗中載入連結的文件。
  • _self 會在與連結相同的頁框或視窗中載入連結的文件。這個目標為預設值，因此您通常不用指定它。
  • _top 會在完整的瀏覽器視窗中載入連結的文件，然後移除所有頁框。


設定連結標籤的屬性

使用 link 標籤來定義目前文件與另一個檔案之間的關係。

注意

head 區段中的 link 標籤與 body 區段中文件之間的 HTML 連結是不同的。

Href 是您定義關係的目標檔案的 URL。按一下「瀏覽」按鈕，瀏覽到檔案並選取它，或在文字方塊中輸入路徑。請注意，這個屬性並不會以一般的 HTML 概念指出您所連結的檔案；在「連結」元素中所指定的關係要複雜得多。

ID 指定該連結的唯一識別名稱。

Title 描述關係。這個屬性對連結的樣式表有特殊的關聯；如需詳細資訊，請參閱「全球資訊網協會」(World Wide Web Consortium) 網站上「HTML 4.0 規格」的「外部樣式表」一節，網址是 www.w3.org/TR/REC-html40/present/styles.html#style-external。

Rel 指定目前文件和 Href 文字方塊中的文件之間的關係。可能的值包括：Alternate、Stylesheet、Start、Next、Prev、Contents、Index、Glossary、Copyright、Chapter、Section、Subsection、Appendix、Help 和 Bookmark。若要指定一種以上的關係，請以空格分隔值。

Rev 指定目前文件和 Href 文字方塊中的文件之間的反向關係 (與 Rel 相反)。可能的值與 Rel 的可能值相同。


設定程式碼屬性

這個「屬性」檢視窗可以讓您編輯伺服器語言標籤 (例如 ASP 標籤) 中的程式碼，而不需進入「程式碼」檢視。

編輯會顯示「編輯內容」對話方塊，您可以在其中編輯標籤的內容。完成編輯後，請按一下「確定」。

相關主題

設定網路應用程式


使用選取子項目命令

「選取子項目」命令 (「編輯＞選取子項目」) 可讓您以視覺化的方式來選取子標籤。

如果您在「設計」檢視中選取包含子標籤的物件 (例如 HTML 表格)，您可以利用選取「編輯＞選取子項目」快速選取該物件第一個子標籤。

注意

這個命令只可以在「設計」檢視中啟用。

舉例來說，<table> 標籤通常包含 <tr> 子標籤。如果您在標籤選取器中選取 <table> 標籤，您可以利用選取「編輯＞選取子項目」來選取該表格的第一列。Dreamweaver 會在標籤選取器中選取第一個 <tr> 標籤。由於 <tr> 標籤本身就有名為 <td> 的子標籤，再一次選取「編輯＞選取子項目」就會選取表格的第一個儲存格。


準備建立動態網站

如果您要建置動態網路應用程式，請先從設定應用程式伺服器並連結到資料庫開始。

這部份包含下列各章：

設定網路應用程式

適用於 ColdFusion 開發人員的資料庫連線

ASP.NET 開發人員的資料庫連線

適用於 ASP 開發人員的資料庫連線

適用於 JSP 開發人員的資料庫連線

PHP 開發人員的資料庫連線

資料庫連線疑難排解


設定網路應用程式

本章說明如何設定您的系統，以在 Macromedia Dreamweaver 8 中建立網路應用程式。

本章包含下列各節：

建立網路應用程式的需求

設定網站伺服器

設定應用程式伺服器

建立應用程式的根資料夾

定義 Dreamweaver 網站

連線到資料庫


建立網路應用程式的需求

若要在 Dreamweaver 中建立網路應用程式，您需要下列軟體：

  • 網站伺服器 (請參閱設定網站伺服器)
  • 能和您的網站伺服器共同作業的應用程式伺服器 (請參閱設定應用程式伺服器)

    注意

    在網路應用程式的內文中，網站伺服器和應用程式伺服器這兩個詞指的是軟體，而不是硬體。

如果想要使用搭配您應用程式的資料庫，您需要下列額外的軟體：

  • 資料庫系統
  • 支援您資料庫的資料庫驅動程式

如需設定網路應用程式資料庫的詳細資訊，請參閱連線到資料庫。

幾個主機租賃公司提供可讓您使用其軟體來測試和部署網路應用程式的計劃。在某些情況下，您可以將必要的軟體和 Dreamweaver 安裝在同一部電腦上，以配合您的開發需求。您也可以將軟體安裝在網路電腦上 (一般是 Windows 2000 或 XP 電腦)，這樣小組的其他開發人員就可以進行專案了。


設定網站伺服器

若要執行網路應用程式，您需要網站伺服器。網站伺服器是提供檔案以回應網站瀏覽器要求的軟體。網站伺服器有時稱為 HTTP 伺服器。常見的網站伺服器包括 Microsoft Internet Information Server (IIS)、Netscape Enterprise Server、Sun ONE Web Server 及 Apache HTTP Server。

如果您並未使用虛擬主機服務，請選擇一個網站伺服器，並將它安裝在您的本機電腦或遠端電腦上。想要開發 ColdFusion 網路應用程式的 Windows 使用者，可以使用 ColdFusion MX 7 應用程式伺服器開發版中的網站伺服器，安裝及使用都是免費的。如需詳細資訊，請參閱安裝 ColdFusion 應用程式伺服器。

其他的 Windows 使用者可以藉由安裝 IIS，執行位於他們的本機電腦上的網站伺服器，這個網站伺服器可能已經安裝在系統上。請檢查您的資料夾結構，看它是否包含 C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。如果您想要安裝 IIS，請參閱「Dreamweaver 入門」中的安裝網站伺服器。

ASP.NET 網頁只能搭配一個網站伺服器使用：Microsoft IIS 5 或更新版本。因為 IIS 5 是 Windows 2000 和 Windows XP Professional 作業系統的服務，所以您可以使用這兩種版本的 Windows 來裝載 ASP.NET 應用程式。但是，您可以在任何執行 Dreamweaver 的電腦 (包括 Macintosh) 上開發 (相對於執行) ASP.NET 應用程式。

如果您是 Macintosh 的使用者，則您可以使用虛擬主機服務，或將所需的軟體安裝在遠端電腦上。您也可以使用作業系統中所安裝的 Apache 網站伺服器和 PHP 應用程式伺服器，在本機上開發 PHP 網站。如需詳細資訊，請參閱安裝 PHP 應用程式伺服器。

如需有關安裝並設定其他網站伺服器的詳細資訊，請參閱伺服器廠商的文件，或向您的系統管理員洽詢。


設定應用程式伺服器

若要執行網路應用程式，您的網站伺服器需要搭配應用程式伺服器工作。應用程式伺服器是協助網站伺服器處理動態網頁的軟體。

本節包含下列主題：

  • 選擇您的應用程式伺服器
  • 安裝 ColdFusion 應用程式伺服器
  • 安裝 ASP.NET 應用程式伺服器
  • 安裝 ASP 應用程式伺服器
  • 安裝 JSP 應用程式伺服器
  • 安裝 PHP 應用程式伺服器


選擇您的應用程式伺服器

對應用程式伺服器的選擇取決於幾個因素，包括您的預算、您想使用的伺服器技術 (ColdFusion、ASP.NET、ASP、JSP 或 PHP) 以及您選擇的網站伺服器。

預算 有些廠商販售頂級的應用程式伺服器，在購買和管理上都很昂貴。有些廠商則提供較簡單、較經濟的解決方案 (例如 Macromedia ColdFusion 和 JRun 伺服器)。有些應用程式伺服器是建立在網站伺服器中 (如 Microsoft IIS)，有些則可以從 Internet 免費下載 (如 Jakarta Tomcat 和 PHP)。

伺服器技術 各種應用程式伺服器會使用不同的技術。Dreamweaver 支援五種伺服器技術：ColdFusion、ASP.NET、ASP、JSP 和 PHP。如需詳細資訊，請參閱「Dreamweaver 入門」中的選擇伺服器技術。下表顯示 Dreamweaver 支援的五種伺服器技術可使用的常見應用程式伺服器：

伺服器技術 | 應用程式伺服器
ColdFusion | Macromedia ColdFusion MX 7
ASP.NET | 搭配 .NET Framework 的 Microsoft IIS 6
ASP | Microsoft IIS Sun ONE Active Server Pages
JSP | Macromedia JRun Sun ONE Application Server IBM WebSphere Apache Tomcat BEA WebLogic
PHP | PHP 伺服器

網站伺服器 您對應用程式伺服器的選擇也取決於您想使用的網站伺服器。請確定應用程式是搭配您的網站伺服器工作。例如，.NET Framework 只能搭配 IIS 5 或更新版本工作。


安裝 ColdFusion 應用程式伺服器

若要執行 ColdFusion 網頁，您需要 ColdFusion 應用程式伺服器。這個伺服器可供 Windows、Linux、Solaris 和 HP-UX 系統使用。

Windows 使用者可以從 Macromedia 網站下載並安裝功能齊全的 ColdFusion MX 7 開發版，網址是 www.macromedia.com/tw/software/coldfusion/。ColdFusion MX 7 Developer Edition 的複本也可以在 Dreamweaver CD 中取得 (僅限於 Windows 版)。

注意

開發版僅能用於非商業用途的網路應用程式開發及測試工作。它不具有部署的授權。它支援來自本地主機的要求以及兩個遠端 IP 位址，您可以隨時用來開發及測試網路應用程式；此軟體沒有使用期限。如需詳細資訊，請參閱「使用 ColdFusion」(「說明＞使用 ColdFusion」) 中的「ColdFusion MX 7 產品版本」。

在安裝期間，您可以將 ColdFusion 設定為使用在 ColdFusion 中建立的網站伺服器，或是安裝在系統上的其他網站伺服器。一般來說，您的開發環境與生產環境越相近越好。因此，如果您的開發電腦上已經有網站伺服器，如 Microsoft IIS，您可能會希望選取它，而不是選取內建的 ColdFusion 網站伺服器。

Macintosh 使用者可以使用虛擬主機服務和 ColdFusion 計劃，或在執行網站伺服器的遠端 Windows、Linux、Solaris 或 HP-UX 電腦上安裝 ColdFusion。您也可以將 ColdFusion 安裝在執行 J2EE 伺服器 (例如 JRun 或 Tomcat) 的 Mac OS X 電腦上。如需詳細資訊，請參閱 Macromedia 網站，網址是 www.macromedia.com/go/cfmx7_mac。

安裝應用程式伺服器後，請為您的網路應用程式建立根資料夾。請參閱建立應用程式的根資料夾。


安裝 ASP.NET 應用程式伺服器

若要開發與執行 ASP.NET 網頁，您需要下列軟體：

  • 執行 IIS 5 或更新版本的 Windows 2000 或 Windows XP Professional
  • Microsoft .NET Framework 1.1，您可以從 Microsoft 網站下載它
  • Microsoft .NET Framework 1.1 Software Development Kit (SDK)，您可以從 Microsoft 網站下載它

請確定 Framework 和 SDK 是在執行 IIS 5 或更新版本的 Windows 2000 或 Windows XP Professional 系統上安裝並執行。

若要安裝 .NET Framework 和 SDK：

  1. 檢視「新增或移除程式」對話方塊 (「開始＞控制台＞新增或移除程式」) 中的應用程式清單，查看系統上是否已經安裝 .NET Framework。

    如果有列出 Microsoft .NET Framework 1.1，表示已經安裝了 Framework，您不需要再次進行安裝。跳至步驟 3。

  2. 如果系統上沒有安裝 .NET Framework，請從 Microsoft 網站 (網址是 http://msdn.microsoft.com/netframework/downloads/framework1_1/) 安裝 Microsoft .NET Framework 1.1 Redistributable 套件，並依照網站上的指示進行安裝。

    您是以安裝 Windows 更新程式的方式來安裝 Framework。

  3. 從相同的網站下載 Microsoft .NET Framework 1.1 Software Development Kit (SDK)，並依照指示進行安裝。

我們強烈建議您在安裝 .NET Framework 和 SDK 之後，也一併安裝 Microsoft Data Access Components (MDAC) 2.7 套件。您可以從 Microsoft 網站免費下載及安裝 MDAC 2.7 套件，網址是 http://msdn.microsoft.com/data/mdac/downloads/。

Macintosh 使用者可以使用虛擬主機服務和 ASP.NET 計劃，或在執行 IIS 5 或更新版本的遠端 Windows 2000 或 Windows XP Professional 電腦上安裝 .NET Framework 和 SDK。

安裝 .NET Framework 和 SDK 之後，請建立網路應用程式的根資料夾。請參閱建立應用程式的根資料夾。


安裝 ASP 應用程式伺服器

若要執行 ASP 網頁，您需要支援 Microsoft Active Server Pages 2.0 的應用程式伺服器，例如 Windows 2000 和 Windows XP Professional 所隨附的 Microsoft IIS。

Windows 使用者可以在本機電腦上安裝和執行 IIS。如需相關說明，請參閱「Dreamweaver 入門」中的安裝網站伺服器。

Macintosh 使用者可以使用虛擬主機服務和 ASP 計劃，或在遠端電腦上安裝 IIS。

安裝了 IIS 後，請為您的網路應用程式建立根資料夾。請參閱建立應用程式的根資料夾。


安裝 JSP 應用程式伺服器

若要執行 JSP 網頁，您需要支援 JavaServer Pages 的應用程式伺服器。以下是一些常見的選擇：

  • 可供 Windows、Mac OS X、Linux、Solaris 或 UNIX 使用的 Macromedia JRun。您可以從 Macromedia 網站下載 JRun 的試用版，網址是 www.macromedia.com/go/jrun/。
  • 可供 Windows 和 UNIX (包含 Mac OS X) 使用的 Tomcat。您可以從 Jakarta Project 網站下載 Tomcat 的複本，網址是 http://jakarta.apache.org/tomcat/。如需關於在 Macintosh 上安裝 Tomcat 的詳細資訊，請參閱 Apple 網站，網址是 http://developer.apple.com/internet/java/tomcat1.html。

安裝 JSP 應用程式伺服器後，請為您的網路應用程式建立根資料夾。請參閱建立應用程式的根資料夾。


安裝 PHP 應用程式伺服器

若要執行 PHP 網頁，您需要 PHP 應用程式伺服器，它是可在網路上取得的開放資源軟體。有幾種應用程式伺服器版本存在於 Windows、Linux、UNIX、HP-UX、Solaris 和 Mac OS X 系統中。應用程式伺服器會搭配下列網站伺服器工作：Apache、Microsoft IIS、Netscape 和 Sun ONE 伺服器，以及幾乎所有支援 CGI 介面的網站伺服器。

您可以從 PHP 網站下載 PHP 應用程式伺服器，網址是 www.php.net/downloads.php。若使用 PHP 5，根據預設，Windows 安裝程式不會安裝或啟用可讓 PHP 搭配使用 MySQL 資料庫伺服器的 MySQL 擴充功能。您必須個別安裝與啟用此擴充功能。如需相關說明，請參閱「Dreamweaver 入門」中的安裝 PHP 應用程式伺服器 (Windows)。如需 MySQL 擴充功能的詳細資訊，請參閱 PHP 網站，網址是 www.php.net/manual/en/ref.mysql.php。

如果您是 Macintosh 使用者，則您可以使用隨作業系統安裝的 PHP 應用程式伺服器。如需詳細資訊，請參閱下列網站：

  • www.macromedia.com/go/php_macintosh/
  • http://developer.apple.com/internet/opensource/php.html

如需應用程式伺服器的詳細資訊，請參閱 PHP 文件，您也可以從 PHP 網站下載此文件，網址是 www.php.net/download-docs.php。

安裝 PHP 應用程式伺服器後，請為您的網路應用程式建立根資料夾。請參閱建立應用程式的根資料夾。


建立應用程式的根資料夾

與主機租賃公司簽約、或是自行安裝伺服器軟體之後，請在執行網站伺服器的電腦上為網路應用程式建立根資料夾。

請確定網站伺服器已發佈該資料夾 - 也就是說，網站伺服器可以在這個資料夾或其任何子資料夾中提供任何檔案，以回應來自網頁瀏覽器的 HTTP 要求。例如，在執行 ColdFusion MX 7 的電腦上，\CFusionMX7\wwwroot 資料夾或任何子資料夾中的檔案都可以提供給網頁瀏覽器使用。

以下是所選取的網站伺服器的預設根資料夾：

網站伺服器 | 預設根資料夾
ColdFusion MX 7 | \CFusionMX7\wwwroot
IIS | \Inetpub\wwwroot
Apache (Windows) | \apache\htdocs
Apache (Macintosh) | Users:MyUserName:Sites
Jakarta Tomcat (Windows) | \jakarta-tomcat-4.x.x\webapps\ROOT\

若要測試網站伺服器，請將測試 HTML 網頁置於預設的根資料夾中，然後在瀏覽器中輸入網頁的 URL，以嘗試開啟它。URL 包含網域名稱 (如 www.mysite.com) 和 HTML 網頁的檔案名稱，如下：

www.mysite.com/testpage.htm

如果網站伺服器正在您的本機電腦上執行，您可以使用 localhost 來代替網域名稱。利用前例，根據您的網站伺服器來輸入下面的 localhost URL：

網站伺服器 | Localhost URL
ColdFusion MX 7 | http://localhost:8500/testpage.htm
IIS | http://localhost/testpage.htm
Apache (Windows) | http://localhost:80/testpage.htm
Apache (Macintosh) | http://localhost/~MyUserName/testpage.htm (其中 MyUserName 代表您的 Macintosh 使用者名稱)
Jakarta Tomcat (Windows) | http://localhost:8080/testpage.htm

注意

預設情況下，ColdFusion MX 7 網站伺服器是在連接埠 8500 上執行，而 Jakarta Tomcat 網站伺服器則是在連接埠 8080 上執行。

如果頁面未如預期般開啟，請檢查有無以下錯誤：

  • 網站伺服器未啟動。查閱網站伺服器文件中有關啟動的說明。
  • 檔案沒有 .htm 或 .html 的副檔名。
  • 您在瀏覽器的「網址」文字方塊中，輸入的是網頁的檔案路徑 (例如，c:\CFusionMX7\wwwroot\testpage.htm)，而非其 URL (例如，http://localhost:8500/testpage.htm)。
  • URL 包含輸入錯誤。請檢查錯誤，並確定檔案名稱的後面沒有斜線，例如 http://localhost:8080/testpage.htm/。

在您為應用程式建立根資料夾之後，請定義 Dreamweaver 網站來管理您的檔案。請參閱定義 Dreamweaver 網站。


定義 Dreamweaver 網站

設定您的系統來開發網路應用程式後，請定義 Dreamweaver 網站來管理您的檔案。

在您開始之前，請確定您符合下列需求：

  • 您具有網站伺服器的存取權。網站伺服器可在您的本機電腦、開發伺服器等遠端電腦，或主機租賃公司所維護的伺服器上執行。請參閱設定網站伺服器。
  • 應用程式伺服器會在執行您網站伺服器的系統上安裝和執行。請參閱設定應用程式伺服器。
  • 在執行您網站伺服器的系統上為您的網路應用程式建立根資料夾。如需詳細資訊，請參閱建立應用程式的根資料夾。

為您的網路應用程式定義 Dreamweaver 網站包括三個步驟：

  1. 將位於您硬碟上的資料夾定義為 Dreamweaver 本機資料夾，用來儲存網站檔案的工作複本 (請參閱定義本機資料夾)。
  2. 將執行網站伺服器的電腦上的資料夾定義為 Dreamweaver 遠端資料夾 (請參閱定義遠端資料夾)。
  3. 指定當您工作時，Dreamweaver 要將動態網頁送到哪裡進行處理 (請參閱指定可以處理動態網頁的位置)。

定義 Dreamweaver 網站後，您就可以開始建立您的網路應用程式。


定義本機資料夾

您可以為您建立的每個新網路應用程式定義 Dreamweaver 本機資料夾。本機資料夾就是您用來將網站檔案的工作複本儲存在硬碟中的資料夾。定義本機資料夾也提供您管理檔案，以及按一下時在您的網站伺服器間傳送檔案的功能。

若要定義 Dreamweaver 本機資料夾：

  1. 請在您的本機磁碟中建立一個資料夾來儲存檔案的工作複本。

    您可能會想要建立子資料夾來儲存影像檔案和其他資源。

  2. 在 Dreamweaver 中，選取「網站＞管理網站」，按一下「管理網站」對話方塊上的「新增」按鈕，並在快速選單中選取「網站」。

    「網站定義」對話方塊就會出現。

  3. 如果出現這個精靈，請按一下「進階」，然後從「分類」清單中選取「本地資訊」(應該是預設值)。
  4. 在「網站名稱」文字方塊中，輸入 Dreamweaver 網站的描述性名稱。
  5. 在「本地根資料夾」文字方塊中，指定您在步驟 1 中建立的資料夾。

    您可以輸入路徑，或是按一下資料夾圖示，以瀏覽和選取資料夾。

  6. 如果您願意，請完成「本地資訊」類別中的其他選項 (這些選項是讓網站運作的必要項目)。

    如需關於這些選項的詳細資訊，請參閱設定本機資訊類別選項。

使「網站定義」對話方塊保持開啟。然後，您必須指定一個遠端資料夾。請參閱定義遠端資料夾。


定義遠端資料夾

定義本機資料夾後，您就可以為您的 Dreamweaver 網站定義遠端資料夾。遠端資料夾就是您在網站伺服器上為您的網路應用程式建立的資料夾 (請參閱建立應用程式的根資料夾)。

如果您在定義本機資料夾中定義的資料夾可以兼作您網路應用程式的根資料夾，您就不需要定義遠端資料夾 (這表示網站伺服器是在您的本機電腦上執行)。

若要定義 Dreamweaver 遠端資料夾：

  1. 如果「網站定義」對話方塊尚未開啟，請選取「網站＞管理網站」，在「管理網站」對話方塊的清單中選取您的網站，並按一下「編輯」，以開啟「網站定義」對話方塊。

    「網站定義」對話方塊就會出現。

  2. 如果出現這個精靈，請按一下「進階」，然後從「分類」清單中選取「遠端資訊」。

    「遠端資訊」對話方塊便會出現。

  3. 在「存取」彈出式選單中，選取下列其中一個選項：「本機/區域網路」、FTP 或 RDS。

    您的選擇會通知 Dreamweaver 您想要如何在本機資料夾和遠端資料夾間傳送檔案。

    注意

    若要使用 RDS，遠端資料夾必須在執行 ColdFusion 的電腦上。

    您也可以利用選取「Microsoft Visual SourceSafe」將檔案傳送至 Microsoft Visual SourceSafe 應用程式 。(Microsoft Visual SourceSafe 是開發人員用來作為檔案版本控制)。如果您選取這個選項，便需要定義個別的資料夾。如需相關說明，請參閱指定可以處理動態網頁的位置。

  4. 選取存取方法之後，請依據您的需要設定存取選項。

    如需詳細資訊，請參閱設定遠端資訊類別選項。

使「網站定義」對話方塊保持開啟。接下來，您需要定義資料夾來處理動態網頁。請參閱指定可以處理動態網頁的位置。


指定可以處理動態網頁的位置

在 Dreamweaver 中定義遠端資料夾後，請指定可以處理動態網頁的資料夾。Dreamweaver 會使用這個資料夾在您工作時產生動態內容和連線到資料庫。

一般說來，會指定您在網站伺服器上建立的根資料夾 (參閱建立應用程式的根資料夾)，因為該伺服器可能也執行了一個可以處理動態網頁的應用程式伺服器。

注意

根資料夾可以是本機或遠端，視您網站伺服器執行的位置而定。

若要指定 Dreamweaver 可以處理動態網頁的位置：

  1. 如果「網站定義」對話方塊尚未開啟，請選取「網站＞管理網站」，在「管理網站」對話方塊的清單中選取您的網站，並按一下「編輯」，以開啟「網站定義」對話方塊。

    「網站定義」對話方塊就會出現。

  2. 如果出現這個精靈，請按一下「進階」，然後從「分類」清單中選取「測試伺服器」。

    「測試伺服器」對話方塊便會出現。當您工作時，Dreamweaver 需要測試伺服器的服務來產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、執行伺服器或生產伺服器。只要它能處理您計劃要開發的動態網頁類型，選擇哪一種伺服器並不重要。

  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定測試伺服器類別選項。

在定義 Dreamweaver 網站之後，就可以連線到資料庫 (請參閱建立應用程式的根資料夾)。

相關主題

  • 設定 URL 前置詞


連線到資料庫

如果您想搭配網路應用程式使用資料庫，您必須先與它連線。如需有關資料庫連線的一般討論，請參閱了解資料庫連結。

Dreamweaver 會根據您選擇的伺服器技術，而以不同的方式來處理資料庫連線。請參閱下列章節：

  • 適用於 ColdFusion 開發人員的資料庫連線
  • ASP.NET 開發人員的資料庫連線
  • 適用於 ASP 開發人員的資料庫連線
  • 適用於 JSP 開發人員的資料庫連線
  • PHP 開發人員的資料庫連線


參考

本節將說明「網站定義」對話方塊中的「測試伺服器」類別，以及描述每個「測試伺服器」類別可用的欄位與設定：

  • 設定測試伺服器類別選項
  • 設定 URL 前置詞


設定測試伺服器類別選項

這個對話方塊的用途是指定測試伺服器，Dreamweaver 可用它來處理動態網頁，以達到撰寫目的。

當您工作時，Dreamweaver 需要測試伺服器的服務來產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發伺服器、執行伺服器或生產伺服器。只要它能處理您計劃要開發的動態網頁類型，選擇哪一種伺服器並不重要。

請確定您在完成這個對話方塊前定義了本機和遠端資料夾。如需相關說明，請參閱定義本機資料夾和定義遠端資料夾。您可以經常對您的測試伺服器使用遠端資料夾設定，因為位於遠端資料夾中的動態網頁一般可以由應用程式伺服器處理。

若要指定測試伺服器：

  1. 選取伺服器技術。
  2. 請接受預設的「測試伺服器」設定值，或輸入不同的設定值。

    依預設值，Dreamweaver 會假設應用程式伺服器在與您的網站伺服器相同的系統上執行。如果您在「網站定義」對話方塊的「遠端資訊」類別中定義一個遠端資料夾，或如果應用程式伺服器在與遠端資料夾 (包括您的本機電腦) 相同的系統上執行，請接受「測試伺服器」類別中的預設值。

    如果您沒有在「遠端資訊」類別中指定遠端資料夾，「測試伺服器」類別就會預設為您在「本機資訊」類別中定義的本機資料夾。只有在符合下列兩個條件時，您可以不管這項設定：

    • 您的網站伺服器和應用程式伺服器都在本機電腦上執行。例如，如果您是在本機 Windows 2000 系統上同時執行 IIS 和 ColdFusion 的 ColdFusion 開發人員。
    • 您的本機根資料夾是您主目錄的子資料夾。例如，如果使用的是 IIS，您的本機根資料夾就是 c:\Inetpub\wwwroot\ 資料夾的子資料夾，或這個資料夾本身。

    如果您的本機根資料夾不是您主目錄的子資料夾，就必須將本機根資料夾定義為網站伺服器中的虛擬目錄。

    如需有關主目錄和虛擬目錄的詳細資訊，請參閱設定 URL 前置詞。

    應用程式伺服器可能在與您的遠端網站不同的系統上執行。例如，如果您在「遠端資訊」類別中選取的「存取」選項是 Microsoft Visual SourceSafe，那麼您就必須在「測試伺服器」類別中指定不同的伺服器。

  3. 在「URL 前置詞」方塊中輸入使用者在其瀏覽器中輸入的 URL，來開啟您的網路應用程式，但不包含任何檔案名稱。

    假設您應用程式的 URL 是 www.macromedia.com/mycoolapp/start.jsp。在這個情況下，您會輸入下列 URL 前置詞：www.macromedia.com/mycoolapp/。

    如果 Dreamweaver 在與您網站伺服器相同的系統上執行，就可以使用 localhost 一詞來代替您的網域名稱。例如，假設您執行的是 IIS，而應用程式 URL 如下：

    http://buttercup_pc/mycoolapp/start.jsp

    然後您就可以輸入下列 URL 前置詞：

    http://localhost/mycoolapp/

    如需詳細資訊，請參閱設定 URL 前置詞。

  4. 按一下「確定」，然後按一下「完成」。

Dreamweaver 會將新的網站新增到您的網路清單中。

相關主題

  • 指定可以處理動態網頁的位置


設定 URL 前置詞

您必須指定一個 URL 前置詞，Dreamweaver 才可以使用測試伺服器的服務，在您工作時顯示資料並連線到資料庫。Dreamweaver 使用設計階段連線，來提供您有關資料庫的實用資訊，如資料庫中的表格名稱和表格中的欄位名稱。

URL 前置詞是由網域名稱以及您的網站主目錄的任何子目錄或虛擬目錄所組成。

注意

本節使用用於 Microsoft IIS 中的術語。術語可能會因伺服器而異，但是相同的概念可以套用到大部分的網站伺服器上。

主目錄就是對應到您網站網域名稱的伺服器上的資料夾。假設您要用來處理動態網頁的資料夾是 c:\sites\company\，而且這個資料夾就是您的主目錄 (也就是說，這個資料夾會對應到您網站的網域名稱，例如 www.mystartup.com)，在此情況下，URL 前置詞就是 http://www.mystartup.com/。

如果您想用來處理動態網頁的資料夾是您主目錄的子資料夾，只要將子資料夾新增到 URL 即可。假設您的主目錄是 c:\sites\company\，網站的網域名稱是 www.mystartup.com，而您想要用來處理動態網頁的資料夾是 c:\sites\company\inventory，請輸入下列 URL 前置詞：

http://www.mystartup.com/inventory/

如果您想用來處理動態網頁的資料夾不是您的主目錄或它的任何子目錄，就必須建立一個虛擬目錄。

虛擬目錄就是雖然出現在 URL 中，但實際上並不包含在伺服器主目錄中的資料夾。若要建立虛擬目錄，請為 URL 中的資料夾路徑指定一個別名。假設主目錄是 c:\sites\company，處理資料夾是 d:\apps\inventory，而您為這個資料夾定義了一個稱為 warehourse 的別名。請輸入下列 URL 前置詞：

http://www.mystartup.com/warehouse/

Localhost 一詞是指當用戶端 (通常是瀏覽器，但在這個範例中是 Dreamweaver) 與您的網站伺服器在相同的系統中執行時，您的 URL 中的主目錄。假設 Dreamweaver 是在與網站伺服器相同的 Windows 系統上執行，您的主目錄是 c:\sites\company，而且您定義了一個名稱為 warehouse 的虛擬目錄來表示您想要用來處理動態網頁的資料夾。下面是您會為所選取的網站伺服器輸入的 URL 前置詞：

網站伺服器 | URL 前置詞
ColdFusion MX 7 | http://localhost:8500/warehouse/
IIS | http://localhost/warehouse/
Apache (Windows) | http://localhost:80/warehouse/
Jakarta Tomcat (Windows) | http://localhost:8080/warehouse/

注意

依預設值，ColdFusion MX 7 網站伺服器是在連接埠 8500 上執行，Apache 網站伺服器是在連接埠 80 上執行，而 Jakarta Tomcat 網站伺服器則是在連接埠 8080 上執行。

如果是執行 Apache 網站伺服器的 Macintosh 使用者，您的個人主目錄是 Users:MyUserName:Sites，其中 MyUserName 就是您的 Macintosh 使用者名稱。當您安裝 Mac OS 10.1 或以上版本時，會自動為這個資料夾定義名稱為 ~MyUserName 的別名。因此，您在 Dreamweaver 中的預設 URL 前置詞如下：

http://localhost/~MyUserName/

假設您要用來處理動態網頁的資料夾是 Users:MyUserName:Sites:inventory，則 URL 前置詞如下：

http://localhost/~MyUserName/inventory/

相關主題

  • 設定測試伺服器類別選項
  • 指定可以處理動態網頁的位置


適用於 ColdFusion 開發人員的資料庫連線

當您在使用 Macromedia Dreamweaver 8 開發 Macromedia ColdFusion 應用程式時，可以連線至資料庫。

本章假設您已經設定好 ColdFusion 網路應用程式 (請參閱設定網路應用程式)，並且假設在您的本機電腦或者您擁有網路或 FTP 存取權的系統上已經設定好資料庫。

本章包含下列主題：

連線到資料庫

編輯或刪除資料庫連線

若要連線到 Dreamweaver 所提供的範例資料庫，請參閱「Dreamweaver 入門」中的「ColdFusion 範例網站的設定」。若要瞭解更多有關資料庫和資料庫連線的資訊，請參閱資料庫入門手冊。


連線到資料庫

在 Dreamweaver 中開發 ColdFusion 網路應用程式時，您可以選取在「ColdFusion 管理員」(伺服器的管理主控台) 中定義的 ColdFusion 資料來源，藉此連線到資料庫。

您必須讓 Dreamweaver 知道在哪裡可以找到 ColdFusion 資料來源，然後才能連線到資料庫。為了方便在設計階段擷取 ColdFusion 資料來源，Dreamweaver 將 Script 置於執行 ColdFusion 之電腦的資料夾中。您必須在「網站定義」對話方塊的「測試伺服器」類別中指定這個資料夾。如需詳細資訊，請參閱指定可以處理動態網頁的位置。

接下來，您必須在 Dreamweaver 或「ColdFusion 管理員」中建立 ColdFusion 資料來源 (如果尚未建立的話)。如需詳細資訊，請參閱建立或修改 ColdFusion 資料來源。

建立好 ColdFusion 資料來源之後，您就可以在 Dreamweaver 中用它連線到資料庫。如需詳細資訊，請參閱在 Dreamweaver 中連線至資料庫。


建立或修改 ColdFusion 資料來源

在您可以使用頁面中的資料庫資訊前，必須先建立一個 ColdFusion 資料來源。如果您正在執行 ColdFusion MX 7 或更新的版本，您可以直接在 Dreamweaver 中建立或修改資料來源。如果您正在執行 ColdFusion MX，請務必使用伺服器的管理主控台「ColdFusion MX 管理員」，來建立或修改資料來源。在這種情況下，您仍然可以使用 Dreamweaver 開啟「ColdFusion MX 管理員」。

若要在執行 ColdFusion MX 7 或更新的版本時，建立或修改 ColdFusion 資料來源：

  1. 請確定將執行 ColdFusion MX 7 或更新版本的電腦定義為您網站的測試伺服器。

    如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

  2. 在 Dreamweaver 中開啟任一個 ColdFusion 頁面。
  3. 若要建立新的資料來源，請按一下「資料庫」面板 (「視窗＞資料庫」) 中的「加號」(+) 按鈕，然後輸入在出現的對話方塊中資料庫驅動程式特有的參數值。

    注意

    只有在您執行 ColdFusion MX 7 或更新版本時，Dreamweaver 才會顯示「加號」按鈕。

    如需詳細資訊，請參閱驅動程式廠商的文件，或洽詢您的系統管理員。

  4. 若要修改資料來源，請按兩下「資料庫」面板中的「資料庫連線」，然後在「連線」對話方塊中做修改。

    您可以編輯除了資料來源的名稱之外的任何參數。如需詳細資訊，請參閱驅動程式廠商的文件，或洽詢您的系統管理員。

若要在執行 ColdFusion MX 6.1 或 6.0 時，建立或修改 ColdFusion 資料來源：

  1. 在 Dreamweaver 中開啟任一個 ColdFusion 頁面。
  2. 在 Dreamweaver 的「資料庫」面板 (「視窗＞資料庫」) 中，按一下面板工具列上的「修改資料來源」圖示。

    「ColdFusion MX 管理員」便會在瀏覽器中開啟。

  3. 登入「ColdFusion MX 管理員」，然後建立或修改資料來源。

    如需相關說明，請參閱「使用 ColdFusion」(「說明＞使用 ColdFusion」)。

    您必須提供某些參數值才能建立 ColdFusion 資料來源。如需資料庫驅動程式特有的參數值，請參閱驅動程式廠商的文件，或向您的系統管理員洽詢。

建立 ColdFusion 資料來源之後，您就可以在 Dreamweaver 中使用它了。如需詳細資訊，請參閱在 Dreamweaver 中連線至資料庫。


在 Dreamweaver 中連線至資料庫

建立 ColdFusion 資料來源之後 (請參閱建立或修改 ColdFusion 資料來源)，您就可以在 Dreamweaver 中用它連線資料庫。

在 Dreamweaver 中開啟任何 ColdFusion 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。您的 ColdFusion 資料來源這時應該會出現在面板中。

如果資料來源並未出現，請確定您已完成面板中的檢查清單。同時也請確定 Dreamweaver 知道要在哪裡找出 ColdFusion 資料來源。在「網站定義」對話方塊的「測試伺服器」類別中，在執行 ColdFusion 的電腦上指定網站的根資料夾。如需詳細資訊，請參閱指定可以處理動態網頁的位置。

相關主題

  • 資料庫連線疑難排解


編輯或刪除資料庫連線

您必須在「ColdFusion 管理員」中編輯或刪除 ColdFusion 資料來源。在 Dreamweaver 的「資料庫」面板 (「視窗＞資料庫」) 中，按一下面板工具列上的「修改資料來源」圖示。「ColdFusion 管理員」便會在瀏覽器中開啟。登入並且修改資料來源。如需相關說明，請參閱「使用 ColdFusion」。

為了避免在刪除或重新命名 ColdFusion 資料來源後發生錯誤，請在「繫結」面板中按兩下資料集的名稱，並且選擇新的資料來源，更新 Dreamweaver 中所有使用舊資料來源的資料集。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定連線對話方塊選項 (ColdFusion)


設定連線對話方塊選項 (ColdFusion)

這個對話方塊是用來建立或修改與資料庫建立連線的 ColdFusion 資料來源。

若要設定對話方塊選項：

  • 輸入資料庫驅動程式特有的參數值。

    如需詳細資訊，請參閱驅動程式廠商的文件，或洽詢您的系統管理員。

相關主題

  • 建立或修改 ColdFusion 資料來源


ASP.NET 開發人員的資料庫連線

若要將資料庫與 ASP.NET 應用程式搭配使用，您必須在 Macromedia Dreamweaver 8 中建立資料庫連線。本章將說明如何建立資料庫連線。

注意

如果您正在開發 Microsoft Active Server Pages (ASP) 應用程式，請參閱適用於 ASP 開發人員的資料庫連線。

本章假設您已經設定好 ASP.NET 應用程式 (請參閱設定網路應用程式)，並且假設在您的本機電腦或者您擁有網路或 FTP 存取權的系統上已經設定好資料庫。

本章包含下列各節：

連線到資料庫

編輯或刪除資料庫連線

若要連線到 Dreamweaver 所提供的範例資料庫，請參閱「Dreamweaver 入門」中的「ASP.NET 範例網站的設定」。若要瞭解更多有關資料庫和資料庫連線的資訊，請參閱資料庫入門手冊。


連線到資料庫

本節說明在 Dreamweaver 中開發 ASP.NET 應用程式時，如何連線到資料庫。

您必須先取得資料庫的 OLE DB 提供者，然後才能連線到資料庫。如果您希望連線至 Microsoft SQL Server 資料庫，可以使用 .NET Framework Software Development Kit (SDK) 提供的 Managed Data Provider for SQL Server。如需詳細資訊，請參閱取得資料庫的 OLE DB 提供者。

在安裝好資料庫提供者之後，就可以使用它來連線至資料庫。如需相關說明，請參閱下列章節：

  • 在 Dreamweaver 中建立 ASP.NET 資料庫連線
  • 利用資料連結屬性建立連線

相關主題

  • ASP.NET 的範例 OLE DB 連線參數


取得資料庫的 OLE DB 提供者

ASP.NET 應用程式必須透過 OLE DB 提供者才能連線至資料庫。提供者扮演解譯器的角色，讓 ASP.NET 應用程式能與資料庫通訊。如需關於 OLE DB 和資料庫提供者所扮演角色的詳細資訊，請參閱與資料庫通訊。

如果您希望連線至 Microsoft SQL Server 資料庫，可以使用 .NET Framework 1.1 SDK 隨附的 Managed Data Provider for SQL Server。這個提供者已最佳化為適用 SQL Server，它的速度很快，而且會在您安裝 SDK 時加以安裝。

如果您希望連線至非 SQL Server 的資料庫，請確定在執行 .NET Framework 的電腦上已安裝了資料庫的 OLE DB 提供者。若要取得 Microsoft Access 所需的 OLE DB 提供者，請至 Microsoft 網站 (網址是 http://msdn.microsoft.com/data/mdac/downloads/) 下載並安裝 Microsoft Data Access Components (MDAC) 2.7 套件。

您可以從 Oracle 網站 (網址是 www.oracle.com/technology/software/tech/windows/ole_db/index.html) 下載 Oracle 資料庫所需的 OLE DB 提供者。也可以從協力廠商處購買 OLE DB 提供者。

有了資料庫的提供者之後，您就可以在 Dreamweaver 中使用它來建立資料庫連線。請參閱在 Dreamweaver 中建立 ASP.NET 資料庫連線。


在 Dreamweaver 中建立 ASP.NET 資料庫連線

在取得資料庫的 OLE DB 提供者之後 (請參閱取得資料庫的 OLE DB 提供者)，您就可以在 Dreamweaver 中使用它來建立資料庫連線。

另一個選項是使用「Microsoft 資料連結屬性」對話方塊來協助您建立連線。如需相關說明，請參閱利用資料連結屬性建立連線。

若要建立 ASP.NET 的資料庫連線：

  1. 在 Dreamweaver 中開啟 ASP.NET 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    面板會顯示該網站已定義的連線。

  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「OLE DB 連線」或「SQL 伺服器連線」。

    注意

    只有在您想要連線至 Microsoft SQL Server 資料庫時才選取「SQL Server 連線」。

    「OLE DB 連線」或「SQL Server 連線」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱下列主題：

    • 設定 OLE DB 連線對話方塊選項
    • 設定 SQL Server 連線對話方塊選項

「資料庫」面板中便會出現新的連結。

相關主題

  • 資料庫連線疑難排解


利用資料連結屬性建立連線

為您的資料庫取得 OLE DB 提供者之後 (請參閱取得資料庫的 OLE DB 提供者)，您就可以在 Windows 中使用「資料連結屬性」對話方塊建立資料庫連線。

重要事項：只有在您想要使用的 OLE DB 提供者與 Dreamweaver 安裝在同一部 Windows 電腦上時，才能使用這個方法。

若要利用「資料連結屬性」來建立資料庫連線：

  1. 在 Dreamweaver 中開啟 ASP.NET 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    面板會顯示該網站已定義的連線。

  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「OLE DB 連線」。

    「OLE DB 連線」對話方塊便會出現。

  3. 按一下「建立」按鈕。

    「資料連結屬性」對話方塊便會出現。這個 Windows 對話方塊會顯示目前執行 Dreamweaver 的 Windows 電腦上之 OLE DB 提供者。

  4. 完成「資料連結屬性」對話方塊並按一下「確定」。

    Dreamweaver 會在「OLE DB 連線」對話方塊中插入一個連線字串。

  5. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次連線字串。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  6. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 資料庫連線疑難排解


ASP.NET 的範例 OLE DB 連線參數

OLE DB 連線字串組合 ASP.NET 應用程式連線至資料庫所需的所有資訊。Dreamweaver 會將這個字串插入網頁的伺服器端 Script 中，以便稍後由應用程式伺服器進行處理。

Dreamweaver 會提供字串樣版，您可以用它來建立 ASP.NET 應用程式的 OLE DB 連線字串 (請參閱在 Dreamweaver 中建立 ASP.NET 資料庫連線)。若要建立連線字串，可以使用要求的參數值取代樣版中的預留位置。本節提供 Microsoft Access 和 SQL Server 資料庫的範例參數。

注意

如需其他資料庫特有的參數值，請參閱資料庫廠商的文件，或向您的系統管理員洽詢。

情況 1：在您的本機電腦上已安裝了 .NET Framework，而且想要連線至名為 sdSchool.mdb 的 Microsoft Access 資料庫 (位於硬碟的下列資料夾中)：c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb。以下是建立此連線字串所需參數：

Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb;

情況 2：您在遠端開發伺服器上使用 .NET Framework，而且想要連線至名為 mtnSchool.mdb 的 Microsoft Access 資料庫 (位於伺服器的下列資料夾中)：d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb。以下是建立此連線字串所需參數：

Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;

情況 3：您在名為 Savant 的網路開發伺服器上使用 .NET Framework，而且想要連線至伺服器上名為 pubs 的 Microsoft SQL Server 資料庫。您的 SQL Server 使用者名稱是 sa，而且沒有密碼。如果您使用 Managed Data Provider for SQL Server (也就是若您在「資料庫」面板中選擇了「SQL 連線」)，以下是建立此連線字串所需的參數：

Data Source=Savant;
Initial Catalog=pubs;
User ID=sa;
Password=;


編輯或刪除資料庫連線

當您建立資料庫連線時，Dreamweaver 會將連線資訊儲存在網站本機根資料夾的 Connections 子資料夾的包含檔案中。您可以手動或依照下面的方式編輯或刪除檔案中的連線資訊。

若要更新連線：

  1. 在 Dreamweaver 中開啟 ASP.NET 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「編輯連線」。

    您用來建立連線的對話方塊便會出現。

  3. 進行變更，然後按一下「確定」。

Dreamweaver 會自動更新包含檔，該動作會自動更新使用該連線的網站中之所有頁面。

如果您重新命名連線，請更新使用舊連線名稱的每一個資料集，方法是在「繫結」面板中按兩下資料集，並在「資料集」對話方塊中選取新的連線名稱。

若要刪除連線：

  1. 在 Dreamweaver 中開啟 ASP.NET 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「刪除連線」。

    您用來建立連線的對話方塊便會出現。

  3. 確認您要刪除這個連線。

    注意

    為了避免在刪除連線後發生錯誤，請在「繫結」面板中按兩下資料集的名稱，並在「資料集」對話方塊中選取新的連線，以更新所有使用舊連線的資料集。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定 OLE DB 連線對話方塊選項
  • 設定連線字串樣版對話方塊選項
  • 設定 SQL Server 連線對話方塊選項


設定 OLE DB 連線對話方塊選項

這個對話方塊的用途在於定義 ASP.NET 應用程式的資料庫連線。

若要定義 ASP.NET 應用程式的資料庫連線：

  1. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  2. 輸入連線字串。

    如果您需要連線字串的說明，請按一下「樣版」，開啟「連線字串樣版」對話方塊，從樣版清單中選取您的 OLE DB 提供者，然後按一下「確定」。

    Dreamweaver 會在「連線字串」文字方塊中插入一個字串樣版。以要求的資訊取代字串中的預留位置。如需詳細資訊，請參閱 ASP.NET 的範例 OLE DB 連線參數。

  3. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次連線字串。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  4. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 在 Dreamweaver 中建立 ASP.NET 資料庫連線
  • 取得資料庫的 OLE DB 提供者
  • 利用資料連結屬性建立連線


設定連線字串樣版對話方塊選項

這個對話方塊能用來將字串樣版插入「OLE DB 連線」對話方塊的「連線字串」方塊中。

若要設定對話方塊選項：

  • 請選取一個 OLE DB 提供者，並按一下「確定」。

相關主題

  • 在 Dreamweaver 中建立 ASP.NET 資料庫連線
  • 設定 OLE DB 連線對話方塊選項


設定 SQL Server 連線對話方塊選項

這個對話方塊的用途在於利用 .NET Framework 1.1 SDK 所提供的 Managed Data Provider for SQL Server，定義 SQL Server 資料庫的連線。

若要設定對話方塊選項：

  1. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  2. 輸入連線字串。

    Dreamweaver 會在「連線字串」文字方塊中提供一個字串樣版。以要求的資訊取代字串中的預留位置。如需詳細資訊，請參閱 ASP.NET 的範例 OLE DB 連線參數。

  3. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次連線字串。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  4. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 在 Dreamweaver 中建立 ASP.NET 資料庫連線
  • 取得資料庫的 OLE DB 提供者


適用於 ASP 開發人員的資料庫連線

若要將資料庫與 Microsoft Active Server Pages (ASP) 應用程式搭配使用，您必須在 Macromedia Dreamweaver 8 中建立資料庫連線。本章將說明如何建立資料庫連線。

注意

如果您要開發 ASP.NET 應用程式，請參閱 ASP.NET 開發人員的資料庫連線。

本章假設您已經設定好 ASP 應用程式 (請參閱設定網路應用程式)，並且假設在您的本機電腦或者您擁有網路或 FTP 存取權的系統上已經設定好資料庫。

本章包含下列各節：

關於 ASP 中的資料庫連線

建立 DSN 連線

建立無 DSN 連線

連線 ISP 上的資料庫

編輯或刪除資料庫連線

若要連線到 Dreamweaver 所提供的範例資料庫，請參閱「Dreamweaver 入門」中的「ASP 範例網站的設定」。若要瞭解更多有關資料庫和資料庫連線的資訊，請參閱資料庫入門手冊。


關於 ASP 中的資料庫連線

ASP 應用程式必須透過 ODBC 驅動程式或 OLE DB 提供者連線至資料庫。建立 OLE DB 連線可以改善連線的速度。

本節包含下列概念性主題：

  • ASP 資料庫連線
  • OLE DB 連線


ASP 資料庫連線

ASP 應用程式必須透過開放式資料庫連線 (ODBC) 驅動程式或物件連結和內嵌資料庫 (OLE DB) 提供者，連線到資料庫。驅動程式或提供者是網路應用程式與資料庫通訊的解譯器。如需關於資料庫驅動程式所扮演角色的詳細資訊，請參閱與資料庫通訊。下表是可以配合 Microsoft Access、Microsoft SQL Server 以及 Oracle 資料庫使用的驅動程式：

資料庫 | 資料庫驅動程式
Microsoft Access | Microsoft Access Driver (ODBC) Microsoft Jet Provider for Access (OLE DB)
Microsoft SQL Server | Microsoft SQL Server Driver (ODBC) Microsoft SQL Server Provider (OLE DB)
Oracle | Microsoft Oracle Driver (ODBC) Oracle Provider for OLE DB

您可以使用資料來源名稱 (DSN) 或連結字串來連線資料庫。

DSN 是由一個單字構成的識別符號 (如 myConnection)，它會指向這個資料庫，並且包含連線這個資料庫所需的全部資訊。您必須在 Windows 中定義 DSN。如果您是透過安裝在 Windows 系統上的 ODBC 驅動程式連線，就可以使用 DSN。如需詳細說明，請參閱建立 DSN 連線。

連結字串是人工撰寫的運算式，用來識別資料庫並且列出連線到這個資料庫所需的資訊。以下是一個範例：

Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner

如果您是透過下列方式連線，就必須使用連結字串：

  • OLE DB 提供者
  • 不是安裝在 Windows 系統上的 ODBC 驅動程式

如需詳細說明，請參閱下列各節：

  • 建立無 DSN 連線
  • 連線 ISP 上的資料庫

    注意

    如果您是透過安裝在 Windows 系統上的 ODBC 驅動程式連線，則也可以使用連結字串，不過使用 DSN 會更簡單一些。

相關主題

  • OLE DB 連線


OLE DB 連線

您可以使用 OLE DB 提供者來和資料庫通訊。建立直接的資料庫專屬的 OLE DB 連線，可以消除網路應用程式與資料庫之間的 ODBC 層，改善連線的速度。

如果您不為資料庫指定 OLE DB 提供者，ASP 就會使用 ODBC 驅動程式的預設 OLE DB 提供者，和 ODBC 驅動程式進行通訊，後者再與資料庫進行通訊。

OLE DB 只適用於 Windows NT、2000 或 XP。

不同的資料庫有不同的 OLE DB 提供者。您可以在執行 IIS 的 Windows 電腦上，下載並安裝 Microsoft Data Access Components (MDAC) 2.5 和 2.7 套件，以取得 Microsoft Access 和 SQL Server 的 OLE DB 提供者。您可以從 Microsoft 網站免費下載 MDAC 套件，網址是 http://msdn.microsoft.com/data/mdac/downloads/。

注意

安裝 MDAC 2.7 之前，請先安裝 MDAC 2.5。

您可以從 Oracle 網站 (網址為 www.oracle.com/technology/software/tech/windows/ole_db/index.html) 下載 Oracle 資料庫所需的 OLE DB 提供者 (需要註冊)。

在 Dreamweaver 中，您只要在連線字串中包含 Provider 參數，就可以建立 OLE DB 連線 (請參閱建立無 DSN 連線)。例如，以下分別是 Access、SQL Server 和 Oracle 資料庫的常用 OLE DB 提供者參數：

Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...

如需 OLE DB 提供者的參數值，請參閱提供者廠商的文件，或向您的系統管理員洽詢。

相關主題

  • 設定連結字串選項
  • 建立無 DSN 連線


建立 DSN 連線

您可以使用 DSN 在網路應用程式和資料庫之間建立 ODBC 連線。DSN 是個名稱，包含使用 ODBC 驅動程式連線到特定資料庫時所需的所有參數。如需詳細資訊，請參閱使用 DSN。

注意

因為在 DSN 中僅能指定 ODBC 驅動程式，如果您要使用 OLE DB 提供者，就必須使用連結字串。如需詳細資訊，請參閱 OLE DB 連線。

您可以在本機或遠端 Windows 電腦上定義 DSN。下列主題將說明建立這兩種連線類型的方法：

  • 使用本機 DSN 建立連線
  • 使用遠端 DSN 建立連線

相關主題

  • 建立無 DSN 連線


使用本機 DSN 建立連線

您可以使用本機定義的 DSN 在 Dreamweaver 中建立資料庫連線。如果您要使用本機 DSN，DSN 必須定義在執行 Dreamweaver 的 Windows 電腦上。

若要使用本機定義的 DSN 建立資料庫連線：

  1. 在執行 Dreamweaver 的 Windows 電腦上定義 DSN。

    如需相關說明，請參閱 Microsoft 網站上的下列文章：

    • 如果電腦執行的是 Windows 2000，請參閱 Microsoft 知識庫文章 300596，網址是 http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
    • 如果電腦執行的是 Windows XP，請參閱 Microsoft 知識庫文章 305599，網址是 http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
  2. 在 Dreamweaver 中開啟 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    Dreamweaver 便會顯示這個網站定義的所有連線。

  3. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中，選取「資料來源名稱 (DSN)」。

    「資料來源名稱 (DSN)」對話方塊便會出現。

  4. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  5. 選取對話方塊底部的「使用本機 DSN」選項。
  6. 從「資料來源名稱 (DSN)」彈出式選單中選取您要使用的 DSN。

    如果您要使用本機 DSN，但是尚未定義任何 DSN，請按一下「定義」以開啟「Windows ODBC 資料來源管理員」。如需相關說明，請參閱建立 DSN 連線。

  7. 必要時，請完成「使用者名稱」和「密碼」文字方塊。
  8. 如果您願意，可以按一下「進階」並輸入資料結構或目錄名稱，以限制 Dreamweaver 在設計階段擷取資料庫項目的數目。

    如需詳細資訊，請參閱限制 Dreamweaver 中顯示的資料庫資訊。

    注意

    您無法在 Microsoft Access 中建立資料結構或目錄。
  9. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次 DSN。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  10. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 使用遠端 DSN 建立連線
  • 建立無 DSN 連線
  • 資料庫連線疑難排解

使用遠端 DSN 建立連線

您可以使用遠端電腦上定義的 DSN 在 Dreamweaver 中建立資料庫連線。如果您要使用遠端 DSN，DSN 必須定義在執行應用程式伺服器 (可能為 IIS) 的 Windows 電腦上。

若要使用遠端定義的 DSN 建立資料庫連線：

  1. 在執行應用程式伺服器的遠端系統上定義 DSN。

    如需相關說明，請參閱 Microsoft 網站上的下列文章：

    • 如果遠端電腦執行的是 Windows 2000，請參閱 Microsoft 知識庫文章 300596，網址是 http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
    • 如果遠端電腦執行的是 Windows XP，請參閱 Microsoft 知識庫文章 305599，網址是 http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
  2. 在 Dreamweaver 中開啟 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    Dreamweaver 便會顯示這個網站定義的所有連線。

  3. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中，選取「資料來源名稱 (DSN)」。

    「資料來源名稱 (DSN)」對話方塊便會出現。

  4. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  5. 選取對話方塊底部的「使用測試伺服器上的 DSN」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有資料庫連線都是使用應用程式伺服器上的 DSN。

  6. 輸入 DSN。

    您可以按一下「DSN」按鈕，連線到伺服器，然後從上面定義的 DSN 中選取。如需詳細資訊，請參閱設定選取 ODBC DSN 對話方塊選項。

  7. 必要時，請完成「使用者名稱」和「密碼」文字方塊。
  8. 如果您願意，可以按一下「進階」並且輸入資料結構或目錄名稱，藉以限制 Dreamweaver 在設計階段擷取資料庫項目的數目。

    如需詳細資訊，請參閱限制 Dreamweaver 中顯示的資料庫資訊。

    注意

    您無法在 Microsoft Access 中建立資料結構或目錄。
  9. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次 DSN。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  10. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 使用本機 DSN 建立連線
  • 建立無 DSN 連線
  • 資料庫連線疑難排解


建立無 DSN 連線

您可以使用無 DSN 連線在網路應用程式和資料庫之間建立 ODBC 或 OLE DB 連線。若要建立這種類型的連線，請使用連結字串。連結字串結合了您的網路應用程式連線到資料庫時所需的全部資訊。如需連線字串的詳細資訊，請參閱設定連結字串選項。

若要建立無 DSN 連線：

  1. 在 Dreamweaver 中開啟 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    Dreamweaver 便會顯示這個網站定義的所有連線 (如果有)。

  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「自訂連結字串」。

    「自訂連結字串」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定自訂連線字串對話方塊選項。

相關主題

  • OLE DB 連線
  • 使用虛擬路徑連線資料庫
  • 資料庫連線疑難排解


連線 ISP 上的資料庫

如果您是使用商業 Internet 服務供應商 (ISP) 的 ASP 開發人員，您通常不會知道上傳檔案 (包括資料庫檔案或檔案) 的實際路徑。如果您的 ISP 沒有為您定義 DSN 或者動作太慢，您必須另謀他途來建立資料庫檔案的連線。另一種方式是建立無 DSN 連線到資料庫檔案，但是您必須知道資料庫檔案在 ISP 伺服器上的實際路徑，才能定義這種連線。

本節將說明如何使用 ASP 伺服器物件的 MapPath 方法，取得資料庫檔案在伺服器上的實際路徑。本節包含下列主題：

  • 了解實際路徑與虛擬路徑
  • 使用虛擬路徑尋找檔案的實際路徑
  • 使用虛擬路徑連線資料庫

    注意

    本章所討論的技巧只適用於檔案資料庫，例如資料以 .mdb 檔案儲存的 Microsoft Access 資料庫。


了解實際路徑與虛擬路徑

使用 Dreamweaver 將檔案上傳到遠端伺服器之後，這些檔案會存放在伺服器本機目錄樹狀結構的資料夾中。例如，在執行 Microsoft IIS 的伺服器上，您的首頁路徑可能與下列類似：

c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

這個路徑就是檔案的實際路徑。

但是，開啟檔案的 URL 並不是使用這個實際路徑，它是使用伺服器或網域名稱，後面加上虛擬路徑，如以下範例所示：

www.plutoserve.com/jsmith/index.htm

虛擬路徑 /jsmith/index.htm 在這裡就是代表實際路徑 c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm。

相關主題

  • 使用虛擬路徑尋找檔案的實際路徑
  • 使用虛擬路徑連線資料庫


使用虛擬路徑尋找檔案的實際路徑

如果您是使用 ISP，您不一定會知道上傳檔案的實際路徑。ISP 通常會提供 FTP 主機，可能還有主機目錄，以及登入名稱和密碼。ISP 也會指定一個 URL 來檢視您在 Internet 上的網頁，例如 www.plutoserve.com/jsmith/。

如果您知道這個 URL，就可以取得檔案的虛擬路徑，也就是 URL 中位於伺服器或網域名稱後面的路徑。知道虛擬路徑之後，您就可以使用 MapPath 方法取得檔案在伺服器上的實際路徑。

除此之外，MapPath 方法會將虛擬路徑當做引數，並且傳回檔案的實際路徑和檔案名稱。以下就是這個方法的語法：

Server.MapPath("/virtualpath")

假設檔案的虛擬路徑為 /jsmith/index.htm，下列運算式將會傳回它的實際路徑：

Server.MapPath("/jsmith/index.htm")

您可以依下列方式，利用 MapPath 來進行實驗。

  1. 在 Dreamweaver 中開啟 ASP 網頁，並且切換到「程式碼檢視」(檢視＞程式碼)。
  2. 在網頁的 HTML 程式碼中輸入下列運算式。
    <%Response.Write(stringvariable)%>
  3. 使用 MapPath 方法取得 stringvariable 引數的值。

    以下是一個範例：

    <% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
  4. 切換到「設計」檢視 (「檢視＞設計」) 並且啟用「即時資料」(「檢視＞即時資料」) 以檢視頁面。

    頁面會顯示應用伺服器上檔案的實際路徑。以本節中討論的範例而言，頁面會顯示以下實際路徑：

    c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm

如需關於 MapPath 方法的詳細資訊，請參考 Microsoft IIS 所附的線上文件。

相關主題

  • 了解實際路徑與虛擬路徑
  • 使用虛擬路徑連線資料庫


使用虛擬路徑連線資料庫

若要撰寫遠端伺服器上資料庫檔案的無 DSN 連線連結字串，您必須知道這個檔案的實際路徑。例如，以下為典型 Microsoft Access 資料庫的無 DSN 連結字串：

Driver={Microsoft Access Driver (*.mdb)};
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

如果您不知道檔案在遠端伺服器上的實際路徑，您可以在連線字串中使用 MapPath 方法取得該實際路徑。

若要使用 MapPath 方法建立無 DSN 連線：

  1. 上傳資料庫檔案到遠端伺服器。

    記下它的虛擬路徑 (例如 /jsmith/data/statistics.mdb)。

  2. 在 Dreamweaver 中開啟 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    Dreamweaver 便會顯示這個網站定義的所有連線。

  3. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「自訂連結字串」。
  4. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  5. 輸入連線字串並使用 MapPath 方法，提供 DBQ 參數。

    假設 Microsoft Access 資料庫的虛擬路徑為 /jsmith/data/statistics.mdb。如果您使用 VBScript 做為 Script 語言的話，連結字串可以表示如下：

    Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath
("/jsmith/data/statistics.mdb")

    & 符號是用來連接 (結合) 兩個字串。第一個字串是以引號括住，第二個字串則是由 Server.MapPath 運算式傳回。這兩個字串結合起來，就產生了下面這個字串：

    Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb

    如果您使用 JavaScript，除了用加號 (+) 代替 & 符號來連接兩個字串外，下列運算式與上述運算式是完全相同的：

    Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath
("/jsmith/data/statistics.mdb")
  6. 選取「使用測試伺服器上的驅動程式」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有資料庫連線都是使用應用程式伺服器。

  7. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次連結字串。

    如果連線仍然失敗，請連絡 ISP，確定遠端伺服器上是否安裝了連結字串中指定的資料庫驅動程式。同時查證一下 ISP 是否擁有這個驅動程式的最新版本。例如，以 Microsoft Access 2000 建立的資料庫無法與 Microsoft Access Driver 3.5 運作。您需要 Microsoft Access Driver 4.0 或更新版本。

  8. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

  9. 更新現有動態網頁的資料庫連線，並且在任何新建立的網頁中使用新連線。

    若要更新動態網頁的連線，請在 Dreamweaver 中開啟網頁，按兩下「資料繫結」面板或「伺服器行為」面板中的資料集名稱，並且從「連線」彈出式選單選取您剛建立的連線。

相關主題

  • 了解實際路徑與虛擬路徑
  • 使用虛擬路徑尋找檔案的實際路徑
  • 建立無 DSN 連線


編輯或刪除資料庫連線

當您建立資料庫連線時，Dreamweaver 會將連線資訊儲存在網站本機根資料夾的 Connections 子資料夾的包含檔案中。您可以手動或依照下面的方式編輯或刪除檔案中的連線資訊。

若要更新連線：

  1. 在 Dreamweaver 中開啟 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「編輯連線」。

    您用來建立連線的對話方塊便會出現。

  3. 進行變更，然後按一下「確定」。

Dreamweaver 會自動更新包含檔案，這個檔案會更新網站中使用該連線的所有頁面。

若要刪除連線：

  1. 在 Dreamweaver 中開啟 ASP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「刪除連線」。

    您用來建立連線的對話方塊便會出現。

  3. 確認您要刪除這個連線。

    注意

    為了避免在刪除連線後發生錯誤，請在「繫結」面板中按兩下資料集的名稱，並且選擇新的連線，更新所有使用舊連線的資料集。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定資料來源名稱 (DSN) 對話方塊選項
  • 設定選取 ODBC DSN 對話方塊選項
  • 設定自訂連線字串對話方塊選項
  • 設定連結字串選項
  • 設定連線對話方塊選項
  • 使用移除連線敘述命令


設定資料來源名稱 (DSN) 對話方塊選項

這個對話方塊的用途是讓您使用 DSN 建立 ASP 應用程式的資料庫連線。您可以使用這個對話方塊執行下列作業：

  • 使用本機 DSN 建立連線
  • 使用遠端 DSN 建立連線

相關主題

  • 使用 DSN


設定選取 ODBC DSN 對話方塊選項

這個對話方塊是在建立 ASP 資料庫連線時，用來選取遠端伺服器上的 DSN。

注意

Dreamweaver 只能擷取使用「Windows ODBC 資料來源管理員」建立的伺服器 DSN。

若要選取 DSN：

  1. 選取指向所需資料庫的 DSN。
  2. 按一下「確定」。

相關主題

  • 使用遠端 DSN 建立連線
  • 使用 DSN


設定自訂連線字串對話方塊選項

這個對話方塊的用途是讓您使用連結字串來定義無 DSN 的資料庫連線。

若要使用連結字串定義資料庫連線：

  1. 在第一個文字方塊中，輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  2. 在第二個文字方塊中，輸入資料庫的連結字串。

    如需詳細資訊，請參閱設定連結字串選項。如果您並未在連線字串中指定 OLE DB 提供者 (也就是說，沒有包含 Provider 參數)，ASP 將會自動使用 ODBC 驅動程式的 OLE DB 提供者。在這種情況下，您必須為資料庫指定適當的 ODBC 驅動程式。

    如果您的網站是由 ISP 裝載，而且您不知道資料庫的完整路徑，請在連結字串中使用 ASP 伺服器物件的 MapPath 方法。如需詳細資訊，請參閱連線 ISP 上的資料庫。

  3. 如果安裝 Dreamweaver 的電腦上沒有安裝連結字串所指定的資料庫驅動程式，請選取「使用測試伺服器上的驅動程式」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有資料庫連線都是使用應用程式伺服器。

  4. 如果您願意，可以按一下「進階」並且輸入資料結構或目錄名稱，藉以限制 Dreamweaver 在設計階段擷取資料庫項目的數目。

    如需詳細資訊，請參閱限制 Dreamweaver 中顯示的資料庫資訊。

    注意

    您無法在 Microsoft Access 中建立資料結構或目錄。
  5. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次連結字串。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  6. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 建立無 DSN 連線
  • OLE DB 連線
  • 使用虛擬路徑連線資料庫


設定連結字串選項

連結字串結合了您的網路應用程式連線到資料庫時所需的全部資訊。Dreamweaver 會將這個字串插入網頁的伺服器端 Script 中，以便稍後由應用程式伺服器進行處理。

Microsoft Access 和 SQL Server 資料庫的連結字串是由下列以分號分隔的參數組合構成：

Provider 指定資料庫的 OLE DB 提供者。例如，以下分別是 Access、SQL Server 和 Oracle 資料庫的常用 OLE DB 提供者參數：

Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...

如需 OLE DB 提供者的參數值，請參閱提供者廠商的文件，或向您的系統管理員洽詢。

如果您並未包含 Provider 參數，就會使用 ODBC 的預設 OLE DB 提供者，而且您必須為資料庫指定適當的 ODBC 驅動程式。

Driver 是在沒有為資料庫指定 OLE DB 提供者時，指定所要使用的 ODBC 驅動程式。

Server 是當網路應用程式在不同的伺服器上執行時，指定裝載 SQL Server 資料庫的伺服器。

Database 是 SQL Server 資料庫的名稱。

DBQ 是檔案資料庫 (例如在 Microsoft Access 中所建立者) 的路徑。這個路徑在裝載資料庫檔案的伺服器上。

UID 指定使用者名稱。

PWD 指定使用者密碼。

DSN 是資料來源名稱 (如果使用的話)。依據您在伺服器上定義 DSN 的方式，或許可以省略連結字串的其他參數。例如，如果您在建立 DSN 時定義了其他參數 (請參閱使用 DSN)，DSN=Results 就可以是有效的連線字串。

其他種類的資料庫連結字串不一定會使用上述參數，或許會有不同的參數名稱或用法。如需詳細資訊，請參閱資料庫廠商的文件，或向您的系統管理員洽詢。

以下連結字串範例會建立 ODBC 連線，連線到名為 trees.mdb 的 Access 資料庫：

Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb

以下連線字串範例會建立 OLE DB 連線，連線到 Gojira 伺服器上名為 Mothra 的 SQL Server 資料庫：

Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8

相關主題

  • 建立無 DSN 連線
  • OLE DB 連線
  • 使用虛擬路徑連線資料庫


設定連線對話方塊選項

這個對話方塊的用途是管理網站的資料庫連線。更明確地說，您可以新增、編輯、刪除或重製資料庫連線。

注意

您也可以使用「資料庫」面板執行相同的工作。

若要管理網站的資料庫連線，請執行下列其中一項作業：

  • 若要新增連線，請按一下「新增」。
  • 若要刪除現有連線，請在清單中選取連線然後按一下「移除」。
  • 若要更新現有連線，請在清單中選取連線然後按一下「編輯」。
  • 若要複製現有連線，請在清單中選取連線，然後按一下「重製」。


使用移除連線敘述命令

「移除連線敘述」命令是為了移除 Dreamweaver 放置在遠端資料夾中用來存取資料庫的 Script。只有在 Dreamweaver 中撰寫設計階段時，才需要這些 Script。

當您選取「資料庫連線」對話方塊中的「使用測試伺服器上的驅動程式」選項或「使用測試伺服器上的 DSN」選項時，Dreamweaver 會自動將 MMHTTPDB Script 檔案上傳至測試伺服器，這樣可讓 Dreamweaver 透過 HTTP 通訊協定操作遠端的資料庫驅動程式，而這又讓 Dreamweaver 能夠取得它需要的資料庫資訊，以協助您建立網站。然而，這個檔案將可能讓系統中定義的資料來源名稱 (DSN) 得以被檢視。如果資料來源名稱 (DSN) 和資料庫沒有受到密碼的保護，這個 Script 也會讓攻擊者得以向資料庫發佈 SQL 命令。

MMHTTPDB Script 檔案位於 _mmServerScripts 資料夾中，而此資料夾則位於您網站的根資料夾中。

注意

Dreamweaver 的檔案瀏覽器 (「檔案」面板) 會隱藏 _mmServerScripts 資料夾。如果您使用協力廠商的 FTP 用戶端或檔案瀏覽器，就可以看見 _mmServerScripts 資料夾。

在某些設定中，完全不需要這些 Script。當傳送網頁給您網站上的瀏覽者時，並不需要這些 Script，所以不應該將這些 Script 放置在實際執行伺服器中。

如果您已經將 MMHTTPDB Script 檔案上傳至實際執行伺服器，請刪除掉這些 MMHTTPDB Script 檔案。「移除連線敘述」命令會自動為您移除這些 Script 檔案。

如需詳細資訊，請參閱 Macromedia 網站上的 TechNote 19214，網址是 www.macromedia.com/go/19214。


適用於 JSP 開發人員的資料庫連線

若要將資料庫與 JavaServer Pages (JSP) 應用程式搭配使用，您必須在 Macromedia Dreamweaver 8 中建立資料庫連線。本章將說明如何建立資料庫連線。

本章假設您已經設定好 JSP 應用程式 (請參閱設定網路應用程式)，並且假設在您的本機電腦或者您擁有網路或 FTP 存取權的系統上已經設定好一個資料庫。

本章包含下列各節：

關於 JSP 中的資料庫連線

連線到資料庫

透過 ODBC 驅動程式連線

編輯或刪除資料庫連線

若要連線到 Dreamweaver 所提供的範例資料庫，請參閱「Dreamweaver 入門」中的「JSP 範例網站的設定」。若要瞭解更多有關資料庫和資料庫連線的資訊，請參閱資料庫入門手冊。


關於 JSP 中的資料庫連線

JSP 應用程式必須透過 JDBC 驅動程式連線到資料庫。驅動程式的作用，是作為讓 JSP 應用程式與資料庫通訊的解譯器。

本節包含下列概念性主題：

  • JSP 連線
  • JDBC 連線參數


JSP 連線

JSP 應用程式必須透過 JDBC 驅動程式連線到資料庫。如需關於 JDBC 和資料庫驅動程式所扮演角色的詳細資訊，請參閱與資料庫通訊。

您必須指定某些參數值才能透過 JDBC 驅動程式連線。如需詳細資訊，請參閱 JDBC 連線參數。如需驅動程式特有的參數值，請參閱驅動程式廠商的文件，或向您的系統管理員洽詢。

如果您有 JDBC-ODBC Bridge 驅動程式，也可以使用 ODBC 驅動程式 (Windows DSN 也是這樣)。如需詳細資訊，請參閱透過 ODBC 驅動程式連線。


JDBC 連線參數

當您在 Dreamweaver 中建立 JSP 資料庫連線時，您通常會需要輸入 JDBC 連線參數 (請參閱建立 JSP 的資料庫連線)。JDBC 連線通常由四個參數構成：驅動程式、使用者名稱、密碼和 URL (指定資料庫位置用)。一般而言，驅動程式參數和 URL 參數的值會因驅動程式而異。

本節將以 Oracle Thin JDBC 驅動程式作為範例，示範如何在 Dreamweaver 中定義連線參數。如需其他驅動程式的連線參數，請參考驅動程式廠商的文件。

Oracle Thin JDBC 驅動程式支援 Oracle 資料庫。如果您要使用這個驅動程式來連線 Oracle 資料庫，請按一下「資料庫」面板上的加號 (+) 按鈕，並從彈出式選單中選取「Oracle Thin 驅動程式 (Oracle)」驅動程式。下列 (已部分完成的) 對話方塊便會出現：

輸入連結名稱，並且以有效的連線參數取代預留位置 (方括弧中)。在 [hostname] 預留位置中，輸入系統管理員指定給資料庫伺服器的 IP 位址或名稱。在 [sid] 預留位置中，輸入資料庫系統識別符號。如果同一系統上有一個以上 Oracle 資料庫在執行，您可以用 SID 來分辨它們。

例如，假設您的伺服器名為 Aristotle，資料庫連接埠是 1521，而且您在該伺服器上定義了一個名為 patients 的資料庫 SID，則您應該在 Dreamweaver 中輸入下列參數值：


連線到資料庫

本節描述在 Dreamweaver 中開發 JSP 應用程式時，要如何連線至資料庫。

這一節假設 JSP 應用程式伺服器已經在本機或遠端電腦上執行 如需詳細資訊，請參閱設定網路應用程式。

您必須先取得資料庫的 JDBC 驅動程式，然後才能連線到資料庫。如需詳細資訊，請參閱取得資料庫的 JDBC 驅動程式。

安裝資料庫驅動程式之後，您就可以透過它連線到資料庫。如需相關說明，請參閱建立 JSP 的資料庫連線。

取得資料庫的 JDBC 驅動程式

嘗試建立資料庫連線前，請確定您有資料庫的 JDBC 驅動程式。常見的 JDBC 驅動程式包括 Oracle Thin JDBC 驅動程式、Oracle Java 驅動程式，以及適用於 Microsoft SQL Server 的 i-net JDBC 驅動程式。

資料庫系統廠商 (如 Oracle) 通常會隨系統附贈驅動程式。您也可以向協力廠商購買驅動程式。例如，您可以從 i-net software (網址為 www.inetsoftware.de/products/jdbc/) 取得適用於 Microsoft SQL Server 的 JDBC 驅動程式。

Sun 也在它的網站 (網址為 http://developers.sun.com/product/jdbc/drivers) 提供了 JDBC 驅動程式及其廠商的可搜尋資料庫。

取得資料庫的 JDBC 驅動程式之後，您就可以建立資料庫連線。如需相關說明，請參閱建立 JSP 的資料庫連線。

相關主題

  • 安裝 Sun JDBC-ODBC Bridge 驅動程式
  • 與資料庫通訊

建立 JSP 的資料庫連線

在執行應用程式伺服器的電腦上安裝了適合資料庫的 JDBC 驅動程式之後 (請參閱取得資料庫的 JDBC 驅動程式)，您就可以在 Dreamweaver 中建立資料庫連線。

若要建立 JSP 的資料庫連線：

  1. 在 Dreamweaver 中開啟 JSP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    Dreamweaver 便會顯示對這個網站定義的連線。

  2. 按一下加號 (+) 按鈕，並從彈出式選單中選取驅動程式。

    如果沒有列出您的驅動程式，請選取「自訂 JDBC 連線」。

    連線對話方塊便會出現。

  3. 在連線對話方塊中輸入連線參數。

    如需詳細資訊，請參閱 JDBC 連線參數。

  4. 指定您想要使用的 JDBC 驅動程式的位置。
    • 如果 JDBC 驅動程式是安裝在 Dreamweaver 的同一部電腦上，請選取「使用這台電腦上的驅動程式」選項。
    • 如果 JDBC 驅動程式不是安裝在 Dreamweaver 的同一部電腦上，請選取「使用測試伺服器上的驅動程式」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有資料庫連線都是使用應用程式伺服器。

  5. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次連線參數。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  6. 按一下「確定」。

「資料庫」面板中便會出現新的連結。

相關主題

  • 資料庫連線疑難排解


透過 ODBC 驅動程式連線

雖然 JSP 應用程式必須透過 JDBC 驅動程式與資料庫通訊，不過，如果您有 JDBC-ODBC 橋接驅動程式的話，它們也可以透過 ODBC 驅動程式通訊。橋接驅動程式的作用，就是做為 JSP 應用程式 (會與 JDBC 通訊) 與 ODBC 驅動程式 (會與 ODBC 通訊) 之間的解譯器。這個通訊通道可以讓 JSP 應用程式與資料庫通訊。

這種類型的連線為 Windows 使用者提供了兩項好處。第一，您可以使用 Microsoft 的免費 ODBC 驅動程式。第二，您可以使用 DSN 來簡化建立連線的工作。

您必須符合下列需求才能透過 ODBC 驅動程式連線：

  • 您的 JSP 應用程式伺服器必須在 Windows 電腦上執行。
  • 資料庫的 ODBC 驅動程式必須安裝在執行應用程式伺服器的 Windows 電腦上。如需詳細資訊，請參閱檢查 ODBC 驅動程式。
  • JDBC-ODBC 橋接驅動程式必須安裝在執行應用程式伺服器的 Windows 電腦上。如需詳細資訊，請參閱安裝 Sun JDBC-ODBC Bridge 驅動程式。

如果您符合這些需求，就可以透過 ODBC 驅動程式來連線。如需相關說明，請參閱建立 ODBC 連線。

檢查 ODBC 驅動程式

請確定資料庫的 ODBC 驅動程式已安裝於執行 JSP 應用程式伺服器的 Windows 電腦上。若要查明是否已安裝 ODBC 驅動程式，請參閱檢視安裝在 Windows 系統上的 ODBC 驅動程式。如果沒有安裝適當的驅動程式，您可以下載並且在執行 JSP 應用程式伺服器的電腦上安裝 Microsoft Data Access Components (MDAC) 2.5 和 2.7 套件。您可以從 Microsoft 網站免費下載 MDAC，網址是 http://msdn.microsoft.com/data/mdac/downloads/。這些套件包含 Microsoft 最新的 ODBC 驅動程式。

注意

在安裝 MDAC 2.7 之前，請先安裝 MDAC 2.5 套件。

如果您有資料庫的 ODBC 驅動程式，您可以接著安裝 JDBC-ODBC 驅動程式。如需相關說明，請參閱安裝 Sun JDBC-ODBC Bridge 驅動程式。

安裝 Sun JDBC-ODBC Bridge 驅動程式

若要透過 ODBC 驅動程式連線，您必須在執行 JSP 應用程式伺服器的 Windows 電腦上安裝 Sun JDBC-ODBC Bridge 驅動程式。這個驅動程式是附在適用於 Windows 的 Sun Java 2 SDK 標準版中。

若要知道您是否已經有 Java 2 SDK 以及這個驅動程式，請檢查硬碟中是否有下列任何一個資料夾：jdk1.2、jdk1.3 或 j2sdk1.4。

如果沒有這個 SDK，您可以從 Sun 網站 (網址為 http://java.sun.com/j2se/) 下載並安裝。當您安裝這個 SDK 時，驅動程式就會自動安裝。

雖然在開發階段使用低階的資料庫系統，例如 Microsoft Access，就已經足夠，但是 Sun JDBC-ODBC Bridge 驅動程式並不適用於生產階段。例如，它一次只能讓一個 JSP 網頁連線到資料庫 (換言之，它不支援多執行緒的同步使用)。如需有關驅動程式限制的詳細資訊，請參閱 Macromedia 支援中心上的 TechNote 17392 (網址為 www.macromedia.com/go/17392)。

安裝橋接驅動程式之後，您可以接著建立資料庫連線。如需相關說明，請參閱建立 ODBC 連線。

建立 ODBC 連線

透過 ODBC 驅動程式連線之前，請先確定執行 JSP 應用程式伺服器的 Windows 電腦上，已經安裝了適當的 ODBC 驅動程式和 Sun JDBC-ODBC Bridge 驅動程式 (請參閱檢查 ODBC 驅動程式和安裝 Sun JDBC-ODBC Bridge 驅動程式)。

若要在 JSP 中透過 ODBC 驅動程式連線：

  1. 在裝載應用程式伺服器的 Windows 系統上定義 DSN。

    如需相關說明，請參閱 Microsoft 網站上的下列文章：

    • Windows 2000 的使用者請參閱 Microsoft 知識庫文章 300596，網址是
      http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
    • Windows XP 的使用者請參閱 Microsoft 知識庫文章 305599，網址是
      http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
  2. 在 Dreamweaver 中開啟 JSP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    面板便會顯示對這個網站定義的連線。

  3. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「Sun JDBC-ODBC 驅動程式 (ODBC 資料庫)」。

    「Sun JDBC-ODBC Driver (ODBC Database)」對話方塊就會出現。

  4. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  5. 用步驟 1 中定義的 DSN 取代 URL 方塊中的 [odbc dsn] 預留位置。

    這個 URL 方塊看起來應該像是這樣：

    jdbc:odbc:myDSN
  6. 指定存取資料庫的使用者名稱和密碼。

    如果您不需要使用者名稱或密碼，請將該方塊保留空白。例如，若您的 DSN 名為 Acme，而且您不需要存取資料庫的使用者名稱或密碼，請輸入下列參數值：

    Driver: sun.jdbc.odbc.JdbcOdbcDriver

    URL: jdbc:odbc:Acme

    Username:

    Password:

  7. 指定 JDBC-ODBC Bridge 驅動程式的位置。
    • 如果這個驅動程式是安裝在 Dreamweaver 的同一部電腦上，請選取「使用這台電腦上的驅動程式」選項。
    • 如果這個驅動程式不是安裝在 Dreamweaver 的同一部電腦上，請選取「使用測試伺服器上的驅動程式」選項。

    Macintosh 使用者可以忽略這個步驟，因為所有資料庫連線都是使用應用程式伺服器。

  8. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次 DSN 和其他連線參數。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  9. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 資料庫連線疑難排解


編輯或刪除資料庫連線

當您建立資料庫連線時，Dreamweaver 會將連線資訊儲存在網站本機根資料夾的 Connections 子資料夾的包含檔案中。您可以手動或依照下面的方式編輯或刪除檔案中的連線資訊。

若要更新連線：

  1. 在 Dreamweaver 中開啟 JSP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「編輯連線」。

    您用來建立連線的對話方塊便會出現。

  3. 進行變更，然後按一下「確定」。

Dreamweaver 會自動更新包含檔案，這個檔案會更新網站中使用該連線的所有頁面。

如果您重新命名連線，請更新使用舊連線名稱的每一個資料集，方法是在「繫結」面板中按兩下資料集的名稱，並且在「資料集」對話方塊中選擇新的連線名稱。

若要刪除連線：

  1. 在 Dreamweaver 中開啟 JSP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「刪除連線」。

    您用來建立連線的對話方塊便會出現。

  3. 確認您要刪除這個連線。

為避免在刪除連線後發生錯誤，請更新 Dreamweaver 中使用舊連線的每一個資料集，方法是在「繫結」面板中按兩下資料集的名稱，並且在「資料集」對話方塊中選擇新的連線。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定 JSP 連線對話方塊選項


設定 JSP 連線對話方塊選項

這個對話方塊是用來建立 JSP 應用程式的資料庫連線。

若要建立資料庫連線：

  1. 輸入連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  2. 輪入驅動程式的連線參數。

    如需相關範例，請參閱 JDBC 連線參數。如需驅動程式的特定需求，請參閱驅動程式廠商的文件，或向您的系統管理員洽詢。

  3. 指定您想要使用的 JDBC 驅動程式的位置。
    • 如果 JDBC 驅動程式是安裝在 Dreamweaver 的同一部電腦上，請選取「使用這台電腦上的驅動程式」選項。
    • 如果 JDBC 驅動程式不是安裝在 Dreamweaver 的同一部電腦上，請選取「使用測試伺服器上的驅動程式」選項。

      注意

      Macintosh 使用者可以忽略這個步驟，因為所有資料庫連線都是使用應用程式伺服器。
  4. 如果您願意，可以按一下「進階」並且輸入資料結構或目錄名稱，藉以限制 Dreamweaver 在設計階段擷取資料庫項目的數目。

    如需詳細資訊，請參閱限制 Dreamweaver 中顯示的資料庫資訊。

    注意

    您無法在 Microsoft Access 中建立資料結構或目錄。
  5. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請仔細檢查 JDBC 連線參數。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  6. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

相關主題

  • 取得資料庫的 JDBC 驅動程式
  • JDBC 連線參數
  • 透過 ODBC 驅動程式連線


PHP 開發人員的資料庫連線

若要將資料庫與 PHP 應用程式搭配使用，您必須在 Macromedia Dreamweaver 8 中建立資料庫連線。本章將說明如何建立資料庫連線。

在 PHP 開發方面，Dreamweaver 只支援 MySQL 資料庫系統，不支援其他資料庫系統，如 Microsoft Access 或 Oracle。MySQL 是開放原始碼的軟體，您可以從 Internet 免費下載做為非商業用途之用。如需詳細資訊，請參閱 MySQL 網站，網址為 http://dev.mysql.com/downloads/。

本章假設您已經設定好 PHP 應用程式 (請參閱設定網路應用程式)，並且假設在您的本機電腦或者您擁有網路或 FTP 存取權的系統上，已經設定好 MySQL 資料庫。

提示

如果是開發用途，請下載並安裝 MySQL 資料庫伺服器的 Windows Essentials 版本。

本章包含下列各節：

連線到資料庫

編輯或刪除資料庫連線

若要連線到 Dreamweaver 所提供的範例資料庫，請參閱「Dreamweaver 入門」中的「PHP 範例網站的設定」。若要瞭解更多有關資料庫和資料庫連線的資訊，請參閱資料庫入門手冊。


連線到資料庫

本節描述在 Dreamweaver 中開發 PHP 應用程式時，要如何連線至資料庫。這裡假設您已有一或多個 MySQL 資料庫，而且已啟動 MySQL 伺服器。

若要建立與 MySQL 資料庫的資料庫連線：

  1. 在 Dreamweaver 中開啟 PHP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。
  2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「MySQL 連線」。

    「MySQL 連線」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定 MySQL 連線對話方塊選項。

「資料庫」面板中便會出現新的連結。

注意

如果您在測試 PHP 資料庫與 MySQL 4.1 之間連線時，遇到錯誤訊息：「用戶端不支援所要求的驗證通訊協定。請考慮升級 MySQL 用戶端」，請參閱疑難排解 MySQL 的錯誤訊息。


編輯或刪除資料庫連線

當您建立資料庫連線時，Dreamweaver 會將連線資訊儲存在網站本機根資料夾的 Connections 子資料夾的包含檔案中。您可以手動或依照下面的方式編輯或刪除檔案中的連線資訊。

若要更新連線：

  1. 在 Dreamweaver 中開啟 PHP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「編輯連線」。

    您用來建立連線的對話方塊便會出現。

  3. 進行變更，然後按一下「確定」。

Dreamweaver 會自動更新包含檔案，這個檔案會更新網站中使用該連線的所有頁面。

若要刪除連線：

  1. 在 Dreamweaver 中開啟 PHP 頁面，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    連線清單便會出現在面板中。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「刪除連線」。

    您用來建立連線的對話方塊便會出現。

  3. 確認您要刪除這個連線。

為避免在刪除連線後發生錯誤，請按兩下「繫結」面板中的資料集名稱，並在「資料集」對話方塊中選取新的連線名稱，以更新使用舊連線的所有資料集。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定 MySQL 連線對話方塊選項
  • 設定選取資料庫對話方塊選項


設定 MySQL 連線對話方塊選項

這個對話方塊是用來建立 PHP 應用程式的資料庫連線。

在完成這個對話方塊之前，請確定已啟動 MySQL 伺服器。

若要建立資料庫連線：

  1. 輸入新連線的名稱。

    注意

    名稱中不可以有任何空白或特殊字元。
  2. 在「MySQL 伺服器」方塊中，指定裝載 MySQL 的電腦。

    輸入 IP 位址或伺服器名稱。如果 MySQL 和 PHP 在同一台電腦上執行，則您可以輸入 localhost。

  3. 輸入 MySQL 使用者名稱和密碼。
  4. 在「資料庫」方塊中，輸入資料庫名稱，或按一下「選取」，從 MySQL 資料庫清單中選取資料庫。
  5. 按一下「測試」。

    Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請再檢查一次伺服器名稱、使用者名稱和密碼。如果連線仍然失敗，請檢查 Dreamweaver 用來處理動態網頁的資料夾設定 (請參閱指定可以處理動態網頁的位置)。

  6. 按一下「確定」。

    「資料庫」面板中便會出現新的連結。

    注意

    如果您在測試 PHP 資料庫與 MySQL 4.1 之間連線時，遇到錯誤訊息：「用戶端不支援所要求的驗證通訊協定。請考慮升級 MySQL 用戶端」，請參閱疑難排解 MySQL 的錯誤訊息。

相關主題

  • 連線到資料庫


設定選取資料庫對話方塊選項

這個對話方塊是在建立 PHP 資料庫連線時，用來選取 MySQL 資料庫系統中的資料庫。

若要選取資料庫：

  • 請從清單中選取資料庫，並按一下「確定」。

相關主題

  • 設定 MySQL 連線對話方塊選項


資料庫連線疑難排解

本章將會描述您在建立資料庫連線之後常會遇到的問題，並說明如何解決這些問題。本章包含下列小節：

權限問題疑難排解

Microsoft 錯誤訊息疑難排解

疑難排解 MySQL 的錯誤訊息


權限問題疑難排解

最常見的問題之一是資料夾或檔案權限不足。如果您的資料庫是位於 Windows 2000 或 Windows XP 電腦上，而且當您嘗試在網頁瀏覽器或「即時資料」模式中檢視動態網頁時收到錯誤訊息，那麼錯誤很可能是權限問題所造成的。

嘗試存取資料庫的 Windows 帳號沒有足夠的權限。這個帳號可能是匿名 Windows 帳號 (預設值為 IUSR_電腦名稱) 或特定的使用者帳號 (如果已使用驗證存取確保頁面的安全)。

您必須變更權限，讓「IUSR_電腦名稱」帳號擁有正確的權限，如此網站伺服器才能存取資料庫檔案。此外，資料庫檔案所在的資料夾也必須要有某些權限，才能寫入資料庫。

如果頁面是要專供匿名存取，請為「IUSR_電腦名稱」帳號指定資料夾與資料庫檔案的完整控制權，程序如下所述。

此外，如果資料庫的路徑是使用 UNC (\\Server\Share) 做為參考，請確定「共用使用權限」為「IUSR_電腦名稱」帳號指定了完整的存取權。即使是在本機網路伺服器上進行共享也是使用相同的步驟。

如果您由其他位置複製資料庫，資料庫可能不會自動由目標資料夾繼承權限。您可能必須為資料庫變更權限。

若要檢查或變更資料庫檔案的權限 (適用於 Windows XP)：

  1. 請確定您具有該部電腦的 Administrator 權限。
  2. 在「Windows 檔案總管」中找到資料庫檔案或是資料庫所在的資料夾，在檔案或資料夾上按一下右鍵並選取「內容」。
  3. 選取「安全性」索引標籤。

    注意

    只有在使用 NTFS 檔案系統時才能執行此步驟。如果您使用 FAT 檔案系統，則對話方塊中不會有「安全性」標籤。
  4. 如果「群組」或「使用者名稱」清單中並未列出「IUSR_電腦名稱」帳號，請按一下「新增」按鈕以加入該帳號。
  5. 在「選取使用者或群組」對話方塊中，按一下「進階」按鈕。

    對話方塊將會變更，以顯示更多選項。

  6. 按一下「位置」按鈕，並選取電腦名稱。
  7. 按一下「立即尋找」按鈕。

    與電腦關連的帳號名稱清單便會出現。

  8. 選取「IUSR_電腦名稱」帳號並按一下「確定」；然後再次按一下「確定」，以清除對話方塊。
  9. 若要為 IUSR 帳號指定完整權限，請選取「完全控制」，然後按一下「確定」。

若要檢查或變更資料庫檔案的權限 (適用於 Windows 2000)：

  1. 請確定您具有該部電腦的 Administrator 權限。
  2. 在「Windows 檔案總管」中找到資料庫檔案或是資料庫所在的資料夾，在檔案或資料夾上按一下右鍵並選取「內容」。
  3. 選取「安全性」索引標籤。

    注意

    只有在使用 NTFS 檔案系統時才能執行此步驟。如果您使用 FAT 檔案系統，則對話方塊中不會有「安全性」標籤。
  4. 如果「IUSR_電腦名稱」帳號沒有列在「檔案使用權限」對話方塊的 Windows 帳號中，請按一下「新增」按鈕加入這個帳號。
  5. 在「選取使用者、電腦或群組」對話方塊的「查詢」彈出式選單中，選取電腦名稱。

    與電腦關連的帳號名稱清單便會出現。

  6. 選取「IUSR_電腦名稱」帳號，並按一下「新增」。
  7. 若要為 IUSR 帳號指定完整權限，請在「存取類型」彈出式選單中選取「完全控制」，然後按一下「確定」。

如果要增加安全性，可將使用權限中對於資料庫所在的網路資料夾的「讀取」權限關閉。系統將不允許瀏覽資料夾，但網頁將仍然可以存取資料庫。

如需關於 IUSR 帳號與網路伺服器使用權限的詳細資訊，請參閱下列「Macromedia 支援中心」中的 TechNotes：

  • 了解匿名驗證與 IUSR 帳號，網址為：www.macromedia.com/go/authentication
  • 設定 IIS 網站伺服器使用權限，網址為：www.macromedia.com/go/server_permissions


Microsoft 錯誤訊息疑難排解

本節討論一些常見的 Microsoft 錯誤訊息，以及進行疑難排解的方法。如果將 Internet Information Server (IIS) 與 Microsoft 資料庫系統 (Access 或 SQL Server) 搭配使用，有可能會發生這類錯誤。這類錯誤通常發生在您從伺服器要求動態網頁的時候。

注意

Macromedia 並不對協力廠商的軟體 (如 Microsoft Windows、IIS 等) 提供技術支援。如果本節內容無法解決您遇到的問題，請與 Microsoft 技術支援連絡，或是到 Microsoft 支援網站，網址是 http://support.microsoft.com/。

本節將說明以下錯誤訊息：

  • 80004005─找不到資料來源名稱且沒有指定預設驅動程式 (本訊息還有其他變化，包括「80004005─驅動程式的 SQLSetConnectAttr 失敗」，以及「80004005─一般錯誤：無法開啟登錄金鑰 ‘DriverId’」)
  • 80004005─無法使用 (未知)；檔案已在使用中 (其他變化還有「80004005 - Microsoft Jet 資料庫引擎無法開啟檔案 (未知)」)
  • 80004005─登入失敗()
  • 80004005─作業必須使用可更新的查詢
  • 80040e07─資料類型與標準運算式中的資料類型不符
  • 80040e10─參數太少
  • 80040e10─COUNT 欄位不正確
  • 80040e14─INSERT INTO 陳述式語法錯誤
  • 80040e21─「插入」或「更新」發生 ODBC 錯誤
  • 800a0bcd─BOF 或 EOF 為 True

如需關於 80004005 錯誤的詳細資訊，請參閱「INFO：Active Server Pages 及 Microsoft Data Access Components 的 80004005 錯誤疑難排解指南 (Q306518)」，這篇文章位於 Microsoft 網站，網址為 http://support.microsoft.com/default.aspx?scid=kb;en-us;Q306518。


80004005─找不到資料來源名稱且沒有指定預設驅動程式

當您嘗試在網路瀏覽器或是「即時資料」模式中檢視動態頁面時，可能會發生此錯誤。因使用的資料庫與網路瀏覽器不同，錯誤訊息也可能會改變。錯誤訊息的其他變化包括：

  • 80004005 — 驅動程式的 SQLSetConnectAttr 失敗
  • 80004005 — 一般錯誤：無法開啟登錄金鑰 'DriverId'

以下是可能的原因和解決方案：

  • 頁面找不到 DSN。請確定是否已於網路瀏覽器與本機電腦上建立 DSN。如需詳細資訊，請參閱使用 DSN。
  • DSN 可能已設定為使用者 DSN，而非系統 DSN。刪除使用者 DSN，並建立系統 DSN 將原有的 DSN 取代。

    注意

    若您並未將使用者 DSN 刪除，則重複的 DSN 名稱將導致新的 ODBC 錯誤。
  • 如果您使用 Microsoft Access，資料庫檔案 (.mdb) 可能會被鎖住。這可能是因為有不同名稱的 DSN 正在存取資料庫。請在「Windows 檔案總管」中，於包含資料庫檔案 (.mdb) 的資料夾內尋找鎖定的檔案 (.ldb)，並將這個 .ldb 檔刪除。如果有其他 DSN 指向相同的資料庫檔案，您必須刪除這些 DSN 以避免未來發生錯誤。完成變更之後，請記得重新啟動電腦。


80004005─無法使用 (未知)；檔案已在使用中

當您使用 Microsoft Access 資料庫，並嘗試在網路瀏覽器或是「即時資料」模式中檢視動態網頁時，可能會發生此錯誤。這個錯誤訊息的另一個變化是「80004005─Microsoft Jet 資料庫引擎無法開啟檔案 (未知)。」。

這個錯誤可能是權限問題所導致。如需詳細資訊，請參閱權限問題疑難排解。以下是一些導致錯誤的特定原因與解決方式：

  • Internet Information Server 使用的帳號 (通常是 IUSR) 對於檔案資料庫或含有檔案的資料夾可能沒有正確的 Windows 權限。請在使用者管理員中檢查 IIS 帳號 (IUSR) 的權限。
  • 您可能沒有建立或刪除暫存檔的權限。請檢查處理檔案與資料夾的權限。請確定您擁有可建立或刪除暫存檔的權限。系統通常會在資料庫所在的資料夾中建立暫存檔，不過也有可能會將暫存檔案建立在其他資料夾，如 /Winnt 資料夾之中。
  • 在 Windows 2000 中，必須更改 Access 資料庫 DSN 的逾時值。若要變更逾時值，請選取「開始＞設定＞控制台＞系統管理工具＞資料來源 (ODBC)」。按一下「系統」索引標籤，反白標示正確的 DSN，並按一下「設定」按鈕。按一下「選項」按鈕，並將「頁面逾時」值變更為 5000。

如果還是遇到問題，請參閱以下的「Microsoft 知識庫」文章：

  • PRB：80004005 「無法使用 (未知)；檔案已在使用中」，網址是 http://support.microsoft.com/default.aspx?scid=kb;en-us;Q174943。
  • PRB：Active Server Pages 中的 Microsoft Access Database 連線發生失敗，網址為 http://support.microsoft.com/default.aspx?scid=kb;en-us;Q253604。
  • PRB：錯誤：「無法使用 Access 開啟未知的檔案」，網址為 http://support.microsoft.com/default.aspx?scid=kb;en-us;Q166029。


80004005─登入失敗()

當您使用 Microsoft SQL Server，並嘗試在網路瀏覽器或是「即時資料」模式中檢視動態頁面時，可能會發生此錯誤。

如果 SQL Server 無法接受或識別使用者送出的登入帳號或是密碼 (如果您使用的是標準安全性)，或是 Windows 帳號無法對應至 SQL 帳號 (如果您使用的是整合安全性) 時，則 SQL Server 就會產生此錯誤。

可能的解決方案有：

  • 如果您使用的是標準安全性，則帳號名稱與密碼可能有誤。嘗試系統管理員帳號與密碼 (UID=sa、不輸入密碼)，這組帳號與密碼應該定義在連線字串行中 (DSN 並不會儲存使用者名稱與密碼)。
  • 如果您使用的是整合安全性，請檢查呼叫頁面的 Windows 帳號，並找到對應的 SQL 帳號 (如果有的話)。
  • SQL Server 並不允許 SQL 帳號名稱中有底線存在。如果有人手動將 Windows IUSR_machinename 帳號對應至具有相同名稱的 SQL 帳號，就會發生失敗。請將有使用底線的任何帳號對應至並未使用底線的 SQL 帳號名稱。


80004005─作業必須使用可更新的查詢

當某個事件正在更新資料集、或是在資料集中插入資料時，便會發生這個錯誤。

以下是可能的原因和解決方案：

  • 資料庫所在的資料夾權限的限制太過嚴格。IUSR 的權限必須設為讀取/寫入 (請參閱權限問題疑難排解)。
  • 對於資料庫檔案本身實際上並沒有完整的讀取/寫入權限 (請參閱權限問題疑難排解)。
  • 資料庫可能位於「Inetpub/wwwroot」目錄以外的位置。雖然您仍可以檢視並搜尋資料，但是如果資料庫不在 wwwroot 目錄中，便無法更新資料庫。
  • 資料集是以一個無法更新的查詢為基礎。Joins 就是資料庫中無法更新的查詢的極佳範例。請重新組織所有查詢，使所有查詢都可更新。

如需關於這個錯誤的詳細資訊，請參閱「PRB：ASP 錯誤：更新表格記錄時無法更新查詢」，網址為 http://support.microsoft.com/default.aspx?scid=kb;en-us;Q174640。


80040e07─資料類型與標準運算式中的資料類型不符

當伺服器嘗試處理含有「插入記錄」或「更新記錄」伺服器行為的頁面，且伺服器行為嘗試將 Microsoft Access 資料庫中的「日期/時間」欄的值設為空白字串 ("") 時，可能發生此錯誤。

Microsoft Access 有強大的資料分類功能，因此對於內定欄的值有許多嚴格的規則。SQL 查詢中的空白字串值不可儲存在 Access 的「日期/時間」欄中。目前唯一已知的解決方式是避免在 Access 中插入或更新含有空白字串 ("") 的「日期/時間」欄，或是插入或更新無法對應至資料類型指定的值範圍的任何其他值。


80040e10─參數太少

如果您的 SQL 查詢中指定的欄並沒有存在於資料庫表格中，就可能發生這個錯誤。請對照檢查資料庫表格中的欄名稱與 SQL 查詢中的名稱。這個錯誤通常是因為打字上的錯誤而造成。


80040e10─COUNT 欄位不正確

當您在網路瀏覽器中預覽含有「插入記錄」伺服器行為的頁面，且嘗試使用該伺服器行為在 Microsoft Access 資料庫中插入記錄時，就會發生此錯誤。

您可能嘗試將記錄插入欄位名稱中有問號 (?) 的資料庫欄位中。問號對於某些資料庫引擎而言是特殊字元 (包括 Microsoft Access)，因此不應該用來做為資料庫表格名稱或是欄位名稱。

請開啟資料庫系統，並將欄位名稱中的問號 (?) 刪除，並將頁面上參照此欄位的伺服器行為更新。


80040e14─INSERT INTO 陳述式語法錯誤

當伺服器嘗試處理含有「插入記錄」伺服器行為的頁面時，便會發生這個錯誤。

這個錯誤通常是因為資料庫中的欄位、物件、或變數的名稱發生的問題而造成，常發生的問題如下：

  • 名稱中使用保留字。大多數資料庫都有保留字。例如 date 就是保留字，不可以用來作為資料庫中的欄名。
  • 名稱中使用特殊字元。特殊字元包括：

    . / * : ! # & - ?

  • 在名稱中使用空格。

如果為資料庫中的某個物件定義了輸入遮罩，而插入的資料與遮罩不符，則也可能發生這個錯誤。

若要修正這個錯誤，在指定資料庫的欄名時，請避免使用 date、name、select、where 和 level 等保留字。此外，請清除名稱中的空格與特殊字元。

有關常見資料庫系統的保留字清單，請參閱下列網頁：

  • Microsoft Access，網址為 http://support.microsoft.com/default.aspx?scid=kb;en-us;Q209187
  • Microsoft SQL Server，網址為 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/tsqlref/ts_ra-rz_9oj7.asp
  • MySQL，網址為 http://dev.mysql.com/doc/mysql/en/reserved-words.html


80040e21─「插入」或「更新」發生 ODBC 錯誤

當伺服器嘗試處理含有「更新記錄」或「插入記錄」伺服器行為的頁面時，可能發生此錯誤。資料庫無法處理伺服器行為要執行的更新作業或是插入作業。

以下是可能的原因和解決方案：

  • 伺服器行為正在嘗試更新資料庫表格的自動編號欄位，或是嘗試在自動編號欄位中插入記錄。由於自動編號欄位是由資料庫系統自動產生，因此當您試圖從外部將值填入這些欄位時，就會發生失敗。
  • 對於資料庫欄位而言，伺服器行為所更新或插入的資料類型錯誤，例如在布林 (是/否) 欄位中插入日期、在數值欄位中插入字串，或是在「日期/時間」欄位中插入格式不正確的字串等。


800a0bcd─BOF 或 EOF 為 True

當您嘗試在網頁瀏覽器或「即時資料」模式中檢視動態網頁時，便會發生這個錯誤。

當頁面嘗試由空白的資料集中顯示資料時，就會發生問題。如要解決此問題，請在頁面所要顯示的動態內容中加入「顯示區域」伺服器行為，方式如下：

  1. 將頁面上的動態內容標示。
  2. 在「伺服器行為」面板中按一下加號 (+) 按鈕，並選取「顯示區域＞如果資料集不是空的，即顯示區域」。
  3. 選取提供動態內容的資料集，然後按一下「確定」。
  4. 對頁面上動態內容的每一個元素重複步驟 1 到步驟 3。


疑難排解 MySQL 的錯誤訊息

本節將說明在測試 PHP 資料庫與 MySQL 4.1 之間連線時，您可能遇到的常見錯誤訊息：「用戶端不支援所要求的驗證通訊協定。請考慮升級 MySQL 用戶端。」

您可能需要回復至舊版的 MySQL，或是安裝 PHP 5 並複製一些動態連結程式庫 (DLL)。如需詳細說明，請參閱「Dreamweaver 入門」中的安裝 PHP 應用程式伺服器 (Windows)。

此外，也請參閱 Macromedia 網站上的下列 TechNote：

  • TechNote c45f8a29，網址是 www.macromedia.com/go/c45f8a29。
  • TechNote 16515，網址是 www.macromedia.com/go/16515。


讓網頁呈動態效果

在 Macromedia Dreamweaver 8 中使用網路應用程式開發工具，將動態內容加入您的網頁。

這部份包含下列各章：

最佳化視覺開發的工作區

動態網頁設計的工作流程

取得網頁的資料

定義動態內容的來源

新增動態內容到網頁

顯示資料庫記錄

在網頁中顯示 XML 資料

使用網路服務

新增自訂的伺服器行為

建立表單


最佳化視覺開發的工作區

您可以為 Macromedia Dreamweaver 8 工作區進行最佳化，如此一來您便能以視覺化方式開發網路應用程式。例如，您可以使用面板來快速建立動態網頁，而且可以在工作時檢視網頁上可用的資料。

本章包含下列各節：

顯示網路應用程式開發面板

在 Dreamweaver 內檢視資料庫

在設計檢視中檢視即時資料

在沒有即時資料的設計檢視中工作

在瀏覽器中預覽動態網頁

限制 Dreamweaver 中顯示的資料庫資訊


顯示網路應用程式開發面板

按一下「插入」列上的「應用程式」標籤，顯示讓您可以將動態內容和伺服器行為加入網頁中的一組按鈕，如下所示。

出現的按鈕數目和類型，要視「文件」視窗中開啟的文件類型而定。「插入」列會包含用來將下列項目加入網頁的按鈕：

  • 資料集
  • 動態文字或表格
  • 要在資料庫中插入或更新記錄的表單
  • 記錄導覽列

如果您切換到「程式碼」檢視 (「檢視＞程式碼」)，則其他面板可能會出現在各自的「插入」列類別中，讓您可以在網頁中插入程式碼。例如，如果您在「程式碼」檢視中檢視 ColdFusion 頁面，便可以透過「插入」列的「CFML」類別使用「CFML」面板：

若要了解「插入」列上每個按鈕的功能，請將滑鼠移到圖示上。下列工具提示便會出現：

如果您要為網頁定義動態內容的來源，並將內容加入網頁中，請選取「視窗＞繫結」。「繫結」面板便會出現。

如需詳細資訊，請參閱設定繫結面板選項。

如果您要將伺服器端邏輯加入動態網頁中，請選取「視窗＞伺服器行為」，「伺服器行為」面板便會出現。

伺服器行為是在設計階段於動態網頁中插入的一組說明，而這組說明會於執行階段在伺服器上執行。如需詳細資訊，請參閱設定伺服器行為面板選項。

如果您要探索資料庫或建立資料庫連線，請選取「視窗＞資料庫」，「資料庫」面板便會出現。

如需詳細資訊，請參閱設定資料庫面板選項。

如果您要檢測、新增或修改 JavaBeans、ColdFusion 組件或網路服務的程式碼，請選取「視窗＞組件」，「組件」面板便會出現。

注意

「組件」面板只有在您開啟 ColdFusion、JSP 或 ASP.NET 網頁時才能啟動，而且，文件可能不支援某些組件。例如，ColdFusion 文件不支援 JavaBeans。

如需詳細資訊，請參閱設定組件面板選項。


在 Dreamweaver 內檢視資料庫

連線到資料庫之後，您可以在 Dreamweaver 內檢視結構及資料。

若要檢視資料庫：

  1. 開啟「資料庫」面板 (「視窗＞資料庫」)。

    Dreamweaver 會將已建立連線的所有資料庫填入「資料庫」面板中。如果您正在開發 ColdFusion 網站，Dreamweaver 會將已在「ColdFusion 管理員」中定義好資料來源的所有資料庫填入面板中。

    注意

    Dreamweaver 會在您定義的 ColdFusion 伺服器上尋找目前的網站 (請參閱指定可以處理動態網頁的位置)。

    如果面板中沒有出現資料庫，您必須建立資料庫連線。如需詳細資訊，請參閱連線到資料庫。

  2. 若要顯示資料庫中的表格、預存程序和檢視，請按一下清單中連線旁邊的加號 (+) 圖示。
  3. 若要顯示表格中的欄，請按一下表格名稱。

    欄圖示會反映出資料類型，也會指出主索引鍵。

  4. 若要檢視表格中的資料，請在清單中的表格名稱上按滑鼠右鍵 (Windows) 或按 Control + 按一下 (Macintosh)，然後從彈出式選單中選取「檢視資料」。

    Dreamweaver 也會識別每個表格的主索引鍵，以及每欄的資料類型。


在設計檢視中檢視即時資料

Dreamweaver 可以讓您在「設計」檢視中處理網頁的同時，顯示網頁的動態內容。如需「設計」檢視的詳細資訊，請參閱在文件視窗中切換檢視。

若要在「設計」檢視中檢視動態內容：

  1. 確定 Dreamweaver 已正確設定為可以顯示即時資料。

    如需詳細資訊，請參閱顯示即時資料的需求。

  2. 選取「檢視＞即時資料」。

    Dreamweaver 會在「設計」檢視中顯示完成動態內容的網頁。

當「設計」檢視中的「即時資料」開啟時，您可以執行下列動作：

  • 使用網頁設計工具調整頁面版面
  • 新增、編輯或刪除動態內容
  • 新增、編輯或刪除伺服器行為

    注意

    連結在「設計」檢視中無效。若要測試連結，請使用「在瀏覽器中預覽」功能 (請參閱在瀏覽器中預覽動態網頁)。

當您在網頁上進行會影響動態內容的變更時，可以按一下「重新整理」按鈕，重新整理網頁 (圓形箭頭圖示)。Dreamweaver 也會自動為您重新整理網頁。

下列圖例顯示關閉「即時資料」的動態網頁：

下圖即顯示已開啟「即時資料」的同一個網頁：

相關主題

  • 顯示即時資料的需求
  • 複製相關檔案
  • 將預期的參數提供給網頁
  • 重新整理網頁
  • 即時資料檢視疑難排解
  • 在沒有即時資料的設計檢視中工作


顯示即時資料的需求

若要在「設計」檢視中檢視即時資料，您必須執行下列動作：

  • 定義要處理動態網頁的資料夾。如需相關說明，請參閱指定可以處理動態網頁的位置。

    當您啟用「即時資料」時，開啟文件的暫時複本會傳送到資料夾以進行處理。結果網頁會傳回並顯示在「設計」檢視中，而伺服器上的暫時複本就會被刪除。

    如果在您啟用「即時資料」時顯示錯誤訊息，請確定「網站定義」對話方塊中的 URL 前置詞是否正確。如需詳細資訊，請參閱連線到資料庫。

  • 將相關檔案 (如果有的話) 複製到資料夾中。如需詳細資訊，請參閱複製相關檔案。
  • 將使用者通常會提供的任何參數提供給網頁。如需相關說明，請參閱將預期的參數提供給網頁。

如果您在使用「即時資料」檢視時遇到問題，請參閱即時資料檢視疑難排解。

相關主題

  • 在設計檢視中檢視即時資料
  • 在沒有即時資料的設計檢視中工作


複製相關檔案

有些動態網頁要視其他檔案是否能正確運作而定。您必須將所有的相關檔案 (包括伺服器端包含和相關檔案，如影像檔和 JSP 類別檔) 上傳到您定義的資料夾，以進行動態網頁的處理 (請參閱指定可以處理動態網頁的位置)。當您在「設計」檢視中啟用「即時資料」時，Dreamweaver 不會自動將相關檔案複製到資料夾中。

注意

「即時資料」支援伺服器端包含和應用程式檔 (如 global.asa (ASP) 和 application.cfm (ColdFusion)) 中的程式碼。在開啟「即時資料」之前，請確定將這些檔案上傳到伺服器。

若要將相關檔案複製到應用程式伺服器：

  1. 開啟「網站」面板 (「視窗＞網站檔案」)，然後按一下「擴展」按鈕 (面板工具列上的最後一個圖示)。

    「網站」面板會展開為全螢幕。

  2. 在展開的「網站」視窗工具列上，按一下應用程式伺服器圖示 (從左邊算起來第二個圖示)，

    應用程式伺服器的根資料夾便會出現在「遠端網站」下。

  3. 在「本機資料夾」下，選取相關檔案。
  4. 按一下工具列上的藍色向上箭頭，將檔案複製到應用程式伺服器中，或是將檔案拖曳到「遠端網站」下的適當資料夾中。

您只需要為網站執行一次這個動作。除非您要新增更多相關檔案，才必須將檔案也複製到資料夾中。

相關主題

  • 在設計檢視中檢視即時資料
  • 顯示即時資料的需求
  • 將預期的參數提供給網頁
  • 重新整理網頁
  • 即時資料檢視疑難排解

將預期的參數提供給網頁

為了產生動態內容，有些網頁需要由使用者提供參數，例如，網頁需要記錄的 ID 數字以尋找和顯示該記錄。沒有這個資料的話，Dreamweaver 就無法產生要在「設計」檢視中顯示的動態內容。

如果網頁預期要由使用者提供參數，您就必須提供參數，如下所示。

若要將預期來自使用者的資料提供給網頁：

  1. 在「文件」視窗中，從「檢視」選單中選取「即時資料設定」。

    就會出現「即時資料設定」對話方塊。

  2. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定即時資料設定對話方塊選項。

如果您在「即時資料設定」對話方塊中指定了 GET 方法，則會有一個文字方塊出現在「設計」檢視工具列上。使用這個文字方塊輸入不同的 URL 參數，然後按一下「重新整理」按鈕 (圓形箭頭圖示)，查看參數如何影響網頁。

以下列格式輸入每個 URL 參數：

name=value;

在這個格式中，name 是您的頁面所預期的 URL 參數名稱，而 value 則是該參數所擁有的值。如需詳細資訊，請參閱 URL 參數。

相關主題

  • 在設計檢視中檢視即時資料
  • 顯示即時資料的需求
  • 複製相關檔案
  • 重新整理網頁
  • 即時資料檢視疑難排解


重新整理網頁

若要重新整理網頁：

  • 如果您要在進行影響動態內容的變更後重新整理網頁，請先開啟「即時資料」，再按一下文件工具列上的「重新整理」按鈕 (圓形箭頭圖示)。

    您也可以選取工具列上的「自動重新整理」選項。開啟這個選項的話，只要您做了會影響動態內容的變更，都會重新整理網頁。當您在「即時資料」視窗中工作時，如果資料庫連線速度很慢，您可以關閉這個選項。

相關主題

  • 在設計檢視中檢視即時資料
  • 顯示即時資料的需求
  • 複製相關檔案
  • 將預期的參數提供給網頁
  • 即時資料檢視疑難排解

即時資料檢視疑難排解

很多與「即時資料」檢視相關的問題可以追溯回「網站定義」對話方塊中遺失或不正確的值 (「網站＞定義網站」)。

檢查「網站定義」對話方塊的「測試伺服器」類別。「遠端資料夾」文字方塊應該要指定一個能夠處理動態網頁的資料夾 (請參閱指定可以處理動態網頁的位置)。如果您在硬碟上執行的是 IIS 或 PWS，以下是適合遠端資料夾的範例：

C:\Inetpub\wwwroot\myapp\

確認「URL 前置詞」方塊指定了對應到遠端資料夾的 URL。例如，如果本機電腦上正在執行 PWS 或 IIS ，則下列遠端資料夾會擁有下列的 URL 前置詞：

遠端資料夾 | URL 前置詞
C:\Inetpub\wwwroot\ | http://localhost/
C:\Inetpub\wwwroot\myapp\ | http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes | http://localhost/fs/planes

如需詳細資訊，請參閱連線到資料庫。

相關主題

  • 在設計檢視中檢視即時資料
  • 顯示即時資料的需求
  • 複製相關檔案
  • 將預期的參數提供給網頁
  • 重新整理網頁


在沒有即時資料的設計檢視中工作

如果「即時資料」已關閉，或者您暫時與應用程式伺服器中斷連線，您仍然可以在「設計」檢視中處理動態網頁。Dreamweaver 會使用預留位置在網頁上顯示視覺動態內容。例如，從資料庫抽取出來的動態文字預留位置會使用 {RecordsetName.ColumnName} 語法，其中 Recordset 是資料集的名稱，而 ColumnName 則是您從資料集中選擇的欄名稱。

有時候，動態文字預留位置的長度會扭曲「設計」檢視中的頁面版面。您可以使用空的大括弧做為預留位置來解決這個問題。

若要使用空的大括弧做為動態文字的預留位置：

  1. 請選取「編輯＞偏好設定＞隱藏元素」或「Dreamweaver＞偏好設定＞隱藏元素」(Mac OS X)。
  2. 在「顯示動態文字於」彈出式選單中選取 { }。
  3. 按一下「確定」。

相關主題

  • 在設計檢視中檢視即時資料
  • 顯示即時資料的需求


在瀏覽器中預覽動態網頁

網路應用程式開發人員經常是在網頁瀏覽器中檢查網頁，來進行除錯。Dreamweaver 以「在瀏覽器中預覽」命令 (F12) 執行這個檢查工作。這個指令可讓您在瀏覽器中快速檢視動態網頁，而不需先手動將動態網頁上傳到伺服器。

提示

您也可以在處理網頁時使用「設計」檢視來快速檢查。「設計」檢視會顯示網頁的完整可編輯版面，包括即時資料在內。如需詳細資訊，請參閱在設計檢視中檢視即時資料。

您可以指定 Dreamweaver 使用暫存檔，而不使用原始檔案。使用這個選項時，Dreamweaver 會在網頁於瀏覽器中顯示之前，先在網站伺服器上執行網頁的暫時複本 (然後 Dreamweaver 會刪除伺服器上的暫存檔)。若要設定這個選項，請選取「編輯＞偏好設定＞在瀏覽器中預覽」。

若要預覽動態網頁，您必須在「網站定義」對話方塊的「測試伺服器」類別中輸入所需資訊。如需詳細資訊，請參閱指定可以處理動態網頁的位置。

「在瀏覽器中預覽」並不會上傳相關網頁 (如結果或細節頁面)、相關檔 (如影像檔) 或伺服器端包含。若要上傳遺失的檔案，請選取「視窗＞網站」以開啟「網站」面板，再選取「本機資料夾」下的檔案，並按一下工具列中的藍色向上箭頭，就可以將檔案複製到網站伺服器資料夾。


限制 Dreamweaver 中顯示的資料庫資訊

大型資料庫系統 (如 Oracle) 的進階使用者，應該限制 Dreamweaver 在設計階段所擷取和顯示的資料庫項目數。Oracle 資料庫可能包含了 Dreamweaver 無法在設計階段處理的項目。您可以在 Oracle 中建立資料結構，然後於設計階段在 Dreamweaver 中用來篩選出不必要的項目。

注意

您無法在 Microsoft Access 中建立資料結構或目錄。

限制 Dreamweaver 在設計階段所能擷取的資訊量，可能對其他使用者有所幫助。有些資料庫包含數十或數百個表格，而您可能不希望 Dreamweaver 在您工作時將這些表格都列出來。資料結構或目錄可以限制 Dreamweaver 在設計階段所能取得的資料庫項目數。

您必須先在資料庫系統中建立資料結構或目錄，才能在 Dreamweaver 中套用。請查詢資料庫系統文件或者洽詢系統管理員。

如果您開發的是 ColdFusion 應用程式，便無法在 Dreamweaver 中套用綱要或目錄。

若要在 Dreamweaver 中將資料結構或目錄套用至 ColdFusion 以外的應用程式中：

  1. 在 Dreamweaver 中開啟動態網頁，然後開啟「資料庫」面板 (「視窗＞資料庫」)。

    如果資料庫連線已經存在，面板中就會出現連線清單。

  2. 用滑鼠右鍵按一下 (Windows) 或按 Control + 按一下 (Macintosh) 連線，再從彈出式選單中選取「編輯連線」。適合連線的對話方塊便會出現。

    如果連線不存在，請按一下面板頂端的加號 (+) 按鈕，並建立連線。如需詳細資訊，請參閱連線到資料庫。

  3. 在連線的對話方塊中，按一下「進階」。

    便會出現「限制」對話方塊。

  4. 指定資料結構或目錄。
  5. 按一下「確定」。


參考

本節將提供這一章裡所介紹之下列對話方塊和面板的相關資訊：

  • 設定繫結面板選項
  • 設定伺服器行為面板選項
  • 設定資料庫面板選項
  • 設定組件面板選項
  • 設定即時資料設定對話方塊選項
  • 設定限制對話方塊選項


設定繫結面板選項

這個面板的用途是定義網頁動態內容的來源，並將此內容加到網頁中。

您可以使用這個面板執行下列作業：

  • 定義動態內容的來源
  • 新增動態內容到網頁
  • 變更或刪除內容來源
  • 使用預先定義的資料格式
  • 附加 XML 資料來源
  • 顯示 XSLT 頁面中的 XML 資料


設定伺服器行為面板選項

這個面板的用途是將 Dreamweaver 伺服器行為加入網頁、編輯伺服器行為，以及建立新的伺服器行為。

您可以使用這個面板執行下列作業：

  • 顯示資料庫記錄
  • 定義動態內容的來源
  • 建立主要/細節頁面 (ColdFusion)
  • 建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)
  • 建立記錄插入頁面 (所有伺服器)
  • 建立用以更新記錄的頁面 (ColdFusion)
  • 建立用以刪除記錄的頁面 (ColdFusion)
  • 建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)
  • 建立主要/細節頁面 (ASP.NET)
  • 建立資料庫搜尋頁面 (ASP.NET)
  • 建立記錄插入頁面 (ASP.NET)
  • 建立用以更新記錄的頁面 (ASP.NET)
  • 建立用以刪除記錄的頁面 (ASP.NET)
  • 使用預存程序修改資料庫 (ASP.NET)
  • 建立限制存取網站的頁面 (ASP.NET)
  • 建立主要/細節頁面 (PHP)
  • 建立搜尋/結果頁面 (PHP)
  • 建立記錄插入頁面 (PHP)
  • 建立用以更新記錄的頁面 (PHP)
  • 建立用以刪除記錄的頁面 (PHP)
  • 建立限制存取網站的頁面 (PHP)
  • 刪除動態內容
  • 新增自訂的伺服器行為


設定資料庫面板選項

「資料庫」面板的用途是建立資料庫連線、檢測資料庫，以及在網頁中插入資料庫相關程式碼。

您可以使用這個面板執行下列作業：

  • 在 Dreamweaver 內檢視資料庫
  • 連線到資料庫


設定組件面板選項

「組件」面板的用途是建立和檢測組件，以及在網頁中插入組件程式碼。

注意

這個面板在「設計」檢視中無法使用。

您可以使用這個面板執行下列作業：

  • 快取內容來源
  • 使用 ColdFusion 組件
  • 使用網路服務


設定即時資料設定對話方塊選項

這個對話方塊的用途是將預期由使用者提供的資料提供給網頁，如此 Dreamweaver 就可以在「設計」檢視中顯示具有即時資料的網頁。

若要提供包含即時資料的網頁：

  1. 在「URL 要求」區域中，按一下加號 (+) 按鈕，並輸入網頁預期的參數。

    指定每個參數的名稱和測試值。

  2. 在「方法」彈出式選單中，選取網頁所預期的 HTML 表單方法：POST 或 GET。
  3. 執行方法之前，請在「起始的 Script」文字區中，輸入您要插入網頁頂端的任何原始碼。

    起始的 Script 通常由設定 Session 變數的程式碼所組成。如需詳細資訊，請參閱了解 Session 變數。

  4. 若要儲存目前網頁的設定，請按一下「儲存此文件的設定」。

    注意

    若要儲存設定，必須啟用「設計備註」(「檔案＞設計備註」)。
  5. 按一下「確定」。

相關主題

  • 將預期的參數提供給網頁
  • 在設計檢視中檢視即時資料
  • 表單參數
  • URL 參數


設定限制對話方塊選項

這個對話方塊的用途是使用預先定義的資料庫資料結構或目錄，限制 Dreamweaver 在設計階段所能擷取的資料庫項目數目。

您必須先在資料庫應用程式中建立資料結構或目錄，才能在 Dreamweaver 中套用。請查詢資料庫系統的文件，或向您的系統管理員洽詢。

注意

您無法在 Microsoft Access 中建立資料結構或目錄。

若要在您的資料庫應用程式中建立資料結構或目錄：

  • 請指定資料結構或目錄，然後按一下「確定」。

相關主題

  • 限制 Dreamweaver 中顯示的資料庫資訊


動態網頁設計的工作流程

即使沒有程式設計語言方面的經驗，您仍然可以建立動態網站，這是 Macromedia Dreamweaver 8 的一項重要優點。在 Dreamweaver 視覺工具的協助下，當您在建立能夠顯示資料庫動態內容的網站時，不需要親手撰寫必要的複雜程式設計邏輯，便能開發動態網站。Dreamweaver 讓您使用任何常用的網路程式設計語言和伺服器技術來建立動態網站，包括 ColdFusion、ASP.NET、Microsoft Active Server Pages (ASP)、JavaServer Pages (JSP) 和 PHP。

本章摘要列出成功設計及建立動態網站時需要依循的重要步驟。在每一節的結尾處，您可以找到開發動態網頁時所需的特定程序的參考。開發動態網頁的五個重要步驟如下：

設計網頁

建立動態內容的來源

在網頁上新增動態內容

增強動態網頁的功能

網頁測試和除錯


設計網頁

設計任何網站 (不論靜態或動態) 的重要步驟就是網頁的視覺設計。在將動態元素加入網頁時，網頁設計對可用性而言就相當重要。您要仔細考量使用者與個別網頁以及整個網站的互動方式。

將動態內容包含到網頁內的常見方法是建立表格來表示內容，並將動態內容匯入表格的一個或多個儲存格中。使用這個方法，您就可以用結構化的格式來表示各種類型的資訊。

如需有關設計網頁的資訊，請參閱下列各章：

  • 以表格呈現內容
  • 在版面模式中配置頁面
  • 使用頁面
  • 插入和格式化文字
  • 插入影像
  • 連結和導覽
  • 新增音效、視訊和互動元素


建立動態內容的來源

動態網站需要可以抽取資料的內容來源，才能在網頁上顯示相關資料。在 Dreamweaver 中，這些資料來源可以是資料庫、Request 變數、伺服器變數、表單變數或預存程序。

您必須先執行下列動作，才能在網頁中使用這些內容來源：

  • 建立連線到動態內容來源 (如資料庫) 和處理網頁的應用程式伺服器
  • 指定您要在資料庫中顯示的資訊，或是您要在網頁中包含的變數
  • 使用 Dreamweaver 的點按介面來選取動態內容元素，並將其插入選取的網頁中

Dreamweaver 讓您能輕鬆地連線到資料庫，建立可以抽取動態內容的資料集。資料集是資料庫查詢的結果，它會抽取您要求的特定資訊，讓您將該資訊顯示在指定的網頁內。您要根據資料庫中所包含的資訊和要顯示的內容來定義資料集。

不同的技術廠商可能使用不同的資料集技術。在 ASP 和 ColdFusion 中，資料集是定義為查詢。在 JSP 中，資料集稱為結果集。ASP.NET 則將資料集稱為 DataSet (資料集)。如果您使用其他的資料來源，如使用者輸入或伺服器變數，則在 Dreamweaver 中所定義的資料來源名稱會與資料來源本身的名稱相同。

若要在 Dreamweaver 中使用內容來源，您可以使用「繫結」面板建立資料來源。「繫結」面板如下所示，您可以用來建立資料庫的資料來源和不同的變數類型。當您建立資料來源時，它會儲存在「繫結」面板中，您可以在這個面板中選取該資料來源，然後將其插入目前網頁中。

若要在 Dreamweaver 中建立資料集，請使用「資料集」對話方塊。您可以透過「插入」列的「伺服器」窗格，或者是透過「繫結」面板，以開啟「資料集」對話方塊。您可以使用「簡單資料集」對話方塊選取一或多個表格 (表格中的資料為您要包含在資料集中的資料)，然後選取現有的資料庫連線，建立資料庫查詢。您甚至可以使用對話方塊的「篩選器」區段，建立簡單搜尋並傳回查詢準則。您可以從「資料集」對話方塊內測試查詢，並在將查詢加入「繫結」面板之前，先做任何必要的調整。

建立資料庫連線並定義資料集之後，資料集就會出現在「繫結」面板中，您可以從這裡將它匯入任何定義網站內的網頁。以下圖例顯示「繫結」面板，內含員工資料庫開啟的資料集。選取項目並按一下面板底部的「插入」按鈕，就能將顯示的任何值插入網頁。選取的項目便會插入網頁內的指定預留位置。

如需有關資料庫的資訊，以及建立資料庫連線所需的程序，請參閱下列各章：

  • 取得網頁的資料
  • 資料庫入門手冊


在網頁上新增動態內容

在定義資料集或其他資料來源，並將其加入「繫結」面板之後，您就可以將資料集所代表的動態內容插入網頁中。Dreamweaver 選單驅動介面讓新增動態內容元素的步驟變得很簡單，就像從「繫結」面板中選取動態內容來源，再將其插入目前網頁內適當的文字、影像或表單物件中一樣容易。

當您將動態內容元素或其他伺服器行為插入網頁時，Dreamweaver 會將伺服器端 Script 插入網頁的原始碼中。這個 Script 會指示伺服器從定義好的資料來源擷取資料，再把資料呈現在網頁內。

  • 若要在網頁中置入動態內容，您可以執行下列其中一項作業：
  • 在「程式碼」或「設計」檢視中，將動態內容放在插入點上。
  • 取代文字字串或其他預留位置。

將動態內容插入 HTML 屬性中。例如，動態內容可以定義影像的 src 屬性或表單欄位的 value 屬性。

如需有關在網頁上新增動態內容的詳細程序，請參閱下列各章：

  • 定義動態內容的來源
  • 建立表單


增強動態網頁的功能

除了新增動態內容之外，Dreamweaver 還可以讓您透過伺服器行為的使用，輕鬆地在網頁內包含複雜的應用程式邏輯。伺服器行為是伺服器端程式碼中預先定義好的片段，會將應用程式邏輯加入網頁，提供更好的互動和功能。Dreamweaver 伺服器行為讓您無需自行撰寫程式碼，就可以將應用程式邏輯加入網站。Dreamweaver 中的伺服器行為支援 ColdFusion、ASP、ASP.NET、JSP 和 PHP 文件類型。

伺服器行為撰寫後通過快速、安全且穩定的測試。Dreamweaver 的內建伺服器行為已設計成可支援所有瀏覽器的跨平台網頁。


在網頁上新增伺服器行為

若要在網頁上新增伺服器行為，請透過「插入」列的「應用程式」類別，或者是透過「伺服器行為」面板進行選取。若要使用「伺服器行為」面板，請選取「視窗＞伺服器行為」，按一下面板上的加號 (+) 按鈕，再從彈出式選單中選取伺服器行為。下圖顯示的是可以從「插入」列選取的「伺服器行為」按鈕。

Dreamweaver 提供的點按介面，使得在網頁上套用動態內容和複雜行為，變得就像是插入文字和設計元素一樣容易。您可以使用下列伺服器行為：

  • 從現有的資料庫定義資料集。然後您所定義的資料集就會儲存在「繫結」面板中。
  • 在單一網頁上顯示多筆記錄。您可以選取整個表格或包含動態內容的個別儲存格或列，然後指定要顯示在每個網頁檢視上的記錄數。
  • 建立動態表格並插入網頁中，然後建立表格與資料集的關聯。稍後，您可以分別使用「屬性」檢視窗和「重複區域伺服器行為」來修改表格外觀和重複區域。
  • 將動態文字物件插入網頁中。您插入的文字物件是來自預先定義資料集的項目，您可以對它套用任何的 Dreamweaver 資料格式。
  • 在資料庫中建立更新資訊的記錄導覽和狀態控制項、主要/細節頁面和表單。
  • 顯示資料庫記錄中一筆以上的記錄。
  • 建立資料集導覽連結，讓使用者能夠檢視資料庫記錄中的上一筆或下一筆記錄。
  • 新增記錄記數器，以協助使用者追蹤傳回的記錄數目，以及記錄在傳回結果中的所在位置。

您也可以自行撰寫伺服器行為，或是安裝由協力廠商撰寫的伺服器行為，來擴充 Dreamweaver 的伺服器行為。

如需有關使用伺服器行為來增強網頁功能的詳細資訊，請參閱下列各章：

  • 新增動態內容到網頁
  • 顯示資料庫記錄
  • 快速建立 ColdFusion 應用程式
  • 快速建立 ASP.NET 應用程式
  • 快速建立 ASP 與 JSP 應用程式
  • 快速建立 PHP 應用程式


網頁測試和除錯

在網路上使用動態網頁 (或整個網站) 之前，您要先測試一下功能。如需測試網站可用性和跨平台相容性的輔助指南，請參閱網站測試方針。如需有關為聽障、視障和其他殘障人士設計網站的詳細資訊，請參閱使用 Dreamweaver 輔助功能特性。您應該要熟悉本節中所描述的問題，並考量您的應用程式功能對殘障人士可能造成的影響。

本節包含下列主題：

  • 測試動態內容
  • 編輯網頁上的動態內容
  • 刪除動態內容


測試動態內容

Dreamweaver 可以讓您使用「即時資料」視窗來預覽和編輯動態內容。

注意

「即時資料」視窗中無法使用連結。若要測試連結，請使用 Dreamweaver 的「在瀏覽器中預覽」功能 (請參閱檢查瀏覽器相容性)。

顯示動態內容時，您可以執行下列工作：

  • 使用 Dreamweaver 網頁設計工具調整頁面版面
  • 新增、編輯或刪除動態內容
  • 新增、編輯或刪除伺服器行為

為了達到這個效果，Dreamweaver 會先在伺服器上執行動態網頁，然後才在「即時資料」視窗中顯示動態網頁。只要您切換到「即時資料」視窗，開啟文件的暫時複本就會傳送給應用程式伺服器，進行處理。結果網頁會傳回並顯示在「即時資料」視窗中，而伺服器上的暫時複本就會被刪除。

在「檢視」選單中選取「即時資料」，便可以在「文件」視窗和「即時資料」視窗之間切換。如果網頁預期由使用者提供資料─例如，主要頁面中所選取的記錄 ID 數字─您可以自行在「即時資料設定」對話方塊中將該資料提供給網頁。

若要輸入即時資料參數：

  1. 在網頁上進行必要變更。
  2. 如果您的網頁預期使用 GET 方法，由 HTML 表單提供 URL 參數，請在工具列的文字方塊中輸入 name/value 配對，然後按一下「重新整理」按鈕 (圓形箭頭圖示)。

    以下列格式輸入測試資料：

    name=value;

    在這個格式中，name 是您的頁面所預期的 URL 參數名稱，而 value 則是該參數所擁有的值。

    您也可以在「即時資料設定」對話方塊 (「檢視＞即時資料設定」) 中定義 name/value 配對，並與網頁一起儲存。

  3. 如果網頁需要重新整理，請按一下「重新整理」按鈕。

相關主題

  • 編輯網頁上的動態內容
  • 刪除動態內容


編輯網頁上的動態內容

您只要變更提供內容的伺服器行為，或是將行為全部刪除，就能修改或移除網頁中的動態內容。例如，您可以編輯資料集伺服器行為，將更多記錄傳回給網頁。

頁面上的動態內容會列在「伺服器行為」面板中。例如，如果您將資料集加入網頁中，「伺服器行為」面板會列示如下：

Recordset(myRecordset)

如果您新增另一個資料集到頁面，「伺服器行為」面板會同時將這兩個資料集列示如下：

Recordset(mySecondRecordset)
Recordset(myRecordset)

若要編輯提供動態內容的伺服器行為：

  1. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)。
  2. 按一下加號 (+) 按鈕，顯示伺服器行為，再按兩下「伺服器行為」面板中的伺服器行為。

    您用來定義原始資料來源的對話方塊便會出現。

  3. 在對話方塊中進行變更，然後按一下「確定」。

您也可以使用「屬性」檢視窗，編輯網頁上的資料集。開啟「屬性」檢視窗 (「視窗＞屬性」)，然後在「伺服器行為」面板 (「視窗＞伺服器行為」) 中選取資料集。

相關主題

  • 測試動態內容
  • 刪除動態內容


刪除動態內容

新增動態內容到頁面之後，您可以選取頁面上的動態內容並且按「刪除」來刪除它。您也可以在「伺服器行為」面板中選取動態內容，然後按一下減號 (-) 按鈕，刪除動態內容。

注意

這項作業會移除網頁中從資料庫擷取動態內容的伺服器端 Script，它並不會刪除資料庫中的資料。

相關主題

  • 測試動態內容
  • 編輯網頁上的動態內容


取得網頁的資料

網路應用程式和動態網站需要可以擷取資料的內容來源。資料和資料來源的格式有很多種。通常，資料是由傳回網頁的文字或數字資訊所組成，會以某種格式顯示給使用者。

本章包含下列各節：

使用資料庫儲存內容

收集使用者送出的資料

存取儲存在 Session 變數中的資料


使用資料庫儲存內容

使用資料庫儲存內容，可讓您將網站的設計與希望顯示給網站使用者的內容加以區隔。您不必為每個網頁撰寫個別的 HTML 檔，只要針對您希望表現的各種不同資訊撰寫網頁─或樣版即可。您可以使用資料庫將新的內容提供給某個網站，只要將內容上傳到資料庫中，然後回應使用者的要求，讓網站以動態方式擷取該內容即可。在資料庫中儲存內容資訊的重要好處，在於能夠更新單一來源中的資訊，再將該變更填入整個網站，而不必搜尋可能包含資訊的網頁，也不用手動編輯每個網頁。

資料庫的很多格式取決於資料庫必須儲存的資料量和複雜性。通常安裝在 Windows 電腦上的資料庫是 Microsoft Access。如果您是資料庫的新手，Access 提供簡易使用的介面，讓您使用資料庫表格。雖然您可以使用 Access 做為大部份網站應用程式的資料來源，但要小心 Access 有 2 GB 的檔案大小限制，而且還限制同時只能有 255 個使用者。因此，對網站開發與公司工作群組而言，Access 是個不錯的選擇。然而，如果您預期會有大量的使用者存取網站，請規劃使用專為支援網站的預定使用者數目而設計的資料庫。

針對需要彈性程度較大的資料模型、又可以支援大量同時使用者的網站，一般都使用伺服器架構的關聯式資料庫 (通常指 RDBMS)。用來儲存網路應用程式和動態網站的內容之常見關聯式資料庫包括 MySQL、Microsoft SQL Server 和 Oracle。

無論您使用何種資料庫來支援您的網站，都可以使用 Macromedia Dreamweaver 8 設計網站表單，以便插入、更新或刪除資料庫中的資料。

若要了解更多有關資料庫的資訊，請參閱資料庫入門手冊。


存取儲存在資料庫中的資料

網頁無法直接存取儲存在資料庫中的資料，但是網頁可以與資料集互動。資料集是資訊或記錄 (從資料庫中抽取) 的子集。這個資訊子集是使用資料庫查詢抽取出來的。查詢是搜尋陳述式，為了從資料庫尋找及抽取特定資訊而設計。Dreamweaver 是使用「結構化查詢語言」(SQL) 來建立查詢。雖然您不需要了解 SQL (唸法為 sequel)，就可以使用 Dreamweaver 建立簡單的查詢，但是了解這個簡單明瞭的語言的基本概念，可以讓您建立更進階的查詢，因而能在您設計動態網頁時提供更大的彈性。若要了解 SQL 的基本概念，請參閱 SQL 入門。

SQL 查詢產生的資料集，可以只包含某些欄、只包含某些記錄或者是兩者都包含的組合。資料集也可以包含資料庫表格的所有記錄和欄。但是，因為應用程式很少需要使用到資料庫中的每項資料，所以您應該想辦法讓資料集愈小愈好。因為網站伺服器會在記憶體中暫時保留資料集，所以使用較小的資料集會用到較少的記憶體，還可能改善伺服器效能。


收集使用者送出的資料

您可以利用網頁收集來自使用者的資訊，並將這項資訊儲存在伺服器的記憶體中，然後再根據使用者輸入的內容，使用這項資訊建立動態回應。收集資訊最常用的工具是 HTML 表單和超文字連結選取範圍。

HTML 表單可以讓您收集來自使用者的資訊，並將該資訊儲存在伺服器的記憶體中。HTML 表單可以將資訊視為表單參數或 URL 參數傳送。如果您將表單的方法屬性設定為 POST，則瀏覽器會在傳送至伺服器的訊息本文中加入表單值。如果您將表單的方法屬性設定為 GET，則瀏覽器會將表單值附加到在 action 屬性中指定的 URL，並將該資訊傳送給伺服器。

超文字連結也可以讓您收集來自使用者的資訊，並將該資訊儲存在伺服器的記憶體中。您要指定一個值 (或多個值)，讓使用者按一下連結 (偏好設定) 時能將這個值送出，例如，將值附加到錨點標籤中所指定的 URL。當使用者按一下連結時，瀏覽器會將 URL 和附加值傳送到伺服器。

本節描述如何建立表單和 URL 參數，讓網路應用程式使用。

本節包含下列主題：

  • 表單參數
  • URL 參數
  • 使用 HTML 連結建立 URL 參數
  • 擷取表單和 URL 參數


表單參數

表單參數是藉由使用 POST 或 GET 方法的 HTML 表單，傳送給伺服器。使用 POST 方法時，參數是在訊息本文中傳送。相反地，GET 方法則是將參數附加到要求的 URL。

您可以使用 Dreamweaver 來快速設計將表單參數傳送給伺服器的 HTML 表單。如需相關說明，請參閱建立表單。請小心選擇您用來將資訊從瀏覽器傳輸到伺服器的方法。

表單參數會採用對應表單物件的名稱。例如，如果您的表單中包含名為 txtLastName 的文字欄位，則當使用者按一下「送出」按鈕時，下列表單參數便會傳送至伺服器：

txtLastName=enteredvalue

在網路應用程式預期有精確參數值的情況下 (例如，當它根據其中一個選項來執行動作時)，請使用選項按鈕、核取方塊或清單/選單表單物件，來控制使用者送出的可能值。這麼做可以防止使用者輸入錯誤資訊，而造成應用程式錯誤。以下範例描述提供三種選項的彈出式選單表單：

每個選單選項會對應到一個硬式編碼值，而這個值會以表單參數的形式送出給伺服器。「列出值」對話方塊會比對每個清單項目和值 (Add、Update 或 Delete)，如下所示：

相關主題

  • URL 參數
  • 使用 HTML 連結建立 URL 參數
  • 擷取表單和 URL 參數


URL 參數

URL 參數是附加到 URL 的一組 name/value。參數是以問號 (?) 為開頭，並採用 name=value 的格式。如果存在的 URL 參數超過一個，則每個參數會以 & 分隔。下面的範例顯示的是具有兩組 name/value 的 URL 參數：

http://server/path/document?name1=value1&name2=value2

透過 URL 參數，您可以將使用者提供的資訊從瀏覽器傳遞給伺服器。當伺服器接收到 Request，而且參數已附加到要求的 URL 時，伺服器會在將該網頁提供給瀏覽器之前，先將參數放置在 Request 網頁的配置上。

在這個範例中，想像該應用程式是一個網路架構的店面。由於網站的開發人員希望能夠儘可能吸引各地的使用者族群，因此將網站設定為可支援外幣。當使用者登入網站時，可以選取要用何種貨幣來檢視可用項目的價格。

  1. 瀏覽器會向伺服器要求 report.cfm 網頁。這項要求包含 URL 參數 Currency="euro"。Currency="euro" 變數指定擷取到的所有金額都要以歐盟的歐元 (Euro) 來顯示。
  2. 伺服器會將 URL 參數暫時儲存在記憶體中。
  3. report.cfm 網頁會擷取並使用該參數，以歐元 (Euro) 擷取各個項目的費用。這些金額可以儲存在不同貨幣的資料庫表格中，或是從每個項目相關的單一貨幣轉換為應用程式支援的任何貨幣。
  4. 伺服器會將 report.cfm 網頁傳送至瀏覽器，並以要求的貨幣單位顯示項目的價值。當這個使用者結束工作階段時，伺服器會清除 URL 參數的值，釋放伺服器記憶體，以便保留登入網站的新使用者的要求。

    下圖將會說明應用程式伺服器如何處理 URL 參數。

當 HTTP 的 GET 方法與 HTML 表單結合使用時，便會建立 URL 參數。送出表單時，GET 方法會指定要將參數值附加到 URL 要求。

URL 參數的一般用法包括根據使用者的偏好設定對網站進行個人化動作。例如，由使用者名稱和密碼組成的 URL 參數可以用來對使用者進行驗證，而且只顯示使用者已訂閱的資訊。這種常見範例包括財務網站，這類網站會根據使用者先前所選擇的股票市場符號，顯示個別股票價格。網路應用程式研發人員通常會使用 URL 參數，將值傳遞給應用程式內的變數。例如，您可以在網路應用程式中將搜尋條件傳遞給 SQL 變數，產生搜尋結果。

相關主題

  • 使用 HTML 連結建立 URL 參數
  • 擷取表單和 URL 參數


使用 HTML 連結建立 URL 參數

在 HTML 連結內建立 URL 參數，包括使用 HTML 錨點標籤的 href 屬性。若要直接在該屬性中輸入 URL 參數，您可以切換至「程式碼」檢視 (「檢視＞程式碼」)，或是在「屬性」檢視窗的「連結」文字方塊中，將 URL 參數附加至該連結 URL 的尾端。

在以下範例中，三個連結建立了單一的 URL 參數 (action) 並具有三個可能的值 (Add、Update 和 Delete)。根據使用者所按的連結，會將不同的參數值傳送給伺服器，並執行所要求的動作。

<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a>
<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a>
<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>

您可以使用「屬性」檢視窗 (「視窗＞屬性」) 來建立相同的 URL 參數，方法是選取該連結，然後在「連結」文字方塊中，將該 URL 參數值附加至該連結 URL 的尾端。

相關主題

  • 收集使用者送出的資料
  • URL 參數
  • 擷取表單和 URL 參數
  • 了解 URL 和表單參數
  • 定義 URL 參數
  • 定義表單參數


擷取表單和 URL 參數

建立表單或 URL 參數之後，Dreamweaver 可以擷取值並在網路應用程式中使用。如需詳細資訊，請參閱定義 URL 參數。

在 Dreamweaver 中定義表單或 URL 參數之後，便可以在網頁內插入它的值。如需詳細資訊，請參閱新增動態內容到網頁。

相關主題

  • 存取儲存在資料庫中的資料
  • 表單參數
  • URL 參數
  • 使用 HTML 連結建立 URL 參數


存取儲存在 Session 變數中的資料

Session 變數提供一個機制，可以儲存及存取使用者資訊，供網路應用程式使用。一般而言，Session 變數會將資訊儲存起來 (通常是由使用者送出的表單或 URL 參數)，並於使用者瀏覽期間，將該項資訊提供給所有應用程式網頁使用。例如，當使用者登入一個提供電子郵件存取、股市行情、氣象報告和每日新聞的入口網站時，網路應用程式便會將登入資訊儲存在 Session 變數中，這個 Session 變數可以在所有網站頁面中辨識出該位使用者。當使用者瀏覽整個網站時，這會讓他們只能看到自己所選取的內容類型。Session 變數也可以利用逾時的方式來提供安全機制，如果某個帳戶有很長一段時間都沒有採取任何動作，便會結束該使用者的工作階段。如果使用者忘記登出網站，這也能釋放伺服器記憶體和處理資源。

Session 變數通常是用來儲存使用者的顯示偏好設定、多重調查表的回答、所謂「購物車」應用程式中選定要購買的項目，以及線上遊戲的執行得分計算。

本節包含下列主題：

  • 了解 Session 變數
  • 收集儲存在 Session 變數中的資訊
  • 在 Session 變數中儲存資訊
  • 儲存在 Session 變數中的資訊範例
  • 從 Session 變數擷取資料


了解 Session 變數

網站伺服器 (或更正確地說是 HTTP 通訊協定) 是沒有狀態的，意思是不會追蹤連線的瀏覽器，或追蹤使用者要求的個別網頁。每當網站伺服器接收到網頁要求，並將相關網頁傳遞到使用者的瀏覽器以回應該要求時，網站伺服器便會「忘記」提出要求的瀏覽器和所傳送的網頁。當相同的使用者稍後再要求相關網頁時，網站伺服器仍會傳送網頁，但卻不知道傳送給該使用者的最後一個網頁為何。

雖然 HTTP 沒有狀態的本質造就了簡單、易於實作的通訊協定，但卻讓更多進階的網路應用程式 (例如產生個人化的內容) 變得更困難。例如，為了自訂個別使用者的網站內容，必須先識別使用者。大部份的網站會使用某種使用者名稱和密碼登入型式，以完成這項工作。如果有多個自訂網頁要顯示，就必須要追蹤使用者登入的方式，因為大多數的使用者都受不了同一個網站的每個網頁都要提供一次使用者名稱和密碼。

為了能夠建立複雜的網路應用程式，並將使用者提供的資料存放於同一網站的所有頁面中，大部份的應用程式伺服器技術都會支援「工作階段管理」。工作階段管理可以讓網路應用程式在多個 HTTP 要求之間維持狀態，讓使用者在特定時段內所提出的網頁檢視要求被視為同一個互動工作階段的一部份。

Session 變數儲存的資訊可在使用者工作階段的存在期間使用。當使用者第一次在應用程式內開啟網頁時，使用者的工作階段就會開始。如果使用者有一段時間沒有在應用程式內開啟別的網頁，或者當使用者明確地結束工作階段 (通常是按一下「登出」連結)，工作階段就會結束。當工作階段存在時，它是專屬於個別使用者，每個使用者都有單獨的工作階段。

使用 Session 變數儲存資訊，網路應用程式中每個網頁都能存取這個資訊。這項資訊可能會像使用者名稱、偏好的字體大小或是指示使用者是否成功登入的標幟一樣地多樣化。Session 變數的另一個常見用途是持續執行計算，例如使用者目前為止在線上測驗中回答正確的題數，或使用者目前為止在線上目錄中選取的產品數。

請注意，只有在使用者的瀏覽器已設定為接受 Cookie 時，Session 變數才能運作。當工作階段第一次啟用時，伺服器會建立唯一識別使用者的工作階段 ID 編號，然後將一個包含該 ID 編號的 Cookie 傳送到使用者的瀏覽器中。當使用者在伺服器上要求另一個網頁時，伺服器便會讀取瀏覽器中的 Cookie，以識別使用者的身份，並擷取儲存在伺服器記憶體中的使用者 Session 變數。

相關主題

  • 收集儲存在 Session 變數中的資訊
  • 在 Session 變數中儲存資訊
  • 儲存在 Session 變數中的資訊範例
  • 從 Session 變數擷取資料


收集儲存在 Session 變數中的資訊

在建立 Session 變數之前，您必須先取得要儲存的資訊，然後傳送到儲存的伺服器。本節描述如何使用 HTML 表單或包含 URL 參數的超文字連結，收集和傳送資訊到伺服器。您也可以從下列來源取得資訊：儲存在使用者電腦上的 Cookie、由使用者瀏覽器與網頁要求一起傳送的 HTTP 標題，或資料庫。

本節包含下列主題：

  • 在 Session 變數中儲存 URL 參數
  • 在 Session 變數中儲存表單參數

相關主題

  • 了解 Session 變數
  • 在 Session 變數中儲存資訊
  • 儲存在 Session 變數中的資訊範例
  • 從 Session 變數擷取資料


在 Session 變數中儲存 URL 參數

在 Session 變數中儲存 URL 參數的一個典型範例如下：一份產品目錄使用了以超文字連結建立的硬式編碼 URL 參數，將產品資訊傳回給伺服器，以儲存於某個 Session 變數中。當使用者按一下「加入購物車」連結時，該項產品的編號便會在使用者繼續購物時儲存在某個 Session 變數中。當使用者進入結帳網頁時，就會擷取儲存在該 Session 變數中的產品編號。


在 Session 變數中儲存表單參數

將表單參數儲存在 Session 變數中的一個典型網頁範例便是以表單為基礎的意見調查。表單會將選取的資訊傳回伺服器上，而伺服器上將有一個應用程式頁面負責為這份意見調查計算分數，並將意見調查中的回應儲存於某個 Session 變數中，以傳送至某個可能會將整個調查總體收集到的回應進行結算工作的應用程式。這些資料也可能會儲存在資料庫中，以供日後使用。


在 Session 變數中儲存資訊

將資訊傳送到伺服器之後，只要在 URL 或表單參數所指定的網頁上為伺服器模式新增適當的程式碼，就能將資訊儲存在 Session 變數中。就像「目標」網頁一樣，您可以在起始網頁上使用 HTML 表單的 action 屬性或是超文字連結的 href 屬性，指定這個網頁。

每個網頁的 HTML 語法如下所示：

<form action="destination.html" method="get" name="myform"> </form>
<param name="href"value="destination.html">

您所使用的伺服器技術和取得資訊的方法，決定在 Session 變數中儲存資訊所用的程式碼。每個伺服器技術的基本語法如下所示：

ColdFusion

<CFSET session.variable_name = value>

ASP 和 ASP.NET

<% Session("variable_name") = value %>

value 運算式通常是伺服器運算式，如 Request.Form("lastname")。例如，如果您使用稱為 product 的 URL 參數 (或含有 GET 方法的 HTML 表單和稱為 product 的文字欄位) 來收集資訊，則下列陳述式會將資訊儲存在名為 prodID 的 Session 變數中：

ColdFusion

<CFSET session.prodID = url.product>

ASP 和 ASP.NET

<% Session("prodID") = Request.QueryString("product") %>

如果您使用含 post 方法的 HTML 表單和名為 txtProduct 的文字欄位來收集資訊，則下列陳述式會將資訊儲存在 Session 變數中：

ColdFusion

<CFSET session.prodID = form.txtProduct>

ASP 和 ASP.NET

<% Session("prodID") = Request.Form("txtProduct") %>

相關主題

  • 了解 Session 變數
  • 收集儲存在 Session 變數中的資訊
  • 儲存在 Session 變數中的資訊範例
  • 從 Session 變數擷取資料


儲存在 Session 變數中的資訊範例

您正在設計主要瀏覽者是年長居民的網站。在 Dreamweaver 中，您將兩個連結新增到起始網頁中，讓使用者自訂網站文字的大小。使用者若需要較大、容易閱讀的文字，可以按一下其中一個連結；需要標準大小文字的使用者則可以按一下另一個連結：

每個連結都有一個稱為 fontsize 的 URL 參數，負責將使用者的文字偏好設定送出給伺服器，如以下 Macromedia ColdFusion 範例所示：

<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>

您決定將使用者的文字偏好設定儲存在某個 Session 變數中，並在使用者要求的每個網頁上使用它來設定字體大小。

在靠近目標網頁頂端的地方輸入下列程式碼，以建立一個名叫 font_pref 的 Session，用來儲存使用者的字體大小偏好設定。

ColdFusion

<CFSET session.font_pref = url.fontsize>

ASP 和 ASP.NET

<% Session("font_pref") = Request.QueryString("fontsize") %>

當使用者按一下超文字連結時，網頁便會將 URL 參數中的使用者文字偏好設定傳送到目標網頁。目標網頁上的程式碼會將 URL 參數儲存在 font_pref Session 變數中。在使用者工作階段期間，應用程式的所有網頁都會擷取這個值，並顯示所選取的字體大小。

相關主題

  • 了解 Session 變數
  • 收集儲存在 Session 變數中的資訊
  • 在 Session 變數中儲存資訊
  • 從 Session 變數擷取資料


從 Session 變數擷取資料

當您在工作階段變數中儲存值之後，您可以使用 Dreamweaver 從 Session 變數擷取這個值，然後在網路應用程式中使用。如需詳細資訊，請參閱定義 Session 變數。

在 Dreamweaver 中定義 Session 變數之後，便可以在網頁中插入工作階段變數的值。如需詳細資訊，請參閱新增動態內容到網頁。

相關主題

  • 了解 Session 變數
  • 收集儲存在 Session 變數中的資訊
  • 在 Session 變數中儲存資訊
  • 儲存在 Session 變數中的資訊範例


定義動態內容的來源

動態網站需要有資料來源，才能從中擷取並顯示動態內容。Macromedia Dreamweaver 8 可以讓您使用資料庫、Request 變數、URL 變數、伺服器變數、表單變數、預存程序，以及動態內容的其他來源。隨著您所使用不同的資料來源，您可以擷取滿足某項要求的新內容，或者是修改頁面的內容以滿足使用者的特別需求。

本章旨在說明定義資料庫和變數作為動態內容來源的相關程序。若要了解更多關於本章中所討論的技術，請參閱 HTML 和網路技術資源。

本章包含下列各節：

關於動態內容來源

定義資料集

定義 URL 參數

定義表單參數

定義 Session 變數

定義 ASP 和 ColdFusion 的應用程式變數

使用變數做為 ColdFusion 資料集的資料來源

定義伺服器變數

快取內容來源

變更或刪除內容來源

將資料集從一個頁面複製到另一個頁面


關於動態內容來源

所謂的動態內容來源，指的就是一個資訊的儲存區，可讓您從中擷取和顯示要用於網頁中的動態內容。動態內容的來源不僅僅是指儲存於資料庫中的資訊，同時還包含了 HTML 表單所送出的值、內含於伺服器物件中的值、JavaBeans 屬性中的值，以及其他的內容來源。

您在 Dreamweaver 中所定義的所有內容來源都會加入「繫結」面板中的內容來源清單內。在您建立內容來源並將其包含在「繫結」面板中之後，您就可以輕易地將其插入目前選取的頁面中。

本節包含下列概念性主題：

  • 了解資料集
  • 了解 URL 和表單參數
  • 關於 Session 變數
  • ASP 和 ColdFusion 應用程式變數
  • ASP 伺服器變數
  • ColdFusion 伺服器變數

相關主題

  • 了解資料集
  • 了解 URL 和表單參數
  • 關於 Session 變數
  • ASP 和 ColdFusion 應用程式變數
  • ASP 伺服器變數
  • ColdFusion 伺服器變數


了解資料集

在使用資料庫作為動態網頁的內容來源時，您必須先建立一個用來儲存擷取資料的資料集。資料集會在儲存內容的資料庫與產生網頁的應用程式伺服器之間扮演一個媒介的角色。資料集中包含了由資料庫查詢所傳回的資料，同時也會暫時儲存在應用程式伺服器的記憶體中，以便提供較快速的資料擷取功能。伺服器會在沒有需求時，忽略資料集。

資料集本身是由擷取自某特定資料庫中資料所組成的一個集合，它可以包含整個資料庫表格，也可以包含由該表格的列或欄所構成的子集。這些列或欄是由定義於資料集中的資料庫查詢所擷取得出的。資料庫查詢是以「結構化查詢語言」(Structured Query Language, SQL) 所撰寫而成的，這是一種簡單的程式語言，可讓您擷取、加入和刪除資料庫中的資料。隨附於 Dreamweaver 中的 SQL Builder，可協助您即使不了解 SQL，也可以建立簡單的查詢；但是，如果想要建立複雜的 SQL 查詢，您將仍然需要學習 SQL，才能以手動方式撰寫出要置於 Dreamweaver 中的 SQL 陳述式。

注意

Microsoft ASP.NET 中把資料集 (Recordset) 視同一個資料集 (DataSet)。如果您使用的是 ASP.NET 的文件類型，則與 ASP.NET 相關的對話方塊和選單也同樣會標示成資料集 (DataSet)。Dreamweaver 的相關文件中，會把兩種類型都視為資料集 (Recordset)，但是在特別說明 ASP.NET 的相關功能時，則會使用資料集 (DataSet)。

如需有關使用資料庫及 SQL 的詳細資訊，請參閱資料庫入門手冊和 SQL 入門。

如果您要撰寫搭配 ASP.NET 使用的 SQL，有一些專屬於 ASP.NET 的條件要特別注意。若要了解這些條件，請參閱撰寫適用於 ASP.NET 的 SQL。

在您定義要和 Dreamweaver 搭配使用的資料集之前，您必須先建立資料庫的連線─若資料庫中還沒有資料─請先將資料輸入至資料庫中。如果您尚未定義網站的資料庫連線，請參考資料庫連線章節，以了解程式開發所需的伺服器技術，並依照其中的說明建立資料庫的連線。

下列各章說明了所有已為 Dreamweaver 支援伺服器技術的資料庫連線：

  • 適用於 ColdFusion 開發人員的資料庫連線
  • 適用於 ASP 開發人員的資料庫連線
  • ASP.NET 開發人員的資料庫連線
  • 適用於 JSP 開發人員的資料庫連線
  • PHP 開發人員的資料庫連線

相關主題

  • 定義資料集

撰寫適用於 ASP.NET 的 SQL

當您在進階「資料集」對話方塊中撰寫 SQL 陳述式時，有一些專屬於 ASP.NET 的條件需要特別注意：這些條件將於往後的幾節中進行描述。

參數

您用來參照參數的語法會隨著使用的資料庫連線不同而有所差異 (例如 OLE DB 或 Microsoft SQL Server)。

OLE DB

在使用 OLE DB 連線到資料庫時，必須使用問號 (?) 來參照參數。例如：

SELECT * FROM Employees WHERE HireDate > ?

Microsoft SQL Server

在使用隨附於 .NET Framework 中的「SQL Server Managed 資料提供者」連線到 Microsoft SQL Server 時，所有的參數都必須是具名的參數。例如：

SELECT * FROM Employees WHERE HireDate > @hireDate

在 SQL 陳述式中插入程式碼

在為 ASP.NET 所撰寫的 SQL 陳述式中插入程式碼時，您必須為所有的字串加上引號 (" ")，並將程式碼置於括號 ( ) 之中：

SELECT * FROM Employees WHERE HireDate > "+ (Request.queryString("hireDate"))

相關主題：

  • ASP.NET 開發人員的資料庫連線


了解 URL 和表單參數

URL 參數會儲存使用者所輸入的擷取資訊。若要定義 URL 參數，請建立一個使用 GET 方法來傳送資料的表單或超文字連結。系統會將資訊附加於被要求頁面 URL 之後，然後與伺服器進行通訊。在使用 URL 變數時，查詢字串中會含有一或多個與表單欄位相關聯的名稱/值的配對；這些名稱/值的配對會被附加於 URL 之後。

表單參數中會儲存內含於網頁 HTTP 要求中的擷取資訊。如果您建立的是使用 POST 方法的表單，則該表單所送出的資料會傳遞到伺服器。在開始之前，請確定將表單參數傳遞到伺服器。如需相關說明，請參閱取得網頁的資料。

相關主題

  • 定義 URL 參數
  • 定義表單參數


關於 Session 變數

Session 變數可以讓您儲存及顯示使用者造訪網站期間 (即工作階段) 所保有的資訊。伺服器會為每一位使用者建立個別的工作階段物件，並維持一段相當的時間或維持到該物件明確終止為止。如需詳細資訊，請參閱存取儲存在 Session 變數中的資料。

由於 Session 變數的保留時間涵蓋整個使用者工作階段，而且當該使用者在網站內從一個頁面移至另一個頁面時會一直持續保留著，所以十分適合用來儲存使用者的偏好設定。如果要在頁面的 HTML 程式碼中插入某個值、指派某個值給區域變數，或是提供用來評估條件運算式的某個值，也可以使用 Session 變數。

在定義頁面的 Session 變數之前，您必須先在原始程式碼中建立它們。如需相關說明，請參閱收集使用者送出的資料和存取儲存在 Session 變數中的資料。

當您在網站應用程式的原始程式碼中建立 Session 變數之後，您就可以使用 Dreamweaver 來擷取它的值，並且在網頁中使用這個值。

相關主題

  • ASP 和 ColdFusion 應用程式變數
  • 定義 Session 變數


ASP 和 ColdFusion 應用程式變數

在 ASP 和 ColdFusion 中，您可以使用應用程式變數來儲存和顯示應用程式存留期所保有的資訊，而且可以保留給不同的使用者使用。應用程式的存留期，會從第一個使用者在應用程式中要求頁面開始算起，直到網站伺服器停止為止。(應用程式被定義為虛擬目錄及其子目錄中的所有檔案)。

由於應用程式變數會持續保留於整個應用程式的存留期，而且可以保留給不同的使用者使用，所以十分適合用來儲存所有使用者都需要的資訊，像是目前的時間和日期。應用程式變數的值是定義在應用程式的程式碼中。

如需詳細資訊，請參閱定義 ASP 和 ColdFusion 的應用程式變數和新增動態內容到網頁。


ASP 伺服器變數

您可以將下列 ASP 伺服器變數定義成動態內容的來源：Request.Cookie、Request.QueryString、Request.Form、Request.ServerVariables 和 Request.ClientCertificates。

相關主題

  • 定義 ASP 伺服器變數


ColdFusion 伺服器變數

您可以定義下列 ColdFusion 伺服器變數：

用戶端變數會建立資料與某特定用戶端的關聯性。用戶端變數會保留使用者在應用程式中從一個頁面移至另一個頁面、以及從一個工作階段移至另一個工作階段的應用程式狀態。「保留狀態」的意思是保存從一個頁面 (或工作階段) 到下一個頁面 (或工作階段) 的資訊，讓應用程式能夠「記住」該使用者以及該使用者先前的選擇和偏好設定。

Cookie 變數可以存取從瀏覽器傳遞到伺服器的 Cookie。

CGI 變數會提供執行 ColdFusion 的伺服器、要求頁面的瀏覽器的相關資訊，以及處理環境方面的其他資訊。

伺服器變數可供所有的用戶端和伺服器上的應用程式存取。這些變數會一直存在於伺服器上，直到伺服器停止為止。

區域變數是在 ColdFusion 頁面中使用 CFSET 標籤或 CFPARAM 標籤所建立的變數。

相關主題

  • 定義 ColdFusion 伺服器變數
  • 定義 JSP 伺服器變數
  • 定義 PHP 伺服器變數


定義資料集

定義資料集時，您可以使用 Dreamweaver 的簡單「資料集」對話方塊或是進階「資料集」對話方塊；前者可讓您輕鬆地建構簡單的 SQL 陳述式，而後者則能讓您撰寫自己的 SQL 陳述式，或是使用圖形式的「資料庫項目」樹狀結構來建立 SQL 陳述式。

若您不熟悉如何撰寫 SQL 陳述式來從資料庫中擷取資訊，請使用簡單「資料集」對話方塊。

本節包含下列主題：

  • 在不撰寫 SQL 陳述式的情況下建立資料集
  • 以撰寫 SQL 陳述式的方式建立進階的資料集
  • 使用資料庫項目樹狀結構建立 SQL 查詢

相關主題

  • 在 ColdFusion 組件中定義資料集


在不撰寫 SQL 陳述式的情況下建立資料集

本節會說明如何使用 Dreamweaver 的「資料集」對話方塊來定義資料集，這個方法讓您不必手動輸入 SQL 陳述式，就可以建立資料集。使用這個方法定義資料集時，您只需從「資料集」對話方塊的彈出式選單中選取所需的資料庫連線和表格，即可完成定義資料集的工作。

如果您想要撰寫自己專用的 SQL 陳述式，請使用進階「資料集」對話方塊 (請參閱以撰寫 SQL 陳述式的方式建立進階的資料集)。

若要在不撰寫 SQL 陳述式的情況下定義資料集：

  1. 在「文件」視窗中，開啟要使用資料集的頁面。
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 在「繫結」面板中，按一下加號 (+) 按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果您要開發的是 ColdFusion 或是 ASP.NET 的網站，則所顯示的對話方塊可能會和以下所顯示的範例略有差異 (如果顯示的是進階「資料集」對話方塊，請按一下「簡單」按鈕，切換至簡單「資料集」對話方塊)。

  4. 完成對話方塊。

    如需關於完成「資料集」對話方塊的說明，請參閱下列相關文件類型的章節內容：

    • 設定簡單資料集對話方塊選項
    • 設定簡單資料集對話方塊選項 (ColdFusion)
    • 設定簡單資料集對話方塊選項 (ASP.NET)
  5. 按一下「測試」按鈕執行查詢，並確認該查詢可以擷取您要查詢的資訊。

    如果您所定義的篩選器會用到使用者所輸入的參數，「測試」按鈕會顯示「測試值」對話方塊。請在「測試值」文字方塊中輸入數值，然後按一下「確定」。如果可以順利建立一個資料集的實體，則會出現一個顯示有擷取自資料集中資料的表格。

  6. 按一下「確定」，將該資料集加入「繫結」面板中可用內容來源的清單內。


以撰寫 SQL 陳述式的方式建立進階的資料集

進階「資料集」對話方塊允許您撰寫個人專屬的 SQL 陳述式，也可以讓您使用圖形式的「資料庫項目」樹狀結構來建立 SQL 陳述式。

注意

如果您所要撰寫的是 ASP.NET 文件類型的 SQL 陳述式，請參考使用資料庫項目樹狀結構建立 SQL 查詢的內容，以取得有關 ASP.NET 的特定規則。

如果您想要建立簡單的資料集而不要手動撰寫 SQL 程式碼，請參閱使用資料庫項目樹狀結構建立 SQL 查詢。

若要以撰寫 SQL 的方式來定義資料集：

  1. 在「文件」視窗中，開啟要使用資料集的頁面。
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 在「繫結」面板中，按一下加號 (+) 按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    進階「資料集」對話方塊便會出現。如果您要開發的是 ColdFusion 或是 ASP.NET 的網站，則所顯示的對話方塊可能會和以下所顯示的範例略有差異 (如果顯示的是簡單「資料集」對話方塊，請按一下「進階」按鈕，切換至進階「資料集」對話方塊)。

  4. 完成對話方塊。

    如需關於完成「資料集」對話方塊的說明，請參閱下列相關文件類型的章節內容：

    • 設定進階資料集對話方塊
    • 設定進階資料集對話方塊 (ASP.NET)
    • 設定進階資料集對話方塊選項 (ColdFusion)
  5. 按一下「測試」按鈕執行查詢，並確認該查詢可以擷取您要查詢的資訊。

    如果您所定義的篩選器會用到使用者所輸入的參數，「測試」按鈕會顯示「測試值」對話方塊。請在「測試值」文字方塊中輸入數值，然後按一下「確定」。如果可以順利建立一個資料集的實體，則會出現一個顯示資料集中資料的表格。

  6. 按一下「確定」，將該資料集加入「繫結」面板中可用內容來源的清單內。


使用資料庫項目樹狀結構建立 SQL 查詢

除了在「SQL」文字方塊中以手動方式輸入 SQL 陳述式以外，您還可以使用「資料庫項目」的點按介面來建立複雜的 SQL 查詢。「資料庫項目」樹狀結構可讓您選取資料庫物件，然後使用 SQL 的 SELECT、WHERE 和 ORDER BY 等子句進行連結。一旦建立了 SQL 查詢之後，您就可以使用對話方塊中的「變數」區域定義任何變數。

下列範例對兩個 SQL 陳述式進行描述，並且針對使用進階「資料集」對話方塊中「資料庫項目」樹狀結構建立這兩個陳述式時的各個步驟進行說明。


選取表格

這個範例會選取整個 Employees 表格的內容。定義查詢的 SQL 陳述式如下：

SELECT * FROM Employees

若要建立這項查詢：

  1. 展開「表格」分支，以顯示所選取資料庫中的所有表格。
  2. 選取 Employees 表格。
  3. 按一下「選取」按鈕。
  4. 按一下「確定」，將該資料集加入至「繫結」面板中。


從表格中選取特定的列，並排列結果

以下的範例是從 Employees 表格中選取了兩列，並使用您必須定義的變數選取工作類型；而所得的結果會以員工的姓名順序排列。

SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName

若要建立這項查詢：

  1. 展開「表格」分支以顯示所選資料庫中的所有表格，然後展開 Employees 表格以顯示其中的各個表格列。
  2. 依照下列方式建立 SQL 陳述式：
    • 選取 emplNo，然後按一下「選取」按鈕。
    • 選取 emplName，然後按一下「選取」按鈕。
    • 選取 emplJob，然後按一下「位置」按鈕。
    • 選取 emplName，然後按一下「順序」按鈕。
  3. 將插入點置於 SQL 文字區域中的 WHERE emplJob 之後，然後輸入 ='varJob' (請將等號一併輸入)。
  4. 按一下「變數」區域中的加號 (+) 按鈕，然後在「名稱」、「預設值」及「執行階段值」欄中輸入以下的值，定義變數 'varJob'：varJob、CLERK、Request("job")。
  5. 按一下「確定」，將該資料集加入至「繫結」面板中。


定義 URL 參數

URL 參數會儲存使用者所輸入的擷取資訊。在開始之前，請確定您可以將表單或 URL 參數傳遞到伺服器。如需詳細資訊，請參閱 URL 參數和了解 URL 和表單參數。

若要定義 URL 參數：

  1. 在「文件」視窗中，開啟要使用該變數的頁面。
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 在「繫結」面板中，按一下加號 (+) 按鈕，然後從彈出式選單中選取下列其中一項：

    文件類型

    URL 變數「繫結」面板中的選單項目

    ASP

    Request 變數＞Request.QueryString

    ColdFusion

    URL 變數

    JSP

    Request 變數

    PHP

    URL 變數

    「URL 變數」對話方塊便會出現。

  4. 在文字欄位中輸入 URL 變數的名稱，然後按一下「確定」。

    通常，URL 變數名稱就是用來獲取其值的 HTML 表單欄或物件的名稱。

  5. 該 URL 變數會顯示於「繫結」面板之中。

    一旦定義了 URL 變數，您就可以在目前已選取的頁面中使用其值。如需詳細資訊，請參閱新增動態內容到網頁。

相關主題：

  • 定義表單參數
  • 定義 Session 變數


定義表單參數

表單參數中會儲存內含於網頁 HTTP 要求中的擷取資訊。如果您建立的是使用 POST 方法的表單，則該表單所送出的資料會傳遞到伺服器。在開始之前，請確定將表單參數傳遞到伺服器。如需詳細資訊，請參閱取得網頁的資料。

若要定義表單參數：

  1. 在「文件」視窗中，開啟要使用該變數的頁面。
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 在「繫結」面板中，按一下加號 (+) 按鈕，然後從彈出式選單中選取下列其中一項：

    文件類型

    表單變數「繫結」面板中的選單項目

    ASP

    Request 變數＞Request.Form

    ColdFusion

    表單變數

    JSP

    Request 變數

    PHP

    表單變數

    「表單變數」對話方塊便會出現。在對話方塊中輸入表單變數的名稱，然後按一下「確定」。通常，表單變數名稱就是用來獲取其值的 HTML 表單欄位或物件的名稱。

  4. 表單參數會在「繫結」面板中出現。

在您定義要當作是內容來源的表單參數之後，您就可以在頁面中使用其值。如需詳細資訊，請參閱取得網頁的資料。

相關主題

  • 關於動態內容來源
  • 了解 URL 和表單參數
  • 定義 URL 參數


定義 Session 變數

您可以使用 Session 變數來儲存及顯示使用者造訪網站期間 (即工作階段) 所保有的資訊。伺服器會為每一位使用者建立個別的工作階段物件，並維持一段相當的時間或維持到該物件明確終止為止。如需詳細資訊，請參閱了解 Session 變數。

在定義頁面的 Session 變數之前，您必須先在原始程式碼中建立它們。如需相關說明，請參閱下列主題：

  • 收集使用者送出的資料
  • 存取儲存在 Session 變數中的資料
  • 在 Session 變數中儲存資訊

當您在網站應用程式的原始程式碼中建立 Session 變數之後，您就可以使用 Dreamweaver 來擷取它的值，並且在網頁中使用這個值。

若要定義預先定義的 Session 變數：

  1. 先在原始程式碼中建立 Session 變數，然後指派其值。

    例如，這個 ColdFusion 範例使用了一個名稱為 username 的工作階段，並指派 Cornelius 為其值：

    <CFSET session.username = Cornelius>
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「Session 變數」。
  4. 請輸入您在原始程式碼中所定義的變數名稱。
  5. 按一下「確定」。

    Session 變數便會出現在「繫結」面板中。

一旦定義了 Session 變數，您就可以在頁面中使用其值。如需詳細資訊，請參閱新增動態內容到網頁。

相關主題

  • 收集使用者送出的資料
  • 存取儲存在 Session 變數中的資料
  • 了解 Session 變數
  • 在 Session 變數中儲存資訊


定義 ASP 和 ColdFusion 的應用程式變數

在 ASP 和 ColdFusion 中，您可以使用應程式變數來儲存和顯示應用程式存留期所保有的資訊，而且可以保留給不同的使用者使用。

注意

在 JSP 或 PHP 中是沒有應用程式變數物件的。

若要定義頁面的應用程式變數：

  1. 在「文件」視窗中開啟動態文件類型。
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「應用程式變數」。
  4. 輸入在應用程式原始程式碼中定義的變數名稱。
  5. 按一下「確定」。

    應用程式變數會出現在「應用程式」圖示下方的「繫結」面板中。

    一旦定義了應用程式變數，您就可以在頁面中使用其值。如需詳細資訊，請參閱新增動態內容到網頁。

相關主題：

  • ASP 和 ColdFusion 應用程式變數


使用變數做為 ColdFusion 資料集的資料來源

當您在「繫結」面板中定義網頁的資料集時，Dreamweaver 會在該網頁的 cfquery 標籤中輸入 ColdFusion 資料來源的名稱。如果想要有更大的彈性，可以將資料來源名稱儲存在變數中，然後在 cfquery 標籤中使用該變數。Dreamweaver 提供了一種視覺的方式，可以在資料集中指定這類變數。

若要以視覺方式將變數指定為資料集的資料來源：

  1. 確定「文件」視窗中已開啟 ColdFusion 頁面。
  2. 在「繫結」面板中，按一下加號 (+) 按鈕，然後從彈出式選單中選取「資料來源名稱變數」。

    「資料來源名稱變數」對話方塊便會出現。

  3. 定義變數，然後按一下「確定」。
  4. 在定義資料集時，請選取這個變數做為資料集的「資料來源」。

    在「資料集」對話方塊中，變數會出現在「資料來源」彈出式選單以及伺服器上的 ColdFusion 資料來源中。

  5. 完成「資料集」對話方塊，然後按一下「確定」。
  6. 初始化變數。

    Dreamweaver 不會為您初始化變數，因此您可以依照您想要的方式及位置來進行初始化。您可以在頁面程式碼 (在 cfquery 標籤之前)、包含檔案或其他檔案中將該變數初始化，做為 Session 變數或應用程式變數使用。


定義伺服器變數

您可以將伺服器變數定義為網站應用程式中使用者動態內容的來源。

不同的文件類型，包含表單變數、URL 變數、Session 變數以及應用程式變數等，均會使用不同的伺服器變數。如需關於變數類型的詳細資訊，請參閱下列各節：

  • 定義 URL 參數
  • 定義表單參數
  • 定義 Session 變數
  • 定義 ASP 和 ColdFusion 的應用程式變數

本節會探討各種定義成內容來源的文件類型所能使用的伺服器變數。各種文件類型及其相關的章節如下：

  • 定義 ASP 伺服器變數
  • 定義 ColdFusion 伺服器變數
  • 定義 JSP 伺服器變數


定義 ASP 伺服器變數

您可以將下列 ASP 伺服器變數定義成動態內容的來源：Request.Cookie、Request.QueryString、Request.Form、Request.ServerVariables 和 Request.ClientCertificates。

若要定義 ASP 頁面的伺服器變數：

  1. 開啟「繫結」面板 (「視窗＞繫結」)。
  2. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「Request 變數」。

    「Request 變數」對話方塊便會出現。從「類型」彈出式選單中選取其中一個要求集合。

    例如，如果您要存取 Request.ServerVariables 集合中的資訊，請選取「伺服器變數」；如果您要存取 Request.Form 集合中的資訊，則請選取「表單」。

    如需這些變數的詳細資訊，請參閱設定 Request 變數對話方塊選項 (ASP)。

  3. 指定所要存取集合中的變數。

    例如，如果您要存取 Request.ServerVariables("HTTP_USER_AGENT") 變數中的資訊，請輸入引數 HTTP_USER_AGENT；如果您要存取 Request.Form("lastname") 變數中的資訊，則請輸入引數 lastname。

  4. 按一下「確定」。

    伺服器變數會顯示於「繫結」面板中。


定義 ColdFusion 伺服器變數

您可以將下列 ColdFusion 伺服器變數定義成動態內容的來源：用戶端、Cookie、CGI、伺服器和區域變數。若要了解更多有關這些伺服器變數的資訊，請參閱ASP 伺服器變數。

若要定義 ColdFusion 頁面中的伺服器變數：

  1. 開啟「繫結」面板 (「視窗＞繫結」)。
  2. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「伺服器變數」。
  3. 輸入變數的名稱。

    如需可用名稱項目的詳細資訊，請按一下「說明」按鈕。

  4. 按一下「確定」。

    ColdFusion 的伺服器變數便會出現在「繫結」面板中。

相關主題：

  • 定義 URL 參數
  • 定義 Session 變數
  • 定義 ASP 和 ColdFusion 的應用程式變數
  • 新增動態內容到網頁


定義 PHP 伺服器變數

您可以將 PHP 伺服器變數定義成 PHP 文件類型的動態內容來源。

若要定義 PHP 頁面中的伺服器變數：

  1. 開啟「繫結」面板 (「視窗＞繫結」)。
  2. 按一下加號 (+) 按鈕，然後從彈出式選單中選取變數。
  3. 輸入變數的名稱。
  4. 按一下「確定」。

    PHP 伺服器變數會顯示於「繫結」面板中。

相關主題：

  • 定義 URL 參數
  • 新增動態內容到網頁


定義 JSP 伺服器變數

您可以將 Request 變數定義成 JSP 頁面動態內容的來源。

若要定義 JSP 頁面的 Request 變數：

  1. 開啟「繫結」面板 (「視窗＞繫結」)。
  2. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「Request 變數」。
  3. 輸入變數的名稱。
  4. 按一下「確定」。

    JSP 伺服器變數會顯示於「繫結」面板中。

相關主題：

  • 定義 URL 參數
  • 新增動態內容到網頁


快取內容來源

您可以在「設計備註」中快取─或儲存─動態內容的來源。這麼做可以讓您在即使無法存取儲存動態內容來源的資料庫或應用程式伺服器的情況下，仍然能繼續在網站上工作。快取功能減少了跨越網路重複存取資料庫和應用程式伺服器的動作，因而可以加速程式開發的作業。

若要快取內容來源：

  • 按一下「繫結」面板右上角的箭頭按鈕，然後在彈出式選單中切換成「快取」。

    當您在其中一個內容來源做了變更，請按一下右上角的「重新整理」按鈕 (圓形箭頭的圖示) 就可以重新整理快取的內容 (如果您沒有看到這個按鈕，請展開面板)。


變更或刪除內容來源

您可以變更或刪除動態內容現有的來源─也就是說，「繫結」面板中的內容來源都是可以變更或刪除的。

在「繫結」面板中變更或刪除某個內容來源，並「不會」真的變更或刪除該頁面內容的任何實體，而只是變更或刪除該頁面內容的可用實體而已。若要編輯或刪除頁面內容的實體，請參閱編輯動態內容和刪除動態內容。

若要在「繫結」面板中變更內容來源：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按兩下您要編輯的內容來源名稱。
  2. 請在出現的對話方塊中進行變更。
  3. 完成相關工作後，請按一下「確定」。

若要在「繫結」面板中刪除內容來源：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，從清單中選取內容來源。
  2. 按一下減號 (-) 按鈕。

相關主題

  • 關於動態內容來源


將資料集從一個頁面複製到另一個頁面

您可以在同一個已定義的網站中，將某個頁面中的資料集複製到另一個頁面中。

若要將資料集複製到另一個頁面中：

  1. 在「繫結」或「伺服器行為」面板中選取資料集。
  2. 在資料集上按滑鼠右鍵，然後從彈出式選單中選取「複製」。
  3. 開啟複製資料集目的地的頁面。
  4. 在「繫結」面板或「伺服器行為」工具列上按滑鼠右鍵，然後從彈出式選單中選取「貼上」。

相關主題：

  • 關於動態內容來源
  • 變更或刪除內容來源


參考

本節將說明這一章中所介紹的下列面板與對話方塊：

  • 設定繫結面板選項
  • 設定簡單資料集對話方塊選項
  • 設定簡單資料集對話方塊選項 (ColdFusion)
  • 設定簡單資料集對話方塊選項 (ASP.NET)
  • 設定進階資料集對話方塊
  • 設定進階資料集對話方塊 (ASP.NET)
  • 設定進階資料集對話方塊選項 (ColdFusion)
  • 設定 Request 變數對話方塊選項 (ASP)
  • 設定新增參數對話方塊選項
  • 設定新增參數對話方塊選項
  • 設定新增參數對話方塊選項 (PHP)
  • 設定 Request 變數對話方塊選項 (JSP)
  • 設定 Session 變數對話方塊選項
  • 設定應用程式變數對話方塊選項
  • 設定 URL 變數對話方塊選項 (ColdFusion)
  • 設定表單變數對話方塊選項 (ColdFusion)
  • 設定用戶端變數對話方塊 (ColdFusion)
  • 設定 Cookie 變數對話方塊選項
  • 設定 CGI 變數對話方塊選項
  • 設定伺服器變數對話方塊選項
  • 設定區域變數對話方塊選項


設定繫結面板選項

這個面板可以定義和編輯動態內容的來源、將動態內容加入頁面中，並將資料格式套用到動態文字上。「繫結」面板的使用方式，視您所要執行的工作而定。下列各個主題會說明在各種工作中使用「繫結」面板的方法。

您可以使用這個面板執行下列作業：

  • 定義 URL 參數
  • 定義 Session 變數
  • 定義 ASP 和 ColdFusion 的應用程式變數
  • 定義伺服器變數
  • 快取內容來源
  • 快取內容來源
  • 變更或刪除內容來源
  • 將資料集從一個頁面複製到另一個頁面
  • 使 HTML 屬性成為動態

相關主題

  • 了解資料集
  • 新增動態內容到網頁


設定簡單資料集對話方塊選項

這個對話方塊可以讓您在不必以手動方式撰寫 SQL 陳述式的情況下，將資料集定義成動態內容的來源。

設定簡單「資料集」對話方塊選項：

  1. 在「名稱」文字方塊中，輸入該資料集的名稱。

    一般的作法是在資料集 (Recordset) 名稱中加上前置詞 rs，以便與程式碼中的其他物件名稱有所區隔。例如：rsPressReleases

    請注意，資料集 (Recordset) 名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

  2. 從「連線」彈出式選單中選取連線。

    如果清單中未顯示任何連線，請按一下「定義」來建立連線。

  3. 在「表格」彈出式選單中，選取要提供資料給資料集的資料庫表格。

    彈出式選單會顯示指定資料庫中所有的表格。

  4. 若只想要將某些表格的資料欄納入資料集中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 想要的資料欄，以將其選取。
  5. 若只要包含某些表格記錄，請依照下列方法完成「篩選器」區段中的相關設定：
    • 在第一個彈出式選單中，選取資料庫表格中要和您所定義測試值進行比對的欄。
    • 在第二個彈出式選單中，選取要用來比對測試值和每一筆記錄中指定值的條件運算式。
    • 在第三個彈出式選單中，選取「輸入值」。
    • 在文字方塊中，輸入測試值。

    如果在記錄中發現有符合篩選條件的值，就會將該筆記錄包含於資料集中。

  6. 如果您要排序記錄，請先選取排序所依據的欄，然後指定要以遞增順序 (1、2、3... 或 A、B、C...) 或是遞減順序來排序記錄。
  7. 按一下「測試」連線至資料庫，並建立資料來源的實體。

    會出現一個顯示傳回資料的表格。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。按一下「確定」來關閉資料來源。

  8. 按一下「確定」。

    新定義的資料集就會顯示於「繫結」面板中。

相關主題

  • 在不撰寫 SQL 陳述式的情況下建立資料集
  • 以撰寫 SQL 陳述式的方式建立進階的資料集
  • 資料庫入門手冊


設定簡單資料集對話方塊選項 (ColdFusion)

這個對話方塊可讓您在不必以手動方式撰寫 SQL 陳述式的情況下，將 ColdFusion 文件類型的資料集定義成動態內容的來源。

注意

如果您是要建立可搭配 ColdFusion 5 或更早版本的資料集，請使用可適用於其他文件類型 (如 ASP 和 JSP) 的一般簡單「資料集」對話方塊。

若要設定 ColdFusion 的簡單「資料集」對話方塊選項：

  1. 在「名稱」文字方塊中，輸入該資料集的名稱。

    一般的作法是在資料集 (Recordset) 名稱中加上前置詞 rs，以便與程式碼中的其他物件名稱有所區隔。例如：rsPressReleases

    請注意，資料集 (Recordset) 名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

  2. 如果您正在定義 ColdFusion 元件的資料集 (也就是說，如果 Dreamweaver 中目前開啟了 CFC 檔)，請從「函式」彈出式選單中選取現有的 CFC 函式，或是按一下「新函式」按鈕以建立新的函式。

    注意

    如果現有的文件為 CFC 檔案，且您能夠存取執行 ColdFusion MX 7 或更新版本的電腦，才能使用「函式」彈出式選單。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

    資料集會定義在函式中。如需詳細資訊，請參閱在 ColdFusion 組件中定義資料集。

  3. 從「資料來源」彈出式選單中選取資料來源。

    如果彈出式選單中沒有顯示任何資料來源，您就必須建立一個 ColdFusion 資料集。

  4. 如果需要的話，請在「使用者名稱」和「密碼」文字方塊中，輸入使用 ColdFusion 應用程式伺服器所需的使用者名稱或密碼。

    ColdFusion 中的資料來源可能必須要有正確的使用者名稱和密碼，才能存取其內容。如果您沒有用來存取 ColdFusion 中資料來源的使用者名稱和密碼，請洽詢公司內的 ColdFusion 管理員。

  5. 在「表格」彈出式選單中，選取要提供資料給資料集的資料庫表格。

    「表格」彈出式選單會顯示指定資料庫中所有的表格。

  6. 若要將表格欄的子集包含於資料集中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 所要使用的欄，以選擇欄。
  7. 您可以建立篩選器來進一步限制從表格中傳回的記錄：
    • 在第一個彈出式選單中，選取資料庫表格中要和您所定義測試值進行比對的欄。
    • 在第二個彈出式選單中，選取要用來比對測試值和每一筆記錄中指定值的條件運算式。
    • 在第三個彈出式選單中，選取「輸入值」。
    • 在文字方塊中，輸入測試值。

    如果在記錄中發現有符合篩選條件的值，就會將該筆記錄包含於資料集中。

  8. 如果您要排序記錄，請先選取排序所依據的欄，然後指定要以遞增順序 (1、2、3... 或 A、B、C...) 或是遞減順序來排序記錄。
  9. 按一下「測試」連線至資料庫，並建立資料來源的實體。

    會出現一個顯示傳回資料的表格。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。按一下「確定」來關閉測試資料集。

  10. 按一下「確定」。

    新定義的 ColdFusion 資料集就會顯示於「繫結」面板中。

相關主題

  • 適用於 ColdFusion 開發人員的資料庫連線
  • 在不撰寫 SQL 陳述式的情況下建立資料集
  • 以撰寫 SQL 陳述式的方式建立進階的資料集
  • 資料庫入門手冊


設定簡單資料集對話方塊選項 (ASP.NET)

這個對話方塊可讓您在不必以手動方式撰寫 SQL 陳述式的情況下，將資料集 (DataSet) (也就是一般在其他動態文件類型中所稱的「資料集」(Recordset )) 定義成動態內容的來源。

若要設定 ASP.NET 的簡單「資料集」選項

  1. 在「名稱」文字方塊中，輸入資料集 (DataSet) 的名稱。

    一般的作法是在資料集 (DataSet) 名稱中加上前置詞 ds，以便與程式碼中的其他物件名稱有所區隔。例如：dsPressReleases。

    請注意，資料集 (DataSet) 名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

  2. 從「連線」彈出式選單中選取連線。

    如果清單中未顯示任何連線，請按一下「定義」來建立連線。

  3. 在「表格」彈出式選單中，選取要提供資料給資料集 (DataSet) 的資料庫表格。

    彈出式選單會顯示指定資料庫中所有的表格。

  4. 若要將表格欄的子集包含於資料集 (DataSet) 中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 所要使用的欄，以選擇欄。
  5. 若只要包含某些表格記錄，請依照下列方法完成「篩選器」區段中的相關設定：
    • 在第一個彈出式選單中，選取資料庫表格中要和您所定義測試值進行比對的欄。
    • 在第二個彈出式選單中，選取要用來比對測試值和每一筆記錄中指定值的條件運算式。
    • 在第三個彈出式選單中，選取「輸入值」。
    • 在文字方塊中，輸入測試值。

    如果在記錄中發現有符合篩選條件的值，就會將該筆記錄包含於資料集 (DataSet) 中。

  6. 如果您要排序記錄，請先選取排序所依據的欄，然後指定要以遞增順序 (1、2、3... 或 A、B、C...) 或是遞減順序來排序記錄。
  7. 如果資料集 (DataSet) 的查詢因故失敗，您可以指定要重新導向使用者前往的頁面。例如，如果在查詢期間發生資料庫無法使用的情況，而無法傳回該頁面的資料集 (DataSet) 時，則您可以顯示一個錯誤頁面，並在其中提供一個返回網站首頁的連結。
  8. 按一下「測試」連線至資料庫，並建立資料來源的實體。

    會出現一個顯示傳回資料的表格。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。按一下「確定」來關閉資料集 (DataSet)。

  9. 按一下「確定」。

    新定義的資料集 (DataSet) 就會顯示於「繫結」面板中。

相關主題

  • ASP.NET 開發人員的資料庫連線
  • 在不撰寫 SQL 陳述式的情況下建立資料集
  • 以撰寫 SQL 陳述式的方式建立進階的資料集
  • 資料庫入門手冊


設定進階資料集對話方塊

這個對話方塊可讓您以撰寫自訂的 SQL 陳述式，或是使用圖形化的「資料庫項目」樹狀結構來建立 SQL 陳述式，將資料集定義成動態內容的來源。

若要完成對話方塊：

  1. 在「名稱」文字方塊中，輸入該資料集的名稱。

    一般的作法是在資料集 (Recordset) 名稱中加上前置詞 rs，以便與程式碼中的其他物件名稱有所區隔。例如：rsPressRelease。

    請注意，資料集 (Recordset) 名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

  2. 從「連線」彈出式選單中選取連線。
  3. 在 SQL 文字區域中輸入 SQL 陳述式，或使用位於對話方塊底部的圖形化「資料庫項目」樹狀結構，從選擇的資料集中建立一個 SQL 陳述式。

    如需關於撰寫 SQL 陳述式的詳細資訊，請參閱 SQL 入門和使用資料庫項目樹狀結構建立 SQL 查詢。

    若要使用「資料庫項目」樹狀結構來建立 SQL 陳述式：

    • 先確定 SQL 文字區域是空白的。
    • 展開樹狀結構的各個分支，找到您需要的資料庫物件，例如，表格中的某個欄，或是資料庫中的某個預存程序。
    • 選取資料庫物件，然後按一下樹狀結構右邊的其中一個按鈕。

    例如，如果您選取了一個表格欄，可用的按鈕有 SELECT、WHERE 和 ORDER BY。按一下其中一個按鈕，將相關的子句加入至您的 SQL 陳述式中。

    您也可以使用預存程序中預先定義好的 SQL 陳述式，方法是從「資料庫項目」樹狀結構中選取所需的預存程序，然後按一下「程序」按鈕。Dreamweaver 會自動將資料填入 SQL 和「變數」區域中。

  4. 如果 SQL 陳述式中含有變數，請在「變數」區域中定義這些變數的值，方法是按一下加號 (+) 按鈕，然後輸入變數名稱、預設值 (也就是在沒有傳回執行階段的值時，變數所要使用的值)，以及執行階段值。

    如果 SQL 陳述式中含有變數，請確定「變數」方塊的「預設值」欄中含有有效的測試值。

    通常，執行階段值會是一個 URL，或是使用者在 HTML 表單欄位中所輸入的表單參數。如需關於 URL 和表單參數的詳細資訊，請參閱取得網頁的資料。

    執行階段值欄中的 URL 參數。

    伺服器模式

    URL 參數的執行階段值運算式

    ASP

    Request.QueryString("formFieldName")

    JSP

    request.getParameter("formFieldName")

    PHP

    #formFieldName#

    「執行階段值」欄中的表單參數：

    伺服器模式

    表單參數的執行階段值運算式

    ASP

    Request.Form("formFieldName")

    JSP

    request.getParameter("formFieldName")

    PHP

    #formFieldName#
  5. 按一下「測試」連線至資料庫，並建立資料集的實體。

    如果 SQL 陳述式中含有變數，請在執行測試前確定「變數」方塊的「預設值」欄中含有有效的測試值。

    如果測試成功，會出現一個表格，並在表格中顯示您資料集中的資料。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。按一下「確定」清除資料集。

  6. 完成相關工作後，請按一下「確定」。

相關主題

  • 適用於 ASP 開發人員的資料庫連線
  • 適用於 JSP 開發人員的資料庫連線
  • PHP 開發人員的資料庫連線
  • 以撰寫 SQL 陳述式的方式建立進階的資料集
  • 使用資料庫項目樹狀結構建立 SQL 查詢
  • 資料庫入門手冊
  • SQL 入門


設定進階資料集對話方塊 (ASP.NET)

這個對話方塊的用途是讓您撰寫自訂的 SQL 陳述式，或是使用「資料庫項目」樹狀結構來建立 SQL 陳述式，將資料集定義成動態內容的來源。

若要設定 ASP.NET 的進階「資料集」對話方塊選項：

  1. 在「名稱」文字方塊中，輸入資料集 (DataSet) 的名稱。

    一般的作法是在資料集 (DataSet) 名稱中加上前置詞 ds，以便與程式碼中的其他物件名稱有所區隔。例如：dsPressRelease。

    請注意，資料集 (DataSet) 名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

  2. 從「連線」彈出式選單中選取連線。
  3. 在 SQL 文字區域中輸入 SQL 陳述式，或使用位於對話方塊底部的「資料庫項目」樹狀結構，從選擇的資料庫表格中建立一個 SQL 陳述式。

    如需為 ASP.NET 撰寫 SQL 陳述式的詳細資訊，請參閱下列章節：

    • 使用資料庫項目樹狀結構建立 SQL 查詢
    • 使用資料庫項目樹狀結構建立 SQL 查詢
    • SQL 入門

    若要使用「資料庫項目」樹狀結構來建立 SQL 陳述式：

    • 先確定 SQL 文字區域是空白的。
    • 展開樹狀結構的各個分支，找到您需要的資料庫物件，例如，表格中的某個欄，或是資料庫中的某個預存程序。
    • 選取資料庫物件，然後按一下樹狀結構右邊的其中一個按鈕。

    例如，如果您選取了一個表格欄，可用的按鈕有 SELECT、WHERE 和 ORDER BY。按一下其中一個按鈕，將相關的子句加入至您的 SQL 陳述式中。

    您也可以使用預存程序中預先定義好的 SQL 陳述式，方法是從「資料庫項目」樹狀結構中選取所需的預存程序，然後按一下「程序」按鈕。Dreamweaver 會自動將資料填入 SQL 和「參數」區域中。

  4. 如果資料集 (DataSet) 的查詢因故失敗，您可以指定要重新導向使用者前往的頁面。例如，如果在查詢期間發生資料庫無法使用的情況，而無法傳回該頁面的資料集 (DataSet) 時，則您可以顯示一個錯誤頁面，並在其中提供一個返回網站首頁的連結。
  5. 如果 SQL 陳述式中含有參數，請在「參數」區域中定義這些參數的值，方法是按一下加號 (+) 按鈕，然後輸入參數名稱及其預設值 (也就是在沒有傳回執行階段值時，參數所要使用的值)。

    如果 SQL 陳述式中含有參數，請確定「參數」方塊的「預設值」欄中包含有效的測試值。

    「頁面參數」可讓您在所撰寫的 SQL 陳述式中提供預設值，作為執行階段值的參考。例如，下列 SQL 陳述式會依據員工的 ID 值來選取員工的記錄。您可以指派預設值給這個參數，以確保一定會傳回執行階段值。在這個範例中，FormFieldName 會參照使用者在表單欄位中所輸入的員工 ID：

    "SELECT * FROM Employees WHERE EmpID = " + (Request.Form("FormFieldName"))

    在「新增頁面參數」對話方塊中會包含類似以下所示的名稱/值配對：

    名稱

    預設值

    FormFieldName

    0001

    通常，執行階段值會是一個 URL，或是使用者在 HTML 表單欄位中所輸入的表單參數。如需關於 URL 和表單參數的詳細資訊，請參閱取得網頁的資料。

  6. 按一下「測試」連線至資料庫，並建立資料集的實體。

    如果 SQL 陳述式中含有執行階段的參考，請在執行測試前確定「頁面參數」欄位的「預設值」欄中包含有效的測試值。

    如果測試成功，會出現一個表格，並在該表格中顯示您資料集 (DataSet) 中的資料。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。按一下「確定」來清除資料集 (DataSet)。

  7. 完成相關工作後，請按一下「確定」。

相關主題

  • ASP.NET 開發人員的資料庫連線
  • 定義資料集
  • 資料庫入門手冊
  • SQL 入門


設定進階資料集對話方塊選項 (ColdFusion)

進階「資料集」對話方塊可讓您撰寫自訂的 SQL 查詢，或是透過點按介面配合「資料庫項目」樹狀結構來編寫 SQL 查詢。

注意

如果您是要建立可搭配 ColdFusion 5 或更早版本的進階資料集，請使用可適用於其他文件類型 (如 ASP 和 JSP) 的一般進階「資料集」對話方塊。

若要完成對話方塊：

  1. 在「名稱」文字方塊中，輸入該資料集的名稱。

    一般的作法是在資料集 (Recordset) 名稱中加上前置詞 rs，以便與程式碼中的其他物件名稱有所區隔。例如：rsPressReleases

    請注意，資料集 (Recordset) 名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

如果您正在定義 ColdFusion 元件的資料集 (也就是說，如果 Dreamweaver 中目前開啟了 CFC 檔)，請從「函式」彈出式選單中選取現有的 CFC 函式，或是按一下「新函式」按鈕以建立新的函式。

資料集會定義在函式中。如需詳細資訊，請參閱在 ColdFusion 組件中定義資料集。

  1. 從「資料來源」彈出式選單中選取資料來源。

    如果彈出式選單清單中沒有顯示任何資料來源，您就必須先建立一個 ColdFusion 資料集。如需詳細資訊，請參閱適用於 ColdFusion 開發人員的資料庫連線。

  2. 如果需要的話，請在「使用者名稱」和「密碼」文字方塊中，輸入使用 ColdFusion 應用程式伺服器所需的使用者名稱或密碼。

    ColdFusion 中的資料來源可能必須要有正確的使用者名稱和密碼，才能存取其內容。如果您沒有用來存取 ColdFusion 中資料來源的使用者名稱和密碼，請洽詢公司內的 ColdFusion 管理員。

  3. 在 SQL 文字區域中輸入 SQL 陳述式，或使用位於對話方塊底部的圖形化「資料庫項目」樹狀結構，從選擇的資料集中建立一個 SQL 陳述式。

    如需詳細資訊，請參閱 SQL 入門和使用資料庫項目樹狀結構建立 SQL 查詢。

若要使用「資料庫項目」樹狀結構來建立 SQL 陳述式：

  • 先確定 SQL 文字區域是空白的。
  • 展開樹狀結構的分支，找到您所要使用的資料庫物件 - 例如，表格中的欄。
  • 選取資料庫物件，然後按一下樹狀結構右邊的其中一個按鈕。

    例如，如果您選取了一個表格欄，可用的按鈕有 Select、Where 和 Order By。按一下其中一個按鈕，將相關的子句加入至您的 SQL 陳述式中。

  1. 如果 SQL 陳述式中含有參數，請在「參數」區域中定義這些參數的值，方法是按一下加號 (+) 按鈕，然後輸入參數名稱及其預設值 (也就是在沒有傳回執行階段值時，參數所要使用的值)。

    如果 SQL 陳述式中含有參數，請確定「參數」方塊的「預設值」欄中包含有效的測試值。

    「頁面參數」可讓您在所撰寫的 SQL 陳述式中提供預設值，作為執行階段值的參考。例如，下列 SQL 陳述式會依據員工的 ID 值來選取員工的記錄。您可以指派預設值給這個參數，以確保一定會傳回執行階段值。在這個範例中，FormFieldName 會參照使用者在表單欄位中所輸入的員工 ID：

    SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))

    在「新增頁面參數」對話方塊中會包含類似以下所示的名稱/值配對：

    名稱

    預設值

    FormFieldName

    0001

    通常，執行階段值會是一個 URL，或是使用者在 HTML 表單欄位中所輸入的表單參數。如需關於 URL 和表單參數的詳細資訊，請參閱擷取表單和 URL 參數。

  2. 按一下「測試」連線至資料庫，並建立資料集的實體。

    如果 SQL 陳述式中含有執行階段的參考，請在執行測試前確定「頁面參數」欄位的「預設值」欄中包含有效的測試值。

    如果測試成功，會出現一個表格，並在表格中顯示您資料集中的資料。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。按一下「確定」清除資料集。

  3. 完成相關工作後，請按一下「確定」。

相關主題

  • 適用於 ColdFusion 開發人員的資料庫連線
  • 定義資料集
  • 資料庫入門手冊
  • SQL 入門


設定 Request 變數對話方塊選項 (ASP)

這個對話方塊會將 ASP 的 Request 變數定義成動態內容的來源。

若要完成對話方塊：

  1. 從「類型」彈出式選單中選取其中一個要求集合。

    例如，如果您要存取 Request.ServerVariables 集合中的資訊，請選取「伺服器變數」；如果您要存取 Request.Form 集合中的資訊，則請選取「表單」。

    以下就是可用的要求集合：

    QueryString 集合會擷取附加於傳送頁面 URL 的資訊，例如，當該頁面有使用 GET 方法的 HTML 表單時。查詢字串會包含使用問號 (?) 附加於 URL 中的一個或多個名稱/值配對 (例如，last=Smith、first=Winston)。當查詢字串含有一個以上的名稱/值配對時，它們將會使用 & 符號來連接。如需詳細資訊，請參閱 URL 參數。

    Form 集合會擷取 HTML 表單中使用 POST 方法包含在 HTTP 要求本文中的表單資訊。如需詳細資訊，請參閱表單參數。

    ServerVariables 集合會擷取預先定義的環境變數值。該集合有一份很長的變數清單，其中包含 CONTENT_LENGTH (HTTP 要求中所送出內容的長度，您可以用來判斷表單是否為空白) 和 HTTP_USER_AGENT (提供有關使用者瀏覽器的資訊)。

    舉例來說，Request.ServerVariables("HTTP_USER_AGENT") 就包含了傳送瀏覽器的相關資訊，例如 Mozilla/4.07 [en] (WinNT; I)，就表示這是 Netscape Navigator 4.07 瀏覽器。

    如需 ASP 伺服器環境變數的完整清單，請參閱安裝於 Microsoft Personal Web Server (PWS) 或 Internet Information Server (IIS) 中的線上說明文件。

    Cookie 集合會擷取 HTTP 要求中所傳送的 Cookie 值。例如，假設網頁讀取了使用者系統上一個名稱為 readMe 的 Cookie。在伺服器上，該 Cookie 的值會儲存在名為 Request.Cookies("readMe") 的變數中。

    ClientCertificate 集合會從瀏覽器所送出的 HTTP 要求中擷取認證的欄位。該認證欄位需符合 X.509 的標準規格。

  2. 指定所要存取集合中的變數。

    例如，如果您要存取 Request.ServerVariables("HTTP_USER_AGENT") 變數中的資訊，請輸入引數 HTTP_USER_AGENT；如果您要存取 Request.Form("lastname") 變數中的資訊，則請輸入引數 lastname。

  3. 按一下「確定」。

    Request 變數會顯示於「繫結」面板中。

相關主題

  • 表單參數
  • 定義 URL 參數
  • 定義 ASP 伺服器變數


設定新增參數對話方塊選項

「新增參數」對話方塊可讓您定義內含於 SQL 陳述式中的參數，方法是輸入參數的名稱和預設值 (也就是在沒有傳回執行階段值時，參數所要使用的值)。

若要定義 SQL 參數：

  1. 從「名稱」彈出式選單中選取參數名稱。
  2. 在「預設參數」文字方塊中，輸入參數的預設值。

    預設值是指在沒有傳回執行階段值時，參數所要使用的值。

  3. 按一下「確定」。

相關主題

  • 使用預存程序修改資料庫 (ColdFusion)
  • 設定 ColdFusion 預存程序的對話方塊選項
  • 設定進階資料集對話方塊選項 (ColdFusion)
  • 擷取表單和 URL 參數


設定新增參數對話方塊選項

「新增參數」對話方塊可讓您定義內含於 SQL 陳述式中的參數，方法是輸入參數的名稱和預設值 (也就是在沒有傳回執行階段值時，參數所要使用的值)。

若要定義 SQL 參數：

  1. 從「名稱」彈出式選單中選取參數名稱。
  2. 在「預設參數」文字方塊中，輸入參數的預設值。

    預設值是指在沒有傳回執行階段值時，參數所要使用的值。

  3. 按一下「確定」。

相關主題

  • 使用預存程序修改資料庫 (ASP.NET)
  • 設定預存程序的對話方塊選項 (ASP.NET)
  • 擷取表單和 URL 參數


設定新增參數對話方塊選項 (PHP)

「新增參數」對話方塊可讓您定義內含於 SQL 陳述式中的參數，方法是輸入參數的名稱、預設值和執行階段值。

若要為 PHP 文件定義 SQL 參數：

  1. 在「名稱」文字方塊中，輸入參數名稱。
  2. 在「預設參數」文字方塊中，輸入參數的預設值。

    預設值是指在沒有傳回執行階段值時，參數所要使用的值。

  3. 在「執行階段值」文字方塊中，輸入參數的執行階段值。

    通常，執行階段值會是一個 URL，或是使用者在 HTML 表單欄位中所輸入的表單參數。

  4. 按一下「確定」。

相關主題

  • 擷取表單和 URL 參數


設定 Request 變數對話方塊選項 (JSP)

這個對話方塊會將 JSP 的 Request 變數定義成頁面動態內容的來源。

若要定義 JSP 的 Request 變數：

  1. 輸入變數的名稱。

    通常，Request 變數會是一個表單或者是一個 URL 參數。如果是使用 HTML 表單來傳遞參數，該變數的名稱就是表單欄位的名稱，或者是用來獲取參數值的物件名稱。

  2. 按一下「確定」。

    JSP 的 Request 變數就會顯示於「繫結」面板中。

相關主題

  • 定義 URL 參數
  • 定義 Session 變數


設定 Session 變數對話方塊選項

這個對話方塊會將 Session 變數定義成頁面動態內容的來源。

若要定義 Session 變數：

  1. 請輸入在應用程式原始程式碼中所使用的 Session 變數名稱。

    如需詳細資訊，請參閱在 Session 變數中儲存資訊。

  2. 按一下「確定」。

    新定義的 Session 變數會顯示於「繫結」面板中。

相關主題

  • 定義 Session 變數
  • 定義伺服器變數


設定應用程式變數對話方塊選項

這個對話方塊會將應用程式變數定義成頁面動態內容的來源。

若要定義應用程式變數：

  1. 在「名稱」文字方塊中，輸入在應用程式原始程式碼中所使用的應用程式變數名稱。
  2. 按一下「確定」。

    新定義的應用程式變數就會顯示於「繫結」面板中。

相關主題

  • 定義 ASP 和 ColdFusion 的應用程式變數
  • 定義伺服器變數


設定 URL 變數對話方塊選項 (ColdFusion)

這個對話方塊會將 ColdFusion 的 URL 變數定義成頁面動態內容的來源。

若要定義 ColdFusion URL 變數：

  1. 在「名稱」文字方塊中，輸入 URL 變數的名稱。

    通常，變數名稱就是用來獲取其值的 HTML 表單欄或物件的名稱。

  2. 按一下「確定」。

    新定義的 ColdFusion URL 變數便會出現在「繫結」面板中。

相關主題

  • 使用 HTML 連結建立 URL 參數
  • 定義 URL 參數
  • 定義 ColdFusion 伺服器變數


設定表單變數對話方塊選項 (ColdFusion)

這個對話方塊會將 ColdFusion 的表單變數定義成頁面動態內容的來源。

若要定義 ColdFusion 表單變數：

  1. 在「名稱」文字方塊中，輸入表單變數的名稱。

    該變數的名稱就是用來獲取其值的 HTML 表單欄位或物件的名稱。

  2. 按一下「確定」。

    ColdFusion 表單變數就會顯示於「繫結」面板中。

相關主題

  • 定義 URL 參數
  • 定義伺服器變數


設定用戶端變數對話方塊 (ColdFusion)

這個對話方塊會將 ColdFusion 的用戶端變數定義成頁面動態內容的來源。

若要定義 ColdFusion 用戶端變數：

  1. 在「名稱」文字方塊中，輸入變數的名稱。

    例如，如果您要存取 ColdFusion 變數 Client.LastVisit 中的資訊，請輸入 LastVisit。

    所謂的用戶端變數，指的就是程式碼中用來建立資料與某特定用戶端關聯性的一種變數。用戶端變數會保留使用者在應用程式中從一個頁面移至另一個頁面、以及從一個工作階段移至另一個工作階段的應用程式狀態。

    用戶端變數可以是由使用者自訂的變數，也可以是內建的變數。下表中列出了內建的 ColdFusion 用戶端變數：

    變數

    說明

    Client.CFID

    提供每一部連線至伺服器的用戶端一個累加式的 ID。

    Client.CFTOKEN

    一個隨機產生的數字，用來當做特定用戶端的唯一識別。

    Client.URLToken

    在不使用 Cookie 的情況下，在範本之間進行傳遞的 CFID 和 CFTOKEN 組合。

    Client.LastVisit

    記錄用戶端最近一次造訪伺服器的時間戳記。

    Client.HitCount

    某特定用戶端對某頁面的要求次數 (會使用 CFID 及 CFTOKEN 進行追蹤)。

    Client.TimeCreated

    某特定用戶端第一次建立 CFID 和 CFTOKEN 時，記錄當時的時間戳記。
  2. 按一下「確定」。

    新定義的 ColdFusion 用戶端變數便會出現在「繫結」面板中。

相關主題

  • 定義 ColdFusion 伺服器變數


設定 Cookie 變數對話方塊選項

這個對話方塊會定義 ColdFusion 的 Cookie 變數。

若要定義 ColdFusion 的 Cookie 變數：

  1. 在「名稱」文字方塊中，輸入 Cookie 變數的名稱。

    Cookie 變數會建立於程式碼中，並會存取從瀏覽器傳遞到伺服器的 Cookie 中所包含的資訊。

  2. 按一下「確定」。

Cookie 變數會顯示於「繫結」面板中。

相關主題

  • 定義 ColdFusion 伺服器變數


設定 CGI 變數對話方塊選項

這個對話方塊會定義 ColdFusion 的 CGI 變數。

若要定義 ColdFusion 的 CGI 變數：

  1. 在「名稱」文字方塊中，輸入變數的名稱。

    例如，如果您要存取 CGI.HTTP_REFERER 變數中的資訊，請輸入 HTTP_REFERER。

    下表列出了在伺服器上所建立的最常見 ColdFusion CGI 變數：

    變數

    說明

    SERVER_SOFTWARE

    回應要求 (和執行閘道) 的資訊伺服器軟體名稱和版本。格式：名稱/版本。

    SERVER_NAME

    會顯示於自我參考的 URL 中的伺服器主機名稱、DNS 別名或 IP 位址。

    GATEWAY_INTERFACE

    該部伺服器所符合的 CGI 規格修訂版本。格式：CGI/修訂版本。

    SERVER_PROTOCOL

    發出要求所使用的資訊通訊協定名稱和修訂版本。格式：通訊協定/修訂版本。

    SERVER_PORT

    傳送要求時所使用的通訊埠編號。

    REQUEST_METHOD

    產生要求所使用的方法。對 HTTP 而言，所使用的方法有 Get、Head、Post 等。

    PATH_INFO

    由用戶端所提供的額外路徑資訊。您可以使用 Script 的虛擬路徑名稱來存取 Script，並於該路徑的結尾處提供額外的資訊。會將額外資訊傳送成 PATH_INFO。

    PATH_TRANSLATED

    伺服器會提供一個轉譯後的 PATH_INFO 版本，會對所收到的路徑進行虛擬-至-實際的路徑對應作業。

    SCRIPT_NAME

    執行 Script 的虛擬路徑，用於自我參考的 URL。

    QUERY_STRING

    在參考這個 Script 的 URL 中，接在問號 (?) 後面的查詢資訊。

    REMOTE_HOST

    提出要求的主機名稱，如果伺服器沒有此項資訊，則會設定 REMOTE_ADDR 而不設定 REMOTE_HOST。

    REMOTE_ADDR

    提出要求的遠端主機 IP 位址。

    AUTH_TYPE

    如果伺服器支援使用者驗證的功能，而 Script 有 (加密) 保護時，則會使用這個變數所指定的通訊協定專屬驗證方法來對使用者進行驗證。

    REMOTE_USER AUTH_USER

    如果伺服器支援使用者驗證的功能，而且 Script 有 (加密) 保護時，就會使用這個名稱來對使用者進行驗證 (也可以使用 AUTH_USER)。

    REMOTE_IDENT

    如果伺服器支援 RFC 931 識別的功能，會將這個變數設定為擷取自伺服器中的遠端使用者名稱。這個變數只能用於日誌記錄中。

    CONTENT_TYPE

    對有附加資訊的查詢而言，例如 HTTP POST 和 PUT，這個變數就代表了資料的內容類型。

    CONTENT_LENGTH

    用戶端所指定的內容長度。

    下表列出了由瀏覽器建立、然後傳遞到伺服器的最常見 CGI 變數：

    變數

    說明

    HTTP_REFERER

    參考的文件。指的就是連結至資料或由資料所送出的文件。

    HTTP_USER_AGENT

    用戶端目前用來傳送要求的瀏覽器。格式：軟體/版本程式庫/版本。

    HTTP_IF_MODIFIED_SINCE

    頁面上次修改的時間。這個變數是由瀏覽器來決定是否要送出，通常，是用來回應伺服器所傳送的 LAST_MODIFIED HTTP 頁首。您也可以使用這個變數來進行瀏覽器端的快取功能。
  2. 按一下「確定」。

    CGI 變數會顯示於「繫結」面板中。

相關主題

  • 定義 ColdFusion 伺服器變數


設定伺服器變數對話方塊選項

這個對話方塊會定義 ColdFusion 的伺服器變數。

若要定義 ColdFusion 伺服器變數：

  1. 在「名稱」文字方塊中，輸入伺服器變數的名稱。

    例如，如果您要存取儲存在 Server.Trademark 變數中的資訊，請輸入 Trademark 做為變數名稱。

    伺服器變數是一種可以讓所有存取伺服器的用戶端存取，同時也要讓執行於伺服器上所有的應用程式存取的變數。這些變數在伺服器關機停止之前，會一直存在於伺服器中。這些變數是使用 ColdFusion 的 CFSET 或 CFPARAM 標籤 (搭配 CFLOCK) 所建立的變數。

    伺服器變數若不是由使用者自行定義產生的，就是內建的變數。下表列出了內建的 ColdFusion 伺服器變數：

    變數

    說明

    Server.ColdFusion.ProductName

    ColdFusion 產品名稱。

    Server.ColdFusion.ProductVersion

    ColdFusion 版本編號。

    Server.ColdFusion.ProductLevel

    ColdFusion 版本種類 (企業版或是專業版)

    Server.ColdFusion.SerialNumber

    目前所安裝 ColdFusion 版本的序號

    Server.OS.Name

    伺服器所執行的作業系統名稱 (Windows NT、Windows 2000、Linux)

    Server.OS.AdditionalInformation

    關於所安裝伺服器作業系統的其他資訊 (如 Service Pack、Update 等)

    Server.OS.Version

    已安裝的作業系統版本。

    Server.OS.BuildNumber

    已安裝作業系統的建置編號。
  2. 按一下「確定」。

    ColdFusion 的伺服器變數便會出現在「繫結」面板中。

相關主題

  • 定義 ColdFusion 伺服器變數


設定區域變數對話方塊選項

這個對話方塊會定義 ColdFusion 的區域變數。

若要定義 ColdFusion 區域變數：

  1. 在「名稱」文字方塊中，輸入區域變數的名稱。

    區域變數是在 ColdFusion 頁面中使用 CFSET 或 CFPARAM 標籤所建立的變數。

  2. 按一下「確定」。

    區域變數會顯示於「繫結」面板中。

相關主題

  • 定義 ColdFusion 伺服器變數


新增動態內容到網頁

本章將描述使各種頁面元素成為動態最有效率的方式。當您定義了一個或多個動態內容來源之後，您便可以使用這些來源，將動態內容新增到頁面中。內容來源可以包括資料集中的欄、HTML 表單送出的值、伺服器物件所包含的值，或其他資料。如需詳細資訊，請參閱定義動態內容的來源。

在 Macromedia Dreamweaver 8 中，您幾乎可以將動態內容放在網頁或其 HTML 原始程式碼中的任何地方。您可以將動態內容放在插入點、取代文字字串，或是將其插入成為 HTML 屬性。例如，動態內容可以定義影像的 src 屬性，或是表單欄位的 value 屬性。

本章包含下列各節：

關於新增動態內容

使文字成為動態

使影像成為動態

使 HTML 屬性成為動態

使 ActiveX、Flash 及其他物件參數成為動態

編輯動態內容

刪除動態內容

在 Contribute 網站中建立動態網頁


關於新增動態內容

您可以在「繫結」面板中選取內容來源，以將動態內容加入頁面中。Dreamweaver 會將伺服器端的 Script 插入頁面的程式碼中，在瀏覽器要求頁面時，指示伺服器將資料從內容來源傳送到頁面的 HTML 原始碼。

要讓指定的頁面元素成為動態，通常可以有好幾種方式。例如，如果要讓影像成為動態，您可以使用「繫結」面板、「屬性」檢視窗，或「插入」選單中的「影像」命令。

依預設值，HTML 頁面每次只能顯示一筆記錄。若要顯示資料集中的其他記錄，您可以新增一個連結，每次只移動一筆記錄 (請參閱建立資料集導覽連結)；您也可以建立一個重複區域，在單一頁面上顯示一筆以上的記錄 (請參閱顯示多筆資料集結果)。

本節包含下列概念性主題：

  • 動態文字
  • 變更動態內容


動態文字

動態文字會採用套用到現有文字或插入點的任何文字格式。例如，假設某一「階層式樣式表」(CSS) 樣式會影響選取的文字，那麼取代這些文字的動態內容也會受這個樣式影響。您可以使用任何 Dreamweaver 文字格式工具來新增或變更動態內容的文字格式 (請參閱將印刷和頁面版面元素套用至動態資料)。

您也可以將資料格式套用到動態文字。例如，假設您的資料是由日期構成，您可以指定特定的日期格式，例如針對美國訪客指定 04/17/00，針對加拿大訪客指定 17/04/00 (請參閱使用預先定義的資料格式)。

您可以用動態文字取代頁面上的標準文字，也可以將動態文字新增到頁面上的插入點。


變更動態內容

您可以藉由編輯提供內容的伺服器行為，來變更頁面上的動態內容。例如，您可以編輯資料集伺服器行為，為您的頁面提供更多記錄。

頁面上的動態內容會列在「伺服器行為」面板中。例如，如果您將資料集加入網頁中，「伺服器行為」面板會列示如下：

Recordset(myRecordset)

如果您新增另一個資料集到頁面，「伺服器行為」面板會同時將這兩個資料集列示如下：

Recordset(mySecondRecordset)
Recordset(myRecordset)

相關主題：

  • 使文字成為動態
  • 編輯動態內容
  • 刪除動態內容


使文字成為動態

您可以用動態文字來取代現有文字，也可以將動態文字放在頁面上指定的插入點。

若要新增動態文字：

  1. 請選擇「視窗＞繫結」，開啟「繫結」面板。
  2. 請確定「繫結」面板列出了您想要使用的內容來源。

    內容來源應該含有純文字 (ASCII 文字)。純文字包括 HTML。如果清單中並未出現任何內容來源，或者可用的內容來源不符合您的需要，請按一下加號 (+) 按鈕，定義新的內容來源 (請參閱定義動態內容的來源)。

  3. 在「設計」檢視中，選取頁面上的文字，或按一下您想要新增動態文字的地方。
  4. 在「繫結」面板中，從清單中選取內容來源。如果您選取資料集，請指定資料集中您想要的欄。

  5. 按一下「插入」，或將內容來源拖曳到頁面上。

如果您是在「設計」檢視中工作，並且開啟了「即時資料」(「檢視＞即時資料」)，動態內容就會出現在頁面上。

如果「即時資料」是關閉的，就會用預留位置代替 (如果您選取了頁面上的文字，預留位置會取代這個文字選取範圍)。資料集內容的預留位置會使用 {RecordsetName.ColumnName} 語法，其中 Recordset 是資料集的名稱，而 ColumnName 則是您從資料集中選擇的欄名。

有時候，動態文字預留位置的長度會扭曲「文件」視窗中的頁面版面。您可以使用空的大括弧做為預留位置來解決這個問題。

若要建立動態文字預留位置：

  1. 選取「編輯＞偏好設定＞隱藏元素」(Windows) 或「Dreamweaver＞偏好設定＞隱藏元素」(Macintosh)。
  2. 在「顯示動態文字於」彈出式選單中選取 { }。
  3. 按一下「確定」。

相關主題

  • 關於新增動態內容
  • 動態文字


使影像成為動態

您可以使頁面上的影像成為動態。例如，假如您要設計一個頁面來顯示慈善拍賣會的銷售項目。每個頁面都含有某一個項目的描述性文字和照片。頁面一般版面的每個項目都會保持不變，但是照片 (和描述性文字) 則可能會變更。

若要使影像成為動態：

  1. 在「設計」檢視 (「檢視＞設計」) 中開啟頁面，然後將插入點放在您希望影像出現在頁面上的地方。
  2. 並選取「插入＞影像」。

    「選取影像原始檔」對話方塊便會出現。

  3. 按一下「資料來源」選項 (Windows) 或「資料來源」按鈕 (Macintosh)。

    內容來源清單便會出現。

  4. 從清單中選取內容來源。

    這個內容來源應該是含有影像檔路徑的資料集。依據網站檔案結構的不同，這個路徑可以是絕對路徑、文件相對路徑或根相對路徑。

    注意

    Dreamweaver 目前不支援儲存在資料庫中的二進位影像。

    如果清單中並未出現任何資料集，或是可用的資料集不符合您的需要，請定義新的資料集。如需相關說明，請參閱了解資料集。

  5. 按一下「確定」。


使 HTML 屬性成為動態

您可以將 HTML 屬性繫結到資料，以動態方式變更頁面的外觀。例如，您可以將表格的 background 屬性繫結到資料集中的某個欄位，藉此變更表格的背景影像。

您可以將 HTML 屬性與「繫結」面板繫結或與「屬性」檢視窗繫結。

若要使 HTML 屬性配合「繫結」面板成為動態：

  1. 請選擇「視窗＞繫結」，開啟「繫結」面板。
  2. 請確定「繫結」面板列出了您想要使用的資料來源。

    內容來源應該含有適合您想要繫結之 HTML 屬性的資料。如果清單中並未出現任何內容來源，或是可用的內容來源不符合您的需要，請按一下加號 (+) 按鈕，定義新的資料來源。如需相關說明，請參閱定義動態內容的來源。

  3. 在「設計」檢視中，選取 HTML 物件。

    例如，若要選取 HTML 表格，請在表格內按一下，然後在「文件」視窗左下角的標籤選取器中按一下 <table> 標籤。

  4. 在「繫結」面板中，從清單中選取內容來源。
  5. 在「繫結到」方塊中，從彈出式選單選取 HTML 屬性。
  6. 按一下「繫結」。

下一次這個頁面在應用程式伺服器上執行的時候，就會將資料來源的值指定給 HTML 屬性。

若要使 HTML 屬性配合「屬性」檢視窗成為動態：

  1. 在「設計」檢視中，選取 HTML 物件並且開啟「屬性」檢視窗 (「視窗＞屬性」)。

    例如，若要選取 HTML 表格，請在表格內按一下，然後在「文件」視窗左下角的標籤選取器中按一下 <table> 標籤。

  2. 將動態內容來源繫結至 HTML 屬性的方式，取決於它的所在位置：
    • 如果在「屬性」檢視窗中，您想要繫結的屬性旁邊有個資料夾圖示，請按一下這個資料夾圖示，開啟檔案選取範圍對話方塊，然後按一下「資料來源」選項以顯示資料來源清單。
    • 如果您想要繫結的屬性旁邊沒有資料夾圖示，請按一下檢視窗左邊的「清單」索引標籤 (兩個索引標籤下面的那個)。

      「屬性」檢視窗的「清單」檢視便會出現。

    • 如果您想要繫結的屬性並未列於「清單」檢視中，請按一下加號 (+) 按鈕，然後輸入屬性名稱，或是按一下小箭頭按鈕，並從彈出式選單中選取屬性。
  3. 若要使屬性的值成為動態，請按一下這個屬性，然後按一下該屬性所在列尾端的閃電圖示或資料夾圖示。

    如果您按一下閃電圖示，資料來源清單便會出現。

    以下是一個範例：

    如果您按一下資料夾圖示，檔案選取範圍對話方塊便會出現。選取「資料來源」選項以顯示內容來源的清單。

  4. 從內容來源清單選取內容來源。

    內容來源應該含有適合您想要繫結之 HTML 屬性的資料。如果清單中並未出現任何內容來源，或是可用的內容來源不符合您的需要，請定義新的內容來源。如需相關說明，請參閱取得網頁的資料。

  5. 按一下「確定」。

下一次這個頁面在應用程式伺服器上執行的時候，就會將資料來源的值指定給 HTML 屬性。


使 ActiveX、Flash 及其他物件參數成為動態

您可以使 Java Applet 和外掛程式的參數成為動態，也可以使 ActiveX、Macromedia Flash、Shockwave、Director 和 Generator 物件的參數成為動態。

在開始之前，請確定資料集中的欄位含有適合您想要繫結之物件參數的資料。

若要使物件參數成為動態：

  1. 在「設計」檢視中，選取頁面上的物件並且開啟「屬性」檢視窗 (「視窗＞屬性」)。
  2. 按一下「參數」按鈕。

    「參數」對話方塊便會出現。

  3. 如果您的參數沒有出現在清單中，請按一下加號 (+) 按鈕，並在「參數」欄中輸入參數名稱。
  4. 按一下參數的「值」欄，然後按一下閃電圖示，以指定動態值。

    資料來源清單就會出現。

  5. 從清單中選取一種資料來源。

    資料來源應該含有適合您想要繫結之物件參數的資料。如果清單中並未出現任何資料來源，或是可用的資料來源不符合您的需要，請定義新的資料來源。如需相關說明，請參閱定義動態內容的來源。

  6. 按一下「確定」。


編輯動態內容

若要編輯某個提供動態內容的伺服器行為，請在「伺服器行為」面板中按兩下伺服器行為。您用來定義原始資料來源的同一個對話方塊便會出現。在對話方塊中進行必要的變更，然後按一下「確定」。

您也可以使用「屬性」檢視窗來編輯頁面上的資料集。開啟「屬性」檢視窗 (「視窗＞屬性」)，然後在「伺服器行為」面板 (「視窗＞伺服器行為」) 中選取資料集。

如果您在沒有選取「自動重新整理」選項的情況下，在「即時資料」視窗中編輯資料集，必須重新整理頁面後，才能查看您所做的變更。若要重新整理頁面，請按一下「重新整理」按鈕，或選取「檢視＞重新整理即時資料」。

相關主題

  • 刪除動態內容
  • 編輯動態內容


刪除動態內容

新增動態內容到頁面之後，您可以選取頁面上的動態內容並且按「刪除」來刪除它。您也可以在「伺服器行為」面板中選取動態內容，然後按一下減號 (-) 按鈕，刪除動態內容。

注意

這項作業會移除網頁中從資料庫擷取動態內容的伺服器端 Script，它並不會刪除資料庫中的資料。

相關主題

  • 編輯動態內容
  • 編輯動態內容


在 Contribute 網站中建立動態網頁

當 Contribute 的使用者對包含動態內容或隱藏元素 (例如 Script 及註解) 的網頁進行編輯時，Contribute 會以黃色標記來顯示動態內容及隱藏元素。依預設值，Contribute 使用者無法選取或刪除這些標記。

如果您想讓 Contribute 的使用者可以選取和刪除網頁中的動態內容及其他隱藏元素，則您可以變更權限群組設定，以賦予他們這些權限；通常，Contribute 的使用者永遠無法編輯動態內容，即使您已經賦予他們選取權限。

注意

如果利用某些伺服器技術，您可以使用伺服器標籤或函式來顯示靜態文字。如果要讓 Contribute 的使用者能夠在用到上述伺服器技術的動態網頁中編輯靜態文字，請將靜態文字置於伺服器標籤之外。

如果要讓 Contribute 的使用者群組能夠刪除網頁中的程式碼：

  1. 請選取「網站＞管理 Contribute 網站」。
  2. 如果某些必要的 Contribute 相容性選項並未啟動，將會出現對話方塊，詢問您是否要啟動這些選項。請按一下「確定」，以啟動這些選項及 Contribute 相容性。如需詳細資訊，請參閱準備 Contribute。
  3. 如果出現提示，請輸入 sdministrator 密碼，然後按一下「確定」。

    「管理網站」對話方塊便會出現。

  4. 在「使用者和角色」類別中，選取某個角色，然後按一下「編輯角色設定值」按鈕。
  5. 選取「編輯」類別，並取消選取保護 Script 及表單的選項。如需詳細資訊，請參閱建立 Contribute 網站的樣版和「管理 Macromedia Contribute」。
  6. 按一下「確定」，關閉「編輯設定」對話方塊。
  7. 按一下「關閉」，關閉「管理網站」對話方塊。

相關主題

  • 使用 Dreamweaver 管理 Contribute 網站
  • 建立 Contribute 網站的樣版


參考

本節提供這一章中所介紹的下列對話方塊和檢視窗的資訊：

  • 設定動態文字對話方塊選項
  • 設定動態資料對話方塊選項
  • 設定資料集的「屬性」檢視窗
  • 設定 ColdFusion 預存程序、ASP 命令和 JSP 可呼叫物件的「屬性」檢視窗
  • 設定 JSP 就緒陳述式的「屬性」檢視窗
  • 設定重複區域的「屬性」檢視窗


設定動態文字對話方塊選項

這個對話方塊的用途是新增動態內容，或使現有文字成為動態。

若要設定「動態文字」對話方塊選項：

  1. 請從資料來源清單中選取資料來源。

    資料來源應該包含文字資訊。如果清單中沒有資料來源，或者如果可用的資料來源不符合您的需求，請按一下加號 (+) 按鈕定義新的資料來源。如需相關說明，請參閱顯示資料庫記錄。

  2. 如果需要的話，請為文字選取資料格式。

    如需詳細資訊，請參閱使用預先定義的資料格式。

  3. 如果需要的話，請修改 Dreamweaver 會插入頁面以顯示動態文字的程式碼。
  4. 按一下「確定」。

相關主題

  • 使文字成為動態
  • 了解資料集


設定動態資料對話方塊選項

這個對話方塊的用途是使 HTML 屬性成為動態。如果您想要讓文字成為動態，請參閱設定動態文字對話方塊選項。

若要使 HTML 屬性成為動態：

  1. 請從資料來源清單中選取資料來源。

    資料來源應該含有適合您想要繫結之 HTML 屬性的資料。如果清單中並未出現任何資料來源，或是可用的資料來源不符合您的需要，請定義新的資料來源。如需相關說明，請參閱顯示資料庫記錄。

  2. 如果需要的話，請選取文字的資料格式。

    如需詳細資訊，請參閱使用預先定義的資料格式。

  3. 如果需要的話，請修改 Dreamweaver 會插入頁面以顯示動態文字的程式碼。
  4. 按一下「確定」。

相關主題

  • 使 HTML 屬性成為動態


設定資料集的「屬性」檢視窗

這個「屬性」檢視窗的用途是修改選取的資料集。

若要修改選取的資料集：

  • 編輯任何選項。當您在檢視窗中選取新的選項時，Dreamweaver 就會更新頁面。

    可用選項會因伺服器機型而異。

相關主題

  • 編輯動態內容


設定 ColdFusion 預存程序、ASP 命令和 JSP 可呼叫物件的「屬性」檢視窗

這個「屬性」檢視窗的用途是修改選取的預存程序。

若要修改選取的預存程序：

  • 編輯任何選項。當您在檢視窗中選取新的選項時，Dreamweaver 就會更新頁面。

    可用選項會因伺服器技術而異。

相關主題

  • 編輯動態內容


設定 JSP 就緒陳述式的「屬性」檢視窗

這個「屬性」檢視窗的用途是修改選取的 JSP 就緒陳述式。

若要修改選取的 JSP 就緒陳述式：

  • 編輯任何選項。當您在檢視窗中選取新的選項時，Dreamweaver 就會更新頁面。

相關主題

  • 編輯動態內容


設定重複區域的「屬性」檢視窗

這個「屬性」檢視窗的用途是修改選取的重複區域。

若要修改選取的重複區域：

請變更下列任何一項：

  • 重複區域的名稱
  • 為重複區域提供記錄的資料集
  • 顯示的記錄數目

當您選取新選項時，Dreamweaver 就會更新頁面。

相關主題

  • 編輯動態內容
  • 顯示多筆資料集結果


顯示資料庫記錄

顯示資料庫記錄包括擷取儲存於資料庫或其他內容來源的資訊，然後將所取得的資料提供給網頁。Macromedia Dreamweaver 8 提供了許多顯示動態內容的方法，並提供了多項內建的伺服器行為，可讓您用來增強動態內容的呈現，同時讓使用者能以更輕鬆的方式來搜尋資料庫、並導覽從資料庫所傳回的資訊。

本章包含下列各節：

關於顯示資料庫記錄

使用預先定義的資料格式

建立資料集導覽連結

依據資料集的結果顯示或隱藏區域

顯示多筆資料集結果

使用重複區域伺服器行為建立表格

建立記錄計數器


關於顯示資料庫記錄

資料庫及其他的動態內容來源提供了更強大且更有彈性的方式，讓您能夠搜尋、排序並檢視大量的資訊。當您需要儲存大量的資訊時，可以使用資料庫來儲存網站的內容，然後以有意義的方式擷取及顯示這些資訊。Dreamweaver 為您提供了幾種工具和預先建立的行為，能協助您有效率地擷取並顯示儲存在資料庫中的資訊。下列各節將說明 Dreamweaver 的伺服器行為和格式化元素，以及如何使用它們來顯示動態內容。

本節包含下列概念性主題：

  • 伺服器行為和格式化元素
  • 將印刷和頁面版面元素套用至動態資料
  • 導覽資料庫資料集結果
  • 自訂資料集導覽列
  • 依據資料集結果顯示或隱藏區域
  • 顯示多筆資料集結果
  • 記錄計數器


伺服器行為和格式化元素

Dreamweaver 提供了下列伺服器行為的功能，以及可用來強化動態資料顯示的格式化元素：

格式可讓您將不同類型的數字、貨幣、日期/時間和百分比數值套用至動態文字上。

例如，如果資料集中有某個項目的價格為 10.989，您可以在頁面中將該價格顯示成 $10.99，方法是在 Dreamweaver 中選取「貨幣─2 個小數位數」格式。這個格式會使用兩個小數位數來顯示數字。如果該數值在小數點以下不只兩位數時，則該格式會將該數值進位成最接近小數點以下兩位數的數值。如果該數值是沒有小數點的整數，則會在小數點以下顯示兩個零。

重複區域伺服器行為可讓您顯示由資料庫查詢所傳回的多個項目，並且讓您指定每個頁面中所要顯示的記錄筆數。

資料集導覽伺服器行為可讓您插入導覽元素，方便使用者在資料集所傳回的記錄集中前後移動。例如，當您選擇使用「重複區域」伺服器物件以每頁 10 筆的方式來顯示記錄，而資料集共傳回 40 筆記錄時，您一次就可以在一個頁面中導覽 10 筆記錄。

資料集狀態列伺服器行為提供了計數器的功能，可以顯示使用者正在檢視的記錄位於所傳回的整組記錄總數中的相對位置。

顯示區域伺服器行為可讓您依據目前顯示記錄的關聯性來選擇顯示或隱藏頁面中的項目。例如，若使用者已導覽至資料集中的最後一筆記錄，則您可以隱藏「下一頁」連結，而只顯示「上一頁」記錄連結。


將印刷和頁面版面元素套用至動態資料

Dreamweaver 有一項強大的功能就是可以在結構化的頁面中呈現動態資料，並使用 HTML 及 CSS 來套用印刷格式。若要在 Dreamweaver 中將格式套用至動態資料，請使用 Dreamweaver 的格式化工具來格式化動態資料的表格和預留位置。在將資料來源中的資料插入至頁面時，就會自動套用您所指定的字體、段落及表格格式。

若要了解 Dreamweaver 的格式化功能，以及如何將格式套用至動態資料元素，請參閱以表格呈現內容和插入和格式化文字。


導覽資料庫資料集結果

資料集導覽連結可讓使用者從一筆記錄移到下一筆記錄，或是從一組記錄移到下一組記錄。例如，當您完成一次顯示五筆記錄的頁面設計工作後，您可能會想要新增「下一頁」或「上一頁」的連結，讓使用者可以顯示後五筆或前五筆記錄。

Dreamweaver 可讓您建立四種類型的導覽連結，方便使用者導覽資料集中的內容：第一頁、上一頁、下一頁，和最後一頁。單一頁面中可以含有上述任意數目的連結，唯一的限制是這些連結只能用於單一資料集中。您無法在同一個頁面上新增在第二個資料集中移動的連結。

注意

Microsoft ASP.NET 中把資料集 (Recordset) 視同一個資料集 (DataSet)。如果您使用的是 ASP.NET 的文件類型，則與 ASP.NET 相關的對話方塊和選單也同樣會標示成資料集 (DataSet)。Dreamweaver 的相關文件中，會把兩種類型都視為資料集 (Recordset)，但是在特別說明 ASP.NET 的相關功能時，則會使用資料集 (DataSet)。

資料集導覽連結必須要有下列動態元素：

  • 一個可供導覽的資料集
  • 頁面中要用來顯示記錄的動態內容
  • 頁面中要有可當作是可按式導覽列的文字或影像
  • 一組供資料集導覽之用的「移到記錄」伺服器行為

您可以使用「記錄導覽列」伺服器物件來加入最後兩個元素，也可以分別使用 Dreamweaver 設計工具和「伺服器行為」面板來加入這兩個元素。

相關主題

  • 建立資料集導覽連結


自訂資料集導覽列

如果您想要建立一個比使用「資料集導覽列」伺服器物件所建立的簡單式表格具有更複雜版面和格式樣式的資料集導覽列，您可能會比較喜歡建立自己特有的導覽列。若要達成這個目的，必須先用文字或影像建立必要的導覽連結，然後在設計檢視中將連結置於頁面內，接著再為每個導覽連結指派個別的伺服器行為。

您可以為導覽連結指派下列的個別伺服器行為：

  • 移到第一頁
  • 移到最後一頁
  • 移到下一頁
  • 移到上一頁

如果您偏好使用 Dreamweaver 內建的「資料集導覽列」伺服器物件來建立導覽列，請參閱使用「資料集導覽列」伺服器行為來建立導覽列。


導覽列設計工作

在建立自訂的導覽列時，請先使用 Dreamweaver 的頁面設計工具來建立導覽列的視覺外觀。您不需要建立文字字串或影像的連結，Dreamweaver 會為您建立相關的連結。

建立導覽列的頁面中一定要含有可供導覽的資料集。如需詳細資訊，請參閱了解資料集。

下圖為簡單資料集導覽列的外觀，其中包含了使用影像或其他內容元素所建立的連結按鈕：

在您將資料集加入頁面，和建立導覽列之後，您必須將各個伺服器行為套用至每一個導覽元素上。例如，一般的資料集導覽列中會含有下列連結，其符合適當的伺服器行為：

導覽連結 | 伺服器行為
前往第一頁 | 移到第一頁
前往上一頁 | 移到上一頁
前往下一頁 | 移到下一頁
前往最後一頁 | 移到最後一頁

相關主題

  • 依據資料集結果顯示或隱藏區域
  • 顯示多筆資料集結果


依據資料集結果顯示或隱藏區域

Dreamweaver 包含一套伺服器行為，可讓您依據資料集所傳回的結果來顯示或隱藏區域。例如，您可以在使用了「上一頁」和「下一頁」記錄連結來導覽結果頁面的頁面中，指定除了第一頁 (該頁面並沒有上一頁) 以外的其他所有結果頁面上都要顯示「上一頁」記錄連結，並且指定除了最後一頁 (該頁面並沒有下一頁) 以外的其他所有結果頁面上都要顯示「下一頁」記錄連結。

您也可以依據資料集是否為空的情況，來指定要顯示或隱藏某個區域。在出現空的資料集時 (例如，沒有符合查詢的記錄)，您可以顯示一個訊息通知使用者沒有傳回的記錄。這在建立需依照使用者輸入的資料來進行查詢的搜尋頁面時特別有其必要性；同樣地，當資料庫連線發生問題，或是當伺服器無法辨識使用者的使用者名稱和密碼時，您將可以顯示錯誤訊息。

以下為「顯示區域」伺服器行為：

  • 如果資料集是空的，即顯示
  • 如果資料集不是空的，即顯示
  • 如果是第一頁，即顯示
  • 如果不是第一頁，即顯示
  • 如果是最後一頁，即顯示
  • 如果不是最後一頁，即顯示

若要了解如何套用「顯示區域」伺服器行為，請參閱依據資料集的結果顯示或隱藏區域。


顯示多筆資料集結果

「重複區域」伺服器行為可以讓您在頁面中顯示資料集中的多筆記錄。所有動態資料選取範圍都可以轉變成重複區域。然而，最常見的區域為表格、表格列，或是一系列的表格列。

以下範例說明了如何將「重複區域」伺服器行為套用於表格列上，並指定每個頁面顯示九筆記錄。該列本身會顯示四筆不同的記錄：縣市 (City)、省市 (State)、地址 (Street Address) 以及郵遞區號 (Zip Code)。

若要建立如上所示的表格，您必須先建立一個含有動態內容的表格，然後將「重複區域」伺服器行為套用至含有動態內容的表格列上。當應用程式伺服器在處理該頁面時，該列會依照「重複區域」伺服器物件所指定的次數進行重複顯示的動作，並會在每一個新列中插入不同的記錄。

若要了解如何套用「重複區域」伺服器行為，請參閱顯示多筆資料集結果和使用重複區域伺服器行為建立表格。


記錄計數器

記錄計數器是使用者在瀏覽一組資料集時的一個參考點。通常，記錄計數器會顯示兩個數值：一個是傳回記錄的總數，另一個則是目前正在檢視的記錄。例如，如果資料集傳回 40 筆個別的記錄，而且每一個頁面顯示 8 筆記錄，則第一個頁面中的記錄計數器會指出「顯示第 1-8/40 筆記錄」。

若要建立頁面的記錄計數器，您必須先建立頁面的資料集、含有動態內容的頁面版面，以及資料集導覽列。若要了解更多有關建立這些元素以及在頁面中新增這些元素的資訊，請參閱下列章節：

  • 了解資料集
  • 建立資料集導覽連結
  • 顯示多筆資料集結果
  • 使用重複區域伺服器行為建立表格

一旦您在頁面中有上列元素，就可以建立記錄計數器。

簡單記錄計數器

您可以使用「資料集導覽狀態」伺服器物件，建立簡單的記錄計數器。這個伺服器物件會插入一個完整的記錄計數器，您可以使用 Dreamweaver 的頁面設計工具，將文字格式套用至該計數器上。若要了解更多有關這個記錄計數器的資訊，請參閱使用資料集導覽狀態列物件建立記錄計數器。

自訂記錄計數器

您可以使用個別的記錄計數器行為來建立自訂的記錄計數器。建立自訂的記錄計數器可讓您建立較為複雜的記錄計數器，而不是由「資料集導覽狀態」伺服器物件所插入的單一列表格。您可以使用數種創意的方式來安排設計元素，並將伺服器行為套用至各個相關的元素上。

以下為「記錄計數」伺服器行為：

  • 顯示起始記錄編號
  • 顯示結束記錄編號
  • 顯示記錄總數

建立自訂記錄計數器會帶領您將個別的「記錄計數器」伺服器行為套用至頁面的設計元素，以完成記錄計數器的建立步驟。


使用預先定義的資料格式

Dreamweaver 提供了多項預先定義好的資料格式，可讓您套用至動態資料元素上。資料格式樣式包含了日期和時間、貨幣、數值和百分比的格式。

若要將資料格式套用至動態內容：

  1. 選取「即時資料」視窗中的動態內容，或是選取「文件」視窗中的預留位置。
  2. 選取「視窗＞繫結」，顯示「繫結」面板。
  3. 按一下「格式」欄中的向下鍵按鈕。

    如果您沒有看到向下鍵，請展開面板。

  4. 在「格式」彈出式選單中，選取您所要使用的資料格式類別。

    檢查確定該資料格式適用於您所要格式化的資料類型。例如，「貨幣」格式只適用於內含數值資料的動態資料。請注意，同一個資料只能套用一種格式。

  5. 在「即時資料」視窗或是瀏覽器中預覽頁面的內容，即可確定已正確套用您所指定的格式。

相關主題

  • 自訂現有的資料格式
  • 建立新的資料格式


自訂現有的資料格式

您可以自訂 Dreamweaver 的現有資料格式，或是建立您自己專屬的資料格式。

若要自訂資料格式：

  1. 在「設計」檢視中開啟含有動態資料的頁面。
  2. 選取您要自訂資料格式的動態資料。
  3. 選取「視窗＞繫結」，顯示「繫結」面板。

    會以標示的方式顯示所選取動態文字的繫結資料項目。

  4. 按一下「格式」欄中的向下鍵，展開可用資料格式的彈出式選單。

    如果您沒有看到向下鍵，請展開面板。

  5. 從彈出式選單中選取「編輯格式清單」。

    「編輯格式清單」對話方塊便會出現。

  6. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請參閱設定編輯格式清單對話方塊選項。

相關主題

  • 使用預先定義的資料格式
  • 建立新的資料格式


建立新的資料格式

您可以依照您想要顯示的動態資料類型，建立新的資料格式。

若要建立新的資料格式：

  1. 在「設計」檢視中開啟含有動態資料的頁面。
  2. 選取要建立自訂格式的動態資料。
  3. 選取「視窗＞繫結」，開啟「繫結」面板，然後按一下「格式」欄中的向下鍵。

    如果您沒有看到向下鍵，請展開面板。

  4. 從彈出式選單中選取「編輯格式清單」。

    「編輯格式清單」對話方塊便會出現。

  5. 按一下加號 (+) 按鈕，然後選取格式類型。
  6. 定義格式，然後按一下「確定」。
  7. 在「名稱」欄中輸入新格式的名稱。
  8. 按一下「確定」，關閉「編輯格式清單」對話方塊。

相關主題

  • 自訂現有的資料格式
  • 建立新的資料格式


建立資料集導覽連結

資料集導覽連結可讓使用者從一筆記錄移到下一筆記錄，或是從一組記錄移到下一組記錄。例如，當您完成一次顯示五筆記錄的頁面設計工作後，您可能會想要新增「下一頁」或「上一頁」的連結，讓使用者可以顯示後五筆或前五筆記錄。

若要建立資料集導覽連結，您可以使用「資料集導覽列」伺服器行為，或是建立自訂的資料集導覽列。

本節包含下列主題：

  • 使用「資料集導覽列」伺服器行為來建立導覽列
  • 建立自訂資料集導覽列

相關主題

  • 導覽資料庫資料集結果
  • 自訂資料集導覽列
  • 建立自訂資料集導覽列


使用「資料集導覽列」伺服器行為來建立導覽列

您可以使用「資料集導覽列」伺服器行為在單一作業中建立資料集導覽列。伺服器物件會將下列建置區塊加入至頁面中：

  • 含有文字或影像連結的 HTML 表格
  • 一組「移到」伺服器行為
  • 一組「顯示區域」伺服器行為

文字版的「資料集導覽列」外觀如下：

影像版的「資料集導覽列」外觀如下：

在頁面中置入導覽列之前，請檢查確定該頁面含有所要導覽的資料集，以及要用來顯示記錄的頁面版面。

當您在頁面中放置了導覽列之後，就可以使用 Dreamweaver 的設計工具，依據您個人的喜好來自訂該導覽列。您也可以在「伺服器行為」面板中按兩下「移到」和「顯示區域」伺服器行為，以編輯這兩項伺服器行為。

如果您想要使用 Dreamweaver 的設計工具和「伺服器行為」面板來建置各個區塊的導覽列，請參閱建立自訂資料集導覽列。

若要使用伺服器物件來建立資料集導覽列：

  1. 在「設計」檢視中，於頁面中要顯示導覽列的地方放置一個插入點。
  2. 會顯示「資料集導覽列」對話方塊 (「插入＞應用程式物件＞資料集導覽列」)。

    「插入資料集導覽列」對話方塊便會出現。

  3. 從「資料集」彈出式選單中選取您所要導覽的資料集。
  4. 在「顯示方式」區段中，選取頁面中導覽連結的顯示格式。使用「文字」選項會在頁面中放置文字連結，而使用「影像」選項則可讓您在頁面中使用圖形影像做為連結。

    在影像版的導覽列中，Dreamweaver 會使用其專屬的影像檔案。當您在頁面中放置導覽列之後，可以將這些影像更換為您個人想要使用的影像檔案。

  5. 按一下「確定」。

    Dreamweaver 會建立內含文字或影像連結的表格，可讓使用者點選以導覽所選取的資料集內容。顯示資料集中的第一筆記錄時，會隱藏「第一頁」和「上一頁」的連結或影像；顯示資料集中的最後一筆記錄時，則會隱藏「下一頁」和「最後一頁」的連結或影像。

    您可以使用 Dreamweaver 設計工具自訂導覽列的版面。

相關主題

  • 建立自訂資料集導覽列


建立自訂資料集導覽列

您可以建立自訂的資料集導覽列，以使用更複雜的版面和格式樣式 (與「資料集導覽列」伺服器物件使用的簡單表格所提供的版面和格式樣式相較)。

若要建立您自己的資料集導覽列，您必須：

  • 使用文字或影像設計導覽連結
  • 將這些連結放在設計檢視的頁面中
  • 為每個導覽連結指定個別的伺服器行為

若要了解更多有關設計自訂資料集導覽列的資訊，請參閱自訂資料集導覽列。如果您偏好使用 Dreamweaver 內建的「資料集導覽列」伺服器物件來建立導覽列，請參閱使用「資料集導覽列」伺服器行為來建立導覽列。

這個程序描述了如何為導覽連結指派個別的伺服器行為。

若要為資料集導覽連結指派伺服器行為：

  1. 在「設計」檢視中，選取頁面中您要當做是記錄導覽連結的文字或影像。
  2. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，然後按一下加號 (+) 按鈕。
  3. 從彈出式選單中選取「資料集分頁」，然後從所列出的伺服器行為中選取適合該連結的伺服器行為。

    如果資料集中含有數量龐大的資料時，使用者若按一下該連結，「移到最後一筆記錄」伺服器行為可能會花費一些時間才會執行。

  4. 在「資料集」彈出式選單中，選取內含記錄的資料集。
  5. 按一下「確定」。

    這時已將伺服器行為指派給導覽連結。

相關主題

  • 導覽資料庫資料集結果
  • 自訂資料集導覽列


依據資料集的結果顯示或隱藏區域

Dreamweaver 包含一套伺服器行為，可讓您依據資料集所傳回的結果來顯示或隱藏區域。若要了解更多有關「顯示區域」伺服器行為的資訊，以及如何使用它們來顯示或隱藏資料集結果，請參閱依據資料集結果顯示或隱藏區域。

若只在必要時顯示區域：

  1. 在「設計」檢視中，選取頁面中要顯示或隱藏的區域。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕。
  3. 從彈出式選單中選取「顯示區域」，然後從所列出的伺服器行為中選取其中一項。
  4. 按一下「確定」。

相關主題

  • 關於顯示資料庫記錄
  • 顯示多筆資料集結果
  • 使用重複區域伺服器行為建立表格


顯示多筆資料集結果

「重複區域」伺服器行為可以讓您在頁面中顯示資料集中的多筆記錄。所有動態資料選取範圍都可以轉變成重複區域。然而，最常見的區域是表格、表格列或一系列的表格列。

若要了解更多關於使用「重複區域」伺服器行為的資訊，請參閱顯示多筆資料集結果和使用重複區域伺服器行為建立表格。

若要建立重複區域：

  1. 在「設計」檢視中，選取含有動態內容的區域。

    選取的項目並無特定限制，可以包含表格、表格列，甚或是文字的段落都可以。

    若要精確地選取頁面中的區域，可以使用文件視窗左側角落上的標籤選取器。例如，如果該區域為表格列，請在頁面上的該表格列中按一下，然後按一下標籤選取器最右邊的 <tr> 標籤，以選取該表格列。

  2. 選取「視窗＞伺服器行為」，顯示「伺服器行為」面板。
  3. 按一下加號 (+) 按鈕，然後選取「重複區域」。

    「重複區域」對話方塊便會出現。

  4. 從彈出式選單中選取所要使用的資料集名稱。
  5. 指定每一個頁面中所要顯示的記錄筆數。
  6. 按一下「確定」。

    在「文件」視窗中，重複區域的四週會出現細細的灰色外框。在「即時資料」視窗 (「檢視＞即時資料」) 中，灰色的外框會消失不見，取而代之的是在展開的選取區域中顯示您所指定的記錄筆數。

相關主題

  • 關於顯示資料庫記錄
  • 依據資料集的結果顯示或隱藏區域
  • 使用重複區域伺服器行為建立表格


使用重複區域伺服器行為建立表格

「動態表格」伺服器物件可以讓您建立內含動態內容的表格，然後從單一對話方塊中套用「重複區域」行為。當您要同時將資料集中的動態內容填入一個表格中，並套用「重複區域」伺服器行為時，這個伺服器物件就特別有用。

注意

如果您使用的是 ASP.NET 的文件類型，則無法使用「動態表格」伺服器物件。若要建立內含動態內容和重複區域的表格，您必須以手動方式插入表格、從「繫結」面板中插入動態內容，然後視情況套用「重複區域」伺服器行為。如需詳細資訊，請參閱顯示多筆資料集結果。

若要建立動態表格：

  1. 若要插入動態表格：
    • 選取「插入＞應用程式物件＞動態資料＞動態表格」，以顯示「動態表格」對話方塊。
    • 從「插入」列的「應用程式」類別，在「動態資料」選單中選取「動態表格」按鈕。

    「動態表格」對話方塊便會出現。

  2. 從「資料集」彈出式選單中選取您要使用的資料集。
  3. 指定每一個頁面中所要顯示的記錄筆數。
  4. 依照需要輸入表格邊框、儲存格內距以及儲存格間距的數值。

    「動態表格」對話方塊會保存您所輸入的表格外框、儲存格內空白以及儲存格間距的數值。如果您正在處理要用到外觀類似的多個動態表格的專案時，您也可以輸入表格版面的數值，以進一步簡化頁面的開發工作。請注意，您可以在插入表格後，使用表格的「屬性」檢視窗來調整這些數值。

  5. 按一下「確定」。

    表格以及在相關資料集中所定義動態內容的預留位置便會插入到頁面中。

    在這個範例中，資料集內含四筆記錄：FIRSTNAME、LASTNAME、TITLE 以及 DEPARTMENT。表格的「標題」列填入了每一筆記錄項目的名稱。您可以使用任何敘述性文字來編輯標題，或是改用具有代表性的影像。


建立記錄計數器

記錄計數器可以讓使用者知道他們在一組特定記錄中的位置 (相對於傳回的記錄總數)。因此，記錄計數器可以大幅增加網頁的可用性，是一項相當有用的行為。

若要了解更多關於記錄計數器的資訊，請參閱記錄計數器。

本節包含下列主題：

使用資料集導覽狀態列物件建立記錄計數器

建立自訂記錄計數器


使用資料集導覽狀態列物件建立記錄計數器

「資料集導覽狀態」物件會在頁面中建立一個顯示目前記錄狀態的文字項目。

若要使用「資料集導覽狀態」伺服器物件：

  1. 將插入點置於您想要插入記錄計數器的位置。
  2. 選取「插入＞應用程式物件＞資料集導覽狀態」。

    「插入資料集導覽狀態」對話方塊便會顯示。

    從「資料集」彈出式選單中選取您要使用的資料集。

  3. 按一下「確定」。

    「資料集導覽狀態」伺服器物件便會插入一個文字記錄計數器，外觀類似於下圖所示：

    您可以使用 Dreamweaver 的頁面設計工具來自訂記錄計數器。

    當您在「即時資料」視窗或瀏覽器中進行檢視時，會顯示類似下圖中的計數器：


建立自訂記錄計數器

若要為頁面建立自訂的記錄計數器，您必須先建立頁面的資料集、含有動態內容的適當頁面版面，以及資料集導覽列。若要了解更多有關建立這些元素以及在頁面中新增這些元素的資訊，請參閱記錄計數器。一旦您在頁面中建立了上述元素，就可以建立自訂的記錄計數器。

這個範例會建立一個記錄計數器，其外觀類似於在前一節使用資料集導覽狀態列物件建立記錄計數器中建立的計數器。本範例中的記錄計數器外觀如下：

Displaying records StartRow thru EndRow of RecordSet.RecordCount.

在這個範例中，使用 Sans-serif 字體的文字代表的是即將插入頁面中的記錄計數器預留位置。

若要建立自訂的記錄計數器：

  1. 在「設計」檢視中，請在頁面上輸入計數器文字。您可以選用任意的文字。例如：
    Displaying records thru of.
  2. 將插入點置於文字字串的結尾處。
  3. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)。
  4. 按一下左上角的加號 (+) 按鈕，然後按一下「顯示記錄計數」。在這個子選單中，選取「顯示記錄總數」。會在頁面中插入「顯示記錄總數」行為，並且會在前述插入點的位置插入一個預留位置。會顯示如下的文字字串：
    Displaying records thru of {Recordset1.RecordCount}.
  5. 將插入點置於文字 records 之後，然後從「伺服器行為＞加號 (+) 按鈕＞記錄計數」面板中，選取「顯示起始記錄編號」。會顯示如下的文字字串：
    Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
  6. 現在，將插入點置於文字 thru 和 of 之間，然後從「伺服器行為＞加號 (+) 按鈕＞記錄計數」面板中，選取「顯示起始記錄編號」。會顯示如下的文字字串：
    Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of
{Recordset1.RecordCount}.
  7. 請在「即時資料」視窗 (「檢視＞即時資料」) 中檢視該頁面，以確認計數器功能可以正常運作，現在，計數器的外觀應該會類似於下面的範例：
    Displaying records 1 thru 8 of 40.

    如果結果頁面中有可以移到下一組資料的導覽連結，按一下該連結即可將記錄計數器更新如下所示：

    Showing records 9 thru 16 of 40.

「即時資料」視窗中無法使用連結。若要進行測試，您可以使用 Dreamweaver 中的「在瀏覽器中預覽」功能。請確定您已選取「偏好設定」中的「使用即時資料伺服器預覽」選項 (「編輯＞偏好設定＞在瀏覽器中預覽」(Windows) 或「Dreamweaver＞偏好設定＞在瀏覽器中預覽」(Macintosh))，然後選取「檔案＞在瀏覽器中預覽」。


參考

本節將提供這一章裡所介紹的下列面板、對話方塊和檢視窗的相關資訊：

  • 設定插入資料集導覽列對話方塊選項
  • 設定移到 (伺服器行為) 對話方塊選項
  • 設定重複區域對話方塊選項
  • 設定插入資料集導覽狀態對話方塊選項
  • 設定編輯格式清單對話方塊選項
  • 設定貨幣、數字或百分比對話方塊選項
  • 設定顯示目前頁碼對話方塊選項


設定插入資料集導覽列對話方塊選項

這個對話方塊的用途是要建立一個資料集導覽列，並加入您的頁面之中。

若要完成「插入資料集導覽列」對話方塊：

  1. 請選取要導覽的資料集。
  2. 選取文字或影像連結。

    在影像版的導覽列中，Dreamweaver 會使用其專屬的影像檔案。您可以依據個人的需求，在頁面中置入導覽列之後，使用自己的影像檔案來更換其中的影像。

  3. 按一下「確定」。

    Dreamweaver 會建立一個表格，其中含有當使用者按一下就可以移到所選取資料集的文字或影像。

相關主題

  • 使用「資料集導覽列」伺服器行為來建立導覽列
  • 建立資料集導覽連結


設定移到 (伺服器行為) 對話方塊選項

這個對話方塊的用途是要新增可讓使用者導覽資料集中各筆記錄的連結。

若要完成「移到」(伺服器行為) 對話方塊：

  1. 如果您尚未選取頁面中的任何項目，請從彈出式選單中選取一個連結。
  2. 選取含有要以頁面顯示記錄的資料集。

    注意

    如果資料集中含有數量龐大的資料時，使用者若按一下該連結，「移到最後一筆記錄」伺服器行為可能會花費一些時間才會執行。
  3. 按一下「確定」。

相關主題

  • 建立自訂資料集導覽列


設定重複區域對話方塊選項

這個對話方塊的用途是要建立並新增重複區域，以便在頁面中顯示多筆記錄。

若要完成「重複區域」對話方塊：

  1. 指定內含要在重複區域中顯示的資料之資料集。
  2. 指定每一個頁面中所要顯示的記錄筆數。

    如果您指定了每頁能夠顯示的有限記錄筆數，而所要求的記錄數目有可能超過這個指定的數目時，請新增一個記錄導覽連結，讓使用者能夠顯示其他記錄 (請參閱建立資料集導覽連結)。

  3. 按一下「確定」。

相關主題

  • 顯示多筆資料集結果


設定插入資料集導覽狀態對話方塊選項

這個對話方塊的用途是要在頁面中建立和新增記錄計數器。

若要完成這個對話方塊的選項：

  1. 請選取要追蹤的資料集。
  2. 按一下「確定」。

Dreamweaver 會在頁面中建立並加入記錄計數器。

相關主題

  • 使用資料集導覽狀態列物件建立記錄計數器


設定編輯格式清單對話方塊選項

這個對話方塊的用途是要建立新的資料格式，或是自訂現有的資料格式。

若要完成「編輯格式清單」對話方塊：

  1. 若要建立新的資料格式，請按一下加號 (+) 按鈕。
  2. 若要編輯現有的資料格式，請從清單中選取格式，然後按一下「編輯」。

    注意

    並不是所有的格式都有可供自訂的參數。
  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請參閱設定貨幣、數字或百分比對話方塊選項。

  4. 如果是建立一個新的格式，請指定新格式的名稱。
  5. 如果是修改現有的格式，您可以視情況需要，先變更該格式的名稱，然後在清單中按一下該名稱並進行修改。
  6. 若要刪除資料格式，請在清單中按一下格式，然後按一下減號 (-) 按鈕。
  7. 按一下「確定」，關閉「編輯格式清單」對話方塊。

相關主題

  • 自訂現有的資料格式
  • 建立新的資料格式


設定貨幣、數字或百分比對話方塊選項

這些對話方塊是用來定義資料格式。

若要完成「貨幣」、「數字」或「百分比」對話方塊：

  1. 請變更下列任何參數：
    • 小數點後所要顯示的數字數目
    • 是否要在分數之前加上前置的數字零
    • 決定負值是否要使用括號或負號來表示
    • 是否要使用群組位數
  2. 按一下「確定」。

相關主題

  • 設定編輯格式清單對話方塊選項
  • 自訂現有的資料格式
  • 建立新的資料格式


設定顯示目前頁碼對話方塊選項

這個對話方塊是用來在 ASP.NET 頁面中插入程式碼以顯示目前的資料集頁碼。

ASP.NET 中的資料集頁面是顯示在資料格或資料清單中的記錄子集。如果您決定只要在控制項中顯示 10 筆記錄，而資料集卻包含 24 筆記錄，那麼此資料集就有三個頁面 (分別包含 10 筆、10 筆和 4 筆記錄)。

若要顯示資料集頁面：

選取資料集，然後按一下「確定」。


在網頁中顯示 XML 資料

您可以使用 Macromedia Dreamweaver 8 建立會顯示 XML 資料的網頁，顯示 XML 資料包括擷取儲存在本機或遠端 XML 檔案中的資訊，並在網頁中呈現這項資訊。Dreamweaver 提供了顯示 XML 檔案資訊的方法，並且提供內建的 XSLT 物件及設計功能，讓您增強 XML 資料的呈現方式。

本章包含下列各節：

關於搭配網頁使用 XML 和 XSL

關於伺服器端 XSL 變形

關於用戶端 XSL 變形

關於 XML 資料和重複元素

關於預覽 XML 資料

執行伺服器上的 XSL 變形

在用戶端執行 XSL 變形

將樣式套用至 XSLT 片段

XSL 變形疑難排解


關於搭配網頁使用 XML 和 XSL

「可擴展標記語言」(XML) 是一種可以讓您建立資訊結構的語言。就像 HTML 一樣，XML 可以讓您使用標籤來建立資訊結構，但 XML 標籤並非和 HTML 標籤一樣是預先定義好的；不同的是，XML 可以讓您建立最適合用來定義您的資料結構的標籤。標籤會以巢狀的方式層層包覆，以建立父標籤和子標籤的綱要。如同大部分的 HTML 標籤，XML 綱要中的所有標籤都有開頭和結束標籤。

下面範例示範了 XML 檔案的基本結構：

<?xml version="1.0">
<mybooks>
   <book bookid="1">
      <pubdate>03/01/2004</pubdate>
      <title>Displaying XML Data with Macromedia Dreamweaver</title>
      <author>Charles Brown</author>
   </book>
   <book bookid="2">
      <pubdate>04/08/2004</pubdate>
      <title>Understanding XML</title>
      <author>John Thompson</author>
   </book>
</mybooks>

在這個範例中，每一個父標籤 <book> 都含有三個子標籤：<pubdate>、<title> 和 <author>。然而每一個 <book> 標籤同時也是 <mybooks> 標籤的子標籤，後者在綱要中高了一個層級。您可以使用任何您喜歡的方式來命名及建立 XML 標籤的結構，前提是要以巢狀方式來建立標籤結構，並替開頭的標籤指定一個相對應的結尾標籤。

XML 文件不包含任何格式─它們只是結構化資訊的容器。只要您有 XML 綱要，就可以使用「可擴展樣式表語言」(XSL) 來顯示這項資訊。如同「階層樣式表」(CSS) 可讓您格式化 HTML 的方式一般，XSL 可讓您格式化 XML 資料。您可以定義 XSL 檔案中的樣式、頁面元素、版面等，並且將它附加到 XML 檔案，以便當使用者在瀏覽器中檢視 XML 資料時，該資料可以根據您在 XSL 檔案中的定義進行格式化。將內容 (XML 資料) 和呈現方式 (由 XSL 檔案定義) 完全分開，讓您可以有效控制資訊在網頁上的顯示方式。基本上，XSL 是 XML 的呈現技術，而其主要輸出是 HTML 網頁。

「可擴展樣式表語言變形」(XSLT) 是 XSL 的一套子語言，讓您在網頁上顯示 XML 資料，並讓 XML 資料 (和 XSL 樣式一起)「變形」成可讀、樣式化且以 HTML 格式資訊。您可以使用 Dreamweaver 建立 XSLT 頁面，以便使用應用程式伺服器或瀏覽器來執行 XSL 變形。當您執行伺服器端的 XSL 變形時，伺服器會負責將 XML 和 XSL 變形，並顯示在頁面上。當您執行用戶端變形時，瀏覽器 (例如 Internet Explorer) 就會負責這項工作。

您最後採取的方法 (伺服器端變形與用戶端變形) 要視您嘗試要達到的最終結果、您可用的技術、您的 XML 原始檔的存取權層級以及其他因素而定。這兩種方式都有其優點與限制。舉例來說，伺服器端變形適用於所有伺服器，而用戶端變形則受限於最新的瀏覽器 (Internet Explorer 6、Netscape 8、Mozilla 1.8 和 Firefox 1.0.2)。伺服器端變形能讓您從自己的伺服器或網路上任何地方動態顯示 XML 資料，而用戶端變形則必須使用存放在您網路伺服器上本機所裝載的 XML 資料。此外，伺服器端變形要求您將網頁部署至已設定完成的應用程式伺服器，但是用戶端變形只要求至網站伺服器的存取。

如需詳細資訊，請參閱關於伺服器端 XSL 變形和關於用戶端 XSL 變形。


關於伺服器端 XSL 變形

Dreamweaver 提供了建立 XSLT 頁面讓您執行伺服器端 XSL 變形的方法，當應用程式伺服器執行 XSL 變形時，包含 XML 資料的檔案可以存在於您自己的伺服器上，或網路上的其他地方。此外，任何瀏覽器都可以顯示變形的資料。然而，部署伺服器端變形的頁面有些複雜，需要您先存取至應用程式伺服器。

當使用伺服器端 XSL 變形時，您可以用 Dreamweaver 來建立 XSLT 頁面以產生完整的 HTML 文件 (完整的 XSLT 頁面)，或產生部份 HTML 文件的 XSLT 片段。完整的 XSLT 頁面類似於一般的 HTML 頁面，它包含一個 <body> 標籤和一個 <head> 標籤，並讓您將 HTML 和 XML 資料組合顯示在頁面上。XSLT 片段是獨立文件使用的程式碼，可以顯示格式化的 XML 資料。和完整的 XSLT 頁面不同的是，它是一個獨立的檔案，不包含 <body> 或 <head> 標籤。如果您想要顯示專屬頁面上的 XML 資料，就要建立一個完整的 XSLT 頁面，然後將您的 XML 資料繫結到該頁面。另一方面，如果想要將 XML 資料顯示在現有動態頁面上的某一特定區段 (例如，運動用品商店的動態網頁，頁面的另一端顯示了來自 RSS 反饋檔案的比賽分數)，您必須建立一個 XSLT 片段，並將參考插入至動態頁面中。較普遍的情況是，建立 XSLT 片段，然後使用它們來結合其他動態網頁以顯示 XML 資料。

建立這類型頁面的第一步，就是建立 XSLT 片段：它是一個獨立的檔案，包含版面、格式，以及您最後想要顯示在動態網頁上的 XML 資料。建立 XSLT 片段後，就可以將參考插入動態網頁中的 XSLT 片段。(例如，PHP 或 Macromedia ColdFusion 網頁)。插入的指向 XSLT 片段的參照其運作方式很類似於伺服器端包含 (SSI)─已格式化的 XML 資料 (片段) 會位於另一個檔案中，當您在「設計」檢視中時，動態網頁上就會顯示片段的預留位置。當瀏覽器要求內含片段參照的動態網頁時，伺服器就會處理內含的指示並建立一份新的文件，在這份文件中所顯示的已不再是預留位置，而是片段的已格式化內容。

您可以使用 XSL 變形伺服器行為將動態網頁的參考資料插入 XSLT 片段。插入參考時，Dreamweaver 會在含有執行階段圖庫檔案的網站根資料夾中產生一個 includes/MM_XSLTransform/ 資料夾。當指定的 XML 資料進行變形時，應用程式伺服器會使用此檔案內所定義的函數。該檔案負責擷取 XML 資料和 XSLT 片段，執行 XSL 變形和將結果輸出於網頁。

包含 XSLT 片段的檔案、包含資料的 XML 檔案，以及所產生的執行階段圖庫檔案都必須位於伺服器上，頁面才能正確顯示 (如果您選取了遠端 XML 檔案做為資料來源，例如，一個來自 RSS 反饋的檔案，這個檔案當然也必須位於網際網路上的某個位置)。

您還可以使用 Dreamweaver 建立完整的 XSLT 頁面，以與伺服器端變形搭配使用。完整的 XSLT 頁面作用和 XSLT 片段一樣，只有當您使用 XSL 變形伺服器行為將參考插入完整的 XSLT 頁面時，才能插入 HTML 頁面的完整內容。因此，在您插入參考前，必須先清除所有 HTML 的動態網頁 (作為容器頁面的 .cfm、.php、.asp 或 .net 網頁)。

Dreamweaver 支援 ColdFusion、ASP、ASP.NET 和 PHP 網頁的 XSL 變形。

注意

您的伺服器必須正確設定才能執行伺服器端變形。如需詳細資訊，請聯絡您的伺服器管理員，或瀏覽 www.macromedia.com/go/dw_xsl_tw。

如需有關建立伺服器端 XSL 變形的程序，請參閱執行伺服器上的 XSL 變形。

相關主題

  • 關於搭配網頁使用 XML 和 XSL
  • 關於用戶端 XSL 變形
  • 關於預覽 XML 資料
  • 將樣式套用至 XSLT 片段


關於用戶端 XSL 變形

您也可以在用戶端執行 XSL 變形，而不使用應用程式伺服器。只需使用 Dreamweaver 建立完整的 XSLT 頁面就能達成這個目的，不過，用戶端變形會要求您操作 XML 檔案 (其中包含想要顯示的資料)。此外，用戶端變形只適用於最新的瀏覽器 (Internet Explorer 6、Netscape 8、Mozilla 1.8 和 Firefox 1.0.2)。如需有關瀏覽器是否支援 XSL 變形的詳細資訊，請參閱 www.w3schools.com/xsl/xsl_browsers.asp。

首先建立一個完整的 XSLT 頁面，然後附加一個 XML 資料來源 (Dreamweaver 在您建立該新頁面時，便會提示您附加資料來源)。您可以使用 Dreamweaver 從頭開始建立一個 XSLT 頁面，或將現有的 HTML 頁面轉成 XSLT 頁面。當您將現有的 HTML 頁面轉成 XSLT 頁面時，必須使用「繫結」面板來附加 XML 資料來源 (「視窗＞繫結」)。

一旦建立 XSLT 頁面後，必須在 XML 檔案中插入指向 XSLT 頁面的參考，藉此將頁面連結到包含 XML 資料的 XML 檔案中 (很像您在 HTML 頁面的 <head> 區段中插入指向外部 CSS 樣式表的參考)。您的網頁瀏覽者必須在瀏覽器中檢視 XML 檔案 (而非 XSLT 頁面)。當您的網頁瀏覽者檢視該頁面時，瀏覽器會執行 XSL 變形並顯示由連結的 XSLT 頁面進行格式化的 XML 資料。

連結的 XSLT 與 XML 頁面之間的關係在概念上很相似，但卻和外部 CSS/HTML 頁面模型不同。當您已有含有內容 (例如文字) 的 HTML 頁面時，便要使用外部樣式表將該內容格式化。HTML 頁面會決定內容，而使用者一律看不見的外部 CSS 程式碼會決定呈現方式。如果使用 XSLT 和 XML，情況就會相反。XML 檔案 (使用者一律看不見其原始形式) 會決定內容，而 XSLT 頁面將決定呈現方式。XSLT 頁面包含標準的 HTML 頁面通常都會包含的表格、版面、圖像等。當使用者在瀏覽器中檢視 XML 檔案時，XSLT 頁面會將該內容格式化。

當您使用 Dreamweaver 來連結 XSLT 頁面至 XML 頁面時，Dreamweaver 會為您將適當的程式碼插入 XML 頁面的上方。如果您擁有所連結的 XML 頁面 (也就是說，如果 XML 檔案就位在您的網路伺服器上)，那麼您只需要使用 Dreamweaver 來插入連結兩個頁面的適當程式碼。當您擁有 XML 檔案時，用戶端便能完全動態執行 XSL 變形。也就是說，只要您更新 XML 檔案中的資料時，任何使用連結的 XSLT 頁面的 HTML 輸出都會自動隨新資訊更新。

注意

您用來進行用戶端變形的 XML 和 XSL 檔案，必須位於相同的目錄下。如果不是，瀏覽器將會讀取 XML 檔案，並尋找變形的 XSLT 頁面，但卻無法找到在 XSLT 頁面中相關連結所定義的資源 (樣式表、影像等)。

如果您未擁有所連結的 XML 頁面 (舉例來說，如果您想要使用來自網路以外某處的 RSS 反饋的 XML 資料)，那麼流程就有點複雜了。若要使用來自外部來源之 XML 資料以執行用戶端變形，您必須先將 XML 來源檔案下載至 XSLT 頁面的相同目錄中。一旦 XML 頁面在您的本機網站中，您就可以使用 Dreamweaver 來加入連結 XML 頁面至 XSLT 頁面的適當程式碼，然後將兩個頁面 (下載的 XML 檔案和連結的 XSLT 頁面) 公佈到您的網路伺服器。當使用者在瀏覽器中檢視 XML 頁面時，XSLT 頁面會將該內容格式化，如同先前的範例。

在來自外部來源的 XML 資料上執行用戶端 XSL 變形的缺點就是，XML 資料只有部分是「動態的」。您所下載和更改的 XML 檔案只是存在於網路上其他地方的檔案「快照」。如果網路外的原始 XML 檔案變更了，您就必須再次下載該檔案，將它連結到 XSLT 頁面，重新公佈 XML 檔案到您的網路伺服器。瀏覽器只會呈現從您的網路伺服器上的 XML 檔案接收的資料，而非包含在原始 XML 來源檔案中的資料。

如需有關建立用戶端 XSL 變形的程序，請參閱在用戶端執行 XSL 變形。

相關主題

  • 關於搭配網頁使用 XML 和 XSL
  • 關於伺服器端 XSL 變形
  • 關於預覽 XML 資料
  • 將樣式套用至 XSLT 片段


關於 XML 資料和重複元素

「重複區域」XSLT 物件可以讓您在頁面內顯示來自 XML 檔案的重複元素。任何包含 XML 資料預留位置的區域都可以變成重複區域。然而，最常見的區域為表格、表格列，或是一系列的表格列。

下面範例說明「重複區域」XSLT 物件是如何套用到表格列，以顯示某家餐廳的菜單資訊。起始列會顯示 XML 綱要的三種不同要素：項目、說明和價格。當「重複區域」XSLT 物件套用到表格列，且應用程式伺服器或瀏覽器處理了頁面之後，表格就會重複顯示，每一個新表格列中都插入唯一的資料。

當您套用「重複區域」XSLT 物件至「文件」視窗時，重複區域的四周會出現細細的灰色外框。當您在瀏覽器中預覽您的成果時 (「檔案＞在瀏覽器中預覽」)，灰色的外框會消失不見，取而代之的是在展開的選取區域中，顯示您在 XML 檔案中 (如先前的描述) 指定的重複區域。

您可能也注意到，當您加入「重複區域」XSLT 物件到該頁面時，Dreamweaver 會截斷「文件」視窗中 XML 資料預留位置的長度。這是因為 Dreamweaver 會更新 XML 資料預留位置的 XPath，以便使它能相對於重複元素的路徑。

舉例來說，下面的程式碼適用於包含兩個動態預留位置的表格，不需套用「重複區域」XSLT 物件至該表格：

<table width="500" border="1">
   <tr>
      <td><xsl:value-of select="rss/channel/item/title"/></td>
   </tr>
   <tr>
      <td><xsl:value-of select="rss/channel/item/description"/></td>
   </tr>
</table>

下列程式碼適用於套用「重複區域」XSLT 物件的相同表格：

<xsl:for-each select="rss/channel/item">
   <table width="500" border="1">
      <tr>
         <td><xsl:value-of select="title"/></td>
      </tr>
      <tr>
         <td><xsl:value-of select="description"/></td>
      </tr>
   </table>
</xsl:for-each>

在先前的範例中，Dreamweaver 已自動更新落於「重複區域」(標題 & 說明) 內項目的 XPath，與成對的 <xsl:for-each> 標籤內的 Xpath 相對，而不是完整的文件。

Dreamweaver 在其他情況下也會產生相對於內容的 XPath 運算式。舉例來說，如果您將 XML 資料預留位置拖曳至已套用「重複區域」XSLT 物件的表格中，Dreamweaver 會自動顯示 XPath，與成對的 <xsl:for-each> 標籤內現有的 Xpath 相對。

若要瞭解套用「重複區域」XSLT 物件的方式，請參閱顯示重複的 XML 元素。

相關主題

  • 關於搭配網頁使用 XML 和 XSL


關於預覽 XML 資料

當您使用「在瀏覽器中預覽」(「檔案＞在瀏覽器中預覽」) 來預覽，已插入在 XSLT 片段或完整的 XSLT 頁面的 XML 資料時，執行 XSL 變形的引擎便會因情況而有所不同。對於含有 XSLT 片段的動態網頁而言，一律是由應用程式伺服器來執行變形。在其他時候，可能是由 Dreamweaver 或瀏覽器來執行變形。

下面的表格概述使用「在瀏覽器中預覽」時的情況，以及執行變形的引擎：

在瀏覽器中預覽的頁面類型 | 執行資料變形的引擎
包含 XSLT 片段的動態網頁 | 應用程式伺服器
XSLT 片段或完整的 XSLT 頁面 | Dreamweaver
含連結的 XML 檔案插入到完整的 XSLT 頁面 | 瀏覽器

下面的主題所提供的指導方針，能幫助您根據需要來決定合適的預覽方法：

  • 預覽伺服器端變形的頁面
  • 預覽用戶端變形的頁面
  • 預覽完整的 XSLT 頁面和 XSLT 片段

預覽伺服器端變形的頁面

在伺服器端變形的情況下，網頁瀏覽者最後看見的內容是由您的應用程式伺服器所執行變形而成的。建立與伺服器端變形搭配使用的 XSLT 和動態網頁時，建議您隨時預覽包含 XSLT 片段的動態網頁，而不是 XSLT 片段本身。在前面的情況中，您可以使用應用程式伺服器，確認您所預覽的內容會和您的網頁瀏覽者在瀏覽網頁時所看見的一樣。在後者的情況下，Dreamweaver 會執行變形，並提供一些不太一致的內容。建立 XSLT 片段時，您可以使用 Dreamweaver 進行預覽，但如果您在插入 XSLT 片段後使用應用程式伺服器來預覽動態網頁，便能看到最準確的資料呈現結果。

預覽用戶端變形的頁面

在用戶端變形的情況下，網頁瀏覽者最後看見的內容是由您的瀏覽器所執行變形而成的。您可以從 XML 檔案新增連結至 XSLT 頁面來完成此程序。如果您在 Dreamweaver 開啟 XML 檔案，並且在瀏覽器中預覽該檔案，瀏覽器會被迫載入 XML 檔案並執行變形。如此一來，您預覽的內容和網頁瀏覽者看見的一樣了。

這種方法的其中一個缺點，是讓您難以進行網頁除錯，因為瀏覽器會進行 XML 變形並且在內部產生 HTML。如果您選取瀏覽器的「檢視原始檔」選項來進行所產生之 HTML 的除錯，就只能看見瀏覽器接收的原始 XML，而非負責呈現頁面的完整 HTML (標籤、樣式等)。若要在檢視原始程式碼時看見完整的 HTML，您必須改在瀏覽器中預覽 XSLT 頁面。

預覽完整的 XSLT 頁面和 XSLT 片段

建立完整的 XSLT 頁面和 XSLT 片段時，您會想要預覽您的成果，以便確認資料顯示正確。如果您使用「在瀏覽器中預覽」來顯示完整的 XSLT 頁面或 XSLT 片段，Dreamweaver 便會使用內建變形引擎來執行變形。此方法可快速得到結果，讓您更輕鬆快速地進行網頁的建立和除錯。在瀏覽器中選取「檢視來源檔」還能讓您檢視完整的 HTML (標籤、樣式等)。

注意

不論您要使用用戶端或伺服器端來進行資料變形，開始建立 XSLT 頁面時最適合使用這種方法。

相關主題

  • 關於搭配網頁使用 XML 和 XSL
  • 關於伺服器端 XSL 變形
  • 關於用戶端 XSL 變形
  • 將樣式套用至 XSLT 片段


執行伺服器上的 XSL 變形

您可以使用 Dreamweaver 來建立用於動態網頁的 XSLT 頁面或 XSLT 片段。完整的 XSLT 頁面是指在變形時產生一個完整的 HTML 頁面；而 XSLT 片段則是放置在另一份文件中的一段程式碼，變形時就會顯示 XML 資料。

Macromedia 建議您在進行下列程序前，先閱讀關於伺服器端 XSL 變形。

注意

您的伺服器必須正確設定才能執行伺服器端變形。如需詳細資訊，請聯絡您的伺服器管理員，或瀏覽 www.macromedia.com/go/dw_xsl_tw。

本節包含下列主題：

  • 執行伺服器端 XSL 變形的流程
  • 建立 XSLT 頁面
  • 將 HTML 頁面轉換成 XSLT 頁面
  • 附加 XML 資料來源
  • 顯示 XSLT 頁面中的 XML 資料
  • 顯示重複的 XML 元素
  • 編輯重複區域 XSLT 物件
  • 在動態網頁中插入 XSLT 片段
  • 從動態網頁中刪除 XSLT 片段
  • 編輯 XSL 變形伺服器行為
  • 使用參數進行 XSL 變形
  • 建立條件 XSLT 區域
  • 編輯條件區域 XSLT 物件
  • 插入 XSL 註解


執行伺服器端 XSL 變形的流程

本章節提供您執行伺服器端 XSL 變形所需遵循的步驟清單，您可以參考文件中詳述每一道程序的部分。

Macromedia 建議您在建立顯示 XML 資料的頁面前，先閱讀關於搭配網頁使用 XML 和 XSL、關於伺服器端 XSL 變形和關於用戶端 XSL 變形。

執行伺服器端的 XSL 變形，請遵循下面的步驟：

  • 設定 Dreamweaver 網站。請參閱設定 Dreamweaver 網站。
  • 選擇伺服器技術，並設定應用程式伺服器。請參閱設定應用程式伺服器。
  • 測試該應用程式伺服器以確認能正常運作。例如，建立一個要求處理的頁面，然後確定應用程式的確有處理該頁面。如需有關操作的教學課程，請瀏覽 www.macromedia.com/go/dw_xsl_tw。
  • 請執行下列其中一項作業：
    • 在您的 Dreamweaver 網站建立一個 XSLT 片段或完整的 XSLT 頁面。請參閱建立 XSLT 頁面。
    • 將現有的 HTML 頁面轉成完整的 XSLT 頁面。請參閱將 HTML 頁面轉換成 XSLT 頁面。
  • 如果程序尚未完成，請將 XML 資料來源附加至頁面。請參閱附加 XML 資料來源。
  • 將您的 XML 資料繫結至 XSLT 片段或完整的 XSLT 頁面。請參閱顯示 XSLT 頁面中的 XML 資料。
  • 如果適當的話，請新增「重複區域」XSLT 物件至包含 XML 資料預留位置的表格或表格列。請參閱顯示重複的 XML 元素。
  • 請執行下列其中一項作業：
    • 使用 XSL 變形伺服器行為以將參考資料插入至動態網頁的 XSLT 片段。請參閱在動態網頁中插入 XSLT 片段。
    • 刪除動態頁面中所有的 HTML 程式碼，然後使用「XSL 變形」伺服器行為，以將參考插入在動態頁面的完整 XSLT 頁面中。
  • 將動態網頁和 XSLT 片段 (或完整的 XSLT 頁面) 公佈到您的應用程式伺服器。如果您使用本機的 XML 檔案，您也需要將該檔案公佈出來。
  • 在瀏覽器中檢視動態網頁。當您這麼做時，應用程式伺服器會變形 XML 資料、將其插入動態頁面中，然後在瀏覽器中顯示。


建立 XSLT 頁面

您可以建立讓您在網頁上顯示 XML 資料的 XSLT 頁面。您也可以建立完整的 XSLT 頁─一個包含 <body> 標籤和 <head> 標籤的 XSLT 頁面─或建立一個 XSLT 片段。當您建立 XSLT 片段時，就是建立一個不包含 body 或 head 標籤的獨立檔案─一個稍後可以插入動態網頁中的簡單程式碼。

注意

如果您要從現有的 XSLT 頁面開始著手，而且需要附加 XML 資料來源，請參閱附加 XML 資料來源。

建立 XSLT 頁面：

  1. 選取「檔案＞開新檔案」。
  2. 在「新增文件」對話方塊的「一般」索引標籤上，從「分類」欄中選取「基本」頁面，然後請執行下列其中一項作業：
    • 從「基本」頁面欄中選取「XSLT (整個頁面)」，以建立完整的 XSLT 頁面。
    • 從「基本」頁面欄中選取「XSLT (片段)」，以建立 XSLT 片段。
  3. 按一下「建立」。

    「尋找 XML 來源」對話方塊便會出現，要求您附加 XML 資料來源。

  4. 請執行下列其中一項作業：
    • 選取「在我的電腦或區域網路上附加本機檔案」，按一下「瀏覽」按鈕，瀏覽至位於電腦上的本機 XML 檔案，然後按一下「確定」。
    • 選取「在 Internet 上附加遠端檔案」，輸入位於網際網路上的 XML 檔案的 URL (例如來自 RSS 反饋的檔案)，然後按一下「確定」。

      注意

      按一下取消按鈕將產生一個沒有附加 XML 資料來源的新 XSLT 頁面。如需有關附加 XML 資料來源的詳細資訊，請參閱附加 XML 資料來源。

    Dreamweaver 會以 XML 資料來源的綱要填入「繫結」面板。

    下面的表格說明了綱要內可能會出現的各種元素：

    元素

    代表

    細節

    <>

    必要的非重複 XML 元素

    只在其父節點內出現一次的元素

    <>+

    重複的 XML 元素

    在其父節點內出現一或多次的元素

    <>?

    選擇性的 XML 元素

    在其父節點內出現零或多次的元素

    粗體的元素節點

    目前的內容元素

    插入點位在重複區域內的一般重複元素

    @

    XML 屬性

  5. 以 .xsl 或 .xslt 的副檔名 (預設值是 .xsl) 來儲存您新建立的頁面 (「檔案＞儲存檔案」)。

相關主題

  • 顯示 XSLT 頁面中的 XML 資料
  • 關於搭配網頁使用 XML 和 XSL
  • 執行伺服器上的 XSL 變形
  • 在用戶端執行 XSL 變形


將 HTML 頁面轉換成 XSLT 頁面

您也可以將現有的 HTML 頁面轉換成 XSLT 頁面。例如，如果您已經預先設計好要加入 XML 資料的靜態網頁，便可以將該頁面轉換成 XSLT 頁面，而不需建立 XSLT 頁面和從頭開始重新設計頁面。

將現有的 HTML 頁面轉換成 XSLT 頁面：

  1. 開啟您想要轉換的 HTML 頁面。
  2. 選取「檔案＞轉換＞XSLT 1.0」。

    Dreamweaver 會在「文件」視窗中開啟該頁面的複本。新的頁面為 XSL 樣式表，儲存的副檔名為 .xsl。

相關主題

  • 建立 XSLT 頁面


附加 XML 資料來源

如果您從現有的 XSLT 頁面開始著手，或如果您在使用 Dreamweaver 建立新 XSLT 頁面時沒有附加 XML 資料來源，便需要使用「繫結」面板來附加 XML 資料來源。

附加 XML 資料來源：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下 XML 連結。

    注意

    您也可以按一下「繫結」面板的右上角的「來源」連結，以新增 XML 資料來源。
  2. 請執行下列其中一項作業：
    • 選取「在我的電腦或區域網路上附加本機檔案」，按一下「瀏覽」按鈕，瀏覽至位於電腦上的本機 XML 檔案，然後按一下「確定」。
    • 選取「在 Internet 上附加遠端檔案」，輸入位於網際網路上的 XML 檔案的 URL (例如來自 RSS 反饋的檔案)。
  3. 按一下「確定」以關閉「尋找 XML 來源」對話方塊。

    Dreamweaver 會以 XML 資料來源的綱要填入「繫結」面板。如需有關綱要中符號的指南，請參閱建立 XSLT 頁面。


顯示 XSLT 頁面中的 XML 資料

一旦建立了 XSLT 頁面且附加 XML 資料來源，您就可以將資料繫結到該頁面。

顯示 XML 資料：

  1. 開啟有附加 XML 資料來源的 XSLT 頁面。如需相關說明，請參閱建立 XSLT 頁面。
  2. (選擇性) 選取「插入＞表格」，在頁面中加入表格。表格可以協助您組織 XML 資料。如需詳細資訊，請參閱以表格呈現內容。

    注意

    在大部分情況下，您需要使用「重複區域」XSLT 物件以便在頁面上顯示重覆 XML 元素。如果發生這種情況，您可以建立只包含一或多欄的單列表格，或者，如果想要加入表格標題，可以建立只有兩列的表格。如需詳細資訊，請參閱顯示重複的 XML 元素。
  3. 在「繫結」面板中，選取某個 XML 元素，然後將它拖曳到您要在頁面上插入資料的地方。

    XML 資料預留位置便會出現在頁面上，而預留位置會反白標示並包含在大括號之中。預留位置會使用 XPath (XML 路徑語言) 語法，以描述該 XML 綱要的階層式結構。舉例來說，如果您將子元素“title”拖曳到頁面上，而這個元素具有父元素“rss”、“channel”和“item”那麼此動態內容預留位置的語法就會是 {rss/channel/item/title}。

    一旦頁面上出現 XML 資料預留位置，您就可以在該位置上按兩下以開啟「XPath 運算式建立器」。「XPath 運算式建立器」能讓您將選取的資料格式化，或從 XML 綱要選取其他項目。如需詳細資訊，請按一下「XPath 運算式建立器」中的「說明」按鈕。

  4. (選擇性) 選取一個 XML 資料預留位置，並將樣式套用至此位置以將樣式套用至您的 XML 資料中，就像其他使用「屬性」檢視窗或「CSS 樣式」面板的內容一樣。或者，您可以使用「設計階段樣式表」以將樣式套用至 XSLT 片段。每一種方法都有其優點與限制。如需詳細資訊，請參閱將樣式套用至 XSLT 片段。
  5. 在瀏覽器中預覽您的成果 (「檔案＞在瀏覽器中預覽」)

    注意

    當您使用「在瀏覽器中預覽」來預覽您的成果時，Dreamweaver 不會在使用應用程式伺服器的情況下執行內部 XSL 變形。如需詳細資訊，請參閱關於預覽 XML 資料。

相關主題

  • 顯示重複的 XML 元素
  • 在動態網頁中插入 XSLT 片段
  • 關於搭配網頁使用 XML 和 XSL
  • 執行伺服器上的 XSL 變形


顯示重複的 XML 元素

「重複區域」XSLT 物件可以讓您在網頁中顯示來自 XML 資料來源的重複元素。例如，如果您是從新聞反饋來顯示文章標題和說明，而該新聞反饋包含 10 - 20 篇文章，則 XML 檔案中的每一個標題和說明都可能會是重複元素的子元素。

「設計」檢視中任何含有 XML 資料預留位置的區域都可以變成重複區域，然而，最常見的區域是表格、表格列或一系列的表格列。

如要瞭解更多有關「重複區域」XSLT 物件處理 XML 資料的方式，請參閱關於 XML 資料和重複元素。

顯示重複的 XML 元素：

  1. 在「設計」檢視中，選取含有一或多個 XML 資料預留位置的區域。

    選取的項目並無特定限制，可以包含表格、表格列，甚或是文字的段落都可以。

    提示

    若要精確地選取頁面上的某個區域，可以使用「文件」視窗左下角的標籤選取器。例如，如果這個區域是一個表格，請在頁面上的表格內按一下，然後按一下標籤選取器中的 <table> 標籤。
  2. 請執行下列其中一項作業
    • 選取「插入＞XSLT 物件＞重複區域」。
    • 在「插入」列的 XSLT 類別中，按一下「重複區域」按鈕。
  3. 在「XPath 運算式建立器」中，選取以小加號標示的重複元素。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

  4. 按一下「確定」。

    在「文件」視窗中，重複區域的四週會出現細細的灰色外框。當您在瀏覽器中預覽您的成果時 (「檔案＞在瀏覽器中預覽」)，灰色的外框會消失不見，取而代之的是在展開的選取區域中，顯示您在 XML 檔案中指定的重複區域。

    您可能也注意到，當您增加「重複區域」XSLT 物件到頁面時，Dreamweaver 會截斷「文件」視窗中 XML 資料預留位置的長度。這是因為 Dreamweaver 會更新 XML 資料預留位置的 XPath，以便使它能相對於重複元素的路徑。

    如需詳細資訊，請參閱關於 XML 資料和重複元素。

相關主題

  • 編輯重複區域 XSLT 物件
  • 關於搭配網頁使用 XML 和 XSL
  • 執行伺服器上的 XSL 變形
  • 設定 XPath 運算式建立器 (動態文字) 對話方塊選項


編輯重複區域 XSLT 物件

在區域中加入「重複區域」XSLT 物件之後，您可以使用「屬性」檢視窗來進行變更。

編輯重複區域 XSLT 物件：

  1. 按一下圍繞在重複區域外的灰色標籤，以選取此物件。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，按一下「選取」文字欄位旁的動態圖示。
  3. 在「XPATH 運算式建立器」中進行變更，然後按一下「確定」。

相關主題

  • 顯示重複的 XML 元素
  • 設定 XPath 運算式建立器 (重複區域) 對話方塊選項
  • 關於搭配網頁使用 XML 和 XSL
  • 執行伺服器上的 XSL 變形


在動態網頁中插入 XSLT 片段

一旦建立 XSLT 片段後，您便可以使用「XSL 變形」伺服器行為，將此片段插入動態網頁中。當您在頁面中加入伺服器行為並在瀏覽器中檢視頁面時，應用程式伺服器就會執行變形，以顯示來自所選 XSLT 片段的 XML 資料。Dreamweaver 支援 ColdFusion、ASP、ASP.NET 或 PHP 網頁的 XSL 變形。

注意

如果您想要在動態網頁中插入整個 XSLT 頁面的內容，程序也是完全一樣的。在使用「XSL 變形」伺服器行為將插入完整的 XSLT 頁面前，請先刪除該動態網頁的所有 HTML 程式碼。如需詳細資訊，請參閱關於伺服器端 XSL 變形。

在網頁中插入 XSLT 片段：

  1. 開啟現有的 ColdFusion、ASP、ASP.NET 或 PHP 網頁。
  2. 在「設計」檢視中，將插入點放在您要插入 XSLT 片段的地方。

    注意

    插入 XSLT 片段時，在頁面上放置插入點之後，應該一律要按一下「顯示程式碼和設計檢視」按鈕，這樣就可以確認插入點是位於正確的位置。如果插入點沒有位於正確的位置，您可能需要按一下「程式碼」檢視中的某個地方，以便將插入點放在您要的位置。
  3. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下「加號」(+) 按鈕，然後選取「XSL 變形」。

  4. 在「XSL 變形」對話方塊中，按一下「瀏覽」按鈕，然後瀏覽 XSLT 片段或整個 XSLT 網頁。如需詳細資訊，請參閱建立 XSLT 頁面。

    Dreamweaver 會自動在旁邊的文字欄位中，填入附加至指定片段的 XML 檔案的路徑或 URL。若要變更這項設定，請按一下「瀏覽」按鈕，瀏覽至另一個檔案。

  5. (選擇性) 按一下「加號」(+) 按鈕，以新增一個 XSLT 參數。如需詳細資訊，請參閱使用參數進行 XSL 變形。
  6. 按一下「確定」。

    Dreamweaver 會將參考插入該頁面中的 XSLT 片段。您無法在這裡編輯 XSLT 片段，您可以按兩下 XSLT 片段，以開啟它的來源檔案及進行編輯。

    Dreamweaver 還會在包含執行階段圖庫檔案的網站根資料夾中，建立一個 includes/MM_XSLTransform/ 資料夾。應用程式伺服器會使用此檔案內所定義的函數來執行變形。如需詳細資訊，請參閱關於伺服器端 XSL 變形。

  7. 將動態網頁上傳到伺服器 (「網站＞上傳」)。當 Dreamweaver 提供可以讓您包含相關檔案的選項時，請按一下「是」。包含 XSLT 片段的檔案、包含資料的 XML 檔案，以及所產生的執行階段圖庫檔案都必須位於伺服器上，頁面才能正確顯示 (如果您選取遠端 XML 檔案做為資料來源，這個檔案當然必須位於網際網路上的某個位置)。

相關主題

  • 建立 XSLT 頁面
  • 從動態網頁中刪除 XSLT 片段
  • 關於搭配網頁使用 XML 和 XSL


從動態網頁中刪除 XSLT 片段

您可以刪除用來插入 XSLT 片段的「XSL 變形」伺服器行為，藉此移除網頁上的 XSLT 片段。刪除伺服器行為只會刪除 XSLT 片段，而不會刪除相關聯的 XML、XSLT 或執行階段圖庫檔案。

從動態網頁中刪除 XSLT 片段：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，選取您要刪除的「XSL 變形」伺服器行為。
  2. 按一下減號 (-) 按鈕。

    注意

    Macromedia 建議您一律使用這種方式來移除伺服器行為。手動刪除產生的程式碼只能刪除部分的伺服器行為，即使該伺服器行為已經從「伺服器行為」面板中消失，卻還是沒有完全刪除。

相關主題

  • 建立 XSLT 頁面
  • 在動態網頁中插入 XSLT 片段
  • 關於搭配網頁使用 XML 和 XSL


編輯 XSL 變形伺服器行為

一旦您將 XSLT 片段加入至動態網頁，就可以隨時編輯該「XSL 變形」伺服器行為。

編輯 XSL 變形伺服器行為：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按兩下您要編輯的「XSL 變形」伺服器行為。
  2. 進行變更並按一下「確定」。

相關主題

  • 建立 XSLT 頁面
  • 在動態網頁中插入 XSLT 片段
  • 從動態網頁中刪除 XSLT 片段
  • 關於搭配網頁使用 XML 和 XSL
  • 使用參數進行 XSL 變形


使用參數進行 XSL 變形

在網頁中加入「XSL 變形」伺服器行為時，您可以定義 XSL 變形的參數。參數可以控制 XML 資料的處理及顯示方式，例如，您可以使用參數來識別及列出來自新聞反饋的某特定文章，當該頁面載入瀏覽器時，只有您以參數指定的文章才會顯示出來。

在 XSL 變形中加入 XSLT 參數：

  1. 開啟「XSL 變形」對話方塊。您可以在「伺服器行為」面板上按兩下「XSL 變形」伺服器行為 (「視窗＞伺服器行為」)，或加入一個新「XSL 變形」伺服器行為來執行這項工作。如需相關說明，請參閱在動態網頁中插入 XSLT 片段。
  2. 在「XSL 變形」對話方塊中，按一下 XSLT 參數旁的「加號」(+) 按鈕。

  3. 在「新增參數」對話方塊中的「名稱」文字方塊內輸入參數名稱。名字只可以包含英數字元。且不能包含空格。
  4. 請執行下列其中一項作業：
    • 如果想要使用靜態值，請在「值」文字方塊中輸入您要的值。
    • 如果想要使用動態值，請按一下「值」文字方塊旁的動態圖示，完成「動態資料」對話方塊，然後按一下「確定」。如需詳細資訊，請按一下「動態資料」對話方塊中的「說明」按鈕。
  5. 在「預設值」文字方塊中，輸入當頁面沒有收到執行階段值時要讓參數使用的值。
  6. 按一下「確定」。

編輯 XSLT 參數：

  1. 開啟「XSL 變形」對話方塊。您可以在「伺服器行為」面板上按兩下「XSL 變形」伺服器行為 (「視窗＞伺服器行為」)，或加入一個新「XSL 變形」伺服器行為來執行這項工作。如需相關說明，請參閱在動態網頁中插入 XSLT 片段。
  2. 從 XSLT 參數清單中選取參數。
  3. 按一下「編輯」按鈕。
  4. 進行變更並按一下「確定」。

刪除 XSLT 參數：

  1. 開啟「XSL 變形」對話方塊。您可以在「伺服器行為」面板上按兩下「XSL 變形」伺服器行為 (「視窗＞伺服器行為」)，或加入一個新「XSL 變形」伺服器行為來執行這項工作。如需相關說明，請參閱在動態網頁中插入 XSLT 片段。
  2. 從 XSLT 參數清單中選取參數。
  3. 按一下減號 (-) 按鈕。

相關主題

  • 建立 XSLT 頁面
  • 在動態網頁中插入 XSLT 片段
  • 關於搭配網頁使用 XML 和 XSL


建立條件 XSLT 區域

您可以用 Dreamweaver 以在 XSLT 頁面上建立簡單的條件區域或多重條件區域。您可以在「設計」檢視中選取項目，並將條件區域套用至該選取項目，或您可以只將條件區域插入文件中有插入點的位置。

例如，如果您想要在該項目無法使用時顯示項目價格旁的「無法使用」的文字，可以在該頁面鍵入文字「無法使用」再選取，然後將條件區域套用至選取的文字。Dreamweaver 會以 <xsl:if> 標籤包圍該選取的項目，只在資料符合條件運算式的條件時才會顯示該網頁上的文字。

建立條件 XSLT 區域：

  1. 選取「插入＞XSLT 物件＞條件區域」，或「插入＞XSLT 物件＞多重條件區域」。
  2. 在「條件區域」或「多重條件區域」對話方塊中，輸入您想要用於該區域的條件運算式。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

  3. 按一下「確定」。

相關主題

  • 設定條件區域對話方塊選項
  • 設定多重條件區域對話方塊選項
  • 建立 XSLT 頁面
  • 關於搭配網頁使用 XML 和 XSL
  • 使用參數進行 XSL 變形


編輯條件區域 XSLT 物件

在您將條件 XSLT 區域增加至您的網頁後，就可以使用「屬性」檢視窗來進行變更了。

編輯條件區域 XSLT 物件：

  1. 按一下圍繞在條件區域外的灰色標籤，以選取此物件。
  2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，編輯「測試」文字方塊中的條件運算式。

相關主題

  • 建立條件 XSLT 區域
  • 設定條件區域對話方塊選項
  • 設定多重條件區域對話方塊選項
  • 關於搭配網頁使用 XML 和 XSL
  • 執行伺服器上的 XSL 變形


插入 XSL 註解

您可以將 XSL 註解標籤加入至文件，或可以在 XSL 標籤中圈選選取範圍。

新增 XSL 註解標籤至文件：

  • 請執行下列其中一項作業：
    • 在「設計」檢視中，選取「插入＞XSLT 物件＞XSL 註解」，輸入該註解的內容 (或將該文字方塊保留空白)，然後按一下「確定」。
    • 在「程式碼」檢視中，選取「插入＞XSLT 物件＞XSL 註解」。

在 XSL 註解標籤中圈選選取範圍：

  1. 切換到「程式碼」檢視 (「檢視＞程式碼」)
  2. 選取您想要註解的程式碼。
  3. 在「寫碼」工作列上，按一下「套用註解」按鈕，然後選取「套用 <xsl:comment></xsl:comment> 註解」。


在用戶端執行 XSL 變形

您可以在用戶端執行 XSL 變形，而不使用應用程式伺服器。當您這麼做時，瀏覽器會取代應用程式伺服器來執行 XML 資料的變形。您可以使用 Dreamweaver 來建立類似的頁面，但是，用戶端變形需要處理含有您想要顯示的資料的 XML 檔案。此外，用戶端變形只能在最新的瀏覽器上執行。

Macromedia 建議您在進行下列程序前，先閱讀關於用戶端 XSL 變形。

本節包含下列主題：

  • 執行用戶端 XSL 變形的流程
  • 建立完整的 XSLT 頁面
  • 連結 XSLT 和 XML 檔案

相關主題

  • 關於伺服器端 XSL 變形


執行用戶端 XSL 變形的流程

本章節提供您執行用戶端 XSL 變形所需遵循的步驟清單，您可以參考文件中詳述每一道程序的部分。

Macromedia 建議您在建立顯示 XML 資料的頁面前，先閱讀關於搭配網頁使用 XML 和 XSL、關於伺服器端 XSL 變形和關於用戶端 XSL 變形。

執行用戶端的 XSL 變形，請遵循下面的步驟：

  • 設定 Dreamweaver 網站。請參閱設定 Dreamweaver 網站。
  • 請執行下列其中一項作業：
    • 在 Dreamweaver 網站中，建立一個完整的 XSLT 頁面。請參閱建立完整的 XSLT 頁面。
    • 將現有的 HTML 頁面轉成完整的 XSLT 頁面。請參閱將 HTML 頁面轉換成 XSLT 頁面。
  • 如果程序尚未完成，請將 XML 資料來源附加至頁面。請參閱附加 XML 資料來源。您附加的 XML 檔案必須和 XSLT 頁面位在同一個目錄。
  • 將您的 XML 資料繫結到 XSLT 頁面。請參閱顯示 XSLT 頁面中的 XML 資料。
  • 如果適當的話，請新增「重複區域」XSLT 物件至包含 XML 資料預留位置的表格或表格列。請參閱顯示重複的 XML 元素。
  • 附加 XSLT 頁面至 XML 頁面。請參閱連結 XSLT 和 XML 檔案。
  • 將 XML 頁面和連結的 XSLT 頁面公佈到您的網路伺服器。
  • 檢視瀏覽器中的 XML 網頁。當您這麼做時，瀏覽器會執行該 XML 資料變形，以 XSLT 頁面進行格式化，並在瀏覽器中顯示樣式化的網頁。


建立完整的 XSLT 頁面

您必須使用完整的 XSLT 頁面來進行用戶端變形 (XSLT 片段不適用於此種變形)。如需建立、繫結 XML 資料和格式化 XSLT 頁面的說明，請參閱下列主題：

  • 建立 XSLT 頁面
  • 顯示 XSLT 頁面中的 XML 資料
  • 顯示重複的 XML 元素
  • 將樣式套用至 XSLT 片段

相關主題

  • 在用戶端執行 XSL 變形


連結 XSLT 和 XML 檔案

一旦您使用 XML 資料的動態內容預留位置擁有完整的 XSLT 網頁，就必須將參考插入 XML 頁面中的 XSLT 頁面。

注意

您用來進行用戶端變形的 XML 和 XSL 檔案，必須位於相同的目錄下。如果不是，瀏覽器將會讀取 XML 檔案，並尋找變形的 XSLT 頁面，但卻無法找到在 XSLT 頁面中相關連結所定義的資源 (樣式表、影像等)。

將 XSLT 頁面連結至 XML 頁面：

  1. 開啟您想要連結至 XSLT 頁面的 XML 檔案。
  2. 選取「命令＞附加 XSLT 樣式表」。
  3. 在「附加 XSLT 樣式表」對話方塊中，按一下「瀏覽器」按鈕，瀏覽您想要連結的 XSLT 頁面，選取並按一下「確定」。
  4. 按一下「確定」以關閉「附加 XSLT 樣式表」對話方塊。

    Dreamweaver 會將參考插入至 XML 文件上方的 XSLT 頁面。

相關主題

  • 在用戶端執行 XSL 變形


將樣式套用至 XSLT 片段

當您建立一個完整的 XSLT 頁面 (也就是說，一個包含 <body> 和 <head> 標籤的 XSLT 頁面)，您便可以顯示該頁面上的 XML 資料，然後像其他內容一樣，使用「屬性」檢視窗或「CSS 樣式」面板將該資料格式化。當您建立了供插入動態網頁中的 XSLT 片段時 (例如，用於插入 ASP、PHP 或 Cold Fusion 頁面中的片段)，該片段和動態網頁的樣式呈現會變得更複雜。雖然您是和動態網頁分開使用 XSLT 片段，但請務必記住，片段是設計成在動態網頁中使用，XSLT 片段的輸出最終會出現在動態網頁 <body> 標籤內的某個地方。在這個工作流程的前提下，請務必確認沒有在 XSLT 片段中包含 <head> 元素 (例如樣式定義或外部樣式表的連結)。這麼做會造成應用程式伺服器將這些元素放入動態網頁的 <body> 中，進而產生無效的標記。

例如，假設您建立一個可以插入動態網頁的 XSLT 片段，而且想要使用和該動態網頁相同的外部樣式表來將片段格式化。如果您將相同的樣式表附加至該片段，則產生的 HTML 頁面將包含該樣式表一樣的連結 (一個位在動態網頁的 <head> 區段，另一個位在該頁面的 <body> 區段，即 XSLT 片段內容會出現的區段)。您應該使用設計階段樣式表來參考外部樣式表，而不是使用這個方法。

格式化 XSLT 片段的內容時，Macromedia 建議使用下列工作流程：

  • 首先，將外部樣式表附加至動態網頁 (這個程序會遵循最佳實作，將樣式套用至任何網頁的內容)。
  • 接下來，以設計階段樣式表的方式，將相同的外部樣式表附加至 XSLT 片段。如同名稱的含意，設計階段樣式表只能用於 Dreamweaver「設計」檢視中。如需詳細資訊，請參閱使用設計階段樣式表。

完成先前的步驟之後，您可以使用附加至動態網頁的相同樣式表，在 XSLT 片段中套用現有樣式或建立新的樣式。您會得到較乾淨的 HTML 頁面 (因為該樣式表的參考只會在使用 Dreamweaver 時才有效)，而該片段仍會在「設計」檢視中顯示適當的樣式。此外，當您在「設計」檢視中檢視動態網頁，或在瀏覽器中預覽動態網頁時，所有的樣式都會套用至該片段和動態網頁中。

注意

如果您在瀏覽器中預覽 XSLT 片段，瀏覽器並不會顯示樣式，您應該要在瀏覽器中預覽動態網頁，以查看動態網頁內容中的 XSLT 片段。

如需有關使用 CSS 來格式化 XSLT 片段的詳細資訊，請參閱 www.macromedia.com/go/dw_xsl_styles。


XSL 變形疑難排解

如果您有執行 XSL 變形的問題，請到 www.macromedia.com/go/dw_xsl_faq 參閱附有常見問答集的疑難排解指南。


參考

本節將說明這一章所介紹的對話方塊。

  • 設定尋找 XML 來源對話方塊選項
  • 設定附加 XSLT 樣式表對話方塊選項
  • 設定 XPath 運算式建立器 (動態文字) 對話方塊選項
  • 設定 XPath 運算式建立器 (重複區域) 對話方塊選項
  • 設定條件區域對話方塊選項
  • 設定多重條件區域對話方塊選項
  • 設定重複區域 (XSL) 屬性
  • 設定條件區域 (If) 屬性
  • 設定條件區域 (When) 屬性
  • 指定遺失的字元實體


設定尋找 XML 來源對話方塊選項

此對話方塊的用途是指定 XLST 頁面的 XML 資料來源。

若要設定對話方塊選項：

  • 請執行下列其中一項作業：
    • 選取「在我的電腦或區域網路上附加本機檔案」，按一下「瀏覽」按鈕，瀏覽至位於電腦上的本機 XML 檔案，然後按一下「確定」。
    • 選取「在 Internet 上附加遠端檔案」，輸入位於網際網路上的 XML 檔案的 URL (例如來自 RSS 反饋的檔案)，然後按一下「確定」。

按下「取消」按鈕將產生一個沒有附加 XML 資料來源的新的 XSLT 頁面。如需有關附加 XML 資料來源的詳細資訊，請參閱附加 XML 資料來源。

相關主題

  • 建立 XSLT 頁面


設定附加 XSLT 樣式表對話方塊選項

這個對話方塊是用來將 XSLT 樣式表附加至 XML 檔案。

若要設定對話方塊選項：

  • 輸入 XSLT 樣式表的路徑與檔案名稱，或按一下「瀏覽」然後選取。

相關主題

  • 連結 XSLT 和 XML 檔案


設定 XPath 運算式建立器 (動態文字) 對話方塊選項

這個對話方塊是用來選取 XML 資料中用來顯示在網頁上的值。Dreamweaver 會在該插入點插入一個 <xsl:value-of/> 標籤。使用此方法取代從 XML 綱要樹狀結構拖曳數值的優點是，您可以將顯示的值格式化。

「XPath 運算式建立器」的優點之一，就是當對話方塊開啟時，它會根據您在 XSL 檔案的位置識別目前的內容。XML 綱要樹狀結構中目前的內容是粗體。當您在此對話方塊內進行選取時，它會產生相對於您目前內容的正確 XPath 陳述式。這樣將簡化初學者和進階使用者撰寫正確 XPath 運算式的過程。

XPath (XML 路徑語言) 是一種非 XML 的語法，用來指出 XML 文件的部分路徑。它最常用來做為 XML 資料的查詢語言，就如同 SQL 語言是用來查詢資料庫。如需有關 XPath 的詳細資訊，請參閱 W3C 網站上的 XPath 語言規格，網址是 www.w3.org/TR/xpath。

值得注意的是，此對話方塊是專為您而設計，以協助您建立簡單的 XPath 運算式以識別特殊節點。它無法讓您以手動方式編輯運算式。如果您需要建立複雜的運算式，可以使用此對話方塊來開始，然後在「程式碼」檢視或以「屬性」檢視窗中自訂您的運算式。

選取顯示頁面上的值：

  1. 在「XPath 運算式建立器」(動態文字) 對話方塊中，選取 XML 綱要樹狀結構中的任一個節點。

    Dreamweaver 會在「運算式」文字方塊中撰寫正確的 XPath 運算式，以識別該節點。

    注意

    如果您在 XML 綱要樹狀結構中選取另一個節點，則運算式會隨您的選擇改變。

    在下面的範例中，您要顯示 item 節點的 price 子元素：

    此選取項目會在您的 XSLT 頁面中插入下面的程式碼：

    <xsl:value-of select="price"/>
  2. 您也可以從「格式」彈出式選單選取格式化選項。

    當您的節點值傳回一個數字時，將選取項目格式化是很有用的。Dreamweaver 會提供一份預先定義的格式化函式清單。如需可用的格式化函數與範例的完整清單，請參閱「參考」面板。

    在下面範例中，您要將 price 子元素格式化為有兩個小數位數的貨幣：

    這些選項會在您的 XSLT 頁面插入下面的程式碼：

    <xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
  3. 按一下「確定」。
  4. 若要顯示 XML 檔案中的每一個節點值，請將重複區域套用到包含動態文字的元素 (例如，一個 HTML 表格列或段落)。

    如需詳細資訊，請參閱顯示重複的 XML 元素。

如需有關選取節點以傳回值的詳細資訊與範例，請參閱「參考」面板中的 <xsl:value-of/> 章節。


設定 XPath 運算式建立器 (重複區域) 對話方塊選項

這個對話方塊是用來選取一個可以重複的節點以及 (選擇性) 篩選結果。如果您在叫用此對話方塊時已有選取的內容，則您的內容會被圈選在一個 <xsl:for-each> 組塊內。如果您未選取內容，則 <xsl:for-each> 組塊便會輸入至您游標的插入點處。

「XPath 運算式建立器」的優點之一，就是當對話方塊開啟時，它會根據您在 XSL 檔案的位置識別目前的內容。XML 綱要樹狀結構中目前的內容是粗體。當您在此對話方塊內進行選取時，它會產生相對於您目前內容的正確 XPath 陳述式。這樣將簡化初學者和進階使用者撰寫正確 XPath 運算式的過程。

XPath (XML 路徑語言) 是一種非 XML 的語法，用來指出 XML 文件的部分路徑。它最常用來做為 XML 資料的查詢語言，就如同 SQL 語言是用來查詢資料庫。如需有關 XPath 的詳細資訊，請參閱 W3C 網站上的 XPath 語言規格，網址是 www.w3.org/TR/xpath。

值得注意的是，此對話方塊是設計來協助您建立用於重複區域的簡單 XPath 運算式。它無法讓您以手動方式編輯運算式。如果您需要建立複雜的運算式，可以使用此對話方塊來開始，然後在「程式碼」檢視或以「屬性」檢視窗中自訂您的運算式。

選取要重複的節點：

  • 在「XPath 運算式建立器」(重複區域) 對話方塊中，選取要在 XML 綱要樹狀結構中重覆的項目。

    Dreamweaver 會在「運算式」文字方塊中撰寫正確的 XPath 運算式，以識別該節點。

    注意

    XML 綱要樹狀結構中重複的項目會以「加號」(+) 符號標示。

在下面範例中，您想要重複 XML 檔案中的每一個 item 節點。

當您按一下「確定」時，下面的程式碼便會插入到您的 XSLT 頁面：

<xsl:for-each select="provider/store/items/item">
   內容放在這裡
</xsl:for-each>

在某些情況下，您可能想要使用重複節點的子集例如，您可能只想要屬性有特定值的項目。在這個情況下，您需要建立一個篩選器。

篩選要重複的資料：

  1. 在 XML 綱要樹狀結構中，選取一個要重複的節點。
  2. 按一下「建立篩選器」展開按鈕。
  3. 按一下「加號」(+) 按鈕。

    Dreamweaver 將建立一個空白的篩選器。

  4. 在下面欄位輸入篩選準則：

    篩選自指定含有您想要用來篩選資料的重複節點。彈出式選單提供一份父節點的清單，以相對於您在 XML 綱要樹狀結構選取的節點。

    位置指定要用來限制結果的「篩選自」節點的屬性或子元素。您可以從彈出式選單中選取屬性或子元素，或者可以在這個欄位中輸入自己的 XPath 運算式，以識別存在於綱要樹狀結構下階的子節點。

    運算子指定用於篩選器運算式中的比較運算子。

    值指定「篩選自」節點中要檢查的值。輸入該值。如果您的 XSLT 頁面已定義動態參數，那麼您可以從彈出式選單選取其中一個。

  5. 若要指定另一個篩選器，請再次按一下「加號」(+) 按鈕。

    當您在彈出式選單輸入值或進行選取時，Dreamweaver 會變更「運算式」文字方塊中的 XPath 運算式。

在下面的範例中，您要將結果集限制在其 @available 屬性的值是 true 的那些 item 節點。

當您按一下「確定」時，下面的程式碼便會插入到您的 XSLT 頁面：

<xsl:for-each select="provider/store/items/item[@available = &apos;true&apos;]">
     內容放在這裡
</xsl:for-each>

注意

您需要將字串值 (例如 true) 圍上引號。Dreamweaver 會替您將這些引號編碼 (&apos;) 讓它們能輸入為有效的 XHTML。

您可以建立更多複雜的篩選器，以便指定父節點為您篩選準則的一部份。在下面的範例中，您要將結果集限制在其中 store’s @id 屬性等於 1 且 item’s price 節點大於 5 的那些 item 節點。

當您按一下「確定」時，下面的程式碼便會插入到您的 XSLT 頁面：

<xsl:for-each select="provider/store[@id = 1]/items/item[price &gt; 5]">
   內容放在這裡
</xsl:for-each>

如需有關重複區域的詳細資訊和範例，請參閱「參考」面板中的 <xsl:for-each> 章節。


設定條件區域對話方塊選項

這個對話方塊是用來撰寫插入您 XSLT 頁面的簡單條件運算式。如果您在開啟此對話方塊時已選取內容，則該內容會被圍繞在一個 <xsl:if> 組塊之中。如果您未選取內容，則插入點會輸入 <xsl:if> 組塊。

此對話方塊提供一種建立簡單的條件運算式的方式。因此，建議您以該對話方塊開始著手，然後在「程式碼」檢視中自訂運算式。

<xsl:if> 元素類似於在其他語言中的 if 陳述式。該元素提供一種方法給您，讓您測試條件並根據結果採取一系列行動。<xsl:if> 元素能讓您測試運算式是否為單一 true 或是 false 值。

插入一個條件區域：

  1. 在「條件區域」對話方塊中，輸入該條件。

    在下面的範例中，您想要測試該內容節點的 @available 屬性值是否為 true。

  2. 按一下「確定」。

    您的 XSLT 頁面會插入下面的程式碼：

    <xsl:if test="@available=&apos;true&apos;">
   內容放在這裡
</xsl:if>

    注意

    您需要將字串值 (例如 true) 圍上引號。Dreamweaver 會替您將這些引號編碼 (&apos;) 讓它們能輸入為有效的 XHTML。

除了測試節點的值以外，您可以使用條件陳述式中任何支援的 XSLT 函數。測試您 XML 檔案中目前節點的條件。在下面的範例中，您要測試結果集中的最後節點：

如需有關撰寫條件運算式的詳細資訊和範例，請參閱「參考」面板中的 <xsl:if> 章節。


設定多重條件區域對話方塊選項

這個對話方塊是用來撰寫插入您 XSLT 頁面的簡單條件運算式。如果您在開啟此對話方塊時已選取內容，則該內容會被圍繞在一個 < xsl:choose> 組塊之中。如果您未選取內容，則插入點會輸入 <xsl:choose> 組塊。

此對話方塊提供一種建立簡單的條件運算式的方式。因此，建議您以該對話方塊開始著手，然後在「程式碼」檢視中自訂運算式。

<xsl:choose> 元素類似於在其他語言中的 case 陳述式。該元素提供一種方法給您，讓您測試條件並根據結果採取一系列行動。<xsl:choose> 元素能讓您測試多個條件。

插入多重條件區域：

  1. 在「多重條件區域」對話方塊中，輸入第一個條件。

    在下面的範例中，您要測試該內容節點的 price 子元素是否少於 5。

  2. 按一下「確定」。

    在範例中，您的 XSLT 頁面會插入下面的程式碼：

    <xsl:choose>
   <xsl:when test="price&lt;5">
      內容放在這裡
   </xsl:when>
   <xsl:otherwise>
      內容放在這裡
   </xsl:otherwise>
</xsl:choose>
  3. 若要插入另一個條件，請將插入點放置在 <xsl:when> 標籤配對之間的「程式碼」檢視中，或放在 <xsl:otherwise> 標籤的前面，然後插入一個條件區域 (「插入＞XSLT 物件＞條件區域」)。

    指定條件後，按一下「確定」，Dreamweaver 會在 <xsl:choose> 組塊中插入另一個 <xsl:when> 標籤。

如需有關撰寫條件運算式的詳細資訊和範例，請參閱「參考」面板中的 < xsl:choose> 章節。


設定重複區域 (XSL) 屬性

這個「屬性」檢視窗是用來選取另一個 XML 節點以重複建立該重複區域。

選取另一個 XML 節點：

  • 在「選取」文字方塊中，輸入一個新節點，然後按下閃電圖示，從出現的 XML 綱要樹狀結構選取該節點。

    如需詳細資訊，請參閱設定 XPath 運算式建立器 (重複區域) 對話方塊選項。


設定條件區域 (If) 屬性

這個「屬性」檢視窗是用來變更用於您 XSL 頁面的條件區域之中的條件。條件區域會測試該條件並根據結果採取一系列的行動。

變更用於條件區域的條件：

  • 在「測試」文字方塊中輸入新條件，然後按 Enter。

    如需詳細資訊，請參閱設定條件區域對話方塊選項。


設定條件區域 (When) 屬性

這個「屬性」檢視窗是用來變更用於您 XSL 頁面的多重條件區域之中的條件。多重條件區域會測試該條件並根據結果採取一系列的行動。

變更用於多重條件區域的條件：

  • 在「測試」文字方塊中輸入新條件，然後按 Enter。

    如需詳細資訊，請參閱設定多重條件區域對話方塊選項。


指定遺失的字元實體

在 XSLT 頁面中，不允許在特定內容中使用某些字元。例如，您無法在標籤之間的文字或屬性值中，使用小於符號 (<) 及 & 符號 (&)。若這些字元使用不當，則 XSLT 變形引擎將會發生錯誤。若要解決此問題，您可以指定字元實體以取代此類特殊字元。

字元實體是一個代表其他字元的字元字串。字元實體可以命名或編號。具名實體的開頭是 & 符號 (&)，後面接著該名稱或字元，然後以分號 (;) 作結尾。例如，&lt; 代表左角括弧字元 (<)。已編號的實體也是使用同樣的開頭和結尾方式，除了井號 (#) 和數字是表示字元。

XSLT 有下列 5 個預先定義的實體：

字元 | 實體程式碼
< (小於) | &lt;
& (& 符號) | &amp;
> (大於) | &gt;
" (引號) | &quot;
‘ (所有格) | &apos;

如果您在 XSL 檔案中使用其他字元實體，將需要在該 XSL 檔案的 DTD 區段定義它們。Dreamweaver 提供一些預設的實體定義，您可以在 Dreamweaver 建立的 XSL 檔案上方看見。這些預設實體包含各種最常用字元的較廣選取範圍。

Dreamweaver 會在您在瀏覽器中預覽 XSL 檔案時，檢查其未定義實體的 XSL 檔案。若找到了未定義的實體，Dreamweaver 會以訊息方塊通知您。

如果您預覽附加至 XSLT 檔案的 XML 檔案，或如果您預覽具有 XSLT 變形的伺服器端頁面，則伺服器或瀏覽器 (取代 Dreamweaver) 便會在發現了未定義實體時會通知您。當您要求以具有一個遺失實體定義的 XSL 檔案進行 XML 檔案變形時，您可能會在 Internet Explorer 中得到下面的訊息範例：

請參考未定義實體 'auml'。處理資源 'http://localhost/testthis/list.xsl' 時發生錯誤。Line 28, Position 20
<p class="test">&auml;</p>
-------------------^

若要修正頁面中的錯誤，將需要以手動方式將該實體的定義新增至您的頁面中。

指定遺失的實體定義：

  1. 請在 W3C 網站的字元實體參考網頁中查詢遺失的字元，網址是 www.w3.org/TR/REC-html40/sgml/entities.html。

    此網頁包含 HTML 4 和 XHTML 1.0 所允許的 252 種實體。

    舉例來說，如果字元實體 Egrave 遺失了，您可以在 W3C 網頁中搜尋到「Egrave」。您將會找到下面的實體：

    <!ENTITY Egrave CDATA "&#200;" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
  2. 請將該項目內的實體名稱和實體程式碼標示附註。

    在範例中，Egrave 是實體名稱，而 &#200 是實體程式碼。

  3. 透過使用這些資訊，在 Dreamweaver 中切換至「程式碼」檢視，在您的 XSL 檔案上方輸入下列的實體標籤 (接著是 Doctype 宣告和其他實體標籤)：
    <!ENTITY entityname "entitycode;">

    在範例中，您要輸入下面的實體標籤：

    <!ENTITY Egrave "&#200;">
  4. 儲存檔案。

如果您重複使用相同的字元實體，可能會想要將其定義永久新增至 XSL 檔案中，此檔案必須是當您使用「檔案＞開新檔案」時 Dreamweaver 預設建立的 XSL 檔案。

新增實體定義至 Dreamweaver 預設建立的 XSL 檔案：

  1. 在 Dreamweaver 應用程式資料夾中，尋找下面的設定檔案，然後在任何文字編輯器中開啟。

    Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml

  2. 尋找名為 mm_xslt_1 的宣告：
    <documenttypedeclaration id="mm_xslt_1">
  3. 輸入新實體標籤或下列實體標籤清單中的標籤，如下所示：
    <!ENTITY entityname "entitycode;">
  4. 儲存該檔案，然後重新啟動 Dreamweaver。


使用網路服務

網路服務是一種新興的科技，可允許網頁存取分散式應用程式。網路服務藉由提供對資訊和應用程式功能的存取做為服務，可以用在任何地方從任何平台存取的服務串流來傳遞和付費。連線到網路服務的網頁一般稱為客戶，而服務本身則稱為發行者。Macromedia Dreamweaver 8 可以讓您建立網路服務客戶的網頁和網站。Dreamweaver 目前支援使用 Macromedia ColdFusion MX、ASP.NET 和 Java Server Pages (JSP) 等文件類型的網路服務客戶建立網頁及網站。更明確地說，Dreamweaver 可讓您執行下列網路服務開發工作：

  • 在 Internet 上選取可用的網路服務。
  • 產生允許網頁與網路服務發行者通訊的網路服務 Proxy。

    這個 Proxy (也稱為抽象類別) 包含網路服務的欄位、方法和屬性，並可讓它們供本機裝載的網頁使用。當您產生網頁的 Proxy 時，Dreamweaver 可讓您在「組件」面板中檢視。

  • 將方法和資料類型拖曳到網頁的程式碼中。

在建立使用網路服務的網頁之前，您必須熟悉要使用之應用程式的基本伺服器技術以及應用程式所需的程式設計架構。

Dreamweaver 讓您撰寫可存取網路服務及使用服務所提供之功能的網頁。此外，您可以使用 Macromedia ColdFusion MX 建立並發佈網路服務，以進行部署。

本章包含下列各節：

關於網路服務

關於 Proxy 產生器

使用 WSDL 說明新增網路服務 Proxy

在網頁上新增網路服務

編輯 UDDI 網路服務網站清單


關於網路服務

不管作業系統或程式設計語言為何，網路服務都允許應用程式透過 Internet 進行通訊和分享資訊。網路服務及所提供的資訊和功能包括下列各項：

  • 使用者驗證和授權
  • 信用卡驗證
  • 傳回與特定股市行情指示器相關之股價的財經市場服務
  • 允許使用者在線上訂購產品的購買服務
  • 根據選取的興趣、位置或其他個人資料，提供新聞或其他資訊類型的資訊服務

藉由提供網頁連接和需要時使用的服務功能，網路服務提供開發人員和服務提供者更強大的功能，設計和部署強大的分散式應用程式。

網路服務是由下列基本組件所構成：

  • 服務發行者提供裝載的應用程式，並讓它們可供使用。網路服務可能免費提供或為需付費的服務。
  • 服務分配管理程式使用服務提供說明和應用程式連結，維護服務提供者的登錄。
  • 服務客戶是存取和使用遠端網路服務的網頁。

本節包含下列概念性主題：

  • Dreamweaver 網路服務工作流程
  • 尋找網路服務發行者
  • 網路服務軟體組件
  • 網路服務參考
  • 取得其他 Proxy 產生器


Dreamweaver 網路服務工作流程

若要使用 Dreamweaver 建立使用網路服務的網頁或網站，您必須執行下列工作：

  1. 安裝和設定 Proxy 產生器。

    Proxy 產生器會產生網路服務 Proxy，這是一種網頁用來與網路服務發行者通訊的軟體組件。網路服務 Proxy 是由網路服務描述語言 (Web Service Description Language，WSDL) 產生，WSDL 會對網路服務進行描述。視您要為其開發網路服務客戶的伺服器技術而定，您可能需要安裝和設定支援該項技術的 Proxy 產生器。

    Dreamweaver 預先設定為使用 AXIS，它是支援 JSP 網路服務開發的 Apache SOAP Proxy 產生器。如果您正在開發 ColdFusion 6 網頁，網路服務 Proxy 產生器就包含在 ColdFusion 伺服器中。建立與 ColdFusion 伺服器的連線可讓您存取這個 Proxy 產生器。

    如果您正在開發網路服務網頁來搭配 ASP.NET 使用，就必須安裝 ASP.NET SDK (可從 Microsoft 取得)。

    如需有關安裝和設定 Dreamweaver 沒有提供的 Proxy 產生器的資訊，請參閱關於 Proxy 產生器。

  2. 使用瀏覽器來檢視網路服務的網路登錄。

    網路服務有幾個來源，從網路服務登錄網站到簡單的清單都有。登錄使用 UDDI，這是一種讓服務提供者和要求者彼此尋找和互動的標準。UDDI 允許企業在網頁上尋找符合需求的服務。例如，使用 UDDI，您可以指定某些準則 (如某些服務的最低價格) 或是傳回特定的資訊。

    如需詳細資訊，請參閱設定 UDDI 網站對話方塊選項。

  3. 找到並選取提供您所需功能的網路服務之後，請在「新增網路服務」對話方塊中輸入 WSDL 的 URL。

    如需詳細資訊，請參閱設定網路服務選擇程式對話方塊選項。

  4. 從服務發行者的 WSDL 說明產生網路服務的 Proxy。

    若要將網路服務嵌入網頁，您必須建立 Proxy。這個 Proxy 提供網頁與網路服務通訊及存取網路服務提供之方法的必要資訊。

    若要從 WSDL 檔案建立 Proxy，請使用 Proxy 產生器。建立 Proxy 之後，您可以將它安裝在下列其中一個位置：

    • 開發網路服務客戶的本機電腦上。
    • 執行應用程式伺服器的伺服器電腦上。若要部署網頁並和網路服務發行者通訊，您必須將 Proxy 安裝在伺服器上。

    如需詳細資訊，請參閱關於 Proxy 產生器。

  5. 請使用 Dreamweaver 將網路服務加入網頁之中，並編輯必要的參數和方法，以發揮網路服務的功能。

    如需詳細資訊，請參閱在網頁上新增網路服務。


尋找網路服務發行者

網路服務本身是由服務發行者所提供。一般而言，服務發行者會透過維護您可存取之可用服務目錄的網路型登錄，提供網路服務。很多網站都提供這樣的目錄，包括：

  • X Methods，網址是：http://www.xmethods.net
  • IBM Business Registry，網址是：https://uddi.ibm.com/ubr/registry.html
  • Microsoft UDDI 登錄，網址是：http://uddi.microsoft.com/default.aspx

這些登錄使用「通用描述、探索與整合」(Universal Description, Discovery and Integration，UDDI) 服務，這是一種開放式的電子商務服務登錄，提供一個討論區，讓企業說明本身以及可對其他企業提供的商品或服務。登錄是由稱為操作員的公司群組來負責維護。操作員保證要在彼此間和服務的使用者間分享所有有關登錄者的公用訊息，以及維護 UDDI 服務網路之多個同級節點間的相互操作性。除了公用網路服務之外，在訂閱上還有私用 UDDI 登錄可供使用。

UDDI 規格是根據現有的 Internet 標準，確保中立的平台和實作。

相關主題

  • 編輯 UDDI 網路服務網站清單


網路服務軟體組件

若要讓某個網頁存取並使用網路服務，該網頁必須和服務進行通訊，並具有該服務提供之功能、網頁可以叫用的可用方法、以及該服務傳回之參數的說明。Web Service Description Language (WSDL) 是一種 XML 式的服務說明。每個網路服務都提供 WSDL，說明如何結合服務、網頁可叫用的方法以及資料輸入和輸出。WSDL 可能位於檔案中，或是可以由網路服務在執行階段時產生。

要求服務的網頁以及網路服務本身之間的通訊是使用 Simple Object Access Protocol (SOAP)。SOAP 是一種 XML 式的通訊協定，可讓網路用戶端存取和叫用網路服務的方法和參數。

相關主題

  • 使用 WSDL 說明新增網路服務 Proxy


網路服務參考

若要瞭解更多有關網路服務、以及實現這些網路服務基礎技術的資訊，請前往下列網站：

  • WSDL 規格，網址是：http://www.w3.org/TR/wsdl
  • UDDI 規格，網址是：http://www.uddi.org/specification.html
  • XML 規格，網址是：http://www.w3.org/TR/REC-xml
  • SOAP 規格，網址是：http://www.w3.org/TR/SOAP/


關於 Proxy 產生器

Dreamweaver 會安裝支援 JSP 網路服務的 AXIS Proxy 產生器。AXIS 是一種透過 Apache SOAP 專案散佈的開放來源 Proxy 產生器。此外，您可以新增支援其他廠商的網路服務實作或新型網路服務技術的 Proxy 產生器。本節說明如何取得 Proxy 產生器及如何設定以與 Dreamweaver 一起使用。

若要了解更多有關 AXIS 的資訊，請參閱 Apache AXIS 網站，網址是：http://ws.apache.org/axis/index.html。

相關主題

  • 取得其他 Proxy 產生器
  • 設定可搭配 Dreamweaver 使用的 Proxy 產生器


取得其他 Proxy 產生器

如果您要安裝 Dreamweaver 未提供的 Proxy 產生器，必須從廠商取得 Proxy 產生器和相關的軟體組件。您應該可以從廠商的網站下載所有必要的檔案。

有些 Proxy 產生器會建立依賴其他軟體圖庫的 Proxy，這些圖庫必須正確安裝以便 Proxy 產生器存取。例如，AXIS Proxy 產生器會建立依賴 Apache SOAP 圖庫的 Proxy，而 Apache SOAP 也會依賴其他軟體圖庫 (請注意，所有使用 AXIS 所需的軟體依預設都是使用 Dreamweaver 安裝)。選取 Proxy 產生器時，請參閱提供的文件，並確保您具有所有必要的軟體組件和圖庫，這樣您才可以正確安裝和設定。

在您正確安裝和設定 Proxy 產生器之後，您必須將它設定以與 Dreamweaver 一起使用。

注意

目前 Dreamweaver 的網路服務部署限於 Windows 環境。若要開發在 Macintosh 上存取網路服務的網頁，您必須使用執行 Windows NT/2000/XP 或 UNIX 的個別應用程式伺服器，在這些作業系統上執行網路服務 Proxy 及其應用程式環境。


設定可搭配 Dreamweaver 使用的 Proxy 產生器

當您安裝網路服務 Proxy 產生器時，必須將它設定為搭配 Dreamweaver 使用。

若要瞭解更多關於 Proxy 產生器的資訊，請參閱關於 Proxy 產生器。

若要設定 Proxy 產生器，以與 Dreamweaver 一起使用：

  1. 選取「視窗＞組件」，開啟「組件」面板。
  2. 在「組件」面板左上方的彈出式選單中，選取「網路服務」，然後按一下加號 (+) 按鈕，再選取「使用 WSDL 新增」。

    「使用 WSDL 新增」對話方塊便會出現。

  3. 在「使用 WSDL 新增」對話方塊的「Proxy 產生器」彈出式選單中，選取「編輯 Proxy 產生器清單」。

    「Proxy 產生器」對話方塊就會出現。

  4. 按一下「新增」，從彈出式選單中選取 Proxy 產生器，然後按一下「完成」。

    如果您想要使用的 Proxy 產生器並未出現在清單中，請選取「預設的 Proxy 產生器」，以顯示「預設的 Proxy 產生器」對話方塊。

    「預設的 Proxy 產生器」對話方塊可讓您設定選取的 Proxy 產生器，或是設定新的 Proxy 產生器。該對話方塊的文字方塊會因您選擇的 Proxy 產生器不同而有所差異。

    注意

    ColdFusion MX Proxy 產生器是無法編輯的。

  5. 完成這個對話方塊並且按一下「確定」。

    如需完成對話文字方塊的資訊，請參閱設定預設的 Proxy 產生器對話方塊選項。

  6. 當您完成「預設的 Proxy 產生器」設定時，請按一下「確定」。

    當 Dreamweaver 讀取網路服務的 WSDL 說明時，Dreamweaver 會完成下列與「預設的 Proxy 產生器」欄位相關的動作：

    • 將 WSDL 當做輸入讀取，尋找網路服務。
    • 使用特定的執行階段環境，產生網路服務的 Proxy。
    • 使用特定的編譯器編譯 Proxy。
    • 將 Proxy 原始碼和編譯的 Proxy 傳回到指定的目標資料夾中。

相關主題

  • 關於 Proxy 產生器
  • 取得其他 Proxy 產生器


使用 WSDL 說明新增網路服務 Proxy

當已經指定了 Proxy 產生器 (請參閱關於 Proxy 產生器)，並設定了要支援的網路服務伺服器模式之後，您將會需要找出能為這個服務提供所需功能、並產生一個 Proxy 的網路服務。

若要從其 WSDL 檔案選取網路服務和產生 Proxy：

  1. 開啟您要新增網路服務的網頁。
  2. 選取「視窗＞組件」，開啟「組件」面板。
  3. 在「組件」面板左上方的彈出式選單中，選取「網路服務」，然後按一下加號 (+) 按鈕，再選取「使用 WSDL 新增」。

    「使用 WSDL 新增」對話方塊便會出現。

  4. 指定您要使用之 WSDL 檔案的 URL。

    如果您知道 WSDL 檔案的 URL，請輸入到 WSDL 的 URL 文字方塊中。

    如果您不知道 WSDL 檔案的 URL，您可以瀏覽網路服務的目錄。當您找到所需的網路服務時，請將網路服務的 URL 複製並貼到 WSDL 編輯方塊中。若要啟動網頁瀏覽器，請按一下 UDDI 瀏覽按鈕，然後在選取其中一個列出的網路服務登錄。Dreamweaver 會啟動瀏覽器，並開啟選取的登錄。請找出您要使用的網路服務，並將其 WSDL 檔案的 URL 複製到「剪貼簿」(在 Windows 中按 Control + C 或在 Macintosh 中按 Command + C)。返回「網路服務選擇程式」，然後將 URL 貼到對話方塊中。

    您可以編輯網路服務登錄的清單，以包含其他網路服務目錄或特定的網路服務提供者。如需詳細資訊，請參閱編輯 UDDI 網路服務網站清單。

  5. 從「Proxy 產生器」彈出式選單中，選取支援您所需的網路服務伺服器模式的 Proxy 產生器。

    請確定您的系統上已安裝和設定 Proxy 產生器。如需詳細資訊，請參閱關於 Proxy 產生器。

  6. 按一下「確定」。

    Proxy 產生器會建立並檢查網路服務的 Proxy。檢查是 Proxy 產生器查詢網路服務 Proxy 內部結構，並透過 Dreamweaver 使其介面、方法和屬性可供使用的程序。

網路服務現在已經可以在網站中使用，並會出現在「組件」面板中。現在您已經可以將網路服務加入網頁之中。如需詳細資訊，請參閱在網頁上新增網路服務。

相關主題

  • 網路服務軟體組件


在網頁上新增網路服務

在選取了網路服務、產生了它的 Proxy、並將它新增到「組件」面板中之後，您就可以將它插入網頁中。

下圖顯示的是新增了網路服務 Proxy Helloworld 的「組件」面板。Helloworld Proxy 會提供一個名為 sayHello 的方法，這個方法會列印出「Hello World」。

以下範例使用 ColdFusion 產生 HelloWorld 網路服務。若要瞭解更多有關建立網路服務的資訊，並參閱 .NET 和 JSP 的其他使用範例，請造訪 Macromedia 支援中心，網址是：www.macromedia.com/go/creating_web_services。

若要新增網路服務到網頁：

  1. 在「文件」視窗的「程式碼」檢視中，將 sayHello 方法拖曳到網頁的 HTML 中。

    Dreamweaver 會將方法和虛設的參數新增到網頁。

  2. 請依照網路服務的要求，使用適當的服務實體名稱、資料類型和參數值，編輯插入的程式碼。網路服務應該提供資料類型和參數值的說明。

    在下列 ColdFusion 範例中，網路服務是包含在 <cfinvoke> 標籤中。在 ColdFusion 中開發網路服務時，請使用 <cfinvoke> 初始化網路服務，並叫用其方法。

    <html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<cfinvoke
webservice="http://www.mysite.com:8500:8500/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>

</body>
</html>
  3. 如果您要將回傳值結合到視覺元素，請切換到「設計」檢視，並將視覺元素放置到可接受資料繫結的網頁上。然後再切換回「程式碼」檢視，輸入適當的程式碼，繫結回傳值與視覺元素。建立網路服務時，如需要有關將網路服務初始化、並顯示網頁回傳值之適當語法的資訊，請參考技術提供者的文件。

    在這個範例中，aString 變數所傳回的值是使用 ColdFusion 的 <cfoutput> 標籤來輸出的。這會在網頁上顯示「The web service says: Hello world!」。

    <html>
<head>
<title>Web Service</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<cfinvoke
webservice="http://www.mysite.com:8500/helloworld/HelloWorld.cfc?wsdl"
method="sayHello"
returnvariable="aString">
</cfinvoke>

The web service says: <cfoutput>#aString#</cfoutput>
</body>
</html>
  4. 當您將網頁部署到實際執行伺服器時，Dreamweaver 會自動將網頁、Proxy 和任何需要的圖庫複製到網路伺服器。

    注意

    如果您在開發應用程式時，安裝 Proxy 的電腦和用來開發網頁的電腦並不是同一台電腦；或者您使用的網站管理工具並未將所有相關檔案複製到伺服器上，則請務必部署 Proxy 和任何相關的圖庫檔案。否則，您的網頁將無法和網路服務應用程式進行通訊。


編輯 UDDI 網路服務網站清單

「網路服務選擇程式」提供 UDDI 式網路服務目錄清單，讓您選取網路服務。您可以編輯這個清單，新增或刪除網路服務目錄。如需詳細資訊，請參閱尋找網路服務發行者。

若要編輯網路服務網站清單：

  1. 在 Dreamweaver 中選取「視窗＞組件」，開啟「組件」面板。
  2. 在「組件」面板左上方的彈出式選單中，選取「網路服務」，然後按一下加號 (+) 按鈕，新增網路服務。

    「使用 WSDL 新增」對話方塊便會出現。

  3. 在「網路服務選擇程式」中按一下地球圖示，然後從彈出式選單中選取「編輯 UDDI 網站清單」。

    「UDDI 網站」對話方塊便會出現。

  4. 在「UDDI 網站」對話方塊中，您可以新增網路服務網站、編輯現有網站的名稱和 URL，以及移除不需要的網站。
    • 若要加入新的網站，或是修改現有的網站，請按一下「新增」或「編輯」按鈕，並完成螢幕上出現的對話方塊。
    • 若要移除現有的網站，請在清單中選取它，然後按一下「移除」按鈕。


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定網路服務選擇程式對話方塊選項
  • 設定 Proxy 產生器對話方塊選項
  • 設定預設的 Proxy 產生器對話方塊選項
  • 設定選取伺服器模式對話方塊選項
  • 設定 UDDI 網站對話方塊選項
  • ColdFusion Proxy 產生器對話方塊
  • 設定使用 Proxy 類別新增對話方塊


設定網路服務選擇程式對話方塊選項

這個對話方塊可讓您選取網路服務，並產生可讓網頁存取該服務的 Proxy。

若要設定網路服務選擇程式對話方塊選項：

  1. 請設定下列選項：

    WSDL 檔案的 URL 輸入 WSDL 檔案的 URL 或本機檔案路徑。Dreamweaver 會把這項資訊當成輸入讀取，並用來產生網路服務的 Proxy 和 Script 資訊。

    Proxy 產生器選取支援您所選擇之文件類型的 Proxy 產生器，產生網路服務 Proxy。

    Explorer 按鈕從選單中選取，其中包含 UDDI 登錄的 URL 純英文名稱和 WSDL 檔案的其他重要儲存機制。在您選取選單項目之後，瀏覽器便會出現並開啟選取的 URL。「選擇編輯瀏覽器清單」會開啟對話方塊以編輯瀏覽器偏好設定。

  2. 按一下「確定」。

相關主題

  • 使用 WSDL 說明新增網路服務 Proxy


設定 Proxy 產生器對話方塊選項

這個對話方塊可讓您定義新的 Proxy 產生器，或是修改、刪除或複製現有的 Proxy 產生器。

若要定義、修改或移除 Proxy 產生器：

  1. 請執行下列其中一項動作：
    • 若要將 Proxy 產生器加入清單之中，請按一下「新增」，然後完成螢幕上出現的對話方塊。

      如需詳細資訊，請參閱設定預設的 Proxy 產生器對話方塊選項。

    • 若要將某個 Proxy 產生器自清單中刪除，請在清單中將其選取，然後按一下「移除」。
    • 若要修改 Proxy 產生器，請在清單中選取，然後按一下「編輯」。在產生的對話方塊中進行變更。

      如需詳細資訊，請參閱設定預設的 Proxy 產生器對話方塊選項。

    • 若要建立 Proxy 產生器的複本，請在清單中選取，然後按一下「重製於原位」。
  2. 按一下「完成」。

相關主題

  • 關於 Proxy 產生器


設定預設的 Proxy 產生器對話方塊選項

這個對話方塊可讓您設定預設 Proxy 產生器的屬性。

若要設定預設的 Proxy 產生器：

  1. 請設定以下屬性：

    名稱是指出現在彈出式選單中的 Proxy 產生器實體名稱。

    支援的伺服器模式是指 Proxy 產生器所支援的伺服器模式清單。您可以使用加號 (+) 和減號 (-) 按鈕來編輯這個清單。

    按一下加號 (+) 按鈕會顯示「選取伺服器模式」對話方塊。請從可用伺服器模式的清單中，選取伺服器模式，然後按一下「確定」。

    產生 Proxy 命令會從 WSDL 資訊中產生 Proxy 原始碼。下列 Token 可以用在 Proxy 產生器命令中：

    編譯 Proxy 命令會將 Proxy 原始碼編譯為可執行的程式碼。

    檢查編譯的 Proxy 會從彈出式選單中選取檢查程式，檢查經過編譯的 Proxy。

    目標資料夾是指用來放置經過編譯之網路服務 Proxy 及其原始碼的資料夾。

  2. 按一下「確定」。

相關主題

  • 關於 Proxy 產生器
  • 使用 WSDL 說明新增網路服務 Proxy


設定選取伺服器模式對話方塊選項

「選取伺服器模式」對話方塊可讓您選取指定 Proxy 產生器所支援的伺服器模式。

若要選取伺服器模式：

  1. 請從清單中選取伺服器模式。您可以按住 Control 鍵在清單中同時選取多個伺服器模式。
  2. 按一下「確定」。

相關主題

  • 關於 Proxy 產生器
  • 使用 WSDL 說明新增網路服務 Proxy


設定 UDDI 網站對話方塊選項

「UDDI 網站」對話方塊可以新增、編輯或移除 UDDI 目錄，讓您輕易地瀏覽網路服務。

若要新增新的網站，或是編輯現有的網站：

  1. 請按一下「新增」按鈕以顯示「新增 UDDI 網站」對話方塊，或是按一下「編輯」按鈕以顯示「編輯 UDDI 網站」對話方塊。
  2. 如果您知道 UDDI 網站的名稱和 URL，請輸入這項資訊。

    您也可以按一下「位址」文字方塊旁的瀏覽器按鈕 (地球圖示)，以啟動網頁瀏覽器來尋找 UDDI 網站。

  3. 當您輸入 UDDI 網站的名稱和 URL 後，請按一下「確定」。

    新的或經過修改的 UDDI 網站會出現在「UDDI 網站」對話方塊的網站清單中。

  4. 按一下「完成」。

若要移除網站：

  1. 在清單中選取一個網站，然後按一下「移除」按鈕。
  2. 按一下「完成」

相關主題

  • 編輯 UDDI 網路服務網站清單


ColdFusion Proxy 產生器對話方塊

ColdFusion Proxy 產生器是無法設定的。

相關主題

  • 關於 Proxy 產生器
  • 使用 WSDL 說明新增網路服務 Proxy


設定使用 Proxy 類別新增對話方塊

這個對話方塊可讓您選取本機 .NET DLL 或 JSP 讀取器，在使用 .NET 或 JSP 開發架構時檢查網路服務 Proxy。

若要選取 Proxy 類別讀取器：

  1. 在文字方塊中輸入 Proxy 類別讀取器的位置。

    您可以按一下文字方塊右邊的「瀏覽」按鈕，瀏覽檔案。

  2. 從彈出式選單中選取您要使用的 Proxy 讀取器。

    有兩種預設的 Proxy 讀取器：

    • 適用於 ASP .NET 文件類型的 .NET DLL 讀取器
    • 適用於 JSP 文件類型的 Java 類別讀取器
  3. 按一下「確定」。

相關主題

  • 關於 Proxy 產生器
  • 設定預設的 Proxy 產生器對話方塊選項


新增自訂的伺服器行為

Macromedia Dreamweaver 8 隨附一組內建的伺服器行為，可讓您輕鬆地在網站中新增動態功能。如果您要擴充 Dreamweaver 的功能，您可以建立新的伺服器行為以符合您的開發需求，或者從 Macromedia Exchange 網站取得伺服器行為。

本章包含下列各節：

關於自訂伺服器行為

安裝協力廠商的伺服器行為

使用伺服器行為建立器

在伺服器行為中使用參數

定位程式碼區塊

為自訂的伺服器行為建立對話方塊

編輯和修改伺服器行為


關於自訂伺服器行為

在建立您自己的伺服器行為之前，請先檢閱 Macromedia Exchange 網站，看看在其他人已經建立的伺服器行為中，是否有與您想新增到自己網站中的相同功能。通常協力廠商的開發人員已建立並測試了符合您需要的伺服器行為。

透過 Macromedia Exchange 網站取得的伺服器行為和其他擴充功能，可讓您輕易地將新功能加入 Dreamweaver 中。每個伺服器行為包含一段簡短描述、使用者校閱和一個討論群組，您可以在該討論群組中公佈問題並從中取得您所下載的伺服器行為之支援。

如果您將要建立自己的伺服器行為，應該要熟悉您的網站所使用的網路程式設計語言。本章所提供的指導方針，是特別針對使用 Dreamweaver 建立伺服器行為，而不是教您如何使用程式設計語言或進行伺服器行為測試。

本節包含下列概念性主題：

  • 伺服器行為
  • 關於程式碼區塊
  • 伺服器行為中的參數
  • 讓程式碼區塊條件化
  • 有效率地使用條件運算式
  • 重複程式碼區塊
  • 程式碼撰寫方針
  • 測試伺服器行為


伺服器行為

如果您是精通 Macromedia ColdFusion、ASP.NET、JavaScript、VBScript、PHP 或 Java 的開發人員，可以撰寫自己的伺服器行為。建立伺服器行為的步驟包括下列工作：

  • 撰寫一或多個程式碼區塊以執行必要的動作。

    如需關於使用 Dreamweaver「伺服器行為建立器」建立伺服器行為的資訊，請參閱使用伺服器行為建立器。如需關於 Dreamweaver 伺服器行為所支援語法的資訊，請參閱在伺服器行為中使用參數。

  • 指定程式碼區塊在網頁 HTML 原始碼中的理想插入位置。

    如需關於在網頁內定位程式碼區塊的資訊，請參閱定位程式碼區塊。

  • 如果伺服器行為需要參數的指定值，則會建立一個對話方塊，用它來提示網路開發人員要套用行為，以提供適當的值。

    如需關於使用對話方塊為伺服器行為提供參數值的資訊，請參閱為自訂的伺服器行為建立對話方塊。

  • 在讓伺服器行為可供其他人使用之前先測試它。

    如需關於測試伺服器行為的指導方針，請參閱測試伺服器行為。


關於程式碼區塊

您在「伺服器行為建立器」中建立的程式碼區塊會封裝在出現於「伺服器行為」面板中的伺服器行為中。該程式碼可以是指定的伺服器模式之任何有效的執行階段程式碼。例如，如果您選擇 ColdFusion 作為您自訂的伺服器行為之文件類型，則您撰寫的程式碼必須是在 ColdFusion 應用程式伺服器上執行的有效 ColdFusion 程式碼。

相關主題

  • 程式碼撰寫方針

程式碼區塊

您可以直接在「伺服器行為建立器」內建立程式碼區塊，或者您可以從其他來源複製及貼上程式碼。您在「伺服器行為建立器」中建立的每個程式碼區塊必須是一個單一的標籤或 Script 區塊。如果您需要插入多個標籤區塊，請將它們分割成幾個單獨的程式碼區塊。

如需詳細資訊，請參閱使用伺服器行為建立器。

執行階段參數

您可以在執行階段程式碼中包含參數，並讓網頁設計人員提供參數值。若要這麼做，請在程式碼中輸入參數標記，如下所示：

@@parameterName@@

如需詳細資訊，請參閱在伺服器行為中使用參數。

程式碼區塊中的條件和重複元素

如果您希望只有在套用某些條件時，才執行整個程式碼區塊或部份的程式碼區塊，請使用下列語法：

<@ if (expression1) @>
   code block1
[<@ elseif (expression2) @>
   code block2]*
[<@ else @>
   code block3]
<@ endif @>

方括號 ([ ]) 代表選擇性的程式碼，而星號 (*) 代表零或更多實體。條件運算式是任何有效的 JavaScript 條件運算式，而且可以包含伺服器行為參數。

如果您希望重複多次整個程式碼區塊或部份的程式碼區塊，請使用下列語法：

<@ loop (@@param1@@,@@param2@@) @>
   code block
<@ endloop @>

loop 指示詞跟引數一樣，採用逗號分隔的參數陣列清單。重複文字將會被複製 n 次，其中 n 是參數陣列引數的長度。如果指定一個以上的參數陣列引數，則所有陣列的長度都必須相同。在迴圈進行第 i 次評估時，參數陣列的第 i 個元素會取代程式碼區塊中的相關參數實體。

如需關於程式碼撰寫的一般資訊，請參閱程式碼撰寫方針。

相關主題

  • 讓程式碼區塊條件化
  • 重複程式碼區塊

網頁中的程式碼區塊定位

當您使用「伺服器行為建立器」建立程式碼區塊時 (如需詳細資訊，請參閱使用伺服器行為建立器)，您必須指定要在哪裡將此程式碼區塊插入網頁的 HTML 程式碼中。若要完成這項作業，請使用「伺服器行為建立器」對話方塊的「插入程式碼」和「相對位置」彈出式選單，這兩個彈出式選單能讓您選取要在哪裡將文字碼區塊插入文件之中，然後指定它與網頁中其他標籤的相對位置。

例如，如果您將程式碼區塊插入開頭 <HTML> 標籤的上方，則接下來必須指定該程式碼區塊對於其他標籤、Script 和伺服器行為的相對位置，而上述的標籤、Script 和伺服器行為必須和該程式碼區塊位於網頁 HTML 程式碼的同一區段中。典型的範例包括：將行為置於任何資料集查詢的前方或後方，而這些資料集查詢同時存在於網頁程式碼中開頭 <HTML> 標籤的上方。

當您在「插入程式碼」彈出式選單中選取了定位選項之後，「相對位置」彈出式選單中的可用選項亦會隨之變更，為該網頁段落提供相關選項。例如，如果您在「插入程式碼」彈出式選單中選取了「在 <html> 標籤上方」，則「相對位置」彈出式選單中的可用定位選項將會反映出該網頁段落的相關選擇。

下表列出了程式碼區塊插入選項以及適用於每個選項的相關定位選項。

插入程式碼選項

相對位置選項

在 <html> 標籤上方
  • 這個檔案的開頭
  • 在資料集之前
  • 在資料集之後
  • 在 <html> 標籤上方
  • 自訂位置

在 </html> 標籤之下
  • 在檔案結束前
  • 在資料集關閉前
  • 在資料集關閉之後
  • 在 </html> 標籤之後
  • 自訂位置

相對於一個特別的標籤

在「標籤」彈出式選單中選取一個標籤，然後在標籤定位選項中進行選擇。

相對於選取內容

選取範圍前

選取範圍後

取代這個選取範圍

圍繞選取範圍

如果想要指定一個自訂位置，您必須為程式碼區塊指定權數。當您需要以特別順序插入一個以上的程式碼區塊時，請使用「自訂位置」選項。例如，如果您想要在開啟資料集的程式碼區塊之後插入三個依順序排列的程式碼區塊系列，您可以為第一個區塊輸入 60 的權數，第二個輸入 65，第三個輸入 70。

預設情況下，Dreamweaver 會將所有在 <html> 標籤上方插入的資料集開頭程式碼區塊的權數指定為 50。如果有兩個或多個區塊的權數符合，Dreamweaver 會隨機設定區塊之間的順序。

相關主題

  • 關於程式碼區塊
  • 定位程式碼區塊


伺服器行為中的參數

您可以在伺服器行為的程式碼中包含參數，並在將伺服器行為的程式碼插入網頁之前，讓網頁設計人員先提供必要的參數值。若要讓網頁設計人員提供參數值，請在程式碼內輸入參數標記，如下所示：

@@parameterName@@

以下的 ASP 伺服器行為範例包含參數 formParam，它需要插入行為的人提供表單物件的名稱：

<% Session("lang_pref") = Request.Form("formParam"); %>

若要建立能讓使用者提供必要值的參數：

  1. 在參數標記中包含 formParam 字串：
    <% Session("lang_pref") = Request.Form("@@formParam@@"); %>
  2. 建立對話方塊，提示設計人員要提供表單物件的名稱。如需詳細資訊，請參閱為自訂的伺服器行為建立對話方塊。


讓程式碼區塊條件化

Dreamweaver 可讓您開發包含控制項陳述式的程式碼區塊，而這些陳述式是依條件執行的。「伺服器行為建立器」會使用 if、elseif 和 else 陳述式，而且也可以包含伺服器行為參數。這可以讓您根據伺服器行為參數之間的 OR 值關係，插入替代的文字區塊。if、elseif 和 else 陳述式會以下列方式出現。請注意方括號 ([ ]) 代表選擇性的程式碼，而星號 (*) 代表零或更多實體：

<@ if (expression1) @>
   conditional text1
[<@ elseif (expression2) @>
   conditional text2]*
[<@ else @>
   conditional text3]
<@ endif @>

條件運算式可以是任何能夠使用 JavaScript 的 eval() 函式進行評估的 JavaScript 運算式，而且它還能包含以 @@ 所標記的伺服器行為參數 (若要區分參數和 JavaScript 的變數和關鍵字之間的差異，@@ 是必要的)。

您可以在條件指示詞內，將任何數目的條件或 loop 指示詞巢狀化 (請參閱重複程式碼區塊)。例如，您可以指定若運算式成立 (true) 則執行迴圈。

注意

每個「@>」之後的新行會加以略過。

本節包含下列主題：

  • 有效率地使用條件運算式
  • 重複程式碼區塊

相關主題

  • 關於程式碼區塊


有效率地使用條件運算式

在 insertText XML 標籤中使用 if、else 和 elseif 指示詞時，參與的文字會預先處理以解析 if 指示詞，並決定要將哪個文字包含在結果中。if 和 elseif 指示詞會將運算式視為引數。條件運算式相當於 JavaScript 條件運算式，而且它還能包含伺服器行為參數。諸如此類的指示詞，能讓您根據伺服器行為參數的值或其間的關係，在替代的程式碼區塊之間加以選擇。

例如，以下所示的 JSP 程式碼來自使用條件程式碼區塊的 Dreamweaver 伺服器行為：

@@rsName@@.close();
<conditional_code>
@@rsName@@_hasData = @@rsName@@.next();

如果伺服器行為使用一般的資料集，則 conditional_code 預留位置會被取代為：

@@rsName@@ = Statement@@rsName@@.executeQuery();

如果伺服器行為使用來自可呼叫物件的資料集，它會使用下列程式碼來取代。

@@callableName@@.execute();

@@rsName@@ = @@callableName@@.getResultSet();

如果伺服器行為是為了可呼叫物件而新增的，則使用者可以在伺服器行為的「參數」對話方塊中輸入 @@callableName@@ 參數的值。否則，@@callableName@@ 參數會是空的。因此，您可以將 @@callableName@@ 當做 if 引數使用，重新撰寫前一段插入文字。在這個範例中，如果 @@callableName@@ 參數是與值一起提供的，並選取了第一個條件程式碼區塊 (其中包含 getResultSet() 方法)：

@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();


重複程式碼區塊

建立伺服器行為時，您可以使用迴圈建構，將程式碼區塊重複指定的次數。迴圈語法是：

<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>
   code block
<@ endloop @>

loop 指示詞跟引數一樣，接受逗號分隔的參數陣列清單。在這種情況下，參數陣列引數可讓使用者為單一參數提供數個值。重複文字將會被複製 n 次，其中 n 是參數陣列引數的長度。如果指定一個以上的參數陣列引數，則所有陣列的長度都必須相同。在迴圈進行第 i 次評估時，參數陣列的第 i 個元素會取代程式碼區塊中的相關參數實體。如需詳細資訊，請參閱使用 loop 指示詞的 _length 和 _index 變數。

在您稍後為伺服器行為建立對話方塊 (請參閱為自訂的伺服器行為建立對話方塊) 時，您可以在對話方塊中新增控制項，讓網頁設計人員建立參數陣列。Dreamweaver 包含簡單的陣列控制項，讓您可以用來建立對話方塊。這個控制項叫做「以逗號分隔的文字欄位清單」，可以透過「伺服器行為建立器」來使用。若要建立較大複雜性的使用者介面元素，請參閱 API 文件來建立含控制項的對話方塊，就能建立陣列 (例如，方格控制項)。

Loop 指示詞不可以巢狀化，但是在 loop 指示詞中的條件指示詞則可以巢狀化 (請參閱定位程式碼區塊)。

以下範例顯示這種重複程式碼區塊如何用來建立伺服器行為 (此範例是用來存取預存程序的 ColdFusion 行為)：

<CFSTOREDPROC procedure="AddNewBook"
   datasource=#MM_connection_DSN#
   username=#MM_connection_USERNAME#
   password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
   cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
   cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>

在這個範例中，CFSTOREDPROC 標籤可以包含零或多個 CFPROCPARAM 標籤。然而，如果不支援 loop 指示詞，就無法在插入的 CFSTOREDPROC 標籤內包含 CFPROCPARAM 標籤。如果要像建立伺服器行為一樣不使用 loop 指示詞，您可能需要將此範例分隔成兩個部份：一個主要的 CFSTOREDPROC 標籤，和具有多種參與類型的 CFPROCPARAM 標籤。

使用 loop 指示詞，則相同的程序可以寫成如下所示：

<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
   <CFPROCPARAM type="IN"
   dbvarname="@@paramName@@"
   value="@@value@@"
   cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>

在上述範例中，@> 之後的新行會被忽略，就跟條件程式碼區塊的情況一樣。

如果使用者在「伺服器行為建立器」對話方塊中輸入下列參數值：

procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]

則伺服器行為會在網頁中插入下列執行階段程式碼：

<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>

<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"
   cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
   cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
   cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>

注意

除了作為條件指示詞運算式的某個部份之外，參數陣列不能在迴圈之外使用。


使用 loop 指示詞的 _length 和 _index 變數

loop 指示詞包含兩個內建變數，可用於內嵌的 if 條件式。這兩個變數是：_length 和 _index。_length 變數會評估 loop 指示詞所處理的陣列長度，而 _index 變數則會評估 loop 指示詞目前的索引。若要確保這兩個變數都只會視為指示詞，而不會視為實際參數並傳遞到迴圈內，請不要在 @@’ 內包含這兩個變數。

使用內建變數的一個範例是：將其套用至網頁指示詞的 import 屬性中。import 屬性需要逗號分隔的套件。如果 loop 指示詞擴充到整個 import 屬性，您將只會在迴圈的第一個疊代運算上輸出屬性名稱 import=，這會包含結束的雙引號 (")，而不會在迴圈的最後一個疊代運算上輸出逗號。您可以使用內建變數，將其表示如下：

<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>


程式碼撰寫方針

一般而言，伺服器行為的程式碼應該要穩定而且不佔空間。網路應用程式開發人員對加入他們的網頁之程式碼是非常敏感的。請依照文件類型的語言 (ColdFusion、ASP.NET、JavaScript、VBScript、PHP、Visual Basic 或 Java) 普遍接受的程式碼實作方式。在撰寫註解時，請考慮可能需要了解程式碼的不同技術對象，如網路和互動設計者或其他網路應用程式開發人員。請包含能準確描述程式碼用途的註解，以及在網頁內包含註解的任何特殊指示。

當您在建立伺服器行為時，請牢記下列程式碼撰寫原則 (以清單方式列出)：

錯誤檢查是重要的需求。伺服器行為的程式碼應該要能妥善地處理錯誤情況。試著預見每種可能的錯誤情況。例如，如果參數要求失敗的話怎麼辦？如果查詢沒有傳回記錄的話怎麼辦？

唯一名稱有助於確保您的程式碼是可以清楚識別的，並避免與現有的程式碼產生名稱衝突。例如，如果網頁包含了稱為 hideLayer() 的函式以及稱為 ERROR_STRING 的全域變數，而您的伺服器行為也插入了使用這些名稱的程式碼，則伺服器行為便可能會與現有的程式碼衝突。

程式碼前置詞可讓您在網頁中識別自己的執行階段函式和全域變數。有一個慣例是使用您的姓名縮寫。絕對不要使用 MM_ 前置詞，因為它只保留給 Macromedia 使用。Macromedia 會在所有函式和全域變數之前加上前置詞 MM_，以防止它們與您撰寫的任何程式碼發生衝突。

var MM_ERROR_STRING = "...";
function MM_hideLayer() {

避免類似的程式碼區塊，讓您撰寫的程式碼不會與其他區塊中的程式碼過於近似。如果程式碼區塊看起來太像網頁上的另一個程式碼區塊，「伺服器行為」面板可能會將第一個程式碼區塊錯誤識別為第二個程式碼區塊的實體 (或反之)。有一個簡單的解決方案是在程式碼區塊中加入註解，就能讓它更獨特。

相關主題

  • 關於自訂伺服器行為
  • 伺服器行為


測試伺服器行為

Macromedia Exchange 建議您在建立的每一個伺服器行為上執行下列測試：

  • 從「伺服器行為」面板套用行為。如果出現對話方塊的話，請在每個欄位中輸入有效的資料，然後按一下「確定」。在套用行為時，請確定沒有發生錯誤。請確認伺服器行為的執行階段程式碼出現在「程式碼」檢視窗中。
  • 再套用一次伺服器行為，然後在對話方塊的每個欄位中輸入無效的資料。試著讓欄位保留空白、使用較大的數字或負數、使用無效的字元 (如 /、?、:,、* 等等)，以及在數字欄位中使用字母。您可以撰寫表單驗證程序來處理無效的資料 (驗證程序與手寫程式碼有關，而這超過本手冊的範圍)。

在將伺服器行為成功套用至網頁之後，請確認下列事項：

  • 檢查「伺服器行為」面板，確定伺服器行為的名稱有出現在加入網頁的行為之清單中。
  • 如果可能的話，請確認伺服器端 Script 圖示出現在網頁上。一般伺服器端 Script 圖示是金黃色的外觀。若要查看圖示，請啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)。
  • 在「程式碼檢視」(「檢視＞程式碼」) 中，確認並未產生任何無效的程式碼。

此外，如果您的伺服器行為在與資料庫建立連線的文件中插入程式碼，請建立一個測試資料庫來測試插入文件中的程式碼。透過定義產生不同的資料集和相異的資料集大小之查詢來確認連線。

最後，將網頁上傳到伺服器並在瀏覽器中開啟它。檢視網頁的 HTML 原始碼，並確認伺服器端的 Script 並未產生任何無效的 HTML。


安裝協力廠商的伺服器行為

您可以從 Macromedia Exchange 網站下載並安裝由獨立開發人員建立的伺服器行為。

若要存取 Macromedia Exchange：

  1. 在 Dreamweaver 中選取「說明＞Dreamweaver Exchange」。

    您的瀏覽器便會開啟 Macromedia Exchange for Dreamweaver 網頁。

  2. 使用您的 Macromedia ID 來登入 Exchange，或者如果您還沒有為自己建立 Macromedia Exchange ID 的話，則依循指示來開啟 Macromedia 帳戶。

    注意

    您也可以從「伺服器行為」面板 (「視窗＞行為」)，按一下加號 (+) 按鈕並選取「取得更多伺服器行為」，就能存取 Macromedia Exchange。

若要在 Dreamweaver 中安裝伺服器行為或其他擴充功能：

  1. 選取「命令＞管理擴充功能」以啟動「管理擴充功能」。
  2. 選取「檔案＞在擴充功能管理員中安裝套件」。

    如需詳細資訊，請參閱使用擴充功能管理員。

相關主題

  • 關於自訂伺服器行為
  • 伺服器行為


使用伺服器行為建立器

「伺服器行為建立器」是用來新增由行為插入網頁中的程式碼區塊。

若要撰寫伺服器行為程式碼區塊：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，並從彈出式選單中選取「新增伺服器行為」。

    「新增伺服器行為」對話方塊便會出現。

  2. 從「文件類型」彈出式選單中，選取您正在為其開發伺服器行為的文件類型。
  3. 在「名稱」文字方塊中，輸入伺服器行為的名稱。
  4. 如果您想要複製現有的伺服器行為，並將其加入您正在建立的行為中，請選取「複製現有的伺服器行為」核取方塊。

    選取這個核取方塊時，會在「複製行為」彈出式選單中顯示可用的伺服器行為清單。

  5. 按一下「確定」。

    「伺服器行為建立者」對話方塊便會出現。

  6. 若要新增程式碼區塊，請按一下加號 (+) 按鈕。

    「建立新的程式碼區塊」對話方塊便會出現。

  7. 為您想要建立的程式碼區塊輸入名稱，然後按一下「確定」。

    您在對話方塊中輸入的名稱將會出現在「伺服器行為建立者」中，而且您會在「程式碼區塊」文字方塊中看到適當的 Script 標籤。

  8. 在「程式碼區塊」文字方塊中，輸入實作伺服器行為的必要程式碼。

    當您在「程式碼區塊」文字方塊中輸入程式碼時：

    • 您可以分別為每個已命名的程式碼區塊插入單一標籤或單一程式碼區塊 (例如 myBehavior_block1、myBehavior_block2、myBehavior_blockn 等)。如果您需要輸入多個標籤或多個程式碼區塊，則必須使用「伺服器行為建立器」，分別為每個程式碼區塊建立單獨的程式碼區塊。
    • 若要在程式碼區塊中加入執行階段參數：
    1. 請將插入點置於您想要在程式碼區塊中插入參數的位置。
    2. 按一下「插入參數至程式碼區塊」按鈕。

      「插入參數至程式碼區塊」對話方塊便會出現。

    3. 請在「參數名稱」文字方塊中，為參數輸入名稱。
    4. 按一下「確定」。

      便會將參數名稱插入程式碼區塊中。

    • 請分別為您想要建立的每個新程式碼區塊重覆步驟 6 至 8。
  9. 在「參數名稱」彈出式選單中輸入參數名稱，然後按一下「確定」。

    即會在定義參數前程式碼區塊中插入點的所在位置插入參數。

  10. 從「插入程式碼」彈出式選單中選取指定內嵌程式碼區塊的位置之選項。

    如需詳細資訊，請參閱定位程式碼區塊。

  11. 您可以使用「進階」選項面板，為您正在建立的伺服器指定其他相關資訊。
  12. 按一下「進階」按鈕，以顯示更多選項。

  13. 若您需要建立更多程式碼區塊，請依照您的需求重複步驟 7 到步驟 13 。
  14. 如果伺服器行為需要提供參數，您將需要建立一個對話方塊來接受套用行為的人所提供的參數。

    若要建立能夠接受使用者輸入參數的對話方塊，請參閱為自訂的伺服器行為建立對話方塊。

  15. 在執行完您建立的伺服器行為所需的以上步驟之後，請按一下「確定」。

    建立伺服器行為之後，它會被列在「伺服器行為」面板中。測試伺服器行為並確定它正確運作。

相關主題

  • 定位程式碼區塊
  • 重複程式碼區塊
  • 程式碼撰寫方針
  • 定位程式碼區塊
  • 在伺服器行為中使用參數


在伺服器行為中使用參數

您可以在伺服器行為的程式碼中包含參數 (如需詳細資訊，請參閱伺服器行為中的參數)，並在將伺服器行為的程式碼插入網頁之前，讓網頁設計人員提供必要的參數值。若要讓網頁設計人員提供參數值，請在程式碼內輸入參數標記，如下所示：

@@parameterName@@

以下的 ASP 伺服器行為範例包含參數 formParam，這個參數需要由插入行為的人來提供表單物件的名稱：

<% Session("lang_pref") = Request.Form("formParam"); %>

若要建立能讓使用者提供必要值的參數：

  1. 在參數標記中包含 formParam 字串：
    <% Session("lang_pref") = Request.Form("@@formParam@@"); %>
  2. 建立對話方塊，提示設計人員要提供表單物件的名稱。

    如需詳細資訊，請參閱為自訂的伺服器行為建立對話方塊。


定位程式碼區塊

當您使用「伺服器行為建立器」建立程式碼區塊時 (如需詳細資訊，請參閱使用伺服器行為建立器)，您必須指定要在哪裡將此程式碼區塊插入網頁的 HTML 程式碼中。「插入程式碼」和「相對位置」彈出式選單能讓您選擇要在哪裡將文字碼區塊插入文件之中，然後讓您指定相對於網頁中另一個標籤的相對位置。

若要進一步了解程式碼區塊定位選項，以及這些選項會對您的自訂伺服器行為造成哪些影響，請參閱網頁中的程式碼區塊定位。

若要定位程式碼區塊 (一般說明)：

  1. 請使用「伺服器行為建立器」，依照使用伺服器行為建立器小節內容，撰寫程式碼區塊。
  2. 請在「伺服器行為建立器」對話方塊中，從「插入程式碼」彈出式選單中選取您要插入程式碼區塊的位置。
  3. 請在「伺服器行為建立器」對話方塊中，選取您在「插入程式碼」彈出式選單中選取位置的相對位置。
  4. 如果您已經完成程式碼區塊的編寫，請按一下「確定」。

    伺服器行為將會列於「伺服器行為」面板 (「視窗＞伺服器行為」) 中，您可以按一下「加號 (+)」按鈕來進行檢視。

  5. 測試伺服器行為並確定它正確運作。

    如需詳細資訊，請參閱測試伺服器行為。

若要在網頁上相對於另一個標籤的位置上定位程式碼區塊：

  1. 在「插入程式碼」彈出式選單中，選取「相對於一個特別的標籤」。
  2. 在「標籤」文字方塊中，請輸入標籤或從彈出式選單中選取一個。

    如果您輸入標籤，請不要包含角括號 (< >)。

  3. 透過在「相對位置」彈出式選單中選擇選項來指定相對於標籤的位置。

    您可以在開頭或結束標籤之前或之後插入程式碼區塊。您也可以用程式碼來取代標籤，將程式碼視同標籤屬性值般插入 (會出現可讓您選取屬性的方塊)，或將程式碼插入開頭標籤之內。

若要將程式碼區塊定位在網頁設計人員所選取的標籤之相對位置：

  1. 在「插入程式碼」彈出式選單中，選取「相對於選取內容」。
  2. 透過在「相對位置」彈出式選單中選擇選項來指定相對於選取範圍的位置。

    您可以在選取範圍之前或之後插入程式碼區塊。您也可以用程式碼區塊來取代選取範圍，或者將程式碼區塊繞著選取範圍斷行。

    如果您想要將程式碼區塊繞著選取範圍斷行，則選取範圍所包含的開頭和結束標籤之間不能包含任何東西，如下所示：

    <CFIF Day="Monday"></CFIF>

    程式碼區塊的開頭標籤片段會插入選取範圍的開頭標籤之前，而程式碼區塊的結束標籤片段則會插入選取範圍的結束標籤之後。

相關主題

  • 關於自訂伺服器行為
  • 網頁中的程式碼區塊定位
  • 使用伺服器行為建立器


為自訂的伺服器行為建立對話方塊

伺服器行為經常需要網頁設計人員提供參數值。您必須在將伺服器行為程式碼插入網頁之前，先將這個值插入。若要這麼做，您可以建立一個對話方塊，用來提示使用此伺服器行為的人提供參數值。

藉由在程式碼中定義設計人員所提供的參數，就能建立對話方塊。在定義完所有參數之後，您可以產生伺服器行為的對話方塊。

注意

如果您指定程式碼應該插入網頁設計人員所選擇的特定標籤之相對位置上 (也就是說，您在「插入程式碼」彈出式選單中選擇了「相對於一個特別的標籤」)，則參數會在沒有您操作的情況下加入程式碼區塊中。該參數會將標籤選單加入該行為的對話方塊中，讓網頁設計人員可以選取標籤。

若要在伺服器行為的程式碼中建立參數：

  • 在您想要於程式碼中插入所提供參數值的位置上，輸入參數標記。參數的語法如下：
    @@parameterName@@

例如，如果伺服器行為包含下列程式碼區塊：

<% Session("lang_pref") = Request.Form("Form_Object_Name"); %>

若要讓網頁設計人員提供 Form_Object_Name 的值，請在參數標記 (@@) 中包含字串：

<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>

您也可以將該字串以反白標示，然後按一下「插入參數至程式碼區塊」按鈕。輸入參數名稱並按一下「確定」。Dreamweaver 會以包含在參數標記內的指定參數名稱，來取代反白標示之字串的每個實體。

Dreamweaver 會使用您包含在參數標記內的字串，在它所產生的對話方塊上為控制項加上標籤 (請參閱以下程序)。在上述範例中，Dreamweaver 會建立包含以下標籤的對話方塊：

注意

伺服器行為程式碼中的參數名稱不可以有任何空格。因此，對話方塊標籤不能有任何空格。如果您想要在標籤內包含空格，您可以編輯所產生的 HTML 檔。

若要建立伺服器行為的對話方塊：

  1. 在「伺服器行為建立器」中按一下「下一步」。

    會出現一個對話方塊，列出您在程式碼中定義的所有設計人員提供的參數。

  2. (選擇性) 您可以變更對話方塊控制項的顯示順序，只要選取參數，並按一下向上和向下箭頭即可。
  3. (選擇性) 如果您想要的話，可以變更參數的控制項，只要選取該參數，並選擇「顯示為」欄中的其他控制項即可。
  4. 按一下「確定」。

    Dreamweaver 會產生一個對話方塊，內含您所定義每個設計人員提供之參數的標示控制項。

若要檢視對話方塊：

  • 請按一下「伺服器行為」面板 (「視窗＞伺服器行為」) 中的加號 (+) 按鈕，然後從彈出式選單中選取伺服器行為。

若要編輯您所建立的伺服器行為之對話方塊：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，並從彈出式選單中選取「編輯伺服器行為」。
  2. 從清單中選取伺服器行為，然後按一下「開啟」。

    「伺服器行為建立器」會與您的伺服器行為一起出現。

  3. 按一下「下一步」。

    會出現一個對話方塊，列出您在程式碼中定義的所有設計人員提供的參數。

  4. (選擇性) 您可以變更對話方塊控制項的顯示順序，只要選取參數，並按一下向上和向下箭頭即可。
  5. (選擇性) 如果您想要的話，可以變更參數的控制項，只要選取該參數，並選擇「顯示為」欄中的其他控制項即可。
  6. 按一下「確定」。


編輯和修改伺服器行為

您可以編輯任何使用「伺服器行為建立器」建立的伺服器行為，包括您從 Macromedia Exchange 網站下載的伺服器行為，以及來自其他協力廠商開發人員的伺服器行為。

如果您將伺服器行為套用至網頁，然後在 Dreamweaver 中編輯行為，舊版行為的實體將不會再出現在「伺服器行為」面板中。「伺服器行為」面板會在網頁中搜尋符合已知的伺服器行為程式碼的程式碼。如果面板偵測到已知的伺服器行為之程式碼變更了，則面板在網頁上將不會再辨識該舊版的行為。

如果您希望新舊版本的行為同時出現在面板中：

  • 請按一下「伺服器行為」面板 (「視窗＞伺服器行為」) 上的「加號 (+)」按鈕，然後選取「新增伺服器行為」，並為舊版的伺服器行為建立一份複本。

若要編輯用「伺服器行為建立器」建立的伺服器行為之程式碼：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，並從彈出式選單中選取「編輯伺服器行為」。

    「編輯伺服器行為」對話方塊便會出現，顯示出目前伺服器技術的所有行為。

  2. 選取伺服器行為並按一下「編輯」。

    「伺服器行為建立器」對話方塊便會出現。

  3. 選取適當的程式碼區塊，並修改要插入網頁中的程式碼。
  4. (選擇性) 您可以對程式碼進行變更，或是在程式碼中加入參數標記。

    如需相關說明，請參閱為自訂的伺服器行為建立對話方塊。

  5. (選擇性) 如果您想要的話，可以變更程式碼區塊在網頁 HTML 程式碼中插入的位置，只要在「插入程式碼」彈出式選單中選擇其他選項即可。

    如需相關說明，請參閱定位程式碼區塊。

  6. 如果修改過的程式碼不包含任何設計人員提供的參數，請按一下「確定」。

    Dreamweaver 會重新產生伺服器行為，但是不會出現對話方塊。新的伺服器行為會出現在「伺服器行為」面板的加號 (+) 彈出式選單中。

  7. 如果修改過的程式碼包含設計人員提供的參數，請按一下「下一步」。

    Dreamweaver 會詢問您是否要建立一個新的對話方塊，來覆寫舊的對話方塊。進行變更並按一下「確定」。

Dreamweaver 會將所有變更儲存在伺服器行為的 EDML 檔案中。


參考

本節將提供這一章裡所介紹的下列對話方塊之相關資訊：

  • 設定新增伺服器行為對話方塊選項
  • 設定伺服器行為建立器對話方塊選項
  • 設定插入參數至程式碼區塊對話方塊選項
  • 設定建立新的程式碼區塊對話方塊選項
  • 設定「產生行為對話方塊」對話方塊選項
  • 設定編輯伺服器行為對話方塊選項


設定新增伺服器行為對話方塊選項

這個對話方塊可讓您選擇要為其開發伺服器行為的文件類型，並為新的伺服器行為命名。

若要完成「新增伺服器行為」對話方塊：

  1. 從彈出式選單中選取一種文件類型。

  2. 為伺服器行為輸入名稱。
  3. 如果您希望新增的伺服器行為是以 Dreamweaver 隨附的伺服器行為作為基礎，請選取「複製現有的伺服器行為」選項，並在「複製行為」彈出式選單中選取 Dreamweaver 伺服器行為。
  4. 按一下「確定」。

    「新增伺服器行為建立器」便會出現。

相關主題

  • 伺服器行為
  • 使用伺服器行為建立器


設定伺服器行為建立器對話方塊選項

完成「伺服器行為建立器」對話方塊：

  1. 按一下加號 (+) 按鈕，輸入程式碼區塊的名稱，再按一下「確定」，便可開始一個程式碼區塊。

    命名程式碼區塊的慣例如下：

    NameOfBehavior_NameOfBlock

    以下為範例：

    MoveToRecord_Init

  2. 在「程式碼區塊」文字區中，輸入要插入網頁中的執行階段程式碼。

    執行階段程式碼必須是單一的標籤區塊或 Script 區塊。如果您需要插入多個標籤或 Script 區塊，請將它們分割成幾個單獨的程式碼區塊。您也可以從其他網頁複製及貼上程式碼。

    如需詳細資訊，請參閱下列各節：

    • 在伺服器行為中使用參數
    • 定位程式碼區塊
    • 重複程式碼區塊
    • 程式碼撰寫方針
  3. 請使用「插入程式碼」彈出式選單，指定程式碼區塊在網頁 HTML 原始碼中插入的位置。

    程式碼區塊會插入網頁中相對於標籤的位置或相對於網頁設計人員所選取的標籤位置。如需詳細資訊，請參閱定位程式碼區塊。

  4. 若要指定更多進階設定，請按一下「進階」。

    一旦您指定了原始碼及每個程式碼區塊的插入位置，便完整地定義了伺服器行為。在大部份的情況下，您不需要指定任何其他的資訊。

    如果您是一名進階使用者，您可能會想要按一下「伺服器行為建立器」中的「進階」按鈕，以修改其他參數。建立器會展開以顯示數個新選項。

    識別符號指定是否應該將程式碼區塊視為識別名稱。

    依預設值，每個程式碼區塊都是識別名稱。如果 Dreamweaver 在文件的任何位置發現識別名稱程式碼區塊，它會在「伺服器行為」面板中列出該行為。使用「識別名稱」核取方塊來指定是否應該將程式碼區塊視為識別名稱。

    在伺服器行為的程式碼區塊中，至少必須有一個是識別名稱。如果適用以下任一條件，則該程式碼區塊就不應該是識別名稱：同一個程式碼區塊被一些其他伺服器行為使用；或者程式碼區塊簡單到可能網頁上自然就會發生該動作。

    伺服器行為標題指定「伺服器行為」面板中的行為標題。

    當網頁設計人員按一下「伺服器行為」面板上的加號 (+) 按鈕時，新伺服器行為的標題就會出現在彈出式選單中。當設計人員將伺服器行為的實體套用至文件時，行為就會出現在「伺服器行為」面板中已套用行為的清單中。請使用「伺服器行為標題」文字方塊，為「加號 (+)」彈出式選單和已套用行為的清單指定內容。

    方塊中的初始值是您在「新增伺服器行為」對話方塊中所提供的名稱。在定義參數時，會自動更新名稱，如此參數就會出現在伺服器行為名稱後的括號內。

    設定 Session 變數 (@@Name@@, @@Value@@)如果使用者接受預設值，則在括號之前的所有內容都會出現在加號 (+) 彈出式選單中 (例如，Set Session Variable)。名稱加上參數會出現在已套用行為的清單中，例如，Set Session Variable ("abcd", "5")。

    選取程式碼區塊指定當使用者在「伺服器行為」面板中選取行為時，會選取何種程式碼區塊。

    當您套用伺服器行為時，該行為中的其中一個程式碼區塊就會被指定為「要選取的程式碼區塊」。如果您套用伺服器行為，然後在「伺服器行為」面板中選取該行為，在「文件」視窗中，Dreamweaver 會自動選取指定的區塊。依預設值，Dreamweaver 會選取不在 html 標籤上方的第一個程式碼區塊。如果所有程式碼區塊都在 html 標籤上方，則 Dreamweaver 會選取第一個程式碼區塊。進階使用者可以指定要選取哪一個程式碼區塊。

  5. 為伺服器行為中的每個程式碼區塊重複步驟 1 至步驟 4。
  6. 如果有兩個或更多程式碼區塊使用相同的插入位置，您可以變更它們彼此的相對位置，只要按一下向上及向下箭頭即可。
  7. 請執行下列其中一項作業：
    • 如果您並未在程式碼中定義任何由設計人員提供的參數，請按一下「確定」。

      Dreamweaver 會建立伺服器行為，但是不會出現任何對話方塊。新的伺服器行為會出現在「伺服器行為」面板的加號 (+) 選單中。

    • 如果您在程式碼中定義了由設計人員提供的參數，Dreamweaver 會提示您在建立伺服器行為之前，先為該伺服器行為設定對話方塊。

      如需詳細資訊，請參閱為自訂的伺服器行為建立對話方塊。

相關主題

  • 伺服器行為
  • 使用伺服器行為建立器
  • 在伺服器行為中使用參數
  • 在伺服器行為中使用參數
  • 定位程式碼區塊
  • 重複程式碼區塊
  • 程式碼撰寫方針
  • 定位程式碼區塊
  • 為自訂的伺服器行為建立對話方塊


設定插入參數至程式碼區塊對話方塊選項

這個對話方塊讓您可以在具有參數標記的程式碼區塊中，將選取字串的每個實體加以取代。

若要取代程式碼區塊中字串的每個實體：

  1. 輸入一個參數名稱。

    範例：Session

  2. 按一下「確定」。

Dreamweaver 會在具有參數標記的程式碼區塊中，將選取字串的每個實體加以取代 (例如，@@Session@@)。

相關主題

  • 在伺服器行為中使用參數
  • 為自訂的伺服器行為建立對話方塊


設定建立新的程式碼區塊對話方塊選項

這個對話方塊的用途是在「伺服器行為建立器」中，建立程式碼區塊並為其命名。

若要使用「伺服器行為建立器」來命名及建立程式碼區塊：

  • 在文字方塊中輸入名稱，然後按一下「確定」。

相關主題

  • 使用伺服器行為建立器


設定「產生行為對話方塊」對話方塊選項

這個對話方塊會產生一個對話方塊，供需要由使用者輸入的自訂伺服器行為使用。它也可以用來編輯這類的對話方塊。

當此對話方塊開啟時，它會列出程式碼中定義好的所有提供參數。如需詳細資訊，請參閱為自訂的伺服器行為建立對話方塊。

若要建立供使用者輸入的對話方塊：

  1. 若要變更對話方塊控制項的顯示順序，請選取參數，再按一下向上和向下箭頭。
  2. 若要變更參數的控制項，請選取參數，然後選取「顯示為」欄中的另一個控制項。
  3. 按一下「確定」。

Dreamweaver 會為您自訂的伺服器行為產生一個對話方塊，或是更新現有的對話方塊。

相關主題

  • 為自訂的伺服器行為建立對話方塊
  • 在伺服器行為中使用參數
  • 使用伺服器行為建立器


設定編輯伺服器行為對話方塊選項

這個對話方塊可讓您選取所要編輯的伺服器行為。

若要編輯伺服器行為：

  1. 選取文件類型及伺服器行為。
  2. 按一下「編輯」。

    「編輯伺服器行為」對話方塊便會出現，讓您可以編輯伺服器行為。如需詳細資訊，請參閱編輯和修改伺服器行為。

相關主題

  • 編輯和修改伺服器行為
  • 使用伺服器行為建立器
  • 定位程式碼區塊


建立表單

您可以使用 Macromedia Dreamweaver 8，建立具有文字欄位、密碼欄位、選項按鈕、核取方塊、彈出式選單、可按的按鈕和其他表單物件的表單。Dreamweaver 也可以撰寫驗證瀏覽者所提供資訊的程式碼。例如，您可以檢查使用者輸入的電子郵件地址是否包含「@」符號，或必要文字欄位是否有包含數值。

本章包含下列各節：

關於表單

建立 HTML 表單

插入 HTML 表單物件

插入動態 HTML 表單物件

驗證 HTML 表單資料

將 JavaScript 行為附加至 HTML 表單物件

附加自訂 Script 至 HTML 表單按鈕

建立具有輔助功能的 HTML 表單

相關主題

  • 建立 ColdFusion MX 7 表單
  • 建立 ASP.NET 表單


關於表單

表單可以讓您取得網站瀏覽者的資訊。瀏覽者使用如文字欄位、清單方塊、核取方塊及選項按鈕等表單物件，來輸入資訊，然後按一下按鈕送出資訊。

本節包含下列概念性主題：

  • 表單的用戶端角色
  • 表單物件
  • 動態表單物件


表單的用戶端角色

表單支援主從架構關係的用戶端。當瀏覽者在網路瀏覽器 (用戶端) 所顯示的表單中輸入資訊，並按一下送出按鈕時，資訊會傳送到處理它的伺服器端 Script 或應用程式所在的伺服器。常用於處理表單資料的伺服器端技術包括 Macromedia ColdFusion、Microsoft Active Server Pages (ASP) 及 PHP。伺服器會以將要求的資訊傳回給使用者 (或用戶端)，或者根據表單內容來執行某個動作的方式來回應。

注意

您也可以將表單資料直接傳送給某位電子郵件收件者。


表單物件

在 Dreamweaver 中，表單鍵入類型稱為「表單物件」。表單物件是可讓使用者輸入資料的機制。您可以在表單中新增下列表單物件：

文字欄位接受任何類型的英數文字項目。文字可以顯示為單行、多行，以及密碼欄位，而在密碼欄位中輸入的文字會以星號或項目符號來取代，以隱藏文字不被旁觀者看到。

注意

使用密碼欄位傳送給伺服器的密碼和其他資訊並未加密。傳送的資料可以被攔截及讀取為英數文字。基於此原因，針對要保持安全的資料，應該一律要提供加密。

隱藏欄位會儲存使用者輸入的資訊，如名稱、電子郵件地址或檢視偏好設定，並於使用者下次瀏覽網站時使用該資料。

按鈕會在按下時執行動作。通常這些動作包括送出或重設表單。您可以為按鈕新增自訂名稱或標籤，或者使用預先定義好的「送出」或「重設」中的一個標籤。

核取方塊允許在單一選項群組內有多個回應。使用者可以選取能套用的所有選項。以下範例顯示三個選取的核取方塊項目便示範說明了此點：衝浪、登山及泛舟。

選項按鈕代表獨佔式的選項。在群組內選取某個按鈕會取消選取群組 (群組由兩個或多個共用相同名稱的按鈕組成) 中所有其他的選項。在下列範例中，泛舟是目前選取的選項。如果使用者按一下衝浪，泛舟按鈕就會自動取消選取。

清單選單會顯示捲動清單中的選項值，允許使用者選取多個選項。「選單」選項會顯示選單中的選項值，只允許使用者選取單一項目。

注意

HTML 表單上的彈出式選單與圖像彈出式選單不一樣。如需關於建立、編輯以及顯示和隱藏圖像彈出式選單的詳細資訊，請參閱顯示彈出式選單。

跳頁選單是導覽清單或彈出式選單，可以讓您插入一個選單，其中每個選項都連結到某個文件或檔案。

檔案欄位能讓使用者瀏覽至電腦上的檔案，並將檔案當做表單資料上傳。

影像欄位可以讓您在表單中插入影像。影像欄位可以用來製作圖像按鈕，例如，「送出」或「重設」按鈕。

相關主題

  • 動態表單物件
  • 建立 HTML 表單
  • 插入 HTML 表單物件


動態表單物件

動態表單物件的初始狀態是在向伺服器要求頁面時、由伺服器決定的表單物件，而不是由表單設計人員在設計階段時決定的。例如，當使用者要求具有選單的 PHP 頁面時，頁面中的 PHP Script 就可以自動使用儲存在資料庫中的值，填入選單中，然後伺服器就會將完成的頁面傳送到使用者的瀏覽器。

使用動態表單物件可以簡化網站維護工作。例如，許多網站都是使用選單以呈現一組選項給使用者。如果選單是動態的，您就可以在單一位置 (儲存項目的資料庫表格) 中新增、移除或變更選單項目，以更新網站上相同選單的所有實體。

選單只是動態表單物件的一種，您也可以建立和使用動態的選項按鈕、核取方塊、文字欄位和影像欄位。

相關主題

  • 插入 HTML 表單物件
  • 插入動態 HTML 表單物件


建立 HTML 表單

本節內容說明如何在 Dreamweaver 中建立 HTML 表單。

您也可以使用 Dreamweaver 建立 ASP.NET 網頁表單。如需詳細資訊，請參閱建立 ASP.NET 表單。

若要建立 HTML 表單：

  1. 開啟頁面，然後將插入點放在您希望表單出現的位置。
  2. 選取「插入＞表單」或選取「插入」列中的「表單」類別，然後按一下「表單」圖示。

    Dreamweaver 會插入空白表單。在「設計」檢視中的網頁，表單會以一個點狀線的紅色外框來表示。如果您看不到此外框，請檢查「檢視＞視覺輔助＞隱藏元素」是否已選取。

  3. 指定將會處理表單資料的頁面或 Script。

    在「文件」視窗中，按一下表單外框以選取表單。在「屬性」檢視窗 (「視窗＞屬性」) 中，在「屬性」檢視窗的「動作」文字方塊中鍵入路徑，或按一下資料夾圖示，以導覽到適當的頁面或 Script。

  4. 指定用來將表單資料傳輸到伺服器的方法。

    在「屬性」檢視窗中的「方法」彈出式選單內，選擇下列其中一個選項：

    預設會使用瀏覽器的預設設定來將表單資料傳送給伺服器。一般預設值是 GET 方法。

    GET 會在要求頁面的 URL 附加值。

    POST 會在 HTTP 要求中內嵌表單資料。

    如需詳細資訊，請參閱設定表單屬性。

  5. 插入表單物件。

    將插入點放在您希望表單物件在表單中出現的位置，然後在「插入＞表單」選單中或「插入」列的「表單」類別中選取物件。

    如需詳細資訊，請參閱插入 HTML 表單物件或插入動態 HTML 表單物件。

    如果需要的話，在頁面中插入表單物件之後，可以設定其屬性。如需詳細資訊，請選取表單物件，然後按一下「屬性」檢視窗中的說明圖示。

  6. 依需要調整表單的版面。

    您可以使用斷行符號、分段符號、預先格式化的文字或表格來格式化表單。您無法在另一個表單中插入表單 (也就是說，您無法重疊標籤)，但是您可以在網頁中包含一個以上的表單。

    在設計表單時，請記得以描述性文字來標示表單欄位，讓使用者知道他們所回應的是何種要求，例如，使用「請鍵入您的名稱」來要求名稱資訊。

    使用表格來為表單物件和欄位標籤提供結構。在表單中使用表格時，請確定所有 table 標籤都包含在 form 標籤之間。

相關主題

  • 驗證 HTML 表單資料
  • 將 JavaScript 行為附加至 HTML 表單物件
  • 附加自訂 Script 至 HTML 表單按鈕
  • 建立具有輔助功能的 HTML 表單


插入 HTML 表單物件

您可以使用 Dreamweaver，將 HTML 表單物件迅速插入表單中。

如果您使用的是 ASP.NET 網頁應用程式，可以使用 Dreamweaver 快速地插入 ASP.NET 表單控制項。如需詳細資訊，請參閱新增 ASP.NET 表單控制項至頁面。

您必須先建立空白的 HTML 表單 (「插入＞表單」)，才可以在其中插入表單物件。如需詳細資訊，請參閱建立 HTML 表單。如果您沒有建立空白表單就嘗試插入表單物件，Dreamweaver 會詢問您是否要建立空白表單。

本節包含下列主題：

  • 插入 HTML 文字欄位
  • 插入 HTML 核取方塊
  • 插入 HTML 選項按鈕
  • 插入 HTML 表單選項
  • 插入標準按鈕
  • 插入影像按鈕
  • 插入隱藏欄位
  • 插入檔案上傳欄位


插入 HTML 文字欄位

您可以建立由單行或多行組成的文字欄位。您也可以建立密碼文字欄位，隱藏使用者輸入的文字。

若要插入文字欄位：

  1. 將插入點放在表單外框內。
  2. 選取「插入＞表單＞文字欄位」。

    文字欄位便會出現在文件中。

  3. 在「屬性」檢視窗中，依需要設定文字欄位屬性。

    如需詳細資訊，請參閱設定文字欄位屬性。

  4. 若要標示頁面上的文字欄位，在文字欄位旁邊按一下，然後鍵入標籤。

相關主題

  • 驗證 HTML 表單資料
  • 在 HTML 文字欄位中顯示動態內容
  • 表單物件


插入 HTML 核取方塊

當您想要讓使用者從一組選項中選取一個以上的選項時，請使用 HTML 核取方塊。

注意

當您只想讓使用者從一組選項中選取一個選項時，請使用選項按鈕。如需詳細資訊，請參閱插入 HTML 選項按鈕。

若要插入核取方塊：

  1. 將插入點放在表單外框內。
  2. 選取「插入＞表單＞核取方塊」。

    核取方塊便會出現在文件中。

  3. 在「屬性」檢視窗中，依需要設定核取方塊屬性。

    如需詳細資訊，請參閱設定核取方塊屬性。

  4. 若要標示核取方塊，在頁面上的核取方塊旁邊按一下，然後鍵入標籤文字。

相關主題

  • 動態式預先選取 HTML 核取方塊


插入 HTML 選項按鈕

當您只想讓使用者從一組選項中選取一個選項時，請使用 HTML 選項按鈕。選項按鈕通常用於群組中，同一群組中的選項按鈕名稱必須相同。

注意

當您想要讓使用者選取一個以上的選項時，請使用核取方塊。如需詳細資訊，請參閱插入 HTML 核取方塊。

若要插入選項按鈕群組：

  1. 將插入點放在表單外框內。
  2. 選取「插入＞表單＞選項按鈕群組」。

    「選項按鈕群組」對話方塊便會出現。

  3. 完成「選項按鈕群組」對話方塊並按一下「確定」。

    如需相關說明，請參閱設定選項按鈕群組對話方塊選項。

Dreamweaver 會在 HTML 表單內插入選項按鈕群組。如果您尚未在頁面上插入表單，Dreamweaver 會為您插入一個表單。如果您想要的話，可以變更群組的版面。您也可以使用「屬性」檢視窗或直接在「程式碼」檢視中編輯選項按鈕。

若要一次插入多個選項按鈕：

  1. 將插入點放在表單外框內。
  2. 選取「插入＞表單＞選項按鈕」，插入選項按鈕。

    選項按鈕便會出現在文件中。

  3. 在「屬性」檢視窗中，依需要設定選項按鈕屬性。

    如需詳細資訊，請參閱設定選項按鈕屬性。

  4. 若要標示選項按鈕，在頁面上的選項按鈕旁邊按一下，然後鍵入標籤文字。

相關主題

  • 動態式預先選取 HTML 選項按鈕


插入 HTML 表單選項

HTML 選單可以讓瀏覽者從清單中選取一個或多個項目。當空間有限卻要顯示許多項目時，選單就很有用。當您想要控制傳回伺服器的值時，選單也很有用。選單與文字欄位不同：使用者可以在文字欄位中鍵入任何資料，包括無效的資料；而您必須要確切設定選單所傳回的值。

您可以在表單中插入兩種類型的選單：一種選單會在使用者按一下滑鼠時拉下，另一種選單則會顯示可捲動的項目清單，供使用者選取。這種類型稱為清單選單。

若要插入選單：

  1. 將插入點放在表單外框內。
  2. 選取「插入＞表單＞清單/選單」。

    選單便會出現在文件中。

  3. 在「屬性」檢視窗中，依需要設定選單屬性。

    如需詳細資訊，請參閱設定選單屬性。

相關主題

  • 建立動態 HTML 表單選單
  • 使現有的 HTML 表單選單呈現動態效果


插入標準按鈕

按鈕會控制表單作業。請使用按鈕將表單資料送出給伺服器，或重設表單。標準表單按鈕通常標記為「送出」、「重設」或「傳送」。您也可以指派在 Script 中定義的其他處理工作。例如，按鈕可能會根據指定值來計算選取項目的總花費。

若要建立按鈕：

  1. 將插入點放在表單外框內。
  2. 選取「插入＞表單＞按鈕」。

    按鈕便會出現在表單中。

  3. 在「屬性」檢視窗中，依需要設定按鈕屬性。

    如需詳細資訊，請參閱設定按鈕屬性。

相關主題

  • 插入影像按鈕


插入影像按鈕

您可以使用影像做為按鈕圖示。您必須先將行為附加至表單物件，才能使用影像執行送出資料以外的工作。

若要建立影像按鈕：

  1. 在文件中，將插入點放在表單外框內。
  2. 選取「插入＞表單＞影像欄位」。

    「影像來源」對話方塊便會出現。

  3. 在「選取影像原始檔」對話方塊中，選取按鈕的影像，然後按一下「確定」。

    影像欄位便會出現在表單中。

  4. 在「屬性」檢視窗中，依需要設定影像欄位屬性。

    若要建立送出按鈕，在「屬性」檢視窗的「影像欄位」文字方塊中，輸入「送出」。

    如需詳細資訊，請參閱設定影像欄位屬性。

  5. 若要將 JavaScript 行為附加至按鈕，請選取影像，然後在「行為」(「視窗＞行為」) 面板中選取行為。

    如需詳細資訊，請參閱將 JavaScript 行為附加至 HTML 表單物件和附加自訂 Script 至 HTML 表單按鈕。

相關主題

  • 插入標準按鈕


插入隱藏欄位

您可以使用隱藏欄位來儲存並送出不是由使用者所輸入的資訊。使用者看不到隱藏的資訊。

若要建立隱藏欄位：

  1. 在「設計」檢視中，將插入點放在表單外框內。
  2. 選取「插入＞表單＞隱藏欄位」。

    標記便會出現在文件中。如果您沒有看到標記，請選取「檢視＞視覺輔助＞隱藏元素」以查看標記。

  3. 在「屬性」檢視窗的「隱藏欄位」文字方塊中，鍵入欄位的唯一名稱。
  4. 在「值」文字方塊中，鍵入要指定給欄位的值。


插入檔案上傳欄位

您可以建立一個檔案上傳欄位，供使用者選取其電腦上的檔案 (如文書處理文件或圖像檔)，並將檔案上傳至伺服器。檔案欄位除了還包含一個「瀏覽」按鈕之外，它看起來就像其他文字欄位一樣。使用者可以手動輸入要上傳的檔案路徑，或使用「瀏覽」按鈕找出並選取檔案。

您必須有能夠處理檔案送出的伺服器端 Script 或網頁，才能使用檔案上傳欄位。請參閱您用來處理表單資料的伺服器技術文件說明。例如，如果是使用 PHP，請參閱 PHP 手冊中的「處理檔案上傳」網頁，網址為：http://us2.php.net/manual/en/features.file-upload.php。

您需要在檔案欄位中使用 POST 方法才能將檔案從瀏覽器傳輸到伺服器。檔案會公佈到您在表單的「動作」文字方塊中所指定的位址。

注意

在使用檔案欄位之前，請先連絡您的伺服器管理員，確認是否允許匿名檔案上傳。

若要在表單中建立檔案欄位：

  1. 在網頁中插入一個表單 (「插入＞表單」)。
  2. 選擇要顯示其「屬性」檢視窗的表單。
  3. 將表單的「方法」設定為 POST。
  4. 從「編碼類型」彈出式選單中，選取 multipart/form-data。
  5. 在「動作」文字方塊中，指定能夠處理已上傳檔案的伺服器端 Script 或網頁。
  6. 將插入點放在表單外框內，再選取「插入＞表單＞檔案欄位」。

    檔案欄位便會插入表單中。

  7. 在「屬性」檢視窗中，依需要設定檔案欄位屬性。

    如需詳細資訊，請參閱設定檔案欄位屬性。


插入動態 HTML 表單物件

您可以插入的 HTML 表單物件，其初始狀態是在向伺服器要求頁面時由伺服器決定，而不是由設計人員在設計階段時所決定。

本節包含下列主題：

  • 建立動態 HTML 表單選單
  • 使現有的 HTML 表單選單呈現動態效果
  • 在 HTML 文字欄位中顯示動態內容
  • 動態式預先選取 HTML 核取方塊
  • 動態式預先選取 HTML 選項按鈕

相關主題

  • 動態表單物件
  • 建立 ASP.NET 表單
  • 建立 ColdFusion MX 7 表單


建立動態 HTML 表單選單

您可以使用資料庫的項目，以動態方式填入 HTML 表單選單或清單選單。

您可以在大部分的網頁中使用 HTML 選單物件。但是在 ASP.NET 網頁中，您必須使用「下拉式清單」或「清單方塊」表單控制項。如需詳細資訊，請參閱建立 ASP.NET 表單。

在開始之前，您必須在 ColdFusion、PHP、ASP 或 JSP 頁面中插入 HTML 表單，而且必須定義該選單動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。

若要插入動態 HTML 表單選單：

  1. 在網頁上的 HTML 表單內按一下。
  2. 選取「插入＞表單＞清單/選單」。

    Dreamweaver 會在網頁中插入「清單/選單」表單物件。

  3. 選取「清單/選單」表單物件。

    「屬性」檢視窗會顯示「清單/選單」屬性。

  4. 在「屬性」檢視窗中，按一下「動態」按鈕以顯示「動態清單/選單」對話方塊。

  5. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定動態清單/選單對話方塊選項。

相關主題

  • 使現有的 HTML 表單選單呈現動態效果


使現有的 HTML 表單選單呈現動態效果

您可以讓現有的 HTML 表單選單或清單選單呈現動態效果。

本節主要在說明 HTML 表單物件。如需 ASP.NET 選單物件 (例如「下拉式清單」或「清單方塊」控制項) 的詳細資訊，請參閱使 ASP.NET 選單呈現動態效果。

在開始之前，您必須在 ColdFusion、PHP、ASP 或 JSP 頁面中建立表單，而且必須定義該選單動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。

若要讓現有的 HTML 表單選單呈現動態效果：

  1. 在「設計」檢視中，選取您要製作動態效果的清單/選單表單物件。
  2. 在「屬性」檢視窗中，按一下「動態」按鈕。

    「動態清單/選單」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請參閱設定動態清單/選單對話方塊選項。

相關主題

  • 建立動態 HTML 表單選單


在 HTML 文字欄位中顯示動態內容

您可以在 HTML 文字欄位中顯示動態內容。

如果是 ASP.NET 網頁，您必須使用「ASP.NET 文字方塊」控制項。如需詳細資訊，請參閱在 ASP.NET 文字方塊控制項中顯示動態內容。

在開始之前，您必須在 ColdFusion、PHP、ASP 或 JSP 頁面中建立表單，而且必須定義該文字欄位動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。

若要讓 HTML 文字欄位呈現動態效果：

  1. 在網頁上的 HTML 表單中選取文字欄位。
  2. 在「屬性」檢視窗中，按一下「初始值」文字方塊旁的閃電圖示。

    「動態資料」對話方塊便會顯示。

  3. 選取將提供值給文字欄位的資料集欄，然後按「確定」。

在瀏覽器中檢視表單時，文字欄位將顯示動態內容。


動態式預先選取 HTML 核取方塊

當表單在瀏覽器中顯示時，您可以讓伺服器決定是否要選取核取方塊。

如果是 ASP.NET 網頁，您必須使用「ASP.NET 核取方塊」控制項。如需詳細資訊，請參閱動態預先選取 ASP.NET 核取方塊控制項。

在開始之前，您必須在 ColdFusion、PHP、ASP 或 JSP 頁面中建立表單，而且必須定義該核取方塊動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。理想的情況是，內容的來源應包含布林資料，例如「Yes/No」或「True/False」。

若要動態預先選取 HTML 核取方塊：

  1. 在頁面上選取核取方塊表單物件。
  2. 在「屬性」檢視窗中，按一下「動態」按鈕。

    「動態核取方塊」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請參閱設定動態核取方塊對話方塊選項。

在瀏覽器中檢視表單時，核取方塊將視資料的不同顯示已選取或未選取。


動態式預先選取 HTML 選項按鈕

當表單在瀏覽器中顯示時，您可以讓伺服器決定是否要選取 HTML 選項按鈕。

如果您要以動態方式預先選取 ASP.NET 選項按鈕物件 (例如，「選項按鈕」或「選項按鈕清單」控制項)，請參閱動態預先選取 ASP.NET 選項按鈕清單中的項目。

在開始之前，您必須先在 ColdFusion、PHP、ASP 或是 JSP 網頁中建立表單，然後插入至少一組 HTML 選項按鈕 (請參閱插入 HTML 選項按鈕)。您也必須定義該選項按鈕動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。理想的情況是，內容的來源應包含布林資料，例如「Yes/No」或「True/False」。

若要動態預先選取 HTML 選項按鈕：

  1. 在「設計」檢視中的群組內，選取選項按鈕。
  2. 在「屬性」檢視窗中，按一下「動態」按鈕。

    「動態選項按鈕群組」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請參閱設定動態選項按鈕群組對話方塊選項或設定動態選項按鈕群組對話方塊選項 (ColdFusion、ASP.NET)。


驗證 HTML 表單資料

Dreamweaver 可以新增 JavaScript 程式碼，檢查指定文字欄位的內容，以確保使用者已輸入正確的資料類型。

本節適用於 HTML 表單。您也可以在 Dreamweaver 中建立 ColdFusion 表單，以驗證已指定欄位的內容。如需詳細資訊，請參閱驗證 ColdFusion 表單資料。如果是 ASP.NET 表單，您可以在「程式碼」檢視內插入 ASP.NET 驗證控制項。如需詳細資訊，請參閱 ASP.NET 文件。

若要驗證 HTML 表單資料：

  1. 建立至少包括一個文字欄位及一個「送出」按鈕的 HTML 表單。

    確定要驗證的每個文字欄位都有唯一的名稱。

  2. 選取「送出」按鈕。
  3. 在「行為」面板 (「視窗＞行為」) 中，按一下加號 (+) 按鈕，再從清單中選取「驗證表單」行為。

    「驗證表單」對話方塊便會出現。

    注意

    「驗證表單」行為只有在已將文字欄位插入文件時才能使用。
  4. 設定各文字欄位的驗證規則，再按一下「確定」。

    例如，您可能會指定個人年齡的文字欄位只能接受數字。如需詳細資訊，請參閱驗證表單。

相關主題

  • 使用 JavaScript 行為
  • 驗證 ColdFusion 表單資料


將 JavaScript 行為附加至 HTML 表單物件

您可以將儲存在 Dreamweaver 中的 JavaScript 行為附加至 HTML 表單物件 (例如，按鈕)。

注意

這項功能不能與 ASP.NET 表單控制項一起使用，因為這些控制項是在伺服器上處理。

若要將 JavaScript 行為附加至 HTML 表單物件：

  1. 選取 HTML 表單物件。
  2. 在「行為」面板 (「視窗＞行為」) 中，按一下加號 (+) 按鈕，再從清單中選取行為。

    如需詳細資訊，請參閱使用 JavaScript 行為。


附加自訂 Script 至 HTML 表單按鈕

有些表單會使用 JavaScript 或 VBScript 在用戶端上執行表單處理或其他動作 (與傳送表單資料給伺服器進行處理相反)。您可以使用 Dreamweaver 設定表單按鈕，在使用者按下按鈕時，該表單按鈕會執行特定的用戶端 Script。

注意

這項功能在 ASP.NET 表單中無法使用。

若要在用戶端執行 Script：

  1. 在表單中選取「送出」按鈕。
  2. 在「行為」面板 (「視窗＞行為」) 中，按一下加號 (+) 按鈕，再從清單中選取「呼叫 JavaScript」。

    如需有關上述行為的詳細資訊，請參閱呼叫 JavaScript。

  3. 在顯示的「呼叫 JavaScript」文字方塊中，輸入您要在使用者按下按鈕時執行的 JavaScript 函數名稱。

    例如，您可以輸入目前沒有的函數名稱，像是 processMyForm()。

  4. 如果文件中的 head 區段還沒有 JavaScript 函數，現在請將它加進去。

    例如，您可以在文件中的 head 區段中定義下列 JavaScript 函數，使用者按下「送出」按鈕時，便會顯示訊息。

    function processMyForm(){
   alert('Thanks for your order!');
   }


建立具有輔助功能的 HTML 表單

插入 HTML 表單物件時，如果已經在「輔助功能」偏好設定中選取了「表單物件」選項，Dreamweaver 便會提示您輸入使表單物件具有輔助功能的資訊。您也可以在插入物件之後，變更輔助功能屬性。

若要新增具有輔助功能的表單物件：

  1. 當您初次新增具有輔助功能的表單物件時，請啟用表單物件的「輔助功能」對話方塊 (請參閱最佳化具有輔助功能的頁面設計工作區)。

    這是只需做一次即可的步驟。

  2. 在文件中，將插入點放在您要表單物件出現的地方。
  3. 選取「插入＞表單」，然後選取要插入的表單物件。

    「Input 標籤輔助功能屬性」對話方塊便會出現。

  4. 完成對話方塊。

    如需詳細資訊，請參閱設定 Input 標籤輔助功能屬性對話方塊選項。

  5. 按一下「確定」。

    注意

    如果您按「取消」，表單物件也會出現在文件中，但是 Dreamweaver 並沒有將輔助功能標籤或屬性與表單物件建立關聯。
  6. 如果 Dreamweaver 詢問您是否要插入表單標籤，請按一下「是」。

    表單物件便會出現在文件中。

若要編輯表單物件的輔助功能值：

  1. 在「文件」視窗中選取物件。
  2. 請執行下列其中一項作業：
    • 在「程式碼」檢視中編輯適當的屬性。
    • 按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「編輯標籤」。


參考

本節將說明這一章中所介紹的對話方塊與檢視窗：

  • 設定表單屬性
  • 設定文字欄位屬性
  • 設定核取方塊屬性
  • 設定選項按鈕屬性
  • 設定選單屬性
  • 設定按鈕屬性
  • 設定影像欄位屬性
  • 設定隱藏欄位屬性
  • 設定檔案欄位屬性
  • 設定輸入名稱屬性
  • 設定 Input 標籤輔助功能屬性對話方塊選項
  • 設定選項按鈕群組對話方塊選項
  • 設定動態選項按鈕群組對話方塊選項 (ColdFusion、ASP.NET)
  • 設定動態選項按鈕群組對話方塊選項
  • 設定動態文字欄位對話方塊選項
  • 設定動態核取方塊對話方塊選項
  • 設定動態清單/選單對話方塊選項
  • 設定清單值對話方塊選項


設定表單屬性

請使用此「屬性」檢視窗，設定 HTML 表單的屬性。

若要設定表單屬性：

  1. 在「表單名稱」文字方塊中，鍵入唯一的名稱以識別該表單。

    命名表單讓它可能得以參考或控制使用 Script 語言的表單，如 JavaScript 或 VBScript。如果沒有為表單命名，Dreamweaver 會使用 formn 的語法產生名稱，並為加入網頁的每個表單遞增 n 值。

  2. 在「動作」文字方塊中，指定將處理表單的動態網頁或 Script 的路徑。您可以在「動作」文字方塊中鍵入完整的路徑，或者按一下資料夾圖示來導覽到包含 Script 或應用程式頁面的相同網站。
  3. 在「方法」彈出式選單中，選取會將表單資料傳輸給伺服器的方法。

    POST 會在 HTTP 要求中內嵌表單資料。

    GET 會在要求頁面的 URL 附加值。

    預設會使用瀏覽器的預設設定來將表單資料傳送給伺服器。一般預設值是 GET 方法。

    請勿使用 GET 方法傳送長表單。URL 限制為 8192 個字元。如果所傳送的資料量太大，資料將被截斷，導致未預期或失敗的處理結果。

    GET 方法傳遞的參數所產生的動態網頁可以加入書籤，因為重新產生頁面需要的所有值，都包含在瀏覽器「網址」方塊中所顯示的 URL 中。相反地，POST 方法傳遞的參數所產生的動態網頁則無法加入至書籤。

    如果您收集機密性的使用者名稱和密碼、信用卡號碼或其他機密資訊時，POST 方法顯然會比 GET 方法更安全。然而，POST 方法所傳送的資訊並未加密，駭客很容易便可以擷取。為了確保安全，請使用安全的連線並連往安全的伺服器。

  4. 如果需要的話，請使用「編碼類型」彈出式選單為送出到伺服器進行處理的資料指定 MIME 編碼方式類型。

    application/x-www-form-urlencode 的預設值通常會與 POST 方法一併使用。如果您是在建立檔案上傳欄位，請指定 multipart/form-data MIME 類型。

  5. 如果需要的話，請使用「目標」彈出式選單指定要顯示由叫用的程式所傳回資料的視窗。

    如果沒有開啟命名視窗的話，會以該名稱開啟一個新視窗。目標值如下：

    _blank 會在新的未命名視窗中開啟目標文件。

    _parent 會在顯示目前文件視窗的上一層視窗中開啟目標文件。

    _self 會在送出表單所用的相同視窗中開啟目標文件。

    _top 會在目前視窗的本文中開啟目標文件。這個值可以用來確保目標文件會接受完整的視窗，即使原始文件是顯示在頁框中也一樣。

相關主題

  • 建立 HTML 表單


設定文字欄位屬性

請使用此「屬性」檢視窗，設定文字欄位的屬性。

若要設定文字欄位屬性：

  1. 在「文字欄位」文字方塊中，指定文字欄位的名稱。

    每個文字欄位必須有一個唯一名稱。您選擇的名稱必須能在表單內唯一識別該文字欄位。表單物件名稱不能包含空格或特殊字元。您可以使用任何英數字元和底線 (_) 的組合。請注意，指定給文字欄位的標籤，就是將儲存欄位值 (輸入的資料) 的變數名稱。這是傳送給伺服器以便進行處理的值。

  2. 在「屬性」檢視窗中設定下列任何選項：

    字元寬度設定欄位中可以顯示的最多字元數。此數字可以小於「最多字元數」，後者是指定欄位中可以輸入的最多字元數。例如，如果「字元寬度」設定為 20 (預設值) 而使用者輸入 100 個字元，則在文字欄位將只能檢視到前 20 個字元。請注意，即使您無法檢視欄位中的字元，欄位物件仍能辨識這些文字，而且這些文字將會傳送到伺服器進行處理。

    最多字元數設定單行文字欄位的欄位中可以輸入的最多字元數。使用「最多字元數」將郵遞區號限制為 5 位數、將密碼限制為 10 個字元等等。如果您讓「最多字元數」文字方塊保留空白，使用者便可以輸入任何字元數量的文字。如果文字超過欄位的字元寬度，文字將會捲動。如果使用者超過最多字元數，表單會產生警告聲音。

    行數 (會在選取「多行」選項時提供) 設定多行文字欄位的欄位高度。

    換行 (會在選取「多行」選項時提供) 指定當使用者輸入的資訊比定義的文字區域內所能顯示的資訊還多時，要如何顯示使用者的輸入。換行選項如下：

    • 選取「關閉」或「預設」可以防止文字換行到下一行。當使用者的輸入超過文字區域的右邊界限時，文字將向左邊捲動。使用者必須按 Return 鍵將插入點移動到文字區域中的下一行。
    • 選取「虛擬」會在文字區域中設定自動換行。當使用者的輸入超過文字區域的右邊界限時，文字會換行到下一行。在送出資料進行處理時，自動換行不會套用至資料。它還是將資料視為一個資料字串般送出。
    • 選取「實體」會在文字區域中設定自動換行，而且在送出資料進行處理時，也會將資料自動換行。

    類型指定欄位為單行、多行或密碼欄位。

    • 選取「單行」會造成 input 標籤將其 type 屬性設定為 text。「字元寬度」設定會對應到 size 屬性，而「最多字元數」設定則對應到 maxlength 屬性。
    • 選取「密碼」會造成 input 標籤將其 type 屬性設定為 password。「字元寬度」和「最多字元數」設定的屬性對應與單行文字欄位的屬性對應相同。當使用者在密碼文字欄位中輸入時，輸入的文字會顯示為項目符號或星號，藉此保護密碼不會被別人看到。
    • 選取「多行」會產生 textarea 標籤。「字元寬度」設定會對應到 cols 屬性，而「行數」設定則對應到 rows 屬性。

    初始值指定第一次載入表單時，要顯示在欄位中的值。例如，您可能藉由包含一個備註或範例值，指示使用者在欄位中輸入資訊。

    類別讓您套用 CSS 規則至物件。

相關主題

  • 插入 HTML 文字欄位
  • 表單物件
  • 動態表單物件


設定核取方塊屬性

請使用此「屬性」檢視窗，設定核取方塊的屬性。

若要設定核取方塊屬性：

  1. 在「核取方塊」文字方塊中，指定物件的名稱。

    每個核取方塊都必須要有唯一的名稱。您選擇的名稱必須能在表單內唯一識別該核取方塊。名稱不能包含空格或特殊字元。

  2. 在「屬性」檢視窗中設定下列任何選項：

    核取的值設定當選取核取方塊時，要傳送到伺服器的值。例如，在意見調查中，您可能將非常滿意的值設定為 4，而非常不滿意的值設定為 1。

    初始化狀態決定當瀏覽器載入表單時，是否要選取核取方塊。

    動態讓伺服器動態決定核取方塊的初始化狀態。例如，您可以使用核取方塊，以視覺化的方式呈現儲存在資料庫記錄中的「是/否」資訊。在設計階段時，您並不知道這些資訊。伺服器會在執行階段讀取資料庫記錄，如果值為「是」，便會選取核取方塊。

    類別讓您套用 CSS 規則至物件。

相關主題

  • 插入 HTML 核取方塊
  • 表單物件
  • 動態表單物件
  • 動態式預先選取 HTML 核取方塊


設定選項按鈕屬性

請使用此「屬性」檢視窗，設定選項按鈕的屬性。

若要設定選項按鈕屬性：

  1. 在「選項按鈕」文字方塊中，指定物件的名稱。

    如果您希望選項是完全互斥的，選項按鈕群組就必須共用相同的名稱。名稱不能包含空格或特殊字元。

  2. 在「屬性」檢視窗中設定下列任何選項：

    核取的值設定當選取選項按鈕時，要傳送到伺服器的值。例如，您可以在「核取的值」文字方塊中鍵入滑雪，表示有一個使用者選擇了滑雪。

    初始化狀態決定當瀏覽器載入表單時，是否要選取選項按鈕。

    動態讓伺服器動態決定選單按鈕的初始化狀態。例如，您可以使用選項按鈕，以視覺化的方式呈現儲存在資料庫記錄中的資訊。在設計階段時，您並不知道這些資訊。伺服器會在執行階段讀取資料庫記錄，如果其值與您所指定的值相符，便會選取選項按鈕。

    類別讓您套用 CSS 規則至物件。

相關主題

  • 插入 HTML 選項按鈕
  • 表單物件
  • 動態表單物件
  • 動態式預先選取 HTML 選項按鈕


設定選單屬性

請使用此「屬性」檢視窗，設定 HTML 表單中選單的屬性。

若要設定選單屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    清單/選單指定選單的名稱。名稱必須是唯一的。

    類型表示在按一下時選單會拉下 (「選單」選項)，或顯示可捲動的項目清單 (「清單」選項)。如果您希望在瀏覽器中顯示表單時，只會看到一個選項，請選取「表單」選項。若要顯示其他選項，使用者必須按一下向下鍵。

    如果您希望在瀏覽器中顯示表單時，是列出部份或全部的選項，如下所示，或是您希望讓使用者選取多個項目，請選取「清單」選項。

    高 (限「清單」類型) 可設定選單中顯示的項目數目。

    選取範圍 (限「清單」類型) 指出使用者是否可以從清單中選取多個項目。

    清單值會開啟對話方塊，讓您新增選單的項目。如需詳細資訊，請參閱設定清單值對話方塊選項。

    動態讓伺服器在初次顯示選單時，動態選取選單中的項目。

    類別讓您套用 CSS 規則至物件。

    起始時已選取設定清單中預設為已選取的項目。按一下清單中的一個或多個項目。

相關主題

  • 插入 HTML 表單選項
  • 表單物件
  • 建立動態 HTML 表單選單


設定按鈕屬性

請使用此「屬性」檢視窗，設定按鈕的屬性。

若要設定按鈕屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    按鈕名稱指定按鈕的名稱。兩個保留名稱 (「送出」和「重設」) 分別會告知表單要將表單資料送給處理應用程式或 Script，或將所有表單欄位重設為它們的原始值。

    標籤決定出現在按鈕上的文字。

    動作決定按一下按鈕時會發生什麼動作。

    • 選取「送出表單」選項，在按一下按鈕時送出表單資料以進行處理。資料會送出到表單「動作」屬性中所指定的頁面或 Script。請參閱建立 HTML 表單。
    • 選取「重設表單」選項，在按一下按鈕時清除表單的內容。
    • 選取「無」選項，指定在按一下按鈕時要執行的動作。例如，您可以新增 JavaScript 行為，在使用者按一下按鈕時開啟另一個頁面。如需詳細資訊，請參閱將 JavaScript 行為附加至 HTML 表單物件和附加自訂 Script 至 HTML 表單按鈕。

    類別讓您套用 CSS 規則至物件。

相關主題

  • 插入標準按鈕
  • 插入影像按鈕
  • 表單物件


設定影像欄位屬性

請使用此「屬性」檢視窗，設定 HTML 表單中影像欄位的屬性。

若要設定影像欄位屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    影像欄位指定按鈕的名稱。兩個保留名稱 (「送出」和「重設」) 分別會告知表單要將表單資料送給處理應用程式或 Script，或將所有表單欄位重設為它們的原始值。

    原始檔指定要用在按鈕上的影像。

    替代讓您輸入描述性文字，以在瀏覽器無法載入影像的情況下，將其載入。

    對齊設定物件的對齊屬性。

    編輯影像啟動您的預設影像編輯器，並開啟要編輯的影像檔案。

    類別讓您套用 CSS 規則至物件。

相關主題

  • 插入影像按鈕
  • 表單物件


設定隱藏欄位屬性

請使用此「屬性」檢視窗，設定 HTML 表單中隱藏欄位的屬性。

若要設定隱藏欄位屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    隱藏欄位指定欄位的名稱。

    值設定要指定給欄位的值。這個值會在送出表單時，傳遞到伺服器。

    類別讓您套用 CSS 規則至物件。

相關主題

  • 插入隱藏欄位
  • 表單物件


設定檔案欄位屬性

請使用此「屬性」檢視窗，設定 HTML 表單中檔案欄位的屬性。

若要設定檔案欄位屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    檔案欄位名稱指定檔案欄位物件的名稱。

    字元寬度指定您希望欄位顯示的最多字元數。

    最多字元數指定欄位將保留的最多字元數。如果使用者是以瀏覽方式找到檔案的話，檔案名稱和路徑可以超過指定的「最多字元數」值。但是，如果使用者嘗試輸入檔案名稱和路徑，則檔案欄位將只允許「最多字元數」值所指定的字元數。

相關主題

  • 插入檔案上傳欄位
  • 表單物件


設定輸入名稱屬性

當 Dreamweaver 遇到無法辨認的輸入類型時，便會出現此「屬性」檢視窗。會發生這種情況通常是因為打字或其他資料輸入錯誤。

如果您在「屬性」檢視窗中將欄位類型變更為 Dreamweaver 可辨認的值 - 例如，若您修正拼字錯誤 - 「屬性」檢視窗會更新以顯示辨認類型的屬性。

若要設定輸入名稱屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    輸入名稱指定欄位的名稱。此文字方塊是必要的，而且名稱必須是唯一的。

    類型設定欄位的輸入類型。此文字方塊的內容會反應目前出現在 HTML 原始碼中的輸入類型值。

    值會設定欄位的值。

    參數會開啟「參數」對話方塊，讓您可以檢視欄位目前的屬性，以及新增或移除屬性。


設定 Input 標籤輔助功能屬性對話方塊選項

這個對話方塊是用來設定表單物件輔助功能選項。螢幕讀取器會朗讀影像的「標籤」屬性。

若要設定對話方塊選項：

  1. 在「標籤」文字方塊中輸入表單物件的名稱。
  2. 選取樣式：

    用標籤標記圍繞是以標籤標記圍繞於表單項目的前後，如下所示：

    <label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>

    使用 for 屬性附加標籤標記使用 for 屬性將標籤標記圍繞於表單項目前後，如下所示：

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>

    這個選項會使瀏覽器呈現與核取方塊關聯的文字和具有焦點矩形的選項按鈕，而且使用者只要在關聯文字中的任何地方按一下 (不一定要在核取方塊或選項按鈕控制項中) 就可以選取核取方塊和選項按鈕。

    注意

    這是輔助功能的常用選項，但是功能或許會因瀏覽器而有所不同。

    無標籤標記是不使用標籤標記，如下所示：

    <input type="radio" name="radiobutton" value="radiobutton">
RadioButton3
  3. 選取標籤相對於表單物件的「位置」：「位於表單項目之後」或「位於表單項目之前」。
  4. 在「存取鍵」文字方塊中輸入鍵盤對應值 (單一字母)，以便在瀏覽器中選取表單物件。

    請使用 Control 鍵 (Windows) 配合「存取鍵」來存取物件。例如，如果您輸入 B 做為「存取鍵」，請使用 Control + B 在瀏覽器中選取物件。

  5. 在「定位停駐點索引」文字方塊中，輸入表單物件的 Tab 鍵順序編號。

    如果頁面上有其他連結和表單物件，而且需要使用者依特定順序以 Tab 鍵在其中依序移動，設定 Tab 鍵順序就很有用處。如果您針對物件設定了 Tab 鍵順序，就必須對所有物件都設定 Tab 鍵順序。

  6. 按一下「確定」。

    注意

    如果您按「取消」，表單物件也會出現在文件中，但是 Dreamweaver 並沒有將輔助功能標籤或屬性與表單物件建立關聯。

相關主題

  • 驗證 HTML 表單資料


設定選項按鈕群組對話方塊選項

「選項按鈕群組」對話方塊會建立在 HTML 表單中所使用的選項按鈕群組。

若要設定對話方塊選項：

  1. 在「名稱」文字方塊中，輸入選項按鈕群組的名稱。

    如果您希望選項按鈕將參數傳回給伺服器，參數便會與名稱相關聯。例如，如果您的群組命名為 myGroup，並將表單方法設定為 GET (也就是說，您希望當使用者按送出按鈕時，表單會傳遞 URL 參數，而不是傳遞表單參數)，然後 myGroup="CheckedValue" 運算式將在 URL 中傳遞給伺服器。

  2. 按一下加號 (+) 按鈕，將選項按鈕新增至群組中。

    如果想要的話，請為新按鈕輸入標籤和核取值。

  3. 按一下向上或向下鍵來重新排序按鈕。
  4. 如果您希望在瀏覽器中開啟頁面時，已選取了特別的選項按鈕，請在「選取的值等於」方塊中輸入選項按鈕值的相等值。

    您可以輸入靜態值或指定動態值，只要按一下方塊旁邊的閃電圖示並選取包含可能的核取值之資料集即可。不論是哪一種情況，您指定的值應該要符合群組的任一選項按鈕的核取值。若要檢視選項按鈕的核取值，請選取每個選項按鈕，然後開啟它的「屬性」檢視窗 (「視窗＞屬性」)。

  5. 選取您希望 Dreamweaver 如何配置按鈕的格式。

    Dreamweaver 可以利用斷行符號或表格來顯示按鈕。如果您選取表格選項，Dreamweaver 會建立一個單欄表格，並將選項按鈕放在左邊，標籤放在右邊。

  6. 按一下「確定」。

Dreamweaver 會在 HTML 表單中插入選項按鈕群組。如果您尚未在頁面上插入表單，Dreamweaver 會為您插入一個表單。您可以使用任何版面或格式工具來微調群組的版面。

相關主題

  • 設定動態選項按鈕群組對話方塊選項 (ColdFusion、ASP.NET)
  • 插入 HTML 選項按鈕
  • 動態式預先選取 HTML 選項按鈕
  • 定義資料集


設定動態選項按鈕群組對話方塊選項 (ColdFusion、ASP.NET)

「動態選項按鈕群組」對話方塊可以讓您根據資料集的值或動態內容的其他來源，預先選取群組內的選項按鈕值。

若要設定對話方塊選項：

  1. 從「選項按鈕群組」彈出式選單中選取一個選項按鈕群組和表單。
  2. 按一下「選取的值等於」文字方塊旁邊的閃電圖示。

    「動態資料」對話方塊便會顯示。

  3. 從可用的動態內容來源清單中，選取資料集或其他動態內容來源。您也可以使用格式彈出式選單，設定所選取資料項目的格式，並指定一個標籤供頁面內的資料預留位置使用。
  4. 按一下「確定」以關閉「動態資料」對話方塊。
  5. 按一下「確定」以關閉「動態選項按鈕群組」對話方塊，並在「選項按鈕群組」中插入動態內容預留位置。

相關主題

  • 設定動態選項按鈕群組對話方塊選項
  • 插入 HTML 選項按鈕
  • 動態式預先選取 HTML 選項按鈕
  • 定義資料集


設定動態選項按鈕群組對話方塊選項

「動態選項按鈕」對話方塊能可以讓您在顯示網頁或在 HTML 表單內顯示記錄時，以動態方式預先選取按鈕群組內的選項按鈕。

若要設定對話方塊選項：

  1. 在「選項按鈕群組」彈出式選單中，選取網頁中的表單和選項按鈕群組。

    「選項按鈕值」文字方塊會顯示群組內所有選項按鈕的值。

  2. 選取要從顯示值的清單中以動態方式預先選取的值。此值將顯示在「值」文字方塊中。
  3. 按一下「選取的值等於」方塊旁邊的閃電圖示，並選取資料集，該資料集需包含群組中選項按鈕的可能核取值。

    您選取的資料集應該包含符合選項按鈕已核取值的值。若要檢視選項按鈕的核取值，請選取每個選項按鈕，然後開啟它的「屬性」檢視窗 (「視窗＞屬性」)。

  4. 按一下「確定」。

相關主題

  • 動態式預先選取 HTML 選項按鈕
  • 插入 HTML 選項按鈕
  • 定義資料集


設定動態文字欄位對話方塊選項

「動態文字欄位」對話方塊會建立動態文字欄位。

若要設定對話方塊選項：

  1. 從「文字欄位」彈出式選單中，選取要呈動態效果的文字欄位。
  2. 按一下「選取的值等於」方塊旁邊的閃電圖示，並從資料來源清單中選取一種資料來源。

    資料來源應該包含文字資訊。如果清單中沒有資料來源，或者如果可用的資料來源不符合您的需求，請按一下加號 (+) 按鈕定義新的資料來源。如需相關說明，請參閱關於動態內容來源。

  3. 按一下「確定」。

相關主題

  • 在 HTML 文字欄位中顯示動態內容
  • 插入 HTML 文字欄位
  • 設定文字欄位屬性
  • 定義資料集


設定動態核取方塊對話方塊選項

此對話方塊可以讓您根據布林 (Boolean) 值，預先選取核取方塊。

若要設定對話方塊選項：

  1. 如果您希望記錄中的欄位等於某個值時才選取核取方塊，請執行下列動作：
    • 按一下「如果以下條件為真，請選取」方塊旁邊的閃電圖示，然後從資料來源清單中選取欄位。

      資料來源必須包含布林資料，如 Yes 和 No，或 True 和 False。如果清單中沒有資料來源，或者如果可用的資料來源不符合您的需求，請按一下加號 (+) 按鈕定義新的資料來源。如需相關說明，請參閱關於動態內容來源。

    • 在「等於」方塊中，為要顯示為已選取狀態的核取方塊輸入欄位必須有的值。

      例如，如果在記錄中的特定欄位有 Yes 值時，您要核取方塊顯示為已選取狀態，請在「等於」方塊中輸入 Yes。

      注意

      如果使用者按表單的「送出」按鈕，也會將這個值傳回給伺服器。
  2. 按一下「確定」。

相關主題

  • 動態式預先選取 HTML 核取方塊
  • 插入 HTML 核取方塊
  • 定義資料集


設定動態清單/選單對話方塊選項

「動態清單/選單」對話方塊可以讓您將取自資料庫或其他內容來源的內容，填入清單/選單表單物件中。

若要設定對話方塊選項：

  1. 在「選單」彈出式選單中，選取您想要製作動態效果的清單/選單表單物件。
  2. 在「資料集」彈出式選單的選項中，選取您想要用來作為內容來源的資料集。稍後，此選單也讓您能夠編輯靜態和動態清單/選單項目。
  3. 「靜態選項」區域讓您輸入清單或選單中的預設項目。這個部份的對話方塊也讓您能夠在新增動態內容之後，再編輯清單/選單表單物件中的靜態項目。

    使用加號 (+) 和減號 () 按鈕，新增及移除清單中的項目。項目的順序與「初始清單值」對話方塊中的順序相同。當瀏覽器載入頁面時，清單上的第一個項目就是選取的項目。使用向上和向下鍵按鈕來重新排列清單中的項目。

  4. 在「值」彈出式選單中，選取包含選單項目值的欄位。
  5. 在「標籤」彈出式選單中，選取包含選單項目標籤的欄位。
  6. 如果您希望在瀏覽器中開啟頁面時，或在表單中顯示記錄時，已選取了特別的選單項目，請在「選取的值等於」方塊中輸入選單項目值的相等值。

    您可以輸入靜態值或指定動態值，只要按一下方塊旁邊的閃電圖示並從資料來源清單中選取一個動態值即可。不論是哪一種情況，您指定的值應該要符合其中一個選單項目值。

  7. 按一下「確定」。

相關主題

  • 建立動態 HTML 表單選單
  • 使現有的 HTML 表單選單呈現動態效果
  • 定義資料集
  • 插入 HTML 表單選項


設定清單值對話方塊選項

使用「清單值」對話方塊，在表單選單中新增項目。

若要設定對話方塊選項：

  1. 使用加號 (+) 和減號 () 按鈕，新增及移除清單中的項目。
  2. 為各選單項目輸入標籤文字及選擇性的值。

    清單中的每一個項目都有標籤 (出現在清單中的文字) 和值 (選取項目時傳送給處理應用程式的值)。如果沒有指定值，則換成將標籤傳送給處理應用程式。

  3. 使用向上和向下鍵按鈕來重新排列清單中的項目。

    項目在選單中出現的順序與在「清單值」對話方塊中出現的順序相同。當瀏覽器載入頁面時，清單上的第一個項目就是選取的項目。

相關主題

  • 設定選單屬性
  • 插入 HTML 表單選項


快速開發應用程式

網路應用程式通常會使網頁具有讓使用者可以搜尋資料庫的功能，也會有讓使用者可以插入、更新，或刪除資料庫中資料的功能，以及限制存取網站的功能。您可以使用 Macromedia Dreamweaver 8 迅速建立這些頁面。

這部份包含下列各章：

快速建立 ColdFusion 應用程式

快速建立 ASP.NET 應用程式

快速建立 ASP 與 JSP 應用程式

快速建立 PHP 應用程式


快速建立 ColdFusion 應用程式

使用 Macromedia Dreamweaver 8 中的工具，幾乎不需要撰寫程式碼，就可以迅速建立 ColdFusion 網路應用程式。

本章包含下列各節：

關於快速應用程式開發 (所有伺服器)

建立 ColdFusion MX 7 表單

建立主要/細節頁面 (ColdFusion)

建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)

建立記錄插入頁面 (所有伺服器)

建立用以更新記錄的頁面 (ColdFusion)

建立用以刪除記錄的頁面 (ColdFusion)

使用預存程序修改資料庫 (ColdFusion)

建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)

保護應用程式中的資料夾 (ColdFusion)

使用 ColdFusion 組件


關於快速應用程式開發 (所有伺服器)

快速應用程式開發 (Rapid Application Development，RAD) 是一項軟體開發過程，用於讓應用程式的建立更加簡易及快速。RAD 工具一般都是處理軟體專案的細節，十分類似在建築規劃中處理牆壁繪製或加入窗戶等細節的電腦輔助設計 (CAD) 工具。

Dreamweaver 是適用於網站設計人員以及網路應用程式開發人員的 RAD 工具。您可以使用 Dreamweaver 建立可在資料庫中搜尋、插入、更新或刪除記錄的頁面。Dreamweaver 會處理建立頁面的細節；開發人員幾乎不需要撰寫程式碼 (Dreamweaver 也為喜歡為頁面撰寫全部或部份程式碼的開發人員，提供了功能完整的程式碼撰寫環境)。

本節包含下列概念性主題：

  • 關於主要/細節頁面
  • 關於搜尋/結果頁面
  • 關於進階的資料庫操作物件


關於主要/細節頁面

所謂的主要頁面，就是指列出所有記錄和各個記錄對應連結的頁面；當使用者按下連結時，會開啟該筆記錄的細節頁面，顯示關於該記錄較為詳細的資訊。例如，以下是某虛構公司的主要頁面。

當使用者按下其中一個連結的位置名稱時，便會開啟細節頁面：

結果頁面其實就是一般類型的主要頁面，但是，和本節中所描述的主要頁面不同，結果頁面中所顯示的記錄並不是由您或是網頁的設計師所決定，而是由使用者來決定的 (使用者會進行資料庫搜尋，進而決定結果頁面的清單內容)。如需有關此類型主要頁面的詳細資訊，請參閱關於搜尋/結果頁面。

細節頁面也可以用來更新或刪除顯示的記錄。

相關主題

  • 建立主要/細節頁面 (ColdFusion)
  • 建立主要/細節頁面 (ASP.NET)
  • 建立主要/細節頁面 (ASP 與 JSP)
  • 建立主要/細節頁面 (PHP)


關於搜尋/結果頁面

在大多數的情況中，您至少要有兩個頁面才能在網路應用程式中加入這項功能。第一個頁面是內含可讓使用者輸入搜尋參數的 HTML 表單頁面。雖然這個頁面並不執行任何實際的搜尋工作，但我們一般都將這個頁面視為「搜尋頁面」。

您所需要的第二個頁面是結果頁面，負責執行大部份的工作。結果頁面負責執行下列工作：

  • 讀取由搜尋頁面所送出的搜尋參數
  • 連線到資料庫並搜尋記錄
  • 使用所找到的記錄建立資料集
  • 顯示資料集的內容

此外，您也可以選擇性地加入一個細節頁面，提供使用者有關結果頁面中特定記錄的詳細資訊。

如果您使用 ASP.NET，可以將搜尋頁面和結果頁面合併在一個頁面中。

如果您只有一個搜尋參數，Dreamweaver 還允許您在不使用 SQL 查詢和變數的情況下，將搜尋功能加入網路應用程式之中，您只需進行頁面的設計工作，然後於一些對話方塊中完成一些設定就可以了。如果您必須用到的搜尋參數不只一個，就必須撰寫 SQL 陳述式並定義其所需的多個變數。

Dreamweaver 會在頁面中插入 SQL 查詢。當頁面在伺服器上執行時，便會檢查資料庫表格中的各筆記錄。如果在記錄中發現有符合 SQL 查詢條件的特定欄位，就會將該筆記錄包含於資料集中。SQL 查詢便會建立一個只包含搜尋結果的資料集。

舉例來說，區域銷售人員想要取得特定區域中，收入超過某個水準的客戶之相關資訊。在搜尋頁面的表單中，於行銷區域輸入特定的地理區域，並設定收入水準，然後按一下「送出」按鈕，將這兩個值傳送到伺服器。在伺服器上，會將這些值傳送至結果頁面的 SQL 陳述式，接著會建立一個只包含指定區域中，收入超過指定水準的客戶資料集。

相關主題

  • 建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)
  • 建立資料庫搜尋頁面 (ASP.NET)


關於進階的資料庫操作物件

除了使用伺服器行為來建立修改資料庫的頁面，您也可以使用資料庫操作物件 (例如預存程序、ASP 命令物件或 JSP 就緒陳述式) 來建立頁面。

本節包含下列概念性主題：

  • 預存程序
  • ASP 命令物件
  • JSP 就緒陳述式


預存程序

預存程序是能在資料庫執行某種作業，且可重複使用的資料庫項目。在預存程序中含有 SQL 程式碼，可以插入、更新或刪除記錄。預存程序也可以更改資料庫本身的結構。例如，您可以使用預存程序加入表格欄，甚至刪除整個表格。

預存程序也可以呼叫另一個預存程序，接受輸入參數，將多個數值以輸出參數的形式回傳至呼叫程序中的預存程序。

重複使用預存程序的好處是您可以重複使用一套經過編譯的程序，執行數次資料庫作業。如果您知道將會需要執行某項資料庫作業許多次，或是有許多不同應用程式會執行相同的作業，那麼使用預存程序執行這項作業，會使資料庫運作更有效率。

注意

MySQL 以及 Microsoft Access 資料庫並不支援預存程序。

相關主題

  • 使用預存程序修改資料庫 (ColdFusion)
  • 使用預存程序修改資料庫 (ASP.NET)
  • 使用預存程序修改資料庫 (ASP 與 JSP)


ASP 命令物件

ASP 命令物件是一種可以在資料庫上進行某種作業的伺服器物件。物件可以包含任何有效的 SQL 陳述式，包括可回傳資料集的陳述式，或是可以在資料庫中插入、更新或是刪除記錄的陳述式。如果 SQL 陳述式會在表格中加入或刪除欄，則命令物件也可以更改資料庫的結構。您也可以使用命令物件在資料庫中執行預存程序。

重複使用命令物件的好處是，應用程式伺服器可以使用一套經過編譯的物件，重複執行命令數次。只要將「命令」物件的「就緒」屬性設定為 true，便能重複使用命令，如以下的 VBScript 陳述式所示：

mycommand.Prepared = true

如果您知道將會需要執行命令許多次，那麼使用單一編譯過的物件版本，將可使資料庫的運作更有效率。

注意

但並非所有資料庫供應商都能支援就緒命令。如果您的資料庫無法支援這個命令，則在將這個屬性設定為 true 時就會傳回錯誤。資料庫甚至可能忽略使命令就緒的要求，而「就緒」屬性設定為 false。

命令物件是由 ASP 頁面上的 Script 所建立，但 Dreamweaver 可以讓您不需另外撰寫任何一行 ASP 程式碼，就可以建立命令物件。如需詳細資訊，請參閱使用 ASP 命令修改資料庫。


JSP 就緒陳述式

JSP 就緒陳述式是含有 SQL 陳述式的可重複使用伺服器物件。您可以在就緒陳述式中加入任何有效的 SQL 陳述式。例如，就緒陳述式中可包含回傳資料集的 SQL 陳述式，或是可在資料庫中插入、更新或是刪除記錄的陳述式。

重複使用就緒陳述式的好處是，應用程式伺服器使用單一實體的就緒陳述式物件，就可以查詢資料庫許多次。不同於 JSP 陳述式物件，系統並不會為每個新的資料庫查詢作業建立就緒陳述式物件的新實體。如果您知道某個陳述式將會執行數次，擁有物件的單一實體可讓資料庫作業更有效率，減少佔用的伺服器記憶體。

就緒陳述式物件是由 JSP 頁面中的 Java Scriptlet 建立。不過，Dreamweaver 可以讓您不需另外撰寫任何一行 Java 程式碼，就能建立就緒陳述式。

如果您對程式碼有興趣，以下就是建立就緒陳述式的 Scriptlet：

String myquery = "SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?";
PreparedStatement mystatement = connection.prepareStatement(myquery);

第一行將 SQL 陳述式儲存於名為 myquery 的字串變數中，問號則是 SQL 變數值的預留位置。第二行建立名為 mystatement 的就緒陳述式物件。

下一步您要為 SQL 變數指定數值，方法如下：

mystatement.setString(1, request.getParameter("myURLparam"));

setString 方法指定變數的值，需要兩個引數。第一個引數指定受引數位置影響的變數 (在這裡是指 SQL 陳述式中的第一個位置)。第二個引數指定變數的值。在這個範例中，數值是由傳送至頁面的 URL 參數所提供。

注意

若要為 SQL 變數指定非字串值，必須使用不同的方法。例如，若要將變數指定為整數，就必須使用 mystatement.setInt() 方法。

最後會產生如下的資料集：

ResultSet myresults = mystatement.execute();

如需如何使用 Dreamweaver 中的「快速應用程式開發」(RAD) 工具建立 JSP 就緒陳述式的詳細資訊，請參閱使用 JSP 就緒陳述式來修改資料庫。


建立 ColdFusion MX 7 表單

Dreamweaver 為使用 ColdFusion MX 7 或更新版本做為其開發伺服器的 ColdFusion 開發人員，提供許多增強功能。這些增強功能包括許多「插入」列按鈕、選單項目和「屬性」檢視窗，使您能夠快速建立並設定 ColdFusion 表單的屬性。您也可以使用 Dreamweaver 來產生程式碼，以便驗證網站訪客所提供的資訊。例如，您可以檢查使用者輸入的電子郵件地址是否包含 @ 符號，或必要文字欄位是否有包含數值。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這些增強功能。

本節包含下列主題：

  • 啟用 ColdFusion 增強功能
  • 建立 ColdFusion 表單
  • 插入 ColdFusion 表單控制項
  • 以視覺化方式設定 ColdFusion 表單控制項的屬性
  • 驗證 ColdFusion 表單資料


啟用 ColdFusion 增強功能

Dreamweaver 為 ColdFusion 開發人員提供許多增強功能，部分增強功能會要求您將執行 ColdFusion MX 7 或更新版本的電腦定義為 Dreamweaver 的測試伺服器。例如，唯有當您指定了正確的測試伺服器之後，才能使用表單控制項的新「屬性」檢視窗。

測試伺服器只需定義一次，之後 Dreamweaver 會自動偵測測試伺服器的版本，只要偵測到 ColdFusion MX 7，就會啟用增強功能。

若要為 ColdFusion 開發人員啟用增強功能：

  1. 如果以前不曾執行過，請先為您的 ColdFusion 專案定義一個 Dreamweaver 網站。

    如需詳細資訊，請參閱設定 Dreamweaver 網站。

  2. 選取「網站＞管理網站」以開啟「進階網站定義」對話方塊；從清單中選取您的網站，然後按一下「編輯」。

    如果出現「基本網站定義」對話方塊，請按一下「進階」索引標籤以切換到「進階」版本。

  3. 選取「測試伺服器」類別，並且指定執行 ColdFusion MX 7 或更新版本的電腦做為您 Dreamweaver 網站的測試伺服器。

    請確認您已指定了有效的 URL 前置詞。

    如需詳細資訊，請參閱指定可以處理動態網頁的位置。

  4. 開啟任何的 ColdFusion 文件。

    除非您開啟 ColdFusion 文件，否則無法看到任何 Dreamweaver 工作區的改變。

相關主題

  • 建立 ColdFusion 表單
  • 保護應用程式中的資料夾 (ColdFusion)
  • 在 Dreamweaver 中檢視 ColdFusion 組件
  • 在 ColdFusion 組件中定義資料集
  • 使用 CFC 資料集做為動態內容的來源
  • 建立或修改 ColdFusion 資料來源


建立 ColdFusion 表單

您可以使用許多「插入」列按鈕、選單項目和「屬性」檢視窗，在 Dreamweaver 中快速建立 ColdFusion 表單並設定其屬性。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這些增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要建立 ColdFusion 表單：

  1. 開啟 ColdFusion 頁面，然後將插入點放在您希望 ColdFusion 表單出現的位置。
  2. 選取「插入＞ColdFusion 物件＞CFForm＞CFForm」，或從「插入」列選取「CFForm 類別」，然後按一下「CF 表單」圖示。

    Dreamweaver 會插入空白的 ColdFusion 表單。在「設計」檢視中，表單會以點狀的紅色外框來表示。如果您看不到此外框，請確認是否已選取「檢視＞視覺輔助＞隱藏元素」。

  3. 請確認此表單仍維持選取狀態，然後使用「屬性」檢視窗指定即將處理表單資料的頁面或 Script。

    在「屬性」檢視窗的「行為」文字方塊中，輸入頁面或 Script 的路徑，或按一下文字方塊旁的資料夾圖示，瀏覽到頁面或 Script。

    如果您無法看到「屬性」檢視窗的「行為」文字方塊，請按一下「文件」視窗中的表單外框以選取該表單。

  4. 在「方法」彈出式選單中，選取您想用來將表單資料傳輸到伺服器的方法：

    預設會使用瀏覽器的預設設定來將表單資料傳送給伺服器。一般來說，預設值為 get 方法。

    GET 會在要求頁面的 URL 附加值。

    POST 會在 HTTP 要求中內嵌表單資料。

    如需詳細資訊，請按一下「屬性」檢視窗上的「說明」圖示。

  5. 插入 ColdFusion 表單控制項。

    請將插入點放在 ColdFusion 表單中，您希望 ColdFusion 表單控制項出現的位置上，然後從「插入」選單 (「插入＞ColdFusion 物件＞CFForm」) 當中選取控制項，或從「插入」列的 CFForm 類別中選取。

    如需詳細資訊，請參閱插入 ColdFusion 表單控制項。

  6. 如有需要，請使用「屬性」檢視窗來設定控制項的屬性。

    請確認已在「設計」檢視中選取此控制項，然後在「屬性」檢視窗中設定屬性。如需關於屬性的詳細資訊，請按一下「屬性」檢視窗上的「說明」圖示。

  7. 調整 ColdFusion 表單的版面。

    如果您要建立 HTML 表單，可以使用斷行符號、分段符號、預先格式化的文字或表格來格式化表單。您無法在另一個 ColdFusion 表單中插入 ColdFusion 表單 (也就是說，您無法重疊標籤)，但是您可以在頁面中放入一個以上的 ColdFusion 表單。

    如果您要建立 Flash 表單，可以使用 CSS 樣式來配置您的表單。ColdFusion 會忽略表單中的 HTML。

    請記得將 ColdFusion 表單欄位標示為描述性文字，讓使用者知道該怎麼回應。例如，建立「輸入您的姓名標籤」等文字，要求使用者提供姓名資訊。

相關主題

  • 驗證 ColdFusion 表單資料


插入 ColdFusion 表單控制項

您可以使用「插入」列或「插入」選單，在 ColdFusion 表單中快速地插入 ColdFusion 表單控制項。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這些增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

在插入控制項之前，您應該先建立一份空白的 ColdFusion 表單。如需詳細資訊，請參閱建立 ColdFusion 表單。在嘗試插入控制項之前如果沒有建立空白的表單，Dreamweaver 也會詢問您是否要建立表單。

本節包含下列主題：

  • 插入 ColdFusion 文字欄位
  • 插入 ColdFusion 隱藏欄位
  • 插入 ColdFusion 文字區域
  • 插入 ColdFusion 按鈕
  • 插入 ColdFusion 核取方塊
  • 插入 ColdFusion 選項按鈕
  • 插入 ColdFusion 選取方塊
  • 插入 ColdFusion 影像欄位
  • 插入 ColdFusion 檔案欄位


插入 ColdFusion 文字欄位

您可以以視覺化的方式將 ColdFusion 文字欄位或密碼欄位插入表單中，然後再設定其屬性。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 文字欄位：

  1. 在「設計」檢視中，將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 文字欄位」圖示。

    文字欄位便會出現在表單中。

  3. 在「屬性」檢視窗中，設定文字欄位屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

  4. 若要標示頁面上的文字欄位，請在欄位旁邊按一下，然後輸入標籤的文字。

若要以視覺化的方式插入密碼欄位：

  1. 請重複前面插入文字欄位程序的步驟 1 和 2。
  2. 選取插入的文字欄位，以顯示其「屬性」檢視窗。
  3. 從「屬性」檢視窗的「文字模式」彈出式選單中選取數值密碼。

相關主題

  • 驗證 ColdFusion 表單資料
  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 隱藏欄位

您可以以視覺化的方式將 ColdFusion 隱藏欄位插入表單中並設定其屬性。隱藏欄位可以用來儲存並送出使用者沒有輸入的資訊。使用者看不到隱藏的資訊。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 隱藏欄位：

  1. 在「設計」檢視中，將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 隱藏欄位」圖示。

    ColdFusion 表單中會出現一個標記，若您看不到這個標記，請選取「檢視＞視覺輔助＞隱藏元素」。

  3. 請在「屬性」檢視窗中設定隱藏欄位的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 文字區域

您可以以視覺化的方式將 ColdFusion 文字區域插入表單中並設定其屬性；文字區域是一種 INPUT 元素，其中含有多行文字。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺方式插入 ColdFusion 文字區域：

  1. 將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 文字區域」圖示。

    文字區域便會出現在 ColdFusion 表單中。

  3. 在「屬性」檢視窗中設定文字區域的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

  4. 若要標示文字區域，請按一下區域的旁邊，然後輸入標籤文字。

相關主題

  • 驗證 ColdFusion 表單資料
  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 按鈕

您可以以視覺化的方式將 ColdFusion 按鈕插入表單中並設定其屬性；ColdFusion 按鈕會控制 ColdFusion 表單的作業。您可以使用按鈕將 ColdFusion 表單資料傳送到伺服器，或重設 ColdFusion 表單。標準 ColdFusion 按鈕通常標記為「送出」、「重設」或「傳送」。您也可以指派在 Script 中定義的其他處理工作，例如，按鈕可能會根據指定值來計算選取項目的總花費。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 按鈕：

  1. 將插入點放在 ColdFusion 表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 文字區域」圖示。

    按鈕便會出現在 ColdFusion 表單中。

  3. 在「屬性」檢視窗中設定按鈕的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 核取方塊

您可以以視覺化的方式將 ColdFusion 核取方塊插入表單中並設定其屬性；使用核取方塊可以讓使用者從一組選項中選取一個以上的選項。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 核取方塊：

  1. 將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 核取方塊」圖示。

    核取方塊便會出現在 ColdFusion 表單中。

  3. 在「屬性」面板中設定核取方塊的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

  4. 若要標示核取方塊，請在頁面上核取方塊的旁邊按一下，然後輸入標籤文字。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 選項按鈕

您可以以視覺化的方式將 ColdFusion 選項按鈕插入表單中並設定其屬性；當您只想讓使用者從一組選項中選取一個選項時，請使用選項按鈕。選項按鈕通常用於群組中，同一群組中的選項按鈕名稱必須相同。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 選項按鈕：

  1. 將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 選項按鈕」圖示。

    選項按鈕便會出現在 ColdFusion 表單中。

  3. 在「屬性」檢視窗中設定選項按鈕的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

  4. 若要標示選項按鈕，請在頁面上的選項按鈕旁邊按一下，然後輸入標籤文字。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 選取方塊

您可以以視覺化的方式將 ColdFusion 選取方塊插入表單中並設定其屬性；選取方塊可以讓瀏覽者從清單中選取一或多個項目。當空間有限但卻需要顯示許多項目時，選取方塊就很有用。當您想要控制傳回伺服器的值時，選取方塊也很有用。選取方塊並不像文字欄位般，可以讓使用者隨意輸入任何文字，而是藉由選單來設定正確的傳回值。

您可以在表單中插入兩種類型的選取方塊：一種選單會在使用者按一下滑鼠時拉下，另一種選單則會顯示可捲動的項目清單，以供使用者選取。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 選取方塊：

  1. 將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 選取」圖示。

    選取方塊便會出現在 ColdFusion 表單中。

  3. 在「屬性」檢視窗中設定選取方塊的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 影像欄位

您可以以視覺化的方式將 ColdFusion 影像欄位插入表單中並設定其屬性；使用影像欄位製作自訂按鈕。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 影像欄位：

  1. 在「設計」檢視中，將插入點放在表單外框內。
  2. 在「插入」列的 CFForm 類別中，按一下「CF 影像欄位」圖示。

    這時會出現對話方塊提示您瀏覽至需要的影像；請選取影像並將其插入，然後再按一下「確定」按鈕。

    如果影像位於網站的根資料夾之外，Dreamweaver 會詢問您是否要將影像複製到根資料夾中。當您發佈網站時，可能無法使用位於根資料夾外部的影像。

    您也可以輸入希望顯示於「屬性」檢視窗之「原始檔」文字方塊中的影像檔路徑。

  3. 在「屬性」檢視窗中設定影像欄位的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 檔案欄位

您可以以視覺化的方式將 ColdFusion 檔案欄位插入表單中並設定其屬性；使用檔案欄位讓使用者從電腦中選取檔案 (如文書處理的文件或圖形檔案)，並將其上傳到伺服器。ColdFusion 檔案欄位除了包含一個「瀏覽」按鈕之外，它看起來就像其他文字欄位一樣。使用者可以手動輸入要上傳的檔案路徑，或使用「瀏覽」按鈕以找出並選取檔案。

您需要在檔案欄位中使用 POST 方法才能將檔案從瀏覽器傳輸到伺服器。檔案會公佈到您在表單「動作」文字方塊中所指定的位址。請和您的伺服器管理員聯絡，確認在表單中使用檔案欄位之前，可允許以匿名方式將檔案上傳。

檔案欄位還要求將表單編碼設定為 multipart/form。當您插入檔案欄位控制項時，Dreamweaver 會自動進行這個設定。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式插入 ColdFusion 檔案欄位：

  1. 在「設計」檢視中，選取 CFForm 來顯示其「屬性」檢視窗。

    若要快速選取表單，請按一下表單外框的任何地方，再按一下位於「文件」視窗底部標籤選取器中的「CFForm 標籤」。

  2. 在「屬性」檢視窗中，將表單方法設定為 POST。
  3. 從「編碼類型」彈出式選單中，選取 multipart/form-data。
  4. 將插入點放在您希望顯示檔案欄位的表單外框內。
  5. 在「插入」列的 CFForm 類別中，按一下「CF 檔案欄位」圖示。

    檔案欄位便會出現在文件中。

  6. 在「屬性」檢視窗中設定檔案欄位的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

相關主題

  • 以視覺化方式設定 ColdFusion 表單控制項的屬性


插入 ColdFusion 日期欄位

雖然您無法以視覺化的方式在 Dreamweaver 中插入 ColdFusion 日期欄位，卻能以視覺化的方式設定其屬性。ColdFusion 日期欄位是一種特殊類型的文字欄位，可以讓使用者在彈出式的月曆中選取日期，並將其插入文字欄位。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要插入 ColdFusion 日期欄位並設定其屬性：

  1. 在「設計」檢視中，選取 CFForm 來顯示其「屬性」檢視窗。

    若要快速選取表單，請按一下表單外框的任何地方，再按一下位於「文件」視窗底部標籤選取器中的「CFForm 標籤」。

  2. 在「屬性」檢視窗中，將表單的 Format 屬性設定為 Flash。

    日期欄位控制項僅能顯示於以 Flash 為主的 ColdFusion 表單中。

  3. 切換到「程式碼」檢視 (「檢視＞程式碼」)，然後在開啟及關閉 CFForm 標籤之間的任何地方輸入下列標籤：
    <cfinput name="datefield" type="datefield">
  4. 在「屬性」檢視窗中，設定日期欄位的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。


以視覺化方式設定 ColdFusion 表單控制項的屬性

您可以以視覺化的方式變更您在「設計」檢視或「程式碼」檢視中所使用的 ColdFusion 表單控制項屬性。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要以視覺化的方式變更 ColdFusion 表單控制項：

  1. 在「設計」檢視中，選取頁面上的表單控制項；在「程式碼」檢視中，按一下控制項標籤內的任何地方。

    「屬性」檢視窗會顯示表單控制項的屬性。

  2. 在「屬性」檢視窗中，變更控制項的屬性。

    如需詳細資訊，請按一下「屬性」檢視窗中的「說明」圖示。

  3. 若要設定更多屬性，請按一下「屬性」檢視窗的「顯示標籤編輯器」按鈕，然後在出現的標籤編輯器中設定屬性。


驗證 ColdFusion 表單資料

您可以在 Dreamweaver 中建立 ColdFusion 表單，檢查指定欄位的內容，以確認使用者輸入的資料類型是否正確。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項 Dreamweaver 增強功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要驗證 ColdFusion 表單資料：

  1. 建立至少包括一個輸入欄位及一個「送出」按鈕的 ColdFusion 表單。

    確定要驗證的每個 ColdFusion 欄位都有唯一的名稱。

  2. 在表單中選取您要驗證的欄位。
  3. 在「屬性」檢視窗中，指定您要驗證欄位的方式。

每一個輸入「屬性」檢視窗的下方，都含有控制項可以協助您定義特定的驗證規則。例如，您可能希望指定某個文字欄位應該包括電話號碼。如果要這麼做，您可以從「屬性」檢視窗的「值」彈出式選單中選取「電話」。您也可以從「驗證於」彈出式選單中指定要進行驗證的時間。


建立主要/細節頁面 (ColdFusion)

使用 Dreamweaver，您可以建立多套可以呈現兩個細節層級資訊的頁面：主要頁面會列出記錄，而細節頁面會顯示更多關於各筆記錄的詳細資料。本節說明如何建立這些類型的主要/細節頁面。

本節包含下列主題：

  • 一次作業建立主要/細節頁面 (ColdFusion、ASP、JSP、PHP)
  • 建立各個區段的主要/細節頁面 (ColdFusion)


一次作業建立主要/細節頁面 (ColdFusion、ASP、JSP、PHP)

在開發網路應用程式時，您可以使用「主要/細節頁面設定」應用程式物件，快速建立主要/細節頁面。應用程式物件讓您只要完成一兩個對話方塊，就可以建立一組完整的動態頁面。

您在 ColdFusion、ASP、JSP 和 PHP 頁面所使用的方法都是完全相同的。如需有關建立 ASP.NET 主要/細節頁面的詳細資訊，請參閱建立主要/細節頁面 (ASP.NET)。

若要使用應用程式物件來完成主要/細節頁面的設定：

  1. 在 Dreamweaver 中，建立空白動態頁面的方式為：選擇「檔案＞開新檔案＞動態」，選取動態頁面，然後按一下「建立」。

    此頁面將會成為主要頁面。

  2. 定義頁面的資料集 (Recordset)。

    您可以在設計階段定義資料集 (請參閱定義資料集)，或者使用者也可以在執行階段定義資料集 (請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP))。

    請確定該資料集中不只包含主要頁面所需的所有資料欄，同時也必須要包含細節頁面所需的所有欄位。通常，主要頁面中的資料集會從資料庫表格中擷取少許的資料欄，而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄以提供更詳細的資訊。

  3. 在「設計」檢視中開啟主要頁面，再選取「插入＞應用程式物件＞主要及細節頁面設定」。

    「主要及細節頁面設定」對話方塊便會出現。

  4. 完成對話方塊。

    如需詳細資訊，請參閱設定主要及細節頁面設定的對話方塊選項。

  5. 按一下「確定」。

    應用程式物件會建立一個細節頁面 (如果您尚未建立細節頁面)，並同時在主要頁面和細節頁面中加入動態內容和伺服器行為。

  6. 依照您的需求自訂主要和細節頁面的版面。

    使用 Dreamweaver 網頁設計工具可以完全自訂每個頁面的版面。您也可以在「伺服器行為」面板中的項目上按兩下，來編輯伺服器行為。

在使用應用程式物件建立主要/細節頁面之後，請使用「伺服器行為」面板 (「視窗＞伺服器行為」) 來修改應用程式物件插入頁面中的各種建置組塊。如需詳細資訊，請參閱編輯網頁上的動態內容。

您也可以使用個別伺服器行為來建立主要/細節頁面。如需詳細資訊，請參閱下列各節：

  • 建立各個區段的主要/細節頁面 (ColdFusion)
  • 依組塊建立個別的主要/細節頁面 (ASP 與 JSP)
  • 依組塊建立個別的主要/細節頁面 (ASP 及 JSP)


建立各個區段的主要/細節頁面 (ColdFusion)

您可以使用「伺服器行為」面板，分別新增主要/細節頁面的基本建置組塊。

您也可以使用「主要/細節頁面設定」應用程式物件，一次新增建置組塊。如需詳細資訊，請參閱一次作業建立主要/細節頁面 (ColdFusion、ASP、JSP、PHP)。

本節包含使用伺服器行為來建立主要/細節頁面的步驟：

  • 建立主要頁面 (ColdFusion)
  • 建立細節頁面的連結 (ColdFusion)
  • 建立連結的 URL 參數 (ColdFusion)
  • 找出所要求的記錄，並顯示於細節頁面中 (ColdFusion)


建立主要頁面 (ColdFusion)

本節說明如何建立列出資料庫記錄的主要頁面。您可以使用動態表格在 ColdFusion 頁面上列出記錄。

在開始之前，請確定您定義了資料庫的 ColdFusion 資料來源。如需詳細資訊，請參閱適用於 ColdFusion 開發人員的資料庫連線。

若要建立主要頁面：

  1. 在 Dreamweaver 中，建立新的 ColdFusion 頁面。

    選取「檔案＞開新檔案＞動態」後，選取「ColdFusion」，再按一下「建立」。便會在 Dreamweaver 中開啟空白的 ColdFusion 頁面。

  2. 定義頁面的資料集 (Recordset)。

    在「繫結」面板中，按一下加號 (+) 按鈕，選取「資料集 (查詢)」，再完成「資料集」對話方塊。如需詳細資訊，請按一下對話方塊中的「說明」按鈕。如果您想要撰寫自己的 SQL 陳述式，按一下「進階」按鈕，開啟進階的「資料集」對話方塊。

    確定資料集包含您建立動態表格所需要的所有表格欄。資料集也必須包括表格欄，其中含有各筆記錄的唯一索引鍵 -- 也就是記錄 ID 欄。在以下的範例中，CODE 欄含有識別出各筆唯一記錄的資訊。

    通常，主要頁面中的資料集會從資料庫表格中擷取少許的資料欄，而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄以提供更詳細的資訊。

    資料集可以由使用者在執行階段時加以定義。如需詳細資訊，請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)。

  3. 請插入動態表格，以在頁面上顯示記錄。

    將插入點放在頁面上您希望動態表格出現的位置，然後選擇「插入＞應用程式物件＞動態資料＞動態表格」。

    「動態表格」對話方塊便會出現。

  4. 完成「動態表格」對話方塊，再按一下「確定」。

    Dreamweaver 會在頁面中插入動態表格。

    如果您需要完成對話方塊的說明，請按一下對話方塊中的「說明」按鈕。

  5. 如果想要的話，可以刪除含有記錄 ID 的動態表格欄。

    如果您不希望對使用者顯示記錄 ID，可以從動態表格中刪除欄位。按一下頁面中的任何地方，將焦點移到頁面中。將游標移到動態表格中欄位頂端附近，使欄位儲存格的外框變成紅色後，按一下以選取這個欄位。按 Delete 鍵，從表格中刪除這個資料欄。

下一步是建立細節頁面的連結。請參閱建立細節頁面的連結 (ColdFusion)。


建立細節頁面的連結 (ColdFusion)

在主要頁面新增動態表格 (請參閱建立主要頁面 (ColdFusion)) 之後，必須建立開啟細節頁面的連結。本節說明如何建立連結。下節說明如何修改連結，讓它也能傳送使用者選取的記錄 ID。細節頁面將使用這個 ID 在資料庫中尋找所要求的記錄，然後加以顯示。

若要建立與細節頁面的連結：

  1. 在動態表格中的重複列中，選取要作為連結的文字或影像。

    在以下的範例中，所選取的是 {rsLocations.LOCATION_NAME} 預留位置。連結將會套用到欄中的位置名稱。

  2. 在「屬性」檢視窗中，按一下「連結」文字方塊旁邊的資料夾圖示。
  3. 瀏覽並選取細節頁面。

    細節頁面會出現在「屬性」檢視窗的「連結」文字方塊中。

    在動態表格中，所選取文字便會出現已連結。當頁面在伺服器上執行時，連結會套用到每個表格列中的文字。

下一步是建立將記錄 ID 傳送到細節頁面的 URL 參數。請參閱建立連結的 URL 參數 (ColdFusion)。


建立連結的 URL 參數 (ColdFusion)

動態表格中的連結 (請參閱建立細節頁面的連結 (ColdFusion)) 不僅必須開啟細節頁面，還必須傳送使用者所選取記錄的 ID。細節頁面使用這個 ID 在資料庫中尋找要求的記錄，然後顯示它。

記錄 ID 是以 URL 參數傳送到細節頁面。如需詳細資訊，請參閱URL 參數。

本節說明如何建立將記錄 ID 傳送到細節頁面的 URL 參數。

若要建立 URL 參數：

  1. 在主要頁面上，選取動態表格中的連結。

    如果「即時資料」檢視已開啟，選取第一列中的連結。

  2. 在「屬性」檢視窗的「連結」文字方塊中，在 URL 的結尾處加入下面的字串：
    ?recordID=#recordsetName.fieldName#

    問號會告訴伺服器，後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱，因為稍後您將會在細節頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下，值是由會從資料集傳回記錄 ID 的 ColdFusion 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 ColdFusion 運算式中，請用資料集的名稱來取代 recordsetName，再使用資料集中唯一識別各筆記錄的欄位名稱來取代 fieldName。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的。

    locationDetail.cfm?recordID=#rsLocations.CODE#

    執行頁面時，會將資料集的 CODE 欄位值插入動態表格的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，那麼便會在動態表格的「坎培拉」列中使用下列 URL：

    locationDetail.cfm?recordID=CBR
  3. 儲存頁面。

下一步是尋找所要求的記錄，並將該筆記錄顯示於細節頁面中。請參閱找出所要求的記錄，並顯示於細節頁面中 (ColdFusion)。


找出所要求的記錄，並顯示於細節頁面中 (ColdFusion)

在完成主要頁面 (請參閱建立連結的 URL 參數 (ColdFusion)) 之後，切換到細節頁面。您必須在資料庫中尋找所要求的記錄，並將其顯示於頁面中。相關的程序包含有定義保存單一資料的資料集─也就是主要頁面所要求的記錄，以及將資料集欄繫結至細節頁面中。

若要尋找所要求的記錄，並將該筆記錄顯示於細節頁面中：

  1. 切換至細節頁面。

    如果您還沒有細節頁面，請建立空白的 ColdFusion 頁面 (「檔案＞開新檔案」)。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階「資料集」對話方塊，按一下「簡單」以切換到簡單「資料集」對話方塊。

  3. 命名該資料集，然後選取將為資料集提供資料的 ColdFusion 資料來源及資料庫表格。
  4. 在「欄」區域中，選取要包含於資料集中的表格欄。

    資料集可以和主要頁面中的資料集相同或不同，通常，細節頁面中的資料集會提供較多的資料欄，以顯示較為詳細的資訊。

    如果是不同的資料集，請確定細節頁面上的資料集至少包含一個和主要頁面資料集共通的欄。共通的欄通常是記錄 ID 欄，但也可以是相關表格的結合欄位。

    若只想要將某些表格的資料欄納入資料集中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 想要的資料欄，以將其選取。

  5. 依照下列方法完成「篩選器」區段，以尋找和顯示主要頁面所傳送的 URL 參數中指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取資料集的欄，這個欄必須和主要頁面所傳送的 URL 參數值相同。例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。在前一節所討論的範例中，稱為 CODE 的資料集欄包含的值，與主要頁面所傳送的 URL 參數值相符。
    • 在第一個選單旁的彈出式選單中，選取等號 (系統應該已經自動選了等號)。
    • 在第三個彈出式選單中，選取「URL 參數」。

      主要頁面是使用 URL 參數將資訊傳送到細節頁面。

    • 在第四個文字方塊中，請輸入由主要頁面所傳送的 URL 參數名稱。例如，如果主要頁面用於開啟細節頁面的 URL 包含字尾 locationDetail.cfm?recordID=CBR，則輸入 recordID。

    「資料集」對話方塊外觀應如下所示：

  6. 按一下「確定」。

    資料集會在「繫結」面板中出現。

  7. 若要將資料集欄繫結至細節頁面，請選取「繫結」面板中的欄 (「視窗＞繫結」)，然後將它們拖曳到頁面中。

    如需詳細資訊，請參閱使文字成為動態。

在將主要及細節頁面上傳到伺服器之後，便可以在瀏覽器中開啟主要頁面。在按一下主要頁面上的細節連結之後，便會開啟細節頁面，其中包含有關所選取記錄的詳細資訊。


建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)

您可以使用 Dreamweaver 建立一套允許使用者搜尋資料庫的頁面。您在 ColdFusion、ASP、JSP 和 PHP 頁面所使用的方法都是完全相同的。如需有關建立 ASP.NET 搜尋/結果頁面的詳細資訊，請參閱建立資料庫搜尋頁面 (ASP.NET)。

本節包含下列主題：

  • 建立搜尋頁面
  • 建立結果頁面
  • 建立結果頁面的細節頁面


建立搜尋頁面

通常，網站中的搜尋頁面會包含可讓使用者輸入搜尋參數的表單欄位。至少在您的搜尋頁面中一定要有一個 HTML 表單，以及一個「送出」按鈕。

若要在搜尋頁面中加入一個 HTML 表單，請執行下列步驟：

  1. 開啟搜尋頁面或新頁面，然後選取「插入＞表單＞表單」。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  2. 從「插入」選單中選擇「表單」，加入要讓使用者輸入搜尋參數的表單物件。

    表單物件包含了文字欄位、選單、核取方塊，以及選項按鈕等。您可以視需要加入多個表單物件，以協助使用者讓他們的搜尋作業更完善；但是，要注意的是搜尋頁面上的搜尋參數數目愈多，也就代表著 SQL 陳述式會愈複雜。

    如需表單物件的詳細資訊，請參閱插入 HTML 表單物件。

  3. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。
  4. 如果要更改「送出」按鈕上的標籤，請選取按鈕以開啟「屬性」檢視窗 (「視窗＞屬性」)，並在「標籤」方塊中輸入新的值。

    接下來，您必須指定當使用者按下「送出」按鈕時，表單要將搜尋參數送往何處。

  5. 如下所示，在「文件」視窗底部的標籤選取器中，選取 <form> 標籤以選取表單：

  6. 在表單的「屬性」檢視窗的「動作」文字方塊中，輸入負責執行資料庫搜尋的結果頁面檔案名稱。
  7. 在「方法」彈出式選單中，選取下列其中一個方法來指定表單傳送資料至伺服器的作業方式：
    • GET 會將表單資料附加於 URL 之後，以作為查詢字串送出。然而 URL 的長度只限 8192 個字元，所以 GET 方法不適用於長表單。
    • POST 會將表單資料作為訊息的內文而送出。
    • Default 則會使用瀏覽器的預設方法 (通常是 GET)。

這樣，就完成搜尋頁面了；接下來，要製作結果頁面。如需詳細資訊，請參閱建立結果頁面。

相關主題

  • 關於搜尋/結果頁面


建立結果頁面

當使用者按一下表單的「搜尋」按鈕時，就會將搜尋參數傳送到伺服器上的結果頁面。事實上，負責從資料庫中擷取資料記錄的是伺服器上的結果頁面，而不是瀏覽器中的搜尋頁面。

本節包含下列主題：

  • 只使用一個搜尋參數進行搜尋
  • 使用多個搜尋參數進行搜尋
  • 顯示結果

相關主題

  • 關於搜尋/結果頁面
  • 建立搜尋頁面
  • 建立結果頁面的細節頁面


只使用一個搜尋參數進行搜尋

如果搜尋頁面只送出一個搜尋參數至伺服器，則您可以在不使用 SQL 查詢和變數的情況下建立結果頁面。建立含篩選器的基本資料集，便能排除與搜尋頁面送出的搜尋參數不相符的記錄。

注意

如果您要使用一個以上的搜尋條件，就必須在進階「資料集」對話方塊中定義資料集 (請參閱使用多個搜尋參數進行搜尋)。

若要建立保存搜尋結果的資料集，請執行下列步驟：

  1. 在「文件」視窗中開啟結果頁面。

    如果您還沒有細節頁面，請建立空白的動態頁面 (「檔案＞開新檔案」)。

  2. 建立一個新的資料集，方法是開啟「繫結」面板 (「視窗＞繫結」)，按一下加號 (+) 按鈕，再從彈出式選單中選取「資料集」。
  3. 請確認所顯示的是簡單「資料集」對話方塊。

    如果所顯示的是進階對話方塊，請按一下「簡單」按鈕，切換成簡單對話方塊。

  4. 輸入資料集名稱，再選取連線。

    該連線應該是要連線到含有可讓使用者搜尋資料的資料庫。

  5. 在「表格」彈出式選單中，選取要在資料庫中進行搜尋的表格。

    注意

    在使用單一參數搜尋時，您可以只搜尋單一表格中的記錄；若要同時搜尋多個表格，您必須使用進階「資料集」對話方塊，而且要定義 SQL 查詢。
  6. 若只想要將某些表格的資料欄納入資料集中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 想要的資料欄，以將其選取。

    您應該只將包含了您要在結果頁面上顯示的資訊之資料欄納入。

目前先讓「資料集」對話方塊保持開啟。您會在稍後用它來擷取由搜尋頁面所送出的參數，並建立一個資料集篩選器來排除不符合參數的記錄。

若要建立資料集篩選器：

  1. 從「篩選器」區域中的第一個彈出式選單，選取資料庫表格中的資料欄，以搜尋相符參數。

    例如，如果搜尋頁面所傳送的值為城市名稱，請從表格中選取包含城市名稱的欄。

  2. 在第一個選單旁邊的彈出式選單中，選取等號 (系統應該會自動選取這個預設值)。
  3. 如果搜尋頁面中的表單是使用 POST 方法時，請在第三個彈出式選單中，選取「表單變數」；如果搜尋頁面中的表單是使用 GET 方法時，則請選取「URL 參數」。

    搜尋頁面使用表單變數或 URL 參數，將資訊傳送到結果頁面。

  4. 在第四個文字方塊中，請輸入搜尋頁面中接受搜尋參數的表單物件名稱。

    物件的名稱有兩種，一是表單變數的名稱，另一種則是 URL 參數的名稱。若要查看表單的名稱，請切換至搜尋頁面，點選表單中的表單物件以將其選取，再於「屬性」檢視窗中查看物件的名稱。

    例如，您想要建立一個只包含某特定國家中冒險旅行的資料集。假設表格中有一個名稱為 TRIPLOCATION 的資料欄。同時，我們還假設搜尋頁面中的 HTML 表單是使用 GET 方法，且其中包含一個名稱為「位置」的選單物件，用來顯示國家的清單。以下就是「篩選器」區段應有的外觀：

  5. 您可以按一下「測試」，輸入一個測試值，然後按一下「確定」，以連線到資料庫並建立一個資料集的實體。

    測試值會模擬由搜尋頁面所傳回的值。按一下「確定」來關閉測試資料集。

  6. 如果您對這個資料集感到滿意，請按一下「確定」。

Dreamweaver 會在您的頁面中插入一段伺服器端的 Script，會在伺服器上執行時檢查資料庫表格中的每一筆記錄。如果在記錄中發現有符合篩選條件的特定欄位，就會將該筆記錄包含於資料集中。這個 Script 便會建立一個只含有搜尋結果的資料集。

下一個步驟是要將資料集顯示於結果頁面中。如需詳細資訊，請參閱顯示結果。


使用多個搜尋參數進行搜尋

如果搜尋頁面送出一個以上的搜尋參數到伺服器，則您必須為結果頁面撰寫 SQL 查詢，並且要在 SQL 變數中使用這些搜尋參數。

注意

如果您只有一個搜尋條件，則可以使用簡單的「資料集」對話方塊定義資料集 (請參閱只使用一個搜尋參數進行搜尋)。

若要使用 SQL 搜尋資料庫中的記錄：

  1. 在 Dreamweaver 中開啟結果頁面，然後開啟「繫結」面板 (「視窗＞繫結」)，按一下加號 (+) 按鈕，再從彈出式選單中選取「資料集」，以建立新的資料集。
  2. 請確認所顯示的是進階「資料集」對話方塊。

    如果顯示的是簡單對話方塊，請按一下「進階」按鈕切換成進階對話方塊。

  3. 輸入資料集名稱，再選取連線。

    該連線應該是要連線到含有可讓使用者進行資料搜尋的資料庫。

  4. 在 SQL 文字區域中輸入 Select 陳述式。

    請確定該陳述式中納入了 Where 子句，其中的變數是用來保存搜尋參數。在以下的範例中，變數的名稱為 varLastName 和 varDept：

    SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION
FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT
LIKE 'varDept'

    若要減少文字輸入的工作，您可以使用進階「資料集」對話方塊底部的資料庫項目樹狀結構。如需相關說明，請參閱以撰寫 SQL 陳述式的方式建立進階的資料集。

    如需有關 SQL 語法的說明，請參閱 SQL 入門。

  5. 按一下「變數」區域中的加號(+) 按鈕後，輸入變數的名稱、預設值 (也就是在沒有傳回執行階段值時，變數應該使用的值)，以及執行階段值 (通常是保存瀏覽器所傳送值的伺服器物件，例如 Request 變數)，以將搜尋參數的值指定為 SQL 變數。

    在以下的 ASP 範例中，搜尋頁面的 HTML 表單會使用 GET 方法，頁面中還包含一個名為「LastName」與另一個名為「Department」的文字欄位。

    在 ColdFusion 中，執行階段值為 #LastName# 與 #Department#。在 JSP 中，執行階段值為 request.getParameter("LastName") 與 request.getParameter("Department")。

  6. 您可以按一下「測試」，使用預設變數值來建立一個資料集實體。

    這些預設值會模擬由搜尋頁面傳回的值。按一下「確定」來關閉測試資料集。

  7. 如果您對這個資料集感到滿意，請按一下「確定」。

    Dreamweaver 會在頁面中插入 SQL 查詢。

下一個步驟是要將資料集顯示於結果頁面中。如需詳細資訊，請參閱顯示結果。


顯示結果

當您建立保存搜尋結果的資料集後，必須將資訊顯示於結果頁面中。要顯示記錄的方法可以很簡單，您只需將「繫結」面板中的個別欄拖曳到結果頁面就可以了。您可以加入導覽連結，方便使用者在資料集中前後移動，或者是建立一個重複區域，在頁面中同時顯示多筆記錄；甚至於可以加入細節頁面的連結。

本節說明如何使用動態表格顯示結果。

若要使用動態表格顯示搜尋結果：

  1. 將插入點放在結果頁面中您希望動態表格出現的位置，再選取「插入＞應用程式物件＞動態資料＞動態表格」。

    「動態表格」對話方塊便會出現。

  2. 完成「動態表格」對話方塊，選取您定義要保存搜尋結果的資料集。

    如果您需要完成「動態表格」對話方塊的說明，請按一下對話方塊中的「說明」按鈕。

  3. 按一下「確定」。

    Dreamweaver 會插入將顯示搜尋結果的動態表格。

如需在頁面上以其他方法顯示動態內容的詳細資訊，請參閱顯示資料庫記錄。


建立結果頁面的細節頁面

您可以在搜尋/結果頁面中包含細節頁面，用以顯示結果頁面中特定記錄的詳細資訊。在這種情況下，結果頁面也會兼作主要/細節頁面組中的主要頁面。如需詳細資訊，請參閱下列主題：

  • 建立主要/細節頁面 (ColdFusion)
  • 建立主要/細節頁面 (ASP 與 JSP)
  • 建立主要/細節頁面 (PHP)

相關主題

  • 建立搜尋頁面
  • 建立結果頁面


建立記錄插入頁面 (所有伺服器)

應用程式中可以包含讓使用者在資料庫中插入新記錄的頁面。例如，以下頁面就可在雇員資料庫中插入新記錄：

插入頁面是由兩個建置組塊構成的：

  • 讓使用者輸入資料的 HTML 表單
  • 更新資料庫的「插入記錄」伺服器行為

您可以使用「記錄插入表單」應用程式物件，一次加入這些建置組塊 (請參閱一次建立插入頁面)，也可以使用 Dreamweaver 表單工具以及「伺服器行為」面板分別加入 (請參閱依組塊建立插入頁面)。

注意

插入頁面每次只能包含一種編輯記錄的伺服器行為。例如，您無法將「更新記錄」與「刪除記錄」伺服器行為同時加入插入頁面。


一次建立插入頁面

您可以使用「記錄插入表單」應用程式物件，一次加入插入頁面的所有基本建置組塊。這個應用程式物件會在頁面中加入 HTML 表單以及「插入記錄」伺服器行為。

您也可以分別使用表單工具與「伺服器行為」面板，加入建置組塊。如需詳細資訊，請參閱依組塊建立插入頁面。

將建置組塊放入頁面之後，您就可以依需求使用 Dreamweaver 設計工具自訂表單，或使用「伺服器行為」面板編輯「插入記錄」伺服器行為。

若要使用「記錄插入表單」應用程式物件建立插入頁面：

  1. 在「設計」檢視中開啟頁面，再選取「插入＞應用程式物件＞插入記錄＞記錄插入表單精靈」。

    「記錄插入表單」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定記錄插入表單的對話方塊選項。

  3. 按一下「確定」。

Dreamweaver 會在頁面中加入 HTML 表單以及「插入記錄」伺服器行為。表單物件會先放置在基本的表格中，您可以使用 Dreamweaver 頁面設計工具自訂表格物件 (請確定所有表單物件都放置在表單的邊界內)。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「插入記錄」行為。


依組塊建立插入頁面

您可以分別使用表單工具與「伺服器行為」面板，在插入頁面中加入基本的建置組塊。

您也可以使用「記錄插入表單」應用程式物件，一次加入所有建置組塊。如需詳細資訊，請參閱一次建立插入頁面。

建立插入頁面的程序包括兩個步驟：

  • 在頁面中新增 HTML 表單以便讓使用者輸入資料
  • 在資料庫表格的插入記錄中，加入「插入記錄」伺服器行為

若要在插入頁面中加入 HTML 表單：

  1. 建立新的動態頁面 (「檔案＞開新檔案」)，並使用 Dreamweaver 設計工具來配置頁面。
  2. 在您希望表單出現的地方放置插入點，選取「插入＞表單＞表單」，以加入 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  3. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」文字方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「插入記錄」伺服器行為會為您設定這些屬性。

  4. 在資料庫表格中每一個要插入記錄的資料欄中，加入表單物件。以文字欄位為例，即為「插入＞表單＞文字欄位」。

    這些表單物件將用來輸入資料。通常用來輸入資料的是文字欄位，但您也可以使用選單、核取方塊或是選項按鈕。

    如需表單物件的詳細資訊，請參閱插入 HTML 表單物件。

  5. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕以開啟「屬性」檢視窗 (「視窗＞屬性」)，並在「標籤」文字方塊中輸入新的值。

若要加入可將記錄插入資料庫表格的伺服器行為：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「插入記錄」。

    「插入記錄」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱：

    • 設定插入記錄的對話方塊選項 (ASP & JSP)
    • 設定插入記錄的對話方塊選項 (PHP)
    • 設定插入記錄的對話方塊選項 (ColdFusion)
    • 設定插入記錄的對話方塊選項 (ASP.NET)
  3. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，將記錄插入資料庫表格中。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「插入記錄」行為。


建立用以更新記錄的頁面 (ColdFusion)

應用程式中可以包含讓使用者更新資料庫表格中現有記錄的一組頁面。這些頁面通常是由搜尋頁面、結果頁面及更新頁面所組成的。搜尋及結果頁面讓使用者擷取記錄，更新頁面則讓使用者修改記錄。

本節說明建立更新記錄的頁面的步驟：

  • 搜尋要更新的記錄 (ColdFusion)
  • 建立可開啟更新頁面的連結 (ColdFusion)
  • 建立更新連結的 URL 參數 (ColdFusion)
  • 擷取要更新的記錄 (ColdFusion)
  • 一次完成更新頁面 (ColdFusion)
  • 依組塊完成更新頁面 (ColdFusion)

相關主題

  • 建立主要/細節頁面 (ColdFusion)
  • 建立記錄插入頁面 (所有伺服器)
  • 建立用以刪除記錄的頁面 (ColdFusion)


搜尋要更新的記錄 (ColdFusion)

使用者要更新記錄之前，必須先在資料庫中找到記錄。因此，您必須為更新頁面搭配搜尋頁面與結果頁面。使用者在搜尋頁面中輸入搜尋準則，並選取結果頁面中的記錄。當使用者按一下記錄時，更新頁面便會開啟，並以 HTML 表單顯示記錄。

如需建立頁面以搜尋要更新之記錄的相關說明，請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)。

在建立搜尋/結果頁面之後，下一步就是在結果頁面上建立連結，按一下連結便會開啟更新頁面。請參閱建立可開啟更新頁面的連結 (ColdFusion)。


建立可開啟更新頁面的連結 (ColdFusion)

在建立搜尋/結果頁面 (請參閱搜尋要更新的記錄 (ColdFusion)) 之後，您必須在結果頁面上建立連結，以開啟更新頁面並在 HTML 表單中顯示所選取的記錄。本節說明如何建立連結。下一節說明如何修改連結，讓它也能傳送使用者所選取的記錄 ID。更新頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

若要建立更新頁面的連結：

  1. 在結果頁面上，選取重複文字或您要連結的動態內容預留位置。

    在以下的範例中，所選取的是 {rsLocations.LOCATION_NAME} 預留位置。連結將會套用到欄中的位置名稱。

  2. 在「屬性」檢視窗中，按一下「連結」文字方塊旁邊的資料夾圖示。
  3. 瀏覽及選取更新頁面。

    更新頁面的檔案名稱會出現在「連結」文字方塊中。

    在結果頁面中，動態內容的預留位置會顯示為已連結。如果您將頁面上傳到伺服器，並執行搜尋，就可以看到連結套用到結果頁面中所列出的每筆記錄。

下一步是建立 URL 參數，傳送使用者所選取的記錄 ID。請參閱建立更新連結的 URL 參數 (ColdFusion)。


建立更新連結的 URL 參數 (ColdFusion)

結果頁面上的連結 (請參閱建立可開啟更新頁面的連結 (ColdFusion)) 不僅必須開啟更新頁面，還必須傳送使用者所選取記錄的 ID。更新頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

記錄 ID 是以 URL 參數傳送到更新頁面。如需詳細資訊，請參閱 URL 參數。

本節說明如何建立將記錄 ID 傳送到更新頁面的 URL 參數。

若要建立 URL 參數：

  1. 選取結果頁面上的連結。
  2. 在「屬性」檢視窗的「連結」文字方塊中，在 URL 的結尾處加入下面的字串：
    ?recordID=#recordsetName.fieldName#

    問號會告訴伺服器，後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱，因為稍後您將會在更新頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下，值是由會從資料集傳回記錄 ID 的 ColdFusion 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 ColdFusion 運算式中，請用資料集的名稱來取代 recordsetName，再使用資料集中唯一識別各筆記錄的欄位名稱來取代 fieldName。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的。

    locationDetail.cfm?recordID=#rsLocations.CODE#

    執行頁面時，會將資料集的 CODE 欄位值插入動態表格的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，那麼便會在動態表格的「坎培拉」列中使用下列 URL：

    locationDetail.cfm?recordID=CBR
  3. 儲存頁面。

下一步是修改更新頁面，讓其可在資料庫中尋找所要求的記錄，並顯示於頁面中。請參閱擷取要更新的記錄 (ColdFusion)。


擷取要更新的記錄 (ColdFusion)

當結果頁面將 URL 參數傳送到更新頁面以識別要更新的記錄 (請參閱建立更新連結的 URL 參數 (ColdFusion)) 之後，更新頁面必須讀取參數、從資料庫表格擷取記錄，再將記錄暫存於資料集之中。

若要擷取要更新的記錄：

  1. 在 Dreamweaver 中建立新的 ColdFusion 頁面，並將其儲存。

    此頁面將會成為更新頁面。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集」。

    如果出現進階的對話方塊，請按下「簡單」按鈕開啟簡單對話方塊。

  3. 為資料集命名，並使用「連線」與「表格」彈出式選單，指定您要更新資料的位置。
  4. 按下「已選取」選項並選取索引鍵欄位 (通常是記錄 ID 欄位) 以及包含要更新資料的欄位。
  5. 設定「篩選器」區域，讓索引鍵欄的值等於結果頁面所傳送的對應 URL 參數值。

    這種篩選器會建立僅包含結果頁面所指定記錄的資料集。例如，如果索引鍵資料欄中包含了名為 PRID 的記錄 ID 資訊；而結果頁面傳送了名為 id 的 URL 參數之對應記錄 ID，則「篩選器」區域將會顯示如下：

  6. 按一下「確定」。

當使用者在結果頁面中選取記錄時，更新頁面將會產生僅包含選取記錄的資料集。


一次完成更新頁面 (ColdFusion)

更新頁面中有三個建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要更新的記錄 (ColdFusion))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以使用「記錄更新表單」應用程式物件，一次加入更新頁面的最後兩個建置組塊。這個應用程式物件會在頁面中加入 HTML 表單以及「更新記錄」伺服器行為。

在使用應用程式物件之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (ColdFusion)、建立可開啟更新頁面的連結 (ColdFusion)、建立更新連結的 URL 參數 (ColdFusion) 和擷取要更新的記錄 (ColdFusion)。

應用程式物件在頁面中加入建置組塊之後，您就可以使用 Dreamerweaver 設計工具自訂您要的表單，或使用「伺服器行為」面板編輯「更新記錄」伺服器行為。

注意

更新頁面中一次只能存在一種編輯記錄的伺服器行為。例如，您無法在更新頁面中新增「插入記錄」或「刪除記錄」伺服器行為。

若要使用「記錄更新表單」應用程式物件建立更新頁面：

  1. 在「設計」檢視中開啟頁面，然後選擇「插入＞應用程式物件＞更新記錄＞記錄更新表單精靈」。

    「記錄更新表單」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定記錄更新表單的對話方塊選項。

  3. 按一下「確定」。

應用程式物件會在頁面中新增 HTML 表單與「更新記錄」伺服器行為。表單物件會先放置在基本的表格中，您可以使用 Dreamweaver 頁面設計工具自訂表格物件 (請確定所有表單物件都放置在表單的邊界內)。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 依組塊完成更新頁面 (ColdFusion)


依組塊完成更新頁面 (ColdFusion)

更新頁面中有三個建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要更新的記錄 (ColdFusion))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以分別使用表單工具與「伺服器行為」面板，在更新頁面中加入最後兩個基本的建置組塊。

在加入建置組塊之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (ColdFusion)、建立可開啟更新頁面的連結 (ColdFusion)、建立更新連結的 URL 參數 (ColdFusion) 和擷取要更新的記錄 (ColdFusion)。

完成更新頁面的步驟包含了三個工作：

  • 在頁面中新增 HTML 表單，讓使用者可以修改資料
  • 藉由將表單物件與資料庫表格資料欄繫結的方式，顯示表單中的記錄
  • 在使用者修改記錄後，加入「更新記錄」伺服器行為，以更新資料庫表格

若要在更新頁面中加入 HTML 表單：

  1. 建立新 Coldfusion 頁面 (「檔案＞開新檔案」)。
  2. 使用 Dreamweaver 設計工具配置頁面。
  3. 在您希望表單出現的地方放置插入點，選取「插入＞表單＞表單」，以加入 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  4. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」文字方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「更新記錄」伺服器行為會為您設定這些屬性。

  5. 在資料庫表格中每一個要更新的資料欄中，加入表單物件。以文字欄位為例，即為「插入＞表單＞文字欄位」。

    這些表單物件將用來輸入資料。通常用來輸入資料的是文字欄位，但您也可以使用選單、核取方塊或是選項按鈕。

    每一個表單物件應該有對應欄 (在之前定義的記錄集中)。唯一的例外是唯一索引鍵欄，這個欄位並沒有對應的表單物件。

    如需表單物件的詳細資訊，請參閱插入 HTML 表單物件。

  6. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕以開啟「屬性」檢視窗 (「視窗＞屬性」)，並在「標籤」文字方塊中輸入新的值。

若要在表單中顯示記錄：

  1. 請確定已定義資料集，以儲存使用者所要更新的記錄。

    如需詳細資訊，請參閱擷取要更新的記錄 (ColdFusion)。

  2. 將各表單物件繫結至資料集中的資料，如下列各節所述：
    • 在 HTML 文字欄位中顯示動態內容
    • 動態式預先選取 HTML 核取方塊
    • 動態式預先選取 HTML 選項按鈕
    • 建立動態 HTML 表單選單
    • 使現有的 HTML 表單選單呈現動態效果

若要加入更新資料庫表格的伺服器行為：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，從彈出式選單中選取「更新記錄」。

    「更新記錄」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定更新記錄的對話方塊選項 (ColdFusion)。

  3. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，更新資料庫中的記錄。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 一次完成更新頁面 (ColdFusion)


建立用以刪除記錄的頁面 (ColdFusion)

應用程式中可以包含一組讓使用者刪除資料庫記錄的頁面。這些頁面通常是由搜尋頁面、結果頁面及刪除頁面所組成的。搜尋及結果頁面可讓使用者擷取記錄，而刪除頁面則可讓使用者刪除記錄。

本節下列步驟說明建立刪除記錄的 ColdFusion 頁面：

  • 搜尋要刪除的記錄 (ColdFusion)
  • 建立確認頁面的連結 (ColdFusion)
  • 建立要傳送到確認頁面的 URL 參數 (ColdFusion)
  • 在確認頁面中顯示記錄 (ColdFusion)
  • 新增刪除記錄的邏輯 (ColdFusion)


搜尋要刪除的記錄 (ColdFusion)

使用者要刪除記錄之前，必須先在資料庫中找到該記錄。因此，您必須為刪除頁面搭配搜尋頁面與結果頁面。使用者在搜尋頁面中輸入搜尋準則，並選取結果頁面中的記錄。當使用者按一下記錄時，刪除頁面便會開啟，上面會以 HTML 表單顯示記錄。

如需有關建立頁面以搜尋要刪除之記錄的說明，請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)。

在建立搜尋/結果頁面之後，下一個步驟就是在結果頁面上建立連結，讓使用者選取要刪除的記錄，並且顯示確認頁面。請參閱建立確認頁面的連結 (ColdFusion)。


建立確認頁面的連結 (ColdFusion)

在建立結果頁面 (請參閱搜尋要刪除的記錄 (ColdFusion)) 之後，您必須建立使用者可以點選的連結，以確認已從資料庫中刪除相關記錄。本節說明如何建立連結。下一節說明如何修改連結，讓其也能傳送使用者要刪除的記錄 ID。確認頁面使用這個 ID 來尋找並顯示這筆記錄。

若要建立確認頁面的連結：

  1. 在結果頁面中，於最後一個表格欄內按一下，然後選取「修改＞表格＞插入列或欄」，建立表格中用來顯示記錄的新欄。

    「插入列或欄」對話方塊便會出現。

  2. 選取「欄位」選項，然後選取「在現在的欄之後」選項，再按「確定」。

    Dreamweaver 在表格新增欄位。

  3. 在新建立的表格欄中，於包含動態內容預留位置的列中輸入字串 Delete。請確定您是在標籤重複區域內輸入該字串。

    您也可以插入代表刪除文字或符號的影像。

    如果「即時資料」檢視已開啟，在記錄第一列中輸入字串，再按一下「重新整理」圖示。

  4. 選取 Delete 字串以套用連結。

    如果「即時資料」檢視已開啟，選取記錄第一列中的字串。

  5. 在「屬性」檢視窗中，在「連結」文字方塊中輸入確認頁面。

    您可以輸入任何您想要的檔案名稱。

在「連結」文字方塊外按一下之後，表格中的 Delete 字串便會顯示為已連結。如果啟用「即時資料」檢視 (「檢視＞即時資料」)，就可以看到連結已套用到表格中各列的相同文字上。如果「即時資料」檢視已經開啟，按一下「重新整理」圖示將連結套用到各列。

建立連結之後，下一步是建立連結的 URL 參數。請參閱建立要傳送到確認頁面的 URL 參數 (ColdFusion)。


建立要傳送到確認頁面的 URL 參數 (ColdFusion)

結果頁面上的連結不僅必須開啟確認頁面，還必須傳送使用者想要刪除的記錄 ID。確認頁面將使用這個 ID 在資料庫中尋找記錄，再加以顯示。

您必須使用 URL 參數將記錄 ID 傳送到確認頁面。本節說明如何建立將記錄 ID 傳送到確認頁面的 URL 參數。

若要建立 URL 參數：

  1. 選取結果頁面上的「刪除」連結。

    如果「即時資料」檢視已開啟，選取第一列中的連結。

  2. 在「屬性」檢視窗的「連結」文字方塊中，在 URL 的結尾處加入下面的字串：
    ?recordID=#recordsetName.fieldName#

    問號會告訴伺服器，後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱，因為稍後會在確認頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下，值是由會從資料集傳回記錄 ID 的 ColdFusion 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 ColdFusion 運算式中，請用資料集的名稱來取代 recordsetName，再使用資料集中唯一識別各筆記錄的欄位名稱來取代 fieldName。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的：

    confirmDelete.cfm?recordID=#rsLocations.CODE#

    執行頁面時，會將資料集的 CODE 欄位值插入動態表格的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，那麼便會在動態表格的「坎培拉」列中使用下列 URL：

    confirmDelete.cfm?recordID=CBR
  3. 儲存頁面。

建立刪除連結的動態 URL 參數之後，下一步就是在確認頁面中顯示記錄。請參閱在確認頁面中顯示記錄 (ColdFusion)。


在確認頁面中顯示記錄 (ColdFusion)

在完成列出記錄的頁面 (請參閱建立要傳送到確認頁面的 URL 參數 (ColdFusion)) 之後，切換到確認頁面。確認頁面會顯示記錄，並詢問使用者是否確定要刪除該記錄。當使用者按一下表單按鈕，確認作業後，網路應用程式就會從資料庫中刪除記錄。

建立此頁面的步驟包括了建立 HTML 表單、擷取記錄後顯示於表單、在表單中顯示這筆記錄，以及新增邏輯以從資料庫刪除這筆記錄。擷取及顯示記錄包含定義資料集以保留單一記錄 (使用者想要刪除的記錄)，以及繫結資料集欄與頁面。詳細步驟如下所述。

若要建立顯示記錄的 HTML 表單：

  1. 建立新的 ColdFusion 頁面，再儲存為您在前一節中所指定的確認頁面。

    您在前一節中建立「刪除」連結時，指定了確認頁面。請在第一次儲存檔案時，使用這個名稱 (例如，deleteConfirm.cfm)。

  2. 在頁面上插入 HTML 表單 (「插入＞表單＞表單」)。
  3. 在表單中新增隱藏表單欄位。

    如果要儲存 URL 參數所傳送的記錄 ID，就需要隱藏表單欄位。若要新增隱藏欄位，請將插入點放在表單中，然後選取「插入＞表單＞隱藏欄位」。

  4. 新增按鈕至表單中。

    使用者會按一下按鈕確認，然後刪除顯示的記錄。若要新增按鈕，請將插入點放在表單中，然後選取「插入＞表單＞按鈕」。

  5. 如果想要的話，請增強頁面的設計，再加以儲存。

若要擷取使用者想要刪除的記錄：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階「資料集」對話方塊，按一下「簡單」以切換到簡單「資料集」對話方塊。

  2. 命名該資料集，然後選取包含了使用者可刪除之記錄的 ColdFusion 資料來源與資料庫表格。
  3. 在「欄」區域中，選取您想要在頁面上顯示的表格欄 (記錄欄位)。

    若只想要顯示某些記錄欄位，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 想要的資料欄，以將其選取。

    即使您不想顯示記錄 ID 欄位，也請確定會包含它。

  4. 依照下列方法完成「篩選器」區段，以尋找和顯示結果頁面所傳送之 URL 參數中指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取資料集的欄，這個欄必須和有「刪除」連結的頁面所傳送的 URL 參數值相符。例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。在前一節所討論的範例中，稱為 CODE 的資料集欄包含的值與含「刪除」連結的頁面所傳送的 URL 參數值相符。
    • 在第一個選單旁的彈出式選單中，選取等號 (如果尚未選取)。
    • 在第三個彈出式選單中，選取「URL 參數」。有「刪除」連結的頁面是使用 URL 參數將資訊傳送到確認頁面。
    • 在第四個文字方塊中，請輸入有「刪除」連結的頁面所傳送的 URL 參數名稱。

      例如，如果用來開啟確認頁面的 URL 包括字尾 confirmDelete.cfm?recordID=CBR，則輸入 recordID。

      「資料集」對話方塊外觀應如下所示。

  5. 按一下「確定」。

資料集會在「繫結」面板中出現。

若要顯示使用者想要刪除的記錄：

  1. 選取「繫結」面板中的資料與欄位，並且將其拖曳到確認頁面。

    請確認此唯讀的動態內容都插入於表單的邊界之內。如需在頁面中插入動態內容的詳細資訊，請參閱使文字成為動態。

    接下來，您必須繫結記錄 ID 欄和隱藏表單欄位。

  2. 確定已開啟「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，然後按一下代表隱藏表單欄位的黃色盾形圖示。

    隱藏表單欄位已選取。

  3. 在「屬性」檢視窗中，按一下「值」文字方塊旁的閃電圖示。

    「動態資料」對話方塊便會顯示。

  4. 在「動態資料」對話方塊中，選取資料集中的記錄 ID 欄。

    在以下範例中，所選取的記錄 ID 欄是 CODE。

  5. 按一下「確定」並儲存這個頁面。

完成的確認頁面外觀應如下所示。

在確認頁面上顯示記錄之後，下一個步驟便是新增刪除記錄的邏輯。請參閱新增刪除記錄的邏輯 (ColdFusion)。


新增刪除記錄的邏輯 (ColdFusion)

在確認頁面上顯示所選取的記錄 (請參閱在確認頁面中顯示記錄 (ColdFusion)) 之後，必須在頁面中新增邏輯，讓使用者在按下「確認刪除」按鈕後，便能刪除資料庫中的記錄。您可以利用「刪除記錄」伺服器行為，輕鬆快速地在 Dreamweaver 中新增此邏輯。

若要新增邏輯，刪除 HTML 表單中所顯示的記錄：

  1. 請確定已在 Dreamweaver 中開啟確認頁面。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，然後選取「刪除記錄」。

    「刪除記錄」對話方塊便會出現。

  3. 在「先檢查是否定義了變數為」文字方塊中，確定已選取「主索引鍵值」。

    稍後在對話方塊中指定主索引鍵值。

  4. 在「連線」彈出式選單中，選取資料庫的連線，讓伺服器行為可以連線到受影響的資料庫。
  5. 在「表格」彈出式選單中，選取含有將要刪除記錄的資料庫表格。
  6. 在「主索引鍵欄位」彈出式選單中，選取含有記錄 ID 的表格欄。

    「刪除記錄」伺服器行為將會在此欄中搜尋相符的結果。此欄中包含的記錄 ID 資料，應與您繫結到頁面中的隱藏表單欄位的資料集欄相同。

    如果記錄 ID 是數值，則選取「數值」選項。

  7. 在「主索引鍵值」彈出式選單中，在頁面上選取含有識別要刪除記錄的記錄 ID 變數。

    變數是由隱藏表單欄位所建立的。其名稱和隱藏欄位的 name 屬性的名稱相同，若非表單就是 URL 參數，視表單的 method 屬性而定。在我們的範例中，變數是稱為 hiddenRecID 的表單變數。

  8. 在「刪除後，請前往」文字方塊中，指定從資料庫表格中刪除記錄後所要開啟的頁面。

    您可以指定含有給使用者的簡短成功訊息的頁面，或是列出剩餘記錄的頁面，讓使用者可以確認記錄已經刪除。

    完成的「刪除記錄」對話方塊外觀應如下所示。

  9. 按一下「確定」儲存工作。

將頁面上傳到網站伺服器，開啟瀏覽器，再搜尋要刪除的記錄。當您按一下結果頁面上的「刪除」連結時，確認頁面便會出現。按一下「確認」按鈕，從資料庫中刪除記錄。若要確認記錄已經刪除，請再次開啟有「刪除」連結的頁面。記錄應不會在清單中再出現。

注意

如果記錄仍然出現在頁面中，請按一下「重新整理」。


使用預存程序修改資料庫 (ColdFusion)

您可以使用預存程序修改資料庫。預存程序是能在資料庫執行某種作業，且可重複使用的資料庫項目。

注意

mySQL 以及 Microsoft Access 資料庫並不支援預存程序。

在使用預存程序修改資料庫之前，請先確定預存程序含有可以修改資料庫的 SQL。若要在資料庫中建立並儲存預存程序，請查詢資料庫的說明文件或是完整的 Transact-SQL 手冊。

若要在 ColdFusion 頁面中加入預存程序：

  1. 在 Dreamweaver 中開啟要執行預存程序的頁面。
  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下加號 (+) 按鈕，然後選取「預存程序」。

    「預存程序」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定 ColdFusion 預存程序的對話方塊選項。

  4. 按一下「確定」。

關閉「預存程序」對話方塊後，Dreamweaver 會在您的頁面中插入 ColdFusion 程式碼，這個程式碼在伺服器上執行時，將會呼叫資料庫中的預存程序。預存程序就會執行如插入記錄之類的資料庫作業。

如果預存程序需要參數，您可以建立收集所需參數值的頁面，再將參數送至含有預存程序的頁面。例如，您可以建立頁面，並使用 URL 參數或 HTML 表單向使用者取得參數值。

相關主題

  • 預存程序


建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)

您可使用 Dreamweaver 建立以下幾種頁面，以限制您的網站之存取權：

  • 在使用者第一次造訪網站時，會要求使用者註冊的頁面 (請參閱建立註冊頁面)
  • 讓已註冊的使用者登入網站的頁面 (請參閱建立登入頁面)
  • 僅有獲得授權之使用者才可檢視的頁面 (請參閱建立僅有獲得授權的使用者可存取的頁面)

您在 ColdFusion、ASP、JSP 和 PHP 頁面所使用的方法都是完全相同的。Dreamweaver 並沒有 ASP.NET 網頁的驗證伺服器行為指令。

相關主題

  • 保護應用程式中的資料夾 (ColdFusion)


建立註冊頁面

您的網路應用程式可以包含在使用者第一次造訪網站時，必須先進行註冊的頁面。

例如以下幾種頁面就會要求第一次造訪的使用者進行註冊：

由下列建置組塊形成的註冊頁面：

  • 儲存使用者登入資訊的資料庫表格 (請參閱儲存使用者登入資訊)
  • 讓使用者選取使用者名稱和密碼的 HTML 表單 (請參閱讓使用者選擇使用者名稱與密碼)

    您也可以使用表單取得使用者的其他個人資訊。

  • 可更新網站使用者資料庫表格的「插入記錄」伺服器行為 (請參閱更新資料庫中的使用者表格)
  • 確定使用者所輸入的使用者名稱，尚未有其他使用者使用的「檢查新使用者名稱」伺服器行為 (請參閱確定使用者選擇的名稱為唯一名稱)


儲存使用者登入資訊

註冊頁面必須要有資料庫表格，才能儲存使用者輸入的登入資訊。請確定您的資料庫表單中包含使用者名稱與密碼兩欄。如果您希望讓登入的使用者具有不同的存取權限，請再加入存取權限欄 (請參閱在使用者資料庫中儲存存取權限)。

如果您要設定一個所有使用者共用的密碼，請預設讓您的資料庫應用程式 (Microsoft Access、Microsoft SQL Server、Oracle 等) 在每一筆新的使用者記錄中輸入密碼。大多數的資料庫應用程式都可以在每次產生新的記錄時，將欄設定為預設值。請將預設值設定為密碼。

您也可使用資料庫表格儲存其他與使用者相關的實用資訊。

建立註冊頁面的下一步是在註冊頁面中加入 HTML 表單，讓使用者選擇使用者名稱及密碼 (如果適用)。請參閱讓使用者選擇使用者名稱與密碼。

相關主題

  • 建立註冊頁面


讓使用者選擇使用者名稱與密碼

您必須在註冊頁面中加入 HTML 表單，才能讓使用者選取使用者名稱與密碼 (如果適用)。

若要讓使用者選擇使用者名稱與密碼：

  1. 建立新的頁面 (「檔案＞開新檔案」) 並使用 Dreamweaver 設計工具配置註冊頁面。
  2. 在您希望表單出現的地方放置插入點，並在「插入」選單中選取「表單」，以新增 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  3. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」文字方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「插入記錄」伺服器行為會為您設定這些屬性 (請參閱更新資料庫中的使用者表格)。

  4. 加入可讓使用者輸入使用者名稱與密碼 (「插入＞表單＞文字欄位」) 的文字欄位。

    您也可以在這個表單中加入更多表單物件，記錄其他個人資料。

    您應該在每個表單物件旁邊加上標籤 (文字或影像)，告訴使用者表單物件的意義。此外，您還應將表單物件放置在 HTML 表格中並對齊。如需表單物件的詳細資訊，請參閱插入 HTML 表單物件。

  5. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕以開啟「屬性」檢視窗 (「視窗＞屬性」)，並在「標籤」文字方塊中輸入新的值。

建立註冊頁面的下一步是新增「插入記錄」伺服器行為，在資料庫的使用者表格中插入記錄。請參閱更新資料庫中的使用者表格。

相關主題

  • 建立註冊頁面


更新資料庫中的使用者表格

您必須在註冊頁面加入「插入記錄」伺服器行為，以更新資料庫中的使用者表格。

若要更新資料庫中的使用者表格：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「插入記錄」。

    「插入記錄」對話方塊便會出現。

  2. 完成對話方塊後，請確認已在資料庫中指定使用者表格，做為將插入的使用者資料。

    如需相關說明，請參閱下列主題：

    • 設定插入記錄的對話方塊選項 (ColdFusion)
    • 設定插入記錄的對話方塊選項 (ASP & JSP)
    • 設定插入記錄的對話方塊選項 (PHP)
  3. 按一下「確定」。

建立註冊頁面的最後一步是確定使用者名稱尚未由其他已註冊的使用者所使用。請參閱確定使用者選擇的名稱為唯一名稱。

相關主題

  • 建立註冊頁面


確定使用者選擇的名稱為唯一名稱

若要確定使用者輸入的使用者名稱尚未由其他已註冊使用者取得，您可以加入伺服器行為。

若要確定選擇的使用者名稱為唯一名稱：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「使用者驗證＞檢查新使用者名稱」。

    「檢查新使用者名稱」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定檢查新使用者名稱的對話方塊選項。

  3. 按一下「確定」。

Dreamweaver 會在註冊頁面中加入伺服器行為，先檢查瀏覽者送出的使用者名稱是否為唯一名稱，再將瀏覽者的資訊加入已註冊使用者的資料庫中。

當使用者在註冊頁面上按下「送出」按鈕時，伺服器行為將會比較使用者輸入的使用者名稱與已註冊使用者儲存於資料庫表格中的使用者名稱。如果在資料庫表格中沒有找到相同的使用者名稱，則伺服器行為會繼續正常執行插入記錄的作業。如果找到相同的使用者名稱，則伺服器行為會取消插入記錄的作業，並且開啟新頁面 (通常是警告輸入的使用者名稱已有人使用的頁面)。

相關主題

  • 建立註冊頁面


建立登入頁面

您的網路應用程式可以包含讓已註冊使用者登入網站的頁面。

例如，以下幾種頁面就會要求已註冊的使用者登入：

由下列建置組塊組成的登入頁面：

  • 已註冊使用者的資料庫表格 (請參閱建立已註冊使用者的資料庫表格)
  • 讓使用者輸入使用者名稱與密碼的 HTML 表單 (請參閱讓使用者登入)
  • 確認輸入的使用者名稱與密碼有效的「登入使用者」伺服器行為 (請參閱檢查使用者名稱與密碼)

使用者登入成功時，系統會為使用者產生包含使用者名稱的 Session 變數。


建立已註冊使用者的資料庫表格

您需要已註冊使用者的資料庫表格，才能確認在登入頁面中輸入的使用者名稱與密碼是否有效。請使用您的資料庫應用程式以及註冊頁面建立表格。如需詳細資訊，請參閱建立註冊頁面。

建立登入頁面的下一步是在頁面中加入 HTML 表單，讓使用者登入。請參閱讓使用者登入。

相關主題

  • 建立登入頁面


讓使用者登入

若要讓使用者輸入使用者名稱與密碼登入網站，必須在頁面中加入 HTML 表單。

若要讓使用者登入：

  1. 建立新的頁面 (「檔案＞開新檔案」) 並使用 Dreamweaver 設計工具配置登入頁面。
  2. 在您希望表單出現的地方放置插入點，從「插入」選單選擇「表單」，加入 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  3. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」文字方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「登入使用者」伺服器行為會為您設定這些屬性 (請參閱檢查使用者名稱與密碼)。

  4. 在表單中加入使用者名稱與密碼文字欄位 (「插入＞表單＞文字欄位」)。

    在各文字欄位旁加上標籤 (文字或影像) 後，將文字欄位對齊放置在 HTML 表格中，再將表格的 border 屬性設為 0。

  5. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕以開啟「屬性」檢視窗 (「視窗＞屬性」)，並在「標籤」文字方塊中輸入新的值。

建立登入頁面的下一步是新增「登入使用者」伺服器行為，以確定輸入的使用者名稱與密碼有效。請參閱檢查使用者名稱與密碼。

相關主題

  • 建立登入頁面


檢查使用者名稱與密碼

若要確定使用者輸入的使用者名稱與密碼是否有效，您必須在登入頁面加入「登入使用者」伺服器行為。

若要檢查使用者名稱與密碼：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「使用者驗證＞登入使用者」。

    「登入使用者」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定登入使用者的對話方塊選項。

  3. 按一下「確定」。

Dreamweaver 會在登入頁面中加入伺服器行為，確定瀏覽者輸入的使用者名稱與密碼有效。

當使用者在登入頁面上按下「送出」按鈕時，「登入使用者」伺服器行為將會比較使用者輸入的值與已註冊使用者的值。如果值相同，伺服器行為會開啟單一頁面 (通常是網站的起始頁面)。如果值不相同，伺服器行為會開啟另一個頁面 (通常是警告使用者登入失敗的頁面)。

相關主題

  • 建立登入頁面


建立僅有獲得授權的使用者可存取的頁面

您的網路應用程式可以包含讓僅有獲得授權的使用者可存取的保護頁面。

注意

Dreamweaver 並沒有 ASP.NET 頁面的驗證伺服器行為。

例如，如果使用者嘗試直接在瀏覽器中輸入保護頁面的 URL 來跳過登入頁面，系統會將使用者重新導向到另一個頁面。同樣的，如果您將頁面的授權層級設為 Administrator，則只有具有 Administrator 存取權限的使用者可檢視這個頁面。如果登入的使用者並沒有正確的存取權限，又嘗試存取保護頁面，系統會將使用者重新導向到另一個頁面。

您也可以使用授權層級檢視新註冊的使用者，通過後才給予網站的完整存取權。例如，您可能希望先收到付款，才允許使用者存取網站的會員專用頁面。若要這樣做，您可以使用 Member 授權層級，保護成員專用頁面，並且僅授與新註冊的使用者 Guest 權限。在收到使用者付款之後，您就可以將使用者的存取權限升級為 Member (在已註冊使用者的資料庫表格中)。

如果您不打算使用授權層級，只要在頁面上加入「限制存取頁面」伺服器行為，就可以保護網站上的頁面。伺服器行為會將登入失敗的使用者重新導向另一個頁面。如需詳細資訊，請參閱將未授權的使用者重新導向另一個頁面。

如果您打算使用授權層級，就可以保護網站上具有下列建置組塊的任何頁面：

  • 將未授權的使用者重新導向另一個頁面的「限制存取頁面」伺服器行為 (請參閱將未授權的使用者重新導向另一個頁面)
  • 使用者資料庫表格中，用來儲存每個使用者存取權限的額外資料欄 (請參閱在使用者資料庫中儲存存取權限)

不論您是否使用授權層級，都可以在保護頁面中新增連結，讓使用者登出並清除任何的 Session 變數。如需詳細資訊，請參閱登出使用者。


將未授權的使用者重新導向另一個頁面

為了防止未授權的使用者存取頁面，請在頁面中加入「限制存取頁面」伺服器行為。如果使用者嘗試直接在瀏覽器中輸入保護頁面的 URL 來跳過登入頁面，或是使用者已經登入，但在沒有正確存取權限的狀況下嘗試存取保護頁面，伺服器行為會將使用者重新導向到另一個頁面。

注意

「限制存取頁面」伺服器行為只能保護 HTML 頁面，無法保護其他網站資源，如影像檔與音效檔。

如果您要讓網站中的許多頁面具有相同的存取權，可以將存取權由頁面複製，貼上另一個頁面。

若要將未授權使用者重新導向到另一個頁面：

  1. 開啟要保護的頁面。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「使用者驗證＞限制存取頁面」。

    「限制存取頁面」對話方塊便會出現。

  3. 完成對話方塊。

    如需相關說明，請參閱設定限制存取頁面的對話方塊選項。

  4. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，只允許獲得授權的使用者檢視頁面。

若要複製頁面的存取權限並貼上網站的其他頁面：

  1. 開啟保護頁面，選取「伺服器行為」面板中列出的「限制存取頁面」伺服器行為 (不是加號 (+) 彈出式選單中的伺服器行為)。
  2. 按一下面板右上角的箭頭按鈕，再從彈出式選單中選取「複製」。

    「限制存取頁面」伺服器行為就會複製到系統的「剪貼簿」中。

  3. 以同樣方式開啟另一個要保護的頁面。
  4. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下右上角的箭頭按鈕，再從彈出式選單中選取「貼上」。
  5. 在每一個要保護的頁面上重複步驟 3 與步驟 4。

相關主題

  • 在使用者資料庫中儲存存取權限


在使用者資料庫中儲存存取權限

只有在您希望某些已登入使用者擁有不同的存取權限時，才會需要這個建置組塊。如果您只是要讓使用者登入，就不需要儲存存取權限。

如果您希望某些已登入使用者能擁有不同的存取權限，請確定使用者資料庫表格中，包含指定每個使用者存取權限的資料欄 (Guest、User、Administrator 等)。網站管理員應該將每個使用者的存取權限輸入資料庫。

大多數的資料庫應用程式都可以在每次產生新的記錄時，將欄設定為預設值。請將預設值設為網站中最常用的存取權限 (例如 Guest)，再手動變更例外的存取權限 (例如，將 Guest 變更為 Administrator)。現在使用者可以存取所有管理員頁面。

請確定資料庫中每一個使用者都只有單一的存取權限，如 Guest 或 Administrator，而非「User、Administrator」這樣的多重權限。如果您要為頁面設定多重存取權限 (例如所有訪客與管理員都可以查看這個頁面)，應該在頁面層級而非資料庫層級設定這些權限。

相關主題

  • 將未授權的使用者重新導向另一個頁面


登出使用者

使用者登入成功後，系統會產生包含使用者名稱的 Session 變數。當使用者離開您的網站時，您可以使用「登出使用者」伺服器行為將 Session 變數清除，並將使用者重新導向到另一個頁面 (通常是「再見」或是「感謝您」這類的頁面)。

您可以設定在使用者按下連結或是載入特定頁面時，呼叫「登出使用者」伺服器行為。

若要加入讓使用者登出的連結：

  1. 在頁面中選取要做為連結的文字或影像。
  2. 在「伺服器行為」面板 (「視窗＞行為」) 中，按一下加號 (+) 按鈕，再選取「使用者驗證＞登出使用者」。

    「登出使用者」對話方塊便會出現。

  3. 指定使用者按下連結時要開啟的頁面。

    這個頁面通常是「再見」或「謝謝您」頁面。

  4. 按一下「確定」。

若要在載入特定頁面時登出使用者：

  1. 開啟將在 Dreamweaver 中載入的頁面。

    這個頁面通常是「再見」或「謝謝您」頁面。

  2. 在「伺服器行為」面板中，按一下加號 (+) 按鈕，再選取「使用者驗證＞登出使用者」。

    「登出使用者」對話方塊便會出現。

  3. 選取「頁面載入時登出」選項。
  4. 按一下「確定」。

相關主題

  • 建立僅有獲得授權的使用者可存取的頁面


保護應用程式中的資料夾 (ColdFusion)

您可以使用 Dreamweaver 以密碼來保護 ColdFusion 應用程式所指定的資料夾，包括應用程式的根資料夾在內。當瀏覽者進入您的網站要求讀取指定資料夾的任何頁面，ColdFusion 便會提示瀏覽者輸入使用者名稱和密碼。ColdFusion 會將使用者名稱和密碼儲存於 Session 變數中，讓瀏覽者在工作階段中無須重複輸入這些資訊。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要保護伺服器上的資料夾或網站：

  1. 在 Dreamweaver 中開啟 Coldfusion 文件之後，選取「命令＞ColdFusion 登入精靈」。
  2. 完成 ColdFusion 登入精靈的操作。

    如需相關說明，請按一下精靈中的「說明」按鈕。

    精靈會建立保護資料夾所需要的檔案。

  3. 將新檔案上傳到您的遠端網站。

    該檔案放置於您的本機網站資料夾中。

相關主題

  • 建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)


使用 ColdFusion 組件

ColdFusion 組件 (CFC) 可以讓您將應用程式和商業邏輯封裝成獨立完整且可重複使用的單元。此外，CFC 同時也提供了一個可以簡易快速建立 Web 服務的作業方式。

您可以使用 Dreamweaver 來建立及修改 CFC，也可以使用 Dreamweaver 來建立使用 CFC 的網頁。

注意

您僅能在 Macromedia ColdFusion MX 或更新版本中使用 CFC，ColdFusion 5 並不支援 CFC。

本節包含下列主題：

  • 關於 ColdFusion 組件
  • 以視覺化方式在 Dreamweaver 中建立組件
  • 在 Dreamweaver 中檢視 ColdFusion 組件
  • 在 Dreamweaver 中編輯 ColdFusion 組件
  • 建立使用 ColdFusion 組件的網頁
  • 在 ColdFusion 組件中定義資料集
  • 使用 CFC 資料集做為動態內容的來源


關於 ColdFusion 組件

ColdFusion 組件是使用「ColdFusion 標記語言」(CFML) 所撰寫而成的一種可重覆使用的軟體單元。CFC 可以協助您產生易於維護，而且可重複使用的程式碼。

本章節旨在說明 CFC 的各項優點；後續的各個章節則會說明如何使用 Dreamweaver 協助處理 CFC。如需 CFC 標籤和語法的資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。

ColdFusion 組件就是要提供程式開發人員一個簡單但功能強大的方法，來封裝網站中的各項組件。通常，您會在應用程式或商業邏輯上使用組件，而對象是自訂的問候語、動態選單之類的表現式組件，則使用自訂標籤。

由於網站建構的類型愈來愈多，動態網站因具備有可互換的單元而處處受人青睞。例如，動態網站可以一直重複執行相同的查詢，或是計算購物車網頁中的總金額，而且可以在每次加入新增項目時，重新計算一次總金額。像這一類的工作，就屬於可交由組件來處理的工作。您可以在最不影響應用程式其他部份的情況下，修正、改善、擴充，甚至於置換其中的組件。

假設某個網路商店會依照訂單的金額來計算運費；對金額 $20 以下的訂單而言，運費為 $4，對金額介於 $20 和 $40 之間的訂單而言，運費為 $6，以此類推。您可以同時在購物車和結帳的頁面中插入計算運費的邏輯，但是這麼一來會將 HTML 畫面顯示的程式碼和 CFML 邏輯的程式碼混合在一起，而導致程式碼難以維護和重複使用的缺點。

您決定要建立一個名為 Pricing 的 ColdFusion 組件，該組件內含一個名為 ShippingCharge 的函式。這個函式會將購買金額當作是引數傳入，然後傳回計算得出的運費。例如，當引數值為 32.80 時，則函式就會傳回 6。

而您可以在購物車和結帳這兩個網頁中，插入一個特別的標籤來叫用 ShippingCharge 函式；當使用者要求該網頁時，網頁就會叫用該函式，並且將計算所得的運費傳回網頁中。

又過了不久，這家網路商店又宣佈推出促銷優惠活動：凡是金額超過 $100 以上的訂單，運費全免。您只需要在一個地方 (亦即 Pricing 組件中的 ShippingCharge 函式) 變更運費的計算方式，就可以讓所有使用這個函式的頁面自動取得正確的運費計算結果。


以視覺化方式在 Dreamweaver 中建立組件

您可以使用 Dreamweaver 以視覺化的方式定義 ColdFusion 組件及其函式。Dreamweaver 會為您建立 .cfc 檔，並插入必要的 CFML 標籤。

注意

視不同的組件而定，您可能必須以手動方式完成其中部份的程式碼。

若要以視覺化的方式建立 ColdFusion 組件：

  1. 請在 Dreamweaver 中開啟 ColdFusion 頁面。
  2. 在「組件」面板 (「視窗＞組件」) 中，從彈出式選單中選取「CF 組件」。
  3. 在「組件」面板上，按一下加號 (+) 按鈕。

    「建立組件」對話方塊便會開啟。

  4. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱設定建立組件的對話方塊選項。

Dreamweaver 會寫入一個 .cfc 檔，並將該檔案儲存於您所指定的資料夾中。「組件」頁面中也會出現新建的組件 (當您按一下「重新整理」之後)。

若要移除組件，您必須以手動方式將 .cfc 檔自伺服器上刪除。

相關主題

  • 關於 ColdFusion 組件
  • 在 Dreamweaver 中檢視 ColdFusion 組件
  • 在 Dreamweaver 中編輯 ColdFusion 組件
  • 建立使用 ColdFusion 組件的網頁


在 Dreamweaver 中檢視 ColdFusion 組件

Dreamweaver 提供一種方式讓您以視覺化的方式來檢查位於您的網站資料夾或整個伺服器上面的 ColdFusion 組件 (CFC)。Dreamweaver 會讀取 .cfc 檔，然後以易於瀏覽的樹狀檢視畫面，將組件的相關資訊顯示在「組件」面板中。

Dreamweaver 會在您的測試伺服器上尋找組件 (請參閱指定可以處理動態網頁的位置)。如果您建立新的 CFC 或變更現有的 CFC，請確定將 CFC 檔案上傳到測試伺服器，以便正確地反映到「組件」面板。

如果您要檢視位於其他伺服器上的組件，請變更測試伺服器上的設定值。

您可以檢視下列有關 CF 組件的任何資訊：

  • 列出伺服器定義的所有 ColdFusion 組件。
  • 如果您執行的是 ColdFusion MX 7 或更新版本，篩選清單只顯示放置在您網站資料夾中的 CFC。
  • 查看每一個組件的函式和引數。
  • 檢查當作是網路服務的函式屬性。

若要在 Dreamweaver 中檢視 ColdFusion 組件：

  1. 在 Dreamweaver 中開啟任一個 ColdFusion 頁面。
  2. 在「組件」面板 (「視窗＞組件」) 中，從彈出式選單中選取「CF 組件」。
  3. 按一下面板中的「重新整理」按鈕以擷取組件。

    Dreamweaver 會顯示伺服器上的組件套件；所謂「組件套件」，指的就是內含 CFC 檔案的資料夾。

    如果畫面上並未顯示現有的組件套件，請按一下面板工具列中的「重新整理」按鈕。

  4. 若是只要顯示位於您網站資料夾中的 CFC，請按一下「組件」面板工具列中的「僅顯示目前網站的 CFC」按鈕。

    只有在已將執行 ColdFusion MX 6 或更新版本的電腦定義為 Dreamweaver 的測試伺服器時，才能使用這項功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

    注意

    如果目前的網站列於遠端伺服器的虛擬資料夾中，篩選功能則無法正常執行。
  5. 按一下套件名稱旁邊的加號 (+) 按鈕，便可檢視儲存於該套件中的組件。
    • 若要列出組件中的函式，請按一下組件名稱旁邊的加號 (+) 按鈕。
    • 若要查看函式中所用到的引數、引數的類型，以及引數是否為必要的或選擇性的，請在樹狀檢視中開啟函式的分支。

      如果是沒有使用引數的函式，該函式的旁邊就不會出現加號 (+) 按鈕。

    • 若要快速檢視引數、函式、組件或套件的詳細資料，請在樹狀檢視中選取項目，然後按一下面板工具列中的「取得詳細資料」按鈕。

      您也可以按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh) 項目，然後從彈出式選單中選取「取得詳細資料」。

      Dreamweaver 會在訊息方塊中顯示相關項目的詳細資料。

相關主題

  • 關於 ColdFusion 組件
  • 以視覺化方式在 Dreamweaver 中建立組件
  • 在 Dreamweaver 中編輯 ColdFusion 組件
  • 建立使用 ColdFusion 組件的網頁


在 Dreamweaver 中編輯 ColdFusion 組件

Dreamweaver 提供您一種編輯已定義於網頁中之 ColdFusion 組件程式碼的優良作業環境。例如，您不用離開 Dreamweaver 環境，即可對所有的組件函式進行新增、變更或刪除的動作。

若要使用這項功能，請依照下列步驟設定您的開發環境：

  • ColdFusion 必須在本機上執行。
  • 在 Dreamweaver 的「進階網站定義」對話方塊內，於「測試伺服器」類別中所指定的「存取」類型必須是「本機/區域網路」。
  • 在進階「網站定義」對話方塊內，本機根資料夾的路徑必須和測試伺服器資料夾的路徑相同 (例如，c:\Inetpub\wwwroot\cf_projects\myNewApp\)。如果您要檢查或變更這些路徑，請選取「網站＞編輯網站」。
  • 您必須將組件儲存於本機網站的資料夾中，或者是電腦硬碟中本機網站的子資料夾內。

在 Dreamweaver 中開啟任何 ColdFusion 頁面，並將組件顯示於「組件」面板中。若要顯示組件，請開啟「組件」面板 (「視窗＞組件」)，從面板的彈出式選單中選取「CF 組件」，然後按一下面板上的「重新整理」按鈕。

由於 ColdFusion 是在本機執行，Dreamweaver 會顯示儲存於硬碟上的組件套件。如需詳細資訊，請參閱在 Dreamweaver 中檢視 ColdFusion 組件。

若要編輯組件：

  1. 在 Dreamweaver 中開啟任何 ColdFusion 頁面，並將組件顯示於「組件」面板 (「視窗＞組件」) 中。
  2. 從面板的彈出式選單中選取「CF 組件」，然後按一下面板上的「重新整理」按鈕。

    由於 ColdFusion 是在本機執行，Dreamweaver 會顯示儲存於硬碟上的組件套件。如需詳細資訊，請參閱在 Dreamweaver 中檢視 ColdFusion 組件。

  3. 通常，若要編輯組件檔案，請開啟組件套件，然後按兩下樹狀檢視中的組件名稱。

    Dreamweaver 會在「程式碼」檢視中開啟組件的檔案。

  4. 若要編輯某特定的函式、引數或屬性，請按兩下樹狀檢視中的項目。
  5. 在「程式碼檢視」畫面中進行相關的變更。
  6. 儲存檔案 (「檔案＞儲存檔案」)。

若要在「組件」面板中查看新的函式，請使用面板工具列上的「重新整理」按鈕，重新整理組件面板的畫面。


建立使用 ColdFusion 組件的網頁

若要在網頁中使用組件函式，有一種做法就是直接將組件函式的程式碼寫在網頁之中，以便在要求該網頁時叫用函式；您可以使用 Dreamweaver 協助您撰寫這個程式碼。

注意

如需使用組件的其他方法，請參閱 Dreamweaver 中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。

若要在網頁中使用 ColdFusion 組件：

  1. 在 Dreamweaver 中，開啟要使用組件函式的 ColdFusion 頁面。
  2. 切換到「程式碼檢視」(「檢視＞程式碼」)。
  3. 開啟「組件」面板 (「視窗＞組件」)，然後從面板的彈出式選單中選取「CF 組件」。
  4. 尋找您所需的組件，然後使用下列其中一種方法插入組件：
    • 使用拖曳功能，將組件從樹狀檢視拖曳到網頁中；Dreamweaver 會在該網頁中插入程式碼來叫用函式。
    • 選取面板中的函式，然後按一下面板工具列上的「插入」按鈕 (右邊算起第二個按鈕)。Dreamweaver 會在插入點的位置，將程式碼插入至網頁中。
  5. 如果您插入的函式包含引數，則必須以手動方式完成引數程式碼。

    如需詳細資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。

  6. 儲存頁面 (「檔案＞儲存」)。


在 ColdFusion 組件中定義資料集

Dreamweaver 可以協助您在 ColdFusion 組件 (CFC) 中定義資料集 (也稱為 ColdFusion 查詢)。如果在 CFC 中定義了資料集，您就不需要在使用資料集的每個頁面上逐一定義。只要在 CFC 中定義過一次資料集，就可以在不同的頁面上使用 CFC。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要在 ColdFusion 組件中定義資料集：

  1. 在 Dreamweaver 中建立或開啟現有的 CFC 檔案。

    如需詳細資訊，請參閱以視覺化方式在 Dreamweaver 中建立組件。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    便會出現「資料集」對話方塊。不論是簡單或進階的「資料集」對話方塊，您都可以使用。

  3. 如果您希望在 CFC 中使用現有的函式，請從「函式」彈出式選單中選取所需的函式，然後跳至步驟 6。

    資料集是在函式中定義。

  4. 如果您希望在 CFC 中定義新的功能，請按一下「新函式」按鈕，在出現的對話方塊中輸入函式名稱，然後再按一下「確定」。

    名稱僅能包含英文字母、數字和底線字元 (_)。不可以使用特殊字元或空格。

  5. 使用「資料集」對話方塊來定義該函式的資料集。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

    完成之後，Dreamweaver 會在您的 CFC 中插入可定義資料集的新函式。

    若要以視覺方式來編輯 CFC 資料集，請在「繫結」面板中按兩下 CFC 資料集。

相關主題

  • 使用 CFC 資料集做為動態內容的來源


使用 CFC 資料集做為動態內容的來源

如果組件中含有定義資料集的函式，您可以使用 ColdFusion 組件 (CFC) 做為頁面動態內容的來源。如需建立此類型 CFC 的詳細資訊，請參閱在 ColdFusion 組件中定義資料集。

唯有當您所存取的電腦是執行 ColdFusion MX 7 或更新版本時，才能使用這項功能。如需詳細資訊，請參閱啟用 ColdFusion 增強功能。

若要使用 CFC 做為動態內容的來源：

  1. 請在 Dreamweaver 中開啟 ColdFusion 頁面。
  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    便會出現「資料集」對話方塊。不論是簡單或進階的「資料集」對話方塊，您都可以使用。

  3. 按一下「CFC 查詢」按鈕。

    便會出現「CFC 查詢」對話方塊。

  4. 完成對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  5. 按一下「確定」，關閉「CFC 查詢」對話方塊，然後再按一下「確定」，將 CFC 資料集加入「繫結」面板中適用的內容來源清單裡。
  6. 使用「繫結」面板將資料集繫結到各種不同的頁面元素。

    如需詳細資訊，請參閱新增動態內容到網頁。

相關主題

  • 在 ColdFusion 組件中定義資料集


參考

這一節提供本章所介紹之下列對話方塊和面板的相關文件：

  • 設定 CFForm 屬性 (ColdFusion)
  • 設定 CFTextField 屬性 (ColdFusion)
  • 設定 CFHiddenField 屬性 (ColdFusion)
  • 設定 CFTextArea 屬性 (ColdFusion)
  • 設定 CFButton 屬性 (ColdFusion)
  • 設定 CFCheckBox 屬性 (ColdFusion)
  • 設定 CFRadioButton 屬性 (ColdFusion)
  • 設定 CFSelect 屬性 (ColdFusion)
  • 設定 CFImageField 屬性 (ColdFusion)
  • 設定 CFFileField 屬性 (ColdFusion)
  • 設定 CFDateField 屬性 (ColdFusion)
  • 設定主要及細節頁面設定的對話方塊選項
  • 設定記錄插入表單的對話方塊選項
  • 設定表單元素屬性的對話方塊選項
  • 設定插入記錄的對話方塊選項 (ASP & JSP)
  • 設定插入記錄的對話方塊選項 (PHP)
  • 設定插入記錄的對話方塊選項 (ColdFusion)
  • 設定插入記錄的對話方塊選項 (ASP.NET)
  • 設定記錄更新表單的對話方塊選項
  • 設定更新記錄的對話方塊選項 (ColdFusion)
  • 設定刪除記錄的對話方塊選項 (ColdFusion)
  • 設定 ColdFusion 預存程序的對話方塊選項
  • 設定預存程序變數的對話方塊選項
  • 設定檢查新使用者名稱的對話方塊選項
  • 設定登入使用者的對話方塊選項
  • 設定限制存取頁面的對話方塊選項
  • 設定定義存取層級的對話方塊選項
  • 設定登出使用者的對話方塊選項
  • 設定 ColdFusion 登入精靈選項
  • 設定建立組件的對話方塊選項
  • 設定 CF 組件面板的選項
  • 設定 CFC 查詢的對話方塊選項
  • 設定新的組件對話方塊選項
  • 設定編輯參數的對話方塊選項


設定 CFForm 屬性 (ColdFusion)

使用「屬性」檢視窗，設定 ColdFusion 表單的屬性。

若要設定 CFForm 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    CFForm 設定表單名稱。

    動作讓您指定送出表單時要處理的 ColdFusion 頁面名稱。

    方法讓您定義瀏覽器用來將表單資料傳送到伺服器的方法：

    • POST 使用 HTTP post 方法傳送資料；這個方法會將個別訊息中的資料傳送到伺服器。
    • GET 使用 HTTP get 方法傳送資料，將表單欄位內容放置在 URL 查詢字串中。

    目標讓您修改 CFForm 標籤的目標屬性值。

    編碼方式類型指定用來傳輸表單資料的編碼方法。

    注意

    編碼方式類型與字元編碼沒有關聯。這個屬性會指定用來將表單送到伺服器的內容類型 (當方法的值為 post 時)。這個屬性的預設值為 application/x-www-form-urlencoded。

    格式會判斷將要建立哪一種表單，格式如下：

    • HTML 會產生 HTML 表單並將其傳送到用戶端，而 Cfgrid 和 Cftree 子控制項都可以採用 Flash 或 Applet 格式。
    • Flash 會產生 Macromedia Flash 表單並將其傳送到用戶端，所有控制項都採用 Flash 格式。
    • XForm 會產生 XForms XML，並以 ColdFusion 表單名稱將結果放入變數中，並不會傳送任何資料給用戶端；而 Cfgrid 和 Cftree 子控制項都可以採用 Flash 或 Applet 格式。

    樣式讓您指定表單的樣式。如需詳細資訊，請參閱 ColdFusion 文件。

    Flash/XML 外觀讓您指定 Macromedia 的 Halo 色彩來設定輸出的樣式。主題可以決定已標示及選取的元素色彩。

    保存資料判斷是否要在公布表單時，以送出的值覆蓋控制項的初始值。

    • 如果為 False，則使用控制項標籤屬性所指定的值。
    • 如果為 True，則使用送出的值。

    Scripts src 相對於網站根，會指定 JavaScript 檔案的 URL，而該檔案中含有標籤及其子標籤所使用的用戶端程式碼。如果該檔案並未儲存於預設的位置，這項屬性就很有用。在某些會封鎖 /CFIDE 目錄存取的虛擬主機環境及組態中，可能會需要用到這項屬性。預設位置設定於 ColdFusion Administrator 中，此位置預設為 /CFIDE/scripts/cfform.js。

    封存指定 CFGrid、CFSlider 和 CFTree Applet 控制項可下載之 Java 類別的 URL。預設的位置為 /CFIDE/classes/cfapplets.jar。

    高度指定表單的高度。

    寬度指定表單的寬度。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 建立 ColdFusion 表單
  • 驗證 ColdFusion 表單資料


設定 CFTextField 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 文字欄位的屬性。

若要設定 CFTextField 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    CFtextfield 設定 cfinput 標籤的 id 屬性。

    值讓您指定在瀏覽器中第一次開啟頁面時，要顯示在欄位中的文字。此資訊可能是靜態或動態。

    若要指定動態的值，請按一下「值」文字方塊旁邊的閃電圖示，然後在「動態資料」對話方塊中選取資料集欄。當您以瀏覽器檢視表單時，資料集欄會提供一個值給文字欄位。

    文字模式讓您在標準文字輸入欄位及密碼輸入欄位之間進行切換。這個控制項所修改的屬性為類型。

    唯讀讓您將顯示的文字設定成唯讀狀態。

    最大長度設定文字欄位所能接受的最大字元數。

    遮罩讓您為要求的文字指定遮罩，您可以使用這項屬性來驗證使用者輸入的資料。遮罩格式是由 A、9、X 和 ? 等字元所組成。

    注意

    如果 cfinput 類型為「密碼」標籤時，遮罩屬性會被忽略。

    驗證指定目前欄位的驗證類型。

    驗證於指定什麼時候要驗證欄位：onSubmit、onBlur 或 onServer。

    標籤讓您指定文字欄位的標籤。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。

    寬度讓您指定控制項的寬度 (以像素為單位)。

    大小讓您指定控制項的大小。

    必要項讓您指定在將表單送出到伺服器之前，文字欄位是否必須含有資料。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 文字欄位


設定 CFHiddenField 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 隱藏欄位的屬性。

若要設定 CFHiddenField 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfhiddenfield 讓您指定隱藏欄位唯一的名稱。

    值讓您指定隱藏欄位的值；此資訊可能是靜態或動態。

    若要指定動態的值，請按一下「值」文字方塊旁邊的閃電圖示，然後在「動態資料」對話方塊中選取資料集欄。當您以瀏覽器檢視表單時，資料集欄會提供一個值給文字欄位。

    驗證指定目前欄位的驗證類型。

    驗證於指定什麼時候要驗證欄位：onSubmit、onBlur 或 onServer。

    標籤讓您指定控制項的標籤。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    寬度讓您指定控制項的寬度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    大小讓您指定控制項的大小。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    必要項讓您指定在將表單送出到伺服器之前，隱藏欄位是否必須含有資料。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 隱藏欄位


設定 CFTextArea 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 文字區域的屬性。

若要設定 CFTextArea 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cftextarea 讓您為這個控制項指定唯一的名稱。

    字元寬度讓您設定每一行的字元數。

    行數讓您設定文字區域中顯示的列數。

    換行讓您指定希望使用者輸入文字時應該如何換行。

    必要項讓您指定使用者是否必須在欄位中輸入資料；若是，則為「已選取」；若否，則為「取消選取」。

    初始值讓您指定在瀏覽器中第一次開啟頁面時，要顯示在文字方塊中的文字。

    驗證指定欄位的驗證類型。

    驗證於指定什麼時候要驗證欄位：onSubmit、onBlur 或 onServer。

    標籤讓您指定控制項的標籤。

    樣式讓您指定控制項的樣式。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    寬度讓您指定控制項的寬度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 文字區域


設定 CFButton 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 按鈕的屬性。

若要設定 CFButton 的屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfbutton 讓您為這個控制項指定唯一的名稱。

    動作讓您指定要建立的按鈕類型。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

在執行階段，ColdFusion 伺服器會忽略其他屬性。

相關主題

  • 插入 ColdFusion 按鈕
  • 驗證 ColdFusion 表單資料


設定 CFCheckBox 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 核取方塊的屬性。

若要設定 CFCheckBox 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfcheckbox 讓您為這個控制項指定唯一的名稱。

    核取的值讓您指定如果使用者選取方塊時，該核取方塊的傳回值。

    初始狀態讓您指定在瀏覽器中第一次開啟頁面時，該核取方塊是否呈選取狀態。

    驗證指定核取方塊的驗證類型。

    驗證於指定什麼時候要驗證核取方塊：onSubmit、onBlur 或 onServer。

    標籤讓您指定核取方塊的標籤。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    寬度讓您指定控制項的寬度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    大小讓您指定控制項的大小。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    必要項讓您指定在將表單送出到伺服器之前，是否必須先選取核取方塊。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 核取方塊
  • 驗證 ColdFusion 表單資料


設定 CFRadioButton 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 選項按鈕的屬性。

若要設定 CFRadioButton 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfradiobutton 讓您為這個控制項指定唯一的名稱。

    核取的值讓您指定如果使用者選取按鈕時，該選項按鈕的傳回值。

    初始狀態讓您指定在瀏覽器中第一次開啟頁面時，該選項按鈕是否呈選取狀態。

    驗證指定選項按鈕的驗證類型。

    驗證於指定什麼時候要驗證選項按鈕：onSubmit、onBlur 或 onServer。

    標籤讓您指定選項按鈕的標籤。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    寬度讓您指定控制項的寬度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    大小讓您指定控制項的大小。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    必要項讓您指定在將表單送出到伺服器之前，是否必須先選取選項按鈕。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 選項按鈕
  • 驗證 ColdFusion 表單資料


設定 CFSelect 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 選取方塊的屬性。

若要設定 CFSelect 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfselect 讓您為這個控制項指定唯一的名稱。

    類型讓您選擇彈出式選單或清單。如果選擇清單類型，「清單高度」和「允許多個清單選取範圍」選項即可供選取。

    清單高度讓您指定清單選單中顯示出來的行數。只有在選取清單類型時，才能使用這個屬性。

    允許多個清單選取範圍讓您指定使用者是否可以從清單中同時選取一個以上的選項。只有在選取清單類型時，才能使用這個屬性。

    編輯值開啟對話方塊讓您從選取方塊中新增、編輯或移除選項。

    起始時已選取讓您指定哪些選項已經預設選取。如果您已選取「允許多個清單選取範圍」選項，則可以選取一個以上的選項。

    資料集讓您指定希望用來填入清單或選單之 ColdFusion 查詢的名稱。

    顯示欄讓您指定資料集欄，以便提供每個清單元素的顯示標籤。配合「資料集」屬性使用。

    值欄讓您指定資料集欄，以便提供每個清單元素的值。配合「資料集」屬性使用。

    Flash 標籤讓您指定選取方塊的標籤。

    Flash 高度讓您指定控制項的高度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    Flash 寬度讓您指定控制項的寬度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    訊息如果「必要項」屬性設定為「是」，而且使用者在送出表單之前也無法順利進行選取，則可以在這裡指定要顯示的訊息。

    必要項讓您指定在將表單送出到伺服器之前，是否必須先選取選單項目。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 選取方塊
  • 驗證 ColdFusion 表單資料


設定 CFImageField 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 影像欄位的屬性。

若要設定 CFImageField 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfimagefield 讓您為這個控制項指定唯一的名稱。

    Src 讓您指定要插入之影像的 URL。

    Alt 讓您可以在影像無法顯示時，指定顯示的訊息。

    對齊讓您指定圖片的對齊方式。

    邊框讓您設定影像邊框的寬度。

    編輯影像讓您以預設的影像編輯器開啟影像。

    若要定義預設的影像編輯器，請選取「編輯＞偏好設定＞檔案型態 / 編輯器」；否則，「編輯影像」按鈕將無法執行任何動作。

    驗證指定影像欄位的驗證類型。

    驗證於指定什麼時候要驗證欄位：onSubmit、onBlur 或 onServer。

    標籤讓您指定選項按鈕的標籤。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。

    寬度讓您指定控制項的寬度 (以像素為單位)。

    大小讓您指定控制項的大小。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    必要項讓您指定在將表單送出到伺服器之前，控制項是否必須含有資料。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 影像欄位
  • 驗證 ColdFusion 表單資料


設定 CFFileField 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 檔案上傳欄位的屬性。

若要設定 CFFileField 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cffilefield 讓您為這個控制項指定唯一的名稱。

    最大長度讓您指定檔案路徑所能使用的最大字元長度。

    驗證指定欄位的驗證類型。

    驗證於指定什麼時候要驗證欄位：onSubmit、onBlur 或 onServer。

    標籤讓您指定欄位的標籤。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    寬度讓您指定控制項的寬度 (以像素為單位)。在執行階段，ColdFusion 伺服器會忽略這個屬性。

    大小讓您指定控制項的大小。

    必要項讓您指定在將表單送出到伺服器之前，檔案欄位是否必須含有資料。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 檔案欄位
  • 驗證 ColdFusion 表單資料


設定 CFDateField 屬性 (ColdFusion)

請使用此「屬性」檢視窗，設定 ColdFusion 日期欄位的屬性。

若要設定 CFDateField 屬性：

  • 在「屬性」檢視窗中設定下列任何選項：

    Cfdatefield 讓您為這個控制項指定唯一的名稱。

    值讓您指定在瀏覽器中第一次開啟頁面時，欄位中所顯示的日期。此日期可能是靜態或動態資訊。

    若要指定動態的值，請按一下「值」文字方塊旁邊的閃電圖示，然後在「動態資料」對話方塊中選取資料集欄。當您以瀏覽器檢視表單時，資料集欄會提供一個值給文字欄位。

    驗證指定欄位的驗證類型。

    驗證於指定什麼時候要驗證欄位：onSubmit、onBlur 或 onServer。

    標籤讓您指定欄位的標籤。

    模式讓您指定 JavaScript 規則運算式的模式，以便驗證輸入資料；請省略字串前後的斜線。如需詳細資訊，請參閱 ColdFusion 文件。

    高度讓您指定控制項的高度 (以像素為單位)。

    寬度讓您指定控制項的寬度 (以像素為單位)。

    大小讓您指定控制項的大小。

    必要項讓您指定在將表單送出到伺服器之前，日期欄位是否必須含有值。

    顯示標籤編輯器讓您編輯沒有列在「屬性」檢視窗上的屬性。

相關主題

  • 插入 ColdFusion 日期欄位
  • 驗證 ColdFusion 表單資料


設定主要及細節頁面設定的對話方塊選項

這個對話方塊是用來建立主要頁面和對應的細節頁面。只有在 ColdFusion、ASP、PHP 或 JSP 網站上工作時，才可使用這個應用程式物件。

若要設定對話方塊選項：

  1. 在「資料集 (Recordset)」彈出式選單中，請檢查確定已選取了含有要於主要頁面中顯示記錄的資料集。
  2. 在「主要頁面欄位」的區域中，選取要顯示於主要頁面中的資料集欄。

    依預設值，Dreamweaver 會選取資料集中所有的欄。如果資料集中含有唯一索引鍵欄，像是 recordID，請選取該索引鍵欄，並按一下減號 (-) 按鈕，這個索引鍵欄便不會顯示在您的頁面上。

  3. 如果您要變更各欄在主要頁面中的顯示順序，請選取清單中的一欄，然後按一下向上或向下鍵來調整顯示的順序。

    在主要頁面中，會將資料集欄以水平方式顯示於表格中；因此當您按一下向上鍵時，會將直欄左移一個位置，而按一下向下鍵時，會將直欄右移一個位置。

  4. 在「連結到詳細資料來源」彈出式選單中，選取資料集中要在細節頁面顯示數值並做為連結的欄。

    例如，如果您要讓主要頁面中的每一個產品名稱，都有一個連至細節頁面的連結時，請選取含有產品名稱的資料集欄。

  5. 在「傳送唯一鍵」彈出式選單中，選取內含用來識別記錄之數值的資料集欄。

    通常，會選擇的欄是記錄 ID 編號，系統會將這個數值傳送至細節頁面，用來識別使用者所選取的記錄為何。

  6. 如果唯一索引鍵欄不是數值，請取消選取「數值」核取方塊；

    注意

    系統預設會選取這個選項，但不見得所有的伺服器模式都必須沿用這個選項。
  7. 指定主要頁面中所要顯示的記錄數目。
  8. 在「細節頁面名稱」文字方塊中，按一下「瀏覽」尋找您所建立的細節頁面檔案，或者是輸入新的名稱，直接讓應用程式物件建立這個細節頁面檔案。
  9. 在「細節頁面欄位」區域中，請選取要顯示於細節頁面中的欄。

    依預設值，Dreamweaver 會選取主要頁面資料集中所有的欄。如果資料集中含有唯一索引鍵欄，像是 recordID，請選取該索引鍵欄，並按一下減號 (-) 按鈕，這個索引鍵欄便不會顯示在您的頁面上。

  10. 如果您要變更各欄在細節頁面中的顯示順序，請選取清單中的一欄，然後按一下向上或向下鍵來調整顯示的順序。

    在細節頁面中，會將資料集欄以垂直方式顯示於表格中；按一下向上鍵會將欄上移一個位置，按一下向下鍵則會將欄下移一個位置。

  11. 按一下「確定」。

    應用程式物件會建立一個細節頁面 (如果您尚未建立細節頁面)，並同時在主要頁面和細節頁面中加入動態內容和伺服器行為。

相關主題

  • 一次作業建立主要/細節頁面 (ColdFusion、ASP、JSP、PHP)


設定記錄插入表單的對話方塊選項

這個對話方塊是用來建立可讓使用者在資料庫中插入新記錄的頁面。

若要設定對話方塊選項：

  1. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  2. 在「插入表格」彈出式選單中，選取要插入記錄的資料庫表格。
  3. 如果您使用 ColdFusion，請輸入使用者名稱與密碼。
  4. 在「插入後，請前往」文字方塊中輸入當記錄插入表格之後要開啟的頁面，或是按下「瀏覽」鈕瀏覽到檔案。
  5. 如果您使用 ASP.NET，便可以指定插入成功與插入失敗時分別要前往的頁面。您也可以選擇在失敗時顯示除錯資訊。

    如果您選擇了「失敗時顯示除錯資訊」，Dreamweaver 會忽略「如果失敗，請前往」選項。

    提示

    請在開發期間使用「失敗時顯示除錯資訊」選項，而在頁面上線之後使用「如果失敗，請前往」選項。
  6. 在「表單欄位」區域中指定要加入插入頁面的 HTML 表單中的表單物件，以及各表單物件要更新的資料庫表格欄。

    在預設狀況下，Dreamweaver 會為資料庫表格中的每一欄建立一個表單物件。如果資料庫會自動為每一筆新建立的記錄產生唯一索引鍵 ID，請在清單中選取表單物件，然後按下「減號 (-)」按鈕，將對應於索引鍵欄的表單物件移除。這樣可以防止表單的使用者輸入已經存在的 ID 數值。

    如果要變更 HTML 表單上的表單物件的順序，可以在清單中選取表單物件，再按下對話方塊右邊的向上或向下箭頭。

  7. 如果要指定每一個資料項目欄位在 HTML 表單中的顯示方式，請按下「表單欄位」表格中的某一列，並在表格下方的方塊中輸入下列資訊：
    • 在「標籤」文字方塊中輸入要顯示在資料輸入欄位旁邊的說明標籤。依預設值，Dreamweaver 會在標籤中顯示表格欄的名稱。
    • 在「顯示為」彈出式選單中，選擇將做為資料輸入欄位的表單物件。您可以選取「文字欄位」、「文字區域」、「選單」、「核取方塊」、「選項按鈕群組」以及「文字」。如果要輸入唯讀資料，請選擇「文字」。您也可以選取「密碼欄位」、「檔案欄位」和「隱藏欄位」。

      注意

      隱藏欄位都是插入於表單的末端。
    • 在「送出為」彈出式選單中，選取資料庫表格可接受的資料格式。例如，如果表格欄僅能接受數字資料，請選擇「數值」。
    • 設定表單物件的屬性。依您選做為資料輸入欄位的表單物件而異，您會有不同的選項。您可以為文字欄位、文字區域以及文字輸入初始值。使用選單與選項按鈕群組時，必須開啟其他對話方塊才能設定屬性。使用核取方塊時，可選擇「已選取」或「取消選取」選項。
    • 如果您使用 ASP.NET，可以選擇使用網站表單控制項。
  8. 按一下「確定」。

Dreamweaver 會在頁面中加入 HTML 表單以及「插入記錄」伺服器行為。

相關主題

  • 一次建立插入頁面
  • 插入動態 HTML 表單物件


設定表單元素屬性的對話方塊選項

這個對話方塊是用來設定在頁面上讓使用者更新資料庫中記錄的表單元素屬性。

若要設定對話方塊選項：

  1. 依您計畫建立表單元素的方式，選取「手動」或是「資料庫來源」。
  2. 按一下加號 (+) 按鈕，新增元素。
  3. 為元素輸入標籤與數值。
  4. 如果您要在瀏覽器開啟頁面時，或是在表單中顯示記錄時選取特定元素，請在「選取的值等於」文字方塊中輸入與元素數值相同的數值。

    您可以輸入靜態數值，或是按下閃電圖示，再從資料來源清單中選取動態數值來指定動態數值。不論是哪一種狀況，您指定的數值必須與其中一個元素的數值相同。


設定插入記錄的對話方塊選項 (ASP & JSP)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以在資料庫表格中插入記錄。

頁面中必須包含「送出」按鈕的 HTML 表單，才能加入這個伺服器行為。

若要設定對話方塊選項：

  1. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  2. 在「插入表格」彈出式選單中，選取要插入記錄的資料庫表格。
  3. 在「插入後，請前往」文字方塊中，輸入將記錄插入表格之後要開啟的頁面，或是按一下「瀏覽」以瀏覽到檔案。
  4. 在「數值來源」彈出式選單中，選取用來輸入資料的 HTML 表單。

    Dreamweaver 會自動選取頁面上的第一個表單。

  5. 指定要插入記錄的資料庫欄，從「值」彈出式選單中選取要插入記錄的表單物件，然後從「送出為」彈出式選單中選取表單物件的資料類型。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  6. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以填寫 HTML 表單後按下「送出」按鈕的方式，在資料庫表格中插入記錄。

相關主題

  • 依組塊建立插入頁面


設定插入記錄的對話方塊選項 (PHP)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以在資料庫表格中插入記錄。

頁面中必須包含「送出」按鈕的 HTML 表單，才能加入這個伺服器行為。

若要設定對話方塊選項：

  1. 從「送出值來源」彈出式選單中選取表單。
  2. 在「連結」彈出式選單中，選取與資料庫的連結。
  3. 在「插入表格」彈出式選單中，選取要插入記錄的資料庫表格。
  4. 指定要插入記錄的資料庫欄，從「值」彈出式選單中選取要插入記錄的表單物件，然後從「送出為」彈出式選單中選取表單物件的資料類型。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  5. 在「插入後，請前往」文字方塊中，輸入將記錄插入表格之後要開啟的頁面，或是按下「瀏覽」按鈕瀏覽到檔案。
  6. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以填寫 HTML 表單後按下「送出」按鈕的方式，在資料庫表格中插入記錄。

相關主題

  • 依組塊建立插入頁面


設定插入記錄的對話方塊選項 (ColdFusion)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以在資料庫表格中插入記錄。

頁面中必須包含「送出」按鈕的 HTML 表單，才能加入這個伺服器行為。

若要設定對話方塊選項：

  1. 從「送出值來源」彈出式選單中選取表單。
  2. 在「資料來源」彈出式選單中，選取資料庫的連線。
  3. 輸入使用者名稱與密碼。
  4. 在「插入表格」彈出式選單中，選取要插入記錄的資料庫表格。
  5. 指定要插入記錄的資料庫欄，從「值」彈出式選單中選取要插入記錄的表單物件，然後從「送出為」彈出式選單中選取表單物件的資料類型。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  6. 在「插入後，請前往」文字方塊中，輸入將記錄插入表格之後要開啟的頁面，或是按下「瀏覽」按鈕瀏覽到檔案。
  7. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以填寫 HTML 表單後按下「送出」按鈕的方式，在資料庫表格中插入記錄。

相關主題

  • 依組塊建立插入頁面


設定插入記錄的對話方塊選項 (ASP.NET)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以在資料庫表格中插入記錄。

頁面中必須包含「送出」按鈕的 HTML 表單，才能加入這個伺服器行為。

若要設定對話方塊選項：

  1. 從「送出值來源」彈出式選單中選取表單。
  2. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  3. 在「插入表格」彈出式選單中，選取要插入記錄的資料庫表格。
  4. 指定要插入記錄的資料庫欄，從「值」彈出式選單中選取要插入記錄的表單物件，然後從「送出為」彈出式選單中選取表單物件的資料類型。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  5. 在「如果成功，請前往」文字方塊中，輸入在伺服器行為執行成功之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  6. 在「如果失敗，請前往」文字方塊中，輸入在伺服器行為失敗之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  7. 如果您希望在伺服器行為失敗時能取得除錯資訊，請選取「失敗時顯示除錯資訊」核取方塊。

    如果您選擇了這個選項，Dreamweaver 會忽略「如果失敗，請前往」選項。

    提示

    請在開發期間使用除錯選項，在網站上線之後使用「如果失敗，請前往」選項。
  8. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以填寫 HTML 表單後按下「送出」按鈕的方式，在資料庫表格中插入記錄。

相關主題

  • 依組塊建立插入頁面


設定記錄更新表單的對話方塊選項

這個對話方塊是用來建立可讓使用者更新資料庫記錄的頁面。

在開始之前，您必須先完成下列作業：

  • 您必須先建立一或多個頁面，讓使用者可以在上面找到要更新的記錄。如需詳細資訊，請參閱搜尋要更新的記錄 (ColdFusion)。
  • 在更新頁面中加入邏輯，使其能從資料庫擷取使用者所選擇的記錄，以作為進行更新的準備。如需相關說明，請參閱擷取要更新的記錄 (ColdFusion)。

完成這些前置作業之後，就可以依下列方式完成對話方塊：

若要設定對話方塊選項：

  1. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  2. 在「更新表格」彈出式選單中，選取含有要更新記錄的資料庫表格。
  3. 在「選取記錄來源」彈出式選單中，指定含有 HTML 表單所顯示記錄的資料集。
  4. 在「唯一索引鍵欄」彈出式選單中選取索引鍵欄 (通常是記錄 ID 欄)，以識別資料庫表格中的記錄。

    如果值為數字，請選取「數值」選項。索引鍵欄通常只能接受數值，但有時候也可以接受文字值。

  5. 在「更新後，請前往」文字方塊中，輸入表格中的記錄更新之後要開啟的頁面。
  6. 在「表單欄位」區域中，指定每一個表單物件應更新的資料庫表格欄。

    在預設狀況下，Dreamweaver 會為資料庫表格中的每一欄建立一個表單物件。如果資料庫會自動為每一筆新建立的記錄產生唯一索引鍵 ID，請在清單中選取表單物件，然後按下「減號 (-)」按鈕，將對應於索引鍵欄的表單物件移除。這樣可以防止表單的使用者輸入已經存在的 ID 數值。

    如果要變更 HTML 表單上的表單物件的順序，可以在清單中選取表單物件，再按下對話方塊右邊的向上或向下箭頭。

  7. 如果要指定各資料輸入欄位出現在 HTML 表單上的方式，請按下「表單欄位」表格中的某一列，並在表格下方的方塊中輸入下列資訊：
    • 在「標籤」文字方塊中輸入要顯示在資料輸入欄位旁邊的說明標籤。依預設值，Dreamweaver 會在標籤中顯示表格欄的名稱。
    • 在「顯示為」彈出式選單中，選擇將做為資料輸入欄位的表單物件。您可以選取「文字欄位」、「文字區域」、「選單」、「核取方塊」、「選項按鈕群組」以及「文字」。如果要輸入唯讀資料，請選擇「文字」。您也可以選取「密碼欄位」、「檔案欄位」和「隱藏欄位」。

      注意

      隱藏欄位都是插入於表單的末端。
    • 在「送出為」彈出式選單中，選取資料庫表格所預期的資料格式。例如，如果表格欄僅能接受數字資料，請選擇「數值」。
    • 設定表單物件的屬性。依您選做為資料輸入欄位的表單物件而異，您會有不同的選項。您可以為文字欄位、文字區域以及文字輸入初始值。使用選單與選項按鈕群組時，必須開啟其他對話方塊才能設定屬性。使用核取方塊時，可選擇「已選取」或「取消選取」選項。
  8. 如果要設定其他表單物件的屬性，可選取其他「表單欄位」列，並輸入標籤、顯示為值，並且送出為值。

    使用選單與選項按鈕群組時，必須開啟其他對話方塊才能設定屬性。若是核取方塊，請定義目前記錄的值與某個指定值的比較，以決定在顯示記錄時，核取方塊為已選取或取消選取的狀態。

  9. 按一下「確定」。

Dreamweaver 會在頁面中加入 HTML 表單與「更新記錄」伺服器行為。

相關主題

  • 一次完成更新頁面 (ColdFusion)
  • 插入動態 HTML 表單物件


設定更新記錄的對話方塊選項 (ColdFusion)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以更新資料庫表格中的記錄。

在開始之前，您必須先完成下列作業：

  • 您必須先建立一或多個頁面，讓使用者可以在上面找到要更新的記錄。如需詳細資訊，請參閱搜尋要更新的記錄 (ColdFusion)。
  • 在更新頁面中加入邏輯，使其能從資料庫擷取使用者所選擇的記錄，以作為進行更新的準備。如需相關說明，請參閱擷取要更新的記錄 (ColdFusion)。
  • 在更新頁面中加入 HTML 表單，讓使用者修改資料。如需相關說明，請參閱依組塊完成更新頁面 (ColdFusion)。

這些前置作業完成之後，就可以完成「更新記錄」對話方塊。

若要設定對話方塊選項：

  1. 從「送出值來源」彈出式選單中選取表單。
  2. 在「資料來源」彈出式選單中，選取資料庫的連線。
  3. 輸入使用者名稱與密碼。
  4. 在「更新表格」彈出式選單中，選取含有您要更新記錄的資料庫表格。
  5. 指定要更新的資料庫欄，從「值」彈出式選單選取要更新資料庫欄的表單物件，再由「送出為」彈出式選單為表單物件選擇資料類型。如果要將此欄指定為主索引鍵，請選取「主索引鍵」。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  6. 在「更新後，請前往」文字方塊中，輸入更新表格記錄之後要開啟的頁面，或是按一下「瀏覽」按鈕以瀏覽到檔案。
  7. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者在修改 HTML 表單中顯示的資訊之後按下「送出」按鈕，更新資料庫表格中的記錄。

相關主題

  • 依組塊完成更新頁面 (ColdFusion)


設定刪除記錄的對話方塊選項 (ColdFusion)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以刪除資料庫表格中的記錄。

若要設定對話方塊選項：

  1. 在「先檢查是否定義了變數」彈出式選單中選取「主索引鍵值」。

    如果您要檢查的變數，不是指定要刪除記錄的變數，請選取變數並輸入名稱。

    Dreamweaver 會檢查這個變數是否已定義。

  2. 在「資料來源」彈出式選單中，選取資料庫的連線。
  3. 輸入使用者名稱與密碼。
  4. 在「表格」彈出式選單中，選取含有要刪除記錄的資料庫表格。
  5. 在「主索引鍵欄」彈出式選單中，選取用來識別資料庫表格中記錄的索引鍵欄。

    如果值為數字，請選取「數值」選項。索引鍵欄通常只能接受數值，但有時候也可以接受文字值。

  6. 在「主索引鍵值」彈出式選單中，選取用來識別要刪除記錄的變數，並輸入名稱。
  7. 在「刪除後，請前往」文字方塊中，輸入刪除資料庫表格記錄之後要開啟的頁面，或是按下「瀏覽」按鈕瀏覽到檔案。
  8. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，將資料庫表格中的記錄刪除。


設定 ColdFusion 預存程序的對話方塊選項

這個對話方塊是用來在您的 ColdFusion 頁面中插入預存程序。

若要設定對話方塊選項：

  1. 在「資料來源」彈出式選單中，選取含有預存程序的資料庫連線。
  2. 輸入 ColdFusion 資料來源的使用者名稱與密碼。
  3. 從「程序」彈出式選單選取預存程序。

    Dreamweaver 會自動填入所有參數。

  4. 選取參數，如果需要變更參數，請按下「編輯」按鈕。

    「編輯預存程序變數」對話方塊便會出現。若要完成對話方塊，請參閱設定預存程序變數的對話方塊選項。

    注意

    任何預存程序輸入參數您都必須輸入測試值。
  5. 如果預存程序需要參數，請按一下加號 (+) 新增頁面參數。

    「新增參數」對話方塊便會出現。若要完成對話方塊，請參閱設定新增參數對話方塊選項。

    注意

    您必須針對每一個預存程序參數回傳值，輸入對應的頁面參數。如果沒有對應的回傳值，請不要新增頁面參數。

    如果需要，請再按一下加號 (+) 按鈕新增其他頁面參數。

  6. 如果需要，您可選取頁面參數，並按一下減號 (-) 按鈕刪除參數，或是按一下「編輯」以變更參數。

    「編輯參數」對話方塊便會出現。若要完成對話方塊，請參閱設定新增參數對話方塊選項。

  7. 選取「傳回資料集名稱」核取方塊，然後輸入資料集的名稱；如果預存程序傳回資料集，請按一下「測試」按鈕查看預存程序所傳回的資料集。

    Dreamweaver 會執行預存程序，並顯示資料集 (如果有的話)。

    注意

    如果預存程序傳回資料集且需要參數，您必須在「變數」§r方塊的「預設值」欄中輸入值，才能測試預存程序。

    提示

    您可以使用不同的測試值，以產生不同的資料集。若要變更測試值，請按一下「參數」的「編輯」按鈕，然後變更測試值；或按一下「頁面參數」的「編輯」按鈕，然後變更預設值。
  8. 如果預存程序傳回狀態碼回傳值，請選取「傳回狀態碼名稱」核取方塊並輸入狀態碼的名稱。
  9. 按一下「確定」。

關閉「預存程序」對話方塊後，Dreamweaver 會在您的頁面中插入 ColdFusion 程式碼，這個程式碼在伺服器上執行時，將會呼叫資料庫中的預存程序。預存程序就會執行如插入記錄之類的資料庫作業。

相關主題

  • 預存程序
  • 使用預存程序修改資料庫 (ColdFusion)


設定預存程序變數的對話方塊選項

這個對話方塊是用來新增或編輯預存程序的參數。

若要設定對話方塊選項：

  1. 您正在編輯的變數名稱會出現在「名稱」文字方塊中。
  2. 從彈出式選單中選取方向。

    預存程序中可能有輸入值、輸出值，或兩者都有。

  3. 從彈出式選單中選取 SQL 類型。
  4. 輸入回傳變數。
  5. 輸入執行階段值。
  6. 輸入測試值。

相關主題

  • 設定 ColdFusion 預存程序的對話方塊選項
  • 使用預存程序修改資料庫 (ColdFusion)


設定檢查新使用者名稱的對話方塊選項

這個對話方塊是用來在使用者註冊頁面中加入伺服器行為，先檢查瀏覽者送出的使用者名稱是否為唯一名稱，再將瀏覽者加入已註冊使用者的資料庫中。

在開始之前，您必須先完成下列作業：

  • 將 HTML 表單加入註冊頁面，讓使用者選擇使用者名稱與密碼。如需相關說明，請參閱讓使用者選擇使用者名稱與密碼。
  • 在頁面中加入「插入記錄」伺服器行為，更新含有已註冊使用者登入資訊的資料庫。如需相關說明，請參閱更新資料庫中的使用者表格。

完成這些前置作業之後，就可以依下列方式完成對話方塊：

若要設定對話方塊選項：

  1. 在「使用者名稱欄位」彈出式選單中，選取瀏覽者要輸入使用者名稱的表單文字欄位。
  2. 在「如果已經存在，即前往」文字方塊中，指定如果在資料庫表格中找到相同的使用者名稱時，要開啟的頁面。

    這個頁面應該警告使用者，所輸入的使用者名稱已經有人使用，讓使用者再試一次。

  3. 按一下「確定」。

當使用者在註冊頁面上按下「送出」按鈕時，伺服器行為將會比較使用者輸入的使用者名稱與已註冊使用者儲存於資料庫表格中的使用者名稱。如果在資料庫表格中沒有找到相同的使用者名稱，則伺服器行為會繼續正常執行插入記錄的作業。如果找到相同的使用者名稱，則伺服器行為會取消插入記錄的作業，並且開啟新頁面 (通常是警告輸入的使用者名稱已有人使用的頁面)。

相關主題

  • 確定使用者選擇的名稱為唯一名稱
  • 建立註冊頁面


設定登入使用者的對話方塊選項

這個對話方塊是用來在登入頁面中加入伺服器行為，以確定瀏覽者輸入的使用者名稱與密碼有效。

在開始之前，您必須在登入頁面中加入 HTML 表單，讓使用者輸入使用者名稱與密碼。如需相關說明，請參閱讓使用者登入。這些前置作業完成之後，就可以依下列方式完成「登入使用者」對話方塊：

若要設定對話方塊選項：

  1. 指定瀏覽者輸入使用者名稱與密碼的表單與表單物件。
  2. 若是使用 ColdFusion，請輸入使用者名稱及密碼 (如果適用的話)。
  3. 指定資料庫表格與欄 (含有所有已註冊使用者的使用者名稱與密碼)。

    伺服器行為會將瀏覽者在登入頁面輸入的使用者名稱與密碼，與這些欄中的值比較。

  4. 指定在登入程序成功時要開啟的頁面。

    指定的頁面通常是網站的起始頁面。

  5. 指定在登入程序失敗時要開啟的頁面。

    這個指定的頁面通常會警告使用者登入程序失敗，讓使用者再試一次。

  6. 如果您希望嘗試存取限制頁面後被轉送到登入頁面的使用者，能在登入之後回到限制頁面，請選取「前往上一個 URL」選項。

    如果使用者嘗試不先登入就直接開啟限制頁面，則限制頁面可以將使用者轉送到登入頁面。在使用者成功登入之後，登入頁面會將使用者轉送回剛才將使用者轉送到登入頁面的限制頁面。

    在完成這些頁面的「限制存取頁面」伺服器行為對話方塊之後，請確定在「如果拒絕存取，即前往」文字方塊中指定您的登入頁面。如需詳細資訊，請參閱設定限制存取頁面的對話方塊選項。

  7. 指定要依據使用者名稱與密碼授與頁面存取權限，或是也要依據授權等級。

    如需詳細資訊，請參閱建立僅有獲得授權的使用者可存取的頁面。

  8. 按一下「確定」。

當使用者在登入頁面上按下「送出」按鈕時，「登入使用者」伺服器行為將會比較使用者輸入的值與已註冊使用者的值。如果值相同，伺服器行為會開啟單一頁面 (通常是網站的起始頁面)。如果值不相同，伺服器行為會開啟另一個頁面 (通常是警告使用者登入失敗的頁面)。

相關主題

  • 檢查使用者名稱與密碼
  • 建立登入頁面


設定限制存取頁面的對話方塊選項

這個對話方塊是用來在頁面中加入伺服器行為，只允許已獲得授權的使用者檢視頁面。

若要設定對話方塊選項：

  1. 如果您只要讓具有特定存取權限的使用者檢視頁面，請選取「使用者名稱、密碼和存取層級」選項，並指定頁面的授權層級。

    例如，您可以在授權層級清單中選取 Administrator，指定只有具有 Administrator 權限的使用者才能檢視頁面。

    若要在清單中新增授權層級，請按「定義」。在出現的「定義存取層級」清單中，輸入新的授權層級，並按一下加號 (+) 按鈕。Dreamweaver 會儲存層級，讓您不需要在每個頁面中都重新輸入。請確定您輸入的字串與使用者資料庫中的字串完全相同。

  2. 如果您要為頁面設定多個授權層級，按住 Ctrl 並按一下 (Windows) 或是按住 Command 並按一下 (Macintosh) 清單中的層級。

    例如，您可以指定所有具有 Guest、Member 或 Administrator 權限的使用者都可以檢視這個頁面。

  3. 指定未授權的使用者嘗試開啟保護頁面時要開啟的頁面。

    請確定您選擇的頁面本身不是保護頁面。

  4. 按一下「確定」。

Dreamweaver 會加入伺服器行為，在使用者嘗試直接在瀏覽器中輸入保護頁面的 URL 來跳過登入頁面時，或是使用者已經登入，但在沒有正確存取權限的情況下嘗試存取保護頁面時，伺服器行為會將使用者重新導向到另一個頁面。

相關主題

  • 將未授權的使用者重新導向另一個頁面
  • 建立僅有獲得授權的使用者可存取的頁面


設定定義存取層級的對話方塊選項

這個對話方塊是用來在「限制存取頁面」對話方塊的授權層級清單中，新增授權層級。

若要設定對話方塊選項：

  1. 在「名稱」文字方塊中，輸入新的授權層級。

    請確定您輸入的授權層級字串與使用者資料庫中的字串完全相同。例如，如果資料庫中的授權欄含有 Administrator 值，請在「名稱」文字方塊中輸入 Administrator，而非 Admin。

  2. 按一下加號 (+) 按鈕，將授權層級加入清單。
  3. 按一下「確定」返回「限制存取頁面」對話方塊。

Dreamweaver 會儲存新的授權層級，以便在其他頁面中使用。

相關主題

  • 設定限制存取頁面的對話方塊選項
  • 將未授權的使用者重新導向另一個頁面
  • 建立僅有獲得授權的使用者可存取的頁面


設定登出使用者的對話方塊選項

這個對話方塊是用來讓使用者登出，並清除使用者登入時產生的 Session 變數。

您可以設定在使用者按下連結或是載入特定頁面時，呼叫「登出使用者」伺服器行為。

若要設定對話方塊選項：

  1. 如果您選取了文字或影像做為登出連結，請指定使用者按下連結時要開啟的頁面。

    這個頁面通常是「再見」或「謝謝您」頁面。

  2. 如果您要在頁面載入時登出使用者，請選取「頁面載入時登出」選項。
  3. 按一下「確定」。

Dreamweaver 會將伺服器行為加入頁面。

相關主題

  • 登出使用者


設定 ColdFusion 登入精靈選項

這個對話方塊是用來設定密碼，以保護資料夾或伺服器上的網站。

若要設定精靈的選項：

  1. 指定您想要保護之資料夾的完整路徑，然後按一下「下一步」。
  2. 在下一個畫面中，選取下列其中一個驗證類型：
    • 簡單驗證讓所有的使用者都使用單一的使用者名稱和密碼，藉此保護您的應用程式。
    • Windows NT 驗證使用 NT 的使用者名稱和密碼，藉此保護您的應用程式。
    • LDAP 驗證使用儲存於 LDAP 伺服器中的使用者名稱和密碼，藉此保護您的應用程式。
  3. 請指定您希望使用者以 ColdFusion 登入頁面或者以彈出式選單來登入。
  4. 在下一個畫面中，指定下列設定值：
    • 如果選取簡單驗證，請指定每個瀏覽者都必須輸入的使用者名稱和密碼。
    • 如果選取 Windows NT 驗證，請指定 NT 網域做為驗證的根據。
    • 如果選取 LDAP 驗證，請指定 LDAP 伺服器做為驗證的根據。
  5. 按一下「下一步」，建立保護資料夾所需要的檔案。

    精靈會列出新檔案。

  6. 將新檔案上傳到您的遠端網站。

    該檔案放置於您的本機網站資料夾中。

相關主題

  • 保護應用程式中的資料夾 (ColdFusion)


設定建立組件的對話方塊選項

這個對話方塊是用來建立新的 ColdFusion 組件。

如需此對話方塊中各欄位可用值的詳細資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 (「說明＞使用 ColdFusion」)。

若要建立新的 ColdFusion 組件：

  1. 在「組件」區段中，輸入組件的詳細資料。

    請只使用字母、數字或底線等字元。

    「名稱」方塊會指定 .cfc 檔案名稱，輸入名稱時，請勿指定 .cfc 副檔名。

    「組件目錄」方塊是用來指定組件的儲存位置，選取網路應用程式的根資料夾 (例如，\Inetpub\wwwroot\myapp\) 或是任何子目錄。

  2. 如果您要為組件定義一個或多個函式，請從「區段」清單中選取「函式」，按一下加號 (+) 按鈕，然後輸入新函式的詳細資料。

    提示

    如果您在「存取」選單中選取了「遠端」，則該函式就會變成一個可用的網頁服務。

    在「傳回類型」方塊中，請務必指定函式傳回值的類型。

  3. 如果您要為函式定義一個或多個引數，請從「區段」清單中選取「引數」，再從彈出式選單中選取函式，按一下加號 (+) 按鈕，然後在右邊輸入新引數的詳細資料。
  4. 按一下「確定」，建立這個組件。
  5. 如果您所使用的是遠端開發伺服器，請將 CFC 檔案以及其他相關的檔案 (像是要用來實作函式或包含檔案的檔案) 上傳至遠端伺服器上。

    將這些檔案上傳，可以確保「即時資料」檢視、「在瀏覽器中預覽」等 Dreamweaver 功能可以正常運作。

相關主題

  • 以視覺化方式在 Dreamweaver 中建立組件
  • 關於 ColdFusion 組件


設定 CF 組件面板的選項

這個面板是用來檢視和編輯 ColdFusion 組件。此外，您也可以使用這個面板，在叫用組件函式的頁面中加入程式碼。

注意

只有當您在 Dreamweaver 中檢視 ColdFusion 頁面時，才能夠使用這個面板。

您可以使用這個對話方塊執行下列作業：

  • 在 Dreamweaver 中檢視 ColdFusion 組件
  • 在 Dreamweaver 中編輯 ColdFusion 組件
  • 建立使用 ColdFusion 組件的網頁

相關主題

  • 關於 ColdFusion 組件
  • 在 Dreamweaver 中檢視 ColdFusion 組件


設定 CFC 查詢的對話方塊選項

這個對話方塊是用來在 Dreamweaver 中，使用含有資料集定義的 ColdFusion 組件，將資料集定義為動態內容來源。

若要設定對話方塊選項：

  1. 在「名稱」文字方塊中，輸入 CFC 資料集的名稱。

    一般的作法是在資料集 (Recordset) 名稱中加上前置詞 rs，以便與程式碼中的其他物件名稱有所區隔。例如：rsPressRelease。

    資料集名稱只可以含有英文字母、數字以及底線字元 (_)，不可以使用特殊字元或空格。

  2. 從伺服器上已經完成定義的資料集當中選取套件。

    如果套件沒有出現在彈出式選單中，您可以按一下彈出式選單附近的「重新整理」按鈕，重新整理套件清單。

    首先請確認您已將 CFC 上傳到測試伺服器。只有位於測試伺服器上的 CFC 才會顯示在畫面中。

  3. 從目前所選取的套件中，選取已經完成定義的組件。

    如果「組件」彈出式選單中沒有出現任何組件，或者選單中沒有出現任何您先前所建立的組件，請先將 CFC 檔案上傳到測試伺服器中。

  4. 如果您想要建立新組件，請按一下「建立新組件」按鈕。

    「新的組件」對話方塊便會出現。如需詳細資訊，請參閱設定新的組件對話方塊選項。

  5. 從「函式」彈出式選單中選取含有資料集定義的函式。

    「函式」彈出式選單中僅包含在目前選取的組件中所定義的函式。如果彈出式選單中沒有出現任何函式，或者您最近所做的變更並沒有反映在目前列出的清單中，請檢查您最近所做的變更是否已經儲存，並已上傳至伺服器。

    注意

    「連線」及 SQL 文字方塊都屬於唯讀。
  6. 按一下「編輯」按鈕，編輯每一個必須以函式引數傳送的參數 (類型、值和預設值)。

    「編輯參數」對話方塊便會出現。如需詳細資訊，請參閱設定編輯參數的對話方塊選項。

    您無法修改資料庫連線和資料集的 SQL 查詢。這些欄位永遠呈停用狀態 只能顯示連線和 SQL 查詢供您參考。

  7. 按一下「測試」，連線至資料庫，並建立資料集的實體。

    如果 SQL 陳述式含有頁面參數，在按下「測試」之前，請確認參數方塊的「預設值」欄應包含有效的測試值。

    如果查詢執行成功，則會以表格將資料集顯示在畫面上。每一列含有一筆記錄，每一欄各代表該筆記錄中的一個欄位。

    按一下「確定」，清除 CFC 查詢。

  8. 按一下「確定」。

相關主題

  • 使用 CFC 資料集做為動態內容的來源


設定新的組件對話方塊選項

這個對話方塊是用來建立新的 ColdFusion 組件。

若要設定對話方塊選項：

  1. 在「名稱」文字方塊中，輸入新 CFC 的名稱。

    名稱只接受英數字元和底線 (_)。

  2. 在「組件目錄」文字方塊中，輸入存放 CFC 的位置。

    您也可以使用「瀏覽」按鈕，以便輕鬆地找到資料夾。

    注意

    該資料夾必須是網站根資料夾的相對路徑。

相關主題

  • 設定 CFC 查詢的對話方塊選項


設定編輯參數的對話方塊選項

這個對話方塊是用來編輯 SQL 陳述式的參數。

若要設定對話方塊選項：

  1. 從「值」彈出式選單中選取數值類型，輸入目前參數的值，並在右邊的文字方塊中輸入數值。

    數值類型可以是 URL 參數、表單變數、Cookie、工作階段變數、應用程式變數或輸入的值。

  2. 在「預設值」文字方塊中，輸入參數的預設值。

    如果沒有傳回任何執行階段值，則會使用預設的參數值。

  3. 按一下「確定」。

相關主題

  • 設定 CFC 查詢的對話方塊選項


快速建立 ASP.NET 應用程式

使用 Macromedia Dreamweaver 8 中的工具，幾乎不需要撰寫程式碼就可以迅速建立 ASP.NET 網路應用程式。

本章包含下列各節：

建立 ASP.NET 表單

建立 ASP.NET 資料格和資料清單網頁控制項

建立主要/細節頁面 (ASP.NET)

建立資料庫搜尋頁面 (ASP.NET)

建立記錄插入頁面 (ASP.NET)

建立用以更新記錄的頁面 (ASP.NET)

建立用以刪除記錄的頁面 (ASP.NET)

使用預存程序修改資料庫 (ASP.NET)

建立限制存取網站的頁面 (ASP.NET)

相關主題

  • 關於快速應用程式開發 (所有伺服器)


建立 ASP.NET 表單

您可以在 Dreamweaver 設計環境中建立 ASP.NET 表單，然後修改表單控制項的屬性，而不需手動撰寫程式碼。

本節包含下列主題：

  • 新增 ASP.NET 表單控制項至頁面
  • 設定 ASP.NET 表單控制項的屬性
  • 建立動態 ASP.NET 選單
  • 使 ASP.NET 選單呈現動態效果
  • 在 ASP.NET 文字方塊控制項中顯示動態內容
  • 動態預先選取 ASP.NET 核取方塊控制項
  • 動態預先選取 ASP.NET 選項按鈕清單中的項目

相關主題

  • 建立表單
  • 插入動態 HTML 表單物件


新增 ASP.NET 表單控制項至頁面

您可以使用 Dreamweaver 中的視覺設計環境，將 ASP.NET 表單控制項加入頁面。

若要將 ASP.NET 表單控制項新增到頁面：

  1. 在「設計」檢視 (「檢視＞設計」) 中開啟 ASP.NET 頁面。
  2. 將插入點放在頁面上您希望表單控制項出現的位置。

    您必須將表單控制項插入其標籤內擁有 runat='server' 屬性的表單內。如果頁面上沒有表單，在您插入第一個 ASP.NET 表單控制項時，Dreamweaver 會自動建立一個擁有 runat='server' 屬性的表單。如果頁面上有 HTML 表單，在您插入第一個表單控制項時，Dreamweaver 會自動將 runat='server' 屬性加入現有的表單標籤。

  3. 在「插入」列的 ASP.NET 類別中，選取表單控制項的圖示。
  4. 完成控制項的對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。如需各控制項之屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為：http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconaspsyntaxforwebcontrols.asp。

完成之後，Dreamweaver 便會在頁面上插入表單控制項。如有需要，請按一下頁面上的控制項，再變更「屬性」檢視窗中的任何屬性。

相關主題

  • 設定 ASP.NET 表單控制項的屬性


設定 ASP.NET 表單控制項的屬性

您可以在設計環境中修改 ASP.NET 表單控制項的屬性。

若要在設計環境中修改 ASP.NET 表單控制項的屬性：

  1. 在「設計」檢視中，選取頁面上的表單控制項。

    「屬性」檢視窗會顯示控制項的屬性。

  2. 在「屬性」檢視窗中，修改控制項的屬性。

    如需各控制項之屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為：
    http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconaspsyntaxforwebcontrols.asp。

  3. 若要設定更多屬性，按一下「屬性」檢視窗的「標籤編輯器」按鈕，然後在出現的標籤編輯器中設定屬性。

    標籤編輯器可以讓您設定更多的屬性，包括事件。


建立動態 ASP.NET 選單

您可以使用資料庫的項目，動態填入 ASP.NET 選單控制項，例如「下拉式清單」或「清單方塊」。

在開始之前，您必須定義該選單動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。

若要在 ASP.NET 頁面中插入動態選單：

  1. 開啟 ASP.NET 頁面，將插入點置於您要選單顯示的位置。
  2. 選取「插入＞ASP.NET 物件」，然後選取「asp: 下拉式清單」或「asp: 清單方塊」。

    表單控制項的對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需詳細資訊，請參閱下列主題：

    • 設定 asp: 下拉式清單的對話方塊選項
    • 設定 asp: 清單方塊的對話方塊選項

Dreamweaver 會在頁面中插入點的位置上，插入表單控制項。如果您沒有插入表單，Dreamweaver 便會插入包含 runat="server" 屬性的表單。

相關主題

  • 設定 ASP.NET 表單控制項的屬性
  • 使 ASP.NET 選單呈現動態效果


使 ASP.NET 選單呈現動態效果

您可以使現有的 ASP.NET 選單物件呈現動態效果。ASP.NET 選單物件包含「下拉式清單」和「清單方塊」控制項。

在開始之前，您必須定義該選單動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。

若要使現有的「下拉式清單」或「清單方塊」呈現動態效果：

  1. 在「設計」檢視中，選取您要呈現動態效果的「下拉式清單」或「清單方塊」物件。
  2. 在「屬性」檢視窗中，按一下「清單項目」按鈕。

    「清單項目」對話方塊便會出現。

  3. 選取「從資料庫」選項並完成該對話方塊。

    如需詳細資訊，請參閱設定清單項目的對話方塊選項。

相關主題

  • 建立動態 ASP.NET 選單
  • 使現有的 HTML 表單選單呈現動態效果


在 ASP.NET 文字方塊控制項中顯示動態內容

您可以在 ASP.NET 文字方塊表單控制項中顯示動態內容。

在開始之前，您必須定義該文字方塊動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。

若要使 ASP.NET 文字方塊呈現動態效果：

  1. 在「設計」檢視中的頁面上選取「文字方塊」。
  2. 在「屬性」檢視窗中，按一下「文字」文字方塊旁的閃電圖示。

    「動態資料」對話方塊便會顯示。

  3. 選取將提供值給「文字方塊」物件的資料集欄，然後按「確定」。

在瀏覽器中檢視頁面時，「文字方塊」控制項將會顯示動態內容。

相關主題

  • 在 HTML 文字欄位中顯示動態內容


動態預先選取 ASP.NET 核取方塊控制項

您可以讓伺服器決定在瀏覽器載入 ASP.NET 頁面時，是否要選取某個「核取方塊」控制項。

在開始之前，您必須定義核取方塊動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。理想的情況是，內容的來源應包含布林資料，例如「Yes/No」或「True/False」。

若要動態預先選取 ASP.NET 核取方塊：

  1. 在 ASP.NET 頁面上選取「核取方塊」表單控制項。
  2. 在「屬性」檢視窗中，選取「動態」選項。

    「動態核取方塊」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

在瀏覽器載入頁面時，核取方塊將視資料的不同顯示已選取或未選取。

相關主題

  • 動態式預先選取 HTML 核取方塊


動態預先選取 ASP.NET 選項按鈕清單中的項目

您可以讓伺服器決定在瀏覽器載入頁面時，是否要選取「選項按鈕清單」控制項中的選項按鈕。

在開始之前，您必須在頁面上插入至少一個「ASP.NET 選項按鈕清單」控制項。您也必須定義該選項按鈕動態內容的資料集或其他來源。如需詳細資訊，請參閱定義資料集。理想的情況是，內容的來源應包含布林資料，例如「Yes/No」或「True/False」。

若要動態預先選取「選項按鈕清單」中的選項按鈕：

  1. 在「設計」檢視中，選取「選項按鈕清單」控制項。
  2. 在「屬性」檢視窗中，按一下「清單項目」。

    「清單項目」對話方塊便會出現。

  3. 選取「從資料庫」選項並完成該對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

相關主題

  • 動態式預先選取 HTML 選項按鈕


建立 ASP.NET 資料格和資料清單網頁控制項

ASP.NET 的「資料格」和「資料清單」控制項提供了多種顯示不同資料類型 (尤其是資料庫中的動態內容) 的選項，同時也簡化了將資料來源繫結至控制項的作業過程。Dreamweaver 會將「資料格」和「資料清單」這兩種控制項當作伺服器行為來支援。

本節包含下列主題：

  • 關於 ASP.NET 的資料格和資料清單控制項
  • 在頁面中新增 ASP.NET 資料格
  • 在頁面中新增 ASP.NET 資料清單
  • 修改資料格或資料清單物件


關於 ASP.NET 的資料格和資料清單控制項

ASP.NET 的「資料格」和「資料清單」控制項提供了多種顯示不同資料類型 (尤其是資料庫中的動態內容) 的選項，同時也簡化了將資料來源繫結至控制項的作業過程。Dreamweaver 會將「資料格」和「資料清單」這兩種控制項當作伺服器行為來支援。這些控制項提供了下列功能：

資料格可用來建立多欄式的資料繫結格線欄位。這個控制項可讓您定義各種不同類型的欄，不僅可以設定格線的內容版面，並且加入特定的功能 (編輯按鈕欄、超連結欄等等)。

資料清單會使用樣版顯示資料來源中的項目。您可以修改樣版內容，改用不同的元件，來自訂控制項的外觀。

相關主題

  • 在頁面中新增 ASP.NET 資料格
  • 在頁面中新增 ASP.NET 資料清單
  • 修改資料格或資料清單物件

ASP.NET 資料格網頁控制項

您可以使用 Dreamweaver 的「資料格」來插入一個 ASP.NET 的資料格網頁控制項。「資料格」控制項會將表格顯示成多欄式的格線欄位，而且可以包含多種不同類型的欄 (異質性的欄)，用來定義儲存格內容的版面。一般常見的項目有繫結欄、按鈕欄和樣版欄等等。此外，「資料格」也支援互動式的功能，像是欄的排序、編輯和命令。「資料格」中可用的欄類型如下表中所示：

資料格欄類型 | 說明
簡單資料欄位 | 「簡單資料欄位」欄在 ASP.NET 中又稱為「繫結欄」，可讓您指定所要顯示的資料來源欄位，並為欄位指定搭配 .NET 格式化運算式使用的資料格式。
自由表單 | 「自由表單」欄類型在 ASP.NET 中又稱為「樣版欄」，可讓您建立 HTML 文字和伺服器控制項的組合，以設計欄的自訂版面。自由表單欄中的控制項可以是資料繫結的控制項。由於您可以完全控制資料的顯示方式，以及使用者在格線欄位中與列進行互動的結果，因此「自由表單」欄讓您在定義格線欄位內容的版面和功能時，有更大的彈性。
超連結 | 「超連結」欄會將資訊顯示成超文字連結。一般的用法是將資料 (如客戶編號或產品名稱) 顯示成超連結，使用者只要按一下連結，就可以導覽至提供項目相關詳細資料的另一個頁面。
編輯、更新、取消按鈕 | 「編輯、更新、取消按鈕」欄在 ASP.NET 中又稱為「編輯命令欄」，可讓使用者就地執行「資料格」列中的資訊編輯工作。若要執行這項工作，請建立「編輯、更新、取消」欄。在執行階段，這個欄會顯示一個標示有「編輯」的按鈕。當使用者按一下「編輯」按鈕時，便會將該列資料顯示成可編輯的控制項，例如文字方塊，並將「編輯」按鈕取代成「更新」和「取消」按鈕。
刪除按鈕 | 「刪除按鈕」可讓使用者按一下按鈕，來刪除某一特定列。

使用「資料格」伺服器行為之前，您必須先定義「資料格」的資料集 (DataSet) (在其他的文件類型中稱為資料集 (Recordset))。如需詳細資訊，請參閱了解資料集。

若要更深入瞭解資料格控制項，及其用來格式化動態資料的方式，請查閱 Microsoft 網站，網址為：http://msdn.microsoft.com/library/en-us/cpgenref/html/cpcondatagridwebservercontrol.asp。

相關主題

  • 關於 ASP.NET 的資料格和資料清單控制項
  • 在頁面中新增 ASP.NET 資料格
  • 在頁面中新增 ASP.NET 資料清單
  • 修改資料格或資料清單物件


在頁面中新增 ASP.NET 資料格

在資料格控制項的協助下，您將能對多欄式格線 (顯示為表格) 中的動態資料進行格式化及顯示的動作。如需資料格及其所提供控制項格式化類型的詳細資訊，請參閱關於 ASP.NET 的資料格和資料清單控制項。

注意

插入「資料格」伺服器行為之前，您必須先定義資料格的「資料集」(DataSet) (在其他的文件類型中稱為「資料集」(Recordset))。如需詳細資訊，請參閱了解資料集。

若要在頁面中加入「資料格」物件：

  1. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下加號 (+) 按鈕，然後選取「資料格」。

    「資料格」對話方塊便會出現。

  2. 完成「資料格」對話方塊並且按一下「確定」。

    如需完成「資料格」對話方塊的說明，請參閱設定 ASP.NET 資料格物件的對話方塊選項。

在「文件」視窗中，「資料格」會顯示成一個有灰色標籤外框包圍的區域。在「即時資料」視窗 (「檢視＞即時資料」) 中，灰色的外框會消失，並以指定的「資料格」來取代物件的預留位置。

相關主題

  • 關於 ASP.NET 的資料格和資料清單控制項
  • 在頁面中新增 ASP.NET 資料清單
  • 修改資料格或資料清單物件


在頁面中新增 ASP.NET 資料清單

Dreamweaver 的「資料清單」伺服器行為可讓您在頁面中插入 ASP.NET 的「資料清單」控制項。

注意

插入「資料清單」伺服器行為之前，您必須先定義資料清單的「資料集」(DataSet) (在其他的文件類型中稱為「資料集」(Recordset))。如需詳細資訊，請參閱了解資料集。

若要在頁面中加入「資料清單」物件：

  1. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下加號 (+) 按鈕，然後選取「資料清單」。

    「資料清單」對話方塊便會出現。

  2. 完成「資料清單」對話方塊並且按一下「確定」。

    如需完成「資料清單」對話方塊的說明，請參閱設定 ASP.NET 資料清單物件的對話方塊選項。

在「文件」視窗中，會將「資料清單」顯示成一個有灰色標籤外框包圍的區域。在「即時資料」視窗 (「檢視＞即時資料」) 中，灰色的外框會消失，並以指定的「資料清單」來取代物件的預留位置。

相關主題

  • 修改資料格或資料清單物件


修改資料格或資料清單物件

您可以隨時修改資料格和資料清單物件，以符合您的頁面設計需求。

若要修改資料格和資料清單物件：

  • 在「設計」檢視中，按一下「資料格」或「資料清單」左上角的圖示，切換至「編輯」模式；然後新增或修改所出現任何標籤區域的內容。

    注意

    您也可以將動態內容來源從「繫結」面板中拖曳至標籤區域中。
  • 在「設計」檢視中選取該物件，並使用「屬性」檢視窗變更其屬性。
  • 在「伺服器行為」面板中按兩下該物件，然後在所開啟的對話方塊中變更其屬性。
  • 在「程式碼」檢視中，選取頁面中的「資料格」或「資料清單」，然後使用其標籤對話方塊變更其屬性。


建立主要/細節頁面 (ASP.NET)

使用 Dreamweaver，您可以建立多套可以呈現兩個細節層級資訊的頁面：主要頁面會列出記錄，而細節頁面會顯示更多關於各筆記錄的詳細資料。本節說明如何建立這些類型的主要/細節頁面。

本節包含下列主題：

  • 建立主要頁面 (ASP.NET)
  • 開啟細節頁面，並傳送記錄 ID (ASP.NET)
  • 找出所要求的記錄，並顯示於細節頁面中 (ASP.NET)

相關主題

  • 增強動態網頁的功能


建立主要頁面 (ASP.NET)

本節說明如何建立列出資料庫記錄的主要頁面。利用 ASP.NET，您可以使用「資料格」在頁面上列出記錄。

在您開始之前，請確定已為網站定義資料庫連線。如需詳細資訊，請參閱ASP.NET 開發人員的資料庫連線。

若要建立主要頁面：

  1. 建立新的 ASP.NET 頁面。

    選取「檔案＞開新檔案＞動態」，選取 ASP.NET 頁面格式，然後按一下「建立」。Dreamweaver 中會開啟空白的 .aspx 頁面。

  2. 定義頁面的「資料集」。

    在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集 (查詢)」，完成對話方塊。如需詳細資訊，請按一下對話方塊中的「說明」按鈕。如果您想要撰寫自己的 SQL 陳述式，按一下「進階」按鈕開啟進階「資料集」對話方塊。

    確定「資料集」包含建立主要頁面所需要的所有表格欄。

    「資料集」也必須包括含有各記錄的唯一鍵的表格欄─也就是記錄 ID 欄。

    通常，主要頁面中的資料集會從資料庫表格中擷取少許的資料欄，而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄，提供更詳細的資訊。

    「資料集」可以由使用者在執行階段時定義。如需詳細資訊，請參閱建立資料庫搜尋頁面 (ASP.NET)。

  3. 在頁面上建立「資料格」。

    在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下「加號 (+)」按鈕，選取「資料格」，然後完成「資料格」對話方塊。如需詳細資訊，請按一下對話方塊中的「說明」按鈕。現在，接受「資料格」中各欄的「簡單資料欄位」的預設欄類型。在下一節中，您要將其中一欄的類型變更為「超連結」(請參閱開啟細節頁面，並傳送記錄 ID (ASP.NET))。

以下範例的對話方塊是要定義三欄的「資料格」。

建立主要/細節頁面的下一步是建立開啟細節頁面的連結，並傳送使用者所選取記錄的 ID。請參閱開啟細節頁面，並傳送記錄 ID (ASP.NET)。


開啟細節頁面，並傳送記錄 ID (ASP.NET)

在主要頁面中新增「資料格」之後 (請參閱建立主要頁面 (ASP.NET))，必須建立開啟細節頁面的連結，並傳送使用者所選取記錄的 ID。細節頁面將使用這個 ID 在資料庫中尋找所要求的記錄，然後加以顯示。

記錄 ID 是以 URL 參數傳送到細節頁面。如需詳細資訊，請參閱 URL 參數。

在「資料格」中，將「資料格」中的欄位轉換成超連結欄，設定它的屬性，這樣就可建立這些連結 (如本節所述)。

若要開啟細節頁，並將含有使用者點選記錄 ID 的 URL 參數傳送至細節頁面：

  1. 開啟您在前一節中建立的「資料格」對話方塊。

    若要開啟對話方塊，在「伺服器行為」面板 (「視窗＞伺服器行為」) 中按兩下「資料格」。

    「資料格」對話方塊便會開啟。

  2. 在「欄」方塊中，選取要套用連結的那一欄。

  3. 按一下「變更欄類型」按鈕，然後從彈出式選單中選取「超連結」。

    「超連結欄」對話方塊便會出現。

  4. 在「超連結文字」區域中，指定要顯示在超連結欄中的文字。

    如果您想要為「資料格」中的各列建立一般連結，例如「詳細資料」，請選取「靜態文字」選項，然後輸入連結的文字。在超連結欄中，「資料格」各列都會顯示相同的文字 (例如「詳細資料」)。

    如果要將連結新增到欄內顯示的資料中，請選取「資料欄位」選項，然後選取「資料集」中的資料欄位。資料欄位會提供超連結欄的連結文字。在下面範例中，「資料格」的各列將會顯示位置名稱。

  5. 在「連結網頁」區域中，建立超連結欄中的文字要套用的 URL。

    URL 不僅必須開啟細節頁面，還必須識別出顯示在該頁面上的唯一記錄。

    若要識別出顯示在細節頁面上的記錄，選取「資料欄位」選項，然後選取「資料集」中會識別出各記錄的欄位。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的。

  6. 在「連結網頁」區域的「格式字串」文字方塊中，按一下「瀏覽」按鈕，然後尋找並選取細節頁面。

    Dreamweaver 會建立連往細節頁面的 URL，它含有一個 URL 參數，能識別細節頁面應顯示的記錄。記下 URL 參數的名稱，因為稍後會在細節頁面中用到它。

    例如，如果選取 locationDetail.aspx 做為細節頁面，Dreamweaver 便會建立下列 URL：

    在這種情況下，Dreamweaver 會建立稱為 CODE 的 URL 參數。Dreamweaver 會複製資料欄位的名稱，但您不一定要使用該名稱。您可以將它改成更具描述性的名稱，例如 recordID，如下面範例中所示。

    {0} 元素是與資料欄位值對應的預留位置。執行頁面時，會將「資料集」的 CODE 欄位值插入「資料格」的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，因此在「資料格」的「坎培拉」列中會使用下列 URL：

    locationDetail.aspx?recordID=CBR
  7. 按一下「確定」，關閉「超連結」對話方塊；然後再按一下「確定」，關閉「資料格」對話方塊。

    Dreamweaver 會更新頁面上的「資料格」。

建立主要/細節頁面的下一步是修改細節頁面，讓它可以在資料庫中尋找所要求的記錄，然後顯示在頁面上。請參閱找出所要求的記錄，並顯示於細節頁面中 (ASP.NET)。


找出所要求的記錄，並顯示於細節頁面中 (ASP.NET)

在完成主要頁面 (請參閱開啟細節頁面，並傳送記錄 ID (ASP.NET)) 之後，必須在資料庫中尋找所要求的記錄，將其顯示在細節頁面中。此程序包含定義細節頁面上的「資料集」，以保留單一記錄主要頁面所要求的記錄─以及繫結「資料集」欄與頁面。

若要尋找所要求的記錄，並將該筆記錄顯示於細節頁面中：

  1. 切換至細節頁面。

    如果沒有頁面存在，請選取「檔案＞開新檔案＞動態」，選取 ASP.NET 頁面格式，然後按一下「建立」。Dreamweaver 中會開啟空白的 .aspx 頁面。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階的「資料集」對話方塊，按一下「簡單」切換為簡單的「資料集」對話方塊。

  3. 為「資料集」命名，然後選取連線與提供「資料集」的資料之資料庫表格。
  4. 在「欄」區域中，選取要包含在資料集中的表格欄。

    資料集可以和主要頁面中的資料集相同或不同，通常，細節頁面中的「資料集」會提供較多的資料欄，顯示較為詳細的資訊。

    如果是不同的「資料集」，請確定細節頁面上的「資料集」至少包含一個和主要頁面上的「資料集」共通的欄。共通的欄通常是記錄 ID 欄，但也可以是相關表格的結合欄位。

    若只想要將某些表格的資料欄納入資料集中，請按一下「選取」選項，然後在清單中按住 Control 並按一下 (Windows) 或 Command 並按一下 (Macintosh) 想要的資料欄，以將其選取。

  5. 依照下列方法完成「篩選器」區段，尋找和顯示主要頁面傳送的 URL 參數中所指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取「資料集」中含值與主要頁面所傳送的 URL 參數值相符的那一欄。

      例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。在前一節所討論的範例中，稱為 CODE 的「資料集」欄所含的值，和主要頁面所傳送的 URL 參數值相符。

    • 請在第一個選單旁的彈出式選單中，選取等號 (如果尚未選取)。
    • 在第三個彈出式選單中，選取「URL 參數」。

      主要頁面是使用 URL 參數將資訊傳送到細節頁面。

    • 在第四個方塊中，輸入主要頁面所傳送的 URL 參數名稱。

      例如，如果主要頁面所用來開啟細節頁面的 URL，含有字尾 locationDetail.aspx?recordID=CBR，則輸入 recordID。

    「資料集」對話方塊外觀應如下所示：

  6. 按一下「確定」。

    「資料集」會顯示於「繫結」面板中。

  7. 若要將資料集欄繫結至細節頁面，請選取「繫結」面板中的欄 (「視窗＞繫結」)，然後將它們拖曳到頁面中。

    如需詳細資訊，請參閱使文字成為動態。

ASP.NET 主要/細節頁面的設定已完成。

在建立主要/細節頁面之後，可以使用「伺服器行為」面板 (「視窗＞伺服器行為」) 修改各個建置組塊。


建立資料庫搜尋頁面 (ASP.NET)

您可以使用 Dreamweaver 建立搜尋資料庫的頁面，並在「資料格」中顯示結果。

本節描述建立資料庫搜尋頁面的步驟：

  • 新增搜尋控制項 (ASP.NET)
  • 只使用一個搜尋參數進行搜尋 (ASP.NET)
  • 使用多個搜尋參數進行搜尋 (ASP.NET)
  • 在資料格中顯示結果
  • 在頁面第一次載入時隱藏資料格
  • 建立細節頁面 (ASP.NET)


新增搜尋控制項 (ASP.NET)

通常，網站中的搜尋頁面會包含可讓使用者輸入搜尋參數的表單欄位。當使用者按一下按鈕時，便會顯示搜尋結果。

若要在頁面中新增搜尋表單：

  1. 開啟搜尋頁面，然後選取「插入＞表單＞表單」。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

    在表單的「屬性」檢視窗中，則應該選取 POST 做為表單的 Method 屬性。您不需為表單指定 Action 屬性。ASP.NET 頁面會傳回給自己，搜尋結果會顯示在相同的頁面上。

  2. 新增要讓使用者輸入搜尋參數的表單控制項 (「插入＞ASP.NET 物件」。

    您可以插入任何的 ASP.NET 表單控制項，包括「文字方塊」、「核取方塊」、「選項按鈕」、「清單方塊」或「下拉式清單」控制項。您可以視需要加入多個控制項，讓使用者讓縮小搜尋範圍。但是，要注意的是搜尋頁面上的搜尋參數數目愈多，也就代表著 SQL 陳述式會愈複雜。

    請針對各項控制項，確認您已指定了 ID 屬性，例如為「文字方塊」控制項指定 txtCity，而為「清單方塊」控制項指定 lbxCountry。

    如需詳細資訊，請參閱新增 ASP.NET 表單控制項至頁面。

  3. 在表單中新增 ASP.NET 按鈕 (「插入＞ASP.NET 物件＞asp: 按鈕」)。

    請確認已指定了按鈕的 ID 屬性，例如 btnSearch，以及按鈕標籤的文字，例如「搜尋」。

搜尋表單已完成。建立搜尋頁面的下一步是定義「資料集」，尋找並儲存搜尋結果。請參閱只使用一個搜尋參數進行搜尋 (ASP.NET)。


只使用一個搜尋參數進行搜尋 (ASP.NET)

當使用者按一下頁面的「搜尋」按鈕時，就會將搜尋參數傳送到伺服器。伺服器會處理要求、根據參數建立已篩選的「資料集」、填入「資料格」並將頁面傳回到瀏覽器。

在新增「資料格」之前，您必須定義尋找並儲存所有符合搜尋準則記錄的「資料集」。

若要建立保存搜尋結果的「資料集」：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集 (查詢）」。

    如果出現進階的對話方塊，請按下「簡單」按鈕開啟簡單對話方塊。

  2. 為「資料集」命名，然後選擇連線與包含了您要讓使用者搜尋的資料之資料庫表格。
  3. 在「欄」區域中，按一下「選取」選項，然後選取索引鍵欄 (通常是記錄 ID 欄) 以及資料欄 (含您希望在「資料格」中顯示的資料)。

現在先讓「資料集」對話方塊持開啟。接下來您會用它擷取傳送到伺服器的搜尋參數，然後建立「資料集」篩選器以排除與參數不符的記錄。

若要建立「資料集」篩選器：

  1. 在「篩選器」區域中的第一個彈出式選單中，選取表格中的欄來和搜尋頁面所傳送的搜尋參數進行比對。

    例如，如果搜尋頁面所傳送的值為城市名稱，請從表格中選取包含城市名稱的欄。

  2. 在第一個選單旁邊的彈出式選單中，選取等號 (系統應該會自動選取這個預設值)。

    以上的選擇表示使用者只會在已選取的表格欄中，搜尋和搜尋頁面指定條件完全相同的記錄。您可以使用限制較小的選項，例如「起始值」或「包含」。

  3. 從第三個彈出式選單中，選取「表單變數」。

    表單會使用 POST 方法，將參數傳送到伺服器。

  4. 在第四個文字方塊中，輸入將搜尋參數傳送到伺服器的表單控制項名稱。

    您可以按一下表單上的表單控制項選取它，然後查看「屬性」檢視窗中的控制項 ID，以取得名稱。

  5. 您可以按一下「測試」，輸入一個測試值，然後按一下「確定」，以連結到資料庫並建立一個「資料集」實體。

    測試值會模擬由搜尋頁面所傳回的值。按一下「確定」關閉「資料集」。

  6. 如果您對這個「資料集」感到滿意，請按一下「確定」。

在伺服器上執行時，Dreamweaver 會在網頁中插入程式碼，檢查資料庫表格中的各記錄。如果在記錄中發現有符合篩選條件的特定欄位，就會將該筆記錄包含在資料集中。這個程式碼便會建立一個只含有搜尋結果的資料集。

建立搜尋頁面的下一步是在「資料格」中顯示搜尋結果。請參閱在資料格中顯示結果。


使用多個搜尋參數進行搜尋 (ASP.NET)

如果搜尋頁面送出一個以上的搜尋參數到伺服器，則必須撰寫 SQL 查詢，並且要在 SQL 變數中使用這些搜尋參數。

注意

如果只有一個搜尋條件，則可以使用簡單的「資料集」對話方塊，定義「資料集」(請參閱
只使用一個搜尋參數進行搜尋 (ASP.NET))。

若要使用 SQL 搜尋資料庫中的記錄：

  1. 在 Dreamweaver 中開啟結果頁面，然後開啟「繫結」面板 (「視窗＞繫結」)，按一下「加號 (+)」按鈕，再從彈出式選單中選取「資料集」，建立一個新的「資料集」。
  2. 確認進階「資料集」對話方塊出現。

    如果顯示的是簡單對話方塊，請按一下「進階」按鈕切換成進階對話方塊。

  3. 輸入「資料集」的名稱，並選取連線。

    該連線應該是要連線到含有可讓使用者進行資料搜尋的資料庫。

  4. 在 SQL 文字區域中輸入 Select 陳述式。

    請確認陳述式納入的 Where 子句，其中使用了問號 (?) 作為搜尋參數的預留位置。下面範例含有兩個預留位置：

    SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION
FROM EMPLOYEE WHERE LASTNAME LIKE ?
AND DEPARTMENT LIKE ?

    如需有關 SQL 語法的說明，請參閱 SQL 入門。

  5. 按一下「參數」區域中的「加號 (+)」按鈕，然後輸入參數的名稱、類型和值，為預留位置提供搜尋參數值。

    參數列出的順序必須和它們在 SQL 陳述式中的順序相同。

    在「名稱」文字方塊中，輸入任何有效的參數名稱。這個名稱不能包含空格或特殊字元。

    在「類型」彈出式選單中，選擇資料類型。例如，如果參數將保留文字，請選擇 WChar。

    在「值」方塊中，輸入包含參數值的伺服器變數。例如，如果搜尋頁面上表單控制的名稱是 txtCity，則會建立名為 Request.Form (txtCity) 的伺服器變數，且其中會儲存一個值。

    您也可以輸入更完整的運算式，指定當伺服器變數不存在時的預設值。例如，如果搜尋 Microsoft Access 資料庫，可以使用 % 做為預設值。下面的運算式會檢查伺服器變數 Request.Form("txtCity") 是否存在。如果這個變數存在，(也就是說，它不等於無)，運算式便會傳回這個變數的值；如果它不存在，運算式傳回 % 的預設值。

    (IIf((Request.Form("txtCity") <> Nothing),
Request.Form("txtCity"), "")) + "%"

    如需詳細資訊，請參閱 Visual Basic 或 C# 語言參考。

  6. 您可以按一下「測試」，建立一個使用預設變數值的「資料集」實體。

    這些預設值會模擬由搜尋頁面傳回的值。按一下「確定」關閉「資料集」。

  7. 如果您對這個「資料集」感到滿意，請按一下「確定」。

    Dreamweaver 會在頁面中插入 SQL 查詢。

下一步是在「資料格」中顯示搜尋結果。請參閱在資料格中顯示結果。


在資料格中顯示結果

建立「資料集」(DataSet) 以保存搜尋結果之後 (請參閱只使用一個搜尋參數進行搜尋 (ASP.NET)或使用多個搜尋參數進行搜尋 (ASP.NET))，您可以使用「資料格」，在頁面上顯示資訊。

若要在「資料格」中顯示搜尋結果：

  1. 在搜尋頁面上，將插入點放在希望「資料格」出現的位置。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下「加號 (+)」按鈕，然後選取「資料格」。

    「資料格」對話方塊便會出現。

  3. 在 ID 文字方塊中，輸入「資料格」的名稱，例如 dgLocation。
  4. 在「資料集」彈出式選單中，選取定義要保存搜尋結果的「資料集」。
  5. 視需要完成對話方塊的其他部份。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

以下範例中的「資料格」對話方塊是要建立三欄十列的「資料格」，以及連到上一頁結果與下一頁結果的連結。

即使使用者尚未進行搜尋，「資料格」仍會在搜尋頁面第一次載入時出現。您可以在頁面第一次載入時隱藏「資料格」。請參閱在頁面第一次載入時隱藏資料格。


在頁面第一次載入時隱藏資料格

當搜尋頁面第一次載入時，您可以將要用來顯示搜尋結果的「資料格」隱藏起來。

若要在頁面第一次載入時隱藏「資料格」：

  1. 在「程式碼」檢視中開啟搜尋頁面 (「檢視＞程式碼」)。
  2. 在頁面頂端的 Register 指示詞後面，立刻輸入下面的程式碼組塊 (如果頁面語言是 Visual Basic)：
    <script runat="server">
Sub Page_Load()
   If Not IsPostBack Then
      dgName.Visible = false
   Else
      dgName.Visible = true
   End If
End Sub
</script>

    其中 dgName 是「資料格」的 ID。

    如果頁面語言是 C#，請輸入下面的程式碼：

    <script runat="server">
void Page_Load() {
   if (!IsPostBack) {
      dgName.Visible = false;
   } else {
      dgName.Visible = true;
   }
}
</script>
  3. 儲存頁面。


建立細節頁面 (ASP.NET)

搜尋頁面可以包括細節頁面，顯示更多「資料格」中所列特定記錄的資訊。在這種情況下，搜尋頁面會做為主要/細節頁面組中的主要頁面。如需詳細資訊，請參閱建立主要/細節頁面 (ASP.NET)。


建立記錄插入頁面 (ASP.NET)

您可以使用 Dreamweaver 來建立讓使用者在資料庫中插入新記錄的頁面，您所使用的方法對於 Dreamweaver 所支援的所有伺服器技術都是完全相同的。如需相關說明，請參閱建立記錄插入頁面 (所有伺服器)。


建立用以更新記錄的頁面 (ASP.NET)

應用程式中可以包含讓使用者更新資料庫表格中現有記錄的一組頁面。這些頁面通常是由搜尋頁面、結果頁面及更新頁面所組成的。搜尋及結果頁面讓使用者擷取記錄，更新頁面則讓使用者修改記錄。

本節說明建立更新記錄的頁面的步驟：

  • 搜尋要更新的記錄 (ASP.NET)
  • 開啟更新頁面與傳送記錄 ID (ASP.NET)
  • 擷取要更新的記錄 (ASP.NET)
  • 一次完成更新頁面 (ASP.NET)
  • 依組塊完成更新頁面 (ASP.NET)

相關主題

  • 建立記錄插入頁面 (所有伺服器)
  • 建立用以刪除記錄的頁面 (ASP.NET)


搜尋要更新的記錄 (ASP.NET)

使用者要更新記錄之前，必須先在資料庫中找到記錄。因此必須有一個搜尋頁面搭配更新頁面使用。使用者會從搜尋頁面上產生的結果「資料格」中選取要更新的記錄，當使用者按一下記錄時，更新頁面便會開啟，上面會以表單顯示記錄。

如需建立頁面以搜尋要更新之記錄的說明，請參閱建立資料庫搜尋頁面 (ASP.NET)。

在建立搜尋頁面之後，下一步就是在結果頁面上建立連結，按一下連結便會開啟更新頁面。請參閱開啟更新頁面與傳送記錄 ID (ASP.NET)。


開啟更新頁面與傳送記錄 ID (ASP.NET)

建立搜尋頁面 (請參閱搜尋要更新的記錄 (ASP.NET)) 之後，必須建立開啟更新頁面的連結，並傳送使用者所選取記錄的 ID。更新頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

記錄 ID 是以 URL 參數傳送到更新頁面。如需詳細資訊，請參閱 URL 參數。

本節假設您是依照建立資料庫搜尋頁面 (ASP.NET)中的說明操作，因此您的搜尋頁面會使用「資料格」來顯示記錄。

若要在搜尋頁面上建立連結，開啟更新頁面並傳送記錄 ID：

  1. 在 Dreamweaver 中開啟搜尋頁面。
  2. 按兩下列在「伺服器行為」面板 (「視窗＞伺服器行為」) 中的「資料格」物件。

    「資料格」對話方塊便會開啟。

  3. 在「欄」方塊中，選取要套用連結的那一欄。

  4. 按一下「變更欄類型」按鈕，然後從彈出式選單中選取「超連結」。

    「超連結欄」對話方塊便會出現。

  5. 在「超連結文字」區域中，指定要顯示在超連結欄中的文字。

    如果要建立一般連結，例如「資料格」中各列的「更新」，選取「靜態文字」選項，然後輸入連結文字。「資料格」中的各列在超連結欄中都會顯示相同的文字 (例如「更新」)。

    如果要將連結新增到欄內顯示的資料中，請選取「資料欄位」選項，然後選取「資料集」中的資料欄位。資料欄位會提供超連結欄的連結文字。在下面範例中，「資料格」的各列將會顯示位置名稱。

  6. 在「連結網頁」區域中，建立超連結欄中的文字要套用的 URL。

    URL 不僅必須開啟更新頁面，還必須識別出顯示在該頁面上的唯一記錄。

    若要識別出顯示在更新頁面上的記錄，選取「資料欄位」選項，然後選取「資料集」中會識別出各記錄的欄位。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的。

  7. 在「連結網頁」區域的「格式字串」文字方塊中，按一下「瀏覽」按鈕，然後尋找並選取更新頁面。

    Dreamweaver 會建立連往更新頁面的 URL，它含有一個 URL 參數，能識別更新頁面應顯示的記錄。記下 URL 參數的名稱，因為稍後會在更新頁面中用到它。

    例如，如果您選取 locationUpdate.aspx 做為更新頁面，Dreamweaver 便會建立下列 URL，將它顯示在「格式字串」文字方塊中：

    locationUpdate.aspx?CODE={0}

    在這種情況下，Dreamweaver 會建立稱為 CODE 的 URL 參數。Dreamweaver 會複製資料欄位的名稱，但您不一定要使用該名稱。您可以在「格式字串」文字方塊中，將它改成更能形容的名稱，例如 recordID (如下面範例中所示)：

    locationUpdate.aspx?recordID={0}

    {0} 元素是與資料欄位值對應的預留位置。當頁面執行時，「資料集」的 CODE 欄位值就會插入「資料格」的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，因此在「資料格」的「坎培拉」列中會使用下列 URL：

    locationUpdate.aspx?recordID=CBR
  8. 按一下「確定」，關閉「超連結」對話方塊；然後再按一下「確定」，關閉「資料格」對話方塊。

Dreamweaver 會更新頁面上的「資料格」。

在建立開啟更新頁面並傳送使用者所選取的記錄 ID 連結之後，更新頁面必須擷取要更新的記錄。請參閱擷取要更新的記錄 (ASP.NET)。


擷取要更新的記錄 (ASP.NET)

在搜尋頁面將 URL 參數傳送至更新頁面 (請參閱開啟更新頁面與傳送記錄 ID (ASP.NET)) 之後，更新頁面必須讀取參數、從資料庫表格擷取記錄，然後將記錄暫存於「資料集」之中。

若要擷取要更新的記錄：

  1. 在 Dreamweaver 中建立新的 ASP.NET 頁面，並將其儲存。

    此頁面將會成為更新頁面。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集 (查詢）」。

    如果出現進階的對話方塊，請按下「簡單」按鈕開啟簡單對話方塊。

  3. 為「資料集」命名，然後選擇連線與包含了您要讓使用者更新的資料之資料庫表格。
  4. 按下「已選取」選項並選取索引鍵欄位 (通常是記錄 ID 欄位) 以及包含要更新資料的欄位。
  5. 設定「篩選器」區域，讓索引鍵欄的值等於搜尋頁面傳送的對應 URL 參數值。

    這類型的篩選器會建立僅包含一筆記錄 (擁有符合 URL 參數值的 ID) 的「資料集」。例如，如果索引鍵資料欄中包含了名為 CODE 的記錄 ID 資訊，而且如果搜尋頁面傳送了名為 recordID 的 URL 參數中之對應記錄 ID，則「篩選器」區域將會顯示如下：

  6. 按一下「確定」。

當使用者在搜尋頁面中選取記錄時，更新頁面會產生僅包含選取記錄的「資料集」。

修改了更新頁面以從資料庫擷取資料並將其儲存在「資料集」之後，您必須新增表單，以供使用者修改這筆記錄資料。同時，您也必須新增更新資料庫所需要的邏輯。您可以一次或依組塊完成這些工作。請參閱一次完成更新頁面 (ASP.NET) 或依組塊完成更新頁面 (ASP.NET)。


一次完成更新頁面 (ASP.NET)

更新頁面中有三個建置組塊：

  • 可從資料庫表格中擷取記錄並已篩選過的「資料集」(請參閱擷取要更新的記錄 (ASP.NET))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以使用「記錄更新表單」應用程式物件，一次加入更新頁面的最後兩個建置組塊。這個應用程式物件會在頁面中加入 HTML 表單以及「更新記錄」伺服器行為。

在使用應用程式物件之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (ASP.NET)、開啟更新頁面與傳送記錄 ID (ASP.NET) 和擷取要更新的記錄 (ASP.NET)。

應用程式物件在頁面中加入建置組塊之後，您就可以使用 Dreamerweaver 設計工具自訂您要的表單，或使用「伺服器行為」面板編輯「更新記錄」伺服器行為。

注意

更新頁面中一次只能存在一種編輯記錄的伺服器行為。例如，您無法在更新頁面中新增「插入記錄」或「刪除記錄」伺服器行為。

若要使用「記錄更新表單」應用程式物件建立更新頁面：

  1. 在「設計」檢視中開啟頁面，然後選擇「插入＞應用程式物件＞更新記錄＞記錄更新表單精靈」。

    「記錄更新表單」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定記錄更新表單的對話方塊選項 (ASP.NET)。

  3. 按一下「確定」。

應用程式物件會在頁面中新增 HTML 表單與「更新記錄」伺服器行為。表單物件會先放置在基本的表格中，您可以使用 Dreamweaver 頁面設計工具自訂表格物件 (請確定所有表單物件都放置在表單的邊界內)。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 依組塊完成更新頁面 (ASP.NET)


依組塊完成更新頁面 (ASP.NET)

更新頁面中有三個建置組塊：

  • 可從資料庫表格中擷取記錄並已篩選過的「資料集」(請參閱擷取要更新的記錄 (ASP.NET))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以分別使用表單工具與「伺服器行為」面板，在更新頁面中加入最後兩個基本的建置組塊。

在加入建置組塊之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (ASP.NET)、開啟更新頁面與傳送記錄 ID (ASP.NET) 和擷取要更新的記錄 (ASP.NET)。

完成更新頁面的步驟包含了三個工作：

  • 在頁面中新增 HTML 表單，讓使用者可以修改資料
  • 藉由將表單物件與資料庫表格資料欄繫結的方式，顯示表單中的記錄
  • 在使用者修改記錄後，加入「更新記錄」伺服器行為，以更新資料庫表格

若要在更新頁面中加入 HTML 表單：

  1. 建立新的 ASP.NET 頁面。

    以作為您的更新頁面。

  2. 使用 Dreamweaver 設計工具配置頁面。
  3. 在您希望表單出現的地方放置插入點，並在「插入」選單中選取「表單」，以新增 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  4. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「更新記錄」伺服器行為會為您設定這些屬性。

  5. 在資料庫表格中每一個要更新的資料欄中，加入表單物件。以文字欄位為例，即為「插入＞表單＞文字欄位」。

    表單物件可讓使用者修改資料。通常用來輸入資料的是文字欄位，但您也可以使用清單/選單、核取方塊或是選項按鈕。

    每一個表單物件都應有一個對應欄 (在之前定義的「記錄集」中)。唯一的例外是唯一索引鍵欄，這個欄位沒有對應的表單物件。

    如需表單物件的詳細資訊，請參閱插入 HTML 表單物件。

  6. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕以開啟「屬性」檢視窗 (「視窗＞屬性」)，並在「標籤」文字方塊中輸入新的值。

若要在表單中顯示記錄：

  1. 確定定義了「資料集」，儲存使用者要更新的記錄。

    如需詳細資訊，請參閱擷取要更新的記錄 (ASP.NET)。

  2. 繫結各表單物件與資料集中的資料。

    如需詳細資訊，請參閱下列各節：

    • 在 HTML 文字欄位中顯示動態內容
    • 動態式預先選取 HTML 核取方塊
    • 動態式預先選取 HTML 選項按鈕
    • 建立動態 HTML 表單選單
    • 使現有的 HTML 表單選單呈現動態效果

若要加入更新資料庫表格的伺服器行為：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，從彈出式選單中選取「更新記錄」。

    「更新記錄」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定更新記錄的對話方塊選項 (ASP.NET)。

  3. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，更新資料庫中的記錄。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 一次完成更新頁面 (ASP.NET)


建立用以刪除記錄的頁面 (ASP.NET)

應用程式中可以包含一組讓使用者刪除資料庫記錄的頁面。這些頁面通常是由搜尋頁面及刪除頁面所組成的。搜尋頁面可讓使用者擷取記錄，刪除頁面則能讓使用者刪除記錄。

本節描述建立刪除記錄的 ASP.NET 頁面的步驟：

  • 搜尋要刪除的記錄 (ASP.NET)
  • 在搜尋頁面上建立刪除連結 (ASP.NET)
  • 在確認頁面上顯示記錄 (ASP.NET)
  • 新增刪除記錄的邏輯 (ASP.NET)


搜尋要刪除的記錄 (ASP.NET)

使用者要刪除記錄之前，必須先在資料庫中找到該記錄。因此必須有一個搜尋頁面搭配刪除頁面使用。使用者在搜尋頁面中輸入搜尋準則，然後從「資料格」中顯示的搜尋結果中選取記錄。當使用者按一下記錄時，刪除頁面便會開啟，上面會以 HTML 表單顯示記錄。

如需建立頁面以搜尋要刪除之記錄的說明，請參閱建立資料庫搜尋頁面 (ASP.NET)。

在建立搜尋頁面之後，下一步就是在搜尋頁面上新增刪除按鈕或是連往「資料格」的超連結。請參閱在搜尋頁面上建立刪除連結 (ASP.NET)。


在搜尋頁面上建立刪除連結 (ASP.NET)

使用「資料格」建立搜尋頁面之後 (請參閱搜尋要刪除的記錄 (ASP.NET))，必須建立連結，以開啟刪除確認頁面，並傳送使用者所選取記錄的 ID。確認頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

記錄 ID 是以 URL 參數傳送到確認頁面。如需詳細資訊，請參閱 URL 參數。

在「資料格」中，新增超連結欄，設定它的屬性，這樣就可以建立這些連結 (如本節所述)。

若要在搜尋頁面的「資料格」中建立刪除連結：

  1. 開啟您在前一節中建立的「資料格」對話方塊。

    若要開啟對話方塊，請在「伺服器行為」面板中連按兩下「資料格」。當您按「加號 (+)」按鈕時，請確定是連按兩下面板中所列出的「資料格」，而非在彈出示選單中顯示的「資料格」物件。

    「資料格」對話方塊便會開啟。

  2. 按一下「加號 (+)」按鈕並選取「超連結」，新增刪除連結的欄。
  3. 在「標題」文字方塊中，輸入欄的標題，例如「刪除」。

    標題會出現在欄標題中。

  4. 選取「靜態文字」選項，然後輸入連結的文字，例如刪除記錄。

    「資料格」中的各列在超連結欄中都會顯示相同的文字。

    「資料格」對話方塊外觀應如下所示：

  5. 在「連結網頁」區域中，建立超連結欄中的文字要套用的 URL。

    URL 不僅必須開啟確認頁面，還必須識別出顯示在該頁面上的唯一記錄。

    若要識別出顯示在確認頁面上的記錄，選取「資料欄位」選項，然後選取「資料集」中會識別出各記錄的欄位。大部份情況下，欄位會由記錄 ID 編號所構成。

  6. 在「連結網頁」區域的「格式字串」文字方塊中，按一下「瀏覽」按鈕，然後尋找並選取確認頁面。

    Dreamweaver 會建立連往確認頁面的 URL，它含有一個 URL 參數，能識別確認頁面應顯示的記錄。請記下 URL 參數的名稱，因為稍後會在確認頁面中用到它。

    例如，如果選取 locationDelete.aspx 做為細節頁面，並選取了 CODE 做為「資料集」中會個別識別出各記錄的欄位，Dreamweaver 便會建立下列 URL。

    在這種情況下，Dreamweaver 會建立稱為 CODE 的 URL 參數。Dreamweaver 會複製資料欄位的名稱，但您不一定要使用該名稱。您可以將它改成更具描述性的名稱，例如 recordID，如下面範例中所示。

    locationDelete.aspx?recordID={0}

    {0} 元素是與資料欄位值對應的預留位置。執行頁面時，會將「資料集」的 CODE 欄位值插入「資料格」的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，因此在「資料格」的「坎培拉」列中會使用下列 URL：

    locationDelete.aspx?recordID=CBR
  7. 按一下「確定」，關閉「超連結」對話方塊；然後再按一下「確定」，關閉「資料格」對話方塊。

    Dreamweaver 會更新頁面上的「資料格」。以下是在搜尋所有以字母 c 開頭的城市之後，在瀏覽器中看到的「資料格」。

在建立刪除連結之後，下一步就是在確認頁面上顯示記錄。請參閱在確認頁面上顯示記錄 (ASP.NET)。


在確認頁面上顯示記錄 (ASP.NET)

在完成列出記錄的頁面 (請參閱在搜尋頁面上建立刪除連結 (ASP.NET)) 之後，切換到刪除確認頁面。確認頁面中會顯示記錄，並詢問使用者是否確定要刪除該記錄。當使用者按一下表單按鈕，確認作業後，網路應用程式就會從資料庫中刪除記錄。

建立包含下列工作的頁面：

  • 建立有按鈕可點選以便確認刪除的 HTML 表單
  • 擷取要顯示在頁面上的記錄
  • 在頁面上顯示記錄

擷取及顯示記錄包含定義「資料集」，以保留單一記錄 使用者想要刪除的記錄─以及繫結「資料集」欄與頁面。詳細步驟如下所述。

若要建立確認刪除的 HTML 表單：

  1. 建立新的 ASP.NET 頁面，將它儲存成前一節中所指定的確認頁面。

    您在前一節中建立「刪除」連結時，指定了確認頁面。第一次儲存檔案時，請使用這個名稱 (例如，locationDelete.aspx)。

  2. 在頁面上插入 HTML 表單 (「插入＞表單＞表單」)。
  3. 在表單中新增隱藏表單欄位。

    如果要儲存 URL 參數所傳送的記錄 ID，就需要隱藏表單欄位。若要新增隱藏欄位，請將插入點放在表單中，然後選取「插入＞表單＞隱藏欄位」。

  4. 新增按鈕至表單中。

    使用者會按一下按鈕確認，然後刪除顯示的記錄。若要新增按鈕，請將插入點放在表單中，然後選取「插入＞表單＞按鈕」。

  5. 視需要增強頁面的設計，然後儲存它。

若要擷取使用者想要刪除的記錄：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階的「資料集」對話方塊，按一下「簡單」切換為簡單的「資料集」對話方塊。

  2. 為「資料集」命名，然後選取含有可顯示記錄的資料庫表格。
  3. 在「欄」區域中，選取您想要在頁面上顯示的表格欄 (記錄欄位)。

    若只想要顯示部份的記錄欄位，請按一下「選取」，再從清單中按住 Control 並按一下 (Windows) 或 Command 並按一下 (Macintosh) 想要的資料欄，以將其選取。

    即使您不想顯示記錄 ID 欄位，也要確定這個欄位包含在內。

  4. 依照下列方法完成「篩選器」區段，尋找和顯示搜尋頁面傳送的 URL 參數中所指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取「資料集」中的欄，這一欄包含的值必須與含「刪除」連結的頁面所傳送的 URL 參數值相符。例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。在前一節討論的範例中，稱為 CODE 的「資料集」欄所含的值，與含「刪除」連結的頁面所傳送的 URL 參數值相符。
    • 在第一個選單旁的彈出式選單中，選取等號 (如果尚未選取)。
    • 在第三個彈出式選單中，選取「URL 參數」。有「刪除」連結的頁面是使用 URL 參數將資訊傳送到確認頁面。
    • 在第四個方塊中，輸入含「刪除」連結的頁面所傳送的 URL 參數名稱。

      例如，如果用來開啟確認頁面的 URL 包括字尾 locationDelete.aspx?recordID=CBR，則輸入 recordID。

      「資料集」對話方塊外觀應如下所示：

  5. 按一下「確定」。

「資料集」會顯示於「繫結」面板中。

若要顯示使用者想要刪除的記錄：

  1. 選取「繫結」面板中的「資料集」欄 (記錄欄位)，然後拖曳到確認頁面。

    請確認此唯讀的動態內容都插入於表單的邊界之內。如需在頁面中插入動態內容的詳細資訊，請參閱使文字成為動態。

    接下來，您必須繫結記錄 ID 欄和隱藏表單欄位。

  2. 確定已開啟「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，然後按一下代表隱藏表單欄位的黃色盾形圖示。

    隱藏表單欄位已選取。

  3. 在「屬性」檢視窗中，按一下「值」文字方塊旁的閃電圖示。

    「動態資料」對話方塊便會顯示。

  4. 在「動態文字」對話方塊中，選擇「資料集」中的記錄 ID 欄，然後按一下「確定」。

    在以下範例中，所選取的記錄 ID 欄是 CODE。

  5. 儲存頁面。

    完成的確認頁面外觀應如下所示。

在建立確認頁面之後，下一步就是新增刪除記錄的邏輯。請參閱新增刪除記錄的邏輯 (ASP.NET)。


新增刪除記錄的邏輯 (ASP.NET)

在建立確認頁面 (參閱在確認頁面上顯示記錄 (ASP.NET)) 之後，下一步就是在頁面中新增邏輯，在使用者按下「確認」按鈕時，刪除資料庫中的記錄。您可以利用「刪除記錄」伺服器行為，輕鬆快速地在 Dreamweaver 中新增此邏輯。

若要新增邏輯，刪除 HTML 表單中所顯示的記錄：

  1. 請確定已在 Dreamweaver 中開啟確認頁面。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，然後選取「刪除記錄」。

    「刪除記錄」對話方塊便會出現。

  3. 在「先檢查是否定義了變數為」文字方塊中，確定已選取「主索引鍵值」。

    稍後在對話方塊中指定主索引鍵值。

  4. 在「連線」彈出式選單中選取資料庫的連線，便可以透過該頁面找到資料庫並連結到這個資料庫。
  5. 在「表格」彈出式選單中，選取含有將要刪除記錄的資料庫表格。
  6. 在「主索引鍵欄位」彈出式選單中，選取含有記錄 ID 的表格欄。

    「刪除記錄」伺服器行為將會在此欄中搜尋相符的結果。此欄中包含的記錄 ID 資料，應與您繫結到頁面中的隱藏表單欄位的「資料集」欄相同。

  7. 在「將主索引鍵送出為」彈出式選單中，選擇您的主索引鍵欄位的資料類型。
  8. 在「主索引鍵值」彈出式選單中，在頁面上選取含有識別要刪除記錄的記錄 ID 變數。

    變數是由隱藏表單欄位所建立的。它的名稱和隱藏欄位的名稱屬性的一樣，不是表單就是 URL 參數，視表單的方法屬性而定。在我們的範例中，變數是稱為 hiddenID 的 URL 參數。

  9. 在「如果成功，請前往」文字方塊中，指定從資料庫表格中刪除記錄之後，要開啟的頁面。

    您可以指定含有給使用者的簡短成功訊息的頁面，或是列出剩餘記錄的頁面，讓使用者可以確認記錄已經刪除。

  10. 您可視需要選取「失敗時顯示除錯資訊」選項。

    除錯資訊將由伺服器產生。

  11. 如果您想要提供自訂的錯誤訊息，請取消選取「失敗時顯示除錯資訊」選項，然後在「如果失敗，請前往」文字方塊中指定要開啟的頁面。

    完成的「刪除記錄」對話方塊外觀應如下所示。

  12. 按一下「確定」儲存工作。

將頁面上傳到您的網站伺服器 (如有需要)，開啟瀏覽器，然後搜尋要刪除的記錄。當您按一下結果頁面上的「刪除」連結時，確認頁面便會出現。按一下表單按鈕，從資料庫中刪除記錄。若要確認記錄已經刪除，可以再次搜尋該記錄。


使用預存程序修改資料庫 (ASP.NET)

您可以使用預存程序修改資料庫。預存程序是能在資料庫執行某種作業，且可重複使用的資料庫項目。

注意

Microsoft Access 及 MySQL 資料庫不支援預存程序。

在使用預存程序修改資料庫之前，請先確定預存程序含有可以修改資料庫的 SQL。若要在資料庫中建立並儲存預存程序，請查詢資料庫的說明文件或是完整的 Transact-SQL 手冊。

若要在 ASP.NET 頁面中加入預存程序：

  1. 在 Dreamweaver 中開啟要執行預存程序的頁面。
  2. 在「繫結」面板 (「視窗＞繫結」) 中按一下「加號 (+)」按鈕，選取「預存程序」。

    「預存程序」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請參閱設定預存程序的對話方塊選項 (ASP.NET)。

  4. 按一下「確定」。

關閉對話方塊之後，Dreamweaver 會在頁面中插入 ASP.NET 程式碼，這個程式碼在伺服器上執行時，會在資料庫中執行預存程序。之後預存程序就會執行如插入記錄或是執行查詢之類的資料庫作業。

如果預存程序需要參數，您可以建立收集所需參數值的頁面，再將參數送至含有預存程序的頁面。例如，您可以建立頁面，並使用 URL 參數或 HTML 表單向使用者取得參數值。

相關主題

  • 預存程序


建立限制存取網站的頁面 (ASP.NET)

您可以使用 Dreamweaver 建立一組限制存取網站的頁面。Dreamweaver 並沒有 ASP.NET 網頁的驗證伺服器行為指令。但是，因為 ASP 和 ASP.NET 網頁可以在相同的網站上執行，因此您可以使用 ASP 驗證伺服器行為指令。您用於建立這些網頁的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)。


參考

本節將說明這一章中所介紹的下列對話方塊與檢視窗：

  • 設定 asp: 按鈕的對話方塊選項
  • 設定 asp: 核取方塊對話方塊選項
  • 設定 asp: 影像按鈕的對話方塊選項
  • 設定 asp: 標籤的對話方塊選項
  • 設定 asp: 選項按鈕的對話方塊選項
  • 設定 asp: 文字方塊對話方塊選項
  • 設定 asp: 核取方塊清單的對話方塊選項
  • 設定 asp: 下拉式清單的對話方塊選項
  • 設定 asp: 清單方塊的對話方塊選項
  • 設定 asp: 選項按鈕清單的對話方塊選項
  • 設定按鈕屬性 (ASP.NET)
  • 設定核取方塊屬性 (ASP.NET)
  • 設定影像按鈕屬性 (ASP.NET)
  • 設定標籤屬性 (ASP.NET)
  • 設定選項按鈕屬性 (ASP.NET)
  • 設定文字方塊屬性 (ASP.NET)
  • 設定核取方塊清單屬性 (ASP.NET)
  • 設定下拉式清單屬性 (ASP.NET)
  • 設定清單方塊屬性 (ASP.NET)
  • 設定選項按鈕清單屬性 (ASP.NET)
  • 設定清單項目的對話方塊選項
  • 設定 ASP.NET 資料格物件的對話方塊選項
  • 設定簡單資料欄位的對話方塊選項
  • 設定自由表單的對話方塊選項
  • 設定超連結欄的對話方塊選項
  • 設定編輯、更新、取消按鈕的對話方塊選項
  • 設定刪除按鈕的對話方塊選項
  • 設定 ASP.NET 資料清單物件的對話方塊選項
  • 設定新增資料欄位的對話方塊選項
  • 設定 ASP.NET 資料格屬性檢視窗選項
  • 設定 ASP.NET 資料清單屬性檢視窗選項
  • 設定記錄更新表單的對話方塊選項 (ASP.NET)
  • 設定更新記錄的對話方塊選項 (ASP.NET)
  • 設定刪除記錄的對話方塊選項 (ASP.NET)
  • 設定預存程序的對話方塊選項 (ASP.NET)
  • 設定編輯預存程序變數的對話方塊選項 (ASP.NET)
  • 設定建立值的對話方塊選項 (ASP.NET)


設定 asp: 按鈕的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

如需關於 ASP.NET 按鈕屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconbuttonwebcontrol.asp。


設定 asp: 核取方塊對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

如需關於 ASP.NET 核取方塊屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconcheckboxwebservercontrol.asp。


設定 asp: 影像按鈕的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

如需關於 ASP.NET 影像按鈕屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconimagebuttonwebcontrol.asp。


設定 asp: 標籤的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

如需關於 ASP.NET 標籤屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconlabelwebservercontrol.asp。


設定 asp: 選項按鈕的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

如需關於 ASP.NET 選項按鈕屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconradiobuttonwebservercontrol.asp。


設定 asp: 文字方塊對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

如需關於 ASP.NET 文字方塊屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpcontextboxwebservercontrol.asp。


設定 asp: 核取方塊清單的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

若要填寫「asp：核取方塊清單」對話方塊：

  1. 在「編號」文字方塊中，輸入要給表單控制項的名稱。

    編號是必要的。

  2. 請指定下列其中一項選項：

    工具提示指定當滑鼠指標停留在瀏覽器的表單控制項之上時所顯示的文字。

    資料集指定要用來填入清單控制項之項目的資料來源。如果您沒有指定資料集，您可以稍後再指定，或是按一下「屬性」檢視窗中的「清單項目」按鈕，以靜態方式設定清單項目。

    標籤來源指定所選取資料集中的欄位，以提供清單項目的標籤。

    數值來源指定所選取資料集中的欄位，以提供清單項目的值。

    存取鍵會建立鍵盤快速鍵，讓使用者在瀏覽器中能快速導覽到表單控制項。例如，如果您輸入 K，使用者就可以輸入 Alt + K，導覽到控制項。存取鍵只能由單一字元組成。

    自動回傳指出當使用者變更清單選項時，是否會自動發生回傳到伺服器。請選取選項以允許回傳。

  3. 按一下「確定」。

如需關於 ASP.NET 核取方塊清單屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconcheckboxlistwebservercontrol.asp。


設定 asp: 下拉式清單的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

若要完成「asp：下拉式清單」對話方塊：

  1. 在「編號」文字方塊中，輸入要給表單控制項的名稱。

    編號是必要的。

  2. 請指定下列其中一項選項：

    資料集指定要用來填入清單控制項之項目的資料來源。如果您沒有指定資料集，您可以稍後再指定，或是按一下「屬性」檢視窗中的「清單項目」按鈕，以靜態方式設定清單項目。

    標籤來源指定所選取資料集中的欄位，以提供清單項目的標籤。

    數值來源指定所選取資料集中的欄位，以提供清單項目的值。

    選取的值等於指定當瀏覽器中顯示「下拉式清單」時，伺服器用來決定所要選取之清單項目的值。伺服器會比較各項目的值與指定的值。如果值相符，便會選取相符的項目。

    存取鍵會建立鍵盤快速鍵，讓使用者在瀏覽器中能快速導覽到表單控制項。例如，如果您輸入 K，使用者就可以輸入 Alt + K，導覽到控制項。存取鍵只能由單一字元組成。

    自動回傳指出當使用者變更清單選項時，是否會自動發生回傳到伺服器。請選取選項以允許回傳。

  3. 按一下「確定」。

如需關於 ASP.NET 下拉式清單屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpcondropdownlistwebservercontrol.asp。


設定 asp: 清單方塊的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

若要完成「asp：清單方塊」對話方塊：

  1. 在「編號」文字方塊中，輸入要給表單控制項的名稱。

    編號是必要的。

  2. 請指定下列其中一項選項：

    資料集指定要用來填入清單控制項之項目的資料來源。如果您沒有指定資料集，您可以稍後再指定，或是按一下「屬性」檢視窗中的「清單項目」按鈕，以靜態方式設定清單項目。

    標籤來源指定所選取資料集中的欄位，以提供清單項目的標籤。

    數值來源指定所選取資料集中的欄位，以提供清單項目的值。

    存取鍵會建立鍵盤快速鍵，讓使用者在瀏覽器中能快速導覽到表單控制項。例如，如果您輸入 K，使用者就可以輸入 Alt + K，導覽到控制項。存取鍵只能由單一字元組成。

    自動回傳指出當使用者變更清單選項時，是否會自動發生回傳到伺服器。請選取選項以允許回傳。

  3. 按一下「確定」。

如需關於 ASP.NET 清單方塊屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconlistboxwebservercontrol.asp。


設定 asp: 選項按鈕清單的對話方塊選項

請使用此對話方塊設定將表單控制項插入頁面時的屬性。

若要填寫「asp：選項按鈕清單」對話方塊：

  1. 在「編號」文字方塊中，輸入要給表單控制項的名稱。

    編號是必要的。

  2. 請指定下列其中一項選項：

    工具提示指定當滑鼠指標停留在瀏覽器的表單控制項之上時所顯示的文字。

    資料集指定要用來填入清單控制項之項目的資料來源。如果您沒有指定資料集，您可以稍後再指定，或是按一下「屬性」檢視窗中的「清單項目」按鈕，以靜態方式設定清單項目。

    標籤來源指定所選取資料集中的欄位，以提供清單項目的標籤。

    數值來源指定所選取資料集中的欄位，以提供清單項目的值。

    選取的值等於指定當瀏覽器中顯示「選項按鈕清單」時，伺服器用來決定所要選取之清單項目的值。伺服器會比較各項目的值與指定的值。如果值相符，便會選取相符的項目。

    存取鍵會建立鍵盤快速鍵，讓使用者在瀏覽器中能快速導覽到表單控制項。例如，如果您輸入 K，使用者就可以輸入 Alt + K，導覽到控制項。存取鍵只能由單一字元組成。

    自動回傳指出當使用者變更清單選項時，是否會自動發生回傳到伺服器。請選取選項以允許回傳。

  3. 按一下「確定」。

如需關於 ASP.NET 選項按鈕清單屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconradiobuttonlistwebservercontrol.asp。


設定按鈕屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 按鈕屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconbuttonwebcontrol.asp。


設定核取方塊屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 核取方塊屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconcheckboxwebservercontrol.asp。

您可以讓伺服器決定是否要選取「核取方塊」控制項。在執行階段時，伺服器會比較您指定的值與資料集中的值。如果值相符，伺服器便會選取該核取方塊。

若要讓伺服器在執行階段時決定核取方塊的狀態：

  1. 在「屬性」檢視窗上，選取「動態」選項。
  2. 完成「動態核取方塊」對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。


設定影像按鈕屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 影像按鈕屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconimagebuttonwebcontrol.asp。


設定標籤屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 標籤屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconlabelwebservercontrol.asp。


設定選項按鈕屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 選項按鈕屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconradiobuttonwebservercontrol.asp。

您可以讓伺服器決定要選取群組中的哪一個選項按鈕。在執行階段時，伺服器會比較您指定的各個核取的值與資料集中的值。如果值相符，伺服器便會選取該選項按鈕。

若要讓伺服器在執行階段時選取群組中的選項按鈕：

  1. 在「屬性」檢視窗上，選取「動態」選項。
  2. 完成「動態選項按鈕群組」對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。


設定文字方塊屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 文字方塊屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpcontextboxwebservercontrol.asp。


設定核取方塊清單屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 核取方塊清單屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconcheckboxlistwebservercontrol.asp。


設定下拉式清單屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 下拉式清單屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpcondropdownlistwebservercontrol.asp。


設定清單方塊屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 清單方塊屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconlistboxwebservercontrol.asp。


設定選項按鈕清單屬性 (ASP.NET)

請使用此「屬性」檢視窗設定表單控制項的屬性。

如需關於 ASP.NET 選項按鈕清單屬性的詳細資訊，請參閱 Microsoft 網站上的文件，網址為 http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconradiobuttonlistwebservercontrol.asp。


設定清單項目的對話方塊選項

這個對話方塊是用來填入 ASP.NET 表單控制項清單，例如「下拉式清單」或「清單方塊」。

若要設定對話方塊選項：

  1. 視您要填入清單的方式選取「手動」或「資料庫」。
  2. 如果您選取「手動」，請依照下列步驟：
    • 若要增加清單項目，按一下加號按鈕 (+)，指定「標籤」與「值」文字方塊中的標籤與值。
    • 若要刪除清單項目，請在清單中按一下項目，然後按一下減號 (-) 按鈕。
    • 若要編輯清單項目，選取清單項目，然後在「標籤」與「值」文字方塊中指定新的標籤與值。
    • 若要指定清單第一次顯示時的預設項目，請在「選取相等值至」文字方塊中輸入項目的值。
  3. 如果您選擇「資料庫」，請依照下列步驟：
    • 選取要填入清單的「資料集」。
    • 在資料集中指定會提供清單項目標籤的欄。
    • 在資料集中指定會提供清單項目值的欄。
    • 若要指定清單第一次顯示時的預設項目，請在「選取相等值至」文字方塊中輸入項目的值。


設定 ASP.NET 資料格物件的對話方塊選項

「資料格物件」對話方塊可讓您在 ASP.NET 頁面中建立和新增「資料格」物件。

若要設定 ASP.NET 的「資料格物件」對話方塊：

  1. 請選取「資料格」物件的 ID 屬性 (或標籤)。

    這個欄位會預先填入使用的值。您可以變更「資料格」的值，但是如果您將欄位值設定為現有 ID 的值時，系統會提示您輸入新的屬性值。

  2. 選取資料集 (DataSet) 建立與「資料格」的關聯。

    這個資料集 (DataSet) 就是「資料格」用來擷取資訊的資料集。Dreamweaver 會在「格線欄位」方塊中填入所選取資料集中所有欄位的繫結資料行。

  3. 指定所要顯示的記錄數目。
  4. 選取您要實作的頁面導覽連結類型。
    • 「連結到上一頁和下一頁」項目會新增「下一頁」和「上一頁」的連結。
    • 「將編號連結連到每一頁」項目會新增頁碼的連結，例如，「1 2 3 4 5 n...」。
  5. 移除您不需要的格線欄位，方法是在「格線欄位」方塊中選取這些格線欄位，然後按一下減號 (-) 按鈕。
  6. 您可以編輯其餘的格線欄位，方法是在「格線欄位」中選取一個欄，然後設定其屬性。

    若要變更「資料格」的欄類型，請按一下「編輯」按鈕，然後從彈出式選單中選取欄類型。會顯示一個專門用來選擇欄類型的對話方塊。指定內容，然後格式化所選取的「資料格」欄。欄類型如下表中所示：

    資料格欄類型

    說明

    簡單資料欄位

    「簡單資料欄位」欄在 ASP.NET 中又稱為「繫結欄」，可讓您指定所要顯示的資料來源欄位，並為欄位指定搭配 .NET 格式化運算式使用的資料格式。

    自由表單

    「自由表單」欄類型在 ASP.NET 中又稱為「樣版欄」，可讓您建立 HTML 文字和伺服器控制項的組合，以設計欄的自訂版面。自由表單欄中的控制項可以是資料繫結的控制項。由於您可以完全控制資料的顯示方式，以及使用者在格線欄位中與列進行互動的結果，因此「自由表單」欄讓您在定義格線欄位內容的版面和功能時，有更大的彈性。

    超連結

    「超連結」欄會將資訊顯示成超連結。一般的用法是將資料 (如客戶編號或產品名稱) 顯示成超連結，使用者只要按一下連結，就可以導覽至提供項目相關詳細資料的另一個頁面。

    編輯、更新、取消按鈕

    「編輯、更新、取消按鈕」欄在 ASP.NET 中又稱為「編輯命令欄」，可讓使用者就地執行「資料格」列中的資訊編輯工作。若要執行這項工作，請建立「編輯、更新、取消」欄。在執行階段，這個欄會顯示一個標示有「編輯」的按鈕。當使用者按一下「編輯」按鈕時，會將該列資料顯示成可編輯的控制項，例如文字欄位，並會將「編輯」按鈕取代成「更新」和「取消」按鈕。

    刪除按鈕

    「刪除按鈕」可讓使用者按一下按鈕，來刪除某一特定列。
  7. 請為您想要變更的每一欄重覆前面的步驟。
  8. 若要變更「資料格」中各欄的順序，請在「格線欄位」方塊中選取某一欄，然後按一下向上鍵或向下鍵，就可以在「資料格」中將欄左右移動。
  9. 按一下「確定」關閉對話方塊，即可建立「資料格」。

相關主題

  • 在頁面中新增 ASP.NET 資料格


設定簡單資料欄位的對話方塊選項

「簡單資料欄位」欄 (在 ASP.NET 中又稱為繫結欄) 可讓您指定所要顯示的資料來源欄位，並為欄位指定搭配 .NET 格式化運算式使用的資料格式。

若要設定「簡單資料欄位」對話方塊選項：

  1. 「標題」文字方塊可讓您將標題插入至格線欄位的標題或頁尾列中 (至於「資料格」的標題或頁尾列的顯示則是由「資料格屬性」檢視窗所控制的)。
  2. 選取「資料集」欄，填入「資料欄位」彈出式選單中的「資料格」欄。
  3. 按一下「唯讀」核取方塊，將該「資料格」指定為不允許新增、更新或刪除的權限。
  4. 從「送出為」彈出式選單中選取資料類型。
  5. 按一下「確定」。

相關主題：

  • 在頁面中新增 ASP.NET 資料格
  • 修改資料格或資料清單物件
  • 設定 ASP.NET 資料格屬性檢視窗選項


設定自由表單的對話方塊選項

「自由表單」選項 (在 ASP.NET 中又稱為樣版欄) 可讓您建立 HTML 文字和伺服器控制項的組合，以設計欄的自訂版面。自由表單欄中的控制項可以是資料繫結的控制項。由於您可以完全控制資料的顯示方式，以及使用者在格線欄位中與列進行互動的結果，因此「自由表單」欄讓您在定義格線欄位內容的版面和功能時，有更大的彈性。

若要設定「自由表單」對話方塊選項：

  1. 「標題」文字方塊可讓您將標題插入至格線欄位的標題或頁尾列中 (至於「資料格」的標題或頁尾列的顯示則是由「資料格屬性」檢視窗所控制的)。
  2. 從「樣版」彈出式選單中選取要和「自由表單資料格」搭配使用的樣版。
  3. 按一下「新增資料欄位」按鈕，選取要填入格線欄位中的「資料集」欄。

    「新增資料欄位」對話方塊便會出現。在這個對話方塊中選取資料集 (DataSet) 欄並按一下「確定」之後，Dreamweaver 便會將適當的資料繫結運算式加入至「內容」文字方塊中。

  4. 在「內容」文字方塊中將繫結運算式括於 HTML 標籤中，即可格式化「自由表單」欄。
  5. 從「送出為」彈出式選單中選取資料類型。
  6. 按一下「確定」。

相關主題

  • 在頁面中新增 ASP.NET 資料格
  • 修改資料格或資料清單物件
  • 設定 ASP.NET 資料格屬性檢視窗選項


設定超連結欄的對話方塊選項

「超連結」欄會將資訊顯示成超連結。一般的用法是將資料 (如客戶編號或產品名稱) 顯示成超連結，這樣使用者只要按一下連結，就可以導覽至提供該項目之相關細節的個別頁面。

設定超連結欄的對話方塊選項：

  1. 請在「標題」文字方塊中輸入欄的名稱。
  2. 在「超連結文字」區段中，選取「靜態文字」或「資料欄位」選項。如果您選取的是「靜態文字」，請在「靜態文字」文字方塊中輸入超連結的文字。如果您選取的是「資料欄位」，請從提供超連結文字的「資料欄位」彈出式選單中選取一個「資料集」欄。
  3. 在「連結網頁」區段中，選取「靜態 URL」或「資料欄位」選項。如果您選取的是「靜態 URL」，請在「靜態 URL」文字方塊中輸入目標網頁的 URL (您可以使用「靜態 URL」文字方塊右邊的「瀏覽」按鈕，尋找所要使用的目標網頁)。如果您選取的是「資料欄位」，請從提供 URL 的「資料欄位」彈出式選單中選取一個「資料集」欄。
  4. 如果您是使用「資料欄位」選項來建立超連結，則您可以使用「格式字串」文字方塊來指定超連結文字的格式化運算式。如需關於格式運算式的詳細資料，請參考適當的 ASP.NET 文件以取得有關「資料格字串格式化方法」的相關資訊。
  5. 按一下「確定」。

相關主題：

  • 在頁面中新增 ASP.NET 資料格
  • 修改資料格或資料清單物件
  • 設定 ASP.NET 資料格屬性檢視窗選項


設定編輯、更新、取消按鈕的對話方塊選項

「編輯、更新、取消按鈕」欄 (在 ASP.NET 中又稱為「編輯命令欄」) 可讓使用者就地執行「資料格」列中的資訊編輯工作。若要執行這項工作，請建立「編輯、更新、取消」欄。在執行階段，這個欄會顯示一個標示有「編輯」的按鈕。當使用者按一下「編輯」按鈕時，便會將該列資料顯示成可編輯的控制項，例如文字方塊，並將「編輯」按鈕取代成「更新」和「取消」按鈕。

若要設定「編輯、更新、取消按鈕」方塊選項：

  1. 請在「標題」文字方塊中輸入欄的名稱。
  2. 在「按鈕類型」彈出式選單中，選取連結或壓下按鈕。在執行階段，這個欄會顯示一個標示有「編輯」的按鈕。連結按鈕會使用文字連結做為按鈕，而壓下按鈕則是使用影像做為按鈕。
  3. 在「更新表格」彈出式選單中，選取使用者將會修改其中資料的資料庫表格。
  4. 在「主索引鍵」彈出式選單中，選取與表格相關的主索引鍵。
  5. 從「送出為」彈出式選單中選取資料類型。
  6. 按一下「確定」。

相關主題

  • 在頁面中新增 ASP.NET 資料格
  • 修改資料格或資料清單物件
  • 設定 ASP.NET 資料格屬性檢視窗選項


設定刪除按鈕的對話方塊選項

「刪除按鈕」(在 ASP.NET 中又稱為按鈕欄) 可讓使用者按一下按鈕，就能刪除特定的列。

若要設定「刪除按鈕」方塊選項：

  1. 請在「標題」文字方塊中輸入欄的名稱。
  2. 在「按鈕類型」彈出式選單中，選取連結或壓下按鈕。在執行階段，這個欄會顯示一個標示有「刪除」的按鈕。連結按鈕會使用文字連結做為按鈕，而壓下按鈕則是使用影像做為按鈕。
  3. 在「刪除來源」彈出式選單中，選取使用者將會刪除其中資料的資料庫表格。
  4. 在「主索引鍵」彈出式選單中，選取與表格相關的主索引鍵。
  5. 從「送出為」彈出式選單中選取資料類型。
  6. 按一下「確定」。

相關主題

  • 在頁面中新增 ASP.NET 資料格
  • 修改資料格或資料清單物件
  • 設定 ASP.NET 資料格屬性檢視窗選項


設定 ASP.NET 資料清單物件的對話方塊選項

這個對話方塊會在頁面中建立和新增 ASP.NET 的「資料清單」物件。這個物件只適用於 ASP.NET 文件類型。

若要設定 ASP.NET 的「資料清單物件」對話方塊選項：

  1. 如果需要的話，請變更「資料清單」的名稱。

    Dreamweaver 會指定一個預設名稱給「資料清單」。

  2. 建立與「資料清單」相關聯的資料集 (DataSet)。

    您可以選取現有的資料集 (DataSet) 或輸入任意值。依預設值，會選取清單中的第一個資料集 (DataSet)。

  3. 若要組織表格中的項目，請選取「排列表格中的項目」選項。

    如果使用表格，請指定表格中的欄數。如果所輸入的數值大於一，請指定表格儲存格的填入順序：選取「由上到下分行」選項以對資料進行水平分行，或者是選取「由左到右分行」選項以對資料進行垂直分行。

  4. 若要指定要顯示於「資料清單」中的資料，請依序執行下列步驟：
    • 選取「樣版」清單的「項目」樣版。「項目」樣版代表了除了表格標題和頁尾以外，清單中的所有列。
    • 按一下「將資料欄位新增到內容」按鈕。「新增資料欄位」對話方塊便會出現。
    • 選取「資料集」欄，然後按一下「確定」以關閉對話方塊。Dreamweaver 會將適當的資料繫結運算式加入至「資料清單物件」對話方塊的「內容」方塊中。
    • 在「內容」方塊中，將繫結運算式括於 HTML 標籤之中，以格式化所要顯示的資料。
  5. 依情況需要，調整「資料清單」的版面。

    若要控制「資料清單」的版面，請從「樣版」清單中選取樣版，然後在「內容」文字方塊中加入 HTML 標籤。可用的樣版包括：

    樣版

    說明

    標題

    要顯示於清單起始處的文字和控制項。

    項目

    用來控制顯示資料來源中每一列的 HTML 元素和控制項。

    替代項目

    類似於「項目」樣版元素，但會以每隔一列的方式顯示「資料清單」中的列。如果您使用這個樣版，通常您會為其建立另一種外觀，例如使用與「項目」樣版不同的背景顏色。

    編輯項目

    編輯模式下的項目版面。這個樣版通常會含有像是「文字方塊」控制項的編輯控制項。

    選取項目

    當使用者選取了「資料清單」中的項目時所要提供的項目。一般的用法是使用背景或前景的顏色，以視覺化的方式標示各列。您也可以將項目展開，以顯示資料來源中的其他欄位。

    分隔符號

    用於兩個項目之間的元素，常見的例子是線條 (也就是使用 <HR> 元素)。

    頁尾

    用於清單結尾處的文字和控制項。
  6. 按一下「確定」，以關閉對話方塊，並建立「資料清單」。

相關主題

  • 在頁面中新增 ASP.NET 資料清單
  • 修改資料格或資料清單物件


設定新增資料欄位的對話方塊選項

這個對話方塊可讓您建立「資料集」欄與「資料格」或「資料清單」物件之間的關聯性。

若要設定「新增資料欄位」對話方塊選項：

  • 請選取「資料集」欄 (即「資料欄位」)，然後按一下「確定」。

相關主題

  • 設定 ASP.NET 資料格物件的對話方塊選項
  • 設定 ASP.NET 資料清單物件的對話方塊選項


設定 ASP.NET 資料格屬性檢視窗選項

「資料格」屬性檢視窗可以讓您變更「資料格」的名稱、調整儲存格內距和儲存格間距的值，以及顯示欄的標題或頁尾。

若要修改「資料格」：

  1. 若要修改「資料格」，請變更下列任何設定：

    資料格方塊可讓您變更「資料格」的名稱。

    進階按鈕可讓您開啟「資料格物件」對話方塊。如需詳細資訊，請參閱設定 ASP.NET 資料格物件的對話方塊選項。

    儲存格內距方塊可讓您調整格線儲存格的儲存格內距。

    儲存格間距方塊可讓您調整格線儲存格的間距。

    顯示欄標題選項可讓您啟用或停用標題。

    顯示欄頁尾選項可讓您啟用或停用頁尾。

  2. 請按 Enter (Windows) 或 Return (Macintosh)，以套用您的變更。

相關主題

  • 在頁面中新增 ASP.NET 資料格
  • 設定 ASP.NET 資料格物件的對話方塊選項


設定 ASP.NET 資料清單屬性檢視窗選項

這個屬性檢視窗可讓您修改頁面中的 ASP.NET「資料清單」。

若要修改「資料清單」：

  1. 若要修改「資料格」，請變更下列任何設定：

    資料清單方塊可讓您變更「資料清單」的名稱。

    進階按鈕可讓您開啟「資料清單物件」對話方塊。

    顯示欄標題選項可讓您開啟或關閉標題。

    顯示欄頁尾選項可讓您開啟或關閉頁尾。

  2. 請按 Enter (Windows) 或 Return (Macintosh)，以套用您的變更。

相關主題

  • 在頁面中新增 ASP.NET 資料清單


設定記錄更新表單的對話方塊選項 (ASP.NET)

這個對話方塊是用來建立可讓使用者更新資料庫記錄的頁面。

在開始之前，您必須先完成下列作業：

  • 您必須先建立一或多個頁面，讓使用者可以在上面找到要更新的記錄。如需詳細資訊，請參閱搜尋要更新的記錄 (ASP.NET)。
  • 在更新頁面中加入邏輯，使其能從資料庫擷取使用者所選擇的記錄，以作為進行更新的準備。如需相關說明，請參閱擷取要更新的記錄 (ASP.NET)。

完成這些前置作業之後，就可以依下列方式完成對話方塊：

若要設定對話方塊選項：

  1. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  2. 在「表格」彈出式選單中，選取含有要更新的記錄的資料庫表格。
  3. 在「選取記錄來源」彈出式選單中，指定含有 HTML 表單所顯示記錄的資料集。
  4. 在「唯一索引鍵欄」彈出式選單中選取索引鍵欄 (通常是記錄 ID 欄)，以識別資料庫表格中的記錄。
  5. 在「將唯一鍵送出為」彈出式選單中選取資料類型。
  6. 在「如果成功，請前往」文字方塊中，輸入在伺服器行為執行成功之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  7. 在「如果失敗，請前往」文字方塊中，輸入在伺服器行為失敗之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  8. 如果您希望在伺服器行為失敗時能取得除錯資訊，請選取「失敗時顯示除錯資訊」核取方塊。

    如果您選擇了這個選項，Dreamweaver 會忽略「如果失敗，請前往」選項。

    提示

    請在開發期間使用除錯選項，在網站上線之後使用「如果失敗，請前往」選項。
  9. 在「表單欄位」區域中，指定每一個表單物件應更新的資料庫表格欄。

    在預設狀況下，Dreamweaver 會為資料庫表格中的每一欄建立一個表單物件。如果資料庫會自動為每一筆新建立的記錄產生唯一索引鍵 ID，請在清單中選取表單物件，然後按下「減號 (-)」按鈕，將對應於索引鍵欄的表單物件移除。這樣可以防止表單的使用者輸入已經存在的 ID 數值。

    如果要變更 HTML 表單上的表單物件的順序，可以在清單中選取表單物件，再按下對話方塊右邊的向上或向下箭頭。

  10. 如果要指定各資料輸入欄位出現在 HTML 表單上的方式，請按下「表單欄位」表格中的某一列，並在表格下方的方塊中輸入下列資訊：
    • 在「標籤」文字方塊中輸入要顯示在資料輸入欄位旁邊的說明標籤。依預設值，Dreamweaver 會在標籤中顯示表格欄的名稱。
    • 在「顯示為」彈出式選單中，選擇將做為資料輸入欄位的表單物件。您可以選取「文字欄位」、「文字區域」、「選單」、「核取方塊」、「選項按鈕群組」以及「文字」。如果要輸入唯讀資料，請選擇「文字」。您也可以選取「密碼欄位」、「檔案欄位」和「隱藏欄位」。

      注意

      隱藏欄位都是插入於表單的末端。
    • 在「送出為」彈出式選單中，選取資料庫表格所預期的資料格式。例如，如果表格欄僅能接受數字資料，請選擇「數值」。
    • 設定表單物件的屬性。依您選做為資料輸入欄位的表單物件而異，您會有不同的選項。您可以為文字欄位、文字區域以及文字輸入初始值。使用選單與選項按鈕群組時，必須開啟其他對話方塊才能設定屬性。使用核取方塊時，可選擇「已選取」或「取消選取」選項。
  11. 如果要設定其他表單物件的屬性，可選取其他「表單欄位」列，並輸入標籤、顯示為值，並且送出為值。

    使用選單與選項按鈕群組時，必須開啟其他對話方塊才能設定屬性。若是核取方塊，請定義目前記錄的值與某個指定值的比較，以決定在顯示記錄時，核取方塊為已選取或取消選取的狀態。

  12. 按一下「確定」。

Dreamweaver 會在頁面中加入 HTML 表單與「更新記錄」伺服器行為。

相關主題

  • 一次完成更新頁面 (ASP.NET)
  • 插入動態 HTML 表單物件


設定更新記錄的對話方塊選項 (ASP.NET)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以更新資料庫表格中的記錄。

在開始之前，您必須先完成下列作業：

  • 您必須先建立一或多個頁面，讓使用者可以在上面找到要更新的記錄。如需詳細資訊，請參閱搜尋要更新的記錄 (ASP.NET)。
  • 在更新頁面中加入邏輯，使其能從資料庫擷取使用者所選擇的記錄，以作為進行更新的準備。如需相關說明，請參閱擷取要更新的記錄 (ASP.NET)。
  • 在更新頁面中加入 HTML 表單，讓使用者修改資料。如需相關說明，請參閱依組塊完成更新頁面 (ASP.NET)。

這些前置作業完成之後，就可以完成「更新記錄」對話方塊。

若要設定對話方塊選項：

  1. 從「送出值來源」彈出式選單中選取表單。
  2. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  3. 在「更新表格」彈出式選單中，選取含有您要更新記錄的資料庫表格。
  4. 指定要更新的資料庫欄，從「值」彈出式選單選取要更新資料庫欄的表單物件，再由「送出為」彈出式選單為表單物件選擇資料類型。如果要將此欄指定為主索引鍵，請選取「主索引鍵」。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  5. 在「如果成功，請前往」文字方塊中，輸入在伺服器行為執行成功之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  6. 在「如果失敗，請前往」文字方塊中，輸入在伺服器行為失敗之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  7. 如果您希望在伺服器行為失敗時能取得除錯資訊，請選取「失敗時顯示除錯資訊」核取方塊。

    如果您選擇了這個選項，Dreamweaver 會忽略「如果失敗，請前往」選項。

    提示

    請在開發期間使用除錯選項，在網站上線之後使用「如果失敗，請前往」選項。
  8. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者在修改 HTML 表單中顯示的資訊之後按下「送出」按鈕，更新資料庫表格中的記錄。

相關主題

  • 依組塊完成更新頁面 (ASP.NET)


設定刪除記錄的對話方塊選項 (ASP.NET)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以刪除資料庫表格中的記錄。

若要設定對話方塊選項：

  1. 在「先檢查是否定義了變數」彈出式選單中選取「主索引鍵值」。

    如果您要檢查的變數並非界定要刪除記錄的變數，請選取變數並輸入名稱。

    Dreamweaver 會檢查這個變數是否已定義。

  2. 在「連線」彈出式選單中選取一種連線，便可以透過該頁面找到資料庫並連結到這個資料庫。

    如果需要定義連線，請按一下「定義」按鈕。

  3. 在「表格」彈出式選單中，選取含有要刪除記錄的資料庫表格。
  4. 在「主索引鍵欄」彈出式選單中，選取用來識別資料庫表格中記錄的索引鍵欄。
  5. 在「將主索引鍵送出為」彈出式選單中，選取資料類型。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

  6. 在「主索引鍵值」彈出式選單中，選取用來識別要刪除記錄的變數，並輸入名稱。
  7. 在「如果失敗，請前往」文字方塊中，輸入在刪除成功之後要顯示的頁面位置，或是按下「瀏覽」按鈕以瀏覽位置。
  8. 在「如果失敗，請前往」文字方塊中，輸入在刪除失敗之後要顯示的頁面位置，或是按下「瀏覽」按鈕以瀏覽位置。
  9. 如果您希望在刪除失敗時能取得除錯資訊，請選取「失敗時顯示除錯資訊」核取方塊。

    如果您選擇了這個選項，Dreamweaver 會忽略「如果失敗，請前往」選項。

    提示

    請在開發期間使用除錯選項，在網站上線之後使用「如果失敗，請前往」選項。
  10. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，將資料庫表格中的記錄刪除。


設定預存程序的對話方塊選項 (ASP.NET)

此對話方塊是用來設定 ASP.NET 頁面以便使用預存程序。

若要設定對話方塊選項：

  1. 輸入預存程序的名稱。
  2. 在「連線」彈出式選單中，選取含有預存程序的資料庫連線。

    如果需要定義連線，請按一下「定義」按鈕。

  3. 從「程序」彈出式選單選取預存程序。

    Dreamweaver 會自動填入所有參數。

  4. 如果預存程序傳回「資料集」，請選取「傳回資料集」核取方塊，然後按下「測試」按鈕查看預存程序所傳回的資料集。
  5. 選取某個參數，如果需要變更參數，請按下「編輯」按鈕，如果要刪除參數，請按下「刪除」按鈕。

    如需詳細資訊，請參閱設定編輯預存程序變數的對話方塊選項 (ASP.NET)。

  6. 在「如果成功，請前往」文字方塊中，輸入在預存程序執行成功之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  7. 在「如果失敗，請前往」文字方塊中，輸入在預存程序執行失敗之後要顯示的頁面位置，或是按下「瀏覽」按鈕瀏覽位置。
  8. 如果您希望在執行預存程序失敗時能取得除錯資訊，請選取「失敗時顯示除錯資訊」核取方塊。

    如果您選擇了這個選項，Dreamweaver 會忽略「如果失敗，請前往」選項。

    提示

    請在開發過程中使用除錯選項，在網站上線之後使用「如果失敗，請前往」選項。
  9. 按一下「確定」。

關閉「預存程序」對話方塊後，Dreamweaver 會在您的頁面中插入 ASP.NET 程式碼，這個程式碼在伺服器上執行時，將會呼叫資料庫中的預存程序。預存程序就會執行如插入記錄之類的資料庫作業。

相關主題

  • 預存程序
  • 使用預存程序修改資料庫 (ASP.NET)


設定編輯預存程序變數的對話方塊選項 (ASP.NET)

這個對話方塊是用來編輯預存程序的參數。您可以依需要變更每一個值。

若要設定對話方塊選項：

  1. 您正在編輯的變數名稱會出現在「名稱」文字方塊中。
  2. 從彈出式選單中選取變數類型。
  3. 輸入變數大小。
  4. 從彈出式選單中選取方向。

    預存程序中可能有輸入值、輸出值，或兩者都有。

  5. 輸入測試值。
  6. 輸入值。
  7. 按下「建立」按鈕建立值。

    「建立值」對話方塊便會出現。若要完成對話方塊，請參閱設定建立值的對話方塊選項 (ASP.NET)。

  8. 按一下「確定」。

相關主題

  • 設定預存程序的對話方塊選項 (ASP.NET)
  • 使用預存程序修改資料庫 (ASP.NET)


設定建立值的對話方塊選項 (ASP.NET)

這個對話方塊是用來建立預存程序的值。

若要設定對話方塊選項：

  1. 從彈出式選單中選取來源。
  2. 輸入預設值。
  3. 按一下「確定」。

相關主題

  • 設定編輯預存程序變數的對話方塊選項 (ASP.NET)
  • 設定預存程序的對話方塊選項 (ASP.NET)
  • 使用預存程序修改資料庫 (ASP.NET)


快速建立 ASP 與 JSP 應用程式

使用 Macromedia Dreamweaver 8 中的工具，幾乎不需要撰寫程式碼就可以迅速建立 ASP 或 JSP 網路應用程式。

本章包含下列各節：

建立主要/細節頁面 (ASP 與 JSP)

建立搜尋/結果頁面 (ASP 與 JSP)

建立記錄插入頁面 (ASP 與 JSP)

建立用以更新記錄的頁面 (ASP 與 JSP)

建立用以刪除記錄的頁面 (ASP 與 JSP)

使用進階的資料操作物件來建立頁面 (ASP 與 JSP)

建立限制存取網站的頁面 (ASP 與 JSP)

使用 JavaBeans (JSP)

相關主題

  • 關於快速應用程式開發 (所有伺服器)


建立主要/細節頁面 (ASP 與 JSP)

使用 Dreamweaver，您可以建立多套可以呈現兩個細節層級資訊的頁面：主要頁面會列出記錄，而細節頁面會顯示更多關於各筆記錄的詳細資料。本節說明如何建立主要/細節頁面。

本節包含下列主題：

  • 一次建立主要/細節頁面 (ASP & JSP)
  • 依組塊建立個別的主要/細節頁面 (ASP 與 JSP)


一次建立主要/細節頁面 (ASP & JSP)

在開發 ASP 或 JSP 應用程式時，您可以使用「主要/細節頁面設定」應用程式物件，快速建立主要/細節頁面。應用程式物件讓您只要完成一兩個對話方塊，就可以建立一組完整的動態頁面。

您所使用的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱一次作業建立主要/細節頁面 (ColdFusion、ASP、JSP、PHP)。

您也可以使用個別伺服器行為來建立主要/細節頁面。如需詳細資訊，請參閱依組塊建立個別的主要/細節頁面 (ASP 與 JSP)。


依組塊建立個別的主要/細節頁面 (ASP 與 JSP)

本節會說明如何在不使用「主要/細節頁面設定」應用程式物件的情況下，建立一組主要/細節頁面。如需使用應用程式物件的說明，請參閱一次建立主要/細節頁面 (ASP & JSP)。

本節說明建立一組主要/細節頁面的步驟：

  • 建立主要頁面，並定義其資料集 (ASP 與 JSP)
  • 在主要頁面中顯示記錄 (ASP 與 JSP)
  • 開啟細節頁面後將記錄 ID 傳送到此細節頁面 (ASP 與 JSP)
  • 尋找並展示細節頁面上要求的記錄 (ASP 與 JSP)


建立主要頁面，並定義其資料集 (ASP 與 JSP)

建立主要/細節頁面的第一步是先建立空白的主要頁面，然後再新增資料集。

您可以在設計階段定義資料集 (請參閱定義資料集)，或者使用者也可以在執行階段定義資料集 (請參閱建立搜尋/結果頁面 (ASP 與 JSP))。

請確定該資料集中不只包含主要頁面所需的所有資料欄，同時也必須要包含細節頁面所需的所有欄位。

通常，主要頁面中的資料集會從資料庫表格中擷取少許的資料欄，而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄以提供更詳細的資訊。

建立主要/細節頁面的下一步是在主要頁面中顯示記錄。請參閱在主要頁面中顯示記錄 (ASP 與 JSP)。


在主要頁面中顯示記錄 (ASP 與 JSP)

建立了空白主要頁面並定義其資料集 (請參閱建立主要頁面，並定義其資料集 (ASP 與 JSP)) 之後，必須在該頁面中顯示記錄。

若要在主要頁面中顯示記錄：

  1. 建立一個可以顯示多筆記錄的頁面版面，並將資料集欄繫結至該頁面。

    一般常見的做法是在主要頁面中建立一個兩列的 HTML 表格，再從「繫結」面板 (「視窗＞繫結」) 中將有限數量的資料集欄拖曳到表格的第二列中 (使用第一列來顯示表格欄的標題)。

  2. 建立一個重複區域，可以一次顯示多筆記錄。

    重複區域通常會套用至包含動態內容的表格列。如需詳細資訊，請參閱顯示多筆資料集結果。

建立主要/細節頁面的下一步是開啟細節頁面，再將記錄 ID 傳送到該頁面。請參閱開啟細節頁面後將記錄 ID 傳送到此細節頁面 (ASP 與 JSP)。


開啟細節頁面後將記錄 ID 傳送到此細節頁面 (ASP 與 JSP)

建立主要頁面並在該頁面中顯示記錄 (請參閱在主要頁面中顯示記錄 (ASP 與 JSP)) 之後，必須建立開啟細節頁面的連結，並將使用者所選取記錄的 ID 傳送到細節頁面。

若要開啟細節頁面，並將界定顯示記錄的 URL 參數傳送到該頁面：

  1. 在主要頁面的重複區域中，選取要用來做為連結的動態內容。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「前往細節頁面」。

    「前往細節頁面」對話方塊便會出現。

  3. 完成對話方塊。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

  4. 按一下「確定」。

Dreamweaver 會在您所選取的文字附近放置一個特殊連結，當使用者按一下此連結時，「前往細節頁面」伺服器行為就會將含有記錄 ID 的 URL 參數傳送至細節頁面。例如，當 URL 參數的名稱為 id，而細節頁面的名稱為 customerdetail.asp 時，則當使用者按下該連結時會顯示如下的 URL：

http://www.mysite.com/customerdetail.asp?id=43

URL 的第一個部份 http://www.mysite.com/customerdetail.asp，會開啟細節頁面；而第二個部份的 ?id=43 則是一個 URL 參數。這個參數會告訴細節頁面所要尋找和顯示的記錄，其中的 id 就是 URL 參數的名稱，而 43 則是這個參數的值。在這個範例中，URL 參數包含的記錄 ID 編號為 43。

如需詳細資訊，請參閱 URL 參數。

建立主要/細節頁面的下一步是尋找所要求的記錄，並在細節頁面中加以顯示。請參閱尋找並展示細節頁面上要求的記錄 (ASP 與 JSP)。


尋找並展示細節頁面上要求的記錄 (ASP 與 JSP)

在完成主要頁面 (請參閱開啟細節頁面後將記錄 ID 傳送到此細節頁面 (ASP 與 JSP)) 之後，必須在資料庫中尋找所要求的記錄，將其顯示在細節頁面中。相關的程序包含有定義保存單一資料的資料集─也就是主要頁面所要求的記錄，以及將資料集欄繫結至細節頁面中。

若要尋找所要求的記錄，並將該筆記錄顯示於細節頁面中：

  1. 切換為細節頁面，或是建立新的 ASP 或 JSP 頁面 (如果尚無此頁面)。
  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「資料集」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階對話方塊，請按一下「簡單」以切換成簡單對話方塊。

  3. 命名該資料集，然後選取連線，以及要提供資料給資料集的資料庫表格。
  4. 在「欄」區域中，選取要包含於資料集中的表格欄。

    資料集可以和主要頁面中的資料集相同或不同，通常，細節頁面中的資料集會提供較多的資料欄，以顯示較為詳細的資訊。

    如果是不同的資料集，則細節頁面上的資料集至少必須要包含一個和主要頁面共通的欄。共通的欄通常是記錄 ID 欄，但也可以是相關表格的結合欄位。

    若只想要將某些表格的資料欄納入資料集中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 想要的資料欄，以將其選取。

  5. 依照下列方法完成「篩選器」區段，以尋找和顯示結果頁面所傳送之 URL 參數中指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取資料庫表格中的欄，這個欄必須和主要頁面所傳送的 URL 參數值相符。

      例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。

    • 在第一個選單旁的彈出式選單中，選取等號 (系統應該已經自動選了等號)。
    • 在第三個彈出式選單中，選取「URL 參數」。

      主要頁面會使用 URL 參數，將使用者所界定的選取範圍之資訊傳送到細節頁面。

    • 在第四個文字方塊中，請輸入由主要頁面所傳送的 URL 參數名稱。

      例如，當主要頁面用來開啟細節頁面的 URL 為 www.mysite.com/customerdetail.asp?id=43 時，請輸入 id。

      您也可以先切換為主要頁面，開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，然後按兩下「前往細節頁面」伺服器行為。查看「傳送 URL 參數」名稱。

  6. 按一下「確定」。

    資料集會在「繫結」面板中出現。

  7. 若要將資料集欄繫結至細節頁面，請選取「繫結」面板中的欄 (「視窗＞繫結」)，然後將它們拖曳到頁面中。

主要/細節頁面的設定已完成。

在建立主要/細節頁面之後，您可以使用「伺服器行為」面板 (「視窗＞伺服器行為」) 來修改各種伺服器行為。


建立搜尋/結果頁面 (ASP 與 JSP)

您可以使用 Dreamweaver 建立一套允許使用者搜尋資料庫的頁面。您所使用的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)。


建立記錄插入頁面 (ASP 與 JSP)

您可以使用 Dreamweaver 來建立讓使用者在資料庫中插入新記錄的頁面。您所使用的方法對於 Dreamweaver 所支援的所有伺服器技術都是完全相同的。如需相關說明，請參閱建立記錄插入頁面 (所有伺服器)。


建立用以更新記錄的頁面 (ASP 與 JSP)

應用程式中可以包含讓使用者更新資料庫表格中現有記錄的一組頁面。這些頁面通常是由搜尋頁面、結果頁面及更新頁面所組成的。搜尋及結果頁面讓使用者擷取記錄，更新頁面則讓使用者修改記錄。

本節說明建立更新記錄頁面的步驟：

  • 搜尋要更新的記錄 (ASP 與 JSP)
  • 開啟更新頁面及傳送記錄 ID (ASP 與 JSP)
  • 擷取要更新的記錄 (ASP 與 JSP)
  • 一次完成更新頁面 (ASP 與 JSP)
  • 依組塊完成更新頁面 (ASP 與 JSP)

相關主題

  • 建立記錄插入頁面 (所有伺服器)
  • 建立用以刪除記錄的頁面 (ASP 與 JSP)


搜尋要更新的記錄 (ASP 與 JSP)

使用者要更新記錄之前，必須先在資料庫中找到記錄。因此，您必須為更新頁面搭配搜尋頁面與結果頁面。使用者在搜尋頁面中輸入搜尋準則，並選取結果頁面中的記錄。當使用者按一下記錄時，更新頁面便會開啟，並以 HTML 表單顯示記錄。

如需建立頁面以搜尋要更新之記錄的相關說明，請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)。

在建立搜尋/結果頁面之後，建立記錄更新頁面的下一步就是在結果頁面上建立連結，當按下時便會開啟更新頁面。請參閱開啟更新頁面及傳送記錄 ID (ASP 與 JSP)。


開啟更新頁面及傳送記錄 ID (ASP 與 JSP)

建立搜尋/結果頁面 (請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)) 之後，必須在結果頁面上建立連結，以開啟更新頁面，並傳送使用者所選取記錄的 ID。更新頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

記錄 ID 是以 URL 參數傳送到更新頁面。如需詳細資訊，請參閱 URL 參數。

若要建立開啟更新頁面並傳送記錄 ID 的連結：

  1. 在結果頁面中，為您想要連結的文字選取動態內容預留位置。
  2. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「前往細節頁面」。

    「前往細節頁面」對話方塊便會出現。

  3. 在「細節頁面」文字方塊中，按一下「瀏覽」以尋找更新頁面。
  4. 為 URL 參數命名，並指定含有您要傳送到更新頁面的記錄 ID 的資料集及欄。

    記下 URL 參數的名稱，因為稍後您將會在更新頁面中用到它。

  5. 按一下「確定」。

Dreamweaver 就會在頁面中插入一個特殊連結。而當使用者按一下該連結時，就會將一個內含記錄 ID 的 URL 參數傳送至更新頁面中。

建立記錄更新頁面的下一步是擷取要更新的記錄。請參閱擷取要更新的記錄 (ASP 與 JSP)。


擷取要更新的記錄 (ASP 與 JSP)

當結果頁面將 URL 參數傳送到更新頁面以識別要更新的記錄 (請參閱開啟更新頁面及傳送記錄 ID (ASP 與 JSP)) 之後，更新頁面必須讀取參數、從資料庫表格擷取記錄，再將記錄暫存於資料集之中。

若要擷取要更新的記錄：

  1. 在 Dreamweaver 中建立新的 ASP 或 JSP 頁面，並將其儲存。

    此頁面將會成為更新頁面。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集」。

    如果出現進階的對話方塊，請按下「簡單」按鈕開啟簡單對話方塊。

  3. 為資料集命名，並使用「連線」與「表格」彈出式選單，指定您要更新資料的位置。
  4. 按下「已選取」選項並選取索引鍵欄位 (通常是記錄 ID 欄位) 以及包含要更新資料的欄位。
  5. 設定「篩選器」區域，讓索引鍵欄的值等於結果頁面所傳送的對應 URL 參數值。

    這種篩選器會建立僅包含結果頁面所指定記錄的資料集。例如，如果索引鍵資料欄中包含了名為 PRID 的記錄 ID 資訊；而結果頁面傳送了名為 id 的 URL 參數之對應記錄 ID，則「篩選器」區域將會顯示如下：

  6. 按一下「確定」。

當使用者在結果頁面中選取記錄時，更新頁面將會產生僅包含選取記錄的資料集。

在修改更新頁面以從資料庫擷取記錄，並將它儲存在資料集中後，就必須新增表單讓使用者修改記錄資料，並新增更新資料庫所需要的邏輯。您可以一次或依組塊完成這些工作。請參閱一次完成更新頁面 (ASP 與 JSP)或依組塊完成更新頁面 (ASP 與 JSP)。


一次完成更新頁面 (ASP 與 JSP)

更新頁面中有三個建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要更新的記錄 (ASP 與 JSP))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以使用「記錄更新表單」應用程式物件，一次加入更新頁面的最後兩個建置組塊。這個應用程式物件會在頁面中加入 HTML 表單以及「更新記錄」伺服器行為。

在使用應用程式物件之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (ASP 與 JSP)、開啟更新頁面及傳送記錄 ID (ASP 與 JSP) 和擷取要更新的記錄 (ASP 與 JSP)。

應用程式物件在頁面中加入建置組塊之後，您就可以使用 Dreamerweaver 設計工具自訂您要的表單，或使用「伺服器行為」面板編輯「更新記錄」伺服器行為。

注意

更新頁面中一次只能存在一種編輯記錄的伺服器行為。例如，您無法在更新頁面中新增「插入記錄」或「刪除記錄」伺服器行為。

若要使用「記錄更新表單」應用程式物件建立更新頁面：

  1. 在「設計」檢視中開啟更新頁面，然後選取「插入＞應用程式物件＞更新記錄＞記錄更新表單精靈」。

    「記錄更新表單」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  3. 按一下「確定」。

應用程式物件會在頁面中新增 HTML 表單與「更新記錄」伺服器行為。表單物件會先放置在基本的表格中，您可以使用 Dreamweaver 頁面設計工具自訂表格物件 (請確定所有表單物件都放置在表單的邊界內)。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 依組塊完成更新頁面 (ASP 與 JSP)


依組塊完成更新頁面 (ASP 與 JSP)

更新頁面中有三個建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要更新的記錄 (ASP 與 JSP))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以分別使用表單工具與「伺服器行為」面板，在更新頁面中加入最後兩個基本的建置組塊。

在加入建置組塊之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (ASP 與 JSP)、開啟更新頁面及傳送記錄 ID (ASP 與 JSP) 和擷取要更新的記錄 (ASP 與 JSP)。

完成更新頁面的步驟包含了三個工作：

  • 在頁面中新增 HTML 表單，讓使用者可以修改資料
  • 藉由將表單物件與資料庫表格資料欄繫結的方式，顯示表單中的記錄
  • 在使用者修改記錄並按一下表單按鈕後，加入「更新記錄」伺服器行為，以更新資料庫表格

若要在更新頁面中加入 HTML 表單：

  1. 建立新的 ASP 或 JSP 頁面 (「檔案＞開新檔案」)。

    此頁面將會成為更新頁面。

  2. 使用 Dreamweaver 設計工具配置頁面。
  3. 在您希望表單出現的地方放置插入點，選取「插入＞表單＞表單」，以加入 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  4. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「更新記錄」伺服器行為會為您設定這些屬性。

  5. 在資料庫表格中每一個要更新的資料欄中，加入表單物件。以文字欄位為例，即為「插入＞表單＞文字欄位」。

    這些表單物件將用來輸入資料。通常用來輸入資料的是文字欄位，但您也可以使用選單、核取方塊或是選項按鈕。

    每一個表單物件應該有對應欄 (在之前定義的記錄集中)。唯一的例外是唯一索引鍵欄，這個欄位並沒有對應的表單物件。

    如需詳細資訊，請參閱插入 HTML 表單物件。

  6. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕，開啟「屬性」檢視窗 (「視窗＞屬性」)，在「標籤」方塊中輸入新的值。

若要在表單中顯示記錄：

  1. 請確定已定義資料集，以儲存使用者所要更新的記錄。

    如需詳細資訊，請參閱擷取要更新的記錄 (ASP 與 JSP)。

  2. 將各表單物件繫結至資料集中的資料，如下列各節所述：
    • 在 HTML 文字欄位中顯示動態內容
    • 動態式預先選取 HTML 核取方塊
    • 動態式預先選取 HTML 選項按鈕
    • 建立動態 HTML 表單選單
    • 使現有的 HTML 表單選單呈現動態效果

若要加入更新資料庫表格的伺服器行為：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，從彈出式選單中選取「更新記錄」。

    「更新記錄」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  3. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，更新資料庫中的記錄。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 一次完成更新頁面 (ASP 與 JSP)


建立用以刪除記錄的頁面 (ASP 與 JSP)

應用程式中可以包含讓使用者刪除目前資料庫表格中記錄的頁面。刪除頁面通常為細節頁面，常會搭配結果頁面。結果頁面可讓使用者選取要刪除的記錄，並將選擇傳送至刪除頁面。

刪除頁面有四大建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要刪除的記錄 (ASP 與 JSP))
  • 待刪除資料的唯讀顯示 (請參閱顯示要刪除的資料 (ASP 與 JSP))
  • 用來將刪除命令傳送到伺服器的「送出」按鈕 (請參閱將刪除命令傳送到伺服器 (ASP 與 JSP))
  • 用來更新資料庫表格的「刪除記錄」伺服器行為 (請參閱刪除資料庫表格中的記錄 (ASP 與 JSP))

    注意

    刪除頁面中每次只能包含一種編輯記錄的伺服器行為。例如，您無法將「插入記錄」與「更新記錄」伺服器行為同時加入刪除頁面。

相關主題

  • 建立記錄插入頁面 (ASP 與 JSP)
  • 建立用以更新記錄的頁面 (ASP 與 JSP)


界定要刪除的記錄 (ASP 與 JSP)

使用者要刪除記錄之前，必須先在資料庫中找到該記錄。因此，您必須為刪除頁面搭配搜尋頁面與結果頁面。如需建立搜尋頁面與結果頁面的說明，請參閱建立搜尋/結果頁面 (ASP 與 JSP)。

結果頁面會將 URL 參數傳送至刪除頁面，告訴刪除頁面應刪除哪些記錄。下一步是擷取要刪除的記錄。請參閱擷取要刪除的記錄 (ASP 與 JSP)。


擷取要刪除的記錄 (ASP 與 JSP)

當結果頁面將 URL 參數傳送到刪除頁面以識別要刪除的記錄 (請參閱界定要刪除的記錄 (ASP 與 JSP)) 之後，刪除頁面必須讀取參數、從資料庫表格擷取記錄，再將記錄暫存於資料集之中。

若要擷取要刪除的記錄：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集」。

    如果出現進階的對話方塊，請按下「簡單」按鈕開啟簡單對話方塊。

  2. 為資料集命名，使用「連線」與「表格」彈出式選單，指定您要刪除的資料位置。
  3. 在「欄」區域中，選取「全選」選項，選取資料庫表格中的所有欄。
  4. 設定「篩選器」區域，讓索引鍵欄的值等於結果頁面所傳送的對應 URL 參數值。

    這種篩選器會建立僅包含結果頁面所指定記錄的資料集。例如，如果索引鍵資料欄中包含了名為 PRID 的記錄 ID 資訊；而結果頁面傳送了名為 id 的 URL 參數之對應記錄 ID，則「篩選器」區域將會顯示如下：

  5. 按一下「確定」。

當使用者在結果頁面中選取記錄時，刪除頁面就會產生一筆僅包含所選取記錄的資料集。

建立刪除記錄頁面的下一步是顯示要刪除的記錄。請參閱顯示要刪除的資料 (ASP 與 JSP)。


顯示要刪除的資料 (ASP 與 JSP)

擷取要刪除的記錄 (請參閱擷取要刪除的記錄 (ASP 與 JSP)) 之後，在使用者刪除記錄之前，還會顯示此記錄讓使用者能再確認一次是否刪除。

若要加入將要刪除記錄的唯讀顯示：

  1. 請確定已定義資料集，儲存使用者要刪除的記錄。

    如需詳細資訊，請參閱擷取要刪除的記錄 (ASP 與 JSP)。

  2. 將資料集欄位由「繫結」面板 (「視窗＞繫結」) 拖曳到頁面中。

    頁面中便會出現動態內容。您可以將動態內容拖曳到頁面上，也可以拖曳到 HTML 表格中。如需詳細資訊，請參閱使文字成為動態。

建立刪除記錄頁面的下一步是將刪除命令傳送到伺服器。請參閱顯示要刪除的資料 (ASP 與 JSP)。


將刪除命令傳送到伺服器 (ASP 與 JSP)

在擷取並顯示要刪除的記錄之後，您必須加入使用者可點選刪除記錄的按鈕。刪除頁面會使用表單「送出」按鈕，將刪除指令傳送至伺服器。若要在頁面中加入「送出」按鈕，您必須建立 HTML 表單。表單中可以僅包含「送出」按鈕。

若要在刪除頁面中加入「送出」按鈕：

  1. 在「設計」檢視中，將插入點置於您希望「送出」按鈕出現的地方，再選取「插入＞表單＞表單」。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  2. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「刪除記錄」伺服器行為會為您設定這些屬性。

  3. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。
  4. 如果要更改「送出」按鈕上的標籤，請選取按鈕，開啟「屬性」檢視窗 (「視窗＞屬性」)，在「標籤」方塊中輸入新的值。

下一步是加入「刪除記錄」伺服器行為，在使用者按下「送出」按鈕之後更新資料庫表格。請參閱將刪除命令傳送到伺服器 (ASP 與 JSP)。


刪除資料庫表格中的記錄 (ASP 與 JSP)

加入了使用者可以點選以刪除記錄的按鈕 (請參閱將刪除命令傳送到伺服器 (ASP 與 JSP)) 後，最後一步就是新增「刪除記錄」伺服器行為，在使用者按一下「送出」按鈕之後更新資料庫表格。

若要加入伺服器行為以刪除資料庫表格：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」) 中，按一下加號 (+) 按鈕，再從彈出式選單中選取「刪除記錄」。

    「刪除記錄」對話方塊便會出現。

  2. 完成對話方塊。

    如需詳細資訊，請按一下對話方塊中的「說明」按鈕。

  3. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，將資料庫表格中的記錄刪除。


使用進階的資料操作物件來建立頁面 (ASP 與 JSP)

您可以使用 Dreamweaver 來建立使用預存程序、ASP 命令物件和 JSP 就緒陳述式的頁面。

本節包含下列主題：

  • 使用預存程序修改資料庫 (ASP 與 JSP)
  • 使用 ASP 命令修改資料庫
  • 使用 JSP 就緒陳述式來修改資料庫


使用預存程序修改資料庫 (ASP 與 JSP)

您可以使用預存程序修改資料庫。預存程序是能在資料庫執行某種作業，且可重複使用的資料庫項目。

注意

mySQL 以及 Microsoft Access 資料庫並不支援預存程序。

在使用預存程序修改資料庫之前，請先確定預存程序含有可以修改資料庫的 SQL。若要在資料庫中建立並儲存預存程序，請查詢資料庫的說明文件或是完整的 Transact-SQL 手冊。

使用預存程序的流程會因伺服器模式的不同而有所差異。

本節包含下列伺服器模式：

  • 執行預存程序 (ASP)
  • 執行預存程序 (JSP)

相關主題

  • 預存程序


執行預存程序 (ASP)

您必須先在 ASP 頁面中加入命令物件，才能執行預存程序。如需命令物件的詳細資訊，請參閱 ASP 命令物件。

若要在 ASP 頁面中加入預存程序：

  1. 在 Dreamweaver 中開啟要執行預存程序的頁面。
  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下加號 (+) 按鈕，然後再選取「命令 (預存程序)」。

    「命令」對話方塊便會出現。

  3. 為這個命令輸入名稱、選取含有預存程序的資料庫連線、然後再從「類型」彈出式選單中選取「預存程序」。
  4. 選取預存程序時，請展開「資料庫項目」方塊中的「預存程序」分支，從清單中選取預存程序，再按下「程序」按鈕。
  5. 在「變數」表格中輸入必須的參數。

    您不需要為任何 RETURN_VALUE 變數輸入任何參數。

  6. 按一下「確定」。

在關閉「預存程序」對話方塊之後，Dreamweaver 會在頁面中插入 ASP 程式碼，這個程式碼在伺服器上執行時，會建立在資料庫中執行預存程序的命令物件。預存程序就會執行如插入記錄之類的資料庫作業。

依預設值，程式碼會將「命令」物件的「就緒」屬性設定為 true，這樣在每次執行預存程序時，應用程式伺服器就會重複使用物件的單一編譯版本。如果您知道將會需要執行某項命令許多次，那麼使用經過編譯的物件將可使資料庫的運作更有效率。然而如果只會執行命令一兩次，那麼使用經過編譯的物件反而會降低網路應用程式的速度，因為系統必須要暫停以編譯命令。若要變更設定值，請切換為「程式碼」檢視並將「就緒」屬性變更為 false。

注意

但並非所有資料庫供應商都能支援就緒命令。如果您使用的資料庫不支援此功能，在執行頁面時可能會看到錯誤訊息。切換為「程式碼」檢視，將「就緒」屬性變更為 false。

如果預存程序需要參數，您可以建立收集所需參數值的頁面，再將參數送至含有預存程序的頁面。例如，您可以建立頁面，並使用 URL 參數或 HTML 表單向使用者取得參數值。


執行預存程序 (JSP)

您必須先在 JSP 頁面中加入「可呼叫」伺服器行為，才能執行預存程序。

若要在 JSP 頁面中加入預存程序：

  1. 在 Dreamweaver 中開啟要執行預存程序的頁面。
  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下加號 (+) 按鈕，再選取「可呼叫 (預存程序)」。

    「可呼叫 (預存程序)」對話方塊便會出現。

  3. 完成對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  4. 按一下「確定」。

在關閉「可呼叫 (預存程序)」對話方塊之後，Dreamweaver 會在您的頁面中插入 JSP 程式碼，這個程式碼在伺服器上執行時，會呼叫資料庫中的預存程序。預存程序就會執行如插入記錄之類的資料庫作業。

如果預存程序需要參數，您可以建立收集所需參數值的頁面，再將參數送至含有預存程序的頁面。例如，您可以建立頁面，並使用 URL 參數或 HTML 表單向使用者取得參數值。


使用 ASP 命令修改資料庫

您可以使用 Dreamweaver 建立可在資料庫中插入、更新或是刪除記錄的 ASP 命令物件。命令物件是一種可以在資料庫上進行某種作業的伺服器物件。您必須提供可在資料庫中執行作業的命令物件 (包含 SQL 陳述式)。如需詳細資訊，請參閱 ASP 命令物件。

您也可以提供物件執行作業的預存程序。如需詳細資訊，請參閱執行預存程序 (ASP)。

若要建立使用 SQL 的命令物件來編輯資料庫：

  1. 在 Dreamweaver 中開啟要執行命令的 ASP 頁面。
  2. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下加號 (+) 按鈕，再選取「命令」。

    「命令」對話方塊便會出現。

  3. 為這個命令輸入名稱、選取含有要編輯記錄的資料庫連線、選取您希望此命令執行的編輯作業─插入、更新或是刪除。

    Dreamweaver 會依據您選取的作業類型啟動 SQL 陳述式。例如，如果選擇「插入」，對話方塊便會顯示如下：

  4. 完成 SQL 陳述式。

    如需有關如何撰寫可修改資料庫的 SQL 陳述式的資訊，請查閱《Transact SQL》手冊。

  5. 請使用「變數」區域定義 SQL 變數。

    例如，以下就是包含三個 SQL 變數的「插入」陳述式。這些變數的值都是由傳送至頁面的 URL 參數 (在「變數」區域的「執行階段值」欄中所定義) 所提供。

    關閉對話方塊之後，Dreamweaver 會在頁面中插入 ASP 程式碼，在伺服器上執行此程式碼時，就會建立可在資料庫中插入、更新或刪除記錄的命令。

    依預設值，程式碼會將「命令」物件的「就緒」屬性設定為 true，這樣在每次執行命令時，應用程式伺服器都會重複使用物件的單一編譯版本。若要變更這個設定值，請切換為「程式碼」檢視並將「就緒」屬性變更為 false。

在以上的範例中，下一步您可能會建立含有 HTML 表單的頁面，讓使用者輸入記錄資料。HTML 表單中會包含三個文字欄位 (txtCity、txtAddress 和 txtPhone) 以及一個送出按鈕。此外，表單會使用 GET 方法並將文字欄位值送至包含此命令的頁面。


使用 JSP 就緒陳述式來修改資料庫

您可以使用 Dreamweaver 建立可在資料庫中插入、更新或刪除記錄的 JSP 就緒陳述式。JSP 就緒陳述式是含有 SQL 陳述式的可重複使用伺服器物件。您必須提供 SQL 就緒陳述式 (可在資料庫中執行作業)。如需詳細資訊，請參閱 JSP 就緒陳述式。

若要建立可編輯資料庫記錄的就緒陳述式：：

  1. 在 Dreamweaver 中開啟要執行命令的 JSP 頁面。
  2. 開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下加號 (+) 按鈕，再選取「就緒 (插入、更新、刪除)」。

    「就緒 (插入、更新、刪除)」對話方塊便會出現。

  3. 完成對話方塊。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  4. 按一下「確定」。

關閉對話方塊後，Dreamweaver 會在頁面中插入 JSP 程式碼，在伺服器上執行此程式碼時就會產生可在資料庫中插入、更新或刪除記錄的就緒陳述式。


建立限制存取網站的頁面 (ASP 與 JSP)

您可以使用 Dreamweaver 建立一組限制存取網站的頁面。您所使用的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)。


使用 JavaBeans (JSP)

JavaBeans 組件是多層式 JSP 應用程式的架構元素。通常，會將 JavaBeans 當作是中間「商務邏輯」層的一部份，目的是要將表示邏輯與資料存取邏輯區隔開來。在這些應用程式中，可以直接存取資料庫的邏輯是包含在 JavaBeans (也可以簡稱為 Beans) 中，而不是包含在 JSP 頁面中。

在 Dreamweaver 中，會將 JavaBeans 組件視為 JSP 頁面的動態內容來源，並將其顯示於「繫結」面板中。您可以在「繫結」面板中按兩下 JavaBeans，以檢視其屬性，然後將屬性拖曳至頁面中，以建立動態的資料參考。

您也可以將 JavaBeans 集合 (即一組 JavaBeans) 定義成動態內容的來源。但是，Dreamweaver 只有在使用 JavaBeans 集合時才支援重複區域和動態繫結。

Bean 類別的複本 (或是含有 Bean 類別的 .zip 或 .jar 檔案) 必須位於下列位置：

  • 在執行 Dreamweaver 的系統中，Bean 類別的複本必須位於 Dreamweaver 的 Configuration/classes 資料夾中，或是位於系統的類別路徑中(Dreamweaver 會在設計階段使用這個類別複本)。
  • 在執行 JSP 應用程式伺服器的系統上，Bean 類別必須位於應用程式伺服器的類別路徑中(您的應用程式伺服器會在執行期間使用這個複本)。不同的應用程式伺服器會有不同的應用程式伺服器類別路徑，但是類別路徑通常是指向含有 classes/bean 子資料夾的 WEB-INF 資料夾。

如果 Dreamweaver 和應用程式伺服器是在相同的系統中執行，而且應用程式伺服器使用的是系統類別路徑 (而非內部的類別路徑)，您可以只在該部電腦的系統類別路徑中放置一份 JavaBeans 的類別複本。應用程式伺服器和 Dreamweaver 將會共同使用這個類別複本。除了上述情況外，您必須在該部電腦的兩個不同路徑 (如上所述) 中放置 JavaBeans 類別的複本。

資料夾的結構必須符合 JavaBeans 套件的要求。例如，如果 JavaBeans 的套件名稱為 com.ardvark.myBean，則套件必須儲存於該類別路徑下的 /com/ardvark/ 目錄中，或是儲存於 Dreamweaver 的 Configuration/classes 資料夾中。

若要定義 JSP 頁面的 JavaBeans：

  1. 選取「視窗＞繫結」，顯示「繫結」面板。
  2. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「JavaBean」。

    JavaBean 對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請按一下對話方塊中的「說明」按鈕。

  4. 新定義的 Bean 便會出現在「繫結」面板中。

若要定義 JSP 頁面的 JavaBean 集合：

  1. 選取「視窗＞繫結」，顯示「繫結」面板。
  2. 按一下加號 (+) 按鈕，然後從彈出式選單中選取「JavaBean 集合」。

    「JavaBean 集合」對話方塊便會出現。

  3. 完成這個對話方塊並且按一下「確定」。

    如需相關說明，請按一下對話方塊的「說明」按鈕。

  4. 新定義的 JavaBean 集合便會出現在「繫結」面板中。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定前往細節頁面的對話方塊選項 (ASP 與 JSP)
  • 設定移到特定記錄的對話方塊選項 (ASP 與 JSP)
  • 設定前往相關頁面的對話方塊選項 (ASP 與 JSP)
  • 設定更新記錄的對話方塊選項 (ASP 與 JSP)
  • 設定刪除記錄的對話方塊選項 (ASP 與 JSP)
  • 設定命令 (預存程序) 的對話方塊選項
  • 設定可呼叫 (預存程序) 的對話方塊選項
  • 設定就緒 (插入、更新、刪除) 的對話方塊選項 (JSP)
  • 設定 JavaBean 的對話方塊選項
  • 設定 JavaBean 集合的對話方塊選項


設定前往細節頁面的對話方塊選項 (ASP 與 JSP)

這個對話方塊是用來建立可以開啟細節頁面並傳送記錄 ID 的連結，以便找到所要使用的記錄，並將該筆記錄顯示在細節頁面中。只有在 ASP 或 JSP 網站上工作時，才可以使用這個伺服器行為。

若要設定對話方塊選項：

  1. 在「細節頁面」方塊中，按一下「瀏覽」以尋找細節頁面。
  2. 指定要傳送至細節頁面的數值，方法是先選取一個資料集，然後從「資料集和欄」彈出式選單中選取一個欄。

    通常，每一筆記錄都會有一個唯一的數值，例如記錄的唯一索引鍵 ID。

  3. 您可以視情況需要，選取「URL 參數」或「表單參數」等選項，將現有的網頁參數傳送至細節頁面。
  4. 按一下「確定」。

Dreamweaver 就會在頁面中插入一個特殊連結。而當使用者按一下該連結時，就會將一個內含記錄 ID 的 URL 參數傳送至細節頁面中。


設定移到特定記錄的對話方塊選項 (ASP 與 JSP)

這個對話方塊是用來新增伺服器行為，在為頁面定義的資料集中尋找特定記錄。只有在使用 ASP 或 JSP 伺服器模式時，才可以使用這個伺服器行為。

使用這個伺服器行為的前置作業如下：

  • 由另一個頁面傳送到目前頁面的 URL 參數中所包含的記錄 ID。您可以使用 HTML 超連結或 HTML 表單，在另一個頁面上建立 URL 參數。如需詳細資訊，請參閱收集使用者送出的資料。
  • 為目前頁面定義的資料集。伺服器行為會從此資料集中擷取記錄細節。如需相關說明，請參閱定義資料集。
  • 將資料集欄繫結至頁面。必須在頁面上顯示特定記錄。如需詳細資訊，請參閱使文字成為動態。

若要新增伺服器行為：

  1. 在「移到記錄來源」彈出式選單中，選取您為頁面所定義的資料集。
  2. 在「欄來源」彈出式選單中，選取含有由其他頁面所傳送值的欄。

    例如，當其他頁面傳送的是記錄 ID 編號時，就選取含有記錄 ID 編號的欄。

  3. 在「比對 URL 參數」文字方塊中，輸入由其他頁面所傳送的 URL 參數名稱。

    例如，如果其他頁面用來開啟細節頁面的 URL 是 id=43，則在「比對 URL 參數」文字方塊中輸入 id。

  4. 按一下「確定」。

下一次瀏覽器再要求該頁面時，伺服器行為就會讀取其他頁面傳送 URL 參數中的記錄 ID，再移到資料集中指定的記錄。


設定前往相關頁面的對話方塊選項 (ASP 與 JSP)

這個對話方塊是用來建立可以開啟相關頁面的連結，並將現有的參數傳送到該頁面中。只有在使用 ASP 或 JSP 伺服器模式時，才可以使用這個伺服器行為。

在將「前往相關頁面」伺服器行為加入至頁面之前，請先確定該頁面可以接收其他頁面所傳來的表單或 URL 參數。伺服器行為的工作就是要將這些參數傳送至第三個頁面中。例如，您可以將接收自結果頁面的搜尋參數傳送至另一個頁面，以省去使用者必須重新輸入搜尋參數的麻煩。

此外，您也可以在頁面中選取要作為相關頁面連結的文字或影像；或者是將游標置於頁面中而不選取任何項目，讓 Dreamweaver 幫您插入連結文字。

若要設定對話方塊選項：

  1. 在「相關頁面」方塊中，按一下「瀏覽」以尋找相關頁面檔案。

    如果是由目前的頁面送出資料給其本身，就請輸入目前頁面的檔案名稱。

  2. 如果您所要傳送的參數是使用 GET 方法而直接從 HTML 表單接收，或是在頁面的 URL 清單中列出的話，請選取「URL 參數」選項。
  3. 如果您所要傳送的參數是使用 POST 方法而直接從 HTML 表單接收的話，請選取「表單參數」選項。
  4. 按一下「確定」。

當使用者按下這個新連結時，該頁面就會使用查詢字串將參數傳送至相關頁面。

相關主題

  • 收集使用者送出的資料


設定更新記錄的對話方塊選項 (ASP 與 JSP)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以更新資料庫表格中的記錄。

在開始之前，您必須先完成下列作業：

  • 您必須先建立一或多個頁面，讓使用者可以在上面找到要更新的記錄。如需詳細資訊，請參閱搜尋要更新的記錄 (ASP 與 JSP)。
  • 在更新頁面中加入邏輯，使其能從資料庫擷取使用者所選擇的記錄，以作為進行更新的準備。如需相關說明，請參閱擷取要更新的記錄 (ASP 與 JSP)。
  • 在更新頁面中加入 HTML 表單，讓使用者修改資料。如需相關說明，請參閱依組塊完成更新頁面 (ASP 與 JSP)。

這些前置作業完成之後，就可以完成「更新記錄」對話方塊。

若要設定對話方塊選項：

  1. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  2. 在「更新表格」彈出式選單中，選取含有要更新記錄的資料庫表格。
  3. 在「選取記錄來源」彈出式選單中，指定含有 HTML 表單所顯示記錄的資料集。
  4. 在「唯一索引鍵欄」彈出式選單中選取索引鍵欄 (通常是記錄 ID 欄)，以識別資料庫表格中的記錄。

    如果值為數字，請選取「數值」選項。索引鍵欄通常只能接受數值，但有時候也可以接受文字值。

  5. 在「更新後，請前往」文字方塊中，輸入更新表格記錄之後要開啟的頁面。
  6. 在「數值來源」彈出式選單中，選取用來編輯記錄資料的 HTML 表單。

    Dreamweaver 會自動選取頁面上的第一個表單。

  7. 指定要更新的資料庫欄，從「值」彈出式選單中選取要更新資料庫欄的表單物件，再從「送出為」彈出式選單為表單物件選取資料類型。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  8. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式來更新資料庫中的記錄。


設定刪除記錄的對話方塊選項 (ASP 與 JSP)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以刪除資料庫表格中的記錄。

在開始之前，您必須先完成下列作業：

  • 建立可讓使用者找到要刪除記錄的一或多個頁面。如需詳細資訊，請參閱界定要刪除的記錄 (ASP 與 JSP)。
  • 在刪除頁面中加入邏輯，使其能從資料庫擷取使用者選擇的記錄，以作為進行刪除的準備。如需相關說明，請參閱擷取要刪除的記錄 (ASP 與 JSP)。
  • 在頁面上顯示記錄，以便使用者在刪除記錄之前先檢視這筆記錄。如需相關說明，請參閱顯示要刪除的資料 (ASP 與 JSP)。
  • 在刪除頁面中加入具有「送出」按鈕的 HTML 表單，以將刪除命令傳送至伺服器。如需相關說明，請參閱將刪除命令傳送到伺服器 (ASP 與 JSP)。

這些前置作業完成之後，就可以完成「刪除記錄」對話方塊。

若要設定對話方塊選項：

  1. 在「連結」彈出式選單中，選取與資料庫的連結。

    如果需要定義連線，請按一下「定義」按鈕。

  2. 在「從表格刪除」彈出式選單中，選取含有您要刪除記錄的資料庫表格。
  3. 在「選取記錄來源」彈出式選單中，指定含有要刪除記錄的資料集。
  4. 在「唯一索引鍵欄」彈出式選單中選取索引鍵欄 (通常是記錄 ID 欄)，以識別資料庫表格中的記錄。

    如果值為數字，請選取「數值」選項。索引鍵欄通常只能接受數值，但有時候也可以接受文字值。

  5. 在「送出時刪除」彈出式選單中，指定包含「送出」按鈕 (可將刪除命令傳送至伺服器) 的 HTML 表單。
  6. 在「刪除後，請前往」文字方塊中，輸入刪除資料庫表格記錄之後要開啟的頁面，或是按下「瀏覽」按鈕瀏覽到檔案。
  7. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，將資料庫表格中的記錄刪除。


設定命令 (預存程序) 的對話方塊選項

這個對話方塊是用來在您的頁面中插入 ASP 命令物件。

您可以用命令物件來使用 SQL 陳述式或預存程序。

  • 若要配合 SQL 陳述式使用命令物件，請參閱使用 ASP 命令修改資料庫。
  • 若要配合預存程序使用命令物件，請參閱執行預存程序 (ASP)。

相關主題

  • ASP 命令物件
  • 預存程序


設定可呼叫 (預存程序) 的對話方塊選項

這個對話方塊是用來在您的 JSP 頁面中插入預存程序。

若要設定對話方塊選項：

  1. 輸入預存程序的名稱。
  2. 在「連線」彈出式選單中，選取含有預存程序的資料庫連線。
  3. 在「資料庫項目」文字方塊中展開「預存程序」分支，從清單中選取預存程序，再按下「程序」按鈕。

    Dreamweaver 會自動填入「可呼叫文字」與「變數」方塊。

  4. 選取「傳回資料集名稱」核取方塊並輸入資料集的名稱，如果預存程序傳回資料集，請按下「測試」按鈕查看預存程序所傳回的資料集。

    Dreamweaver 會執行預存程序並顯示資料集 (如果有)。

    注意

    如果預存程序傳回資料集且需要參數，您必須在「變數」方塊的「預設值」欄中輸入值，才能測試預存程序。

在關閉「可呼叫 (預存程序)」對話方塊之後，Dreamweaver 會在您的頁面中插入 JSP 程式碼，這個程式碼在伺服器上執行時，會呼叫資料庫中的預存程序。預存程序就會執行如插入記錄之類的資料庫作業。

相關主題

  • 執行預存程序 (JSP)
  • 預存程序


設定就緒 (插入、更新、刪除) 的對話方塊選項 (JSP)

這個對話方塊是用來建立可在資料庫中插入、更新或刪除記錄的就緒陳述式。

若要設定對話方塊選項：

  1. 為這個就緒陳述式輸入名稱，選取含有要編輯記錄的資料庫連線，再選取這個就緒陳述式要執行的編輯作業 — 插入、更新或是刪除。

    Dreamweaver 會依據您選取的作業類型啟動 SQL 陳述式。

  2. 完成 SQL 陳述式。

    如需有關如何撰寫可修改資料庫的 SQL 陳述式的詳細資訊，請查閱《Transact SQL》手冊。

  3. 請使用「變數」區域定義 SQL 變數。

    在「參數」欄位中，輸入 SQL 陳述式中所使用的 SQL 參數名稱。在「執行階段值」欄位中，輸入表單或 URL 參數以提供每個 SQL 參數的值。例如，假設指定給 SQL 參數的值是由名為 txtCity 的 URL 參數所提供，則輸入下列執行階段值：

    request.getParameter("txtCity")

關閉對話方塊後，Dreamweaver 會在頁面中插入 JSP 程式碼，在伺服器上執行此程式碼時就會產生可在資料庫中插入、更新或刪除記錄的就緒陳述式。

相關主題

  • 使用 JSP 就緒陳述式來修改資料庫
  • JSP 就緒陳述式


設定 JavaBean 的對話方塊選項

這個對話方塊會將 JavaBean 組件定義成頁面動態內容的來源。

若要定義 JavaBean 組件：

  1. 輸入 Bean 的名稱。
  2. 選取 Bean 的範圍。
  3. 選取 Bean 的類別。

    若要列出 .zip 或 .jar 檔案中的類別，請按一下「瀏覽」按鈕，然後選取檔案。

    類別是以下列格式來表示：

    packagename.classname
  4. 如果要為其中一個 JavaBean 屬性指定預設值，請從清單中選取屬性，然後在清單下方的「預設值」方塊中輸入值。

    您也可以將屬性的預設值設定為動態的值，方法是按一下「預設值」方塊旁的閃電圖示。

  5. 按一下「確定」。

    JavaBean 會顯示於「繫結」面板中。

相關主題

  • 使用 JavaBeans (JSP)


設定 JavaBean 集合的對話方塊選項

這個對話方塊會將 JavaBean 集合定義成頁面動態內容的來源。

若要定義 JavaBean 集合：

  1. 從「集合類別」彈出式選單中選取集合的類別。

    類別是以下列格式來表示：

    packagename.classname

    若要列出 .zip 或 .jar 檔案中的類別，請按一下「瀏覽」按鈕，然後選取檔案。

  2. 從「索引屬性」彈出式選單中選取其中一個集合索引屬性。
  3. Dreamweaver 會在「項目類別」文字方塊中顯示預設的名稱。如果所列出的名稱並不正確，請輸入正確的名稱。
  4. 從「範圍」彈出式選單中選取 Bean 的範圍。
  5. 按一下「確定」。

    新定義的內容來源就會顯示於「繫結」面板中。

相關主題

  • 使用 JavaBeans (JSP)


快速建立 PHP 應用程式

使用 Macromedia Dreamweaver 8 中的工具，幾乎不需要撰寫程式碼，就可以迅速建立 PHP 網路應用程式。

本章包含下列各節：

建立主要/細節頁面 (PHP)

建立搜尋/結果頁面 (PHP)

建立記錄插入頁面 (PHP)

建立用以更新記錄的頁面 (PHP)

建立用以刪除記錄的頁面 (PHP)

建立限制存取網站的頁面 (PHP)

相關主題

  • 關於快速應用程式開發 (所有伺服器)


建立主要/細節頁面 (PHP)

使用 Dreamweaver，您可以建立多套可以呈現兩個細節層級資訊的頁面：主要頁面會列出記錄，而細節頁面則會顯示更多關於各個記錄的詳細資料。本節說明如何建立這些類型的主要/細節頁面。

本節包含下列主題：

  • 一次建立主要/細節頁面 (PHP)
  • 依組塊建立個別的主要/細節頁面 (ASP 及 JSP)


一次建立主要/細節頁面 (PHP)

在開發 PHP 應用程式時，您可以使用「主要/細節頁面設定」應用程式物件，快速建立主要/細節頁面。應用程式物件讓您只要完成一兩個對話方塊，就可以建立一組完整的動態頁面。

您所使用的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱一次作業建立主要/細節頁面 (ColdFusion、ASP、JSP、PHP)。

您也可以使用個別伺服器行為來建立主要/細節頁面。如需詳細資訊，請參閱依組塊建立個別的主要/細節頁面 (ASP 及 JSP)。


依組塊建立個別的主要/細節頁面 (ASP 及 JSP)

您可以使用「伺服器行為」面板，分別新增主要/細節頁面的基本建置組塊。

您也可以使用「主要/細節頁面設定」應用程式物件，一次新增建置組塊。如需詳細資訊，請參閱一次建立主要/細節頁面 (PHP)。

本節說明建立一組主要/細節頁面的步驟：

  • 建立主要頁面 (PHP)
  • 建立細節頁面的連結 (PHP)
  • 建立連結的 URL 參數 (PHP)
  • 尋找並於細節頁面中顯示所要求的記錄 (PHP)


建立主要頁面 (PHP)

本節說明如何建立列出資料庫記錄的主要頁面。您可以使用動態表格在 PHP 頁面上列出記錄。

在您開始之前，請確定已為網站定義資料庫連線。如需詳細資訊，請參閱 PHP 開發人員的資料庫連線。

若要建立主要頁面：

  1. 在 Dreamweaver 中，建立新的 PHP 頁面。

    選取「檔案＞開新檔案＞動態」，然後選取「PHP」，再按一下「建立」。

    便會在 Dreamweaver 中開啟空白的 PHP 頁面。

  2. 定義頁面的資料集 (Recordset)。

    在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，選取「資料集 (查詢)」，然後完成「資料集」對話方塊。如需詳細資訊，請按一下對話方塊中的「說明」按鈕。如果您想要撰寫自己的 SQL 陳述式，按一下「進階」按鈕，開啟進階的「資料集」對話方塊。

    確定資料集包含您建立動態表格所需要的所有表格欄。資料集也必須包括表格欄，其中含有各筆記錄的唯一索引鍵─也就是記錄 ID 欄。在以下的範例中，CODE 欄含有識別出各筆唯一記錄的資訊。

    通常，主要頁面中的資料集會從資料庫表格中擷取少許的資料欄，而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄以提供更詳細的資訊。

    資料集可以由使用者在執行階段時加以定義。如需詳細資訊，請參閱建立搜尋/結果頁面 (PHP)。

  3. 請插入動態表格，以在頁面上顯示記錄。

    將插入點放在您希望動態表格在頁面上出現的位置，然後選取「插入＞應用程式物件＞動態資料＞動態表格」。

    「動態表格」對話方塊便會出現。

  4. 完成「動態表格」對話方塊，再按一下「確定」。

    Dreamweaver 會在頁面中插入動態表格。

    如果您需要完成「動態表格」對話方塊的說明，請按一下對話方塊上的「說明」按鈕。

  5. 如果想要的話，可以刪除含有記錄 ID 的動態表格欄。

    如果您不希望對使用者顯示記錄 ID，可以從動態表格中刪除欄位。按一下頁面中的任何地方，將焦點移到頁面中。將游標移到動態表格中欄位頂端附近，使欄位儲存格的外框變成紅色後，按一下以選取這個表格欄位。按 Delete 鍵，從表格中刪除這個資料欄。

建立主要/細節頁面的下一步，是建立開啟細節頁面的連結。請參閱建立細節頁面的連結 (PHP)。


建立細節頁面的連結 (PHP)

在建立動態表格 (請參閱建立主要頁面 (PHP)) 之後，必須建立開啟細節頁面的連結。本節說明如何建立連結。下一節說明如何修改連結，讓它也能傳送使用者所選取的記錄 ID。細節頁面將使用這個 ID 在資料庫中尋找所要求的記錄，然後加以顯示。

若要建立與細節頁面的連結：

  1. 在動態表格中，選取您想要連結的文字的動態內容預留位置。

    在以下的範例中，所選取的是 {rsLocations.LOCATION_NAME} 預留位置。連結將會套用到欄中的位置名稱。

  2. 在「屬性」檢視窗中，按一下「連結」欄位旁邊的資料夾圖示。
  3. 瀏覽並選取細節頁面。

    細節頁面會出現在「連結」欄位中。

    在動態表格中，動態內容的預留位置會顯示為已連結。如果您在伺服器上執行頁面，將可以看到連結套用到每個表格列中的文字。

建立主要/細節頁面的下一步，是建立傳送使用者所選取的記錄 ID 的 URL 參數。請參閱建立連結的 URL 參數 (PHP)。


建立連結的 URL 參數 (PHP)

主要頁面上動態表格中的連結(請參閱建立細節頁面的連結 (PHP))不僅必須開啟細節頁面，還必須傳送使用者選取的記錄 ID。細節頁面將使用這個 ID 在資料庫中尋找所要求的記錄，然後加以顯示。

記錄 ID 是以 URL 參數傳送到細節頁面。如需詳細資訊，請參閱 URL 參數。

本節說明如何建立將記錄 ID 傳送到細節頁面的 URL 參數。

若要建立 URL 參數：

  1. 選取動態表格中的連結。

    如果「即時資料」已開啟，選取第一列中的連結。

  2. 在「屬性」檢視窗的「連結」欄位中，在 URL 的結尾處新增下面的字串：
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>

    問號會告訴伺服器，後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱，因為稍後會在細節頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下，值是由會從資料集傳回記錄 ID 的 PHP 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 PHP 運算式中，請用資料集的名稱來取代 recordsetName，再用資料集中可唯一識別各筆一記錄的欄位名稱來取代 fieldName。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的。

    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    執行頁面時，會將資料集的 CODE 欄位值插入動態表格的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，那麼便會在動態表格的「坎培拉」列中使用下列 URL：

    locationDetail.php?recordID=CBR
  3. 儲存頁面。

建立主要/細節頁面的下一步是修改細節頁面，讓它可以在資料庫中尋找所要求的記錄，然後顯示在頁面上。請參閱尋找並於細節頁面中顯示所要求的記錄 (PHP)。


尋找並於細節頁面中顯示所要求的記錄 (PHP)

在完成主要頁面 (請參閱建立連結的 URL 參數 (PHP)) 之後，切換到細節頁面。您必須在資料庫中尋找所要求的記錄，並將其顯示於頁面中。相關的程序包含有定義保存單一資料的資料集 - 也就是主要頁面所要求的記錄，以及將資料集欄繫結至細節頁面中。

若要尋找所要求的記錄，並將該筆記錄顯示於細節頁面中：

  1. 切換到細節頁面，或建立新的 PHP 頁面 (如果上無此頁面)。
  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階「資料集」對話方塊，按一下「簡單」以切換到簡單「資料集」對話方塊。

  3. 為資料集命名，然後選取連結以及將提供資料給資料集的資料庫表格。
  4. 在「欄」區域中，選取要包含於資料集中的表格欄。

    資料集可以和主要頁面中的資料集相同或不同，通常，細節頁面中的資料集會提供較多的資料欄，以顯示較為詳細的資訊。

    如果是不同的資料集，請確定細節頁面上的資料集至少包含一個和主要頁面資料集共通的欄。共通的欄通常是記錄 ID 欄，但也可以是相關表格的結合欄位。

    若只想要將某些表格的資料欄納入資料集中，請按一下「已選取」，再從清單中 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 想要的資料欄，以將其選取。

  5. 依照下列方法完成「篩選器」區段，尋找和顯示主要頁面傳送的 URL 參數中所指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取資料集的欄，這個欄必須和主要頁面所傳送的 URL 參數值相同。例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。在前一節所討論的範例中，稱為 CODE 的資料集欄包含的值，與主要頁面所傳送的 URL 參數值相符。
    • 請在第一個選單旁的彈出式選單中，選取等號 (如果尚未選取)。
    • 在第三個彈出式選單中，選取「URL 參數」。

      主要頁面是使用 URL 參數將資訊傳送到細節頁面。

    • 在第四個方塊中，請輸入由主要頁面所傳送之 URL 參數的名稱。

      例如，如果主要頁面所用來開啟細節頁面的 URL，含有字尾 locationDetail.php?recordID=CBR，則輸入 recordID。

    「資料集」對話方塊外觀應如下所示：

  6. 按一下「確定」。

    資料集會在「繫結」面板中出現。

  7. 若要將資料集欄繫結至細節頁面，請選取「繫結」面板中的欄 (「視窗＞繫結」)，然後將它們拖曳到頁面中。

    如需詳細資訊，請參閱使文字成為動態。

PHP 主要/細節頁面設定已完成。

在建立主要/細節頁面之後，可以使用「伺服器行為」面板 (「視窗＞伺服器行為」) 修改各個建置組塊。


建立搜尋/結果頁面 (PHP)

您可以使用 Dreamweaver 建立一套允許使用者搜尋資料庫的頁面。您所使用的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱建立搜尋/結果頁面 (ColdFusion、ASP、JSP、PHP)。


建立記錄插入頁面 (PHP)

您可以使用 Dreamweaver 來建立讓使用者在資料庫中插入新記錄的頁面。您所使用的方法對於 Dreamweaver 所支援的所有伺服器技術都是完全相同的。如需相關說明，請參閱建立記錄插入頁面 (所有伺服器)。


建立用以更新記錄的頁面 (PHP)

應用程式中可以包含讓使用者更新資料庫表格中現有記錄的一組頁面。這些頁面通常是由搜尋頁面、結果頁面及更新頁面所組成的。搜尋及結果頁面讓使用者擷取記錄，更新頁面則讓使用者修改記錄。

本節說明建立更新記錄的頁面的步驟：

  • 搜尋要更新的記錄 (PHP)
  • 建立可開啟更新頁面的連結 (PHP)
  • 建立連結的 URL 參數 (PHP)
  • 擷取要更新的記錄 (PHP)
  • 一次完成更新頁面 (PHP)
  • 依組塊個別完成更新頁面 (PHP)

相關主題

  • 建立記錄插入頁面 (所有伺服器)
  • 建立用以刪除記錄的頁面 (PHP)


搜尋要更新的記錄 (PHP)

使用者要更新記錄之前，必須先在資料庫中找到記錄。因此，您必須為更新頁面搭配搜尋頁面與結果頁面。使用者在搜尋頁面中輸入搜尋準則，並選取結果頁面中的記錄。當使用者按一下記錄時，更新頁面便會開啟，並以 HTML 表單顯示記錄。

如需建立頁面以搜尋要更新之記錄的相關說明，請參閱建立搜尋/結果頁面 (PHP)。

在建立搜尋/結果頁面之後，下一步就是在結果頁面上建立連結，按一下連結便會開啟更新頁面。請參閱建立可開啟更新頁面的連結 (PHP)。


建立可開啟更新頁面的連結 (PHP)

在建立搜尋/結果頁面 (請參閱搜尋要更新的記錄 (PHP)) 之後，您必須在結果頁面上建立連結，以開啟更新頁面並在 HTML 表單中顯示所選取的記錄。本節說明如何建立連結。下一節說明如何修改連結，讓它也能傳送使用者所選取的記錄 ID。更新頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

若要建立更新頁面的連結：

  1. 在結果頁面中，為您想要連結的文字選取動態內容預留位置。

    在以下的範例中，所選取的是 {rsLocations.LOCATION_NAME} 預留位置。連結將會套用到欄中的位置名稱。

  2. 在「屬性」檢視窗中，按一下「連結」欄位旁邊的資料夾圖示。
  3. 瀏覽及選取更新頁面。

    更新頁面會出現在「連結」欄位中。

    在結果頁面中，動態內容的預留位置會顯示為已連結。如果您將頁面上傳到伺服器，然後執行搜尋，就可以看到連結套用到結果頁面上的每筆記錄。

建立記錄更新頁面的下一步是建立 URL 參數，以傳送使用者所選取的記錄 ID。請參閱建立連結的 URL 參數 (PHP)。


建立更新連結的 URL 參數 (PHP)

結果頁面上的連結 (請參閱建立可開啟更新頁面的連結 (PHP)) 不僅必須開啟更新頁面，還必須傳送使用者所選取記錄的 ID。更新頁面會使用這個 ID 在資料庫中尋找所要求的記錄，然後顯示它。

記錄 ID 是以 URL 參數傳送到更新頁面。如需詳細資訊，請參閱 URL 參數。

本節說明如何建立將記錄 ID 傳送到更新頁面的 URL 參數。

若要建立 URL 參數：

  1. 選取結果頁面上的連結。
  2. 在「屬性」檢視窗的「連結」欄位中，在 URL 的結尾處新增下面的字串：
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>

    問號會告訴伺服器，後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱，因為稍後您將會在更新頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下，值是由會從資料集傳回記錄 ID 的 PHP 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 PHP 運算式中，請用資料集的名稱來取代 recordsetName，再用資料集中可唯一識別各筆一記錄的欄位名稱來取代 fieldName。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的。

    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    執行頁面時，會將資料集的 CODE 欄位值插入動態表格的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，那麼便會在動態表格的「坎培拉」列中使用下列 URL：

    locationDetail.php?recordID=CBR
  3. 儲存頁面。

下一步是修改更新頁面，讓其可在資料庫中尋找所要求的記錄，並顯示於頁面中。請參閱擷取要更新的記錄 (PHP)。


擷取要更新的記錄 (PHP)

當結果頁面將 URL 參數傳送到更新頁面以識別要更新的記錄 (請參閱建立更新連結的 URL 參數 (PHP)) 之後，更新頁面必須讀取參數、從資料庫表格擷取記錄，再將記錄暫存於資料集之中。

若要擷取要更新的記錄：

  1. 在 Dreamweaver 中建立新的 PHP 頁面，並將其儲存。

    此頁面將會成為更新頁面。

  2. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後選取「資料集」。

    如果出現進階的對話方塊，請按下「簡單」按鈕開啟簡單對話方塊。

  3. 為資料集命名，並使用「連線」與「表格」彈出式選單，指定您要更新資料的位置。
  4. 按下「已選取」選項並選取索引鍵欄位 (通常是記錄 ID 欄位) 以及包含要更新資料的欄位。
  5. 設定「篩選器」區域，讓索引鍵欄的值等於結果頁面所傳送的對應 URL 參數值。

    這種篩選器會建立僅包含結果頁面所指定記錄的資料集。例如，如果索引鍵資料欄中包含了名為 PRID 的記錄 ID 資訊；而結果頁面傳送了名為 id 的 URL 參數之對應記錄 ID，則「篩選器」區域將會顯示如下：

  6. 按一下「確定」。

當使用者在結果頁面中選取記錄時，更新頁面會產生僅包含選取記錄的資料集。

在修改更新頁面以從資料庫擷取記錄，並將它儲存在資料集中後，就必須新增表單讓使用者修改記錄資料，並新增更新資料庫所需要的邏輯。您可以一次或依組塊完成這些工作。請參閱一次完成更新頁面 (PHP) 或依組塊個別完成更新頁面 (PHP)。


一次完成更新頁面 (PHP)

更新頁面中有三個建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要更新的記錄 (PHP))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以使用「記錄更新表單」應用程式物件，一次加入更新頁面的最後兩個建置組塊。這個應用程式物件會在頁面中加入 HTML 表單以及「更新記錄」伺服器行為。

在使用應用程式物件之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (PHP)、建立可開啟更新頁面的連結 (PHP)、建立連結的 URL 參數 (PHP) 和擷取要更新的記錄 (PHP)。

應用程式物件在頁面中加入建置組塊之後，您就可以使用 Dreamerweaver 設計工具自訂您要的表單，或使用「伺服器行為」面板編輯「更新記錄」伺服器行為。

注意

更新頁面中一次只能存在一種編輯記錄的伺服器行為。例如，您無法在更新頁面中新增「插入記錄」或「刪除記錄」伺服器行為。

若要使用「記錄更新表單」應用程式物件建立更新頁面：

  1. 在「設計」檢視中開啟更新頁面，然後選取「插入＞應用程式物件＞更新記錄＞記錄更新表單精靈」。

    「記錄更新表單」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定記錄插入表單的對話方塊選項。

  3. 按一下「確定」。

應用程式物件會在頁面中新增 HTML 表單與「更新記錄」伺服器行為。表單物件會先放置在基本的表格中，您可以使用 Dreamweaver 頁面設計工具自訂表格物件 (請確定所有表單物件都放置在表單的邊界內)。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 依組塊個別完成更新頁面 (PHP)


依組塊個別完成更新頁面 (PHP)

更新頁面中有三個建置組塊：

  • 可從資料庫表格擷取記錄並已篩選過的資料集 (請參閱擷取要更新的記錄 (PHP))
  • 供使用者修改記錄資料的 HTML 表單
  • 可更新資料庫表格的「更新記錄」伺服器行為

您可以分別使用表單工具與「伺服器行為」面板，在更新頁面中加入最後兩個基本的建置組塊。

在加入建置組塊之前，您的網路應用程式必須能識別要更新的記錄，且更新頁面必須要能取得這筆記錄。請參閱搜尋要更新的記錄 (PHP)、建立可開啟更新頁面的連結 (PHP)、建立連結的 URL 參數 (PHP) 和擷取要更新的記錄 (PHP)。

完成更新頁面的步驟包含了三個工作：

  • 在頁面中新增 HTML 表單，讓使用者可以修改資料
  • 藉由將表單物件與資料庫表格資料欄繫結的方式，顯示表單中的記錄
  • 在使用者修改記錄後，加入「更新記錄」伺服器行為，以更新資料庫表格

若要在更新頁面中加入 HTML 表單：

  1. 建立新的 PHP 頁面 (「檔案＞開新檔案」)。

    此頁面將會成為更新頁面。

  2. 使用 Dreamweaver 設計工具配置頁面。
  3. 在您希望表單出現的地方放置插入點，並在「插入」選單中選取「表單」，以新增 HTML 表單。

    網頁上就會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，才能看見表單的邊界 (以紅色細線表示)。

  4. 要為 HTML 表單命名時，請按一下「文件」視窗最下方的 <form> 標籤以選取表單，然後開啟「屬性」檢視窗 (「視窗＞屬性」) 並在「表單名稱」方塊中輸入名稱。

    您不需要針對當使用者按下「送出」按鈕時表單傳送記錄資料的方式與位置，來指定表單的 action 或 method 屬性。「更新記錄」伺服器行為會為您設定這些屬性。

  5. 在資料庫表格中每一個要更新的資料欄中，加入表單物件。以文字欄位為例，即為「插入＞表單＞文字欄位」。

    這些表單物件將用來輸入資料。通常用來輸入資料的是文字欄位，但您也可以使用選單、核取方塊或是選項按鈕。

    每一個表單物件應該有對應欄 (在之前定義的記錄集中)。唯一的例外是唯一索引鍵欄，這個欄位並沒有對應的表單物件。

    如需詳細資訊，請參閱插入 HTML 表單物件。

  6. 在表單中新增「送出」按鈕 (「插入＞表單＞按鈕」)。

    如果要更改「送出」按鈕上的標籤，請選取按鈕，開啟「屬性」檢視窗 (「視窗＞屬性」)，在「標籤」方塊中輸入新的值。

若要在表單中顯示記錄：

  1. 請確定已定義資料集，以儲存使用者所要更新的記錄。

    如需詳細資訊，請參閱擷取要更新的記錄 (PHP)。

  2. 將各表單物件繫結至資料集中的資料，如下列各節所述：
    • 在 HTML 文字欄位中顯示動態內容
    • 動態式預先選取 HTML 核取方塊
    • 動態式預先選取 HTML 選項按鈕
    • 建立動態 HTML 表單選單
    • 使現有的 HTML 表單選單呈現動態效果

若要加入更新資料庫表格的伺服器行為：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，從彈出式選單中選取「更新記錄」。

    「更新記錄」對話方塊便會出現。

  2. 完成對話方塊。

    如需相關說明，請參閱設定更新記錄對話方塊選項 (PHP)。

  3. 按一下「確定」。

    Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式，更新資料庫中的記錄。

若要編輯伺服器行為，請開啟「伺服器行為」面板 (「視窗＞伺服器行為」)，再按兩下「更新記錄」行為。

相關主題

  • 一次完成更新頁面 (PHP)


建立用以刪除記錄的頁面 (PHP)

應用程式中可以包含一組讓使用者刪除資料庫記錄的頁面。這些頁面通常是由搜尋頁面、結果頁面及刪除頁面所組成的。搜尋及結果頁面可讓使用者擷取記錄，而刪除頁面則可讓使用者刪除記錄。

本節說明以下建立刪除記錄的 PHP 頁面的步驟：

  • 搜尋要刪除的記錄 (PHP)
  • 建立確認頁面的連結 (PHP)
  • 建立傳送到確認頁面的 URL 參數 (PHP)
  • 在確認頁面中顯示記錄 (PHP)
  • 新增要用以刪除記錄的邏輯 (PHP)


搜尋要刪除的記錄 (PHP)

使用者要刪除記錄之前，必須先在資料庫中找到該記錄。因此，您必須為刪除頁面搭配搜尋頁面與結果頁面。使用者在搜尋頁面中輸入搜尋準則，並選取結果頁面中的記錄。當使用者按一下記錄時，刪除頁面便會開啟並顯示記錄。

如需有關建立頁面以搜尋要刪除之記錄的說明，請參閱建立搜尋/結果頁面 (PHP)。

在建立搜尋/結果頁面之後，下一步是在結果頁面上建立連結，以開啟刪除確認頁面。請參閱建立確認頁面的連結 (PHP)。


建立確認頁面的連結 (PHP)

在建立結果頁面 (請參閱搜尋要刪除的記錄 (PHP)) 之後，您必須建立連結，讓使用者在按一下該連結後，便會開啟要求使用者確認刪除的頁面。本節說明如何建立連結。下一節會說明如何修改連結，讓其也能傳送使用者要刪除的記錄 ID。

若要建立確認頁面的連結：

  1. 在結果頁面中，於最後一個表格欄內按一下，然後選取「修改＞表格＞插入列或欄」，建立表格中用來顯示記錄的新欄。

    「插入列或欄」對話方塊便會出現。

  2. 選取「欄」選項，然後選取「在現在的欄之後」選項。

    按一下「確定」之後，Dreamweaver 便會在表格中新增欄。

  3. 在新建立的表格欄中，於包含動態內容預留位置的列中輸入字串 Delete。請確定您是在標籤重複區域內輸入該字串。

    您也可以插入代表刪除文字或符號的影像。

    如果「即時資料」已開啟，在記錄的第一列中輸入字串，然後按一下「重新整理」圖示。

  4. 選取 Delete 字串以套用連結。

    如果「即時資料」已開啟，選取記錄的第一列中的字串。

  5. 在「屬性」檢視窗中，在「連結」欄位中輸入確認頁面。

    您可以輸入任何您想要的檔案名稱。

在「連結」欄位外按一下之後，Delete 字串在表格中便會顯示為連結。

建立連結之後，建立記錄刪除頁面的下一步便是建立連結的 URL 參數。請參閱建立傳送到確認頁面的 URL 參數 (PHP)。


建立傳送到確認頁面的 URL 參數 (PHP)

結果頁面上的連結 (請參閱建立確認頁面的連結 (PHP)) 不僅必須開啟確認頁面，還必須傳送使用者所要刪除記錄的 ID。確認頁面將使用這個 ID 在資料庫中尋找記錄，再加以顯示。

您必須使用 URL 參數將記錄 ID 傳送到確認頁面。本節說明如何建立將記錄 ID 傳送到確認頁面的 URL 參數。

若要建立 URL 參數：

  1. 選取結果頁面上的「刪除」連結。

    如果「即時資料」已開啟，選取第一列中的連結。

  2. 在「屬性」檢視窗的「連結」欄位中，在 URL 的結尾處新增下面的字串：
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>

    問號會告訴伺服器，後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱，因為稍後會在確認頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下，值是由會從資料集傳回記錄 ID 的 PHP 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 PHP 運算式中，請用資料集的名稱來取代 recordsetName，再用資料集中可唯一識別各筆一記錄的欄位名稱來取代 fieldName。大部份情況下，欄位會由記錄 ID 編號所構成。在以下範例中，欄位是由唯一位置碼所構成的：

    confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    執行頁面時，會將資料集的 CODE 欄位值插入動態表格的對應列中。例如，如果澳洲坎培拉 (租賃位置) 的碼是 CBR，那麼便會在動態表格的「坎培拉」列中使用下列 URL：

    confirmDelete.php?recordID=CBR
  3. 儲存頁面。

建立刪除連結的動態 URL 參數之後，下一步就是在確認頁面中顯示記錄。請參閱在確認頁面中顯示記錄 (PHP)。


在確認頁面中顯示記錄 (PHP)

在完成列出記錄的頁面 (請參閱建立傳送到確認頁面的 URL 參數 (PHP) 之後，切換到確認頁面。確認頁面會顯示記錄，並詢問使用者是否確定要刪除該記錄。當使用者按一下表單按鈕，確認作業後，網路應用程式就會從資料庫中刪除記錄。

顯示記錄包含三項作業：

  • 建立 HTML 表單
  • 擷取記錄以顯示於表單中
  • 在表單中顯示記錄

擷取及顯示記錄包含定義資料集以保留單一記錄 (使用者想要刪除的記錄)，以及繫結資料集欄與頁面。詳細步驟如下所述。

若要建立顯示記錄的 HTML 表單：

  1. 建立新的 PHP 頁面，將它儲存成前一節中所指定的確認頁面。

    您在前一節中建立「刪除」連結時，指定了確認頁面。第一次儲存檔案時，請使用這個名稱 (例如，deleteConfirm.php)。

  2. 在頁面上插入 HTML 表單 (「插入＞表單＞表單」)。
  3. 在表單中新增隱藏表單欄位。

    如果要儲存 URL 參數所傳送的記錄 ID，就需要隱藏表單欄位。若要新增隱藏欄位，請將插入點放在表單中，然後選取「插入＞表單＞隱藏欄位」。

  4. 新增按鈕至表單中。

    使用者會按一下按鈕確認，然後刪除顯示的記錄。若要新增按鈕，請將插入點放在表單中，然後選取「插入＞表單＞按鈕」。

  5. 視需要增強頁面的設計，然後儲存它。

若要擷取使用者想要刪除的記錄：

  1. 在「繫結」面板 (「視窗＞繫結」) 中，按一下「加號 (+)」按鈕，然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階「資料集」對話方塊，按一下「簡單」以切換到簡單「資料集」對話方塊。

  2. 為資料集命名，然後選取連結以及含有可顯示記錄的資料庫表格。
  3. 在「欄」區域中，選取您想要在頁面上顯示的表格欄 (記錄欄位)。

    若只要顯示部份的記錄欄位，按一下「已選取」，然後在清單中按住 Control + 按一下 (Windows) 或 Command + 按一下 (Macintosh) 來選取所要的欄位。

    即使您不想顯示記錄 ID 欄位，也請確定會包含它。

  4. 依照下列方法完成「篩選器」區段，以尋找和顯示結果頁面所傳送之 URL 參數中指定的記錄：
    • 在「篩選器」區域的第一個彈出式選單中，選取資料集的欄，這個欄必須和有「刪除」連結的頁面所傳送的 URL 參數值相符。例如，如果 URL 參數中含有一筆記錄 ID 編號，則應選取含有記錄 ID 編號的欄。在前一節所討論的範例中，稱為 CODE 的資料集欄包含的值與含「刪除」連結的頁面所傳送的 URL 參數值相符。
    • 在第一個選單旁的彈出式選單中，選取等號 (如果尚未選取)。
    • 在第三個彈出式選單中，選取「URL 參數」。有「刪除」連結的頁面是使用 URL 參數將資訊傳送到確認頁面。
    • 在第四個方塊中，輸入含「刪除」連結的頁面所傳送的 URL 參數名稱。

      例如，如果用來開啟確認頁面的 URL，含有字尾 confirmDelete.php?recordID=CBR，則輸入 recordID。

      「資料集」對話方塊外觀應如下所示：

  5. 按一下「確定」。

    資料集會在「繫結」面板中出現。

若要顯示使用者想要刪除的記錄：

  1. 在「繫結」面板中選取資料集欄 (記錄欄位)，然後拖曳到您插入至頁面中的表單。

    如需詳細資訊，請參閱使文字成為動態。

    接下來，您必須繫結記錄 ID 欄和隱藏表單欄位。

  2. 確定已開啟「隱藏元素」(「檢視＞視覺輔助＞隱藏元素」)，然後按一下代表隱藏表單欄位的黃色盾形圖示。

    隱藏表單欄位已選取。

  3. 在「屬性」檢視窗中，按一下「值」文字方塊旁的閃電圖示。

    「動態資料」對話方塊便會顯示。

  4. 在「動態資料」對話方塊中，選取資料集中的記錄 ID 欄，然後按一下「確定」。

    在以下範例中，所選取的記錄 ID 欄是 CODE。

  5. 儲存頁面。

    完成的確認頁面外觀應如下所示：

在建立確認頁面之後，建立記錄刪除頁面的下一步就是新增刪除記錄的邏輯。請參閱新增要用以刪除記錄的邏輯 (PHP)。


新增要用以刪除記錄的邏輯 (PHP)

在建立確認頁面 (請參閱在確認頁面中顯示記錄 (PHP)) 之後，建立記錄刪除頁面的下一步是在確認頁面中新增邏輯，以便讓使用者在按一下「確認」按鈕時，就能從資料庫刪除記錄。您可以利用「刪除記錄」伺服器行為，輕鬆快速地在 Dreamweaver 中新增此邏輯。

若要新增邏輯，刪除 HTML 表單中所顯示的記錄：

  1. 在「伺服器行為」面板 (「視窗＞伺服器行為」)，按一下「加號 (+)」按鈕，然後選取「刪除記錄」。

    「刪除記錄」對話方塊便會出現。

  2. 在「先檢查是否定義了變數為」文字方塊中，確定已選取「主索引鍵值」。

    稍後在對話方塊中指定主索引鍵值。

  3. 在「連線」彈出式選單中，選取資料庫的連線，讓伺服器行為可以連線到受影響的資料庫。
  4. 在「表格」彈出式選單中，選取含有將要刪除記錄的資料庫表格。
  5. 在「主索引鍵欄位」彈出式選單中，選取含有記錄 ID 的表格欄。

    「刪除記錄」伺服器行為將會在此欄中搜尋相符的結果。此欄中包含的記錄 ID 資料，應與您繫結到頁面中的隱藏表單欄位的資料集欄相同。

    如果記錄 ID 是數值，則選取「數值」選項。

  6. 在「主索引鍵值」彈出式選單中，在頁面上選取含有識別要刪除記錄的記錄 ID 變數。

    變數是由隱藏表單欄位所建立的。其名稱和隱藏欄位的 name 屬性的名稱相同，若非表單就是 URL 參數，視表單的 method 屬性而定。在我們的範例中，變數是稱為 hiddenRecID 的表單變數。

  7. 在「刪除後，請前往」文字方塊中，指定從資料庫表格中刪除記錄後所要開啟的頁面。

    您可以指定含有給使用者的簡短成功訊息的頁面，或是列出剩餘記錄的頁面，讓使用者可以確認記錄已經刪除。

    完成的「刪除記錄」對話方塊外觀應如下所示：

  8. 按一下「確定」儲存工作。

    將頁面上傳到您的網站伺服器 (如有需要)，開啟瀏覽器，然後搜尋要刪除的記錄。當您按一下結果頁面上的「刪除」連結時，確認頁面便會出現。按一下「確認」按鈕，從資料庫中刪除記錄。若要確認記錄已經刪除，請再次開啟有「刪除」連結的頁面。記錄不會再出現在清單中。

    注意

    如果記錄仍然出現在頁面中，請按一下「重新整理」。


建立限制存取網站的頁面 (PHP)

您可以使用 Dreamweaver 建立一組限制存取網站的頁面。您所使用的方法和 ColdFusion 是完全相同的。如需相關說明，請參閱建立限制網站存取的頁面 (ColdFusion、ASP、JSP、PHP)。


參考

本節將說明這一章中所介紹的下列對話方塊：

  • 設定更新記錄對話方塊選項 (PHP)
  • 設定刪除記錄的對話方塊選項 (PHP)


設定更新記錄對話方塊選項 (PHP)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以更新資料庫表格中的記錄。

在開始之前，您必須先完成下列作業：

  • 您必須先建立一或多個頁面，讓使用者可以在上面找到要更新的記錄。如需詳細資訊，請參閱搜尋要更新的記錄 (PHP)。
  • 在更新頁面中加入邏輯，使其能從資料庫擷取使用者所選擇的記錄，以作為進行更新的準備。如需相關說明，請參閱擷取要更新的記錄 (PHP)。
  • 在更新頁面中加入 HTML 表單，讓使用者修改資料。如需相關說明，請參閱依組塊個別完成更新頁面 (PHP)。

這些前置作業完成之後，就可以完成「更新記錄」對話方塊。

若要設定對話方塊選項：

  1. 從「送出值來源」彈出式選單中選取表單。
  2. 在「連結」彈出式選單中，選取與資料庫的連結。
  3. 在「更新表格」彈出式選單中，選取含有您要更新記錄的資料庫表格。
  4. 指定要更新的資料庫欄，從「值」彈出式選單選取要更新資料庫欄的表單物件，再由「送出為」彈出式選單為表單物件選擇資料類型。如果要將此欄指定為主索引鍵，請選取「主索引鍵」。

    資料類型是您的資料庫表格欄所要接受的資料種類 (文字、數字、布林核取方塊值)。

    對表單中每一個表單物件重複這個程序。

  5. 在「更新後，請前往」文字方塊中，輸入更新表格記錄之後要開啟的頁面，或是按下「瀏覽」按鈕瀏覽到檔案。
  6. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單「送出」按鈕的方式來更新資料庫中的記錄。


設定刪除記錄的對話方塊選項 (PHP)

這個對話方塊是用來在包含 HTML 表單的頁面中加入伺服器行為，這樣在使用者按下表單中的「送出」按鈕時，就可以刪除資料庫表格中的記錄。

若要設定對話方塊選項：

  1. 在「先檢查是否定義了變數」彈出式選單中，指定含有「送出」按鈕可傳送刪除命令給伺服器的 HTML 表單。
  2. 在「連線」彈出式選單中，選取與資料庫的連線。
  3. 在「表格」彈出式選單中，選取含有要刪除記錄的資料庫表格。
  4. 在「主索引鍵欄」彈出式選單中，選取用來識別資料庫表格中記錄的索引鍵欄。
  5. 在「主索引鍵值」彈出式選單中，指定可識別要刪除記錄的變數。
  6. 在「刪除後，請前往」文字方塊中，輸入刪除資料庫表格記錄之後要開啟的頁面，或是按下「瀏覽」按鈕瀏覽到檔案。
  7. 按一下「確定」。

Dreamweaver 會在頁面中加入伺服器行為，讓使用者以按下表單中「送出」按鈕的方式，刪除資料庫表格中的記錄。


附錄

取得更多說明，協助開發網路應用程式。

這部份包含下列各章：

資料庫入門手冊

SQL 入門


資料庫入門手冊

此附錄是專為很少或從未曾使用過資料庫或資料庫連線的 Macromedia Dreamweaver 8 使用者而設計。它針對一般性的概念，而非特定程序來加以解釋。若要查看這些概念如何套用在實作上，請參閱說明系統的其他部份。

附錄描述如何設計資料庫，但未針對如何在應用程式 (如 Microsoft Access 或 SQL Server) 中建立資料庫加以說明。在您的資料庫系統隨附之書面或線上文件中會描述該處理程序。

附錄包含下列各節：

關於資料庫

資料庫設計基本概念

了解資料庫連結


關於資料庫

資料庫的建置區塊是記錄。記錄是被視為單一實體的相關資料之集合。例如，一張曲棍球交易卡可以稱為一筆記錄：它將某球員的姓名、照片、隊別和統計資料都放在一起。用資料庫用語來說，這些相關的每個資訊片段稱為「欄位」：每筆曲棍球卡「記錄」都有一個姓名欄位、照片欄位、隊別欄位和各種統計資料欄位。

共享相同欄位的記錄集合叫做表格，因為這種資訊可以用表格格式輕易地表示出來：每欄代表一個欄位，而每列代表一筆記錄。事實上，欄 (column) 這個字與欄位 (field) 同義，而列 (row) 這個字則與記錄同義。

資料庫可以包含一個以上的表格，每個表格需有唯一的名稱。這些表格可以彼此相關或相互獨立。

從一或多個表格抽取出來的資料子集叫做資料集 (或在 ASP.NET 中稱為 DataSet (資料集))。資料集也是一個表格，因為它是共享相同資料欄的記錄集合。例如，列出球員姓名和攻防位置的曲棍球隊名冊就可以稱為一個資料集：它是由與球員相關的所有可能資訊之子集所組成，包括射門、補殺、罰球時機等等。

若要建立資料集，請您執行資料庫查詢。查詢是由搜尋準則組成的。例如，查詢可以指定只在資料集內包含某些特定欄，或只包含某些特定記錄。如需詳細資訊，請參閱了解資料集。

相關主題

  • 資料庫設計基本概念
  • 了解資料庫連結


資料庫設計基本概念

資料庫設計是建置任何資料庫導向網站的第一步。本節利用一個案例研究來解釋基本的資料庫設計原則。此案例研究會使用到名為 Arrow Aircraft Services 的虛構公司授權之網路應用程式，該公司的業務為管理一小批私人擁有的商用飛機。

資料庫設計是由一系列的共同步驟構成的。首先，請研究要在網路應用程式中反映出來的業務規則和政策。第二，考慮使用者針對資料庫提出的問題。第三，定義資料庫的結構。最後，建立資料庫。

本節包含下列主題：

  • 研究 Arrow Aircraft 的業務規則和政策
  • 研究 Arrow Aircraft 的功能要求
  • 使用者將針對資料庫提出何種問題呢？
  • 選擇資料庫的所屬表格
  • 在每個表格中選擇欄
  • 定義表格之間的關係
  • 建立資料庫


研究 Arrow Aircraft 的業務規則和政策

您已被約聘來負責為 Arrow Aircraft Services 建置一個網路應用程式。在開始設計資料庫之前，請確定您已了解公司中會影響應用程式的所有業務規則和政策。本節描述 Arrow Aircraft Services (簡化的) 業務規則和政策。

Arrow Aircraft 會為持有者管理五架各種大小和機型的商用飛機。每架飛機最多有八個零股持有者 — 已購買該飛機的股份之公司或個人。這種安排對不需要整年持有商用飛機的人而言是相當受歡迎的。

零股持有者或「股東會」支付 Arrow Aircraft 下列費用：

  • 按持有者所持有的飛機股份比例，支付每月管理費用 (其中涵括飛行員、保險和停機棚的費用)
  • 每小時的「使用」費用 (包含所有直接花費，如維護、引擎保養和備辦食物)

交易時，股東只要告知 Arrow Aircraft 他們希望抵達的時間和地點，Arrow Aircraft 便會處理其他的事宜，包括取得飛行和地面機組人員及備辦飛行期間的食物。Arrow Aircraft 至少需要 8 個小時來準備飛行用的飛機。

Arrow Aircraft 保證每架飛機每年可有 800 個「使用時數」。使用時數指飛機飛行且至少有一位乘客的飛行時數。使用時數從搭載乘客的飛機起飛前六分鐘 (0.1 個小時) 開始計算，並於飛機著地後六分鐘結束計算。

每架飛機最多有八個持有者。例如，個人或公司可以購買飛機 1/5 的股份 (或購買第 1/5 股)。因為 Arrow Aircraft 保證每年 800 個使用飛行時數，第 1/5 股的持有者有權享有 160 個使用時數 (800 小時/5 = 160)。


研究 Arrow Aircraft 的功能要求

Arrow Aircraft 聘用您來建置擁有下列功能的網路應用程式：

  • 允許任何飛機股東提出飛機飛行要求
  • 將開始準備飛機所需的所有資訊提供給公司的「飛行作業部門」(Flight Operations Department，Flight Ops)，包括股東的要求的詳細資料 (行程、起飛日期及時間、備辦食物需求等)、該股東剩餘的使用時數、計劃飛行的飛機可用性
  • 允許「飛行作業部門」預約飛機以免行程衝突


使用者將針對資料庫提出何種問題呢？

熟悉網路應用程式的計劃功能之後，您與資料庫使用者坐下來談談並提出下列問題：您將針對資料庫提出何種問題呢？

您了解到有些飛機股東想對資料庫提出下列問題：

  • 我還剩多少使用時數？
  • 某個特定日期或某些特定日期是否可以使用我的飛機？

股東要求飛機之後，「飛行作業部門」的員工將對資料庫提出下列問題：

  • 股東想抵達的目的地何在？
  • 行程為何 — 單程、來回、多個城市？「飛行作業部門」需要此項資訊來著手規劃飛行 (檢查氣象預報、歸檔飛行計劃等等) 及估計總使用時數。
  • 該股東是否還剩足夠的使用時數來提出行程？
  • 股東希望的離開時間？
  • 股東的飛機是指什麼？
  • 該飛機在計劃行程時是否可用？
  • 有多少乘客將與股東同行？
  • 他們將攜帶多少行李 — 輕型 (手提)、一般 (每個乘客一個旅行箱) 或重型 (一個以上的旅行箱)？
  • 股東的備辦食物需求為何？
  • 該飛機每小時所需的使用費為何？
  • 我要到何處連絡股東以確認飛行和費用估計？


選擇資料庫的所屬表格

在了解過使用者將針對資料庫提出的問題之後，您要思考應該如何架構資料庫才能善加回答他們的問題。第一個步驟是選擇資料庫中的表格。

在關聯式資料庫中，所有資料都是以表格的列和欄來表示。每個表格描述一個相關實體的集合，如人物、物件或事件。每一列表示一個實體，而每一欄則表示實體的一個屬性 - 例如，人物的姓氏、物件的顏色或事件的日期。

您為 Arrow Aircraft 資料庫選擇下列五個表格：

  • 飛機表格描述由 Arrow Aircraft 管理的所有商用飛機
  • 飛機預約表格列出飛機被預約的所有日期或其他無法提供飛行的日期
  • 股東表格描述擁有飛機股份的所有公司和個人
  • 行程表格描述股東要求的所有行程
  • 飛行表格描述所有行程的距離 (班次)。


在每個表格中選擇欄

下個步驟是在每個表格中選擇欄。欄是要描述表格中每個實體的屬性。

選擇欄時很好的指標規則是避免重複資料。例如，在 Arrow Aircraft 應用程式中，您知道股東姓名必須與行程資料相互關聯，才能回答「飛行作業部門」的下列問題：股東針對特別行程的備辦食物需求為何？

有一個方法是讓股東的名字和姓氏欄同時出現在股東表格和行程表格。但是，這可能不只需要在兩個表格中複製姓名資料即可，還需要在行程表格中複製多次 (您可能必須在每次股東要求新行程時，就在行程表格中輸入一次股東姓名)。這個方法會增加資料輸入的人力、製造錯誤的發生機會並威脅到資料的整合性 (變更資料庫的某一部份就必須在其他部份也進行變更)。

比較好的解決方案是在單一表格 (股東表格) 中一次輸入股東的名字和姓氏。在必須回答「飛行作業部門」的以上問題時，您可以利用 SQL 運算式將股東表格與行程表格加以連結。

請確定您的每個表格都有主索引鍵欄位。主索引鍵欄位包含每個列的唯一值。這可以讓您在搜尋資料庫時，準確無誤地找到您想要的那個列。大多數的主索引鍵欄位是由 ID 數字所組成，但是您可以使用自然主索引鍵欄位，如政府表單編號或飛機序號。

考慮之後，您為 Arrow Aircraft 資料庫中的表格選擇下列屬性和主索引鍵：


定義表格之間的關係

在表格中定義基本欄和主索引鍵之後，您可以開始定義表格之間的關係。定義好關係之後，便可以在 Dreamweaver 中撰寫 SQL 陳述式，將取自兩個表格的資料加以組合 (請參閱結合表格)。

例如，由 Arrow Aircraft 管理的每架飛機有數個股東。您可能想要在飛機表格中的每架飛機，與股東表格中的股東之間，建立類似「一對多」的關係。這可能得以讓您不必在股東表格中輸入和追蹤多餘的飛機資料。

在一對多的資料庫關係中，這個表格中的單一列會與另一個表格中的數個列相關聯。透過在提供很多列的表格中包含外部索引鍵，就可以定義這種關係 — 以上範例中指股東表格。外部索引鍵是一個欄，其中所含的值符合另一個表格之主索引鍵欄位中的值。您的飛機表格主要索引鍵名稱為 ac_serial。因此，在股東表格中納入名為 ac_serial 的外部索引鍵，就能定義「一架飛機對多個股東」的關係。

依據您對用戶的功能訴求和公司業務規則與政策的了解，您可以決定在資料庫中定義下列一對多關係：

  • 每架飛機可以有多個股東
  • 每架飛機可以有多個預約行程
  • 每架飛機可以有多個行程
  • 每個股東可以有多個行程
  • 每個行程可以有多次飛行 (或航程)

在您新增定義這些關係的外部索引鍵之後，以下是修訂過的資料庫表格圖表：

該圖表又叫 E-R 圖表，或實體關係圖表。


建立資料庫

最後一個設計步驟是利用像 Microsoft Access、SQL Server、Oracle9i 或 MySQL 之類的資料庫系統，建立資料庫。如需詳細資訊，請查詢您的資料庫系統文件。


了解資料庫連結

如果計劃將資料庫與網路應用程式一起使用，至少需要建立一個資料庫連結。如果沒有資料庫連結，應用程式會不知道到何處尋找資料庫或如何連結到資料庫。透過提供應用程式所需的資訊 — 或「參數」— 您就能在 Dreamweaver 建立資料庫連結，建立起與資料庫的連繫。

注意

您不需要在 Dreamweaver 中為 ColdFusion 頁面建立資料庫連結。您要使用 ColdFusion 資料來源進行連結。

本節以一般用語，討論資料庫連結。如需在 Dreamweaver 中建立連結的明確說明，請參閱連線到資料庫。


與資料庫通訊

儲存在資料庫中的資料通常使用專屬的格式，這種方式就和文書處理程式檔中的文字會以專屬格式來儲存是相同的。例如，以下是在 Microsoft Access 中資料看起來的樣子：

以下是相同的資料庫在「記事本」中看起來的樣子：

您的網路應用程式面對的問題，就和試著存取不明資料格式的「記事本」或任何其他應用程式所面對的問題一樣：應用程式無法解讀資料。在您的網路應用程式與允許應用程式和資料庫彼此交談的資料庫之間，軟體介面是必要的。

有三種常用介面讓應用程式能與資料庫通訊。第一種叫做「開放式資料庫連接」(Open Database Connectivity) 或 ODBC；第二種叫做「物件連結與嵌入資料庫」(OLE DB，object linking & embedding database)；而第三種叫做「Java 資料庫連接」(Database Connectivity)，或 JDBC。

這些介面的工作就像扮演解譯器的角色一樣。例如，當聯合國中有一場英文演講時，就需有一個解譯人員為法語系國家代表進行翻譯，而針對德語系國家代表則需另一位解譯人員來翻譯。類似的情況是，您為通曉 OLE DB 的應用程式使用一種介面，對通曉 ODBC 的網路應用程式使用另一種介面，而針對通曉 JDBC 的應用程式則又要使用另一種介面。ColdFusion 與 JSP 應用程式都使用 JDBC，ASP 通曉 ODBC (透過內建 OLE DB/ODBC 解譯器)，而 ASP.NET 應用程式則通曉 OLE DB。


使用資料庫驅動程式與資料庫通訊

ODBC、OLE DB 和 JDBC 介面都是由資料庫驅動程式所實作的 (在 OLE DB 中是由「資料提供者」所實作)，它們都只是軟體的一小部分。當您的網路應用程式與資料庫通訊時，它是經由驅動程式這個媒介才能達到此目的。

資料庫驅動程式是資料庫專屬的。例如，您可以使用 Microsoft Access、SQL Server 和 dBase 驅動程式。同樣地，您可以使用 OLE DB 提供者，如 SQL Server 的 OLE DB 提供者。您的選擇需視您的資料庫而定。

驅動程式是由如 Microsoft 和 Oracle 的資料庫廠商，以及各種軟體協力廠商所撰寫的。Microsoft 為最受歡迎的資料庫套件，如 Microsoft Access、Microsoft SQL Server 和 Oracle，提供了一些 ODBC 驅動程式和 OLE DB 提供者。在安裝 Microsoft Office、Windows 2000 和 Windows XP Professional 時，會自動安裝僅在 Windows 平台上執行的 ODBC 驅動程式。也會配合 Microsoft Data Access Components (MDAC) 2.5、2.6 和 2.7 套件，這些套件可以從 Microsoft 網站免費下載，網址為：http://msdn.microsoft.com/data/mdac/downloads/。MDAC 2.7 會安裝一些 OLE DB 提供者。

注意

先安裝 MDAC 2.5，然後再安裝 MDAC 2.7。

若要了解在您 Windows 系統上所安裝的 ODBC 驅動程式版本，請參閱檢視安裝在 Windows 系統上的 ODBC 驅動程式。

一些常用的 JDBC 驅動程式包括 Microsoft SQL Server 資料庫用的 i-net JDBC 驅動程式、Oracle 資料庫用的 Oracle Thin 驅動程式，以及 IBM DB2 資料庫用的 JDBC Driver for DB2。如需 JDBC 驅動程式及其廠商的詳細資訊，請參閱 Sun 網站上的可搜尋 JDBC 驅動程式資料庫，網址為：http://developers.sun.com/product/jdbc/drivers。

以下是每種網路應用程式所用的資料庫介面和一些常用的資料庫驅動程式：

網路應用程式 | 資料庫介面 | 常用的驅動程式
ColdFusion JSP | JDBC | ColdFusion 原生驅動程式 Sun JDBC-ODBC 驅動程式 Oracle Thin JDBC 驅動程式
ASP | ODBC 或 OLE DB | Microsoft Access Driver Microsoft SQL Server Provider Microsoft ODBC for Oracle
ASP.NET | OLE DB | Microsoft Jet Provider Microsoft SQL Server Provider Microsoft Oracle 提供者
PHP | MySQL 專用 | MySQL 驅動程式


檢視安裝在 Windows 系統上的 ODBC 驅動程式

如果您需要特定的 ODBC 驅動程式，而且您的網站伺服器是在 Windows 系統上執行的話，便可以輕易地得知所需要的 ODBC 驅動程式是否已安裝在系統上。

若要檢視安裝在 Windows 系統上的 ODBC 驅動程式：

  1. 開啟「ODBC 資料來源管理員」，如下所示：
    • 在 Windows 2000 中，選取「開始＞設定＞控制台＞系統管理工具＞資料來源」。
    • 在 Windows XP 中，選取「開始＞控制台＞系統管理工具＞資料來源 (ODBC)」。
  2. 按一下「驅動程式」索引標籤。

    會出現系統上已安裝的 ODBC 驅動程式清單。


叫用資料庫驅動程式

應用程式必須叫用資料庫驅動程式才能與資料庫建立雙向通訊。網路應用程式會利用連結字串來叫用驅動程式。連結字串是由建立資料庫連結所需的所有資訊 (或參數) 組成的。以最簡單的型式來說，連結字串會指定驅動程式和資料庫，如本範例中所示：

Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb

ASP 連線字串可以包含指定 OLE DB 提供者的提供者參數。如果您省略這個參數，則依預設值 ASP 會為 ODBC 驅動程式使用 OLE DB 提供者。在以上範例中，ODBC 驅動程式的 OLE DB 提供者可能會與 ODBC 驅動程式 (Microsoft Access Driver) 通訊，後者依次再與 Access 資料庫 scaalcoffee.mdb 通訊。

連結字串中的參數可能視驅動程式而有所不同。以下是名為 Hoover 的伺服器上，一個叫 Cases 的 SQL Server 資料庫所用的連結字串：

Driver={SQL Server};Server=Hoover;Database=Cases;
UID=DanaS;PWD=Queequeg

注意

UID 代表使用者 ID；PWD 代表密碼。

Dreamweaver 透過提供給您對話方塊，讓您在其中輸入不同的連結參數的方式，簡化了在網頁中插入連結字串的程序。例如，以下所示就是您開發 JSP 應用程式時，用以定義連結的對話方塊之外觀：

在您完成對話方塊並按一下「確定」之後，Dreamweaver 會將連結字串插入網站的包含檔案中。


使用 DSN

您可以在一些連結中指定資料來源名稱 (DSN)。DSN 是您在 Windows 中為連結字串建立的一種捷徑類型。

例如，假設您在名為 Kojak 的伺服器上，有一個 Microsoft SQL Server 資料庫叫做 Precinct。若要取得資料庫的存取權，您必須輸入使用者名稱 columbo 和密碼 savalas7。利用這些參數定義名為 ourcops 的 DSN 之後，只要在 Dreamweaver 中輸入 ourcops 單字 (不必輸入所有其他參數)，即可建立連結。

如果您的應用程式伺服器是在 Windows 系統上執行，而且您已在系統上定義了 DSN，可以使用 DSN 定義 ASP 或 JSP 連結。

如果您沒有實體存取至伺服器 - 也無法在系統上定義 DSN─則您必須使用連結字串連結至資料庫。

若要在 Windows 中設定 DSN，請參閱 Microsoft 網站中的下列文章：

  • Windows 2000 的使用者請參閱 Microsoft 知識庫文章 300596，網址是
    http://support.microsoft.com/default.aspx?scid=kb;en-us;300596
  • Windows XP 的使用者請參閱 Microsoft 知識庫文章 305599，網址是
    http://support.microsoft.com/default.aspx?scid=kb;en-us;305599

相關主題

  • 適用於 ASP 開發人員的資料庫連線
  • 適用於 JSP 開發人員的資料庫連線


SQL 入門

此附錄描述如何使用「結構化查詢語言」(Structured Query Language，SQL) 來建立動態網頁的資料集。SQL (讀為 sequel) 是一種語言，它讓您能從資料庫讀取及寫入資料。該語言只有一些關鍵字和簡單的語法規則，但可讓您執行複雜的資料庫作業。

此附錄包含下列各節：

語法基本概念

定義資料集的資料欄

限制資料集中的記錄

排序資料集中的記錄

結合表格

相關主題

  • 關於資料庫
  • 資料庫設計基本概念
  • 了解資料集

    注意

    Macromedia 不提供協力廠商技術的技術支援，如 SQL。


語法基本概念

最常用的 SQL 陳述式之一是 SELECT 陳述式，它會從一或多個資料庫表格，將指定的資料欄抽取出來建立資料集。以下是 SELECT 陳述式的基本語法：

SELECT ColumnName FROM TableName

您可以在陳述式中加入斷行符號、標籤及其他空格，藉以釐清邏輯：SQL 會略過所有空格。以下範例顯示有效的陳述式：

SELECT PaidDues
   FROM Members

以下關鍵字會識別常用的 SQL 命令：

關鍵字 | 說明
SELECT | 從資料庫擷取指定的記錄
INSERT | 在資料庫表格中新增記錄
UPDATE | 變更指定的資料庫記錄中之值
DELETE | 移除指定的資料庫記錄

以下關鍵字用來使 SQL 陳述式更完善：

關鍵字 | 說明
FROM | 命名作業的資料來源
WHERE | 設定作業的一或多個條件
ORDER BY | 以指定的順序排序資料集列
GROUP BY | 依指定的選取清單項目將資料集群組

以下運算子會指定條件並執行邏輯與數值函式：

運算子 | 意義
= | 等於
LIKE | Like (萬用字元 OK)
<> | 不等於
NOT LIKE | Not like (萬用字元 OK)
< | 小於
> | 大於
<= | 小於或等於
>= | 大於或等於
AND | 兩種條件都必須符合，如 Louisiana AND Texas
OR | 至少必須符合一個條件，如 Smith OR Smyth
NOT | 排除以下條件，如 Paris NOT France

如果被比較的項目是文字，請將它放在單引號內，如以下範例所示：

...WHERE Country = 'Germany'

如果被比較的項目是日期，而且您正在使用 Microsoft Access 資料庫，請將它納入 # 符號內：

...WHERE DateOfBirth < #01/01/1970#

其他資料庫可能有它們自己的日期慣例。請查詢資料庫系統文件。

有些資料庫系統可能在它們的產品中使用非標準的 SQL 語法。請檢查您的資料庫系統文件。


定義資料集的資料欄

您可以使用 SQL 定義網頁的資料集。資料集是從資料庫抽取出來的記錄子集。如需詳細資訊，請參閱關於資料庫。

以下是定義資料集的資料欄之基本 SQL 語法：

SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName

如果您希望在資料集中包括所有的表格欄，您可以使用萬用字元 *，如下所示：

SELECT * FROM TableName

例如，假設您有一個名為 Customers 的表格。若要抽取所有資料欄，您可以輸入以下 SELECT 陳述式：

SELECT * FROM Customers

假設您只需要 Customers 表格中的兩個資料欄所包含之資料：YearBorn 資料欄與 DateLastPurchase 資料欄。若要建立只包含這兩個資料欄中資料的資料集，您可以輸入以下 SELECT 陳述式：

SELECT YearBorn, DateLastPurchase
FROM Customers


限制資料集中的記錄

使用 WHERE 指令句，限制資料集中的記錄數。例如，您希望只包含一年賺 $50,000 元以上的客戶。假設在您的表格中有一個名為 Earnings 的資料欄可告訴您客戶賺了多少錢。您的 SELECT 陳述式會看起來如下：

SELECT YearBorn, DateLastPurchase FROM Customers
WHERE Earnings > 50000

您在 WHERE 指令句中指定一或多個條件，就能篩選出資料庫中的記錄。以下各節描述使用 WHERE 指令句篩選記錄的方式：

  • 根據兩個值相等來篩選記錄
  • 根據兩個值相似來篩選記錄
  • 根據值範圍來篩選記錄
  • 根據搜尋條件的組合來篩選記錄

根據兩個值相等來篩選記錄

您可以根據參數值與記錄資料欄值相等的這個原則，篩選出資料庫中的記錄。

假設您決定讓使用者依部門搜尋資料庫。以下邏輯是建立搜尋結果資料集所必需的：

  • 檢查資料庫表格中的記錄。
  • 如果記錄的部門資料欄中之值，等於使用者送出的部門名稱時，就會將該筆記錄納入搜尋結果資料集中。
  • 檢查表格中的下一筆記錄。

您可以使用以下 WHERE 指令句來陳述此邏輯：

WHERE ColumnName = ParameterValue

ParameterValue 是包含搜尋參數的 SQL 變數。在網路應用程式中，使用者通常利用 HTML 表單，提供此參數。

此資料庫查詢可以使用如下所示的 SQL 來完整表示：

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT = 'varDept'

這個 SQL 陳述式利用 DEPARTMENT 值等於 varDept 變數中所包含的值，在員工表格中尋找所有記錄。例如，如果使用者將 Operations 指定為部門名稱，則 SQL 陳述式可能會產生下列資料集：

根據兩個值相似來篩選記錄

您可以根據參數值與記錄資料欄值相似的這個原則，篩選資料庫中的記錄。

在指定搜尋參數的值時，使用相似而非相等讓使用者有更大的彈性。例如，搜尋文字不需要區分大小寫。如果使用者輸入 ohio，而表格欄包含 Ohio 一值，便視為出現相符。

還有，相似可讓您使用萬用字元，如此一來使用者便能執行依字母順序和部份單字的搜尋。例如，如果使用者輸入 m，而表格資料欄包含了 Morgan、Macy 和 Michelson 等值，您可以在 SQL 陳述式中使用萬用字元，這樣便會視為出現三個相符。

標準的萬用字元是百分比符號 (%)：

...WHERE LastName LIKE 'Mc%'

假設您決定讓使用者依姓氏搜尋資料庫。以下邏輯是建立搜尋結果資料集所必需的：

  • 檢查資料庫表格中的記錄。
  • 如果資料的 LAST NAME 記錄資料欄中的值包含了與使用者送出的值相似的值，就將該筆記錄納入結果資料集中。
  • 檢查表格中的下一筆記錄。

您可以使用以下 WHERE 指令句來陳述此邏輯：

WHERE ColumnName LIKE ParameterValue

ParameterValue 是包含搜尋參數的 SQL 變數。在網路應用程式中，使用者通常利用 HTML 表單，提供此參數。

此資料庫查詢可以使用如下所示的 SQL 來完整表示：

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, EMAIL
FROM EMPLOYEES
WHERE DEPARTMENT LIKE 'varLastName'

如果您希望讓使用者擁有執行部份單字搜尋的能力，請將變數與萬用字元組合在一起。在此情況下使用的 SQL 萬用字元是百分比符號 (%)。以下是一個範例：

...WHERE LASTNAME LIKE 'varLastName%'

例如，如果使用者輸入 s 做為搜尋參數，則姓氏以字母 s 開頭的所有記錄都會納入資料集中，如以下範例所示：

如果使用者指定 sm 做為搜尋參數，則只有姓氏以字母 sm 開頭的記錄會納入資料集中：

根據值範圍來篩選記錄

您可以根據記錄資料欄的值是否落在兩個參數值的範圍內，來篩選資料庫中的記錄。

假設您決定讓使用者依日期範圍來搜尋資料庫。以下邏輯是建立搜尋結果資料集所必需的：

  • 檢查資料庫表格中的記錄。
  • 如果在 date 記錄資料欄中的值落在使用者送出的兩個日期值之間，便將該記錄納入結果資料集中。
  • 檢查表格中的下一筆記錄。

您可以使用以下 WHERE 指令句來陳述此邏輯：

WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2

ParameterValue1 和 ParameterValue2 是包含搜尋參數的 SQL 變數。在網路應用程式中，使用者通常利用 HTML 表單來提供這些參數。

以下所示為如何以 SQL 來陳述這種資料庫查詢：

SELECT FIRSTNAME, LASTNAME, DEPARTMENT, STARTDATE
FROM EMPLOYEES
WHERE STARTDATE BETWEEN #varStartRange# AND #varEndRange#

例如，若使用者輸入 7/1/99 和 12/31/99 做為範圍參數，則所有於 1999 下半年開始聘用的員工都會納入資料集中，如以下範例所示：

根據搜尋條件的組合來篩選記錄

此節描述如何根據搜尋條件的組合，在搜尋結果資料集中包含記錄。您可以利用 AND、OR 和 NOT 邏輯運算子，在 SQL 中組合搜尋條件。

如果您希望在所有條件都是 true 的情況下，才將該筆記錄納入資料集中，請使用 AND 運算子，如下所示：

...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'

如果您希望在任何一個條件是 true 的情況下，就將該筆記錄納入資料集中，請使用 OR 運算子，如下所示：

...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'

如果您希望一個條件是 true，但另一個不是，請使用 NOT 運算子，如下所示：

...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'

您可以使用括號來群組搜尋條件：

...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#)
OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#


排序資料集中的記錄

使用 ORDER BY 指令句，將資料集中的記錄排序。例如，假設您希望依客戶收入來排序資料集中的記錄，從最低排到最高。在 SQL 中，如下所示將記錄排序：

SELECT LastName, FirstName, Earnings FROM Customers
ORDER BY Earnings

依預設值，ORDER BY 指令句會以遞增順序 (1, 2, 3... 或 A, B, C...) 將記錄排序。如果您希望以遞減順序將其排序，由收入最高者排到最低，請使用 DESC 關鍵字，如下所示：

ORDER BY Earnings DESC


結合表格

您可以使用單一的 SELECT 陳述式，從資料庫裡一個以上的表格中擷取資料。陳述式會結合表格並傳回單一的資料集，資料集會包含選取自每個表格的資料。

例如，公司的資料庫中可能包含一個員工相關個人資料的表格，另一個表格則包含公司部門的相關資料。如果您希望建立一個顯示員工姓名、電話號碼和部門的員工電話簿，就必須同時從兩個表格中擷取資訊。

若要執行此作業，請建立指定要納入的所有表格之結合，並指定表格彼此的關係。以下是一個範例：

SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES, DEPARTMENTS
WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID

注意

使用點 (.) 標記法可以更精準地識別欄。例如，EMPLOYEES.DEPT_ID. 指在 EMPLOYEES 表格中的 DEPT_ID 欄。

第一行指定要擷取的欄。前三欄 — FIRSTNAME、LASTNAME、PHONE — 存在 EMPLOYEES 表格中，但是第四欄 — DEPTNAME — 只存在 DEPARTMENTS 表格中。

第二行指定兩個表格，並從這兩個表格擷取資料 EMPLOYEES 和 DEPARTMENTS。

最後一行指定要從兩個表格結合和擷取的記錄。每個表格有一個名為 DEPT_ID 的欄 (在 DEPARTMENTS 表格中，該欄是主索引鍵。如需詳細資訊，請參閱定義表格之間的關係)。WHERE 指令句會將一個表格中的 DEPT_ID 值與另一個表格中的 DEPT_ID 值加以比較。發現符合者時，EMPLOYEES 表格中該記錄的所有欄位會與 DEPARTMENTS 表格中該記錄的所有欄位結合。接下來，將組合的資料篩選出來，建立一筆由 FIRSTNAME、LASTNAME、PHONE 和 DEPTNAME 欄組成的新記錄。最後，將新記錄加入資料集。

有些資料庫系統中可能偏好使用些許不同的結合語法。例如，下列 SQL 陳述式是使用 SQL 關鍵字 INNER JOIN...ON 以得到如以上範例所示相同的結果：

SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME
FROM EMPLOYEES INNER JOIN DEPARTMENTS
ON EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID

請查詢您的資料庫系統文件，決定應該使用哪種結合語法。

上一頁


商標 以及 致謝

商標

1 Step RoboPDF、ActiveEdit、ActiveTest、Authorware、Blue Sky Software、Blue Sky、Breeze、Breezo、Captivate、Central、ColdFusion、Contribute、Database Explorer、Director、Dreamweaver、Fireworks、Flash、FlashCast、FlashHelp、Flash Lite、FlashPaper、Flex、Flex Builder、Fontographer、FreeHand、Generator、HomeSite、JRun、MacRecorder、Macromedia、MXML、RoboEngine、RoboHelp、RoboInfo、RoboPDF、Roundtrip、Roundtrip HTML、Shockwave、SoundEdit、Studio MX、UltraDev 及 WebHelp 均為 Macromedia, Inc. 的註冊商標或商標，可能是在美國或其他法律管轄區，包括國際轄區在內，登記註冊。本刊物所提及的其他產品名稱、標誌、設計、標題、字詞或片語，可能是 Macromedia, Inc. 或其他實體的商標、服務標誌或商品名稱，且可能已在全球部分地區註冊。

協力廠商資訊

本手冊包含連至協力廠商網站的連結，這些網站皆不受 Macromedia 的管轄，因此 Macromedia 對連結網站的內容概不負責。如果您存取本手冊提及的協力廠商網站，必須自行承擔風險。Macromedia 之所以提供這些連結，僅是為了帶給貴用戶方便，並不意謂 Macromedia 願意為這些協力廠商網站的內容背書或負擔任何責任。

Copyright © 2005 Macromedia, Inc. 保留一切相關權利。未經 Macromedia, Inc. 書面許可，任何人不得對本手冊全部或部分內容進行拷貝、翻印、重製、翻譯或轉換為任何電子或可用機器讀取的形式。儘管如上所述，經持有或已獲授權使用乙份軟體產品之正式拷貝而取得本手冊者，得基於學習使用該軟體產品為主要目的而印製乙份本手冊電子版之拷貝，然亦不得為任何其他目的而印製、重製、散發、轉售或散佈本手冊任何部分，包括 (但不限於) 販售本文件之拷貝或提供收費性質支援服務等商業用途。

致謝

管理：Charles Nadeau

撰寫：Jon Michael Varese

協力撰寫：Jennifer Rowe、Paul Gubbay、Charles Nadeau

編輯：Rosana Francescato、Lisa Stanziano、Anne Szabla、Evelyn Eldridge、Mary Ferguson、Mark Nigara

本地化管理：Melissa Baerwald

本地化品管：Andrew Tsai

生產管理：Patrice O’Neill

媒體設計和生產：John Francis、Adam Barnett、Mario Reynoso、Aaron Begley、Arena Reed、Paul Rangel

特別感謝 Sheila McGinn, Paul Gubbay、Vic Mitnick、Jim Doubek、Joaquin Blas、Wenlan Du、Ken Karleskint、Jennifer Taylor、Jorge Taylor、Nick Halbakken、Scott Richards、Sami Kaied、Jung Choi、John Skidgel、Jennifer Rowe、Jay Armstrong、Sally Sadosky、測試版測試人員以及整個 Dreamweaver 工程部與品管小組。

第一版：2005 年 9 月

Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103


Dreamweaver 8 說明

Copyright © 2005
Macromedia, Inc.
保留所有權利。
商標以及致謝


使用 Dreamweaver

本手冊將以全面性、具體化的方式，提供您與 Dreamweaver 所有功能相關的資訊。

本手冊包含下列各部分：

Dreamweaver 基本概念

使用 Dreamweaver 網站

設計頁面版面

將內容新增至頁面

使用頁面程式碼

準備建立動態網站

讓網頁呈動態效果

快速開發應用程式

附錄