新功能摘要

2015 版的 Dreamweaver CC 著重在多方互動設計、編輯程式碼功能改良、在裝置上預覽多個網頁，以及從 Photoshop 構圖整批擷取有多種解析度的網頁最佳化影像。與 Bootstrap 架構整合可協助您建置行動優先、多方互動網站。「視覺媒體查詢」進一步透過將您的設計視覺化並在不同的中斷點進行修改的方式，補強多方互動網頁設計使用體驗。

這個版本也針對「即時」檢視和 CSS 設計工具的編輯功能提供許多增強功能。本文將介紹這些新功能和增強功能，並提供連結以取得更多說明和學習資源。

Dreamweaver 現在可以讓您同時在多個裝置上測試實際執行可用的網頁。您可以看到您的網頁如何依不同的格式係數重新排列，也可以在您的頁面上測試互動功能。所有這些功能都不必安裝任何行動應用程式，也無需將裝置實際連接至桌面即可執行！只要以您的裝置掃描自動產生的 QR 碼，再於裝置上預覽您的網頁。

在桌面上觸發「即時檢視」時，它會反映在所有連接的裝置上，並協助您檢視各種元素，並視需求反覆調校設計。

如需詳細資訊，請參閱在多部裝置上預覽與檢查網頁。

視覺媒體查詢

「視覺媒體查詢」列是存在於頁面中之媒體查詢的視覺化表示。這些查詢列可幫助您在不同的中斷點將網頁視覺化，並幫助您以視覺化方式呈現網頁的不同元件如何在不同的檢視區中重排。當您在不同檢視區中檢視您的頁面時，您可以對某個檢視區進行特有的設計變更，而不會影響其他檢視區中的頁面設計。

視覺媒體查詢是由三個查詢列 (水平列) 所組成，每一列都代表媒體查詢的一個類別：

• 綠色：具有 max-width 條件的媒體查詢
• 藍色：具有 min-width 和 max-width 條件的媒體查詢
• 紫色：具有 min-width 條件的媒體查詢

如需詳細資訊，請參閱視覺媒體查詢。

Linting 程式碼支援

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

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

Emmet 的支援

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

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

在程式碼檢視中預覽

如果您正在「分割」檢視中工作，您可以立即在「即時」檢視或「設計」檢視中看到影像或顏色的任何變更。但是，如果您偏好只在「程式碼」檢視中工作，則影像只會以檔案名稱形式出現，這在大多數情況下無法讓您直覺地工作。顏色也是一樣 (除非使用預先定義的顏色)，只會以一組不易理解的數字形式出現。在是在這一版的 Dreamweaver 中，您可以直接在「程式碼」檢視中快速預覽影像和顏色。這項功能有助於您以視覺方式將影像檔案名稱和顏色格式與影像和顏色所代表的實際面貌連結在一起。因此，您可以更快地做出設計決策，並大幅縮減開發時間。

如需詳細資訊，請參閱在程式碼檢視中預覽影像和顏色。

「程式碼」檢視也會顯示錯誤預覽。發生錯誤之程式碼的行號會以紅色標示。當您將滑鼠停留在行號上方時，便會顯示錯誤的簡短描述。

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

新的程式碼片段

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

• Boostrap 程式碼片段
• CSS 動畫和轉變
• CSS 效果
• CSS 程式碼片段
• HTML 程式碼片段
• JavaScript 程式碼片段 (更新)
• PHP 程式碼片段
• Preprocessor 程式碼片段
• 多方互動設計程式碼片段

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

此外，您現在可以使用雲端同步功能，讓程式碼片段能夠在不同的 Dreamweaver 安裝中保持最新狀態。如需進一步了解如何同步 Creative Cloud 和其他 Dreamweaver 安裝中的程式碼片段，請參閱將 Dreamweaver 設定與 Creative Cloud 同步。

Bootstrap 整合

Bootstrap 是開發行動優先的多方互動網站時，最受歡迎且免費的 HTML、CSS 及 JavaScript 架構。架構中包含按鈕、表格、導覽、影像轉盤，以及其他可用於網頁之元素的高互動 CSS 和 HTML 範本。還有一些選擇性 JavaScript 外掛程式可供使用，讓即使只有基本編碼知識的開發人員也能開發絕佳的互動網站。

Dreamweaver 可讓您建立 Bootstrap 文件，同時可編輯使用 Bootstrap 建立的現有網頁。您可以使用從「新增文件」對話方塊中選擇的其中一個 Bootstrap 初學者範本 (「初學者範本 > Bootstrap 範本」) 來開始設計您的 Bootstrap 網站。

• Bootstrap-代理商
  
• Bootstrap-電子商務
• Bootstrap-作品集
• Bootstrap-產品
• Bootstrap-房地產
• Bootstrap-履歷
  

您也可以從「新增文件」對話方塊來建立自訂的 Bootstrap 文件 (「新增文件 > Bootstrap」)。然後，使用 Bootstrap 組件堆疊建置網站，例如在 Dreamweaver 中使用「插入」面板加入收合式面板和轉盤。或者，如果您有 Photoshop 構圖時，使用 Extract 將影像、字體、樣式、文字和其他元素帶進 Bootstrap 文件中。

無論是完整設計的 Bootstrap 檔案或工作進行中的設計，您都可以在 Dreamweaver 中編輯它們，不只編輯程式碼，還可以使用「即時」檢視編輯、視覺 CSS 設計工具、視覺媒體查詢和 Extract 等視覺編輯的功能進行設計變更。

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

即時檢視中的編輯表格支援

您可以在「即時」檢視中輕鬆快速地使用下列任一個或多個選項的組合來編輯表格：

如需詳細資訊，請參閱調整表格和格式化表格和儲存格。

即時檢視中的新選單

「即時」檢視中的編輯功能現在因為「即時」檢視中可提供下列選單而變得更好：

• 修改
• 格式
• 命令
• 網站
• 編輯和快顯選單中的「貼上特殊效果」選項

即時檢視中的 jQuery UI 元素支援

您現在可以在「即時」檢視中使用「插入」面板，直接插入 jQuery Widget。從插入面板上將所需的元素拖曳至「即時」檢視，並按住滑鼠使用下列其中一項功能插入：

• 即時導引線：從「插入」面板拖曳所需的元素之後，當您在「即時」檢視中將滑鼠停留在元素上方時，便會出現這些導引線。您可以使用「即時導引線」在頂端或底端插入元素，或在焦點所在元素的左邊或右邊插入元素。

• DOM 圖示：若您在即時導引線出現時暫停片刻，便會出現 DOM 圖示。按一下圖示以彈出式視窗檢視 DOM 結構，並將元素放在文件結構中的精確位置。

• 定位小幫手：定位小幫手可讓您將元素放置在焦點所在元素的前方、後方或以巢狀方式置於其中 (在「即時」檢視中)。

如需詳細資訊，請參閱直接在即時檢視中插入元素。

DOM 面板

「元素快速檢視」現在已變更為 DOM 面板 (「視窗 > DOM」)。DOM 面板可提供「元素快速檢視」所提供的所有功能及更多功能。此面板可用於所有工作區並持續保留，這表示您可以開啟兩份文件，同時開啟並存取它們的 DOM 面板。

DOM 面板可供您：

• 從「插入」面板拖曳元素以便將它們精確地插入文件結構中。
• 拷貝、貼上、複製、移動或刪除文件中的結構元素。
• 使用文件結構檢視內容中頁面上的任何元素，亦即 DOM 面板中反白顯示的焦點所在元素。

如需使用 DOM 面板與使用面板編輯 HTML 結構的詳細資訊，請參閱 DOM 面板。

HTML 文件中的 SVG 程式碼提示

所有的 SVG 元素和屬性的程式碼提示目前在 HTML 文件中也可支援。您現在可以使用這些程式碼提示，在 HTML 文件的「程式碼」檢視中加入 SVG 元素，就像您在 SVG 文件中加入一樣。

技術預視

Dreamweaver 團隊從這個版本開始，會提供特定功能的預覽以收集客戶的意見。這些功能將會根據意見進一步進行改善，並將其提供做為 Dreamweaver 的核心功能。您可以從「偏好設定」對話方塊的「技術預視」類別來存取這類功能。

此版本中的預覽功能是程式碼反白標示功能。這項功能會在程式碼檢視中反白標示任何選定文字的所有出現位置。

若要使用此功能，請執行下列步驟：

您可以使用下列鍵盤快速鍵在反白標示的文字之間瀏覽：

• 選取下一個出現位置：F3 (Win)；Cmd+G (Mac)
• 選取上一個出現位置：Shift+F3 (Win)；Cmd+Shift+G (Mac)

程式碼檢視中使用 ShowPreview API 的自訂預覽

在這個 Dreamweaver 版本中，您可以產生自訂預覽彈出式選單，當您在「程式碼」檢視中將滑鼠停留在程式碼上方時，就會顯示這個選單。若要實作自訂預覽，您可以使用新的 API showPreview 以及現有的 mm:browsercontrol API。例如，您可以針對以下用途使用這些 API：當您將滑鼠停留在 JavaScript 函數名稱的上方時，即可顯示該函數的所有參數預覽。

如需詳細資訊，請參閱 Dreamweaver API 參照：程式碼檢視功能。

程式碼摺疊

在舊版的 Dreamweaver 中，您必須在「程式碼」檢視中選取程式碼區塊，然後加以收合。在這個版本及更新的版本中，您只要停留在行號上方並按一下出現的三角形，就可以收合程式碼區塊。

程式碼摺疊 (收合) 可以在 HTML、CSS、LESS、Sass、SCSS、JS、PHP、XML 及 SVG 檔案中使用，而且會根據標籤區塊。

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

在 HTML 檔案中，不同於先前的程式碼收合功能，收合的內容現在會包含結束標籤，並以不同的方式呈現。此外，收合的程式碼區塊中顯示的字元數現在已增加。如此可協助您預覽初始屬性 (如果有的話)。

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

Extract 增強功能

• 適用裝置的 Extract
• % 單位的支援

適用裝置的 Extract

裝置不只會因大小而有所不同，也會因解析度而有所差異。您的多方互動網頁設計計劃必須考慮適當呈現在裝置上之影像的多個解析度版本。不過，要在您的專案中為所有影像建立這麼多不同的解析度版本可能是一件吃力的工作。

在 Dreamweaver 中的 Extract 可以大幅減輕這項工作負擔。在 2015 版的 Dreamweaver 中從您的 Photoshop 構圖中擷取影像時，您也可以選擇擷取該影像的不同解析度版本。在擷取期間，Photoshop 中的影像會依不同、預先定義的解析度自動縮放。

然後，您可以使用 JavaScript 或媒體查詢呼叫這些影像，根據要用來檢視這些影像的裝置來顯示它們。例如，若為高密度視網膜 (Retina) 顯示器，您可以使用 2X 版本的影像。

如需詳細資訊，請參閱從 PSD 檔案擷取影像。

% 單位的支援

在 Extract 面板中，除了像素之外，您現在也可以使用 % 值檢視影像的寬度和高度。您也可以使用 % 檢視度量。

當您按一下 Extract 面板中的資源時，所出現的彈出式視窗會提供選項讓您在像素和 % 之間轉換使用。當您在資源之間檢視度量時，會保留您在此彈出式視窗中選取的單位。

即時檢視編輯的增強功能

在即時檢視中巢狀插入

現在，您可以在「即時」檢視中將元素插入其他元素內。當您從「插入」面板、「資源」面板或在「即時」檢視內拖曳元素，以及將滑鼠停留在頁面上的不同元素上時，您會注意到巢狀元素 (連同在導引線之前和之後的元素) 的視覺回應效果。

• 導引線之前/之後：當您將滑鼠停留在元素上方和下方 30% 時。
• 巢狀視覺回應效果：當您將滑鼠停留在元素中間 40% 時。

直接在元素顯示中編輯選取器

您現在只需要在元素顯示中按一下選取器的名稱，即可進行編輯。您可以按一下頁面上的任何地方來認同變更。

編碼工作列變更

我們已經移除編碼工作列中與收合程式碼有關的以下選項：

• 收合完整標籤
• 收合選取範圍

• 反白標示無效的程式碼
• 在資訊列顯示語法錯誤警告

CSS 設計工具改良功能

• 全部模式和目前模式
• 屬性值的提示
• 媒體查詢的顏色編碼
• 其他變更

全部模式和目前模式

CSS 設計工具現在提供兩種不同的模式來檢視及編輯 CSS 屬性：

• 全部：目前文件中的所有 CSS、媒體查詢和選取器都會列在這個模式中。這個模式與「設計」檢視或「即時」檢視中的選取內容無關。

如果您想要建立 CSS、媒體查詢或選取器，使用這個模式將可獲得最佳效果。

• 目前：「設計」檢視或「即時」檢視中選取之任何元素的已計算樣式都會列在這個模式中。在 CSS 檔案中，如果焦點在選取器上，這個模式就會顯示該選取器的屬性。

屬性值的提示

Dreamweaver 現在會在 CSS 設計工具中顯示程式碼提示 (類似於「程式碼」檢視)，以供設定新的屬性。

媒體查詢的顏色編碼

CSS 設計工具面板中的媒體查詢現在會用顏色編碼來符合視覺媒體查詢。

• 綠色：具有 max-width 條件的媒體查詢
• 藍色：具有 min-width 和 max-width 條件的媒體查詢
• 紫色：具有 min-width 條件的媒體查詢

其他變更

• 顯示集合選項：現在當您初次啟動 Dreamweaver 時，預設會選取「屬性」區段中的「顯示集合」核取方塊。所有後續的 Dreamweaver 工作階段都會持續保留這個選項的任何變更 (選取或取消選取)。

• 此面板會捲動，以便在中央顯示「增加屬性」：當您在「屬性」區段中按一下 + 時，此區段會捲動，好讓「增加屬性」列顯示在面板的中央。如果「屬性」區段太小，「增加屬性」列會顯示在此面板的底部。

• 新增屬性時從背景反白標示：當焦點位在「新增屬性」文字方塊上時，此列會在灰色背景中反白標示。

• + 和 - 按鈕的位置變更：在「CSS 設計工具」面板的每個窗格中所出現的 + 和 - 按鈕，現在已經從最右邊移到最左邊，好讓用戶能夠清楚看到。

• 自訂類別已重新命名：「自訂」屬性的類別名稱已變更為「更多」。

測試伺服器工作流程已變更

這個版本中的測試伺服器工作流程改良功能，主要是要讓在「即時」檢視中對含伺服器端程式碼之文件進行編輯變得簡單而順暢。

伺服器設定中的變更

不像舊版的 Dreamweaver，現在您可以將特定的伺服器指定為測試伺服器或遠端伺服器，並不能兩者同時。伺服器設定用戶介面中的核取方塊會取代成選項按鈕，以強制執行伺服器的規格。

如果您開啟網站或是匯入使用舊版 Dreamweaver 所建立之網站的設定，而且網站將單一伺服器指定為測試與遠端伺服器，就會建立重複的伺服器項目。然後，將其中一個標記為遠端伺服器 (字尾為 _remote)，另一個標記為測試伺服器 (字尾為 _testing)。

自動推送動態檔案

當您開啟、建立或儲存對動態文件進行的變更時，Dreamweaver 現在會自動將動態文件與您的測試伺服器進行同步。Dreamweaver 不會再顯示測試伺服器工作流程所用的「更新測試伺服器」或「推送相關檔案」對話方塊。

如需詳細資訊，請參閱自動推送動態檔案。

Business Catalyst 工作流程的變更

Business Catalyst 擴充功能已被淘汰，無法用於 Dreamweaver CC 2015 版本和更新的版本。Dreamweaver CC 2014.1.1 是與 Business Catalyst 擴充功能相容的最後一個版本。

若要搭配 Dreamweaver CC 2015 版本和更新的版本使用 Business Catalyst，請在 Dreamweaver 中使用 SFTP 連線選項。如需詳細資訊，請參閱 Business Catalyst 文件。

以下是 Business Catalyst 網站上有關這項變更的正式公告。

其他變更

• 「插入」面板已重新組織，以便將「常用」、「版面」和「媒體」類別中的所有選項分組為更具邏輯性的類別 - HTML。

• 迷你導覽影片及啟動這些影片的連結已從「說明」選單中移除。這個選項也不適用於非英文的地區設定。

• 頁面底部文件列下拉式清單中的選項已經清除 - 現在只提供「方向」、「全尺寸」和「編輯大小」選項。