《中文DreamWeaverMX 网页制作教程》课件第10章.pptVIP

*第10章层的应用——“尺寸度量”页面制作10.1层的特性10.2创建与应用层——立体字效果实现10.3层属性设置与操作10.4显示-隐藏层——“尺寸度量”页面的制作

在学习层的应用前，有必要先了解层的特性：

层是一个独立于网页的区块，它允许被放置在网页中的任何位置。

在层中可以放置文本、图像、表单、对象插件，甚至还可以放入其他层，所有可以置于网页中的内容都可以放置于层中。

层可以在网页内容之上或之下浮动，而且可以实现页面元素的重叠。10.1层的特性

由于图层不会受网页排版的约束，因此它可以制作出文字与文字重叠、文字与图形重叠以及图形与图形重叠的效果。下面以图10-1所示的立体字效果为例，讲解创建图层的方法。10.2创建与应用层——立体字效果实现图10-1立体字效果(1)创建第一个图层：在插入面板上选择“布局”分类，在其中的工具栏按钮中选择 “描绘层”按钮，然后在网页编辑窗口中直接拖出一个矩形，第一个层创建完毕。将光标置于层中，输入“立体字效果”字样，将字体颜色设置为灰色作为阴影颜色，为了使效果更明显，可将字体大小设置为36。(2)创建第二个图层：除了以上方法可创建图层外，我们还可以在菜单栏中选择“插入”→“布局对象”→“层”，此时在插入点光标位置的下一行段落上产生一个默认大小的图层。同样，将光标置于层中，输入“立体字效果”字样，将字体大小设置为与图层一中字体的大小相同。

(3)将光标放在图层的框线上，当光标变成指向四个方向的箭头的时候，单击鼠标可选定层。选定层后通过拖动可改变层的位置。我们将第二个图层选中，并拖动到与第一个图层偏离约1～2像素的位置，利用图层一未被图层二遮盖住的部分营造出立体字的阴影效果。

10.3.1选定层

除了在上一节中讲到的将光标放在图层的框线上，单击鼠标选定层以外，我们还可以利用层面板来选定层。在菜单栏中选择“窗口”→“层”，或按下快捷键F2，即可打开如图10-2所示的层面板。在层面板中可以非常清楚地看到页面中的图层，用鼠标单击层面板中要选中的层，在设计视图中该层就被选中了。10.3层属性设置与操作图10-2层面板10.3.2改变层的名称

新建的层默认的名称为“Layer1”、“Layer2”…“LayerN”，如图10-2所示。为了更好地识别每一个层，可以给层取一个有意义的名称，方法如下：选中层后，在层“属性”面板中“层编号”一栏填入层的名称,如图10-3所示。注意，层名只能使用标准字母或数字，不能使用如空格、连字符、句号等特殊字符。

图10-3在层“属性”面板中为层编号10.3.3调节层的大小

调节单个层的大小，可在选中层后，拖动层边框上的控制手柄或直接在“属性”面板中“宽”和“高”一栏输入。而调整多个层使它们的大小一致，可在选中多个层后，在菜单栏中选择“修改”→“对齐”→“设成宽度相同”或“设成高度相同”。在“对齐”子菜单项中，还可以设置多个层的对齐方式。10.3.4移动层的位置

在“立体字效果”实现的过程中，我们已经利用了选定层后的鼠标拖动来调节层的位置。除此之外，选中层后利用键盘方向键可以微调层的位置，每按一次，层将以1像素为单位移动，利用键盘方向键的同时按下Shift键，则层将每次以10像素的单位移动。10.3.5设置层的背景颜色和背景图像

选中层后，在“属性”面板中有“背景颜色”和“背景图像”两个属性，利用这两个属性，可以设置层的背景颜色和背景图像，方法与我们学过的设置表格背景颜色和背景图像的方法相同。图10-4是调节背景颜色和背景图像后的层。

图10-4调节层的背景颜色和背景图像10.3.6设置层的可见性

为了方便查看网页在不同情形下的显示情况，可对层的可见性进行显示或隐藏的调节。设置层的可见性有以下方法：

方法一：选中层后，在层的“属性”面板中“可见性”一栏中选择，其中“default”表示不设置层的可见性；“inherit”表示继承父级层的可见性；“visible”表示显示层；“hidden”表示隐藏层。方法二：利用图10-2所示的层面板调节层的可见性。打开层面板后，单击需要操作的层所在的行中层名称左边一栏，即单击 所对应的位置，出现 图标表示层是可见的，而 则表示层是不可见的，如图10-5所示。

图10-5在层面板中调节层的可见性10.3.7调整图层叠放顺序

新建图层时，先创建的图层默认为最底层，后创建的图层位于先创建图层之上。需要调整图层的叠放顺序时，可调节“属性”面板中的“Z轴