表格及DIV+CSS布局设计分析.docVIP

表格及DIV+CSS布局设计分析摘要：网页的布局是给浏览者的第一印象，往往决定着网站的可看性。在网页中应用不同的布局技术所能呈现的效果也不尽相同，它们各有其自己的优点，使用表格进行布局是传统的网页布局显示技术，仍是现在最常见的网页制作方法，而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.1 DIV+CSS布局技术介绍 DIV+CSS的布局技术其实涉及到了网页的两个重要组成部分：结构和表现。比如，在一个网页中，其内容可以包含很多，如各种级别的标题、正文段落、图片等，通过DIV，我们可以将网页中的这些内容元素放置到各个DIV中，构成网页的“结构”；然后，我们再根据页面的设计需要运用CSS样式表文件设置其中的文字、图片和列表等元素的“表现”效果 在DIV+CSS的布局技术中，设计者运用HTML来确定网页的结构和内容，而用CSS来控制网页中内容的表现形式，很好地实现了内容与形式的分离 2.2 DIV+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.3 DIV+CSS布局技术的缺陷 当然，DIV+CSS的布局技术虽然有着强大的优势，但也存在着一些缺陷，其中最重要的一项就是浏览器的兼容问题。在W3C标准推出后，虽然各厂商纷纷表示会遵从这些新的标准，但实际上却还是存在着一些问题。由于不同的浏览器厂商对于WEB标准有着不同的认识，也有的并没有完全严格执行新的WEB标准