Dreamweaver 的程式碼撰寫環境

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

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

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

• 程式碼檢視：簡單俐落的版面可讓您專心處理程式碼，沒有額外的面板或視窗。如需詳細資訊，請參閱「在文件視窗中檢視程式碼」。
• 分割檢視：在這個檢視中會同時顯示程式碼和即時或設計檢視，因此您可以在撰寫程式碼時看到您所做的變更。如需詳細資訊，請參閱「在文件視窗中同時撰寫程式碼和編輯頁面 - 分割檢視」。

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

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

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

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

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

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

在 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 偏好設定
• PHP 程式碼提示

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

• 從 PHP 5.6.x 移轉到 PHP 7.0.x：http://php.net/manual/en/migration70.php
• 從 PHP 7.0.x 移轉到 PHP 7.1：http://php.net/manual/en/migration71.php
• 深入了解 PHP 7.1：http://php.net/releases/7_1_0.php

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 檔) 的檔案類型時，檔案會在「程式碼」檢視 (或「程式碼」檢視窗) 中開啟檔案，而不是在「設計」檢視中開啟。您可以指定在「程式碼」檢視中會開啟何種檔案類型。