第 5章 层的使用
5.1 层的基本操作
5.2 层的属性设置
5.3 层与表格互换
5.1 层的基本操作
一、创建层
1、插入法
插入|布局对象|层
2、拖放法
拖层图标到编辑区
3、绘制法
单击层图标后,到编辑区拖动鼠标绘制。
5.1 层的基本操作
二、层的重叠
1,实现层的重叠
层面板|防止重叠
2,禁止层的重叠
3,层的重叠次序
层的优势--可以重叠。
表格只能嵌套。
重叠次序--, Z轴, 值,可正可负,大的
在上。
5.1 层的基本操作
三、层的嵌套
? 嵌套的层的属性与上一级的层的属性有
一定继承关系,而重叠的层之间没有任
何关系。
嵌套层的创建
1,先插入一个层
2,将光标置于该层内,然后再插入一个层。
也可在层面板中调整嵌套关系。
5.1 层的基本操作
四、选择层
1,单击层的激活标志,或层内任何地方
2,将光标置于该层内,然后单击 <div>标签。
3,单击层边界。
4,在层面板中单击层。(+ shift可选择多个
层)。
5.1 层的基本操作
五、插入层对象
? 当光标移入层内时,可以插入网页元素,
如文本、图像、层、表单、表格等。
5.1 层的基本操作
六、移动层
? 前提:, 防止重叠, 未被勾选。
? 选定层,出现层激活标志,用鼠标左键
拖该标志。
? 选定层,用键盘方向键移动层。
5.1 层的基本操作
七、对齐层
? 选定多个层,对齐的标准是每一个图,
该层控制点的实心点,而其他为空心点。
? 修改|对齐|对齐下缘。
5.2 层的属性设置
单个层的属性。
1,层编号:层的名称。
2,左和上:距页面或父层的左上角相对位置
3,宽和高:层的宽度和高度。
4,Z轴:层的重叠顺序。
5,可见性:层的初始显示状况(可见或隐藏)
6,背景图像、背景颜色,
7,溢出:确定当层中内容超出设定大小时要采取
的行动。
8,剪辑:定义层的可见区域,并用于将该范围外
的内容裁剪掉。
多个层的属性。(选中多个层时)
允许一次修改若干层。
5.3 层与表格互换
层与表格相互转换
? 问题:不是所有的浏览器都支持层。
? 解决方法:使用层创建网页布局,然后
将层转换为表格。
1,将层转换为表格
修改|转换|层到表格
2,表格转换为层
修改|转换|表格到层
第 5章 层制作实例
页面属性:左 0,上 0。
1) 居中
2) 表格 3× 1,宽 778
第一格:高 80,背景 #333333,拆分 2列,
? 第一列:宽 200,插入 200× 80图片。
? 第二列:拆分 2行,
? 第一行:高 55
? 第二行:高 25,拆分 2列
? 第一列:宽 30,插入 30× 25图片
? 第二列:背景图像,输入文字
第二格:高 40,插入 1× 2表格,宽 100%
? 第一列,48%,输入, 屋脊之上 >>网友作品,
? 第二列:输入, 网友新作,
第三格:两部分,左为推荐作品部分用
表格布局,右边为分类文章部分,用层
布局。高 400,插入表格 1× 2,宽 98%,
高 95%
? 第一列(表格部分):宽 42%,顶部对齐。
插入 4× 1表格,宽 100%,输入文字到各单元
格。
? 第二列 (层部分) 插入层,左 385,上 110,
宽 350,高 200,背景图片:, 堕落世
界, 350× 200
? 嵌套层 1:左 17,上 73,宽 315,高 153
? 嵌套层 2:左 0,上 233,宽 350,高 200,背景图像
,校园记事, 350× 200
? 嵌套层 3:左 17,上 306,宽 315,高 153
5.1 层的基本操作
5.2 层的属性设置
5.3 层与表格互换
5.1 层的基本操作
一、创建层
1、插入法
插入|布局对象|层
2、拖放法
拖层图标到编辑区
3、绘制法
单击层图标后,到编辑区拖动鼠标绘制。
5.1 层的基本操作
二、层的重叠
1,实现层的重叠
层面板|防止重叠
2,禁止层的重叠
3,层的重叠次序
层的优势--可以重叠。
表格只能嵌套。
重叠次序--, Z轴, 值,可正可负,大的
在上。
5.1 层的基本操作
三、层的嵌套
? 嵌套的层的属性与上一级的层的属性有
一定继承关系,而重叠的层之间没有任
何关系。
嵌套层的创建
1,先插入一个层
2,将光标置于该层内,然后再插入一个层。
也可在层面板中调整嵌套关系。
5.1 层的基本操作
四、选择层
1,单击层的激活标志,或层内任何地方
2,将光标置于该层内,然后单击 <div>标签。
3,单击层边界。
4,在层面板中单击层。(+ shift可选择多个
层)。
5.1 层的基本操作
五、插入层对象
? 当光标移入层内时,可以插入网页元素,
如文本、图像、层、表单、表格等。
5.1 层的基本操作
六、移动层
? 前提:, 防止重叠, 未被勾选。
? 选定层,出现层激活标志,用鼠标左键
拖该标志。
? 选定层,用键盘方向键移动层。
5.1 层的基本操作
七、对齐层
? 选定多个层,对齐的标准是每一个图,
该层控制点的实心点,而其他为空心点。
? 修改|对齐|对齐下缘。
5.2 层的属性设置
单个层的属性。
1,层编号:层的名称。
2,左和上:距页面或父层的左上角相对位置
3,宽和高:层的宽度和高度。
4,Z轴:层的重叠顺序。
5,可见性:层的初始显示状况(可见或隐藏)
6,背景图像、背景颜色,
7,溢出:确定当层中内容超出设定大小时要采取
的行动。
8,剪辑:定义层的可见区域,并用于将该范围外
的内容裁剪掉。
多个层的属性。(选中多个层时)
允许一次修改若干层。
5.3 层与表格互换
层与表格相互转换
? 问题:不是所有的浏览器都支持层。
? 解决方法:使用层创建网页布局,然后
将层转换为表格。
1,将层转换为表格
修改|转换|层到表格
2,表格转换为层
修改|转换|表格到层
第 5章 层制作实例
页面属性:左 0,上 0。
1) 居中
2) 表格 3× 1,宽 778
第一格:高 80,背景 #333333,拆分 2列,
? 第一列:宽 200,插入 200× 80图片。
? 第二列:拆分 2行,
? 第一行:高 55
? 第二行:高 25,拆分 2列
? 第一列:宽 30,插入 30× 25图片
? 第二列:背景图像,输入文字
第二格:高 40,插入 1× 2表格,宽 100%
? 第一列,48%,输入, 屋脊之上 >>网友作品,
? 第二列:输入, 网友新作,
第三格:两部分,左为推荐作品部分用
表格布局,右边为分类文章部分,用层
布局。高 400,插入表格 1× 2,宽 98%,
高 95%
? 第一列(表格部分):宽 42%,顶部对齐。
插入 4× 1表格,宽 100%,输入文字到各单元
格。
? 第二列 (层部分) 插入层,左 385,上 110,
宽 350,高 200,背景图片:, 堕落世
界, 350× 200
? 嵌套层 1:左 17,上 73,宽 315,高 153
? 嵌套层 2:左 0,上 233,宽 350,高 200,背景图像
,校园记事, 350× 200
? 嵌套层 3:左 17,上 306,宽 315,高 153