高中信息技术粤教版选修3 网络技术应用5.1 动态HTML精品教案

5.1.1 动态HTML教案（二）

一、本节的作用和地位

教材编写过程中的第四章第四节已经预留了发展的空间，详细的动态HTML技术介绍放在第五章，学生在学习网页制作的过程中，可以跳到第五章第一节中结合实例学习。也可以在经历了完整的网站开发过程后，在第五章中作一个充实和完善。

二、学习目标

1、了解样式表定位的用途和实现的效果，了解网页下拉菜单的制作方法。

2、了解文档对象模型及其用法，制作状态栏文字走马灯效果。

三、学习重点

1、层叠样式表定位使用<DIV>标志实现。

2、对文档对象模型的操作是通过网页脚本实现的。

四、学习方法

讲授法

五、学习时间

1课时

六、学习环境

计算机网络实验室

七、学习过程

1、了解样式表定位

在前面的学习中，我们曾经运用过样式表对网页上显示的样式进行控制，例如：字体的颜色、文档的北京、图片的边距等，样式表定位是样式表的延伸，它为屏幕上所有的元素赋予了精确到像素的定位，主要使用<div></div>标记来放置页面元素。

2、任务1

请结合脚本技术与<div></div>标记，来制作一个简单的下拉菜单。

操作过程如下：

（1）新建一个网页文件，切换到HTML视图编辑。

（2）制作思路：编写菜单的代码，首先必须描述它的外观，在菜单条上加入一定的颜色以及描述各项功能的名称，例如：file、edit、view等等。当点击文字石，就会显示该菜单项下的子菜单，在子菜单框中点击相应的菜单项目的就可触发某个程序。

3、了解文档对象模型

文档对象模型是动态HTML的核心内容，DOM体现的是网页个元素之间的关系，包括浏览器自身属性，窗口自身的属性，各HTML元素，升职包括一些背景信息，通过利用脚本语言编程控制DOM，可使更多的网页元素产生变化。

4、任务2

结合运用脚本技术与稳当对象模型，制作浏览器状态栏“走马灯”文字提示。

5、扩展任务

学生尝试运用DOM和脚本技术，给前几堂课制作好的主题网站首页状态栏上增加一个滚动字幕，并且为网页增加设计一个下拉菜单。

6、教师总结

通过前两堂课对动态HTML的学习，我们认识到一种网页特效的实现过程是复杂的，但它也体现了人们在应用过程中不断钻研、不断进取的精神。目前已经有不少的适合大众得制作软件，让人们能够更容易的去实现复杂的效果，技术不应该光停留在表面，希望同学们的后续的学习生活中可以深入钻研，深入学习。