03-母板页和站点导航.docx

导言通常，用户友好的个性化站点都有着一致的，站点统一的页面布局和导航体系。A 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具，它们是母板页和站点导航。母板页允许开发者创建统一的站点模板和指定的可编辑区域。这样，aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了，所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局，因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者，这意味着我们的站点地图将定义在一个xml格式的文件中。为说明这些观念并且使我们的教程的示例站点可用性更佳，让我们通过本次课程定义一个站点统一的页面布局，实现一个站点地图，并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。?图1：本课程的最终成果步骤1：创建母板页第一步是为我们的站点创建母板页。到目前为止我们的站点只有一个类型化的DataSet（Northwind.xsd,位于App_Code文件夹），业务逻辑层类库（ProductsBLL.cs,CategoriesBLL.cs等等，这些都在App_Code文件夹里），数据库（NORTHWIND.MDF,位于App_Data文件夹），配置文件（web.config）,和一个CSS文件（Style.css）。我整理这些页面和文件以说明前面两次课程中介绍的数据访问层和业务逻辑层将会在以后课程的更多细节中重用这些示例。?图2：我们项目中的文件要创建一个母板页，用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master?图3：添加一个母板页到站点中在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件，你还可以手动的在代码视图中添加标记。在我们的母板页中使用了定义在外部文件Style.css中的层叠样式表来定义位置和风格。也许你不知道下面这些标记怎样显示，样式表规则定义了导航用的div标签中的内容绝对定位在页面的左边并且宽度固定为200像素。?1%@ Master Language=C# AutoEventWireup=true CodeFile=Site.master.cs Inherits=Site %?2?3!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd/TR/xhtml1/DTD/xhtml1-transitional.dtd?4?5html xmlns=/1999/xhtml/1999/xhtml ?6head runat=server?7titleWorking with Data Tutorials/title?8link href=Styles.css _fcksavedurl=Styles.css _fcksavedurl=Styles.css rel=stylesheet type=text/css /?9/head10body11div id=wrapper1213form id=form1 runat=server1415div id=header16span class=titleWorking with Data Tutorials/span17span class=breadcrumb18???????????????? TODO: Breadcrumb will go here/span19/div2021div id=content22asp:contentplaceholder id=MainContent23???????????????? runat=server24!-- specific content will go here --25/asp:contentplaceholder26/div2728div id=navigation29??????????????? TODO: Menu will go here30/div31/form32/div33/body34/html一个母板页定义了固定的布局和可以被那些使用了母板页的aspx页面填充的可编辑区域这个可编辑区域是通过ContentPlaceHolder控件显示，位于div标记中。我们的母板页中