了解如何在 Dreamweaver 中清理程式碼、檢查瀏覽器相容性、驗證 XML 文件,以及使頁面與 XHTML 相容。

清理程式碼

您可以設定自動移除空白標籤、組合巢狀的 font 標籤,或是改善混亂或無法閱讀的 HTML 或 XHTML 程式碼。

如需有關如何清理 Microsoft Word 文件產生之 HTML 的詳細資訊,請參閱開啟和編輯現有的文件

  1. 在開啟的文件中,選取「工具 > 清理 HTML」。

  2. 在出現的對話框中,選取任何一種選項,然後按一下「確定」。

    註解:

    依據文件的大小和所選取選項的多寡,完成清理可能要花幾秒鐘的時間。

    移除空的容器標籤

    會移除任何沒有內容的標籤。例如,<b></b><font color="#FF0000"></font> 都是空白標籤,但是在 <b>some text</b> 中的 <b> 標籤則不是。

    移除多餘的巢狀標籤

    會移除標籤的所有多餘實體。例如,在程式碼 <b>This is what I <b>really</b> wanted to say</b> 中,包圍單字 reallyb 標籤是多餘的,可以移除。

    移除不屬於 Dreamweaver 的 HTML 註解

    會移除所有不是由 Dreamweaver 插入的註解。例如,<!‑‑begin body text--> 會被移除,但是 <!‑‑TemplateBeginEditable name="doctitle”‑‑> 則不會,因為它是範本中標記可編輯區域開頭的 Dreamweaver 註解。

    移除 Dreamweaver 特殊標記

    會移除 Dreamweaver 新增到程式碼中的註解,讓文件在範本及圖庫項目更新時,可以自動更新。如果您在以範本為架構的文件中清理程式碼時選取這個選項,文件就會從範本分離。如需詳細資訊,請參閱使文件從範本分離

    移除特定標籤

    移除相鄰文字方塊中指定的標籤。使用這個選項可以移除由其他視覺輔助編輯器插入的自訂標籤,以及您不想顯示在網站上的其他標籤 (例如,blink)。請用逗號來分隔多個標籤 (例如,font,blink)。

    盡可能合併巢狀的 <font> 標籤

    會合併兩個或更多的 font 標籤 (如果它們控制的文字範圍相同)。例如,<font size="7"><font color="#FF0000">big red</font></font> 會變更為 <font size="7" color="#FF0000">big red</font>

    完成後顯示記錄

    會在清理動作完成時,顯示一個警告方塊,內含文件變更的相關詳細資料。

驗證標籤和大括弧是否成對

您可以檢查頁面中的標籤、小括弧 (( ))、大括弧 ({ }) 和方括弧 ([ ]) 是否成對。成對的意思是指每個開頭的標籤、小括弧、大括弧或方括弧都有對應的結束標籤或括弧,反之亦然。

檢查成對的標籤

  1. 在「程式碼」檢視中開啟文件。
  2. 將插入點放在您要檢查的巢狀程式碼中。
  3. 選取「編輯 > 選取上一層標籤」。

    便會選取程式碼中成對的相符標籤 (和其內容)。如果您持續選取「編輯 > 選取上一層標籤」,而且標籤都是成對的,最後 Dreamweaver 將會選取最外層的 html/html 標籤。

檢查小括弧、大括弧或方括弧是否成對

  1. 在「程式碼」檢視中開啟文件。
  2. 將插入點放在您要檢查的程式碼中。
  3. 選取「編輯 > 程式碼 > 平衡大括弧」。

    便會選取在成對的小括弧、大括弧或方括弧之間的所有程式碼。再選擇一次「編輯 > 程式碼 > 平衡大括弧」,會選取包含新的選取範圍的小括弧、大括弧或方括弧內的所有程式碼。

檢查瀏覽器相容性

「瀏覽器相容性檢查」(BCC) 功能可協助您找出可能造成瀏覽器顯示問題的 HTML 和 CSS 組合。這項功能也會測試文件中的程式碼,看看是否有任何不受目標瀏覽器支援的 CSS 屬性或值。

驗證 XML 文件

您可以設定「驗證工具」的偏好設定,指定「驗證工具」應該檢查的特定問題以及應該報告的錯誤類型。

  1. 請執行下列其中一項作業:
    • 如果是 XML 或 XHTML 檔案,請選取「檔案 > 驗證 > 做為 XML 格式」。

    • 「結果」面板的「驗證」索引標籤會顯示「找不到錯誤或警告」訊息,或是將它找到的語法錯誤一一列出。

  2. 按兩下錯誤訊息,將文件中的錯誤標示出來。
  3. 若要將報表儲存成 XML 檔案,請按一下「儲存報表」按鈕。
  4. 若要在您的主要瀏覽器 (可讓您列印報表者) 中檢視報表,請按一下「瀏覽報表」按鈕。

使用 W3C 驗證工具驗證文件

Dreamweaver 可透過針對 W3C 驗證工具內建的支援,協助您建立符合標準的網頁。W3C 驗證工具會驗證您的 HTML 和 XML 文件,以符合 HTML、XHTML 或 XML 標準。您可以驗證開啟的文件以及已發佈至即時伺服器的檔案。

您可以使用驗證後產生的報表來修正檔案中的錯誤

註解:

在 Dreamweaver 的「偏好設定」中,您可以針對必須驗證的文件指定剖析器。這項偏好設定會在無法自動偵測 DOCTYPE 的情況下當做後援設定使用。

驗證開啟的文件

  1. 選取「視窗 > 結果 > 驗證」以開啟「驗證」面板。此面板會顯示驗證的結果。

  2. 選取「檔案 > 驗證 > 目前文件 (W3C)」。

驗證即時文件

針對即時文件,Dreamweaver 會驗證瀏覽器接收的程式碼。當您在瀏覽器中按一下滑鼠右鍵並選取檢視原始碼的選項時,就會顯示這個程式碼。在驗證使用 PHP、JSP 等內容的動態頁面時,驗證即時文件便顯得特別實用。

只有在要驗證之頁面的 URL 是以 http 開頭時,「驗證即時文件」選項才會啟用。

  1. 選取「視窗 > 結果 > 驗證」以開啟「驗證」面板。此面板會顯示驗證的結果。

  2. 按一下「即時檢視」。

  3. 選取「檔案 > 驗證 > 即時文件 (W3C)」。

針對即時文件,當您按兩下「W3C 驗證」面板中的錯誤時,就會開啟另一個視窗:這個視窗會顯示瀏覽器產生的程式碼,並醒目提示有錯誤的各行。

自訂驗證設定

  1. 選取「視窗 > 結果 > 驗證」以開啟「驗證」面板。

  2. 在「W3C 驗證」面板中,按一下「W3C 驗證 (播放)」圖示。選取「設定」。

  3. 如果尚未明確指定文件的 DOCTYPE,請選取要驗證的 DOCTYPE。

  4. 如果您不想要顯示錯誤與警告,請清除選項。

  5. 如果您想要刪除任何已使用「W3C 驗證」面板隱藏的警告或錯誤,請按一下「管理」。當您想要移除警告與錯誤時,只要選取「W3C 驗證」面板中的「顯示全部」,警告與錯誤就不會顯示。

  6. 如果不想要在開始驗證時顯示「W3C 驗證工具注意」對話框,請選取「不要顯示 W3C 驗證工具注意對話框」。

使用驗證報表

驗證完成之後,就會在「W3C 驗證」面板中顯示驗證報表。

  • 如需錯誤或警告的詳細資訊,請選取「W3C 驗證」面板中的錯誤/警告。按一下「更多資訊」。

  • 若要將報表儲存成 XML 檔案,請按一下「儲存報表」。

  • 若要以 HTML 檢視整份報表,請按一下「瀏覽報表」。HTML 報表會提供列有錯誤、警告以及摘要的完整清單。

  • 若要前往程式碼中包含錯誤的位置,請選取「W3C 驗證」面板中的錯誤。按一下「選項」按鈕,並選取「前往行數」。

  • 若要隱藏錯誤/警告,請選取錯誤/警告。按一下「選項」按鈕,並選取「隱藏錯誤」。

  • 若要檢視所有錯誤與警告,包括已隱藏的錯誤,請按一下「選項」按鈕。選取「顯示全部」。您在「偏好設定」對話框中刪除的任何已隱藏錯誤與警告都不會列出。

  • 若要清除「W3C 驗證」面板中的所有結果,請按一下「選項」按鈕。選取「清除結果」。

設定驗證工具偏好設定

除了標準 W3C 驗證工具以外,Dreamweaver 還可支援做為擴充功能安裝的外部程式碼驗證工具。當您安裝外部驗證工具擴充功能時,Dreamweaver 會在「偏好設定」對話框的「W3C 驗證工具」類別中列出其偏好設定。

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
  2. 從左邊的「分類」清單中選取「W3C 驗證工具」。

  3. 選取進行驗證時所根據的標籤資料庫。

    您不可選取相同標籤資料庫或語言的多個版本;例如,如果您選取 HTML 4.01,就不可選取 HTML 5。請選取您進行驗證所要根據的最早版本。例如,如果文件中包含有效的 HTML 4.01 程式碼,它也將會是有效的 HTML 5 程式碼。

  4. 請針對您想要在「驗證工具」報表中包含的錯誤和警告類型,選取其「顯示」選項。
  5. 按一下「套用」以套用變更,然後按一下「關閉」以關閉「偏好設定」對話框。

使頁面與 XHTML 相容

建立頁面時,您可以讓它與 XHTML 相容。您也可以使現有的 HTML 文件與 XHTML 相容。

建立 XHTML 相容的文件

  1. 選取「檔案 > 開新檔案」。
  2. 選取要建立的頁面類別和類型。
  3. 從對話框最右側的「DocType」彈出式選單中選取其中一個 XHTML 文件類型定義 (DTD),然後按一下「建立」。

    例如,您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」,使 HTML 文件與 XHTML 相容。

    註解:

    並非所有的文件類型都可以和 XHTML 相容。

建立預設與 XHTML 相容的文件

  1. 選取「編輯 > 偏好設定」或「 Dreamweaver > 偏好設定」(Mac OS X),然後選取「新增文件」類別。
  2. 選取預設文件,並從「預設文件類型 (DTD)」彈出式選單中選取其中一個 XHTML 文件類型定義,然後按一下「確定」。

    例如,您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」,使 HTML 文件與 XHTML 相容。

使現有的 HTML 文件與 XHTML 相容

  1. 請開啟文件,然後執行下列其中一項作業:

    • 如果是沒有頁框的文件,請選取「檔案 > 轉換」,然後選取其中一個 XHTML 文件類型定義。

      例如,您可以從彈出式選單中選取「XHTML 1.0 Transitional」或「XHTML 1.0 Strict」,使 HTML 文件與 XHTML 相容。

    • 如果是有頁框的文件,請選取頁框,再選取「檔案 > 轉換」,然後選取其中一個 XHTML 文件類型定義。

  2. 若要轉換整個文件,請對每一頁框和頁框組文件重複這個步驟。

註解:

您不能轉換範本實體,因為範本實體所使用的語言必須與它的基本範本的語言相同。例如,以 XHTML 範本為基礎的文件,永遠都是使用 XHTML;以非 XHTML 相容的 HTML 範本為基礎的文件,則永遠都使用 HTML,而且無法轉換成 XHTML 或任何其他語言。

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

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