网页投计与制作教程 第17章层的运用 FLASHP
第17章 层的运用
网页设计与制作教程 第17章层的运用 本章目录 设计者能够在 图层中插入文本、 冬17.1层的概念 图像、表单和插件 等元素，并且可以 17.2创建图层 自由控制页面元素 17.3设置图层的属性 的叠放顺序以及图 层的可见与不可见。 17.4图层的操作 没有图层的网页像 冬17.5图层与表格的关系 一个平面，而使用 图层可以形成三维 ÷17.6本章小结 空间的排版方式。 慨要说明
第17章 层的运用 设计者能够在 图层中插入文本、 图像、表单和插件 等元素，并且可以 自由控制页面元素 的叠放顺序以及图 层的可见与不可见。 没有图层的网页像 一个平面，而使用 图层可以形成三维 空间的排版方式。 ❖17.1 层的概念 ❖17.2 创建图层 ❖17.3 设置图层的属性 ❖17.4 图层的操作 ❖17.5 图层与表格的关系 ❖17.6 本章小结
网页设计与制作教程 17.1层的概念 1.特点 图层作为一种网页元素定位技术，其最大的特 点是可以把HTML元素放置在不同的图层中，通过对 图层的操作实现对图层中元素的位置、显示或隐藏 以及显示顺序等参数进行控制。而且它还能使网页 部分重叠，甚至可以利用它轻松制作出动态效果
17.1 层的概念 1.特点 图层作为一种网页元素定位技术，其最大的特 点是可以把HTML元素放置在不同的图层中，通过对 图层的操作实现对图层中元素的位置、显示或隐藏 以及显示顺序等参数进行控制。而且它还能使网页 部分重叠，甚至可以利用它轻松制作出动态效果
网页设计与制作敦程 17.1层的概念 2.格式 在Dreamweaverr中的图层分为两种格式：CSS图 层和Netscapel图层格式。 CSS图层：使用DIV和SPAN标记来定位网页元素的 位置。CSS图层的优点是具有良好的兼容性，Internet Explorer4.0和Netscape Navigator4.0及它们的更高 版本的浏览器都支持CSS图层。 Netscapel图层：在网页上定位元素使用的是LAYER 和LAYER标签。Netscape图层只能被Netscape Navigator4.0及更高版本的浏览器所支持
2.格式 在Dreamweaver中的图层分为两种格式：CSS图 层和Netscape图层格式。 ❖CSS图层 ：使用DIV和SPAN标记来定位网页元素的 位置。CSS图层的优点是具有良好的兼容性，Internet Explorer 4.0 和 Netscape Navigator 4.0及它们的更高 版本的浏览器都支持CSS图层。 ❖Netscape图层：在网页上定位元素使用的是LAYER 和ILAYER标签。Netscape图层只能被Netscape Navigator 4.0及更高版本的浏览器所支持。 17.1 层的概念
网页设计与制作教程 17.2创建图层 17.2.1设置层的首选参数 在创建图层前，可以进行图层的基本参数的设置。 选择【编辑】|【首选参数】菜单命令， 首洗参数 在“首选参数”对 显示：default习 话框的“分类” 宽：200 高0：15 中选择“层”选项， 背颜色@)： 背景图像)： 浏览包).一 工如果在层中则使用嵌套 如图所示。可改变 口插入层时固定大小) 器中 图层的基本参数设 置。 确定☐取消帮助0
在创建图层前，可以进行图层的基本参数的设置。 选择【编辑】|【首选参数】菜单命令， 17.2.1 设置层的首选参数 17.2 创建图层 在“首选参数”对 话框的 “分类” 中选择“层”选项， 如图所示。可改变 图层的基本参数设 置
网页设计与制作教程 17.2创建图层 17.2.2创建图层 方法一：把光标置于文挡窗口中想要插入图层的位置， 然后选择【插入】|【布局对象】」【层】菜单命令。 方法二：用鼠标直接拖动插入面板的“布局”子面板的 “描绘层”图标，到文档窗口上想要插入图层的地方。 方法三：在“插入”面板的“布局”子面板的“描绘层” 图标按钮上按下鼠标左键，当鼠标移至文档窗口时，鼠 标的箭头变成了十字形，在文档窗口中拖动鼠标就可以 画出一个图层了
方法一：把光标置于文挡窗口中想要插入图层的位置， 然后选择【插入】|【布局对象】|【层】菜单命令。 方法二：用鼠标直接拖动插入面板的“布局”子面板的 “描绘层” 图标，到文档窗口上想要插入图层的地方。 方法三：在“插入”面板的“布局”子面板的“描绘层” 图标按钮上按下鼠标左键，当鼠标移至文档窗口时，鼠 标的箭头变成了十字形，在文档窗口中拖动鼠标就可以 画出一个图层了。 17.2.2 创建图层 17.2 创建图层
网页设计与制作敦程 17.3设置图层的属性 1.一个图层的属性设置 选取一个图层时，打开的图层属性检查器如图所示。 ,属性 左L)宽W)200pxZ轴亿)1背景图像) 白类@无习 ayer1习上)高0115x可见性0 dofault习背晨颜色g) 溢出习辑：左■右■ 上下 其中： 层编号：用于指定一个名称，以便在图层面板和 JavaScript代码中标识该图层。名称应使用标准的字 母数字字符，而不要使用空格、连字符、斜杠或句号 等特殊字符。每个图层都必须有它自己的唯一名称
1.一个图层的属性设置 选取一个图层时，打开的图层属性检查器如图所示。 17.3 设置图层的属性 其中： 层编号：用于指定一个名称，以便在图层面板和 JavaScript代码中标识该图层。名称应使用标准的字 母数字字符，而不要使用空格、连字符、斜杠或句号 等特殊字符。每个图层都必须有它自己的唯一名称
网页设计与制作教程 17.3设置图层的属性 左和上：指定图层的左上角相对于页面左上角的位置。 宽和高：指定图层的宽度和高度。 Z轴：确定图层的z轴（即图层叠顺序）。在浏览器中， 编号较大的图层出现在编号较小的图层的前面。值可以 为正，也可以为负。 可见性：指定该图层最初是否是可见的。 背景图像：指定图层的背景图像。 背景颜色：指定图层的背景颜色。如果将此选项留为空 白，则可以指定透明的背景
左和上：指定图层的左上角相对于页面左上角的位置。 宽和高：指定图层的宽度和高度。 Z 轴：确定图层的z轴（即图层叠顺序）。在浏览器中， 编号较大的图层出现在编号较小的图层的前面。值可以 为正，也可以为负。 可见性：指定该图层最初是否是可见的。 背景图像：指定图层的背景图像。 背景颜色：指定图层的背景颜色。如果将此选项留为空 白，则可以指定透明的背景。 17.3 设置图层的属性
网页设计与制作教程 17.3设置图层的属性 溢出：控制当图层的内容超过图层的指定大小时如何在 浏览器中显示图层。其中： 冬“可见”指示在图层中显示额外的内容。实际上， 该图层会通过延伸来容纳额外的内容。 冬“隐藏”指定不在浏览器中显示额外的内容。 冬“滚动”指定浏览器应在图层上添加滚动条，而不 管是否需要滚动条。 。“自动”使浏览器仅在需要时才显示图层的滚动条 剪辑：定义图层的可见区域
溢出：控制当图层的内容超过图层的指定大小时如何在 浏览器中显示图层。其中： ❖“可见” 指示在图层中显示额外的内容。实际上， 该图层会通过延伸来容纳额外的内容。 ❖“隐藏” 指定不在浏览器中显示额外的内容。 ❖“滚动” 指定浏览器应在图层上添加滚动条，而不 管是否需要滚动条。 ❖“自动” 使浏览器仅在需要时才显示图层的滚动条。 剪辑：定义图层的可见区域。 17.3 设置图层的属性
网页设计与制作敦程 17.3设置图层的属性 2.多个图层的属性设置 如果选择多个图层，这时的图层属性检查器如图所示。 属性 格式无习样式①无 BL盖目链接@) 字体@)默宇体习大小S)无习 目扫想坦目标@) ☐詹个左克D标a写青最】 上)高 标签a)Dy可背景颜色C) 在“属性”检查器中可以对几个图层的共同属 性进行设置，大多数参数都讲过，这里不再重复
2.多个图层的属性设置 如果选择多个图层，这时的图层属性检查器如图所示。 在“属性”检查器中可以对几个图层的共同属 性进行设置，大多数参数都讲过，这里不再重复。 17.3 设置图层的属性