dreamever中如何应用AP元素和时间轴讲解.ppt

第8章　应用AP元素和时间轴 ;教学目标：本章将学习使用AP元素精确定位网页的页面元素，达到能够精确定位布局并能使用他们使网页呈现层叠效果。学会将时间轴和AP元素动画结合使用，实现网页的动态效果。 重点和难点： 1．AP元素精确定位网页的页面元素 2．时间轴和AP元素动画结合使用，实现网页的动态效果;8.1 Div标签简介;8.1.1为Div标签定义CSS规则;8.1.2 Div标签的创建;8.2 AP 元素的应用;8.2.1应用AP Div创建AP元素;8.2.2 为AP元素添加内容;8.2.3操作和管理AP元素;2、调整大小 在按【Ctrl】键的同时按键盘上的方向键，每次可调整1像素。 鼠标拖动 属性面板中输入数值 3、移动、定位 在按【shift】键的同时按键盘上的方向键，每次可调整10像素;　移动键盘上的方向键，每次可调整1像素。 鼠标拖动 属性面板中输入数值;4．AP元素的隐藏与重叠;5．对齐AP元素;6．AP元素的属性面板;各个选项的功能（单个）：;（7）可见性：设置AP Div的可见性，AP Div的显示状态包括： default（默认）：不指定可视性属性。当未指定可见性时，大多数浏览器会默认为inherit。 inherit（继承）：使用该AP Div元素父级的可见属性。 visible（可视）：显示AP元素的内容，不管其父AP元素的值。 hidden（隐藏）：不显示AP元素内容，不管其父AP元素的值。 （8）背景图像：为AP Div设置一个背景图像，单击其文件夹图标可浏览到一个图像文件并将其选定。 （9）背景颜色：设置AP Div的背景颜色，如果将此选项留为空白，则表示指定透明的背景。;（10）类：选择AP Div的样式(如在页面中对AP Div进行了CSS样式设置)。 （11）溢出：设置当AP Div 元素超出了AP Div范围后显示内容的方式。它包括 visible (可视)：当AP元素内的内容超出了AP元素的大小则增大AP元素的尺寸。AP元素的扩展方向为下方和右方。 hidden (隐藏)：保持AP元素的大小并裁掉容纳不下的东西，并且不会出现滚动。 scroll(滚动)：无论AP元素内的内容是否超出了，AP元素的大小都为AP元素添加滚动条。 auto(自动)：只有当AP元素内的内容超出了它的边界才出现滚动条。 （12）剪辑：定义AP Div的可见区域。指定左侧、顶部、右侧和底边坐标可在AP Div的坐标空???中定义一个矩形，一般从AP Div的左上角开始计算。AP Div经过剪辑后，只有指定的矩形区域才是可见的。;文本属性部分在前面的学习中己经讲过，这里就不再重复了。这里只简单介绍下半部分的设置。 （1）左、上：指定AP元素相对页面或者其父AP元素左上角的位置。 （2）宽、高：指定AP元素的宽和高。当AP元素中的内容超出设定值时这些值将失效。 （3）显示：指定AP元素显示的初始情况(显示与否)。 （4）标签：指定所用的HTML标签。 （5）背景图象：为AP元素指定背景图像。 （6）背景颜色：为AP元素指定背景颜色。当这个选项空着即为指定透明背景。;8.2.4嵌套AP元素;8.2.5　合并分割图像;8.3 制作AP元素动画;8.3.1.认识“时间轴”面板;（6）“行为”通道：是应该在时间轴中特定帧处执行的行为的通道。 （7）“动画”通道：显示用于制作AP元素和图像动画的条。 （8）前进按钮将播放栏移至时间轴中的第一帧。 （9）后退按钮将播放栏向左移动一帧。单击【后退】按钮并按住鼠标可向后播放时间轴。 （10）播放按钮将播放栏向右移动一帧。单击【播放】按钮并按住鼠标可向前播放时间轴。 （11）自动播放：勾选自动播放选项可以使时间轴在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的body标签，它在页加载时执行“播放时间轴”操作。 （12）循环：勾选循环选项可以使时间轴于当前页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”面板中双击该行为的标记可编辑此行为的参数并更改循环的次数。;8.3.2　创建时间轴动画 注意：时间轴只能移动AP元素，所以待移动的元素应放AP元素中。举例说明以下步骤 步骤1：制作AP元素 步骤2：将AP元素拖动到“时间轴”面板　或 　　　　使用“修改”菜单 步骤3 ：拖动最后一帧到需要的帧数 步骤4 ：增加关键帧，并修改其属性 步骤5 ：选定“自动播放”和“循环”选项 8.3.3　使用多个时间轴 在网页中可以使用多个时间轴控制网页中的不同元素。 方法：使用“修改”菜单;8.3.4具有预览功能的图库页面;步骤： 插入和编辑表格 插入AP元素，在其中插入第一个图像 将图像添加到时间轴 延长帧数，