實训八行为和图层的应用.docVIP

实训八 行为和图层的应用 课时：3 班级：12计算机班 实训日期：2013-4-16 编写时期：2013-4-9 一、实训目的 1、掌握行为的概念； 2、掌握添加、修改和删除行为； 3、掌握 “显示隐藏层”行为的应用； 4、掌握“时间轴”行为的应用； 5、掌握“拖动层”行为的应用； 6、掌握利用行为创建下拉菜单； 二、实训内容 1、浮动广告的制作：制作如图所示的网页，要求网页载入时该广告就在网页上面不断的漂浮，“金庸群侠传3”广告图像移动的位置为：网页窗口的左上角——网页窗口的底部中间—— 2、下拉菜单的制作（1）：制作如图所示的下拉菜单，其中“开发商介绍”下拉菜单项目“华丽房地产”，“成功案例”；“网上看房”下拉菜单项目“样板间”，“效果间”，“价格表”，要求鼠标移动到菜单图像时显示对应的下拉菜单，移出时下拉菜单消失。 3、图像拖动的制作：制作如图所示的网页，要求选中某个水果，可以将该水果放到篮子中，放入篮后就看不见该水果了，图为把苹果放到篮子的效果图。 4、下拉菜单的制作（2）：制作如图所示的下拉菜单。 知识点分解 实训1涉及到的知识点有层和时间轴行为，利用层+时间轴实现动画效果；实训2涉及到知识点有层，层的定位，层的嵌套，显示隐藏层行为，利用表格来实现层的定位，使层显示在文档窗口的正中间，利用层的嵌套实现父层移动子层也随之移动的效果，利用层+显示隐藏层行为实现层的出现还是消失的效果；实训3涉及到的知识点有层和拖动层行为，利用层+拖动层行为实现在物品在网页上的随意拖动。 实训步骤 内容1的步骤： 新建一个文档，打开“属性面板”，单击“页面属性”按钮，将该网页的背景图像设为“1.jpg”（热带鱼图像）。 注意：该图像的大小为800×600，所以设为背景图像时会呈现平铺的效果。 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“绘制层”按钮，在网页的右边绘制一个层layer1。 将光标定位在layer1层内，选择[插入]/[图像]菜单，将图像41.jpg（“海底世界”四个字图像）插入带该层，调整层的大小，使之适应图像的大小。 单击“绘制层”按钮，在网页的左边绘制一个层layer2；将光标定位在layer2层内，选择[插入]\[图像]菜单，将图像37732.gif（“金庸群侠传3”图像）插入该层，调整层的大小，使之适应图像的大小。 选择[窗口]/[时间轴]，调出“时间轴面板”。 在文档窗口选中layer2层，将该层拖到时间轴上的第1帧，选择最后一帧，将layer2层拖到网页窗口的右上角，同时将最后一帧的位置拖到第30帧。 此时大家会发现该层的运动路径是条直线，现在我们要将其运动路径改为曲线。在时间轴面板上第15帧的位置单击右键，在弹出的快捷菜单中选择“增加关键帧”。 单击第15帧，选中layer2层，将其拖到网页窗口的底部中间。 勾选时间轴面板上的“自动播放”复选框，会弹出如图所示的对话框，说明网页载入时时间轴动画便开始播放，单击“确定”按钮。 勾选时间轴面板上的“自动播放”复选框，会弹出对话框，说明该时间轴动画播放时会循环，单击“确定”按钮。 将“Fps”改为“5”，时间轴面板的最终效果图如图所示。 按【F12】键，预览。 内容2的步骤： 新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“插入表格”按钮，插入1行3列，宽度“390px”，边框“0” 的表格。 单击每个单元格，打开属性面板，设置单元格宽“130px”，高“30px”。 将光标定位在第一个单元格内，选择[插入]/[布局对象]/[层]，将层layer1插入到该单元格中，同时设置该层宽“130px”，高“30px”。 将光标定位在layer1层，选择[插入]/[图像]，将图像“button-1.gif”插入到layer1层中。 重复步骤3、4，在第二个单元格内插入层layer2，将图像“button-2.gif” 插入到layer2层中。 重复步骤3、4，在第三个单元格内插入层layer3，将图像“button-3.gif” 插入到layer3层中。 将光标定位在layer1层，选择[插入]/[布局对象]/[层]，在layer1层中绘制一个嵌套层layer4。 将光标定位在层layer4中，单击“布局”工具栏中的“插入表格”按钮，插入4行1列的表格，在第1个单元格中插入图像“button-11.gif”，第2个单元格中插入图像“button-12.gif”，第3个单元格中插入图像“button-13.gif”，第4个单元格中插入图像“button-14.gif”。 将光标定位在layer2层，选择[插入]/[布局对象]/[层]，在layer2层中绘制一个嵌套