信息技术教学案例

1、信息技术教学案例网页中的图像信息加工一、设计背景1.模块：高中信息技术必修模块信息技术基础2.年级：高中一年级3.所用教材章节：中国地图版教材第四单元第二节“创作电子作品”中的“图像信息加工”4.学时数：35.学校状况：我校信息技术课在多媒体网络教室实行。教室内有一台教师机，一台服务器和五十六台学生机，通过百兆交换机组建成星型局域网，教师机上安装多媒体电子教室软件。学生能够通过局域网访问教师自主开发的信息技术学习网站，了解学习内容、获取学习资源、记录学习感受、提交学习成果。教师能够通过大屏幕投影仪创设学习情境，也能够通过多媒体网络教学系统实行必要的集体讲解和演示操作。二、教材分析信息技术必修模

2、块是按照信息获取、信息加工、信息集成和交流的主线来安排的。在教学实践中，我们要求学生围绕研究性学习的课题，体验信息获取、加工、集成和交流的整个过程。在“信息获取”单元中，学生已经收集好与课题相关的所有信息（如文字、图片、音视频等）。而在下一个“信息集成和交流”单元，我们将要求学生完成课题汇报网站的制作。所以，在信息加工阶段的图像加工部分，教学目标就集中在网页图片的设计制作上，起到一个承前启后的作用。三、学生情况分析在信息获取单元，学生已经根据自选的主题收集好了网站素材。通过本单元第一节策划表达方式的学习后，学生完成了“个人网站规划表”，明确了第四单元的学习目标就是建设一个主题网站。学习第二节创

3、作电子作品时，教师就引导学生对收集的图片素材实行加工，打造有个性特色的网站图片，学生的学习积极性是相当高的。高一学生对画图软件很熟悉，对office中的剪贴画也是耳熟能详，对图片的分类和特点也有一定的知识基础。而acdsee作为一款常用的看图软件，也早已为学生所熟练掌握。通过入学时的学生调查，我们也发现学生对photoshop、flash等平面设计软件具有浓厚的兴趣。我校学生的学习通过学习网站实行。网站上有相关的软件使用教程、操作动画演示。除了学习网站，绝大部分同学还能够跟随老师的同步讲解和示范实行学习。学习进度较快或较慢的学生，能够借助网站实行自主学习。四、教学目标知识与技能1、了解图形图像

4、的两种基本类型，并能列举两类图片的特点、常见类型和常用编辑软件；2、初步了解网页图片的色彩、构图等基本原则；3、学会使用图片编辑软件对图片实行旋转、缩放、裁切、格式转换等简单加工。过程与方法1、能够结合自身的兴趣、爱好和特长，搜索、选择适合主题表达需求的图片素材；2、学会应用简单的网页图片设计原则，对图片素材实行加工处理；3、能够根据表达的主题，合理应用所学的技术，设计个性化的网页图片。情感态度与价值观1、学会欣赏和评价优秀的网页图片作品，由此激发创作欲望和学习兴趣；2、通过自行设计网页图片，体验创造的乐趣和成功的喜悦。五、教学重点、难点重点：1掌握常用的图片加工方法；2体验图片设计的基本过程

5、。难点：1根据主题需要，合理选择图片及加工方式；2在图片设计中体现一定的创新性、观赏性和艺术性。六、教学策略网页中的图片主要有logo、banner、欢迎页图片等。每个课时分别完成一张图片的设计制作。第一课时，从简单模仿开始。以百度网站的logo图片为例，主要讲解图形、文字工具的简单使用。学生只要选择不同的图形和文字，就能初步设计出自己的网站logo。第二课时，巩固已有技能，尝试独立操作。学生自行选择图片素材，实行裁切、缩放，添加文字和特效。教师提供了其他加工技巧供学生选用。第三课时，感受设计的乐趣。简单介绍构图原则和图像合成技巧，给学生留有更多的创作空间和时间，亲历平面设计的过程，品尝创造的

6、喜悦。七、教学过程第二课时“网站横幅（banner）设计”一、引入教师：上节课，我们学习了图形图像的基本知识，初步学会了使用photoshop设计网站logo图片的方法。我们先来欣赏一下同学们的作品，大家能够发表一些评论和建议。（教师展示一些优秀作品）。学生交流评价，教师参与。教师：那么logo图片在网页中一般放在哪些位置呢？下面，我们来看几个网站实例，请同学们仔细观察logo图片的大小和位置。网站1：http：//网站2：http：//（首页及无锡频道）学生：logo图片一般放在网页左上角或网页顶部中央，经常跟导航栏放在一起。图片大小

7、与导航栏的高度或横幅的高度相关。教师：网页上除了logo图片外，比较醒目还有横幅，一般称为banner。今天，我们就要着手来设计自己的网站横幅了。二、欣赏与构思教师：仔细观察以上两个网站的横幅，大家认为横幅的作用有哪些呢？学生：我认为横幅图片和logo图片一样，能够代表网站的形象。学生：很多横幅上都是些广告。教师：你们说得很对，横幅能够代表网站的形象，而且经常有广告，由于要吸引浏览者的眼球，它就必须设计得色彩和谐、文字醒目。下面，请大家欣赏两个优秀作品，我们讨论一下它们的特色。学生：第一幅图片以绿色为主，感觉色彩和谐统一，意境深远。文字配以白色背景，大小错落有致。学生：第二幅图片以蓝色为主，两

8、幅倾斜的风景图片特别醒目，给画面带来了灵动的感觉。文字的字体优美，色彩过渡和谐清新。右边的小图案更使图片富于变化。教师：大家还能在本地机上“图片收藏”中找到很多banner的例子，从中或许可以得到些启发，设计出各自的网站横幅。（请注意查看这些横幅的宽度和高度，大致确定自己的横幅宽度和高度。）三、横幅的设计原则教师：看了这么多例子，我们可以总结出一些横幅设计的原则。例如，如果横幅的底色较深，那么文字的颜色就要浅些；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容。请大家打开本地计算机上的“我的文档-my ebooks”文件夹，运行名为banner的电子书，学习其中的设计技巧。学生浏

9、览教学资源。教师：大家从这本电子书中学到了哪些技巧呢？师生共同归纳：原则有三条：1、选择合适的字体，文字旁边要保留足够的空间，使它们更醒目。2、如有特别需要引起注意的内容，一定要放在画面的突出位置（如左边）。3、文字内容最好简洁而富有乐趣，引起浏览者的兴趣。教师：横幅中的文字是体现网站形象的重要元素。这就是网站的宣传标语，也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：雀巢的“味道好极了”； intel的“给你一个奔腾的心”。大家有没有想好你们的网站宣传语呢？学生：环保标语：“保护环境，从身边做起”学生：2008奥运会：“同一个世界，同一个梦想”

10、学生：四、制作与交流教师：下面，老师将使用photoshop和大家一起设计网站的横幅banner图片。在我开始操作前，我先等两分钟。请大家从自己搜集的素材图片中挑选一张，作为横幅图片的原始素材，再用photoshop打开。学生挑选图片并打开教师：我以下面的banner为例，讲解制作过程。教师演示操作过程，学生边观察边设计自己的图片：1、裁切图片：打开原始图片，使用矩形选择工具选取相应部分，注意纵横比例，执行【图像-裁切】。2、改变图像大小：如有需要可以执行【图像-图像大小】，改变图像的宽度和高度。（启发学生：横幅的宽度应该等于网页的宽度，在760-950像素左右，如果要和logo并排放，则应减

11、去logo的宽度）3、文字工具：添加绿色文字，右击该文字图层，设置“混合选项”，效果“描边”；在远离绿色文字的地方添加突出文字，设置“混合选项”，效果“投影、内阴影、外发光”，再移动到合适的位置（启发学生：在“混合选项”中有许多效果，可以多试几次，选择满意的效果。另外，要注意选择相应的文字图层调整文字的位置）。4、保存文件：执行【文件-存储为web所用格式】命令，将图片存储成gif或jpeg等文件格式。教师：如果有同学对横幅二和教材范例中的技术感兴趣，可以参考学习网页上“拓展资源”，完成相应操作：1、画笔工具（星星的画法）：可以使用画笔工具，选择相应的画笔形状，在背景图层上绘制（提醒学生注意切

12、换到背景图层）。2、图片叠加：使用photoshop打开需叠加的图片文件，先改变图像大小，再【全选】、【拷贝】、【粘贴】到当前文件中，执行【编辑-变换-旋转】。3、绘制直线：使用“单行（列）选框”工具绘制线条，执行【编辑-填充】，改变线条颜色。4、绘制椭圆：使用“椭圆选框工具”，制作选区，执行“编辑/描边”，宽度1像素，选择颜色填充。5、使用滤镜：执行【滤镜】中的相应效果，修改其中的选项，达到自己想要的画面效果。学生自行设计网站横幅图片，上传到服务器上互相交流。教学反思成功之处：1、先从网页中观察logo和banner，让学生了解两种图片在网页中的作用，从而引入主题。学生观察图片的大小也在为后续的设计做准备。2、通过作品欣赏激发学生灵感，同时总结设计原则，再通过学习电子书加深印象。3、教师制作的banner比