网页设计中布局方式之比较

网页设计中布局方式之比较

摘要：在网页设计中，网页布局的效果直接影响到网页设计的质量，本文分析说明了目前常用的三种布局方式：表格方式、框架方式和div+css方式，并对三种方式进行了详细的比较。

关键词：表格 div+css 布局

1 概述

在网页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——网页的布局。不同类型的网站采用不同的布局，不但能使网站结构合理化，也可以使访问者一看就明白：这个网站是做什么的。目前网页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局、框架型布局和变化型布局等。无论是哪一种布局结构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页形式与整体内容的统一。

2 常见布局方式

在网页设计中，常见的布局方式一般有三种，第一种是使用表格

（table），第二种是使用框架，另一种是使用div+css。下面我们将具体的对这三种布局方式进行说明与分析。

2.1 表格布局方式

表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。由于表格使用简单而且灵活，是最早也是使用最广泛的网页布局技术。通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。

表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。但当使用过多表格时，页面下载速度将会受到影响。并且灵活性较差，不易修改和扩展。

2.2 框架布局方式

框架也是网页设计中对页面布局控制的一种重要手段。使用框架可以将一个浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的内容永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的网页上。框架结构的实现主要是利用标签。

框架布局能有效地实现页面导航，方便用户浏览网页，并在框架

窗口中支持滚动条，从而能显示更多内容。由于框架集中相同的内容只用下载一次，所以能减少页面下载时间。但兼容性略差。

2.3 div+css布局方式

div+css是网站标准（或称“web标准”）中常用术语之一，在xhtml 网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。

div是指html标记集中的标记，可以理解为层的概念。主要用来为html文档内大块的内容提供布局结构和背景；css（cascading style sheets）可译作“层叠样式表”，是一种格式化网页的标准方式，在网页中使用css技术，不光可以控制大多数传统的文本格式，还可以有效地对页面的布局、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的网页的外观和格式。所以，利用div+css方式来进行网页布局，其实就是用div盒模型结构把各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。简单地说，div用来搭建网站结构（框架），css用于创建网站表现（样式/美化）。其优势在于如下几个方面：

①表现和内容相分离

将涉及部分剥离出来放在一个独立样式文件中，html文件只存放文本信息，符合w3c标准。

②提高搜索引擎对网页的索引效率

用只包含结构化内容的html代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容。

③代码简洁，提高页面浏览速度

对于同一个页面视觉效果，采用div+css重构的页面容量要比table编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型网站来说，可以节省大量带宽。

④易于维护和改版

由于内容和样式的分离，使页面和样式的调整变得更加方便。只需简单的修改几个css文件就可以重新设计整个网站的页面。

3 三种方式比较

3.1 应用的灵活性

表格方式是最常用的网页布局技术，它使用简单而且灵活，通过表格的嵌套，可以进行比较复杂的网页布局；框架方式由于其提供了固定的布局样式，所以适合布局一些特殊格式的网页，例如论坛的布局常使用这一方式。而div+css方式使用也比较简单，可以进行复杂的布局。

3.2 布局的重构性

无论是表格还是框架，最终生成的网页布局文件是布局格式控制和网页内容混在一起，这样对网页布局进行较大改动甚至重新布局时，就会显得非常困难和麻烦，有可能需要重新制作页面。而

div+css方式布局和内容表现是一个分离体，使用属性就可以轻松改变布局结构和风格。

3.3 网页浏览

利用表格布局的网页在下载的时候必须等整个表格内容都下载

完毕之后才会一次性显示出来，而利用div块的css布局的页面就科学得多，各个子块可以分别下载显示，从而提高了页面下载速度，搜索引擎的排名也会因此而提高。但从兼容性的角度来说，框架方式和div+css方式都表现差强人意，有待进一步提高。

参考文献：

[1]梁斌，柯华坤.《网页布局技术比较与应用优化》，中国教育技术装备，2009，11.

[2]马东.《网页与网站设计》，东方出版社，2008年.

[3]王俭敏.《css+div网页样式与布局》，电子工业出版社，2008.

[4]郑宁宁.《浅析div+css网页设计技术》，山东省农业管理干部学院学报，2008.

[5]扬森香，聂志勇.《网页设计与制作案例教程》，北京大学出版社，2009.

[6]严加琼.《浅析网页设计中的网页布局》，电脑学习，2010，1.