创建图层.ppt

创 建 层 主 讲 教 师：蒋 玉 华 单 位：教育技术系 网 页 定 位 技 术 ？ 所谓网页定位技术，就是指如何把各种各样的网页元素(如文字、图片等)放置在网页中的指定位置的技术。 网页定位主要靠三种技术来实现 表格 框架 层 一、什么是层 层是一种页面元素定位技术，它能够将放置在层中的内容定位在浏览器中的任意位置。 最大特点：各个层之间可以重叠，并且可以决定每个层是否可见（显示、隐藏） 二、层的基本操作 1、创建层 插入栏/布局/绘制层（按钮）/文档窗口绘制 插入（菜单）/布局对象/层 同时插入多个层（点击绘制层按钮，按住Ctrl 绘制） 嵌套层的创建：在创建的图层里定位光标，插入（菜单）/布局对象/层。（插入的新层成为原层的嵌套层） 二、层的基本操作 2、选择层 单击层边线 单击层选择柄 单击 多选（shift） 删除层（delete） 3、设置层属性 剪辑说明 二、层的基本操作 4、调整层大小 单一层： 拖拽控制手柄、属性检查器的“宽”和“高” 多个层：（和最后选择的一个图层相同） 复选层/修改/排列顺序/设成宽度相同、设成高度相同 5、移动层 拖拽矩形手柄或边线、属性检查器的“左”和“上” 6、对齐层 选择两个或两个以上图层/修改/排列顺序/按照上下左右四条边界 的某一条边界做为参照来对齐 二、层的基本操作 7、更改层的重叠顺序 属性检查器的z轴属性、打开“层”面板（CSS面板组/ 层选项卡或窗口（菜单）/层）移动层位置或更改Z值 8、更改层的可见性 “层”面板，单击层名称前的“眼睛”图标所在列，“闭眼” 不可见，“睁眼”可见，不显示任何图标，表示默认的显 示属性 。 三、实例制作一(文学天地) 2、实例制作步骤 新建空白网页，修改页面属性，添加背景 绘制多个层，组成页面的结构图（6个） 插入/HTML/水平线 定位光标，输入文本，插入图像 利用“属性”面板对文本或图像进行调整，使其与层大小适应 分别在下边三个图层中插入嵌套层，输入相应文字，保存网页 得到最后效果图 四、转换层和表格 1、将表格转换为层 修改/转换/表格到层 2、将层转换为表格（使网页能够在早期版本的浏 览器中正确显示） 修改/转换/层到表格 五、实例制作二(图片欣赏) 显示--隐藏层 1、添加6个层 2、创建文字内容 3、导入图片 4、选择“第一张图片”文字，打开“行为”面板，添加行为 “显示-隐藏层”选择对应图片层，单击隐藏，确定，点 击行为更改为on mouse out； 5、添加行为“显示-隐藏层”选择对应图片层，单击显示， 确定，点击行为更改为on mouse over。 6、保存，F12预览。其它两张图片操作步骤同上 * * 示例展示 演示 层内添加内容 编辑/首选参数/ 不可见元素/层锚记 层锚记 演示 左 层编号 上 宽和高 Z轴 可见性 背景图像 背景颜色 类 溢出 剪辑 指定层的标识 主要用于脚本程序 指定层靠近浏览器 左边界的距离 指定层靠近浏览器 顶部边界的距离 指定层的宽度和高度 指定层的Z值，即叠放 次序，Z值越大越在上 方显示。 指定层的背景图像 指定层的背景颜色 指定层所属的CSS类 visible（可见）：内容大于层的尺寸，扩大层的尺寸 hidden（隐藏）：内容大于层的尺寸，保持层的大小 隐藏显示不出来的内容 scroll（滚动）：不改变层的大小，通过增加滚动条来 显示内容，无论内容大小都显示滚动条 auto（自动）：随着内容的大小自行确定是否需要滚动条 定义内容的显示区域，制定左侧、顶部、 右侧和底部坐标可在层的坐标空间中定义 一个矩形（从层的左上角开始计算）。层 经过剪辑后，只有指定的矩形区域才是可 见的。 default（默认）：默认的层可见属性 inherit（继承）：层嵌套时，子层继承 父层的可见性 visible（可见）：层在浏览器窗口中可见 hidden（隐藏）：使层在浏览器中隐藏起来 即不可见 示例 二、层的基本操作 演示 clip(剪辑)属性就像一个蒙版。它允许你掩盖矩形的可见区域。要剪辑一个元素：你必须指定position:absolute。然后，指定top right bottom le