admin 管理员组文章数量: 1087139
2024年5月25日发(作者：黑马程序员app下载)
网页布局类型及布局技术的分析
摘要 随着计算机网络的发展，网页作为传播信息的载体，其布局直接影响着网页整
体视觉效果和信息的有效传达。因此网页的布局设计也日益被网站建设者所注重，只有根
据网站的内容、使用者、理念等合理的进行页面布局，才能达到理想的效果。
关键词 网页布局；表格；框架；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 表格技术
表格用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格
由一行或多行组成，每行又由一个或多个单元格组成。表格、行、单元格的标签分别为、、，
添加表格、行、单元格时，就增加相对应的标签。
页面一般由嵌套表格的技术实现。嵌套表格是在一个表格的单元格中的另一个表格。
可以像其他任何表格一样对嵌套表格进行格式设置。但是其宽度受它所在单元格的宽度的
限制。引入嵌套表格，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，
并插入到总表格的相应位置中。
使用表格布局时，浏览器一般是等整个表格的内容都接收到以后才显示表格里的内容，
因此尽量把一个表格拆分为若干个表格，加快打开页面的速度，优化页面。
优点：使用表格布局网页，可以精确地控制各网页元素在网页中的位置组织整个网页
的外观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页
面。
缺点：使用过多的表格，特别是嵌套表格，会造成页面垃圾代码过多且可读性非常差，
影响页面下载速度，不符合W3C网页标准，网站不便于维护。
2.2 框架技术
框架把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架主要包括
两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义一组框架结构的
网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。框
架集文档本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪
些文档的信息，是一个用于存储框架的容器。框架则指在网页上定义的一个显示区域，每
个框架都有自己独立的滚动条，方便访问者独立浏览这些框架。
优点：使用框架可以非常方便的完成导航工作，各个框架之间不存在干扰。框架还有
个很大的优点就是网站的风格能保持统一，它把相同的部分单独制作成一个页面，作为框
架结构一个子框架的内容给整个站点公用。
缺点：框架是有边框的，占用空间。采用过多的框架会增加下载网页所需的时间，影
响网页的浏览速度，对于内容多、布局复杂的网站不宜采用框架布局，且框架结构的页面
兼容性不好。
2.3 div+css
div+css是网站标准中常用的术语，是一种网页的布局方法，有别于传统的html网页
设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。
xhtml是一种在html基础上优化和改进的新语言，在xhtml网站设计标准中，要求
用div+css的方式来实现各对象的定位，即div定义网站结构（即布局网页）、css创建网
站表现（即格式化网页元素），从而实现更加丰富的网页效果，提高网页的传输速度和维护
更新效率。在xhtml网站设计标准中，不再使用表格定位技术，而是采用div+css的方式
实现各种定位。
优点：表现和内容相分离，提高搜索引擎对网页的索引效率。代码简洁，提高页面浏
览速度，易于维护和改版，只需简单的修改几个css文件就可以重新设计整个网站的页面。
版权声明：本文标题：网页布局类型及布局技术的分析 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1716611534a694073.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论