2017 版 Dreamweaver CC 納入了許多新功能和增強功能,包括支援 Git、全新的程式碼編輯器、更直覺式的用戶介面與可選取的深色主題,以及數種增強功能,包含提供更好的上手體驗。
請繼續閱讀,以快速了解這些新功能和增強功能。
如需舊版 Dreamweaver CC 推出之功能的摘要,請參閱「功能摘要 | Dreamweaver CC 2015 版」。
2017 版 Dreamweaver CC
Dreamweaver CC 2017 年 10 月 (18.0) 版現已推出!查看新功能摘要。
2017 版 Dreamweaver CC 納入了許多新功能和增強功能,包括支援 Git、全新的程式碼編輯器、更直覺式的用戶介面與可選取的深色主題,以及數種增強功能,包含提供更好的上手體驗。
請繼續閱讀,以快速了解這些新功能和增強功能。
如需舊版 Dreamweaver CC 推出之功能的摘要,請參閱「功能摘要 | Dreamweaver CC 2015 版」。
Dreamweaver CC 2017.5 支援下列新功能和增強功能︰
請繼續閱讀,深入了解這些功能和增強功能。
Dreamweaver CC 2017.5 版支援 Git 這個開放原始碼版本控制系統。透過新增的 Git 支援,您現在可以輕鬆地在 Dreamweaver 中管理包括原始碼在內的各種檔案。
您現在可以在 Dreamweaver 中執行常見的 Git 作業,而不需要協力廠商工具。新的「Git」面板 (「視窗 > Git」) 可讓您執行各種 Git 作業,包括提交、推送、拉取和擷取。
您也可以透過建立及合併分支與遠端儲存庫,將 Git 當做共同作業工具使用。您還可以檢視兩個檔案版本之間的差異,並且檢視檔案和儲存庫記錄。
此外,Dreamweaver 中的「檔案」面板現在支援新的 Git 檢視。您可以使用這個檢視來管理與您網站相關聯的未追蹤、已修改、暫存和已提交的檔案。
若要進一步了解如何使用 Git 進行版本控制和共同作業,請參閱「在 Dreamweaver 中使用 Git」。
Dreamweaver CC 2017.5 現在支援兩種新的程式碼主題︰Monaki 和 Classic。您可以選取並使用某些程式碼主題,採用與 Dreamweaver CC 2015 類似的程式碼顏色。
選取「Dreamweaver > 偏好設定」(macOS) 或「編輯 > 偏好設定 > 介面」(Windows),即可試用可讀性與外觀全面提升的全新程式碼主題。
當您第一次啟動 Dreamweaver CC 2017.5 時,「歡迎」畫面就會顯示更好的上手體驗。新的上手體驗會根據您所選擇的工作區展示下列兩部教學課程影片的其中之一:
您也可以從「說明」選單存取這兩部教學課程影片。按一下「說明 > 快速教學課程」即可檢視教學課程。
Dreamweaver CC 2017.5 現在已與最新版 CEF 整合。有了新的 CEF 版本,Dreamweaver 的「即時檢視」會顯示自訂 HTML 元素、CSS 的自訂屬性和其他更多項目。
在舊版的 Dreamweaver 中,您可以存取 PHP 5.6 的程式碼提示和剖析器檢查。Dreamweaver 17.1 則已針對 PHP 版本 5.6 和 7.1 完成設定。
您可以透過「網站設定」對話方塊或「編輯 > 偏好設定」來選擇要使用 5.6 或 7.1 編譯網站的 PHP 檔案。
如需有關 PHP 7.1 支援的詳細資訊,請參閱以下文章:
此版本包含尋找和取代功能的重要增強功能。
您現在可以使用「尋找和取代」對話方塊 (「尋找 > 在檔案中尋找和取代」) 來搜尋屬性和標籤。即使您並未在 Dreamweaver 中開啟任何檔案,還是可以使用此對話方塊 (例如在資料夾中搜尋)。
此外,「尋找和取代」快速尋找列 (「尋找 > 尋找和取代」) 現在已移到 Dreamweaver 工作區的底部。您可以使用此面板,在目前的文件中快速尋找和取代文字和屬性。
如需有關尋找和取代的詳細資訊,請參閱「尋找和取代文字、標籤和屬性」。如需 Dreamweaver 17.1 尋找和取代功能的已知問題,請參閱「Dreamweaver CC 2017 版本的已知問題和修正的瑕疵 」。
尋找和取代有新的鍵盤快速鍵︰
如需尋找和取代的鍵盤快速鍵完整清單,請參閱「尋找和取代鍵盤快速鍵」。
您現在可以使用適用於 Dreamweaver 的 Campaign 擴充功能,建立個人化的電子郵件行銷活動。
若要與讀者立即建立聯繫,建立個人化的內容相當重要,而且還能提高電子郵件行銷的成功率。
如果您使用 Dreamweaver 建立電子郵件行銷活動,現在還可以使用 Adobe Campaign 中的資料,進一步新增個人化的內容 (例如讀者的姓名或個人化的行動號召)。
若要開始,請按一下「視窗 > 擴充功能 > 瀏覽擴充功能」下載 Campaign 擴充功能,然後建立新的電子郵件電子報,或編輯現有的電子報。在完成設計之後,使用 Campaign 的個人化欄位和內容區塊來個人化內容,然後就準備就緒了。
Dreamweaver 會自動與 Campaign 進行同步,因此您在 Dreamweaver 中所做的內容變更也可以在 Campaign 中取得。接著,您只需要輸入電子郵件地址,並將個人化的行銷活動傳送給您的電子郵件收件者即可。
如需詳細資訊,請參閱「建立個人化的電子郵件行銷活動」。
您現在可以根據預設的淺色和深色主題,建立及自訂程式碼主題。然後,您可以在主題檔案中修改適當的選取器,藉以自訂程式碼顏色。
在「編輯 > 偏好設定 > 介面」中選取淺色或深色的預設程式碼主題,而且如果您想要變更程式碼顏色,請使用新的名稱來儲存主題,然後開始編輯主題檔案。
如需有關自訂程式碼顏色的詳細資訊,請參閱「自訂程式碼色彩標示」。
這個版本也包含許多瑕疵的修正。如需有關已修正之瑕疵的詳細資訊,請參閱「Dreamweaver CC 2017 版的已知問題和修正的瑕疵」。
Dreamweaver CC 2017 版為您提供了全新的程式碼編輯器、更直覺的用戶介面與可選取的深色和淺色主題,以及數種增強功能,包括支援 CSS 預處理器等全新工作流程。
請繼續閱讀 Dreamweaver CC 2017 新增功能和變更項目的完整清單:
Dreamweaver 中的程式碼編輯器已有許多的生產力增強功能,可讓您輕鬆快速又有效率地進行程式碼撰寫工作。
程式碼提示協助新用戶學習 HTML、CSS 及其他 Web 標準,而自動縮排、程式碼色彩標示和可調整大小的字型等視覺輔助則有助於減少錯誤,讓程式碼更容易閱讀。
Dreamweaver 的程式碼提示功能已強化,可為選取的程式碼提供更實用的資訊。
在舊版的 Dreamweaver 中,當您輸入右角括號時,會取得相關程式碼的下拉式清單。
在這個版本中,您不只會取得相關的程式碼,也會取得其他資訊,協助您直接在 Dreamweaver 中快速完成 HTML、CSS 及其他的網路技術。
如需詳細資訊,請參閱「程式碼提示與程式碼完成」。
程式碼的整體外觀現在已強化,更容易閱讀。您可以看到程式碼格式和程式碼色彩標示方面的改良。
程式碼格式
當您撰寫程式碼時,Dreamweaver 會自動縮排程式碼,以避免手動縮排錯誤並提高可讀性。
程式碼色彩標示
Dreamweaver 現在支援更多種檔案類型的程式碼色彩標示。
程式碼色彩標示支援現在適用於 HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown (GitHub)、Perl、屬性、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、文字、VB、VBScript、XML 和 YAML。
您可以直接在程式碼檢視的狀態列中,為不同檔案類型變更語法反白標示。
如需所有這些變更的詳細資訊,請參閱「Dreamweaver 的程式碼撰寫環境」。
Dreamweaver 現在支援 Sass、Less 和 SCSS 等常見的 CSS 預處理器,並具備完整的程式碼色彩標示及編譯功能,因此您可以節省更多時間並產生更簡潔的程式碼。
如需有關 Dreamweaver 支援 CSS 預處理器的詳細資訊,請參閱「在 Dreamweaver 使用 CSS 預處理器」。
在瀏覽器中即時快速預覽您的程式碼變更,不需要手動重新整理您的瀏覽器。Dreamweaver 現在會與您的瀏覽器連線,因此不需重新載入頁面,變更就會立即出現在您的瀏覽器中。
如需詳細資訊,請參閱「在瀏覽器中即時預覽」。
若要快速變更程式碼,請將游標置於特定的程式碼片段上,然後使用快顯選單,或按 Ctrl-E (Windows) 或 Cmd-E (Mac) 來存取「快速編輯」。
Dreamweaver 會提供內容特定的程式碼選項和行內工具。
如需詳細資訊,請參閱「快速編輯」。
Dreamweaver 直接在程式碼檢視內提供 CSS 屬性的內容文件。
現在您不需離開 Dreamweaver 以瀏覽網頁,就能了解或參閱 CSS 屬性。若要顯示 CSS 的說明,請按 Ctrl+K (Windows) 或 Cmd+K (Mac)。
如需詳細資訊,請參閱「在 Dreamweaver 中使用快速查詢文件取得 CSS 方面的協助」。
若要同時撰寫多行程式碼,請使用多游標。
這個功能可大幅提高生產力,因為您不需要多次撰寫同樣一行程式碼。
若要叫用多個游標,您可以:
如需詳細資訊,請參閱「使用多個游標在多個位置新增或變更文字」。
Dreamweaver 已重新設計,為您提供更直覺式且可自訂的介面、更容易存取的選單和面板,以及僅顯示您所需工具的關聯式可設定工具列。
這個新介面還提供從淺色到深色的四個對比度等級,因此閱讀和編輯程式碼行變得更輕鬆。
以下是新的用戶介面在變更前和變更後的快照。
這一版的 Dreamweaver 也重新設計了選單、工具列和工作區。請繼續閱讀,以深入了解這些變更。
Dreamweaver 介面已進行最佳化,加入了下列預設工作區:
這是最小的工作區,預設只包含可供開發人員撰寫網站程式碼的最基本面板,例如「檔案」和「片段」面板。
這個工作區包含您進行程式碼撰寫及設計工作時需要的所有面板,例如「檔案」、「CC 資料庫」、「CSS 設計工具」、「插入」、「DOM」、「資源」和「片段」面板。
選定工作區後,您可以新增或移除面板來進行自訂。如需有關自訂工作區的詳細資訊,請參閱「建立自訂工作區」。
以下簡要說明 Dreamweaver CC 2015 工作區和 Dreamweaver CC 2017 工作區的差異。
如需有關使用工作區的詳細資訊,請參閱「Dreamweaver 工作區」。
應用程式選單經改寫,移除了很少使用的選單項目,並將其他項目移至更直覺式的選單位置。
如需 Dreamweaver 應用程式選單變更的詳細說明,請參閱「重新設計的選單」。
您現在可以:
如需詳細資訊,請參閱「狀態列總覽」。
片段面板現在的新外觀更加簡潔,也經過重新設計,讓插入程式碼片段的程序更簡單。
下列影像標示了「片段」面板的主要變更:
在舊版 Dreamweaver 中,您必須使用鍵盤快速鍵才能將片段插入。
使用鍵盤快速鍵插入片段並非有效率的程序,原因如下:
在這一版的 Dreamweaver 中,您可以使用觸發鍵來插入程式碼片段。
觸發鍵是指派給程式碼片段的文字字串,非常容易使用。例如,對於建立 mailto 連結的程式碼片段,您可以輸入「mailto」並將此字串設定為觸發鍵。
指派觸發鍵之後,將游標置於文件中,輸入「mailto」,然後按 Tab。Dreamweaver 接著就會在文件中插入相關的程式碼片段。
如需有關「片段」面板的詳細資訊,請參閱「利用片段重複使用程式碼」。
「檔案」面板已重新設計,使用起來更簡單、更直覺。
簡單來說,「檔案」面板所顯示的清單只包含您電腦的本機檔案。當您使用「檔案」面板執行的工作越多時 (如:設定網站、設定與遠端伺服器的連線、啟動存回和取出功能),「檔案」面板就會出現越多選項。
如需有關「檔案」面板變更的詳細資訊,請參閱「重新設計的檔案面板」。
啟動 Dreamweaver 時,或是關閉所有 Dreamweaver 文件時,將會顯示新的「開始」工作區。您可以透過「開始」工作區,很方便地存取最近使用的檔案、資料庫和初學者範本。
如果您想要使用舊版的對話方塊,仍然可以按 Ctrl/Cmd + O 啟動「開啟」對話方塊,或按 Ctrl/Cmd + N 啟動「新增文件」對話方塊。
為了協助您快速掌握 Dreamweaver CC 2017 工作區的變更,您可使用上手體驗。快速完成自訂體驗後,就會有適合您使用的工作區及主題選項提供給您。
如需詳細資訊,請參閱「 Dreamweaver 工作區」。
全新、無干擾的「尋找和取代」工具列位於視窗的頂端,不會擋住畫面任何部分。
相較於舊版 Dreamweaver,尋找和取代一般來說更加快速、更有效率。現在當您在「尋找」面板中輸入搜尋字串時,Dreamweaver 會開始尋找,並在目前文件中將該字串的所有相符項目反白標示。
如需詳細資訊,請參閱「尋找和取代文字」。
對您儲存在 Creative Cloud 中的所有資源 (包括 Creative Cloud Libraries 中的檔案、使用 CC 桌面產品所建立的資源,以及行動專案),進行封存、復原、加入註解,並查看其版本記錄。
如果 Dreamweaver 因系統錯誤、電源中斷或其他問題而意外關閉,但正在編輯的檔案有尚未儲存的變更時,您還是可以復原這些變更。
如需詳細資訊,請參閱「自動回復檔案」。
登入您的帳戶