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

摘 要：随着“互联网+”时代的到来，网络上各式各样的信息都有，琳琅满目、各式各样，比如各类购物网站、休闲旅游网站，还有科技学术网站等。大多数人在上网的时候，都会浏览网页提供给我们的信息，那么，我们就要合理设计网页的布局，利用网站的页面展示吸引住浏览用户的目光，最后点击查看他们感兴趣的信息。本文以介绍网页布局的概念为切入点，介绍了常用的几种网页布局，并对经常采用的网页布局技术进行了分析和探讨。

关键词：网页布局；网页类型；网页布局结构；DIV+CSS

中图分类号：TP393文献标识码：A文章编号：2096-4706（2018）07-0103-03

Abstract：With the advent of the “Internet plus”era，all sorts of information on the internet are dazzling and varied，such as various shopping websites，leisure travel websites，and scientific and technological academic websites，etc. Most people on the internet will browse the information provided to us by the webpage. Then，we must rationally design the layout of the webpage，display it on the website’s page to attract the attention of the browsing user，and finally click to view the information they are interested in. This article introduces the concept of web page layout as an entry point，introduces several commonly used web page layouts，and analyzes and discusses frequently used web page layout technologies.

Keywords：Web page layout；Web page type；Web page layout structure；DIV+CSS

1 网页布局的概述

一个网站的布局展示是会直接影响到网站的整体视觉效果和用户体验的。如果布局乱七八糟、层次混乱，会很大程度影响到用户的再次访问。制作一个网页时，最初的它就好像一张白纸，需要设计者发挥自己的主观能动性，设计你的页面。网页布局就是以最适合用户观看的方式将各类媒体排放在页面的不同位置。当然，不同的设计者会有不同的设计思路，但是无论怎样，合理的页面布局是网站建设过程中最重要的一个关键点，不仅能够提高网站的观赏性，更重要的是可以提高用户的体验度，进而提升网站的访问次数。

网页布局通常包含如下元素：

1.1 页面尺寸

页面尺寸是网页布局非常重要的一个方面，首先要知道一点：页面尺寸与显示器大小和分辨率的关系密不可分。而且浏览器也会占去不少的空间，这样留给设计者的页面范围就会更小。一般情况是分辨率在800×600的时候，页面能够显示的尺寸是：780×428；分辨率在1024×768的时候，页面能够显示的尺寸是：1007×600。故而，分辨率越高，页面尺寸越大。除此之外，浏览器上的工具栏也是影响页面尺寸的因素。当选择显示所有的工具栏和关闭所有的工具栏时，页面的尺寸也是不一样的。

1.2 整体造型

造型就是设计者设计出来的整体形象。此处，我们指页面表现出来的形象，在这个形象里，图片与文字的摆放应该是井然有序的。尽管我们用的显示器，还有浏览器都是矩形的，但对页面的整体造型来说，我们完全赞同设计成其他形状，比如说三角形、圆形、菱形等，当然矩形也可以。

1.3 页眉

页眉，顾名思义，就像人的眉毛一样，处于页面的顶端。它的作用一般是用来定义网页的主题。一个网站的名称大多时候都在页眉里显示。这样的话，浏览者就能很快地了解到这个站点是干什么的。页眉是整个页面设计的重要组成部分，会牵涉到页面下方的整个设计。通常，此处放置的是站点名字的图片、公司Logo以及旗帜广告。

1.4 文字

文字在网站页面中出现都是以行或者块（段落）的形式，文字的摆放位置决定着整个页面布局的可视性。文字使用的时候比较灵活，可以按照自己的设计思路，放到网页的任何位置。

1.5 图片

图片和文字是网页的两大组成元素，一个都不能少。所以说，设计好图片和文字的摆放位置是整个网页布局的重中之重。

1.6 其他媒体

除了文字和图片，网页中还会有声音、视频等其他多种媒体。随着动态网页的兴起，部分网站也开始越来越多地引用这些媒体，它们在网页布局上也将变得更重要。

1.7 页脚

页脚位于网页的最下方，是放置版权所有或者公司信息的地方。大家浏览网站的时候，会发现许多制作信息、链接信息都是放置在页脚的。

2 网页布局常见的几种结构

2.1 “国字型”布局

“国字型”布局由“同”字型布局进化而来，因布局很像汉字“国”而得名。其页面的最上部分一般放置网站的名称图片、导航栏或Banner广告；页面中间主要放置网站的主要内容，主要内容一般分为三个板块，一般以中间板块空间最大，最为重要、醒目；最下部分一般放置网站的版权所有和公司信息等。

2.2 “匡字型”布局

“匡字型”布局结构，又叫T字型结构，因与英文大写字母T相似而得名。这种布局的顶部和“国字型”顶部类似，下方左侧放置导航栏菜单，下方右侧放置网页正文等主要内容。

2.3 标题正文型

标题正文型的布局结构比较简单，一般用于制作文章页面、博客页面和新闻页面等。我们大部分看到的电子书网站就是标题正文型。

2.4 框架型布局

框架布局一般有左右型框架、上下型框架及综合型框架。这种布局结构是一些大型论坛和企业经常使用的一种。其布局结构主要是将一个页面划分为若干个独立的子页面，编辑内容时，彼此独立，显示时，又在同一个页面。通常会将具有导航性，一般不更改的内容放在一个独立的子页面中，而将需要变化的内容放在另一个独立的子页面中。

2.5 POP布局

POP布局这个称呼来源于广告术语。这种布局是一种比较具有艺术感和时尚感的网页布局方式。页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。优点是漂亮、美观，吸引人，缺点是访问速度慢。常用于时尚类站点，比如首饰、时装、奢侈品网站等。

2.6 FLASH布局

FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。

3 网页布局经常用的技术

3.1 表格布局技术

表格布局技术在很早以前，就成为了非常流行的布局方式。随便打开一个网站，你都会发现其中的很多页面都离不开表格布局方式。表格布局在定位图片和文本上非常方便。如果你想要了解网站内表格布局的具体情况，方法是任意找一个包含表格的页面，将它保存为HTML文件，然后利用Dreamweaver或者其他所见即所得的网页编辑软件打开它，你就会看到这个页面里表格布局的相关情况。它能对网页上各类对象单独处理，而不用害怕不同对象之间的影响。表格布局技术的优点是布局容易、快捷，兼容性好；缺点是改动不便，需重新调整，工作量大，当你用了过多表格时，页面下载速度也会受到影响。

3.2 框架布局技术

框架结构的页面在设计时，因为复杂，很多人不是特别喜欢。但从布局上考虑，框架结构不失为一个好的布局方法。上文中，我们提到的左右框架布局、上下框架布局和综合框架布局都是利用框架布局技术实现的。类似于表格布局技术，框架布局技术可以把不同对象放置到不同页面，框架可以取消边框，所以也不会影响页面的美观度。使用框架布局技术可以使导航更加清晰，这样的话网站的结构更加明确突出。

相对来说，框架结构要比其他的结构难于控制和制作，框架中的内容在后台代码中是无法被体现的。但是对于搜索引擎来说，都是直接锁定网页上的实际内容，就是网页的文字或者短语，进行索引。这样一来，使用框架的网站就几乎不可能在搜索引擎中取得较好的页面等级，这也是框架布局的不足之处。

3.3 层叠样式表的应用：DIV+CSS布局技术

近年来，CSS（层叠样式表）被提出，它能完全精确地定位文本和图片。CSS布局是网页HTML通过DIV标签+CSS样式表开发制作的HTML网页的统称。DIV+CSS布局是现在非常流行的布局方法，替代了原来的表格布局。CSS对于初学者来说显得有点复杂，对网站制作人员技能要求较高，但它的确是一个好的布局方法。在网页设计的过程中，一般情况下，在页面内只写入文档的结构性内容，而将表现形式写在单独的CSS文件中，然后再通过外部调用CSS样式表来实现网页的浏览，这样就做到了结构与样式的分离。好处是布局灵活，改动方便。目前在很多的网站上，DIV+CSS布局技术的运用已成为衡量一个站点是否优秀的标准之一。

以上介绍的布局技术并不是所有网站都在用的网页布局技术，而是在网站设计中应用比较多的布局技术，现在，尤其以DIV+CSS最为流行。

4 DIV+CSS布局是目前网页布局技术的大势所趋

4.1 能够使代码精简

使用DIV+CSS布局使代码很是精简，较传统的Table布局，减少了许多代码，CSS文件可以在网站的任意一个页面进行调用，避免了使用Table表格修改部分页面。对于一个大型网站来说，可以节省大量带宽，提升了网页访问速度。

4.2 有利于优化

简洁、精确、结构化的代码更加有利于突出网站的重点和适合搜索引擎锁定。相对传统的Table布局，采用DIV+CSS技术的网页，对于搜索引擎的索引更加友好，这也代表着网页更容易被搜索引擎定位和收录。

4.3 支持浏览器的相互兼容

无论未来的浏览器大战胜利的是谁，利用DIV+CSS技术的网站都能很好地兼容。但是我们一定要注意最好采用外部调用的方式来调用CSS样式表。

4.4 样式的调整更加方便

内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

参考文献：

[1] 阿斯哈尔·努尔兰.探讨网页设计中的排版与布局 [J].信息系统工程，2017（6）：54.

[2] 崔利.浅谈网页设计中页面的布局方式 [J].电子制作，2015（22）：27.

[3] 姜鹏，郭晓倩.形·色——网页设计法则及实例指导 [M].北京：人民邮电出版社，2017.

[4] 邢太北，许瑞建.CSS+DIV网页布局技术详解 [M].北京：清华大学出版社，2014.

作者简介：马文静（1984.12-），女，汉族，河南焦作人，教师，讲师，本科。研究方向：计算机应用、网络教学、网络技术。