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

很早就打算把学习VS2005+ACCESS开发网站的学习体会记录下来,方便自己将来查阅,也给想要学习的朋友抛砖引玉。
今天终于开始了,呵呵,希望大家支持  !
首先打开VS2005,单击VS2005的起始页,单击创建网站,在弹出的窗口中,选择ASP.NET网站,位置:E:\webproject\VsDemo使用文件系统,语言使用Visual C#,然后确定。在开发时我们尽量使用CSS+DIV来布局网站。使用VS2005的MasterPage.master母版页功能。
在解决方案资源管理器窗口中选中我们创建的VsDemo网站单击右键,选择添加新项,然后选择母版页,使用默认的名字:MasterPage.master。
继续上面的步骤,创建一个样式表文件,命名为:CssStyle.css
接下来布局母版页,对于一般的网站头部分和脚部分都基本不变,因为我们把母版页上的ContentPlaceHolder1删除,并使用CSS+DIV来布局母版页,然后在需要内容变动的地方再放入控件ContentPlaceHolder1。DIV布局代码如下:
<div>
        <div>
         <div id="header">
            <div id="leftheader">
                <div id="leftheaderlogo">
                </div>
            </div>
            <div id="rightheader">
                <div id="HeaderMenu">
                    <ul style="width: 94px">
                        <li style="width: 26px"><a href="#">首页</a> </li>
                        <li style="width: 26px"><a href="#">关于</a> </li>
                        <li style="width:26px"><a href="#">留言</a></li>
                    </ul>
                </div>
                <div id="rightheadermenu">
                    <div class="m1">
                        <p class="navtext">
                            <a href="news.aspx">最新动态</a></p>
                    </div>
                    <div class="m1">
                        <p class="navtext">
                            <a href="#">顾问案例</a></p>
                    </div>
                    <div class="m1">
                        <p class="navtext">
                            <a href="#">项目合作</a></p>
                    </div>
                    <div class="m1">
                        <p class="navtext">
                            <a href="#">产品展示</a></p>
                    </div>
                    <div class="m1">
                        <p class="navtext">
                            <a href="#">人才招聘</a></p>
                    </div>
                    <div class="m1">
                        <p class="navtext">
                            <a href="#">联系我们</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
    <div id="ContentHoler" style="height: 208px">   
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
     </div>
        <div class="nonebar">
        </div>
        <div id="footer">
                    Copyright (C) 2006-2007 中锋计算机顾问工作室,All rights reserved.<br />
            程序开发:<a href="mailto:shaoyinzhong@gmail.com">邵印中</a> &nbsp; <a href="http://www.miibeian.gov.cn"
                    target="window_name">粤ICP备05130688号</a>

            <script language="javascript" src="http://count23.51yes.com/click.aspx?id=230347428&logo=1"></script>

            <br />
            本网站LOGO由[周六阳光]设计,特此感谢! 
 
        </div>
    </div>
   </div>
在网站项目目录下创建一个Images目录用于存放图片文件。
添加两个图片文件:logo.gif(网站LOGO)menubak.gif(菜单背景)
下面开始对DIV定义,打开CssStyle.css文件,输入如下定义:


body
{
 font:12px Tahoma;
 margin:0px;
 margin-top:0px;
 margin-bottom:0px;  
 text-align:center;
 background-color:#EDF8DD;
}

a:link, a:visited {color: #87D324;text-decoration: none;margin:0; padding:0; }
a:hover, a:active{color:#000000;text-decoration: none;background-color: #FFCC33;margin:0; padding:0;}

#HeaderMenu
{
 background-color:#FFF;
 width:535px;
 margin:0 auto;
}


#HeaderMenu ul
{
 width:auto;
 float:right;
 list-style:none;
 margin:0px;
}

#HeaderMenu ul li
{
 float:left;
 margin:0 2px;
 display:block;
 line-height:22px;
}


#header
{
 width:750px;
 height:91px;
 background-color:#FFF;
}
#leftheader
{
 width:215px;
 height:91px;
 float:left;
 clear:right;
}
#leftheaderlogo
{
 width:215px;
 height:91px;
 background-image:url(images/logo.gif);
 background-repeat:no-repeat;
}

#rightheader
{
 width: 535px;
 height: 73px;
 float: left;
 clear: right; 
}

.m1{width:89px;height:60px;float:left;clear:right; background-image:url(images/menubak.gif); background-repeat:no-repeat;}

.navtext
{
 color:#FFF;
 font-family:宋体;
 font-weight:bold;
 font-size:14px;
 text-align:center;
    text-indent:4;
    position:relative;
    top:10px;   
}
#rightheadermenu a:link,#rightheadermenu a:visited {color: #FFF;text-decoration: none; padding-top:3px;}
#rightheadermenu a:hover,#rightheadermenu a:active{color: #000000;text-decoration: none;background-color: #FFCC33;}

/*
动态内容CSS定义
*/
#ContentHoler
{
 width:750px;
 height:400px;
 background-color:#FFF;
}
/*
页脚内容CSS定义
*/
#footer
{
 color:#FFF;
 width:750px;
 background-color:#87D324
}

#footer a:link,#footer a:visited {color:#FFF;text-decoration: none;margin:0; padding:0; }
#footer a:hover,#footer a:active{color:#000000;text-decoration: none;background-color: #FFCC33;margin:0; padding:0;}

CssStyle.css拖入母版页,即让母版页引用样式表文件。
然后删除默认创建的default.aspx,再创建新的并选择使用母版页,并命名为:Default.aspx,然后将些页面设置为起始页。
此时运行就可以看到漂亮的页面了,只是只有头和脚,没有其它内容。

posted on 2008-03-05 20:10  邵印中  阅读(386)  评论(0编辑  收藏  举报

导航