教科版高中信息技术选修3 5.3.1 用JavaScript 制作动态HTML 课件(共20张PPT)

作为中国四大传统节日之一的
端午节你了解吗？
路漫漫其修远兮
吾将上下而求索
您受委屈了。
屈大夫，
考一考？
什么时间？
为什么叫“端午”？
除了“端午”，还有其它什么叫法？
有什么意义？
有哪些民俗活动？
有关“端午”的诗词你是否有所耳闻？
我带着这些疑问，搜索了相关资料，做了一个小网站。
至此，我对“端午”也算是略知一二了。
找一找！
请大家对比两个网站，找一找网站中两个相同页面的差别。
这是网站的第一个页面：欢迎页
捋一捋【从网页外观上看】
Dwcq的欢迎页
Dwcq2的欢迎页
区别1:增加了弹窗和时钟特效
捋一捋【从网页外观上看】
Dwcq的首页
Dwcq2的首页
区别2:增加了动态滚动图片特效
捋一捋【从网页外观上看】
Dwcq的”端午概述”页
Dwcq2的”端午概述”页
区别3:增加了动态修改背景色特效
捋一捋【从网页外观上看】
Dwcq的”名字由来”页
Dwcq2的”名字由来”页
区别4:增加了栏目名称样式特效
说一说：
做网站，
我们的重点是呈现内容；
但，
也不能完全地忽略形式。
因为，
形式可以为内容增添活力！
5.3用javascript
制作动态HTML
什么是js特效？
这个所谓的js特效究竟是如何让网页“动”起来的？
讲一讲：
讲一讲：
js特效：全称JavaScript，是一种脚本语言，它采用小程序段的方式实现编程，简单的说网页中那些个性化的，比较酷的效果都需要js来完成。
实例讲演一：弹窗效果【基础】

动手实践一
实例讲演二：动态变换栏目名样式【提高】
①在表格中添加对象，并引用java函数特效的代码

首页

端午概述

名字由来

人物纪念

民俗活动

诗词作品

②在区域添加鼠标放上和离开的事件函数function

③在区域添加有超链接的文字样式-去掉下划线（可选）

动手实践二
实例讲演三：动态滚图【增强】
① 利用表格定义对象：将图片放置在







② 在区域定义样式（含引用外部样式）




③ 添加动态js特效，（注意：也是放在区域中）




动手实践三
自由发挥：课堂拓展【强化Again】
已实践
未实践
要求：结合自己的网站，利用以下5种特效修饰美化自己的网站。
大
家
来
围
观
我
们看好你哦
课堂总结
请同学结合自己实践的体会，谈一谈本节课的收获！