利用图层技术制作网

1、.第九章 利用图层技术制作网页层是一种HTML页面元素，可以将它放置在页面的任意位置。层可以包含文本、图像或其他可放在HTML文档正文中的任何内容。本章介绍在网页制作中图层技术的应用。通过本章的学习，读者应该掌握以下内容：·认识图层·图层的基本操作·图层与表格的操作·利用图层制作动画9.1 认识图层有网页创作经历的人可能都有过这样的经历：在网页中，控制文字和对象的位置实在是太困难了，有限的HTML标记和烦琐的源代码极大限制了用户对网页内容的控制能力，为了实现文本和对象在页面中的定位，人们不得不采用其他一些特殊手段，比如利用表格来摆放文本和对象。当页面元素

2、较多，位置较复杂时，单纯利用表格定位就有些不方便了。在Dreamweaver中，通过图层可以实现对页面元素的精确定位，其友好的可视化特性能够帮助用户在文档中轻松地创建图层、定位文档内容，不仅避免了烦琐的源代码输入，而且创建出的页面内容定位效果也非常简洁、高效。什么是层呢？层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。没有层的网页像一个平面，即由x轴和y轴组合成的二维空间，而层所确定的区域是在z轴上，它摆脱了二维平面的束缚，形成了一个三维空间结构，如图9-1所示。同时，层与层之间的关系也由z轴的坐标来决定。一般来说，默认后建立的层的z值大，先建立的层z值小，z值大的层可以覆盖z

3、值小的层，当然也可以通过调整来改变先前层的叠放次序。层不仅可以有特殊的位置，也可以有丰富的内容。层可以包含文字、图像、表单、插件，层中甚至可以包含另一个层。由于层可以具有特殊的位置和内容，因此，在网页制作中也可以用层来进行页面布局，可以实现页面元素的精确定位。把层和时间轴配合使用，可以很方便地设计出动态页面效果，层与行为配合使用还可以很方便地制作出滚动字幕、下拉式菜单等页面效果。9.2 图层的基本操作9.2.1 创建图层当在文档中放置层时，Dreamweaver将在代码中插入该层的HTML标签。可以选择利用Dreamweaver将div标签或span标签用于层中。默认情况下，Dreamweav

4、er会使用div标签创建层。div和span标签之间的区别在于浏览器不支持层在div标签之前和之后放置额外的换行符。也就是说，div标签是块级别的元素，而span标签则是内联元素。大多数情况下，在不支持层的浏览器中，最好让层内容出现在自己的段落中，因此大多数情况下最好使用div而不是span。若要进一步提高在较早浏览器中的可读性，应注意放置层代码的位置。定义层的代码可以位于HTML文件正文中的任意位置。当在Dreamweaver中绘制一个层时，该层会显示在指定的地方，但Dreamweaver将在页开头且紧接在body标签之后插入该层的代码(如果使用的是“插入层”命令而不是绘制层，层代码将在插入

5、点处插入)。如果创建一个嵌套层，Dreamweaver会在定义父层的标签内插入代码。Dreamweaver可以方便地在页面上创建层并精确地将层定位。Dreamweaver提供了几种不同的方法来创建层，下面介绍几种常用的方法。1.利用工具创建图层(1)单击对象面板上的“描绘图层”按钮。(2)将鼠标移动到文档窗口中，鼠标指针会变成“十”字形状。(3)在文档窗口中将要放置图层的位置上按下鼠标左键。(4)拖动鼠标，根据需要绘制图层的大小，释放鼠标，图层就被放置在所希望的位置上，如图9-2所示。图9-2 描绘图层2.通过菜单创建图层(1)将插入点放置在文档窗口中。(2)单击“插入”“层”命令，即可在文档

6、窗口中插入一个预设大小的图层。3.拖动法创建图层将对象面板上的“描绘图层”按钮直接拖动到文档中，即可在文档中放置一个预设大小的图层。9.2.2 激活图层要把对象放入图层中，首先要激活图层。未被选中的图层如图9-3所示。把鼠标放至层内任意位置单击，即可激活层。此时，光标在层中闪烁，被激活的层的边界突出显示(由灰色变成黑色)，选择手柄也同时显示出来，如图9-4所示。 图9-3 未选中的图层 图9-4 被击活的图层9.2.3 选中图层1.选中一个图层要选中一个图层，有如下几种方法。方法一：单击文档中的图层标记，即可选中对应的图层，如果图层标记没有显示，可以打开“查看”菜单，选择“可视化助理”，在其下

7、拉菜单中选择“隐藏元素”命令，显示“不可见元素”命令。选中的图层，在其边框上会出现八个调整手柄，如图9-5所示。通过拖动手柄可以调整图层的大小。方法二：单击图层中的任意位置，首先激活图层，然后单击图层右上角的选择柄口，即可选中该图层。方法三：单击图层边框，即可选中该图层。方法四：在没有图层被激活的情况下，按Shift键，在单击图层中的任意位置，即可选中该图层。方法五：如果选中了多个图层，按住Ctrl+Shift键，再单击要选中的图层，即可选中该图层，而取消对其他图层的选择。方法六：按F2键打开图层面板，在图层面板上，单击图层的名称，即可在文档窗口中选中相应的图层，如图9-6所示。 图9-5 被

8、选中的图层 图9-6 在图层面板中选择图层2.选择多个图层如果希望同时选中多个图层，则可以按以下方法进行操作。方法一：按住Shift键，然后在每个要选中的图层中单击鼠标，即可选中多个图层。方法二：按住Shift键，然后在图层面板中单击两个或多个图层的名称，即可选中多个图层，如图9-7所示。图9-7 利用层面板选中多个图层选中多个图层的情形，如图9-8所示，其中最右边的图层是最后选中的图层。从图中可以看到，最后被选中的图层，其边框上的控制点是黑色的，而先选中的图层的控制点是白色的。图9-8 被选中的多个图层9.2.4 调节图层大小1.调整单个图层的大小用户可以调整单个层的大小，也可以同时调整多个

9、层的大小以使其具有相同的宽度和高度。如果已启用“防止重叠”选项，那么在调整层的大小时将无法使该层与另一个层重叠。调整单个图层大小的方法如下。(1)拖动图层边框的控制点来改变其大小选择图层。把光标定位在层的边框，单击后会出现8个控制点。上下(左右、斜方向)拖动层边框的控制点到合适的位置，释放鼠标，就可以改变层的大小，如图9-9所示。 图9-9 拖动图层边框控制点改变层的大小(2)利用属性面板精确调整图层的大小选择要调整的图层，打开属性面板，如图9-10所示。在属性检查器的“高”和“宽”文本框中修改层的宽度值和高度值。图9-10 利用属性检查器调整图层的大小(3)利用键盘来调整图层的大小选择要调整

10、的图层。按Ctrl+方向键，每次调整一个像素单位。按Ctrl+Shift+方向键，每次调整一个网格单位。注意：在调整层的大小时，当层比图片大时，图片的尺寸保持不变，而层最小只能调整到图片的大小。在调整层中图片的大小时，层的尺寸会随着图片的大小而调整。2.调整多个图层的大小(1)利用菜单调整多个图层的大小在设计视图中按Shift键选择多个图层。单击“修改”“对齐”“设成宽度相同”或“修改”“对齐”“设成高度相同”，如图9-11所示。图9-11 “对齐”命令选项注意：多个图层调整后的高度和宽度以最后一个被选中的图层的(黑色突出显示)宽度或高度为基准。(2)利用属性面板精确调整多个图层的大小选择要调

11、整的图层，打开其属性面板。在属性面板的多个层“高”和“宽”文本框中修改所有选中的层的宽度值和高度值，如图9-12所示。图9-12 利用属性检查器调整多个图层的大小9.2.5 移动图层除了图层的大小可以被调整以外，图层还可以被随意移动。正是这一特点，方便了网页元素的定位，使我们可以方便地利用图层进行网页布局。图层移动时，首先应该选中它，然后可以按以下方法进行操作。1.拖动层拖动层边框左上角的方形手柄到适合的位置，如图9-13所示，然后释放鼠标即可。图9-13 拖动图层2.利用属性面板在属性面板的“左”或“右”文本框中输入新的水平或垂直的坐标值，如图9-14所示。图9-14 利用属性检查器移动图层

12、3.利用键盘每按一次方向键，则移动一个像素单位：若按Shift键的同时按一次方向键，则移动一个网格单位。9.2.6 对齐图层先选中多个要对齐的层，单击“修改”“对齐”“左对齐”(右对齐、对齐上缘、对齐下缘)，如图9-11所示。9.2.7 图层与网格的对齐在调整层的大小和位置时，如果配合网格线和吸附功能的设置，则层的调整就会更加精确了。要显示网格线，选择“查看”“网格”“显示网格”命令即可，如图9-15所示。图9-15 显示网格线设置网格和吸附的值的步骤如下。(1)选择“查看”“网格”“网格设置”命令。(2)在对话框中，用户可以根据需要进行选项设置。颜色：用于设置网格线的颜色。间隔：用于设置网格

13、线的间距和间距单位。显示：该选项组的单选按钮用于设置网格用线还是用点来显示。(3)单击“确定”按钮完成设置，如图9-16所示。图9-16 “网格设置”对话框注意：不论网格是否可见，都可以选中“靠齐到网格”。9.3 层面板的应用9.3.1 层属性面板的应用用户可以在属性面板中查看和设置层的各种属性。选择一个层，单击“窗口”“属性”，打开层属性面板，如图9-17所示，各选项含义如下。图9-17 设置层的属性·层编号：用于指定一个名称，以便在“层”面板和JavaScript代码中标识该层。输入名称时只使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己

14、的惟一名称。·“左”和“上”(左侧和顶部)：指定层的左上角相对于页面(如果嵌套，则为父层)左上角的位置。·“宽”和“高”：指定层的宽度和高度。·Z轴：确定层的z轴(即层叠顺序)。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的层叠顺序时，使用“层”控制面板操作要比输入特定的z轴更为简便。·显示：指定该层最初是否是可见的。请从下列选项中选择。默认不指定可见性属性。当未指定可见性时，大多数浏览器都会默认为“继承”。继承使用该层父级的可见性属性。可见显示该层的内容，而不管父级的值是什么。隐藏隐藏这些层的内容，而不管父级的值是

15、什么。请注意，创建的隐藏层会像可见层一样占用相同的空间。使用脚本语言(如JavaScript)可控制可见性属性并动态地显示层的内容。·背景图像：指定层的背景图像。单击其文件夹图标可浏览到一个图像文件并将其选定。·背景颜色：指定层的背景颜色。如果将此选项留为空白，则可以指定透明的背景，如图9-18所示。图9-18 背景颜色·标签：指定用来定义该层的HTML标签。·溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。“visible”(可见)指示在层中显示额外的内容。实际上，该层会通过延伸来容纳额外的内容。“hidden”(隐藏)指定不在浏览器中显示

16、额外的内容。“scroll”(滚动)指定浏览器应在层上添加滚动条，而不管是否需要滚动条。“auto”(自动)指定浏览器仅在需要时(即当层的内容超过其边界时)才显示层的滚动条。·剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标，可在层的坐标空间中定义一个矩形(从层的左上角开始计算)。层经过“剪辑”后，只有指定的矩形区域才是可见的。如，若要使一个层中50像素宽、75像素高的矩形区域可见而其他内容均不可见，请将“左”设置为0，将“上”设置为0，将“右”设置为50，并将“下”设置为75。9.3.2 层控制面板的应用1.改变图层的可见性当处理文档时，可以使用“层”控制面板手动显示和隐藏层

17、，以查看页如何在不同的条件下显示。注意：当前选定层始终会变为可见，它在选定时将出现在其他层的前面。(1)若要更改层可见性，请执行以下操作。单击“窗口”“其他”“层”菜单命令，打开“层”面板。单击一个层的眼睛图标以更改其可见性。眼睛睁开表示该层是可见的。眼睛闭合表示该层是不可见的。如果没有眼形图标，该层通常会继承其父级的可见性(如果层没有嵌套，父级就是文档正文，而文档正文始终是可见的。)另外，如果未指定可见性，则不会显示眼睛图标(这在属性面板中表示为“默认”可见性)。(2)若要同时更改所有层的可见性，请执行以下操作。单击“窗口”“其他”“层”，打开“层”面板。单击位于列顶部的标头眼睛图标。注意：

18、此过程可以将所有层设置为“可见”或“隐藏”，但不能设置为“继承”。2.图层的叠放次序前面已经介绍过，层位于z轴上。通常，最先创建的层位于z轴的最下层，而最后创建的层则位于z轴的最上层。叠放的顺序可以从“层”面板上看到，如图9-19所示。图9-19 层的名称和Z值(1)利用“层”控制面板来调整层间的位置把光标放置到要改变位置的层的名称上，比如拖动Layer3到Layer1下面，如图9-20所示。图9-20 拖动Layer3层操作样图释放鼠标，Layer3便移到最底端，如图9-21所示。Layer3的z值由3变成1，表示其现在位于其他3个层的下面。图9-21 调整层的位置(2)利用层属性面板来调整

19、层间的位置在层属性面板中直接修改Layer3层的“Z轴”值，使其小于Layer1的“Z轴”值，如图9-22所示。 图9-22 修改层的Z值3.创建嵌套图层图层中可以放置各种文档内容，当然也可以放置图层，这就是所谓的图层嵌套。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。若要创建嵌套层，可以在另一个层中插入或绘制一个层，或者使用“层”控制面板。若要在绘制层时强制使用自动嵌套，可以在层参数中选择“嵌套”选项。(1)利用菜单命令创建嵌套层将插入点放入现有层中。选择“插入”“层”菜单命令，这时在现有图层中就会出现新的嵌套图层，如图9-23所示。图9-23 创建嵌

20、套层(2)绘制嵌套层在“插入”面板上单击“描绘层”按钮，然后通过拖动在现有层中绘制一个层。提示：在不同的浏览器中，嵌套层的外观，可能会有所不同。当创建嵌套层时，请在设计过程中频繁地检查它们在不同浏览器中的外观。(3)利用层控制面板将现有层嵌套在另一个层中单击“窗口”“其他”“层”，打开“层”控制面板。在“层”控制面板中选择一个层，然后通过按住Ctrl键并拖动，将层移动到层控制面板上的目标层。当目标层的名称被选中时，如图9-24所示，松开鼠标按钮。图9-24 在“层”控制面板中创建嵌套层操作完成后“层”控制面板如图9-25所示。注意：当在页面上使用嵌套层时，请使用Netscape调整大小修复命令

21、(“命令”“添加/删除Netscape调整大小修复”)。否则，当访问者在Netscape Navigator 4版中调整浏览器窗口的大小时，层会失去它们的位置。可以设置一个参数选择选项，以始终插入Netscape调整大小修复命令。9.4 图层与表格图层只有在较高版本的浏览器，如Internet Explorer4.0或Netscape Navigator 4.0及其更高版本中，才能够正确显示，如果要使设计的网页在3.0版本的浏览器中也正确显示，则不能使用图层来控制版面。很多人喜欢用表格作为控制版面的手段，在很多时候这是非常有效的。在Dreamweaver中，可以实现图层和表格之间相互转换。例如

22、，将图层转换为表格中的单元格，以使网页能够被3.0版本的浏览器正确浏览。当然，如果确信用户都使用4.0及更高版本的浏览器浏览网页，也可以将现有用表格设计的网页转换为用图层设计的网页，使网页显得更加专业化。9.4.1 防止图层重叠由于表格单元格不能重叠，Dreamweaver无法利用重叠层创建表格。如果要将文档中的层转换为表格，应使用“防止重叠”选项来约束层的移动和定位，使层不会重叠。在启用该选项后，则不能在现有层前面创建层，不能在现有层上移动层或调整层大小，也不能将某个层嵌套在现有层中。如果在创建重叠层后激活此选项？请拖动每个重叠层以使其离开其他层。当启用“防止层重叠”选项后，Dreamwea

23、ver不会自动修正页面上的现有重叠层。若要防止层重叠，可以使用以下方法之一。方法一：在“层”控制面板中，请选择“防止层重叠”选项，如图9-26所示。图9-26 “层”控制面板中“防止重叠”设置方法二：在“文档”窗口中，选择“修改”“排列顺序”“防止重叠”命令。注意：即使在启用“防止重叠”选项后，仍可以执行某些操作来将层重叠。如果使用“插入”菜单插入一个层，在属性面板中输入数字或者通过编辑HTML源代码来重定位层，则可以在此选项已启用时使层重叠或嵌套。如果出现重叠，请在“设计”视图中拖动各重叠层以使其分离。9.4.2 把图层转换为表格一些Web设计人员可能不喜欢使用表格或“布局”模式来创建自己的

24、布局，而是喜欢通过层来进行设计。在Dreamweaver MX中可以使用层来创建网页布局，然后将它们转换为表格(如果愿意的话)。例如，如果需要支持4.0版之前的浏览器，可能需要将层转换为表格。用户可以在层和表之间来回转换，以调整布局并优化网页设计。不能转换页面上特定的表格或层，必须将整个页面上的层转换为表格或将表格转换为层。要把页面中的层转换为表格，请按以下步骤操作。(1)选择“修改”“转换”“层到表格”命令。(2)在弹出的“转换层为表格”对话框中，选择需要的布局选项，如图9-27所示。图9-27 “转换层为表格”对话框若要设置“转换层为表格”对话框，请指定以下任一选项。最精确：为每个层创建一

25、个单元格，并附加保留层之间所必须的任何单元格。最小：折叠空单元格，指定如果层定位在指定数目的像素内，则层的边缘应对齐。如果选择此选工页，结果表格将包含较少的空行和空列，但可能与精确布局不匹配。使用透明GIF：用透明的GIF填充表格的最后一行。这将确保该表格在所有浏览器中以相同的列宽显示。当启用此选项后，不能通过拖动表列来编辑结果表格。当禁用此选项后，含透明GIF，在不同的浏览器中可能会具有不同的列宽。置于页面中央：将结果表格放置在页面的中央。如果禁用此选项，表格将在页面的左边缘开始。选择所需的布局工具，然后单击“确定”按钮。注意：在模板文档或已应用模板的文档中，不能将层转换为表格或将表格转换为

26、层。即应该在非模板文档中创建布局，然后再将该文档另存为模板之前进行转换。9.4.3 把表格转换为图层用表格也可以实现对页面的布局，如果用表格的布局感到不满意，可以把表格转换为图层后重新调整。将表格转换为图层的操作步骤如下。(1)单击“修改”“转换”“表格到层”命令。(2)在弹出的“转换表格为层”对话框中，选择需要的选项，如图9-28所示。图9-28 将表格转换为层防止层重叠：在创建、移动层和调整层大小时约束层的位置，使层不会重叠。显示层面板：显示“层”面板。显示网格和靠齐到网格：能够使用网格来协助将层定位。(3)单击“确定”按钮。注意：表格转换为层时，空单元格不会转换为层(除非它们具有背景颜色

27、)。位于表格外的页面元素也会放入层中。9.5 图层与时间轴DHTML，也就是动态HTML，是一种能够具有使用脚本语言来改变样式或位置能力的语言。时间轴在网页中所获得的效果就是利用动态HTML语言来实现的。通过DHTML来改变层的属性，或是通过时间轴各帧上的一系列图像来实现动态的效果。时间轴也叫时间线，顾名思义，它是一条贯穿时间的轴。通过在这条时间轴上不同的时间部位放置不同的内容，就可以实现网页元素的动态效果。利用时间轴，可以在页面中创建出各种类型的动态效果，这些效果是通过改变层的位置、大小、可见性、重叠顺序等来实现的，所以说时间轴是层的好帮手。9.5.1 时间轴介绍1.时间轴面板Dreamwe

28、aver MX时间轴是通过“时间轴”(Timeline)面板制作完成的。“时间轴”面板的主要功能是显示层和图像的属性在一段时间内如何更改。在Dreamweaver MX中，单击“窗口”“其他”“时间轴”，可打开“时间轴”面板。图9-29所示为一个图片的时间轴面板。图9-29 时间轴面板时间轴面板中的各项参数的含义如下。“时间轴”弹出式菜单：是时间轴的选择列表，在同一个文档中可以设置多个时间轴，当用户创建多个时间轴时，利用该下拉列表可选择当前时间轴。“行为”通道：是应该在时间轴中特定帧处执行的行为通道。动画条：显示每个对象的动画持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧

29、中的同一对象。关键帧：是动画条中已经为对象指定属性(如位置)的帧。Dreamweaver会计算关键帧之间的中间值。小圆标记表示关键帧。“动画”通道：显示用于制作层和图像动画的条。2.播放选项“时间轴”面板的第一栏用于查看动画播放选项，如图9-30所示。图9-30 播放选项下面是用于查看动画的播放选项。倒带：将播放栏移至时间轴中的第一帧。后退：将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放。播放：将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放。播放速度：在Fps文本框中设置每秒要播放的速度，默认值为15帧/秒。该数值越小，播放速度越慢。动画的帧频率等于帧总数(即长度)除以

30、所持续的时间，即帧总数=持续时间(秒)×帧频率。自动播放：若选中该复选框，表示网页打开后，循环播放时间轴动画。“自动播放”将一个行为附加到页的body标签，在页加载时执行“播放时间轴”操作。循环：若选中该复选框，表示网页打开后，循环播放时间轴动画。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。3.修改时间轴定义完时间轴的基本组成部分后，可以进行一些更改，如添加和删除帧、更改动画开始时间等。若要修改时间轴，请执行以下任一操作。·若要使动画的播放时间更长，可结束帧标记向右拖动。动画中的

31、所有关键帧都会移动，以保持其相对位置不变。若要防止其他关键帧移动，按住Alt键并拖动结束帧标记。·若要使层更早或更晚地到达某一关键帧位置，可在动画条中将关键帧向左或向右移动。·若要更改动画的开始时间，可选择一个或多个与该动画关联的动画条(按Shift键可一次选择多个动画条)，然后向左或向右移动。·若要移动整个动画轨迹的位置，可选择整个动画条，然后在页面上拖动该对象。Dreamweaver MX会调整所有关键帧的位置。在整个动画条上所做出的任何更改将更改所有关键帧。·若要在时间轴上添加或删除帧，可选择“修改”“时间轴”“添加帧”或“修改”“时间轴”“移除帧

32、”菜单命令。·若要使时间轴在浏览器中打开时自动播放，可单击“自动播放”。·若要使时间轴连续循环，可单击“循环”。“循环”将“转到时间轴帧”操作插入到动画最后一帧后的“行为”通道。可以编辑此行为的参数以定义循环的次数。4.重命名时间轴若要重命名当前在“时间轴”面板中显示的时间轴，可执行以下操作。(1)单击“修改”“时间轴”“重命名时间轴”菜单命令。(2)在“重命名时间轴”对话框中输入新的名称，如图9-31所示。图9-31 “重命名时间轴”对话框5.用时间轴更改图像和层的属性除了可以用时间轴移动层之外，还可以更改层的可见性、大小和层叠顺序，并更改图像的源文件。若要用时间轴更改图

33、像和层的属性，可执行以下操作。(1)在“时间轴”面板中，执行以下操作之一。·在控制要更改对象的动画条中选择一个现有关键帧(起始帧和结束帧始终是关键帧)。·单击动画条中部的一个帧并选择“修改”“时间轴”“增加关键帧”菜单命令，创建一个新的关键帧。或者，可以通过按住Ctrl键并单击动画条中的一个帧来创建一个新的关键帧。(2)通过执行以下操作之一定义对象的新属性。·若要更改图像的源文件，可单击“属性”面板中“源文件”文本框旁的文件夹图标，然后浏览到新图像并将其选定。·若要更改层的可见性，可从属性面板“显示”文本框中的弹出式菜单选择“inherit”(继承)、“

34、invisible”(可见)或“hidden”(隐藏)。或者，也可以使用“层”控制面板中的眼睛图标来更改层的可见性。·若要更改层的大小，可拖动该层的大小调整柄或在属性检查器的“宽”和“高”文本框中输入新的值。并非所有浏览器都会动态更改层的大小。·若要更改层的层叠顺序，请在“Z轴”文本框中输入新值，或使用“层”面板更改当前层的层叠顺序。(3)按住“播放”按钮以查看动画。6.使用多个时间轴若要管理多个时间轴，可执行以下任一操作。·若要新建时间轴，可选择“修改”“时间轴”“添加时间轴”菜单命令。·若要删除选定的时间轴，可选择“修改”“时间轴”“移除时间轴”菜单

35、命令。这将永久删除选定时间轴中的所有动画。·若要重命名选定时间轴，可单击“修改”“时间轴”“重命名时间轴”菜单命令，或者在“时间轴”面板上的“时间轴”弹出式菜单中输入新的名称。·若要在“时间轴”面板中查看另一个时间轴，可从“时间轴”面板上的“时间轴”弹出式菜单中选择一个新的时间轴，如图9-32所示。图9-32 使用多个时间轴9.5.2 时间轴的应用1.拷贝和粘贴动画如果有喜爱的动画序列，可以将其拷贝并粘贴到当前时间轴的另一区域、同一文档中的另一时间轴或者另一文档中的时间轴。还可以同时拷贝并粘贴多个序列。若要剪切(或拷贝)并粘贴动画序列，可执行以下操作。(1)单击一个动画条以

36、选择一个序列。若要选择多个序列，可按住Shift键并单击多个动画条；若要选择所有序列，可按Ctrl+A键。(2)拷贝或剪切选定内容。(3)执行以下操作之一。·将播放栏移至当前时间轴中的另一处。·从“时间轴”弹出式菜单中选择另一个时间轴。·打开另一个文档或创建一个新文档，然后在“时间轴”面板中单击。(4)将选定内容粘贴到时间轴中。同一对象的动画条不能重叠，因为一个层不能同时处于两个位置(一个图像也不能同时具有两个不同的源)。如果所粘贴的动画条与同一对象的另一动画条重叠，Dreamweaver MX会自动将选定内容移至第一个不重叠的帧。2.将动画序列应用于另一对象为了

37、节约时间，可以只创建一次动画序列，然后将其应用于文档中剩余的每个层。若要将现有动画序列应用于其他对象，可执行以下操作。(1)在“时间轴”面板中选择动画序列并将其拷贝。(2)单击“时间轴”面板上的任一帧，然后在该帧处粘贴动画序列。(3)右击粘贴的动画序列，然后在弹出的快捷菜单中选择“改变对象”命令。(4)在出现的“更改对象”对话框中，选择另一对象并单击“确定”按钮，如图9-33所示。3.时间轴动画小技巧以下建议可以提高动画的性能并使动画更易于创建。(1)显示和隐藏层，而不是更改多图像动画的源文件由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同

38、时下载，将不会出现明显的停顿，并且不会缺少图像。(2)扩展动画条以创建更顺畅的动作如果动画断断续续并且图像在不同位置之间跳动，可拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。可尝试增加每秒帧数(fps)以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过15fps的动画速度。可在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。(3)不要制作大型位图的动画制作大型图像的动画会导致动画速度减慢。可以创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。(4)创建简单的动画不要创建对当前浏览器要求过高的动画。即使在系统或Internet性能降低时，浏览器始终会播放时间轴动画中的每一帧。9.5.3 创建时间轴动画要创建时间轴