WebDesign上机实验指导9-层和行为.doc

实验 层和行为 实验目的和要求 掌握层的创建方法；了解嵌套层以及层与表格之间的转换方法；熟悉“层”面板；掌握在层中插入文本、图形、表格等内容的基本方法；掌握创建和编辑时间轴动画的方法。 掌握在页面中添加行为的基本方法；掌握onMouseOver、onMouseOut等基本事件的使用方法。 二、实验内容 （一）层 创建层和嵌套层； 层与表格之间进行转换； 在层中插入文本、图形、表格； 利用时间轴制作动画。(选作) （二）行为 制作一个具有“播放声音”行为的页面； 制作一个具有“拖动层”行为的页面； 制作一个具有“显示-隐藏层”行为的页面； 制作一个具有“检查浏览器”行为的页面； 制作一个具有“打开浏览器”行为的页面。 （三）JavaScript 1、编写一个具有分支跳转功能的脚本； 2、编写一个具有条件循环功能的脚本。 三、实验步骤示例 （一）制作时间轴动画(CS3及之前版本的Dreamweaver) （参考教材p241-244） 使用关键帧创建层动画的具体步骤如下： （1）在页面中添加层，并在层中插入要漂移的文本或图像，然后将层放置在动画的起点位置。 （2）打开时间轴面板，并选中要创建动画的层。 （3）将层放入到时间轴面板中。 （4）单击动画栏的末帧，将此关键帧拖动到第60帧位置，然后将层移动到动画结束的位置。此时我们会发现在文档窗口中显示有一条从层起始位置到结束位置的连接线，这就是层的运动轨迹。 （5）可以通过添加关键帧的方法，创建曲线运动轨迹。 选择动画栏，执行下面操作之一： 单击动画栏中的某一帧，选择菜单命令“修改”|“时间轴”|“增加关键帧”。 用鼠标右键单击动画栏中的某一帧，然后从快捷菜单中选择“增加关键帧”命令。 按住Ctrl键并单击动画栏中某一帧，在该处添加关键帧。 如果要移除某一关键帧，右键单击该帧，然后从快捷菜单中选择“移除关键帧”命令。 （6）单击增加的关键帧，拖动层使其运动轨迹呈曲线状。重复添加多个关键帧，可创建更复杂的曲线路径。 如果要创建具有复杂路径的动画，采用添加关键帧的方法比较麻烦，此时通过记录层拖动时的路径来创建动画要简便得多。具体操作方法如下： （1）选择要创建动画的层。 （2）将层移动到动画开始的位置。 （3）选择“修改”|“|“录制层路径”菜单命令或者在时间轴快捷菜单中选择该命令。需要说明的是，如果没有层被选择，此菜单项不可用。 （4）在页面中拖动层，创建想要的运动路径。拖运层时鼠标所经过的路径即为层动画的运动轨迹。 （5）释放鼠标后，Dreamweaver将自动向时间轴中添加一个动画栏，同时添加一批相应的关键帧。 时间轴的其它操作 1．改变动画长度和关键帧位置 通过拖动结束帧标记，可以动态调整动画播放时间。拖动时所有关键帧发生移位，保持相互之间的相对位置不变，动画将均匀调整。如果不希望调整其他关键帧，可在拖动时按住Ctrl键。 2．改变动画的起始位置 在时间轴面板中选择一个或多个动画栏（按住Shift键可选择多栏），然后左右拖动可调整动画的起始位置。拖动时注意可以参考动画栏上面的时间轴刻度。需要特别注意的是，拖动时不要把鼠标放置在关键帧位置，否则变为移动关键帧，而不是移动整个动画位置。 3．移动整个动画路径 如果想移动整个动画路径，可单击动画栏上任意非关键帧位置，选中整个动画栏，然后单击层控制柄并拖动，系统将调整所有关键帧的位置。需要说明的是，这种操作的结果是使整个运动路径移位，但并不改变运动轨迹的形状。 4．增加或移除对象 增加对象的最简单方法是选中某个层或图像后直接将其拖动到时间轴面板中，也可在选中对象之后通过快捷菜单命令“添加对象”完成。 如果想从时间轴移除某个对象，首先选中动画栏，然后右击时间轴面板，在弹出的快捷菜单中选择“移除对象”命令即可。注意移除对象并不会删除层或图像，只是从时间轴中删除动画栏。 5．添加或删除帧 选择“修改”|“|“添加帧”或“修改”|“|“移除帧”菜单命令可以在时间轴上添加或者删除帧。 6．设置循环播放次数 当我们选择时间轴面板中的“循环”复选框时，Dreamweaver会自动在动画最后一帧后，插入跳转至第一帧的行为，使时间轴动画可以不断循环播放。 如果希望动画循环若干次而不是无限循环，则可以通过编辑该行为参数来设定循环次数。方法是双击行为通道中的行为标志，打开行为面板进行设置。 （二）使用“拖动层”行为制作拼图游戏页面（参考教材p251-252） 使用“拖动层”动作，可以使页面的层跟随用户的鼠标移动，从而实现某些特殊的页面效果，比如创建拼图游戏、滑块控件和其他可移动的页面元素。 下面以实例的形式介绍该行为的使用： 1. 选择“插入”|“布局对象”|“层”，在文档窗口的设