使用手冊 取消

設定程式碼撰寫偏好設定

  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 網站
  19. 疑難排解
    1. 已修正的問題
    2. 已知問題

 

 

了解如何在 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 改寫具有指定副檔名之檔案中的程式碼。這個選項對包含協力廠商標籤的檔案而言特別有用。

    使用 & 將屬性值中的 <、>、& 和 " 編碼

    確保您使用 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。

 Adobe

更快、更輕鬆地獲得協助

新的使用者?