將插入點放在程式碼中。
上次更新時間
2021年4月27日
了解如何在程式碼檢視中工作，並充分利用 Dreamweaver 的程式碼撰寫功能。
在 Dreamweaver 中有多種方式可以處理程式碼。
您可以使用「新增文件」對話框開啟新的程式碼檔案，並開始輸入您的程式碼。
Dreamweaver 還提供了一套強大的編輯工具，讓您能夠順暢地導覽和變更程式碼。
使用「插入」面板插入程式碼
在「插入」面板中選取適當的類別。
按一下「插入」面板中的按鈕或從「插入」面板的彈出式選單中選取項目。
當您按一下圖示時，程式碼會立即出現在您的頁面中，或者會出現對話框要求提供更多資訊以完成程式碼。
視目前的文件類型而定，「插入」面板中的可用按鈕數目和類型會不盡相同。 它也會依據您使用的是「程式碼」檢視或「設計」檢視而有所不同。
使用 Emmet 工具組搭配 Dreamweaver
Emmet 是允許高速撰寫程式碼和產生 HTML 和 CSS 程式碼的外掛程式。
請在 Dreamweaver 的「程式碼檢視」或「程式碼檢視窗」中使用 Emmet 縮寫，按 Tab 鍵即可將這些縮寫展開為 HTML 標記或 CSS。
HTML 縮寫會在 HTML 及 PHP 頁面中展開。 CSS 縮寫會在 CSS、LESS、SASS、SCSS 頁面中展開，或在 HTML 頁面的樣式標記內展開。
下列範例為您示範如何在程式碼檢視中使用 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) 鍵盤快速鍵來移除註解。
切換程式碼註解
若要在程式碼視圖中切換顯示和隱藏註解，只需在 Windows 上按 Ctrl+/，或在 Mac 上按 Cmd+/ 來處理所選取的註解或行。
使用多個游標在多個位置新增或變更文字
請使用 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 Docs 專案的說明文件。
您可以同時開啟多個內嵌編輯器和文件檢視器。
若要關閉單一內嵌編輯器或文件檢視器，請按一下左上角的「X」，或在快速文件取得焦點時按 Esc 鍵。
若要關閉所有內嵌編輯器和文件，請將游標移回主要程式代碼編輯器並按 Esc 鍵。
分析程式碼
Dreamweaver 支援 HTML、CSS 和 JavaScript 的 linting (分析程式碼的潛在錯誤)。
「輸出」面板會列出透過 linting 偵測到的錯誤和警告。 如需詳細資訊，請參閱「Lint 程式碼」。
此外，Dreamweaver 也會在錯誤行的行號欄中顯示快速錯誤預覽。 行號會以紅色顯示，表示包含錯誤，當您將滑鼠游標停留在上方時，會顯示錯誤的簡短說明。
注意： 只會顯示該行中的第一個錯誤。 如果該行只包含警告，則會顯示警告的描述。 如果該行包含警告和錯誤，則只會顯示錯誤描述。
使用「用標籤圍繞」，以程式碼圍繞文字
在「程式碼」檢視中使用「用標籤圍繞」，使用標籤來圍繞特定的數行文字。 在「設計」或「即時」檢視中，您可以使用此功能將物件包覆在標記中。
在「程式碼」檢視中選取文字或在「設計」檢視中選取物件，然後按鍵盤上的 Ctrl+T。
隨即出現快顯視窗，讓您從多個 HTML 標記中選擇。
從選單中選取標記。
如果您在程式碼檢視中工作，就會以標籤來圍繞選取的文字。 如果您在「設計」或「即時」檢視中工作，選取的物件會包覆在標記中。
使用編碼內容選單編輯程式碼
使用 Dreamweaver 的內容選單對程式碼進行快速編輯。
若要存取快顯選單，請以滑鼠右鍵按一下 (Windows) 或 Command+按一下 (Mac)。 您可以使用下列選項：
快速編輯
按一下此選項可進入「快速編輯」模式。 在這個模式中，Dreamweaver 會提供行內內容特定的程式碼和工具，讓您快速取得您所需要的程式碼區段。 如需詳細資訊，請參閱快速編輯。
剪下、複製、貼上
按一下這些選項可快速剪下、複製及貼上文字，而無須存取「編輯」選單。
尋找和取代、尋找下一個、尋找上一個
按一下這些選項可快速尋找及取代文字，而無須存取「尋找」選單。
建立新片段
請使用此選項來建立程式碼片段，您可以儲存供日後重複使用。 選取程式碼，然後按一下「建立新片段」，讓選取的程式碼成為片段。 如需詳細資訊，請參閱使用程式碼片段。
開啟相關檔案
在連結/指令碼標記上按一下右鍵，然後按一下開啟相關檔案以開啟檔案。
附加樣式表
將現有的 CSS 樣式表附加到您的頁面。
選取範圍
「選取」子選單包含各種程式碼編輯選項，您可以在選取的程式碼片段上使用，例如切換行和區塊註解、展開和收合選取範圍、將內嵌 CSS 轉換為規則、移動 CSS 規則，以及列印程式碼。
程式碼導覽器
按一下此選項可瀏覽相關的程式碼來源，例如內部和外部 CSS 規則、伺服器端包含、外部 JavaScript 檔案、父系範本檔案、圖庫檔案以及 iframe 原始檔案。 如需詳細資訊，請參閱瀏覽相關程式碼。
程式碼提示工具
「程式碼提示工具」子選單將檢色器、URL 瀏覽器和字型清單工具提供給您使用。
縮排程式碼區塊
當您在「程式碼」檢視或程式碼檢測器中撰寫和編輯程式碼時，您可以變更選取區塊或程式碼行的縮排色階，將其向右或向左移動一個 Tab。
縮排選取的程式碼區塊
- 按 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 1) 將 JavaScript 移動到外部檔案並在目前文件中參照它，以及 2) 從 HTML 中移除事件處理常式並使用 JavaScript 在執行階段插入它們，請選擇「外部化 JavaScript 並無干擾地附加」。當您選擇此選項時，您無法再在「行為」面板中編輯行為。
在「編輯」欄中，取消選擇任何您不想要執行的編輯，或選擇 Dreamweaver 預設未選擇的編輯。
預設情況下，Dreamweaver 會列出但不選擇下列編輯：
文件標頭中包含 document.write() 或 document.writeln() 呼叫的指令碼區塊。
文件標頭中包含與 EOLAS 處理代碼相關的函式簽名的指令碼區塊，已知會使用 document.write()。
文件正文中的指令碼區塊，除非區塊只包含 Spry 小工具或 Spry 資料集建構函式。
Dreamweaver 會自動為尚未擁有 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 中重新命名，請執行以下步驟：
反白顯示或將文字游標置於需要變更的程式碼中。
以滑鼠右鍵按一下選取的文字，然後選取 重構 > 重新命名。您也可以在 Windows OS 上使用 Ctrl + Alt + R 鍵盤快速鍵，或在 macOS 上使用 Command + option + R 鍵盤快速鍵來重新命名。
畫面上會出現一個多游標檢視，讓您變更該變數的所有相符項目。 多游標增強功能會選取目前選取項目的下一個相符項目。 重新輸入唯一的變數或函數名稱以取代目前的名稱。
擷取至變數
「擷取至變數」可用來將 JavaScript 中的運算式取代成變數、區域變數或常數，請選取運算式並按一下滑鼠右鍵。 然後，選取「重構 > 擷取至變數」。 您也可以在 Windows OS 上使用 Ctrl + Alt + V，在 macOS 上使用 Cmd + Alt + V。
擷取至函式
「擷取至函式」可用來取代參數內函式呼叫中的運算式。 新參數的預設值可以在函數正文內初始化，或透過函數呼叫傳遞。
執行以下步驟使用 擷取至函數進行重構：
在 JavaScript 中選取任何運算式或一組運算式。
按一下滑鼠右鍵，然後選取 重構 > 擷取至函數。您也可以在 Windows OS 上使用 Ctrl + Alt + M，或在 Mac OS 上使用 Cmd + Alt + M。
從螢幕上顯示的快顯選單中選取目的地範圍，以從中擷取函數。
輸出會因選取的目標範圍而異。 例如，目的地範圍可以是建構函式、選取的類別或全域函數。
「擷取至函數」的特性包括：
- 它會根據選取範圍或擷取範圍中可用的識別碼來識別要傳遞的參數。
- 它會根據在選取範圍中值被變更的識別碼來識別要從函數傳回的傳回參數。
- 它也會建立一個具有唯一名稱的函數。
以下螢幕擷圖顯示根據所選取的各別目的地範圍的輸出結果。
包圍在 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);
- 預先定義的色彩名稱，例如 Olive、Teal、red。
所有文件類型均支援上述色彩格式的色彩預覽。
在值上按一下滑鼠右鍵並選取快速編輯以開啟檢色器並選取不同的色彩。
備註
若要停用影像和色彩的預覽，請取消勾選「檢視」>「代碼檢視選項」>「資產預覽」選項。
列印程式碼
您可列印程式碼以離線編輯、 歸檔或發佈。
在「程式碼」檢視中開啟頁面。
選取「檔案 > 列印程式碼」。
指定列印選項，然後按一下「確定」(Windows)
或「列印」(Macintosh)。
