1.2 网站配色方案（教案）-高一《网页设计与制作（Dreamweaver CC》同步精品课堂（电工版2021）

课 题 模块一 网站配色方案 课 型 理实一体 课 时 1 授课班级 授课时间 授课教师 教材分析 《网页设计与制作》是为了适应中等职业学校计算机课程改革的要求，从网页制作技能培训的实际出发，结合当前网页技能培训的实际出发，结合当前网页制作软件的流行版本DreamweaverCC，有利于初学者快速掌握必备的知识。 本节课内容为教材中“模块一 网站配色方案 学情分析 知识储备： 通过在记事本和Dreamweaver中使用HTML代码制作网页。 能力水平：介绍HTML代码的常用标记，以及使用HTML代码制作简单网页的方法。 学习目标 知识目标：通过在记事本和Dreamweaver中使用HTML代码制作网页； 能力目标：介绍HTML代码的常用标记，以及使用HTML代码制作简单网页的方法； 素质目标：介绍HTML代码的常用标记，以及使用HTML代码制作简单网页的方法。 学习重难点 教学重点：通过在记事本和Dreamweaver中使用HTML代码制作网页； 教学难点：介绍HTML代码的常用标记，以及使用HTML代码制作简单网页的方法。 教学方法 实物展示法、讲授法、演示法 课前准备 教师准备：讨论主题、学生任务书 学生准备：在线讨论、完成任务书 教学媒体 多媒体教室 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1.操作引出主题 提前进行实操操作，让学生大致了解网站配色方案的知识和主要内容的预习。 2.分发学习任务书 引导学生分析任务书，明确本节课的学习内容。 3.展示学习目标 1.提前预习内容 2.接收并查看本节课堂任务书 3.查看并记住本节任务的学习目标 1组织学生观看实操内容，让同学们提起兴趣，对学习内容参与度更深。 2.下发和展示任务，让学生明确课堂任务，学习课堂知识 活动二： 调动思维 探究新知 网站配色方案 1、色彩的基础知识 色彩是网站最主要的组成部分，页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩一般分为无彩色和有彩色两大类。无彩色是指黑、灰、白等不带颜色的色彩，有彩色是指红、黄、蓝带颜色的色彩。 （1）色彩 色相：指色彩的相貌，也就是各种颜色的区别，是色彩最显著的特征。 明度：指色彩本身的明暗程度，简单来说，就是色彩的程度 纯度：指色彩本身的鲜艳程度，又称为饱和度。 （2）色彩的感觉 红色：最引人注目的色彩，具有强烈的感染力，象征热情、喜庆、幸福，是节日和庆祝活动的常用色。 绿色：是与大自然的生命一致的色彩，象征平静、健康、健全、和谐和安全e 蓝色：使人联想到天空、海洋，给人以爽朗、清凉的感觉，象征平静、稳定、和谐、 黄色：给人明朗、愉快的感觉，象征光明、希望、咼贵、愉快。 橙色：介于红色与黄色之间，可以营造一种温馨的氛围，象征温馨、时尚、轻快。 紫色：是一种优雅、高贵、充满灵性并能激发创造力的颜色，象征优雅、高贵、神秘、忧郁。 白色：给人以干净、整洁的感觉，象征纯洁、天真、轻松、神圣。 黑色：是一种比较经典的色彩，象征严肃、神秘、威严、深沉、压抑。 灰色：是一种可以衬托任何色彩的颜色，象征温和、谦让、平凡、考究。 网站配色方案 通过来源以及演变方式等知识的学习，完成课后练习。 1. 细化课程知识点设计，让学生更好的理解和掌握。 2. 知识点在学生心理更清晰明了。 2．色彩的搭配原则 （1）网页色彩搭配时，要善用单色、对比色、邻近色和同类色。 （2）网页要用与众不同的色彩，不同类型的网站配以不同的色彩，从而表达不同的情感诉求。 （3）色彩要和网站的内容、文化氛围相符，以便更好地突出网站的特色。 （4）网页配色时，尽量把颜色控制在三种之内，以免使页面产生“乱”的效果。 色彩的搭配原则 （1）讲解每个特点，并结合实际操作形式和操作方法的形式进行讲授。 （2）听课、理解；针对不明白知识点提问、讨论，询问学生是否对知识理解透彻。 1.按学生的学习规律，循序渐进引入本课重点知识学习 2.通过课件、实操截图等多媒体方式讲解，易于学生理解和实战。 活动二： 调动思维 探究新知 3.常见的配色方案 （1）儿童类网站：常运用幸福感强烈、温情、智慧和希望的黄色：干诤、清澈的蓝色；有朝气、健康、自然的绿色；温馨、活泼、有朝气的橙色。 （2）教育类网站：常运用平静、清澈的蓝色或代表希望的绿色。 （3）企业类网站：常运用沉稳、冷静、严谨、成熟的冷色调蓝色，给人一种稳定感，使访问者容易建立对网站的信任。 （4）购物类网站：常运用红色、黄色、橙色等暖色调渲染氛围，让访问者感觉到轻松愉快。 （5）旅游休闲类网站：常运用代表大自然、健康和希望的绿色，以及代