2. 9层布局(课件）-高二《网页设计与制作》同步教学（北京理工版）

2. 9层布局 层是一种HTML页面元素，可以将它定位在页面的任意位置。层可以包含文本、图像或其他任何可在HTML文档正文中放入的文件。 可以使用层来设计页面的布局，将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层，也可以在一个层中放置背景图像，然后在该层的前面放置第二个层，它包含带有透明背景的文本。 2.9.1创建层 选择“布局’，面板，单击“绘制APDiv按钮 ，此时光标变为十字形状，在文档窗口中拖动鼠标，即可绘制出一个层。或者选择“插入记录”∣“布局对象”∣ " APDiv命令”，也可以创建层，创建的层如图2-115所示。 返回 下一页 上一页 2. 9层布局 2.9.2设置层属性 在层的“属性”面板中可以查看和设置层的属性，创建一个新层，层的“属性”面板如图2-116所示。 其中各项参数含义如下。 (1)CSS一P元素:在文本框中输入当前层的名称，在“AP元素”面板和JavaScript代码中标识该层。应该注意的是，每个层有唯一的名称，命名时只能使用标准的字母和数字字符，而不能使用空格、连字符、斜杠或句号等特殊字符。 (2)左/上:设置层的左上角，即相对于页面(如果嵌套，则是父层)的左上角位置。 (3)宽/高:设置层的宽度和高度。 返回 下一页 上一页 2. 9层布局 (4)Z轴:设置层的堆叠顺序。在浏览器中，编号较大的层出现在编号较小的层的前面，值可以为正，也可以为负。 (5)可见性:指定层最初是否为可见，包括default ,inherit , visible , hidden 4项。 default(默认):不指定层的可见性，当未指定可见性时，大多数浏览器都会默认为Inherit。 inherit(继承):使用该层父级的可见性属性。 visible(可见):显示该层的内容，无论其父级层是否可见。 hidden隐藏):隐藏层的内容，无论其父级层是否可见。 (6)背景图像:在文本框中输入层背景图像的路径或单击编辑框右侧的文件夹图标 选择一幅图像文件。 返回 下一页 上一页 2. 9层布局 (7)背景颜色:设置层的背景颜色。 (8)溢出:选择当层中的内容超过层的指定大小时如何显示，包括visible , hidden ,scroll ,auto 4项。 ·visible(可见):选中该项，当层的内容超过层的指定大小时，该层会通过延伸来显示额外的内容。 hidden(隐藏):选中该项，当层的内容超过层的指定大小时，该层的尺寸会保持不变，超出部分的内容不会显示。 ·scroll滚动):选中该项，不管层的内容是否超过层的指定大小，都在该层上添加滚动条。 ·auto(自动):选中该项，当层的内容超过层的指定大小时，会显示层的滚动条。 (9)剪辑:定义层的可见区域。 返回 下一页 上一页 2. 9层布局 2.9.3 AP元素面板 通过“AP元素”面板可以管理文档中的层，防止层重叠，可以更改层的可见性以及选择多个层。 选择“窗口”∣“AP元素”命令，或者按F2键，即可打开“层”面板，如图2-117所示。 其中各项参数的含义如下。 (1)防止重叠:选择该复选框，表示创建层时各层不能重叠。但在创建嵌套层时，就不能选择此复选框。 (2) :当该图标为一只睁开的眼睛时，表示显示该层。当为一只闭合的眼睛 时，表示隐藏该层。 (3)名称:显示层的名称，双击层可更改层的名称。 (4)Z:在该列中可以更改层堆叠顺序，层在Z列中的编号高，则排在上层;反之，则排在下层。 返回 下一页 上一页 2. 9层布局 2.9.4选择层 选择层包括选择一个层与选择多个层。 1.选择一个层 选择一个层，有以下3种方法。 (1)在“AP元素”面板中，单击所要选择层的名称可以选中该层。 (2)单击一个层的选择柄可以选中该层，如图2-118所示。如果选择柄不可见，可在该层中的任意位置单击则显示此选择柄。 (3)单击一个层的边框可以选中该层。 返回 下一页 上一页 2. 9层布局 2.选择多个层 在“AP元素”面板或在页面中，按住Shift键依次单击需要选择的层，可以选择多个层。选定多个层时，最后选定的层的调整柄和手控点以蓝色实心突出显示，如图2-119 （a）所示，其他层的大小调整柄则以白色显示，如图2-119(b)所示。 2.9.5调整层的大小 可以通过拖动层的大小调整柄来调整层的大小;或者在按住ctrl键的同时，再按键盘上的方向键来调整层的大小，每按一次能调整一个像素的大小;还可以在层的“属性”面板中的“宽”和“高”文本框中直接输入层的宽度值和高度值进行调整。 返回 下一页 上一页 2. 9层布局 2.9.6移动层 层在页面的编辑中可以随意移动，移动层可以使用以下4种方法之一。 (1)选择需要移动的层，拖动层上方的选择柄或边框