第8章 叠罗汉的层

《第8章 叠罗汉的层》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第8章叠罗汉的层8.1任务一：轻松利用层布局8.2任务二：实现阴影文字8.3任务三：动态菜单的制作8.4任务四：时间动画8.5任务五：路径动画8.6小结8.1任务一：轻松利用层布局1.创建层由于层是浮动于页面上可以任意被拖动的，就像有轮子的容器，所以在插入层时不需要考虑光标的位置。（1）单击【插入】栏，选择【布局】面板，如图8-2所示。（2）单击菜单中的层按钮。然后将鼠标指针移动到页面中。2.调整层大小如果位置不正确，没关系，随时可以调整。要画多大，其实也无所谓，反正随时可以调整。下一页8.1任务一：轻松利用层布局3.移动层由于层是浮动的，所以我们可

2、以任意移动层的位置。4.插入图像我们可以在表格中插入图像和文字，那么是不是也可以在层中插入图像和文字呢？答案是肯定的。5.插入文字在图层中插入文字和表格的方法相同，可以再新创建一个图层layer2，并在其中直接输入文字，如图8-9所示。下一页上一页8.1任务一：轻松利用层布局6.嵌套层在页面中插入第3个层layer3，效果如图8-10所示。所谓嵌套层就是在一个母层中再创建一个子层，子层嵌套在母层中。嵌套方法有几种，下面我们就来体会一下。（1）将鼠标插入到第3个层中，使用鼠标将布局菜单中的描绘层按钮直接拖动到一个现有的图层中，这样就创建了嵌套的层lay

3、er4，如图8-11所示。下一页上一页8.1任务一：轻松利用层布局（2）将layer4调整大小和位置后，再将鼠标插入到layer3中，拖动一个新的嵌套层，如图8-12所示。（3）同理，我们再插入一些层和嵌套层，改变层的大小和位置，网页的布局效果就差不多了，如图8-13所示。（4）在层中插入准备好的图像和文字，如图8-14所示。下一页上一页8.1任务一：轻松利用层布局7.层控制面板为了很好地管理层，我们现在来介绍层控制面板。8.美化层在表格中可以设置表格的背景图像和背景颜色，这里通过设置层的这些属性美化层。（1）选择layer3，打开属性查看器，单击【

4、背景颜色】按钮，选择你想要的颜色之后，效果如图8-19所示。（2）同样改变其他层的背景颜色或图像，再改变字体的颜色和样式以及对齐方式后，保存文件。返回上一页8.2任务二：实现阴影文字前面介绍了层的一些基本应用，我们已经知道，层具有叠加性。那么，可不可以利用它的这个特性制作出一些网页的效果呢？其实在很多的图像处理软件中，用到比如阴影文字的效果，它利用的是将层叠加起来，让文字稍稍错开，就实现了阴影的效果。其实不必用图像处理软件，Dreamweaver层就能够实现这样的效果。返回8.3任务三：动态菜单的制作下面要制作的动态菜单利用的是层的隐藏属性。首先将菜

5、单隐藏，当鼠标到一定位置时，菜单层显示出来。移开时，层又被隐藏。具体做法如下所述。（1）添加一个层，调整大小和位置，用来承载菜单，如图8-28所示。（2）改变层的背景颜色，这样，当菜单弹出时，不会因为文字重叠，使菜单看不清，如图8-29所示。（3）层中可以插入图像和文字、嵌套层，在此插入表格。下一页8.3任务三：动态菜单的制作（4）在属性查看器中将表格的大小改为高150、宽100。（5）按住Ctrl键，单击【硬件基础】将硬件基础所在的单元格选中。（6）这个菜单中列出的各项是我们可以进行的操作，不过，菜单中的大多数选项都是灰色的，我们没法选择，为什么呢

6、？（7）我们选择IE4.0选项，然后再单击【＋】按钮打开菜单，这时的菜单就有很多项可以选择了，如图8-33所示。下一页上一页8.3任务三：动态菜单的制作（8）选择菜单中的【显示－隐藏层】选项，弹出【显示－隐藏层】对话框，如图8-34所示。（9）单击【确定】按钮，设置完成后行为面板面板发生改变。（10）关于层的显示，设置这些已经可以了。（11）上面的设置还不完整。（12）将这些动作都设置好了之后，再来处理一下这些层的初始状态。（13）保存文件后查看效果，如图8-40所示。返回上一页8.4任务四：时间动画在上面的任务中介绍了怎样利用层的隐藏和显示制作动态

7、下拉菜单，在这里我们将再次利用层的这个特性，制作幻灯片的效果。以前介绍图像的时候，曾经介绍过在页面中插入GIF图像，这种图像其实就是一种动画，它让网页动了起来。这里，我们通过Dreamweaver软件直接创建这样的动画效果，即幻灯片效果。幻灯片的制作原理是，在页面中循环显示一组图像，就像是图像会自己变化一样。可以看到，制作的主页框架上面空空的，那么可以在上面插入几张图像，制作成幻灯片效果。下一页8.4任务四：时间动画（1）准备几张大小一样的图像，将图像存入F:电脑硬件image文件夹中。（2）在页面中插入3个图层layer3，layer4，lay

8、er5（由于我们在这之前制作阴影文字时已经插入两个层），效果如图8-41所示。（3）由于我们将要用到的图像的