使用手冊取消

撰寫和編輯程式碼

搜尋

上次更新時間 2021年4月29日

Dreamweaver

開啟應用程式

了解如何在程式碼檢視中工作，並充分利用 Dreamweaver 的程式碼撰寫功能。

您可以透過多種方式在 Dreamweaver 中處理程式碼。

您可以使用「新增文件」對話方塊來開啟新的程式碼檔案，然後開始輸入程式碼。

當您輸入時，程式碼提示會出現，協助您選取程式碼及避免打字錯誤。當您有需要時，使用 Dreamweaver 實用的快速查詢文件取得 CSS 方面的協助。

您也可以使用「插入」面板或使用程式碼撰寫快速鍵 (例如 Emmet 縮寫) 來插入程式碼。

如果您會多次複製並貼上相同的程式碼片段，請嘗試下列省時的功能：

「片段」面板極為實用，可快速建立預先格式化的程式碼片段，並將其插入您的程式碼中。
多個游標可讓您一次建立和編輯多行程式碼。

Dreamweaver 也提供一組強大的編輯工具，讓瀏覽和變更程式碼的程序更加順暢。

請使用 Dreamweaver 的尋找和取代功能，在程式碼中搜尋標籤、屬性或文字。
請使用程式碼導覽器來瀏覽目前檔案內外的相關程式碼。更棒的是，可使用快速編輯功能來編輯相關檔案中的程式碼，甚至不需要在新標籤中開啟檔案。
以滑鼠右鍵按一下程式碼，會顯示簡單、相關的快顯選單，讓您直接編輯程式碼。
請使用用標籤圍繞，以標籤圍繞文字。

請繼續閱讀，以取得所有這些程式碼功能的詳細資訊。

使用「插入」面板插入程式碼

將插入點放在程式碼中。
在「插入」面板中選取適當的類別。
按一下「插入」面板中的按鈕，或從「插入」面板的彈出式選單中選取項目。

當您按一下圖示時，程式碼就會立即出現在您的頁面中，或者會出現對話方塊，要求更多資訊來完成程式碼。

視目前的文件類型而定，「插入」面板中的可用按鈕數目和類型會不盡相同。它也會依據您使用的是「程式碼」檢視或「設計」檢視而有所不同。

使用 Emmet 工具組搭配 Dreamweaver

Emmet 是允許高速編碼和產生 HTML 和 CSS 程式碼的外掛程式。

請在 Dreamweaver 的「程式碼檢視」或「程式碼檢視窗」中使用 Emmet 縮寫，按 Tab 鍵即可將這些縮寫展開為 HTML 標記或 CSS。

HTML 縮寫在 HTML 及 PHP 頁面中展開。CSS 縮寫會在 CSS、LESS、SASS、SCSS 頁面或 HTML 頁面的 style 標籤內展開。

下列範例為您示範如何在程式碼檢視中使用 Emmet 縮寫。如需詳細資訊和參考資料，請參閱「Emmet 文件」。

註解：

Dreamweaver 目前支援 Emmet 1.2.2 縮寫。

範例 1：使用 Emmet 插入 HTML 程式碼

如果要為有三個元素的未排序清單快速加入 HTML 程式碼，請開啟 HTML 檔案，並在「程式碼」檢視的 <body></body> 中輸入下列 Emmet 縮寫：

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

現在，請確定游標位於 Emmet 縮寫後，然後按 Tab 鍵展開縮寫。或者，選取整個縮寫，然後按 Enter。

縮寫會展開為下列程式碼：

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

範例 2：使用 Emmet 插入 CSS 程式碼

如果要插入 CSS 程式碼以建立具有廠商前置詞的邊框半徑，請開啟您的 CSS 檔案並在類別內輸入下列 Emmet 縮寫：

-bdrs

當您按 Tab 鍵時，縮寫會展開成為下列程式碼：

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

使用程式碼註解

「註解」是您插入 HTML 程式碼中，用來說明該程式碼或是提供其他資訊的描述性文字。註解的文字只會顯示在「程式碼」檢視中，而不會顯示在瀏覽器中。

在程式碼中加入註解

如果要加入註解，請先輸入註解文字。然後您可以將游標置於插入點，再按一下工具列中的「插入」圖示，以開啟「套用註解」子選單。

您也可以選取文字，讓它成為註解。選取的文字會被圍繞在註解區塊中。

您可以使用各種語法選項來加入註解。請選取適當的語法，Dreamweaver 會為您插入標籤。您只要輸入註解文字即可。

您也可以使用 Ctrl+/ (Windows) 或 Cmd+/ (Mac) 鍵盤快速鍵來加入註解。

如果您使用鍵盤快速鍵，而未選取任何文字，註解會套用於目前的字行。如果您選取文字並使用鍵盤快速鍵，註解則會套用於選取的文字。

從程式碼中移除註解

如果要移除程式碼註解，請選取程式碼，然後按一下工具列中的「移除註解」圖示。您也可以使用 Ctrl-/ (Windows) 或 Cmd-/ (Mac) 鍵盤快速鍵來移除註解。

切換程式碼註解

如果要在程式碼檢視中切換顯示註解和隱藏註解，只要針對選取的註解或字行按 Ctrl+/ (Windows) 或 Cmd+/ (Mac) 即可。

使用多個游標在多個位置新增或變更文字

使用 Dreamweaver 的多個游標功能，在多個位置新增游標，或選取多個程式碼區段並同時編輯。

註解：

複製和貼上及尋找和取代作業，無法與多個游標或多重選取一起運作。

新增多個游標或多重選取

您可以根據您的需求，以不同的方式新增多個游標。

如果您想要在多個位置新增相同的文字，而不取代現有的文字，請新增多個游標。

如果您想要取代現有的文字，可以執行多重選取。您可以選取連續及/或非連續的數行文字，並在其中新增游標。

如果要在同一欄的連續數行新增多個游標或多重選取：

按住 Alt 鍵，然後按一下垂直拖曳。當您垂直拖曳時，游標會新增到您拖曳過的每一行。

如果要選取連續數行文字，請按住 Alt 鍵，然後以對角線方向拖曳。當您以對角線方向拖曳時，Dreamweaver 會在該選取範圍內選取一個矩形區塊的文字。

註解：

如果要快速新增游標或在選取範圍中包含多行，請使用 Shift-Alt-向上或向下鍵盤快速鍵。

在多個位置新增游標 (或選取文字) 之後，即可直接開始輸入。

如果您有多個游標，則會加入新文字。

如果您已在多行文字中選取內容，您所輸入的新文字就會取代選取的文字。

如果要在不同欄的多行新增多個游標：

如果要在非連續的數行文字中新增游標，只要按 Ctrl 鍵，然後按一下您想要放置游標的不同字行即可。

如果要選取非連續的數行文字，請選取部分文字，並按下 Ctrl 鍵 (Windows) 或 Cmd 鍵 (Mac)，然後繼續進行其他選取。

如果要在每一行的開頭/結尾處新增游標：

請選取多行文字，並按向左或向右鍵。

如果要在選取範圍的前面或後面數行中新增游標：

按 Shift+Alt+向上/向下鍵，然後按向右鍵。

如果要選取連續及非連續的數行文字：

您可以結合這些技巧，在單一選取範圍內同時選取連續和分開的數行文字。

先選取非連續的數行文字，然後按 Ctrl-Alt (Windows) 或 Cmd-Alt (Mac) 並拖曳，即可將一組字行新增到現有的多重選取範圍中。

在 Dreamweaver 中使用快速查詢文件取得 CSS 方面的協助

在 Dreamweaver 中使用 CSS、LESS 或 SCSS 檔案時，您可以快速取得有關 CSS 屬性或值的詳細資訊。

將您的游標置於屬性或值中，然後按 Ctrl+K，Dreamweaver 會開啟「Web Platform 文件」專案中的文件。

您可以同時開啟多個內嵌編輯器和文件檢視器。

如果要關閉單一內嵌編輯器或文件檢視器，請在「快速查詢文件」成為焦點時，按一下左上方的「X」或按 Escape。

如果要關閉所有的內嵌編輯器和文件，請將您的游標放回主要包含它的程式碼編輯器中，然後按 Escape。

分析程式碼

Dreamweaver 支援 HTML、CSS 和 JavaScript 的 linting (分析程式碼中的潛在錯誤)。

「輸出」面板會列出透過 linting 偵測到的錯誤和警告。如需詳細資訊，請參閱「Lint 程式碼」。

此外，Dreamweaver 也會在錯誤行的行號欄中顯示快速錯誤預覽。行號會以紅色顯示，表示當中包含錯誤，當您將滑鼠停留在其上方時，會顯示錯誤的簡短描述。

注意： 只會顯示該行中的第一個錯誤。如果該行只包含警告，則會顯示警告的描述。如果該行包含警告和錯誤，則只會顯示錯誤描述。

使用「用標籤圍繞」，以程式碼圍繞文字

在「程式碼」檢視中使用「用標籤圍繞」，使用標籤來圍繞特定的數行文字。在「設計」或「即時」檢視中，您可以使用此功能，以標籤來圍繞物件。

在「程式碼」檢視中選取文字或在「設計」檢視中選取物件，然後按鍵盤上的 Ctrl+T。

彈出式選單隨即出現，讓您從多種 HTML 標籤中選取。
從選單中選取標籤。

如果您在程式碼檢視中工作，就會以標籤來圍繞選取的文字。如果您在「設計」或「即時」檢視中工作，則會以標籤來圍繞選取的物件。

使用編碼快顯選單編輯程式碼

請使用 Dreamweaver 的快顯選單來快速編輯程式碼。

若要存取快顯選單，請以滑鼠右鍵按一下 (Windows) 或 Command+按一下 (Mac)。您可以使用下列選項：

快速編輯

按一下此選項可進入「快速編輯」模式。在這個模式中，Dreamweaver 會提供行內內容特定的程式碼和工具，讓您快速取得您所需要的程式碼區段。如需詳細資訊，請參閱「快速編輯」。

剪下、複製、貼上

請按一下這些選項，快速地剪下、複製和貼上文字，而不需要存取「編輯」選單。

尋找和取代、尋找下一個、尋找上一個

請按一下這些選項，快速地尋找和取代文字，而不需要存取「尋找」選單。

建立新片段

請使用此選項來建立程式碼片段，您可以儲存供日後重複使用。選取程式碼，然後按一下「建立新片段」，讓選取的程式碼成為片段。如需詳細資訊，請參閱「使用程式碼片段」。

開啟相關檔案

以滑鼠右鍵按一下連結/script 標籤，然後按一下「開啟相關檔案」以開啟檔案。

附加樣式表

將現有的 CSS 樣式表附加至您的頁面。

選取範圍

「選取範圍」子選單包含各種程式碼編輯選項，您可以用於選取的程式碼片段上，例如切換字行和區塊註解、展開和收合選取範圍、將行內 CSS 轉換為規則、移動 CSS 規則以及列印程式碼。

程式碼導覽器

按一下此選項可瀏覽相關的程式碼來源，例如內部和外部 CSS 規則、伺服器端包含、外部 JavaScript 檔案、父系範本檔案、圖庫檔案以及 iframe 原始檔案。如需詳細資訊，請參閱「瀏覽相關程式碼」。

程式碼提示工具

「程式碼提示工具」子選單讓您可隨手使用檢色器、URL 瀏覽器和字體清單工具。

縮排程式碼區塊

在「程式碼」檢視或「程式碼」檢視窗中撰寫和編輯程式碼時，您可以變更所選區塊或程式碼行的縮排階層，使用一個定位鍵將它向右或向左移動。

縮排選取的程式碼區塊

按 Tab，或
按 Ctrl+]，或
選取「編輯 > 縮排程式碼」。

凸排選取的程式碼區塊

按 Shift+Tab，或
按 Ctrl+[，或
選取「編輯 > 凸排程式碼」。

瀏覽相關程式碼

「程式碼導覽器」會顯示與頁面上特定選取範圍相關的程式碼來源清單。使用此工具可以瀏覽相關的程式碼來源，例如內部和外部 CSS 規則、伺服器端包含、外部 JavaScript 檔案、父系範本檔案、圖庫檔案以及 iframe 原始檔案。當您按一下「程式碼導覽器」中的連結時，Dreamweaver 便會開啟含有相關程式碼片段的檔案。檔案將出現在相關檔案區域 (若已啟用)。如果您未啟用相關檔案，Dreamweaver 則會在「文件」視窗中開啟選取的檔案而成為另一份文件。

若在「程式碼導覽器」中按一下 CSS 規則，Dreamweaver 將帶您直接前往該項規則。如果規則位於目前檔案內部，Dreamweaver 會在「分割」檢視中顯示規則。如果規則位於外部 CSS 檔案，Dreamweaver 將開啟該檔案並在主文件上方的相關檔案區域內顯示規則。

您可以從「設計」、「程式碼」、「分割」檢視以及「程式碼」檢視窗存取「程式碼導覽器」。

如需 Dreamweaver 工程團隊針對使用程式碼導覽器所提供的概觀影片，請參閱 www.adobe.com/go/dw10codenav。

如需即時檢視、相關檔案及程式碼導覽器的教學課程影片，請參閱 www.adobe.com/go/lrvid4044_dw。

開啟程式碼導覽器

Alt+按一下 (Windows) 或 Command+Option+按一下 (Macintosh) 頁面上任何位置。「程式碼導覽器」將顯示對您所按的區域有影響之程式碼的連結。

在「程式碼導覽器」外面按一下以關閉此工具。

註解：

您也可以按一下「程式碼導覽器」指示器，開啟「程式碼導覽器」。當滑鼠停留在頁面上閒置 2 秒後，該指示器便會出現在插入點旁邊。

使用程式碼導覽器瀏覽程式碼

從頁面上您要探索的區域開啟「程式碼導覽器」。
按一下您要前往的程式碼片段。

「程式碼導覽器」會依檔案將相關的程式碼來源分組，並按照字母順序列出檔案。例如，假設您文件中的選取範圍受到位於三個外部檔案的 CSS 規則所影響。在此情況下，「程式碼導覽器」會列出這三個檔案，以及與選取範圍相關的 CSS 規則。對於與特定選取範圍相關的 CSS 程式碼而言，「程式碼導覽器」的功能就像是「目前模式」下的「CSS 樣式」面板。

註解：

若您將滑鼠停留在 CSS 規則的連結上，「程式碼導覽器」便會顯示該規則中各個屬性的工具提示。這些工具提示可以協助您區別共用名稱的多個規則。

停用程式碼導覽器指示器

開啟「程式碼導覽器」。
選取右下角的「停用指示器」。
在「程式碼導覽器」外面按一下以關閉此工具。

若要重新啟用「程式碼導覽器」指示器，請用 Alt+按一下 (Windows) 或 Command+Option+按一下 (Macintosh) 先開啟「程式碼導覽器」，然後取消選取「停用指示器」選項。

跳到 JavaScript 或 VBScript 函式

您可以在「程式碼」檢視和「程式碼」檢視窗中，檢視程式碼中所有 JavaScript 或 VBScript 函式的清單，並跳到其中任何一個函式。

在「程式碼」檢視 (「檢視 > 程式碼」) 或「程式碼」檢視窗 (「視窗 > 程式碼檢視窗」) 中檢視文件。
請執行下列其中一項作業：
- 在「程式碼」檢視中，請在「程式碼」檢視中的任何地方按一下右鍵 (Windows) 或 Control+按一下 (Macintosh)，然後從快顯選單中選取「函式」子選單。
註解：

「函式」子選單不會出現在「設計」檢視中。

程式碼中的任何 JavaScript 或 VBScript 函式都會出現在子選單中。

註解：

若要依英文字母順序檢視函式，請在「程式碼」檢視中按 Control+按一下右鍵 (Windows)，或按 Option+Control+按一下 (Macintosh)，然後選取「函式」子選單。
- 在「程式碼」檢視窗中，按一下工具列中的「程式碼導覽」按鈕 ({ })。
選取函式名稱，即可跳到程式碼中的該函式。

轉存 JavaScript

JavaScript 轉存器 (JSE) 可將全部或大部分 JavaScript 從您的 Dreamweaver 文件中移除、將 JavaScript 轉存至外部檔案，以及將該外部檔案連結至您的文件。JSE 也可以從您的程式碼移除事件處理常式，例如 onclick 和onmouseover，然後再以非干擾的方式，將與這些處理常式相關的 JavaScript 附加至您的文件。

使用 JavaScript 轉存器之前，請注意下列限制：

JSE 不會轉存文件內文中的 Script (Spry Widget 的情況下則例外)。外部化這些 Script 時，可能會造成未預期的結果。根據預設，Dreamweaver 會在「外部化 JavaScript」對話方塊中列出這些 Script，但是不會選取這些 Script 進行轉存 (您可以視需要手動選取這些 Script)。
JSE 不會從 .dwt (Dreamweaver 範本) 檔案的可編輯區域、範本實體的不可編輯區域，或 Dreamweaver 圖庫項目中擷取 JavaScript。
使用「外部化 JavaScript 並以非干擾方式附加」選項轉存 JavaScript 之後，您就無法再於「行為」面板中編輯 Dreamweaver 的行為。Dreamweaver 無法在「行為」面板中檢查及填入它以非干擾方式附加的行為。
一旦關閉網頁之後，您就無法再還原所做的變更。不過，只要您還在相同的編輯工作階段，都還可以還原所做的變更。選取「編輯 > 還原外部化 JavaScript」還原更改。
某些複雜的網頁可能無法如預期般運作。從內文具有 document.write() 的網頁和全域變數轉存 JavaScript 時請務必謹慎。

如需 Dreamweaver 工程團隊針對 Dreamweaver JavaScript 支援所提供的概觀影片，請參閱 www.adobe.com/go/dw10javascript。

若要使用 JavaScript 轉存器：

開啟包含 JavaScript 的網頁。
按一下「工具 > 外部化 JavaScript」。
在「外部化 JavaScript」對話方塊中，視需要編輯預設選項。
- 如果您希望 Dreamweaver 將所有 JavaScript 都移至外部檔案，並且在目前的文件中參考該檔案，請選取「僅外部化 JavaScript」。此選項會將 onclick 和 onload 這類事件處理常式保留在文件中，並且讓您可以在「行為」面板中看見「行為」。
- 如果您希望 Dreamweaver 執行下列動作，請選取「外部化 JavaScript 並以非干擾方式附加」：1) 將 JavaScript 移至外部檔案，並且在目前的文件中參考該檔案；2) 從 HTML 移除事件處理常式，然後使用 JavaScript 在執行階段插入這些處理常式。選取此選項之後，您就無法再於「行為」面板中編輯「行為」。
- 在「編輯」一欄中，取消選取您不希望變更的項目，或選取 Dreamweaver 預設未選取的項目。
  根據預設，Dreamweaver 會列出但「不會」選取下列項目：
  
  包含 document.write() 或 document.writeln() 呼叫之文件檔頭內的 Script 區塊。
  
  包含與 EOLAS 處理程式碼 (會使用 document.write()) 相關的函數簽名之文件檔頭內的 Script 區塊。
  
  文件內文中的 Script 區塊 (如果這些區塊只包含 Spry Widget 或 Spry 資料集建構函式則例外)。
- Dreamweaver 會自動將 ID 指派給還沒有 ID 的元素。如果不喜歡這些 ID，您可以編輯 ID 文字方塊，變更這些 ID。
按一下「確定」。

摘要對話方塊可提供轉存作業的摘要。檢視轉存作業，然後按一下「確定」。
儲存頁面。

Dreamweaver 會建立 SpryDOMUtils.js 檔案，以及另一個包含已轉存之 JavaScript 的檔案。Dreamweaver 會將 SpryDOMUtils.js 儲存在網站中的 SpryAssets 資料夾內，而且將另一個檔案儲存在與 JavaScript 之轉存來源網頁相同的階層。當您上傳原始網頁時，請記得將這兩個相關檔案上傳至您的網頁伺服器。

快速編輯

Dreamweaver 中的「快速編輯」模式會將內容特定的程式碼和工具置於行內，讓您快速取得您所需要的程式碼片段，而不會用許多面板和圖示讓您的程式碼撰寫環境變得雜亂無章。

您可以透過下列方式進入「快速編輯」模式︰

以滑鼠右鍵按一下程式碼片段，然後從出現的快顯選單中選取「快速編輯」
按 Ctrl+E (Windows) 或 Cmd+E (Mac)

在 HTML 檔案中使用快速編輯模式

在 HTML 檔案中，將您的游標置於類別或 id 屬性 (名稱或值) 或標籤名稱中。「快速編輯」會顯示您專案中所有符合的 CSS、SCSS 和 LESS 規則。您可以直接在行內編輯這些規則，甚至不需要離開 HTML 檔案的內容。

當多個規則符合時，請使用右邊的清單來瀏覽 (或使用 Alt-向上/向下鍵)。

如果要直接從內嵌編輯器建立 CSS 規則，按一下「新增規則」或按 Ctrl-Alt-N (Windows) 或 Cmd-Opt-N (Mac)。

在 JavaScript 檔案中使用快速編輯模式

在 JavaScript 檔案中，將游標置於函式名稱上。「快速編輯」會顯示函式的內文 (即使它是出現在 require() 陳述式所參照的其他檔案中)。

在 CSS、SCSS 或 LESS 檔案中使用快速編輯模式

當您將游標置於顏色值中來顯示「快速編輯」時，您可以存取檢色器，並快速修改在 CSS 程式碼中所使用的顏色。

在 CSS、LESS 或 SCSS 檔案中，將游標置於 cubic-bezier() 或 steps() 轉變計時函式上，「快速編輯」就會顯示圖形轉變曲線編輯器。

預先定義的計時函式 ease、ease-in、ease-out、ease-in-out、step-start 和 step-end 也是有效的起點。

重構程式碼

程式碼重構就是重組現有電腦程式碼而不變更其外部行為的程序，如此程式碼會變得更易讀、可維護，且更容易理解和除錯。當您的程式碼中有重複的程式碼、較長的方法或較大的類別時，就會用到它。由於較小的函式和適當的取代，程式碼除錯會更省時。

透過 JavaScript 重構，您可以重新命名函式及設定變數的範圍，如此您就可以從定義它的程式碼區塊中呼叫它。

註解：

重構程式碼現在僅適用於 .js 檔案。

重構 JavaScript

您可以在 html、php 和 javascript 文件類型中重構程式碼。當您在 Dreamweaver 中的程式碼區域上按一下滑鼠右鍵時，下拉式選單中就會出現「重構」選項。重構由下列選項組成：

重新命名
擷取至變數
擷取至函式
包圍在 Try Catch 中
包圍在條件中
轉換為箭頭函式
建立 Getters/Setters

若要了解每個重構選項的功能，請參閱下列章節：

重新命名

重新命名可用來變更 JavaScript 程式碼中變數名稱或函式名稱的所有相符項目。若要進行重構，您無需透過按一下和拖曳來選取變數。

請執行下列步驟，在 JavaScript 中重新命名：

反白標示或將游標置於需要變更的程式碼中。
在選取的文字上按一下滑鼠右鍵，然後選取「重構 > 重新命名」。您也可以使用 Ctrl+Alt+R (Windows OS) 或 Command+option+R (macOS) 鍵盤快速鍵來重新命名。
畫面上會出現一個多游標檢視，讓您變更該變數的所有相符項目。多游標增強功能會選取目前選取項目的下一個相符項目。請重新輸入唯一的變數或函式名稱來取代目前的名稱。

之前：重新命名

之後：重新命名

擷取至變數

「擷取至變數」可用來將 JavaScript 中的運算式取代成變數、區域變數或常數，請選取運算式並按一下滑鼠右鍵。然後，選取「重構 > 擷取至變數」。您也可以使用 Ctrl+Alt+V (Windows OS) 和 Cmd+Alt+V (macOS)。

擷取至函式

「擷取至函式」可用來取代參數內函式呼叫中的運算式。新參數的預設值可以在函式主體內初始化，或是透過函式呼叫傳遞。

請執行下列步驟，使用「擷取至函式」進行重構：

在 JavaScript 中選取任何運算式或一組運算式。

選取運算式
按一下滑鼠右鍵，然後選取「重構 > 擷取至函式」。您也可以使用 Ctrl+Alt+M (Windows OS) 或 Cmd+Alt+M (Mac OS)。
從畫面上顯示的下拉式選單中，選取要擷取至函式的目標範圍。

範圍類型
輸出會因選取的目標範圍而異。例如：目標範圍可以是建構函式、選取的類別或全域函式。

「擷取至函式」的特點如下：
- 它會根據選取範圍或擷取範圍中可用的識別項來辨識要傳遞的參數。
- 它會根據選取範圍中其值已變更的識別項來辨識要從函式傳回的傳回參數。
- 它也會建立具有唯一名稱的函式。
下列螢幕擷取畫面是在選取不同的目標範圍時所顯示的輸出：
建構函式

類別

全域

包圍在 Try Catch 中

「包圍在 Try Catch 中」可用於在編譯程式後顯示為錯誤的程式碼區塊中的例外狀況。此功能會將程式碼區塊包圍在 Try Catch 區塊中。當執行程式時，此程式碼區塊會標記為例外狀況。

選取或將游標置於程式碼上，按一下滑鼠右鍵，然後選取「重構 > 包圍在 Try Catch 中」。如果您將游標置於某個位置，則它會尋找周圍的陳述式，或檢查程式碼是否由陳述式構成。如果有陳述式，它會將該程式碼包圍在 Try Catch 區塊中。

包圍在條件中

「包圍在條件中」可用於程式碼中的運算式，以便只針對特定條件進行編譯。

選取程式碼中的運算式，按一下滑鼠右鍵，然後選取「重構 > 包圍在條件中」。

轉換為箭頭函式

箭頭函式是一種運算式，它沒有自己的函式運算式，例如：this、arguments、super 或 new.target。這些函式運算式可用於非方法運算式，但是不能當做建構函式使用。

將游標置於函式中，按一下滑鼠右鍵，然後選取「重構 > 轉換為箭頭函式」。

註解：

如果選取的陳述式有一個參數，則該參數結構會顯示為 param => {statements}。
如果選取的陳述式有零個或超過一個參數，例如 param (param1, param2)，則該參數結構會顯示為 param (param1, param2) => {statements}。

建立 Getters/Setters

在 JavaScript 中，Setter 可用來執行指定屬性需要變更的函式。Setter 最常與 Getter 一起使用，以便建立一種虛擬屬性。您無法針對具有實際值的屬性建立 Setter。

將游標置於物件運算式的成員上，按一下滑鼠右鍵，然後選取「重構 > 建立 Getters/Setters」。

疑難排解祕訣

當選取了不正確的程式碼時，畫面上將會顯示錯誤訊息。下表提供相應錯誤訊息的疑難排解祕訣：

功能名稱	錯誤訊息	疑難排解祕訣
重新命名	指定位置上沒有運算式	將游標置於變數或函式名稱上面或前面。
擷取至變數	選取範圍無法構成運算式	在重構程式碼之前，先在程式碼中選取運算式。
擷取至函式	選取的區塊應代表一組陳述式或一個運算式	確定您選取的區塊包含一組陳述式或一個運算式。
包圍在 Try Catch 中	選取有效的程式碼以包圍在 Try-catch 區塊中	確定您在套用 Try Catch 重構選項之前已選取任何程式碼。
包圍在條件中	選取有效的程式碼以包圍在條件區塊中	確定您在套用「包圍在條件中」重構選項之前已選取運算式。
轉換為箭頭函式	將游標置於函式運算式內	確定您在套用重構選項之前已將游標置於函式運算式內。
建立 Getters/Setters	將游標置於物件運算式的成員上	確定您在套用「建立 Getters/Setters」重構選項之前已將游標置於物件運算式的成員上。

尋找和取代文字

您可以使用 Dreamweaver 的尋找和取代功能，在您的網站或資料夾中搜尋任何類型的文字、程式碼或空白。

您可以搜尋整個標記，或是將搜尋限定在「設計」檢視中顯示的文字或限定在程式碼。

對於複雜的尋找和取代作業，您也可以使用強大的模式比對演算法 (規則運算式)。

一旦您找到文字，就可以選擇使用您指定的文字、程式碼或空白來取代它。

如需詳細資訊，請參閱「尋找和取代文字」。

在程式碼檢視中預覽影像和顏色

在插入影像和顏色的相關程式碼之後，您可以直接在「程式碼」檢視內進行預覽。

影像預覽

將滑鼠停留任何影像 URL 的上方，即可在程式碼檢視中查看影像的預覽。您可以預覽參考為下列其中一項的影像：

url();
data-uri()
img 標籤的 Src 屬性值

Dreamweaver 也會顯示遠端主機影像的影像預覽。

如果 Dreamweaver 無法顯示遠端路徑的預覽，便會顯示「無法載入影像」訊息。

您可以預覽下列影像類型：

JPEG
jpg
PNG
GIF
SVG

顏色預覽

將滑鼠停留在顏色值上方，即可在程式碼檢視中預覽顏色。支援的格式為：

3 到 6 位數的十六進位顏色值：#ff0000；
RGB：rgb(0, 0, 0)；
RGBA：rgba(0, 255, 228,0.5)；
HSL：hsl(120, 100%, 50%)；
HSLA：hsla(120, 60%, 70%, 0.3)；
預先定義的顏色名稱，例如橄欖色、藍綠色、紅色。

顏色預覽適用於上列顏色格式的所有文件類型。

以滑鼠右鍵按一下值，並選取「快速編輯」以開啟檢色器，然後選取不同的顏色。

註解：

若要停用影像和顏色的預覽，請取消選取「檢視 > 程式碼檢視選項 > 資源預覽」選項。

列印程式碼

您可列印程式碼，以便離線編輯、建檔或分發。

在「程式碼」檢視中開啟頁面。
選取「檔案 > 列印程式碼」。
指定列印選項後按一下「確定」(Windows) 或「列印」(Macintosh)。

更快、更輕鬆地獲得協助

新的使用者？