2024年2月26日发(作者：)
2.0入门经典(第4版)
2.1 总体设计目标
在开始开发Web站点之前，通常应该设想好站点所具有的功能；例如，一个博客(blog)站点，必须能够对帖子进行分类存储、向帖子添加评论，还需有进行管理的模块，这些是最少的功能。另外，考虑一个简单的零售商店，它想进入电子商务领域，它希望通过Web站点让客户浏览并购买商品。在着手开发任何一个站点之前，都必须仔细地考虑和设计，之后才能编写代码实现站点。
在开始讨论具体技术的实现时，我们应先讨论如何使用 2.0服务器端控件所支持的功能开发设计良好的站点。毕竟，创建、使用和维护经过良好设计的站点要容易得多，而且维护费用更低。
本章将介绍以下概念：
●
怎样启动站点的设计流程，并在开始编写代码之前考虑站点的所有需求。
●
使用Master和Content页面实现站点的一致外观，这是 2.0最重要的新功能。
●
创建站点地图，该地图表明站点中存在哪些页面，以及这些页面在层次上与其他文件是什么关系。
●
使用和文件保存数据和代码的全局配置，这些配置将用于站点的所有页面。
在本章的结束部分有一些练习可以帮助加深对这些概念的理解。
1.1 总体设计目标
设计一个功能完整的Web应用程序是一项很复杂的任务。如果是开发自己的站点，可能对站点是什么样子考虑得已经很多很具体了，所以在开始编写代码之前知道自己要做什么。然而，如果是为客户开发站点，就必须确保在站点的设计上与客户在各个细节上达成高度的一致。在一个专业的开发环境中，这个过程通常包括如下步骤：
●
开发一个功能模型，该模型描述站点的具体运行情况。当用户单击Log In按钮时会发生什么事情？当用户想浏览产品时哪些功能是可用的？在开始设计之前，需要回答这些问题以及其他很多问题，以免最后开发出来的站点不是客户想要的！
●
确定在实现站点的过程中可以使用的技术。很多主机软件包对数据库的支持都有不同程度的限制，进而限制站点的总体大小，所以要尽早讨论这个问题并确保能使用所希望使用的技术。
●
开发一个技术说明书，描述怎样实现所需的功能。例如，对于博客站点，当用户单击按钮发布新帖子的时候，如何确保将用户输入的文本保存到数据库中？描述要尽可能地详细，因为以后维护这个站点的人很可能不再是当初的开发人员。
这似乎需要做很多工作，但即使是对比较小的企业或者单个贸易承包人，遵循这个流程将帮助开发人员和客户保持良好的合作关系，并为将来和客户以及客户的朋友或商业伙伴继续合作打下基础。
从一旦业务端进入实现阶段，就要开始考虑如何实现这个应用程序，如何使得站点的设计符合客户的需求。创建Web应用程序并不仅仅要求能正确地使用 2.0服务器端控件，因为网页的具体设计和布局也同样重要。
注意，术语设计(design)有两层意思。第一层意思是对色彩和布局做出选择，这通常由站点的美工人员完成。第二个定义包括站点的智能结构和各个部分之间的协作关系。这包括为信息的体系结构制定计划；作为开发人员，您希望在关系数据库中保存尽可能多的信息。本章专注于第二种定义。下一章介绍怎样混合使用HTML和控件设计站点中的每个页面。
Wrox United示例站点的如下几个总体设计目标是在本章中实现的：
●
在开发过程中尽可能使排查问题变得容易，以便简化追踪错误的过程。
●
设置站点在部署后处理错误的标准。
●
为所有页面创建一致的外观。
注意：
其他总体设计目标将在本书的后续章节中讨论，包括鉴别会员的登录系统界面(第4章)、为站点设置统一的样式和主题风格(第5章)和在数据库或XML数据文件中获得尽可能多的信息(第7和第8章)。
2.2 Master和Content页面
站点具有一致的外观有很多好处，在Internet上很少看到没有统一布局的站点。统一的布局通常包括以下内容：
●
一个公共标题和整个站点的菜单系统。
●
页面左边的导航条，提供一些页面导航选项。
●
提供版权信息的页脚和一个用于联系网管的二级菜单。
这些元素将显示在所有页面上，它们不仅提供了最基本的功能，而且这些元素的统一布
局也使得用户意识到他们仍处于同一个站点内。虽然这种外观可以使用在HTML中包含文件的方式创建，但是 2.0通过Master和Content页面机制提供了更强健的工具。
Master页面定义了所有基于该页面的网页使用的布局。它是页面布局的最高控制，指定了每个页面上的标题应该多大、导航功能应该放置在什么位置、以及在每个页面的页脚中应该显示什么内容—— 有些类似每个页面的形状切割插件(cookie cutter)。Master页面包含了一些可用于站点中所有页面的内容，所有可以在这里定义标准的版权页脚，并将站点的主要图标放置在页面的顶部。一旦定义好Master页面的标准特性之后，接下来将添加一些占位符(placeholder)—— 页面上的命名区域，这些区域将包含不同的页面。
每个Content页面都以Master页面为基础，开发人员将在这里为每个页面添加具体的内容。Content页面包含文本、HTML和位于
图 2-1
幸运的是，构造这一体系的重担由 2.0承担；开发人员只需创建下面两个小节中讨论的Master和Content页面即可。
2.2.1 创建Master页面
要创建Master页面，可以在VWD的Solution Explorer中右击根目录，选择Add Item，并将类型指定为Master Page。默认情况下，新Master页面的名称是，位于站点的根目录中。Master页面由三部分组成。
首先是一些基本的标记(tag)和标志(例如Master页面的标志，DOCTYPE、xmlns、html和head标记)，所有已显示出来的页面都会包含这些内容。这些内容在Master页面中只输入一次，以减少重复工作。DOCTYPE和xmlns指示服务器可以从何处查看页面中所使用的标记的定义。注意这些标记不会出现在Content页面中：
<%@ master language="VB" %>
"/TR/xhtml1/DTD/">
/>
其次，Master页面中有一个用于存放脚本的区域，这些脚本可以在所有的页面上运行(例如，Page_Load的代码，该事件在页面每次加载的时候都会运行)，例如：
第三，Master页面包含一些HTML布局、开始/结束标记 ContentPlaceHolderID=“xxx”>和。包含在Content页面中的内容将放置在这些标记之间。例如：
总结一下，每个Master页面都必须包含如下元素：
●
基本的HTML和XML输入标记
●
第一行是<%@master…%>
●
带有ID的
现在，Master页面可以作为容器包含其他页面了。下一节中将创建一些Content页面。
2.2.2 创建Content页面
与 2.0一样，VWD也减少了开发人员的输入。在Solution Explorer中，右击根目录并选择Add New Item。通常选择Web Form；Content页面没有特定的模板。注意对话框底部的Select master page(如图2-2所示)复选框。当选中该复选框并单击Add按钮时，VWD将显示另一个对话框，询问为新的Content页面选用哪个Master页面。
图 2-2
在如图2-3所示的对话框中，开发人员可以选中要使用的Master页面。选中Master页面(通常命名为)并单击OK。
图 2-3
VWD在这个Content页面中设置了两个值。在Design视图中看不到这两个值，但切换到Source视图就可以看到它们，如下面的代码所示。首先，所使用的Master页面将在第一条指令中说明。其次，VWD将在这个页面中放置一个
<%@ Page Language="VB" MasterPageFile="" %>
ContentPlaceHolderID="Content Place Holder ID in Master Page" Runat="Server"> ... content goes here
总结一下，一个Content页面包含如下特性：
●
没有HTML的标记和XML的标记
●
第一行的<%@ page MasterPageFile=…%>指示 2.0应使用哪个Master页面
●
包含一个
理论上并不难，而且代码由VWD自动添加。在下面的示例中，可以看到Master和Content页面的相互协作。
2.2.3 Master和Content页面的示例
本书中的所有练习基本上都可以在Design视图中完成(不用直接处理代码)。但是切换到Source视图查看VWD如何创建页面是一件很有趣的事情。下面显示的代码是一个公司的Master页面(名为)和一个名为mission statement的Content页面示例。第一行阴影代码指示Master页面，在第二个阴影部分是一个控件，该控件定义了一个内容占位符，Content页面的内容可以插入到这个占位符中：
<%@ Master Language="VB" %>
"/TR/xhtml11/DTD/">
Corporation Name
下面是该示例中Content页面的代码。灰色部分指示了Master页面和描述插入到Master页面中的内容的控件。ContentPlaceHolder的ID必须匹配Master页面中的ContentPlaceHolder的ID。下面的代码是完整的；页面的顶部不包含其他标记或属性：
<%@ Page Language="VB" MasterPageFile="~/" Title="Untitled
Page" %>
ContentPlaceHolderID="ContentPlaceHolderMissionStatement" Runat="Server"> Our Mission Statement is to provide value to the customer.
注意Content页面必须包含一组最小化的标记。Content页面中没有或者等标记，也不会包含
信息。这些数据由Master页面提供。2.2.4 在Master页面中使用级联样式表
在Master页面中声明到级联样式表(Cascading Style Sheet，CSS)的链接是一个不错的选择。CSS是HTML的特性，而不是 2.0的特性，所以本书没有深入讨论这个主题。然而，CSS将在第5章中和相关主题一起讨论。在附录E中还有HTML和CSS的简单参考。简而言之，CSS包含了用于页面和控件的各种样式的格式，因此页面在显示时，其上面的所有元素、文本和按钮以及链接的风格等等，都会根据CSS中定义的格式显示。有了CSS，设计人员就可以少用(并维护)很多使用很频繁的单个样式格式标记。CSS还可以加快页面的加载速度，因为CSS在浏览器中只加载一次，当需要重复使用时，可以直接使用保存在客户端缓存中的CSS。在一个Master页面中，应该在
部分包含一个类似如下的链接(灰色部分代码)从而将页面和CSS链接在一起：runat="server" />
在下面的“试一试”部分，您将有机会创建Wrox United站点的Master页面。在本书每一章的练习中，您都将为站点添加内容和功能。现在只需要简单地创建Master页面的架构。在本书的后续章节中将为Master页面添加其他部分，所以现在该文件看起来还不是很完整，暂时不用关注这个问题！
(1) 打开本章的示例站点，目录是C:BegASPNET2ChaptersBeginChapter02。首先导入一个作者创建的CSS文件。右击站点的根目录并选择Add Existing Item，如图2-4所示。
图 2-4
(2) 导航到存放本书下载文件的文件夹(C:BegASPNET2WroxUnited)，选择并单击Add。CSS是HTML的主题(不是的)，但是如果打开该文件，将可以看到为HTML编写的样式集，例如
、等。不必修改该文件。可以看到在Solution Explorer内显示的文件列表中已经包含了文件。如果打开了这个CSS文件，请关闭它。
(3) 再次右击根目录，但这次选择Add New Item并使用Master Page模板。将该页面命名为。确保Select master page复选框没有选中(这个选项只用于Content页面)。在VWD创建该页面之后可以在Design视图中查看它，不过现在它是一个空页面。注意，在Source视图中可以看到VWD已经添加了几个标记和控件(查看如下代码)。第一个标记是一个指示符，表明这是一个Master页面，而第二个标记是普通的文档类型指示符。接下来是一个插入脚本代码的位置，然后是一个XMLNS值。可以看到，VWD在
标记内创建了一个contentplaceholder控件：<%@ master language="VB" debug="true" %>
"/TR/xhtml1/DTD/">
...