5.1层的基本操作 课件 - 2022-2023学年高二下学期（中职）《网页设计与制作》（武汉大学版）

第5章 学习网页布局之层 层的基本操作 5.1 层与表格的转换 5.2 5.1 层的基本操作 5.1.1 创建层 5.1.2 创建嵌套层 5.1.3 激活和选中层 5.1.4 调整层的大小和位置 5.1.5 显示或隐藏层 5.1.6 更改层的重叠顺序 5.1.7 删除层 5.1.8 知识拓展 5.1.1 创建层 层是一种网页元素定位技术，使用层可以精确定位页面元素，可以方便地进行页面布局。层就像含有文字或图片等元素的透明胶片，一张张按顺序叠放在一起，组合起来形成三维效果，使网页具有了空间感。 　　层是被特殊定义的区域，在层中可以输入文本或插入图像，也可以插入其他层、表格、动画等元素，如下图所示。 5.1.1 创建层 1．插入法 　　先将光标放置于要插入层的位置，然后在菜单栏选择“插入”→“布局对象” → “层”命令，则在页面光标位置处出现一个层，如下图所示。对应地，此时在编辑区中出现一个层和一个层标记。 5.1.1 创建层 5.1.1 创建层 　2．拖放法 拖动“布局”选项卡中的“绘制层”按钮，并在需要插入层的位置释放，如下图所示。 5.1.1 创建层 3．绘制法 　　单击“布局”选项卡中的“绘制层”按钮 ，此时光标变为“+”形状，在网页编辑区中选择插入层的位置，拖动鼠标便可绘制一个层。 　　若要连续绘制多个层，则需按住Ctrl键，单击“布局”选项卡中的“绘制层”按钮 ，然后把鼠标移到文档窗口中单击或拖动，即可连续绘制多个层。 5.1.1 创建层 显示或隐藏层代码标记，可以选择 “查看”菜单“可视化助理”“不可见元素”命令。 显示或隐藏层边框，可以选择“查看”菜单“可视化助理”“层外框”命令。 5.1.1 创建层 5.1.2 创建嵌套层 创建嵌套层就是在一个层内插入另外的层。嵌套层可称为子层，包含嵌套层的那个层称为父层，嵌套层的属性与上一级层的属性有一定的继承关系。 　　方法1：创建嵌套层首先要在文档中插入一个层，将光标移到已建好的层中，继续插入层，则在已建的层中插入一个嵌套层，如下图所示。 5.1.2 创建嵌套层 方法2：打开“层”面板，从中选择需要嵌套的层。此时，在按住Ctrl键的同时把要作为子层的层拖动到要设定为父层的层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样就转换为嵌套层了，父层移动时，子层也会同时移动。 5.1.2 创建嵌套层 5.1.2 创建嵌套层 5.1.3 激活和选中层 层在被激活后，才能插入文本、图像、表格等网页元素。 　　1．激活层的方法 2．选择层的方法 5.1.4 调整层的大小和位置 1．调整层的大小 2．移动层 3．对齐层 5.1.5 显示或隐藏层 层具有显示或隐藏的属性，该属性经常用于动画的制作过程中。 （1）显示或隐藏层的相关属性可以在层面板中设定，也可以在层属性面板中设定，如下图所示。 5.1.5 显示或隐藏层 （2）单击闭眼图标，说明选定的层被设定为隐藏，如下图所示。 5.1.5 显示或隐藏层 （3）按F12键，打开浏览器后，可以确定图像不可见，如下图所示。 5.1.5 显示或隐藏层 （4）返回工作界面，单击闭眼图标，图标变成睁眼图标，此时，隐藏的层重新显示。如下图所示。 5.1.5 显示或隐藏层 5.1.6 更改层的重叠顺序 和表格相比，层最大的优势在于可以重叠，为了表示哪个层在上面，哪个层在下面，就要给每个层设定一个序号，这个序号就是“Z顺序”，意思就是除了屏幕的X和Y坐标之外，人为增加一个垂直于屏幕的Z轴。 　　 创建早的层在其他层之下，最后创建的层显示在最上面。层的顺序在属性面板的Z轴文本框和层面板的Z列中显示。显示的数值越小，则越在下层。直接修改Z轴的值可以更改层的顺序。 5.1.6 更改层的重叠顺序 5.1.7 删除层 选中层后，按Delete键或在菜单栏执行“编辑”→“剪切”命令，可删除该层；或者在层面板中删除层。 5.1.8 知识拓展 1.了解层属性面板 2.查看层面板 $