《使用层和时间轴》课件.ppt

1、第第7 7章使用层和时间轴章使用层和时间轴本章简介：本章简介：如果用户想在网页上实现多个元素重叠如果用户想在网页上实现多个元素重叠的效果，可以使用层。层是网页中的一个区的效果，可以使用层。层是网页中的一个区域，并且游离在文档之上。利用层可域，并且游离在文档之上。利用层可精确定精确定位位和和重叠网页元素重叠网页元素。通过设置不同层的显示。通过设置不同层的显示或隐藏，实现特殊的效果。或隐藏，实现特殊的效果。Dreamweaver CS3Dreamweaver CS3提供了在网页上制作动提供了在网页上制作动态效果的功能，利用时间轴组织、控制层和态效果的功能，利用时间轴组织、控制层和图像等对象，在一定

2、时间内播放，从而产生图像等对象，在一定时间内播放，从而产生动态效果。动态效果。层的引入层的引入 在网页设计当中，层的概念的引入主要表现出在网页设计当中，层的概念的引入主要表现出两大两大优势优势：在层出现之前，所有页面的布局具有很大的空间局限性，早在层出现之前，所有页面的布局具有很大的空间局限性，早期的网页设计人员一般用表格来控制图形等网页元素的位置。期的网页设计人员一般用表格来控制图形等网页元素的位置。但是如果要精确定位一个图形，则必须在表格内进行表格嵌但是如果要精确定位一个图形，则必须在表格内进行表格嵌套，使设计变得十分复杂。当层出现以后，套，使设计变得十分复杂。当层出现以后，定位技术及其相

3、定位技术及其相关的设计关的设计就变的非常容易实现了。就变的非常容易实现了。在层出现之前，所有的网页设计和制作都是在同一个平面内在层出现之前，所有的网页设计和制作都是在同一个平面内进行的，可以利用的空间和设计的技术手段都十分有限，人进行的，可以利用的空间和设计的技术手段都十分有限，人们不得不在有限的空间对页面进行细致的略显繁琐布局规划，们不得不在有限的空间对页面进行细致的略显繁琐布局规划，而在层出现之后，网页设计的空间由而在层出现之后，网页设计的空间由二维拓展成了三维二维拓展成了三维，从，从而大大增加了设计人员的自由空间。而大大增加了设计人员的自由空间。层的理解层的理解 网页中的层，就好像一张张

4、透明的网页中的层，就好像一张张透明的画布，每张画布都画着一些独立的色彩，画布，每张画布都画着一些独立的色彩，而一幅完整的画就是由许多张这样的画而一幅完整的画就是由许多张这样的画布叠加在一起组成的，每一个层的色彩布叠加在一起组成的，每一个层的色彩都能够和其它层进行叠加，而修改其中都能够和其它层进行叠加，而修改其中的某一层却不会影响其他层的效果，这的某一层却不会影响其他层的效果，这就是层的概念核心，也体现了层的作用。就是层的概念核心，也体现了层的作用。课堂学习目标课堂学习目标层的基本操作层的基本操作应用层设计表格应用层设计表格时间轴动画时间轴动画制作时间轴动画的技巧制作时间轴动画的技巧7.17.1

5、层的基本操作层的基本操作课堂案例课堂案例圣诞礼品屋圣诞礼品屋创建层创建层选择层选择层设置层的默认属性设置层的默认属性APAP元素面板元素面板更改层的堆叠顺序更改层的堆叠顺序更改层的可见性更改层的可见性调整层的大小调整层的大小嵌套层嵌套层移动层移动层对齐层对齐层层靠齐到网格层靠齐到网格7.1.17.1.1课堂案例课堂案例圣诞礼品屋圣诞礼品屋使用使用“绘制绘制 AP Div”AP Div”按钮绘制层。使用按钮绘制层。使用“APAP元素元素”控控制面板选择层。使用制面板选择层。使用“背景颜色背景颜色”按钮改变层的背景颜按钮改变层的背景颜色。色。7.1.27.1.2创建层创建层若想利用层来定位网页元素

6、，先要创建层，再若想利用层来定位网页元素，先要创建层，再根据需要在层内插入其他表单元素。有时为了根据需要在层内插入其他表单元素。有时为了布局，还可以显示或隐藏层边框。布局，还可以显示或隐藏层边框。创建层创建层 单击单击“插入插入”面板面板“布局布局”选项卡中的选项卡中的“绘制绘制AP Div”AP Div”按钮，在文档窗口中拖曳鼠标绘制。按钮，在文档窗口中拖曳鼠标绘制。将将“插入插入”面板面板“布局布局”选项卡中的选项卡中的“绘制绘制AP AP Div”Div”按钮拖曳到文档窗口中。按钮拖曳到文档窗口中。将光标放置文档窗口中，选择将光标放置文档窗口中，选择“插入记录插入记录 布局布局对象对象A

7、P Div”AP Div”命令。命令。如果需要连续绘制新的层？如果需要连续绘制新的层？单击单击“插入插入”面板面板“布局布局”选项卡中的选项卡中的“绘制绘制AP Div”AP Div”按钮，在文档窗口中，按住按钮，在文档窗口中，按住CtrlCtrl键的同时拖曳鼠标左键的同时拖曳鼠标左键绘制层。只要不放键绘制层。只要不放CtrlCtrl键，就可以连续绘制新的层。键，就可以连续绘制新的层。7.1.27.1.2创建层创建层 在默认情况下，每当用户创建一个新的层，都在默认情况下，每当用户创建一个新的层，都会使用会使用DIVDIV标志它，并将层标记显示到标志它，并将层标记显示到网页左上网页左上角角的位置

8、。的位置。若要显示层标记？若要显示层标记？编辑编辑 首选参数首选参数APAP元素的锚点元素的锚点查看查看 可视化助理可视化助理 不可见元素不可见元素7.1.27.1.2创建层创建层显示或隐藏层边框显示或隐藏层边框若要显示或隐藏层边框，可选择若要显示或隐藏层边框，可选择“查看查看 可视可视化助理化助理 隐藏所有隐藏所有”命令。命令。7.1.37.1.3选择层选择层选择一个层选择一个层（1 1）利用层面板选择一个层。）利用层面板选择一个层。窗口窗口APAP元素元素（2 2）在文档窗口中选择一个层。）在文档窗口中选择一个层。单击层的边框单击层的边框 按住按住Ctrl+shiftCtrl+shift，

9、在层中单击，在层中单击 单击选择柄单击选择柄7.1.37.1.3选择层选择层选定多个层选定多个层 选择选择“窗口窗口 AP AP元素元素”命令，弹出命令，弹出“APAP元素元素”控制面板。在控制面板。在“APAP元素元素”控制面板中，按住控制面板中，按住键并单击两个或更多的层名称。键并单击两个或更多的层名称。在文档窗口中按住在文档窗口中按住键并单击两个或更多键并单击两个或更多个层的边框。当选定多个层时，当前层的大小个层的边框。当选定多个层时，当前层的大小调整柄以蓝色突出显示，其它层的大小调整柄调整柄以蓝色突出显示，其它层的大小调整柄则以白色显示，并且只能对当前层进行操作。则以白色显示，并且只能

10、对当前层进行操作。7.1.47.1.4设置层的默认属性设置层的默认属性当层插入后，其属性为默认值，如果想查看当层插入后，其属性为默认值，如果想查看或修改层的属性，选择或修改层的属性，选择“编辑编辑 首选参数首选参数”命令。命令。“显示显示”选项：设置层的初始显示状态。选项：设置层的初始显示状态。DefaultDefault：默认值，一般情况下，大多数浏览器都会默认：默认值，一般情况下，大多数浏览器都会默认为为“inherit”inherit”。InheritInherit：继承父级层的显示属性。：继承父级层的显示属性。VisibleVisible：表示不管父级层是什么都显示层的内容。：表示不管

11、父级层是什么都显示层的内容。HiddenHidden：表示不管父级层是什么都隐藏层的内容。：表示不管父级层是什么都隐藏层的内容。“嵌套嵌套”：设置在层出现重叠时，是否采用：设置在层出现重叠时，是否采用嵌套方式。嵌套方式。7.1.57.1.5APAP元素面板元素面板通过通过“APAP元素元素”控制面板可以管理网页文档控制面板可以管理网页文档中的层。选择中的层。选择“窗口窗口 AP AP元素元素”命令，启命令，启用用“APAP元素元素”控制面板。控制面板。使用使用“APAP元素元素”控制面板可以防止层重叠，控制面板可以防止层重叠，更改层的可见性，将层嵌套或层叠，以及选更改层的可见性，将层嵌套或层叠

12、，以及选择一个或多个层。择一个或多个层。7.1.67.1.6更改层的堆叠顺序更改层的堆叠顺序排版时常需要控制叠放在一起的不同网页元素的排版时常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果，这可通过修改选显示顺序，以实现特殊的效果，这可通过修改选定层的定层的“Z Z轴轴”属性值实现。层的显示顺序与属性值实现。层的显示顺序与Z Z轴轴值的顺序一致。值的顺序一致。Z Z值越大，层的位置越靠上前值越大，层的位置越靠上前。在在“APAP元素元素”控制面板中更改层的堆叠顺序控制面板中更改层的堆叠顺序在在“属性属性”面板中更改层的堆叠顺序面板中更改层的堆叠顺序7.1.77.1.7更改层的可见

13、性更改层的可见性 当处理文档时，可以使用当处理文档时，可以使用“APAP元素元素”控制面板手控制面板手动设置显示或隐藏层，来查看层在不同条件下的动设置显示或隐藏层，来查看层在不同条件下的显示方式。更改层的可见性，有以下几种方法。显示方式。更改层的可见性，有以下几种方法。使用使用“APAP元素元素”控制面板更改层的可见性。控制面板更改层的可见性。单击眼形图标单击眼形图标，可以更改其可见性。，可以更改其可见性。眼睛睁开表示该层是可见的；眼睛睁开表示该层是可见的；眼睛闭合表示该层是不可见的；眼睛闭合表示该层是不可见的；如果没有眼形图标，该层通常会继承其父级如果没有眼形图标，该层通常会继承其父级的可见

14、性。如果层没有嵌套，父级就是文档正的可见性。如果层没有嵌套，父级就是文档正文，而文档正文始终是可见的，因此层默认是文，而文档正文始终是可见的，因此层默认是可见的。可见的。7.1.77.1.7更改层的可见性更改层的可见性使用使用“属性属性”面板更改层的可见性。面板更改层的可见性。选中一个或多个层，在选中一个或多个层，在“属性属性”面板中的面板中的“可可见性见性”选项中进行选择：选项中进行选择：VisibleVisible：无论父级如何设置都显示层的内容；：无论父级如何设置都显示层的内容；Hidden:Hidden:无论父级如何设置都隐藏层的内容；无论父级如何设置都隐藏层的内容；InheritIn

15、herit：继承父级层的显示属性，若父级属性：继承父级层的显示属性，若父级属性可见则显示该层，若父级层不可见则隐藏该层。可见则显示该层，若父级层不可见则隐藏该层。7.1.87.1.8调整层的大小调整层的大小可以调整单个层的大小，也可以同时调整多个层的可以调整单个层的大小，也可以同时调整多个层的大小以使它们具有相同的宽度和高度。大小以使它们具有相同的宽度和高度。调整单个层的大小调整单个层的大小选中一个层：选中一个层：应用应用鼠标拖曳鼠标拖曳 应用应用键盘移动键盘移动：同时按住：同时按住和键盘上的方和键盘上的方向键，可调整一个像素的大小。向键，可调整一个像素的大小。应用应用网格靠齐网格靠齐方式：同

16、时按住方式：同时按住Shift+Ctrl 和键盘上的方向键，可按网格靠齐增量来调整和键盘上的方向键，可按网格靠齐增量来调整大小。大小。应用应用修改属性值修改属性值的方法：在的方法：在“属性属性”面板中，面板中，修改修改“宽宽”和和“高高”。7.1.87.1.8调整层的大小调整层的大小同时调整多个层的大小同时调整多个层的大小选择多个层：选择多个层：应用应用菜单命令菜单命令：选择：选择“修改修改 排列顺序排列顺序 设成宽度相设成宽度相同或高度同或高度”命令。命令。应用应用快捷键快捷键：按：按，以当前层为标准同时调整多个层的宽度或高度。以当前层为标准同时调整多个层的宽度或高度。应用应用修改属性值修改

17、属性值方式：在方式：在“属性属性”面板中，修改面板中，修改“宽宽”和和“高高”。7.1.97.1.9嵌套层嵌套层嵌套层指代码包含在另一个层中的层。嵌套通常用于嵌套层指代码包含在另一个层中的层。嵌套通常用于将层组织在一起。将层组织在一起。创建嵌套层创建嵌套层 应用应用菜单命令菜单命令：将插入点放在现有层中，选择：将插入点放在现有层中，选择“插入记录插入记录 布局对象布局对象AP Div”AP Div”命令。命令。应用应用按钮绘制按钮绘制：拖曳：拖曳“插入插入”面板中的面板中的“布局布局”选项卡中的选项卡中的“绘制绘制AP Div”AP Div”按钮，将其放置在按钮，将其放置在现有层中。现有层中。

18、修改修改“首选参数首选参数”：修改：修改“首选参数首选参数”对话框对话框中中“APAP元素元素”选项，选择选项，选择“在在AP DivAP Div中创建以中创建以后嵌套后嵌套”复选框，单击复选框，单击“绘制绘制AP Div”AP Div”按钮，按钮，然后拖曳鼠标在现有层中绘制一个层。然后拖曳鼠标在现有层中绘制一个层。7.1.97.1.9嵌套层嵌套层将现有层嵌套在另一个层中将现有层嵌套在另一个层中 启用启用“APAP元素元素”控制面板控制面板 在控制面板中选择一个层，按住在控制面板中选择一个层，按住CtrlCtrl键的键的同时拖曳鼠标，将其移动到同时拖曳鼠标，将其移动到“APAP元素元素”控控制

19、面板的目标层上，当制面板的目标层上，当目标层的名称突出目标层的名称突出显示显示时，松开鼠标左键，即完成嵌套操作。时，松开鼠标左键，即完成嵌套操作。7.1.97.1.9嵌套层嵌套层层嵌套的注意事项层嵌套的注意事项 嵌套层并不意味着一层位于另一层内的显嵌套层并不意味着一层位于另一层内的显示效果，嵌套层的本质是一层的示效果，嵌套层的本质是一层的HTMLHTML代码代码嵌套与另一层的嵌套与另一层的HTMLHTML代码之内。可以用代码之内。可以用拖拖曳的方法判断两个或多个层是否嵌套曳的方法判断两个或多个层是否嵌套，嵌，嵌套层随其父级层一起移动，并且继承其父套层随其父级层一起移动，并且继承其父级层的可见性

20、。级层的可见性。7.1.107.1.10移动层移动层移动层的操作非常简单，可以按照在大多数图移动层的操作非常简单，可以按照在大多数图形应用程序中移动对象的相同方法在形应用程序中移动对象的相同方法在“设计设计”视图中移动层。移动一个或多个选定层有以下视图中移动层。移动一个或多个选定层有以下几种方法。几种方法。首先要选中要移动的层：首先要选中要移动的层：拖曳选择柄来移动层拖曳选择柄来移动层移动一个像素来移动层移动一个像素来移动层 使用方向键，直接以一个像素来移动层；使用方向键，直接以一个像素来移动层；按住按住键的同时按方向键，则按当前网格键的同时按方向键，则按当前网格靠齐增量来移动层的位置。靠齐增

21、量来移动层的位置。7.1.117.1.11对齐层对齐层使用层对齐命令可使用层对齐命令可以当前层的边框为基准以当前层的边框为基准对齐一个对齐一个或多个层。当对选定层进行对齐时，未选定的子层或多个层。当对选定层进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移动。为了可能会因为其父层被选定并移动而随之移动。为了避免这种情况，不要使用嵌套层。对齐两个或更多避免这种情况，不要使用嵌套层。对齐两个或更多个层有以下几种方法。个层有以下几种方法。应用应用菜单命令菜单命令对齐层对齐层 在文档窗口中选择多个层，选择在文档窗口中选择多个层，选择“修改修改 排列排列顺序顺序”命令。命令。应用应用“属性属性

22、”面板面板对齐层对齐层 在文档窗口中选择多个层，在属性面板的在文档窗口中选择多个层，在属性面板的“上上”输入具体值，则以多个层的上边线相对输入具体值，则以多个层的上边线相对于页面顶部的位置来对齐。于页面顶部的位置来对齐。7.1.127.1.12层靠齐到网格层靠齐到网格在移动网页元素时可以让其自动靠齐到网格，还可在移动网页元素时可以让其自动靠齐到网格，还可以通过指定网格设置来更改网格或控制靠齐行为。以通过指定网格设置来更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。无论网格是否可见，都可以使用靠齐。应用应用Dreamweaver CS3Dreamweaver CS3中的靠齐功能，层与网

23、格之中的靠齐功能，层与网格之间的关系如铁块与磁铁之间的关系。层与网格线之间的关系如铁块与磁铁之间的关系。层与网格线之间靠齐的距离是可以设定的。间靠齐的距离是可以设定的。层靠齐到网格层靠齐到网格查看查看 网格设置网格设置 靠齐到网格靠齐到网格 选择一个层并拖曳它，当拖曳它靠近网格线选择一个层并拖曳它，当拖曳它靠近网格线一定距离时，该层会自动跳到最近的靠齐位一定距离时，该层会自动跳到最近的靠齐位置。置。7.1.127.1.12层靠齐到网格层靠齐到网格更改网格设置更改网格设置查看查看 网格设置网格设置 网格设置网格设置7.27.2应用层设计表格应用层设计表格将将AP DivAP Div转换为表格转换

24、为表格将表格转换为将表格转换为AP DivAP Div因为早期版本的浏览器不能显示使用层布局的网页，因为早期版本的浏览器不能显示使用层布局的网页，为了实现较复杂的效果又需要将早期使用表格布局为了实现较复杂的效果又需要将早期使用表格布局的网页转换成层。的网页转换成层。7.2.17.2.1将将AP DivAP Div转换为表格转换为表格将将AP DivAP Div转换为表格转换为表格 若将若将AP DivAP Div转换为表格，则选择转换为表格，则选择“修改修改 转换转换 将将AP DivAP Div转换为表格转换为表格”命令，弹出命令，弹出“将将AP DivAP Div转换转换为表格为表格”对话

25、框，根据需要完成设置后，单击对话框，根据需要完成设置后，单击“确定确定”按钮。按钮。7.2.17.2.1将将AP DivAP Div转换为表格转换为表格防止层重叠防止层重叠 因为表单元格不能重叠，所以因为表单元格不能重叠，所以Dreamweaver CS3Dreamweaver CS3无法从重叠层创建表格。如果要将一个文档中的层转无法从重叠层创建表格。如果要将一个文档中的层转换为表格以兼容换为表格以兼容IE 3.0IE 3.0浏览器，则选择浏览器，则选择“防止重叠防止重叠”选项来约束层的移动和定位，使层不会重叠。选项来约束层的移动和定位，使层不会重叠。7.2.27.2.2将表格转换为将表格转换

26、为AP DivAP Div 当不满意页面布局时，就需要对其进行调整，当不满意页面布局时，就需要对其进行调整，但层布局要比表格布局调整起来方便，所以需要将但层布局要比表格布局调整起来方便，所以需要将表格转换为表格转换为AP DivAP Div。若将表格转换为若将表格转换为AP DivAP Div，则选择，则选择“修改修改 转转换换 将表格转换为将表格转换为AP Div”AP Div”命令，弹出命令，弹出“将表格将表格转换为转换为AP Div”AP Div”对话框，根据需要完成设置后，单对话框，根据需要完成设置后，单击击“确定确定”按钮。按钮。不能转换单个表格或层，只能将整个网页的层不能转换单个表

27、格或层，只能将整个网页的层转换为表格或将整个网页的表格转换为层。转换为表格或将整个网页的表格转换为层。将表格转换为将表格转换为AP DivAP Div7.37.3时间轴动画时间轴动画 时间轴也叫时间线，顾名思义，它是一条时间轴也叫时间线，顾名思义，它是一条贯穿时间的线，用来表示网页显示时间内发生贯穿时间的线，用来表示网页显示时间内发生的各种状态，在时间轴上不同时间部位放置不的各种状态，在时间轴上不同时间部位放置不同的内容，就可以实现网页的动态效果。在不同的内容，就可以实现网页的动态效果。在不使用时间轴的情况下，要实现网页中元素的移使用时间轴的情况下，要实现网页中元素的移动，需要写出非常复杂的代

28、码。使用时间轴去动，需要写出非常复杂的代码。使用时间轴去实现它们则非常简单。其主要原因就在于它是实现它们则非常简单。其主要原因就在于它是通过向文档中添加通过向文档中添加JavaScriptJavaScript代码实现动态效代码实现动态效果的，不需要其他控件、插件或果的，不需要其他控件、插件或JavaJava小程序的小程序的支持，具有很好的兼容性。支持，具有很好的兼容性。7.37.3时间轴动画时间轴动画 动画是由一系列静止图像连续播放，利用动画是由一系列静止图像连续播放，利用人类眼睛的人类眼睛的“视觉暂留视觉暂留”特性形成的。特性形成的。时间轴时间轴动画是通过让层的位置、可见性和叠加顺序等动画是

29、通过让层的位置、可见性和叠加顺序等属性随时间变化所生成的动画。属性随时间变化所生成的动画。它的基本原理是：使层中的内容在一定时它的基本原理是：使层中的内容在一定时间内，按照设计好的路线显示在页面中。间内，按照设计好的路线显示在页面中。时间轴里的层叫做动画栏，时间轴的基本时间轴里的层叫做动画栏，时间轴的基本单位是帧，整个时间轴由许多帧构成，这些帧单位是帧，整个时间轴由许多帧构成，这些帧在页面中连续播放就构成了时间轴动画。在页面中连续播放就构成了时间轴动画。由时间轴的原理可知，由时间轴的原理可知，时间轴必须与层结时间轴必须与层结合起来使用合起来使用。创建动画的时候，各种元素先放。创建动画的时候，各

30、种元素先放置到层中，然后再结合时间轴创建动态效果。置到层中，然后再结合时间轴创建动态效果。7.37.3时间轴动画时间轴动画课堂案例课堂案例卡通动画网卡通动画网“时间轴时间轴”面板面板使用时间轴移动层使用时间轴移动层录制层路径录制层路径控制动画播放控制动画播放修改关键帧修改关键帧添加、删除帧添加、删除帧课堂案例课堂案例精品家居网精品家居网用时间轴改变图像与层的属性用时间轴改变图像与层的属性7.37.3时间轴动画时间轴动画课堂案例课堂案例卡通动画网卡通动画网“时间轴时间轴”面板面板使用时间轴移动层使用时间轴移动层录制层路径录制层路径控制动画播放控制动画播放修改关键帧修改关键帧添加、删除帧添加、删除

31、帧课堂案例课堂案例精品家居网精品家居网用时间轴改变图像与层的属性用时间轴改变图像与层的属性7.3.17.3.1课堂案例课堂案例卡通动画网卡通动画网使用使用“时间轴时间轴”面板制作层动画效果。使用面板制作层动画效果。使用“记录记录APAP元素的路径元素的路径”命令制作层沿着绘制命令制作层沿着绘制的路径移动效果。的路径移动效果。效果图7.3.27.3.2“时间轴时间轴”面板面板“时间轴时间轴”面板用于显示层与图像随时间变面板用于显示层与图像随时间变化的属性。化的属性。选择选择“窗口窗口 时间轴时间轴”命令，可以启用命令，可以启用“时间轴时间轴”面板。面板。“时间轴时间轴”面板面板7.3.27.3.

32、2“时间轴时间轴”面板面板时间轴时间轴下拉列表下拉列表回首帧回首帧后退后退播放一帧，按住不播放一帧，按住不放，可播放动画放，可播放动画当前播放帧当前播放帧时间轴时间轴动画通道动画通道每秒播放帧数每秒播放帧数动画栏动画栏关键帧关键帧行为通道行为通道7.3.37.3.3使用时间轴移动层使用时间轴移动层 最常见的时间轴动画都涉及到沿着一条轨最常见的时间轴动画都涉及到沿着一条轨迹移动层。迹移动层。时间轴只能移动层时间轴只能移动层，若要使图像或，若要使图像或文本移动，必须先创建一个层，然后在该层中文本移动，必须先创建一个层，然后在该层中插入图像、文本或其他任何类型的内容。插入图像、文本或其他任何类型的内

33、容。7.3.37.3.3使用时间轴移动层使用时间轴移动层使用时间轴制作层动画的具体操作步骤如下：使用时间轴制作层动画的具体操作步骤如下：（1 1）创建一个层，并在层中插入一张图片；）创建一个层，并在层中插入一张图片；（2 2）启动）启动“时间轴时间轴”面板；面板；（3 3）选中当前创建的层，将层拖曳到）选中当前创建的层，将层拖曳到“时间轴时间轴”面板中适当的面板中适当的帧号处；（帧号处；（添加对象到添加对象到“时间轴时间轴”面板面板）（4 4）在）在“时间轴时间轴”面板中拖曳结束关键帧到适当的帧序号处，面板中拖曳结束关键帧到适当的帧序号处，以确定动画的播放时间；以确定动画的播放时间；（5 5）

34、选定结束关键帧，在页面中拖曳层到动画的结束位置，文）选定结束关键帧，在页面中拖曳层到动画的结束位置，文档窗口中显示动画运动的直线路径；档窗口中显示动画运动的直线路径；（6 6）若要）若要制作曲线轨迹的动画制作曲线轨迹的动画，需要在时间轴上，需要在时间轴上添加关键帧添加关键帧；（7 7）按住）按住“时间轴时间轴”面板中的面板中的“播放播放”按钮不放，在页面中预按钮不放，在页面中预览动画效果。览动画效果。7.3.37.3.3使用时间轴移动层使用时间轴移动层添加对象到添加对象到“时间轴时间轴”面板的几种方法：面板的几种方法：将层直接拖曳到将层直接拖曳到“时间轴时间轴”面板中，然后释放鼠标；面板中，然

35、后释放鼠标；选中要添加的层，单击选中要添加的层，单击“时间轴时间轴”面板右上角的按面板右上角的按钮，在弹出的菜单中选择钮，在弹出的菜单中选择“添加对象添加对象”命令；命令；选中要添加的层，选择选中要添加的层，选择“修改修改时间轴时间轴增加对象到增加对象到时间轴时间轴”命令；命令；选中要添加的层，在选中要添加的层，在“时间轴时间轴”面板中单击鼠标右面板中单击鼠标右键，在弹出的菜单栏中选择键，在弹出的菜单栏中选择“添加对象添加对象”命令。命令。返回返回7.3.37.3.3使用时间轴移动层使用时间轴移动层关键帧：在动画中可以影响到整个动画效果的关键帧：在动画中可以影响到整个动画效果的帧。帧。如何添加

36、关键帧以制作曲线轨迹的动画如何添加关键帧以制作曲线轨迹的动画：按住按住的同时在时间轴适当帧序号处单的同时在时间轴适当帧序号处单击鼠标左键；击鼠标左键；在网页中拖曳层到适当的位置，可以看到文在网页中拖曳层到适当的位置，可以看到文档区中的直线轨迹变成曲线状。档区中的直线轨迹变成曲线状。返回返回7.3.47.3.4录制层路径录制层路径如果想制作沿任意轨迹运动的动画，可以使用如果想制作沿任意轨迹运动的动画，可以使用“录制层路录制层路径径”命令。命令。（1 1）在文档中插入一个层，并在层中插入一张图片。在文）在文档中插入一个层，并在层中插入一张图片。在文档窗口中将层移至动画开始时应处于的位置，并将播放头

37、档窗口中将层移至动画开始时应处于的位置，并将播放头放置在放置在“时间轴时间轴”面板中适当的帧序号处。面板中适当的帧序号处。（2 2）选择）选择“修改修改 时间轴时间轴 录制录制APAP元素路径元素路径”命令。命令。在文档中拖曳该层，拖曳的轨迹为层运动的路径。在文档中拖曳该层，拖曳的轨迹为层运动的路径。（3 3）在动画停止的地方释放鼠标，）在动画停止的地方释放鼠标，“时间轴时间轴”面板中将自面板中将自动添加对象，并且较为合理地创建了一定数目的关键帧。动添加对象，并且较为合理地创建了一定数目的关键帧。（4 4）按住）按住“时间轴时间轴”面板中的面板中的“播放播放”按钮按钮 不放，在页不放，在页面中

38、预览动画。面中预览动画。7.3.57.3.5控制动画播放控制动画播放修改动画在网页中的播放时间，具体的操作步骤修改动画在网页中的播放时间，具体的操作步骤如下。如下。（1 1）打开一个动画的）打开一个动画的“时间轴时间轴”面板。面板。（2 2）在）在“时间轴时间轴”面板中拖曳第一帧或者最后一面板中拖曳第一帧或者最后一个关键帧，可以改变整个动画的播放时间。当选个关键帧，可以改变整个动画的播放时间。当选中最后一个关键帧时，向右拖曳是增加播放时间，中最后一个关键帧时，向右拖曳是增加播放时间，向左拖曳是缩短播放时间。向左拖曳是缩短播放时间。7.3.67.3.6修改关键帧修改关键帧 在在“时间轴时间轴”面

39、板中单击关键帧，然后将其右面板中单击关键帧，然后将其右移或者左移，这样可以改变关键帧的发生时间，其移或者左移，这样可以改变关键帧的发生时间，其他关键帧并不发生改变。他关键帧并不发生改变。要要移动整个动画路径移动整个动画路径的位置，首先应选择整个的位置，首先应选择整个动画条，然后在页面上拖动层对象。动画条，然后在页面上拖动层对象。DreamweaverDreamweaver CS3 CS3可以调整所有关键帧的位置，可以调整所有关键帧的位置，对整个选择的动画条所做的任何类型的改变都将改对整个选择的动画条所做的任何类型的改变都将改变所有的关键帧。变所有的关键帧。7.3.77.3.7添加、删除帧添加、

40、删除帧添加帧添加帧打开打开“时间轴时间轴”面板，将播放头移到要添加帧的位面板，将播放头移到要添加帧的位置，选择置，选择“修改修改 时间轴时间轴 添加帧添加帧”命令，在播放头命令，在播放头右侧加入一帧。右侧加入一帧。移除帧移除帧打开打开“时间轴时间轴”面板，将播放头移到要删除帧的位面板，将播放头移到要删除帧的位置，选择置，选择“修改修改 时间轴时间轴 移除帧移除帧”命令，在播放头命令，在播放头右侧删除一帧。右侧删除一帧。增加关键帧增加关键帧选择整个动画条，选择选择整个动画条，选择“修改修改 时间轴时间轴 增加关增加关键帧键帧”命令，在当前的播放头位置加入关键帧。命令，在当前的播放头位置加入关键帧。移除关键帧移除关键帧选中要删除的关键帧，选择选中要删除的关键帧，选择“修改修改 时间轴时间轴 移移除关键帧除关键帧”命令，将当前选中的关键帧删除。命令，将当前选中的关键帧删除。补充：补充：时间轴内可以添加：时间轴内可以添加：层（层（apDiv）图片（图片（Image）7.67.6课堂练习课堂练习时尚礼品屋时尚礼品屋