网页设计类之层的制作Word文档下载推荐.docx

网页设计类之层的制作Word文档下载推荐.docx

《网页设计类之层的制作Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《网页设计类之层的制作Word文档下载推荐.docx（6页珍藏版）》请在冰豆网上搜索。

●选择“窗口”→“插入”，打开“插入”面板，在“布局”子面板上单击“描绘层”的图标

，然后释放鼠标，鼠标将会变成一个小十字形状，拖动鼠标在页面中绘制一个矩形框，这就创建了一个层。

●拖动插入面板中“布局”子面板中的

按钮到编辑页面中就可以插入一个层。

●如果需要画多个层，在单击“布局”面板上“描绘层”的图标时，按住Ctrl键，在文档窗口中画出一个层，只要不释放Ctrl键，就可以连续画多个层。

插入层后，会有一个层标志显示在文档窗口的左上方，如图2所示。

如果没有看见层标志，则选择“查看”→“可视化助理”→“不可见元素”命令，即可在文档窗口的左上方显示层标志。

2.图2在文档中插入一个层

单击层的边缘或层左上角的层把手，如图3所示，可以选取层，接着在属性面板中，可以对层的各项属性进行设置，如图4所示。

3.图3单击层的边缘或层左上角的层把手

4.图4图层的属性面板

“层编号”表示浮动图层名称，若要使用“行为”或其他程序来控制图层时，可在此输入图层的名字；

在“左”和“上”编辑框中，设置图层相对于页面或其父层左上角的位置；

在“宽”和“高”编辑框中，设置图层的宽度和高度；

“Z轴”表示当图层重叠时，用以设置图层的前后排列顺序，数值越大图层的顺序越靠前；

在“显示”下拉列表中，设置图层的可见性。

使用脚本语言可以控制图层的动态显示或隐藏。

其中包含如下选项：

default：

不指明图层的可见性，但大多数浏览器都会继承该图层的父层的可见性。

inherit（继承）：

可以继承其父层的可见性。

Visible：

可以显示图层及其包含的内容，无论其父层是否可见。

Hidden：

可以隐藏图层及其包含的内容，无论其父层是否可见。

在“背景图象”编辑框中，输入图层背景图像的名称和路径；

单击“背景颜色”按钮，设置图层的背景颜色；

在“标签”下拉列表框中选择用于创建图层的标记，以指定当前层是CSS层或者是Netscape层；

在“溢出”下拉列表框中，选择当图层中的内容超出图层尺寸时如何处理。

包括如下选项：

图层内容超出图层的范围时，可自动增加层尺寸。

图层内容超出图层的范围时，保持图层尺寸不变，隐藏超出部分内容。

Scroll：

图层内容无论是否超出图层的范围时，都自动增加滚动条。

Auto：

图层内容超出层的范围时，自动增加滚动条（默认）。

在“剪辑”选项组的左、上、右、下编辑框中，分别设置图层的可视区域，它们分别表示可视区域与图层边界之间的像素值。

2、调整图层的尺寸及位置

用鼠标在图层中间点击一下，使光标显示在图层上，然后在图层上插入我们已经做好的图片，当图片插入图层内时，可根据图片的大小来调节图层的尺寸，如图5所示。

5.图5调节层的尺寸

3、改变层的重叠顺序

要在层中插入文字，单击插入面板上的

按钮，在主图的图层上拖拽出一个新的图层，把光标放在层内，输入文字“汽车飞驰”，并设置字体为新宋体、字号为7、字体颜色为#FFFFFF（白色），这时标题制作就完成了。

按Enter键输入“卡通动画、电脑游戏”两个栏目名称，并设置字体和字号为默认值，字体颜色为白色，并且在栏目名称的前面插入两个图标，适当调整位置，将“页面属性”中的背景设置为“#999999”。

这时，网页基本样子已经显示出来，因为文字和图片图层是相互重叠的，所以最后还要设置一下图层的重叠顺序。

在“层”属性中，“Z轴”值决定了层在浏览器中的排列顺序，按照实例主图图层应该在最下面一层，我们选中主图所在的图层，属性面板显示的即是这一图层的属性，在“Z轴”编辑框中填入1，用同样方法把其他二层分别设置成2、3，因为其他二层不存在重叠情况，所以设置值是可以在2、3中任选一个值填入即可。

按F12键即可可浏览图1所示的页面了。

4、创建嵌套层

除了插入单个层，还可以插入嵌套层。

嵌套层就是在一个层中的层。

使用插入、拖动等方法可以创建嵌套层。

嵌套的层随着父层移动并且继承父层的可见性。

如果需要在网页中插入嵌套层，可执行以下操作之一：

●直接创建嵌套层

首先通过以上介绍的方法在文档窗口中创建一个层，然后将光标放置在该层内，用同样的方法创建新的层。

先创建的一个层称为父层，后在父层内创建的层称为子层。

子层的标志在父层区域的左上方。

选择“窗口”→“其他”→“层”命令，出现层管理面板，在该面板中也可以看出Layer2是Layerl的子层，如图6所示。

6.图6嵌套层和层管理面板

●将已有的多个层变为嵌套层

选择“窗口”→“其他”→“层”命令，调出层管理面板，在此面板内的层列表中将需要作为子层的层选中。

按住Ctrl键将该层拖动到父层上，释放鼠标即可创建嵌套层。

如果需要取消层之间的嵌套关系，把子层从父层中拖出即可。

如果是在文档窗口中，在需要作为子层的层标志上按住鼠标左键，将该层的标志拖动到父层区域内，释放鼠标即可。

嵌套图层中的子图层使用父图层左上角作为它的原点，而不是文档的左上角，这是因为它嵌套在父图层中，具有继承特性。

如果想要改变嵌套子层的位置可以选中子层后用鼠标进行拖动进行粗调，也可以选中子层后用键盘上的光标键进行细微的调整。

5、图层的控制面板

当你的网页里同时使用了很多图层时，可能有的图层隐藏、有的图层重叠，此时要明确检视图层会有一定难度，这时你可以利用图层的控制面板来协助处理。

单击“窗口”→“其它”→“层”选项（快捷键F2），弹出图层控制面板如图7所示。

7.图7图层控制面板

显示／隐藏层：

在图层控制面板中的眼睛部分单击，眼睛睁开

为显示图层，眼睛闭上

为隐藏图层。

双击名称可以修改图层的名称。

单击Z轴数值，你可以输入你希望的图层顺序。

勾选“防止重叠”复选框，则图层将不能重叠，而只能并行排列，如果最后需要将图层转换为表格，请勾选这个选项。

6、转换层和表格

由于早期的一些浏览器不支持层，所以使用层建立的网页需要转换成表格的形式；

同样一些使用表格布局的页面如果希望利用层的灵活性，也需要把表格转换成层。

为此，通过选择“修改”→“转换”→“表格到层”或“层到表格”菜单，用户可方便地在层与表之间相互转换。