5.1.1动态HTML-粤教版高中信息技术选修三教学设计

5.1.1动态HTML-粤教版高中信息技术选修三教学设计学科政治年级册别八年级上册共1课时教材部编版授课类型新授课第1课时设计思路本节课以“动态HTML”为主题，结合粤教版高中信息技术选修三教材，围绕HTML动态效果制作展开。通过引导学生学习HTML标签、事件处理和JavaScript编程，使学生掌握制作动态网页的基本方法。课程设计注重理论与实践相结合，通过实例演示和实际操作，提高学生的动手能力和创新思维。核心素养目标分析学情分析本节课面向高中信息技术选修三的学生，学生层次涵盖普通高中和艺术类高中。在知识方面，学生已具备基础的HTML知识，能够理解和运用常见的HTML标签。然而，对于动态HTML的概念和实现方法，部分学生可能存在理解困难，因为他们缺乏编程经验和JavaScript基础。在能力方面，学生的动手操作能力参差不齐，部分学生能够独立完成简单的网页制作，但面对动态效果的制作，往往需要教师指导和帮助。在素质方面，学生的创新意识和问题解决能力有待提高，他们在面对新知识时，往往倾向于模仿而非独立思考。此外，部分学生存在拖延和依赖心理，对课程学习的积极性和主动性有待加强。这些学情特点对课程学习产生了一定影响，需要教师在教学过程中注重分层教学，激发学生的学习兴趣，培养他们的自主学习和创新能力。教学资源准备1.教材：确保每位学生拥有粤教版高中信息技术选修三教材，以便学生能够跟随教材内容进行学习。

2.辅助材料：准备与动态HTML相关的图片、图表、视频等多媒体资源，以帮助学生更好地理解概念和操作步骤。

3.实验器材：准备计算机实验室，确保网络连接稳定，学生每人一台电脑，用于实践操作。

4.教室布置：设置分组讨论区和实验操作台，以便学生在学习动态HTML时能够进行小组合作和实际操作练习。教学过程一、导入新课

1.老师提问：同学们，我们已经学习了静态HTML网页的制作，那么如何让我们的网页更加生动有趣呢？

2.学生回答：可以使用动态HTML。

3.老师总结：今天我们就来学习5.1.1动态HTML这一章节，了解动态网页的制作方法。

二、新课讲授

1.老师讲解：首先，我们需要了解HTML标签的嵌套和事件处理。例如，我们可以使用`<a>`标签创建超链接，并通过JavaScript添加点击事件，实现页面跳转。

2.学生练习：请同学们尝试在HTML页面中添加超链接，并使用JavaScript添加点击事件。

3.老师点评：同学们完成的不错，现在我们来看一个更复杂的例子。

4.老师讲解：接下来，我们将学习如何使用JavaScript制作轮播图。首先，我们需要创建一个包含多个图片的容器，并通过JavaScript控制图片的切换。

5.学生练习：请同学们根据老师提供的代码，尝试制作一个简单的轮播图。

6.老师点评：同学们的轮播图制作得很好，现在我们来看一个更高级的例子。

7.老师讲解：除了轮播图，我们还可以使用JavaScript实现鼠标悬停显示提示信息的功能。这需要我们使用`onmouseover`和`onmouseout`事件。

8.学生练习：请同学们尝试在网页中添加鼠标悬停显示提示信息的功能。

9.老师点评：同学们都做得很好，现在我们来总结一下今天所学的动态HTML知识。

三、课堂总结

1.老师总结：今天我们学习了动态HTML的制作方法，包括超链接、轮播图和鼠标悬停显示提示信息等。这些功能可以让我们的网页更加生动有趣。

2.学生提问：老师，如何让动态效果更加平滑呢？

3.老师解答：我们可以使用CSS动画和JavaScript的`setTimeout`函数来实现平滑的动态效果。

四、课堂练习

1.老师布置作业：请同学们根据今天所学的知识，制作一个包含超链接、轮播图和鼠标悬停显示提示信息的动态网页。

2.学生开始练习，老师巡视指导。

五、课堂评价

1.老师评价：同学们的作业完成得很好，大家都能熟练运用动态HTML制作网页。下面我们来评选一下今天表现最优秀的学生。

2.学生展示自己的作品，老师进行点评和总结。

六、课堂延伸

1.老师提出问题：同学们，除了今天所学的动态HTML，还有哪些方法可以让我们的网页更加生动有趣呢？

2.学生回答：可以使用CSS动画、JavaScript库等。

3.老师总结：今天的课程就到这里，希望大家在课后能够继续探索和学习，让我们的网页制作技能更加丰富。学生学习效果学生学习效果

1.知识掌握：

学生通过本节课的学习，对动态HTML的概念有了深入理解，掌握了HTML标签的嵌套、事件处理以及JavaScript编程的基本技巧。他们能够独立完成简单的动态效果制作，如超链接、轮播图和鼠标悬停显示提示信息等。

2.技能提升：

学生在实践操作中，提高了网页制作的动手能力。他们学会了如何将理论知识应用到实际项目中，通过不断的尝试和修改，提升了问题解决能力和创新思维。

3.思维发展：

学生在制作动态网页的过程中，学会了分析问题、设计解决方案，并能够运用所学知识进行创新。他们开始尝试将不同的动态效果结合，创造出独特的网页设计。

4.团队合作：

在小组讨论和合作制作动态网页的过程中，学生学会了与他人沟通、协作，共同完成任务。他们学会了倾听他人的意见，尊重他人的创意，并在团队中发挥自己的优势。

5.自主学习：

学生在完成课堂练习和课后作业的过程中，养成了自主学习的习惯。他们能够主动查阅资料，解决遇到的问题，并在遇到困难时寻求同学和老师的帮助。

6.应用能力：

学生将所学的动态HTML知识应用到实际项目中，如个人博客、班级网站等。他们能够利用这些知识提升网页的交互性和用户体验，使网页更具吸引力。

7.评价与反思：

学生在完成作品后，能够对自己的作品进行评价和反思，找出不足之处，并尝试改进。他们学会了从实践中总结经验，不断提升自己的技能。

8.情感态度：

学生在学习动态HTML的过程中，体验到了编程的乐趣，增强了自信心。他们对信息技术学科产生了浓厚的兴趣，激发了进一步学习的动力。课后作业1.实践题：请创建一个简单的HTML页面，其中包含三个按钮，分别使用JavaScript实现点击后进行以下操作：

-第一个按钮点击后，使用`alert`函数弹出一个提示框，显示“欢迎来到我的网页！”。

-第二个按钮点击后，使用JavaScript修改页面中的文本内容，将一段静态文本替换为动态生成的文本信息。

-第三个按钮点击后，使用JavaScript动态改变页面的背景颜色。

2.应用题：制作一个简单的轮播图，包含三张图片。轮播图自动切换图片，每次切换间隔为3秒。要求使用JavaScript控制图片的切换，并添加切换效果。

3.分析题：分析以下JavaScript代码，并说明其功能。

```javascript

functionchangeImage(){

varimg=document.getElementById("image");

if(img.src=="image1.jpg"){

img.src="image2.jpg";

}elseif(img.src=="image2.jpg"){

img.src="image3.jpg";

}else{

img.src="image1.jpg";

}

}

```

4.创新题：设计一个动态的计数器，当页面加载完成时开始计时，并在页面上实时显示经过的时间（小时、分钟、秒）。要求使用JavaScript实现。

5.综合题：结合所学的动态HTML知识，设计一个简单的在线调查表单。表单包含以下几个问题：

-你最喜欢的颜色是？

-你喜欢阅读吗？

-你更喜欢哪种类型的电影？

每个问题都有多个选项，学生可以勾选多个选项。提交表单后，使用JavaScript收集用户的选择并显示在页面上。

答案示例：

1.实践题：代码略。

2.应用题：代码略。

3.分析题：该函数根据当前图片的`src`属性，循环切换到下一张图片。如果当前图片是第一张，则切换到第二张；如果当前图片是第二张，则切换到第三张；如果当前图片是第三张，则切换回第一张。

4.创新题：代码略。

5.综合题：代码略。板书设计①动态HTML概述

-动态HTML概念

-动态网页与传统网页的区别

②HTML标签的嵌套

-常用标签及其嵌套规则

-标签属性的作用和设置方法

③事件处理

-事件的概念和类型

-JavaScript事件处理方法

-常用