逐步解說：在 Visual Web Developer 中建立基本 Web 網頁

更新：2007 年 11 月

此逐步解說提供您 Microsoft Visual Web Developer 的簡介。它會引導您使用 Visual Web Developer 建立簡單的網頁、說明建立新網頁的基本技術、加入控制項以及撰寫程式碼。

逐步解說將說明的工作包括：

• 建立檔案系統網站。

• 讓自己熟悉 Visual Web Developer。

• 在 Visual Web Developer 中建立單一檔案 ASP.NET Web 網頁。

• 加入控制項。

• 加入事件處理常式。

• 使用 Visual Web Developer 中的 Web 伺服器 執行網頁。

必要條件

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

• Visual Web Developer

• .NET Framework

建立網站和 Web 網頁

在這部分的逐步解說中，將會建立一個網站，並在此網站中加入新頁面。您還將加入 HTML 文字並在您的 Web 瀏覽器中執行這個網頁。

在此逐步解說中，您將建立不需要使用 Microsoft Internet Information Services (IIS) 的檔案系統網站。而是，您將在本機檔案系統中建立並執行網頁。

檔案系統網站是一個儲存您在本機電腦之任何位置選擇的資料夾中之網頁和其他檔案的地方。其他網站選項包括本機 IIS 網站，儲存您在本機 IIS 根目錄 (通常是 \Inetpub\Wwwroot\) 之子資料夾中的檔案。FTP 站台儲存遠端伺服器上的檔案，您可以使用「檔案傳輸通訊協定」(File Transfer Protocol，FTP) 透過網際網路來取得這些伺服器的存取權。遠端站台儲存可以透過區域網路存取之遠端伺服器上的檔案。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中編輯使用 FTP 的網站。同時，網站檔案可儲存於來源控制項系統中，例如 Visual SourceSafe。如需詳細資訊，請參閱簡介原始檔控制。

若要建立檔案系統網站

1. 開啟 Visual Web Developer。

2. 在 [檔案] 功能表上，按一下 [新網站]

   [新網站] 對話方塊隨即出現，如以下螢幕擷取畫面所示。

   新網站對話方塊
   

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

   當您建立網站時，請指定範本。每個範本都會建立包含不同檔案和資料夾的 Web 應用程式。在此逐步解說中，您將根據 [ASP.NET 網站] 範本建立網站，該樣板會建立一些資料夾和幾份預設檔案。

4. 在 [位置] 方塊中，選取 [檔案系統] 方塊，然後輸入您想要用來保存網站之網頁的資料夾名稱。

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

5. 在 [語言] 清單中，選取 [Visual Basic] 或 [Visual C#]。

   您選擇的程式語言將是網站的預設語言。不過，您可使用不同的程式語言建立網頁和元件，以在同一 Web 應用程式中使用多種語言。

6. 按一下 [確定]。

   Visual Web Developer 會建立資料夾和名為 Default.aspx 的新網頁。依照預設，當建立新網頁時，Visual Web Developer 會以 [原始碼] 檢視顯示網頁，在這個檢視中您可以查看網頁的 HTML 項目。以下螢幕擷取畫面顯示預設 Web 網頁的 [原始碼] 檢視。

   預設網頁的原始碼檢視
   

Visual Web Developer 導覽

繼續處理網頁前，讓自己熟悉 Visual Web Developer 開發環境是很有用的。下圖顯示在 Visual Web Developer 中可用的視窗和工具。

Visual Web Developer 環境的圖表 (Diagram)

若要讓自己熟悉 Visual Web Developer 中的 Web 設計工具

• 檢查前面的圖例並比對下列清單的文字，此清單描述最常用的視窗和工具(並非所有看到的視窗和工具都會在此處列出，只有在前面圖例中標記出的那些視窗和工具會在此處列出)。

  • 工具列。提供格式化文字、尋找文字等的命令。某些工具列是只有在 [設計] 檢視中工作時才可用。

  • 方案總管。顯示網站中的檔案和資料夾。

  • 文件視窗。顯示要在索引視窗中處理的文件。您可以透過按一下索引標籤在文件間進行切換。

  • 屬性視窗。可讓您變更網頁、HTML 項目、控制項和其他物件的設定。

  • 檢視索引標籤。為您提供相同文件的不同檢視。[設計] 檢視是類似於 WYSIWYG 的編輯介面。[原始碼] 檢視是網頁的 HTML 編輯器。[分割] 檢視可同時顯示文件的 [設計] 檢視和 [原始碼] 檢視。稍後，您將在本逐步解說中使用 [設計] 檢視和 [原始碼] 檢視。如果您想要以 [設計] 檢視開啟 Web 網頁，請在 [工具] 功能表上按一下 [選項]，選取 [HTML 設計工具] 節點，然後變更 [頁面起始位置] 選項。

  • 工具箱。提供可以拖曳至頁面的控制項和 HTML 項目。[工具箱] 項目依通用功能分組。

  • 伺服器總管/資料庫總管。顯示資料庫連接。如果在 Visual Web Developer 中看不到 [伺服器總管]，請按一下 [檢視] 功能表上的 [伺服器總管] 或 [資料庫總管]。

    注意事項：
    您可以重新整理視窗並調整視窗的大小以配合您的偏好設定。[檢視] 功能表可讓您顯示其他視窗。

建立新的 Web Form 網頁

當您建立新的網站時，Visual Web Developer 會加入名為 Default.aspx 的 ASP.NET Web 網頁 (Web Form 網頁)。您可以使用 Default.aspx 頁面做為您網站的首頁。不過，在此逐步解說中，您將建立並使用新網頁。

若要將網頁加入至網站

1. 關閉 Default.aspx 網頁。若要執行這項作業，請以滑鼠右鍵按一下包含檔案名稱的索引標籤，並選取 [關閉]。

2. 在 [方案總管] 中，以滑鼠右鍵按一下網站 (例如 [C:\BasicWebSite])，然後按一下 [加入新項目]。

3. 請在 [Visual Studio 安裝的範本] 下方，選取 [Web Form]。以下螢幕擷取畫面顯示 [加入新項目] 對話方塊。

   加入新項目對話方塊
   

4. 在 [名稱] 方塊中，輸入 FirstWebPage。

5. 在 [語言] 清單中，選擇您想要使用的程式語言 ([Visual Basic]、[C#] 或 [J#])。當您建立網站時，請指定預設語言。不過，每次為網站建立新網頁或元件時，都可從預設語言變更為其他語言。您可以在相同的網站中使用不同的程式語言。

6. 清除 [將程式碼置於個別檔案中] 核取方塊。

   在這個逐步解說中，您會建立程式碼和 HTML 在同一網頁中的單一檔案網頁。可在網頁或個別類別檔案中找到 ASP.NET Web 網頁的程式碼。若要進一步了解有關在個別檔案中保存程式碼的資訊，請參閱逐步解說：使用 Visual Web Developer 中的程式碼分離建立基本 Web 網頁。

7. 按一下 [加入]。

   Visual Web Developer 會建立新網頁並以 [原始碼] 檢視開啟它。

將 HTML 加入至網頁

在這部分逐步解說中，您要將一些靜態文字加入至網頁。

若要將文字加入至網頁

1. 在文件視窗的下方，按一下 [設計] 索引標籤切換至 [設計] 檢視。

   [設計] 檢視會以類似於 WYSIWYG 之方式顯示您要處理的網頁。此時，您的網頁上不會有任何文字或控制項，因此網頁為空白。

2. 在網頁上，輸入歡迎使用 Visual Web Developer。

   以下螢幕擷取畫面顯示您在 [設計] 檢視中輸入的文字。

   設計檢視中可見的歡迎文字
   

3. 切換至原始碼檢視。

   您可以查看透過在 [設計] 檢視中輸入而建立的 HTML，如以下螢幕擷取畫面所示。

   原始碼檢視中可見的歡迎文字
   

執行網頁

在繼續將控制項加入至網頁前，您可以嘗試先執行它。若要執行網頁，您需要 Web 伺服器。在實際執行的網站中，您會使用 IIS 做為 Web 伺服器。不過，若要測試網頁，您可以使用 ASP.NET 程式開發伺服器 (Development Server)，其在本機執行且不需要 IIS。對於檔案系統網站，Visual Web Developer 中的預設 Web 伺服器是 ASP.NET 程式開發伺服器。

若要執行網頁

1. 按 CTRL+F5 執行頁面。

   Visual Web Developer 會啟動 ASP.NET 程式開發伺服器。會在工具列上出現一個圖示，表示 Visual Web Developer Web 伺服器正在執行，如以下螢幕擷取畫面所示。

   Visual Web Developer Web 伺服器圖示
   

   此網頁便會顯示在瀏覽器中。雖然您所建立之網頁的副檔名為 .aspx，但是它目前會如 HTML 網頁般執行。

   注意事項：
   如果瀏覽器顯示 502 錯誤或表示無法顯示網頁的錯誤，您可能需要設定瀏覽器，使其在本機要求中略過 Proxy 伺服器。如需詳細資訊，請參閱 HOW TO：為本機 Web 要求略過 Proxy 伺服器。

2. 關閉瀏覽器。

加入控制項以及以程式編寫控制項

在這部分逐步解說中，您要將 Button、TextBox 和 Label 控制項加入至網頁並撰寫程式碼以處理 Button 控制項的 Click 事件。

現在您就能將伺服器控制項加入至網頁。伺服器控制項 (包含按鈕、標籤、文字方塊和其他熟悉的控制項) 可為您的 ASP.NET Web 網頁提供典型的表單處理功能。不過，您可以使用在伺服器上 (而不是用戶端) 執行的程式碼撰寫控制項。

若要將控制項加入頁面中

1. 按一下 [設計] 索引標籤切換至 [設計] 檢視。

2. 按 SHIFT+ENTER 數次以留出空間。

3. 在 [工具箱] 中，將以下三個控制項從 [標準] 群組拖曳至網頁：TextBox 控制項、Button 控制項和 Label 控制項。

4. 將插入點放在 TextBox 控制項的上方，然後輸入輸入名稱：。

   這個靜態 HTML 文字是 TextBox 控制項的標題。您可以混合同一網頁上的靜態 HTML 和伺服器控制項。以下螢幕擷取畫面顯示此三個控制項在 [設計] 檢視中的顯示方式。

   設計檢視中的控制項
   

設定控制項屬性

Visual Web Developer 為您提供了數種設定網頁上之控制項屬性的方法。在這部分逐步解說中，您將同時在 [設計] 檢視和 [原始碼] 檢視中設定屬性。

若要設定控制項屬性

1. 選取 Button 控制項，然後在 [屬性] 視窗中將 [Text] 設定為顯示名稱，如以下螢幕擷取畫面所示。

   已變更的按鈕控制項文字
   

2. 切換至原始碼檢視。

   [原始碼] 檢視會顯示網頁的 HTML，包括 Visual Web Developer 已為伺服器控制項建立的項目。除了標記使用 asp: 前置詞並包含 屬性之外，會使用類似於 HTML 的語法宣告控制項。

   控制項屬性 (Property) 宣告為屬性 (Attribute)。例如，當您設定 Button 控制項的 Text 屬性 (Property) 時，在步驟 1 中，您實際上會設定控制項標記中的 Text 屬性 (Attribute)。

   請注意，所有控制項都在 <form> 項目內部，該項目也含有 屬性。控制項標記 (Tag) 的 屬性和 asp: 前置詞可標記 (Mark) 控制項，當網頁執行時由 ASP.NET 在伺服器上處理這些控制項。<form > 和 <script > 項目外的程式碼會當做用戶端標記 (Markup) 或程式碼傳送至瀏覽器，這就是為什麼 ASP.NET 程式碼必須放在開頭標記 (Tag) 包含 屬性的項目內的原因。

3. 將插入點放在 <asp:label> 標記之內，然後按空格鍵。

   下拉式清單隨即出現，顯示您可為 Label 控制項設定的屬性清單。此功能稱為 IntelliSense，提供伺服器控制項的語法、HTML 項目和網頁上的其他項目，以協助您在 [原始碼] 檢視中工作。以下螢幕擷取畫面顯示 Label 控制項的 IntelliSense 下拉式清單。

   標籤控制項的 IntelliSense
   

4. 選取 ForeColor，然後輸入等號 (=)。IntelliSense 會顯示色彩清單。

   注意事項：
   您可以透過按 CTRL+J 隨時顯示 IntelliSense 下拉式清單。

5. 選取 Label 控制項文字的色彩。

   ForeColor 屬性使用您選取的色彩來完成。

程式設計按鈕控制項

在此逐步解說中，您將撰寫程式碼，用於讀取使用者在文字方塊中輸入的名稱並將其顯示在 Label 控制項中。

若要加入預設按鈕事件處理常式

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

2. 按兩下 Button 控制項。

   Visual Web Developer 會切換至 [原始碼] 檢視，並為 Button 控制項的預設事件 (Click 事件) 建立基本架構事件處理常式。

   注意事項：
   按兩下 [設計] 檢視中的控制項只是建立事件處理常式的其中一個方式。

3. 在處理常式之內，輸入下列內容：

   Label1。

   Visual Web Developer 會顯示 Label 控制項的可用成員清單，如以下螢幕擷取畫面所示。

   可用標籤控制項成員
   

4. 完成按鈕的 Click 事件處理常式，以便其可如下列程式碼範例所示一般讀取。

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
   End Sub
   

   protected void Button1_Click(object sender, System.EventArgs e)
   {    
       Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
   }
   

5. 向下捲動至 <asp:Button> 項目。請注意，<asp:Button> 項目現在具有 OnClick="Button1_Click" 屬性。這個屬性會將按鈕的 Click 事件繫結至您在步驟 4 中撰寫的處理常式方法。

   事件處理常式方法可具有任何名稱；您所看到的名稱是由 Visual Web Developer 建立的預設名稱。重點是用於 OnClick 屬性的名稱必須符合網頁中之方法的名稱。

   注意事項：
   如果您使用的是具有程式碼分離的 Visual Basic，則 Visual Web Developer 將不會加入明確的 OnClick 屬性。而是，會將事件繫結至在處理常式宣告本身使用 Handles 關鍵字的處理常式方法。

執行網頁

您現在就可以測試網頁上的伺服器控制項。

若要執行網頁

1. 按 CTRL+F5 於瀏覽器中執行此頁。

   會再次使用 ASP.NET 程式開發伺服器執行網頁。

2. 將名稱輸入文字方塊並按一下按鈕。

   您輸入的名稱將出現於 Label 控制項中。請注意，當您按一下按鈕時，網頁將被公佈至 Web 伺服器。ASP.NET 稍後會重新建立網頁，執行您的程式碼 (在此狀況下，Button 控制項的 Click 事件處理常式會執行)，然後將新網頁傳送至瀏覽器。如果您留意瀏覽器中的狀態列，您可以在每次按一下按鈕時看到網頁在 Web 伺服器的往返情況。

3. 在瀏覽器中，檢視您要執行之網頁的原始碼。

   在網頁原始碼中，您只能看到一般 HTML，而看不到您在 [原始碼] 檢視中使用的 <asp:> 項目。當執行網頁時，ASP.NET 會處理伺服器控制項並將 HTML 項目呈現給執行代表該控制項之功能的網頁。例如，<asp:Button> 控制項會呈現為 HTML 項目 <input type="submit">。

4. 關閉瀏覽器。

使用其他控制項

在這部分逐步解說中，您將使用 Calendar 控制項，其會一次顯示一個月的日期。Calendar 控制項是比您曾使用之按鈕、文字方塊和標籤更為複雜的控制項，會說明伺服器控制項的一些進階功能。

在本章節中，您要將 Calendar 控制項加入至網頁，並對其進行格式化。

若要加入 Calendar 控制項

1. 在 Visual Web Developer 中，切換至 [設計] 檢視。

2. 從 [工具箱] 的 [標準] 區段中，將 Calendar 控制項拖曳至頁面：

   月曆的智慧標籤面板隨即顯示。面板會顯示一些命令，方便您執行選取之控制項的最常用工作。以下螢幕擷取畫面顯示 Calendar 控制項，如在 [設計] 檢視中呈現的一樣。

   設計檢視中的 Calendar 控制項
   

3. 在智慧標籤面板中，選擇 [自動格式化]。

   [自動格式化] 對話方塊隨即出現，您可用來為月曆選取格式化配置。以下螢幕擷取畫面顯示 Calendar 控制項的 [自動格式化] 對話方塊。

   Calendar 控制項的自動格式化對話方塊
   

4. 從 [選取配置] 清單中，選取 [簡單]，然後按一下 [確定]。

5. 切換至原始碼檢視。

   您可以查看 <asp:Calendar> 項目。這個項目比您之前建立的簡單控制項要長很多。它還包含子項目，例如 <WeekEndDayStyle>，表示各種格式化設定。以下的螢幕擷取畫面顯示 [原始碼] 檢視中的 Calendar 控制項。

   原始碼檢視中的 Calendar 控制項
   

程式設計 Calendar 控制項

在本章節中，您將撰寫 Calendar 控制項以顯示目前選取的日期。

若要撰寫 Calendar 控制項

1. 在 [設計] 檢視中，按兩下 Calendar 控制項。

   [原始碼] 檢視中隨即建立新的事件處理常式。

2. 使用下列反白顯示的程式碼完成 SelectionChanged 事件處理常式。

   Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Calendar1.SelectedDate.ToString()
   End Sub
   

   protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   {    
       Label1.Text = Calendar1.SelectedDate.ToString();
   }
   

執行網頁

您現在就可以測試月曆。

若要執行網頁

1. 按 CTRL+F5 於瀏覽器中執行此頁。

2. 按一下月曆中的日期。

   您點選的日期會顯示在 Label 控制項中。

3. 在瀏覽器中，檢視網頁的原始程式碼。

   請注意，Calendar 控制項已做為表格呈現給網頁，其中的每一天都做為包含 <a> 項目的 <td> 項目。

4. 關閉瀏覽器。

後續步驟

此逐步解說說明了 Visual Web Developer 網頁設計工具 (Page Designer) 的基本功能。現在您了解了如何建立和編輯 Visual Web Developer 中的 Web 網頁後，可能還想瀏覽其他功能。例如，您可能要：

• 了解如何在 Visual Web Developer 中編輯 HTML。如需詳細資訊，請參閱逐步解說：Visual Web Developer 中的基本 HTML 編輯功能。

• 將資料存取加入至 Web 網頁。如需詳細資訊，請參閱 逐步解說：Web 網頁中的基本資料存取。

• 了解 Web 網頁的偵錯工具。如需詳細資訊，請參閱 逐步解說：在 Visual Web Developer 中進行 Web 網頁偵錯。

• 建立專門為行動電話和其他裝置設計的 Web 網頁。如需詳細資訊，請參閱 開發行動裝置的網站。

• 使用主版頁面建立配置樣式一致的網站。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中建立和使用 ASP.NET 主版頁面。

• 加入對網站的巡覽，方便使用者在網頁之間移動。如需詳細資訊，請參閱逐步解說：將網站巡覽加入至網站中。

請參閱

工作

逐步解說：在 Visual Web Developer 中建立本機 IIS 網站

逐步解說：在 Visual Web Developer 中編輯使用 FTP 的網站

概念

ASP.NET 概觀

使用 Visual Web Developer