《网页中图像信息的加工》教学设计.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