《网页中图像信息的加工》教学设计.docx

《网页中图像信息的加工》教学设计 
一、设计背景
1.模块:高中信息技术下册第4单元
2.年级：高一年级
3.课时数：3
二、教材分析
高一信息技术必修模块是按照信息获取、信息加工、信息集成和交流的主线来安排的。在教学实践中，我们要求学生围绕研究性学习的课题，体验信息获取、加工、集成和交流的整个过程。在“信息获取”单元中，学生已经收集好与课题相关的所有信息（如文字、图片、音视频等）。而在下一个“信息集成和交流”单元，我们将要求学生完成课题汇报网站的制作。因此，在信息加工阶段的图像加工部分，教学目标就集中在网页图片的设计制作上，起到一个承前启后的作用。
三、学生情况分析
在信息获取单元，学生已经根据自选的主题收集好了网站素材。通过本单元第一节《网站规划》的学习后，学生完成了“个人网站规划表”，明确了本单元的学习目标就是建设一个主题网站。学习第二节《制作网站》时，教师就引导学生对收集的图片素材进行加工，打造有个性特色的网站图片，学生的学习积极性是相当高的。
高一年级学生对画图软件很熟悉，对office中的剪贴画也是耳熟能详，对图片的分类和特点也有一定的知识基础。而ACDSee作为一款常用的看图软件，也早已为学生所熟练掌握。通过入学时的学生调查，我们也发现学生对PhotoShop、Flash等平面设计软件具有浓厚的兴趣。
四、教学目标
知识与技能：
1.了解图形图像的两种基本类型，并能列举两类图片的特点、常见类型和常用编辑软件；
2.初步了解网页图片的色彩、构图等基本原则；
3.学会使用图片编辑软件对图片进行旋转、缩放、裁切、格式转换等简单加工。
过程与方法：
1.能够结合自身的兴趣、爱好和特长，搜索、选择适应主题表达需求的图片素材；
2.学会应用简单的网页图片设计原则，对图片素材进行加工处理；
3.能够根据表达的主题，合理应用所学的技术，设计个性化的网页图片。
情感态度与价值观：
1.学会欣赏和评价优秀的网页图片作品，由此激发创作欲望和学习兴趣；
2.通过自行设计网页图片，体验创造的乐趣和成功的喜悦。
五、教学重点、难点
重点：1．掌握常用的图片加工方法；2．体验图片设计的基本过程。
难点：1.根据主题需要，合理选择图片及加工方式；2．在图片设计中体现一定的创新性、观赏性和艺术性。
六、教学过程
第二课时 “网站横幅（Banner）设计”
（一）、引入
教师：上节课，我们学习了图形图像的基本知识，初步学会了使用PhotoShop设计网站Logo图片的方法。我们先来欣赏一下同学们的作品，大家可以发表一些评论和建议。（教师展示一些优秀作品）。
学生交流评价，教师参与。
教师：那么Logo图片在网页中一般放在哪些位置呢？下面，我们来看几个网站实例，请同学们仔细观察Logo图片的大小和位置。
学生：Logo图片一般放在网页左上角或网页顶部中央，经常跟导航栏放在一起。图片大小与导航栏的高度或横幅的高度有关。
教师：网页上除了Logo图片外，比较醒目还有横幅，一般称为Banner。今天，我们就要着手来设计自己的网站横幅了。
（二）、欣赏与构思
教师：仔细观察以上两个网站的横幅，大家认为横幅的作用有哪些呢？
学生：我认为横幅图片和Logo图片一样，能够代表网站的形象。
学生：很多横幅上都是些广告。
教师：你们说得很对，横幅能够代表网站的形象，而且经常有广告，由于要吸引浏览者的眼球，它就必须设计得色彩和谐、文字醒目。下面，请大家欣赏两个优秀作品，我们讨论一下它们的特色。
学生：第一幅图片以绿色为主，感觉色彩和谐统一，意境深远。文字配以白色背景，大小错落有致。
学生：第二幅图片以蓝色为主，两幅倾斜的风景图片特别醒目，给画面带来了灵动的感觉。文字的字体优美，色彩过渡和谐清新。右边的小图案更使图片富于变化。
教师：大家还能在本地机上“图片收藏”中找到很多Banner的例子，从中或许可以得到些启发，设计出各自的网站横幅。（请注意查看这些横幅的宽度和高度，大致确定自己的横幅宽度和高度。）
（三）、横幅的设计原则
教师：看了这么多例子，我们可以总结出一些横幅设计的原则。
例如，如果横幅的底色较深，那么文字的颜色就要浅些；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容。
请大家打开本地计算机上的“我的文档-My ebooks”文件夹，运行名为Banner的电子书，学习其中的设计技巧。
学生浏览教学资源。
教师：大家从这本电子书中学到了哪些技巧呢？
师生共同归纳：原则有三条：
1.选择合适的字体，文字旁边要保留足够的空间，使它们更醒目。
2.如有特别需要引起注意的内容，一定要放在画面的突出位置（如左边）。
3.文字内容最好简洁而富有乐趣，引起浏览者的兴趣。
教师：横幅中的文字是体现网站形象的重要元素。这就是网站的宣传标语，也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：雀巢的“味道好极了”；
Intel的“给你一个奔腾的心”。大家有没有想好你们的网站宣传语呢？
学生：环保标语：“保护环境，从身边做起”
学生：奥运会标语：“同一个世界，同一个梦想”
学生：……
（四）、制作与交流
教师：下面，老师将使用PHOTOSHOP和大家一起设计网站的横幅Banner图片。在我开始操作前，我先等两分钟。请大家从自己搜集的素材图片中挑选一张，作为横幅图片的原始素材，再用PhotoShop打开。
学生挑选图片并打开
教师：我以下面的Banner为例，讲解制作过程。
教师演示操作过程，学生边观察边设计自己的图片：
1.裁切图片：打开原始图片，使用矩形选择工具选取相应部分，注意纵横比例，执行【图像-裁切】。
2.改变图像大小：如有需要可以执行【图像-图像大小】，改变图像的宽度和高度。（启发学生：横幅的宽度应该等于网页的宽度，在760-950像素左右，如果要和Logo并排放，则应减去Logo的宽度）
3.文字工具：添加绿色文字，右击该文字图层，设置“混合选项”，效果“描边”；在远离绿色文字的地方添加突出文字，设置“混合选项”，效果“投影、内阴影、外发光”，再移动到合适的位置（启发学生：在“混合选项”中有许多效果，可以多试几次，选择满意的效果。另外，要注意选择相应的文字图层调整文字的位置）。
4.保存文件：执行【文件-存储为web所用格式】命令，将图片存储成gif或jpeg等文件格式。
教师：如果有同学对横幅二和教材范例中的技术感兴趣，可以参考学习网页上“拓展资源”，完成相应操作：
1.画笔工具（星星的画法）：可以使用画笔工具，选择相应的画笔形状，在背景图层上绘制（提醒学生注意切换到背景图层）。
2.图片叠加：使用PhotoShop打开需叠加的图片文件，先改变图像大小，再【全选】、【拷贝】、【粘贴】到当前文件中，执行【编辑-变换-旋转】。
3.绘制直线：使用“单行（列）选框”工具绘制线条，执行【编辑-填充】，改变线条颜色。
4.绘制椭圆：使用“椭圆选框工具”，制作选区，执行“编辑/描边”，宽度1像素，选择颜色填充。
5.使用滤镜：执行【滤镜】中的相应效果，修改其中的选项，达到自己想要的画面效果。
学生自行设计网站横幅图片，上传到服务器上互相交流。
（五）、教学反思
成功之处：
1.先从网页中观察Logo和Banner，让学生了解两种图片在网页中的作用，从而引入主题。学生观察图片的大小也在为后续的设计做准备。
2.通过作品欣赏激发学生灵感，同时总结设计原则，再通过学习电子书加深印象。
3.教师制作的Banner比较简单，目的使初尝设计的学生能够基本完成作品。对于学有余力的学生，则准备了“拓展学习资源”，介绍画笔、图片叠加、绘制直线和椭圆、使用滤镜等各种技术，供学生选用。
不足之处：
1.设计时未考虑到学生选择的图片可能是Gif图片，不能使用滤镜和文字工具，发现问题时，才讲解改变图片模式的方法。
2.学生需要撤销多步操作时，不能使用【编辑-还原】，教师又补充了使用“历史记录”面板的方法。

李红霞
2014.5.23