网页布局类型及布局技术的分析

摘要 随着计算机网络的发展，网页作为传播信息的载体，其布局直接影响着网页整体视觉效果和信息的有效传达。因此网页的布局设计也日益被网站建设者所注重，只有根据网站的内容、使用者、理念等合理的进行页面布局，才能达到理想的效果。

关键词 网页布局；表格；框架；div+css

中图分类号 TP393 文献标识码 A 文章编号 1673-9671-(2012)051-0178-02

网页是网站构成的基本要素，而网页元素在网页中的组合决定了整个网站的最终效果，因此选择合适的网页布局类型及技术是关键。本文围绕网页布局的类型及布局技术进行了分析，并结合《三农服务网》实例进行了简单的说明。

1 网页布局类型分析

1.1 网页布局的类型

大致分为标题正文型、T字型、国字型、框架型、封面型、Flash型6大类。

1.2 布局类型的分析

1）标题正文型：页面分为上下结构，上面部分是标题、广告、导航等，下面部分是正文。

优点：结构清晰、简单，一目了然。

缺点：页面显得比较单调、枯燥。

2）T字型：页面顶部为网站标志、广告，下面部分的左列为主菜单，右列为主要内容。

优点：结构清晰，主次分明，容易上手。

缺点：页面显得呆板，变化较少，在页面停留时间久会感觉看之无味。

3）国字型：也可以称为“口”、“回”或“同”字型，页面分为上中下三部分，顶部是标题、广告，底部是网站的链接区、联系方式、版权声明等，中间部分分为左中右三列，左右分别列出一些小条，中间部分是主要内容。

优点：充分利用页面空间、增大信息量。

缺点：内容过多，显得页面拥挤。

4）框架型：一般分为左右框架型、上下框架型、综合框架型。左右框架型是一种左右分为两页的框架结构，一般左面是导航链接，右面是正文。上下框架型：与左右框架类似，区别仅仅在于它是把页面分为上下两页的框架。综合框架型：上面两种结构的组合，相对复杂的一种框架结构。框架型适合于聊天室、论坛、软件下载等网站的版面布局，

优点：框架型页面分割合理、布局结构清晰。

缺点：兼容性差、页面加载速度慢。

5）封面型：页面布局是一张精美的平面设计宣传海报，常用于网站首页。

优点：页面显得美观、大方、轻松，给人时尚优雅、自由的感觉。

缺点：文字信息量少，页面打开速度缓慢，浏览者不能直奔主题浏览信息。

6）Flash型：与封面型类似，只是其添加了动画效果与音频效果，表达的信息更丰富。

优点：灵活、表现力强，很直观的展现了网站的理念等，适用于网站的首页。

缺点：速度慢，浏览者需要漫长的过程才能浏览到所需的

信息。

2 网页布局技术分析

2.1 表格技术

表格用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。表格、行、单元格的标签分别为、< tr>、，添加表格、行、单元格时，就增加相对应的标签。

页面一般由嵌套表格的技术实现。嵌套表格是在一个表格的单元格中的另一个表格。可以像其他任何表格一样对嵌套表格进行格式设置。但是其宽度受它所在单元格的宽度的限制。引入嵌套表格，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。

使用表格布局时，浏览器一般是等整个表格的内容都接收到以后才显示表格里的内容，因此尽量把一个表格拆分为若干个表格，加快打开页面的速度，优化页面。

优点：使用表格布局网页，可以精确地控制各网页元素在网页中的位置组织整个网页的外观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面。

缺点：使用过多的表格，特别是嵌套表格，会造成页面垃圾代码过多且可读性非常差，影响页面下载速度，不符合W3C网页标准，网站不便于维护。

2.2 框架技术

框架把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义一组框架结构的网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。框架集文档本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框架的容器。框架则指在网页上定义的一个显示区域，每个框架都有自己独立的滚动条，方便访问者独立浏览这些框架。

优点：使用框架可以非常方便的完成导航工作，各个框架之间不存在干扰。框架还有个很大的优点就是网站的风格能保持统一，它把相同的部分单独制作成一个页面，作为框架结构一个子框架的内容给整个站点公用。

缺点：框架是有边框的，占用空间。采用过多的框架会增加下载网页所需的时间，影响网页的浏览速度，对于内容多、布局复杂的网站不宜采用框架布局，且框架结构的页面兼容性不好。

2.3 div+css

div+css是网站标准中常用的术语，是一种网页的布局方法，有别于传统的html网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。

xhtml是一种在html基础上优化和改进的新语言，在xhtml网站设计标准中，要求用div+css的方式来实现各对象的定位，即div定义网站结构（即布局网页）、css创建网站表现（即格式化网页元素），从而实现更加丰富的网页效果，提高网页的传输速度和维护更新效率。在xhtml网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。

优点：表现和内容相分离，提高搜索引擎对网页的索引效率。代码简洁，提高页面浏览速度，易于维护和改版，只需简单的修改几个css文件就可以重新设计整个网站的页面。

缺点：虽说div+css解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器。而且div+css比表格定位复杂的多，不适合初学者。

2.4 图像处理软件技术

Photoshop等图像处理软件提供了“切片”工具，实现把图形转换为网页布局。首先是在图像处理软件中绘制出页面布局图，然后根据实际切出的需要区域，应用到页面当中。

优点：布局精确，适合比较复杂的页面。

缺点：过程复杂，要求能熟练使用图像处理软件。

3 《三农服务网》的网页布局分析

3.1 使用的布局类型分析

使用者：《三农服务网》是一个农业网站，浏览者多为农民，他们的电脑水平比较相对比较差，太复杂的网页使他们无从下手，因此设计的页面结构尽量简单，并且能一目了然。

网站内容：网站主要以视频教学为主，文字为辅，除首页内容丰富一些，其他子页面的内容稍微单调，因此尽量使得子的页面内容显的饱满，避免出现过多的空白、枯燥区域。

综合以上的两大主要因素，《三农服务网》以简单的国字型网页布局。结构简单、内容清晰，使用方便。页面顶部为标志+主题语+导航栏，底部为版权声明、友情链接，中间部分分为左右两列，考虑到内容稀少，单调，子页面左列也放置了导航栏。《三农服务网》的首页、子页面如图1、图2所示。

3.2 使用布局技术分析

图像处理软件技术：能处理大量的图片，特别是首页的图片，都尽量处理与网站的主体颜色“绿色”协调一致。还可以设计一些特殊字体（如页面顶部的主题字体），美化页面。

表格技术：可以精确地控制由photoshop切片工具切割的图片，组合成符合理想的效果页面。

综合两种技术的优点，《三农服务网》页面布局轻松地实现了预期的效果。使用图像处理软件技术、表格技术的布局效果如图3、图4所示。

4 结束语

网页的布局实际是一个信息合理化整合的一个过程，在实际制作过程当中，依据实际情况，合理的选择网页布局的类型及布局技术，尽可能地做到“兴其利，废其弊”。

参考文献

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

[2]杨纪梅,肖志强.网页设计与制作指南[M].北京:清华大学出版社,2010.

[3]章舜钟.网页设计与制作[M].北京:电子工业出版社,2010．

[4]焦坤.如何改善网页布局以提高检索效率[J].现代情报,2008.

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

作者简介

周运科（1983—），男，汉族，海南人，本科，助教，研究方向：计算机应用。