了解如何在 Dreamweaver 中設定程式碼撰寫偏好設定、程式碼主題、格式和改寫程式碼偏好設定。

您可以依照自己的特殊需求,設定程式碼撰寫偏好設定,例如程式碼格式和色彩標示等。

註解:

  • 若要設定進階的偏好設定,請使用「標籤資料庫」編輯器 (請參閱「管理標籤資料庫」)。
  • Dreamweaver 支援 CSS、JS 和 PHP 檔案類型的格式化。如需有關如何自訂 PHP、CSS、JS 程式碼格式的詳細資訊,請參閱「格式化程式碼」。

設定程式碼外觀

您可以從「檢視 > 程式碼檢視選項」選單中,設定文字換行、顯示程式碼行號、設定程式碼元素語法標色、設定縮排,以及顯示隱藏字元。

  1. 在程式碼檢視或「程式碼」檢視窗中檢視文件。
  2. 選取「檢視 > 程式碼檢視選項」。

  3. 選取或取消選取下列任一選項:

    自動換行

    會將程式碼換行,讓您不必水平捲動便能檢視程式碼。這個選項不會插入斷行符號,只是讓程式碼更容易檢視。

    行號

    會在程式碼的側邊顯示行號。

    隱藏字元

    會顯示特殊字元以取代空白。例如:以點取代每個空格、以兩個山形取代每個定位點,並以段落標記取代每個斷行。

    註解:

    Dreamweaver 用來表示文字換行的非強制斷行符號並不會顯示成段落標記。

    彩色標示語法

    會啟用或停用程式碼彩色標示。如需有關變更頁面配色的詳細資訊,請參閱「設定程式碼顏色」。

    自動縮排

    會自動縮排您的程式碼 (如果您在撰寫程式碼時按 Enter 鍵的話)。程式碼新的一行會縮排到與前一行相同的階層。如需有關變更縮排間距的詳細資訊,請參閱「變更程式碼格式」中的「定位鍵距離」選項。

變更程式碼格式

您可以指定格式偏好設定 (例如縮排、行長度以及標籤和屬性名稱的大小寫),來變更程式碼的外觀。

除了「改寫大小寫」選項以外的所有「程式碼格式」選項,都只會自動套用到新文件,以及您後續對文件建立的新增部分。

若要重新格式化現有的 HTML 文件,請開啟文件並選取「編輯 > 程式碼 > 套用原始碼格式」。

  1. 選取「編輯 > 偏好設定」。
  2. 從左邊的「分類」清單中選取「程式碼格式」。
  3. 設定下列任何一個選項:

    縮排

    指出 Dreamweaver 所產生的程式碼,是否應該縮排 (按照這些偏好設定中指定的縮排規則)。

    註解:

    此對話方塊中大部分的縮排選項,只會套用至 Dreamweaver 所產生的程式碼,而非您所輸入的程式碼。若要讓您新輸入的每一行程式碼都縮排到與前一行相同的階層,請選取「檢視 > 程式碼檢視選項 > 自動縮排」選項。如需詳細資訊,請參閱「設定程式碼外觀」。

    使用

    (文字方塊和彈出式選單) 指定 Dreamweaver 應使用多少空格或定位鍵,來縮排所產生的程式碼。例如,如果您在方塊中輸入 3,然後在彈出式選單中選取「定位鍵」,則 Dreamweaver 所產生的程式碼會在每一個縮排階層中使用三個定位鍵字元。

    定位鍵距離

    可決定在「程式碼」檢視中,每一個定位鍵字元顯示時佔多少字元的寬度。例如,如果「定位鍵距離」設成 4,則「程式碼」檢視中的每一個定位鍵,會顯示為四個字元寬的空格。此外,如果「縮排大小」設成 3 個「定位鍵」,則 Dreamweaver 所產生的程式碼將以每一個縮排階層使用三個定位鍵字元的方式縮排,這樣便會在「程式碼檢視」中顯示為十二個字元寬的空格。

    註解:

    Dreamweaver 會使用空格或定位鍵來縮排,但不會在插入程式碼時,將連續的空格轉換成定位鍵。

    Emmet

    您打算在撰寫程式碼時使用 Emmet 縮寫,請選取此選項。選取這個選項可確保 Dreamweaver 會在您按下 Tab 鍵時,將 Emmet 縮寫轉換成完整的 HTML 或 CSS 程式碼。如需有關使用 Emmet 的詳細資訊,請參閱「使用 Emmet 工具組搭配 Dreamweaver」。

    斷行類型

    會指定裝載遠端網站的遠端伺服器類型 (Windows、Macintosh 或 UNIX)。選擇正確的斷行字元類型可以確保在遠端伺服器上檢視時,您的 HTML 原始碼能正確顯示。當您使用只能辨識某幾種斷行符號的外部文字編輯器時,這個設定也很有用。例如,如果「記事本」是您的外部編輯器,請使用 CR LF (Windows),如果 SimpleText 是您的外部編輯器,則使用 CR (Macintosh)。

    註解:

    對於使用 FTP 連線到的伺服器,這個選項只適用於二進位傳送模式;Dreamweaver 中的 ASCII 傳送模式會忽略這個選項。如果您使用 ASCII 模式下載檔案,Dreamweaver 會根據電腦的作業系統來設定斷行。如果您使用 ASCII 模式上傳檔案,則會將斷行符號全部設定為 CR LF。

    TD 標籤: TD 標籤內不要包含斷行

    可解決當空白或斷行緊接在 <td> 標籤後面,或直接出現在 </td> 標籤前面時,會發生在某些舊版瀏覽器中的顯示問題。選取這個選項之後,Dreamweaver 就不會在 <td> 後面及在 </td> 標籤前面寫入斷行,即使「標籤資料庫」中的格式指示該處應該有斷行也是一樣。

    進階格式

    可讓您在「標籤資料庫編輯器」中設定個別標籤與屬性的格式選項。

    空白字元

    (僅適用於日文版) 可讓您為 HTML 程式碼選取 &nbsp; 或 Zenkaku (全型) 空格。這個選項所選取的空白將會在建立表格時,以及在啟用了「日文編碼方式」頁面中的「允許多個連續空白」選項時,做為空白標籤使用。

    最小程式碼摺疊大小

    預設程式碼摺疊大小為兩行。使用此預設設定時,所有包含至少兩行程式碼的程式碼片段皆可收合。程式碼不到兩行的片段只能藉由選取程式碼進行收合。如需有關程式碼摺疊的詳細資訊,請參閱「收合和展開程式碼」。

設定改寫程式碼偏好設定

使用改寫程式碼偏好設定,可以指定 Dreamweaver 在您開啟文件、複製和貼上表單元素、以及利用工具 (如「屬性」檢視窗) 輸入屬性值和 URL 時,如何以及是否修改程式碼。當您在「程式碼」檢視中編輯 HTML 或指令碼時,這些偏好設定並沒有效果。

如果您停用程式碼改寫選項,「文件」視窗就會針對可能已改寫的 HTML 顯示其中不正確的標記項目。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「改寫程式碼」。
  3. 設定下列任何一個選項:

    修正不正確的巢狀標籤和未結束的標籤

    會改寫重疊的標籤。例如,<b><i>text</b></i> 會改寫為 <b><i>text</i></b>。這個選項也會插入結束引號和結束括號 (如果缺少的話)。

    貼上時重新命名表單項目

    可確保您沒有重複的表單物件名稱。這個選項預設為啟用。

    註解:

    不同於此偏好設定對話方塊中的其他選項,這個選項不會在您開啟文件時套用,只有在您複製並貼上表單元素時才會套用。

    移除多餘的結束標籤

    刪除沒有對應開頭標籤的結束標籤。

    當修改或是移除標籤時發出警告

    顯示一份摘要,列出 Dreamweaver 所嘗試更正且技術上不正確的 HTML。這份摘要會註明問題的位置 (使用行號和欄號),讓您可以找到更正的內容,並確保更正能如預期般顯示。

    永不改寫程式碼: 在有副檔名的檔案中

    可讓您防止 Dreamweaver 改寫具有指定副檔名之檔案中的程式碼。這個選項對包含協力廠商標籤的檔案而言特別有用。

    註解:

    此選項和下列的選項,不適用於您在「程式碼」檢視中輸入的 URL。而且,它們也不會造成變更檔案中已經存在的程式碼。

    不要將特殊字元編碼

    避免 Dreamweaver 將 URL 變更成只使用合法的字元。這個選項預設為啟用。

    使用 &# 將 URL 中的特殊字元編碼

    確保使用 Dreamweaver 工具 (例如「屬性」檢視窗) 輸入或編輯 URL 時,這些 URL 中只包含合法的字元。

    使用 % 將 URL 中的特殊字元編碼

    運作的方式與前面的選項相同,但使用不同的方法將特殊字元編碼。這種編碼方法 (使用百分比符號) 可能會更相容於舊版瀏覽器,但可能較不適用於某些語言的字元。

設定程式碼提示偏好設定

使用程式碼提示偏好設定可以設定程式碼提示要如何運作。

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

    設定程式碼提示偏好設定
  2. 從左邊的分類中選取「程式碼提示」。

  3. 設定下列任何一個選項:

    結束標籤

    指定 Dreamweaver 要以何種方式結束標籤。

    • 輸入「</」之後
    • 輸入開始標籤的「>」之後:如果希望 Dreamweaver 在您結束開頭標籤之後自動新增結束標籤,請選取此選項。
    • 永不:如果不需要 Dreamweaver 自動新增結束標籤,請選取此選項。

    啟用程式碼提示

    選取這個選項可以在 Dreamweaver 中啟用或停用程式碼提示和程式碼完成功能。如需有關 Dreamweaver 程式碼提示及程式碼完成功能的詳細資訊,請參閱「程式碼提示和程式碼完成」。

    啟用描述工具提示

    選取這個選項以啟用要與程式碼提示一起出現的描述。這些描述提供您撰寫中程式碼的其他資訊。

    自動插入大括號  當選取時,每當用戶輸入左括號時,便會自動插入右括號。若未選取時,當用戶輸入左括號時,便不會插入右括號。適用於所有類型的括號及所有檔案類型 (html、php、css、js)。

    自動插入引號  當選取時,每當用戶輸入左引號時,便會自動插入右引號。若未選取時,當用戶輸入左引號時,便不會插入右引號。適用於單引號和雙引號及所有檔案類型 (html、php、css、js)。

設定自動完成程式碼的偏好設定

您可以執行下列步驟以啟用和停用自動完成方括弧及引號的功能:

  1. 從下列位置開啟 brackets.json 檔案:

    • Win:%appdata%\Adobe\Dreamweaver CC 2018\en_US\Configuration\Brackets\
    • Mac:~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
       
  2. 若要停用自動完成方括弧和小括弧的功能,請將 autoCloseBraces 設定為 False。

  3. 若要停用自動插入成對引號的功能,請將 autoCloseQuotes 設定為 Flase。

    如果您想要啟用自動完成方括弧和成對引號的功能,請將上述值設定為 True。

    在 Dreamweaver 中設定自動完成程式碼的偏好設定
    在 Dreamweaver 中設定自動完成程式碼的偏好設定
  4. 儲存 .json 檔案並啟動 Dreamweaver。

設定 PHP 偏好設定

您可以設定您想要在其中工作的 PHP 程式碼開發環境。您可以針對目前處理的特定網站進行設定,也可以針對所有儲存在 Dreamweaver 網站外部的 PHP 檔案進行整體設定。

Dreamweaver 會針對所選的 PHP 語言版本,設定程式碼提示與 linting 檢查。

若要針對非網站特有的檔案設定 PHP 程式碼版本偏好設定,請完成下列步驟︰

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

  2. 從左側的分類清單中設定 PHP。

  3. 從「PHP 版本」下拉式清單中選擇 PHP 版本,然後按一下「套用」。

若要針對特定網站設定 PHP 版本,請完成下列步驟︰

  1. 在「網站設定」對話方塊的「進階設定」下方,選取「PHP」。

  2. 從「PHP 版本」下拉式清單中選擇 PHP 版本,然後按一下「儲存」。

    針對特定網站設定 PHP 偏好設定
    針對特定網站設定 PHP 偏好設定

設定顏色主題和程式碼主題

啟動 Dreamweaver 時,您可以根據自己的偏好選擇顏色主題。您也可以隨時變更這個偏好設定。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單選取「介面」。

  3. 從「顏色主題」清單選擇主題。

  4. 設定介面主題後,設定程式碼主題。

    您可以選擇淺色或深色程式碼主題。

  5. 按一下「套用」以儲存變更。

    您可以根據您的需求,選擇進一步自訂程式碼色彩標示。如需詳細資訊,請參閱「自訂程式碼色彩標示」。

使用外部編輯器

您可以指定外部編輯器,以用於編輯具有特定副檔名的檔案。例如,您可以從 Dreamweaver 開啟如 BBEdit、「記事本」或 TextEdit 等文字編輯器,以編輯 JavaScript (JS) 檔案。

您可以針對不同的副檔名指派不同的外部編輯器。

針對檔案類型設定外部編輯器

  1. 選取「編輯 > 偏好設定」。
  2. 從左邊的「分類」清單中選取「檔案型態/編輯器」,並設定選項,然後按一下「確定」。

    在程式碼檢視中開啟

    指定會在 Dreamweaver「程式碼」檢視中自動開啟的副檔名。

    重讀更改過的檔案

    指定當 Dreamweaver 偵測到開啟於 Dreamweaver 中的文件在外部進行變更時,所應該表現的行為。

    啟動時儲存

    指定 Dreamweaver 在啟動編輯器之前,應該永遠儲存目前的文件、永不儲存文件,或者在您每次啟動外部編輯器時,顯示提示以詢問是否要儲存文件。

    Fireworks

    您可以在這裡提供應用程式的路徑來連接 Fireworks 與 Dreamweaver。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策