6.1 网页美工设计（教案）-高一《图形图像处理：Photoshop CC》同步精品课堂（高教版2018）

课 题 模块六 网页美工设计 课 型 理实一体 课 时 1 授课班级 授课时间 授课教师 教材分析 《图形图像处理——Photoshop CC》是为了适应职业教育教学改革和创新需要编写的。本书重点的介绍了使用Photoshop CC进行程序设计时应具备的基础知识、专业知识和使用技巧，详略得当、难度适中有利于初学者快速掌握必备的知识。 本节课内容为教材中“模块六 的第一部分 网页美工设计” 学情分析 知识储备：了解网页美工设计基础知识以及相关案例的实施； 能力水平：熟悉网页美工设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 学习目标 知识目标：了解网页美工设计基础知识以及相关案例的实施； 能力目标：使用网页美工设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 素质目标：熟悉网页美工设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 学习重难点 教学重点：了解网页美工设计基础知识以及相关案例的实施； 教学难点：熟悉网页美工设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 教学方法 讲授法、演示法 课前准备 教师准备：讨论主题、学生任务书 学生准备：在线讨论、完成任务书 教学媒体 多媒体教室 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1.操作引出主题 提前对本节课的主要教学任务进行提前告知学生。 提问：对本节课的网页美工设计知识基础的预习情况？ 2.分发学习任务书 引导学生分析任务书，明确本节课的学习内容。 3. 展示学习目标 1.提前对本节课要将的知识点传达给学生，提前传达学生本节课的学习目标，以此设置问题进行互动。 2.接收并查看本节课堂任务书 3.查看并记住本节任务的学习目标 1.提前将所学的知识传达给学生，对知识点进行深度掌握。 2.下发和展示任务，让学生明确课堂任务，学习课堂知识。 活动二： 调动思维 探究新知 网页美工设计 网页把各种信息以最快捷、方便的方式传达给人们。人们对一个网站有没有兴趣，网站的主题是否准确传递，主要体现在网站的首页设计上，网站首页设计对整个网站至关重要，因此从审美的方面人手，结合使用方便的要求，制作出清晰、整体性好、画面感强的页面，使人浏览起来心情愉悦，接收信息就会更加容易，从而提升网站的形象，如图6一1所示为某教育视频网页模板。 1.逐步对宣传单案例所涉及到的知识点进行学习和重点分析。 通过讲授和罗列框架等形式对知识进行学习，并完成课后练习。 1. 细化课程知识点设计，让每一位学生都能被关注到。 2. 知识点在学生心理更清晰明了。 本项目涉及两个行业的网站网页设计。 一个是护肤品网站的新品发布页面，设计上强调简洁、明快，色彩上采用清新明快的绿色系，配以山丘、树等大自然的图案，更能衬托出护肤品的纯天然品质，给人赏心悦目、跃跃欲购的感觉。 另一个是美食行业网站首页，采用丰富的暖色调，再配以自制的桌布图案，充分体现家的温馨，拉近了与消费者的距离，同时提供了多种快捷链接，可以直接进人想要了解的内容页面，浏览效率高。 2.案例解析 （1）讲解每个知识点，并结合实际操作形式和操作方法的形式进行讲授。 （2） 听课、理解；针对不明白知识点提问、讨论，询问学生是否对知识理解透彻。 （3） 对例题进行解答。 1.按学生的学习规律，循序渐进引入本课重点知识学习 2.通过课件、实操截图等多媒体方式讲解，易于学生理解和实战。 活动二： 调动思维 探究新知 护肤品网页设计 设计制作如 62所示的护肤品网页效果图。 案例解析 本案例中，需要完成以下操作： ．了解网页设计的方法 ．掌握使用图层组管理网页元素的方法 ．熟练运用“切片工具" ．优化输出切片图像 案例实施 （1）选择“文件乛新建"命令，新建一个文件：文件名为“护肤品网页"，宽度为67厘米，高度为180厘米，分辨率为72像素/英寸，颜色模式为RGB颜色，背景为白色，单击“创建"按钮。 （2）选择菜单“视图一标尺"命令，显示标尺，从垂直标尺中拖曳出6条垂直参考线，分别放置在水平标尺的12．86厘米、16．3厘米、32，65厘米、34．8厘米、5L38厘米和54．8厘米处；从水平标尺中拖曳出5条水平参考线，分别放置在垂直标尺的5，8厘米、35厘米、66厘米、117．4厘米、16L7厘米处，用于网页的布局，效果如图6一3所示。 （3）制作网页的导航栏。单击“图层"面板底部的“创建新组"按钮囗，新建图层组并命名为“导航栏"；选择工具箱中的“矩形工具"，工具选项栏设置如图6一4所示，颜色为 # 068f23，单击文档后将生成的矩形放置在如图6一5所示位置