演练：用可视化Web开发器创建基本Web页面

 本演练提供给你关于微软可视化Web开发器的介绍。它引导你通过创建一个简单页面来使用Visual Web Developer，创建一个新页面，添加控件并写代码基本技术的事例。

本演练阐述任务包括：

• 创建一个文件系统Web站点
• 自我熟悉Visual Web Developer
• 用Visual Web Developer创建单个文件ASP.NET页面
• 添加控件
• 添加事件处理
• 在Visual Web Developer中的Web服务器里运行页面

先决条件

为了完成此演练，你将需要：

• Visual Web Developer
• .Net 框架

创建一个Web站点和页面

      在此演练部分，你将创建一个Web站点和添加一个新页面到站点。你也将添加HTML文本，并在你的Web浏览器上允许此页面。

      跟随此演练，你将创建一个文件系统Web站点，这站点不要求你使用微软IIS工作。相反，你将创建并运行你的页面在本地文件系统里。

      一个文件系统Web站点是存储页面和其他文件在你的本地电脑上你所选择某处的文件夹的站点。其他站点选项包含一个本地IIS Web站点，它存储你的文件在本地IIS根下的子文件夹里（典型的如\Inetpub\wwwroot\)。一个FTP站点存储文件在远程服务器上，你可以使用文件传输协议（FTP）通过互联网访问。一个远程站点存储文件在远程服务器上，你可以通过本地网络访问。

创建一个文件系统Web站点

1. 打开Visual Web Developer （我使用Visual Studio 2008）
2. 在File菜单，单击New Web Site
3. 在Visual Studio installed templates下，单击ASP.NET Web Site。   当你创建一个Web站点时候，你指定一个模版。每个模版创建包含不同文件和文件夹的Web应用程序。在此演练中，你创建基于ASP.NET Web Site模版的Web站点，并创建一些文件夹和几个默认文件。
4. 在Location框里，选择File System框，并输入你要保存Web站点页面的文件夹名称，如C:\BasicWebSite
5. 在Laguage列表，单击Visual Basic 或者 Visual C#。（我这里选择Visual C#）你选择的编程语言将是你的Web 站点的默认语言。虽然，你能够在同一Web应用程序使用多语言创建页面和不同编程语言组件
6. 单击OK。 Visual Web Developer创建文件夹和名字为Default.aspx新页面。当创建了新页面时，Visual Web Developer默认显示原视图页面，你能看到页面的HTML元素。

创建新Web窗体页

当你创建新Web站点时候，Visual Web Developer添加一个名称为Default.aspx的ASP.NET页面（Web窗体页）。你能使用Default.aspx页面作为你的Web站点的主页(home page)。然而接着这个演练，你讲创建、工作一个新页面。

添加一个页面到Web站点

1. 关闭Default.aspx页面。如要这样做，右击包含文件名的页签并选择Close
2. 在解决方案资源管理器上，右击Web站点（如C:\BasicWebSite），并单击Add New Item
3. 在Visual Studio installed templates下，单击Web Form
4. 在Name框输入FirstWebPage
5. 在Language列表，选择你喜欢使用的编程语言（Visual Basic, C# 或者J#）。 当你创建了Web站点，你就指定了默认语言。然而每次你为你的Web站点创建新页或组件时，你能够改变默认语言。在同一Web站点，你能使用不同的编程语言。

添加HTML到此页

在此演练的这部分，你将添加一些静态文本到页面

添加文本到这页

1. 在文档窗口底部，单击Design页签切换到设计视图。设计视图显示了页面你工作所见即所得页面。在这点上，你没有任何文字或控件在页面上，因而这页是空白的。
2. 在这页上，输入Welcome to Visual Web Developer.
3. 切换到源视图。你能够看到有设计视图输入而创建的HTML

运行此页

在添加控件到这页处理前，你可以试着运行它。如要运行这页，你需要一个Web服务器。在设计Web站点时，你需要使用IIS作为Web服务器。不过，测试此页，你可以使用ASP.NET开发服务器而在本地运行，不要求IIS。对于文件系统Web站点，在Visual Web Developer上默认的Web服务就是ASP.NET开发服务器。按CTRL+F5运行此页。

添加和编程控件

在这部分演练中，你将添加一个Button，一个TextBox，和一个Label控件到页面上并且写Button控件的Click事件处理代码。

你现在将添加服务控件到这页。服务控件包括按钮，标签，文本框，和其他类似控件，为你的ASP.NET Web页提高典型的形式处理能力。你可以编程控制运行在服务器上的控件代码，而不是客户端。

添加控件到本页

1. 单击设计页签切换到设计视图
2. 按Shift+Enter键几次以产生一些空间
3. 在Toolbox上，从标准组中拖三个控件到此页：文本控件，按钮控件和标签控件
4. 把插入点放在TextBox控件上，接着输入Enter your name: 

这种静态HTML文本是TextBox控件的标题。在同一页上，你可以混合静态HTML和服务器控件。

设置控件属性

Visual Web Developer提供你各种方法来设置页面上的控件属性。在这部分演练，你将在设计视图和源视图上设计属性。

为了设置控件属性

1. 选择Button控件，然后在属性窗口设置Text为Display Name。
2. 切换到源视图。源视图显示本页的HTML，包括Visual Web Developer已经为服务器控件创建的元素。使用HTML类似语法声明控件，除了使用前缀asp的标签：和包含属性runat="server"。控件特性被声明为属性。例如，当你设置Button控件的Text特性时候，在第一步，你实际上在控件的标记上设置Text属性。注意，所有控件是在有runat="server"属性的<form>元素里。runat="server"属性以及控件标签asp:前缀标识控件，以便它们在服务器上作为ASP.NET被处理，在页面运行时候。<form runat="server">和<script runat="server">元素外的代码被作为客户标记或浏览代码发送，这就是为什么ASP.NET代码必须在包含runat="server"属性的开放标签元素里。
3. 把插入点放在<asp:label>标签的空白处，然后按空格键。
4. 选择ForeColor并输入等号(=)。智能显示颜色列表。任何时候按CTRL+J显示颜色下拉列表
5. 为页签控件文字选择颜色。你所选择的颜色完成ForeColor属性。

Button控件编程

对于这个演练，你将写代码来读用户输入文本控件的名字，然后在标签控件显示名字。

添加默认按钮事件处理

to be continued...

（需要代码请留邮箱）