2.1.2 在Visual Studio中设计网页

Visual Studio提供了强大的网页设计功能，开发人员既可以在源视图中通过代码完成网页设计任务，也可以在设计视图提供的可视化环境中进行网页设计，而且可以通过“属性”窗口完成页面元素的属性值设置。被编辑的网页对象可以是静态网页（.html），也可以是Web窗体（.aspx）。此外，Visual Studio还提供了对多种版本HTML代码的智能感知和校验功能，提高了代码的编写效率。

1.向ASP.NET网站中添加静态网页

Visual Studio环境下，可以在网站中新建或添加已编辑完成的静态网页文件。

（1）添加现有静态网页

新建一个ASP.NET网站后，如果希望向网站中添加已在Dreamweaver等环境中编辑完成的静态网页，可在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“现有项”命令，在弹出的“添加现有项”对话框中选择希望添加的.html文件后单击“添加”按钮即可。

（2）新建静态网页

在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令，在弹出的“添加新项”对话框中选择“HTML页”模板，输入文件名称后单击“添加”按钮，系统将按默认版本创建一个包含了基本框架的HTML文档。

2..aspx文件与HTML文件

Visual Studio 2015中创建的Web窗体中各元素默认以HTML 5规范描述，页面中Web服务器控件以<asp>标记表示。例如，下列代码表示一个命令按钮控件（Button）和一个标签控件（Label）。其中，按钮控件的OnClick属性指定了当用户单击该按钮时，响应单击事件的处理方法名称，如本例的Button1_Click。

可以看出，Web服务器控件与普通HTML元素相比最突出的不同点就是具有runat=＂server＂的属性，表示控件在服务器端运行。

在Visual Studio中新建一个网站项目或添加一个新Web窗体页面时，系统都会自动切换到页面的源视图，下列代码为由系统创建的一个空白的.aspx文件的内容。

可以看出，.aspx页面代码以<%@ Page…%>开始，称为页面的“@Page指令”，其中各属性的含义说明如下。

1）Language：指示程序代码使用的语言，如C#、VB等。

2）AutoEventWireup：指示是否自动与某些特定事件关联，如Page_Init（页面初始化）、Page_Load（页面载入）等。该属性默认值为true。

3）CodeFile：前面介绍过Visual Studio将ASP.NET页面分成展现外观的.aspx文件和实现功能的程序文件两部分。该属性指示了实现功能的程序文件名称，如果使用C#为程序设计语言，则程序文件的扩展名为.cs。

4）Inherits：指示供页面继承的代码隐藏类。

在.aspx文件中除了@Page指令行和runat="server"属性外，其他内容与标准的HTML文件完全相同。当用户请求一个.aspx页面时，服务器会将所有具有runat="server"属性的元素及实现功能的程序文件执行结果转换成标准HTML代码返回给用户，这些代码将在用户浏览器中被显示为特定的页面。

另一个值得注意的特点是，Visual Studio创建的.aspx文件中自动包含了一个<div>和</div>标记，程序员进行的所有外观设计的代码都将包含在该标记之间。也就是说，Visual Studio默认将整个.aspx页面包含到一个用于布局的“层”中，通过对层的属性进行统一设置，就能影响页面中所有HTML元素（如文字、表格和图片等）的外观。

3.Visual Studio提供的设计环境

在Visual Studio中编辑、修改HTML或.aspx文件时，无论是编写HTML标记代码还是编写JavaScript脚本代码，都可以通过系统提供的智能提示功能快速完成编辑工作。

如图2-1所示，在源视图中输入了某HTML标记的前几个字符后，系统自动显示出相关的智能提示信息。当系统所推荐的正是希望值时，可按空格或〈Enter〉键继续。若在输入了某标记名称并按智能提示使用空格键进行了关键字选择，系统将进一步提示后续的内容。

在Visual Studio中打开一个.aspx文件并切换到源视图后，工具栏中会出现一个名为“验证的目标架构”下拉列表框，如图2-2所示。它用于设置编写HTML文件时按指定版本对用户的输入进行验证和智能提示，可选项有HTML 4.01、XHTML 1.0的各版本和HTML 5等。若希望修改其默认值，可选择“工具”→“选项”命令，在弹出的对话框中选择左侧窗格中的“文本编辑器”下的“HTML（Web窗体）”，在右侧窗格中按照如图2-3所示进行相关的各项设置。