《DreamweaverCS3中文版实例教程 07 使用层和时间轴.ppt》由会员分享，可在线阅读，更多相关《DreamweaverCS3中文版实例教程 07 使用层和时间轴.ppt（32页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第7章使用层和时间轴本章简介：本章简介：如果用户想在网页上实现多个元素重叠的效如果用户想在网页上实现多个元素重叠的效果，可以使用层。层是网页中的一个区域，并且果，可以使用层。层是网页中的一个区域，并且游离在文档之上。利用层可精确定位和重叠网页游离在文档之上。利用层可精确定位和重叠网页元素。通过设置不同层的显示或隐藏，实现特殊元素。通过设置不同层的显示或隐藏，实现特殊的效果。因此，在掌握层技术之后，就可以给网的效果。因此，在掌握层技术之后，就可以给网页制作提供强大的页面控制能力。页制作提供强大的页面控制能力。Dreamweaver CS3提供了在网页上制作动态提供了在网页上制作动态效果的功能，利
2、用时间轴组织、控制层和图像等效果的功能，利用时间轴组织、控制层和图像等对象，在一定时间内播放，从而产生动态效果。对象，在一定时间内播放，从而产生动态效果。与胶片一样，与胶片一样，Dreamweaver CS3也将时间长也将时间长度分为帧，它是动画中最小时间单位里出现的画度分为帧，它是动画中最小时间单位里出现的画面。每秒钟显示的帧数叫帧率，如果帧率太慢就面。每秒钟显示的帧数叫帧率，如果帧率太慢就会给人造成视觉上不流畅的感觉，所以按照人的会给人造成视觉上不流畅的感觉，所以按照人的视觉原理，一般将动画的帧率设为视觉原理，一般将动画的帧率设为24帧帧/秒。秒。课堂学习目标层的基本操作层的基本操作应用层
3、设计表格应用层设计表格时间轴动画时间轴动画制作时间轴动画的技巧制作时间轴动画的技巧7.1层的基本操作课堂案例课堂案例圣诞礼品屋圣诞礼品屋创建层创建层选择层选择层设置层的默认属性设置层的默认属性APAP元素面板元素面板更改层的堆叠顺序更改层的堆叠顺序更改层的可见性更改层的可见性调整层的大小调整层的大小嵌套层嵌套层移动层移动层对齐层对齐层层靠齐到网格层靠齐到网格7.1.1课堂案例圣诞礼品屋使用使用“绘制绘制 AP DivAP Div”按钮绘制层。使用按钮绘制层。使用“APAP元素元素”控制面板控制面板选择层。使用选择层。使用“背景颜色背景颜色”按钮改变层的背景颜色。按钮改变层的背景颜色。效果图7.
4、1.2创建层创建层创建层若想利用层来定位网页元素，先要创建层，再根据需要在层内插若想利用层来定位网页元素，先要创建层，再根据需要在层内插入其他表单元素。有时为了布局，还可以显示或隐藏层边框。入其他表单元素。有时为了布局，还可以显示或隐藏层边框。显示或隐藏层边框显示或隐藏层边框若要显示或隐藏层边框，可选择若要显示或隐藏层边框，可选择“查看查看 可视化助理可视化助理 隐藏所隐藏所有有”命令。命令。7.1.3选择层选择一个层选择一个层（1 1）利用层面板选择一个层。）利用层面板选择一个层。（2 2）在文档窗口中选择一个层。）在文档窗口中选择一个层。选定多个层选定多个层选择选择“窗口窗口 AP AP元
5、素元素”命令，弹出命令，弹出“APAP元素元素”控制面板。在控制面板。在“APAP元素元素”控制面板中，按住控制面板中，按住键并单击两个或更多的层名称。键并单击两个或更多的层名称。7.1.4设置层的默认属性 当层插入后，其属性为默认值，如果想查看或修改层的属性，当层插入后，其属性为默认值，如果想查看或修改层的属性，选择选择“编辑编辑 首选参数首选参数”命令，弹出命令，弹出“首选参数首选参数”对话框，在对话框，在“分分类类”选项列表中选择选项列表中选择“APAP元素元素”选项，此时，可查看或修改层的默选项，此时，可查看或修改层的默认属性。认属性。7.1.5AP元素面板通过通过“APAP元素元素”
6、控制面板可以管理网页文档中的层。选择控制面板可以管理网页文档中的层。选择“窗窗口口 AP AP元素元素”命令，启用命令，启用“APAP元素元素”控制面板。控制面板。使用使用“APAP元素元素”控制面板可以防止层重叠，更改层的可见性，控制面板可以防止层重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。将层嵌套或层叠，以及选择一个或多个层。7.1.6更改层的堆叠顺序 排版时常需要控制叠放在一起的不同网页元素的显示顺序，以排版时常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果，这可通过修改选定层的实现特殊的效果，这可通过修改选定层的“Z Z轴轴”属性值实现。层的属性值实现。层
7、的显示顺序与显示顺序与Z Z轴值的顺序一致。轴值的顺序一致。Z Z值越大，层的位置越靠上前。值越大，层的位置越靠上前。在在“APAP元素元素”控制面板中更改层的堆叠顺序控制面板中更改层的堆叠顺序在在“属性属性”面板中更改层的堆叠顺序面板中更改层的堆叠顺序7.1.7更改层的可见性 当处理文档时，可以使用当处理文档时，可以使用“APAP元素元素”控制面板手动设置显示或控制面板手动设置显示或隐藏层，来查看层在不同条件下的显示方式。更改层的可见性，有隐藏层，来查看层在不同条件下的显示方式。更改层的可见性，有以下几种方法。以下几种方法。使用使用“APAP元素元素”控制面板更改层的可见性。控制面板更改层的
8、可见性。使用使用“属性属性”面板更改层的可见性。面板更改层的可见性。7.1.8调整层的大小 可以调整单个层的大小，也可以同时调整多个层的大小以使它可以调整单个层的大小，也可以同时调整多个层的大小以使它们具有相同的宽度和高度。们具有相同的宽度和高度。调整单个层的大小调整单个层的大小同时调整多个层的大小同时调整多个层的大小7.1.9嵌套层 嵌套层指代码包含在另一个层中的层。嵌套通常用于将层组织嵌套层指代码包含在另一个层中的层。嵌套通常用于将层组织在一起。在一起。创建嵌套层创建嵌套层将现有层嵌套在另一个层中将现有层嵌套在另一个层中层嵌套的注意事项层嵌套的注意事项7.1.10移动层 移动层的操作非常简
9、单，可以按照在大多数图形应用程序中移移动层的操作非常简单，可以按照在大多数图形应用程序中移动对象的相同方法在动对象的相同方法在“设计设计”视图中移动层。移动一个或多个选定视图中移动层。移动一个或多个选定层有以下几种方法。层有以下几种方法。拖曳选择柄来移动层拖曳选择柄来移动层移动一个像素来移动层移动一个像素来移动层7.1.11对齐层 使用层对齐命令可以当前层的边框为基准对齐一个或多个层。使用层对齐命令可以当前层的边框为基准对齐一个或多个层。当对选定层进行对齐时，未选定的子层可能会因为其父层被选定并当对选定层进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移动。为了避免这种情况，不要使用
10、嵌套层。对齐两个移动而随之移动。为了避免这种情况，不要使用嵌套层。对齐两个或更多个层有以下几种方法。或更多个层有以下几种方法。应用菜单命令对齐层应用菜单命令对齐层应用应用“属性属性”面板对齐层面板对齐层7.1.12层靠齐到网格 在移动网页元素时可以让其自动靠齐到网格，还可以通过指定在移动网页元素时可以让其自动靠齐到网格，还可以通过指定网格设置来更改网格或控制靠齐行为。无论网格是否可见，都可以网格设置来更改网格或控制靠齐行为。无论网格是否可见，都可以使用靠齐。使用靠齐。应用应用Dreamweaver CS3Dreamweaver CS3中的靠齐功能，层与网格之间的关系如中的靠齐功能，层与网格之间
11、的关系如铁块与磁铁之间的关系。层与网格线之间靠齐的距离是可以设定的。铁块与磁铁之间的关系。层与网格线之间靠齐的距离是可以设定的。层靠齐到网格层靠齐到网格更改网格设置更改网格设置7.2应用层设计表格将将AP DivAP Div转换为表格转换为表格将表格转换为将表格转换为AP DivAP Div7.2.1将AP Div转换为表格将将AP DivAP Div转换为表格转换为表格 如果使用层创建布局的网页要在较早的浏览器中进行查看，那如果使用层创建布局的网页要在较早的浏览器中进行查看，那么需要将么需要将AP DivAP Div转换为表格。若将转换为表格。若将AP DivAP Div转换为表格，则选择转
12、换为表格，则选择“修改修改 转换转换 将将AP DivAP Div转换为表格转换为表格”命令，弹出命令，弹出“将将AP DivAP Div转换为表格转换为表格”对话框，根据需要完成设置后，单击对话框，根据需要完成设置后，单击“确定确定”按钮。按钮。防止层重叠防止层重叠 因为表单元格不能重叠，所以因为表单元格不能重叠，所以Dreamweaver CS3Dreamweaver CS3无法从重叠层创无法从重叠层创建表格。如果要将一个文档中的层转换为表格以兼容建表格。如果要将一个文档中的层转换为表格以兼容IE 3.0IE 3.0浏览器，浏览器，则选择则选择“防止重叠防止重叠”选项来约束层的移动和定位，
13、使层不会重叠。选项来约束层的移动和定位，使层不会重叠。7.2.2将表格转换为AP Div 当不满意页面布局时，就需要对其进行调整，但层布局要比表当不满意页面布局时，就需要对其进行调整，但层布局要比表格布局调整起来方便，所以需要将表格转换为格布局调整起来方便，所以需要将表格转换为AP DivAP Div。若将表格转。若将表格转换为换为AP DivAP Div，则选择，则选择“修改修改 转换转换 将表格转换为将表格转换为AP DivAP Div”命令，命令，弹出弹出“将表格转换为将表格转换为AP DivAP Div”对话框，根据需要完成设置后，单击对话框，根据需要完成设置后，单击“确定确定”按钮。
14、按钮。7.3时间轴动画课堂案例课堂案例卡通动画网卡通动画网“时间轴时间轴”面板面板使用时间轴移动层使用时间轴移动层录制层路径录制层路径控制动画播放控制动画播放修改关键帧修改关键帧添加、删除帧添加、删除帧课堂案例课堂案例精品家居网精品家居网用时间轴改变图像与层的属性用时间轴改变图像与层的属性7.3.1课堂案例卡通动画网 使用使用“时间轴时间轴”面板制作层动画效果。使用面板制作层动画效果。使用“记录记录APAP元素的元素的路径路径”命令制作层沿着绘制的路径移动效果。命令制作层沿着绘制的路径移动效果。效果图7.3.2“时间轴”面板“时间轴时间轴”面板用于显示层与图像随时间变化的属性。选择面板用于显示
15、层与图像随时间变化的属性。选择“窗口窗口 时间轴时间轴”命令，可以启用命令，可以启用“时间轴时间轴”面板。面板。“时间轴”面板7.3.3使用时间轴移动层 最常见的时间轴动画都涉及到沿着一条轨迹移动层。时间轴最常见的时间轴动画都涉及到沿着一条轨迹移动层。时间轴只能移动层，若要使图像或文本移动，必须先创建一个层，然后只能移动层，若要使图像或文本移动，必须先创建一个层，然后在该层中插入图像、文本或其他任何类型的内容。在该层中插入图像、文本或其他任何类型的内容。7.3.4录制层路径如果想制作沿任意轨迹运动的动画，可以使用如果想制作沿任意轨迹运动的动画，可以使用“录制层路径录制层路径”命令。命令。（1
16、1）在文档中插入一个层，并在层中插入一张图片。将层移）在文档中插入一个层，并在层中插入一张图片。将层移动至它在动画开始时应处于的位置，并将层拖曳到动至它在动画开始时应处于的位置，并将层拖曳到“时间轴时间轴”面面板中适当的帧序号处。板中适当的帧序号处。（2 2）选择）选择“修改修改 时间轴时间轴 录制录制APAP元素路径元素路径”命令。在文命令。在文档中拖曳该层，拖曳的轨迹为层运动的路径。档中拖曳该层，拖曳的轨迹为层运动的路径。（3 3）在动画停止的地方释放鼠标，）在动画停止的地方释放鼠标，“时间轴时间轴”面板中将自动面板中将自动添加对象，并且较为合理地创建了一定数目的关键帧。添加对象，并且较为
17、合理地创建了一定数目的关键帧。（4 4）按住）按住“时间轴时间轴”面板中的面板中的“播放播放”按钮按钮 不放，在页面不放，在页面中预览动画。中预览动画。7.3.5控制动画播放修改动画在网页中的播放时间，具体的操作步骤如下。修改动画在网页中的播放时间，具体的操作步骤如下。（1 1）打开一个动画的）打开一个动画的“时间轴时间轴”面板。面板。（2 2）在）在“时间轴时间轴”面板中拖曳第一帧或者最后一个关键帧，面板中拖曳第一帧或者最后一个关键帧，可以改变整个动画的播放时间。当选中最后一个关键帧时，向右可以改变整个动画的播放时间。当选中最后一个关键帧时，向右拖曳是增加播放时间，向左拖曳是缩短播放时间。拖
18、曳是增加播放时间，向左拖曳是缩短播放时间。7.3.6修改关键帧 在在“时间轴时间轴”面板中单击关键帧，然后将其右移或者左移，这面板中单击关键帧，然后将其右移或者左移，这样可以改变关键帧的发生时间，其他关键帧并不发生改变。样可以改变关键帧的发生时间，其他关键帧并不发生改变。要移动整个动画路径的位置，首先应选择整个动画条，然后在要移动整个动画路径的位置，首先应选择整个动画条，然后在页面上拖动对象。页面上拖动对象。Dreamweaver CS3Dreamweaver CS3可以调整所有关键帧的位置，对可以调整所有关键帧的位置，对整个选择的动画条所做的任何类型的改变都将改变所有的关键帧。整个选择的动画
19、条所做的任何类型的改变都将改变所有的关键帧。7.3.7添加、删除帧添加帧添加帧打开打开“时间轴时间轴”面板，将播放头移到要添加帧的位置，选择面板，将播放头移到要添加帧的位置，选择“修改修改 时间轴时间轴 添加帧添加帧”命令，在播放头右侧加入一帧。命令，在播放头右侧加入一帧。移除帧移除帧打开打开“时间轴时间轴”面板，将播放头移到要删除帧的位置，选择面板，将播放头移到要删除帧的位置，选择“修改修改 时间轴时间轴 移除帧移除帧”命令，在播放头右侧删除一帧。命令，在播放头右侧删除一帧。增加关键帧增加关键帧选择整个动画条，选择选择整个动画条，选择“修改修改 时间轴时间轴 增加关键帧增加关键帧”命令，命令
20、，在当前的播放头位置加入关键帧。在当前的播放头位置加入关键帧。移除关键帧移除关键帧选中要删除的关键帧，选择选中要删除的关键帧，选择“修改修改 时间轴时间轴 移除关键帧移除关键帧”命令，将当前选中的关键帧删除。命令，将当前选中的关键帧删除。7.3.8课堂案例精品家居网 使用使用“绘制绘制 AP DivAP Div”按钮、按钮、“时间轴时间轴”面板制作忽隐忽现的面板制作忽隐忽现的动画效果。使用动画效果。使用“CSSCSS样式样式”面板设置多变的鼠标指针效果。面板设置多变的鼠标指针效果。效果图7.3.9用时间轴改变图像与层的属性 时间轴也可以更改层和图像的其他属性，从而实现特殊时间轴也可以更改层和图
21、像的其他属性，从而实现特殊的动态效果。一般情况下，可修改层的可见性、大小、层叠顺的动态效果。一般情况下，可修改层的可见性、大小、层叠顺序或图像的源文件属性选项来实现幻灯片和逐渐显示的效果。序或图像的源文件属性选项来实现幻灯片和逐渐显示的效果。7.4制作时间轴动画的技巧 与尝试用一个时间轴控制页面上的所有操作相比，使用单与尝试用一个时间轴控制页面上的所有操作相比，使用单独的时间轴来控制页的各个离散部分会更容易一些。一般情况独的时间轴来控制页的各个离散部分会更容易一些。一般情况下，一个页面可能包含多个互动元素，每个元素都触发不同的下，一个页面可能包含多个互动元素，每个元素都触发不同的时间轴。时间轴。新建时间轴新建时间轴删除选定的时间轴删除选定的时间轴重命名选定时间轴重命名选定时间轴选择当前时间轴选择当前时间轴7.5课堂练习我的音乐世界使用使用“层层”和和“属性属性”面板制作阴影文字效果。面板制作阴影文字效果。效果图7.6课堂练习时尚礼品屋 使用使用“绘制作绘制作AP DivAP Div”按钮绘制层。使用按钮绘制层。使用“时间轴时间轴”面板和面板和“关键帧关键帧”命令制作自动更换图像效果。命令制作自动更换图像效果。效果图7.7课后习题茶艺人生网页使用使用“时间轴时间轴”面板和面板和“添加关键帧添加关键帧”命令制作叶子下落效果。命令制作叶子下落效果。效果图