第17章 层的运用.

Presentation on theme: "第17章 层的运用."— Presentation transcript:

1 第17章 层的运用

2 第17章 层的运用 17.1 层的概念 17.2 创建图层 17.3 设置图层的属性 17.4 图层的操作 17.5 图层与表格的关系
设计者能够在图层中插入文本、图像、表单和插件等元素，并且可以自由控制页面元素的叠放顺序以及图层的可见与不可见。没有图层的网页像一个平面，而使用图层可以形成三维空间的排版方式。 17.1 层的概念 17.2 创建图层 17.3 设置图层的属性 17.4 图层的操作 17.5 图层与表格的关系 17.6 本章小结

3 17.1 层的概念 1.特点 图层作为一种网页元素定位技术，其最大的特点是可以把HTML元素放置在不同的图层中，通过对图层的操作实现对图层中元素的位置、显示或隐藏以及显示顺序等参数进行控制。而且它还能使网页部分重叠，甚至可以利用它轻松制作出动态效果。

4 17.1 层的概念 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及更高版本的浏览器所支持。

5 17.2 创建图层 17.2.1 设置层的首选参数 在创建图层前，可以进行图层的基本参数的设置。 选择【编辑】|【首选参数】菜单命令，
在“首选参数”对话框的 “分类” 中选择“层”选项，如图所示。可改变图层的基本参数设置。

6 17.2 创建图层 17.2.2 创建图层 方法一：把光标置于文挡窗口中想要插入图层的位置，然后选择【插入】|【布局对象】|【层】菜单命令。
方法二：用鼠标直接拖动插入面板的“布局”子面板的“描绘层” 图标，到文档窗口上想要插入图层的地方。 方法三：在“插入”面板的“布局”子面板的“描绘层” 图标按钮上按下鼠标左键，当鼠标移至文档窗口时，鼠标的箭头变成了十字形，在文档窗口中拖动鼠标就可以画出一个图层了。

7 17.3 设置图层的属性 1.一个图层的属性设置 选取一个图层时，打开的图层属性检查器如图所示。 其中：
层编号：用于指定一个名称，以便在图层面板和JavaScript代码中标识该图层。名称应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个图层都必须有它自己的唯一名称。

8 17.3 设置图层的属性 左和上：指定图层的左上角相对于页面左上角的位置。 宽和高：指定图层的宽度和高度。
Z 轴：确定图层的z轴（即图层叠顺序）。在浏览器中，编号较大的图层出现在编号较小的图层的前面。值可以为正，也可以为负。 可见性：指定该图层最初是否是可见的。 背景图像：指定图层的背景图像。 背景颜色：指定图层的背景颜色。如果将此选项留为空白，则可以指定透明的背景。

9 17.3 设置图层的属性 溢出：控制当图层的内容超过图层的指定大小时如何在浏览器中显示图层。其中：
“可见” 指示在图层中显示额外的内容。实际上，该图层会通过延伸来容纳额外的内容。 “隐藏” 指定不在浏览器中显示额外的内容。 “滚动” 指定浏览器应在图层上添加滚动条，而不管是否需要滚动条。 “自动” 使浏览器仅在需要时才显示图层的滚动条。 剪辑：定义图层的可见区域。

10 17.3 设置图层的属性 2.多个图层的属性设置 如果选择多个图层，这时的图层属性检查器如图所示。
在“属性”检查器中可以对几个图层的共同属性进行设置，大多数参数都讲过，这里不再重复。

11 17.4 图层的操作 在对层的具体管理和操作时，常常要用到图层面板。要打开“层”面板，可以选择【窗口】|【层】菜单命令，“层”面板如图所示。

12 17.4 图层的操作 17.4.1 选定图层 如果要选择一个图层，有如下几种方法： 在“层”面板中单击该图层的名称。
单击一个图层的选择柄。如果选择柄不可见，请在该图层中的任意位置单击以显示该选项柄。 单击一个图层的边框。 如果要选择多个图层，有如下几种方法： 按住 Shift 键并单击“层”面板上的两个或更多个名称。 在两个或更多个图层的边框内（或边框上）按住 Shift 键并单击。

13 17.4 图层的操作 17.4.2 移动图层 要移动一个或多个选定图层，有几下两种方法：
若要通过拖动来移动，可以拖动最后一个选定图层（实心突出显示）的选择柄。 若要一次移动一个像素，可以使用箭头键。按住Shift 键的同时按箭头键可按当前网格靠齐增量来移动图层。

14 17.4 图层的操作 17.4.3 改变图层的大小 若要调整选定图层的大小，有以下几种方法： 通过拖动该图层的任一大小调整柄来调整大小。
按住 Ctrl 键的同时按箭头键，可以一次调整一个像素的大小。 按住Shift+Ctrl 键的同时按箭头键，可以按网格靠齐增量来调整大小。 在属性检查器中，键入宽度 (W) 和高度 (H) 的值。

15 17.4 图层的操作 若要同时调整多个图层的大小，有以下两种方法：
选择【修改】|【排列顺序】|【设成宽度相同】或【修改】|【排列顺序】|【设成高度相同】菜单命令。所有选定的图层会符合最后一个选定的图层（实心突出显示）的宽度或高度。 在“属性”检查器中的多个图层属性下，输入宽度和高度值。这些值将应用于所有选定图层。

16 17.4 图层的操作 调整图层的层次 方法一：在“属性”检查器的的“Z轴”项中输入要求的叠放顺序。如果在此项中输入了一个比较大的数，那么图层将向上面移动；如果在此项中输入了一个比较小的数，该图层则向下移动，如图所示。

17 17.4 图层的操作 方法二：在图层面板中选定要修改的图层，如果想要把它的叠放顺序提前，就把它向上拖动；如果希望把它的叠放顺序向后调整，那么就把它向下拖动。如图所示。

18 17.4 图层的操作 对齐图层 方法一：首先选中要对齐的图层，然后选择【修改】|【排列顺序】菜单中的某种对齐方式就可以了。对齐时，所有的图层都与最后选定的那一层的其中一边对齐。 方法二：首先选中要对齐的图层，然后在“属性”检查器中修改左边距和上边距的值，可以实现图层的左对齐和上对齐。

19 17.4 图层的操作 图层的嵌套 在图层面板中选择一个图层，然后按住Ctrl键将选中的图层拖到要嵌入的目标图层的上方，在目标图层名称的周围出现方框时释放鼠标，选中的图层就成为目标图层的子图层。如图所示。

20 17.4 图层的操作 17.4.7 设置图层的可见性 在“层”面板单击一个图层的眼形图标以更改 其可见性。如图所示。
眼睛睁开：表示该图层是可见的。 眼睛闭合：表示该图层是不可见的。 隐藏眼形图标：该图层通常会继承 其父级的可见性。（如果图层没有嵌套，父级就是文档正文，而文档正文始终是可见的。）

21 17.5 图层与表格的关系 17.5.1 使用图层设计表格 图层和表格都是定位工具，两者之间可以互相转换。操作方法如下：
选择【修改】|【转换】|【层到表格】菜单项，弹出“转换层为表格”对话框， 如图所示。其中： 最精确：为每个层创建一个单元格，并附加保留层之间的空间所必需的单元格。

22 17.5 图层与表格的关系 最小：折叠空单元格。指定如果层定位在指定数目的像素内，则层的边缘应对齐。
使用透明GIFs：用透明的 GIF 填充表格的最后一行。这将确保该表在所有浏览器中以相同的列宽显示。 置于页面中央：将结果表放置在页面的中央。 如果禁用此选项，表将在页面的左边缘开始。 完成设置后，单击“确定”按钮，完成图层向表格的转化。

23 17.5 图层与表格的关系 17.5.2 防止图层的重叠 常用方法如下： 选择图层面板上的“防止重叠”选项，如图所示。
选择【修改】|【排列顺序】|【防止层重叠】菜单项。 说明：当启用该选项后，在创建图层时，就不会出现图层重叠的情况。如果在创建重叠图层后激活此选项，可以拖动每个重叠图层以使其离开其他图层。

24 17.6 本章小结 在本章主要介绍了图层在网页制作中的运用。通过本章的学习，可以掌握在不同的情况下应用不同的图层创建方法。掌握在网页建设过程中对图层的各项操作，例如选定图层、改变图层大小、移动图层、对齐图层、改变图层叠放顺序、改变图层的可见性等。 本章介绍的内容是网页中图层操作的基本功，用户应当熟练掌握、灵活运用，已达到页面设计的需要。