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

《WebDesign上机实验指导9-层和行为》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、实验层和行为一、实验目的和要求掌握层的创建方法；了解嵌套层以及层与表格之间的转换方法；熟悉“层”面板；掌握在层屮插入文本、图形、表格等内容的基本方法；掌握创建和编辑时间轴动画的方法。掌握在贝面中添加行为的基本方法；掌握onMouseOver>onMouseOut等基本事件的使用方法。二、实验内容（一）层1、创建层和嵌套层;2、层与表格之间进行转换；3、在层中插入文本、图形、表格；4、利用吋间轴制作动画。（选作）（二）行为1、制作一个具有“播放声音”行为的页面；2、制作一个具冇“拖动层”行为的页面；3、制作一个具有“显示■

2、隐藏层”行为的页面;4、制作一个貝有“检查浏览器”行为的页面；5、制作一个具有“打开浏览器”行为的页面。（三）JavaScript1、编写一个具有分支跳转功能的脚本；2、编写一个具有条件循环功能的脚本。三、实验步骤示例（一）制作时间轴动M（CS3及Z前版本的Dreamweaver）（参考教材p241-244）使用关键帧创建层动画的具休步骤如F：（1）在页而中添加层，并在层中插入要漂移的文木或图像，然后将层放置在动画的起点位置。（2）打开时间轴面板,并选中要创建动画的层。（3）将层放入到时间轴血板中。（4）单击动画栏的末帧

3、，将此关键帧拖动到第60帧位宣，然后将层移动到动画结束的位置。此时我们会发现在文档窗口屮显示有一条从层起始位置到结束位置的连接线，这就是层的运动轨迹。c国看险代码弓拆分上1设计标题:无标题文档科阮酿U00,

4、50,1100t150,200,1250,300,350,

5、400,

6、45d,I500-11111111111111111111111111111111111111111]i]1111i]i[]11111111]i[]i、]11111111]11rJB10=nHBm畔百度PH也Q10

7、0%v552x123v4K/1秒▼时间轴Timelinel®®60®Fps15—口自动播放□循环6510152025303540455055OBaidu（5）可以通过添加关键帧的方法，创建曲线运动轨迹。♦选择动画栏，执行下面操作之一：•单击动働栏中的某一•帧，选择菜单命令“修改”1“吋间轴”1“增加关键帧”。•川鼠标右键单击动画栏中的某一帧，然后从快捷菜单屮选择“增加关键帧”命令。•按住Ctrl键并单击动画栏中某一帧，在该处添加关键帧。♦如果要移除某一关键帧，右键单击该帧，然后从快捷菜单屮选择“移除关键帧”命令。（6）单

8、击增加的关键帧，拖动层使具运动轨迹呈Illi线状。重复添加多个关键帧，可创建更复杂的曲线路径。丄代码土拆分暑1设计标题：无标题文档1501

9、ioo~H50~^00^R50,BOO

10、pF]凸Q[100%524x143w6K/1秒▼时间轴TimJZl〔yj[!♦]®旳I(5JFps

11、15

12、□自动播放□循环如果耍创建具有复杂路径的动画，采用添加关键帧的方法比较麻烦，此时通过记录层拖动时的路径来创建动曲要简便得多。具体操作方法如下：（1）选择要创建动画的层。（2）将层移动到动画开始的位置。（3）

13、选择“修改”1“时间轴”1“录制层路径”菜单命令或者在时间轴快捷菜单中选择该命令。需要说明的是，如果没有层被选择，此菜单项不可用。（4）在页而中拖动层，创建想要的运动路径。拖运层吋鼠标所经过的路径即为层动画的运动轨迹。（5）释放鼠标麻，Dreamweaver将白动向时间轴屮添加一个动画栏，同时添加一批相应的关键帧。时间轴的具它操作1.改变动画长度和关键帧位置通过拖动结束帧标记，可以动态调整动個播放时间。拖动时所冇关键帧发生移位，保持相互之间的相对位置不变，动画将均匀调整。如果不希望调整其他关键帧，可在拖动时按住Ctrl键

14、。2.改变动画的起始位置在时间轴面板屮选择一个或多个动画栏（按住Shift键可选择多栏），然后左右拖动可调整动画的起始位置。拖动时注意可以参考动画栏上而的时间轴刻度。需要特别注意的是，拖动时不要把鼠标放置在关键帧位置，否则变为移动关键帧，而不是移动整个动画位置。3.移动整个动画路径如果想移动整个动画路径，可单击动画栏上任意非关键帧位登，选屮整个动曲栏，然示单击层控制柄并拖动，系统将调整所有关键帧的位置。需要说明的是，这种操作的结果是使整个运动路径移位，但并不改变运动轨迹的形状。4.增加或移除对象增加对象的最简单方法是选中

15、某个层或图像后直接将其拖动到时间轴面板中，也可在选中对彖Z后通过快捷菜单命令“添加对彖”完成。如果想从吋I'可轴移除某个对象，首先选中动画栏，然后右击时间轴面板，在弹出的快捷菜单中选择“移除对彖”命令即可。注意移除对彖并不会删除层或图像，只是从时间轴中删除动画栏。1.添加或删除帧选择“修改T时间轴”1“添加帧”或谚改