第7章　网页中层的应用

层的概念
　　层的应用可以给网页增加很多传统网页中难以实现的功能。你看现在多数网页中应用该技术的还不太多，相信大家都看到层的特殊效果后，都会喜欢使用层来作网页布局的。学会这一章，你会发现我们还要“超前”一步呢，让高手也羡慕我们一回吗。
　　在“插入”工具条中选择“布局”标签，可看到如下图工具：
　　
　　左边第二个按钮是“描绘层”工具。如果该按钮是暗的，是当前处于“布局视图”状态，选择“标准视图”即可。
　　选择“描绘层”工具后，用鼠标在编辑区绘制一个矩形，即建立了一个“层”。如下图：
　　
　　左上角一个中间有小“c”字的小图标称做“层锚记”，“层锚记”在浏览器中并不显示，只在编辑区里可以看到。单击它可以选择该“层”。层被选中后，周围被线框包围，并出现8个小方块，拖动小方块可以改变层的尺寸。线框左上角上方有一个小线框，鼠标指针移动到小线框上后会变成“＋”字箭头形状，按下左键可拖动整个层移动到编辑区任意位置。
　　在层中单击，鼠标指针定位在层内，输入文字或插入其他对象，被插入元素即属于该层的元素，这些元素将随层的移动而移动。
　　在层被选中时，下面的属性面板中即显示层的属性。如下图：
　　
　　“层编号”下面框中是层的名字，在没有给层重新命名时默认是“Layer1”，你可以重新输入名字。“左”“上”两框中分别是层与页面边界的距离。“宽”“高”框中是层的大小。这些框中的数字是与编辑区中层的调整相同步的。就是说用鼠标拖动层改变尺寸或移动位置时，框里数字同时改变，在框中重新输入数字时，编辑区里的层也随着改变。
　　“显示”框中可以选择该层是可见的还是隐藏的。隐藏起来不能看得见，好像没有什么意思，不让人看见要这层做什么。这个框还是不管他吧。
　　下面“溢出”框中有四项选择:
(1)“visible”如果层内元素尺寸超出层尺寸，超出部分仍然显示；
(2)“hidden”如果层内元素尺寸超出层尺寸，超出部分不显示；
(3)“scroll”在层右边和下边出现滚动条，如层内元素显示不完全，可拉动滚动条浏览；
(4)“auto”根据层内元素尺寸自动判断是否出现滚动条。
　　这4项就根据你的需要选择啦。
　　以前不是常有朋友埋怨图片放不到合适位置吗，好了，现在把图片放到“层”中，你把层拖到哪里它就住在哪里了。应用层，我们还可发把多重元素重叠放置。试下面操作。
　　建立一个层，把光标放在层内，插入一幅图片。再建立一个层，插入一幅有透明背景的“.gif”图片，拖动第二层，放在第一层上面适当位置，如下图：
　　
　　再设置上背景平铺，保存后，用浏览器浏览如下。


层的编辑与应用
　　人们看层的属性面板中，除了“宽、高”外还多了一项“z轴”，如下图：
　　
　　网页是平面的，怎么还有z轴呢？正是这个z轴才能使我们的页面成了立体的空间。z轴的方向就是从页面向着观众的垂直方向，数值越大就是离观众越“近”。最下层z轴数值为“1”，数值为“2”的层在“1”的上层，就是说可以遮盖“1”层的内容，如果你将“1”层z轴的值改为“3”，它便可以遮盖“2”层的内容了。
　　背景图像和背景颜色选项，和页面背景选择方法一样，只是这里选择仅对于该层的范围。
　　下面再说一下“剪辑”栏。如果层中放的是图像的话，还可以通过“剪辑”对图像修改。左、右、上、下分别为剪辑的值。其中如果在左框中输入一个值的话，右框中出现“auto”，也会自动剪去同样的宽度，同样在上框中输入值时，下边也自动剪去同样高度。如果不希望“自动”的话，请在框中输入需要的值。
　　如下面网页中两幅带边框的图片，我想把它们合并到一个框内。左边的放在第一层，右边的放在第二层。图片宽度255，边框宽度15，于是在第一层右边剪去15像素的宽度，255剪去15当然右边就是从240开始剪，就在右框中输入240，如上面面板图中所示。因图片不透明，右边的就不用剪了，把第一层的z轴值改为“3”，重叠在右边的层上，把右图边框盖住就行了。


层的运动
　　层可以在网页中运动，运动的概念包括两种数据，一是距离，二是时间。层运动就是层在一定时间内移动一定距离。距离这个概念在页面中很直观，时间如何在页面中表现，这就要用到“时间轴”。
　　选择“窗口→其它→时间轴”或者按[Alt+F9]键可打开“时间轴”面板。
　　时间轴中左边一竖排数字“1、2、3……”表示层，每一层横向一排小格格叫做“帧”，这个帧是时间单位。按默认值说每秒播放“15”帧，即每帧 1/15秒。
　　时间轴是针对层的，也就是只有层才能加载到时间轴中，有运动的元素必需放到层中才能运动。所以我们要建立一个层，把要运动的对象放在层中。我们将“层”加载到时间轴中，方法有两种，：
方法1、选中层，在时间轴中上相应帧处击右键，在弹出菜单中选择“添加对象”；
方法2、鼠标点击层标志，拖曳到时间轴相应帧。
　　时间轴上加载层后如下图：
　　
　　从图中可以看出，从第一帧到15帧出现一条蓝色横线，并在第1帧和15帧中分别有一个小圆圈，这有小圆圈的帧称“关键帧”，这小圆点叫“关键帧标记”。中间没有关键帧标记的帧称做普通帧。我们可以在关键帧定义层的位置，普通帧中层的位置由系统自动安排。系统自动生成15帧的时间轴长度，也就是完成1秒时间内的运动。
　　拖动第15帧的小圆点左右移动可以改变时间轴长度。试把关键帧拖到100帧就可看到蓝线长度变成100帧了。在50帧处单击鼠标右键，在弹出菜单中选择“增加关键帧”，第50帧处也出现了关键帧标记。选择第50帧，在编辑区将层移动一段距离，即可实现该层在7秒内移动一段距离后又返回原处的运动(100帧在原处)。当然要实现运动，还要选中“自动播放”，如果需要反复播放，还要同时选择“循环”项。选择“循环”项后，在最后关键帧右上角出现一个蓝色小方格，中间有一横线，这是循环返回点标记，这一小格可以用鼠标拖动，拖放在某处，循环时就从该点返回。在两个关键帧之间层成直线运动，如果再在第25、75帧处添加关键帧，在相应关键帧把层上移或下移，可实现层沿孤线运动。当然在其他位置还可再添加关键帧和移动层的位置，你可根据需要操作。


层的嵌套
　　在编辑区建立两个层，两个层可以交叉重叠，也可以分开排放。不管两个层放在什么位置，可以看到两个“层锚记”是并列排放的，表示它们之间是并列关系。如下图：
　　
　　如果拖动一个层的“层锚记”放到另一个层中，这两个层称嵌套关系。两个层嵌套，不仅可以一层的区域放在另一个层的区域内，也可以放在另一个层的区域外，只要“层锚记”在另一层区域内，就属于嵌套。
　　
　　第2层的“层锚记”放在第1层内，第2层称做第1层的“子层”，第1层称做第2层的“父层”。子层的各种属性改变对父层没有任何影响，而父层属性的改变一般会传递给子层。试用鼠标拖动子层，看父层并不移动，拖动父层移动一段距离，子层也相应移动同样距离，不管子层是否在父层区域以内。 把子层的“层锚记”拖到父层的区域外，就解除了嵌套关系。
　　下面试建立两个层，第一层名字输入“c1”，第2层名字输入“c2”，两个层中各插入一个小动画，把“c2”的层锚记拖到“c1”层区域内。把“c2”层放到“c1”层左边。
　　打开时间轴，选中“c2”层，在时间轴第1帧选择“添加对象”，把时间轴拉长到160帧，在第40、80、120帧处分别添加关键帧。选择第40帧，将“c2”移动到“c1”右边，选择第120帧，将“c2”移动到“c1”右边。选中“自动播放”和“循环”项，保存文件，浏览时可看到“c2”层的图像在“c1”层图像前面左右来回移动。
　　下面再选择“c1”层，在时间轴第1帧选择“添加对象”，可看到时间轴上又出现一条蓝线，也就是又添加一层，同样拉长到16帧，在80帧添加关键帧，在80帧处将“c1”移动一段距离。再在40、120帧添加关键帧，在这两帧上分别将“c1”上下移动一段距离，可看到如下动画。


用层布局网页
　　学了层的操作，以前好些网友说页面中的图像、文字都放不到合适的地方这个问题，现在感到很好解决了吧。在“层”没有问世以前，很多复杂的排版都是只能依靠很多嵌套的表格来实现。现在人们才知道，用层来布局页面更简单、更方便、更灵活。掌握了层的方法，再不用为复杂的布局发愁了。
　　看下面的例子：

　　这个页上面头部标题是一个层，宽度780高度90像素，设置层背景使用图片。中间文字标题用了阴影滤镜。
　　下面接着建立两个并列的层，左边的层设置自动出现滚动条。右边的层中又嵌套十个子层，每个子层放一幅图片和文字说明。
　　最下面横条也是一个用背景图片的层，中间写上作者和版权声明等。
　　有时看起来好麻烦的事，现在使用了层，就可轻松实现了。但我们看到层的强大功能时，还要认识一下层的代码。在 DW 的编辑版面中，因为有窗口限制、工具面板和页面标记的影响，依靠视觉对层的定位往往会出现不太准确现象，我们了解了层的代码，就可以不用进入DW的编辑版面，在浏览时随时进行修改。
　　我们在浏览有层的网页时，选择菜单“查看→源文件”，就可以看到层代码。如上面网页中头部标题所在层的代码如下：
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:781px; height:88px; z-index:1; background-image: url(img/mwbj.jpg); layer-background-image: url(img/mwbj.jpg); border: 1px none #000000;"> ……………… 　……………… </div>

　　层的定义从<div 开始，到</div>结束。中间我画的两行小点表示该层的内容当然也可以有很多行。下面我们分析<div 标签里的内容。
id="Layer1"表示这是建立的第一个层，如果你给层重新命名的话，就是你命名的名字；
style="position:absolute;表示层以绝对位置定位；
left:0px;表示该层距离左边界是0个像素，就是靠在左边界；
top:0px;表示层距离上边界0个像素，就是靠在顶部；
width:781px; height:88px;是该层的宽度和高度；
z-index:1;表示z轴在第一层；
后面是背景图像的地址。如果没有设置背景图像，就不再有后面的代码。
　　我们再看左边层的代码：
<div id="Layer2" style="position:absolute; left:6px; top:92px; width:240px; height:1000px; z-index:2; overflow: auto; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000;">
…………
…………
…………
</div>
　　从上面可以看到，该层是第二层，左边界6个像素，距离顶部92像素，宽度240像素，高度1000像素，z轴值为2 ，“overflow: auto;”自动出现滚动条，再后面代码是背景颜色。
　　大家知道了这些代码的意义，你只要改动相应的数值，就可以改变层的布局。