AP元素与时间轴.ppt

《AP元素与时间轴.ppt》由会员分享，可在线阅读，更多相关《AP元素与时间轴.ppt（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作基础教程网页制作基础教程（Dreamweaver CS3Dreamweaver CS3）第第5 5章章AP Div元素与时间轴动画元素与时间轴动画 本章重点：本章重点：nAPAP元素的创建、编辑、保存等操作元素的创建、编辑、保存等操作nAPAP元素的属性设置元素的属性设置n时间轴的使用时间轴的使用第第5 5章章AP Div元素与时间轴动画元素与时间轴动画 5.1 5.1 应用应用APAP元素布局页面元素布局页面5.2 5.2 APAP元素的创建与编辑元素的创建与编辑5.3 5.3 APAP元素面板的使用元素面板的使用 5.4 5.4 APAP元素与表格互换元素与表格互换 5.5 5.5

2、 时间轴概述时间轴概述 网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页面元素布局页面“环游世界环游世界”5.1.1 实例综述实例综述通过本例的学习，读者可充分体会使用通过本例的学习，读者可充分体会使用APAP元素布元素布局页面的随意性，以及通过时间轴制作动画的技巧。局页面的随意性，以及通过时间轴制作动画的技巧。网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页面元素布局页面“环游世界环游世界”5.1.2 实例分析实例分析本例中不论文字还是图片都是采用本例中不论文字还是图片都是采用APAP元素来元素来进行定位的，这里将逐步介绍：进行定位的，

3、这里将逐步介绍：n如何在页面插入如何在页面插入APAP元素元素n如何通过控制如何通过控制APAP元素的元素的Z轴参数来设置轴参数来设置APAP元素元素之间的重叠关系之间的重叠关系n如何精确定位如何精确定位APAP元素等操作方法。元素等操作方法。网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页面元素布局页面“环游世界环游世界”5.1.3实现步骤实现步骤1、制作基本页面、制作基本页面2、用时间轴控制图片替换、用时间轴控制图片替换3、制作小鸟飞翔动画、制作小鸟飞翔动画4、制作滚动字幕、制作滚动字幕网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页

4、面元素布局页面“环游世界环游世界”5.1.3实现步骤实现步骤1、制作基本页面、制作基本页面精确定位精确定位AP元素元素插入插入AP元素元素在在AP元素中添加内容元素中添加内容控制控制AP元素的大小元素的大小AP元素的叠放次序元素的叠放次序网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页面元素布局页面“环游世界环游世界”5.1.3实现步骤实现步骤2、用时间轴控制图片替换、用时间轴控制图片替换将将Ap元素中的图片拖入时间轴元素中的图片拖入时间轴 打开时间轴面板打开时间轴面板在时间轴上增加关键帧在时间轴上增加关键帧在各关键帧处设置不同图片在各关键帧处设置不同图片创建放置图

5、片的创建放置图片的AP元素元素网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页面元素布局页面“环游世界环游世界”5.1.3实现步骤实现步骤3、制作小鸟飞翔动画、制作小鸟飞翔动画将将Ap元素中的图片拖入时间轴元素中的图片拖入时间轴 打开时间轴面板打开时间轴面板在时间轴上右击在时间轴上右击“记录记录AP元素的路径元素的路径”拖动拖动AP元素录制路径元素录制路径创建放置图片的创建放置图片的AP元素元素网网页页制制作作基基础础教教程程 5.1 5.1 应用应用APAP元素布局页面元素布局页面“环游世界环游世界”5.1.3实现步骤实现步骤4、制作滚动字幕、制作滚动字幕设置父设

6、置父Ap元素的相关属性元素的相关属性 在子在子AP元素中输入滚动文字元素中输入滚动文字创建子元素由右移到父元素左侧动画创建子元素由右移到父元素左侧动画添加循环播放行为添加循环播放行为创建父创建父AP元素和子元素和子AP元素元素在“溢出”下拉列表中选择“hidden”，在“剪辑”的“左”、“上”文本框中分别输入10，在“右”、“下”文本框中输入该AP Div的宽度和高度分别减去10的结果 网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.1 创建创建AP元素元素5.2.2 创建多个创建多个AP元素及元素及AP元素的嵌套元素的嵌套5.2.3 激活和选中

7、激活和选中AP元素元素5.2.4 设置设置AP元素的属性元素的属性5.2.5 AP元素的编辑元素的编辑 网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.1 创建创建AP元素元素方法：方法：1 1、插入法、插入法 插入布局对象插入布局对象APAP元素元素 2 2、拖放法、拖放法 拖拖APAP元素图标到编辑区元素图标到编辑区 3 3、绘制法、绘制法 单击单击APAP元素图标后，到编辑区拖动鼠标绘制。元素图标后，到编辑区拖动鼠标绘制。网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.2 创建多个创建多个AP

8、元素及元素及AP元素的嵌套元素的嵌套 方法：方法：1 1、连续创建多个、连续创建多个APAP元素元素“插入插入”面板面板|“|“布局布局”|“|“绘制绘制apDiv”apDiv”按钮，按下按钮，按下ShiftShift键，在文键，在文档窗口中可以连续绘制多个档窗口中可以连续绘制多个APAP元素。元素。2 2、创建嵌套的、创建嵌套的APAP元素元素n在在APAP元素中再插入元素中再插入APAP元素称为元素称为APAP元素的嵌套元素的嵌套,嵌套嵌套APAP元素可称为子元素可称为子APAP元素，包含嵌套元素，包含嵌套APAP元素的那个元素的那个APAP元素称为父元素称为父APAP元素。元素。n将光标

9、插入到已建好的将光标插入到已建好的APAP元素中，然后前面所说的插入法或拖入法元素中，然后前面所说的插入法或拖入法继续插入新一个继续插入新一个APAP元素，即可在已建的元素，即可在已建的APAP元素中插入一个嵌套元素中插入一个嵌套APAP元素。元素。网网页页制制作作基基础础教教程程 5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.3 激活和选中激活和选中AP元素元素方法：方法：1.单击单击AP元素的激活标志，或元素的激活标志，或AP元素内任何地方元素内任何地方2.将光标置于该将光标置于该AP元素内，然后单击元素内，然后单击标签。标签。3.单击单击AP元素边界。元素边界。4.在在

10、AP元素面板中单击元素面板中单击AP元素。（元素。（shift可选择可选择多个多个AP元素）。元素）。网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.4 设置设置AP元素的属性元素的属性1.AP元素编号：元素编号：AP元素的名称。元素的名称。2.左和上：距页面或父左和上：距页面或父AP元素的左上角相对位置元素的左上角相对位置3.宽和高：宽和高：AP元素的宽度和高度。元素的宽度和高度。4.Z轴：轴：AP元素的重叠顺序。元素的重叠顺序。5.可见性：可见性：AP元素的初始显示状况（可见或隐藏）元素的初始显示状况（可见或隐藏）6.背景图像、背景颜色：背景

11、图像、背景颜色：7.溢出：确定当溢出：确定当AP元素中内容超出设定大小时要采取的行元素中内容超出设定大小时要采取的行动。动。8.剪辑：定义剪辑：定义AP元素的可见区域，并用于将该范围外的内元素的可见区域，并用于将该范围外的内容裁剪掉。容裁剪掉。网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.5AP元素的编辑元素的编辑1.1.调整调整APAP元素的大小元素的大小2.2.移动移动APAP元素元素3.3.对齐对齐APAP元素元素4.4.删除删除APAP元素元素网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2

12、.5AP元素的编辑元素的编辑1 1、调整、调整APAP元素的大小元素的大小 方法：方法：1.1.选选中中需需要要调调整整的的APAP元元素素，用用鼠鼠标标拖拖曳曳APAP元元素的边框四周某个活动块。素的边框四周某个活动块。2.2.选中需要调整的选中需要调整的APAP元素，在元素，在APAP元素的【属元素的【属性】面板的【宽】和【高】文本框中，输性】面板的【宽】和【高】文本框中，输入入APAP元素的宽度和高度尺寸，可精确调整元素的宽度和高度尺寸，可精确调整该该APAP元素的尺寸。元素的尺寸。网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.5AP元素

13、的编辑元素的编辑2 2、移动、移动APAP元素元素 n前提：前提：“防止重叠防止重叠”未被勾选。未被勾选。n方法：方法：n鼠标鼠标:选定选定AP元素，出现元素，出现AP元素激活标志，元素激活标志，用鼠标左键拖该标志。用鼠标左键拖该标志。n键盘键盘:选定选定AP元素，用键盘方向键移动元素，用键盘方向键移动AP元素。元素。网网页页制制作作基基础础教教程程5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.5APAP元素元素的编辑的编辑 3 3、对齐对齐APAP元素元素n选定多个选定多个AP元素，对齐的标准是最后一个选择元素，对齐的标准是最后一个选择的的AP元素，该元素，该AP元素控制点

14、的实心点，而其他元素控制点的实心点，而其他为空心点。为空心点。n修改对齐对齐下缘。修改对齐对齐下缘。网网页页制制作作基基础础教教程程 5.2 AP5.2 AP元素的创建与编辑元素的创建与编辑5.2.5APAP元素元素的编辑的编辑4 4 删除删除APAP元素元素方法：方法：n当选中一个当选中一个APAP元素后，按元素后，按DeleteDelete键或单击【键或单击【剪切】按钮，可删除该剪切】按钮，可删除该APAP元素。元素。n也可在也可在APAP元素面板中删除该元素面板中删除该APAP元素元素 网网页页制制作作基基础础教教程程5.3 AP5.3 AP元素面板的使用元素面板的使用打开打开APAP元

15、素面板元素面板:选择【窗口】【其他】【选择【窗口】【其他】【APAP元素】命令，元素】命令，或按或按F2键，可打开【键，可打开【APAP元素】面板元素】面板。网网页页制制作作基基础础教教程程5.3 AP5.3 AP元素面板的使用元素面板的使用1.1.选定某个选定某个APAP元素元素:在在“APAP元素元素”面板列表中单击面板列表中单击APAP元元素素 2.2.更改更改APAP元素名元素名 n双击双击APAP元素名称，输入新的元素名称，输入新的APAP元素元素名称。名称。3.3.显示、隐藏显示、隐藏APAP元素元素 n单击单击“APAP元素元素”面板左边的显示与面板左边的显示与隐藏列，可显示或隐

16、藏该隐藏列，可显示或隐藏该APAP元素。元素。网网页页制制作作基基础础教教程程5.3 AP5.3 AP元素面板的使用元素面板的使用4.4.改变改变APAP元素的叠放次序元素的叠放次序 n在在AP元素面板修改元素面板修改Z值或用鼠标拖曳值或用鼠标拖曳AP元素，也可以调元素，也可以调整该整该AP元素的叠放次序。元素的叠放次序。5.5.创建和取消嵌套创建和取消嵌套APAP元素元素 n按住按住Ctrl键，将子键，将子AP元素拖曳到父元素拖曳到父AP元素上，当父元素上，当父AP元元素上出现黑框时松开鼠标，便可创建一个嵌套素上出现黑框时松开鼠标，便可创建一个嵌套AP元素元素;n用鼠标将子用鼠标将子AP元素

17、拖离父元素拖离父AP元素，便可取消嵌套元素，便可取消嵌套AP元素。元素。6.6.禁止禁止APAP元素重叠元素重叠 n选中选中“AP元素元素”面板中的面板中的“防止重叠防止重叠”复选框，表示对复选框，表示对AP元素元素操作时禁止各操作时禁止各AP元素重叠。元素重叠。网网页页制制作作基基础础教教程程5.4 AP5.4 AP元素与表格互换元素与表格互换5.4.1 表格转换为表格转换为AP元素元素n表格布局，调整起来比较麻烦。而把表表格布局，调整起来比较麻烦。而把表格布局转换为格布局转换为AP元素布局，通过移动元素布局，通过移动AP元素来调整布局，既方便又快捷。元素来调整布局，既方便又快捷。网网页页制

18、制作作基基础础教教程程5.4 AP5.4 AP元素与表格互换元素与表格互换5.4.1 表格转换为表格转换为AP元素元素方法方法:1.选中要转换为选中要转换为AP元素的表格。元素的表格。2.选择选择“修改修改”“转换转换”“表格到表格到AP元素元素”命命令，令，“转换表格为转换表格为AP元素元素”对话框。对话框。3.在在“转换表格为转换表格为AP元素元素”对话框中可进行如下设对话框中可进行如下设置。置。“防止防止AP元素重叠元素重叠”可禁止可禁止AP元素重叠。元素重叠。“显示显示AP元素面板元素面板”可显示（可显示（AP元素）面板。元素）面板。“显示网格显示网格”在表格转换为在表格转换为AP元素

19、后的网页编辑区元素后的网页编辑区中显示网格线。中显示网格线。“靠齐到网格靠齐到网格”转换后的转换后的AP元素靠齐到网格线上。元素靠齐到网格线上。网网页页制制作作基基础础教教程程5.4 AP5.4 AP元素与表格互换元素与表格互换5.4.2 将将AP元素转换为表格元素转换为表格n问题问题：不是所有的浏览器都支持：不是所有的浏览器都支持AP元素。元素。n解决方法解决方法：使用：使用AP元素创建网页布局，然后将元素创建网页布局，然后将AP元素转换为表格。元素转换为表格。网网页页制制作作基基础础教教程程5.4 AP5.4 AP元素与表格互换元素与表格互换5.4.2 将将AP元素转换为表格元素转换为表格 操作步骤如下操作步骤如下:1.1.打开要将打开要将APAP元素转换为表格元素转换为表格的页面。的页面。2.2.选择【修改】【转换】选择【修改】【转换】【APAP元素到表格】命令，系元素到表格】命令，系统将打开【转换统将打开【转换APAP元素为表元素为表格】对话框格】对话框.3.3.选择好对话框中的选项后，选择好对话框中的选项后，单击【确定】按钮，单击【确定】按钮，APAP元素元素布局的页面就可转换成表格布局的页面就可转换成表格布局的页面布局的页面