实训八 行为和图层的应用.doc

实训八 行为和图层的应用课时：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、 新建一个文档，打开“属性面板”，单击“页面属性”按钮，将该网页的背景图像设为“1.jpg”（热带鱼图像）。注意：该图像的大小为800600，所以设为背景图像时会呈现平铺的效果。2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“绘制层”按钮，在网页的右边绘制一个层layer1。3、 将光标定位在layer1层内，选择插入/图像菜单，将图像41.jpg（“海底世界”四个字图像）插入带该层，调整层的大小，使之适应图像的大小。4、 单击“绘制层”按钮，在网页的左边绘制一个层layer2；将光标定位在layer2层内，选择插入图像菜单，将图像37732.gif（“金庸群侠传3”图像）插入该层，调整层的大小，使之适应图像的大小。5、 选择窗口/时间轴，调出“时间轴面板”。6、 在文档窗口选中layer2层，将该层拖到时间轴上的第1帧，选择最后一帧，将layer2层拖到网页窗口的右上角，同时将最后一帧的位置拖到第30帧。7、 此时大家会发现该层的运动路径是条直线，现在我们要将其运动路径改为曲线。在时间轴面板上第15帧的位置单击右键，在弹出的快捷菜单中选择“增加关键帧”。8、 单击第15帧，选中layer2层，将其拖到网页窗口的底部中间。9、 勾选时间轴面板上的“自动播放”复选框，会弹出如图所示的对话框，说明网页载入时时间轴动画便开始播放，单击“确定”按钮。10、 勾选时间轴面板上的“自动播放”复选框，会弹出对话框，说明该时间轴动画播放时会循环，单击“确定”按钮。11、 将“Fps”改为“5”，时间轴面板的最终效果图如图所示。12、 按【F12】键，预览。内容2的步骤：1、 新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“插入表格”按钮，插入1行3列，宽度“390px”，边框“0” 的表格。2、 单击每个单元格，打开属性面板，设置单元格宽“130px”，高“30px”。3、 将光标定位在第一个单元格内，选择插入/布局对象/层，将层layer1插入到该单元格中，同时设置该层宽“130px”，高“30px”。4、 将光标定位在layer1层，选择插入/图像，将图像“button-1.gif”插入到layer1层中。5、 重复步骤3、4，在第二个单元格内插入层layer2，将图像“button-2.gif” 插入到layer2层中。6、 重复步骤3、4，在第三个单元格内插入层layer3，将图像“button-3.gif” 插入到layer3层中。7、 将光标定位在layer1层，选择插入/布局对象/层，在layer1层中绘制一个嵌套层layer4。8、 将光标定位在层layer4中，单击“布局”工具栏中的“插入表格”按钮，插入4行1列的表格，在第1个单元格中插入图像“button-11.gif”，第2个单元格中插入图像“button-12.gif”，第3个单元格中插入图像“button-13.gif”，第4个单元格中插入图像“button-14.gif”。9、 将光标定位在layer2层，选择插入/布局对象/层，在layer2层中绘制一个嵌套层layer5。10、 将光标定位在层layer5中，单击“布局”工具栏中的“插入表格”按钮，插入2行1列的表格，在第1个单元格中插入图像“button-21.gif”，第2个单元格中插入图像“button-22.gif”。11、 将光标定位在layer3层，选择插入/布局对象/层，在layer3层中绘制一个嵌套层layer6。12、 将光标定位在层layer6中，单击“布局”工具栏中的“插入表格”按钮，插入3行1列的表格，在第1个单元格中插入图像“button-31.gif”，第2个单元格中插入图像“button-32.gif”， 第3个单元格中插入图像“button-33.gif”，最终效果如图所示。13、 选择窗口/行为，打开“行为”面板如图所示。14、 选中层图像“button-1.gif”，在“行为”面板中单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer4，单击“显示”按钮，再单击“确定”按钮。15、回到“行为”面板，将事件改为“onMouseOver”。16、再单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer4，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。17、选中层图像“button-2.gif”，在“行为”面板中单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer5，单击“显示”按钮，再单击“确定”按钮，回到“行为”面板，将事件改为“onMouseOver”。18、再单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer5，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。19、选中层图像“button-3.gif”，在“行为”面板中单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer6，单击“显示”按钮，再单击“确定”按钮，回到“行为”面板，将事件改为“onMouseOver”。20、再单击“添加行为”按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer6，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。21、单击最外面的表格，打开“属性面板”，将“对齐”改为“居中对齐”，然后分别选中layer4，layer5，layer6，打开“属性面板”，将“可见性”改为“hidden”。22、按【F12】键，预览。内容3的步骤：1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，按住【Crtl】键的同时单击“绘制层”按钮，连续绘制4个层layer1，layer2，layer3，layer4，放置好4个层的位置。2、选择层layer2，layer3，layer4，选择修改/排列顺序/左对齐菜单，设置这3层垂直方向对齐。3、选中层layer1，打开“属性面板”，将“Z轴”改为“5”。4、单击网页空白处，打开“行为”面板。单击“添加行为”按钮，在弹出的菜单中选择“拖动层”，弹出如图所示的对话框。5、单击“基本”选项卡，将“层”设为“layer2”，再单击“高级”选项卡，将“拖动控制点”设为“整个层”,”拖动时”，勾选“将层移至最前，然后”，“恢复Z轴”，如图所示，再单击“确定”按钮。6、回到“行为”面板，将事件改为“onMouseDown”。7、重复步骤4，5，6两次，分别将“层”设为“layer3”，“layer4”即可。8、按【F12】键，预览。内容4的步骤：1、 打开要实现下拉菜单效果的文档。2、 在打开的页面上选择“动画作品”文字，然后在【行为】面板中单击【添加行为】按钮，在弹出的菜单中执行【显示弹出菜单命令】，这样弹出【显示弹出菜单】对话框，在其中的【文本】参数中输入“FLASH MV”，在【链接】参数中输入要链接的文件，这就是下拉菜单的第1个菜单项，然后单击【菜单】参数右边的【添加项】按钮新增一个菜单项，再在文本中输入“广告片头”， 在【链接】参数中输入要链接的文件，这就是下拉菜单的第2个菜单项，一次添加气体菜单项。3、 完成了菜单项的添加后，切换到【外观】选项卡，在对应的面板中设置下拉菜单的字体、大小、颜色、背景颜色等参数。4、 切换到【高级】选项卡，在对应的面板中可以设置下拉菜单边框的厚