学步园

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

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

如上图所示，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>

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