全新 2014 版的 Dreamweaver CC 包含「即時檢視」和「CSS 設計工具」等多項增強功能,有助您輕鬆建立及更新網頁和行動裝置內容。新的「元素快速檢視」功能可讓您快速檢視、導覽及編輯您的 HTML 標記。

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

元素快速檢視

使用新增的「元素快速檢視」來檢視文件中的標記,可為靜態和動態內容產生互動式 HTML 樹狀結構。直接在 HTML 樹狀結構中修改您的靜態內容結構。

元素快速檢視
元素快速檢視

推出「元素快速檢視」(「檢視 > 元素快速檢視」) 是為了協助加速開發過程。在較早版本的 Dreamweaver 中,您要在「即時檢視」中標示 HTML 元素,切換至程式碼檢視,再編輯該元素。編輯之後,您再切換回到「即時檢視」,才能預覽變更。現在有了「元素快速檢視」,您可以在容易查看的單一檢視中檢視所有元素,並編輯靜態內容。

如需詳細資訊,請參閱「元素快速檢視」。

即時檢視中的新編輯功能

直接在「即時檢視」中檢查及變更任何 HTML 元素的屬性,不需要重新整理任何項目即可查看其外觀。

快速屬性檢視窗

「即時檢視」現在會針對您的頁面中的 HTML 元素顯示「快速屬性檢視窗」。根據您選取的 HTML 元素,「快速屬性檢視窗」可讓您直接在「即時檢視」中編輯屬性或文字。

用於編輯影像屬性的快速 PI
用於編輯影像屬性的快速 PI

用於設定文字格式的即時檢視 PI
用於設定文字格式的快速 PI


如需詳細資訊,請參閱「快速檢視屬性檢視窗」。

元素顯示

有了新的「元素顯示」,您現在可以直接在「即時檢視」中建立 HTML 元素與類別和 ID 的關聯。「元素顯示」會提供您可用類別和 ID 的提示,幫助您快速檢視及選擇所需的選項。

用於編輯類別和 ID 的元素顯示
用於編輯類別和 ID 的元素顯示

如需詳細資訊,請參閱「建立 HTML 元素與類別和 ID 的關聯」。

即時編輯文字

現在您可以直接在「即時」檢視中編輯文字並且預覽變更,而不需要在不同的檢視之間來回切換。

在「即時」檢視中的文字元素上按兩下,就會進入編輯模式。如需詳細資訊,請參閱「直接在即時檢視中編輯文字」。

直接在即時檢視中編輯文字。即時編輯文字。
直接在即時檢視中編輯文字

即時檢視屬性檢視窗

現在可在「即時檢視」中使用「屬性檢視窗」,讓您可以快速進行頁面的編輯,而不必切換到「設計」或「程式碼」檢視。

如需詳細資訊,請參閱「即時檢視屬性檢視窗」。

即時檢視屬性檢視窗
即時檢視屬性檢視窗

即時插入

在這個版本中,您可以使用「插入」面板,直接將 HTML 元素插入「即時檢視」中。完全不需要切換模式,就能即時插入這些元素,而且您可以立即預覽變更。

如需詳細資訊,請參閱直接在即時檢視中插入元素

從「插入」面板拖放到即時檢視
從「插入」面板拖放到即時檢視

CSS 設計工具增強功能

邊框控制項的已增強用戶介面

一種標籤控制項,可協助您以簡單而直覺的方式,設定四面邊框屬性。

  • 標籤控制可避免同時看到所有值,以減少混淆的情形。
  • 直覺式方便的圖示,任何新手都能遵照執行。
  • 有兩組圖示,可顯示未設定/已刪除與已停用狀態。
  • 單一步驟「四邊」索引標籤,可一次設定所有邊框屬性。
  • 已計算的列可在檢視時引導您到最適當的索引標籤。
Dreamweaver CC 2014 版之前的邊框控制項內容
Dreamweaver CC 2014 版之前的邊框控制項內容

Dreamweaver CC 2014 版的邊框控制項內容
Dreamweaver CC 2014 版的邊框控制項內容


如需詳細資訊,請參閱「設定邊框屬性」。

複製並貼上樣式

現在您可以從一個選取器複製樣式並貼入另一個選取器中。您可以複製所有樣式,也可以僅複製特定樣式類別,如「版面」、「文字」和「邊框」。

以滑鼠右鍵按一下選取器,然後選擇可用選項:

使用 CSS 設計工具複製樣式
使用 CSS 設計工具複製樣式

  • 如果選取器沒有樣式,會停用「複製樣式」和「複製全部樣式」。
  • 無法進行編輯的遠端網站會停用「貼上樣式」,但可以使用「複製」和「複製全部樣式」。
  • 部分存在選取器 (重疊) 上的「貼上樣式」則可正常運作。此時會貼上所有選取器的聯集。
  • 複製並貼上樣式也可以在各種不同的 CSS 檔案連結中運作:包括匯入、連結、內嵌
    樣式。

快速編輯文字方塊

Dreamweaver 現在包含快速編輯文字方塊,您可以在其中指定屬性的速記程式碼,如邊界、間距、邊框和邊框半徑。這項變更是特別為偏好指定程式碼的用戶設計,以便使用滑鼠/鍵盤來指定屬性。

快速編輯文字方塊
快速編輯文字方塊

指定屬性
指定屬性


自訂屬性工作流程增強功能

之前,您要在 CSS 設計工具的「屬性」面板中按一下 +,以新增「Other」(或自訂) 屬性。現在有一組文字方塊 - 屬性名稱和值 - 在「屬性」清單尾端隨時供您使用。這些文字方塊可讓您直接輸入屬性名稱及其值,而不必先按一下 +。

若要新增自訂屬性的其他列,請按「索引標籤」。

「其他」屬性群組的名稱已變更為「自訂」。

新增屬性名稱和值的文字方塊
新增屬性名稱和值的文字方塊

鍵盤快速鍵

現在您可以使用鍵盤快速鍵,新增或刪除 CSS 選取器和屬性。您也可以在「屬性」面板中的屬性群組之間瀏覽。

快速鍵 工作流程
CTRL+Alt+[Shift =] 新增選取器 (若控制項位於「選取器」區段之中)
Ctrl+Alt+S 新增選取器 (若控制項位於應用程式中的任何位置)
CTRL+Alt+[Shift =] 新增屬性 (若控制項位於「屬性」區段之中)
CTRL+Alt+P 新增屬性 (若控制項位於應用程式中的任何位置)
選取+Delete 刪除選取器 (若已選取了選取器)
CTRL+Alt+(PgUp/PgDn) 位於屬性子面板時,在區段之間跳動

較為特定/較不特定選取器

在此版本中,Dreamweaver 會在加入選取器時提供最多三條 (或以下) 的規則提示。您可以使用向上/向下鍵,讓它較為/較不特定。

較為特定/較不特定選取器
較為特定/較不特定選取器

捲動至類別

在較早版本中,當您在 CSS 設計工具的「屬性」面板頂端按一下「背景」或「其他」類別時,這些類別會在面板中變得「可見」,但其實類別並非確實顯示在面板頂端。

現在,「背景」和「其他」類別 (已更名為「自訂」) 會在您按一下時顯示在面板的頂端。

捲動至類別
捲動至類別

使用身分檔案支援 SFTP 連線

Dreamweaver CC 2014 版讓您使用私密-公開金鑰組和身分識別金鑰 (不論是否使用複雜密碼),透過 SFTP 連線到 Publishing Server。這項 Dreamweaver 增強功能讓您的 Web Hosting 服務提供者選擇變得更寬廣。您可以訂閱任何要求使用私密-公開金鑰組進行驗證的服務提供者。

註解:

Dreamweaver 只支援 OpenSSH 密鑰檔案。

如需詳細資訊,請參閱「SFTP 連線」。

還原/重做增強功能

截至目前為止,若要還原/重做 CSS 設計工具面板中已執行的作業,必須按一下 CSS 檔案 (在相關檔案中),然後再還原/重做該項作業。

有了新的還原/重做增強功能,您可以直接從文件的「即時檢視」或 CSS 設計工具面板中還原/重做一項作業。然後這些變更會自動反映在相關聯的 CSS 檔案中。為了讓您知道相關檔案已變更,受影響檔案的索引標籤會短暫反白標示 (大約 8 秒)。

  • 當您從「CSS 設計工具」面板還原/重做動作時,「即時檢視」會自動重新整理。
  • 當您使用原始碼編輯文件,並從「即時檢視」還原變更時,「分割檢視」的顯示變更和相關原始碼會成為焦點。

所有還原/重做動作都會在 HTML 檔案層級記錄。也就是說,對 CSS 檔案所做的任何手動變更,都可以從「任何」相關檔案進行還原。例如,以 style1.css 和 style2.css 都與 index.html 相關的情形來探討。如果您在 style1.css 中新增 .h1 的樣式,然後從 style2.css 進行還原,h1 樣式就會從 style1.css 刪除。

註解:

若要在 JavaScript 檔案中還原/重做變更,請切換到相對應的 JS 檔案,然後進行還原/重做。

Business Catalyst 和 PhoneGap Build 工作流程的變更

Business Catalyst 和 PhoneGap Build 現在以 Dreamweaver 的附加元件提供使用。現在,請將 Business Catalyst 和 PhoneGap Build 安裝為擴充功能,然後就能像先前一樣繼續使用這些服務。

若要安裝 Business Catalyst 和 PhoneGap Build 擴充功能,請移至「管理 > 瀏覽附加元件」搜尋擴充功能,然後進行安裝。

存取 Dreamweaver 擴充功能的變更

現在您可以使用 Adobe Creative Cloud,檢視並安裝 Dreamweaver 擴充功能。擴充功能現在稱為「附加元件」。

若要瀏覽 Adobe Creative Cloud 尋找附加元件,請在 Dreamweaver 中按一下「視窗 > 瀏覽附加元件」。隨即顯示 Adobe Creative Cloud 附加元件頁面。

Dreamweaver CC 13.0 中的「視窗 > 擴充功能」
Dreamweaver CC 13.0 中的「視窗 > 擴充功能」

Dreamweaver CC 2014 中的「視窗 > 瀏覽附加元件」
Dreamweaver CC 2014 版中的「視窗 > 瀏覽附加元件」


如需有關安裝附加元件的詳細資訊,請參閱「附加元件」。

同步設定的變更

Dreamweaver 中的同步設定功能可讓您將電腦與 Creative Cloud 上 Dreamweaver 實體的設定保持同步。2014 版的 Dreamweaver CC 會自動偵測您是否已在舊版 Dreamweaver 中啟用同步設定,然後讓您從 Creative Cloud 匯入這些設定。

安裝後第一次啟動 2014 版的 Dreamweaver CC 時,會出現下列對話框:

匯入同步設定
匯入同步設定

  • 若要匯入儲存在 Creative Cloud 上的設定,請按一下「匯入同步設定」。

注意:過了這個時間點,就無法使用這個選項。

  • 若要在目前的 Dreamweaver 實體與 Creative Cloud 中同步這些設定,請按一下「同步化本機」。
  • 若要自動同步設定,請選取「永遠自動同步化設定」。
  • 若要檢視進階同步設定選項,請按一下「進階」。

直接從 Dreamweaver 送出錯誤/功能要求

您現在可以直接從 Dreamweaver 中存取願望清單表單和錯誤報告表單 -「說明 > 送出錯誤/功能要求」。

「說明」選單中的「送出錯誤/功能要求」
「說明」選單中的「送出錯誤/功能要求」

Help Center

了解如何使用新功能,以及如何使用新的「Help Center」,從 Dreamweaver 之中著手處理一般工作。

與先前版本不同的是,現在您可以在初次啟動 Dreamweaver 時輕鬆探索新功能和有效的工作流程。您隨時都可以略過新功能導覽或停用應用程式內建說明訊息。必要時,您也可以重新啟用。

新功能逐步解說

Dreamweaver 現在包含隨附於最新版本的新功能迷你導覽。
除了介紹新功能以外,導覽也會引導您到影片收藏館,您可以在其中看到新功能實際運作狀況。

新功能逐步解說或迷你導覽選項會在一啟動 Dreamweaver 時立即顯示。
而且也提供選項,讓您略過導覽並移到「歡迎」畫面,讓您開始工作。

注意:新功能逐步解說是在您安裝或更新 Dreamweaver 時,
或刪除偏好設定並重新啟動 Dreamweaver 時顯示。

新功能導覽
新功能導覽

以下是新功能逐步解說中所顯示內容的摘要:

  • 歡迎訊息。系統可能也會請您指明先前是否已使用過 Dreamweaver CC,以便依此經驗進行客製化作業。
  • 逐一介紹每項功能及簡短描述 (有選項可略過導覽)。
  • 包含與新功能相關影片的影片收藏館。

影片收藏館

在新功能逐步解說結束時,影片收藏館會顯示與新功能相關的影片。
當您將滑鼠停留在縮圖上方時,會顯示有關影片的簡短描述。

影片收藏館
影片收藏館

註解:

您可以在使用 Dreamweaver 時,隨時取得新功能逐步解說和影片收藏館。
若要取用時,請移到「說明」選單或「歡迎」畫面,然後按一下所需的選項。

應用程式內建訊息

Dreamweaver 現在會在您處理專案時,提示您大幅提高生產力的秘訣。
這些秘訣的目標在協助您以更有效率的方式,完成目前正在進行的工作。

提示會隨著特定「觸發」出現。例如,當您在任何檢視中按一下「標籤」選取器時
或是以滑鼠右鍵按一下元素進行檢視時,就會顯示「元素 快速檢視」的提示。
「元素快速檢視」是全新功能,可協助您檢視及編輯 HTML 標記,比您所嘗試的其他方法都更容易 (觸發)。

一旦您按照所提供建議行動之後,應用程式內建提示不會再為相同的觸發顯示。
但會為已識別的其他觸發再次顯示提示。

您可以透過「偏好設定」,停用應用程式內建訊息顯示。如需
詳細資訊,請參閱「停用或重設應用程式和產品內建訊息」。

應用程式內建訊息範例:

元素快速檢視

觸發:

  • 標籤選取器 (所有檢視) 已按下
  • 即時 + 檢視 或以滑鼠右鍵在元素上按一下 + 檢視

訊息:

元素快速檢視訊息
元素快速檢視訊息

類別和 ID 的即時檢視屬性檢視

觸發:

  • 在「設計檢視」中使用 PI 編輯 ID

訊息:

即時檢視訊息
即時檢視訊息

產品內建訊息

Dreamweaver 與 Creative Cloud 上許多其他應用程式密切順暢整合,
而且產品內建訊息會向您介紹這類整合工作流程。使用這些工作流程,
您可以更好的方式運用 Adobe Creative Cloud 及其提供的功能。

產品內建訊息會隨著已識別的「觸發」顯示。例如,當您嘗試使用「CSS 轉變」時,
會透過產品內建訊息,建議使用「Edge Animate」工作流程。

一則產品內建訊息會包含您可以在特定情況下使用的替代 (或更好) 的工作流程簡短描述。
也會包含影片縮圖,按一下就能觀看說明工作流程的影片。
其他資訊」按鈕會將您連結到提供更多資訊的文章/部落格。
產品內建訊息只會在出現已識別觸發時顯示一次。

註解:

若要再次查看訊息,可以在「偏好設定」中重設應用程式內建說明設定。
如需詳細資訊,請參閱「停用或重設應用程式和產品內建訊息」。

產品內建訊息範例:

Edge Animate

觸發:

  • 按一下「CSS 轉變」,然後按一下 +

訊息:

Edge Animate 訊息
Edge Animate 訊息

Parfait

觸發:

  • 插入影像 > 編輯影像設定

訊息:

編輯影像設定
編輯影像設定

停用或重設應用程式和產品內建訊息

移到「偏好設定 > 輔助功能」對話框,然後執行下列作業:

  • 若要停用訊息,請取消選取「顯示應用程式內建說明」核取方塊。

若再次停用訊息,就不會再顯示先前已顯示的訊息。
只會顯示先前未曾顯示的訊息。

  • 若要查看先前已顯示的訊息,請按一下「重設」。
停用秘訣。停用應用程式內建訊息。
停用或重設應用程式內建說明的偏好設定

說明選單的變更

「說明」選單現在已重新規劃,可讓您快速存取新功能逐步解說、影片收藏館、「說明和學習」資源,以及送出錯誤/功能要求表單。

Dreamweaver CC 2014 之前版本的「說明」選單
Dreamweaver CC 2014 版之前的「說明」選單

Dreamweaver CC 2014 的「說明」選單
Dreamweaver CC 2014 版的「說明」選單


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

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