了解如何在 Dreamweaver 中收合和展開程式碼,以便不需捲動就能檢視文件的各區段。

您可以收合 (亦稱為摺疊) 和展開程式碼片段,不需捲動就能檢視文件中不同的區段。

例如,如果要查看 head 標籤的所有 CSS 規則,而此 head 標籤套用到頁面較下面的 div 標籤,請將 head 標籤與 div 標籤之間的程式碼摺疊起來,這樣就可以一次看見兩個程式碼區段。

您可以選取程式碼的一部分以將它收合。您也可以根據標籤區塊,在 HTML、PHP、XML 及 SVG 檔案中收合程式碼。在 CSS、Less、Sass、SCSS 和 JS 檔案中,您可以根據大括號收合程式碼。

  • HTML 檔案:Dreamweaver 會收合 HTML 開始標籤和結束標籤之間的程式碼,而且初始屬性 (如果適用) 會顯示在收合的程式碼中。當區塊內的程式碼透過下列方式取得焦點,Dreamweaver 會自動展開:標籤選取器、尋找和取代、前往行數、元素快速檢視、即時檢視或還原/重做。

如果變更選取,程式碼會再次自動收合。

  • CSS、Less、Sass、SCSS 及 JS 檔案:大括號內的程式碼會收合,而且預覽會顯示為 {...}。
  • PHP 檔案:除了 PHP 程式碼區塊,HTML 元素、CSS 及 JS 程式碼區塊也會收合。

註解:

從 Dreamweaver 範本建立的檔案會以完全展開的方式顯示所有的程式碼,即使該範本檔案 (.dwt) 包含了已收合的程式碼片段。

設定程式碼摺疊大小偏好設定

預設程式碼摺疊大小為兩行。在這個預設設定中,當您收合程式碼時,擁有至少兩行程式碼的所有程式碼片段都會收合。小於兩行的程式碼片段會以展開模式顯示。

如果要變更程式碼摺疊的最小行數:

  1. 按一下「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Mac)。

  2. 按一下「類別」清單中的「程式碼格式」,並指定最小程式碼摺疊大小。

收合和展開程式碼片段

根據預設,「程式碼」檢視中的所有程式碼都處於展開模式。

不過,您可以選取數行程式碼並收合它們。您也可以根據語法 - 標籤區塊或大括號,收合程式碼。

註解:

程式碼區塊的收合或展開狀態會在不同的 Dreamweaver 工作階段中保留。

根據標籤區塊或大括號收合程式碼

如果要根據標籤區塊或大括號收合程式碼:

  1. 在「程式碼」檢視中,將滑鼠停留在您想要收合或展開的程式碼區塊所對應的行號欄上。行號旁邊便會出現一個小三角形。

  2. 按一下三角形,收合或展開程式碼。

    註解:

    若要展開文件中所有收合的程式碼,您可以使用鍵盤快速鍵 Control+Alt+E (Win);Command+Alt+E (Mac)。

    使用標籤區塊收合程式碼
    使用標籤區塊收合程式碼 (必須更新擷取畫面)

根據選取範圍收合程式碼

如果要根據選取範圍收合程式碼:

  1. 在「程式碼」檢視中,選取您要收合的程式碼片段。

    當您選取程式碼時,收合圖示會顯示在行號欄中。

  2. 按一下圖示,即可收合和展開選取範圍。

    當收合程式碼時,收合圖示會變成展開圖示 ()。

    收合選取的程式碼
    收合選取的程式碼 (必須更新擷取畫面)

    展開程式碼 (必須更新擷取畫面)
    展開程式碼 (必須更新擷取畫面)

使用鍵盤快速鍵收合和展開程式碼

命令

Windows

Macintosh

收合選取範圍

Control+Shift+C

Command+Shift+C

收合外部選取範圍

Control+Alt+C

Command+Alt+C

展開選取範圍

Control+Shift+E

Command+Shift+E 鍵

收合完整標籤

Control+Shift+J

Command+Shift+J

收合外部完整標籤

Control+Alt+J

Command+Alt+J

全部展開

Control+Alt+E

Command+Alt+E

複製和貼上收合的程式碼片段

  1. 按一下收合的程式碼片段以選取它。

  2. 選取「編輯 > 複製」。
  3. 將游標放置在您想要貼上程式碼的位置。

  4. 選取「編輯 > 貼上」。

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

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