《网页设计与制作 教学课件 ppt 作者 李云程 主编 李亮 周光明 副主编第10章》由会员分享，可在线阅读，更多相关《网页设计与制作 教学课件 ppt 作者 李云程 主编 李亮 周光明 副主编第10章（7页珍藏版）》请在金锄头文库上搜索。
1、,第10章 行为,行为是Dreamweaver MX中最为激动人心的一部分 。,所谓添加行为就是使用所见即所得的方式来添加一些已经封装好JavaScript 脚本程序的常用功能 。,一个行为是由一个事件和一个动作构成的。,我们可在Behavors 行为面板中找到这些由封装好的JavaScript代码完成的功能选项。,显示行为面板,这里详细介绍各个选项所对应的动作和行为面板中的各个事件。,操作步骤,1.单击选择菜单窗 口/行为。,2. 在弹出的行为中选择+按钮，则会显示选项。,3.在诸多选项中选择显示事件/IE6.0 。,在Dreamweaver MX中，所有的行为都集中在Behaviors行为
2、面板上 。,示例效果,10.1 行为面板介绍,4.此时再次单击+按钮，则原来灰掉的选项现在显示出来了。,案例 为网页增加声音,制作要求： 通过Play Sound 播放声音行为，不用写代码，实现在浏览网页时播放声音的效果。,制作步骤,1.准备声音文件(mid、wav、ra、rm)并新建网页 。,2.设置播放声音动作 。打开Behavior行为面板，单击面板上的“+”按钮，选择播放声音。,3. 修改事件为onLoad ，浏览该页面即可听到声音。 若为背景音乐则添加参数hidden为true。,在网页中加入适当的音乐，会极大地增强页面的效果，给人以耳目一新的感觉。,示例效果,10.2 播放声音,1
3、0.3 弹出消息窗口,有些网站，一进入首页或某个页面立刻弹出一个消息窗口 。通常在这样的窗口里会显示一些注意事项、警告、公告等提示信息。,案例 制作弹出式消息窗口,制作要求： 一进入首页或某个页面立刻弹出一个消息窗口，显示 夜深人静，小心火,制作步骤,1.在网页中插入层，然后在其中插入gif动画图像。,2. 添加Timelines（时间线） 。,3. 在Timelines时间线中创建动画的两个关键帧 。,示例效果,选择菜单Window/ Other /Timelines选项，打开Timelines工具栏。,拖动页面中的层将其拖动到Timelines中的第一个通道 ，随之出现紫色条，并在两端有两
4、个小圆圈，这两个小圆圈代表Timelines的两个关键帧 。,关键帧是指动画条中某个对象指定了位置的帧，关键帧在创建Timelines动画的过程中非常重要。,4. 设置动画的起、止位置。,单击Timelines中左边第个小圆圈，可看见红色位置标记移动到第帧。然后在页面编辑窗口中将层移动到页面的最左端，即动画的起点位置。,接下来单击Timelines中紫色条右侧末尾的关键帧小圆圈，将看见红色位置标移动到最后帧，然后在页面编辑窗口中将层拖动至页面的最右端，即动画的终点位置。,5. 增加动画帧数和添加关键帧。,拖动时间线动画条的最末帧标记，将Timeline增加到60帧。与动画播放速度有关。,将红色
5、的位置标记移动到需要添加关键帧的地方，按住Ctrl键，此时鼠标指针变成一个小白圆圈，将这个小白圆圈在位置标记处单击，即可添加一个关键帧。,9.3 能飞的鸟,制作步骤,6.设置动画路径为曲线。,7. 添加鸟飞回的动画 。,总结：如果页面有许多动作，可以创建个Timelines时间线来控制所有的动作。但是这样做很不方便，实际上可以通过创建多个Timeline的方法来控制多个动作。使用这种方法可以将些复杂的动作分解，这样控制起来就更加方便了。在这个案例中，我们通过两个Timline来控制鸟飞翔的动作。利用层，结合时间线和行为动作可以创建很多特别的效果。,选中所添加的某个关键帧，然后按住Ctrl键在页
6、面中拖动层图像上或下移，即可见到路径变成曲线。,在页面中再插入另个层并插入一幅反向飞的鸟图像，并将该图层拖动到时间线的通道2上，方法同前制作相反方向动画。,9.4 动态下拉菜单,学习在网页中创建动态下拉菜单，就象WINDOWS窗口的菜单一样，当鼠标单击或鼠标放在主菜单上时，就显示下拉菜单来。,案例 制作下拉菜单,制作要求： 本例在网页中单击新闻、体育、科技时，显示动态下拉菜单。（自己完成当选择其中的选项时，链接到新的网页信息。）,制作步骤,1.在页面的上方插入一个层layer1, 并在层layer1中插入一个一行四列的表格，然后在表格中添加主菜单文字。,2.在页面中插入图层layer2 ，将其
7、放在第一个主菜单的下面，在层中插入一行一列的表格，并在表格中输入相应的子菜单文字，然后设置其显示属性为隐藏。,3.添加行为动作 。,示例效果,其原理是利用层的显示和隐藏动作。,先选中主菜单中的文字如“新闻”，打开行为面板，单击“+”添加“Show-Hide Layers”行为，在弹出的窗口中，选中layer2，单击Show按钮。,9.4 动态下拉菜单,制作步骤,4.在事件选项选择onClick，表示当鼠标单击主菜单文字时，弹出层layer2。,5.选中层layer2，设置其为hide隐藏。并在事件选项中选择onMouseout，表示当鼠标离开层layer2时，就隐藏层layer2。,6. 同样添加其它菜单。,总结：利用层的隐藏和显示属性，实现动态菜单是一件容易的事情。我们还可将触发的事件换为onMouseover或其它的事件，如果事件为onMouseover时，表示当鼠标放在主菜单上时，就会显示出层（即子菜单）。,
