第5層的使用.pptVIP

第5章　层的使用 本章重点：层的创建、选择、编辑、保存等操作方法，层的属性设置，层及嵌套层、层的叠放次序、层的可见性等内容。 第5章　层的使用 5.1 制作层布局页面 5.2 层的基本操作 5.3 层的属性设置 5.4 层与表格互换 5.5 实战演练 5.1 制作层布局页面―――“环游世界” 5.1.1 实例综述 　　通过本例的学习，读者可充分体会使用层布局页面的随意性。 5.1 制作层布局页面―――“环游世界” 5.1.2 实例分析 　　不论文字还是图片都是采用层来进行定位的，因此在例中我们逐步介绍 如何在页面插入层 如何通过控制层的Z轴参数来设置层之间的重叠关系 如何精确定位层等操作方法。 5.1.3　实现步骤 　　插入层→在层中添加内容→精确定位层，控制大小→设置层之间的叠放次序。 5.2 层的基本操作 5.2.1 创建层 方法： 1、插入法 插入｜布局对象｜层 2、拖放法 拖层图标到编辑区 3、绘制法 单击层图标后，到编辑区拖动鼠标绘制。 5.2 层的基本操作 5.2.2 激活和选中层 方法： 单击层的激活标志，或层内任何地方 将光标置于该层内，然后单击div标签。 单击层边界。 在层面板中单击层。（＋shift可选择多个层）。 5.2 层的基本操作 5.2.3 删除层 方法： 当选中一个层后，按Delete键或单击【剪切】按钮，可删除该层。 也可在层面板中删除该层 5.2 层的基本操作 5.2.4　调整、移动和对齐层 1、调整层的大小 方法： 选中需要调整的层，此时在层的边框四周出现8个黑色活动块，用鼠标拖曳某个活动块，即可调整层的大小。 选中需要调整的层，在层的【属性】面板的【宽】和【高】，两个文本框中，输入层的宽度和高度和高度尺寸，可精确调整该层的尺寸。 5.2 层的基本操作 5.2.4　调整、移动和对齐层 2、移动层 前提： “防止重叠”未被勾选。 方法： 选定层，出现层激活标志，用鼠标左键拖该标志。 选定层，用键盘方向键移动层。 5.2 层的基本操作 3、 对齐层 选定多个层，对齐的标准是最后一个选择的层，该层控制点的实心点，而其他为空心点。 修改｜对齐｜对齐下缘。 5.3 层的属性设置 5.3.1 设置层的属性 层编号：层的名称。 左和上：距页面或父层的左上角相对位置 宽和高：层的宽度和高度。 Z轴：层的重叠顺序。 可见性：层的初始显示状况（可见或隐藏） 背景图像、背景颜色： 溢出：确定当层中内容超出设定大小时要采取的行动。 剪辑：定义层的可见区域，并用于将该范围外的内容裁剪掉。 5.3 层的属性设置 5.3.2 层面板的使用 　　　　选择【窗口】｜【其他】｜【层】命令，或按F2键，可打开【层】面板 。 选定某个层 更改层名 显示、隐藏层 改变层的叠放次序 创建和取消嵌套层 禁止层重叠 5.4 层与表格互换 5.4.1 将层转换为表格 操作步骤如下: 选中要转换为层的表格。 选择“修改”|“转换表格到层”命令，系统将打开“转换表格为层”对话框 选中合适的布局工具复选框后，单击【确定】按钮，表格就可按要求转换为层。 5.4 层与表格互换 5.4.2 表格转换为层 问题：不是所有的浏览器都支持层。 解决方法：使用层创建网页布局，然后将层转换为表格。 5.5 　实战演练 一、实战效果―――冷酷青春 5.5 　实战演练 二、实战要求 整个页面大框架采用表格进行布局（在提供的素材库中已完成，读者可直接采用）。 主要内容区为左、右两部分，其中右边部分用层及层嵌套来实现。 层背景的设置以及嵌套层属性的设置。 使用CSS样式格式化文本。 * 打开要将层转换为表格的页面。 选择【修改】｜【转换】｜【层到表格】命令，系统将打开【转换层为表格】对话框. 选择好对话框中的选项后，单击【确定】按钮，层布局的页面就可转换成表格布局的页面