使用手冊 取消

程式碼提示和程式碼完成

 

 

使用 Dreamweaver 的程式碼提示和程式碼完成功能,大幅縮短撰寫程式碼的時間。

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

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

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

支援的語言和技術

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

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

啟用程式碼提示

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

程式碼提示偏好設定
程式碼提示偏好設定

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

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

HTML 程式碼提示

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

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

標籤提示

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

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

基本 HTML 程式碼提示
基本 HTML 程式碼提示

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

屬性名稱提示

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

屬性名稱程式碼提示
屬性名稱程式碼提示

屬性值提示

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

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

靜態屬性值提示的範例
靜態屬性值提示的範例

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

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

src 的動態程式碼提示

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

src 的動態程式碼提示
src 的動態程式碼提示

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

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

在您的程式碼中加入 CC 資料庫資產
在您的程式碼中加入 CC 資料庫資產

註解:

程式碼提示只能顯示 50 個 CC 資料庫資產。這些提示會依照字母順序出現。

註解:

不支援在 Dreamweaver 程式碼中加入遠端 CC 資料庫資產。

href 的動態程式碼提示

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

href 的動態程式碼提示
href 的動態程式碼提示

id 和 style 的動態程式碼提示

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

id 的動態程式碼提示
id 的動態程式碼提示

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

style 的動態程式碼提示
style 的動態程式碼提示

CSS 程式碼提示

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

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

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

CSS @ 規則的程式碼提示

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

CSS @ 規則程式碼提示
CSS @ 規則程式碼提示

CSS 屬性提示

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

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

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

CSS 屬性的程式碼提示和說明
CSS 屬性的程式碼提示和說明

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

CSS 顏色相關程式碼提示
CSS 顏色相關程式碼提示

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

CC 資料庫中的色票會以雲端圖示表示
CC 資料庫中的色票會以雲端圖示表示

註解:

程式碼提示只能顯示 50 個 CC 資料庫資產。這些提示會依照字母順序出現。

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

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

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

虛擬選取器程式碼提示
虛擬選取器程式碼提示

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

虛擬元素程式碼提示
虛擬元素程式碼提示

CSS 速記提示

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

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

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

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

CSS 程式碼秘訣

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

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

為 CSS 屬性所顯示的秘訣
為 CSS 屬性所顯示的秘訣

JavaScript 程式碼提示

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

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

JavaScript 程式碼提示
JavaScript 程式碼提示

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

註解:

只有當您在 Dreamweaver 中編輯 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 7 程式碼提示
PHP 7 程式碼提示

PHP 物件程式碼提示的範例
PHP 物件程式碼提示的範例

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

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

  1. 結束 Dreamweaver。

  2. 使用文字編輯器,從下列位置開啟 brackets.json:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. 按一下對話方塊右上角的「儲存結構」按鈕。

    在 JSON 檔案中,將逗號加在最後一個名稱/值配對後面。

    新增下列程式碼行並加上您想要的延遲時間 (毫秒):"delayInPHPHint": <time in milliseconds>。 例如,"delayInPHPHint": 200。

  4. 儲存檔案並啟動 Dreamweaver。

網站特有的程式碼提示

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

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

建立設定檔

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

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

註解:

您所建立的程式碼提示是專供 Dreamweaver 的「檔案」面板中選取的網站使用。如果要顯示程式碼提示,您正在處理的頁面必須位於目前選取的網站內。

  1. 選取「網站 > 網站選項 > 網站特有的程式碼提示」。

    根據預設,「網站特有的程式碼提示」功能會掃描您的網站,以得知您是使用哪種內容管理系統 (CMS) 架構。Dreamweaver 預設支援三種架構:Drupal、Joomla 和 Wordpress。

    位於「結構」彈出式選單右側的四個按鈕可讓您匯入、儲存、重新命名或刪除架構結構。

    註解:

    您無法刪除或重新命名現有的預設架構結構。

  2. 在子網站根目錄文字方塊中,指定您儲存架構檔案的子網站根目錄資料夾。您可以按一下文字方塊旁的資料夾圖示,瀏覽到架構檔案的位置。

    Dreamweaver 會顯示內含架構檔案的資料夾之檔案樹狀結構。如果您想要掃描的資料夾和檔案已全部顯示,請按一下「確定」執行掃描。若希望自訂掃描,則繼續進行下列步驟。

  3. 按一下「檔案」視窗上方的加號 (+) 按鈕,以選取您要加入至掃描的檔案或資料夾。在「加入檔案/資料夾」對話方塊中,您可以指定想要納入的特定副檔名。

    註解:

    請指定特定的副檔名,以加速掃描程序。

  4. 如果要移除檔案以略過掃描,請選取您不想要掃描的檔案,再按一下「檔案」視窗上方的減號 (-) 按鈕。

    註解:

    如果您所選取的架構是 Drupal 或 Joomla,「網站特有的程式碼提示」對話方塊便會顯示 Dreamweaver 設定資料夾內某個檔案的其他路徑。

    切勿予以刪除,因為在使用這些架構時需要此項目。

  5. 若要自訂「網站特有的程式碼提示」功能處理特定檔案或資料夾的方式,請從清單中選取該項目並執行下列其中一項作業:

    • 選取「掃描這個資料夾」以將選取的資料夾納入掃描。
    • 選取「遞迴」以納入所選目錄中的全部檔案和資料夾。
    • 按一下「副檔名」按鈕以開啟「尋找副檔名」對話方塊,然後即可指定在掃描特定檔案或資料夾時想要納入的副檔名。

儲存網站結構

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

  1. 結束 Dreamweaver。

  2. 步驟文字
  3. 依您想要的方式建立檔案及資料夾的結構,並視需要新增和刪除檔案和資料夾。

  4. 指定網站結構的名稱,再按一下「儲存」。

註解:

如果指定的名稱已在使用中,Dreamweaver 會提示您輸入另一個名稱,或要求確認是否覆寫具有相同名稱的結構。您無法覆寫任何的預設架構結構。

重新命名網站結構

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

  1. 顯示您想要重新命名的結構。

  2. 按一下對話方塊右上角的「重新命名結構」圖示按鈕。

  3. 為該結構指定一個新名稱,再按一下「重新命名」。

註解:

如果您所指定的名稱已在使用中,Dreamweaver 會提示您輸入另一個名稱,或要求確認是否覆寫具有相同名稱的結構。您無法覆寫任何的預設架構結構。

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

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

  1. 按一下「檔案」視窗上方的加號 (+) 按鈕,開啟「加入檔案/資料夾」對話方塊。

  2. 在「加入檔案/資料夾」文字方塊中,輸入您要加入的檔案或資料夾所在路徑。您也可以按一下文字方塊旁的資料夾圖示,瀏覽到某個檔案或資料夾。

  3. 按一下「副檔名」視窗上方的加號 (+) 按鈕,以指定您想要掃描的檔案副檔名。

    註解:

    請指定特定的副檔名,以加速掃描程序。

  4. 按一下「新增」。

掃描網站中的副檔名

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

  1. 按一下「網站特有的程式碼提示」對話方塊中的「副檔名」按鈕。

    「尋找副檔名」對話方塊會列出目前可供掃描的副檔名。

  2. 若要加入其他副檔名至清單中,請按一下「副檔名」視窗上方的加號 (+) 按鈕。

  3. 若要刪除清單中的某個副檔名,請按一下減號 (-) 按鈕。

更快、更輕鬆地獲得協助

新的使用者?