浅析网页设计的布局

孔丽英

网页是网站构成的基本元素。我们每天上网浏览网页的时候,可曾思考过是什么原因促使自己登陆这个网站?是文字内容的精心组织?还是图片的唯美设计?抑或是和谐的色彩搭配?笔者认为这些都是不可忽略的因素,但除此以外,还有一个非常重要的因素,即网页的合理布局。

页面布局就是在网页设计时把网页的各种构成要素(文字、图片、菜单等等)在页面内有效地搭配。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式。随着网络技术的不断提高,人们对网页的设计要求也越来越高,主要体现在:第一,网页的整体设计。网页的整体设计首先触动的是用户的第一感觉,这种感觉也决定了用户对网页的评价——好或不好。一个好的网页,表现在内容的合理组织、图片的适当使用、色彩的和谐,而这些更说明了页面布局在有效处理这些内容时的重要性。第二,网页的风格设计。现在的网站越来越多,怎么选择适合自己的网站也是用户需要考虑的问题。针对这个问题,页面的风格选择普遍用户所能接受的类型还是自己独特的个性页面,网页设计人员在网页的布局方面也要下相当大的功夫。

由此可见,页面布局在页面设计方面是至为重要的。那么,如何才能使页面布局合理分配呢?这是目前网页设计人员遇到的问题之一。在进行页面设计时,要把页面布局当作第一处理问题。

一、网页布局的基本概念

网页设计,可以说是一种平面设计,要求设计人员把页面内容合理地分布在页面中。每次页面设计,都可以把它看作是在一张白纸上画出我们想要的图案。如果已经掌握画图的方法,那么就可以画出一张漂亮的“图画”,但如果是一个新手,那么有必要首先了解页面布局的基本概念。

1.页面尺寸

由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下的页面范围变得越来越小。常用的分辨率有800×600和1027×768。一般分辨率在800×600的情况下,页面的显示尺寸为:780×428个象素;分辨率在1024×768的情况下,页面的显示尺寸为:1007×600。从以上数据可以看出,分辨率越高,页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。目前的浏览器工具栏一般都可以取消或者增加。当显示全部的工具栏和关闭全部工具栏时,页面的尺寸是不一样的。

在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但笔者要提醒大家的是,除非肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么最好做上页面内部跳转连接,方便用户浏览。

2.整体造型

什么是造型?造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然显示器和浏览器都是矩形,但对于页面的造型,可以充分运用自然界中的其它形状以及它们的组合,如矩形、圆形、三角形、菱形等。

对于不同的形状,它们所代表的意义是不同的。例如,矩形代表正式、规则,很多政府网页都以矩形为整体造型;圆形带表着柔和、团结、温暖、安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量、权威、牢固、侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡、协调、公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义,但目前的网页制作多数是结合多个图形加以设计,在这其中某种图形的构图比例可能占得多一些。

3.页头

页头又可称之为页眉,页眉的作用是定义页面的主题。例如,一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面更多的设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

4.文本

文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定着整个页面布局的可视性。

5.页脚

页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。许多制作信息都是放置在页脚的。

6.图片

图片和文本是网页的两大构成元素,缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。

7.多媒体

除了文本和图片,还有声音、动画、视频等其它媒体。虽然它们不是经常被用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。

了解完基本概念后,就可以知道,在页面设计时考虑的布局,实际就是把以上内容在页面里面进行合理组织排列。

二、常见的网页布局类型

网页布局大致可分为:“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

1.“国”字型

“国”字型,也可以称为“同”字型,是一些大型网站喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是目前网上最多的一种结构类型。

2.拐角型

这种结构与上一种“国”字型结构,其实只是形式上的区别,有相似性。顶端是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,底端也是一些网站的辅助信息。在这种类型中,一种很常见的类型是,顶端是标题及广告,左侧是导航链接。

3.标题正文型

这种类型,即网页顶端是标题,下面是正文。例如,一些文章页面或注册页面等就是这种类。

4.左右框架型

这是一种左右分为两页的框架结构。一般左面是导航链接,有时顶端会有一个小的标题或标致,右面是正文。目前,大部分的大型论坛都是这种结构,一些企业网站也喜欢采用这种左右框架型结构。这种类型结构非常清晰,一目了然。

5.上下框架型

这种结构与上一结构类似,区别仅仅在于是一种上下分为两页的框架。

6.综合框架型

这种结构,是上面两种结构的结合,是一种相对复杂的框架结构。较为常见的是类似于“拐角型”的结构,不同之处只是采用了框架结构。

7.封面型

这种类型基本上是出现在一些网站的首,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接,甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果处理得好,会给人带来赏心悦目的感觉。

8.Flash型

这种结构,实际上与封面型结构是类似的,只是这种类型采用了目前非常流行的Flash。与封面型不同的是,由于Flash的强大功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

9.自由型

这种结构是上面几种类型的自由结合与变化。

什么样的布局是最好的?这是初学者可能最先想到的问题。其实,这要具体情况具体分析。如果内容非常多,就要考虑用“国”字型或“拐角型”;而如果内容不太多而一些说明性的东西比较多,则可以考虑标题正文型;框架结构的一个共同特点就是浏览方,速度快,缺点是结构变化不灵;如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash可以大大丰富网页,但它不能表达过多的文字信息。总体而言,网页布局的类型并不是固定不变的,要根据网站需要和设计人员的创作而不断更新。

三、网页布局的技术

页面布局的实现需要掌握几种技术。目前,网页设计的软件使用比较多的是Dreamweaver。在使用Dreamweaver软件设计网页时,一般用于页面布局的技术有以下三种:

1.使用DIV+CSS网页布局

随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法。从实际应用情况来看,此种方法绝对好于表格制作页面的方法。这种布局有其独特的优势:页面载入得更快;降低流量费用;修改设计时更有效率;保持视觉的一致性;更好地被搜索引擎收录;对浏览者和浏览器更具亲和力。

2.表格网页布局

提到网页布局,笔者相信,大多数人都熟悉Dreamweaver MX中的可视化网格布局。表格在网页设计中起着非常重要的作用,一方面组织管理传统的表格数据,另一方面主要用于网页布局的组织。构成网页的HTML代码文档中,将表格的组成分成单元格、行、列,每一部分都有其属性,这样就能实现对象的基本定位。

表格布局好像已经成为一个标准,随便浏览一个站点,都一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。表格布局惟一的缺点是,过多使用表格时,页面下载速度会受到影响。

3.框架网页布局

框架结构的页面开始被许多人不喜欢,可能是因为它的兼容性。框架布局最大的优点是层次简单、链接方便,但它的模式较为固定,只有上下型、左右型、左中右型等,缺乏灵活性。

当然,页面布局的技术不止以上3种,每种技术都有它们一定的使用优势。在目前来说,在进行页面设计时,采用的布局技术不是单独采用某种技术,而是几种技术的结合使用,更好地体现每种技术的优势。这样在页面布局时才可以更好地对页面内容进行有效安排。

当前,网络的飞跃发展使得网页设计技术不断提高,也给网页设计人员带来更大的挑战。当设计技术越来越成熟的时候,网页的质量要求也会更高。网页布局在体现网页质量方面是非常重要的因素之一。掌握好网页布局的技术,制作适合用户的布局方案,是每个网页设计人员都应该具备的素质,创作属于自己个性风格的网页布局,是每个网页设计人员的追求。

(作者单位:广东肇庆高级技工学校)