第6章 AP Div(网页制作案例教程课件).ppt

网页制作案例教程 第1章：网站与网页概述 第2章：HTML入门 第3章：网页基本编辑 第4章：表格 第5章：框架 第6章：AP Div 第7章：表单 第8章：CSS和模板 第9章：网页图形处理工具Fireworks CS5 第10章：图像处理工具Photoshop CS5 第11章：动画制作工具Flash CS5 第12章：网站制作综合应用 第6章 AP Div 了解AP Div的基本概念 掌握AP层的创建和有关属性设置 掌握AP层的基本操作 掌握AP与时间轴配合使用的动画效果 6.1 AP层的创建与属性 AP 层对象是Absolutely Positioned Elements 的缩写，也即“绝对定位元素”，一般称为“层”。 AP层对象可以重叠、任意移动、可以设置为隐藏，得到比表格更多的效果。 6.1.1 创建AP层 6.1.1 创建AP层 6.1.2 AP层的属性 6.2 AP层的基本操作 介绍AP层的基本操作，包括AP层的激活与选择，插入内容，调整AP层的位置、大小、层叠顺序、可见性、背景、对齐方式等。 6.2.2 在AP层内插入内容 6.2.3 调整AP层的位置 6.2.5 改变AP层的可见性 6.2.6 设置AP层的背景 6.2.7 改变AP层的层叠顺序 6.2.8 对齐AP层 6.2.9 AP层与表格间的转换 6.2.10 AP层标签的特点 6.3 AP层的常见布局及综合实例 AP层是一种页面布局容器。 6.3.2 AP层综合布局实例 6.4 小结 AP Div是进行网页布局的常用方法。 本章介绍关于AP Div的基本知识。 结合实例对AP Div的创建和属性修改做了讲解。 * 学习目标： 一、插入Div标签 利用“布局”插入工具栏，我们可以轻松插入Div标签 ( Div标签用于在网页中设置一个的区域,可以在该区域中独立输入文字、编辑文本格式、插入图片等到) 二、直接创建AP层 三、创建嵌套AP层 嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。嵌套的AP 元素会随着父AP元素的移动而移动，继承父AP元素的可见性。 实现AP层对象元素的嵌套最常用的方法是：在“布局”插入工具栏中拖动“绘制AP Div”到AP元素内，可直接在AP元素中创建嵌套的AP元素。 四、实例演示 6.1.1 创建AP层 五、嵌套关系 6.1.1 创建AP层 AP层1和AP层2是一种平行的关系。 而AP层4是嵌套在AP层3中的，它将随之父层AP层3的移动而移动。 div id=apDiv3 div id=apDiv44/div 3 /div 以下代码反映AP层4与AP层3的嵌套关系： 在AP元素面板中也可以看到嵌套的关系： AP层的属性包括ID、位置、大小、Z轴可见性、背景、类、溢出、剪辑等基本属性。 P108 其中： CSS-P元素：对AP层的命名，默认名称为APDiv* 可见性： Default（默认）：不指定可见性的属性。 Inherit（继承）：继承父对象的可见性。 Visible（可见）：显示AP元素。 Hidden（隐藏）：不显示AP元素。 6.2.1 AP层的激活与选择 一、激活AP层 ——单击AP层内部，使其为编辑状态 二、选择AP层 ——单击AP层边缘，出现8个控制柄 一、在AP层内输入或从其他文件中复制粘贴相应文本、 各种按钮，插入图像、媒体、脚本等内容。 二、AP层里面再嵌套AP层。 6.2.4 调整AP层的大小 一、选中AP层；打开AP层元素属性检查器。 二、用鼠标单击要更改AP层名称前面的眼睛图标即 可改变AP层的可见性。 另外，也可在“属性检查器”中更改AP层的可见性属性。 一、插入背景图片 二、添加背景颜色 Z轴(Z)：设置AP层的排列顺序，数值越大，排列越上层， 能覆盖下层的信息 当有多个AP层时，可以对它们进行对齐操作。 对齐方式包括左对齐、右对齐、上对齐与对齐下缘。 对齐结果都以最后一个选定AP层的边框位置为标准对齐。 一、将AP Div转换为表格。 1、单击“修改”菜单，选择“转换”。 2、点击“将AP Div转换为表格”命令菜单，在弹出的对话框中作相关的设置，完成转换。 二、将表格转换为AP Div的操作方法 与类同，选取“将表格转换为AP Div”。 一、 SPA