网站页面布局设计

网页是网站构成的基本元素。轻点鼠标，一幅幅精彩的网页会呈现在面前。网页精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。

下面，先介绍一下有关网页布局的一些基本知识：

1. 网页布局的基本概念

开始设计网页时，呈现在设计者面前的好像是一张白纸，无任何内容，需要设计者任意发挥设计才能。技术纯熟的设计师可以创造出自己的设计方案，但如果是一位初学者，则需要先了解网页布局的基本概念。

（1）页面尺寸。由于页面尺寸和显示器的大小及分辨率有关系，网页的局限性在于无法突破显示器的范围，同时浏览器也将占去不少空间，留给设计者的页面范围变得越来越小。一般分辨率在800 × 600的情况下，页面的显示尺寸为：780 ×428像素；分辨率在640 × 480的情况下，页面的显示尺寸为：620 × 311像素；分辨率在1024 × 768的情况下，页面的显示尺寸为：1007 × 600。从以上数据可以看出，分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。一般浏览器的工具栏可以取消或者增加，当设计者显示全部的工具栏或者关闭全部工具栏时，页面的尺寸大小是不一样的。

在网页设计过程中，向下拖动页面是唯一给网页增加更多内容（尺寸）的方法。但是提醒大家除非站点的内容能吸引浏览者拖动鼠标浏览网页，否则不要让访问者拖动页面超过“三屏”，即页面太长。

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

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

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

（4）文本。文本是以行或者块（段落）在页面中出现，它们的摆放位置决定整个页面布局的可视性。过去，因为页面制作技术的局限，文本放置位置的灵活性非常小，而随着DHTML的兴起，文本可以按照自己的要求放置到页面的任何位置。

（5）页脚。页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。读者可以在页脚看到许多制作信息。

（6）图片。图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置是整个页面布局的关键，设计者的布局思维也将体现在这里。

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

2. 网页常见布局结构

常见页面布局结构有7种，下面分别介绍。

（1）“同”字形布局结构。“同”字形布局结构就是页面整体布局类似于一个“同”字，页面顶部为主导航栏，下方左右两侧为二级导航栏，登录注册区、搜索区、更新推荐区、友情链接区，屏幕中间显示主体内容。

“同”字形布局结构的应用非常普遍。这种布局的优点是页面结构清晰，左右对称，主次分明；缺点是版式呆板，如果主内容较多，则页面容易过长显示。网页“同”字形布局结构案例

（2）“国”字形布局结构。“国”字形布局结构是在“同”字形布局结构的基础上变化而来，它是在“同”字形布局结构的下方增加一个横幅状的“菜单或广告条”。“国”字形布局结构案例

这种布局的优点是充分利用版面，信息量大，与其他页面链接多，切换方便；缺点是：页面拥挤，四面封闭，令人感到郁闷。

（3）“匡”字形布局结构。这种页面布局结构的特点去掉了“国”字形布局结构右边的边框部分，给主内容区释放了更多空间，其内容虽然看上去比较多，但布局整齐又不过于拥挤，适合于下载类站点。这种布局结构要求网页色彩协调，通常外部颜色深，内部颜色浅，有透视类效果，如网易的结构布局。“匡”字形布局结构案例

（4）“三”字形布局结构。简洁明快的艺术性网页布局，适用于艺术类、收藏类、展示类网站。这种网站的网页多使用“三”字形布局结构，布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，使其感觉进入了一幅简单的画面，不是一个分门别类的超市。它的一级页面和二级页面的链接都按照行水平排列在页面中部，网站标志醒目。“三”字形布局结构案例

（5）“川”字形布局结构。“川”字形布局结构在网站设计时也是较为常见的布局。它的整个网页在垂直方向上分为三列，网站内容按栏目分布在这三列中，最大限度地突出了主页的索引功能。如果网站栏目较多，可以考虑采用这种布局。“川”字形布局结构案例

（6）自由式布局结构。自由式布局结构打破了传统的布局结构，页面布局比较随意，如一张宣传广告画。它以精美的图片和动画作为页面设计的中心，菜单栏按钮自由设置在页面上。这种网站布局属于时尚型网站。网站的优点是漂亮、吸引人；缺点是显示速度较慢，文字信息少。这种布局结构案例

（7）左右对称式布局结构。这种布局结构采用左右对称、分段网页的布局，在左右布局内部自由安排文字和图片。这种布局一般适合于电子商务网站，如当当网上书店的网页布局结构

3. 好布局的标准

这是初学者可能会问的问题，其实这个问题要具体情况具体分析。比如，如果内容非常多，就要考虑用“国”字形或“同”字形布局结构；而如果内容不算太多，一些说明性的内容比较多，则可以考虑“三”字形布局结构；那几种框架结构的共同特点是浏览方便，速度快，但结构变化不灵活；如果是企业网站想展示企业形象或个人主页想展示个人风采，自由式布局更灵活一些。好的自由式布局大大丰富了网页内容，但是它不能表达过多的文字信息。

4. 网页布局的步骤、原则及思路

（1）网页布局的步骤：

① 草案。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，可以尽可能地发挥自己的想像力，将想到的“景象”画上去（建议用一张白纸和一支铅笔，当然用做图软件photoshop等也可以）。这属于创造阶段，不讲究细腻与工整，不必考虑细节与功能，只以粗陋的线条勾画出创意的轮廓即可。草案尽可能多画几张，最后选定一个满意的草案作为继续创作的脚本。

② 粗略布局。在草案的基础上，将自己在网站栏目规划中确定需要放置的栏目模块安排到页面上。

注意

草案必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的栏目模块放在最显眼、最突出的位置，然后再考虑次要栏目模块的排放。

③ 定案。将粗略布局精细化、具体化，从而设计出具有创意的布局。

（2）网页布局的原则：

① 正常平衡。亦称“匀称”，多指左右、上下的对应形式，主要强调秩序，能达到安定、诚实、信赖的效果。

② 异常平衡。即非对应形式，但也要注意平和与韵律。此种布局能达到强调性、引人性的效果。

③ 对比。所谓对比，不仅需要利用色彩、色调等技巧来表现，在内容上也可以涉及古与今、新与旧、贫与富等对比。

④ 凝视。所谓“凝视”，是利用页面中人物的视线，使浏览者能够仿照或跟随，以达到注视页面的效果，一般多用明星凝视状。

⑤ 空白。空白有两种作用：一是表示比其他网站突出、卓越；二是表示网页品位的优越感。这种表现方法对体现网页的格调十分有效。

⑥ 尽量用图片解说。此法对不能用语言说服或用语言无法表达的情感特别有效。图片解说的内容可以传达给浏览者更多的情感因素。

以上设计原则虽然看起来枯燥，但是如果能够领会并应用到页面布局，效果就大不一样了。比如：网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号串联；左面文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角试试。

（3）网页布局的思路。从平面设计的形式来看，整个页面可以分为几个部分，每个部分有着不同的功能，也体现着不同的形式。具体说来，就是上边、左边、下边、右边、中间，都有看似无奇，却有独特之处。各个部分的划分布局大小不要完全相等，中间部分一般是最大的，因为它承载着主要的信息，用户浏览网页主要是看中间这个部分的内容。有些网站对整个页面任意划分，显得有些凌乱，使浏览者找不到重点，影响了页面的整体效果。

一般来说，页面布局的思路主要有以下几种。

①页面上部和左部结合。这是最常用的一种方式，上部是网站logo标志和网站宣传动画网站口号等小页面，左边是导航按钮和其他的链接。这种方式有利于吸引浏览者的注意力，主要内容集中在右边栏目，使信息都在右边显示，浏览较为方便。但是这种布局按钮在左边，进入下一个页面时需要将鼠标移到左边单击。

② 页面上部和下部结合。这种方式用得少一些，但也有不少网站采用。这种方式可以解决使用问题，因下方移动鼠标比较自如；同时由于上面有横的提头或者是广告条，这样可以使上部和下部造成对比和呼应，无论其中的内容如何安排，页面都会显得非常平衡和协调。这是形式感很强的布局方式。

③ 上部、左部和下部相结合。这种方式现在也很常用，页面上部留做标志、页面和登录等，而将丰富的内容有条理地放在中部和左部的导航条上，其他功能性的内容放在左边和下边，使用较为方便。但是这种方式也有不利的地方，例如，整个页面被占去的空间较多，容易使主内容显示受到影响。所以，一般只在首页采用这种布局，其他页面采用其他两种形式。

确立网页的布局定位，还需要参考网站的性质和访客的群体习惯。设计者应该根据网站特定访客群体可能的使用要求来设计页面的结构，体现温馨、轻松、愉悦的气氛，提供简洁明快的版式和独特的文化特色。

5. 网页布局的方法

网页布局的方法有两种：一是纸上布局；二是软件布局。下面分别加以介绍。

（1）纸上布局法。许多网页制作者不喜欢先画出页面布局的草图，而是直接使用网页设计器边设计布局边加内容。这种不打草稿的方法不可能设计出优秀的网页。所以在开始制作网页时，要先在纸上画出页面的布局草图。

准备若干张白纸和一支铅笔，先在纸上设计站点。

从图5.9的布局可以看出：页面左边是向左凹的弧线，再用Phontshop做一些小圆按钮；页面右边为向左凹的整体布局，加上艺术字；页面中间为常规字体，设置主体内容。下面分别介绍。

① 尺寸选择。目前一般800 × 600的分辨率为约定俗成的浏览模式。为了照顾大多数访问者，页面的尺寸以800 × 600的分辨率为准。

② 造型的选择。先在白纸上画出代表浏览器窗口的矩形，这个矩形就是布局的范围。选择一种形状作为整个页面的主题造型，我们选择半圆形，因为它代表者柔和，和时尚流行比较相称；然后在矩形框架里随意画出来，可以试着再增加一些弧线或者其他形状。

网页左上部为网站标志，左下部分为半圆图形加上左凹的弧线，配以圆形小按钮；右上部分画出图片插入区，右下部分又是一个半圆图形，中间部分是学校主体内容，比如论坛入口、邮局入口，将其画下来，会发现很乱。设计者要在这看似很乱的图形中找出隐藏在其中的特别的造型。还要注意一点，设计者不要担心设计的布局是否能够实现。事实上，只要能想到的布局都能靠现今的HTML技术实现。

③ 增加文本。页面的空白部分加别加入文本，比如在页面的中间部分输入主体导航链接内容。

④ 增加图片。图片是美化页面和说明内容必须的媒体，比如在左上部分插入网站logo图标，在页面右上部分插入校园图片。

经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是自己以后制作网页的重要参考依据。

（2）软件布局法。如果不喜欢用纸来画出自己的布局意图，那么可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。利用Photoshop不像用纸来设计布局，可以方便地使用颜色和图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。