dreamever中如何应用AP元素和时间轴探索.pptVIP

第8章　应用AP元素和时间轴 本章导读： 　　AP：Absolute Position，绝对位置。 　　AP元素：分配有绝对位置的元素。 　　AP元素主要应用于网页布局设计中，主要指AP Div，它们可以提供最精确的布局定位方式，使网页呈现出层叠的效果。 　　AP元素和时间轴相结合可以制作出动态效果。 教学目标：本章将学习使用AP元素精确定位网页的页面元素，达到能够精确定位布局并能使用他们使网页呈现层叠效果。学会将时间轴和AP元素动画结合使用，实现网页的动态效果。 重点和难点： 1．AP元素精确定位网页的页面元素 2．时间轴和AP元素动画结合使用，实现网页的动态效果 8.1 Div标签简介 Div标签又称为区隔标记，它的主要作用是可将页面分割成不同区域，设定文字、图像和表格等的排列位置，并对他们进行精确定位。 标准的工作流程：创建CSS规则→创建Div标签 8.1.1为Div标签定义CSS规则 操作方法： 方法1：打开【CSS】面板，单击【CSS】|【属性】|【新建CSS规则】按钮，打开【新建CSS规则】对话框进行设置。 方法2：也可以使用“文本”菜单进行操作。 　　注意：一般使用ID选择器 8.1.2 Div标签的创建 创建的方法 【插入记录】|【布局对象】|【Div标签】菜单命令来实现。 使用工具栏按钮创建 通过表格转换为Div（“修改”菜单） 注意插入在代码中的位置 结构的隐藏（可视化助理） 8.2 AP 元素的应用 AP元素(绝对定位元素)是分配有绝对位置的HTML元素。 特点：可以任意调整AP元素的大小、位置、叠放顺序等，它提供了一种在网页上比较自由地进行布局和设计的途径。 AP Div是使用最多的AP元素。 8.2.1应用AP Div创建AP元素 方法1：切换到【布局】工具栏，单击【标准】按钮，然后单击【绘制AP Div】按钮在设计视图中拖曳鼠标绘制AP元素。 方法2：执行【插入记录】|【布局对象】|【AP Div】菜单命令，与【绘制AP Div】按钮同样能达到插入AP Div的目的。 举例：绘制四个150＊130的紧密排列为“田”字型的AP元素 8.2.2 为AP元素添加内容 方法：在AP元素内部任意位置单击鼠标左键，光标将会在AP元素中闪动，即可以为AP元素添加内容了。 举例：为刚才的四个AP元素插入图片 8.2.3操作和管理AP元素 1．选择AP元素：当AP元素的四边出现8个控制点则说明已被选中。 （1）选定单个AP元素（三种方法） 单击AP元素的选择柄 单击AP元素的边框 “AP元素”面板中单击AP元素的名称 （2）选定多个AP元素 shift+单击 2、调整大小 在按【Ctrl】键的同时按键盘上的方向键，每次可调整1像素。 鼠标拖动 属性面板中输入数值 3、移动、定位 在按【shift】键的同时按键盘上的方向键，每次可调整10像素;　移动键盘上的方向键，每次可调整1像素。 鼠标拖动 属性面板中输入数值 4．AP元素的隐藏与重叠 （1）显示和隐藏 选择AP元素后，进入【属性】面板操作。 AP元素面板中操作 （2）重叠 5．对齐AP元素 使用对齐AP元素命令就可按最后一个选定AP元素的边框来对齐一个或多个AP元素。 方法：执行【修改】|【排列顺序】命令 6．AP元素的属性面板 单个AP元素的属性面板 多个AP元素的属性面板 　　要求：掌握各个属性的含义。 各个选项的功能（单个）： （1）CSS-P元素：AP Div的名称，用来识别不同的AP Div，此处为apDiv4。 （2）左：AP Div距离容器左边界的距离。 （3）上：AP Div距离容器上边界的距离。 （4）宽：AP Div的宽度。 （5）高：AP Div的高度。 （6）Z轴：AP Div的Z轴顺序，或者说叠加顺序。数值高的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 (可视