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 >

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