选修3 网络技术应用《第五章 动态网页制作 5.3 应用动态HTML 5.3.2 动态HTML 设计原则》优秀教案

选修3 网络技术应用《第五章 动态网页制作 5.3 应用动态HTML 5.3.2 动态HTML 设计原则》优秀教案

程 一、导入

一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼的小精灵。若是在网页上放上具有这样效果的一段文字，会使整个页面充满生气。

二、分小组自学

学生分小组自学教材第 117 ～ 120 页内容，了解动态网页的三大技术：客户端的脚本语言、文件目标模块 (Document Object Model) 、 CSS 样式表。

小组汇报交流，教师总结。

三、学习网页中嵌入 JavaScript 制作动态网页

教师先展示，然后由学生由校内 FTP 下载 JavaScript 代码，体验动态网页。

（1）先插入一个 1*n 表格，这里的 n 就是要跳动的文字数，把表格的高度定义为 70px，实际上表格高度的设定原则是要大于最大的跳动文字，否则在文字跳动时，整个页面都在抖动。然后把文字写入表格中，每个单元格写一个字，由于要在程序中对每个字的属性进行操作，所以还要用 标记把字括起来，并给它取一个名字（在本例中是 a1 、 a2 、a3．．．a6 ），没有名字，程序无法操作。

span id="a2"> 态

信息技术备课纸

教

学

过

程

（2）在 标记中加入 onload="movetext()"，以便这段文字在网页载入时，就跳动起来。

　　 通过本文的例子，你看用 JavaScript 改变文字的属性多么简单，要牢记的是：在 JavaScript 中要对哪个元素操作，必须要有 “ 名字 ”，也就是 ID 号。要产生动态效果， setTimeout(function,value) 不可少。

教师巡回指导学生完成一个动态网页。