网页设计与制作第七章 使用Div和AP Div.ppt

第七章 使用Div和AP Div Div标签 AP Div的使用 应用实例使用AP Div显示多层动画 掌握Div标签的操作 掌握使用Div+CSS进行网页布局 掌握使用AP Div进行网页布局 7.1.1 Div概述 Div (Division)元素用来在页面中定义一个区域，使用CSS样式控制Div元素的表现效果，Div元素可以包含文本、图像、表格以及其他各种页面内容。在Dreamweaver CS4 中，可以插入两种Div元素：一种为“Div标签”；另一种是“AP Div”。 Div标签本身没有任何表现属性，如果要使Div标签显示某种效果，或者显示在某个位置，就要为Div标签定义CSS样式。 Div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 Div称为区隔标记。它的作用是设定字、画、表格等的摆放位置。当把文字、图像、或其他的放在 Div 中，它可称作为“Div block”，或“Div element”或“CSS-layer”， 如果要使Div标签显示某种效果，或者显示在某个位置， 就要为Div标签定义CSS样式。Div应用于CSS样式表时更显威力。 使用DIV标签的方法和其他标签没有什么两样，使用方法为： 　　 div 　　 HTML内容 　　 /div 纯粹使用 DIV 标签而不加任何CSS内容，其效果与用 P /P 是一样的。 1．插入 div 标签 可以使用 div 标签创建 CSS 布局块并在文档中对它们进行定位。如果将包含定位样式的现有 CSS 样式表附加到文档，这将很有用。Dreamweaver 使您能够快速插入div 标签并对它应用现有样式。 2．在div 标签输入内容 在该标签边框内的任意位置单击，在光标点就可以输入内容。 3．删除 div 标签 在网页的“设计”视图选中div 标签，按Delete键。 4．div 标签嵌套 Div标签可以嵌套，鼠标在插入的Div标签内单击，然后使用插入Div标签的方法，就可以插入嵌套的Div标签， DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 Div标签本身没有任何表现属性，如果要使Div标签显示某种效果，或者显示在某个位置，就要为Div标签定义CSS样式。使用DIV+CSS布局可将结构和表现分离，减少了HTML文档内大量代码，方便对其阅读，还可以提高网页的下载速度。 7.2.1AP Div概述 AP Div是使用了CSS样式中的绝对定位属性的Div标签，AP Div在网页中的作用很大，它不仅可以与表格相互配合进行网页的布局，还可以与行为相结合实现一些特殊的效果。AP Div可以理解为浮动在网页上的一个页面，它可以被准确地定位在网页中的任何位置，并且可以规定它的大小。 使用AP Div，可以将AP Div前后放置，隐藏某些AP Div而显示其他AP Div，以及在屏幕上移动AP Div。也可以在一个AP Div中放置背景图像，然后在该AP Div的前面放置第二个AP Div， 它包含带有透明背景的文本。 利用AP Div可以非常灵活地放置内容。但是，使用旧版本的网页浏览器在查看AP Div时可能有些问题，在这种情况下，若要保证都能使用AP Div， 可以使用AP Div设计网页布局，然后将AP Div转换为表格。新的浏览器可以完全使用AP Div来设计布局，无需将AP Div转换为表格。 在Dreamweaver中插入文本、图像、表格等元素，只能固定地显示其位置，不能互相重叠和浮动，但是利用AP Div功能，无论将元素放置在网页文档中的任何一个位置，都可以随意移动，而且还可以与动作行为制作出动画效果。 1.插入AP Div AP Div可以使用菜单中的命令插入，也可以选择插入栏中相应的按钮，通过拖拽鼠标添加AP Div。 （1）在页面的“设计”视图，在“插入”工具栏的“布局”类别中，单击“绘制AP Div”按钮 ，然后在页面的“文档”窗口通过鼠标拖拽就可以插入一个AP Div。 （2）在“设计”视图的“文档”窗口中将插入点放置在要插入的位置，单击菜单“插入”→“布局对象”→“AP Div”，就会在页