1、1,第9章 网页布局与配色,在之前的章节中，介绍了使用Dreamweaver制作网页的技术与技巧。制作网页时，用户除了需要了解网页制作的各种技术外，还需要具备一定的艺术设计基础，要把握网页的整体视觉效果。,2,本章学习要点:,平面设计的基础平面构成方式网页的平面布局特点网页色彩基础知识色彩的搭配艺术常见网页类型的色彩分析,3,9.1 平面设计基础,平面设计是艺术设计的一个门类，其原理是通过平面化的视觉元素，在印刷品、电子出版物甚至岩石、木板等介质上进行设计活动，创造美的作品。网页设计是平面设计的一个重要分支，在学习网页设计时，首先应了解一些平面设计的基础知识。,9.1.1 平面构图基础,构图是
2、平面设计的基础，其意义在于将若干基本的视觉元素组成一个完整的平面结构，从而形成一个整体。以视觉元素的形成方法来划分，平面构图又分为三大类。1几何形2有机形3偶发形,4,9.1.2 平面中的点,平面艺术是位于平面媒体上的艺术，日常见到的平面设计元素大体可根据形状而分为三大类，即点、线和面。点、线和面是构成一个完整平面作品必不可少的部分。,5,9.1.3 平面中的线,线也是一种重要的平面构成元素，也是一种具有位置、方向和长度的几何图形。用户可将线理解为点运动的轨迹。根据线的形状，可将其划分为直线和曲线两大类。,6,9.1.4 平面中的面,按照解析几何学的解释，面是线运动的轨迹，在平面构成中，面是具
3、有长度、宽度和形状的实体。1面的分类2面的笔触轮廓3面的填充内容,7,9.1.5 平面的构成,平面的构成，就是将各种点、线和面等基本构成元素按照一定的规律有机地组成整体，从而营造出整体的视觉效果。在了解基本平面构成之前，首先应了解构图元素之间的关系，从而接近设计和构成的本质。,8,9.2 网页的平面布局,在了解了平面设计的基础后，即可将平面设计的知识与网页设计的特点相结合，研究网页的平面布局特色。网页的布局方式主要包括两种，即结构化布局与艺术化布局。,9,9.2.1 网页结构化布局,结构化布局是最基本的网页布局方式，其特点是将网页的各种结构模块进行平面排列，以构成整个网页。常见的网页结构化布局
4、方式主要包括以下几种。1“国”字形网页布局2拐角型网页布局3左右框架型网页布局4上下框架型网页布局5封面型网页布局,10,11,9.2.2 网页艺术化布局,网页艺术化布局，顾名思义就是用平面设计艺术的构成方式来构建网页，使网页的整体效果更佳美观，其分为以下几种手法。1分割构成2对称构成3平衡构成,12,9.3 色彩基础知识,在大自然中，凡是能够发光的物体都被称作光源。人类的肉眼在观察这些光源时，会根据光的波长在而对这些物体进行辨识。色彩就是人类根据光的波长而总结出的抽象概念。光的波长不同，在人类肉眼中形成的色彩也不同。,9.3.1 光与原色,光是可以混合和分解的。通过对光的分解，理论上可以将绝
5、大多数的光分解为多种色光。例如，将白色光分解，往往可以分解为三种光，即红光、绿光和蓝光。 红光、绿光和蓝光是三种特殊的光，是无法被分解的光。因此，人们称这三种光为原色光，而红、绿和蓝等三种颜色，被称作三原色。,13,14,9.3.2 色彩的属性,任何一种色彩都会具备色相、饱和度和明度三种基本属性。这3种基本属性又被称作色彩的三要素。修改这3种属性中任意一种，都会影响原色彩其他要素的变化。1色相2饱和度3明度,15,9.3.3 216网页安全色,216网页安全颜色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。所以
6、使用216网页安全颜色进行网页配色可以避免原有的颜色失真问题。,9.4 色彩的搭配艺术,在了解了色彩的基础知识后，即可着手尝试为网页确定采用的主题颜色，和与之相搭配的其他颜色。这种确定主题颜色和搭配颜色的方法就是色彩的搭配。色彩搭配是以灵活使用各种色彩为基础的。,16,17,9.4.1 色彩的分析,色彩对人的头脑和精神的影响力，是客观存在的。色彩的知觉力、色彩的辨别力、色彩的象征力与感情，这些都是色彩心理学上的重要问题。1色彩情感2色彩联想3色彩知觉,9.4.2 色彩的调和,平面设计中，往往需要确立一个核心的主色调，以该色调为基础进行色彩的选择。所谓调和，就是通过对主色调进行各种变化，以求出与
7、之相符的颜色，并将这些颜色应用到平面设计中，以追求色彩的和谐效果。 调和色彩的依据就是主色调，主色调越明显，则作品的协调感越强，而主色调越不明显，则作品的协调感就越弱。调和需要依靠各种色彩因素的积累，以及色彩属性的相近。调和的方式主要包括以下几种。1色相调和2明度调和3低饱和度色彩调和4主色调比例悬殊调和,18,19,9.4.3 色彩的对比,色彩的调和是决定平面设计作品稳定性的关键。而如果需要平面作品展示色彩的冲击力，赋予作品激情，丰富作品的内涵，则需要使用到对比的手法。对比也是色彩搭配的一种主要方法，其手法与调和完全相反，需要动过差异较大的两种或更多鲜明的色彩来形成。对比的方式主要包括4种。
8、1色相对比2饱和度对比3明度对比4色性对比,9.5 网站中的色彩应用,网站的色彩设计有其自身的色彩应用规律。为求得良好的整体效果，选定的色彩组合要结合框架设计来分配色彩面积和位置。如果要以突出的色彩设计形成网站风格，就需要有计划性地思量色彩布局和色彩组合。,20,21,9.5.1 色彩分类,在网页中，色彩根据其作用的不同，可以分不同的色彩，其作用也各不相同。1网页静态色彩2网页动态色彩3网页强调色彩,9.5.3 网页色彩规则,在网站中使用色彩，要多方面考虑，既要使网站风格独特，也要考虑到网站的功能性与实用性。这样才能使网站既有欣赏价值，还具有实用价值。下面就从单个网页以及整个网站两大方面来介绍网页色彩的规则。1特色鲜明2搭配合理3单色的使用4可读性的色彩设计5色彩计划,22,23,9.5.4 网站色彩分析,当了解单纯颜色的使用后，还需要从网站的不同方面来决定色彩的搭配。1网站风格与色彩设计2网站主题与色彩设计3同色调的不同风格网站,
