最佳化程式碼

上次更新時間 2021年4月27日

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

清理程式碼

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

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

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

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

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

移除空的容器標籤

會移除任何沒有內容的標籤。 例如,<b></b><font color="#FF0000"></font> 都是空白標籤,但是<b>部分文字</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>

完成後顯示記錄

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

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

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

檢查成對的標籤

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

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

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

在「程式碼」檢視中開啟文件。
將插入點放在您要檢查的程式碼中。

選取「編輯 > 程式碼 > 平衡大括弧」。

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

檢查瀏覽器相容性

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

驗證 XML 文件

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

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

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

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

使用 W3C 驗證工具驗證文件

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

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

備註

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

驗證開啟的文件

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

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

驗證即時文件

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

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

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

按一下「即時檢視」。

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

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

自訂驗證設定

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

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

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

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

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

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

使用驗證報表

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

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

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

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

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

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

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

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

設定驗證工具偏好設定

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

選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。

從左邊的「分類」清單中選取「W3C 驗證工具」。

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

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

請針對您想要在「驗證工具」報表中包含的錯誤和警告類型,選取其「顯示」選項。

按一下「套用」以套用變更,然後按一下「關閉」以關閉「偏好設定」對話框。

使頁面與 XHTML 相容

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

建立 XHTML 相容的文件

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

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

備註

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

建立預設與 XHTML 相容的文件

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

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

使現有的 HTML 文件與 XHTML 相容

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

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

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

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

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

備註

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