搭建网站测试环境

本文介绍Windows操作系统中使用Visual Studio 2019集成开发环境从零开始创建基于.NET Framework 4.8的ASP.NET Web窗体项目，可以用于测试HTML、CSS、JavaScript客户端（浏览器）和ASP.NET网站。其它版本的Visual Studio操作基本一致，使用2019版本的主要原因是其代码文件默认使用UTF-8编码，而更高版本的Visual Studio在中文版Windows操作系统下默认使用GB2312编码，对于某些项目开发会有一些不便，如Python。此外，在Windows7操作系统下能够使用的最高版本也是Visual Studio2019。

本文使用的是Visual Studio 2019 Community 版本，可以从作者的网站下载网络安装文件，下载地址：http://caohuayu.com/res/Res.aspx?id=res20260501。下载文件需要解压，然后执行安装文件即可，请注意，选择安装组件时需要选择“ASP.NET和Web开发”模块，为了测试ASP.NET网站项目，还应选择其中的“其他项目模板(早期版本)”，如下图所示。

安装VS2019组件

选择安装的组件后，点击右下角的“安装”按钮，然后等待安装完成即可。

接下来，首先创建一个文件夹作为网站的根目录，然后启动Visual Studio 2019，在开始界面选择右下角的“继续但无需代码”，如下图所示。

Visual Studio 2019开始窗口

打开主界面后，通过菜单“打开”>>“网站”，在“打开网站”窗口的左侧列表中选择“文件系统”，然后选择网站目录，最后点击右下角的“打开”按钮。

打开网站

接下来在“解决方案资源管理器”中通过网站的右键菜单打开“属性页”，请注意，默认的网站名称与打开的文件夹名称相同。

空白网站

在“属性”页中，选择“生成”项，然后将目标框架修改为“.NET Framework 4.8”，点击“确定”完成设置。

ASP.NET网站生成版本

在网站中添加文件时，可以在“解决方案资源管理器”窗口中通过网站或其它目录右键菜单中的“添加”>>“添加新项”操作。下面在网站根目录创建一个ASP.NET Web窗体文件，通过网站右键菜单添加新项，在“添加新项”窗口的左侧列表中选择Visual C#（位置1），这里指定服务器端的编程语言为C#；然后在文件类型中选择“Web窗体”（位置2），文件名称使用默认的Default.aspx，最后点击“添加”按钮（位置3）确认，如下图所示。

创建Web窗体

双击打开“Default.aspx”文件，可以看到如下所示的默认代码：

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

此外，还有一个与Default.aspx配套的Default.aspx.cs文件，用于编写服务器端代码，在测试HTML、CSS和JavaScript代码时暂时不需要编辑此文件。

接下来只关注Default.aspx文件中的内容，第一行代码是ASP.NET Web窗体属性以及它和.cs代码文件关联的信息，从<!DOCTYPE html>开始是HTML文档内容，这里的<!DOCTYPE html>是HTML5页面的类型声明。页面默认是XHTML5标准，如果只需要使用HTML5标准，可以在工具栏中选择；此外，还可以在工具栏中选择测试浏览器，如下图所示。

代码标准

ASP.NET Web窗体项目中还有一些特殊目录，我们可以通过网站右键菜单在网站根目录下分别创建如下目录：

App_Code目录，用于存放服务器端代码，可以在不同的子目录中分别使用不同的编程语言，如C#、VB.NET等。目录中的代码会在网站运行时自动编译。
App_Data目录，用于存放服务器端文件，这些文件不能通过URL直接访问，可以有效保护服务器资源的安全。
Bin目录，用于保存项目编译后的文件或引用的第三方库文件（.dll）。

基本的测试环境已经配置完成，现在可以保存解决方案，这里可以将其保存在与网站根目录同级的位置，本文中保存的解决方案名称为aspnet48；完成以上操作后，网站的结构如下图所示。

ASP.NET网站基本结构

接下来讨论HTML与CSS的应用。