使用手冊 取消

建立和開啟檔案

搜尋
Dreamweaver

Dreamweaver

開啟應用程式
  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站
  19. 疑難排解
    1. 已修正的問題
    2. 已知問題

 

 

在 Dreamweaver 中建立、開啟、編輯、儲存和回復檔案。建立範本以及開啟相關檔案。

Dreamweaver 提供一個彈性的環境，可以搭配使用各種不同的網頁文件。 除了 HTML 文件之外，您還可以建立和開啟各種文字文件，例如 JavaScript、PHP 和重疊顯示樣式表 (CSS)。

Dreamweaver 提供了多種建立新文件的選項。您可以建立下列類型的文件：

  • 新的空白文件或範本

  • 使用其中一個 Dreamweaver 隨附之預先設計頁面版面的文件，有多達 30 多種的 CSS 頁面版面可供使用

  • 使用現有範本建立的文件

    您也可以設定文件偏好設定。 例如，如果通常您是使用某種特定文件類型，可以將它設成新建立頁面的預設文件類型。

    您可以輕鬆地定義文件屬性，如 meta 標籤、文件標題和背景顏色，也可以定義「設計」檢視或「程式碼」檢視中的多種其他頁面屬性。

Dreamweaver 檔案類型

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

Dreamweaver 可讓您建立並編輯 HTML5 架構的網頁。 也會提供可用來從頭建立 HTML5 頁面的起始版面。

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

CSS

重疊顯示樣式表檔案的副檔名為 .css。 它們的用途是設定 HTML 內容的格式及控制各種頁面元素的定位。

GIF

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

JPEG

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

XML

可擴展標記語言檔案 (XML) 的副檔名為 .xml。 它們包含原始形式的資料，您可以利用 XSL (可擴展樣式表語言) 來設定資料格式。

新增文件對話方塊

「新增文件」對話方塊會顯示所有支援的文件檔案類型，包括 PHP、XML 及 SVG。

您也可以從這個對話方塊中存取預先定義的版面、範本以及架構。

註解：

所有的精選起始版面都是專為支援互動式網站所打造的，而且與 HTML-5 相容。

使用空白頁面建立 HTML 版面

您可以建立包含預先設計之 CSS 版面的頁面，或建立完全空白的頁面然後產生自己的版面。

  1. 選取「檔案 > 新增」。

  2. 在「新增文件」類別中，從「文件類型」欄中選取您想要建立的頁面種類。例如，請選取 HTML 以建立一般的 HTML 頁面。

  3. 從「文件類型」快顯視窗選單中選取文入類型。 在大多數情況下，您可以使用預設選項「HTML5」。

  4. 請根據您想要建立的頁面類型來選取其他選項。

    • 注意︰如果您想要建立簡單的網頁，而不使用任何架構，請選取這個選項。
    • Bootstrap：Bootstrap 範本是使用 Bootstrap 架構的預先定義版面。 如果您想要使用 Bootstrap 架構來建立互動式網頁，請選取這個選項。 依預設建立一個 Bootstrap 4.0.0 文件。
    註解：

    如果您打算建立互動式網頁，則選取 Bootstrap 架構。

  5. 如果您不使用架構，則︰

    • 文件標題︰在此欄位中輸入您的「文件標題」，Dreamweaver 會自動將它新增到文件的 <head> 區段中。
    • 文件類型：從「文件類型」快顯視窗選單中選取文件類型。 在大多數情況下，您可以使用預設選項「HTML5」。

    從「文件類型」選單中選取其中一個 XHTML 文件類型定義，讓您的頁面與 XHTML 相容。例如，您可以從選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。XHTML (可擴展超文字標記語言) 可以將 HTML 重新設計成 XML 應用程式。一般而言，使用 XHTML 可以讓您馬上體驗到 XML 的優點，同時又可確保網頁文件能同時具有回溯及未來的相容性。

    註解：

    如需 XHTML 的詳細資訊，請參閱 World Wide Web Consortium (W3C) 網站，其中包含 XHTML 模組架構式 XHTML (www.w3.org/TR/xhtml11/) 和 XHTML 1.0 (www.w3c.org/TR/xhtml1/) 的規格，以及網頁架構檔案 (http://validator.w3.org/) 和本機檔案 (http://validator.w3.org/file-upload.html) 的 XHTML 驗證工具網站。

    • 附加 CSS︰將現有的 CSS 版面附加到頁面。如果要這樣做，請按一下「附加 CSS 檔案」窗格旁的「附加樣式表」圖示 ，然後選取 CSS 樣式表。
    不使用架構建立新的 HTML 頁面
    不使用架構建立新的 HTML 頁面

    如果您想要根據您的 Photoshop 構圖來建立新頁面，則選取「使用 Extract」從 Photoshop 構圖來建立您的頁面。 

    選取這個選項會開啟 Extract 面板，您可在此面板上傳 PSD 檔案並開始建立 HTML 頁面。

  6. 如果您想要使用 Bootstrap 架構來建立互動式網頁：

    • Bootstrap CSS︰選擇建立新的 Bootstrap CSS，或使用現有的 CSS 檔案。如果您要使用現有的 CSS 檔案，請提供檔案的路徑。請確定 CSS 檔案位於您的網站根資料夾內。
    • 附加 CSS︰將現有的 CSS 版面附加到頁面。如果要這樣做，請按一下「附加 CSS 檔案」窗格旁的「附加樣式表」圖示 ，然後選取 CSS 樣式表。
    • 包含預先建立的版面︰ 如果您已經有版面，請選取這個選項。 按一下「自訂」以編輯格線和中斷點值。
    使用 Bootstrap 架構建立新的 HTML 頁面
    使用 Bootstrap 架構建立新的 HTML 頁面

    如果您想要根據您的 Photoshop 構圖來建立新頁面，則選取「使用 Extract」從 Photoshop 構圖來建立您的頁面。 

    選取這個選項會開啟 Extract 面板，您可在此面板上傳 PSD 檔案並開始建立 HTML 頁面。

  7. 如果想要設定預設文件偏好設定，如文件類型、編碼方式和副檔名等，請按一下「偏好設定」。

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

  9. 儲存新文件 (「檔案 > 儲存」)。

  10. 在出現的對話方塊中，瀏覽至您要儲存檔案的資料夾。
    註解：

    建議您將檔案儲存在 Dreamweaver 網站中。

  11. 在「檔案名稱」方塊中，輸入該檔案的名稱。

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

建立空白範本

您可以使用「新增文件」對話方塊來建立 Dreamweaver 範本。根據預設，範本會儲存在您網站的 Templates 資料夾中。

註解：

您必須先建立網站，才能建立範本。 如需有關網站以及如何建立網站的詳細資訊，請參閱「關於 Dreamweaver 網站」。

  1. 選取「檔案 > 新增」。

  2. 在「新增文件」對話方塊中，選取「網站範本」類別。

  3. 從「文件類型」快顯視窗選單中選取文件類型。在大多數情況下，您會想要將這個選項保留為預設選項「XHTML 1.0 Transitional」。

    從「文件類型 (DTD)」選單中選取其中一個 XHTML 文件類型定義，可讓您的頁面相容於 XHTML。 例如，您可以從選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。 XHTML (可擴展超文字標記語言) 可以將 HTML 重新設計成 XML 應用程式。 一般而言，使用 XHTML 可以讓您馬上體驗到 XML 的優點，同時又可確保網頁文件能同時具有回溯及未來的相容性。

    註解：

    如需 XHTML 的詳細資訊，請參閱 World Wide Web Consortium (W3C) 網站，其中包含 XHTML 模組架構式 XHTML (www.w3c.org/TR/xhtml1/) 和 XHTML 1.0 (www.w3c.org/TR/xhtml1/) 的規格，以及網頁架構檔案 (http://validator.w3.org/) 和本機檔案 (http://validator.w3.org/file-upload.html) 的 XHTML 驗證工具網站。

  4. 如果您希望頁面在您編輯範本時自動更新，請選取「當範本改變後更新頁面」。

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

  6. 儲存新文件 (「檔案 > 儲存」)。如果您尚未在範本中新增可編輯的區域，會出現一個對話方塊告訴您文件中沒有可編輯的區域。按一下「確定」關閉對話方塊。

  7. 在「另存新檔」對話方塊中，選取要儲存範本的網站。

  8. 在「檔案名稱」方塊中，輸入新範本的名稱。您不需要將副檔名附加到範本名稱。按一下「儲存」時，副檔名 .dwt 會附加到新範本，而這個新範本會儲存在您網站的 Templates 資料夾中。

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

以範本建立頁面

您可以使用您其中一個現有的範本或 Dreamweaver 的初學者範本，來選取、預覽及建立新文件。您可以使用「新增文件」對話方塊，從任一個 Dreamweaver 定義的網站選取範本，或是使用「資產」面板，以現有範本建立新文件。

以範本建立文件

  1. 選取「檔案 > 新增」。

  2. 在「新增文件」對話方塊中，選取「來自範本的頁面」類別。

  3. 在「網站」欄中，選取含有所要使用範本的 Dreamweaver 網站，再從右側清單中選取範本。

  4. 如果您不要在每次變更頁面所依據的範本時更新該頁面，請取消選取「當範本改變後更新頁面」。

  5. 如果想要設定預設文件偏好設定，如文件類型、編碼方式和副檔名等，請按一下「偏好設定」。

  6. 如果想要開啟 Dreamweaver Exchange，下載更多的頁面設計內容，請按一下「取得更多內容」。

  7. 按一下「建立」，然後儲存文件 (「檔案 > 儲存」)。

從資產面板中的 範本建立文件

  1. 開啟「資產」面板 (「視窗 > 資產」，如果還沒有開啟的話)。

  2. 在「資產」面板中，按一下左側的「範本」圖示 ，便可檢視您現有網站中的範本清單。

    註解：

    如果想要套用的範本才剛建立好，則必須按一下「重新整理」按鈕後才能看到它。

  3. 在要套用的範本上按一下右鍵 (Windows) 或 Control + 按一下 (Macintosh)，然後選取「從範本新增」。

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

  4. 請儲存文件。

以 Dreamweaver 初學者範本建立頁面

Dreamweaver 隨附數種專業開發的初學者檔案，適用於行動應用程式。您可以用這些樣本檔做為起點，設計網站中的頁面。

當您以初學者範本建立文件時，Dreamweaver 會建立該檔案的複本，因此您不會覆寫初學者檔案。

您可以在「新增文件」對話方塊中預覽樣本檔，並讀取文件之設計元素的簡要描述。

  1. 選取「檔案 > 新增」。

  2. 在「新增文件」對話方塊中，選取「初學者範本」類別。

    Dreamweaver 的初學者範本
    Dreamweaver 的初學者範本

    當您選取不同的選項時，您可以在面板右側看到樣本頁面的詳細資訊和視覺效果。

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

    新文件和所有相關檔案都在「文件」視窗中開啟。

  4. 儲存文件 (「檔案 > 儲存」)。

建立不同程式碼撰寫語言的新程式碼檔案

您可以在 Dreamweaver 中，建立許多程式碼撰寫語言的程式碼檔案。

如需有關 Dreamweaver 程式碼撰寫支援的詳細資訊，請參閱「關於 Dreamweaver 程式碼撰寫」。

如果要在 Dreamweaver 中建立新的程式碼檔案，請依照下列指示進行︰

  1. 選取「檔案 > 新增文件」。

  2. 在「文件類型」中，選取您想要建立的程式碼檔案。

  3. 在「文件類型」欄中選取您想要建立的文件類型 (例如 PHP 檔案)。

    建立新的 PHP 頁面
    建立新的 PHP 頁面

  4. 根據您所選取的檔案類型，在建立文件時會提供額外的選項。 

    例如，如果您是建立 PHP 檔案，可以選取「文件類型」選項和一些 CSS 選項。

  5. 按一下「建立」按鈕。 然後儲存文件 (「檔案 > 儲存」)。

儲存和回復文件

您可以使用文件目前的名稱和位置來儲存此文件，或是使用不同的名稱和位置來儲存文件的複本。

註解：

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

儲存文件

  1. 請執行下列其中一項作業：
    • 若要覆寫磁碟上目前的版本，並且儲存您所做的任何變更，請選取「檔案 > 儲存」。
    • 若要在不同的資料夾中或是使用不同的名稱儲存檔案，請選取「檔案 > 另存新檔」。
  2. 在出現的「另存新檔」對話方塊中，瀏覽至您要儲存檔案的資料夾。

  3. 在「檔案名稱」文字方塊中，輸入該檔案的名稱。

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

儲存所有開啟的文件

  1. 選取「檔案 > 全部儲存」。

  2. 這時如果有開啟任何未儲存的文件，便會對每個未儲存文件顯示「另存新檔」對話方塊。

    在出現的對話方塊中，瀏覽至您要 儲存檔案的資料夾。

  3. 在「檔案名稱」方塊中，輸入該檔案的名稱，然後按一下「儲存」。

回復成文件上次 儲存的版本

  1. 選取「檔案 > 回復至前次儲存」。

    這時會出現一個對話方塊，詢問您是否要捨棄變更，並且回復成之前儲存的版本。

  2. 請按一下「是」，回復成前一個版本；按一下「否」則可以保留您的變更。

    註解：

    如果您儲存文件，然後結束 Dreamweaver，當您重新啟動 Dreamweaver 時，將無法回復成前版的文件。

設定預設文件類型和編碼偏好設定

如果您網站中大部分的頁面都是某種特定的檔案類型 (例如 HTML、PHP 或 JavaScript)，您可以設定文件偏好設定，自動建立指定之檔案類型的新文件。

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

    註解：

    您也可以按一下「新增文件」對話方塊中的「偏好設定」按鈕，設定當您建立新文件時，新文件的偏好設定。

  2. 從左側的分類清單中，按一下「新增文件」。

  3. 依需要設定或變更偏好設定，然後按一下「確定」儲存起來。

    預設文件

    選取用於所建立之頁面的 文件類型。

    預設副檔名

    可為您建立的新 HTML 頁面指定想要的副檔名 (.htm 或 .html)。

    注意：其他檔案類型一律停用這個選項。

    預設文件類型 (DDT)

    可選取其中一個 XHTML 文件類型定義 (DTD)，使新頁面與 XHTML 相容。例如，您可以從選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」，使 HTML 文件與 XHTML 相容。

    預設的編碼方式

    會指定在建立新頁面及未指定任何編碼方式的情況下開啟文件時，所要使用的編碼方式。

    如果您選取「Unicode (UTF-8)」做為文件編碼方式，便不需要再使用實體編碼方式，因為 UTF-8 可以安全地呈現所有字元。但若選取了其他的文件編碼方式，則可能需要實體編碼方式才能夠表示某些字元。如需字元實體的詳細資訊，請參閱 www.w3.org/TR/REC-html40/sgml/entities.html。

    如果您選取「Unicode (UTF-8)」做為預設的編碼方式，就可以選取「包含 Unicode 標記 (BOM)」選項，在文件中包含位元順序標記 (BOM)。

    BOM 長度為 2 到 4 個位元組並位於文字檔開頭處，用以識別檔案格式為 Unicode，並標示後續位元組的位元順序。由於 UTF-8 沒有位元順序，所以加上 UTF-8 BOM 屬於非必要的動作。但對 UTF-16 和 UTF-32 而言則是必要的。

    Unicode 標準化格式

    如果您選取「Unicode (UTF-8)」做為預設的編碼方式，請選取其中一個選項。

    Unicode 標準化格式有四種類型。最重要的一種是「標準化格式 C」，因為這是全球資訊網的字元模型 (Character Model) 最常用的格式。為求完整起見，Adobe 也提供其餘三種 Unicode 標準化格式。

    按 Control+N 顯示新增文件對話方塊

    取消選取這個選項 (Macintosh 則為「按 Command+N 鍵」)，以使用按鍵命令自動建立屬於預設文件類型的新文件。

    在 Unicode 中，某些字元看起來很相似，但卻能以不同方式儲存於文件中。 例如，「ë」(e 母音變化) 可以表示為「e 母音變化」單一字元，也可以表示為「一般拉丁字母 e」+「組合母音變化」兩個字元。 Unicode 組合字元是與前一個字元一起使用的字元，因此母音變化可能出現在「拉丁字母 e」的上面。這兩種格式的印刷樣式結果看起來完全一樣，但是儲存至檔案的內容卻不相同。

    標準化程序是為了確定，能以不同格式來儲存的所有字元全部儲存成相同格式。 也就是說，文件中所有的「ë」字元都儲存成單一的「e 母音變化」，或者都儲存成「e」+「組合母音變化」，所以一份文件中不至於同時出現兩種格式。

    如需有關 Unicode 標準化以及可供使用的特定格式之詳細資訊，請查閱 Unicode 網站，網址為：www.unicode.org/reports/tr15。

開啟和編輯現有的文件

您可以開啟現有的網頁或文字文件 (不論是否在 Dreamweaver 中建立)，然後在「設計檢視」或「程式碼檢視」中加以編輯。

如果您開啟的文件是儲存成 HTML 文件的 Microsoft Word 檔案，就可以使用「工具 > 清理 Word HTML」，移除 Word 插入 HTML 檔案中的無關標記標籤。

若要清理非 Microsoft Word 產生的 HTML 或 XHTML，請使用「工具 > 清理 HTML」。 如需詳細資訊，請參閱「清理 Microsoft Word HTML 檔」。

您也可以開啟非 HTML 文字檔，如 JavaScript 檔、XML 檔、CSS 樣式表，或者由文書處理器或文字編輯器儲存的文字檔。

  1. 選取「檔案 > 開啟」。

    註解：

    您也可以使用「檔案」面板開啟檔案。

  2. 瀏覽並選取要開啟的檔案。
    註解：

    如果還沒有開啟檔案，最好先整理計劃要在 Dreamweaver 網站中開啟和編輯的檔案，而不是從另一個位置開啟它們。如需有關 Dreamweaver 網站的詳細資訊，請參閱「關於 Dreamweaver 網站」。

  3. 按一下「開啟」。

    文件便會在「文件」視窗中開啟。根據預設，JavaScript、文字和 CSS 樣式表會在「程式碼」檢視中開啟。您可以在 Dreamweaver 中工作時更新文件，然後再將變更儲存在檔案中。

Dreamweaver 可讓您在不會失去主要文件焦點的情況下檢視與主要文件有關的檔案。例如，如果您已將 CSS 和 JavaScript 檔案附加至主要文件，Dreamweaver 便可讓您在「文件」視窗中檢視與編輯這些相關檔案，而且不會失去主要文件的焦點。

如需有關動態相關檔案的詳細資訊，請參閱「開啟動態相關檔案」。

註解：

處理 HTML 檔案時，如果您想要快速變更相關的 CSS、JavaScript 或 PHP 檔案，而不需瀏覽至該檔案，您可以使用「快速編輯」。 如需詳細資訊，請參閱「快速編輯」。

根據預設，Dreamweaver 會在主要文件標題下方的「相關檔案」工具列中，顯示與主要文件有關的所有檔案名稱。工具列中按鈕的順序會依照主要文件中現有相關檔案連結的順序。

註解：

如果遺失某個相關檔案，Dreamweaver 仍然會在「相關檔案」工具列中顯示對應的按鈕。但是，當您按一下該按鈕時，Dreamweaver 則不會顯示任何內容。

Dreamweaver 支援下列類型的相關檔案：

  • 用戶端 Script 檔
  • 伺服器端包含
  • 外部 CSS 樣式表 (包含巢狀樣式表)

請執行下列其中一項作業：

  • 在文件頂端的「相關檔案」工具列中，按一下要開啟的相關檔案名稱。

  • 在「相關檔案」工具列中，按一下要開啟的相關檔案名稱，並從快速選單中選取「開啟為獨立的檔案」。當您使用這個方法開啟相關檔案時，主要文件便會失去焦點。

  1. 將插入點置於您知道會受相關檔案 影響的程式碼行或區域中。

  2. 等候「程式碼導覽器」指示器出現，然後按一下該指示器，開啟「程式碼導覽器」。

  3. 將滑鼠停留在「程式碼導覽器」中的項目上，以了解更多有關這些項目的資訊。例如，如果您要變更特定 CSS 顏色屬性，但是不知道它屬於哪個規則，可以將滑鼠停留在「程式碼導覽器」中可用的規則上方，以找出該項屬性。

  4. 按一下您要開啟的項目，即可開啟對應的相關檔案。

返回主要文件的原始碼

  1. 按一下「相關檔案」工具列中的「原始碼」按鈕。

當您從「設計」檢視或「程式碼」和「設計」檢視 (「分割」檢視) 開啟相關檔案時，相關檔案會顯示在「分割」檢視中。

如果您想要自訂「分割」檢視，可以選取「檢視 > 分割」，然後從不同的「分割」檢視選項中選擇。

如果您只想在「程式碼」檢視中檢視相關檔案，請選取工具列頂端的「程式碼」。

註解：

標準「程式碼」檢視無法讓您在顯示相關文件時，同時顯示主要文件的原始碼。

註解：

顯示選項中的「程式碼檢視」是指主要文件的原始碼。例如，如果您選取「檢視 > 程式碼檢視在上方」，Dreamweaver 便會在「文件」視窗的頂端佔用一半空間來顯示主要文件的原始碼。 如果您選取「檢視 > 程式碼檢視在左方」，Dreamweaver 便會在「文件」視窗的左方顯示主要文件的原始碼。

根據預設，當您開啟 HTML 檔案時，Dreamweaver 會在不同索引標籤中顯示相關檔案。如果您想要停用這個功能，可以使用「偏好設定」面板來停用。

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

  2. 在「一般」類別中，取消選取「啟用相關檔案」。

「動態相關檔案」功能擴充了「相關檔案」的功能，讓您可由「相關檔案」工具列查看動態網頁的相關檔案。 尤其，「動態相關檔案」功能可讓您查看眾多動態包含項目，為常見的開放原始碼 PHP 內容管理系統 (CMS) 架構 (如 WordPress、Drupal 和 Joomla! 等) 產生必要的執行階段程式碼。

若要使用「動態相關檔案」功能，您必須對執行 WordPress、Drupal 或 Joomla! 的本機或遠端 PHP 應用程式伺服器具有存取權。一般測試網頁的常用方法，即是設定 localhost PHP 應用程式伺服器，並且在本機測試網頁。

要測試網頁之前，您必須先執行下列步驟：

  • 設定 Dreamweaver 網站，並確定已經填妥「網站設定」對話方塊中的「Web URL」文字方塊。

  • 設定 PHP 應用程式伺服器。

    注意：若希望嘗試使用 Dreamweaver 中的動態相關檔案，必須確認伺服器正在執行中。

  • 安裝 WordPress、Drupal 或 Joomla! 至應用程式伺服器。如需詳細資訊，請參閱：

  • 在 Dreamweaver 中定義一個本機資料夾，以供您將 CMS 檔案下載至該處進行編輯。

  • 將已安裝的 WordPress、Drupal 或 Joomla 檔案的位置定義為遠端及測試資料夾。

  • 從遠端資料夾下載 (取得) 您的 CMS 檔案。

當您開啟的頁面與動態相關檔案相關聯時，Dreamweaver 能自動探索這些檔案，或者您也可以手動探索檔案 (透過按一下頁面頂端資訊列上的連結)。 預設的設定為手動探索。

  1. 選擇「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh OS)。

  2. 在「一般」類別中，確定已選取「啟用相關檔案」選項。

  3. 從「動態相關檔案」快顯視窗選單中選取「手動」或「自動」。您也可以選取「停用」，完全停用探索。

  1. 開啟一個與動態相關檔案相關聯的頁面，例如 WordPress、Drupal 或 Joomla! 網站的網站根目錄 index.php！頁面。

  2. 如果動態相關檔案設定為手動探索 (預設值)，請按一下「文件」視窗中顯示於頁面頂端資訊列上的「探索」連結。

    如果已啟用自動探索動態相關檔案，動態相關檔案的清單便會出現在「相關檔案」工具列上。

相關檔案與動態相關檔案在「相關檔案」工具列上的順序如下：

  • 靜態相關檔案 (不需要經過任何形式動態處理的相關檔案)
  • 外部相關檔案 (.css 和 .js 檔案)，會附加到動態路徑伺服器包含檔案
  • 動態路徑伺服器包含檔案 (.php、.inc 和 .module 檔案)

由於相關檔案與動態相關檔案往往數量龐大，因此 Dreamweaver 讓您透過篩選相關檔案，以便能夠精確找到您要使用的檔案。

  1. 開啟一個與相關檔案相關聯的頁面。

  2. 必要時，探索動態相關檔案。

  3. 按一下「相關檔案」工具列右側的「篩選相關檔案」圖示。

  4. 選取您希望出現在「相關檔案」工具列上的檔案類型。根據預設，Dreamweaver 會選取所有相關檔案。

  5. 若要建立自訂篩選，請按一下「篩選相關檔案」圖示並選擇「自訂篩選」。

    「自訂篩選」對話方塊只允許篩選確切檔案名稱 (style.css)、副檔名 (.php) 與使用星號的萬用字元運算式 (*menu*)。您可以用分號分隔每個運算式，依據多個萬用字元運算式進行篩選 (例如：style.css;*.js;*tpl.php)。

註解：

一旦您關閉檔案，篩選設定即不復留存。

清理 Microsoft Word HTML 檔案

您可以開啟由 Microsoft Word (Microsoft Word 97 或更新版本) 另存為 HTML 檔案的文件，然後使用「工具 > 清理 Word HTML」，移除 Word 所產生的無關 HTML 程式碼。

Dreamweaver 移除的程式碼主要是 Word 用來格式化文件並在 Word 中顯示文件之用，實際上對於顯示 HTML 檔案而言是不必要的。

請保留一份原始的 Word (.doc) 檔案做為備份，因為一旦清理 HTML 檔案之後，可能無法再於 Word 中重新開啟 HTML 文件。

註解：

若要清理非 Microsoft Word 產生的 HTML 或 XHTML，請使用「工具 > 清理 HTML」命令。

  1. 將 Microsoft Word 文件另存成 HTML 檔。
    註解：

    在 Windows 上，關閉 Word 中的檔案以免發生共享違反情形。

  2. 在 Dreamweaver 中開啟 HTML 檔。

    若要檢視 Word 產生的 HTML 程式碼，請切換到「程式碼檢視」 (「檢視 > 程式碼」)。

  3. 選取「工具 > 清理 Word HTML」。

    註解：

    如果 Dreamweaver 無法判斷用於儲存檔案的 Word 版本，請從快顯視窗選單選取正確的版本。

  4. 選取 (或取消選取) 清理選項。您輸入的偏好設定會儲存為預設的清理設定。

    Dreamweaver 會將清理設定套用到 HTML 文件，接著出現變更記錄 (除非取消選取對話方塊中的該選項)。

    Microsoft Word HTML 清理選項
    Microsoft Word HTML 清理選項

    移除所有 Word 專用的標記

    移除所有 Microsoft Word 自訂的標記，包括源自 HTML 標籤的 XML、Word 自訂的中繼資料和文件檔頭中的連結標籤、Word XML 標記、條件式標籤和其內容，以及源自樣式的空白段落和邊界。您可以利用「詳細」索引標籤，個別選取下列選項。

    清理 CSS

    會移除所有 Word 專用的 CSS，包括可能的行內 CSS 樣式 (即上一層樣式有相同的樣式屬性)、以「mso」開頭的樣式屬性、非 CSS 樣式宣告、源自表格的 CSS 樣式屬性，以及源自檔頭的所有未使用的樣式定義。 您可以利用「詳細」索引標籤，進一步自訂這個 選項。

    清理 <font> 標籤

    會移除 HTML 標籤，將預設的內文文字大小轉換為大小為 2 的 HTML 文字。

    修正不正確的巢狀標籤

    會移除 Word 在段落和標題 (區塊層級) 標籤之外所插入的字體標記標籤。

    套用原始碼格式

    會將您在「HTML 格式」偏好設定和 SourceFormat.txt 中所指定的原始格式選項套用至文件。

    完成後顯示記錄

    會在清理動作完成時，顯示一個警告方塊，內含文件變更的相關詳細資料。

  5. 按一下「確定」，或者按一下「詳細」索引標籤 (如果您想要進一步自訂「移除所有 Word 自訂的標記」和「清理 CSS」選項的話)，然後按一下「確定」。

更多類似項目

更快、更輕鬆地獲得協助

新的使用者？

快速連結

檢視您的所有計劃 管理您的計劃
檢視快速連結
隱藏快速連結

法律注意事項    |    線上隱私政策