关闭 Default.aspx 页。为此，右击包含文件名的选项卡并选择“关闭”。

在解决方案资源管理器中，右击网站（例如，“C:\BasicWebSite”），然后单击“添加新项”。

在“Visual Studio 已安装的模板”下单击“Web 窗体”。

在“名称”框中键入“FirstWebPage”。

在“语言”列表中，选择您希望使用的编程语言（“Visual Basic”、“C#”或“J#”）。

创建网站时您已指定了一种默认语言。但是，每次为网站创建新页或组件时，可以更改默认语言。可以在同一网站中使用不同的编程语言。

清除“将代码放在单独的文件中”复选框。下面的屏幕快照显示了“添加新项”对话框。

在本演练中，您将创建一个代码和 HTML 在同一页的单文件页。ASP.NET 页的代码可以在页或单独的类文件中找到。要了解有关在独立文件中保存代码的更多信息，请参见演练：在 Visual Web Developer 中通过代码分离创建基本网页。

单击“添加”。

Visual Web Developer 创建新页并以“源”视图打开。

在文档窗口的底部，单击“设计”选项卡以切换到“设计”视图。

“设计”视图以类似 WYSIWYG 的方式显示您正在使用的页。此时，页上没有任何文本或控件，因此页是空白的。

在页上键入“欢迎使用 Visual Web Developer”。

下面的屏幕快照显示了您在“设计”视图中键入的文本。

切换到“源”视图。

可以看到通过在“设计”视图中键入而创建的 HTML，如下面的屏幕快照所示。

按 Ctrl+F5 运行该页。

Visual Web Developer 启动 ASP.NET Development Server。工具栏上出现一个图标，指示 Visual Web Developer Web 服务器正在运行，如下面的屏幕快照所示。

该页显示在浏览器中。虽然创建的页的扩展名为 .aspx，但是它当前像任何 HTML 页一样运行。

注意
如果浏览器显示 502 错误或指示页无法显示的错误，可能需要配置浏览器对本地请求跳过代理服务器。有关详细信息，请参见如何：对于本地 Web 请求不使用代理服务器。

关闭浏览器。

选择 Button 控件，然后在“属性”窗口中，将“文本”设置为“显示名称”，如下面的屏幕快照所示。

切换到“源”视图。

“源”视图显示该页的 HTML，包括 Visual Web Developer 为服务器控件创建的元素。控件使用类似 HTML 的语法声明，不同的是标记使用前缀 asp: 并包括属性 runat="server"。

控件属性 (Property) 声明为属性 (Attribute)。例如，当您在第 1 步中设置 Button 控件的 Text 属性 (Property) 时，实际是在设置该控件标记中的 Text 属性 (Attribute)。

注意，所有控件都在一个 <form> 元素之内，该元素也包含属性 runat="server"。控件标记的 runat="server" 属性和 asp: 前缀表明当页运行时它们由 ASP.NET 在服务器端进行处理。<form runat="server"> 和 <script runat="server"> 元素外部的代码由浏览器作为客户端代码解释，这就是为什么 ASP.NET 代码必须在元素内部的原因。

将插入点放在 <asp:label> 标记内的空白处，然后按空格键。

将出现一个下拉列表，该列表显示可以为 Label 控件设置的属性列表。此功能（称为 IntelliSense）在“源”视图中帮助您了解服务器控件、HTML 元素和页上其他项的语法。下面的屏幕快照显示了 Label 控件的 IntelliSense 下拉列表。

选择 ForeColor，然后键入一个等号 (=)。IntelliSense 将显示一个颜色列表。

注意
可以在任何时候按 Ctrl+J 来显示 IntelliSense 下拉列表。

为 Label 控件的文本选择一种颜色。

ForeColor 属性由您选择的颜色完成。

切换到“设计”视图。

双击 Button 控件。

Visual Web Developer 切换到“源”视图并为 Button 控件的默认事件（Click 事件）创建一个主干事件处理程序。

注意
在“设计”视图中双击控件只是创建事件处理程序的其中一种方法。

在处理程序内键入以下内容：

Label1。

Visual Web Developer 显示一个 Label 控件的可用成员的列表，如下面的屏幕快照所示。

完成该按钮的 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!";
}

向下滚动到 <asp:Button> 元素。注意，<asp:Button> 元素现在具有属性 OnClick="Button1_Click"。此属性将按钮的 Click 事件绑定到您在第 4 步中编写的处理程序方法。

事件处理程序方法可以具有任意名称；您看到的名称是 Visual Web Developer 创建的默认名称。重要的是 OnClick 属性的名称必须与页中某个方法的名称匹配。

注意
如果您是使用 Visual Basic 代码分离，Visual Web Developer 不会添加一个显式的 OnClick 属性。相反，是通过在处理程序声明本身中使用 Handles 关键字来将该事件绑定到处理程序方法。

按 Ctrl+F5 在浏览器中运行该页。

该页再次使用 ASP.NET Development Server 运行。

在文本框中输入名称并单击按钮。

输入的名称显示在 Label 控件中。注意，当您单击该按钮时，该页将被发送到 Web 服务器。ASP.NET 然后重新创建该页，运行您的代码（本例中运行的是 Button 控件的 Click 事件处理程序），然后将新页发送到浏览器。如果查看浏览器中的状态栏，可以看到每次您单击该按钮该页都将往返 Web 服务器一次。

在浏览器中，查看您正在运行的页的源代码。

在页的源代码中，看到的只是普通 HTML；看不到您正在“源”视图中使用的 <asp:> 元素。当页运行时，ASP.NET 会处理服务器控件并将执行表示控件的功能的 HTML 元素呈现到页上。例如，<asp:Button> 控件作为 HTML 元素 <input type="submit"> 呈现。

关闭浏览器。

从“源”视图顶部左侧的下拉列表中，选择“Calendar1”。

该下拉列表显示一个可为其编写代码的所有对象的列表。

从右侧的下拉列表中，选择“SelectionChanged”。

Visual Web Developer 为 Calendar 控件的 SelectionChanged 事件创建一个主干事件处理程序。

现在您已经看到了为控件创建事件处理程序的两种方式。第一种是在“设计”视图中双击控件。第二种是在“源”视图中使用下拉列表选择对象和要为其编写代码的事件。

使用下面突出显示的代码完成 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();
}

按 Ctrl+F5 在浏览器中运行该页。

单击日历中的一个日期。

您单击的日期显示在 Label 控件中。

在浏览器中查看该页的源代码。

注意，Calendar 控件已作为表格呈现给该页，每一天都作为一个包含 <a> 元素的 <td> 元素。

关闭浏览器。