层的应用
内容:
1、用表格对网页元素进行定位；
2、利用【显示—隐藏层】制作下拉菜单； 3、CSS样式的应用；
4、利用【时间轴】制作飞舞的图像。
网页元素的定位
1、在桌面新建一个以【学号+姓名】命名的文件夹，并将所给索材复制到文件夹内。
2、利用DW创建一个站点，新建一个网页，命名为：index.html。 3、打开“插入”栏中的表格按钮，设计页面布局。
（1）、第一行布局尺寸：一个1行6列的表格，750（宽）×132（高），并对表格中单元格的宽度进行定义（127、124、124、124、124、127）。 （2）、第二行布局尺寸：一个1行6列的表格，750（宽）×425（高），各单元格的尺寸见下图。
1
127×132 124×132 124×132 124×132 124×132 127×132
211×59
81×426
211×153
6×426
211×20
40×426
410×426
2×426
211×194
（3）、在各单元格内插入图片
2
下拉菜单的制作
1、在“园容园貌”菜单下添加一个层，尺寸为：120×80，背景色为：蓝色(#00CCFF)；在层内插入一个1列3行的表格，尺寸为：120×80；在表格内插入文字：校园简介、领导致词、周围环境。
2、利用CSS样式，对插入的文字进行修改。
外观：文字【大小14】；粗细【细体】；颜色【白色】 扩展：滤镜设置为
Glow(Color=#000000,Strength=3)；含义是【光晕文字特效】，【光晕的颜色】为黑色，【光晕的强度】为3。
3、应用【层行为】面板，来设置【层的显示与隐藏】
3
选中“园容园貌”图片（选中对象非常重要），打开【标签编辑器】中的【行为】面板。
4、单击行为面板的“+”按钮，在弹出的下拉菜单中选择【显示—隐藏层】选项。打开【显示—隐藏层】对话框，将层 “layer1”设置为【显示】。
5、点击“确定”后，将行为添加到【行为】面板， 在【行为】面板中将事件设置为：onMouseOver【鼠标在上面】。
设置行为的目的是：当鼠标放在图片上时，层处于显示状态（即下拉菜单显示）。
6、选中“园容园貌”图片，单击“+”按钮，在【显示—隐藏层】对话框中，将层 “layer1”设置为【隐藏】。
7、点击“确定”后，将行为添加到【行为】面板，在【行为】面板中将事件设置为：onMouseOut【鼠标离开】。
4
设置行为的目的是：当鼠标离开图片时，层处于显示隐藏状态（即下拉菜单收起来）。
8、打开【层】面板，双击【显示—隐藏】按钮，隐藏层。（即正常时，该层处于隐藏状态）
9、选中图层“layer1”，对“layer1”重复4～7的操作步骤。
利用时间轴制作飞舞的图像
1、在网页的右下角，插入一个层“layer2”，尺寸为：35×35，并在里面插入一个图片。
2、选择菜单【窗口】|【时间轴】，打开【时间轴面板】。
3、选中图层“layer3”，在时间轴面板的第1帧右键添加对象。单击【确定】后，在时间轴中出现动画条。
4、将动画条拖至120帧。
5、在1～120帧之间插入4个关键帧。分别改变各关键帧的位置。
5
6、在【时间轴面板】上选择【自动播放】，制作完成。
6
因篇幅问题不能全部显示，请点此查看更多更全内容