第16章层的运用.pptVIP

网页设计与制作 文达学院 第16章 层的运用 16.1 层 1.层的概念 图层作为一种网页元素定位技术，其最大的特点是可以把HTML元素放置在不同的图层中，通过对图层的操作实现对图层中元素的位置、显示或隐藏以及显示顺序等参数进行控制。 而且它还能使网页部分重叠，甚至可以利用它轻松制作出动态效果。 2.创建图层 （一）把光标置于文挡窗口中想要插入图层的位置，然后选择【插入】|【布局对象】|【层】菜单命令。 （二）用鼠标直接拖动插入面板的“布局”子面板的“描绘层” 图标，到文档窗口上想要插入图层的地方。 （三）在“插入”面板的“布局”子面板的“描绘层” 图标按钮上按下鼠标左键，当鼠标移至文档窗口时，鼠标的箭头变成了十字形，在文档窗口中拖动鼠标就可以画出一个图层了。 16.2 图层的属性与操作 16.2.1设置图层的属性 一个图层的属性设置 多个图层的属性设置 其中： 层编号：用于指定一个名称，以便在图层面板和JavaScript代码中标识该图层。 名称应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个图层都必须有它自己的唯一名称。 左和上：指定图层的左上角相对于页面左上角的位置。 宽和高：指定图层的宽度和高度。 Z 轴：确定图层的z轴（即图层叠顺序）。在浏览器中，编号较大的图层出现在编号较小的图层的前面。 值可以为正，也可以为负。 可见性：指定该图层最初是否是可见的。 背景图像：指定图层的背景图像。 背景颜色：指定图层的背景颜色。如果将此选项留为空白，则可以指定透明的背景。 溢出：控制当图层的内容超过图层的指定大小时如何在浏览器中显示图层。其中： “可见” 指示在图层中显示额外的内容。实际上，该图层会通过延伸来容纳额外的内容。 “隐藏” 指定不在浏览器中显示额外的内容。 “滚动” 指定浏览器应在图层上添加滚动条，而不管是否需要滚动条。 “自动” 使浏览器仅在需要时才显示图层的滚动条。 剪辑：定义图层的可见区域。 16.2.2图层的操作 1.选定图层 如果要选择一个图层，有如下几种方法： （一）在“层”面板中单击该图层的名称。 （二）单击一个图层的选择柄。如果选择柄不可见，请在该图层中的任意位置单击以显示该选项柄。 （三）单击一个图层的边框。 如果要选择多个图层，有如下几种方法： （一）按住 Shift 键并单击“层”面板上的两个或更多个名称。 （二）在两个或更多个图层的边框内（或边框上）按住 Shift 键并单击。 2.移动图层 要移动一个或多个选定图层，有以下两种方法： （一）通过拖动来移动，可以拖动最后一个选定图层（实心突出显示）的选择柄。 （二）若要一次移动一个像素，可以使用箭头键; 按住Shift 键的同时按箭头键可按当前网格靠齐增 量来移动图层。 3.改变图层的大小 若要调整选定图层的大小，有以下几种方法： （一）通过拖动该图层的任一大小调整柄来调整大小。 （二）按住 Ctrl 键的同时按箭头键，可以一次调整一个像素的大小。 （三）按住Shift+Ctrl 键的同时按箭头键，可以按网格靠齐增量来调整大小。 （四）在属性检查器中，键入宽度 (W) 和高度 (H) 的值。 若要同时调整多个图层的大小，有以下两种方法： （一）选择【修改】|【排列顺序】|【设成宽度相同】或【修改】|【排列顺序】|【设成高度相同】菜单命令。所有选定的图层会符合最后一个选定的图层（实心突出显示）的宽度或高度。 ※ （二）在“属性”检查器中的多个图层属性下，输入宽度和高度值。这些值将应用于所有选定图层。 4.调整图层的层次 （一）在“属性”检查器的的“Z轴”项中输入要求的叠放顺序。 （二）在图层面板中选定要修改的图层，如果想要把它的叠放顺序提前，就把它向上拖动；如果希望把它的叠放顺序向后调整，那么就把它向下拖动。 5.对齐图层 （一）首先选中要对齐的图层，然后选择【修改】|【排列顺序】菜单中的某种对齐方式就可以了。对齐时，所有的图层都与最后选定的那一层的其中一边对齐。 ※ （二）首先选中要对齐的图层，然后在“属性”检查器中修改左边距和上边距的值，可以实现图层的左对齐和上对齐。 6.图层的嵌套 在图层面板中选择一个图层，然后按住Ctrl键将选中的图层拖到要嵌入的目标图层的上方，在目标图层名称的周围出现方框时释放鼠标，选中的图层就成为目标图层的子图层。 7.设置图层的可见性 在“层”面板单击一个图层的眼形图标以更改其可见性。如图所示。 眼睛睁开：表示该图层是可见的。 眼睛闭合：表示该图层是不可见的。 隐藏眼形图标：该图层通常会继承其父级的可见性。 （如果图层没有嵌套，父级就是文档正文，而文档正文始终是可见的。） 16.3