使用手冊 取消

在即時檢視中編輯

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站

 

了解如何使用在「即時檢視」中設計、編輯及預覽網頁。重新排列或插入元素、套用選取器、編輯影像屬性、插入、編輯和設定文字格式,而不需要切換到「程式碼檢視」。

即時檢視」使用以 Chromium 為主的顯示引擎,讓您的內容在 Dreamweaver 中看起來就像是在您偏好使用的網頁瀏覽器中檢視一樣。在開發期間,您可以切換至「即時檢視」,以快速預覽頁面。而且為節省在不同檢視模式 (程式碼檢視與設計檢視) 之間切換的時間,您可以直接在「即時檢視」之中編輯 HTML 元素。

即時檢視」會立即重新整理,顯示頁面上的變更。

您可以使用下列組件,在「即時檢視」中編輯頁面:

  • DOM 面板:(「視窗 > DOM」) 顯示文件的 HTML 結構,並讓您在檢視中複製並貼上、複製、刪除及重新排列元素。如需詳細資訊,請參閱「DOM 面板」。
  • 元素顯示:在「即時檢視」中出現在選取的 HTML 元素上方。「元素顯示」可讓您建立 HTML 元素與類別和 ID 的關聯。如需詳細資訊,請參閱「建立 HTML 元素與類別和 ID 的關聯」。
  • 快速屬性檢視窗:當您在「元素顯示」中按一下三明治圖示或選取文字時出現。「快速屬性檢視窗」可讓您在「即時檢視」中編輯影像屬性及設定文字格式。如需詳細資訊,請參閱「快速屬性檢視窗」。
  • 即時檢視屬性檢視窗:出現在「文件」視窗的下方,可讓您在「即時檢視」中編輯各種 HTML 和 CSS 屬性。如需詳細資訊,請參閱「即時檢視屬性檢視窗」。
  • 插入面板:(「視窗 > 插入」) 讓您直接從面板拖曳元素到「即時檢視」之中。如需詳細資訊,請參閱「直接在即時檢視中插入元素」。
註解:

如果您的頁面會動態變更 (因為指令碼的關係) 或是已啟用 metarefresh,則您在「即時檢視」中所做的編輯可能會遺失。

提示

  • 如果在您編輯頁面時「即時檢視」顯示空白,請將「即時檢視」關閉後再次開啟。
  • 如果頁面上未反映出編輯的內容,請按一下「即時檢視」中的「重新整理」按鈕。

透過資料庫或 JavaScript 動態顯示的內容以及範本中不可編輯的區域都無法在「即時檢視」中進行編輯。當您在「即時檢視」中按一下這類元素時,元素四周會出現灰色邊框,表示無法編輯元素。

「即時檢視」中灰色邊框的元素無法編輯
「即時檢視」中灰色邊框的元素無法編輯

註解:

在「即時檢視」中,主要選單只會提供適用於所選取元素的選項。選取元素時,不適用的選項會呈現灰色。

元素顯示

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

您也可以使用「元素顯示」來格式化表格。如需詳細資訊,請參閱連結。

建立 HTML 元素與類別和 ID 的關聯

按一下「即時檢視」中的必要元素。「元素顯示」隨即出現,並顯示目前相關聯的類別和 ID。

當您在「即時檢視」中時,也可以按一下 DOM 面板中的 HTML 元素,即可看到該元素的「元素顯示」。

元素的元素顯示
元素的元素顯示

  • 若要解除 HTML 元素與一個類別或 ID 的關聯,請按一下該類別或 ID 旁邊的「x」。
  • 若要變更與 HTML 元素相關聯的類別或 ID,請在方塊中按一下。隨即出現一份可用的類別和 ID 清單。按一下所需選項。
  • 若要新增類別或 ID 並套用至該元素,請按一下「+」,並輸入名稱。若要儲存所做的變更,請按一下「+」或按 Enter 鍵。

然後就可以使用 CSS 設計工具,定義包含此類別或 ID 的選取器。如需詳細資訊,請參閱「使用 CSS 設計工具配置頁面」。

註解:

轉變元素的「元素顯示」不會在轉變觸發時隨著元素移動。不過,即使不是與轉變元素位於相同位置,您使用「元素顯示」所做的變更仍會生效。 

快速屬性檢視窗

影像的快速屬性檢視窗

「快速屬性檢視窗」會出現在「即時檢視」中選定元素的正上方。使用此「屬性檢視窗」,就可以在「即時檢視」中編輯屬性或設定文字格式。

顯示在「即時檢視」中頁面元素正上方的「快速屬性檢視窗」
顯示在「即時檢視」中頁面元素正上方的「快速屬性檢視窗」

若要顯示或隱藏「快速屬性檢視窗」,請按 Ctrl+Alt+H (Win)/CMD+Ctrl+H (Mac)。

註解:

當您使用「快速屬性檢視窗」時,程式碼導覽器圖示不會顯示在「即時檢視」中。

在 Bootstrap 文件中,「快速屬性檢視窗」也包含了自訂影像的選項。

Bootstrap 文件中影像的快速屬性檢視窗
Bootstrap 文件中影像的快速屬性檢視窗

  • 裁切成形狀:按一下即可將影像的角落裁切成圓形或圓角,或是當做縮圖影像。
  • 讓影像具有互動性:按一下即可讓影像具有互動性,並且符合各種不同的螢幕大小。

文字的快速屬性檢視窗

針對「即時」檢視中的文字使用「快速屬性檢視窗」,可讓您快速設定格式、縮排和超連結文字。當您針對文字元素 (h1-h6、pre 和 p) 按一下三明治圖示時,便會顯示文字的「快速屬性檢視窗」。

文字的快速屬性檢視窗
文字的快速屬性檢視窗

  • 「格式」選項可讓您快速地將元素標籤變更為下列其中一種標籤:h1-h6、p 和 pre。 
  • 連結選項可幫助您設定文字元素的超連結。 
  • 粗體和斜體圖示可幫助您將 <strong> 和 <em> 標籤加入文字元素中。
  • 縮排圖示可幫助您新增或移除文字縮排。<blockquote> 標籤會隨之從程式碼中新增或移除。

在 Bootstrap 文件中,文字的「快速屬性檢視窗」也可讓您對齊和轉換文字元素。

  • 對齊:只要套用對應的類別,即可將 Bootstrap 文字元素靠左、置中、靠右對齊或齊行。
  • 轉換:只要套用小寫、大寫或句首大寫的類別,即可變更元素文字的大小寫。

即時檢視屬性檢視窗

即時檢視屬性檢視窗是在「文件」視窗下方的傳統「屬性檢視窗」。

即時檢視「屬性檢視窗」可供您檢查及編輯目前選取之頁面元素 (如文字或插入的物件) 的最常用屬性。即時檢視「屬性檢視窗」的內容會隨著選取的元素而不同。

註解:

「流變格線」頁面中無法使用「即時檢視屬性檢視窗」。

若要取得特定「屬性檢視窗」的說明,請按一下「屬性檢視窗」右上角的「說明」按鈕,或從「屬性檢視窗」的「選項」選單選取「說明」。

以下列出您可以使用即時檢視「屬性檢視窗」編輯的元素:

  • HTML
  • CSS
  • Image
  • Table
  • Media - 僅限 HTML5 音訊和 HTML5 視訊
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric
註解:

jQuery UI 和範本相關屬性無法在「即時檢視屬性檢視窗」中進行編輯。

編輯 HTML 屬性

您可以使用「快速屬性檢視窗」,直接在「即時檢視」中新增、編輯或移除影像的 HTML 屬性。

按一下三明治圖示 ,就會出現影像的「快速屬性檢視窗」。看可用空間的位置,「屬性檢視窗」會出現在影像的右方、左方、頂端、底部或上方。您可以隨意移動「屬性檢視窗」並放置在任何方便的位置。

用來編輯屬性的快速屬性檢視窗
用來編輯屬性的快速屬性檢視窗

若要編輯屬性,請按一下「快速屬性檢視窗」中的三明治圖示。您可以變更影像的來源與其他屬性,如「title」和「alt」,變更會立即反映顯示。您同樣也可以調整「即時檢視」中影像的「寬度」和「高度」。

執行下列任一項作業時,會儲存您所做的任何變更:

  • 按一下「屬性檢視窗」外任何一處
  • Enter
  • 按「索引標籤」,編輯「屬性檢視窗」中的其他屬性
  • 儲存檔案

當影像以動態方式載入時,您可以使用該影像的「快速屬性檢視窗」,快速檢查為該影像設定的屬性。

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

現在您可以直接在「即時檢視」中編輯文字元素。只要在文字元素上按一下,即可進行編輯。如果您正在元素顯示 模式,請按 Enter 按鍵編輯文字

註解:

進入編輯模式之後按 Enter 時,依您按 Enter 之前插入點所在位置而定,會有各種不同的結果。這些變更與您在「設計」檢視中編輯文字時按下 Enter 所發生的情況類似。

文字元素周圍的橘色邊框表示,已變更為編輯模式。 

橘色邊框表示編輯模式
橘色邊框表示編輯模式

插入點就是放在您按下的位置。若要選取文字元素中的所有文字,請按三下文字元素。

在「即時檢視」中編輯文字時,支援剪下、複製並貼上,以及還原和重做等作業。貼上文字時,會以純文字貼上。

自動同步功能可以讓在即時檢視中進行的所有編輯自動地和程式碼檢視同步。 

下表列出在「即時檢視」中編輯文字時支援和不支援的情況:

支援

不支援

可包含文字的所有 HTML 元素和語意標籤

編輯無效或損壞的標籤。如果 HTML 包含損壞或無效的標籤,則這種標籤的編輯受瀏覽器感知這些標籤的方式影響:

  • 如果瀏覽器為您修復 HTML 而關閉損壞的標籤,也許能讓您在「即時檢視」中編輯這些標籤。
  • 如果瀏覽器在呈現時加入新標籤,您就無法編輯損壞或無效的標籤。

 

在即時檢視中從範本衍生 HTML 檔

編輯 jQuery 頁面

包含內嵌元素的結構標籤。這些標籤會以單一方塊同時呈現,以供編輯。

編輯同時具有靜態和動態內容的標籤。雖然可以編輯這類標籤的選取器,但卻無法直接在即時檢視中編輯文字。如果在即時檢視中按兩下這類元素,元素四周會出現灰色邊框,表示不支援文字編輯。

動態頁面中的靜態文字

 

包含實體的文字

 

設定文字格式

現在您可以直接在「即時檢視」中變更文字和超連結文字的格式。若要查看文字格式選項,請選取一個詞或詞組。選定文字的上方就會出現含格式設定選項的「快速屬性檢視窗」。

用來設定文字格式的快速屬性檢視窗
用來設定文字格式的快速屬性檢視窗

直接在即時檢視中插入元素

您可以使用「插入」面板,直接將元素拖曳至「即時檢視」中文件的所要位置。「即時檢視」中的視覺輔助 (例如「即時導引線」和 DOM 圖示) 會協助您相對於滑鼠停留所在元素來放置拖曳的元素。

當您將元素拖曳到頁面中不同元素上方停留時,「即時導引線」(綠色) 會在滑鼠置放元素之前出現。這些導引線會指示可以將元素插入的位置。導引線可能出現於滑鼠停留所在元素的上、下、左或右方。

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

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

當您暫停片刻,然後再置放所拖曳的元素時,即會出現 DOM 圖示 (</>)。將滑鼠停留在這個圖示上方時,DOM 面板會開啟,您可以將此元素放到文件的 DOM 結構中。

若要直接在「即時檢視」中插入元素,請執行下列步驟:

  1. 切換到「即時檢視」。

  2. 在「插入」面板中按一下所要的元素,然後拖曳至「文件」中。或者,您也可以就在「插入」面板中按一下所要的元素。

    秘訣:如果您無法將「插入」面板中的元素拖曳到頁面上,請重新啟動電腦並再試一次。

  3. 根據「即時導引線」,將所拖曳元素放到某個元素的上、下、左或右方。或者,按一下 </> 並使用 DOM 面板,將此元素放到文件結構中精確的位置。

    元素即插入頁面中並以反白標示。

圈選範圍

圈選範圍可讓您透過在即時檢視中的標籤內按一下及拖曳的方式,輕鬆選取文字區塊。當您在 2014.1 之前的 Dreamweaver 版本中按一下並拖曳文字區塊時,元素是作為整體移動。 

註解:

即時檢視中的圈選範圍會限定為瀏覽器支援的作業。 

選取和拖放元素

在即時檢視中,您可以按一下標籤名稱,然後拖曳到想要的位置來移動元素。當您按一下標籤名稱時,會出現一個手形游標圖示,指出您可以從該點拖曳標籤。當您開始拖曳標籤時,導引線會協助您將它放在確切的位置。 

在「即時檢視」中按一下標籤名稱,您就可以在「程式碼檢視」中選取該標籤的所有內容。

在「即時檢視」中按一下標籤名稱,您就可以在「程式碼檢視」中選取該標籤的所有內容。
在「即時檢視」中按一下標籤名稱,您就可以在「程式碼檢視」中選取該標籤的所有內容。

在即時檢視中檢查程式碼

「檢查」模式會與「即時檢視」一起運作,協助您快速地識別 HTML 元素及其相關聯的 CSS 樣式。開啟「檢查」模式之後,您就可以將滑鼠停留在頁面的元素上方,以便查看任何區塊層級元素的 CSS 方塊模型屬性。

除了在「檢查」模式中查看方塊模型的視覺呈現以外,當您將滑鼠停留在「即時」檢視的元素上方時,也可以使用 CSS 設計工具。

當您在「目前」模式中開啟 CSS 設計工具,並且將滑鼠停留在頁面的元素上方時,CSS 設計工具中的規則和屬性就會自動更新,以便為您顯示該元素的規則和屬性。

此外,任何與滑鼠停留在上方之元素相關的檢視或面板也會一併更新 (例如「程式碼」檢視、「標籤」選取器、「屬性」檢視窗等等)。

  1. 在文件視窗中開啟文件之後,按一下「檢視 > 檢查」。

    註解:

    如果您尚未處於「即時檢視」,「檢查」模式就會自動啟用此檢視。

  2. 將滑鼠停留在頁面的元素上方,即可查看 CSS 方塊模型。「檢查」模式會針對邊框、邊界、欄位間隔和內容反白標示不同的顏色。

  3. (選擇性) 按下電腦鍵盤的向左鍵,即可反白標示目前標示元素的父系。按下向右鍵,即可返回子元素的反白標示。

  4. (選擇性) 按一下元素,即可鎖定反白標示選取範圍。

    註解:

    如果您按一下元素來鎖定反白標示選取範圍,就會關閉「檢查」模式。

即時檢視中的鍵盤導覽

您可以使用鍵盤周遊「元素顯示」中的頁面元素或選取器,以快速進行編輯程序。 

周遊頁面元素

向上鍵和向下鍵可協助您周遊「即時檢視」中的頁面元素。周遊是依據文件的 DOM 結構進行。

「即時檢視」中的鍵盤導覽有助於輕鬆存取巢狀和圍繞的元素。

當您使用向上鍵或向下鍵存取元素時,該元素的「元素顯示」會出現。然後就可以在「元素顯示」中瀏覽到選取器或按下 Enter,直接編輯「即時檢視」中的文字。

此時已選取段落
此時已選取段落。當您再次按向下鍵時,會選取 DOM 結構中的下一個元素 (有粗體格式的文字),如下一個影像所示。

焦點最先是在影像上
這裡的焦點最先是在影像上。按向下鍵時,會選取影像下方的段落,如下一個影像所示。

粗體格式的文字已選取
粗體格式的文字已選取。

周遊選取器

按 Tab 鍵可周遊「元素顯示」中的選取器。成為焦點的選取器會顯示琥珀色邊框,如下所示:

成為焦點的選取器會反白標示
成為焦點的選取器會以琥珀色邊框標示。

如果您在最後套用的選取器後面按 Tab 鍵,「新增選取器」文字方塊將會出現。 

註解:

你可以使用 Ctrl+[ 或 Cmd+[ 選取父元素,並使用 Ctrl+] 或 Cmd+] 選取子元素。

在即時檢視中停用編輯

如果您不想在「即時檢視」中使用「元素顯示」和「快速屬性檢視窗」,可以停用這些編輯功能。

鍵盤快速鍵:

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H
  1. 切換到「即時檢視」,然後按一下「檢視 > 即時檢視選項」。

  2. 選取「隱藏即時檢視顯示」。

不支援的情況

  • Dreaweaver 範本檔案無法在即時檢視中編輯。
  • 同時具有靜態和動態內容的標籤。雖然可以編輯這類標籤的選取器,但卻無法在即時檢視中編輯文字。如果在即時檢視中按兩下這類元素,元素四周會出現灰色邊框,表示不支援文字編輯。
  • 已套用虛擬選取器的標籤。嘗試在即時檢視中編輯這類元素時,可能會遇到未預期的結果。
  • CSS 格線僅在 Dreamweaver 2019 及更高版本的即時檢視中受到支援。
Adobe 標誌

登入您的帳戶

[Feedback V2 Badge]