使用手冊 取消

在即時檢視中編輯

 

 

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

即時檢視」使用以 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 及更高版本的即時檢視中受到支援。

更快、更輕鬆地獲得協助

新的使用者?