网页表格布局方式和DIVCSS布局方式比较研究.docVIP

网页表格布局方式和DIVCSS布局方式比较研究 　　【摘 要】本文对网页表格布局方式和DIV+CSS布局方式进行了比较，并举出实例进行对比。DIV+CSS区别于传统的表格定位的形式，用最简洁的代码实现精准的定位，也方便维护人员的修改和维护。DIV+CSS这种网页布局方式已经逐步替代传统的表格布局方式。 　　【关键词】网页；布局方式；表格；DIV+CSS 　　随着网络技术的迅速发展，网络也逐渐地融入到了人们的日常生活、工作和学习中。互联网上各种网站和基于Web的应用大量涌现，这些都需要用最基本的网页进行呈现。网页布局设计指的是根据网站内容和建站目的等基本要素，运用版面设计原理，将网页上的视觉元素进行合理配置与表现的过程。[1]在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。 　　一、表格布局方式和DIV+CSS布局方式的比较 　　目前，常用网页布局的方式主要为表格布局方式和DIV+CSS布局方式，这两种方式各有优缺点，下面对这两种布局方式做一比较。 　　1.表格布局 　　表格布局容易掌握，布局方便。但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距，这样布局的网页中表格会生成大量难以阅读和维护的代码，而且表格布局的网页要等整个表格下载完毕后才能显示所有内容，所以表格布局方式导致网页的浏览速度较慢[2]。 　　2.CSS+DIV布局 　　通常要实现比较精确和自适应的层布局需要设置层的样式，即用CSS控制层的位置。CSS+DIV布局采用Div来定位，通过Div的border（边框）、padding（填充）、margin（边界）和Float（浮动）等属性来控制板块的间距，具体实施是通过创建Div标签并对其应用CSS定位及浮动属性来实现[3]。 　　CSS+DIV布局需要编写大量CSS样式代码来控制各布局DIV层，因此要掌握它相对表格布局会困难一些。但CSS+DIV布局较表格布局更加灵活实用，网站布局后很容易就能调整网站的布局结构，而且CSS+DIV布局的各布局DIV层可以依次下载显示，因此其访问速度较表格布局要快。 　　二、表格布局网页实例 　　以下为用表格布局的一个网页的代码： 　　 　　 　　 　　表格布局 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　var _gaq = _gaq || [];_gaq.push([_setAccount, UA1]);_gaq.push([_setDomainName, .]);_gaq.push([_trackPageview]);(function () {var ga = document.createElement(script); ga.type = text/javascript; ga.async = true;ga.src = (https: == tocol ? https://ssl : http://www) + ./ga.js;var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s);})();var _userid = ;var _siteid =75;var _istoken = 1;var _model = Model03; WebPageSpeed =375; UrchinTrack(); 　　网页布局如图1所示： 　　图1 表格布局效果 　　如果以后网页设计者想调整表格布局，比如将中间的文字新闻和最右边的图片新闻调换位置，这时只能重新设计表格，这相当于重新设计一个主页，其工作量是很大的。 　　三、CSS+DIV布局网页实例 　　以下为用CSS+DIV布局一个网页的部分代码，在网页中的预览效果如图2所示。 　　body{ 　　text-align：center； 　　} 　　#container{ 　　position：relative； 　　height：500px； 　　width：900px； 　　text-align：left； 　　} 　　#header{ 　　position：relative； 　　height：82px； 　　width：900px； 　　text-align：left； 　　} 　　#links{ 　　position：