7 月份發布的 2015 版 Dreamweaver CC 補充程式,能讓 Dreamweaver 充分利用 Adobe Creative Cloud 桌面應用程式中指定的 Proxy 伺服器設定。如需詳細資訊,請參閱指定 Proxy 伺服器設定。
深入了解在多個裝置上預覽網頁、Bootstrap 整合、「程式碼」檢視的改良,以及其他 Dreamweaver 增強功能。
2015 版的 Dreamweaver CC 著重在多方互動設計、編輯程式碼功能改良、在裝置上預覽多個網頁,以及從 Photoshop 構圖整批擷取有多種解析度的網頁最佳化影像。與 Bootstrap 架構整合可協助您建置行動優先、多方互動網站。「視覺媒體查詢」進一步透過將您的設計視覺化並在不同的中斷點進行修改的方式,補強多方互動網頁設計使用體驗。
這個版本也針對「即時」檢視和 CSS 設計工具的編輯功能提供許多增強功能。本文將介紹這些新功能和增強功能,並提供連結以取得更多說明和學習資源。
7 月份發布的 2015 版 Dreamweaver CC 補充程式,能讓 Dreamweaver 充分利用 Adobe Creative Cloud 桌面應用程式中指定的 Proxy 伺服器設定。如需詳細資訊,請參閱指定 Proxy 伺服器設定。
Dreamweaver 現在可以讓您同時在多個裝置上測試實際執行可用的網頁。您可以看到您的網頁如何依不同的格式係數重新排列,也可以在您的頁面上測試互動功能。所有這些功能都不必安裝任何行動應用程式,也無需將裝置實際連接至桌面即可執行!只要以您的裝置掃描自動產生的 QR 碼,再於裝置上預覽您的網頁。
在桌面上觸發「即時檢視」時,它會反映在所有連接的裝置上,並協助您檢視各種元素,並視需求反覆調校設計。
如需詳細資訊,請參閱在多部裝置上預覽與檢查網頁。
「視覺媒體查詢」列是存在於頁面中之媒體查詢的視覺化表示。這些查詢列可幫助您在不同的中斷點將網頁視覺化,並幫助您以視覺化方式呈現網頁的不同元件如何在不同的檢視區中重排。當您在不同檢視區中檢視您的頁面時,您可以對某個檢視區進行特有的設計變更,而不會影響其他檢視區中的頁面設計。
視覺媒體查詢是由三個查詢列 (水平列) 所組成,每一列都代表媒體查詢的一個類別:
如需詳細資訊,請參閱視覺媒體查詢。
在這個新版本的 Dreamweaver 中,您現在可以使用 linting 排除常見的程式碼錯誤。Linting 是分析程式碼以標幟潛在程式碼錯誤或可疑使用情況之程序。Dreamweaver 可以在檔案載入、儲存或編輯時 lint HTML、CSS 和 JavaScript 檔案。然後在新的「輸出」面板中列出錯誤和警告。
如需詳細資訊,請參閱 Lint 程式碼。
您是在 Dreamweaver 中輸入數行程式碼、勤奮的開發人員嗎?使用 Emmet 縮寫進行編碼,為您節省時間。這些縮寫容易記住及輸入,當您按下 Tab 鍵時會在「程式碼」檢視中展開成完整程式碼。
如需詳細資訊,請參閱使用 Emmet 插入程式碼。
如果您正在「分割」檢視中工作,您可以立即在「即時」檢視或「設計」檢視中看到影像或顏色的任何變更。但是,如果您偏好只在「程式碼」檢視中工作,則影像只會以檔案名稱形式出現,這在大多數情況下無法讓您直覺地工作。顏色也是一樣 (除非使用預先定義的顏色),只會以一組不易理解的數字形式出現。在是在這一版的 Dreamweaver 中,您可以直接在「程式碼」檢視中快速預覽影像和顏色。這項功能有助於您以視覺方式將影像檔案名稱和顏色格式與影像和顏色所代表的實際面貌連結在一起。因此,您可以更快地做出設計決策,並大幅縮減開發時間。
如需詳細資訊,請參閱在程式碼檢視中預覽影像和顏色。
「程式碼」檢視也會顯示錯誤預覽。發生錯誤之程式碼的行號會以紅色標示。當您將滑鼠停留在行號上方時,便會顯示錯誤的簡短描述。
注意:只會顯示該行中的第一個錯誤。如果該行只包含警告,則會顯示警告的描述。如果該行包含警告和錯誤,則只會顯示錯誤描述。
程式碼片段是專案中可以重複使用的程式碼部分。這個版本的 Dreamweaver 提供新增及更新的程式碼片段:
有關使用程式碼片段的詳細資訊,請參閱使用程式碼片段。
此外,您現在可以使用雲端同步功能,讓程式碼片段能夠在不同的 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 檔案。
您可以在「即時」檢視中輕鬆快速地使用下列任一個或多個選項的組合來編輯表格:
「即時」檢視中的編輯功能現在因為「即時」檢視中可提供下列選單而變得更好:
您現在可以在「即時」檢視中使用「插入」面板,直接插入 jQuery Widget。從插入面板上將所需的元素拖曳至「即時」檢視,並按住滑鼠使用下列其中一項功能插入:
上述功能會根據您選擇要插入的元素來顯示。
如需詳細資訊,請參閱直接在即時檢視中插入元素。
「元素快速檢視」現在已變更為 DOM 面板 (「視窗 > DOM」)。DOM 面板可提供「元素快速檢視」所提供的所有功能及更多功能。此面板可用於所有工作區並持續保留,這表示您可以開啟兩份文件,同時開啟並存取它們的 DOM 面板。
DOM 面板可供您:
如需使用 DOM 面板與使用面板編輯 HTML 結構的詳細資訊,請參閱 DOM 面板。
所有的 SVG 元素和屬性的程式碼提示目前在 HTML 文件中也可支援。您現在可以使用這些程式碼提示,在 HTML 文件的「程式碼」檢視中加入 SVG 元素,就像您在 SVG 文件中加入一樣。
Dreamweaver 團隊從這個版本開始,會提供特定功能的預覽以收集客戶的意見。這些功能將會根據意見進一步進行改善,並將其提供做為 Dreamweaver 的核心功能。您可以從「偏好設定」對話方塊的「技術預視」類別來存取這類功能。
此版本中的預覽功能是程式碼反白標示功能。這項功能會在程式碼檢視中反白標示任何選定文字的所有出現位置。
若要使用此功能,請執行下列步驟:
移至「偏好設定 > 技術預視」。
啟用程式碼反白標示功能。然後,按一下「套用」和「關閉」以關閉「偏好設定」對話方塊。
開啟您要使用程式碼反白標示功能的文件。您可以在任何文件類型中使用程式碼反白標示功能,例如 HTML、JS、CSS 及 LESS。
在「程式碼」檢視中,按兩下必須反白標示的文字 - 標籤、單字或片語。
選取文字的所有項目在「程式碼」檢視中均會反白標示。
您可以使用下列鍵盤快速鍵在反白標示的文字之間瀏覽:
在這個 Dreamweaver 版本中,您可以產生自訂預覽彈出式選單,當您在「程式碼」檢視中將滑鼠停留在程式碼上方時,就會顯示這個選單。若要實作自訂預覽,您可以使用新的 API showPreview 以及現有的 mm:browsercontrol API。例如,您可以針對以下用途使用這些 API:當您將滑鼠停留在 JavaScript 函數名稱的上方時,即可顯示該函數的所有參數預覽。
如需詳細資訊,請參閱 Dreamweaver API 參照:程式碼檢視功能。
在舊版的 Dreamweaver 中,您必須在「程式碼」檢視中選取程式碼區塊,然後加以收合。在這個版本及更新的版本中,您只要停留在行號上方並按一下出現的三角形,就可以收合程式碼區塊。
程式碼摺疊 (收合) 可以在 HTML、CSS、LESS、Sass、SCSS、JS、PHP、XML 及 SVG 檔案中使用,而且會根據標籤區塊。
複製、剪下、貼上及拖放動作會保留程式碼摺疊狀態。例如,當您複製收合的程式碼區塊時,貼上動作會將複製的文字貼上成為收合區塊。
在 HTML 檔案中,不同於先前的程式碼收合功能,收合的內容現在會包含結束標籤,並以不同的方式呈現。此外,收合的程式碼區塊中顯示的字元數現在已增加。如此可協助您預覽初始屬性 (如果有的話)。
如需詳細資訊,請參閱收合程式碼。
裝置不只會因大小而有所不同,也會因解析度而有所差異。您的多方互動網頁設計計劃必須考慮適當呈現在裝置上之影像的多個解析度版本。不過,要在您的專案中為所有影像建立這麼多不同的解析度版本可能是一件吃力的工作。
在 Dreamweaver 中的 Extract 可以大幅減輕這項工作負擔。在 2015 版的 Dreamweaver 中從您的 Photoshop 構圖中擷取影像時,您也可以選擇擷取該影像的不同解析度版本。在擷取期間,Photoshop 中的影像會依不同、預先定義的解析度自動縮放。
然後,您可以使用 JavaScript 或媒體查詢呼叫這些影像,根據要用來檢視這些影像的裝置來顯示它們。例如,若為高密度視網膜 (Retina) 顯示器,您可以使用 2X 版本的影像。
如需詳細資訊,請參閱從 PSD 檔案擷取影像。
在 Extract 面板中,除了像素之外,您現在也可以使用 % 值檢視影像的寬度和高度。您也可以使用 % 檢視度量。
當您按一下 Extract 面板中的資源時,所出現的彈出式視窗會提供選項讓您在像素和 % 之間轉換使用。當您在資源之間檢視度量時,會保留您在此彈出式視窗中選取的單位。
現在,您可以在「即時」檢視中將元素插入其他元素內。當您從「插入」面板、「資源」面板或在「即時」檢視內拖曳元素,以及將滑鼠停留在頁面上的不同元素上時,您會注意到巢狀元素 (連同在導引線之前和之後的元素) 的視覺回應效果。
您現在只需要在元素顯示中按一下選取器的名稱,即可進行編輯。您可以按一下頁面上的任何地方來認同變更。
CSS 設計工具現在提供兩種不同的模式來檢視及編輯 CSS 屬性:
如果您想要建立 CSS、媒體查詢或選取器,使用這個模式將可獲得最佳效果。
Dreamweaver 現在會在 CSS 設計工具中顯示程式碼提示 (類似於「程式碼」檢視),以供設定新的屬性。
CSS 設計工具面板中的媒體查詢現在會用顏色編碼來符合視覺媒體查詢。
這個版本中的測試伺服器工作流程改良功能,主要是要讓在「即時」檢視中對含伺服器端程式碼之文件進行編輯變得簡單而順暢。
不像舊版的 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 網站上有關這項變更的正式公告。
登入您的帳戶