然事技术。与高用
表格与DIV+CSS的布局设计分析
孙小英
(黄冈职业技术学院湖北黄冈438002)
学术论坛
摘要：网页的布局是给测览者的第一印象，往往决定着网站的可看性。在网页中应用不同的布局技术所能呈现的效果也不尽相同，它们各有其自己的优点，使用表格进行布局是传统的网页布局显示技术，仍是现在最常见的网页制作方法，而DIV+CSS布局是一种新的排点布局理金，可以使页面载入得更快，修改设计时更有效率而代价更低。
关键调：网页布局表格DIV+CSS
中图分类号：TP393.092
文献标识码：A
文章编号：1007-9416(2011)12-0191-01
随着互联网应用的日渐普遍，网络应用进人了人们生活的多个层面，进面人们对网站需求的增大，市场对网页制作人员的需求也大大增加，对于一个网站来说，要要给用户带来好的享受，就必须提高网页布局设计的美观度。网页就好比一张图纸，通过排版布局之间的对比才凸显它的美，网页布局的效果直接影响到网页设计的质
量。目前常见的网页布局技术有表格技术和DIV+CSS技术。 1、表格布局技术
1.1表格布局技术的特点
表格是网页的一个非常重要的元素，表格主要由行、列和单元格组成，在使用表格布局时，设计者一般会先根据页面版式的设计需要将整个网页以水平切割的方式分解成多张独立的表格，而表格的行、列数则由该表格中所包含的版块数目来决定。对于复杂的版块，还必须在里面插人嵌套表格来完成。
1.2表格布局技术的优势
对于初学者来说，表格可能是最好的布局方式，容易上手。表格布局能对不同对象加以处理，面又不用担心不同对象之间的影响；而且表格在定位图片和文本上比起用CSS更加方便。网上绝大部分的页面都是使用表格米美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，面且使用表格会使页面结构清晰、布局整齐。
1.3表格布局技术的缺陷
使用table布局会生产很多允余代码，会影响浏览速度以及占用过多服务器空间。面且，表格结构单一，难以体现出层次感，无法
将设计的美感流畅地通过网页表现出来。 2、DIV+CSS布局技术
2.1DIV+CSS布局技术介绍
DIV+CSS的布局技术其实涉及到了网页的两个重要组成部分：结构和表现。比如，在一个网页中，其内容可以包含很多，如各种级别的标题、正文段落、图片等，通过DIV，我们可以将网页中的这些内容元索放置到各个DIV中，构成网页的"结构"；然后，我们再根据页面的设计需要运用CSS样式表文件设置其中的文字、图片和列表等元索的"表现"效果。
在DIV+CSS的布局技术中，设计者运用HTML来确定网页的结构和内容，而用CSS来控制网页中内容的表现形式，很好地实现了内容与形式的分离。
2.2DIV+CSS的布局的特点
DIV+CSS布局技术的应用相对于表格而言，具有强大的优势： 2.2.1内客与形式分离，度服方馈
在DIV+CSS的布扇技术中，网页的内容通过HTML来表示，面网页中各版块的位置、大小、修饰以及各版块内文字、图片、列表的显示效果则交由CSS样式表来完成。设计者如果想要使同样的网页内客在不同的媒体上以不同的方式显示，根本不需要去更改网页的源代码，只需要设计不同的CSS样式表文件即可，DIV+CSS的布局技术中“内容与形式”分离的这上特点，既可以使我们设计的网页适应不同平台的显示需要，文可以很方便在进行网站的改版，大量地节省了设计者的设计时间，提高了设计效率。
2.2.2页面星示速度更快
相对于表格布局技术，DIV+CSS的布局技术设计的网页显示万方数据
速度更快。在使用表格布局的网页中，浏览者在浏览网页时，必须等整张表格都下载完成后才能看到网页的内容，尤其是在网速较慢时，浏览者可能要等上好几分才能看到网页的内容，而用 DIV+CSS布局的网页，由于它将内容与形式分离，网页中的代码较少，内容简洁，在间等网速下，这样的页面显示递度会更快，对于网络带宽的要求也就降低了。
2.2.3有制于网站的教索就名
在使用DIV+CSS进行布局时，网页的代码中只包含页面的内容，相对表格布局的页面，代码得了精简，这样，搜索程序在进行页面内容搜索时，所需要的时间就会大大地缩短，搜索效率自然就会提高，网站的搜索排名也就会更靠前。
2.2.4维护方使
由于DIV+CSS布局技术中，在页面上使用了更少了代码和组件，这样就使得整个网站更加容易维护，
2.3DIV+CSS布局技术的缺陷
当然，DIV+CSS的布局技术虽然有着强大的优势，但也存在着一些缺陷，其中最重要的一项就是浏览器的兼察间题。在W3C标准推出后，虽然各厂商纷纷表示会遵从这些新的标准，但实际上却还是存在着一些间题。由于不同的浏览器厂商对于WEB标准有着不同的认识，也有的并没有完全严格执行新的WEB标准，造成了网站在不同的浏览器下有着不同的显示效果，这也是现在CSS布局上存在的最在端。但是，目前的浏览器在下一代的研发中会逐新解决
这一间题，共同实现对WEB新标准的统一支持。 3、两种布局技术的综合运用
由以上分析，我们可以看出，对于表格和DIV+CSS这两种网页布局技术来说，都有站各自的优势和缺陷，那么在实际的应用中又该如何选择呢?对于DIV+CSS来说，它作为制作网页、美化网页的一个重要辅助是很强大方便的，可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，选择table+DIV+CSS是最好的组合，也是最省时省力的办法。
一般，我们可以按以下原则来进行选择：(1)页面中各版块的布局及定位通过DIV来完成，(2)网页中用来显示数据的区域则通过表格来完成
网页的布局实际是一个信息合理化整合的一个过程，网页设计人员在制作网页时，该如何选择并正确地使用表格和Div+CSS这两种布局技术，既要考虑网页的实际设计需要、个人设计习惯，又要综合考虑WEB标准，只有将选择table+DIV+CSS有机地结合起来，才
能更好地傲好网页的布局。参考文献
[1]张晓展编著(DIV+CSS网页市局商业案例精料》电予工业出版社，2007.12
[2]曾静娜等主编《新手学CSS+DIV》北京希望电子出版社,2010,3.[3]赵世新，帮敏著《巧用CSS样式表制作个性化网页》河南科技出
版社，2002.7. 作者简介
孙小英（1973、11），女，硕士，副教授，研究方向：计算机网络技术；黄冈职业技术学院。
191