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

即時檢視」使用以 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
  • 影像
  • 表格
  • 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 範本檔案無法在即時檢視中編輯。
  • 同時具有靜態和動態內容的標籤。雖然可以編輯這類標籤的選取器,但卻無法在即時檢視中編輯文字。如果在即時檢視中按兩下這類元素,元素四周會出現灰色邊框,表示不支援文字編輯。
  • 已套用虛擬選取器的標籤。嘗試在即時檢視中編輯這類元素時,可能會遇到未預期的結果。

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

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