逐步解說：Visual Web Developer 中的進階 HTML 編輯功能

  • 發行項

更新：2007 年 11 月

Microsoft Visual Web Developer Web 開發工具為建立 Web 網頁提供豐富 HTML 編輯經驗。此逐步解說介紹某些 Visual Web Developer 的進階 HTML 編輯功能。

注意事項：

如需 HTML 編輯簡介，請參閱逐步解說：Visual Web Developer 中的基本 HTML 編輯功能。

本逐步解說將說明的工作包括下列項目：

  • 指定 HTML 編輯器如何格式化網頁中項目的選項。

  • 選取選項，以便建立的 HTML 編輯器與特定的瀏覽器相容。

  • 建立頁面大綱，也就是在編輯器中建立可摺疊區域來降低雜亂度。

必要條件

若要完成這個逐步解說，您必須要有：

  • 在 Visual Web Developer 中工作的一般概念了解。

如需 Visual Web Developer 的簡介，請參閱逐步解說：Visual Web Developer 中的基本 HTML 編輯功能。

建立網站和網頁

如果您已經藉由完成逐步解說：Visual Web Developer 中的基本 HTML 編輯功能在 Visual Web Developer 中建立了網站，請繼續進行下一節的步驟。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上指向 [新增]，然後按一下 [網站]。

    [新網站] 對話方塊隨即出現。

  3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  4. 在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

    例如，輸入資料夾名稱 C:\WebSites。

  5. 在 [語言] 清單中，按一下您想要操作的程式語言。

  6. 按一下 [確定]。

    Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。

    注意事項：

    依照預設，Visual Web Developer 會使用程式碼後置 (Code-Behind) 模型來建立 ASP.NET Web 網頁。如需詳細資訊，請參閱 ASP.NET Web 網頁程式碼模型。在此逐步解說中，您不會使用程式碼後置網頁。

格式化標記

HTML 編輯器提供多種選項，協助您根據自己的偏好設定來格式化頁面中的標記 (Markup)。格式化選項包括以下所示：

  • 標記 (Tag) 和屬性 (Attribute) 名稱是大寫字母還是小寫字母。您可以為 HTML 標記和 ASP.NET Web 伺服器控制項分別指定選項。

  • 加入屬性時是否以引號括住。

  • 項目是否由編輯器自動關閉。選項包括建立自我結尾標記 (例如，<br />)、建立開頭標記和結尾標記 (<p></p>)，以及自動插入結尾標記。

  • 標記的子項目如何縮排。

  • 分行符號在標記前後所處的位置。

不論設定的格式化選項為何，HTML 格式的一個重要功能就是您能最終控制頁面中標記的配置和外觀。您可以手動格式化項目 (例如縮排它們)，而編輯器會保留格式，除非您明確要求重新格式化標記。

在這部分的逐步解說中，您將瀏覽不同的格式化選項，並查看不同設定的效果。您還將學習如何將格式套用至整頁或頁面中的選取範圍。

注意事項：

此逐步解說只檢閱使用 HTML 所特有的格式化功能。做為 Visual Web Developer 文字編輯器，HTML 編輯器也支援套用至所有文字編輯的各種選項，例如設定定位點大小和自動換行。如需一般文字編輯選項的詳細資訊，請參閱編輯文字、程式碼和標記。

在這部分的逐步解說中，您要將一些簡單的 HTML 加入至網頁，變更格式化選項，然後加入更多 HTML。這說明變更設定如何影響 HTML 的格式化。

若要加入具有預設格式化選項的 HTML 項目

  1. 切換至 [設計] 檢視。

  2. 按一下 [表格] 功能表上的 [插入表格]，然後按一下 [確定]。

    不要變更對話方塊中任何一個預設設定。

    設計工具會建立包含兩行兩列的 HTML 表格。

  3. 在表格下方按一下頁面。

  4. 按數次 ENTER 建立一些空格，然後從 [工具箱] 的 [HTML] 群組中，將 Image 控制項拖曳至頁面。

  5. 切換至原始碼檢視。

    您將看到 <table> 和 <img> 項目已插入頁面。

    依照預設，設計工具會建立標記和屬性名稱均為小寫且屬性以引號括住的項目。

您現在可以變更格式化選項。

若要變更格式化與驗證選項

  1. 在 [工具] 功能表上按一下 [選項]。

  2. 按一下 [文字編輯器]，展開 [HTML]，然後按一下 [驗證]。

  3. 按一下 [目標] 清單中的 [XHTML 1.0 Transitional]。

  4. 按一下 [格式]。

    您可以按一下 [標記專用選項] 按鈕，為伺服器標記 (ASP.NET 伺服器控制項) 和用戶端標記 (HTML 項目) 分別設定一些選項。

  5. 在 [用戶端標記] 清單中，按一下 [大寫]。

  6. 清除 [格式化時插入屬性值引號] 和 [輸入時插入屬性值引號] 核取方塊。

  7. 按一下 [確定] 返回編輯器。

    請注意，雖然您變更了格式化選項，但是頁面中的現有標記不會變更。

您現在可以加入新項目。

若要使用新格式化選項來加入 HTML 項目

  1. 在 [原始碼] 檢視中，捲動至頁面底部。

  2. 從 [工具箱] 的 [HTML] 群組中，將 Table 控制項拖曳至頁面，並將其定位於 </form> 標記上方。

    此時，<TABLE> 項目中的標記均為大寫字母。

  3. 在已建立的資料表下方，定位插入點，然後輸入右角括弧 (<) 來啟動新標記。

    清單隨即顯示，其中的所有標記名稱均為大寫，因為這是您為格式化設定的選項。

  4. 在清單中，按兩下 [IMG]，然後再按空格鍵。

    <img> 標記的屬性清單隨即出現。屬性均為小寫，因為設定格式化選項時，您會將 [用戶端屬性] 保留為預設設定 [小寫]。

  5. 在 [屬性] 中，將 [Src] 設定為虛擬圖形檔案名稱 graphic.gif，並確定標記現在會看起來如下：

    <IMG src=graphic.gif

    因為您在先前程序中停用了 [輸入時插入屬性值引號] 選項，所以編輯器不會自動以引號括住屬性。

    注意事項：

    如果屬性需要引號，例如屬性值包含空格，則不論選項如何設定，編輯器都會插入引號。

  6. 輸入斜線符號 (/) 和右角括弧 (>) 來關閉 <img> 標記。

正如本章節先前所註明的，設定的格式化選項不會套用至頁面中現有的標記。不過，如果需要，您可以將格式化設定套用至頁面或頁面中的個別項目。

若要將格式套用至現有項目

  1. 在 [原始碼] 檢視中，反白顯示以選取建立的第一個表格。

  2. 指向 [編輯] 功能表上的 [進階]，然後按一下 [格式化選取範圍]。

    標記名稱會變更為大寫。

    注意事項：

    編輯器不會移除引號，即使您變更選項設定。同樣地，編輯器不會變更現有標記的終止 (Termination)，即使您變更如何關閉標記的選項。

您可以從這個範例查看如何在 HTML 編輯器中進行格式化。當您使用「工具箱」或「屬性」等編輯工具編輯項目時，編輯器會使用格式化選項的目前設定來產生標記。不過，編輯器不會變更任何現有標記。如果您想要將新格式化選項套用至現有標記，可以透過使用 [編輯] 功能表命令來手動套用它。

設定標記格式化選項

到目前為止您已使用的格式化選項會套用至頁面中的所有項目。如果需要，也可以為個別標記指定格式化選項。如果您經常使用某些標記，並想要使用這些標記的非預設格式，這便相當有用。每個標記的格式化都可讓您設定下列格式化選項：

  • 標記的結尾方式，即未封閉、自我結尾，或使用不同的結尾標記。

  • 分行符號如何在標記前後以及標記中使用。

  • 標記的子項目如何縮排。

    注意事項：

    您指定的標記專用格式化規則可以由規則覆寫，使用此規則時 HTML 編輯器不會變更標記的呈現方式。如果標記格式化規則會變更標記的呈現方式，則會忽略該規則。

在這部分的逐步解說中，您將設定多個標記格式化選項，並查看編輯器如何處理它們。到目前為止，您已使用了 HTML 項目，例如 <table> 項目。現在，您將使用一些 ASP.NET 伺服器控制項，以便查看均等套用至控制項和項目的格式化選項。

透過設定一些套用至特定類型之所有標記的選項來開始。您可以設定下列類型項目的選項：

  • 不含內容的 HTML 項目，如 br 和 input。

  • 可以含有內容的 HTML 項目，如 table 和 span。

  • 不能含有內容的伺服器項目 (asp:)，如 asp:image。

  • 可以含有內容的伺服器項目，如 asp:textbox。

安全性注意事項：

TextBox 控制項可接受使用者輸入，但這是可能的安全性威脅。根據預設，ASP.NET Web 網頁會驗證使用者輸入未包含指令碼或 HTML 項目。如需詳細資訊，請參閱指令碼攻擊概觀。

在本章節的第一個部分中，您將加入 HTML 表格。然後，您將變更表格項目的標記格式化規則，並重新格式化文件以查看變更格式化規則的效果。

若要設定 HTML 表格的標記格式化規則

  1. 在 [原始碼] 檢視中，以滑鼠右鍵按一下視窗的空白部分，然後按一下 [格式化與驗證]。

    [選項] 對話方塊隨即出現，其中包含您在前一章節中設定的格式化選項。

  2. 在 [用戶端標記] 清單中，按一下 [小寫] 重設用戶端標記的格式。

  3. 按一下 [確定] 關閉此 [選項] 對話方塊。

  4. 從 [工具箱] 的 [HTML] 群組中，將 Table 控制項拖曳至頁面。

    編輯器會建立 <table> 項目，此項目包含兩列 (<tr> 項目)，每列包含兩個儲存格 (<td> 項目)。每個標記都位於單獨的行：

    <table>
    <tr>
        <td>
       </td>
    </tr>

  5. 以滑鼠右鍵按一下視窗的空白部分，然後按一下 [格式化與驗證]。

  6. 按一下 [標記專用選項] 按鈕。

  7. 展開 [預設值]。

    標記類型清單隨即出現，並以 [用戶端標記不支援內容] 開頭。藉由選取清單中的項目，您可以設定不同選項，分別用於用戶端和伺服器項目、含有內容的項目 (例如 table 項目)，以及不含內容的項目 (例如 img 項目)。

  8. 按一下 [用戶端標記支援內容]。

    請注意，預設設定為標記使用單獨的結尾標記，以及之前、之中及之後具有分行符號的標記。

  9. 展開 [用戶端 HTML 標記]。

  10. 按一下 [td]。

    您將設定選項來變更格式化 td 標記的方式。

  11. 在 [分行符號] 清單中，按一下 [無]。

  12. 按一下 [確定] 關閉 [標記專用選項] 對話方塊，然後再按 [確定] 關閉 [選項] 對話方塊。

  13. 指向 [編輯] 功能表上的 [進階]，然後按一下 [格式化文件]。

    文件會重新格式化。您加入之表格中的 <td> 標記會位於同一行：

    <table>
    <tr>
        <td></td><td></td><td></td>

您可以將標記專用選項用於 ASP.NET 伺服器控制項。

若要設定 ASP.NET 伺服器控制項的格式化選項

  1. 切換至 [設計] 檢視。

  2. 從 [工具箱] 的 [標準] 群組中，將 ListBox 控制項拖曳至頁面。

  3. 在 [ListBox 工作] 對話方塊中，按一下 [編輯項目]。

    [ListItem 集合編輯器] 對話方塊便會出現。

  4. 按兩次 [加入] 加入兩個項目。

  5. 按一下 [成員] 下方的第一個 [ListItem]，然後將 [ListItem 屬性] 下方的 [文字] 設定為 Item 1。

  6. 按一下 [成員] 下方的第一個 [ListItem]，然後將 [ListItem 屬性] 下方的 [文字] 設定為 Item 2。

  7. 按一下 [確定] 關閉 [ListItem 集合編輯器] 對話方塊。

  8. 切換至原始碼檢視。

    請注意，控制項已按下列方式格式化：

    <asp:Listbox ID="ListBox1" >
   <asp:ListItem>Item 1</asp:Listitem>
   <asp:ListItem>Item 2</asp:Listitem>
</asp:Listbox>

  9. 以滑鼠右鍵按一下視窗的空白部分，然後按一下 [格式化與驗證]。

  10. 按一下 [標記專用選項] 按鈕。

  11. 在 [標記專用選項] 對話方塊中，按一下 [ASP.NET 控制項]，然後再按 [新標記]。

  12. 在 [標記名稱] 方塊中，輸入 asp:listitem。

    不要輸入右角括弧和左角括弧 (< 和 >) 做為標記名稱的一部分。

    您可以設定 ListBox 控制項內使用之 asp:ListItem 項目的選項。但不可以設定 asp:ListBox 項目的選項，因為要控制 asp:ListBox 項目之內容 (子項目) 的格式化方式。

  13. 按一下 [確定] 關閉 [新標記] 對話方塊。

  14. 在 [分行符號] 清單中，按一下 [無]。

    這會導致控制項中沒有分行符號。

  15. 按一下 [確定] 關閉 [標記專用選項] 對話方塊，然後再按 [確定] 關閉 [選項] 對話方塊。 您現在可以看到新格式化選項的效果。

若要使用新格式化選項加入 ASP.NET 伺服器控制項

  1. 切換至 [設計] 檢視。

  2. 從 [工具箱] 的 [標準] 群組中，將 ListBox 控制項拖曳至頁面。

  3. 在 [ListBox 工作] 功能表上，按一下 [編輯項目]。

  4. 如您在先前程序中所做的，為 ListBox 控制項建立兩個項目。

  5. 切換至原始碼檢視。

    請注意，所有 <asp:ListItem> 項目都位於同一行。</asp:ListBox> 項目則會出現在下一行，因為標記換行設定為 80 字元。您可以在 [選項] 對話方塊中修改這個值。 雖然僅使用兩個控制項，且只變更一個格式化選項 (分行符號)，但是您可以了解如何將選項套用至通常使用的項目。

建立項目大綱

在 [原始碼] 檢視中，您可以建立項目大綱 (摺疊和展開它們)，以便在不使用時不顯示它們。這對於通常需要很多空間的項目 (例如表格) 特別有用。您也可以對頁面中的任何項目使用摺疊功能。

若要建立項目大綱

  1. 切換至原始碼檢視。

  2. 選取之前加入的其中一個表格。

    • 如果不再具有表格，請從 [工具箱] 的 [HTML] 群組中，拖曳一個表格至頁面。

  3. 在 [編輯] 功能表上指向 [大綱]，然後按一下 [隱藏選取範圍]。

    <table> 標記隨即摺疊，並在邊界中顯示加號 (+)。

  4. 按一下加號展開表格項目。 您也可以設定項目，以便在項目超過特定大小時加號 (+) 和減號 (-) 會自動出現在邊界內。

若要設定自動建立項目大綱的方式

  1. 以滑鼠右鍵按一下頁面，然後依次按一下 [格式化與驗證]、[格式] 和 [標記專用選項] 按鈕。

  2. 在 [標記專用選項] 對話方塊中，展開 [用戶端 HTML 標記]，然後再按 [表格]。

  3. 在 [程式碼編輯器中的大綱] 下方的 [最少行數] 方塊中，輸入 5。

  4. 按一下 [確定]，然後再按 [確定]。

    對於加入的現有表格和任何新表格，如果表格超過五行，則大綱會自動出現。

驗證 HTML

HTML 編輯器可以驗證 HTML 或確定其符合特定瀏覽器或標準 (例如 XHTML) 的規則。例如，編輯器可以找到 Netscape Navigator  4.0 不接受或不符合 XHTML 標準的標記和屬性。 在這部分的逐步解說中，您將使用不同的結構描述 (瀏覽器類型或標準)，並引入各種類型的小錯誤來查看編輯器如何標示錯誤。

若要在編輯器中測試驗證

  1. 在 [原始碼] 檢視中，開啟或切換至 Default.aspx 頁面。

  2. 在 [HTML 原始檔編輯] 工具箱的清單中，按一下 [Internet Explorer 3.02/Netscape Navigator 3.0]。

  3. 捲動至頁面底部。

  4. 在 </form> 標記內，輸入下列 HTML：

    <font face=arial>
<a href=Default.aspx >Default Page </a>
</font>

    輸入時，Microsoft IntelliSense 技術會協助您完成標記。

  5. 在 [HTML 原始檔編輯] 工具箱上的清單中，按一下 [XHTML 1.0 Transitional (Netscape 7、Opera 7、Internet Explorer 6)]。

    短暫的暫停之後 (因為驗證做為背景 (Background) 工作執行)，標記的各個部分下面會出現紅色的彎曲線。如同拼字檢查工具一樣，HTML 驗證功能會尋找目前選取的瀏覽器不接受之頁面中的標記。

  6. 在 <font> 標記中，將滑鼠指標停留在文字 font 上。

    「工具提示」會通知您 font 項目已被視為過期舊式。現在，目前標準建議您對文字格式使用階層式樣式表樣式。例如，<span style="font-name:Arial;">。

  7. 在 <a> 標記的 href 屬性中，將滑鼠指標停留在 Default.aspx 上。

    「工具提示」會通知您在目前結構描述中，屬性必須以引號括住。

  8. 以引號括住 Default.aspx。

    href 屬性的值不再加上底線。如果您以相對位置錄製需要 URL 的錨點標記或其他標記，則驗證會判斷目標項目是否可以使用。

  9. 在使用之 HTML 下方的行中，輸入右角括弧 (<)。

    IntelliSense 下拉式清單隨即出現，但這次它不提供 font，因為 font 項目在 XHTML 結構描述中無效。

  10. 刪除右角括弧 (<)。

設定驗證選項

您可以控制驗證顯示的錯誤類型。這對於想讓驗證找到特定類型的錯誤很有用，即使錯誤在特定的結構描述中是允許的。

若要設定驗證選項

  1. 在 [原始碼] 檢視中，以滑鼠右鍵按一下網頁的任意位置，然後按一下 [格式化與驗證]。

    注意事項：

    [格式化與驗證] 命令只在 [原始碼] 檢視中可用。

  2. 在 [選項] 對話方塊中，按一下 [驗證]。

    請注意，不論您是否選取或清除 [顯示錯誤] 核取方塊，都不會啟用核取方塊的錯誤顯示。這是因為目前結構描述是 XHTML，它已經顯示了所有可能的驗證錯誤。

  3. 在 [目標] 清單中，按一下 [Internet Explorer 6]。

  4. 請確定已選取 [顯示錯誤] 核取方塊，然後在 [顯示錯誤] 下方，選取所有核取方塊。

  5. 按一下 [確定] 返回編輯器。

  6. 選取在先前程序中輸入的 HTML，然後在 [編輯] 功能表上，按一下 [設成大寫]。

    短暫的暫停之後，標記名稱會加上底線。將滑鼠指標停留在標記名稱上時，「工具提示」會指出名稱包含大寫字母。一般而言，Internet Explorer 6 允許大寫的標記名稱，而您現在看到這個驗證錯誤是因為您變更了該結構描述的驗證選項。

驗證也可以找到許多其他類型的錯誤，例如重複的控制項 ID、交叉的開頭和結尾標記 (例如，<b><i></b></i>) 等。不過，編輯器中的驗證不會阻止您建立任何想要的 HTML 程式碼。驗證只識別不遵守指定之瀏覽器規則的標記。

您應該了解，ASP.NET 網頁執行時所產生的輸出不僅包括建立的 HTML 項目，還包括 ASP.NET 伺服器控制項、以及寫入至頁面之任何程式碼所呈現的 HTML。驗證無法檢查那些動態項目的輸出；也就是說，編輯器無法檢查產生之輸出的有效性。依照預設，ASP.NET 控制項會產生遵守 XHTML 1.1 標準的輸出。這表示輸出適用於大部分瀏覽器。如需 ASP.NET 控制項產生之標記的詳細資訊，請參閱 ASP.NET 和 XHTML。

後續步驟

此逐步解說介紹了 HTML 編輯器的某些進階功能。雖然逐步解說沒有說明每項功能，但是您已經了解了格式化選項、大綱和驗證可以如何協助您產生語式正確 (well-formed)、自訂格式的標記，仍然提供對標記的最終控制。

請參閱

概念

Visual Web Developer 中的 XHTML

Visual Web Developer 中的標記驗證

其他資源

編輯文字、程式碼和標記

產品支援和可及性