5.1认识动态网页 教学设计 2023—2024学年教科版高中信息技术选修 3

5.1认识动态网页 5.1.1认识动态HTML  一、教材分析 本节课是教育科学出版社《网络技术应用》第五章第一节的内容。为动态网页学习的和应用提供知识基础，起到了非常基础的作用。关于动态 HTML，书上的概念是：“所谓动态 HTML，是指即使在脱离网络环境的情况下，网页下载到浏览器以后仍能够随时变换的 HTML 。”本概念比较模糊，学生从字面上理解比较含混，不透彻，不直观。教师需要将该概念直观化、形象化，便于学生理解。在理解动态 HTML 的同时，需要强调的一点是，并不是网页上所有“动”的效果都是动态 HTML 效果，比如，有的 GIF 图片也会表现出各种活动效果，但这只是图片本身的“动画”效果而不是“动态 HTML ”效果。 二、学情分析 在学习本堂课之前，学生已经运用Front Page软件制作过微小型的网站，但都是应用“所见即所得”软件进行设计，并没有真正用代码实现过，因此，本节知识是解开学生对代码神秘面纱起到非常关键基础的作用，这里要求学生具备一定的抽象思维和理解思维。 三、教学目标 1.知识与技能 （1）感受动态效果； （2）理解动态 HTML的概念。 2.过程与方法 （1）通过感受和实现简单的动态 HTML 效果，学会制作简单动态效果的方法； （2）在任务驱动中以自主操作推进课堂，提升学生独立思考和操作的能力； （3）在分组上网搜索动态 DHTML 的应用实例，发挥团队作用，促进学生的团队意识，增强彼此之间的合作。 3.情感态度与价值观 （1）通过感受和实现简单的动态 HTML 效果，激发学习兴趣，提升学习的成就感，为下节课动态HTML的制作奠定基础。； （2）利用精彩的实例，激发学生学习动态 HTML 网页的制作兴趣，提高学生的审美情趣。 四、教学重难点分析 重点：通过感受动态效果，理解动态HTML的概念。 难点：通过任务驱动，让学生在规定时间完成规定的任务。 五、教学方法及策略 （1）通过简单的实例演示，让学生对动态 HTML 概念有比较具体的认识。 （2）利用任务驱动法，让学生学会简单的动态 HTML 制作。 （3）分组上网搜索动态 DHTML 的应用实例，发挥团队作用，促进学生的团队意识，增强彼此之间的合作。利用精彩的实例，激发学生学习动态 HTML 网页的制作兴趣，提高学生的审美情趣。 六、教学过程 教学 环节 教师活动 学生活动 多媒体 资源 设计思想 自主 学习 自主预习课本第105页至第196页的相关内容，认识什么是动态HTML。 结合学生的回答归纳： 动态HTML：是指在脱离网络环境的情况下，网页下载到浏览器后仍能后随时变换的HTML。例如：鼠标指针移动至文章段落中，段落能够变成蓝色等。 自主阅读，将问题勾画在课本上，或在word上写出自己的答案 不断地设计自主学习环节，让学生形成主动学习的好习惯，进一步提升自主学习和独立思考问题的能力。 师生 互动 1．教师展示网上搜集到的一个“旋转导航菜单” 师：请学生们就本导航菜单展开讨论。 （1）分析与常见的导航栏的区别。 （2）你看到这个导航菜单在动，你觉得它是普通意义上的动画吗？ 师：希望大家踊跃发言，说出自己的观点。 2．教师给出 DHTML 的比较容易理解的解释 DHTML 不是有关面向服务器的脚本、 JavaApplet 或动画 GIF 图像，所有的这些操作都可以自己完成，除了改变页面内容外，不需要访问服务器。页面下载后，不论什么时候， DHTML 都能处理页面元素，改变页面版面、内容和位置并把结果不断地提供给用户。 根据教师投影出的“旋转导航菜单” 讨论老师提出的问题。并回答。 认真听讲并理解 师生互动解释动态HTML，激发学生的学习兴趣。 任务 驱动 3．自己动手制作简单的动态 HTML 请同学们从网上找两幅自己喜欢的图片并下载到本地机。然后打开 FrontPage, 先将其中的一幅图片插入，使用 DHTML 效果，利用其中的“鼠标悬停”事件，将第一幅图片交换成第二幅图片。 4．自己动手更多地体验 FrontPage 中的 DHTML 效果 请同学们在做完上个题目以后，相互讨论，逐一快速体会其他的 DHTML 效果。 5．分组上网搜索动态 HTML 的应用实例，更好地理解、体会动态 HTML 的概念及应用 按照我们原来的分组，请同学们上网搜索动态 HTML 的应用实例。 利用网络，在本地机上完成该任务，同时体会动态 HTML 效果。 相互讨论，完成其他操作。 同学们进行分组活动，并做好记录。 讲练结合，有助于学生对动态HTML的理解。 熟悉其他动态事件。 明确本堂课的任务，本节只注重直观认识，暂不考虑该动态 HTML 效果是如何实现的