1.3 创建基本网页
本演练对Microsoft Visual Web Developer进行了简单介绍。它指导你使用Visual Web Developer来创建简单页，演示了创建新页、添加控件以及编写代码的基本技术。
本演练中阐释的任务包括：
·创建文件系统网站；
·熟悉Visual Web Developer；
·在Visual Web Developer中创建单文件的ASP.NET页；
·添加控件；
·添加事件处理程序；
·使用Visual Web Developer中的Web服务器运行页。
1.3.1 创建网站和网页
在本部分的演练中，将创建一个网站并为其添加新页，还将添加HTML文本并在Web浏览器中运行该页。
在本演练中，将创建一个不需要使用Microsoft Internet信息服务（IIS）的文件系统网站；相反，将在本地文件系统中创建和运行页。
文件系统网站是这样一个网站，即在选择的位于本地计算机上某个位置的文件夹中存储页面和其他文件。其他网站选项包括本地IIS网站，它将文件存储在本地IIS根目录（通常是\Inetpub\ Wwwroot\）的子文件夹中。FTP站点将文件存储在远程服务器上，你可以使用文件传输协议（FTP）通过Internet访问该服务器。远程站点将文件存储在你能够跨越本地网络访问的远程服务器上。
1.创建文件系统网站
创建文件系统网络的步骤如下：
（1）打开Visual Web Developer；
（2）在“文件”菜单上指向“新建”，然后单击“网站”。出现“新建网站”对话框，其屏幕快照如图1-8所示；
图1-8 “新建网站”对话框
（3）在“Visual Studio已安装的模板”之下单击“ASP.NET网站”。创建网站时需要指定一个模板，每个模板创建包含不同文件和文件夹的Web应用程序。在本演练中，你将基于“ASP.NET网站”模板创建网站，该模板创建一些文件夹和几个默认文件；
（4）在“位置”框中选择“文件系统”框，然后输入要保存网站网页的文件夹的名称。例如，输入文件夹名“C:\WebSites1”；
（5）在“语言”列表中单击“Visual Basic”或“Visual C#”。你选择的编程语言将是网站的默认语言。但是，可以通过使用不同的编程语言创建页和组件在同一个Web应用程序中使用多种语言；
（6）单击“确定”按钮。Visual Web Developer创建该文件夹和一个名为Default.aspx的新页。新页创建后，Visual Web Developer默认以“源”视图显示该页，在该视图下可以查看页面的HTML元素。显示一个默认网页的“源”视图的屏幕快照如图1-9所示。
图1-9 默认页的“源”视图
2.Visual Web Developer教程
在您继续使用页之前，先熟悉一下Visual Web Developer开发环境是很有用的。如图1-10所示的插图显示了在Visual Web Developer中可用的窗口和工具。
3.熟悉Visual Web Developer中的Web设计器
检查如图1-10所示的插图并将插图中的文本与下面的列表相互对应起来，该列表描述了最常用的窗口和工具。（并不是你看到的所有窗口和工具都列在这里，列出的只是图1-10中标记的那些窗口和工具。）
·工具栏。提供用于格式化文本、查找文本等的命令。一些工具栏只有在“设计”视图中工作时才可用。
·解决方案资源管理器。显示网站中的文件和文件夹。
·文档窗口。显示你正在选项卡式窗口中处理的文档。单击选项卡可以实现在文档间的切换。
·属性窗口。允许更改页、HTML元素、控件，以及其他对象的设置。
·视图选项卡。展示同一文档的不同视图。“设计”视图是近似WYSIWYG的编辑图面。“源”视图是页的HTML编辑器。你将在本演练的后面部分中使用这些视图。如果希望以“设计”视图打开网页，可在“工具”菜单上单击“选项”，选择“HTML设计器”节点，并更改“起始页位置”选项。
·工具箱。提供可以拖曳到页上的控件和HTML元素。工具箱元素按常用功能分组。
·服务器资源管理器。显示数据库连接。如果服务器资源管理器在Visual Web Developer中不可见，请在“视图”菜单上单击“其他窗口”，然后单击“服务器资源管理器”。
图1-10 Visual Web Developer环境的关系图
4.创建一个新的Web窗体页
当创建新的网站时，Visual Web Developer将添加一个名为Default.aspx的ASP.NET页（Web窗体页）。可以使用Default.aspx页作为网站的主页，但是在本演练中，你将创建并使用一个新页。
（1）将页添加到网站的步骤如下。
①关闭Default.aspx页。为此，右击包含文件名的选项卡并选择“关闭”。
②在解决方案资源管理器中，右击网站（例如，“C:\BasicWebSite”），然后单击“添加新项”。
③在“Visual Studio已安装的模板”之下单击“Web窗体”。
④在“名称”框中输入“FirstWebPage”。
⑤在“语言”列表中，选择你希望使用的编程语言（“Visual Basic”、“C#”或“J#”）。
注意：创建网站时你已指定了一种默认语言。但是，每次为网站创建新页或组件时，可以更改默认语言。可以在同一网站中使用不同的编程语言。
⑥清除“将代码放在单独的文件中”复选框。如图1-11所示的屏幕快照显示了“添加新项”对话框。
图1-11 “添加新项”对话框
在本演练中，将创建一个代码和HTML在同一页的单文件页。ASP.NET页的代码可以在页或单独的类文件中找到。
⑦单击“添加”按钮。
Visual Web Developer创建新页并以“源”视图打开。
（2）将HTML添加到页的演练中，将向页中添加一些静态文本。向页中添加文本的步骤如下。
①在文档窗口的底部，单击“设计”选项卡以切换到“设计”视图。
“设计”视图以类似WYSIWYG的方式显示您正在使用的页。此时，页上没有任何文本或控件，因此页是空白的。
②在页上输入“欢迎使用Visual Web Developer”。
如图1-12所示的屏幕快照显示了你在“设计”视图中输入的文本。
③切换到“源”视图。
通过在“设计”视图中输入而创建的HTML，可以在“源”视图中看到欢迎文本的屏幕快照如图1-13所示。
图1-12 在“设计”视图中看到的欢迎文本
图1-13 在“源”视图中看到的欢迎文本
（3）运行该页
在继续向该页添加控件之前，可以尝试运行该页。要运行页，需要一个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服务器正在运行。该页在浏览器中显示。虽然创建的页的扩展名为.aspx，但是它当前像任何HTML页一样运行。
②关闭浏览器。
1.3.2 添加控件和对控件编程
在本演练的这一部分中，你将向页中添加Button、TextBox和Label控件，并编写处理Button控件的Click事件的代码。
现在你将向页中添加服务器控件。服务器控件（包括按钮、标签、文本框和其他常见控件）为ASP.NET网页提供了典型的窗体处理功能。但是，可以使用运行在服务器而不是客户端上的代码对控件编程。
1.向页中添加控件
向页中添加控件的步骤如下。
①单击“设计”选项卡切换到“设计”视图。
②按几次Shift+Enter组合键以留出一些空间。
③从“工具箱”的“标准”组中将下列三个控件拖曳到页上：TextBox控件、Button控件和Label控件。
④将插入点放在TextBox控件之上，然后输入“输入您的姓名：”。
此静态HTML文本是TextBox控件的标题。可以在同一页上混合放置静态HTML和服务器控件。如图1-14所示的屏幕快照显示了这三个控件在“设计”视图中是如何放置的。
图1-14 “设计”视图中的控件
2.设置控件属性
Visual Web Developer提供了各种方式来设置页上控件的属性。在本演练的这一部分中，你将在“设计”视图和“源”视图中设置属性。
设置控件属性的步骤如下。
①选择Button控件，然后在“属性”窗口中，将“文本”设置为“显示名称”，其屏幕快照如图1-15所示。
图1-15 更改的按钮控件文本
②切换到“源”视图。
“源”视图显示该页的HTML，包括Visual Web Developer为服务器控件创建的元素。控件使用类似HTML的语法声明，不同的是标记使用前缀asp:并包括属性runat="server"。
控件属性（Property）声明为属性（Attribute）。例如，当你在第①步中设置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元素和页上其他项的语法。如图1-16所示的屏幕快照显示了Label控件的IntelliSense下拉列表。
图1-16 “标签”控件的IntelliSense
④选择ForeColor，然后输入一个等号（=）。IntelliSense将显示一个颜色列表。
⑤为Label控件的文本选择一种颜色。
ForeColor属性由您选择的颜色确定。
3.对Button控件编程
在对Button控件编程的演练中，你将编写实现下列功能的代码：读取用户输入到文本框中的名称并将其显示在Label控件中。
添加默认按钮事件处理程序的步骤如下。
①切换到“设计”视图。
②双击Button控件。
Visual Web Developer切换到“源”视图，并为Button控件的默认事件（Click事件）创建一个主干事件处理程序。
③在处理程序内输入以下内容：
Label1。
Visual Web Developer显示一个Label控件的可用成员的列表，其屏幕快照如图1-17所示。
图1-17 可用的Label控件成员
④完成该按钮的Click事件处理程序，代码示例如下所示。
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事件绑定到第④步中你编写的处理程序方法。
事件处理程序方法可以具有任意名称；你看到的名称是Visual Web Developer创建的默认名称。重要的是，OnClick属性的名称必须与页中某个方法的名称匹配。
1.3.3 运行网页
现在可以测试页上的服务器控件了。
运行该页的步骤如下。
①按Ctrl+F5组合键，在浏览器中运行该网页，再次使用ASP.NET Development Server运行。
②在文本框中输入名称并单击按钮。输入的名称显示在Label控件中。
注意：当单击该按钮时，该页将被发送到Web服务器。ASP.NET然后重新创建该页，运行你的代码（本例中运行的是Button控件的Click事件处理程序），然后将新页发送到浏览器。如果查看浏览器中的状态栏，可以看到每次单击该按钮时，该页都将往返Web服务器一次。
③在浏览器中，查看正在运行的页的源代码。
在页的源代码中，看到的只是普通HTML；看不到正在“源”视图中使用的<asp:>元素。当页运行时，ASP.NET会处理服务器控件并将执行表示控件功能的HTML元素呈现到页上。例如，<asp: Button>控件作为HTML元素<input type="submit">呈现。
④关闭浏览器。
1.3.4 使用附加控件
在使用附加控件演练的这一部分中，将使用Calendar控件，该控件一次显示一个月的日期。Calendar控件是比你使用过的按钮、文本框和标签更加复杂的控件，并且阐释了服务器控件的一些其他功能。
在本节中，你将向页中添加一个Calendar控件并为其设置格式。
1.添加“日历”控件的步骤如下。
①在Visual Web Developer中，切换到“设计”视图。
②从“工具箱”的“标准”部分中，将一个Calendar控件拖到页上。
显示该日历的智能标记面板。该面板显示一些命令，这些命令使你能够很容易地对选定控件执行一些最常见的任务。显示在“设计”视图中呈现Calendar控件的屏幕快照如图1-18所示。
图1-18 “设计”视图中的“日历”控件
③在智能标记面板中，选择“自动套用格式”。
显示“自动套用格式”对话框，该对话框允许为该日历选择一种格式设置方案。如图1-19所示的屏幕快照显示了Calendar（日历）控件的“自动套用格式”对话框。
图1-19 “日历”控件的“自动套用格式”对话框
④从“选择方案”列表中选择“简单”，然后单击“确定”按钮。
⑤切换到“源”视图。
你会看到<asp:Calendar>元素，此元素比您先前创建的简单控件的元素要长得多。它还包含表示各种格式设置的子元素，如<WeekEndDayStyle>。如图1-20所示的屏幕快照显示了“源”视图中的日历控件。
图1-20 “源”视图中的“日历”控件
2.对“日历”控件编程
在对“日历”控件编程这一节中，你将对“日历”控件编程以显示当前选定的日期。
对“日历”控件编程的步骤如下。
①从“源”视图顶部左侧的下拉列表中，选择“Calendar1”。
该下拉列表显示一个可为其编写代码的所有对象的列表。
②从右侧的下拉列表中，选择“SelectionChanged”。
Visual Web Developer为Calendar控件的SelectionChanged事件创建一个主干事件处理程序。
现在你已经看到了为控件创建事件处理程序的两种方式。第一种是在“设计”视图中双击控件，第二种是在“源”视图中使用下拉列表选择对象和要为其编写代码的事件。
③使用下面突出显示的代码完成SelectionChanged事件处理程序。
protected void Calendar1_SelectionChanged（object sender, System.EventArgs e）
{
Label1.Text = Calendar1.SelectedDate.ToString（）；
}
3.运行该页
运行该页就可以测试日历了，运行该页的步骤如下。
①按Ctrl+F5组合键在浏览器中运行该页。
②单击日历中的一个日期，你单击的日期显示在Label控件中。
③在浏览器中查看该页的源代码。
注意：Calendar控件已作为表格呈现给该页，每一天都作为一个包含<a>元素的<td>元素。
④关闭浏览器。