实践教学教案十七.doc

实验十八项目 行为及其应用 【学 时 数】 2 （ 45 分钟× 2=90 分钟） 【实验内容】 1、弹出菜单的设计； 2、使用行为控制时间轴； 3、使用行用控制层； 【实验参考】 　　 网页设计与制作 科学出版社 　　JavaScript 入门与提高 清华大学出版社 　　 必威体育精装版 HTMLCSS 标准教程 中国青年出版社 　　Dreamweaver MX 标准教程 海洋出版社 　　Adobe 中国网页设计认证师—网页制作教程 电子工业出版社 【实验设备】 　　计算机，投影机 【实验目的】 　　学会运用行为实现网页中的动态效果。 【实验重点】 　　行为对时间轴和层的控制 【实验难点】 　　层的定位 【实验教学方法】 　　1 、工程项目教学法 　　2 、“讲、学、练”相结合： 【实验设计】 　　第一步： 项目一展示。 （ 3 分钟） 　　第二步： 讲解和演示制作 （ 10 分钟） 　　第三步： 学生练习、教师巡回指导 （ 15 分钟） 　　第四步： 讲解和演示项目二 （ 10 分钟） 　　第五步： 学生练习 （ 20 分钟） 　　第六步： 分组考核设计项目三 （ 30 分钟） 　　第七步： 实验小结 （ 2 分钟） 【实验步骤】 　　项目一、 弹出菜单的设计 　　实验操作步骤： 　　1、新建网页，插入一行四列表格，背景颜色为 D2E8C1 ，在表格中插入图片。 　　 　　2、选定第二列中图片，打开行为面板，单击右键，在弹出的窗口中选择显示弹出菜单。 设定菜单内容和格式，保存预览。 　　 　　项目二 使用行为控制时间轴 　　首先演示网页效果，再和学生一起做。 　　实验操作步骤： 　　1、新建网页，插入层 layer1, 宽 426px ，高 344px, 在层中插入图片 001.gif; 　　2、在层 layer1 中插入四个子层， layer2,layer3,layer4,layer5, 在 layer2 中插入图片 an1.gif, 在 layer3 中插入图片 　　an2.gif ，在 layer4 插入图片 an3.gif ，在 layer5 中插入图片 tu002.jpg; 　　3、保存，预览一下。 　　 　　4、按 ALT+F9 打开时间轴，选定 tu002.jpg, 拖到时间轴中。拖动最后一个关键帧到第 25 帧。 　　 　　在第 5 帧、第 10 帧、第 15 帧、第 20 帧、插入关键帧。并将第 5 帧上图片设为 tu003.jpg, 第 10 帧上图片设为 tu004.jpg, 　　第 15 帧上图片设为 tu005.jpg, 第 20 帧上图片设为 tu006.jpg. 　　5、通过行为控制时间轴。 　　选定 an1.gif, 打开行为面板，时间轴 --- à 播放时间轴； 　　 　　选定 an2.gif, 时间轴 --- à 停止时间轴； 　　 　　选定 an3.gif, 时间轴 --- à 转到时间轴帧： 　　 　　保存预览。 　　项目三 使用行用控制层 　　实验步骤： 　　1、新建网页，设置背景颜色为 #D8F8CB; 　　2、插入一行一列表格，宽 910px, 高 74px ，边框为 0, 在第一行第一列插入图片 logo.png 。 　　3、插入三行七列表格， , 宽 910px, 每列宽为 130px 。在第二行单元格中分别插入 1.png,2.png, 　　3.png,4.png,5.png,6.png,7.png ； 4、将光标移到第二行第二列，单击插入 -- à 布局对象 --- à 层 , 当前层的属性面板设置如下： 说明：层定位 　　的技巧 　　当前左、上的设置为空，表示层是以当前单元格的位置定位的，不管在什么分辨率，表格的伸张收缩，层都会相对表格来定位。如果不是将层定位在表格单元格中，层的位置在分辨率调整时会随之发生变化，从而出现网页元素的错位。 　　5、在层上插入四行三列表格，设置如下： 　　 　　6、在第二列中分别输入 　　隐藏浮动面板 　　快速预览网页 　　固定背景图片 　　调整单元格宽度，保存预览。 　　7、调整层的属性为隐藏，通过行为控制菜单的显示。 　　光标移到第三个单元格时，显示层： 　　 　　保存，预览。 　　我们发现，弹出的菜单不能隐藏。下面我们设定光标称到其他栏目时隐藏层。 　　8、分别选中导航栏中图片所在的单元格，设置隐藏层效果。 　　 　　保存预览。我们发现，在导航栏下方移动鼠标时，不能隐藏菜单。 　　9、插入表格一行一列 , 宽 910px, 高 180px, 背景图片 bg.png.. 选定