精品文档-新编Dreamweaver CS3动态网页设计与制作教程-第11章

第11章 AP元素和时间轴在网页中的应用 图11.31 曲线路径
第11章 AP元素和时间轴在网页中的应用
2. 相关知识点 时间轴面板； AP元素的移动效果； 关键帧的添加。 3. 知识拓展：利用时间轴和AP元素实现滚动字幕效果 利用时间轴和AP元素实现滚动字幕效果的具体操作如下： (1) 在【插入】面板的【布局】类别中，单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中拖动鼠标以绘 制一个AP元素，在AP元素中添加文字内容，如图11.32所示。
第11章 AP元素和时间轴在网页中的应用 图11.14 AP元素布局视图
第11章 AP元素和时间轴在网页中的应用 图11.15 【修改】菜单
第11章 AP元素和时间轴在网页中的应用 图11.16 【将AP Div转换为表格】对话框
第11章 AP元素和时间轴在网页中的应用 图11.17 AP Div转换为表格后的效果
第11章 AP元素和时间轴在网页中的应用 图11.11 apDiv1属性
第11章 AP元素和时间轴在网页中的应用 图11.12 apDiv2属性
第11章 AP元素和时间轴在网页中的应用 图11.13 apDiv3属性
第11章 AP元素和时间轴在网页中的应用
(2) 三个AP元素的布局如图11.14所示。 (3) 在标题栏中选择【修改】→【转换】项，单击【将AP Div转换为表格】命令，如图11.15所示。 (4) 弹出【将AP Div转换为表格】对话框，如图11.16所 示。 (5) 转换后的效果如图11.17所示。
第11章 AP元素和时间轴在网页中的应用
(2) 其中， 表示AP元素是不可见的， 表示AP元素 是可见的。
7) 选择、移动和调整AP元素 选择、移动和调整AP元素的具体操作步骤如下： (1) 在【AP元素】面板中，单击该AP元素可选中AP元素。 (2) 在【设计】视图中，选中一个或多个AP元素，拖动选 定的AP元素的选择控点，如图11.9所示。
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用
11.1 项目1：创建、操作和管理AP元素 11.2 项目2：利用AP元素布局网页 11.3 项目3：制作AP元素动画 11.4 项目4：控制时间轴动画 11.5 课堂综合训练 11.6 小结 习题
第11章 AP元素和时间轴在网页中的应用
3) 为AP元素添加内容 创建AP Div后，只需将插入点放置于该AP Div中，然后就 可以像在页面中添加内容一样，将内容添加到AP Div中，如图 11.4所示。
第11章 AP元素和时间轴在网页中的应用 图11.4 【插入内容】视图
第11章 AP元素和时间轴在网页中的应用
4) 查看AP元素的属性 查看AP元素属性的具体操作如下： (1) 选择一个AP元素，在属性面板中可查看该AP元素的属 性，如图11.5所示。 (2) 其中，“CSS-P”元素是为选定的AP元素指定一个ID， 用于在“AP元素”面板和JavaScript代码中标识AP元素。此ID 只能用字母、数字和字符，不能使用空格、斜杠或句号等特殊 字符。
11.1 项目1：创建、操作和管理AP元素
1. 操作步骤 可以在“AP元素”面板中创建AP元素。 1) 创建AP元素 创建AP元素的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口中，单击【布局】 类别中的【绘制AP Div】按钮，如图11.1所示。
第11章 AP元素和时间轴在网页中的应用 图11.1 【AP Div按钮】绘制窗口
11.3 项目3：制作AP元素动画
1. 操作步骤 制作AP元素动画的具体操作步骤如下： (1) 选择【窗口】→【时间轴】，打开【时间轴】面板， 如图11.22所示。 (2) 在Adobe Dreamweraver CS3主窗口的【布局】类别中， 单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中， 拖动以绘制一个AP元素，如图11.23所示。
第11章 AP元素和时间轴在网页中的应用
2. 相关知识点 AP元素的属性设置； 将AP元素转换为表格。 3. 知识拓展：将表格布局转换为AP Div布局 将表格布局转换为AP Div布局的具体操作步骤如下： (1) 在Adobe Dreamweaver CS3主窗口的【布局】类别中， 单击【表格】按钮。在【文档】窗口的【设计】视图中，绘制 两个表格，如图11.18所示。
(10) 单击此关键帧，拖动AP元素在页面中的位置，形成 曲线路径，如图11.31所示。
(11) 可依此方法继续添加关键帧，并改变AP元素在页面 中的位置，形成更加丰富的曲线路径。按F12键预览页面，可 以看到图像沿着曲线移动的效果。
第11章 AP元素和时间轴在网页中的应用 图11.30 添加关键帧视图
第11章 AP元素和时间轴在网页中的应用 图11.24 插入图像视图
第11章 AP元素和时间轴在网页中的应用 图11.25 将AP元素拖至【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.26 动画轨迹设置
第11章 AP元素和时间轴在网页中的应用
(6) 若要使时间轴在浏览器打开时自动播放，单击【时间 轴】面板中的【自动播放】按钮，然后单击提示消息中的【确 定】按钮，如图11.27所示。
第11章 AP元素和时间轴在网页中的应用 图11.32 插入AP元素和文字视图
百度文库
第11章 AP元素和时间轴在网页中的应用
(2) 选择【窗口】→【时间轴】，打开【时间轴】面板， 使用鼠标选定AP元素，拖至【时间轴】面板中，在时间轴的第 一个通道中出现一个动画条，再将动画条末端的关键帧标签拖 放到第50帧，如图11.33所示。
5) 更改AP元素的堆叠顺序 更改AP元素堆叠顺序的具体操作如下： (1) 在Dreamweaver CS3中选择【窗口】→【AP元素】项， 打开【AP元素】面板，如图11.6所示。
第11章 AP元素和时间轴在网页中的应用 图11.6 【AP元素】面板
第11章 AP元素和时间轴在网页中的应用
(2) 将AP元素向上或向下拖动至所需的堆叠顺序，如图 11.7所示。
(3) 单击位于动画条末端的关键帧标签。在页面上将层移 至它在动画结束的位置。这时将出现一条线，显示的是动画的 轨迹，如图11.34所示。
第11章 AP元素和时间轴在网页中的应用 图11.33 动画条
第11章 AP元素和时间轴在网页中的应用 图11.34 添加结束帧路径视图
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用 图11.29 播放时间变长视图
第11章 AP元素和时间轴在网页中的应用
(9) 若要实现曲线运动，需要添加关键帧。例如，将动画 条末端的关键帧标签拖放到第50帧，选择动画条的第30帧，然 后按住Ctrl键并单击动画条，即添加了一个关键帧，如图 11.30所示。
第11章 AP元素和时间轴在网页中的应用 图11.9 移动AP元素视图
第11章 AP元素和时间轴在网页中的应用
(3) 如果要调整大小，拖动AP元素的调整大小手柄即可， 如图11.10所示。
第11章 AP元素和时间轴在网页中的应用 图11.10 调整AP元素大小视图
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用 图11.5 AP元素【属性】面板
第11章 AP元素和时间轴在网页中的应用
(3) “左”和“上”是指定AP元素的左上角，相当于页面 左上角的位置；“宽”和“高”指定AP元素的宽度和高度； “Z轴”确定AP元素的堆叠顺序；“溢出”是当AP元素的内容 超过AP元素的指定大小时，如何在浏览器中显示AP元素。
第11章 AP元素和时间轴在网页中的应用 图11.18 【表格布局】视图
第11章 AP元素和时间轴在网页中的应用
(2) 选择【修改】→【转换】，单击【将表格转换为AP Div】命令，如图11.19所示。
(3) 弹出【将表格转换为AP Div】对话框，如图11.20所 示。
(4) 转换后的效果如图11.21所示。
第11章 AP元素和时间轴在网页中的应用 图11.22 【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.23 绘制AP元素视图
第11章 AP元素和时间轴在网页中的应用
(3) 在AP元素中插入如图11.24所示的图像。 (4) 使用鼠标选定AP元素，拖至【时间轴】面板中，在时 间轴的第一个通道中出现一个动画条，如图11.25所示。 (5) 单击提示消息中的【确定】按钮，然后单击位于动画 条末端的关键帧标签。在页面上将层移至它在动画结束的位置。 这时将出现一条线，显示的即是动画的轨迹，如图11.26所示。
2. 相关知识点 AP元素的创建； AP元素的首选参数； AP元素的面板、Z轴和可见性； AP元素的属性设置。
第11章 AP元素和时间轴在网页中的应用
11.2 项目2：利用AP元素布局网页
1. 操作步骤 利用AP元素布局网页的具体操作步骤如下： (1) 在【插入】面板的【布局】类别中，单击【绘制AP Div】按钮。在【文档】窗口的【设计】视图中，拖动以绘制 三个AP Div，属性设置见图11.11～图11.13。
6) 显示和隐藏AP元素 显示和隐藏AP元素的具体操作如下： (1) 选择【窗口】→【AP元素】，打开【AP元素】面板。 在AP元素的眼形图标列内单击可以更改其可见性，如图11.8所 示。
第11章 AP元素和时间轴在网页中的应用 图11.7 改变AP元素堆叠顺序后的视图
第11章 AP元素和时间轴在网页中的应用 图11.8 AP元素的可见性
第11章 AP元素和时间轴在网页中的应用 图11.2 【绘制AP Div】视图
第11章 AP元素和时间轴在网页中的应用 图11.3 AP元素首选参数
第11章 AP元素和时间轴在网页中的应用
【显示】：确定AP元素在默认情况下是否可见，其选 项为“default”、“继承”、“可见”和“隐藏”。
【宽】和【高】：指定使用【插入】→【布局对象】 →【AP Div】创建的AP元素的默认宽度和高度(以像素为单位)。
第11章 AP元素和时间轴在网页中的应用
(2) 之后，在【文档】窗口的【设计】视图中，拖动光标 以绘制一个AP Div，如图11.2所示。
2) 查看AP元素的首选参数 查看AP元素首选参数的具体步骤如下： (1) 选择【编辑】→【首选参数】，从左侧的【分类】列 表中选择AP元素并指定以下首选参数，然后单击【确定】按钮， 如图11.3所示。
【背景颜色】：指定一种默认背景颜色。请从颜色选 择器中选择颜色。
【背景图像】：指定默认背景图像。单击“浏览”按 钮可在计算机上查找图像文件。
第11章 AP元素和时间轴在网页中的应用
【嵌套】：指定从现有AP Div边界内的某点开始绘制 的AP Div是否应该是嵌套的AP Div。当绘制AP Div时，按Alt 键可临时更改此设置。
(4) 选择动画条的第20帧，然后按住Ctrl键并单击动画条， 从而添加了一个关键帧，单击此关键帧，拖动AP元素在页面中 的位置，如图11.35所示。
(5) 选择动画条的第40帧，然后按住Ctrl键并单击动画条， 从而添加了一个关键帧。单击此关键帧，拖动AP元素在页面中 的位置，如图11.36所示。
第11章 AP元素和时间轴在网页中的应用 图11.19 【将表格转换为AP Div(I)】命令
第11章 AP元素和时间轴在网页中的应用 图11.20 【将表格转换为AP Div】对话框
第11章 AP元素和时间轴在网页中的应用 图11.21 表格转换为AP Div后的效果
第11章 AP元素和时间轴在网页中的应用
(7) 若要使时间轴在浏览器打开时循环播放，单击【时间 轴】面板中的【循环】按钮，然后单击提示消息中的【确定】 按钮，如图11.28所示。
(8) 若要使动画的播放时间更长，可将结束帧标签向右拖 动，如图11.29所示。
第11章 AP元素和时间轴在网页中的应用 图11.27 自动播放设置
第11章 AP元素和时间轴在网页中的应用 图11.28 循环播放设置