第3章第2节7《给网页增加动感效果》教学设计 2024—2025学年苏科版（2018）初中信息技术八年级全一册
2024-09-01
|
9页
|
282人阅读
|
14人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息技术苏科版(2018)八年级全一册 |
| 年级 | 八年级 |
| 章节 | 7 给网页增加动感效果 |
| 类型 | 教案-教学设计 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2024-2025 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | DOCX |
| 文件大小 | 32 KB |
| 发布时间 | 2024-09-01 |
| 更新时间 | 2024-09-01 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2024-09-01 |
| 下载链接 | https://m.zxxk.com/soft/47121246.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
给网页增加动感效果
课题
给网页增加动感效果
教学目标
知识与技能
1、进一步掌握HTML基本代码；
2、了解动态HTML的几种常见的效果；
3、体验Javascript在动态网页设计中的应用。
过程与方法
通过在网页中运用和修改javascript语言，对javascript特效有了更深的认识；
情感、态度与价值观
1、培养学生观察力，注重思维的创新；
2、养成自主思考、自我探究的学习态度；
重点
javaScript语言
难点
javaScript语言
课时
2课时
教学过程
教师行为
学生行为
设计意图
一、复习
组成一张简单网页的最基本的标签是什么？有什么特点与规律
写代码
<html>
<head><title></title>
</head>
<body>
</body>
</html>
温故而知新
二、探索问题
组织学生阅读P105-108，回答问题
看书并回答，（1）动态网页主要采用哪些技术？动态网页主要强调的是什么？
1. 服务器端脚本技术：这是一种在服务器端执行的脚本技术，例如PHP、ASP（Active Server Pages）、JSP（Java Server Pages）等。这些技术可以解析和执行动态代码，生成并返回给客户端的网页内容。服务器会根据请求的环境和条件来动态地生成网页内容。例如，当访问者在表单中输入数据并提交时，服务器端脚本会根据这些数据进行操作，并将结果嵌入到返回给客户端的HTML代码中。
2.数据库连接技术：动态网页经常需要与数据库进行交互以获取或更新信息。因此，数据库连接技术如ODBC（开放数据库连接）、JDBC（Java数据库连接）等在动态网页技术中扮演着重要角色。这些技术允许动态网页与数据库进行通信，从而获取数据并展示给用户。
3.JavaScript和AJAX技术：JavaScript是一种在客户端执行的脚本语言，它可以增强网页的交互性。AJAX（Asynchronous JavaScript and XML）则是一种在不刷新页面的情况下与服务器交换数据并更新部分网页的技术。它使得动态网页具有更好的用户体验，并且提高了数据的处理速度。
4.模板引擎技术：模板引擎允许开发者使用预先定义好的模板来生成动态网页。这种技术简化了动态内容的创建和管理过程。常见的模板引擎包括Jinja2（Python）、Handlebars（JavaScript）等。这些模板引擎可以与服务器端脚本技术结合使用，以生成更加复杂的动态网页内容。例如根据用户的角色或权限展示不同的内容模块等。通过这种方式可以更有效地组织和管理复杂的网页内容结构，并提高工作效率。通过插入变量和逻辑结构，开发者能够快速地创建适应不同情况的动态页面内容。
（2）动态网页与静态网页的区别？
1、内容生成
静态网页： 静态网页的内容在服务器上预先生成并保存，无论用户请求何时发生，内容都保持不变。
动态网页： 动态网页的内容是根据用户请求和服务器端的逻辑动态生成的。每次用户访问时，内容可能会根据特定条件和参数而改变。
2、交互性
静态网页： 静态网页通常较缺乏交互性，页面上的内容固定，无法根据用户的输入或操作做出实时响应。
动态网页： 动态网页可以具有更高的交互性，因为它们可以根据用户的输入和操作生成动态内容，例如表单提交、实时数据更新等。
3、技术实现
静态网页： 静态网页通常使用 HTML、CSS 和 JavaScript 等前端技术来创建，不涉及服务器端的编程逻辑。
动态网页： 动态网页需要服务器端脚本语言（如 PHP、Python、Ruby）、数据库和服务器端框架等技术来实现，以便在服务器端根据用户请求生成内容。
4、加载速度
静态网页： 静态网页由于其内容预先生成且不需要服务器端处理，通常加载速度较快。
动态网页： 动态网页需要服务器端的处理和数据库查询，因此加载速度可能会较慢，特别是在高访问量情况下。
5、内容更新
静态网页： 更新静态网页的内容需要手动编辑并重新上传到服务器。
动态网页： 动态网页的内容可以根据服务器端逻辑自动更新，无需手动干预。
动态网页和静态网页在内容生成、交互性、技术实现、加载速度和内容更新等方面存在差异。选择使用哪种类型取决于网站的需求和目标，以及对交互性、实时性和可维护性的要求。
理论先行
三、添加动态html
1、组织学生阅读javascript代码的使用方法，完成弹出对话框的特效，思考：你能实现该特效重复出现的效果吗？
2、给网页添加时间的特效，体验其交互性
1、javascript代码的使用的基本格式
<script>
alert("hi~");
</script>
注：开始标签<script>
与书上的<script language=”javascript”>相同
2、通过时间特效的案例体验进一步了解动态网页的特点
掌握javascript语言的结构及使用方法
3、外部调用javascript文件，为多个网页添加同一个特效，总结操作要点。
3、体验怎样实现多张网页实现同一java特效。
<script src="myScript.js"></script>
Javascript外部调用的初步尝试
四、总结
组织学生总结动态网页的基本特点与javascript的基本结构。
对重点知识进行总结
总结
五、练习
组织学生做练习软件上的操作题
巡视、解决问题
打开练习软件，做指定的题目。
整理笔记
查漏补缺
六、课后反思
对于学生来说，代码是一大难点。因此在设计的时候由易到难，在学生理解的基础上分析比较javascript两种用法的区别，并通过练习软件上的例题来加以巩固。对于代码的书写规范还要加以强调
学科网（北京）股份有限公司
$$
资源预览图
1
2
3
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。