在文件視窗中選取並檢視元素

上次更新時間 2021年12月20日

在 Dreamweaver 中選取並檢視元素、顯示或隱藏元素的標記圖示,以及設定隱藏元素偏好設定。

若要在「文件」視窗的「設計」檢視中選取元素,請按一下該元素。 如果看不到元素,您必須在選取它之前,先讓它能被看得到。

有些 HTML 程式碼在瀏覽器中沒有可見的表示法。 例如,comment 標籤便不會顯示在瀏覽器中。 但是,這些程式碼在建立頁面時是很有用的,因為您將可以選取、編輯、移動及刪除隱藏元素。

Dreamweaver 可讓您指定在「文件」視窗的「設計」檢視中,是否要顯示標記隱藏元素位置的圖示。 若要指出顯示哪些元素標記,您可以設定「隱藏元素」偏好設定中的選項。 例如,您可以指定命名錨點應可看得見,而斷行符號則不可以看見。

您可以建立某些隱藏元素 (例如註解和命名錨點),並使用「偏好設定 > 隱藏元素」對話方塊來修改這些元素。

選取元素

  • 若要在「文件」視窗中選取看得見的元素,請按一下元素或拖曳跨過元素。

  • 若要選取隱藏的元素,請從「設計」檢視中,選取「檢視 > 設計檢視選項 > 視覺輔助 > 隱藏元素」(如果尚未選取該選單項目),然後在「文件」視窗中按一下元素的標記。

    有些物件在頁面上出現的位置與插入其程式碼的位置不同。 例如,在「設計」檢視中,絕對位置的元素 (AP 元素) 可位於頁面的任何一個位置上,但是在「程式碼」檢視中,定義 AP 元素的程式碼則會固定在某個位置。 在顯示隱藏元素時,Dreamweaver 會在「文件」視窗中顯示標記,藉以顯示此類元素的程式碼位置。 選取標記會選取整個元素;例如,選取 AP 元素的標記就會選取整個 AP 元素。

  • 若要選取完整的標籤 (包括它的所有內容),請在「文件」視窗左下方的標籤選取器中按一下任一個標籤 (標籤選取器會出現在「設計」檢視和「程式碼」檢視中)。 標籤選取器永遠會顯示包含目前選取範圍或插入點的標籤。 最左邊的標籤就是包含目前選取範圍或插入點的最外面標籤。 下一個標籤已包含在該最外面標籤內,以此類推;最右邊的標籤就是包含目前選取範圍或插入點的最內部標籤。

檢視 HTML 程式碼

若要檢視與選取的文字或物件相關聯的 HTML 程式碼,請執行下列其中一項作業:

  • 在「文件」工具列中,按一下「程式碼」。

  • 選取「檢視 > 程式碼」。

  • 選取「檢視 > 分割」,然後選取「程式碼-即時」、「程式碼-設計」或「程式碼-程式碼」選項。

  • 選取「視窗 > 程式碼檢視窗」。

    當您在程式碼編輯器 (「程式碼」檢視或「程式碼」檢視窗) 中選取某個項目時,通常也會在「文件」視窗中選取此項目。 在顯示選取範圍之前,您可能需要先將這兩個檢視同步化。

顯示或隱藏不可見元素的標記圖示

選取「檢視 > 設計檢視選項 > 視覺輔助 > 隱藏元素」。

備註

顯示不可見元素可能會稍微改變頁面 配置,使其他元素移動幾個像素,因此為了精確 配置,請隱藏不可見元素。

設定隱藏元素偏好設定

使用「不可見元素」偏好設定來指定當您選取「檢視 > 視覺輔助 > 不可見元素」時將顯示哪些元素類型。

選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh), 然後按一下「不可見元素」。
選取應該顯示的元素並按一下 「確定」。

對話框中元素名稱旁的勾號表示選取「檢視 > 視覺輔助 > 不可見元素」時該元素可見。

命名錨點

顯示 一個圖示,標示文件中每個命名錨點 (a name = "") 的位置。

Script

顯示一個 圖示,標示文件正文中 JavaScript 或 VBScript 程式碼的 位置。選取圖示可在屬性檢視器中編輯指令碼或連結到外部指令碼檔案。

註解

顯示 一個圖示,標示 HTML 註解的位置。選取圖示 可在屬性檢測器中查看註解。

斷行

顯示 一個圖示,標示每個分行符號 (BR) 的位置。 此選項依預設是取消選取的。

用戶端影像地圖

在文件中顯示圖示,標記每個用戶端影像地圖的位置。

內嵌樣式

顯示圖示,展示內嵌在文件正文區段中的 CSS 樣式位置。如果 CSS 樣式置於文件的標題區段中,則不會出現在「文件」視窗中。

隱藏表單欄位

顯示圖示,標記將 type 屬性設定為 "隱藏" 的表單欄位位置。

表單分隔符號

在表單周圍顯示邊框,以便您查看插入表單元素的位置。邊框顯示 form 標記的範圍,因此該邊框內的任何表單元素都正確封閉在 form 標記中。

AP 元素錨點

顯示圖示,標記定義 AP 元素的程式碼位置。AP 元素本身可以位於頁面的任何位置 (AP 元素不是隱藏元素;只有定義 AP 元素的程式碼是隱藏的。)選取圖示以選取 AP 元素;即使 AP 元素標記為隱藏,您仍可查看 AP 元素的內容。

對齊元素錨點

顯示圖示,用於展示接受 align 屬性之元素的 HTML 程式碼位置。這些包括影像、表格、ActiveX 物件、外掛程式和小程式。在某些情況下,元素的程式碼可能與可見對象分離。

視覺伺服器標記標籤

顯示伺服器標記 (如 Active Server Pages 標記和 ColdFusion 標記) 的位置,這些標記的內容無法在「文件」視窗中顯示。當伺服器處理這些標記時,通常會產生 HTML 標記。例如,當 ColdFusion 伺服器處理 <CFGRAPH> 標記時,會產生 HTML 表格。由於 Dreamweaver 無法判斷頁面的最終動態輸出,因此 Dreamweaver 會以 ColdFusion 隱形元素來表示該標記。

非視覺伺服器標記標籤

顯示伺服器標記標記 (例如 Active Server Pages 標記和 ColdFusion 標記) 的位置,其內容無法在「文件」視窗中顯示。這些標記通常是設定、處理或邏輯標記 (例如 <CFSET>、<CFWDDX> 和 <CFXML>),不會產生 HTML 標記。

CSS 顯示: 無

顯示圖示,指出連結或內嵌樣式表中被 display:none 屬性隱藏的內容位置。

顯示動態文字於

預設會以 {Recordset:Field} 的格式顯示頁面上任何動態文字。如果這些值的長度很長,會干擾您頁面的格式設定,您可以將顯示變更為 {}。

伺服器端包含

顯示每個伺服器端包含檔的實際內容。

更多類似項目