一、课程性质
技能训练课
二、课程开设学期及基准学时、学分
1、课程开设学期：第三学期；
2、基准学时：54学时；
3、学分：3学分。
三、先修课程
先修课程：计算机基础、程序设计课程；网站策划与网页设计：商务网站美工实训。
四、课程目标
《网页色彩搭配实训》主要针对网页设计中的配色进行研究和讲解。《网页色彩搭配实训》共分为13章，第1-4章主要阐述了色彩的基本原理、色彩的象征意义、网页设计中的搭配技巧等基础知识。第5-12章是《专业色彩搭配手册:网页配色》的核心部分，对不同色彩（红、橙、黄、绿、青、蓝、紫、黑）在不同行业（食品类、公司展示类、女性用品类、综合门户类、电子商务类、产品类等）的典型应用进行详细地分析和讲解，也详细地介绍了不同色彩之间的搭配，把理论融入到设计中，既锻炼了网页设计者对网页设计的分析能力和审美能力，又能够激发出网页设计者的创意与灵感，使网页设计者能够很好地掌握网页配色在设计中的应用要点。第13章列举了常用的网页颜色代码，每种色系都有16进制数值的对照，可以使网页设计师在工作中提高效率。
《专业色彩搭配手册:网页配色》是网页设计师在实际工作中必备的网页配色案例参考拍，也是网页设计爱好者的学习工具书。
1、知识目标：
（1-1）掌握网页色彩的基本原理，色彩的象征意义，色彩的搭配技巧；
（1-2）掌握不同色彩的搭配方法；
（1-3）掌握常用网页颜色代码，以及16进制配色对照；
（1-4）掌握网页中色彩构成；
（1-5）了解网页设计中色彩的搭配、以及颜色模式；
（1-6）掌握三原色在网页设计中的运用；
（1-7）掌握网站设计；
（1-8）掌握网站色彩管理；
2、能力目标：
（1-1）对网页的色彩构成具有一定的了解，并了解三原色；
（1-2）具备感知色彩的能力；
（1-3）具备一定色彩搭配的能力；
（1-4）具备色彩构成在网页设计的运用。
（1-5）具备了解RGB、CMYK模式的运营；
（1-6）具备三原色运用的能力；
（1-7）具备一定网页设计的能力；
（1-8）具备项目中色彩管理的能力；
五、课程内容与学时安排
项目
| 编号 | 项目名称 | 项目内容 | 主要教学知识点 | 学习目标 | 学时 |
| 1-1 | 认识色彩 | 1.1 色彩构成 1.原色 2.间色 3.复色 4.同种色 5.同类色 6.类似色 7.邻近色 8.对比色 9.互补色 1.2 色彩的三要素 1.明度 2.色相 3.纯度 1.3 色彩的对比 1.明度对比 2.色相对比 3.纯度对比 4.面积对比 5.补色对比 6.冷暖对比 | 1、色彩构成中了解原色、间色、复色等基本的构成原理。 2、色彩三要素明度、色相、纯度； 3、色彩对比中明度、色相、纯度的相关知识。 | 1、对色彩构成有一定的了解。 2、色彩三要素的把握； 3、色彩对比的掌握，对色彩明度、色相、对比度、补色、冷暖色的掌握。 | |
| 1-2 | 感知色彩 | 2.1 色彩的象征意义 1.红色调 2.橙色调 3.黄色调 4.绿色调 5.青色调 6.蓝色调 7.紫色调 8.黑色调 9.白色调 10.灰色调 2.2 色彩的感觉 1.柔和、明亮 2.洁净、爽朗 3.可爱、有趣 4.运动、轻快 5.女性、优雅 6.自然、冷静 7.传统、古典 8.简单、洁净 9.时尚、高雅
| 1、色彩的象征意义。不同颜色的象征意义。 2、色彩的感觉，不同颜色对人的感受。 | 1、掌握色彩的象征意义，根据实际灵活运营色彩。 2、掌握色彩的感觉，不同色彩对人的感受。 | |
| 1-3 | 网页中色彩搭配 | 3.1 网页的彩色搭配 3.2 网页的非彩色搭配 3.3 网页的搭配技巧 1.一种颜色搭配 2.两种颜色搭配 3.多种颜色搭配 4.无彩色与有彩色搭配 | 1、色彩搭配的方法； 2、网页的非色彩搭配原理； 3、网页搭配技巧运用。 | 1、掌握色彩搭配的基本方法； 2、网页中遇到非色彩搭配的一些基本原理； 3、网页搭配的技巧运用。 | |
| 1-4 | 色彩赋予页面的活力 | 4.1 网页色彩搭配原理 1.根据内容选择合适的颜色 2.色彩鲜明，主题突出 3.色彩独特，与众不同 4.根据色彩的特性选择合适 的颜色 4.2 色彩模式 1.RGB颜色模式 2.CMYK颜色模式 3.HSB颜色模式 4.Lab颜色模式 5.灰度颜色模式 6.位图颜色模式， 4.3 网页颜色模式 4.4 页面文件格式介绍 1.PSD文件格式 2.JPEG文件格式 3.GIF文件格式 4.PNG文件格式 5.SWF文件格式 | 1、网页色彩搭配原理；根据内容、主题、色彩的特效进行搭配； 2、色彩模式，对几种不同模式的颜色进行了解。 3、网页中文件格式的把握。 | 1、掌握网页色彩搭配的原理，根据不同情况进行色彩搭配运用； 2、对网页色彩模式的掌握； 3、网页文件保存格式的掌握。 | |
| 1-5 | 红色系在网页中应用 | 5.1 红色系配色方案 5.2 红色系网页案例分析 1.食品、饮食类刚贞 2.公司展示类网页 3.女性用品网页 4.综合门户类网页 5.电子商务类网页 6.产品类网页 7.其他类网页 5.3 红色系网页色彩搭配案例 1.朱红色 2.深红色 3.玫瑰红色 4.粉红色 5.红色+黑色 6.红色+绿色 7.红色+黄色 8.红色+蓝色 9.红色+黑色+灰色 5.4 红色系的文字颜色搭配 | 1、色彩搭配，红色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用。 | 1、灵活运用红色在网页设计中； 2、实际操作练习。 | |
| 1-6 | 橙色在网页中应用 | 6.1 橙色系配色方案 6.2 橙色系网页案例分析 1.食品、饮食类网页 2.娱乐类网页 3.个性展示类网页 4.综合门户类网页 | 1、色彩搭配，红色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用 | 1、灵活运用多色在网页设计中； 2、实际操作练习。 | |
| 1-7 | 黄色系在网页中应用 | 7.1 黄色系配色方案 7.2 橙色系网页案例分析 1.食品、饮食类网页 2.娱乐类网页 3.个性展示类网页 4.综合门户类网页 | 1、色彩搭配，多色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用 | 1、灵活运用多色在网页设计中； 2、实际操作练习。 | |
| 1-8 | 其他颜色 | 第7章 黄色系在网页中的应用 第8章 绿色系在网页中的应用 第9章 青色系在网页中的应用 第10章 蓝色系在网页中的应用 第11章 紫色系在网页中的应用 第12章 黑色系在网页中的应用 | 1、色彩搭配，多色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用 | 1、灵活运用多色在网页设计中； 2、实际操作练习。 | |
| 1-9 | 常用网页颜色代码表 | 常用网页颜色代码表 | 常用网页颜色代码表对照。 | 掌握常用网页颜色代码表方法。 |
| 序号 | 项目 名称 | 训练任务 | 实现的能力目标 | 相关支撑知识 | 训练方式、手段、步骤 | 结果 |
| 1-1 | 认识色彩 | 1、色彩构成作业； 2、色彩三要素的辨别。 | 1、对色彩构成有一定的了解。 2、色彩三要素的把握； 3、色彩对比的掌握，对色彩明度、色相、对比度、补色、冷暖色的掌握。 | 1、色彩构成中了解原色、间色、复色等基本的构成原理。 2、色彩三要素明度、色相、纯度； 3、色彩对比中明度、色相、纯度的相关知识。 | 1、项目导入； 2、按操作指导，掌握工具使用； 3、写项目报告； 4、评分。 | 项目报告 |
| 1-2 | 感知色彩 | 1、找出影响网站可用性的因素； 2、在设计中去训练可行性因素 | 1、掌握色彩的象征意义，根据实际灵活运营色彩。 2、掌握色彩的感觉，不同色彩对人的感受。 | 1、色彩的象征意义。不同颜色的象征意义。 2、色彩的感觉，不同颜色对人的感受。 | 1、项目导入； 2、按操作指导，掌握工具使用； 3、写项目报告； 4、评分。 | 策划报告 |
| 1-3 | 网页中色彩搭配 | 1、项目导入，选择汽车、服装类项目导入。 | 1、掌握色彩搭配的基本方法； 2、网页中遇到非色彩搭配的一些基本原理； 3、网页搭配的技巧运用。 | 1、色彩搭配的方法； 2、网页的非色彩搭配原理； 3、网页搭配技巧运用。 | 1、项目导入； 2、按操作指导，掌握网站布局； 3、写项目报告； 4、评分。 | 项目设计 |
| 1-4 | 色彩赋予页面的活力 | 1、项目导入，选择广告公司、科技类公司项目导入。 | 1、掌握网页色彩搭配的原理，根据不同情况进行色彩搭配运用； 2、对网页色彩模式的掌握； 3、网页文件保存格式的掌握。 | 1、网页色彩搭配原理；根据内容、主题、色彩的特效进行搭配； 2、色彩模式，对几种不同模式的颜色进行了解。 3、网页中文件格式的把握。 | 1.项目导入 2.按操作指导，掌握网站的基本设计。 3.做设计报告 4.评分 | 项目报告 |
| 1-5 | 红色系在网页中应用 | 例分析 1.食品、饮食类刚贞 2.公司展示类网页 3.女性用品网页 4.综合门户类网页 5.电子商务类网页 6.产品类网页 7.其他类网页 | 1、灵活运用红色在网页设计中； 2、实际操作练习。 | 1、色彩搭配，红色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用。 | 1.案例欣赏； 2.项目导入， 3.任务设计。 4.评分。 | 项目设计 |
| 1-6 | 橙色在网页中应用 | 案例分析 1.食品、饮食类网页 2.娱乐类网页 3.个性展示类网页 4.综合门户类网页 | 1、灵活运用多色在网页设计中； 2、实际操作练习。 | 1、色彩搭配，红色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用 | 1、项目导入； 2、按操作指导，掌握工具使用； 3、任务设计； 4、评分。 | 项目设计 |
| 1-7 | 黄色系在网页中应用 | 案例分析 1.食品、饮食类网页 2.娱乐类网页 | 1、灵活运用多色在网页设计中； 2、实际操作练习。 | 1、色彩搭配，多色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用 | 1、项目导入； 2、按操作指导，掌握策划知识； 3、项目设计； 4、评分。 | 项目设计 |
| 1-8 | 其他颜色 | 案例分析 1.科技、生物类网页 2.娱乐类网页 | 1、灵活运用多色在网页设计中； 2、实际操作练习。 | 1、色彩搭配，多色的搭配方案； 2、色彩搭配：案例讲解； 3、案例运用 | 1、项目导入； 2、按操作指导，掌握策划知识； 3、项目设计； 4、评分。 | 项目设计 |
1、课程总体考核方案（表7-1）
| 考核手段（所占比例） | 考核内容（所占比例） | 具体考核方案 |
| 课程设计（60%） | 学生评分（50%） | 见表7-2（至少由5名同学组成学生评分小组） |
| 教师评分（50%） | 见表7-2 | |
| 平时成绩（40%） | 平时成绩（40%） |
| 评价标准 | 评价标准 | |||
| 概念理解 20分 | 色彩设计50分 | 色彩感知 10分 | 课程设计20分 | |
| 说明 | 对于概念的了解。 | 色彩设计、色彩理解 | 色彩的感知度。 | 做最终作业的色彩把控。 |
1、校内实训教学条件要求
| 序号 | 实训项目（任务） | 实训室 | 实训资源名称 | 时间安排 |
| 1 | 认识色彩 | 多媒体实训室 | 硬件：局域网及计算机相关设备 | 第三学期 |
| 2 | 感知色彩 | 多媒体实训室 | 硬件：局域网及计算机相关设备 软件：Photoshop和Fireworks | 第三学期 |
| 3 | 网页中色彩搭配 | 多媒体实训室 | 硬件：局域网及计算机相关设备 软件：Photoshop和Fireworks | 第三学期 |
| 4 | 色彩赋予页面的活力 | 网站建设实训室 | 硬件：局域网及计算机相关设备 软件：Dreamweaver和Fireworks | 第三学期 |
| 5 | 红色系在网页中应用 | 网站建设实训室 | 硬件：局域网及计算机相关设备 软件：Dreamweaver和Fireworks | 第三学期 |
| 6 | 橙色在网页中应用 | 网站建设实训室 | 硬件：局域网及计算机相关设备 软件：Dreamweaver和Fireworks | 第三学期 |
| 7 | 黄色系在网页中应用 | 网站建设实训室 | 硬件：局域网及计算机相关设备 软件：Dreamweaver和Fireworks | 第三学期 |
| 8 | 其他颜色 | 网站建设实训室 | 硬件：局域网及计算机相关设备 软件：Dreamweaver和Fireworks | 第三学期 |
| 9 | 常用网页颜色代码表 | 网站建设实训室 | 硬件：局域网及计算机相关设备 软件：Dreamweaver和Fireworks | 第三学期 |
1、教材资料
（1）《专业色彩搭配手册:网页配色》教材 张磊 (作者), 胡柳 (作者)编写
（2）《网页美工设计实训》赵殊，范萍 编 高等教育出版社
（3）《网页设计与制作》 科学技术出版社2007
2、网络资源
（1)班组QQ群：申请级QQ群，使学生在本班群上对学习的问题随时讨论，引导学生有效利用网络，高效率使用计算机。
（2)教师博客：建立教师博客，以利与学生的沟通，把学习延伸到课外。
（3）充分利用网络优质学习资源：
www.w3school.com-----HTML标记语言，CSS标准
www.aa25.cn----标准之路，网络教程
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
