程式碼提示和程式碼完成

Dreamweaver 的智慧型程式碼完成或程式碼提示功能可減少打字錯誤和其他常見錯誤，讓您快速插入及編輯程式碼。

您也可以使用這項功能來查看︰

• 標籤可用的屬性
• 函式可用的參數
• 物件可用的方法

Dreamweaver 程式碼提示功能支援下列語言和技術：

• HTML
• CSS
• JavaScript 
• PHP

請繼續閱讀，了解這些語言的程式碼提示和程式碼完成如何運作。

啟用程式碼提示

如果要啟用程式碼提示，請按一下「編輯 > 偏好設定 > 程式碼提示」，然後選取「啟用程式碼提示」。如果要停用程式碼提示，請取消選取「啟用程式碼提示」。

若要啟用括號和引號的自動插入，請分別選取「自動插入大括號」和「自動插入引號」。

若要在程式碼提示中啟用描述，請選取「啟用描述工具提示」。然後，您就可以看到程式碼提示的描述。

HTML 程式碼提示

下列類型的程式碼提示適用於 HTML：

• 標籤提示
• 屬性名稱提示
• 屬性值提示

標籤提示

按下鍵盤上的 < 鍵可開始輸入程式碼。當您輸入時，Dreamweaver 會顯示有效的 HTML 標籤。如果您輸入的字串出現在選單中，請捲動至該字串，然後按下 Enter 或 Return 以完成輸入。

例如，當您輸入 < 時，彈出式選單會顯示標籤名稱的清單。您不需輸入其餘的標籤名稱，只要從選單中選取標籤，即可將它加入您的文字中。

這些 HTML 標籤提示也包含標籤的簡短描述 (如果適用的話)。

屬性名稱提示

在 Dreamweaver 中撰寫程式碼時，Dreamweaver 會顯示適當的標籤屬性。請輸入標籤名稱並按下空格鍵，以顯示您可以使用的有效屬性名稱。

屬性值提示

屬性值提示文字可以是靜態或動態的 (如同在程式碼提示中一樣，根據相關檔案中出現的內容來顯示值)。

大部分的屬性值提示都是靜態的。例如目標屬性值，由於它本身的性質是靜態的，因此提示也是靜態的。 

Dreamweaver 會為有需要的屬性值顯示動態程式碼提示 - 例如 id、target、src、href 和 class。

以下是動態顯示的程式碼提示的一些範例。 

src 的動態程式碼提示

在這個範例中，當您輸入 src 時，會出現有效的屬性值，而當您選取影像時，Dreamweaver 會顯示您影像資料夾中的實際有效影像。然後您可以向下捲動，並選擇您想要的。

如果您在 CC 資料庫中有資產，則當您輸入 src 時，這些資產也會出現。這些 CC 資料庫資產會以雲端圖示表示。

當您選擇 CC 資料庫資產時，會出現彈出式選單，讓您重新取樣影像大小，及變更影像格式。

href 的動態程式碼提示

當您輸入 href 時，Dreamweaver 會顯示您資料夾中檔案的清單，也會提供選項讓您瀏覽及選取您想要連結的檔案。

id 和 style 的動態程式碼提示

如果您已定義您 CSS 檔案中的 id，則當您在 HTML 檔案中輸入 id 時，Dreamweaver 會顯示所有可用的 ID。

同樣地，如果您已定義 CSS 樣式，則當您在 HTML 檔案中輸入 style 時，Dreamweaver 會顯示所有可用的樣式。

CSS 程式碼提示

程式碼提示適用於下列不同類型的 CSS：

• @ 規則
• 屬性
• 虛擬選取器和虛擬元素
• 速記

除了程式碼提示之外，CSS 屬性也可以使用秘訣。

CSS @ 規則的程式碼提示

Dreamweaver 會顯示所有 @ 規則的程式碼提示，以及 CSS 規則的描述，如此處所示。

CSS 屬性提示

當您輸入 CSS 屬性時，如果輸入冒號，程式碼提示便會出現，協助您選擇有效的值。

在下面的程式碼範例中，當輸入 font-family: 時，會出現有效的字體集。

您可以選擇其中一個字體集，或是從這些提示中開啟管理字體對話方塊，然後設定您偏好的字體。

另一個有用的程式碼提示範例是，當您使用 CSS 中的顏色時。當您輸入任何顏色相關屬性時 (例如邊框顏色或背景顏色)，如果按下冒號，程式碼提示便會顯示顏色清單。您可以從清單中挑選顏色，或是從程式碼提示中開啟「檢色器」，並設定偏好的顏色。

如果您在 CC 資料庫中有色票，程式碼提示也會顯示這些色票。

虛擬選取器和虛擬元素提示

您可以將 CSS 虛擬選取器新增至選取器來定義元素的特定狀態。例如，當您使用 :hover 時，如果用戶將游標停留在選取器所指定的元素上，就會套用該樣式。

當您輸入「:」時，如果游標位於正確的內容上，Dreamweaver 就會顯示有效虛擬選取器的清單。

當您輸入「::」時，如果游標位於正確的內容上，Dreamweaver 就會顯示有效虛擬元素的清單 (用於定義元素指定部分的樣式)。

CSS 速記提示

速記屬性是可讓您同時設定幾個其他 CSS 屬性之值的 CSS 屬性。background 和 font 屬性就是 CSS 速記屬性的一些例子。

如下方的範例所示，如果您輸入 CSS 速記屬性 (例如 background)，在您輸入空格後，Dreamweaver 就會顯示：

• 按相關性順序的適當屬性值
• 務必使用的必要值 (例如，如果您使用 font，則 font-size 和 font-family 都是必要的)
• 該屬性的瀏覽器擴充功能

在填入 CSS 速記屬性後，程式碼提示也會顯示您已輸入的屬性值。

CSS 程式碼秘訣

對於一些 CSS 屬性 (例如 box-shadow 或 text-shadow)，Dreamweaver 會顯示秘訣，指出哪些值應該跟隨其後，並使用星號指出哪些值是必要值。 

您也可以查看瀏覽器如何解譯 CSS。

JavaScript 程式碼提示

在 JavaScript 檔案中，Dreamweaver 會提供變數和函式參數的程式碼提示。 

在以下範例中，程式碼片段會指出類型。

當您在 JavaScript 檔案中工作時，Dreamweaver 會自動重新整理可用程式碼提示的清單。例如，如果您原本是在處理 HTML 主檔案，然後又切換到 JavaScript 檔案以進行變更，則當您返回 HTML 主檔案時，您在 JavaScript 檔案中所做的變更就會反映在程式碼提示清單中。 

即時物件檢查

Dreamweaver 也會自動重新整理 JavaScript 類型程式碼提示。

例如，如果您將變數定義為數字，Dreamweaver 便會保留該資訊。當您稍後在程式碼中參照該變數時，就會指出其類型。

如果您變更變數類型 (例如變更為字串)，則 Dreamweaver 的程式碼提示便會自動指出該變數為字串。

動態文件納入

如果您為特定的功能新增註解，在提示該功能時，Dreamweaver 也會顯示該功能的文件。 

PHP 程式碼提示

Dreamweaver 支援 PHP 5.6 版和 7.1 版的程式碼提示。這些程式碼提示是網站特有的，並且涵蓋所有的核心函式、類別和常數。

如需 PHP 5.6 版和 7.1 版的詳細資訊，請參閱「PHP 手冊」。

如需有關網站特有的程式碼提示的詳細資訊，請參閱「網站特有的程式碼提示」。

其中一項實用的 PHP 程式碼提示功能是變數的自動完成。

當您輸入貨幣符號 ($) 時，會出現您目前指令碼中所有變數的清單。請選取您想要的，然後按下 Enter/Return。相關檔案中的變數也會列出，以避免對於不同用途重複使用相同變數。

如果將 PHP 7.1 設定為預設值，則 Dreamweaver 會顯示 PHP 7.1 特有的程式碼提示。

編輯 PHP 程式碼提示的延遲設定

為了改善在 .php 檔案中的程式碼輸入效能，Dreamweaver 2017.5 和更新版本已新增 PHP 程式碼提示延遲。當您輸入 PHP 程式碼時，Dreamweaver 會在 400 毫秒之後才顯示提示。如果您想要修改 PHP 程式碼的延遲設定，請依照此程序進行：

網站特有的程式碼提示

Dreamweaver 讓任何使用 Joomla、Drupal、Wordpress 或其他架構的開發人員，在以「程式碼」檢視撰寫時可檢視 PHP 程式碼提示。若要顯示這些程式碼提示，首先您必須使用「網站特有的程式碼提示」對話方塊建立設定檔。設定會告知 Dreamweaver 要到何處尋找您的網站特有的程式碼提示。

如需使用網站特有的程式碼提示的教學課程影片，請參閱 www.adobe.com/go/learn_dw_comm13_tw。

建立設定檔

使用「網站特有的程式碼提示」對話方塊建立必要的設定檔，以便在 Dreamweaver 中顯示程式碼提示。

根據預設，Dreamweaver 會將設定檔儲存在 Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets 目錄中。

儲存網站結構

您可以儲存您在「網站特有的程式碼提示」對話方塊中所建立的自訂網站結構。

重新命名網站結構

在您重新命名網站結構時，切記避免使用三種預設網站架構結構中的任何名稱，亦不應使用「custom」這個字。

將檔案或資料夾加入至網站結構

您可以加入任何與架構相關聯的檔案或資料夾。在新增檔案或資料夾之後，就可以指定您想要掃描的檔案的副檔名。 

掃描網站中的副檔名

使用「尋找副檔名」對話方塊，檢視與編輯已納入網站結構中的副檔名。