很早就打算把学习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> <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,然后将些页面设置为起始页。
此时运行就可以看到漂亮的页面了,只是只有头和脚,没有其它内容。