功能摘要 | Dreamweaver CC | 2015 版

Dreamweaver CC 2015.1、2015.2 和 2015.3 版為您引進了在 Dreamweaver 中設計與建置網站的突破性體驗。現在，您可以從 Dreamweaver 內存取 Creative Cloud Libraries 和 Adobe Stock，以便從 Adobe 桌面和行動應用程式整合設計元素與樣式，並整合高品質的影像與視訊。Creative Cloud 中的協作功能提供了從設計師到開發人員的順暢工作流程。

這個版本也包含 DOM 面板、多方互動網頁設計、Extract、即時檢視編輯等增強功能，以及跟您一樣的用戶所提出的其他增強功能要求。本文將介紹這些新功能和增強功能，並提供連結以取得更多說明和學習資源。

這個版本的 Dreamweaver 修正了 Windows 電腦上的以下問題：如果 Dreamweaver 正在執行，則電腦無法進入睡眠模式 (喚醒計時器問題)。 

如需詳細資訊，請參閱「電腦無法在執行 Dreamweaver 時進入睡眠模式 | Windows」。

Adobe Dreamweaver CC 2015.2 (2016 年 3 月版)

DOM 面板增強功能

透過對多重選取、編輯標籤、類別和 ID 以及插入新元素等功能的支援，現在只要使用 DOM 面板，您就可以配置網頁版面並設計大部分的內容。

請繼續閱讀，以深入了解 DOM 面板的這些增強功能：

• 支援元素的多重選取
• 在 DOM 面板內編輯標籤、類別和 ID
• 在 DOM 面板中插入元素
• 子節點的視覺回應效果

支援 DOM 元素的多重選取

您現在可以在文件的 DOM 面板中選取多個標籤，即可同時編輯多個標籤或執行其他作業。

• 若要進行連續選取，請在 DOM 面板中按住 Shift 鍵，然後按一下所要的標籤。
• 若要進行非連續選取，請在 DOM 面板中按住 Ctrl 鍵，然後按一下所要的標籤。

當您在 DOM 面板中選取多個元素時：

• 屬性檢視窗和 CSS 設計工具都會停用。
• 將會清除頁面底部所顯示的標籤階層。
• 「程式碼」檢視中的插入點會變為非作用中狀態。

在 DOM 面板內編輯標籤、類別和 ID

您現在可以在 DOM 面板中的項目上按兩下，來編輯標籤、類別和 ID。您也可以用空格分隔的方式來新增額外的類別或 ID。對於未與類別或 ID 相關聯的標籤，您可以在按兩下標籤後輸入類別或 ID 的名稱。

當您開始輸入標籤、類別或 ID 名稱時，程式碼提示就會出現。若要縮小提示至類別，請以點 (.) 做為開頭開始輸入。若只要在提示中顯示 ID，請以井字號 (#) 做為開頭開始輸入。

若要移除標籤，請在 DOM 面板中以滑鼠右鍵按一下該標籤，然後按一下「移除標籤」。

在 DOM 面板中插入元素

您現在可以透過下列其中一種方式，使用 DOM 面板將新元素插入您的網頁：

• 在 DOM 面板中按空格鍵或按一下所要元素旁邊的插入圖示。在出現的彈出式視窗中，按一下其中一個選項。若要使用標籤圍繞多個元素，請選取所要的元素，然後從插入選項中選擇「用標籤圍繞」。

• 在「插入」面板中按一下所要的元素，然後拖曳至 DOM 面板中。即時導引線隨即出現，指示將插入元素的位置。將元素放到所要的位置。

當您使用 DOM 面板插入標籤時，也會插入標籤的預設 (預留位置) 文字和必要屬性：

• 當您插入下列任一個標籤並認同變更時，便會在「程式碼」、「即時」和「設計」檢視中插入預設文字：
  div、header、nav、aside、article、section、footer、h1-h6 和 hgroup
• 當您插入 table 標籤並認同變更時，便會插入 3X3 表格。
• 當您插入 embed 或 img 標籤並認同變更時，便會顯示「選取檔案」對話方塊，並提示您選取適當的檔案。
• 當您插入 meta 標籤並認同變更時，便會在「程式碼檢視」中新增下列程式碼：<meta name="" content="">
• 當您插入 figure 標籤並認同變更時，便會插入具有巢狀 figcaption 的 figure 標籤。
• 當您插入 ul 或 ol 標籤並認同變更時，便會插入具有巢狀 li 標籤的 ol/ul 標籤。

子節點的視覺回應效果

當在 DOM 面板中選取某個節點時，其子節點會以淺藍色顯示。

如果明確選取子節點，則不會以淺藍色反白標示。

防止 Gatekeeper 漏洞的安全性增強功能

Gatekeeper 是 Mac OS X 10.7 及更新版本內建的惡意程式碼偵測功能。此功能會在應用程式安裝至 Mac 之前，先檢查應用程式中的有效 Developer ID 簽名。但是，對於從具備有效簽名的應用程式內動態載入的應用程式，Gatekeeper 並不會偵測或封鎖這些應用程式。如果您從未經授權的來源購買 Dreamweaver，Gatekeeper 中的這項缺點就會遭到不當利用，在 Dreamweaver 安裝套件中載入惡意增效模組。

為了防止任何潛在的漏洞，現在當您想要載入協力廠商增效模組，而其安裝位置不是 /Applications 時，Dreamweaver 便會提示您進行確認。

如需詳細資訊，請參閱「防止 Gatekeeper 遭到潛在惡意利用」。

CEF 整合

Dreamweaver 現在已與 CEF3 2357 整合。現在，「即時」檢視可以呈現 CSS3 3D 轉變、
動畫和轉換。

如需詳細資訊，請參閱「CEF 整合」。

視覺媒體查詢增強功能

當使用「視覺媒體查詢」列新增媒體查詢時，您現在將能夠選取單位 (px、em 或 rem)。當您以某個單位指定值，接著又變更單位時，該值會自動轉換為新選取的單位。

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

CC Libraries 的增強功能

重新取樣對話方塊的變更

「影像最佳化」對話方塊中的「將大小調整為」UI 標籤已變更為「重新取樣為」。

此外，當您從「CC Libraries」面板取樣影像時，影像上會顯示微調控制項，直到影像已完全取樣為止。

如需詳細資訊，請參閱「Dreamweaver 中的 Creative Cloud Libraries」。

從 CC Libraries 擷取網頁最佳化的 SVG 檔案

如果您已在 Creative Cloud Libraries 中儲存已授權的 Adobe Stock 影像，可將這些影像當做網頁最佳化的 SVG 檔案擷取到您的 Dreamweaver 網頁中。當您將影像從「CC Libraries」面板拖曳到網頁時，影像預設會插入為 SVG 檔案。

如果您要自訂 SVG 檔案的屬性，可編輯 options.json 檔案中的偏好設定。

如需詳細資訊，請參閱「從 CC Libraries 擷取網頁最佳化的 SVG 檔案」。

新的初學者範本

此組建中新增了 3 個新的電子郵件範本：電子郵件-流變、電子郵件-混合、電子郵件-互動。

若要存取這些範本，請前往「檔案 > 新增 > 初學者範本 > 電子郵件範本」。

即時檢視中的表格編輯增強功能

新的列和欄編輯選項

在「即時」檢視中現在針對表格提供下列編輯選項：

• 使用 Delete/Backspace 鍵，進行刪除作業。
• 使用快顯選單、「編輯」選單或鍵盤快速鍵，進行剪下作業。
• 使用快顯選單、「編輯」選單或鍵盤快速鍵，進行複製作業。
• 使用快顯選單、「編輯」選單或鍵盤快速鍵，進行貼上作業。
• 使用快顯功能表中的「取代選取的儲存格」選項，複製及取代其他列或欄。

若要查看這些選項，請選取表格，然後按一下「元素顯示」中的三明治圖示，進入表格格式設定模式。接著，選取所要的儲存格並按一下滑鼠右鍵。

在列和欄之間導覽

現在，您可以在「即時」檢視中使用向左鍵和向右鍵，在表格的儲存格之間導覽。按一下表格中的某個儲存格，按向左鍵即可前往上一個儲存格，按向右鍵即可前往下一個儲存格。

歡迎畫面的變更

在此版本的 Dreamweaver 中，「歡迎」畫面已變更：

Adobe Dreamweaver CC 2015.1 (2015 年 11 月版)

與 Creative Cloud Libraries 整合

有了 Creative Cloud Libraries 的全新支援後，您就可以共用在其他設計工具 (例如 Photoshop、Illustrator 或行動應用程式) 中製作的圖形和顏色主題並進行協作。您隨時隨地都可以視需要在不同的 Dreamweaver 專案中瀏覽、管理及取用創意資源。 

當您從 Creative Cloud Libraries 插入資源時，可以選擇維持資源與來源之間的連結，以便讓您的資源隨時保持在更新狀態。

Dreamweaver 中的新「CC Libraries」面板可協助您檢視 Creative Cloud Libraries 中的資源，並將資源插入您的網頁中。您可以在「即時」檢視或「程式碼」檢視中，使用程式碼提示插入資源。

如需詳細資訊，請參閱「Dreamweaver 中的 Creative Cloud Libraries」。

與 Adobe Stock 整合

與 Adobe Stock 整合可讓您將免版稅的影像、向量圖形和視訊直接下載到 Creative Cloud Libraries，並直接從 Dreamweaver 中輕鬆地管理及重複使用 Adobe Stock 內容。

從 Adobe Stock 尋找完美的影像、圖形和視訊，為您的網站提供引人入勝的外觀來吸引您的觀眾，這些全都可以在 Dreamweaver 中辦到。

多方互動設計的增強功能

• Bootstrap 增強功能
• 視覺媒體查詢的增強功能

Bootstrap 增強功能

支援 Bootstrap 3.3.5 版

用於 Dreamweaver 的 Bootstrap 版本已更新為 3.3.5 版。因此，Bootstrap 組件、片段和初學者範本現在都是 3.3.5 版。 

jQuery 版本也已更新為 1.11.3 版。

複製列與欄

除了在「即時」檢視中 Bootstrap 文件的「新增欄」/「新增列」功能以外，Dreamweaver 現在也可讓您複製列與欄。

您可以按一下出現在右下角的「複製」圖示 ()，複製選取的列或欄。整個列或欄會連同其內容一起複製。

Bootstrap 文件建立工作流程的增強功能

不論您是從「新增文件」對話方塊或初學者範本建立 Bootstrap 文件，工作流程現在都很順暢。不再像舊版 Dreamweaver 一樣，顯示「複製相關檔案」和「覆寫現有檔案」等對話方塊。

當您建立 Bootstrap 文件並儲存在特定的位置時，相關檔案也會自動儲存在相同的位置。

視覺媒體查詢的增強功能

• 目前中斷點值的標示
• 新增媒體查詢工作流程的增強功能
• 中斷點編輯的增強功能

目前中斷點值的標示

Dreamweaver 現在會標示與目前檢視區大小相關聯的媒體查詢，讓您能夠快速識別這些項目。標示的形式是以較暗的箭頭和深色背景來標示媒體查詢的中斷點值。

新增媒體查詢工作流程的增強功能

現在，當您按一下視覺媒體查詢列上的「+」時，Dreamweaver 不會提示您按一下 max-width 或 min-width 選項。而是，立即顯示新增媒體查詢的彈出式選單。

此外，在彈出式選單中會預設選取 max-width 選項。引進的下拉式清單可讓您將選項變更為 min-width 或 min-max。 

中斷點編輯的增強功能

您現在只要在視覺媒體查詢列中按兩下中斷點值，即可編輯媒體查詢值。當您按兩下中斷點值時，就會顯示橘色邊框，而且插入點會出現在邊框內。

輸入新的值 (以像素為單位) 之後，請按下 Enter/Return 以確認變更，或按下 Escape 以放棄變更。

在前往程式碼選項中顯示行號

在視覺媒體查詢的右鍵快顯選單中，「前往程式碼」選項現在會顯示程式碼行號，好讓您輕鬆地連結到對應的程式碼。

Extract 的增強功能

• 支援多個工作畫板
• 支援擷取陰影
• 處理不支援的圖層樣式的秘訣

支援多個工作畫板

您現在可以在 Dreamweaver 的 Extract 面板中開啟包含多個工作畫板的 PSD 以擷取資源。每個工作畫板都會在圖層窗格中顯示為資料夾。您可以展開或收合資料夾以查看或隱藏其內容。

若要放大顯示特定的工作畫板，只要按一下工作畫板名稱即可。

按兩下面板標題中的「符合」，即可將工作畫板縮小顯示，讓 PSD 符合目前的檢視。

支援擷取陰影

當您從具有陰影屬性的 PSD 檔案中擷取 CSS 時，該屬性現在會擷取為 CSS 中的 box-shadow。

處理不支援的圖層樣式的秘訣

在許多情況下，您會在 PSD 檔案中建立多個圖層樣式，這些圖層樣式可個別運作但無法一起運作。Extract 會檢查這類案例，並且為您提供如何處理這些圖層樣式的建議。

Extract 會偵測下列案例：

• 案例 1：轉譯成背景顏色之任何屬性的多個實體。例如，PSD 檔案中定義的兩個顏色覆蓋或兩個漸層覆蓋。
• 案例 2：將不透明度低於 100% 的顏色覆蓋放置於漸層覆蓋之上，或者圖層被指定背景顏色。在這類案例中，很難判斷混合的顏色結果。
  
• 案例 3：漸層覆蓋的不透明度低於 100%，而且圖層已被指定背景顏色。在這類案例中，同樣很難判斷混合的顏色結果。
  

偵測到這些案例時，Extract 就會在 Extract 面板中的圖層縮圖上顯示警告圖示。下列警告訊息會顯示在圖層縮圖彈出式訊息中，以及該圖層的 CSS 中：

「此圖層包含多個無法在 CSS 呈現的圖層樣式。請使用檢色器或將圖層擷取為單一影像。」

此外，如果半透明的背景顏色覆蓋了另一個背景顏色 (上述案例 2 和 3)，所有背景顏色的值都會顯示在 CSS 中。如此，您就可以擷取所需的值。

即時檢視編輯的增強功能

• 表格編輯的增強功能
• 文字的快速屬性檢視窗
• 影像的快速屬性檢視窗變更

表格編輯的增強功能

按一下即可選取列或欄

現在只要按一下滑鼠，您就可以在「即時」檢視中選取表格的列和欄。引進的新箭頭圖示 (與「設計檢視」中的箭頭圖示很相似) 可讓您按一下以選取列或欄。

拖曳選取多個儲存格

您現在可以使用拖曳操作來選取多個儲存格/列/欄。只要按一下儲存格，然後拖曳過多個儲存格/列/欄，即可加以選取。

使用 Delete 鍵刪除列或欄

您現在可以選取列或欄，然後按 Delete/Backspace 鍵刪除它們。

文字的快速屬性檢視窗

您現在可以針對「即時」檢視中的文字使用「快速屬性檢視窗」，以快速設定格式、縮排和超連結文字。當您針對文字元素 (h1-h6、pre 和 p) 按一下三明治圖示時，便會顯示文字的「快速屬性檢視窗」。

• 「格式」選項可讓您快速地將元素標籤變更為下列其中一種標籤：h1-h6、p 和 pre。 
• 連結選項可幫助您設定文字元素的超連結。 
• 粗體和斜體圖示可幫助您將 <strong> 和 <em> 標籤加入文字元素中。
• 縮排區塊圖示可幫助您新增或移除文字縮排。標籤會隨之在程式碼中新增或移除。
  

在 Bootstrap 文件中，文字的「快速屬性檢視窗」也可讓您對齊和轉換文字元素。

• 對齊：只要套用對應的類別，即可將 Bootstrap 文字元素靠左、置中、靠右對齊或齊行。
• 轉換：只要套用小寫、大寫或句首大寫的類別，即可變更元素文字的大小寫。

影像的快速屬性檢視窗變更

影像的「快速屬性檢視窗」現在包含可在 Bootstrap 文件中自訂影像的選項。

• 裁切成形狀：按一下即可將影像的角落裁切成圓形或圓角，或是當做縮圖影像。
• 讓影像具有互動性：按一下即可讓影像具有互動性，並且符合各種不同的螢幕大小。

應用程式內更新

Adobe 持續不斷地提供更新，以最新穎的技術讓 Dreamweaver 保持在最新狀態。例如，提供 Bootstrap 資料庫或初學者範本的更新。

您可以自動或手動下載及安裝應用程式內更新。您也可以停用應用程式內更新或是將其解除安裝，並將 Dreamweaver 回復到之前使用 Adobe Creative Cloud 桌面應用程式安裝或更新後的狀態。Dreamweaver 的偏好設定對話方塊可讓您指定更新、停用或回復應用程式內更新的模式。

如需應用程式內更新的詳細資訊，請參閱「應用程式內更新」。

測試伺服器 - 工作流程改良

在上一個版本 (Dreamweaver CC 2015) 中，我們引進了自動推送檔案到測試伺服器，在即時檢視中提供順暢的動態文件編輯體驗。而為因應眾多用戶的要求，我們提供了停用此功能的能力，「網站設定」對話方塊中現在已引進新的偏好設定。

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

根據選取範圍的程式碼收合

選定程式碼區塊的程式碼收合功能又回來了。您現在可以：

• 收合標籤階層的程式碼，如同在舊版的 Dreamweaver 中一樣，及/或；
• 選取一部分的程式碼將它收合。

按一下「-」可收合程式碼。若要展開收合的程式碼區段，請按一下「+」。

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

CSS 設計工具增強功能

• 重新排列選取器
  
• CSS 設計工具中的窗格會維持自訂大小
• Bootstrap 檔案的屬性面板已停用
• 不再支援的 API

重新排列選取器

您現在可以將「選取器」窗格中的選取器拖曳到窗格中的所需位置，即可重新排列。

CSS 設計工具中的窗格會維持自訂大小

如果您收合或展開 CSS 設計工具中的窗格，窗格的大小會記憶在工作階段內。「來源」和「媒體」窗格會保持自訂的大小，直到您再次變更其大小為止。

Bootstrap 檔案的屬性面板已停用

在 Bootstrap 檔案中，樣式是定義在 Bootstrap CSS 檔案中並且是唯讀的，而 CSS 設計工具中的「屬性」面板已停用。

現行文件特有的還原/重做

還原和重做動作現在可以只限定在現行文件。

根據預設，還原和重做動作會影響現行文件和所有相關檔案，例如關聯的 CSS 檔案。當您將還原動作限制在現行文件時，還原/重做只會套用到目前成為焦點之檔案中所做的變更。例如，如果您正在 HTML 檔案中，則還原/重做動作只會影響您在 HTML 檔案中所做的變更，而不會影響相關 CSS 檔案中的變更。若要還原/重做您在相關 CSS 檔案中所做的任何變更，您必須先切換到 CSS 檔案，然後再進行還原/重做。

如果焦點是在即時檢視或設計檢視，則還原/重做只會套用到影響 HTML 程式碼的變更。例如，假設您正在「即時」檢視中編輯 Bootstrap 頁面。您會編輯一些文字，然後在「視覺媒體查詢」列中調整媒體查詢的大小。您只能還原文字編輯，而無法還原媒體查詢的變更，因為這些變更是在相關檔案中，而不是在 HTML 檔案中。您可以切換到相關 CSS 檔案，並還原變更。

若要將還原和重做動作限制在目前文件，請執行下列步驟：

DOM 面板的改良

您現在可以在文件的 DOM 面板中，使用右鍵快顯選單複製標籤，然後將它貼入另一份文件的 DOM 面板中。

新功能指南的重設選項

「功能浮動視窗」和「上下文功能秘訣」新功能指南會在您更新 Dreamweaver 之後，首次啟動時自動出現。「功能浮動視窗」可協助您探索更新中的新功能，「上下文功能秘訣」則能協助您探索新的工作流程和增強功能。

之後啟動 Dreameaver 時，這些新功能指南就會隱藏，並預設為不顯示。如果您要再次檢視它們，可以使用 Dreamweaver 偏好設定中的「重設」選項。

W3C 驗證工具的更新

Dreamweaver 現在已更新為使用來自 W3C 的 HTML5 新驗證工具服務：https://validator.w3.org/nu/。舊的驗證工具服務 validator.w3.org 已經淘汰。

新的驗證工具服務只支援下列剖析器：

就如同舊版的 Dreamweaver 一樣，您仍然可以指定後援剖析器，以便在無法根據文件內容類型或 DTD 辨識剖析器時供 Dreamweaver 選擇。新的驗證工具只變更了可用剖析器的清單。

如需詳細資訊，請參閱「使用 W3C 驗證工具驗證文件」。

資源面板中的 SVG 檔案支援

「資源」面板現在會列出 Dreamweaver 網站中與目前現行文件相關聯的所有 SVG 資源。如同「資源」面板中的任何其他資源一樣，您可以對 SVG 資源執行各種動作，例如：編輯、指定 URL，以及重複使用各文件和網站中的資源。

縮放選項的變更

Dreamweaver 已不再支援使用下列動作在「即時」檢視與「設計檢視」中放大或縮小：

Windows：

• 按下 Ctrl 並使用滑鼠滾輪
• 按下 Ctrl 並使用軌跡板的捲動功能

Mac：

• 按下 Cmd 並使用滑鼠滾輪
• 按下 Cmd 並使用軌跡板的捲動功能

其他放大和縮小文件的方式並沒有任何變更：Cmd/Ctrl++ 或 Cmd/Ctrl+-，以及從「檢視 > 顯示比例」選單進行縮放。

檢視選單的變更

「檢視」選單中的「程式碼和即時」/「程式碼和設計」選項已重新命名為「分割」，而且其行為表現與「文件」工具列中的選項相同。

更快速地將 Dreamweaver 設定與 Creative Cloud 同步

由於同步設定功能中的多項效能改進，您現在可以比以往更快速地在 Dreamweaver 實體與 Creative Cloud 之間同步設定。 

不再支援的 CSS 樣式面板與 API

舊的「CSS 樣式」面板已從 Dreamweaver 中移除，因此相關聯的 API 也已一併移除。

下列基本 API 仍然可用：

• dreamweaver.cssRuleTracker.newRule()

• dreamweaver.cssStylePalette.getStyles()

• dreamweaver.cssStylePalette.editStyleSheet()

• dreamweaver.cssStylePalette.attachStyleSheet()

• dreamweaver.cssStylePalette.getMediaType()

• dreamweaver.cssStylePalette.setMediaType()

• dreamweaver.cssStylePalette.getDisplayStyles()

• dreamweaver.cssStylePalette.setDisplayStyles()

• dreamweaver.cssStylePalette.newStyle()

下列 API 將不再受支援：

• dreamweaver.cssRuleTracker.editSelectedRule()

• dreamweaver.cssRuleTracker.canEditSelectedRule()

• dreamweaver.cssStylePalette.getSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyle()

• dreamweaver.cssStylePalette.editSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.renameSelectedStyle()

• dreamweaver.cssStylePalette.applySelectedStyle()

• dreamweaver.cssStylePalette.duplicateSelectedStyle()

• dreamweaver.cssStylePalette.deleteSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyle()

• dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()

• dreamweaver.cssStylePalette.canRenameSelectedStyle()

• dreamweaver.cssStylePalette.canDuplicateSelectedStyle()

• dreamweaver.cssStylePalette.canDeleteSelectedStyle()

• dreamweaver.cssStylePalette.canApplySelectedStyle()

• dreamweaver.canDisableSelectedStyle()

• dreamweaver.canEnableAllDisabled()

• dreamweaver.canDeleteAllDisabled()

• dreamweaver.getSelectedStyleIsDisabled()

• dreamweaver.setSelectedStyleIsDisabled()

• dreamweaver.enableAllDisabled()

• dreamweaver.deleteAllDisabled()