5.1.2动态HTML-粤教版高中信息技术选修三教案

5.1.1 动态HTML教案（二） 1、 本节的作用和地位 教材编写过程中的第四章第四节已经预留了发展的空间，详细的动态HTML技术介绍放在第五章，学生在学习网页制作的过程中，可以跳到第五章第一节中结合实例学习。也可以在经历了完整的网站开发过程后，在第五章中作一个充实和完善。 2、 学习目标 1、 了解样式表定位的用途和实现的效果，了解网页下拉菜单的制作方法。 2、 了解文档对象模型及其用法，制作状态栏文字走马灯效果。 3、 学习重点 1、 层叠样式表定位使用<DIV>标志实现。 2、 对文档对象模型的操作是通过网页脚本实现的。 4、 学习方法 讲授法 5、 学习时间 1课时 6、 学习环境 计算机网络实验室 7、 学习过程 1、 了解样式表定位 在前面的学习中，我们曾经运用过样式表对网页上显示的样式进行控制，例如：字体的颜色、文档的北京、图片的边距等，样式表定位是样式表的延伸，它为屏幕上所有的元素赋予了精确到像素的定位，主要使用<div></div>标记来放置页面元素。 2、 任务1 请结合脚本技术与<div></div>标记，来制作一个简单的下拉菜单。 操作过程如下： （1） 新建一个网页文件，切换到HTML视图编辑。 （2） 制作思路：编写菜单的代码，首先必须描述它的外观，在菜单条上加入一定的颜色以及描述各项功能的名称，例如：file、edit、view等等。当点击文字石，就会显示该菜单项下的子菜单，在子菜单框中点击相应的菜单项目的就可触发某个程序。 3、 了解文档对象模型 文档对象模型是动态HTML的核心内容，DOM体现的是网页个元素之间的关系，包括浏览器自身属性，窗口自身的属性，各HTML元素，升职包括一些背景信息，通过利用脚本语言编程控制DOM，可使更多的网页元素产生变化。 4、 任务2 结合运用脚本技术与稳当对象模型，制作浏览器状态栏“走马灯”文字提示。 5、 扩展任务 学生尝试运用DOM和脚本技术，给前几堂课制作好的主题网站首页状态栏上增加一个滚动字幕，并且为网页增加设计一个下拉菜单。 6、 教师总结 通过前两堂课对动态HTML的学习，我们认识到一种网页特效的实现过程是复杂的，但它也体现了人们在应用过程中不断钻研、不断进取的精神。目前已经有不少的适合大众得制作软件，让人们能够更容易的去实现复杂的效果，技术不应该光停留在表面，希望同学们的后续的学习生活