（2）原色、间色、复色
原色，又称为基色，即用以调配其他色彩的基本色。 原色的色纯度最高，最纯净、最鲜艳。可以调配出 绝大多数色彩，而其他颜色不能调配出三原色(红、 黄、蓝)。 间色，又叫“二次色”，是由2种原色调配出来的 颜色。红与黄调配出橙色，黄与蓝调配出绿色，红 与蓝调配出紫色。橙、绿、紫三种颜色又叫“三间 色”。在调配时，由于原色在份量多少上有所不同， 所以能产生丰富的间色变化。 复色：除了原色和间色以外的其它色。
4．构成的形式
（1）重复构成形式
重复构成是指用同一形态或同组形态有序地反复出现， 形成某种规律的构图形式。重复构成具有强化记忆的功能， 反复地出现会不断地加强视觉冲击，加深形象认识。
（2）近似构成形式
• 在重复构成中保持原有规律性的基础上，把重复元素的基 本形(大小、方向、色彩等)进行微小变化，就演变成了近似构 成形式。近似构成形式中既有形式变化，又有整体的统一。

比较简单的原色和间色的色环。
（3）色彩的三要素



任何一种彩色具备三个要素：色相、明度和纯度。其中非彩 色只有明度属性。 色相，指的是色彩的相貌、名称。这是色彩最基本的特征， 是一种色彩区别于另一种色彩的最主要的因素。比如说紫色， 绿色，黄色等等都代表了不同的色相。 明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩 越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色， 让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要 用于一些游戏类网站，充满神秘感。不同色彩明度不同（例 如白色比黑色明度高），相同色彩在不同强弱的光线下也有 不同的明度。 纯度，指色彩的纯净度，指含杂色的成份多少。纯度高的色 彩纯，鲜亮；纯度低的色彩暗淡，含灰色比较多。
3.3 网页版式设计
1．水平分割

水平分割强调的是层次感和精确感，并有助于不同 信息的分类，通常上方为导航栏，或者是企业动态 形象（Flash），下方是内容。水平分割应当考虑 到分割面积。水平不均匀分割，如果上半部分放置 标题或导航，则面积较小，上半部分放置主体内容， 则面积应适当加大。
2．垂直分割

3.4 网站布局
(4)页眉：对网站起宣传的作用或用于广告。 富有特色的页眉也是网站的一个重要标志。一般放网站的 口号、广告语等信息。 (5)页脚：名称、地址、版权、联系方式等信息 (6)站内搜索 (7)广告 举例（见下页）
2．网页布局的步骤
（1）制作网页的目的及内容：确定网页中需要放什么内容， 并收集资料 应该明确制作网页的目的，制作网页要完成什么任务，要 达到什么样的要求。在这一阶段，搜集制作网页的有关材 料，这些材料应该是真实、正确、详细的。为了以后制作 网页的方便，应该将这些内容写成书面材料，以免制作时 漏掉某些项目
2．线的构成



线有长度属性，而无粗细的限制。 线起分隔和修饰的作用。 线比点具有更强的心理感受。 不同的线给人不同的感觉。网页中的线的类型有： （1）直线（横直线、竖直线、斜直线） （2）曲线（几何曲线、自由曲线）

网页中直线的应用非常广泛，使用直线可以非常清晰明 了地划分页面的布局结构。
Word布局示意图
企业标志 关于龙媒 解决方案 龙媒视点 客户列表 在线咨询 公司动态 企业形象FLASH
图片
图片
图片
图片
媒体设计 说明文字
网站平台建设 说明文字
网络品牌顾问 说明文字
系统集成 说明文字
页脚
Photoshop布局示意图
CorelDRAW布局示意图
3.5 网站色彩搭配
1．色彩的基本概念 (1)现实生活中的色彩可以分为彩色和非彩色。 其中黑白灰属于非彩色系列。其它的色彩 都属于彩色。
2、视觉流程原理
(1)阅读习惯：人们阅读材料时习惯按照从左到右，从上到下 的顺序进行。浏览者的眼睛首先看到的是页面的左上角， 然后逐渐往下看。所以注意价值最大的上部、左侧、左上 与中上又被称为最佳视域。
最佳视域
(2)视觉心理学研究表明人在看一个平面内的信息时，上半 部分让人轻松，下半部让人稳定，左侧让人自在而右侧 让人压抑。这些心理特点都影响着人类的阅读习惯。
（3）软件布局
பைடு நூலகம்
可以使用Firework的图像编辑功能来设计网页版式布局， 也可以用Word、Photoshop或者是CorelDRAW。Word 进行简单的排版比较便捷；Photoshop所具有的对图像 的编辑功能在设计网页布局的图像设计上较为方便，利用 Photoshop可以方便地使用颜色，使用图形，并且可以 利用层的功能设计出用纸张无法表现的布局意念； CorelDRAW进行简单的排版和颜色配置有着更大的优势。 一般来讲使用Firework或CorelDRAW进行排版的设计师 多一些。
(3)加入一些线段可以引导视觉流程(P35图) 一条垂直线在页面上，会引导视线作上下的视觉流 动；水平线会引导视线向左右的视觉流动；斜线 比垂直线、水平线有更强的视觉诉求力；矩形的 视线流动是向四方发射的；圆形的视线流动是辐 射状的；三角形则随着顶角之方向使视线产生流 动；各种图形从大到小渐变排列时，视线会强烈 地按照排列方向流动。
（2）曲线形面
曲线形面也分为几何曲线形和自由曲线形两种。富于变化 和动感。它所表现出来的流动性和弹性给人以无限想象，使 人感到有种生命活力。它具有同曲线一样的女性特征。
（3）偶然形面

偶然形面是在现实生活中偶然获得的一种视觉形态。在平面 设计领域大部分偶然形面是通过特殊技术手段（如绘图软件 中的滤镜或毛笔绘制）获得的。它表现出来的是一种自然的、 无序的形态，有着丰富的象征意义。
3.2 构成设计在网页中的应用
点、线、面是构成视觉空间的基本元素，是表现视 觉形象的基本设计语言。网页设计实际上就是如何 处理好三者之间的关系，因为任何视觉形象或者版 式构成，归根结底，都可以归纳为点、线、面。 网页设计师应当将平面构成理论作为网页设计视觉 形象表现的指导思想，在具体设计过程中大胆运用 多种视觉元素形态变化和表现手法。它们是创造形 式美的基本要素，使网页具有不同的审美倾向。

（8）肌理构成形式
肌理是物质表面的形态，通常是指物体表面的纹理感觉。它 具有粗糙、细腻、柔软、生硬、干燥、湿润等特性，既有自 然形态的肌理(如水波纹、木纹、树叶纹等)，也有人为形态 的肌理(如布纹、墙纸等)。在网页设计中，大部分情况下可 作为网页的背景出现在页面设计中，使用适当的肌理作为背 景图案，将起到很好的视觉调节作用。
（3）渐变构成形式

渐变是一种常见的视觉效果，也是设计中常常使用的技巧。 渐变是指构图基本形(形状、大小、方向、颜色等)逐渐而有 规律地变化。它能够表现出空间感和时间感。
（4）特异构成形式

在重复、近似、渐变构成中，为了改变规律性的单调感，有 意识地出现不合规律的个别基本形，由此产生强烈的对比效 果，这种构成形式就称之为变异。变异的形式有大小变异、 形状变异、方向变异、肌理变异、色彩变异等。

垂直分割和水平分割有很多相似点，把水平分割的页面旋转 90度，即为垂直分割效果。Nikon体育用品网站就应用了这 种构图，这种构图结构清晰，给人工整、坚定和直爽的感觉， 能够树立独立的企业形象。

水平垂直分割是上面两种分割形式的综合运用，整个页面中 既有水平分割的部分，又有垂直分割的部分，互相交织构成 一种网状结构。荷兰壳牌石油公司的网站主页，页面给人一 种非常稳定的感觉，主要用于大型企业或者门户网站这样的 信息量巨大的网站主页。
第3章网站版式设计与颜色搭配

教学目标： 本章重点介绍“网站建设流程”中的“具体设计”阶段 中所使用到的相关知识，为读者实际动手建站打好基础。了 解网页的基本元素，根据视觉流程原理，依据构成原理来进 行网页版式设计（网页中放什么？怎么放？）。 重点和难点： 1．了解视觉流程原理 2．学习构成原理在网页中的应用 3．认识网页的基本元素 4．学习网页版式设计 5．网站的颜色搭配

3.1 视觉流程原理 3.2 构成设计在网页中的应用 3.3 网页版式设计 3.4 网站布局 3.5网站色彩搭配 3.6版式与色彩的综合案例
3.1 视觉流程原理
1、视觉流程的概念 人类的视觉流程习惯是由人类的眼晶体结构的生 理构造决定的，人眼只能产生一个焦点，不能同 时将视线集中在一处以上，所以人在阅读信息的 时候总有流动的习惯，先看这些再看那些。 视觉流程是人的视线在被观察物上的运动过程。 设计中合理的运用视觉流程对于信息的有效传达 极为重要，但同时又是很容易被网页设计者忽视 的因素。

举例：点具有凝聚视觉注意力的作用，在平面上只有一个点 时，我们的视线就会集中在这个点上。

当有两个等大的点或多个等大的点相距一定的距离时，我 们的视觉焦点就会在这几个点之间往返，在心理上产生了 一种“线”的感觉，引导视觉流程。

点是构成网页的最基本元素，具有装饰和活跃画 面气氛的作用。同时定位画面的视觉流程，使网 页更加统一。
3．水平垂直分割
4．变化分割

变化分割是在水平分割和垂直分割的基础上，添加 斜线和曲线的效果，这样的页面版式结构给人自由、 运动和时尚的感觉。
注意事项
形式要和主题相吻合 网站设计强调整体风格的统一
3.4 网站布局
网页布局的标准 美观、适用 1、网页中的基本元素 (1)网站标志LOGO LOGO的大小：88*31、120*60、120*90 (2)网站导航(一组超链接，帮助访问者快速准确地浏览网站) 原则：简洁，容易操作 位置：顶部或左侧 常用的方式：悬停式 (3)网页的主体内容 注意视觉流程原理、文图结合、动静结合、松紧适当。
（2）手绘布局 在实际设计网页之前，最好要在纸上绘制出页面版式草图， 以供设计时参考。手绘设计网页布局更加自由，根据客户的 要求，按照掌握的设计方法和一些构图规律来进行设计。这 个草图不会给客户看，尽量绘制得简单、明了。在设计时准 备工具。准备白纸若干，几支铅笔和一块橡皮，以免在设计 时由于缺少工具打断设计思路。