让网页动起来(一).doc

§8.5 让网页动起来（一） 东风六中信息技术组 李庆文总课时数：24 本节课时：2*8 节 课程名称：§8.5 让网页动起来（一） 教学重点难点：① 在网页中添加组件 ② 在网页中使用 DHTML 动态效果 ③ 设置网页的过渡效果 参考内容：① 清华大学出版社出版 谭浩强主编的《高中信息技术》 （第二册）② 清华大学出版社出版 范承松 王华 云雷编著的《深 入剖析 Flash 5.0》 教学内容（教学内容和相关板书）： ※号表示要根据学生和当时教学时间安排情况选择讲和不讲的 （留做自己阅读） §8.5 让网页动起来（一） 网页上不仅有静止的文字和图像，还可以加入各种运动效果 FrontPage 提供了一些十分有用的动画效果，比如字幕、动态 HTML 效果、网页过渡效果等此外，网页中还可以加入 Flash 动画、 Java 动画、JIF 动画等 FrontPage 2000 提供了很多动态效果，能为网页提供亮丽的点 缀下面介绍几个常用的动态效果 一、怎样在网页中添加动态效果？ 任务 1 在网页中制作字幕和“悬停”按钮 任务分析：字幕是指在网页中能左右运动的文字字幕使文字 十分醒目，用它来显示提示信息最好不过了。

当把鼠标放在网页上某些按钮上时，它会变换出十分好看的颜 色，这就是“悬停”按钮 字幕和“悬停”按钮是网页中常用的动画元素FrontPage 能 把它们方便地加入到网页中 动手实践 （1）添加和设置字幕 ① 首先打开网页 index.htm，选中第一行，把文字“软件拼盘” 删除 ② 执行“插入”→“组件”→“字幕…”命令，打开如图 8.36 所示的“字幕属性”对话框③ 在“文本”框中输入字幕的内容“软件拼盘！” 在它的下 面可以设置字幕的各种属性，如滚动的方向、速度、 表现方式、对 齐方式、字幕的大小等 ④ 单击“确定”按钮，关闭对话框 ⑤ 选中字幕（会在字幕的周围出现 8 个控点） 然后像设置普 通文字一样设置文字的大小、字体等（不能修改字幕中部分文字的 属性） ⑥ 单击工具栏上的“在浏览器中预览”按钮，看一看字幕的效 果 知识窗 修改字幕 如果对字幕的效果不满意，用鼠标双击字幕，打开“字幕属性” 对话框，在这里可以重新设置字幕的属性 试一试 在 FrontPage 中插入字幕，改变字幕的各种属性，想一想 它们的作用是什么？怎样设置？最后设置一种自己满意的效果 （2）在网页中添加和设置悬停按钮 ① 打开网页 down.htm。

② 执行“插入”→“组件”→“悬停按钮…”命令，打开“悬 停按钮属性”对话框如图 8.37 所示 ③ 在“按钮文本”中可以输入按钮上显示的文字“返回首页” 单击“字体…”按钮打开“字体”对话框，设置好字体、大小、字 型等 ④ 在“链接到”文本框中输入悬停按钮的超级链接地 址――“index.htm”或单击“浏览”按钮选择网页文件 “index.htm” ⑤ “效果颜色”是在浏览器中把鼠标放到悬停按钮上时悬停按 钮显示的颜色，把它设置为“黄色” ⑥ 单击“确定”按钮，关闭对话框，预览网页的效果 想一想 怎样设置悬停按钮的背景图像？ 提示：设置了网页的背景图像后，FrontPage 会用设置的图像 铺满整个网页，但是悬停按钮中并没有用设置的背景图像铺满整个 悬停按钮怎么办？ 可以先设置背景图像，然后按屏幕复制键（Print Screen）把 整个屏幕复制下来，粘贴到“画图”程序中；截取大约有悬停按钮 那么大的网页背景，保存到一个文件里接下来，用你保存的图像 作为悬停按钮的背景 试一试 设置悬停按钮的其他属性，看一看它们各自的效果是 什么？提示：如果要修改动态组件的属性，只要双击它就可以打开它 的属性对话框。

选中组件后按 Delete 键可以把选中的组件删除知识窗 用工具栏插入字幕 单击工具栏上的“插入组件”按钮，打开一个下拉列表框，选 择“字幕”选项，就可以在网页中插入字幕 怎样设置“悬停”按钮的背景图像 在“悬停按钮属性”对话框中单击“自定义…”按钮打开 “自定义”对话框如图 8.38 所示 单击右边的“浏览”按钮，可以设置单击时分别播放不同的声 音和显示不同的图像！ 任务 2 在首页中添加 DHTML 动态效果 任务分析：在一些网页上，当把鼠标放到某张图像上时，图像 会变成另外的一张图像，这样的效果可以用动态 HTML 功能来实现 DHTML（动态 HTML）效果是 FrontPage 2000 新增的功能，它能为网 页的各种元素（文字、图像、按钮等）设置动态效果，并让这些动 态效果在鼠标单击、双击、悬停或显示网页时表现出来 设置 DHTML 的一般步骤是：先设置激发动态效果的事件，再设 置动态的类型，最后设置动态的具体效果 动手实践 ① 单击“格式”菜单中“动态 HTML 效果”选项，打开如图 8.39 所示“DHTML 效果”工具栏 ② 在网页编辑窗口中，选择要设置动态 HTML 效果的“面包” 图像。

③ 设置动画时间：单击“DHTML 效果”工具栏中“开启”按钮， 从打开的下拉列表中选择“鼠标悬停” （即激发动态发生的事件） ④ 设置动画类型：在“应用”下拉列表中选择要使用的动态类 型为“交换图片” ⑤ 设置动画效果：在第三个下拉列表框中设置具体动态效果 单击“选择图片…” ，选择另一个图像文件，并单击“确定”按钮 选择预览网页，当鼠标放到图像上时，就会显示另外一张图像 上面的操作步骤如图 8.40 所示 ⑥ 预览网页的效果提示：如果要删除动态 HTML 效果，只要选定相应的网页元素， 然后单击“DHTML 效果”工具栏上的“删除效果”按钮就行了 试一试 选择激发动态效果的不同事件，看一看各种事件下能 设置什么样的动态 HTML 效果，设置并预览效果小技巧 快速设置“DHTML 效果” 用鼠标选取已设置了 DHTML 效果的文字，然后单击工具栏上的 “格式刷”按钮当把鼠标移动到 FrontPage 的编辑窗口时，鼠标 的指针会变成刷子形状，用这个刷子单击编辑窗口中要设置 DHTML 效果的文字或图片，被单击的文字或图片就设置了相同的 DHTML 动 画 此外也可以对同一段文字或图片设置多个“DHTML 效果” 。

比 如：当网页被加载时，可以让文字从右边飞入，当单击这些文字时， 给文字增加边框设置的方法和设置单个动画效果相同（有的动画 不能同时设置） 二、怎样设置网页的过渡效果？ 任务 3 设置首页的过渡效果 任务分析：网页过渡就像幻灯片的切换，从当前的网页转到新 的网页时，可用一些很有趣的方式就行过渡在网页中设置了“网 页过渡”效果后，在浏览器中打开或关闭网页或打开或关闭站点时， 就可以看到网页的过渡效果了 动手实践 ① 打开 index.htm 文件，单击“格式”菜单中“网页过渡”选 项，打开如图 8.41 所示的“网页过渡”对话框 ② 在“事件”的下拉列表框中，设置“网页过渡”效果发生的 事件为“离开网页” 提示：可以选择的事件有：进入网页、离开网页、进入站点、 离开站点在浏览时，当遇到符合设置的情况时，就会出现“网页 过渡”效果 ③ 在“过渡效果”中设置过渡的效果为“圆形收缩” ，过渡效 果持续的时间为 2 秒 ④ 在预览状态下，单击“软件下载” ，就可以看到如图 8.42 所 示网页的过渡效果注意：对于一个网页可以设置多个“网页过渡”效果例如可 以为进入网页设置一个过渡效果，也可以为“离开网页”时设置另 一个过渡效果，这样进入或离开网页时都会出现“网页过渡”效果。

知识窗如果在同一时刻有两个网页过渡效果都满足发生的条件，那么 只用第一个网页效果能显示出来例如设置了第一个网页 A 的过渡 效果发生的事件为“离开网页” ，第二个网页 B 的过渡效果发生的事件为“进入网页” 当从网页 A 进入网页 B 时，这两个网页的过 渡效果都满足发生的条件，但只有网页 A 的过渡效果能显示出来归纳总结 这一节讲了 FrontPage 中能方便实现的几种动画效果，它们是：① 悬停按钮当鼠标放到悬停按钮上时，会出现我们设定的变 化如变化颜色、背景图片等等 ② 字幕它能实现文字在屏幕上的滚动，就像火车站的提示牌 一样它适合用来显示一些想引起人们注意的内容 ③ DHTML 动画通过事件来引发动画可以引发 DHTML 动画的 事件有：网页的加载和关闭时、在目标上鼠标悬停时、在目标上单 击鼠标时当然，不同的事件可以引发的动画类型不一定相同 ④ 网页的滚动效果就像幻灯片切换一样，在网页中也可以设 置网页的切换效果 知识拓展 在网页中使用横幅广告管理器 看过街头旋转的大型广告板吗？它能循环地显示几幅不同的广 告横幅广告管理器就是 WWW 上的旋转广告 选择“插入”→“组件”→“横幅广告管理器…”菜单，打开 “横幅广告管理器属性”对话框，如图 8.43 所示。

单击“添加…”按钮，打开“选择文件”对话框，选择要添加 到横幅广告中的图片选中的文件会在“显示图片”下的空白框中 显示路径和文件名在 FrontPage 2000 中最多可以添加 9 幅图片 利用右边的按钮可以调整图片的位置或删除选中的图片 在对话框的上部可以设置横幅广告管理器的大小，每幅图片显 示的时间和图片之间的过渡效果，设置完成后单击“确定”按钮 在网页中加入其他动画的方法 （1）使用 Java 等编程语言制作的小程序 比如下面的一段小程序可以让你的网页自动地向上滚动→ 教学记录。