基于DIV+CSS的企业网站设计与实现
2011-05-14李冬芬司明伟王秀英
李冬芬 司明伟 王秀英
摘要：随着Web标准在国内的逐渐普及以及很多业内人士的大力推广，很多网站已经开始重构。Web标准的提出将网页的内容与表现分离。本文给出了一种基于DIV+CSS技术企业网站的建设方案，提高了网站的制作效率，减轻了客户端下载负担，使网站得以可靠正常的运行。
引言
在以前传统的网站建设中，基本上使用表格进行制作，制作出的网站不完美，修改非常麻烦，不能很好的适应浏览器，下载速度慢。CSS的出现基本解决了这些问题。CSS[1]技术不但可以控制网页中的字体大小、页面宽度、页面内容靠左靠右、字体样式、超链接鼠标事件样式、网页中内容板块间隔等样式，而且CSS几乎在所有的浏览器上都可以使用，还可以轻松实现图片下载到页面，对字体的设计可使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目，灵活的控制页面的布局，同时很好的解决了许多网页的风格格式同时更新。
本文通过在网站制作中应用基于DIV+CSS技术，提高了网站的制作效率，减轻了客户端下载负担，使网站得以可靠正常的运行[2]。
1 企业网站总体设计
该文在研究过程中开发了一个基于DIV+CSS的中小型商业网站，系统功能框图如图1所示。网站建设大体分为：基于LOGO和导航条模块、网站主体展示模块和底部信息模块。使用DIV匡架代替传统的Table表格可以轻松的设计出来，而且便于维护时对结构的修改与美化。CSS样式的使用可以更加智能的对网站进行细节化设计，而且会大量减少代码重复问题，方便对公共部分功能的调用，也使网站的下载速度加快。
2 网站模块详细设计
2.1 导航条的制作
结构代码：
CSS代码：
#nav { width:1000px;height:40px;background-image:url(../images/nav_03.jpg);}
#nav ul li{display: inline;}
#nav ul li a{float: left;color: #FFF;padding: 2px 48px;line-height:36px;text-decoration: none;
background: transparent url(../images/nav_05.jpg) center right no-repeat;}
#nav ul li a:visited
{color: #fff;}
2.2 图片轮换模块设计
结构代码：
CSS代码：
#album{/*相册*/position:relative; width:307px; height:197px;overflow:hidden;/*隐藏tip*/}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width:334px;height:252px; overflow:hidden;/*重点，让每次只显示一张图片*/}
#album img {border:0px;}
#album dd {/*翻页栏*/
position:absolute; right:0px; bottom:0px;}
#album a {
display:block;/*让其拥有盒子模型*/float:left;margin-right:1px;/*错开格子*/
width:18px;/*呈正方形*/height:18px;line-height:15px;
text- align:center;/*居中显示*/text-decoration:none;/*消除下划线*/
color:#808080;background-color:#2b453c;}
#album a:hover ,#album a.hover{
color:#F8F8F8;background-color:#dd291b;background-position:0 0; }
2.3 底部信息模块设计
一般底部信息模块主要是联系方式的设计，所以在每个网页中都会显示相同的内容。
结构代码：
CSS代码：
#footer {width:1000px;height:80px;clear:both;margin-top:15px;
margin-bottom:10px;background-image: url(../images/dibian.jpg); }
#footer_details { width:800px;height:50px;margin-top:20px;}
#footer_details p { font-size:12px;color:#000;text- align:center;line-height:20px;}
3 结论
本文给出了DIV+CSS技术[3]在网站中的应用。对网站主体展示模块进行细节化设计与研究，例如对DIV水平排列时需要我们对层进行浮动或定位设置，还有就是文字内容包围图片的效果等都需要我们不断地开发与研究。为丰富网站的展示效果，有时我们也会用CSS设置出图片轮换的效果等特殊效果。总之，DIV+CSS的发展将会快速主导整个这个网站的前台开发。
参考文献
[1] 唐四新基于Web标准的网页设计与制作—北京：清华大学出版社，2009.12
[2] 李烨别具光芒 DIV+CSS 页面布局与美化 人民邮电出版社2006.8
[3] 黄军宝网站设计指南 通过Dreamweaver CS3学习HTML+DIV+CSS 北京科海电子出版社 2008.2
作者简介：
李冬芬（1969-），女，辽宁省朝阳市人，辽宁工程技术大学，讲师，硕士，研究方向：网络编程及数据库技术。
