《《让网页动起来----动态HTML》教学案例.doc》由会员分享,可免费在线阅读全文,更多与《《让网页动起来----动态HTML》教学案例》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。

1、vaScrit代码。因为可以选择而且不同难度的练习,也使各个能力层次的学生都能有所提高。三、教学过程描述(一)教与学的过程描述教学环节教师活动学生活动对学生学习过程的观察与考查信息技术的应用创设情景、引入课题(分钟)展示两张网页,要求学生观察对比,找出不同。分析第二张网页,因为其页面有网页特效因此令页面生色不少。引出学习内容:动态HTML。观察两张页面,找出第二张页面究竟有什么特效,明确本课学习目标。学生普遍能发现第二张页面的不同,但未能完全找出所有的特效,因此我需要点出三种特效,为下面的知识讲解做铺垫。展示两种网页;用幻灯片展示本课课题知识铺垫、范例演示(分钟)指出实现动态HTML的方法之一:加入JavaScrit代码解释什么是JavaScritHTML的基本结构:展示教学范例网页的源文件,分析其HTML标记语言的组成。演示在网页中加入鼠标跟随文字特效的操作过程,并板书总结操作步骤。结合教学范例,观察HTML的基本结构。观看教师的操作演示,了解其具体操作步。

2、调查及学习反思的帖子,学生可以通过投票的方式选出自己还未掌握的知识点。通过教学调查,可以让学生对本课的学习效果进行一次评价。学习反思的实现:有效的学习反思有助于学生梳理知识体系,为此我在下课前预留分钟让学生通过回复帖子进行学习反思,主要做三项内容:、教学调查;、写出本课的学习感受;、粘贴出精彩的JavaScrit代码。在帖子中,我明确告诉学生可以从哪些方面思考本课的学习感受,这样能够科学地引导学生回顾本课的学习过程、评价自己的学习行为。%的学生反映对“找到指定位置粘贴代码”感到困难;大部分学生回复表示对本课很感兴趣,希望深入学习。约有位学生粘贴了其他精彩的JavaScrit代码。四、教学反思从整体来说,本课的教学目标均能按预期效果实现。我认为本课最大的两个两点在于任务的设置以及学习反思的实现。回顾整个教学过程以及分析教学调查情况,我感觉在练习点评以及个别知识点的讲授方面仍需改进。任务细化、难度逐层深入、由“点”到“面”。让学生从简单任务入手,使学生感受成功,。

3、、掌握知识。从完成指定代码到自行选择代码,由“点”到“面”引导学生完成知识迁移。范例教学:为了让学生尽快掌握在HTML中加入JavaScrit代码的方法,我首先采用范例教学的策略。本课以一个简单的鼠标跟随文字特效制作为引入例子,让学生了解制作JavaScrit特效的基本方法,并要求学生完成同样的特效制作。务求从简单任务入手,让学生从成功的体验中感受到JavaScrit特效的有趣之处,激发学生继续深入学习的欲望。任务驱动、探究合作:为了解决本课的教学重、难点,同时培养学生的探究学习、合作学习的能力,本课安排了两个探究任务。任务一的探究任务要求学生以小组为单位共同探究修改JavaScrit代码中文字属性的方法。这是本课的重、难点,我有针对性地指引学生展开合作探究,学生通过对比、讨论很快能找出方法。任务二要求学生自行选择适合难度的代码进行练习。通过明确的任务要求以及不同难度的练习资源,让学生能够进一步巩固本课新学的操作、完成知识迁移,能够根据灵活运用不同效果的Ja。

4、码学生普遍反感对加恶意代码的行为,但没有明确肯定应该根据网站性质选择适当代码。学习反思、成果共享(分钟)提出学习反思的要求,指导学生完成学习反思及教学调查学生完成教学调查,并回复该贴简单回顾本课学习感受,及粘贴其他精彩的JavaScrit代码%的学生反映对“找到指定位置粘贴代码”感到困难;大部分学生回复表示对本课很感兴趣,希望深入学习。约有位学生粘贴了其他精彩的JavaScri于第二张网页加了三处网页特效。我首先要求学生观察这两张页面找出不同,这样很快就能让学生感受到动态HTML的精彩之处,同时也让学生对如何实现动态HTML感到好奇。学习评价的实现:本课的学习评价主要通过两种方式实现:、学生练习成果展示。每次任务后,我均安排完成得比较好的学生展示他的练习成果,同时介绍操作经验。这样,不仅能让该学生完成自我学习的小结及评价,同时也能让其余学生通过比较找出差距,对自己的练习过程、练习成果做一次自我评价。、通过教学论坛进行教学调查。课前我在教学论坛中发表用于进行教。

5、:()在HTML中加入JavaScrit代码的方法;()能够在指定位置加入JavaScrit代码;()修改JavaScrit代码中文字属性的方法。综合应用:能够根据网页的内容、风格选择适当的网页特效。能力目标()培养学生的自主学习、探究学习以及协作学习的能力;()培养学生的创新能力,表达能力;()培养进行学习反思的学习习惯。情感目标()培养学生与他人合作与交流的人际关系;()培养学生的信息道德素养。(四)教学重点:、掌握加入JavaScrit代码的方法;能够在指定位置加入JavaScrit代码。(五)教学难点:、修改JavaScrit代码中文字属性的方法;能够在指定位置加入JavaScrit代码。(六)教学策略设计本课是一节典型的技术操作教学课,因此充足的操作练习是必不可少的。如何让学生能够迅速掌握技巧,又不至于因练习难度太大而产生畏难情绪呢?我选择将练习任务细化,安排两个大的任务,大任务中又包含分层任务。通过难度逐层深入的练习任务,引导学生在“做”中发现知。

6、让成功感促使学生继续学习。用任务驱动学生进行探究,将问题留给学习小组,让学生在“做”中发现方法,用实践经验帮助学生理解知识、消化知识。将练习资源划分难度,并安排不同层次的任务,让不同层次的学生均能得到提高。加入学习反思环节。下课前预留分钟,让学生完成教学调查,方便教师及时收集学生的学习情况。同时指导学生进行学习反思,帮助学生梳理本课知识体系,同时方便学生之间共享学习成果。练习点评应加入错误操作分析。在教学过程中我发现有不少学生在粘贴代码时出现重复粘贴或者粘贴到错误位置等等的错误操作,这些都是我在课前预计到。练习点评的时候我也有重点提及这方面的问题,但我仅仅是罗列事实、分析原因,结果部分学生无法理解。如果在分析原因前,能够先展示某种错误操作后的具体表现,再来分析原因找出解决办法,这样学生更容易接受和理解。由此我认为在类似技术操作教学课中,错误操作的点评绝不能蜻蜓点水似地带过,帮助学生分析错误找出解决方法与传授正确的操作同样重要。这能够一定程度上让学生少走弯路,。

7、教学模式的成功探索。《让网页动起来动态HTML》教学案例一、案例背景信息模块、章节:《网络技术应用》(选修)第五章第一节教材版本:广东教育出版社年级:高二二、教学设计(一)教学内容分析本课内容主要是动态HTML中的JavaScrit脚本语言的应用。JavaScrit代码能够令网页中出现动态的效果,这是比较受学生欢迎的学习内容。对于普通高中学生,仅需要了解如何在网页中适当位置加入JavaScrit代码即可,无需深入了解JavaScrit代码的组成以及原理。因此我将本课的重点定为:、掌握加入JavaScrit代码的方法、能够在指定位置加入JavaScrit代码。(二)教学对象分析本课的教学对象是桂城中学的高二学生。在学习本课之前,他们已经学习了用Dreamweaver制作网页的基本方法,能够制作简单的网页,但不熟悉HTML标记语言。因此在学习粘贴JavaScrit代码前,应先讲解HTML的基本结构,让学生对HTML有一个基本的认识。(三)教学目标分析知识目标掌握。

8、调查及学习反思的帖子,学生可以通过投票的方式选出自己还未掌握的知识点。通过教学调查,可以让学生对本课的学习效果进行一次评价。学习反思的实现:有效的学习反思有助于学生梳理知识体系,为此我在下课前预留分钟让学生通过回复帖子进行学习反思,主要做三项内容:、教学调查;、写出本课的学习感受;、粘贴出精彩的JavaScrit代码。在帖子中,我明确告诉学生可以从哪些方面思考本课的学习感受,这样能够科学地引导学生回顾本课的学习过程、评价自己的学习行为。%的学生反映对“找到指定位置粘贴代码”感到困难;大部分学生回复表示对本课很感兴趣,希望深入学习。约有位学生粘贴了其他精彩的JavaScrit代码。四、教学反思从整体来说,本课的教学目标均能按预期效果实现。我认为本课最大的两个两点在于任务的设置以及学习反思的实现。回顾整个教学过程以及分析教学调查情况,我感觉在练习点评以及个别知识点的讲授方面仍需改进。任务细化、难度逐层深入、由“点”到“面”。让学生从简单任务入手,使学生感受成功,。

9、高学习效率。通过分析教学调查结果,我发现有%的学生未能掌握“找到指定位置粘贴代码”这个知识点。这并不是本课的重点,因为要解释清楚为什么要在某些指定的位置粘贴JavaScrit代码,需要涉及很多JavaScrit脚本语言的知识。因此我认为下一节课可以从“在哪里粘贴JavaScrit代码”出发,适当讲解JavaScrit脚本语言的基础知识,这样既能解决本课的教学遗留问题,又能让学生了解更多的网页编程内容,激发学生的学习欲望,有助于学生利用课余时间主动学习。五、点评:南海桂城中学林启明这是一个成功的信息技术教学案例,成功之处在于教学目标定位准确、分层探究策略高效、学生主体地位突出、总结反思到位。本章节教材内容对于普通高中学生来说,概念抽象、技术难度较高,讲授者选择“JavaScrit特效”作为“动态HTML”的讲授内容,是出于对教学条件深思熟虑的决定,比较符合高中信息技术教学的实际。同时讲授者也清楚明白,编写JavaScrit代码也是超出普通高中学生认知水平的要求。

10、,因此把“JavaScrit的应用迁移”作为本案例的知识技能目标,本人认为是比较准确的定位。在教学策略上,讲授者采取了分层探究、任务驱动的教学策略,让学生“自主发现”学习问题并通过“协作讨论”寻求解决方法。在本案例中,讲授者有选择地给出难度系数不同的“JavaScrit特效”,学生通过层层深入,一步步掌握“JavaScrit应用迁移”的基本技术,可以说是符合学生认知规律的设计安排。本案例中,学生之间协作讨论、学生演练解题方法,都是学生主体性的突出表现,讲授者摒弃“传统模式”,把课堂归还给学生,抓住了学生面对新知识的学习心理,充分利用学生的主体作用,一方面让“做得快”的学生起到引领作用,另一方面又以此刺激“做得慢”的学生。学生主动的求知,比起被动地“手把手”学习,效果明显提高。“调查反馈”的设计目的性很强,效果立竿见影,和学生的总结反思一样,能让教师及时了解课堂教学效果,有助于后面教学的调整。纵观整个案例,课堂结构合理、节奏紧凑、教学效果明显,是新课标理念下有。

11、特效,明确本课学习目标。学生普遍能发现第二张页面的不同,但未能完全找出所有的特效,因此我需要点出三种特效,为下面的知识讲解做铺垫。展示两种网页;用幻灯片展示本课课题知识铺垫、范例演示(分钟)指出实现动态HTML的方法之一:加入JavaScrit代码解释什么是JavaScritHTML的基本结构:展示教学范例网页的源文件,分析其HTML标记语言的组成。演示在网页中加入鼠标跟随文字特效的操作过程,并板书总结操作步骤。结合教学范例,观察HTML的基本结构。观看教师的操作演示,了解其具体操作步骤。用幻灯片展示知识点;在教学论坛提供幻灯片的内容供学生参考;任务探究任务探究、合作学习(分钟)提出问题:如何修改鼠标跟随文字的大小、颜色等等相关属性?布置任务一:制作一段鼠标跟随文字效果。(见附件)指导学生完成练习、开展小组学习,引导学生间进行讨论,发现问题、总结方法。完成任务一,相邻的两位学生为一个学习小组,共同探究在JavaScrit代码修改文字属性的方法。各自完成不同的 。

12、修改操作,讨论找出异同,总结方法。学生基本上能够找到修改跟随文字的方法,但对如何修改文字颜色感到困惑,主要是不知道具体某种颜色应该用哪个数字表示。部分学生能够联系之前所学,找到颜色代码。学生之间有讨论,但不善于总结方法。在教学论坛中提供练习资源下载;用幻灯片展示任务一的具体要求学习反馈、练习点评(分钟)邀请其中一个学习小组演示修改文字相关属性的操作,引导两位成员总结出修改JavaScrit代码的方法。总结在JavaScrit代码修改文字属性的方法。同组的两位同学合作回答教师的问题。观察同学的操作演示,听取同学的学习小结。负责回答问题的两位学生是做得比较快的两位,能够明确的告诉其他同学如何找到颜色代码,学生们对修改颜色及字体大小这部分比较留意。这是他们普遍感到困惑之处知识延伸、分层练习(分钟)布置任务二:学习在网页中加入其他网页特效的方法(见附件)。指导学生完成练习。根据自己的水平选择适当难度的代码进行练习。再次修改JavaScrit代码,找出修改JavaSc

如何在html网页添加动态特效,《让网页动起来----动态HTML》教学案例相关推荐

  1. 宁静优美景色动态特效404网页源码

    简介: 一款非常宁静的404网页模板,近处的湖面.远处的高山搭配,一名女子坐在木板上,很放松. 加上浮动的丝线,动静结合,让人看着很舒服,这也就达到了404页面的作用. 现提供免费下载. 网盘下载地址 ...

  2. 给你的网页添加随机BGM背景音乐

    简介: 网页添加音乐方法 每当网页shua新及打开一次随机播放一首BGM 内容十首音乐,某易云.酷狗音乐外链,可以自定义更换 可以从这里进行获取自己的音乐外链 音乐 以下内容添加载标签前就可以了 网盘 ...

  3. html动态网页添加音频_将音频添加到网页

    html动态网页添加音频 In principle, adding audio to a web page is quite straightforward. Assuming you have a ...

  4. html5火苗特效代码,视频添加火焰特效 视频画面中加动态的火苗效果

    我想好了等我三十岁的时候还没有结婚的话,我就给那些结了婚.生了孩子.我随了份子钱的人打电话,让他们来参加我的三十岁大寿,我想我这样做他们应该可以理解吧!!好了来看看我们今天的教程吧,同样也是视频加特效 ...

  5. 用Canvas为网页添加动态背景

    用Canvas为网页添加动态背景 作者:uedtianji 最近刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务.考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好, ...

  6. 网页动态背景——随鼠标变换的动态线条(鼠标蜘蛛网特效)

    网页动态背景--随鼠标变换的动态线条 效果图如下 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...

  7. 如何在html中加入音效,为你的html5网页添加音效示例

    这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下 为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用H ...

  8. PC端网页特效 | 常见网页特效案例

    目录 案例:网页轮播图 轮播图JS全部代码 节流阀 案例:返回顶部 JS代码为 案例:筋头云案例 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 鼠标经过轮播图模块,左 ...

  9. Web APIs:PC 端网页特效--常见网页特效案例--轮播图及节流阀思想

    轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2. 点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理. 3. 图 ...

最新文章

  1. Deep Learning 9_深度学习UFLDL教程:linear decoder_exercise(斯坦福大学深度学习教程)...
  2. 小米面试题:单词拆分
  3. 第13章:项目合同管理(1)-章节重点
  4. 《深入理解Java虚拟机》读后总结(一)JVM内存模型
  5. servlet/filter/listener/interceptor区别与联系(转)
  6. 今日恐慌与贪婪指数为83 贪婪程度大幅上升
  7. 其利断金前一句是什么_成渝为什么不改成渝蓉?官方答案来了
  8. android 加载ae动画,Bodymovin:Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画...
  9. 计算机桌面不显示时间,win7电脑不显示时间怎么办|win7电脑不显示时间的恢复方法...
  10. 郭盛华是如何登上神坛?令全世界认识了中国的黑科技
  11. windows 安装cab文件
  12. Java联网3D坦克大战(网络编程)
  13. 安装httprunner
  14. vue刷新当前页面--provide / inject 用法
  15. 你的手帕再也不干净了_我再也不会将手机带回国际航班了。 你也不要
  16. asp.net IIS7 503错误
  17. CommandMethod介绍
  18. 安装MySQL之步骤~
  19. 案例 | 沃尔玛 x 腾讯云 Serverless 应用实践,全力保障消费者购物体验
  20. R语言爬虫豆瓣高评分电影(喝最烈的酒,熬最深的夜,吃最好的胃药,敷最贵的面膜)

热门文章

  1. 4.2 理性看考试——《逆袭大学》连载
  2. SpringBoot中Hibernate-validator的使用
  3. mysql时间加10分钟_将MySQL日期时间格式添加10分钟?
  4. Linux必会100个命令(十六)ping、nc
  5. 手机恢复出厂设置命令_华为手机双清和恢复出厂设置区别 recovery恢复出厂设置步骤...
  6. 华为计算机技能,华为笔记本电脑技术参数及功能一览
  7. Linux 网络基础 C语言常用API 快速翻阅笔记 (字节序篇)
  8. [福柯]用身体与权力浅析《性史》
  9. 【第1111期】Subresource Integrity 介绍
  10. LCD、LED、OLED、ELED、CCFL之间的区别