新增功能

  • 裝置預覽
  • 視覺媒體查詢
  • Linting 支援
  • Emmet 支援
  • CSS 預處理器
  • 在程式碼檢視中預覽
  • 新的程式碼片段
  • Bootstrap 整合
  • Bootstrap 初學者範本
  • 即時檢視中的新選單
  • 即時檢視中的表格支援
  • 即時檢視中的貼上特殊效果
  • 即時檢視中的 jQuery UI 元素支援
  • 新的導覽器面板
  • HTML 文件中的 SVG 程式碼提示

變更

  • 程式碼摺疊
  • CSS 設計工具改良功能
  • 測試伺服器 - 工作流程改良
  • 即時檢視中的行為面板
  • 插入選單重新組織

裝置預覽

視覺媒體查詢

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」的任何一行上,並按一下收合圖示以收合程式碼區塊。

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

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