第21讲  网页特效-运用行为二
1.1教学目标：
◆ 知识目标
1. 熟练掌握Dreamweaver CS6 新增加的Spry炫目效果。
2. 掌握各自带行为制作页面动态效果。
◆ 技能目标
能运用各自带行为制作页面动态效果
◆ 品质目标
培养学生认真细致、勇于创新的精神
1.2教学重点：
掌握各自带行为制作页面动态效果
1.3 教学难点
掌握各自带行为制作页面动态效果
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：
一、激趣导入，揭示课题
前面我们学习的都是如何制作一个静态的网页，但是我们从网上看到的很多网页都有各种各
样的动态效果，那么是不是我们也能制作出像他们一样的漂亮的网页来呢，没错，不用怀疑，你也可以，接下来我们就来学习如何自己利用dreamweaver自带的行为来实现多种动态页面效果。
二、播放声音(Play Sound)
使用行为中的播放声音动作可以在页面上播放声音。比如打开页面的时候就可以播放声音，或者是鼠标经过图像或者是链接上面时播放声音。浏览器可能需要用某种附加的音频支持（例如音频插件）来播放声音。因此，具有不同插件的不同浏览器所播放声音的效果通常会有所不同。如果给页面添加背景音乐的设置如下。
1．首先打开一个页面文档，在文档左下角的“标签选择器”中选择“ body ”标签，如图4-27所示。
图4-27  选择“ body ”标签
2．打开行为面板，点击“＋”按钮添加行为，选择“播放声音”，如图4-28所示。
图4-28 选择“播放声音”动作
3．选择声音文件，如图4-29所示，一个页面的背景音乐就添加好了。
                        图4-27选择声音文件
4．如果要修改背景音乐属性，在文档中选择背景音乐的图标。如图4-28所示。
图4-28在文档中选择背景音乐的图标
5．在属性检查器中，点击“参数”按钮。如图4-29所示。
                      图4-29点击“参数”按钮
6．修改参数，如图4-30所示。
图4-30修改参数
三、设置导航条图像 (Set Navigator Bar Image)
使用设置导航条图像动作可以将图像转化为导航图像或者改变导航条中图像的显示及动作，或者对图像状态进行更多的控制。
1．首先准备3张长宽相同的图像文件：a.jpg, b.jpg, c.jpg(90*32)，然后在页面中插入一个导航条，在状态图像这栏里通过浏览添加入a.jpg文件，作为打开页面时候导航条显示的图像，如图4-31所示。这个时候行为面板如图4-32所示。
                                                            图4-31 添加导航条
图4-32 添加导航栏后的行为面板
2．在页面中选中导航图像，双击行为面板上的动作，打开“设置导航栏图像”对话框，分别在“鼠标经过图像”和“按下图像”后面加入b.jpg和c.jpg，如图4-33所示。
图4-33 设置导航条属性对话框
1． 最后预览时候可以看到不同的导航图象变化，如图4-34所示。
图4-34  鼠标不同动作时候导航图象的状态
如何制作网页插件四、预先载入图像(Preload Images) 
使用预先载入图像动作载入那些不会立即出现在页面上面的图像到浏览器缓存中，例如那些将通过行为或 JavaScript 换入的图像。这样可以防止图像显示时由于下载导致的延迟，同时也便于脱机浏览。
“交换图像”动作自动预先载入当在“交换图像”对话框中选择“预先载入图像”选项时所有高亮显示的图像，因此当使用“交换图像”时不需要手动添加预先载入图像。
若要使用“预先载入图像”动作，请执行以下操作：
1．首先打开行为面板，在页面上选择“BODY”标签，按“+”选择“预先载入图像”动作，如图4-35所示。单击“浏览”选择要预先载入的图像文件，或在“图像源文件”文本框中输入图像的路径和文件名。按“+”可以增加一个空项，按“—”可删除一个项目。
                 
图4-35 选择要预先载入的图像
2．完成后这个时候可以看到行为面板如图4-35所示。也就是说明浏览器打开页面的同时开始预先载入该图像。
图4-36 添加了预先载入图像行为
五、转到URL (Go To URL)
使用该动作可以在当前窗口或指定框架中，打开一个新的页面。此操作尤其适用于通过一次单击更改两个或多个框架的内容。若要使用“转到 URL”动作，请执行以下操作：
1．首先新建一个页面，在页面上插入一个按钮，可以用图片代替。选中图片打开行为面板，按“+”选择“转到URL”动作，如图4-37所示。
图4-37选择“转到URL”动作
2．打开“转到URL”对话框，如图4-38所示。“打开在”选择页面打开的窗口。默认的是主窗口，如果正在编辑的页面有多个框架，那么在列表中将显示出来，就可以选择在哪个框架中打开页面。在URL处选择要在窗口中转到的页面文件。
图4-38 “转到URL”对话框
“打开在”列表自动列出当前框架集中所有框架的名称以及主窗口。如果没有任何框架，则主窗口是唯一的选项。
注意：如果任何框架命名为 top、blank、self 或 parent，则此动作可能产生意想不到的结果。浏览器有时将这些名称误认为保留的目标名称。
3．设置好以后可以看到行为面板中就增加了一个行为动作，表示单击该图片就打开index.htm页面文件。如图4-39所示。
图4-39 增加了该动作的行为面板
4．如果有多个需要替换文档内容的窗口，则重复上面的操作，直到每个需要替换文档内容的窗口都设置好跳转的URL。
六、拖动层(Drag Layer)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。