逐步解說：Visual Web Developer 中的基本 HTML 編輯功能

發行項
10/22/2014

更新：2007 年 11 月

Microsoft Visual Web Developer Web 開發工具提供豐富的 HTML 編輯經驗，可讓您在 WYSIWYG 模式下工作，建立網頁的外觀，還可讓您直接使用 HTML 標記工作，實現更精確的控制。此逐步解說介紹 Visual Web Developer 的 HTML 編輯功能。

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

在 [設計] 檢視中建立和編輯 HTML。
在 [原始碼] 檢視中建立和編輯 HTML。
使用分割檢視。
使用巡覽工具在 HTML 標記 (Tag) 中快速移動。

必要條件

若要完成這個逐步解說，您必須進行下列步驟：

Visual Web Developer 的一般概念了解。

如需在 Visual Web Developer 中建立 Web 網頁的簡介，請參閱逐步解說：在 Visual Web Developer 中建立基本 Web 網頁。

在此逐步解說中，您將使用網站和單一 ASP.NET Web 網頁，ASP.NET Web 網頁類似於在逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中建立的網頁。如果您已完成該逐步解說，便可以使用該網站和網頁。

建立網站和網頁

如果您已在 Visual Web Developer 中建立了網站 (例如，藉由完成逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，則可使用該網站，並繼續進行下一節的步驟。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]。

[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，按一下您想要操作的程式語言。
按一下 [確定]。

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

在設計檢視中工作

在這部分的逐步解說中，您將學習如何在 [設計] 檢視中工作，該檢視提供類似於 WYSIWYG 的頁面檢視。您可以如同在文字處理程式中一樣，透過輸入來加入文字。您也可以直接使用格式化命令或透過建立內嵌樣式來格式化文字。

[設計] 檢視顯示網頁的方式類似於其在瀏覽器中所顯示，但也有些不同。第一個不同之處在於，在 [設計] 檢視中，文字和項目是可以編輯的。第二個不同之處在於，為了您協助編輯網頁，[設計] 檢視會顯示一些在瀏覽器中不會出現的項目和控制項。此外，例如 HTML 表格等一些項目會呈現特殊的 [設計] 檢視，可以為編輯器加入其他空間。整體而言，[設計] 檢視可以協助您視覺化網頁，但其並非網頁在瀏覽器中呈現的精確表示。

若要在設計檢視中加入並格式化靜態 HTML

如果未處於 [設計] 檢視，請按一下位於視窗左下方的 [設計]。
在頁面頂部，輸入 ASP.NET Web Page。
反白文字以進行選取，然後在 [應用程式樣式套用] 工具列上，按一下 [標題 1]。
將插入點定位於 [ASP.NET Web 網頁] 下方，然後輸入 This page is powered by ASP.NET.。
反白文字，然後按一下 [格式] 功能表上的 [新樣式]。

[新樣式] 對話方塊便會出現。
按一下以勾選 [套用新樣式到文件選取範圍] 方塊。
從 [字型系列] 下拉式清單中選取一種字型，然後按一下 [套用]。

這時該字型系列已經套用到選取的文字。
按一下 [分類] 下的 [區塊]，再從 [字型高度] 下拉式清單中選取 [(值)]。請輸入字型高度的值。
從 [字型間距] 下拉式清單中選取 [(值)]。請輸入字型間距的值。按一下 [套用]，即可看到值已套用到選取的文字。
然後按一下 [確定]。

檢視標記資訊

當在 [設計] 檢視中工作時，您可能會發現查看設計介面標記 (例如 div 和 span) 和其他不具有視覺化呈現的標記非常有用。

若要在設計檢視中查看 HTML 設計介面標記

在 [檢視] 功能表上，指向 [視覺輔助工具]，然後按一下 [ASP.NET 隱藏式控制項]。

設計工具會顯示段落符號、分行符號以及其他不呈現文字的標記。

加入控制項和項目

在 [設計] 檢視中，可以將控制項從 [工具箱] 拖曳至網頁。您可以使用對話方塊加入一些項目，例如 HTML 表格。在本章節中，您將加入一些控制項和表格，以便在稍後的逐步解說中有項目可供使用。

若要加入控制項和表格

將插入點定位於 [This page is powered by ASP.NET.] 結尾段落標記的右側，然後按 ENTER。
從 [工具箱] 的 [標準] 群組中，將 TextBox 控制項拖曳到頁面上。

注意事項：

您現在可以透過按兩下控制項將其加入。
將 Button 控制項拖曳至網頁。

TextBox 和 Button 控制項是 ASP.NET Web 伺服器控制項，並非 HTML 項目。
按一下 [表格] 功能表上的 [插入表格]。

[插入表格] 對話方塊隨即出現。
按一下 [確定]。

[插入表格] 對話方塊提供用於設定正在建立之表格的選項。但在此逐步解說中，您可以使用預設表格配置。

注意事項：
您現在可以透過按兩下控制項將其加入。

建立超連結

[設計] 檢視提供產生器和其他工具，協助您建立要求屬性設定的 HTML 項目。

若要建立超連結

在文字 [This page is powered by ASP.NET] 中，反白顯示 [ASP.NET] 以將其選取。
在 [格式] 功能表上，按一下 [轉換成超連結]。

[超連結] 對話方塊隨即出現。
在 [URL] 對話方块中，輸入 https://www.asp.net。
按一下 [確定]。

在屬性視窗中設定屬性

您可以透過在 [屬性] 中設定值，變更網頁上項目的外觀和行為。

若要使用屬性視窗設定屬性

按一下在此逐步解說先前之「加入控制項和項目」中加入的 Button 控制項。
在 [屬性] 中，將 [文字] 設定為 [按一下這裡]，將 [前景色彩] 設定為其他色彩，並將 [粗體] 設定為 true。
將插入點置於前一章節建立的 [ASP.NET] 超連結中。

請注意，在 [屬性] 中，a 項目的 HRef 屬性設定為您為超連結提供的 URL。

測試網頁

您可以透過在瀏覽器中檢視網頁以查看編輯結果。

若要從外部在瀏覽器中啟動網頁

以滑鼠右鍵按一下網頁，然後再按 [在瀏覽器中檢視]。
- 如果您接到儲存變更的提示，請按一下 [是]。
Visual Web Developer 會啟動 Visual Web Developer Web 伺服器，該伺服器是本機 Web 伺服器，可用於測試網頁，而無需使用 IIS。

變更預設檢視

依照預設，Visual Web Developer 會在 [原始碼] 檢視中開啟新網頁。

若要將預設網頁檢視變更為設計檢視

在 [工具] 功能表上按一下 [選項]。
在 [選項] 對話方塊中，按一下 [一般]，然後按一下 [頁面起始位置] 下方的 [設計檢視]。

注意事項：
您可以利用下列幾種方式執行頁面。如果按 CTRL+F5，Visual Web Developer 會執行啟始動作，該動作設定於屬性頁面上的 [起始選項]。CTRL+F5 的預設起始選項是執行目前網頁，即在 [原始碼] 或 [設計] 檢視內目前作用中的網頁。您也可以在偵錯工具中執行網頁。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中進行 Web 網頁偵錯。

您可以利用下列幾種方式執行頁面。如果按 CTRL+F5，Visual Web Developer 會執行啟始動作，該動作設定於屬性頁面上的 [起始選項]。CTRL+F5 的預設起始選項是執行目前網頁，即在 [原始碼] 或 [設計] 檢視內目前作用中的網頁。您也可以在偵錯工具中執行網頁。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中進行 Web 網頁偵錯。

在原始碼檢視中工作

[原始碼] 檢視允許您直接編輯網頁的標記。[原始碼] 檢視編輯器提供了多種可以協助您建立 HTML 和 ASP.NET 控制項的功能。您可以如同在 [設計] 檢視中一樣，在 [原始碼] 檢視中使用 [工具箱] 將新項目加入至網頁。

若要將項目加入至原始碼檢視

透過按一下位於視窗左下方的 [原始碼]，切換至 [原始碼] 檢視。

所加入的控制項會做為 <asp:> 項目建立。例如，Button 控制項是 <asp:button> 項目。所做的屬性 (Property) 設定會保留為 <asp:button> 標記中的屬性 (Attribute) 設定。
從 [工具箱] 的 [HTML] 群組 (非 [標準] 群組) 中，將 Table 控制項拖曳至頁面，將其恰好置於結尾 </form> 標記的上方。

編輯器也可以協助您手動輸入標記。例如，編輯器會在您輸入時提供即時線上選項，完成 HTML 標記和屬性。編輯器還透過在有問題的標記下加波浪線的方式，提供標記的錯誤和警告資訊。將滑鼠定位於標記文字上便可獲得錯誤或警告資訊。

若要在原始碼檢視中編輯 HTML

將插入點定位於結尾 </form> 標記的上方，然後輸入左角括弧 (<)。

請注意，編輯器會提供適用於目前內容之標記的清單。
反白顯示 [a] 以將其選取，然後再按空格鍵。

編輯器會顯示適用於錨點標記之屬性的清單。
在清單中，按一下 [href]，然後輸入等號和雙引號 (=")。

編輯器提供目前可以連結到之網頁的清單，並提供開啟 [適合全家瀏覽] 對話方塊的選項。
在檔案清單中，按兩下 [Default.aspx]，然後按空格鍵，再輸入一個右角括弧 (>) 關閉標記。

編輯器會插入結尾 [</a>] 標記。
完成錨點項目讓其使用連結文字首頁連結至 Default.aspx 頁面，並讀做：
```
<a href="Default.aspx">Home</a>
```
將插入點定位於 a 標記中。

請注意，[屬性] (Property) 會顯示標記的屬性 (Attribute)。
在 [屬性] 中，針對 [HRef] 屬性，按一下省略符號 (…) 按鈕。

[選取專案項目] 對話方塊隨即出現。

現在，您可以在目前網站中選取網頁做為目標網頁。如果網站中沒有其他網頁可供選取，則關閉 [選取專案項目] 對話方塊並將想要的 URL 輸入至 [屬性] 視窗的 Href 方塊。
將插入點恰好定位於結尾 </form> 標記上方，然後輸入 <無效>。

編輯器會在標記下加波浪線，表示該標記並非認可的 HTML 標記。
移除在先前步驟中建立的標記。

檢查 HTML 格式

網頁設計工具的一個重要功能是，它會保留套用至網頁的 HTML 格式，除非您明確指定編輯器重新格式化文件。

若要檢查 HTML 格式

重新格式化 Button 控制項的屬性，方法是透過對齊屬性，使宣告式語法類似下列所示：
```
<asp:Button
    id="Button1"        Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />
```
請注意，縮排第一個屬性後，如果在標記中按 ENTER，則後續行會被縮排以與其相符。
切換至 [設計] 檢視。
以滑鼠右鍵按一下新 Button 控制項，然後按一下 [複製]。
將插入點定位於新 Button 控制項的下方，然後按一下滑鼠右鍵，再按 [貼上]。

這會建立 ID 為 Button2 的按鈕。
從 [工具箱] 的 [標準] 群組中，將第三個 Button 控制項拖曳至頁面，這會建立 <Button3>。
切換至 [原始碼] 檢視。

請注意，格式化 <Button2> 的方式與格式化 <Button1> 的方式完全相同。另一方面，<Button3> 的格式化會使用 asp:button 項目的預設格式。

注意事項：

如需如何自訂個別項目之格式的詳細資訊，請參閱逐步解說：Visual Web Developer 中的進階 HTML 編輯功能。
編輯文件，讓 <Button1> 和 <Button2> 處於同一行，之間不含空格。
```
<asp:Button ID="Button1"  Font-Bold="True" 
ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
 Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
```
項目可以換行，但是 <Button1> 的結尾 (即 />) 後必須緊跟 <Button2> 的開頭 (即 <asp:Button ID=)。
切換至 [設計] 檢視。

請注意，<Button1> 和 <Button2> 需恰好連在一起，之間沒有空格。
切換至 [原始碼] 檢視
在 [編輯] 功能表上，按一下 [格式化文件]。

文件會重新格式化，但 <Button1> 和 <Button2> 會保持在同一行。如果編輯器要分隔按鈕，其將在呈現期間引入空格。因此，編輯器不會變更您建立的格式。

注意事項：
如需如何自訂個別項目之格式的詳細資訊，請參閱逐步解說：Visual Web Developer 中的進階 HTML 編輯功能。

在分割檢視中工作

利用分割檢視，可以讓您同時看到 [設計] 檢視以及 [原始碼] 檢視的視窗。

若要在分割檢視中檢視頁面

按一下視窗左下方的 [分割]，切換至 [分割] 檢視。

在項目之間巡覽

隨著網頁變得更大、更複雜，能夠快速找到標記並降低網頁的雜亂度將非常有用。在 [原始碼] 檢視中工作時，Visual Web Developer 會提供下列工具協助您完成這些工作：

文件大綱，提供文件的完全檢視。
標記導覽，提供目前所選取之標記以及其所處網頁階層架構中之位置的相關資訊。

若要開始，請在網頁中加入更多項目，以便能檢查巡覽功能。

若要加入項目

切換至 [設計] 檢視。
從 [工具箱] 的 [HTML] 群組中，將 Table 控制項拖曳至此逐步解說先前的「在原始碼檢視中工作」中所建立之表格的儲存格。
從 [工具箱] 的 [標準] 群組中，將 Button 控制項拖曳至巢狀資料表的中間儲存格。

當網頁上存在數個巢狀項目時，您可以查看 [文件大綱] 如何提供網頁中標記的快速巡覽。

若要使用文件大綱進行巡覽

切換至 [原始碼] 檢視。
在 [檢視] 功能表上，按一下 [文件大綱]。
在 [文件大綱] 中，按一下 [Button4]。

在編輯器中，選取在先前程序中所加入的 <Button4>控制項。

標記導覽提供目前所選取之標記以及其所處網頁階層架構中之位置的相關資訊。

若要使用標記導覽進行巡覽

將插入點定位於 <asp:button> 標記中。

請注意，標記導覽位於視窗底部，顯示 <asp:button> 標記及其父標記。標記導覽包含項目的 ID (如果有的話)，因此可以識別正在顯示的項目。標記導覽也顯示指派的階層式樣式表 (如果有的話)，該樣式表以 Class 屬性設定。
在標記導覽中，按一下最接近 <asp:button#Button4> 標記的 <table> 標記。

標記導覽會移至內部 <table> 項目並將其選取。

在標記導覽中，按一下位於選取之 <table> 左邊的 <td> 標記。

包含巢狀資料格的整個儲存格隨即選取。

注意事項：
透過使用標記導覽標記中的下拉式清單，可以按一下以選取標記或其內容。依照預設，按一下標記導覽中的標記會選取該標記及其內容。

您也可以使用標記導覽協助移動或複製項目。

若要使用標記導覽移動或複製項目

使用標記導覽，選取包含 <Button4> 的 <tr> 標記。
按 CTRL+C 複製標記。
使用標記導覽移至外部表格。
在 [原始碼] 檢視中，將插入點置於 <table> 標記和第一個 <tr> 標記之間。
按 CTRL+V 將複製的列貼入表格。
切換至 [設計] 檢視。

請注意，已加入了新列，包括 Button 控制項。

格式化文字

[格式] 工具列會為大多數設定套用內嵌樣式。粗體和斜體格式會使用 b 和 i 標記套用。段落格式則套用區塊標記，例如 p (適用於標準項)、pre (適用於格式化項) 等等。段落對齊的套用使用內嵌樣式以符合 XHTML 1.1 標準。
設計工具也可讓您建立 style 區塊以及至階層式樣式表的連結。如需詳細資訊，請參閱逐步解說：建立和修改 CSS 檔。
依照預設，編輯器會建立與 XHTML 1.1 標準相容的標記 (Markup) 並將所有 HTML 標記 (Tag) 名稱轉換為小寫，即使以大寫輸入。編輯器也會以引號括住屬性 (Attribute/Property) 值。如需詳細資訊，請參閱逐步解說：Visual Web Developer 中的進階 HTML 編輯功能。

若要變更預設標記驗證

在 [原始碼] 檢視中，以滑鼠右鍵按一下網頁，然後按一下 [格式化與驗證]。
在 [選項] 對話方塊中，依序展開 [文字編輯器 HTML]，然後按一下 [驗證]。
在 [目標] 清單中，按一下驗證類型。

後續步驟

此逐步解說已提供了 Web 網頁編輯器之 HTML 功能的概觀。包括如何在 [設計] 檢視和 [原始碼] 檢視中建立 HTML，以及基本格式化和巡覽。您可能想要學習更多 Visual Web Developer 中之編輯功能的相關資訊。例如，您可能會想要進行下列動作：

了解 HTML 編輯器的其他功能，包括自訂格式化選項、大綱和 HTML 驗證。如需詳細資訊，請參閱逐步解說：Visual Web Developer 中的進階 HTML 編輯功能。
了解如何使用階層式樣式表樣式。如需詳細資訊，請參閱逐步解說：建立和修改 CSS 檔。

請參閱

共用方式為