第六章 布局对象使用

1、第六章 布局对象的使用Dreamweaver CS3、Flash CS3应用基础案例教程 项目6布局对象的使用项目分解：任务一 创建AP DIV时间轴动画创建并设置普通的AP Div使用时间轴制作动画任务二 Spry在网页中的运用创建Spry菜单栏创建Spry选项卡创建Spry折叠式创建Spry可折叠面板教学准备素材：素材项目6eg效果：素材项目6finaDreamweaver CS3、Flash CS3应用基础案例教程 AP Div可以看作是网页内容的一个容器，在其中可以加入所有应用到页面的对象，如文本、图像、动画、表格、插件等，也可以对AP Div单独设置。它的最大优势在于灵活，它可以放置

2、在页面上的任何一个位置，甚至可以隐藏在页面的边线以内。因此，使用AP Div比使用表格更方便实现页面排版。 Dreamweaver cs3的新功能中集成了轻量级的AJAX框架Spry，最吸引我们的就是Spry所带来的视觉效果了。可以将这些效果直接应用于HTML元素，而无需其他自定义标签。项目6布局对象的使用Dreamweaver CS3、Flash CS3应用基础案例教程 活动1 创建并设置普通的AP Div活动2 使用时间轴制作动画任务一：创建AP DIV时间轴动画项目6布局对象的使用Dreamweaver CS3、Flash CS3应用基础案例教程 AP Div的属性面板参数：知识延伸知识

3、延伸CSS-P元素：AP Div的名称，用于识别不同的AP Div；左、上：AP Div的左/上边界距离浏览器窗口左/上边界的距离；宽、高：AP Div的宽和高；Z轴：AP Div的Z轴顺序；背景图像：AP Div的背景图；Dreamweaver CS3、Flash CS3应用基础案例教程 知识延伸知识延伸AP Div的属性面板参数：可见性：AP Div的显示状态，包括：default：表示为默认值；Inherit：表示继承其你AP Div的属性；visible：表示AP Div及其内容为可见方式，与父AP Div无关；Hidden ： 表示AP Div及其内容为隐藏方式，与父AP Div无关

4、；在设定层属性为不可见时，我们可以通过“窗口”中的层面板，来调出对应的层。背景颜色：AP Div的背景颜色；剪辑：用来指定AP Div哪一部分是可见的，输入的数值是距离层的4个边界的距离；溢出：如果AP Div里面的文字太多或者图像太大，AP Div 的大小不足以全部显示的时候，有4个选项可visible：超出的部分照样显示；hidden ：超出的部分隐藏；scroll：不管是否超出，都显示滚动条；auto：有超出时才出现滚动条供选择。Dreamweaver CS3、Flash CS3应用基础案例教程 1. 在“index.html”页面中建立一个层，并将“logo.jpg”文件放置在其中，根

5、据此文件来设定层的大小，将其定位在左上方；2.将层移动到“时间轴”面板上，建立时间轴动画，并且设定为自动无限循环播放。小试身手小试身手Dreamweaver CS3、Flash CS3应用基础案例教程 任务二：Spry在网页中的运用活动1 创建Spry菜单栏活动2 创建Spry选项卡活动3 创建Spry折叠式活动4 创建Spry可折叠面板参看视频演示项目6布局对象的使用Dreamweaver CS3、Flash CS3应用基础案例教程 .关于菜单栏构件 ：知识延伸知识延伸菜单栏构件是一组可导航的菜单按钮，当浏览者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。Dreamweaver中有两种

6、菜单栏构件：垂直构件和水平构件。下图显示一个水平菜单栏构件，其中的第三个菜单项处于展开状态：A. 菜单项具有子菜单 B. 子菜单项具有子菜单Dreamweaver CS3、Flash CS3应用基础案例教程 知识延伸知识延伸菜单栏构件的 HTML代码： 菜单栏构件由 、 和 标签组成。 每个顶级菜单项都包含一个 li 标签，而顶级菜单项（li 标签）又包含多个用来为每个菜单项定义子菜单的 ul 和 li 标签。.关于菜单栏构件 ：Dreamweaver CS3、Flash CS3应用基础案例教程 2.关于选项卡式面板构件：知识延伸知识延伸选项卡式面板构件是一组面板，浏览者可通过单击要访问的面板

7、上的选项卡来隐藏或显示存储在选项卡式面板中的内容，但每次只有一个内容面板处于打开状态。下图显示一个选项卡式面板构件，第三个面板处于打开状态：A. Tab B. 内容C. 选项卡式面板构件D. 选项卡式面板Dreamweaver CS3、Flash CS3应用基础案例教程 2.关于选项卡式面板构件：知识延伸知识延伸选项卡式面板构件的 HTML 代码： 选项卡式面板构件包含一个含有所有面板的外部 div 标签、一个标签列表、一个用来包含内容面板的 div 和以及各面板对应的 div。 在文档头中和选项卡式面板构件的 HTML 标记之后还包括脚本标签。Dreamweaver CS3、Flash CS

8、3应用基础案例教程 3.关于折叠构件：知识延伸知识延伸折叠构件是一组可折叠的面板，访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。 下图显示一个折叠构件，其中的第一个面板处于展开状态：A. Tab B. 内容C. 选项卡式面板构件D. 选项卡式面板Dreamweaver CS3、Flash CS3应用基础案例教程 3.关于折叠构件：知识延伸知识延伸折叠构件的HTML代码 ： 折叠构件中包含一个含有所有面板的外部div 标签以及各面板对应的 div 标签，各面板的标签中还有一个标题 div 和内容 div。在文档头中和折叠构件

9、的 HTML标记之后还包括 script 标签。 Dreamweaver CS3、Flash CS3应用基础案例教程 4.关于可折叠面板构件：知识延伸知识延伸可折叠面板构件是一个面板，浏览者单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。下例显示一个处于展开和折叠状态的可折叠面板构件：Dreamweaver CS3、Flash CS3应用基础案例教程 知识延伸知识延伸可折叠面板构件的 HTML代码： 可折叠面板构件包含一个外部 div 标签，其中包含内容 div 标签和选项卡容器 div 标签。在文档头中和可折叠面板的 HTML 标记之后还包括脚本标签。4.关于可折叠面板构件：Drea

10、mweaver CS3、Flash CS3应用基础案例教程 1.在“index.html”页面中建立一个垂直的“Spry菜单栏”，并参照“final”文件夹中的“index.html”页面，更改其菜单项目，将“露地花卉”下的子菜单链接全部设为“hana.html”；2.在“index.html”页面中建立一个“Spry选项卡式面板”，并参照“final”文件夹中的“index.html”页面，将标签和内容改动；3.在“hana.html”页面中参照“final”文件夹中的“hana.html”页面，插入“Spry折叠式”和“Spry可折叠面板”，并相应的更改标签和内容。小试身手小试身手Dreamweaver CS3、Flash CS3应用基础案例教程 布局