深圳软件界面设计|网页设计|UI界面设计
一种快速div+Css网站建设的方案
>>网站源码下载
从2004年开始做网站，算起来有几年了，之前一直用老的table方式在dreamwear 中布局，自认效率不错，能混个饭吃。后来大家都说CSS好呀，心里便有了比较，初步了解后发现用css方式做，建站速度会快很多，而且样式也比较容易控制，维护成本降低。css看似简单，但我学css也经历了两个比较长的过程，从开始的“table和css混用” 阶段到用“css布局全页和定制页面细节” 阶段。第一个阶段我徘徊了很久，原因主要是网页设计项目周期短，且没掌握css，不敢尝试用css方式做站。进入第二阶段，还是最近一个月的事情。公司最近不忙，所以有时间到书店卖了本《css实战手册》(俞黎敏译)，仔细的看了一遍，理清了css做站的思路。终于在2007年一个漆黑的夜里，用css+div方式制作了一个完整网站，完成后顿有种蜕茧成蝶的愉悦。下面从实践角度，简要说明下此站制作过程。旨在表达：每个人都可以用css做出自己想要的站。
1、网站规划和版式确定
待建网站是一个工作室性质的网站，建站目的是通过网站能接到更过网站建设的项目。所以这次设计是美观和seo并重。
布局上采用了左右2列样，并把重要的内容放置在页面左侧。构建草图（如图1所示），网站版块分为网站头部区、网站主要内容区，网站侧栏区，网站底部区4个大区域。确定了每个区域要表达内容。
图 1 区域设计草图
颜色方面选择红色和黑色为主色调，红色给人热烈、视觉冲击，黑色给人沉稳科技的感觉，所以定义了如下颜色表。
图 2 颜色表
将布局方式和网站主色调结合，可以模拟设计出首页效果图（图3）。网页设计中，设计效果图很重要，这样可以保证在布局时思路清晰，节省时间。（如果没彩图，至少有个草图以供布局）
图 3 首页效果图
并将首页效果图中logo 及背景分割成小图保存
图4 Logo图
图5 主题宣传背景图
图6 网站主要背景图
2、布局网站框架
根据首页效果图（图3）设定css布局 id如下：
1、顶部区， id=banner；
2、主要内容区 id=main；
3、侧栏区 id=sidebar；
4、底部区 id=footer；
按照id顺序，在<body>与</body>之间插入如下代码：
<div id="wrapper"> //（整个外部大框架）
<!—顶部区开始 -->
<div id="banner">banner内容</div>
<!—侧栏区开始 -->
<div id="sidebar">sidebar内容</div>
<!—主要内容区 开始-->
<div id="main">main内容</div>
<!—网站底部区 开始-->
<div id="footer">footer内容</div>
</div>
接着通过在<style type="text/css"></style>中定义css类来控制每个区域具体位置，如下：
//外部大框架定义
#wrapp{
text-align:left;
}
//头部定义
#banner {
background: url(../images/bg/banner_bg.jpg) repeat-x left top; //头部大区域背景
height:105px;
position: relative;
border: 1px solid black;
margin-bottom:0.7em;
}
//主要内容区
#main{
width:740px; //整个左侧内容区域的宽度
float:left;
margin-left:2px;
}
#sidebar{
margin-left:745px;
width:170px;
}
//网站底部区
#footer {
clear:both; //将左右浮动清除掉，显示到页脚
margin-top: 15px;
border-top: 1px dashed #666666;
padding: 5px 0 0 5px;
text-align:center;
}
这样完成div布局。
3、内容细节样式实现
对内容区（左）和侧栏区（右）细分为6个子区，其中内容区包含1、2、3区，侧栏包含4、5、6区，如下图（图3）所示
图 7 局部细化图
从上图转化div id如下：
右侧
1、Div id=”ideashow” //主题宣传区
2、Div class=”thirds” //业务介绍区 ，3个并排放置
3、Div id=”success_case” //成功案例区
左侧
4、Div id=”webprice” //网站建设套餐区
5、Div id=”ideashow” //网站建设解决方案区
6、Div id=”severlist” //业务导航区
顶部区
7、Div id=”severlist” //logo区
8、Div id=”severlist” //主导航区
将左侧div（1、2、3）顺序写好放入<div id=”main”></div>中间
<div id=”main”>
<div id="ideashow">待填文案</div>
<div class="thirds">待填文案</div>
<div class="thirds">待填文案</div>
<div class="thirds">待填文案</div>
<div id="succeed_case">待填文案</div>
</div>
将右侧div（4、5、6）顺序写好放入<div id=”sidebar”></div>中间
<div id="sidebar">
<div id="webprice">待填文案</div>
<div id="logo">待填文案</div>
<div id="severlist">待填文案</div>
</div>
将顶部div（7、8）顺序写好放入<div id=” banner”></div>中间
<div id="banner">
<div id="logo">待填文案</div>
<div id="nav">待填文案</div>
</div>
并在<style type="text/css"></style>定义样式如下
//网站建站主题介绍区
#ideashow{
background:url(../images/banner/idea-show.jpg) no-repeat ; /*背景*/
border:1px #999999 solid;
line-height: 1.2em; /*行间距为基准字体的1.2倍*/
height:144px; /*区域高144px */
padding:2px;
margin-bottom:9px;
}
//主题宣传区标题定义
#ideashow h1 {
margin: 0px;
padding: 5px 0 2px 5px;
font-size: 12pt;
color:#999999;
}
//主题宣传区文字定义
#ideashow p {
margin: 0;
padding: 0 0 0 5px;
width: 260px;
color:#999999;
}
//主要业务介绍区
.thirds {
float: left;
width: 225px;
padding: 0 7px 0 10px;
}
//成功案例区
#succeed_case{
clear:both;
margin-top:2em;
margin-bottom:2em;
}
.figure {
float: left;
width: 156px;
margin: 0 10px 10px 10px;
}
.photo {
background:url(../images/background/drop_shadow.gif) no-repeat right bottom; //照片阴影背景,参照图6
}
//细化背景阴影效果
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
/* IE 5/6 border erase bug */
* html #gallery {
width: 100%;
}
/* IE 5 placement bug */
* html #gallery img {
width: 100%;
}
#succeed_case h1{
margin-bottom:2em;
}
//侧栏区
#sidebar{
margin-left:745px; //左侧浮动形式
width:170px; //宽度为745px；
}
//网站建设套餐区
#webprice li{
border:solid 1px #FF6600;//桔黄色边框
list-style-type:none;
padding-left:1.2em;
margin-top:2px;
line-height:2em;
display:block;
}
#sidebar h2{
margin-top:0.5em;
margin-bottom:0.5em;
}
//黑色背景标题栏定义
.blacktitle{
padding: 7px 0 7px 5px;
font: bold 1em ;
margin: 0 0 3px 0;
color:#FFFFFF;
}
//网站建设解决方案区
#solution{
border:solid 1px #CCCCCC;
padding:2px;
}
#solution p{
padding-left:9px;
}
#solutionserver li{
padding:8px 5px;
text-align:center;
border-bottom:dotted #666666 1px;
}
//网站顶部区
#banner {
background: url(../images/bg/banner_bg.jpg) repeat-x left top; //黑色背景，参照图6
height:105px;
position: relative;
border: 1px solid black;
margin-bottom:0.7em;
}
//logo区
#logo{
background:url(../images/background/header_bg.gif) top center repeat-x; //logo背景，参照图6
}
//主导航区
#nav {
margin-bottom: 0px;
position: absolute;
background:url(../images/background/nav_bg.gif) top left repeat-x;// 参照图6
height:30px;
width:100%;
top: 75px;
left: 0px;
}
//主导航鼠标点击样式
#nav ul{
padding-left:5em;
padding-top:0.5em;
}
#nav li {
list-style-type: none;
padding: 0px;
margin: 0;
float: left;
}
#nav a {
display: block;
font-size: 1.1em;
color: #D6ECAE;
font-weight: bold;
text-decoration: none;
padding: 2px;
margin:2px 8px;
letter-spacing:1px;
}
#nav a:hover {
background:#FFFFFF;
color:#000000;
}
此时基本上将主页细节样式定义完整（如有遗漏请参看提供的源码）。
4、网站文案制作
新建了一个txt文档，写网站文案。内容主要是导航条、首页文字介绍、首页栏目导航等。文字性的内容主要是以下两种形式组成：
形式一：内容介绍型，适用范围：文章内容展示（局部细化图1、2区域）。
<h1>网站建设</h1> //也可以是h2，h3…
<P>深圳网站建设中心35blue，帮您成功实施以需求和网络营销为导向的网站服务…</P>
形式二：项目列表型，适用范围：导航条，文章列表等（局部细化图3、4、5、6区域）。
<h1>网站套餐</h1>
<ul>
<li>网站建设1000元套餐</li>
<li>网站建设2000元套餐</li>
<li>….</li>
<ul>
按此形式，做好文案，对号入座填入div区域中，便完成文字的填充。
结束语
至此网页基本已经完成。我的制作流程与思路就是这样，鉴于水平有限，请大家指正！并有附整站源码以供大家交流。
CSS实战技术交流blog: www.free-css.cn
