第10章层.docx

●单击层左上角的方形手柄，若手柄不可见，则单击层内任一处，使其可见。

●单击层边框线。

●单击层面板上的层名称。

●如果要选定两个以上的层，只要按住【Shift】键，然后逐个单击层，就将层同时选定了。

以上几种方法都可以方便地选定层，选定层以后，可以在属性面板中查看层各项参数的属性。

10.3层属性

确认层处于选定状态，选择主菜单中的“窗口”→“属性”命令，打开层的属性面板。

单击属性面板右下角的箭头按钮，打开扩展面板，层的全部属性展现在图10-1-5中。

图10-1-5层的属性面板

其中主要包含以下设置内容。

⒈【层编号】：

在本栏内给层命名，如果以后要使用行为或者用JavaScript控制层，必须要用到这个名称。

⒉【左】：

层左边界距离浏览器窗口左边界的距离。

⒊【上】：

层上边界距离浏览器窗口上边界的距离。

⒋【宽】：

层的宽度。

⒌【高】：

层的高度。

⒍【Z轴】：

在垂直平面的方向上层的顺序号。

⒎【可见性】：

层的可见性，可以选择“default”（默认）、“inherit”（继承父层的该属性）、“visible”（可见）、“hidden”（隐藏）4个选项之一。

⒏【背景图像】：

可以在这里为层设置背景图像。

⒐【背景色】：

在这里为层设置背景颜色。

⒑【溢出】：

当层内容超过层大小时的显示方式，有以下4种选择。

●Visible：

按照内容的尺寸向右、向下扩大层，以显示层内的全部内容。

●Hidden：

只能显示层尺寸以内的内容。

●Scroll：

不改变层大小，但增加滚动条，用户可以通过滚动条来浏览整个层。

选择一项之后，无论层是否够大，都会显示滚动条。

这一选项只在支持滚动条的浏览器中才有效。

●Auto：

只在层不够大时才出现滚动条，这一选项也是在支持滚动条的浏览器中才有效。

⒒【剪辑】：

指定层的哪一部分是可见的，输入的数值是距离层的4个边界的距离。

10.4层的默认设置

当层被插入时，其属性是默认的，但这些默认属性不是固定不变的，可以随时修改。

下面我们来看一看层的默认属性。

选择主菜单中的“编辑”→“首选参数（P）…”命令，打开“首选参数”对话框，在该对话框的左侧【分类】栏内选择“层”，如图10-1-6所示。

图10-1-6“首选参数”对话框

此时，我们看到关于层的默认属性。

●【显示】：

定义层是否可见的默认属性，“default”为可见，“inherit”为继承父层的该属性，“visible”为可见，“hidden”为隐藏。

●【宽】和【高】：

定义默认层的宽度和高度。

●【背景颜色】：

定义默认层的背景颜色。

●【背景图像】：

定义默认层的背景图像。

●【嵌套】：

勾选该项，只要层出现重叠时，将采用嵌套的方式。

●【Netscape4兼容性】：

勾选该项，当插入层时，固定其大小。

层的默认属性被修改后，当下一次插入层时，其默认的属性会变为修改后的数值。

10.5层面板

在Dreamweaver中与层有关的功能很多，有一项功能是至关重要的，它与属性面板配合使用，可以方便快捷地对层进行各种操作，这就是层面板。

选择主菜单中的“窗口”→“层”命令或者直接按【F2】键打开层面板，如图10-1-7所示。

图10-1-7层面板

在层面板中可以实现以下功能：

●将一个层嵌套入另一个层。

●选定一个或多个层。

●修改层的Z轴顺序。

●修改可见属性。

●禁止层重叠。

10.6层操作

在了解了关于层的基本功能之后，就可以对层进行各种操作了，如缩放层、移动层、改变层的叠放次序、改变层的可见性、嵌套层等。

10.6.1缩放层

缩放层仅改变层的宽度和高度，不改变层的内容。

在文档窗口可以缩放一个层，也可同时缩放多个层，使它们具有相同的尺寸。

缩放单个层的方法有下列几种：

●先选定层，拖曳缩放手柄（层周围出现的小方块）来改变层的尺寸。

拖曳下手柄改变层的高度，拖曳右手柄改变层的宽度，拖曳右下角的缩放点同时改变层的宽度和高度，如图10-1-8所示。

图10-1-8拖曳缩放手柄来改变层的大小

●先选定层，然后按住【Ctrl】键，每按一次方向键，层就被改变一个像素值。

●先选定层，然后同时按住【Shift】+【Ctrl】键，每按一次方向键，层就被改变10个像素值。

前面介绍了几种缩放单个层的方法，那么如何对多个层的大小进行统一调整呢？

下面，我们通过一个实例来讲解。

同时调整多个层的大小

Step01首先在文档窗口中插入3个层，如图10-1-9所示。

图10-1-9在文档中插入3个层

Step02按住【Shift】键，将3个层逐一选定。

选择主菜单中的“窗口”→“属性”命令，打开它们的属性面板，如图10-1-10所示。

图10-1-10多个层的属性面板

Step03在属性面板中，【宽】项的空白栏内输入数值“80”（单位为像素），按【Enter】键确认，此时文档窗口中所有层的宽度全部变成了80像素，如图10-1-11所示。

图10-1-11在属性面板中统一调整所有层的宽度

由上面的例子可知，如对多个层进行统一调整，只需设置它们的共同属性便可。

10.6.2移动层

要想精确定位层，免不了要根据需要移动层，本节介绍层在网页中移动至所需位置的方法。

移动层有多种方法，但首先要确定层是可以重叠的，也就是不勾选层面板中的【防止重叠】项，这样层可以不受限制地移动。

下面介绍几种移动层的方法：

●选定层后，鼠标靠近缩放手柄时，出现十字箭头，按住鼠标左键拖动鼠标，层将跟着鼠标的移动而移动。

●选定层，然后按4个方向键，上、下、左、右向4个方向移动层，每按一次方向键，将使层移动一个像素值的距离。

●选定层，按住【Shift】键，然后按4个方向键，上、下、左、右向4个方向移动层，每按一次方向键，将使层移动10个像素值的距离。

10.6.3对齐层

对齐功能可以使两个或两个以上层按照某一边界对齐，如使所有层的底边都排列在一条水平线上，具体的实现步骤如下。

对齐层

Step01接上例。

将3个层逐一选定。

Step02选择主菜单中的“修改”→“排列顺序”→“对齐下缘”命令，3个层的底边将按照最后选定层的底边对齐，如图10-1-12所示。

图10-1-123个层的底边按照最后选定层的底边对齐

在菜单中，共有4种对齐方式。

●【左对齐】：

以最后选定的层的左边线为标准，对齐排列层。

●【右对齐】：

以最后选定的层的右边线为标准，对齐排列层。

●【对齐上缘】：

以最后选定的层的顶边为标准，对齐排列层。

●【对齐下缘】：

以最后选定的层的底边为标准，对齐排列层。

10.6.4改变层的可见性

层内可以包含所有的网页元素，通过改变层的可见性，就可以控制层内元素的显示与隐藏，这里称这个属性为可见性。

层的可见性可通过层面板来改变，也可以在层的属性面板中改变，具体操作步骤如下。

改变层的可见性

Step01选择主菜单中的“窗口”→“层”命令，打开层面板，如图10-1-13所示。

图10-1-13层面板

层面板中显示层的可见性、层名称、Z轴顺序3项属性，层是按照Z轴的顺序排列的。

Step02单击层面板最左列，即眼睛图标列，改变可见性。

层名称左边为睁开的眼睛时，表示层为可见，这时属性面板中的【可见性】项为“visible”（可见），如图10-1-14所示。

图10-1-14将层设置为可见时层面板和属性面板的状态

Step03单击眼睛图标列，层名称左边为“闭着”的眼睛时，表示层为不可见，这时属性面板中的【可见性】项为“hidden”，如图10-1-15所示。

图10-1-15将层设置为不可见时层面板和属性面板的状态

Step04层的眼睛列无眼睛图标，则可见性为默认，属性面板中的【可见性】项为“default”。

Step05若同时改变所有层的可见性，则单击层面板中眼睛列的最顶端的眼睛图标，它位于“名称”左侧，原来所有层均变为可见性或变为不可见，如图10-1-16所示。

图10-1-16将所有层设置为不可见

10.6.5改变层的Z轴顺序

层与表格相比，在定位元素方面各有各的优势，但层最大的优势在于可以重叠，而表格只能嵌套。

层的重叠为制作一些特殊效果提供了非常方便的途径，而层的重叠次序通常是用“Z轴顺序”来表示的。

它的意思就是，除了屏幕的X、Y坐标之外，逻辑上增加了一个垂直于屏幕的Z轴，“Z轴顺序”就好像层在Z轴上的坐标值。

这个坐标值可正可负，也可以是0，数值大的层在上面。

改变层的“Z轴顺序”很简单，只需打开层面板，用鼠标指向需要改变序号的层，按下鼠标，向上或向下拖曳鼠标，当拖曳到希望插入的两层之间出现一条横线时，释放鼠标，各个层的“Z轴顺序”会做相应的改变。

下面我们通过一个实例，来感性认识一下层“Z轴顺序”的作用。

制作阴影文本

Step01在文档窗口中，选择主菜单中的“插入”→“布局对象”→“层”命令，在文档窗口中插入一个层。

Step02在层中输入文本“梦之坊”，然后在属性面板中将文本的字体放大，如图10-17所示。

图10-1-17包含文本的层

Step03按照上述步骤再插入一个图层，在该图层中输入相同的文字。

Step04设置图层的位置和大小以及文字的字号大小均与layer1相同。

Step05在层面板中将layer1选定，在属性面板中设置文本颜色为浅灰色。

Step06将第1个层作为第2个层的阴影，利用方向键来调整，将当前的层向右、向下移动3个像素值，然后取消对层的选定，并保存文档。

Step07按F12键，预览网页的效果，会看到一个有重影的文本,如图10-1-18所示。

图10-1-18有重影的文本预览效果

这就是利用层的重叠而制作成的阴影文本。

我们还可以继续发挥一下，制作多个层，来完成各种特殊显示效果的文本。

温馨提示：

在层面板中，请注意不要勾选【防止重叠】，如果选中该选项，层将不能重叠。

10.6.6嵌套层

层的嵌套和重叠不一样，嵌套的层与母层是有一定关系的，而层重叠时除视觉上会有一些联系，其它根本没有什么关系。

首先我们来看一下嵌套层是如何创建的。

创建嵌套层

Step01首先在文档中插入一个层。

Step02将光标置于该层内，然后继续插入一个层，就得到了嵌套层,如图10-1-19所示。

10-1-19插入嵌套层

在层面板中，嵌套层是呈树状结构表示的。

而且子层与父层的Z轴顺序是一样的。

不过嵌套层与嵌套表格不一样，表格嵌套时，子表格是完全包含在父表格里的。

而嵌套的层并不意味着子层必须在父层里面，其不受父层的限制。

当我们将子层移动位置时，父层并不发生任何变化。

而当移动父层时，子层也会随着父层移动，而且位移量都一样，也就是说二者的相对位置不发生变化。

嵌套层之间还存在着继承关系。

选定子层，打开其属性面板，并打开【可见性】下拉列表，其中有4个选项：

“default”（默认）、“inherit”（继承）、“visible”（可见）和“hidden”（隐藏），如图10-1-20所示。

图10-1-20层的属性面板

继承的作用就是可以使子层的可见性永远和父层保持一致以及保持子层与父层的相对位置不变。

这在动态网页制作中有很大作用，因为动态网页的很多效果是通过Javascript控制层的可见性及位置变化来实现的。

对于嵌套层，当父层的位置变化时，子层的位置也会随之变化。

当父层的可见性改变时，子层的可见性也随之改变。

当然实现这种动画效果离不开Javascript的支持。

10.7应用层设计表格

虽然通过层定位页面元素比使用表格方便得多，但是由于受到浏览器版本的限制，不是所有的浏览器都能够有效地支持层，只有IE4.0以上的版本才能支持。

因此，相对来说，使用表格就能够获得更大的支持率。

不过，Dreamweaver提供了层与表格相互转换的功能，可以最大程度地方便网页设计师的设计工作，同时兼顾使用低版本浏览器的访问者。

下面我们就通过实例来体验一下。

10.7.1层转换为表格

这项功能一般来说先使用层将元素精确定位以后，然后再将层转换为表格，具体的操作步骤如下。

层与表格的相互转换

Step01打开一个新的文档窗口，选择主菜单中的“查看”→“网格”→“显示网格”命令，显示网格。

Step02首先在文档窗口中添加6个层，将【层】面板中的【防止重叠】项勾选。

Step03然后分别在每个层中插入图片，将层移动至合适的位置，如图10-1-21所示。

图10-1-21用层来精确定位元素

Step04选择主菜单中的“修改”→“转换”→“层到表格”命令，这时弹出“转换层为表格”对话框，如图10-1-22所示。

图10-1-22“转换层为表格”对话框

在对话框中可以选择转换的目标表格为：

●【最精确】：

精确方式转换，为每一层建立一个单元格，并参加所有附加单元格，以保证各单元格之间的距离。

●【最小】：

最小方式转换，去掉宽度或高度小于指定像素数目的空单元格，这就是说，当某些层的位置坐标比较接近时，使它们对齐。

这样可以使空单元格数目减少，从而减少HTML文件的大小，但这样转换后的页面与页面有一些差别。

●【使用透明GIF】：

是否使用透明GIF图，如果选中此选项，将会在转换的表格最后一行中填充透明GIF图，以保证在所有的浏览器中都有相同的外观。

但请注意，如果使用了透明GIF图，将不能拖曳表格线来编辑表格了，如果不选中此选项，还可以编辑表格，但不能保证在所有的浏览器中有相同的外观。

●【置于页面中央】：

选中此选项，转换的表格将在页面中居中对齐，否则将左对齐。

●【防止层重叠】：

该选项一般要勾选，如果有层发生重叠，将无法进行转换工作。

●【显示层面板】、【显示网格】、【靠齐到网格】这3项根据需要可选可不选。

Step05在上面的对话框中保持默认设置，直接单击【确定】按钮，将打开一个新的文档窗口，如图10-1-23所示。

图10-1-23网页中层转换为表格

层被纵横交错的表格替代，虽然有一些不必要的单元格存在，但确保了元素的位置保持不变。

10.7.2表格转换为层

如果要改变网页中各元素的布局，使用表格则灵活性要受到一定的限制，最灵活的方法就是将元素置于层内，然后移动层来改变网页的布局，这就需要将表格转换为层，具体方法如下。

表格转换为层

Step01接上例。

选择主菜单中的“修改”→“转换”→“转换表格为层”命令，弹出“转换表格为层”对话框，如图10-1-24所示。

图10-1-24“转换表格为层”对话框

Step02单击【确定】按钮，将表格转换为层，然后移动层，将网页的布局重新调整，如图10-1-25所示。

图10-1-25移动层来变换网页的布局

这时网页的布局又有了较大的改观，这只是通过简单地拖动鼠标就实现了。

如果通过设置表格来追求这种效果，则会费上一番周折。