在即時檢視中編輯

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

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

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

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

提示：

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

透過資料庫或 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 文件中，「快速屬性檢視窗」也包含了自訂影像的選項。

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

文字的快速屬性檢視窗

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

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

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

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

即時檢視屬性檢視窗

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

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

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

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

編輯 HTML 屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

設定文字格式

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

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

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

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

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

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

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

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

圈選範圍

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

選取和拖放元素

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

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

在即時檢視中檢查程式碼

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

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

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

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

即時檢視中的鍵盤導覽

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

周遊頁面元素

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

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

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

周遊選取器

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

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

在即時檢視中停用編輯

不支援的情況

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