1.2 网页设计知识

在网页设计中，网页创意设计是非常重要的环节，它可以表达网站主题，展现优美的视觉效果，与平面设计类似，属于视觉艺术设计的范畴。网页设计要具有一定的独创性，符合用户的审美情趣，同时还要兼顾突出主题，满足表达内容和使用便捷的要求。

色彩、网页设计元素和页面布局是网页创意设计的三个重要组成部分。

1.2.1 色彩

1. 认识色彩

自然界中有很多色彩，色彩可以分为非彩色和彩色两大类。非彩色包括黑、白、灰三种颜色，其他色彩都属于彩色。任何色彩都具有色相、明度和纯度三种属性。

色相是色彩的名称，是一个色彩区别于另一个色彩的主要因素。通常用色环来表示色彩系列，基本色相为红、橙、黄、绿、青、蓝、紫，如黄、绿表示不同的色相。如果对同一色相调整不同的亮度或纯度，就会产生搭配效果良好的色彩。

明度也称为亮度，表示了色彩的明暗程度，明度越大，色彩越亮。如果页面采用鲜亮的颜色，就会使人感觉绚丽多姿，生机勃勃，如儿童类、购物类网站；反之，明度越低，色彩越暗，如一些游戏类网站，充满神秘感。

纯度是指色彩的鲜艳程度，又称饱和度。色彩纯度越高的颜色越鲜艳，纯度越低的颜色越灰暗。

2. RGB色彩模式和网页安全色

自然界色彩缤纷，但每种色彩都可以用红（R）、绿（G）、蓝（B）3种色彩按一定的比例调和而成，这三种色彩被称为光的三原色，如图1-2所示。在Dreamweaver中，可以在颜色对话框中，通过设定红（R）、绿（G）、蓝（B）三种色彩值，得到任何其他颜色，如图1-3所示。

图形图像软件可以处理高达上千万种颜色，但有些颜色会由于环境条件的变化而变化，在不同操作系统和浏览器中，同一种颜色也许会显示出不同的明度或者色相效果。

为此，将在不同操作系统和浏览器中具有一致显示效果的颜色定义为网络安全色，网络安全色有216种。在网页设计软件中，任何颜色都有一个六位的十六进制编号，如#D6D6D6，任何由00、33、66、99、CC或者FF组合而成的颜色值，都表示一个Web安全色，如图1-4所示。

3. 利用图像配色

在网页设计中，可以根据页面创意的需要，选择一个色彩效果好的彩色图片作为色彩源，从图片中选取颜色作为网站设计的主题颜色，具体方法如下。

首先，利用图像软件的吸管工具选取一个或若干个色彩，取得色彩数值；然后，在网络安全色中匹配相同或相近的颜色数值，作为网页的主题颜色；最后可将这些颜色应用于网页设计中，完成色彩的搭配。如在金色俱乐部网站中，可以选取蓝天、草地和白云的颜色作为主题色，进行网站设计，如图1-5所示。

1.2.2 网页设计元素

尽管网页千差万别，但网页的基本构成元素是固定的，包括网站logo、网站banner、导航条、图像、动画和背景等。

1. 网站logo

网站logo也称为网站标识，由文字、符号、图案等元素按照一定的设计理念组合设计而成，它是整个网站独有的形象标识。在一些企业网站中，企业标识可以作为网站标识。在正规的网站中，网站logo是必备元素。

一般地，将网站logo置于页面比较醒目的位置，如左上角。在网站的推广和宣传中，可以突出网站特色，树立良好的网站形象，表达网站内容精粹和文化内涵，如图1-6、图1-7所示。

2. 网站banner

网络banner有各种规格和形式，可以称为旗帜广告，横幅广告和条幅广告等。网站banner一般位于页面的顶部，既可以表达和突出网站创意和形象，也可以传达某种特定信息。在商业网站中，网站banner是一种网络广告形式，向用户传达了特定的产品和服务信息。

网络banner通常是由GIF动画、JPEG图像或Flash动画完成的，如图1-8所示。

3. 导航条

导航条是网站设计中最重要的元素之一，既表现了网站的结构和内容分类，又方便了用户对网站的浏览。

一般地，导航条在网站中各个页面中的位置相对固定，通常位于页面的左侧、上部或下部，如图1-9、图1-10所示。

在一些较大型的网站中，可能会有多个导航条，方便用户浏览。

导航条在设计风格上既要与其他设计元素保持一致，还要凸显出在页面中的重要地位。同时，不同页面中的导航条或一个页面中不同位置的导航条也要相互协调。

4. 图像

图像是网页设计中最常用的设计元素之一，具有直观和色彩丰富的特点，可以传达丰富信息，凸显创意风格。在网页设计中，通常使用GIF、JPEG和PNG等三种图像格式。GIF用于画面简单、细节信息少的图像，如背景图片，可以减少图像文件的大小；JPEG用于画面较为复杂、细部信息多的图像；PNG用于有透明背景的图像。

在网页中的图像有两种来源，一种是独立完整的图像，另一种是在Firework或Photoshop中使用切片功能处理后的分割图像。

5. 动画

网页设计中常用的动画有GIF动画和Flash动画。GIF是图像动画，一般用于对动画效果要求比较简单的场合，可以由Firework/Photoshop制作完成；Flash是图形图像动画，一般用于对动画效果要求较高的场合，由Flash专业软件制作完成，如图1-11所示。

6. 背景

在网页设计中，背景处于从属地位，起到辅助作用。背景既可以是纯色背景，也可以是图像背景，GIF格式和JPEG格式均可。使用不当可能喧宾夺主，使用合理能够增强页面的整体创意效果，如图1-12所示。

1.2.3 页面布局

网页设计元素是组成网页的基本要素，将这些网页元素在页面中进行组合和排列称为页面布局，页面布局既要满足页面的结构布局需要，还要符合大众艺术审美情趣。

1. 结构布局

在网页设计中，结构布局是根据设计元素在网页中位置分布特点进行分类的，常用结构布局包括“国”字型、拐角型、上下框架型和左右框架型等类型。

“国”字型布局的突出特征为中间部分为主题内容，左右两侧有小侧栏，上部为网站logo、网站banner和导航条等，下部为页脚导航条和版权信息等，这种方式在大型网站中应用较多，页面布局稍显复杂，如图1-13所示。

拐角型布局与“国”字型布局相比有所简化，上部为网站logo、网站banner和导航条，主题内容在一侧，另一侧有小侧栏，下部为版权或其他信息等，如图1-14所示。

上下框架型布局较为简单，上部为网站logo和导航条等，中间部分为主题内容，底部为版权信息及页脚导航条，一般用于小型网站，如图1-15所示。

左右框架型布局也较为简单，一般左侧为导航条，右侧为主题内容，如图1-16所示。

2. 艺术布局

在网页设计中，不仅要考虑内容栏目和结构布局，还要从审美的角度进行页面设计，使网页更具有艺术感染力。常用的平面艺术设计原则包括分割、对称和平衡等。

分割是把整体分割成部分，可以使页面效果生动活泼，如图1-17所示。对称则较易理解，不再举例。

在网页设计中，有些造型没有明显的布局结构，页面中设计元素呈现不规则分布状态。利用平衡原则，使各设计元素达到一种视觉平衡效果，产生艺术美感，如图1-18所示。

总之，页面设计不要拘泥于固定的结构布局和艺术设计原则，而是根据内容和栏目编排要求以及客户审美需求，将各种典型结构灵活运用，将艺术设计原则融会贯通，锐意创新，创作出结构布局合理、页面精美的网页。