DreamweaverCS5网页设计与制作第3版 吕宇飞电子教案1-5.docVIP

项目一：主页欣赏及页面分析 课题名称：1．6 色彩运用 教学目标 1．知识与技能目标 了解色彩基础知识和常用的配色方案，掌握彩色属性、色彩的三原色和网络安全色。 2．操作技能目标 能够进行配色方案的设计，并培养相应的审美能力。 教学分析与准备 1．教学重点 色彩基础知识和常用的配色的掌握 2．教学难点 如何进行页面整体的配色设计 3．教学策略 讲授、演示、讨论相结合 4．教学环境 多媒体网络机房 学习过程 教学组织 教学内容 备注 引入新课 （建议教学5分钟） 色彩基础知识讲解（建议教学5分钟） 教师点评分析网网页，并结合色彩知识点进行讲解（建议教学12分钟） 教师要点分析（建议教学5分钟） 网络安全色（建议教学4分钟） 网页配色软件的使用示范和讲解（建议教学9分钟） 课堂小结（建议教学2分钟） 布置作业（建议教学3分钟） 观察与分析资源包提供的一系列网页的浏览。 １、色彩基本概念 任何一种彩色具有三个属性： 　　(1)色相(Hue)： 　　(2)饱和度(Saturation)： 　　(3)明度： 　　非彩色只有明度特征，没有色相和饱和度的区别。 ２、色彩的三原色 色彩的三原色是指红、绿、蓝。通过调整这三个基色RGB（红、绿、蓝）就可以调出其它的颜色。 3、色彩的感觉。不同的颜色会给浏览者不同的心理感受。 　　红色 ——一种激奋色彩，代表热情、奔放、喜悦、庆典。刺激效果使人产生冲动、愤怒、热情和活力的感觉。 　　绿色 —— 介于冷暖两种色彩的中间，代表植物，富有生命和生机，从而显得和睦、宁静、健康。和金黄、淡白搭配，可以产生优雅、舒适的气氛。 　　橙色 —— 代表欢快，甜美与收获，是一种激奋色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。 　　黄色 —— 代表高贵、富有，它的明度最高，具有快乐、希望、智慧和轻快的个性。 　　蓝色 —— 代表天空、清爽，是最能体现凉爽、清新、专业的色彩。和白色混合体现柔顺、淡雅和浪漫的气氛。 　　白色 —— 代表纯洁、简单，具有洁白、明快、纯真和清洁的感受。 　　黑色 —— 代表严肃、夜晚、沉着，具有深沉、神秘、寂静、悲哀和压抑的感受。 　　灰色 —— 代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。 4、常用的配色方案： 　（1）暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。 　（2）冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。 （3）相近色：将色彩按红-黄-绿-蓝-红依次过度渐变可以得到一个色彩环。即红、橙、橙黄、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、紫红、红。 (如下图24色的色彩环) 图1-6-15 色彩环中相邻的三种颜色即相近色。相近色的搭配使视觉效果很舒适，很自然。因此相近色在网页设计中极为常用。 （4）对比色调。即色性完全相反的色彩搭配。例如：红与绿、黄与紫、橙与蓝等。这种色彩搭配可以产生强烈的视觉效果，体现页面的亮丽、鲜艳和喜庆。运用时需要注意把握“总体协调，局部对比”原则，使总体色调统一和谐，局部实现强烈对比，避免产生俗气、刺眼的不良效果。 网页中各构成元素的色彩如何搭配： 1、主题 色彩运用必须适合主题，例如体育运动、节日等网页设计时运用较多的暖色调；学术性强和一些极力表现材质的网页设计时则运用较多的冷色调。 2、网页标题 　 浏览者要在页面间跳转，了解网站的结构和内容，都必须通过导航或者页面中的一些小标题。可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，使网站清晰，层次分明 3、网页链接 　　因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。设置独特的链接颜色，提高便捷的浏览效率。 4、网页文字 　　如果页面用了背景颜色，必须要考虑到与前景文字的搭配等问题。背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。背景和前文的对比尽量要大，以便突出主要文字内容。 5、网页标志 网页标志是宣传网站最重要的部分之一，因此可以把标志和Banner广告色彩设计得更为鲜亮，色彩方面可以区别于网页的主题色，甚至使用与主题色相反的颜色。 网络安全色的使用 网络安全色为216种颜色，其中彩色为210种，非彩色为6种。它是指在不同硬件环境、不同操作系统和不同浏览器中都能正常显示的颜色集合，这些颜色在任何终端浏览效果都是相同的。因此使用网络安全色进行网页色彩配色可以避免颜色失真的问题。当然它在实现一些高精度真彩色图像时会有欠缺，但完全可以使用于徽标或二维平面效果。 网页配色软件（见本节资源包的“网页配色软件”文件夹内，收集于因特网）的使用。 1、 彩色具有的三个属性：色相、饱和度、明度。非彩色只有明度特征。 2、 色彩的三原色：红、绿、蓝。 3