選取表格以顯示包含三明治圖示的「元素顯示」。
2015 版 Dreamweaver CC
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」。
透過對多重選取、編輯標籤、類別和 ID 以及插入新元素等功能的支援,現在只要使用 DOM 面板,您就可以配置網頁版面並設計大部分的內容。
請繼續閱讀,以深入了解 DOM 面板的這些增強功能:
您現在可以在文件的 DOM 面板中選取多個標籤,即可同時編輯多個標籤或執行其他作業。
當您在 DOM 面板中選取多個元素時:
您現在可以在 DOM 面板中的項目上按兩下,來編輯標籤、類別和 ID。您也可以用空格分隔的方式來新增額外的類別或 ID。對於未與類別或 ID 相關聯的標籤,您可以在按兩下標籤後輸入類別或 ID 的名稱。
當您開始輸入標籤、類別或 ID 名稱時,程式碼提示就會出現。若要縮小提示至類別,請以點 (.) 做為開頭開始輸入。若只要在提示中顯示 ID,請以井字號 (#) 做為開頭開始輸入。
若要移除標籤,請在 DOM 面板中以滑鼠右鍵按一下該標籤,然後按一下「移除標籤」。
您現在可以透過下列其中一種方式,使用 DOM 面板將新元素插入您的網頁:
當您使用 DOM 面板插入標籤時,也會插入標籤的預設 (預留位置) 文字和必要屬性:
當在 DOM 面板中選取某個節點時,其子節點會以淺藍色顯示。
如果明確選取子節點,則不會以淺藍色反白標示。
Gatekeeper 是 Mac OS X 10.7 及更新版本內建的惡意程式碼偵測功能。此功能會在應用程式安裝至 Mac 之前,先檢查應用程式中的有效 Developer ID 簽名。但是,對於從具備有效簽名的應用程式內動態載入的應用程式,Gatekeeper 並不會偵測或封鎖這些應用程式。如果您從未經授權的來源購買 Dreamweaver,Gatekeeper 中的這項缺點就會遭到不當利用,在 Dreamweaver 安裝套件中載入惡意增效模組。
為了防止任何潛在的漏洞,現在當您想要載入協力廠商增效模組,而其安裝位置不是 /Applications 時,Dreamweaver 便會提示您進行確認。
如需詳細資訊,請參閱「防止 Gatekeeper 遭到潛在惡意利用」。
Dreamweaver 現在已與 CEF3 2357 整合。現在,「即時」檢視可以呈現 CSS3 3D 轉變、
動畫和轉換。
如需詳細資訊,請參閱「CEF 整合」。
當使用「視覺媒體查詢」列新增媒體查詢時,您現在將能夠選取單位 (px、em 或 rem)。當您以某個單位指定值,接著又變更單位時,該值會自動轉換為新選取的單位。
如需詳細資訊,請參閱「視覺媒體查詢」。
「影像最佳化」對話方塊中的「將大小調整為」UI 標籤已變更為「重新取樣為」。
此外,當您從「CC Libraries」面板取樣影像時,影像上會顯示微調控制項,直到影像已完全取樣為止。
如需詳細資訊,請參閱「Dreamweaver 中的 Creative Cloud Libraries」。
如果您已在 Creative Cloud Libraries 中儲存已授權的 Adobe Stock 影像,可將這些影像當做網頁最佳化的 SVG 檔案擷取到您的 Dreamweaver 網頁中。當您將影像從「CC Libraries」面板拖曳到網頁時,影像預設會插入為 SVG 檔案。
如果您要自訂 SVG 檔案的屬性,可編輯 options.json 檔案中的偏好設定。
如需詳細資訊,請參閱「從 CC Libraries 擷取網頁最佳化的 SVG 檔案」。
此組建中新增了 3 個新的電子郵件範本:電子郵件-流變、電子郵件-混合、電子郵件-互動。
若要存取這些範本,請前往「檔案 > 新增 > 初學者範本 > 電子郵件範本」。
在「即時」檢視中現在針對表格提供下列編輯選項:
若要查看這些選項,請選取表格,然後按一下「元素顯示」中的三明治圖示,進入表格格式設定模式。接著,選取所要的儲存格並按一下滑鼠右鍵。
現在,您可以在「即時」檢視中使用向左鍵和向右鍵,在表格的儲存格之間導覽。按一下表格中的某個儲存格,按向左鍵即可前往上一個儲存格,按向右鍵即可前往下一個儲存格。
在此版本的 Dreamweaver 中,「歡迎」畫面已變更:
有了 Creative Cloud Libraries 的全新支援後,您就可以共用在其他設計工具 (例如 Photoshop、Illustrator 或行動應用程式) 中製作的圖形和顏色主題並進行協作。您隨時隨地都可以視需要在不同的 Dreamweaver 專案中瀏覽、管理及取用創意資源。
當您從 Creative Cloud Libraries 插入資源時,可以選擇維持資源與來源之間的連結,以便讓您的資源隨時保持在更新狀態。
Dreamweaver 中的新「CC Libraries」面板可協助您檢視 Creative Cloud Libraries 中的資源,並將資源插入您的網頁中。您可以在「即時」檢視或「程式碼」檢視中,使用程式碼提示插入資源。
如需詳細資訊,請參閱「Dreamweaver 中的 Creative Cloud Libraries」。
與 Adobe Stock 整合可讓您將免版稅的影像、向量圖形和視訊直接下載到 Creative Cloud Libraries,並直接從 Dreamweaver 中輕鬆地管理及重複使用 Adobe Stock 內容。
從 Adobe Stock 尋找完美的影像、圖形和視訊,為您的網站提供引人入勝的外觀來吸引您的觀眾,這些全都可以在 Dreamweaver 中辦到。
用於 Dreamweaver 的 Bootstrap 版本已更新為 3.3.5 版。因此,Bootstrap 組件、片段和初學者範本現在都是 3.3.5 版。
jQuery 版本也已更新為 1.11.3 版。
除了在「即時」檢視中 Bootstrap 文件的「新增欄」/「新增列」功能以外,Dreamweaver 現在也可讓您複製列與欄。
您可以按一下出現在右下角的「複製」圖示 (),複製選取的列或欄。整個列或欄會連同其內容一起複製。
「新增列」或「新增欄」選項會複製列或欄與類別,但不含內容。
不論您是從「新增文件」對話方塊或初學者範本建立 Bootstrap 文件,工作流程現在都很順暢。不再像舊版 Dreamweaver 一樣,顯示「複製相關檔案」和「覆寫現有檔案」等對話方塊。
當您建立 Bootstrap 文件並儲存在特定的位置時,相關檔案也會自動儲存在相同的位置。
Dreamweaver 現在會標示與目前檢視區大小相關聯的媒體查詢,讓您能夠快速識別這些項目。標示的形式是以較暗的箭頭和深色背景來標示媒體查詢的中斷點值。
現在,當您按一下視覺媒體查詢列上的「+」時,Dreamweaver 不會提示您按一下 max-width 或 min-width 選項。而是,立即顯示新增媒體查詢的彈出式選單。
此外,在彈出式選單中會預設選取 max-width 選項。引進的下拉式清單可讓您將選項變更為 min-width 或 min-max。
您現在只要在視覺媒體查詢列中按兩下中斷點值,即可編輯媒體查詢值。當您按兩下中斷點值時,就會顯示橘色邊框,而且插入點會出現在邊框內。
輸入新的值 (以像素為單位) 之後,請按下 Enter/Return 以確認變更,或按下 Escape 以放棄變更。
在視覺媒體查詢的右鍵快顯選單中,「前往程式碼」選項現在會顯示程式碼行號,好讓您輕鬆地連結到對應的程式碼。
您現在可以在 Dreamweaver 的 Extract 面板中開啟包含多個工作畫板的 PSD 以擷取資源。每個工作畫板都會在圖層窗格中顯示為資料夾。您可以展開或收合資料夾以查看或隱藏其內容。
若要放大顯示特定的工作畫板,只要按一下工作畫板名稱即可。
按兩下面板標題中的「符合」,即可將工作畫板縮小顯示,讓 PSD 符合目前的檢視。
當您從具有陰影屬性的 PSD 檔案中擷取 CSS 時,該屬性現在會擷取為 CSS 中的 box-shadow。
在許多情況下,您會在 PSD 檔案中建立多個圖層樣式,這些圖層樣式可個別運作但無法一起運作。Extract 會檢查這類案例,並且為您提供如何處理這些圖層樣式的建議。
Extract 會偵測下列案例:
偵測到這些案例時,Extract 就會在 Extract 面板中的圖層縮圖上顯示警告圖示。下列警告訊息會顯示在圖層縮圖彈出式訊息中,以及該圖層的 CSS 中:
「此圖層包含多個無法在 CSS 呈現的圖層樣式。請使用檢色器或將圖層擷取為單一影像。」
此外,如果半透明的背景顏色覆蓋了另一個背景顏色 (上述案例 2 和 3),所有背景顏色的值都會顯示在 CSS 中。如此,您就可以擷取所需的值。
按一下即可選取列或欄
現在只要按一下滑鼠,您就可以在「即時」檢視中選取表格的列和欄。引進的新箭頭圖示 (與「設計檢視」中的箭頭圖示很相似) 可讓您按一下以選取列或欄。
選取表格以顯示包含三明治圖示的「元素顯示」。
按一下三明治圖示,以進入表格格式設定模式。
將滑鼠置於您要選取的列或欄上方。將滑鼠指向最外側列或欄的邊框,就會顯示一個箭頭,指示您現在可以按一下以進行選取。
按一下以選取列或欄。
使用右鍵快顯選單,視需要繼續編輯列或欄。
拖曳選取多個儲存格
您現在可以使用拖曳操作來選取多個儲存格/列/欄。只要按一下儲存格,然後拖曳過多個儲存格/列/欄,即可加以選取。
選取表格以顯示包含三明治圖示的「元素顯示」。
按一下三明治圖示,以進入表格格式設定模式。
拖曳並選取所要的列或欄。
使用右鍵快顯選單,視需要繼續編輯列或欄。
使用 Delete 鍵刪除列或欄
您現在可以選取列或欄,然後按 Delete/Backspace 鍵刪除它們。
您現在可以針對「即時」檢視中的文字使用「快速屬性檢視窗」,以快速設定格式、縮排和超連結文字。當您針對文字元素 (h1-h6、pre 和 p) 按一下三明治圖示時,便會顯示文字的「快速屬性檢視窗」。
在 Bootstrap 文件中,文字的「快速屬性檢視窗」也可讓您對齊和轉換文字元素。
影像的「快速屬性檢視窗」現在包含可在 Bootstrap 文件中自訂影像的選項。
Adobe 持續不斷地提供更新,以最新穎的技術讓 Dreamweaver 保持在最新狀態。例如,提供 Bootstrap 資料庫或初學者範本的更新。
您可以自動或手動下載及安裝應用程式內更新。您也可以停用應用程式內更新或是將其解除安裝,並將 Dreamweaver 回復到之前使用 Adobe Creative Cloud 桌面應用程式安裝或更新後的狀態。Dreamweaver 的偏好設定對話方塊可讓您指定更新、停用或回復應用程式內更新的模式。
如需應用程式內更新的詳細資訊,請參閱「應用程式內更新」。
在上一個版本 (Dreamweaver CC 2015) 中,我們引進了自動推送檔案到測試伺服器,在即時檢視中提供順暢的動態文件編輯體驗。而為因應眾多用戶的要求,我們提供了停用此功能的能力,「網站設定」對話方塊中現在已引進新的偏好設定。
如需詳細資訊,請參閱「停用自動推送動態檔案」。
選定程式碼區塊的程式碼收合功能又回來了。您現在可以:
按一下「-」可收合程式碼。若要展開收合的程式碼區段,請按一下「+」。
如需收合程式碼的詳細資訊,請參閱「收合程式碼」。
您現在可以將「選取器」窗格中的選取器拖曳到窗格中的所需位置,即可重新排列。
如果您收合或展開 CSS 設計工具中的窗格,窗格的大小會記憶在工作階段內。「來源」和「媒體」窗格會保持自訂的大小,直到您再次變更其大小為止。
在 Bootstrap 檔案中,樣式是定義在 Bootstrap CSS 檔案中並且是唯讀的,而 CSS 設計工具中的「屬性」面板已停用。
如果您想要修改 Bootstrap 文件的樣式,請建立另一個 CSS 檔案來覆寫現有的樣式,並將其附加到文件中。
還原和重做動作現在可以只限定在現行文件。
根據預設,還原和重做動作會影響現行文件和所有相關檔案,例如關聯的 CSS 檔案。當您將還原動作限制在現行文件時,還原/重做只會套用到目前成為焦點之檔案中所做的變更。例如,如果您正在 HTML 檔案中,則還原/重做動作只會影響您在 HTML 檔案中所做的變更,而不會影響相關 CSS 檔案中的變更。若要還原/重做您在相關 CSS 檔案中所做的任何變更,您必須先切換到 CSS 檔案,然後再進行還原/重做。
如果焦點是在即時檢視或設計檢視,則還原/重做只會套用到影響 HTML 程式碼的變更。例如,假設您正在「即時」檢視中編輯 Bootstrap 頁面。您會編輯一些文字,然後在「視覺媒體查詢」列中調整媒體查詢的大小。您只能還原文字編輯,而無法還原媒體查詢的變更,因為這些變更是在相關檔案中,而不是在 HTML 檔案中。您可以切換到相關 CSS 檔案,並還原變更。
若要將還原和重做動作限制在目前文件,請執行下列步驟:
按一下「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Mac)。
在「一般」類別中,在「編輯選項」區段中選取「將還原動作限制在現行文件」。
按一下「套用」和「關閉」以關閉「偏好設定」對話方塊。
重新啟動 Dreamweaver,使變更生效。
您現在可以在文件的 DOM 面板中,使用右鍵快顯選單複製標籤,然後將它貼入另一份文件的 DOM 面板中。
只有從 DOM 面板複製的標籤可以貼入另一個 DOM 面板中。如果您是從「即時」檢視中複製標籤,就只能貼入「即時」檢視,而無法貼入 DOM 面板。
「功能浮動視窗」和「上下文功能秘訣」新功能指南會在您更新 Dreamweaver 之後,首次啟動時自動出現。「功能浮動視窗」可協助您探索更新中的新功能,「上下文功能秘訣」則能協助您探索新的工作流程和增強功能。
之後啟動 Dreameaver 時,這些新功能指南就會隱藏,並預設為不顯示。如果您要再次檢視它們,可以使用 Dreamweaver 偏好設定中的「重設」選項。
移至「說明 > 重設新功能指南」。「偏好設定」對話方塊便會出現。
根據您的需求,重設「功能浮動視窗」、「上下文功能秘訣」或兩者。
關閉「偏好設定」並結束 Dreamweaver。
重新啟動 Dreamweaver。您現在可以再次檢視新功能指南。
Dreamweaver 現在已更新為使用來自 W3C 的 HTML5 新驗證工具服務:https://validator.w3.org/nu/。舊的驗證工具服務 validator.w3.org 已經淘汰。
新的驗證工具服務只支援下列剖析器:
值 |
描述 |
none |
選擇 HTML 或 XML 剖析器取決於 Content-Type。 |
xml |
XML 剖析器,將不會載入外部實體 |
xmldtd |
XML 剖析器,將會載入外部實體 |
html |
HTML 剖析器,組態取決於 doctype。 |
html5 |
HTML5 模式的 HTML 剖析器。 |
html4 |
HTML4 嚴格模式的 HTML 剖析器。 |
html4tr |
HTML4 過渡模式的 HTML 剖析器。 |
就如同舊版的 Dreamweaver 一樣,您仍然可以指定後援剖析器,以便在無法根據文件內容類型或 DTD 辨識剖析器時供 Dreamweaver 選擇。新的驗證工具只變更了可用剖析器的清單。
如需詳細資訊,請參閱「使用 W3C 驗證工具驗證文件」。
「資源」面板現在會列出 Dreamweaver 網站中與目前現行文件相關聯的所有 SVG 資源。如同「資源」面板中的任何其他資源一樣,您可以對 SVG 資源執行各種動作,例如:編輯、指定 URL,以及重複使用各文件和網站中的資源。
Dreamweaver 已不再支援使用下列動作在「即時」檢視與「設計檢視」中放大或縮小:
Windows:
Mac:
其他放大和縮小文件的方式並沒有任何變更:Cmd/Ctrl++ 或 Cmd/Ctrl+-,以及從「檢視 > 顯示比例」選單進行縮放。
「檢視」選單中的「程式碼和即時」/「程式碼和設計」選項已重新命名為「分割」,而且其行為表現與「文件」工具列中的選項相同。
由於同步設定功能中的多項效能改進,您現在可以比以往更快速地在 Dreamweaver 實體與 Creative Cloud 之間同步設定。
舊的「CSS 樣式」面板已從 Dreamweaver 中移除,因此相關聯的 API 也已一併移除。
下列基本 API 仍然可用:
下列 API 將不再受支援:
登入您的帳戶