网络基础知识 第十章

第10章层、Div标签、时间轴层10.1关于层的操作10.2实例──拼图游戏10.3Div标签10.4综合实例──运用层和Div标签布局网页10.5第10章层、Div标签、时间轴【时间轴】面板10.610.1层10.1.1创建层10.1.2选定层10.1.3层属性10.1.4层的默认设置10.1.5【层】面板10.1.1创建层打开文档窗口，可以使用下列3种方法中的任何一种来创建层。将光标置于文档窗口中欲插入层的位置，然后选择主菜单中的【插入】／【布局对象】／【层】命令，插入一个默认的层。将【插入】／【布局】面板上的按钮拖动到文档窗口，插入一个默认的层。单击【插入】／【布局】面板上的按钮，将鼠标光标移至文档窗口中，这时鼠标光标变为十字形，此时拖动鼠标光标画出一个自定义大小的层。10.1.2选定层选定层有如下几种方法。 单击文档中的按钮来选定层。 将光标置于层内，然后在文档窗口底边标签条中选择“<div>”标签。 单击层的边框线。 在【层】面板中单击层的名称。 如果要选定两个以上的层，只要按住Shift键，然后逐个单击层手柄，就将层同时选定了。10.1.3层属性10.1.4层的默认设置10.1.5【层】面板在【层】面板中可以实现以下功能。 将一个层嵌套入另一个层。 选定一个或多个层。 修改层的z轴顺序。 修改可见属性。 禁止层重叠。10.2关于层的操作10.2.1缩放层10.2.2移动层10.2.3对齐层10.2.4层的可见性10.2.5层的z轴顺序10.2.6嵌套层10.2.1缩放层缩放单个层有以下几种方法。 先选定层，然后拖动缩放手柄（层周围出现的小方块）来改变层的尺寸。拖动下手柄改变层的高度，拖动右手柄改变层的宽度，拖动右下角的缩放点同时改变层的宽度和高度。 先选定层，然后按住Ctrl键，每按一次方向键，层就被改变一个像素值。 先选定层，然后同时按住Shift＋Ctrl键，每按一次方向键，层就被改变10个像素值。10.2.2移动层下面介绍几种移动层的方法。 选定层后，鼠标光标靠近缩放手柄时，出现十字箭头，按住鼠标左键拖动鼠标光标，层将跟着鼠标光标的移动而发生位移。 选定层，然后按4个方向键向4个方向移动层。每按一次方向键，将使层移动一个像素值的距离。 选定层，按住Shift键，然后按4个方向键向4个方向移动层。每按一次方向键，将使层移动10个像素值的距离。10.2.3对齐层共有以下4种对齐方式。 【左对齐】：以最后选定的层的左边线为标准，对齐排列层。 【右对齐】：以最后选定的层的右边线为标准，对齐排列层。 【对齐上缘】：以最后选定的层的顶边为标准，对齐排列层。 【对齐下缘】：以最后选定的层的底边为标准，对齐排列层。10.2.4层的可见性层内可以包含所有的网页元素，通过改变层的可见性，就可以控制层内元素的显示与隐藏，可以通过【层】面板，也可以在层的【属性】面板中来改变层的可见性。10.2.5层的z轴顺序层与表格相比，在定位元素方面各有各的优势，但层最大的优势在于可以重叠，而表格只能嵌套。层的重叠为制作一些特殊效果提供了非常方便的途径，而其重叠次序通常是用z轴顺序来表示的。它的意思就是，除了屏幕的x、y坐标之外，逻辑上增加了一个垂直于屏幕的z轴，z轴顺序就好像层在z轴上的坐标值。这个坐标值可正可负，也可以是0，数值大的在最顶层。10.2.6嵌套层层的嵌套和重叠不一样。嵌套的层与父层是有一定关系的，而重叠的层除视觉上会有一些联系外，其他根本没有什么关系。嵌套层之间还存在着继承关系。选定子层，打开其【属性】面板，【显示】选项的下拉列表中有【default】（默认）、【inherit】（继承）、【visible】（可见）和【hidden】（隐藏）4个选项。10.3实例──拼图游戏

本例展示了层的显示、隐藏、浮动等特性，在制作过程中可以看到，层的显示、隐藏、浮动的实现是在“行为”的帮助下完成的。目前还没有完整地对“行为”这一功能进行学习，但这并不影响对层的功能的理解，只要记住“行为”是制作层的显示、隐藏、浮动必不可少的因素就可以了。10.4Div标签

层与Div标签是同一个网页元素不同的表现形态，通过CSS样式使二者可以相互转换。这指的是CSS样式中【定位】分类属性的【绝对】类型，这也是层与Div标签转换的关键“咒语”。10.5综合实例──运用层和Div标签布局网页

本例不但介绍了Div标签与层的使用方法，而且更加深入地介绍了CSS样式的作用。可以说，CSS样式精通与否，是衡量一个网页设计师是否合格的主要指标之一，希望读者在此方面多下功夫，书本的介绍总是不够的，要想熟练掌握还得靠个人的积累与努力。10.6【时间轴】面板10.6.1创建时间轴动画10.6.2录制层路径10.6.3修改时间轴动画10.6.4控制动画播放10.6.5修改关键帧10.6.6添加、删除帧10.6.7用时间轴改变图像与层的属性10.6.8复制、粘贴动画10.6.9创建时间轴动画应注意的问题10.6.1创建时间轴动画时间轴可以通过改变层的位置、大小、可见性及重叠次序来创建动画，也可以改变图像的源文件，因此我们可以用它创建图片幻灯效果。虽然时间轴不能直接改变图像的位置、大小、可见性，但可以将图像添加到层中，然后通过改变层的位置、大小、可见性来达到动画的效果。下面就来创建一个时间轴动画。10.6.2录制层路径如果你需要创建具有复杂运动路径的动画，一个一个地创建关键帧会花费许多时间。还有一种更加高效而简单的方法，即录制层路径功能。10.6.3修改时间轴动画在创建了一个基本的时间轴动画以后，如果对动画还不十分满意，可以对其进行修改，如修改帧数、修改播放时间、添加关键帧、删除帧、修改关键帧等操作，以求达到最好的效果。10.6.4控制动画播放修改动画在网页中存在时间的长短，以达到理想的效果。10.6.5修改关键帧在【时间轴】面板中单击关键帧，然后将其右移或者左移，其他关键帧并不发生改变，这样可以改变该关键帧的发生时间。要移动整个动画路径的位置，首先应选择整个动画条，然后在页面上拖动对象。Dreamweaver可以调整所有关键帧的位置，对整个选中的动画条所做的任何类型的改变都将改变所有的关键帧。10.6.6添加、删除帧打开【时间轴】面板，将播放头移到预添加帧的位置。选择文档窗口下拉菜单中的【修改】／【时间轴】／【添加帧】命令，在播放头右边加入一帧。选择下拉菜单中的【修改】／【时间轴】／【删除帧】命令，在播放头右边删除一帧。选定整个动画条，选择下拉菜单中的【修改】／【时间轴】／【增加关键帧】命令，在当前的播放头位置加入关键帧。选定某关键帧，选择下拉菜单中的【修改】／【时间轴】／【删除关键帧】命令，将当前的关键帧删除。10.6.7用时间轴改变图像与层的属性

除了改变图像的源文件，还可以改变层的可见性和位移，改变层的大小和z轴顺序。要改变层的大小，可以拖动层的大小调整手柄或在【属性】面板的【宽】和【高】选项文本框内输入新的值；要改变层的重叠次序，可以在【Z轴】选项的文本框内输入新的值或用【层】面板来改变当前层的重叠次序。10.6.8复制、粘贴动画在复制、粘贴动画的时侯要注意以下几点。 一个对象的动画条不能重叠，因为同一个层不可能同时在两个位置（也就是说一个图像不能同时有两个不同的源文件）。如果粘贴的动画条与同一对象的另一个动画条重叠，Dreamweaver会自动将选取的动画移动到第1个不重叠的帧。 如果复制了一个层的动画，且新文档包含同名的层，那么Dreamweaver会将动画的属性应用到新文档中已经存在的层中。 如果复制了一个层的动画，且新文档不包含同名的层，那么Dreamweaver会将原始文档中与动画有关的内容全部粘贴。要将粘贴的动画应用到新文档中的另一个层，需要从场景菜单中选择【改变对象】命令，并从弹出菜单中选择第2个层的名称。10.6.9创建时间轴动画应注意的问题（1）当需要改变图像的源文件时，最好将图像放在层中，不要单独改变图像的源文件。（2）如果动画看上去不是很连贯且图像在位置间有跳动时，可以通过拉长动画条使运动效果平滑。（3） 动画中最好不要调用较大的位图，大的位