让网页动起来(一).docVIP

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