視覺媒體查詢

Linting 程式碼支援

在這個新版本的 Dreamweaver，您現在可以使用 linting 除錯常見的程式碼錯誤。Linting 是執行程式以識別潛在程式碼錯誤之程序。Dreamweaver 可以在檔案載入、儲存或編輯時 lint HTML、CSS 和 JavaScript 檔案。然後在新的「輸出」面板中列出錯誤和警告。

如需詳細資訊，請參閱 Lint 程式碼。

Emmet 的支援

您是在 Dreamweaver 中輸入數行程式碼、勤奮的開發人員嗎？使用 Emmet 縮寫進行編碼，為您節省時間。這些縮寫容易記住及輸入，當您按下 Tab 鍵時會在程式碼檢視中展開成完整程式碼。

如需詳細資訊，請參閱使用 Emmet 插入程式碼。

CSS 預處理器

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

影像預覽

Dreamweaver 現在可讓您藉由將滑鼠停留在影像 URL 上，在程式碼檢視中預覽影像。

影像預覽現在已針對遠端影像路徑 (如 <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />)啟用。

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

您可以取得下列影像檔案類型的預覽：

JPEG
JPG
PNG
GIF
BMP
SVG

在下列情況下，當您將滑鼠停留在 URL 上時，會顯示影像預覽：

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

顏色預覽

程式碼檢視中的資產預覽現在進一步地改善。Dreamweaver 現在可讓您藉由將滑鼠停留在顏色值上，在程式碼檢視中預覽顏色。支援的格式如下：

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)；
預先定義的顏色名稱：橄欖色、藍綠色、紅色等；

新的程式碼片段

程式碼片段是專案中可以重複使用的程式碼部分。這個版本的 Dreamweaver 提供新增及更新的程式碼片段：

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• JavaScript 程式碼片段 (更新)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

有關使用程式碼片段的詳細資訊，請參閱使用程式碼片段。

Bootstrap 整合

您現在可以在 Dreamweaver 中開啟使用 Bootstrap 架構 (第 3 版和之後的版本) 建立的網站，以及使用程式碼或視覺設計功能來編輯頁面。如果檔案名稱包含「bootstrap」，Dreamweaver 會辨識相關聯的 CSS 檔案。

您也可以在 Dreamweaver (「插入」面板) 內新增 Bootstrap 組件，然後藉由輕鬆快速地編輯格線，修改各種檢視區的設計。

如需詳細資訊，請參閱使用 Bootstrap 檔案。

Bootstrap 初學者範本

Dreamweaver 現在提供 Bootstrap 範本，協助您快速地著手建立互動式設計。您可以在「新增文件」對話方塊中存取下列 Bootstrap 範本：

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

程式碼摺疊

根據標籤區塊，程式碼摺疊現在可以在 HTML、CSS、LESS、SASS、SCSS、JS、PHP、XML 及 SVG 檔案中使用。當您將滑鼠停留在行號欄上時，程式碼檢視中的行號旁會出現小三角形，您可以按一下它以收合/展開程式碼區塊。程式碼摺疊這個新功能會取代根據選取範圍的現有功能。

在程式碼檢視中有兩行以上程式碼的所有標籤區塊，都會顯示程式碼摺疊圖示 (倒三角形)。

複製、剪下、貼上及拖放作業保留程式碼摺疊狀態。例如，當您複製收合的程式碼區塊，貼上作業會將複製的文字貼上成為收合區塊。

HTML 檔案中的程式碼摺疊

與先前的程式碼收合功能不同的是，收合的內容現在將包含結束標籤，並以不同於先前實作的方式呈現。

在收合的程式碼區塊中顯示的字元數現在已增加。這可協助您預覽收合標籤區塊中的初始屬性 (如果有的話)。例如，如果收合的 Div 標籤有 id 和 class 屬性，收合的區塊看起來像這樣：

在 Windows 上，您可以藉由將滑鼠停留在收合的程式碼上，預覽收合區塊內的程式碼。當收合區塊內的程式碼透過下列方式取得焦點，收合區塊會自動展開：標籤選取器、尋找/取代、前往行數、元素快速檢視、即時檢視，或還原/重做。一旦焦點移至程式碼區塊之外，它會自動收合。

CSS、LESS、SASS、SCSS 及 JS 檔案中的程式碼摺疊

CSS、Less、Sass、SCSS 及 JS 檔案中以大括號括住的程式碼區塊現在能夠收合。

將滑鼠停留在程式碼收合區域中包含左大括號「{」的任何一行上。

按一下收合圖示會收合一組相符大括號之間的內容，而預覽會顯示為「{...}」

PHP 檔案中的程式碼摺疊

在 PHP 檔案中，除了 PHP 程式碼區塊，HTML 元素、CSS 及 JS 程式碼區塊也可以收合。

以「<?ph」做為開頭並以「?>」做為結尾的每個 PHP 區塊都可以收合。

將滑鼠停留在程式碼收合區域中包含「<?php」的任何一行上，並按一下收合圖示以收合程式碼區塊。