Dreamweaver CC 2014 版的最新更新能夠與 Extract 整合,協助您直接在 Dreamweaver 中根據 PSD 構圖建立行動裝置及桌上型電腦網站。新的「即時導引線」可讓您更輕鬆地準確放置和重新排列 HTML 元素,而增強的「即時檢視」編輯可讓您進行即時變更。

本文介紹這些新功能和一些其他增強功能,並提供連結以取得更多說明和學習資源。

Adobe Dreamweaver CC 2014.1.1 (2015 年 2 月)

新的歡迎畫面

您是初次使用 Dreamweaver 的用戶嗎?您已使用過 Dreamweaver 但想要提升專業知識嗎?您想要知道上一個版本與目前的版本之間有哪些變動嗎?不論您是初學者還是經驗豐富的用戶,或是想要評估最新版本的 Dreamweaver,現在都可以直接在歡迎畫面上取得所有必要的學習資源。

Dreamweaver CC 2014 版的 Dreamweaver 最新更新可讓您從歡迎畫面快速存取影片 (包括新功能)、實作教學課程、秘訣與技巧等等。

歡迎畫面
歡迎畫面

註解:

這個新的歡迎畫面僅供採用英文地區設定的用戶使用。如果是其他地區設定的用戶,則會顯示歡迎畫面以及 Dreamweaver CC 2014.1 的新功能逐步解說。

Extract 面板的增強功能

現在當您從 Extract 面板拖曳影像時,即時導引線和元素快速檢視圖示會出現在即時檢視中。這些視覺輔助可協助您快速而精確地將影像放置到所要的位置。

Extract 面板
Extract 面板

即時檢視編輯的增強功能

拖放元素

您現在可以拖曳關聯的標籤名稱來移動即時檢視中的元素。當您將滑鼠停留在標籤名稱上,將會出現手形游標,表示可以拖曳該元素。透過即時導引線的協助,讓您清楚看到元素將被放到的位置,讓您輕鬆拖放元素。

圈選範圍

您現在只要在標籤內的任何地方按一下並拖曳 (圈選範圍),就可以選取標籤內的文字、影像或其他元素。圈選範圍可幫助您輕鬆地選取標籤中的多個元素。

註解:

即時檢視中的圈選範圍只支援受到瀏覽器支援的作業。

元素顯示增強功能

「元素顯示」現在會顯示提示文字「Class/ID」,以清楚指示可以指定的類別或 ID。

此外,當您按一下「+」時,也會儲存在元素顯示中所做的變更。您也可以按 Enter 或 Return 鍵儲存變更,就像在舊版的 Dreamweaver 一樣。

新的程式碼檢視主題

我們在程式碼檢視中新增了十個新的顏色主題:

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

如需有關程式碼檢視主題的詳細資訊,請參閱「設定程式碼檢視的顏色主題」。

CSS 設計工具增強功能

這項更新包含 CSS 設計工具用戶介面的一些變更,以及「顯示集合」核取方塊預設設定的變更。

在啟動時,預設會選取「顯示集合」核取方塊,而且對這個選項所做的變更將會在不同的 Dreamweaver 工作階段中持續。例如,如果您取消選取這個選項,下一個 Dreamweaver 工作階段會保留設定,而且會將此選項顯示為取消選取的狀態。

以下是用戶介面中的變更:

  • 新增屬性時,CSS 設計工具面板會捲動:當您在「屬性」區段中按一下「+」時,此面板會捲動,好讓「增加屬性」列差不多位在「屬性」面板的中央。如果「屬性」區段太小,此面板會捲動,好讓「增加屬性」列顯示在此區段的底部。
  • 背景反白標示:當焦點位在「新增屬性」文字方塊上時,此列會反白標示在灰色背景中。
  • 「+」和「-」按鈕的位置:CSS 設計工具面板中每個區段 (「來源」、「選取器」、「媒體查詢」和「屬性」) 上的「+」和「-」按鈕位置,現在已經從最右邊移到左邊,好讓用戶能夠清楚看到。
  • 「自訂」類別現在稱為「更多」。

即時檢視的遠端除錯

您現在可以使用 Google Chrome DevTools,對即時檢視中開啟的 Dreamweaver 文件進行遠端除錯。在 Google Chrome 中,您可以使用連接埠 5471,您可執行下列步驟來啟動:

  1. 執行下列命令,啟動 Dreamweaver:

    • Windows<installation_path> -enableRemoteDebugging
    • Macopen <installation_path> --args -enableRemoteDebugging

    注意:在 args 之前要輸入兩個連字號

  2. 在指出連接埠 5471 已啟動可進行除錯的對話框中,按一下「確定」。

    Dreamweaver 隨即啟動。

    按一下對話框中的「確定」以啟動 Dreamweaver
    按一下對話框中的「確定」以啟動 Dreamweaver

  3. 在即時檢視中開啟您想要除錯的文件。

  4. 若要開始除錯,請開啟 Google Chrome 並瀏覽到 localhost:5471。在 Dreamweaver 中開啟的所有文件連結清單隨即出現。

    注意:由於新的歡迎畫面與 Extract 面板使用 Chromium Embedded Framework (CEF),您也會看到與這些功能相關的項目。

    您現在可以使用 Google Chrome DevTools 對所需的文件進行除錯。

  5. 若要停止除錯並在標準模式中開啟 Dreamweaver,請結束 Dreamweaver 並重新啟動。

其他增強功能

重設偏好設定工作流程中的變更

現在,當您使用鍵盤快速鍵重設偏好設定時,Dreamweaver 會在「Adobe Dreamweaver CC 2014.1 Backups」資料夾中建立偏好設定的備份。這個資料夾會自動建立在與 Windows 和 Mac 上原始 Dreamweaver 偏好設定資料夾相同的位置。

備份資料夾的完整路徑會顯示在重設偏好設定對話框中。

重設偏好設定和設定
重設偏好設定和設定

動態文件檢視模式的變更

類似 PHP、CFM 和 ASP 等動態文件預設不會再以「程式碼檢視」開啟,而是會以上一次關閉文件或是上一份位在焦點的文件所使用的相同模式 (程式碼/即時/分割) 開啟。

Adobe Dreamweaver CC 2014.1 (2014 年 10 月)

Dreamweaver 中的 Extract

Extract 與 Dreamweaver 的整合可讓網頁設計人員和開發人員直接在程式碼編寫環境中套用設計資訊並擷取網頁最佳化的資源。Extract 提供了從 PSD 構圖擷取樣式資訊和資源所需的全套完整解決方案,減少必須在 Photoshop 和 Dreamweaver 之間來回切換的情況。

使用 Dreamweaver 中的 Extract 面板,您可以擷取 CSS、影像、字體、顏色、漸層、度量等項目,直接放入網頁中。除了這些 Extract 的主要功能之外,Dreamweaver 也提供下列的獨特功能:

  • 直接存取 Creative Cloud 上的 PSD 檔案以及協作檔案夾中與您共用的 PSD 檔案
  • 內容程式碼提示,可輕鬆地在您的 CSS 中定義字體、顏色和漸層
  • 拖放支援,可從 PSD 圖層建立影像標籤
  • 直接在「即時檢視」中貼上樣式 (例如 CSS 設計工具和元素顯示)

Dreamweaver 中的預設工作區 (名為 Extract) 會在左側顯示 Extract 面板,讓您可以快速上手。初次啟動 Dreamweaver 時,Extract 面板會顯示簡單的教學課程,協助您了解 Extract 工作流程。按一下「開始執行」即可開始使用 Extract。

Extract 面板的預設工作區
Extract 面板

如需 Dreamweaver 之 Extract 工作流程的詳細資訊,請參閱「Dreamweaver 與 Extract 整合」。

64 位元架構

Dreamweaver 的 64 位元版本現在已推出,支援 32 位元版本所有的功能,完全一樣。新加入這個版本後,您可以隨即從 Adobe Creative Cloud 應用程式下載下列 Dreamweaver 組建:

OS 預設安裝位置 應用程式偏好設定資料夾
Windows 32 位元 C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64 位元 C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64 位元 /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

常見問答集

  • 64 位元應用程式是否會在 32 位元版本 Windows 上執行?-
  • 是否可以將 32 位元和 64 位元應用程式安裝在同一台 Windows 電腦上?-
  • 如何檢查我的系統是在執行 32 還是 64 位元版本的 Dreamweaver?
    • Windows:啟動 Dreamweaver。開啟「工作管理員」,並搜尋 Dreamweaver 處理程序。如果啟動的 Dreamweaver 組建為 64 位元,則處理程序的名稱將會是「Dreamweaver.exe」。如果啟動的組建為 32 位元,則處理程序名稱會是「Dreamweaver.exe *32」。
    • Mac:開啟「活動監視器」,並轉到上方選取「顯示方式 > 直欄 > 種類」。搜尋「活動監視器」中的 Dreamweaver 並注意「種類」欄。如果 Dreamweaver 為 64 位元,則「種類」欄會顯示「64 位元」。

安裝 Dreamweaver 64 位元版本

  1. 確認您的電腦正在執行 64 位元作業系統:

    若要檢查您的電腦是否為 64 位元,請依照下列文章所述的步驟進行:

  2. 從 Creative Cloud 下載 Dreamweaver 64 位元版本,並安裝該組建。

即時檢視增強功能

即時導引線

「即時導引線」是「即時檢視」中的視覺回應,這些回應會在下列情況中指示您可以插入元素的可能位置:

  • 從「插入」面板進行拖曳時
  • 從「資源」面板進行拖曳時
  • 在「即時檢視」中拖曳 (移動) 元素時。

註解:

「流變格線」文件不支援「即時檢視」。

當您將元素拖曳到頁面中不同元素上方停留時,「即時導引線」會在滑鼠置放元素之前出現。導引線可能出現於滑鼠停留所在元素的上、下、左或右方。

  • 上方和下方 - 當滑鼠停留在除了內嵌標籤以外所有類型的元素/標籤上方時,出現於此位置。當您將滑鼠停留在元素前面 (上面) 50% 的部分時,導引線會出現於停留所在元素的上方。當您將滑鼠停留在元素後面 (下面) 50% 的部分時,導引線會出現於停留所在元素的下方。
位於停留所在元素上方和下方的即時導引線
位於停留所在元素上方和下方的即時導引線

  • 左方和右方 - 當滑鼠停留在內嵌標籤 (例如 <a>、<span>) 上方或停留在已設定「float 屬性」的標籤上方時,出現於此位置。
位於停留所在元素右方和左方的即時導引線
位於停留所在元素右方和左方的即時導引線

準確插入結構元素

您可以搭配「即時導引線」使用「元素快速檢視」,更準確地將 HTML 元素插入文件結構中。

當您暫停片刻,然後再置放所拖曳元素時,「元素快速檢視」(</>) 會出現。將滑鼠停留在這個圖示上方時,「元素快速檢視」會開啟,您可以將所拖曳元素放到「元素快速檢視」內。

元素快速檢視圖示
有助於準確插入的元素快速檢視圖示

即時檢視中的快顯選單

您現在可以使用以滑鼠右鍵按出的快顯選單,剪下、複製、貼上及刪除「即時檢視」中的元素。你也可以使用即時檢視中的快顯選單,複製元素或者選取上層或下層標籤。

註解:

您也可以在「即時檢視」中使用鍵盤快速鍵 (例如在 Windows 上使用 Ctrl+x、Ctrl+c、Ctrl+v、Ctrl+d 和 Delete 鍵)。

首先,選取「即時檢視」中的元素,使「元素顯示」出現。然後在標籤區域內按一下右鍵,以顯示上方快顯選單選項。選項可以在標籤階層運作。

元素顯示的變更

現在,您不但可以使用「元素顯示」,將選取器套用至元素,還可以在所需的 CSS 來源中建立選取器並指派媒體查詢。當您輸入不存在任何樣式表中的選取器並按下 Enter 時,「元素顯示」就會提供選擇 CSS 來源和媒體查詢的選項。

元素顯示中的 CSS 來源和媒體查詢選項
元素顯示中的 CSS 來源和媒體查詢選項

如果您不想要選擇 CSS 來源或媒體查詢,請按下 Esc 關閉選項。

現在,以滑鼠右鍵按一下已套用的選取器,即可移至對應的程式碼 (「前往程式碼」選項) 或貼上任何已複製的樣式 (「貼上樣式」選項)。

元素顯示中的前往程式碼和貼上樣式選項
元素顯示中的前往程式碼和貼上樣式選項

註解:

如果在多個媒體查詢中加入相同的選取器,「前往程式碼」選項會顯示子選項。如果複製的選取器為虛擬或複合選取器,「貼上樣式」選項會顯示子選項。

在即時檢視中移動元素

Dreamweaver 目前支援移動「即時檢視」中的元素 (標籤階層)。您可以選取「即時檢視」中的元素,並在任何其他位置上拖放該元素。

  1. 按一下您要移動的元素,並在「元素顯示」(元素周圍的藍色方塊) 出現後拖曳該元素。「拖曳」完成初始化時,滑鼠游標會變更,表示元素可以開始移動。

  2. 參考元素 (您要依據其位置放置所拖曳元素的相對元素) 會以藍色邊框反白標示。「即時導引線」(綠色) 會出現以指示相對於參考元素的可能置放位置。

註解:

只有靜態元素才能在「即時檢視」中移動。您無法移動動態內容標籤,例如 PHP。

當您暫停片刻,然後再置放所拖曳元素時,「元素快速檢視」(</>) 會出現。將滑鼠停留在這個圖示上方時,「元素快速檢視」會開啟,您可以將所拖曳元素放到「元素快速檢視」內。

即時檢視中的鍵盤導覽

Dreamweaver 現在支援使用鍵盤進行頁面元素導覽,協助熱衷於鍵盤操作的用戶並加速網頁設計程序。您可以使用:

  • 向上鍵和向下鍵瀏覽所有的頁面元素。「即時檢視」中的鍵盤導覽有助於輕鬆存取巢狀和圍繞的元素。
  • Tab 鍵周遊「元素顯示」中的選取器。

如需詳細資訊,請參閱「即時檢視中的鍵盤導覽」。

即時檢視中的快速標籤編輯器

現在,當您在「即時檢視」中按下 Ctrl+T (Windows) 或 Cmd+T (Mac) 時,就會針對選取的元素顯示「快速標籤編輯器」。「快速標籤編輯器」有三種狀態:「編輯標籤」、「用標籤圍繞」和「插入 HTML」。您可以使用 Ctrl/Cmd+T,在這些狀態之間切換。

即時檢視中的快速標籤編輯器
即時檢視中的快速標籤編輯器

Dreamweaver 工作區的變更

文件工具列的變更

「文件」工具列經過修改,變得簡單好用。

  • 「設計檢視」與「即時檢視」選項已合併成單一控制項 (下拉式)。
Dreamweaver CC (2014 年 10 月) 的設計與即時檢視選項
最新更新的設計與即時檢視選項 - Dreamweaver CC (2014 年 10 月)

舊版中文件工具列的設計與即時檢視按鈕
舊版中文件工具列的設計與即時檢視按鈕

  • 「文件標題」欄位現在已移到「屬性檢視窗」。
Dreamweaver CC (2014 年 10 月) 的文件工具列
最新更新的文件工具列 - Dreamweaver CC (2014 年 10 月)

Dreamweaver CC (2014 年 10 月) 中文件標題欄位移到屬性檢視窗
在最新更新中文件標題欄位移到屬性檢視窗 - Dreamweaver CC (2014 年 10 月)

舊版中文件工具列的標題欄位
舊版中文件工具列的標題欄位

  • 「檢查」與「即時程式碼」按鈕已由圖示所取代。
Dreamweaver CC (2014 年 10 月) 的即時程式碼與檢查圖示
最新更新的即時程式碼與檢查圖示 - Dreamweaver CC (2014 年 10 月)

舊版的即時程式碼與檢查圖示
舊版的即時程式碼與檢查圖示

  • 「上一頁」、「下一頁」、「重新整理」選項與「網址列」併入同一個群組,置於「文件」工具列中央。
Dreamweaver CC (2014 年 10 月) 的「網址列」與「上一頁」、「下一頁」及「重新整理」選項
最新更新的網址列與上一頁、下一頁及重新整理選項 - Dreamweaver CC (2014 年 10 月)

舊版的網址列與上一頁、下一頁及重新整理選項
舊版的網址列與上一頁、下一頁及重新整理選項

  • 「在瀏覽器中預覽/除錯」、「即時檢視選項」與「檔案管理」圖示已群組在一起,靠齊「文件」工具列的右側。
Dreamweaver CC (2014 年 10 月) 的「在瀏覽器中預覽/除錯」、「即時檢視選項」與「檔案管理」圖示
最新更新的在瀏覽器中預覽/除錯、即時檢視選項與檔案管理圖示 - Dreamweaver CC (2014 年 10 月)

舊版的在瀏覽器中預覽/除錯、即時檢視選項與檔案管理圖示
舊版的在瀏覽器中預覽/除錯、即時檢視選項與檔案管理圖示

預設工作區的變更

可搭配 Dreamweaver 使用的現成工作區已變更為下列工作區:

  • 程式碼
  • 設計
  • Extract
工作區
工作區

預設工作區現在是 Extract。這個工作區會在左側顯示 Extract 面板,而在右側顯示網頁。初次啟動 Dreamweaver 時,Extract 面板會顯示簡單的教學課程,協助您了解 Extract 工作流程。若要開始使用 Extract,請按一下「開始執行」。

Extract 工作區
Extract 工作區

HTML 文件的預設檢視現在是「分割檢視」(水平分割以顯示「即時檢視」和「程式碼檢視」)。動態檔案 (例如下列檔案) 預設會在完整「程式碼檢視」中開啟。當您分割檢視時,這些文件會顯示在「設計」和「程式碼檢視」中。

  • PHP
  • PHP 範本 (Example.dwt.php)
  • ASP
  • ASP 範本 (Example.dwt.asp)
  • JSP
  • JSP 範本 (Example.dwt.jsp)
  • CFM
  • CFM 範本 (Example.dwt.cfm)
顯示即時檢視和程式碼檢視之 HTML 文件的預設檢視
顯示即時檢視和程式碼檢視之 HTML 文件的預設檢視

顯示完整程式碼檢視之動態文件的預設檢視
顯示完整程式碼檢視之動態文件的預設檢視

秘訣:若要切換到設計檢視,請按一下「即時」旁邊的下拉式清單,然後按一下「設計」。若要從水平分割變更為垂直分割,請選取「檢視 > 垂直分割」。「即時/設計檢視」現在會顯示在左側。若要讓「即時/設計檢視」顯示在右側,請取消選取「檢視 > 即時檢視在左方」或「檢視 > 設計檢視在左方」。

Dreamweaver 現在會記住您針對 HTML 文件選擇的「即時檢視」狀態,然後將相同的檢視套用至之後開啟的所有 HTML 文件。例如,假設 HTML1 是您第一次開啟的文件。文件檢視會分割為「程式碼檢視」和「即時檢視」。假設您將此文件的檢視變更為完整「即時檢視」。然後,您所開啟的下一份文件 (例如 HTML2) 就會以完整「即時檢視」顯示。

流變格線文件的變更

支援即時檢視編輯

舊版 Dreamweaver CC 在「即時檢視」中引進了新的編輯功能。在這個版本中,「即時檢視」的這些編輯功能也同樣可供流變格線文件使用。由於可立即在同一檢視中編輯並預覽變更,因此「即時檢視」中的編輯功能會加速您開發流變網頁的工作。

下列功能會協助您在「即時檢視」中編輯流變格線文件:

您現在也可以使用 元素快速檢視,將流變格線文件的 HTML DOM 結構視覺化。

注意:流變格線版面的元素快速檢視不能讓您複製、貼上、重複或重新排列 HTML 元素。

檢視和編輯流變格線文件所需的用戶介面經過變更,已將「即時檢視」的編輯功能納入其中。現在選取流變格線文件中的元素時,「元素顯示」會和其他控制項 (例如「隱藏元素」和「啟動新列」) 一起出現。

舊版的流變格線選項
舊版的流變格線選項

Dreamweaver CC (2014 年 10 月) 的「流變格線」選項與「元素顯示」
最新更新的流變格線選項與元素顯示 - Dreamweaver CC (2014 年 10 月)


此外,流變格線文件現在還會直接在「即時檢視」中開啟。您已無法在「設計檢視」中檢視或編輯流變格線文件。

Dreamweaver CC (2014 年 10 月) 的文件工具列
最新更新的文件工具列 - Dreamweaver CC (2014 年 10 月)

舊版中流變格線文件的文件工具列
舊版中流變格線文件的文件工具列

如需流變格線文件的詳細資訊,請參閱「使用流變格線版面的互動設計」。

插入工作流程的變更

流變格線文件的「插入」對話框現在包含「定位小幫手」。定位小幫手可讓您調整所插入元素在焦點所在元素 (位於「即時檢視」中) 之前、之後或以巢狀方式置於其中的位置。如需有關插入流變格線元素的詳細資訊,請參閱「插入流變格線元素」。

管理隱藏元素選項的變更

「管理隱藏的元素」選項 (文件工具列中的眼睛按鈕) 已移到流變格線文件中的快顯選單。


若要管理隱藏的元素,請在流變格線上按一下滑鼠右鍵,並選取「管理隱藏的元素」以查看隱藏元素。若要隱藏這些元素,可以按一下 HUD 中的眼睛圖示。

Dreamweaver CC (2014 年 10 月) 中滑鼠右鍵選單的「管理隱藏的元素」選項
最新更新中滑鼠右鍵選單的管理隱藏的元素選項 - Dreamweaver CC (2014 年 10 月)

舊版中用於管理隱藏元素的「眼睛」圖示
舊版中用於管理隱藏元素的「眼睛」圖示

程式碼檢視立即可用的顏色主題

您現在可以選擇下列其中一個隨時可供「程式碼檢視」使用的顏色主題:

  • 傳統 (預設值;與舊版 Dreamweaver 相同)
  • Raven
  • Slate
  • Blanche
  • Geneva
傳統、Raven、Slate、Blanche 和 Geneva 主題
傳統、Raven、Slate、Blanche 和 Geneva 主題

使用程式碼色彩標示偏好設定可以指定「程式碼檢視」的主題。您可以為背景、前景和隱藏字元選擇不同的色彩配置來自訂主題。

對於每個列出的文件類型,您可以為不同類別的標籤及程式碼元素 (例如表單相關標籤或 JavaScript 識別名稱) 自訂顏色。例如,將 Raven 主題套用至所有文件類型之後,就可以選擇只有 HTML 文件中的表單相關標籤使用藍色。

主題中的所有設定都會在您按一下「套用」時儲存,而且自訂主題可以跨 Dreamweaver 工作階段使用。

註解:

您可以使用「偏好設定」中的「同步設定」選項,在 Dreamweaver 實體之間讓自訂程式碼主題保持同步。如需詳細資訊,請參閱「將 Dreamweaver 設定與 Creative Cloud 同步」。

如需詳細資訊,請參閱「設定程式碼檢視的顏色主題」。

程式碼檢視與即時檢視同步

「程式碼檢視與即時檢視同步」可讓您立即預覽您在「即時檢視」對程式碼所做的變更。與舊版 Dreamweaver 不同的是,您不必按一下「重新整理」,就可以在「即時檢視」中預覽變更。

您可以在下列工作流程中看到「即時程式碼與即時檢視同步」的實際運作 (當焦點放在「程式碼檢視」時):

  • 文字作業,例如剪下/複製/貼上/刪除、還原/重做。
  • 當焦點放在「程式碼檢視」時,移動「元素快速檢視」中的元素。
  • 在「程式碼檢視」中輸入文字。
  • 「元素快速檢視」中的「刪除/重製/複製/貼上」動作 (按滑鼠右鍵選項)。
  • 「屬性檢視窗」中的作業,例如變更文字格式 - 粗體/斜體、變更類別、ID、格式、頁面屬性以及套用字體。
  • 使用「程式碼檢視」中的程式碼提示,新增/刪除類別或 ID。
  • 將「插入」面板中的元素 (例如 Div、Image)、超連結及結構元素插入「程式碼檢視」。
  • 在 <style> 標籤中新增/編輯 CSS 樣式。
  • 在 CSS 檔中編輯程式碼。

註解:

對 JavaScript 程式碼進行任何變更時,頁面必須完全重新整理或重新載入,才能在「即時檢視」中反映變更。

即時檢視中的資源面板

「即時檢視」現在已提供「資源」面板 (Windows > 資源)。您可以使用「資源」面板輕鬆地管理下列工作:

  • 從預覽窗格或「資源」面板的清單檢視拖曳或插入資源 (影像、URL、顏色或媒體)。

注意:您只能在 Mac 上從預覽窗格拖曳資源。

  • 複製顏色值,並將該值貼入 Dreamweaver 的任何文字欄位 (例如「CSS 設計工具」屬性、「程式碼檢視」、檢色器) 中,甚至貼到其他應用程式 (例如「記事本」)。

註解:

 

  • 因為「Script」、「範本」和「圖庫」類別較常用在「程式碼檢視」中,「即時檢視」的「資源」面板已將這些類別隱藏。
  • 在這一版的 Dreamweaver CC 中,「Flash」和「影片」類別已合併成名為「媒體」的單一類別。
         

即時檢視中的資源面板
即時檢視中的資源面板

設計與程式碼檢視中的資源面板
設計與程式碼檢視中的資源面板


如需有關如何使用「資源」面板的詳細指示,請參閱「使用資源」。

新的初學者範本

Dreamweaver 現在包含新的互動式初學者範本,協助您更快速地著手建立互動式網站。您可以從「新增文件」對話框選擇下列其中一個範本 (檔案 > 新增 > 初學者範本)。

  • 關於網頁
  • 部落格文章
  • 電子商務
  • 電子郵件
  • 文件夾
新的互動式初學者範本
新的互動式初學者範本

當您選擇範本並按一下「新增文件」對話框中的「建立」時,Dreamweaver 會提示您儲存新文件。只要儲存文件,就會建立範本的複本,您可以在日後根據自己的需求進行自訂。

啟動時重設偏好設定

有時必須刪除包含所有自訂設定的偏好設定資料夾,才能對 Dreamweaver 問題進行疑難排解。在此版本以前,您需要手動瀏覽到電腦上的偏好設定資料夾,然後再刪除該資料夾。這次發行的版本則提供您單鍵即可使用對話框刪除偏好設定的選項:

重設偏好設定
重設偏好設定

您可以在啟動 Dreamweaver 的同時按住下列鍵盤快速鍵,開啟「重設偏好設定」對話框:

  • (Win) Windows 鍵+Ctrl+Shift
  • (Mac) Cmd+Option+Shift

註解:

請審慎使用「重設偏好設定」選項。當您重設偏好設定和設定時,工作區、鍵盤快速鍵、擴充功能和應用程式偏好設定中的所有自訂設定都將遺失。

在 Mac 上,請在啟動 Dreamweaver (按一下固定槽中的 Dreamweaver 圖示) 的同時按住 Cmd+Option+Shift。

在 Windows 上,請執行下列步驟:

  1. 移至安裝檔案夾、找出 Dreamweaver.exe,然後按一下該檔案。

  2. 按住 Windows 鍵+Ctrl+Shift 鍵,然後按兩下 Dreamweaver.exe。

即使顯示「用戶帳戶控制」(UAC) 對話方塊,也務必要一直按住上述快速鍵。

其他增強功能

同步設定的變更

您現在可以使用「偏好設定」對話框,從舊版 Dreamweaver 匯入儲存在 Creative Cloud 上的設定。從雲端匯入的設定會覆寫所有本機設定,並在下次啟動 Dreamweaver 時套用。

從舊版 Dreamweaver 匯入設定
從舊版 Dreamweaver 匯入設定

同時,從這個版本起,除了在舊版中同步的設定以外,下列設定也會與 Creative Cloud 保持同步:

CSS 設計工具變更

這一版的 Dreamweaver 包含許多改進項目,以提升 CSS 設計工具的用戶體驗。CSS 設計工具面板也包含上手體驗,協助您快速開始使用工作流程。

歡迎畫面的變更

「歡迎」畫面上的「網站範本」選項現在已由「初學者範本」所取代。您可以在「新增文件」對話框 (「檔案 > 新增」) 中存取「網站範本」。

jQuery 版本更新

Dreamweaver 現在包含下列更新的 jQuery 資料庫:

  • jQuery - 1.8.3 更新為 jQuery - 1.11.1
  • jQuery UI - 1.9.2 更新為 jQuery UI - 1.10.4

jQuery 起始頁面已經移除。

PhoneGap 更新

Dreamweaver CC 2014 版的最新更新 (2014 年 10 月) 和更新版本不支援 Dreamweaver 與 PhoneGap Build 直接整合以封裝應用程式的功能。

不過,您可以直接存取線上 PhoneGap Build 服務並且使用最新功能更新,將網路應用程式封裝為原生行動裝置應用程式。如需詳細資訊,請參閱「使用 PhoneGap Build 搭配 Dreamweaver CC 2014 版的最新更新」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策