共用方式為

逐步解說：建立新的 ASP.NET 網站

  • 發行項

更新：2007 年 11 月

本逐步解說提供您 Microsoft Visual Web Developer Express 版和 Microsoft Visual Studio 2008 Web 開發功能的簡介。它能帶您逐步建立簡單的網頁。此外，此逐步解說會向您介紹 WYSIWYG 視覺化設計工具 (Visual Designer)。

本逐步解說所說明的工作包括下列各項：

必要條件

若要完成此逐步解說，您需要下列項目：

建立網站和 Web 網頁

在逐步解說的第一部分中，您將建立包含預設網頁的 ASP.NET 網站。此網站將做為檔案系統網站使用，而且不需要使用 Microsoft Internet Information Services (IIS)。這樣一來，您將可以從電腦的本機檔案系統中建立與執行網頁。

檔案系統網站可將網頁與其他檔案儲存在您於本機電腦任何位置選取的資料夾中。其他網站選項包括本機 IIS 網站，儲存您在本機 IIS 根目錄 (通常是 \Inetpub\wwwroot\) 之子資料夾中的檔案。FTP 站台會儲存遠端伺服器上的檔案，而您可以使用「檔案傳輸通訊協定」(File Transfer Protocol，FTP) 來加以存取。遠端站台儲存可以透過區域網路存取之遠端伺服器上的檔案。如需詳細資訊，請參閱逐步解說：在 Visual Web Developer 中編輯使用 FTP 的網站。

注意事項：

您也可以使用 Web 應用程式專案來建立網站。如需詳細資訊，請參閱 Web 應用程式專案概觀。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

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

    [新網站] 對話方塊隨即出現，如下列圖例所示。

    新網站對話方塊螢幕擷取畫面

  3. 按一下 [Visual Studio 安裝的範本] 底下的 [ASP.NET 網站]。

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

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

  5. 在 [語言] 清單中，按一下 [Visual Basic] 或 [Visual C#]，以選取您要在整個 Web 專案中使用的程式語言。

    注意事項：

    在這個逐步解說中，您將不會撰寫任何程式碼。

  6. 按一下 [確定]。

    Visual Web Developer 會建立資料夾和名稱為 Default.aspx 的新頁面。根據預設，在建立新網頁時，Visual Web Developer 會在 [原始碼] 檢視內顯示網頁，您可以在其中檢視網頁的 HTML 項目。下列圖例將說明 [原始碼] 檢視中的預設網頁。

    原始碼檢視中的預設頁面

Visual Web Developer 導覽

在繼續之前，讓自己熟悉 Visual Web Developer 開發環境是很有用的。下列圖例說明 Visual Web Developer 中的一些視窗與工具。

Visual Web Developer 環境的圖表

IDE 視窗和工具的圖解

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

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

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

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

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

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

  • [CSS 屬性] 視窗。當 [設計] 檢視為作用中時，顯示目前的 CSS 樣式。

  • [管理樣式] 和 [套用樣式] 視窗。協助您控制網站的 CSS 樣式。

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

  • [資料庫總管]。顯示資料庫連接。如果您無法在 Visual Web Developer 的 [檢視] 功能表中看到 [資料庫總管] 視窗，請按一下 [其他視窗]，然後按一下 [資料庫總管]。

    注意事項：

    Visual Web Developer 中的 [資料庫總管] 視窗在完整版本的 Visual Studio 中稱為 [伺服器總管]。

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

若要巡覽開發環境

  1. 按一下 [檢視] 功能表上的 [工具箱]。

    可用工具列的子功能表隨即顯示。目前選取的工具列會在工具列選取範圍旁邊顯示一個核取方塊。

  2. 捲動至工具列清單的底部，然後按一下 [自訂]。

    [自訂] 對話方塊隨即出現。

  3. 檢視可用的工具列。完成後，按一下 [關閉]。

  4. 按一下 [檢視] 功能表上的 [方案總管]。

    [方案總管] 視窗隨即出現。根據預設，此視窗會停駐在 Visual Web Developer 環境的某一側。

  5. 在 [方案總管] 中，以滑鼠右鍵按一下網站清單的上層項目。

    通用的網站作業快速鍵功能表隨即顯示。

  6. 按 ESC 關閉快速鍵功能表。

  7. 以滑鼠右鍵按一下 [方案總管] 中的 Web.config 檔案，然後按一下 [開啟] 以開啟文件視窗中的檔案。

  8. 按兩下 Default.aspx 網頁，以在文件視窗中開啟網頁。按兩下檔案，功能相當於使用快速鍵功能表中的 [開啟] 命令。

    請注意，每個開啟網頁的名稱都會顯示在文件視窗上方的索引標籤中。

  9. 按一下文件視窗底部的 [分割]，同時顯示 [原始碼] 檢視和 [設計] 檢視。

  10. 按一下 [檢視] 功能表中的 [屬性視窗]。

    [屬性] 視窗隨即出現。

    當您在文件視窗中選取物件時，[屬性] 視窗就會顯示選取物件的屬性。

  11. 選取 [原始碼] 檢視窗格中的 form 項目，然後檢查 [屬性] 視窗中的可用屬性。

  12. 按一下 [檢視] 功能表中的 [工具箱]。

    [工具箱] 視窗隨即顯示。

  13. 從 [工具箱] 的 [標準] 索引標籤中，將 [設計] 檢視裡的 Button 文字控制項拖放至 div 項目內。

    請注意，[原始碼] 檢視會更新為適當的標記。

  14. 按一下 [檢視] 功能表上的 [資料庫總管]。

    [資料庫總管] 視窗隨即出現。

    注意事項：

    Visual Web Developer 中的 [資料庫總管] 視窗在完整版本的 Visual Studio 中稱為 [伺服器總管]。

  15. 以滑鼠右鍵按一下 [資料連接]，查看可用的資料庫選項。

建立 ASP.NET 網頁

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

若要將網頁加入至網站

  1. 以滑鼠右鍵按一下文件視窗中的 Default.aspx 頁面索引標籤，然後按一下 [關閉]。

  2. 如果詢問您是否要儲存變更，請按一下 [否]。

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

    接著會顯示 [加入新項目] 對話方塊。

  4. 按一下 [Visual Studio 安裝的範本] 下方的 [Web Form]。

  5. 在 [名稱] 方塊中，輸入 Home.aspx。

  6. 在 [語言] 清單中，選取您想要使用的程式語言 ([Visual Basic] 或 [C#])。

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

    下列圖例說明 [加入新項目] 對話方塊。

    加入新項目對話方塊

  8. 按一下 [加入]。

    Visual Web Developer 會建立新網頁。根據預設，網頁會顯示在 [原始碼] 檢視中。

將 HTML 加入至網頁

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

若要將文字加入至網頁

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

  2. 在網頁中，輸入 To-Do List。

執行網頁

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

若要執行網頁

  1. 按 CTRL+F5 執行頁面。

    Visual Web Developer 會啟動 ASP.NET 程式開發伺服器。隨即會在 Windows 工具列上出現一個圖示，表示 Visual Web Developer Web 伺服器正在執行，如以下圖例所示。

    開發 Web 伺服器圖示

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

    注意事項：

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

  2. 關閉瀏覽器。

後續步驟

這個逐步解說說明了 Visual Web Developer 的基本功能。

如需更好的檔案控管能力，請考慮將網站檔案儲存在原始檔控制系統中，例如 Visual SourceSafe。如需詳細資訊，請參閱簡介原始檔控制。

請參閱

概念

ASP.NET 逐步解說精選