小学五年级信息技术《网页动态效果》学历案教学设计_第1页
小学五年级信息技术《网页动态效果》学历案教学设计_第2页
小学五年级信息技术《网页动态效果》学历案教学设计_第3页
小学五年级信息技术《网页动态效果》学历案教学设计_第4页
小学五年级信息技术《网页动态效果》学历案教学设计_第5页
已阅读5页，还剩6页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

小学五年级信息技术《网页动态效果》学历案教学设计一、学历案基本信息课题：第14课网页动态效果学科：信息技术学段：小学五年级所用教材：人民教育出版社（2001版）三起五年级下册课型：新授课课时安排：2课时（第一课时80分钟，第二课时80分钟）授课对象：小学五年级学生，已具备Windows操作系统基本操作能力、网页浏览经验，能够使用FrontPage或记事本创建简单静态网页，理解“网页即文件”概念，掌握插入图片、设置超链接等基本操作，但对JavaScript脚本语言、动态HTML技术缺乏认知。二、学历案设计理念本学历案以学生学历提升为逻辑主线，围绕“为何学、学什么、怎么学、学到什么程度”四个核心问题展开设计。五年级学生处于具体运算阶段向形式运算阶段过渡期，对动态视觉效果的感知敏锐，但抽象逻辑思维尚需依托具体情境。设计遵循“做中学、学中做”的建构主义理念，将网页动态效果这一抽象技术概念，转化为可观察、可模仿、可创造的实践任务。落实《义务教育信息科技课程标准（2022年版）》中“通过初中阶段信息技术学习，学生能理解信息系统的组成、工作原理及对人类社会的影响，形成信息系统安全可控的意识”的要求，小学阶段需为后续学习奠定基础，让学生初步感受脚本语言对网页元素的控制能力，理解“动态效果”背后的程序逻辑。三、学习目标与重难点（一）学习目标1.知识与技能：理解“网页动态效果”的含义，能说出滚动文字、状态栏文字变换、鼠标指针变换等常见动态效果的类型；掌握在FrontPage2003中插入滚动字幕的方法，掌握通过修改HTML代码实现状态栏动态文字的基本操作；了解JavaScript脚本语言在网页动态效果中的作用。2.过程与方法：通过观察范例网页动态效果，经历“分析效果—拆解代码—模仿制作—自主创作”的完整学习路径，提升信息处理与逻辑推理能力；通过小组协作完成网页优化任务，培养合作学习习惯。3.情感态度与价值观：感受网页动态效果对信息呈现的优化作用，形成“技术为内容服务”的设计意识；体验代码编写对网页行为的控制魅力，激发深入学习信息技术的兴趣。（二）学习重点4.滚动字幕效果的实现方法与参数设置。5.状态栏动态文字效果的代码编辑。6.鼠标指针变换效果的属性设置。（三）学习难点7.理解JavaScript脚本代码与网页元素之间的控制关系。8.根据内容表达需要选择合适的动态效果类型。9.动态效果参数调整与视觉效果优化。四、课前预学设计（一）预学任务单任务一：观察生活。请同学们打开浏览器，访问任意3个不同类型的网站（如学校官网、新闻网站、游戏官网），用截图工具或文字记录下你看到的网页动态效果（包括效果名称、出现位置、视觉感受），填入下表。表1网页动态效果观察记录表网站名称动态效果名称出现位置视觉感受示例：学校官网通知公告滚动首页中部信息集中，便于浏览（二）预学资源1.教材配套光盘中的“网页动态效果”范例文件（4个HTML网页）。2.学校教学资源库中的微课视频《滚动字幕是如何实现的》（时长3分钟）。3.教师预学指导博客（含常见问题解答）。（三）预学诊断教师通过批改预学单，统计学生对动态效果的认知基础。预设结果：大部分学生能观察并记录滚动文字、图片变换等效果，但对“为什么能实现”认知模糊，少数学生接触过代码但无法解释逻辑。五、学习过程设计第一课时走进网页动态世界（一）情境导入（10分钟）教师现场展示两个版本的学生作品网页：A版本为纯静态网页，包含学生自我介绍、班级合照、活动图片；B版本在A版本基础上添加了欢迎字幕、滚动通知、鼠标指针变换等动态效果。组织学生对比观察：你更喜欢哪个网页？为什么？学生自由发言后，教师引出课题：今天我们就来学习如何让网页“动”起来，让信息呈现更生动。（二）目标明示（3分钟）教师出示本课时学习目标：1.能说出至少3种常见网页动态效果；2.掌握滚动字幕的制作方法；3.能为自己网页添加合适的动态效果。（三）任务驱动一：制作滚动字幕（30分钟）教师先演示操作：在FrontPage2003中打开“我的网页.htm”，将光标定位到需要插入滚动字幕的位置，点击“插入”菜单，选择“Web组件”命令，在弹出的对话框中选择“动态效果”类别下的“字幕”选项，设置字幕文字为“欢迎来到我们的班级网页！”，宽度300像素，高度20像素，方向“向左”，速度“正常”，表现方式“滚动条”，数量“不限”。点击“确定”后预览效果。学生模仿操作，完成基础滚动字幕插入。教师巡视指导，重点关注操作不熟练的学生。完成后请学生尝试修改参数（如方向改为“向上”、速度改为“慢速”、表现方式改为“幻灯片”），观察效果变化并记录。小组讨论：滚动字幕适合呈现什么类型的信息？全班交流后明确：滚动字幕适合呈现通知、欢迎词、重要提示等简短且需要引起注意的信息，不宜用于长篇正文。（四）任务驱动二：分析动态效果原理（20分钟）教师切换到“代码视图”，展示刚才插入的滚动字幕对应的HTML代码：`<marqueewidth="300"height="20"direction="left"scrollamount="3"behavior="scroll">欢迎来到我们的班级网页！</marquee>`教师讲解：这是HTML中的`<marquee>`标签，专门用于创建滚动文字效果。标签中的属性控制了文字的方向、速度、宽度和高度。虽然现代网页开发已较少使用该标签，但在FrontPage这类所见即所得编辑器中，它仍是实现文字滚动的便捷方式。学生分组观察其他动态效果（如鼠标悬停图片变色）的代码片段，尝试找出控制动态行为的代码部分。教师巡视，参与小组讨论，解答学生疑问。（五）课堂练习（12分钟）请学生在“我的网页.htm”中添加两个不同参数的滚动字幕：一个用于呈现班级通知（方向向左，速度较慢），一个用于呈现欢迎词（方向向上，表现方式为幻灯片）。完成后相互查看作品，评价效果。（六）小结与预学布置（5分钟）教师引导学生回顾本课时所学：今天我们认识了滚动字幕效果，掌握了在FrontPage中插入滚动字幕的方法，还初步了解了控制动态效果的HTML标签。请同学们课后思考：除了滚动字幕，你还见过哪些网页动态效果？它们是如何实现的？第二课时丰富网页动态效果（一）复习导入（5分钟）教师提问：上节课我们学习了哪种网页动态效果？它是通过什么代码实现的？学生回答后，教师出示本课时学习目标：1.掌握状态栏动态文字效果的制作；2.掌握鼠标指针变换效果的设置；3.能根据网页内容合理选用动态效果。（二）任务驱动一：制作状态栏动态文字（30分钟）教师演示操作：在FrontPage中打开网页，切换到“代码视图”，在`<head>`标签内添加以下代码：`<scriptlanguage="JavaScript">``varmsg="欢迎访问我们的班级网页，让我们一起成长！";``varspeed=200;``vari=0;``functionscrollMsg(){``window.status=msg.substring(i,msg.length)+msg.substring(0,i);``i++;``if(i>msg.length)i=0;``setTimeout("scrollMsg()",speed);``}``scrollMsg();``</script>`保存后预览，观察浏览器底部状态栏的文字滚动效果。教师讲解：这是一段JavaScript脚本代码，通过`window.status`属性修改状态栏显示的文字，`setTimeout`函数实现定时刷新，从而产生滚动效果。学生模仿添加代码，注意不要遗漏标点符号。教师巡视，重点帮助代码输入有困难的学生。学生完成后，尝试修改文字内容和滚动速度，观察效果变化。（三）任务驱动二：设置鼠标指针变换效果（20分钟）教师演示：选中网页中的某个超链接，右键单击选择“超链接属性”，在弹出的对话框中切换到“字体”选项卡，点击“鼠标悬停时”字体颜色按钮，设置为红色。再切换到“代码视图”，在`<a>`标签中添加`style="cursor:crosshair"`属性，保存预览。当鼠标移动到该超链接上时，指针会变为十字形状。教师介绍常见鼠标指针类型：`pointer`（小手）、`crosshair`（十字）、`help`（问号）、`wait`（沙漏）、`text`（I形）。学生分组尝试为网页中不同的超链接设置不同的鼠标指针样式，并设置鼠标悬停时的字体颜色变化。完成后小组内展示交流。（四）综合实践：完善班级网页（20分钟）教师出示任务：请你为“我的网页.htm”选择至少三种动态效果进行添加，要求：1.动态效果必须与网页内容相关；2.效果不能过多，避免干扰信息阅读；3.操作完成后，在网页底部用注释标签`<!>`注明自己添加了哪些动态效果。学生独立完成，教师巡视指导，针对不同层次学生提供差异化帮助：对操作熟练的学生，鼓励尝试组合多种效果；对操作困难的学生，提供操作步骤提示卡。（五）作品展示与评价（5分钟）请23名学生展示自己的网页作品，介绍所添加的动态效果及设计意图。师生共同评价，重点关注：动态效果是否服务于内容、视觉效果是否协调、代码编写是否规范。六、学习评价设计（一）评价方式1.过程性评价：通过课堂观察、预学单完成情况、小组协作表现进行评价。2.结果性评价：通过网页作品完成质量进行评价。3.自我评价：学生填写“学习反思单”，包括“我学到了什么”“我还有哪些疑问”“我对自己的表现评价”。（二）评价标准表2网页动态效果作品评价表七、课后作业设计（一）必做题请访问你最喜欢的3个网站，查看它们的源代码，记录下使用的动态效果标签（如`<marquee>`、`<script>`等），尝试理解其作用，写成观察报告。（二）选做题尝试用记事本编写一个简单的HTML文件，包含滚动字幕和状态栏动态文字效果，对比使用记事本与FrontPage制作网页的异同。八、教学反思要点1.关注学生代码编写能力的差异。本课涉及JavaScript脚本代码，对五年级学生而言难度较大，教学中需充分预设困难，提供分层指导。2.平衡动态效果与内容表达。避免学生过度追求技术炫酷而忽视信息传递的本质，技术始终应为内

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论