2015 版的 Dreamweaver CC 著重在多方互動設計、編輯程式碼功能改良、在裝置上預覽多個網頁，以及從 Photoshop 構圖整批擷取有多種解析度的網頁最佳化影像。與 Bootstrap 架構整合可協助您建置行動優先、多方互動網站。「視覺媒體查詢」進一步透過將您的設計視覺化並在不同的中斷點進行修改的方式，補強多方互動網頁設計使用體驗。
這個版本也針對「即時」檢視和 CSS 設計工具的編輯功能提供許多增強功能。本文將介紹這些新功能和增強功能，並提供連結以取得更多說明和學習資源。
7 月份發布的 2015 版 Dreamweaver CC 補充程式，能讓 Dreamweaver 充分利用 Adobe Creative Cloud 桌面應用程式中指定的 Proxy 伺服器設定。如需詳細資訊，請參閱指定 Proxy 伺服器設定。
Dreamweaver 現在可以讓您同時在多個裝置上測試實際執行可用的網頁。您可以看到您的網頁如何依不同的格式係數重新排列，也可以在您的頁面上測試互動功能。所有這些功能都不必安裝任何行動應用程式，也無需將裝置實際連接至桌面即可執行！只要以您的裝置掃描自動產生的 QR 碼，再於裝置上預覽您的網頁。
如需詳細資訊，請參閱在多部裝置上預覽與檢查網頁。
「視覺媒體查詢」列是存在於頁面中之媒體查詢的視覺化表示。這些查詢列可幫助您在不同的中斷點將網頁視覺化，並幫助您以視覺化方式呈現網頁的不同元件如何在不同的檢視區中重排。當您在不同檢視區中檢視您的頁面時，您可以對某個檢視區進行特有的設計變更，而不會影響其他檢視區中的頁面設計。
視覺媒體查詢是由三個查詢列 (水平列) 所組成，每一列都代表媒體查詢的一個類別：
綠色：具有 max-width 條件的媒體查詢
藍色：具有 min-width 和 max-width 條件的媒體查詢
紫色：具有 min-width 條件的媒體查詢
如需詳細資訊，請參閱視覺媒體查詢。
在這個新版本的 Dreamweaver 中，您現在可以使用 linting 排除常見的程式碼錯誤。Linting 是分析程式碼以標幟潛在程式碼錯誤或可疑使用情況之程序。Dreamweaver 可以在檔案載入、儲存或編輯時 lint HTML、CSS 和 JavaScript 檔案。然後在新的「輸出」面板中列出錯誤和警告。
如需詳細資訊，請參閱 Lint 程式碼。
您是在 Dreamweaver 中輸入數行程式碼、勤奮的開發人員嗎？使用 Emmet 縮寫進行編碼，為您節省時間。這些縮寫容易記住及輸入，當您按下 Tab 鍵時會在「程式碼」檢視中展開成完整程式碼。
如需詳細資訊，請參閱使用 Emmet 插入程式碼。
如果您正在「分割」檢視中工作，您可以立即在「即時」檢視或「設計」檢視中看到影像或顏色的任何變更。但是，如果您偏好只在「程式碼」檢視中工作，則影像只會以檔案名稱形式出現，這在大多數情況下無法讓您直覺地工作。顏色也是一樣 (除非使用預先定義的顏色)，只會以一組不易理解的數字形式出現。在是在這一版的 Dreamweaver 中，您可以直接在「程式碼」檢視中快速預覽影像和顏色。這項功能有助於您以視覺方式將影像檔案名稱和顏色格式與影像和顏色所代表的實際面貌連結在一起。因此，您可以更快地做出設計決策，並大幅縮減開發時間。
如需詳細資訊，請參閱在程式碼檢視中預覽影像和顏色。
「程式碼」檢視也會顯示錯誤預覽。發生錯誤之程式碼的行號會以紅色標示。當您將滑鼠停留在行號上方時，便會顯示錯誤的簡短描述。
注意：只會顯示該行中的第一個錯誤。如果該行只包含警告，則會顯示警告的描述。如果該行包含警告和錯誤，則只會顯示錯誤描述。
- Boostrap 程式碼片段
- CSS 動畫和轉變
- CSS 效果
- CSS 程式碼片段
- HTML 程式碼片段
- JavaScript 程式碼片段 (更新)
- PHP 程式碼片段
- Preprocessor 程式碼片段
- 多方互動設計程式碼片段
有關使用程式碼片段的詳細資訊，請參閱使用程式碼片段。
此外，您現在可以使用雲端同步功能，讓程式碼片段能夠在不同的 Dreamweaver 安裝中保持最新狀態。如需進一步了解如何同步 Creative Cloud 和其他 Dreamweaver 安裝中的程式碼片段，請參閱將 Dreamweaver 設定與 Creative Cloud 同步。
Bootstrap 是開發行動優先的多方互動網站時，最受歡迎且免費的 HTML、CSS 及 JavaScript 架構。架構中包含按鈕、表格、導覽、影像轉盤，以及其他可用於網頁之元素的高互動 CSS 和 HTML 範本。還有一些選擇性 JavaScript 外掛程式可供使用，讓即使只有基本編碼知識的開發人員也能開發絕佳的互動網站。
Dreamweaver 可讓您建立 Bootstrap 文件，同時可編輯使用 Bootstrap 建立的現有網頁。您可以使用從「新增文件」對話方塊中選擇的其中一個 Bootstrap 初學者範本 (「初學者範本 > Bootstrap 範本」) 來開始設計您的 Bootstrap 網站。
您也可以從「新增文件」對話方塊來建立自訂的 Bootstrap 文件 (「新增文件 > Bootstrap」)。然後，使用 Bootstrap 組件堆疊建置網站，例如在 Dreamweaver 中使用「插入」面板加入收合式面板和轉盤。或者，如果您有 Photoshop 構圖時，使用 Extract 將影像、字體、樣式、文字和其他元素帶進 Bootstrap 文件中。
無論是完整設計的 Bootstrap 檔案或工作進行中的設計，您都可以在 Dreamweaver 中編輯它們，不只編輯程式碼，還可以使用「即時」檢視編輯、視覺 CSS 設計工具、視覺媒體查詢和 Extract 等視覺編輯的功能進行設計變更。
註解：
對於使用第 3 版之前版本的 Bootstrap 架構建立的網站，在 Dreamweaver 中無法使用可隱藏和取消隱藏元素及編輯列與欄 (新增、調整大小、位移) 的視覺編輯工具。
如需詳細資訊，請參閱使用 Bootstrap 檔案。
註解：
上述功能會根據您選擇要插入的元素來顯示。
如需詳細資訊，請參閱直接在即時檢視中插入元素。
「元素快速檢視」現在已變更為 DOM 面板 (「視窗 > DOM」)。DOM 面板可提供「元素快速檢視」所提供的所有功能及更多功能。此面板可用於所有工作區並持續保留，這表示您可以開啟兩份文件，同時開啟並存取它們的 DOM 面板。
DOM 面板可供您：
- 從「插入」面板拖曳元素以便將它們精確地插入文件結構中。
- 拷貝、貼上、複製、移動或刪除文件中的結構元素。
- 使用文件結構檢視內容中頁面上的任何元素，亦即 DOM 面板中反白顯示的焦點所在元素。
如需使用 DOM 面板與使用面板編輯 HTML 結構的詳細資訊，請參閱 DOM 面板。
Dreamweaver 團隊從這個版本開始，會提供特定功能的預覽以收集客戶的意見。這些功能將會根據意見進一步進行改善，並將其提供做為 Dreamweaver 的核心功能。您可以從「偏好設定」對話方塊的「技術預視」類別來存取這類功能。
此版本中的預覽功能是程式碼反白標示功能。這項功能會在程式碼檢視中反白標示任何選定文字的所有出現位置。
在這個 Dreamweaver 版本中，您可以產生自訂預覽彈出式選單，當您在「程式碼」檢視中將滑鼠停留在程式碼上方時，就會顯示這個選單。若要實作自訂預覽，您可以使用新的 API showPreview 以及現有的 mm:browsercontrol API。例如，您可以針對以下用途使用這些 API：當您將滑鼠停留在 JavaScript 函數名稱的上方時，即可顯示該函數的所有參數預覽。
如需詳細資訊，請參閱 Dreamweaver API 參照：程式碼檢視功能。
在舊版的 Dreamweaver 中，您必須在「程式碼」檢視中選取程式碼區塊，然後加以收合。在這個版本及更新的版本中，您只要停留在行號上方並按一下出現的三角形，就可以收合程式碼區塊。
程式碼摺疊 (收合) 可以在 HTML、CSS、LESS、Sass、SCSS、JS、PHP、XML 及 SVG 檔案中使用，而且會根據標籤區塊。
複製、剪下、貼上及拖放動作會保留程式碼摺疊狀態。例如，當您複製收合的程式碼區塊時，貼上動作會將複製的文字貼上成為收合區塊。
如需詳細資訊，請參閱收合程式碼。
裝置不只會因大小而有所不同，也會因解析度而有所差異。您的多方互動網頁設計計劃必須考慮適當呈現在裝置上之影像的多個解析度版本。不過，要在您的專案中為所有影像建立這麼多不同的解析度版本可能是一件吃力的工作。
在 Dreamweaver 中的 Extract 可以大幅減輕這項工作負擔。在 2015 版的 Dreamweaver 中從您的 Photoshop 構圖中擷取影像時，您也可以選擇擷取該影像的不同解析度版本。在擷取期間，Photoshop 中的影像會依不同、預先定義的解析度自動縮放。
如需詳細資訊，請參閱從 PSD 檔案擷取影像。
現在，您可以在「即時」檢視中將元素插入其他元素內。當您從「插入」面板、「資源」面板或在「即時」檢視內拖曳元素，以及將滑鼠停留在頁面上的不同元素上時，您會注意到巢狀元素 (連同在導引線之前和之後的元素) 的視覺回應效果。
- 導引線之前/之後：當您將滑鼠停留在元素上方和下方 30% 時。
- 巢狀視覺回應效果：當您將滑鼠停留在元素中間 40% 時。
CSS 設計工具現在提供兩種不同的模式來檢視及編輯 CSS 屬性：
- 全部：目前文件中的所有 CSS、媒體查詢和選取器都會列在這個模式中。這個模式與「設計」檢視或「即時」檢視中的選取內容無關。
如果您想要建立 CSS、媒體查詢或選取器，使用這個模式將可獲得最佳效果。
- 目前：「設計」檢視或「即時」檢視中選取之任何元素的已計算樣式都會列在這個模式中。在 CSS 檔案中，如果焦點在選取器上，這個模式就會顯示該選取器的屬性。
CSS 設計工具面板中的媒體查詢現在會用顏色編碼來符合視覺媒體查詢。
- 顯示集合選項：現在當您初次啟動 Dreamweaver 時，預設會選取「屬性」區段中的「顯示集合」核取方塊。所有後續的 Dreamweaver 工作階段都會持續保留這個選項的任何變更 (選取或取消選取)。
如果您開啟網站或是匯入使用舊版 Dreamweaver 所建立之網站的設定，而且網站將單一伺服器指定為測試與遠端伺服器，就會建立重複的伺服器項目。然後，將其中一個標記為遠端伺服器 (字尾為 _remote)，另一個標記為測試伺服器 (字尾為 _testing)。
當您開啟、建立或儲存對動態文件進行的變更時，Dreamweaver 現在會自動將動態文件與您的測試伺服器進行同步。Dreamweaver 不會再顯示測試伺服器工作流程所用的「更新測試伺服器」或「推送相關檔案」對話方塊。
如需詳細資訊，請參閱自動推送動態檔案。
Business Catalyst 擴充功能已被淘汰，無法用於 Dreamweaver CC 2015 版本和更新的版本。Dreamweaver CC 2014.1.1 是與 Business Catalyst 擴充功能相容的最後一個版本。
若要搭配 Dreamweaver CC 2015 版本和更新的版本使用 Business Catalyst，請在 Dreamweaver 中使用 SFTP 連線選項。如需詳細資訊，請參閱 Business Catalyst 文件。
以下是 Business Catalyst 網站上有關這項變更的正式公告。
