使用手冊 取消

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 網站

 

了解如何使用 Dreamweaver 的程式碼撰寫環境來加速撰寫程式碼的程序。

如果您想要在 Dreamweaver 中使用程式碼,可以選擇使用「開發人員」工作區。這個工作區依預設會顯示「程式碼」檢視,並且只有「檔案」和「片段」面板鎖定在畫面的左邊。

如果您需要其他功能,請按一下「視窗」,然後選擇您需要的面板。

註解:

如果預先設計的工作區無法滿足您的需求,您可以自訂專屬的工作區版面。開啟面板並固定在您想要的位置,然後將工作區另存為自訂工作區。如需詳細資訊,請參閱「建立自訂工作區」。

在 Dreamweaver 中使用程式碼

您可以透過多種方式在 Dreamweaver 中使用程式碼。您可以使用:

按一下工作區頂端的「程式碼」、「分割」及「設計/即時」切換按鈕,即可在不同檢視之間移動。

您也可以使用「程式碼檢視窗」在浮動視窗中顯示您的 HTML。「程式碼檢視窗」可讓您同時查看您的網站設計和程式碼,不需將檢視分割成一半。如需詳細資訊,請參閱「使用程式碼檢視窗在另一個視窗檢視程式碼」。

在文件視窗中檢視程式碼 - 程式碼檢視

選取「檢視 > 程式碼」。

在文件視窗中同時撰寫程式碼和編輯頁面 - 分割檢視

  1. 選取「檢視 > 程式碼和設計」。

    程式碼會出現在上窗格,頁面則顯示在下窗格。

  2. 若要將頁面顯示在上方,請從「文件」工具列上的「檢視選項」選單中選取「設計檢視在上方」。
  3. 若要調整「文件」視窗中的窗格大小,請將分隔列拖曳到想要的位置。分隔列位於兩個窗格之間。

    當您在「設計」檢視中進行變更時,「程式碼」檢視會自動更新。在「程式碼」檢視中進行變更之後,請在「設計」檢視中按一下,或是按 F5 鍵,以手動方式來更新「設計」檢視中的文件。

使用程式碼檢視窗在另一個視窗檢視程式碼

「程式碼」檢視窗可讓您在另一個程式碼撰寫視窗中作業,就像在「程式碼」檢視中作業一樣。

  1. 選取「視窗 > 程式碼檢視窗」。工具列包含下列選項:

    檔案管理

    上傳或下載檔案。

    在瀏覽器中預覽/除錯

    可讓您在瀏覽器中預覽文件或對文件進行除錯。

    重新整理設計檢視

    會更新「設計」檢視中的文件,以反映您在程式碼中所做的任何變更。在執行某些動作 (如儲存檔案或按一下這個按鈕) 之前,您在程式碼中所做的變更不會自動出現在「設計」檢視中。

    程式碼導覽

    可讓您在程式碼中快速移動。請參閱「跳到 JavaScript 或 VBScript 函式」。

    檢視選項

    可讓您決定顯示程式碼的方式。請參閱「設定程式碼外觀」。

在 Dreamweaver 中更快速地撰寫程式碼

Dreamweaver 的「程式碼」檢視提供方便撰寫程式碼的功能,協助設計人員轉為在程式碼檢視中進行開發,而且視覺輔助可以對有經驗的程式碼撰寫者有所幫助,例如自動縮排、程式碼色彩標示以及可調整大小的字體,以減少錯誤並提升可讀性。

以下是 Dreamweaver 提供的一些功能。

程式碼提示和程式碼完成

Dreamweaver 的程式碼提示 (或程式碼完成) 功能可讓您在輸入時在彈出式選單中選取標籤、屬性、CSS 樣式。這個自動的程式碼完成功能可讓您更快速地撰寫程式碼,且錯誤更少。

下列範例會顯示它在 HTML 中的運作方式。 

當您開始輸入「<」時,Dreamweaver 便會開啟彈出式選單,其中列出所有可用 HTML 標籤。在您繼續輸入標籤之時,Dreamweaver 會自動更新可用的 HTML 選項,並可讓您選取適用的標籤。當您按 Enter 時,Dreamweaver 會自動幫您插入標籤。然後會顯示第二個彈出式選單,列出該標籤的所有可用屬性。

程式碼提示支援也適用於 CSS、JavaScript 和 PHP (PHP 版本 5.6 和 7.1)。 

如需詳細資訊,請參閱「程式碼提示與程式碼完成」。

對 PHP 5.6 和 7.1 版的支援

Dreamweaver 支援 PHP 版本 5.6 和 7.1。 

您可以選擇透過 PHP 版本 5.6 或 7.1 來編譯網站的 PHP 檔案,其方式是使用「網站設定」對話方塊 (依據每個網站) 或應用程式偏好設定 (針對所有儲存在 Dreamweaver 網站外部的 PHP 檔案)。然後 Dreamweaver 會針對所選的 PHP 語言版本,設定程式碼提示與 linting 檢查。

如果是 Dreamweaver 中的新網站,預設 PHP 編譯器會設定為「編輯 > 偏好設定 > PHP」中指定的版本。

如需有關 Dreamweaver 中 PHP 支援的詳細資訊,請參閱:

如需有關 PHP 版本 5.6 和 7.1 的一般資訊,請參閱下列資源:

JavaScript 物件程式碼提示

Dreamweaver 支援 JavaScript 物件程式碼提示。Dreamweaver 為基本的 JavaScript 物件 (例如陣列、日期、數字和字串) 提供程式碼提示。 

此外,Dreamweaver 會追蹤您所建立的 JavaScript 函式,並使用您自己的函式名稱來提供程式碼提示。

如需詳細資訊,請參閱「程式碼提示與程式碼完成」。

重構 JavaScript 程式碼

Dreamweaver 支援程式碼重構。程式碼重構就是重組現有電腦程式碼而不變更其外部行為的程序。程式碼會變得更易讀且更容易理解。由於較小的函式和適當的取代,程式碼除錯會更省時。透過 JavaScript 重構,您可以利用範圍感知功能來重新命名函式和變數。

如需詳細資訊,請參閱「撰寫和編輯程式碼」。

不同檔案類型的程式碼色彩標示

Dreamweaver 支援 HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown (GitHub)、Perl、屬性、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、文字、VB、VBScript、XML 和 YAML 的程式碼色彩標示。

使用多個游標執行重複性工作

一次撰寫多行的程式碼,可快速執行如建立項目清單、更新一系列字串以及同時編輯多處等工作。

這個功能可大幅提高生產力,因為您不需要多次撰寫相同的程式碼行。多游標幫您一次完成。

在編輯程式碼時,您可以︰

  • 新增多個游標,在多個位置加入新的內容
  • 在多個位置選取文字,將相同的編輯套用至文件的不同部分

如需詳細資訊,請參閱「新增多個游標或多重選取」。

快速編輯相關的程式碼檔案

如果要快速變更程式碼,請將游標置於特定的程式碼片段上,然後使用快顯選單,或按 Ctrl-E (Windows) 或 Cmd-E (Mac) 來存取「快速編輯」。

Dreamweaver 會在行內顯示內容特定的程式碼選項和工具。

案例使用情況

請試想下列範例:

您正在編輯 HTML 檔案,在即時檢視中發現有些地方似乎不正確。然後您切換到程式碼檢視,發現您必須編輯另一個相關的檔案 (假設是 CSS 檔案) 才能解決問題。 

請勿切換索引標籤。以滑鼠右鍵按一下相關的程式碼,然後按一下「快速編輯」,或是使用鍵盤快速鍵,Dreamweaver 便會在這個 HTML 檔案內開啟相關 CSS 檔案中的相關程式碼區段。

然後您就可以編輯 CSS 程式碼,而不需離開此處或切換索引標籤。這些變更會自動更新到 CSS 檔案。

如需詳細資訊,請參閱「快速編輯」。

內容 CSS 文件

「快速查詢文件」直接在程式碼檢視內提供 CSS 屬性的文件。

您不需離開 Dreamweaver 以瀏覽網頁,就能了解 CSS 屬性。如果要顯示「快速查詢文件」,請按 Ctrl+K (Windows) 或 Cmd+K (Mac)。

如需詳細資訊,請參閱「在 Dreamweaver 中使用快速查詢文件取得 CSS 方面的協助」。

立即可用的 Emmet 支援

Emmet 是允許高速撰寫程式碼和產生 HTML 和 CSS 程式碼的外掛程式。

Emmet 外掛程式是隨附在 Dreamweaver 中,可讓您使用 Emmet 縮寫,不需要額外的外掛程式安裝步驟。

請在 Dreamweaver 的「程式碼檢視」或「程式碼檢視窗」中使用 Emmet 縮寫,按 Tab 鍵即可將這些縮寫展開為 HTML 標記或 CSS。

HTML 縮寫會在 HTML 及 PHP 頁面中展開。

CSS 縮寫會在 CSS、LESS、Sass、SCSS 頁面或 HTML 頁面的 style 標籤內展開。

如需有關使用 Emmet 的詳細資訊,請參閱「使用 Emmet 工具組搭配 Dreamweaver」。

程式碼收合

Dreamweaver 可讓您收合程式碼區段,您可以更容易專注於您正在編輯的區段。 

您可以根據標籤或括號來收合程式碼,也可以根據選取範圍來收合程式碼。 

如需詳細資訊,請參閱「收合和展開程式碼」。

程式碼驗證

Dreamweaver 提供強大的 linting 功能,可協助您去除程式碼錯誤。 

它會分析程式碼,以標幟潛在程式碼錯誤或可疑使用情況。HTML 語法錯誤、CSS 中的剖析錯誤或 JavaScript 檔案中的警告是 Dreamweaver 的 linting 所標幟的一些項目。

如需有關 Dreamweaver 中程式碼 linting 的詳細資訊,請參閱「Lint 程式碼」。

如果您是使用 PHP,而您的文件包含無效的程式碼,Dreamweaver 會在「設計」檢視 (如果已開啟) 中顯示該程式碼,並且在「程式碼」檢視中反白標示 (視您設定的偏好設定而定)。

如果您在任一種檢視中選取該程式碼,「屬性」檢視窗便會顯示程式碼無效的原因和修正方法的相關資訊。

註解:

「程式碼」檢視中會預設關閉用來反白標示無效程式碼的選項。若要開啟,請切換到「程式碼」檢視 (「檢視 > 程式碼」),然後選取「檢視 > 程式碼檢視選項 > 反白標示無效的程式碼」。

您也可以指定偏好設定,以便在您開啟文件時能自動改寫各種不正確的程式碼。

如需有關設定程式碼撰寫偏好設定的詳細資訊,請參閱「設定程式碼撰寫偏好設定」。

支援 CSS 預處理器

Dreamweaver 現在支援常用的 CSS 預處理器,例如 SASS、Less 和 SCSS,提供完整的程式碼色彩標示、程式碼提示和編譯功能。 

因為支援 CSS 預處理器,處理具有複雜樣式表的大型網站時,可以節省時間。

如需有關 Dreamweaver 中 CSS 預處理器支援的詳細資訊,請參閱「在 Dreamweaver 中使用 CSS 預處理器」。

儲存和重複使用程式碼片段

在「片段」面板內,將常用的程式碼區塊另存為程式碼片段。然後您就可以在多個頁面中插入這些程式碼區塊。

儲存在「片段」面板中的片段不是網站特有的,因此可以跨多個網站重複使用。

您也可以在不同的裝置中使用片段,以及使用同步化設定在不同版本的 Dreamweaver 中使用。

如需詳細資訊,請參閱「利用片段重複使用程式碼」。

在瀏覽器中即時預覽

在瀏覽器中即時快速預覽您的程式碼變更,不需要手動重新整理您的瀏覽器。Dreamweaver 現在會與您的瀏覽器連線,因此不需重新載入頁面,變更就會立即出現在您的瀏覽器中。

如需詳細資訊,請參閱「在瀏覽器中即時預覽」。

自訂鍵盤快速鍵

您可以在 Dreamweaver 中使用自己喜歡的鍵盤快速鍵。如果您習慣使用特定的鍵盤快速鍵 (例如,按 Shift+Enter 鍵來新增斷行符號,或按 Control+G 鍵前往程式碼中的特定位置),您可以使用「鍵盤快速鍵編輯器」將它們加入到 Dreamweaver。

如需詳細指示,請參閱「自訂鍵盤快速鍵」。

預設在程式碼檢視中開啟檔案

當您開啟通常不包含任何 HTML (例如,JavaScript 檔) 的檔案類型時,檔案會在「程式碼」檢視 (或「程式碼」檢視窗) 中開啟檔案,而不是在「設計」檢視中開啟。您可以指定在「程式碼」檢視中會開啟何種檔案類型。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「檔案類型/編輯器」。
  3. 在「在程式碼檢視中開啟」方塊中,新增您要在「程式碼」檢視中自動開啟之檔案類型的副檔名。

    請在各個副檔名之間輸入一個空格。您可以依自己的喜好來新增任意數量的副檔名。

 Adobe

更快、更輕鬆地獲得協助

新的使用者?