vs2005+Access开发网站管理系统日志2

一个好的网站，让人记住的网站，或者值得让人收藏的网站，要么有浏览者想要的东西，要么是网站很漂亮，让人耳目一新。
今天我们布局首页。当然网页的美观不是由开发者决定的，是由美工来设计的，我们不讨论视觉效果，我们只谈技术，呵呵！
在上一篇文章中我们的首页只用母版页的内容。其实母版页就相当我们使用Dreamweaver的模板一样。
然后在首页可以编辑的地方，也就是
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
中间进行页面布局。将下面代码放入上面代码中间：

 <div id="barimage">
        <div id="leftbar">
            <div id="leftbarimage">
              <div id="leftbarimagenone">                
              </div >
              <div id="leftbarimagetext" class="textcontent" style="width: 194px">
                  &nbsp;<asp:Label id="Lcontent" runat="server" Text="此处将从数据库中取数据显示" Width="185px"></asp:Label>
              </div>
            </div>

        </div>
        <div id="rightbar">
            <div id="rightbarimage">
            </div>
        </div>
    </div>
    <div class="nonebar">
    </div>
    <div id="content" style="width: 746px">
        <div id="leftcontent" >
            <div id="leftcontentimage">
            </div>
            <div id="leftcontenttext" class="textcontent" >
                <div align="left">
                    &nbsp;<asp:Label ID="Label2" runat="server" Height="133px" Text="此处将从数据库中取数据显示" Width="237px">
                </asp:Label>
             </div>
             </div>
        </div>
        <div id="centercontent">
            <div id="centercontentimage">
            </div>
            <div id="centercontenttext" class="textcontent">
                &nbsp;<asp:Label ID="Consu" runat="server" Height="133px" Text="此处将从数据库中取数据显示" Width="237px">
                </asp:Label>
             </div>
        </div>
        <div id="rightcontent">
            <div id="rightcontentimage">
            </div>
            <div id="rightcontenttext" class="textcontent">
                &nbsp;<asp:Label ID="Label1" runat="server" Height="133px" Text="此处将从数据库中取数据显示" Width="237px">
                </asp:Label></div>
        </div>
    </div>

然后在CssStyle.css样式表文件中加入以下代码，对首页布局的DIV进行样式布局：
#barimage
{
 width:750px;
 height:auto;
 background-color:#FFF;
}
#leftbar
{
 width:215px;
 height:auto;
 float:left;
 clear:right; 
}
#leftbarimage
{
 height:235px;
 background-image:url(images/wzggbg.gif);
 background-repeat:no-repeat; 
}
#rightbar
{
 width:533px;
 height:auto;
 float:left;
 clear:right;
}
#rightbarimage
{
 height:234px;
 background-image:url(images/banner.jpg);
 background-repeat:no-repeat;
}
#leftbarimagenone
{
 width:215px;
 height:55px;
}
.textcontent
{
 white-space:normal;
 width:180px;
 text-align:left;
}#content
{
 width:750px;
 height:auto;
 background-color:#FFF;
}
 #leftcontent
{
 width:34%;
 height:100px;
 float:left;
 clear:right;
 background-color:#FFF;
}
#leftcontentimage
{
 height:30px;
 background-color:#FFFFFF;
 background-image:url(images/tbbg1.gif);
 background-repeat:no-repeat;
}

#centercontentimage
{
 height:30px;
 background-color:#FFF;
 background-image:url(images/tbbg2.gif);
 background-repeat:no-repeat;
}
#rightcontentimage
{
 height:30px;
 background-color:#FFF;
 background-image:url(images/tbbg3.gif);
 background-repeat:no-repeat;
}

#rightcontenttext
{
    height:auto;
    background-color:#FFF;
    background-repeat:no-repeat;
}

#centercontent
{
 width:34%;
 height:100px;
 float:left;
 clear:right;
 background-color:#FFF;
 }
#rightcontent
{
 width:32%;
 height:100px;
 float:left;
 clear:right;
 background-color:#FFF;
}
此时运行程序就可以看到漂亮的页面了！
不过发现页面的标题是：Untitled Page，这是因为我们没有设置，我们打开MasterPage.master页面设计器，然后在属性窗口中定义DOCUMENT的属性Title的值为：<%=vTitle %>，当然要在MasterPage.master.cs中加入定义：public string vTitle;。实际上就是定义一个变量，当加载母版页时从数据库取出网站标题赋值即可。从我们的首页定义中发现有这样几句话：“此处将从数据库中取数据显示”，是的，因为现在还没有与数据库交互，只是临时先把将来要从数据库提取数据显示的位置放入一个标签说明一下而已。