《第五章动态网页制作——.理解动态HTML——.....课件》高中信息技术教科版网络技术应用

第五章动态网页制作5．1 动态HTML一、课程标准中的相关内容能够根据表达任务的需求，使用常用的网页制作软件制作与发布动态网页。

二、教学目标1、知识与技能（1）掌握在HTML中加入JavaScript代码的方法。

（2）能够在指定位置加入JavaScript代码。

（3）掌握修改JavaScript代码中文字属性的方法。

综合应用：能够根据网页的内容、风格选择适当的网页特效。

2、过程与方法（1）培养学生的自主学习、探究学习以及协作学习的能力。

（2）培养学生的创新能力、表达能力。

（3）培养学生进行学习反思的学习习惯。

3、情感态度与价值观（1）培养学生与他人合作与交流的能力。

（2）培养学生的信息道德素养。

三、学生分析本课的教学对象是桂城中学的高中二年级学生。

在学习本课之前，他们已经学习了用DreamWeaver制作网页的基本方法，能够制作简单的网页，但不熟悉HTML标记语言。

因此在学习粘贴JavaScript代码前，应先讲解HTML的基本结构，让学生对HTML有一个基本的认识。

四、教材分析1、本节的作用和地位教材编写过程中已在第四节预留了发展的空间，详细的动态HTML技术介绍放在第五章。

学生在学习网页制作过程中，可以跳到5.1中结合实例实习。

也可以在经历了完整的网站开发过程后，在第五章中作进一步充实和完善。

2、本节主要内容本课内容主要是动态HTML中的JavaScript脚本语言的应用。

JavaScript代码能够命令网页出现动态的效果，这是比较受学生欢迎的学习内容。

对于普通高中学生，仅需要了解如何在网页中适当位置加入JavaScript代码即可，无需深入了解JavaScript代码的组成以及原理。

因此我将本课的重点定为：掌握加入JavaScript代码的方法，能够在指定位置加入JavaScript代码。

3、重点难点分析教学重点（1）掌握加入JavaScript代码的方法。

（2）能够在指定位置加入JavaScript代码。

用案日期：________年______月_______日星期_______ 主备人：课时：N0:_____
务器页面，Active server Pages）、JSP（Java服务器页面，Java Server Pages）和PHP（超级文本预处理语言，Hypertext Pre-Processor）等技术动态生成的页面。

动态网页技术通常以数据库技术为基础。

2．动态网页和静态网页的区别
动态网页是与静态网页相对应的，这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。

两者的工作原理区别和各自的特点详见表5-2 动态网页和静态网页工作原理图。

表5-2 动态网页和静态网页工作原理图。

静态网
页的特点简
要归纳如下：
（1）静
态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；
（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；
（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；。

第五章《静态网页与动态网页的比较》教案一、教学目标准确把握静态网页与动态网页的区别，为学生以后自主制作动态网页打下良好的基础。

二、教材内容分析关于动态网页，没有动态网站开发经验的同学，可能理解起来比较困难，甚至分不清何为静态网页，何为动态网页。

而网络世界走到今天，动态网页已是大行其道，也是学生很有必要掌握的。

而教材上关于动态网页的介绍显得比较笼统，教师有必要收集相关资料，让学生正确认识动态网页的含义。

三、教学方法及策略依据学生前面制作网页的基础，首先给出静态网页的概念，有了静态网页的学习，采用比较法，学生会对动态网页有个粗浅的了解。

进而通过实例演示，让学生对动态网页有更深一步的了解，达到准确把握动态网页的概念。

该堂课理论内容较多，教师需要将讲授内容通过投影展示到屏幕上，以便于学生学习。

四、教学过程1．教师首先根据同学们前面的学习，给出静态网页的概念师：同学们前面都自己利用 FrontPage 制作过自己喜欢的网页，这种网页的文件扩展名是 .htm 或者 .html。

网页上的每一行代码都是同学们预先编写好后，放置到 Web 服务器上的，在发送到客户端的浏览器上不再发生任何变化。

这种网页，就称之为静态网页。

2．教师展示静态网页的处理过程静态网页的处理流程（1）当用户在浏览器的“地址”栏中输入一个 URL 地址并单击“转到”按钮或敲击键盘上的回车键（或者在浏览器菜单栏的“收藏”选择一个网址）后，浏览器将向 Web 服务器发出一个页面请求。

（2）当 Web 服务器收到这个页面请求，根据 .htm 或 .html 判断出这是一个静态的 HTML 文件，然后从磁盘或存储器中查找获取用户请求的这个页面。

（3） Web 服务器找到这个请求文件后，就会把它发送到浏览器，浏览器对这个返回的 HTML 文件进行解释并将结果显示在浏览器中。

图 5-1 静态网页处理过程3．教师提出关于静态网页的问题，学生思考师：同学们，如果你自己有一个个人网站，需要发布大量的信息，采用静态网页的形式，你们觉得方便吗，有什么弊端？请同学们讨论。

《动态网页设计与制作实用教程》电子教案第一章：动态网页设计基础1.1 动态网页概述1.1.1 动态网页与静态网页的区别1.1.2 动态网页的优势与应用场景1.2 动态网页技术概述1.2.1 HTML5与CSS31.2.2 JavaScript与jQuery1.2.3 服务器端编程语言（如PHP、Java、Python等）1.3 动态网页设计流程1.3.1 需求分析1.3.2 页面布局与设计1.3.3 交互设计与实现1.3.4 页面测试与优化第二章：HTML5与CSS3基础2.1 HTML5概述2.1.1 HTML5的新特性2.1.2 HTML5文档结构2.2 常用HTML5标签2.2.1 语义化标签2.2.2 媒体标签2.2.3 表单标签2.3 CSS3概述2.3.1 CSS3的特点与优势2.3.2 CSS3的基本语法2.4 常用CSS3样式与属性2.4.1 选择器与伪类2.4.2 盒模型与布局2.4.3 颜色、字体与文本2.4.4 过渡与动画第三章：JavaScript与jQuery基础3.1 JavaScript概述3.1.1 JavaScript的历史与发展3.1.2 JavaScript的运行环境3.1.3 JavaScript的基本语法3.2 常用JavaScript函数与对象3.2.1 基本函数与方法3.2.2 日期与数学对象3.2.3 DOM操作3.3 jQuery概述3.3.1 jQuery的优点与特性3.3.2 jQuery的安装与使用3.4 常用jQuery方法与选择器3.4.1 基础方法与属性3.4.2 事件处理3.4.3 动画与效果第四章：动态网页设计工具与技术4.1 网页设计与制作工具4.1.1 代码编辑器（如Sublime Text、Visual Studio Code等）4.1.2 网页设计软件（如Adobe Dreamweaver、Sublime Text等）4.2 图片处理工具4.2.1 Photoshop4.2.2 Fireworks4.3 浏览器兼容性测试与调试4.3.1 浏览器兼容性问题概述4.3.2 浏览器的内核与版本差异4.3.3 兼容性测试工具（如BrowserStack、CrossBrowserTesting等）4.4 前端框架与库4.4.1 Bootstrap4.4.2 Vue.js4.4.3 React第五章：动态网页交互设计与实现5.1 交互设计概述5.1.1 交互设计的重要性5.1.2 交互设计原则与方法5.2 鼠标与键盘事件5.2.1 鼠标事件（如click、dblclick、mousedown等）5.2.2 键盘事件（如keydown、keyup、keypress等）5.3 表单验证与交互5.3.1 表单基本概念与结构5.3.2 表单验证方法与技巧5.3.3 表单提交与异步请求5.4 AJAX技术5.4.1 AJAX概述与原理5.4.2 AJAX请求与响应5.4.3 AJAX应用实例（如动态加载数据、无刷新提交表单等）第六章：响应式网页设计6.1 响应式网页设计概述6.1.1 响应式网页设计的概念6.1.2 响应式网页设计的重要性6.2 媒体查询与弹性布局6.2.1 媒体查询的使用6.2.2 弹性布局与网格系统6.3 响应式设计工具与技术6.3.1 响应式设计框架（如Bootstrap、Foundation等）6.3.2 响应式图片与视频处理6.4 响应式网页设计实践6.4.1 设计适配不同屏幕尺寸的布局6.4.2 优化网页性能与加载速度第七章：前端框架与库的应用7.1 前端框架概述7.1.1 前端框架的优势7.1.2 主流前端框架简介7.2 Bootstrap框架7.2.1 Bootstrap的特点与安装7.2.2 Bootstrap的布局组件7.2.3 Bootstrap的样式与组件7.3 Vue.js框架7.3.1 Vue.js的简介与安装7.3.2 Vue.js的指令与组件7.3.3 Vue.js的数据绑定与组件通信7.4 React框架7.4.1 React的简介与安装7.4.2 React的组件与状态管理7.4.3 React与Redux的结合使用第八章：服务器端编程与数据库8.1 服务器端编程基础8.1.1 服务器端编程语言的选择8.1.2 服务器端编程的基本概念8.2 PHP服务器端编程8.2.1 PHP简介与安装8.2.2 PHP基本语法与数据结构8.2.3 PHP与MySQL数据库的连接与操作8.3 Java服务器端编程8.3.1 Java简介与开发环境配置8.3.2 Java基本语法与面向对象编程8.3.3 Java与MySQL数据库的连接与操作8.4 Python服务器端编程8.4.1 Python简介与安装8.4.2 Python基本语法与Web框架（如Django、Flask）8.4.3 Python与MySQL数据库的连接与操作第九章：动态网页项目实战9.1 项目实战概述9.1.1 项目需求分析9.1.2 项目设计与开发流程9.2 项目搭建与开发环境配置9.2.1 项目文件结构与目录组织9.2.2 开发工具与技术栈选择9.3 项目实现与测试9.3.1 页面布局与样式设计9.3.2 交互功能实现9.3.3 服务器端编程与数据库设计9.4 项目部署与上线9.4.1 部署环境选择与配置9.4.2 域名与网站空间申请9.4.3 网站搜索引擎优化（SEO）第十章：动态网页设计与制作的未来趋势10.1 前端技术发展趋势10.1.1 5G网络与边缘计算10.1.2 WebAssembly与Web性能优化10.1.3 跨平台与组件化开发10.2 与机器学习在网页设计中的应用10.2.1 在网页内容中的应用10.2.2 机器学习在用户行为分析与个性化推荐中的应用10.3 网页设计与制作的创新与挑战10.3.1 虚拟现实（VR）与增强现实（AR）在网页设计中的应用10.3.2 网页设计与制作的可持续发展与伦理考虑10.4 未来网页设计师的技能要求10.4.1 技术能力与软技能10.4.2 跨界合作与终身学习重点和难点解析重点一：动态网页的优势与应用场景解析：理解动态网页与静态网页的区别，以及动态网页的优势和适用场景是学习动态网页设计的基础。

高中信息技术（选修）网络技术应用
理解动态HTML 教学设计
一、教学目标
1知识与技能
（1）掌握在HTML中加入JavaScriWeaver制作网页的基本方法，能够制作简单的网页，但不熟悉HTML标记语言。

因此在学习粘贴JavaScriL的基本结构，让学生对HTML有一个基本的认识。

三、教材分析
1本节的作用和地位
教材编写过程中已在第四节预留了发展的空间，详细的动态HTML技术介绍放在第五章。

学生在学习网页制作过程中，可以跳到中结合实例实习。

也可以在经历了完整的网站开发过程后，在第五章中作进一步充实和完善。

2本节主要内容
本课内容主要是动态HTML中的JavaScriL中加入JavaScri
L之间的关系，能够根据任务表达的需求，制作具有动态特效的网页。

九、教学反思
从整体来说，本节课的教学目标均能按预期效果实现。

我认为本课最大的两个特点在于任务的设置以及学习反思的实现。

回顾整个教学过程以及分析教学调查情况，我感觉在练习点评以及个别知识点的讲授方面仍需改进。

（1）任务细化、难度逐层深入、由“点”到“面”。

让学生从简单任务入手，使学生感受成功，让成功感促学生继续学习。

用任务驱动学生进行探究，将问题留给学习小组，让学生在“做”中发现方法，用实践经验帮助学生理解知识、消化知识。

将练习资源划分难度，并安排不同层次的任务，让不同层次的学生均能得到提高。

（2）加入学习反思环节。

下课前预留5分钟，让学生完成教学调查，方便教师及时收集学生的学习情况。

同时指导学生进行学习反思，帮助学生梳理本课知识体系，同时方便学生之间共享学习成果。

高一信息技术《动态网页制作》教学设计江苏省溧水高级中学王蓉本节课采用网络环境下的教学方式，将教师的教学步骤制作成课件存放在服务器上，学生上课时按照老师指定的方法和步骤，将课件下载到本机的硬盘上（如D上）或直接浏览，可以清楚的看到教学步骤和过程，并选择不同的网页分别学习。

一、教材分析这节课内容为“动态网页制作”，根据时间和学生的学习能力选择了5项：1、横幅广告管理器的使用2、悬停按钮的制作3、滚动字幕的制作4、插入站点计数器5、使用动态HTML效果学生先按照指定的路径输入地址，或将教学过程的网页下载保存到D盘，打开教学过程网页后，完成前4项，根据自己的实际情况，有时间的同学再完成第5项。

二、教学模式——网络环境的教学模式并结合任务驱动的方法所谓网络环境下的教学模式是把多媒体机房看成一个局域网，教师机作为服务器，老师把要学习的内容和要完成的学习任务做成课件放在服务器上，学生按照指定的方法连接到服务器上，阅览学习内容，并且完成老师指定的任务。

整个学习过程学生发挥了很大的主动性，成为课堂的主体，而教师则巡视和辅导一下，成为了客体。

网络环境下的教学模式是新的教学模式，本节课体现的就是这种研究性学习。

任务驱动教学方法是信息技术课堂常用的一种教学方法，也就是给学生布置任务，让学生学习有目标，是学生在完成任务的过程中学到知识和技能。

本节课也采用了这种方法，把任务放在服务器上，这些任务学生必须完成，学生要完成学习任务就要先学会利用网络进行学习，完成任务后也就掌握了这些知识和技能。

三、课件设计在课件的设计，把5个动态效果具体体现在教学课件上，使得该课件既可以让学生学习又是这5个内容的具体例子，一举两得。

例如，本节课内容之一为“横幅广告管理器”，教学课件的网页横幅左侧就是一个广告管理器的使用，学生既可以浏览网页的内容，又可以具体的知道横幅广告管理器究竟是什么。

由于本节课是网络环境下的教学模式和任务驱动的结合，是教学中新的尝试，存在许多不足之处，望专家指正。