ASP.NET2.0网站开发（6）开发母版页

上一节简单的介绍了几个能够使用到的控件，本节进行开发，在网站图形设计及色彩搭配方面，因个人水平限制，不在开发之列。

首先介绍母版页的开发，母版页是一个静态文件，除了为派生页预留的占位符外，其它的部分均可自己设计，根据喜好对网页的头部及其它网页的共用部分进行编写。

如上图所示，ContentPlaceHolder1是派生页所预留的占位符，设计时它位于LoginView1的下方，运行时将出现在LoginView1的右方，与其平行（环境限制，我的几台计算机上都是这样，但在VS2005下是在右方的，原因不详），其它部分则为设计控件。

在母版页的顶部为一个Table，来固定图片一类的显示位置

1          < table  class ="titlebar"  style ="background-image: url(images/bg_2.gif);" >
2              < tr >
3                  < td >
4                      < h2 >< font  color ="white" > 测试标题 </ font ></ h2 ></ td >
5                  < td ></ td >
6              </ tr >
7          </ table >
8

如果标题中有图片或Flash一类的东西，可以直接在这里使用。

紧接着再使用了一个Table，为单行多列，分别放置了SiteMapPath、LoginName、LoginStatus等控件，以此来方便用户的登录及操作：

 1          < div  class ="navbar" >
 2              < table  width ="100%" >
 3                  < tr >
 4                      < td  style ="width: 641px" >
 5              < asp:SiteMapPath  ID ="SiteMapPath1"  runat ="server" >
 6              </ asp:SiteMapPath >
 7              < asp:SiteMapDataSource  ID ="SiteMapDataSource1"  runat ="server"   />
 8                      </ td >
 9                      < td  style ="width:120px;" >
10                  < asp:LoginName  ID ="LoginName1"  runat ="server"   />
11                      </ td >
12                      < td  style ="width:60px;" >
13                  < asp:LoginStatus  ID ="LoginStatus1"  runat ="server"   />
14                      </ td >
15                      < td  style ="width:160px" > 建议分辩率: 1280*1024 </ td >
16                  </ tr >
17              </ table >
18          </ div >
19

以上两行设置完成后，接下来的是稍复杂一点的地方了，左边是登录或导航，右边是派生页的占位符，具体位置控件参考CSS

 1          < div  class ="leftbar" >
 2              < table  width ="100%"  class ="spaceborder" >
 3                  < tr >
 4                      < td  class ="altbg2" >
 5              < asp:LoginView  ID ="LoginView1"  runat ="server" >
 6                  < LoggedInTemplate >
 7                      < asp:TreeView  ID ="TreeView1"  runat ="server"  DataSourceID ="SiteMapDataSource1"  ShowLines ="True"
 8                         Width ="100%" >
 9                          < LeafNodeStyle  NodeSpacing ="0px"   />
10                      </ asp:TreeView >
11                      < br  />
12                     
13                  </ LoggedInTemplate >
14                  < AnonymousTemplate >
15                      < asp:Login  ID ="Login1"  runat ="server"  Width ="100%" >
16                          < TextBoxStyle  Width ="100px"   />
17                          < LabelStyle  Width ="60px"   />
18                      </ asp:Login >
19                  </ AnonymousTemplate >
20              </ asp:LoginView >
21                      </ td >
22                  </ tr >
23              </ table >
24          </ div >
25          < div  style ="float:right;clear:both;    margin-left:2px;" >
26              < table  class ="spaceborder"  cellpadding ="0"  cellspacing ="0" >
27                  < tr >
28                      < td >
29                          < asp:ContentPlaceHolder  id ="ContentPlaceHolder1"  runat ="server" >
30                          </ asp:ContentPlaceHolder >
31                      </ td >
32                  </ tr >
33              </ table >
34          </ div >

从上面的代码可以看出，在左边放置了一个LoginView控件，内部设置了两个模板，未登录时所使用的AnonymousTemplate模板及登录用户才能看到的LoggedInTemplate模板，也就是说，没有登录的用户只能看到AnonymousTemplate，我在这个模板里面放置了登录控件Login，只有登录后才能见到LoggedInTemplate模板放置了我想让用户登录后才能看到的导航TreeView，它所使用的数据源与SiteMapPath的是同一个数据文件Web.sitemap：

<? xml version="1.0" encoding="utf-8"  ?>
< siteMap  xmlns ="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"   >
   < siteMapNode  url ="~/Default.aspx"  title ="首页"   description ="首页" >
     < siteMapNode  title ="数据管理项" >
       < siteMapNode  url ="~/DataList.aspx"  title ="数据维护"   description ="可以新增、修改及删除数据"   />
     </ siteMapNode >
     < siteMapNode  title ="导出数据项" >
     </ siteMapNode >
   </ siteMapNode >
</ siteMap >

文件中很明显的定义了两个页面，首页的Default.aspx及数据维护页面DataList.aspx，如需要有其它的功能，可以直接在此文件内增加对应的数据，导航控件可直接使用。

执行的流程为：用户打开程序时，将显示Default.aspx页面，页面显示LoginView的AnonymousTemplate模板中的Login登录控件，LoginName显示空白，LoginStatus显示为“登录”，在用户正确登录后，页面将显示LoginView的LoggedInTemplate模板内的TreeView导航信息，LoginName显示当前登录的用户名称，LoginStatus显示为“退出”链接，点击时将返回到未登录状态。

页面的底部可以相应的再设置信息及色块，以达到平衡的目的：

     < div  class ="bottombar"  style ="vertical-align:middle;" >
         < h3 > 龙少爷的 Blog </ h3 ></ div >

经过上面的几项设置，整个页面布局已经大致确定，剩下的就是开发派生页了。