4.2.2 网页的版面设计

网页的版面设计主要包括两个方面的内容：

1、风格设计

2、版面布局设计

    网页的版面设计主要包括以下两个方面：

    一、风格设计

    风格是指网站的整体形象给浏览者的综合感受。有的严肃计策，有的清爽温馨　，有的深沉厚重，有的生动活泼，有的古朴典雅，有的豪迈奔放。风格设计与主题是密不可分的，是为突出主题服务的。

　　一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应保持风格一致。

    请观察我们《网络技术应用》专题网站风格：

    整体造型印象：清新淡雅、简洁大方

    主色彩：绿色

    标志与字体：宋体

    设计特色：按章节分布首页，方便大家学习。而且每一章节的内容都非常丰富，既符合初学者学习，也为有一定基础的学生提供拓展视野的文章。

     我们再来观察几个网站：注意它们的整体造型、色彩搭配、网站标志等各方面的内容。

[下面部分内容摘自：http://www.nhyz.org/lyj/it/shownews.asp?newsid=1059]

    网页色彩搭配很重要：

    　　色彩是Internet的光环，没有了色彩，我们在浏览网页时看到的将只是黑与白。

　　有很多网站以其成功的色彩搭配令人过目不忘。不过对于刚开始学习制作见面的人来说，网页的颜色搭配往往是最不容易驾驭的。关于色彩的原理有许多，你可以看看相关设计书籍，或者学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。

　　 在此，我们也总结了一些网页配色时的小技巧。
　　首先，给网站定一个基调。不同的颜色有着不同的含义，给人各种丰富的感觉和联想。

这里，我们为主页选择颜色时，可以按照下面这些原则进行选择。

　　1、页面选用一种色彩
　　先选定一种色彩，然后将色彩变淡或者加深，产生新的色彩，产生统一和层次感，如下图所示：

　　2、页面选用两种色彩
　　 先选定一种颜色，然后选择它的对比色，这样可以达到醒目、新颖的效果，如下图所示：

　　3、页面选用一个色系
　　简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。如下图所示：

　　上面三个原则我们可以结合使用，但一定要切记：不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

    二、版式布局设计

    网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。

　　一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。

　　版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。

    我们看看“虎门销烟启思录”网站主页的版面区域划分及制作效果图。如下示：

1、为你们小组开发的网站设计一种风格，并填写下表：

2、根据小组主题网站的内容及栏目结构，每人设计一个初步方案，经小组讨论，选出一个进行修改后作为本组版面样式。并以作业的形式提交给老师检查。

1、色系表（内网）

2、常用的色彩名、色彩值的对照表（内网）

3、圆点视线——色彩剖析（外网）

4、网页模板（外网）

5、最好模板（外网）