使用层布局网页

1、第第12 12章章 使用层布局网页使用层布局网页本章学习要点：本章学习要点：l认识认识DreamweaverDreamweaver MX 2004 MX 2004的层的层l表格与层相互转换表格与层相互转换l层的基本操作层的基本操作12. 1 12. 1 认识认识DreamweaverDreamweaver MX 2004 MX 2004的层的层12. 2 12. 2 表格与层相互转换表格与层相互转换12123 3 层的基本操作层的基本操作12. 1 12. 1 认识认识DreamweaverDreamweaver MX 2004 MX 2004的层的层12.1.112.1.1层的概述层的概述1

2、2.1.2 12.1.2 层的分类层的分类12.1.312.1.3设置层的首选参数设置层的首选参数12.1.4 12.1.4 创建层及嵌套层创建层及嵌套层12.1.112.1.1层的概述层的概述层就是网页内容的一个容器层就是网页内容的一个容器, ,只要是能放置在网只要是能放置在网页中的内容页中的内容, ,都可以放置在层当中。都可以放置在层当中。层最主要的特性就是它可以在网页上自由浮动层最主要的特性就是它可以在网页上自由浮动, ,从而实现对网页元素的精确定位。而且层的位置是可从而实现对网页元素的精确定位。而且层的位置是可以重叠的以重叠的, ,可以任意地控制层的前后位置、显示与隐藏可以任意地控制层

3、的前后位置、显示与隐藏, ,大大增强了网页设计的灵活性。大大增强了网页设计的灵活性。12.1.2 12.1.2 层的分类层的分类在在DreamweaverDreamweaver MX 2004 MX 2004中中, ,最常用的两种层是：最常用的两种层是：CSSCSS层和层和NetscapeNetscape层。层。lCSSCSS层层 CSSCSS层使用标记层使用标记和和定位页面内容。定位页面内容。lNetscapeNetscape层层 使用使用NetscapeNetscape的的和和标标记来定位页面内容。记来定位页面内容。12.1.312.1.3设置层的首选参数设置层的首选参数查看或设置层首选参

4、数查看或设置层首选参数, ,操作步骤如下：操作步骤如下：步骤步骤1 1：在：在DreamweaverDreamweaver MX 2004 MX 2004中选择菜单中选择菜单“编辑编辑(E)”|“(E)”|“首选参数首选参数(S)”(S)”命令命令, ,即显示首选参数对话框，从即显示首选参数对话框，从左侧的左侧的“类别类别”列表中选择列表中选择“层层”, ,如图如图12.112.1所示。所示。图图12.1“12.1“首选参数首选参数”对话框对话框步骤步骤2 2：在：在“首选参数首选参数”对话框中根据需要对以下内对话框中根据需要对以下内容进行设置。容进行设置。l在在“显示显示(V)”(V)”下拉

5、列表框有下拉列表框有“默认默认”（defaultdefault）、）、“继承继承”（inheritinherit）、）、“可见可见” ” （visiblevisible）、）、“隐隐藏藏”（hiddenhidden）等选项，可以选择默认。）等选项，可以选择默认。l在在“宽宽(W)” (W)” 文本框中选择默认宽度。文本框中选择默认宽度。l在在“高高(H)”(H)”文本框中选择默认高度。文本框中选择默认高度。l在在“背景颜色背景颜色(G)”(G)”中指定背景颜色中指定背景颜色, ,可从颜色选择器中可从颜色选择器中选择一种颜色。选择一种颜色。l在在“背景图像背景图像(T)”(T)”中选择中选择“浏

6、览浏览”按钮，在计算机上按钮，在计算机上查找一个图像文件，例如选择查找一个图像文件，例如选择“image1image1图书图书5.jpg”5.jpg”文件。文件。l选择选择“嵌套嵌套” ” 和和“Netscape 4 Netscape 4 兼容性兼容性”两个复选框。两个复选框。l单击单击“确定确定”按钮完成首选参数设置。按钮完成首选参数设置。 12.1.4 12.1.4 创建层及嵌套层创建层及嵌套层1.1.创建单个层创建单个层2.2.创建多个层创建多个层3.3.嵌套层嵌套层1.1.创建单个层创建单个层对层有了基本认识后对层有了基本认识后, ,现在学习在文档中创建层的现在学习在文档中创建层的方法

7、方法, ,这里介绍两种在文档中插入层的方法。这里介绍两种在文档中插入层的方法。方法方法1 1 使用对象面板创建单个层使用对象面板创建单个层操作步骤如下：操作步骤如下：步骤步骤1 1：在：在DreamweaverDreamweaver MX 2004 MX 2004中打开设计窗口。中打开设计窗口。步骤步骤2 2：在对象面板中选择布局对象组：在对象面板中选择布局对象组, ,单击单击“描绘层描绘层”按钮按钮, ,如图如图12.212.2所示。所示。图图12.2 “12.2 “布局布局”选项卡的描绘层按钮选项卡的描绘层按钮描绘层按钮描绘层按钮步骤步骤3 3：在页面中要插入层的地方单击鼠标：在页面中要插

8、入层的地方单击鼠标, , 拖拖出矩形区域即可，如图出矩形区域即可，如图12.312.3所示。所示。图图12.3 12.3 单个层绘制单个层绘制方法方法2 2 使用菜单命令创建单个层使用菜单命令创建单个层操作步骤如下：操作步骤如下：步骤步骤1 1：先将鼠标指针定位在页面要插入层的：先将鼠标指针定位在页面要插入层的位置。位置。步骤步骤2 2：选择菜单：选择菜单“插入插入(I)”|“(I)”|“布局对象布局对象(Y)”|“(Y)”|“层层(Y)”(Y)”命令命令, ,就可以在页面中插入一个层就可以在页面中插入一个层, ,该层的大小就是在首选参数对话框中的该层的大小就是在首选参数对话框中的“宽宽(W)

9、”(W)”和和“高高(H)”(H)”域中设置的大小。域中设置的大小。步骤步骤3 3：使用鼠标拖动层周围的小方块调整层：使用鼠标拖动层周围的小方块调整层的大小，直到层的大小合适为止。的大小，直到层的大小合适为止。2.2.创建多个层创建多个层创建多个层和单个层的方法、步骤几乎相同，所不创建多个层和单个层的方法、步骤几乎相同，所不同的是，创建多个层只要按住同的是，创建多个层只要按住CtrlCtrl键，在页面中反复拖动键，在页面中反复拖动鼠标，就可以拖出多个层，如图鼠标，就可以拖出多个层，如图12.412.4所示。所示。图图12.412.4创建多个层创建多个层在图在图12.412.4中，按住中，按住s

10、hiftshift键，用鼠标逐个单击层，键，用鼠标逐个单击层，可以选中每个层。每个层都显示小方块，只有可以选中每个层。每个层都显示小方块，只有 1 1个层个层是是8 8个黑小方块，这个带黑小方块的层是当前使用的个黑小方块，这个带黑小方块的层是当前使用的层，向层中添加内容时，只有带黑小方块的层能够使层，向层中添加内容时，只有带黑小方块的层能够使用。其它层边框上都是空心小方块。用。其它层边框上都是空心小方块。3.3.嵌套层嵌套层嵌套层就是在一个层内插入另外的层嵌套层就是在一个层内插入另外的层, ,即层中套层。即层中套层。操作步骤如下：操作步骤如下：步骤步骤1 1：首先在设计窗口中插入一个单个层。：

11、首先在设计窗口中插入一个单个层。步骤步骤2 2：将光标定位在该层内。：将光标定位在该层内。步骤步骤3 3：单击布局对象中的：单击布局对象中的“描绘层描绘层”按钮。按钮。步骤步骤4 4：在单个层内拖动鼠标，插入一个层：在单个层内拖动鼠标，插入一个层, ,重复第重复第二步到第四步，即可嵌套多个层，如图二步到第四步，即可嵌套多个层，如图12.512.5所示。所示。 图图12.512.5嵌套层嵌套层12.212.2表格与层相互转换表格与层相互转换 12.2.112.2.1将层转换为表格将层转换为表格 12.2.212.2.2将表格转换为层将表格转换为层 12.2.3 12.2.3 表格与层混合排版表格

12、与层混合排版12.2.112.2.1将层转换为表格将层转换为表格层虽然应用方便，能够灵活、精确地定位页面元层虽然应用方便，能够灵活、精确地定位页面元素素, ,但是但是, ,如果使用低版本的浏览器浏览页面如果使用低版本的浏览器浏览页面, ,页面将页面将不不能正确显示。在这种情况下能正确显示。在这种情况下, ,网页就不能存在层网页就不能存在层, , 必必须须通过通过DreamweaverDreamweaver MX 2004 MX 2004的功能将层转化为表格。的功能将层转化为表格。将层转换为表格的操作步骤如下：将层转换为表格的操作步骤如下：步骤步骤1 1：在：在“渊博书屋渊博书屋”站点上新建一个

13、文件站点上新建一个文件Untitled-7.htmUntitled-7.htm，在设计窗口中插入两个层，如图，在设计窗口中插入两个层，如图12.612.6所示。所示。图图12.6 12.6 无重叠层无重叠层步骤步骤2 2：选择菜单：选择菜单“修改修改(M)”|“(M)”|“转换转换(C)”|“(C)”|“层到表格层到表格(L)”(L)”命令命令, ,弹出转换层为表格对话框弹出转换层为表格对话框, ,如图如图12.712.7所示。所示。图图12.7 12.7 转换层为表格对话框转换层为表格对话框 此对话框中各选项的功能如下：此对话框中各选项的功能如下：l“最精确最精确(A)”(A)”选中此单选按

14、钮时选中此单选按钮时, ,为每一个层建立一为每一个层建立一个表格单元个表格单元, ,以及为保持层与层之间的间隔必须的附加以及为保持层与层之间的间隔必须的附加单元格。单元格。l“最小：合并空白单元最小：合并空白单元(S)” (S)” 选中此单选按钮时选中此单选按钮时, ,如果如果几个层被定位在指定的像素值之内几个层被定位在指定的像素值之内, ,那么这些层的边缘那么这些层的边缘就要对齐。在该项下方的文本框内输入数值可以指定最就要对齐。在该项下方的文本框内输入数值可以指定最小的像素值。选择该项的优点是生成的表格空行和空列小的像素值。选择该项的优点是生成的表格空行和空列最少。最少。l“使用透明使用透明

15、GIF(T)” GIF(T)” 选中此复选框时选中此复选框时, ,可以强制用透可以强制用透明的明的GIFGIF图像填充表格的最后一行。这样做可以让表格图像填充表格的最后一行。这样做可以让表格在所有浏览器中的显示结果都一样。值得注意的是在所有浏览器中的显示结果都一样。值得注意的是, ,选选中该复选框将不可能拖动由层转换生成的表格的列来改中该复选框将不可能拖动由层转换生成的表格的列来改变表格的大小。变表格的大小。l“置于页面中央置于页面中央(C)” (C)” 选中此复选框时选中此复选框时, ,可使生成的表可使生成的表格在文档中居中对齐。不选中该复选框时格在文档中居中对齐。不选中该复选框时, ,表格

16、的默认对表格的默认对齐方式是左对齐。齐方式是左对齐。l“防止层重叠防止层重叠(P)” (P)” 选中此复选框时选中此复选框时, ,可防止出现层重可防止出现层重叠的情况。叠的情况。l“显示层面板显示层面板(L)” (L)” 选中此复选框时选中此复选框时, ,可以在完成层转可以在完成层转换表格后显示换表格后显示“层层”面板。面板。l“显示网格显示网格(G)” (G)” 选中此复选框时选中此复选框时, ,可以在完成层转换可以在完成层转换表格后显示网格。表格后显示网格。l“靠齐到网格靠齐到网格(N)” (N)” 选中此复选框时选中此复选框时, ,可以启用对齐网可以启用对齐网格功能。格功能。步骤步骤3

17、3：设置相应的选项后，单击：设置相应的选项后，单击“确定确定”按钮，层转换为按钮，层转换为表格就完成了。如图表格就完成了。如图12.812.8所示。所示。图图12.8 12.8 层转换为表格层转换为表格12.2.212.2.2将表格转换为层将表格转换为层通过前面讲述已经知道，使用表格对页面进行通过前面讲述已经知道，使用表格对页面进行调整很麻烦调整很麻烦, ,如果把表格布局转换为层布局如果把表格布局转换为层布局, ,就用层就用层可可随意拖动的优点来调整布局。随意拖动的优点来调整布局。将表格转换为层的操作步骤如下：将表格转换为层的操作步骤如下：步骤步骤1 1：在：在“渊博书屋渊博书屋”站点上新建一

18、个表格文件站点上新建一个表格文件Untitled-8.htmUntitled-8.htm，如图，如图12.912.9所示。所示。图图12.9 12.9 表格文件表格文件Untitled-4.htmUntitled-4.htm步骤步骤2 2：选择菜单：选择菜单“修改修改(M)”|“(M)”|“转换转换(C)”|“(C)”|“表格表格到层到层(T)”(T)”命令命令, ,弹出转换表格为层对话框弹出转换表格为层对话框, ,如图如图12.1012.10所示。所示。图图12.10 12.10 转换表格为层对话框转换表格为层对话框转换表格为层对话框中的各选项功能如下：转换表格为层对话框中的各选项功能如下：

19、l“防止层重叠防止层重叠(P)“ (P)“ 选中该复选框时选中该复选框时, ,防止层在创防止层在创建、移动和调整时互相重叠。建、移动和调整时互相重叠。l“显示层面板显示层面板(L)” (L)” 选中该复选框时选中该复选框时, ,在完成表格在完成表格转换后显示转换后显示“层层”面板。面板。l“显示网格显示网格(G)” (G)” 选中该复选框时选中该复选框时, ,在完成表格在完成表格转换后显示网格。转换后显示网格。l“靠齐到网格靠齐到网格(S)”(S)”选中该复选框时选中该复选框时, ,启用靠齐到启用靠齐到网格功能。网格功能。步骤步骤3 3：选择：选择“布局工具布局工具”中的复选框，单击中的复选框

20、，单击“确定确定”按钮，按钮，即可将表格转换为层，如图即可将表格转换为层，如图12.1112.11所示。所示。图图12.11 12.11 表格转换为层表格转换为层12.2.3 12.2.3 表格与层混合排版表格与层混合排版表格与层的混合排版是经常使用的一种方法，既实表格与层的混合排版是经常使用的一种方法，既实用又操作方便。操作步骤如下：用又操作方便。操作步骤如下：步骤步骤1 1：首先打开：首先打开“D:D:渊博书屋渊博书屋Untitled-Untitled-6.tml”6.tml”网页，如图网页，如图12.1212.12所示。所示。 图图12.12 “D:12.12 “D:渊博书屋渊博书屋Un

21、titled-6.tml”Untitled-6.tml”网页网页步骤步骤2 2：将光标插入在标题拦的右上角。：将光标插入在标题拦的右上角。步骤步骤3 3：选择菜单：选择菜单“编辑编辑(E)”|“(E)”|“首选参数首选参数(S)”(S)”命令命令。在首选参数对话框中选择。在首选参数对话框中选择“层层”，在，在“背景图像背景图像(I)”(I)”中中选择选择“image1/image1/梦幻小说梦幻小说.gif”.gif”，如图，如图12.1312.13所示。所示。 图图12.13 12.13 首选参数对话框首选参数对话框步骤步骤4 4：然后单击：然后单击“确定确定”按钮。按钮。步骤步骤5 5：选

22、择布局对象中的：选择布局对象中的“描绘层描绘层”，在标，在标题拦的右上角拖动鼠标，即可插入层。插入层后标题题拦的右上角拖动鼠标，即可插入层。插入层后标题拦的右上角显示层，如图拦的右上角显示层，如图12.1412.14所示。所示。插入的图层插入的图层图图12.14插入的层插入的层 12123 3 层的基本操作层的基本操作12.3.112.3.1选择层选择层在文件夹中新建文件，在文件中插入两个层。在文件夹中新建文件，在文件中插入两个层。选择层有如下三种方法。选择层有如下三种方法。 第一种方法：第一种方法：单击层边框单击层边框, ,选择一个层，如果要选择多个层选择一个层，如果要选择多个层, ,按住按

23、住ShiftShift键的同时单击层的边框即可键的同时单击层的边框即可, ,如图如图12.1512.15所示。所示。图图12.1512.15按住按住shiftshift键选择多个层键选择多个层第二种方法：第二种方法：单击层标识符单击层标识符, ,此方法必须先选择菜单栏中的此方法必须先选择菜单栏中的“编编辑辑(E)”|“(E)”|“首选参数首选参数(S)”(S)”命令命令, ,打开首选参数对话框，打开首选参数对话框，选择选择“不可见元素不可见元素”选项卡选项卡, ,将将“层锚记层锚记”复选框选中复选框选中, ,如图如图12.1612.16所示。所示。图图12.16 “12.16 “首选参数首选参

24、数”中的中的“层锚记层锚记”单击单击“确定确定”按钮，在设计窗口中显示两个按钮，在设计窗口中显示两个“层锚记层锚记”，这个，这个“层锚记层锚记”就是层标识符。如图就是层标识符。如图12.1712.17所示。所示。用鼠标单击用鼠标单击“层锚记层锚记”，即可选择层。，即可选择层。层锚记层锚记图图12.17 插入插入“层锚记层锚记”的页面的页面“层锚记层锚记”的主要作用是在同一个网页内不同层之间的主要作用是在同一个网页内不同层之间进行跳转链接。用鼠标单击每个进行跳转链接。用鼠标单击每个“层锚记层锚记”，即可在两个，即可在两个层层之间跳转。之间跳转。第三种方法：第三种方法：在在“层层”面板中单击层的名

25、称面板中单击层的名称, ,如果要选多个如果要选多个层层, ,按住按住ShiftShift键的同时键的同时, ,单击每个层的名称，如图单击每个层的名称，如图12.1812.18所示。所示。图图12.18 “12.18 “层层”面板面板12.3.2 12.3.2 调整层的大小及对齐方式调整层的大小及对齐方式可以单个调整层的大小可以单个调整层的大小, ,也可以同时调整多个层也可以同时调整多个层的大小，以使层具有合适的宽度和高度。的大小，以使层具有合适的宽度和高度。调整单个层的大小调整单个层的大小, ,操作步骤如下：操作步骤如下：步骤步骤1 1：在设计窗口中：在设计窗口中, ,选择一个层。选择一个层。

26、步骤步骤2 2：选择以下方法之一，调整层的大小。：选择以下方法之一，调整层的大小。l通过拖动该层的调整柄调整大小。通过拖动该层的调整柄调整大小。l若要一次调整一个像素的大小若要一次调整一个像素的大小, ,在按住在按住CtrlCtrl键的同键的同时，按下方向键，用方向键移动层的右边框和下边时，按下方向键，用方向键移动层的右边框和下边框。框。l按网格靠齐增量来调整大小按网格靠齐增量来调整大小, ,在按住在按住Shift+CtrlShift+Ctrl键键的同时，按下方向键，用方向键移动层的右边框和的同时，按下方向键，用方向键移动层的右边框和下边框调整大小。下边框调整大小。l在属性面板中在属性面板中,

27、 ,输入输入“宽度宽度(W)”(W)”和和“高度高度(H)”(H)”的的值。值。同时调整多个层的大小同时调整多个层的大小, ,操作步骤如下：操作步骤如下：步骤步骤1 1：在设计窗口中：在设计窗口中, ,选择多个层。选择多个层。步骤步骤2 2：在属性面板中的：在属性面板中的“多个层多个层”中输入中输入“宽度宽度(W)”(W)”和和“高度高度(H)”(H)”值值, ,这些值将应用于所有选定层。这些值将应用于所有选定层。12.3.3 12.3.3 移动层移动层移动一个或多个选定的层移动一个或多个选定的层, ,操作步骤如下：操作步骤如下：步骤步骤1 1：在设计窗口中：在设计窗口中, ,选择一个或多个层

28、。选择一个或多个层。步骤步骤2 2：选择以下方法之一移动层。：选择以下方法之一移动层。l选中一个层，这个层四边出现选中一个层，这个层四边出现8 8个小黑方块，然后用鼠个小黑方块，然后用鼠标拖动选择柄。标拖动选择柄。 l若要一次移动一个像素若要一次移动一个像素, ,则使用箭头键。在按住则使用箭头键。在按住ShiftShift键的同时按箭头键移动。键的同时按箭头键移动。12.3.412.3.4对齐层对齐层对齐两个或更多个层对齐两个或更多个层, ,操作步骤如下：操作步骤如下：步骤步骤1 1：在设计窗口中：在设计窗口中, ,选择一个层。选择一个层。步骤步骤2 2：选择菜单：选择菜单“修改修改(M)”|

29、“(M)”|“对齐对齐(N)”(N)”命令。命令。步骤步骤3 3：选择一个对齐选项，如果选择：选择一个对齐选项，如果选择“对齐上对齐上缘缘”, ,所有层都会按上边框对齐。所有层都会按上边框对齐。 12.3.512.3.5将层对齐到网格将层对齐到网格网格是在设计窗口中对层进行绘制、定位或大小调网格是在设计窗口中对层进行绘制、定位或大小调整的可视化向导。可以使页面元素在移动它们时自动整的可视化向导。可以使页面元素在移动它们时自动靠齐到网格靠齐到网格, ,并通过指定网格设置来更改网格或控制靠并通过指定网格设置来更改网格或控制靠齐行为。齐行为。l显示或隐藏网格显示或隐藏网格, ,选择菜单选择菜单“查看

30、查看(V)”|“(V)”|“网格网格(G)”|“(G)”|“显示网格显示网格(S)”(S)”命令。命令。l启用或禁用靠齐启用或禁用靠齐, ,选择菜单选择菜单“查看查看(V)”|“(V)”|“网格网格(G)”|“(G)”|“靠齐到网格靠齐到网格(N)”(N)”命令。命令。更改网格设置更改网格设置, ,操作步骤如下：操作步骤如下：步骤步骤1 1：选择菜单：选择菜单“查看查看(V)”|“(V)”|“网格网格(G)”|“(G)”|“网格设置网格设置(G)”(G)”命令命令, ,则出现网格设置对话框则出现网格设置对话框, ,如图如图12.1912.19所示。所示。 图图12.19 “12.19 “网格设

31、置网格设置”对话框对话框步骤步骤2 2：根据需要设置选项。其中各选项意义如下：根据需要设置选项。其中各选项意义如下: :l“颜色颜色(C)” (C)” 指定网格线的颜色。单击色样表并从颜色指定网格线的颜色。单击色样表并从颜色选择器中选择一种颜色选择器中选择一种颜色, , 或者在文本框中输入一个十六或者在文本框中输入一个十六进制数。进制数。l“显示网格显示网格(S)” (S)” 使网格在设计窗口中可见。使网格在设计窗口中可见。l“靠齐到网格靠齐到网格(G)” (G)” 使页面元素靠齐到网格线。使页面元素靠齐到网格线。l“间隔间隔(S)” (S)” 控制网格线的间距。控制网格线的间距。l“显示显示

32、” ” 指定网格线是显示为线条还是显示为点。指定网格线是显示为线条还是显示为点。步骤步骤3 3：设置完成后：设置完成后, ,单击单击“确定确定”按钮完成对网格的按钮完成对网格的设置。设置。12.3.612.3.6改变层的重叠顺序改变层的重叠顺序当多个层重叠在一起时当多个层重叠在一起时, ,通过调整这些层的重叠通过调整这些层的重叠顺序顺序, ,以显示最佳效果。以显示最佳效果。调整层重叠顺序的方法主要有如下两种：调整层重叠顺序的方法主要有如下两种：第一种：第一种：设置设置Z Z轴值。在层的轴值。在层的“属性属性”检查器中的检查器中的“Z Z轴轴(Z)”(Z)”文本框中输入一个数字文本框中输入一个数

33、字, ,如图如图12.2012.20所示。所示。其中其中, ,输入一个较大的数字可将该层在层叠输入一个较大的数字可将该层在层叠顺序中上移顺序中上移, , 输入一个较小的数字可将该层在层叠输入一个较小的数字可将该层在层叠顺序中下移。顺序中下移。图图12.20 “属性属性”检查器检查器第二种：第二种：使用使用“层层”面板。操作步骤如下：面板。操作步骤如下：步骤步骤1 1：选择菜单：选择菜单“窗口窗口(W)”|“(W)”|“层层(L)”(L)”命令命令, ,打开打开“层层”面板面板, ,如图如图12.2112.21所示。所示。图图12.21 “12.21 “层层”面板面板 步骤步骤2 2：将层向上或

34、向下拖至所需的堆：将层向上或向下拖至所需的堆叠顺序叠顺序, ,当移动层时会出现一条线当移动层时会出现一条线, ,它指示该层它指示该层将出现的位置。将出现的位置。步骤步骤3 3：当这条线出现在层叠顺序中的：当这条线出现在层叠顺序中的所需位置时所需位置时, ,松开鼠标按钮松开鼠标按钮, ,拖动的层被拖到相拖动的层被拖到相应的位置。应的位置。 另外另外, ,可以直接在可以直接在“层层”面板的面板的Z Z列中修改列中修改Z Z轴轴的值来改变层的层叠顺序的值来改变层的层叠顺序, ,方法是方法是: :单击层名称后面的单击层名称后面的Z Z列区域列区域, ,待显示为编辑状待显示为编辑状态时输入新值态时输入新

35、值, ,如图如图12.2212.22所示。所示。 图图12.22 12.22 修改修改Z Z轴数值轴数值修改数值修改数值212.3.712.3.7设置层属性设置层属性 当选择一个层时当选择一个层时, ,层的层的“属性属性”检查器将显示层的属性。检查器将显示层的属性。查看和设置层属性查看和设置层属性, ,操作步骤如下：操作步骤如下： 步骤步骤1 1：在设计窗口中选中一个层：在设计窗口中选中一个层, ,如图如图12.2312.23所示。所示。 图图12.23 12.23 选中第一个层选中第一个层步骤步骤2 2：在属性面板中：在属性面板中, ,单击右下角的展开箭头，单击右下角的展开箭头，以查看层的所

36、有属性以查看层的所有属性, ,如图如图12.2412.24所示。所示。箭头向上表示层的属性面板展开，箭头向下箭头向上表示层的属性面板展开，箭头向下表示层的属性面板未展开。表示层的属性面板未展开。单击展开箭头单击展开箭头图图12.24 层的属性面板层的属性面板步骤步骤3：根据需要设置层的属性：根据需要设置层的属性, ,按按TabTab键或键或EnterEnter键键确定。确定。属性面板中各选项的功能如下属性面板中各选项的功能如下(1)(1)：l“层编号层编号”此下拉列表框用于指定一个名称此下拉列表框用于指定一个名称, ,以便在以便在“层层”面板和面板和JavaScript JavaScript

37、代码中标识该层。只应使用代码中标识该层。只应使用标准的字母数字字符标准的字母数字字符, ,而不要使用空格、连字符、而不要使用空格、连字符、 斜斜杠或句号等特殊字符。每个层都必须有它自己的唯一杠或句号等特殊字符。每个层都必须有它自己的唯一编号编号, ,如果不输入编号如果不输入编号, , 则为默认的则为默认的LayerLayer* *( (其中其中* *号是号是随插入的层的多少依次递增随插入的层的多少依次递增) )。l“左左(L)”(L)”与与“上上(T)”(T)”这两个文本框用于指定层的这两个文本框用于指定层的左上角相对于页面左上角相对于页面( (如果嵌套如果嵌套, ,则为父层则为父层) )左上角的位置。左上角的位置。属性面板中各选项的功能如下属性面板中各选项的功能如下(2)：l“宽宽(W)”(W)”与与“高