演练：创建新的 ASP.NET 网站
更新：2007 年 11 月
本演练介绍 Microsoft Visual Web Developer 速成版和 Microsoft Visual Studio 2008 的 Web 开发功能。它将引导您完成创建简单页面的过程。此外，本演练还会向您介绍 WYSIWYG 可视化设计器。
本演练涉及以下任务：
创建文件系统网站。
熟悉 Visual Web Developer。
使用 ASP.NET Development Server 运行页Visual Web Developer 中的 Web 服务器。
先决条件
若要完成此演练，需要以下组件：
- Microsoft Visual Studio 2008 或 Microsoft Visual Web Developer 速成版。有关下载信息，请参见 Visual Studio Development Center（Visual Studio 开发中心）网站。
创建网站和网页
在本演练的第一部分中，您将创建一个具有默认页的 ASP.NET 网站。此网站将是一个不需要 Microsoft Internet 信息服务 (IIS) 的文件系统网站。这样便可以在计算机的本地文件系统中创建并运行该页。
文件系统网站是指将页面和其他文件存储在本地计算机上的选定文件夹中的网站。此外，还有其他一些网站选项。本地 IIS 网站将文件存储在本地 IIS 根目录（通常为 \Inetpub\wwwroot\）的子文件夹中。FTP 站点将文件存储在远程服务器上，可通过文件传输协议 (FTP) 进行访问。远程网站将文件存储在您能够跨越本地网络访问的远程服务器上。有关更多信息，请参见演练：在 Visual Web Developer 中通过 FTP 编辑网站。
.gif "说明") 说明： |
|---|
另外还可以使用 Web 应用程序项目创建网站。有关更多信息，请参见 Web 应用程序项目概述。 |
创建文件系统网站
打开 Visual Web Developer。
在“文件”菜单中单击“新建网站”。
将显示“新建网站”对话框，如下图所示。
.gif)
在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。
在“位置”框中，选中“文件系统”复选框，然后输入要保存网站页面的文件夹的名称。
例如，键入文件夹名“C:\Tasks”。
在“语言”列表中，单击“Visual Basic”或“Visual C#”，以选择将在 Web 项目中使用的编程语言。
说明：在本演练中，您不用编写任何程序代码。
单击“确定”。
Visual Web Developer 将创建该文件夹和名为 Default.aspx 的新页。默认情况下，Visual Web Developer 在创建新页时会将其显示在“源”视图中。在此视图下，您可以查看该页的 HTML 元素。下图显示了“源”视图中一个默认网页。
.gif)
Visual Web Developer 教程
继续本演练之前，最好先熟悉 Visual Web Developer 开发环境。下图显示了 Visual Web Developer 中的部分窗口和工具。
Visual Web Developer 环境的关系图
.gif)
以下列表描述了最常用的窗口和工具，请结合上图阅读这些内容 （此处并未列出上图中显示的所有窗口和工具，而只是列出了已标记的那些窗口和工具）。
工具栏。提供用于格式化文本、查找文本等的命令。一些工具栏只有在“设计”视图下才可用。
解决方案资源管理器。用于显示网站中的文件和文件夹。
文档窗口。显示您正在选项卡式窗口中处理的文档。单击选项卡可以实现在文档间切换。
视图选项卡。用于提供同一文档的不同视图。“设计”视图是一种近似 WYSIWYG 的编辑界面。“源”视图是显示标记的页面编辑器。“拆分”视图可同时显示文档的“设计”视图和“源”视图。您将在本演练的后面部分中使用“设计”视图和“源”视图。如果要在“设计”视图中打开网页，请在“工具”菜单上单击“选项”，选择“HTML 设计器”节点，然后更改“起始页位置”选项。
“属性”窗口。用于更改页面、HTML 元素、控件和其他对象的设置。
“CSS 属性”窗口。在“设计”视图处于活动状态时显示当前的 CSS 样式。
“管理样式”和“应用样式”窗口。有助于控制网站的 CSS 样式。
工具箱。提供可以拖到页面上的控件和 HTML 元素。“工具箱”元素按常用功能分组。
“数据库资源管理器”。用于显示数据库连接。如果 Visual Web Developer 中未显示“数据库资源管理器”窗口，请在“视图”菜单上单击“其他窗口”，然后单击“数据库资源管理器”。
说明：在 Visual Studio 的完整版本中，Visual Web Developer 的“数据库资源管理器”窗口名为“服务器资源管理器”。
您可以根据自己的偏好对窗口执行重新排列、调整大小以及停靠操作。使用“视图”菜单可以显示其他窗口。
浏览开发环境
在“视图”菜单上，单击“工具栏”。
将显示一个子菜单，其中列出了所有可用的工具栏。当前选定的工具栏会在工具栏选项旁边显示一个复选框。
滚动至工具栏列表的底部，然后单击“自定义”。
将显示“自定义”对话框。
查看可用的工具栏。完成后，请单击“关闭”。
在“视图”菜单中，单击“解决方案资源管理器”。
将显示“解决方案资源管理器”窗口。默认情况下，此窗口会停靠在 Visual Web Developer 环境的一侧。
在“解决方案资源管理器”的网站列表中，右击位于顶部的项。
将显示一个快捷菜单，其中会列出常用的网站操作。
按 Esc 关闭该快捷菜单。
在“解决方案资源管理器”中，右击 Web.config 文件，然后单击“打开”，以在文档窗口中打开该文件。
双击 Default.aspx 页将其在文档窗口中打开。双击文件是使用快捷菜单中的“打开”命令的替代方法。
请注意，每个已打开页面的名称都会显示在文档窗口顶部的选项卡中。
在文档窗口的底部，单击“拆分”，以同时显示“源”视图和“设计”视图。
在“视图”菜单中，单击“属性窗口”。
将显示“属性”窗口。
当在文档窗口中选择对象时，“属性”窗口将显示所选对象的属性。
在“源”视图窗格中，选择“form”元素，然后在“属性”窗口中检查可用的属性。
在“视图”菜单中，单击“工具箱”。
将显示“工具箱”窗口。
在“设计”视图中，从“工具箱”的“标准”选项卡内将 Button 控件拖到文档上并放置在 div 元素中。
请注意，“源”视图将更新为包含相应的标记。
在“视图”菜单上单击“数据库资源管理器”。
将显示“数据库资源管理器”窗口。
说明：在 Visual Studio 的完整版本中，Visual Web Developer 的“数据库资源管理器”窗口名为“服务器资源管理器”。
右击“数据连接”，以查看可用的数据库选项。
创建 ASP.NET 网页
创建新网站时，Visual Web Developer 会添加一个名为 Default.aspx 的 ASP.NET 网页（Web 窗体页）。您可以使用 Default.aspx 页作为网站的主页。但是在本演练中，您将创建并使用一个新页。
将页添加到网站
在文档窗口中，右击 Default.aspx 页的选项卡，然后单击“关闭”。
如果系统询问是否要保存更改，请单击“否”。
在“解决方案资源管理器”中，右击该网站（例如“C:\Tasks”），然后单击“添加新项”。
显示“添加新项”对话框。
在“Visual Studio 已安装的模板”下单击“Web 窗体”。
在“名称”框中键入“Home.aspx”。
在“语言”列表中，选择您想使用的编程语言（“Visual Basic”或“C#”）。
清除“将代码放在单独的文件中”复选框。
下图显示了“添加新项”对话框。
.gif)
单击“添加”。
Visual Web Developer 将创建该新页。默认情况下，该页将显示在“源”视图中。
将 HTML 添加到页
在本演练的这一部分中，您将向页中添加一些静态文本。
向页中添加文本
在文档窗口的底部，单击“设计”选项卡以切换到“设计”视图。
在该页上，键入“待办事项列表”。
运行该页
继续下一步之前，可以对该页进行测试。要运行页，需要一个 Web 服务器。在成品网站中，可使用 IIS 作为 Web 服务器。但是要测试页，可以使用 ASP.NET Development Server，它在本地运行因此不需要 IIS。对于文件系统网站，Visual Web Developer 中的默认 Web 服务器是 ASP.NET Development Server。
运行该页
按 Ctrl+F5 运行该页。
Visual Web Developer 将启动 ASP.NET Development Server。“窗口”工具栏上将出现一个图标，指示 Visual Web Developer Web 服务器正在运行，如下图所示：
.gif)
该页显示在浏览器中。虽然创建的页的扩展名为 .aspx，但是它当前像任何 HTML 页一样运行。
说明：如果浏览器显示 502 错误或指示无法显示页面的错误，则可能需要将浏览器配置为对本地请求跳过代理服务器。有关详细信息，请参见如何：对于本地 Web 请求不使用代理服务器。
关闭浏览器。
后续步骤
本演练阐释了 Visual Web Developer 的基本功能。
若要增强对文件的控制，请考虑将网站文件存储在 Visual SourceSafe 等源代码管理系统中。有关更多信息，请参见源代码管理简介。