Dreamweaver MX 2004网页制作实例教程 作者 彭鹏 第6章 时间轴和行为.pptVIP

第6章 时间轴和行为 学习要点 DreamWeaver中包含了许多行为动作，使用这些行为动作可以方便地制作出很多效果。 行为可以说是Dreamweaver MX 2004中最有特色的功能，它可以让设计者不用书写一行Javascript代码即可实现多种动态网页效果。 行为的关键在于Dreamweaver MX 2004中提供了很多动作，其实就是标准的Javascript程序，每个动作可以完成特定的任务。 这样，如果所需要的功能在这些动作中，那么就不需要自己编写Javascript程序。本章的学习目的就是了解掌握宏的使用方法。 6.1　时间轴和行为基础知识 6.1.1 时间线的概念 使用时间线（Timelines）面板可以制作动画，还可以改变一幅图片的源文件，以及在指定的时间执行行为。 动态HTML（即DHTML）允许用脚本语言改变样式或定位属性。 时间线使用动态HTML改变层的属性，也可以随时间变化改变一系列帧中图像的属性。 使用时间线，无需再使用ActiveX控件、插件或Java小程序就可以创建生动的动画。 6.1.2 行为的概念 行为是由事件和动作两部分组成的。 例如，当用户把鼠标移动至一张图片上时（这被称为一个事件），这个图片会发生预定义好的变化（这被称为是动作）。 6.1.3 常用行为 1．交换图像 2．恢复交换图像 3．打开浏览器窗口 4．拖动层 5．显示－隐藏层 6．显示/隐藏弹出式菜单 7．检查浏览器 8．检查表单 9．调用Javascript 6.2　常用行为范例 （1）在Photoshop中制作如图6-8所示图片选择切割工具 并且按照如图6-8所示的方式进行切割。 （2）在Photoshop中选择菜单“文件/存储为Web所用格式” 。 （3）打开“存储为Web所用格式”对话框。 （4）单击“保存”按钮，弹出“保存为”对话框。设置文件名“web2”，单击“保存”按钮。 （5）将所有图片从图片转换到背景图片。 （6）按Shift+F4组合键打开行为面板，行为面板。 （7）单击“添加行为” 按钮，并且在弹出菜单中选择“弹出信息” 。 （8）打开“弹出信息”对话框，在“消息”对话框中填写文字“这个就是弹出消息哦”。 （9）完成后行为面板产生一个新的行为，单击左边的Onload可以为行为设置激活方式，这里设置为OnLoad。 （10）单击“添加行为” 按钮，在弹出的菜单中选择“打开浏览窗口” 。 （11）打开“打开浏览器窗口”对话框。 （12）设置“要显示的 URL”为将要在新窗口中打开的页面，这里填写“guanggao.htm” 。 （13）设置窗口宽度为300像素，高度为164像素，窗口名称为“广告”。 （14）单击“添加行为” 按钮，并且在弹出菜单中选择“播放声音” 。 （15）打开“播放声音”对话框。 （16）单击“浏览”按钮，选择文件“test.mid”，更改“相对于”选项为相对站单击根目录。 （17）单击“确定”按钮后，行为面板里产生新的行为“播放声音” 。 6.3　图片探照灯效果的制作 （1）制作或打开已有的一幅图片。 （2）在图形软件中制作一个圆形探灯。 （3）打开DreamWeaver，选择菜单“文件/新建”命令新建html网页文件tanzhao.htm 。 （4）设置图层位置为左0、右300、上0、下200，溢出设置为hidden。 （5）插入图层layer2，选择代码窗口，将图层layer2的代码剪切，然后粘贴在图层layer1的div标记内。 （6）切换回设计者窗口，选择图层layer2，在属性面板设置layer2宽度为600，高度为400。设置坐标为左-150，上-100 。 （7）在layer2图层插入一个和图层layer2一样大小的表格，在表格插入探照灯图片。 （8）切换到代码模式，将layer2的代码修改为div id=Layer2 style=filter:mask(color=black) alpha(opacity=80);position:absolute; width:600px; height:400px; z-index:2; left: -150px;top: -100px 。 （9）设置图层layer1背景图片为事先制作的bg01.jpg。 （10）为了使探照灯具有层次感，再给探照灯图片light.gif加个alpha滤镜,style取值2，即圆形。 （11）选择菜单“窗口/时间轴”命令，打开时间轴面板。 （12）选择图层layer2，