网页设计与制作案例教程第8章.ppt

第8章 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 CS3中插入AP Div元素，并在其中添加文字和图像。如图8-1所示，在左边的AP Div元素中插入文字，在右边的AP Div元素中插入一副图片。 【核心知识】掌握创建AP Div元素，在AP Div元素中插入其他元素及修饰AP Div元素的方法。 8.1.1 创建普通AP Div元素 创建普通AP Div元素的方法可以有三种方法： 1. 在主菜单的插入AP Div元素 （1）将光标置于文档的插入点，选择“插入记录”菜单中“布局对象”中的“AP Div”选项。 （2）在文档的插入点出现AP Div元素，用户可以选中AP Div元素的边框移动其位置或大小如图所示。 8.1.1 创建普通AP Div元素 2. 使用对象面板将AP Div元素拖放到插入点 （1）将光标放在文档插入点，在“插入面板”中选择“布局”标签下的“绘制AP Div”按钮按住鼠标左键不放如图所示。 8.1.1 创建普通AP Div元素 （2）从“插入面板”中拖到文档窗口就可以创建一个AP Div元素如图所示。 8.1.1 创建普通AP Div元素 3. 绘制AP Div元素 （1）将光标放在文档插入点，在“插入面板”中单击“绘制AP Div”按钮。 （2）在文档窗口中拖动画出AP Div元素，如图所示。 8.1.1 创建普通AP Div元素 （3）在画AP Div元素时按住Ctrl即可画多个AP Div元素如图所示。 8.1.2 创建嵌入式AP Div元素 嵌入式AP Div元素的创建实际就是在AP Div元素中创建AP Div元素。其方法和创建单个AP Div元素大同小异。 1. 最简单的办法就是把“插入面板”的“绘制AP Div”按钮直接拖放到要创建的嵌套AP Div元素的AP Div元素里面，新AP Div元素就被嵌套在第一AP Div元素里面，如图所示。 8.1.2 创建嵌入式AP Div元素 选择“窗口”菜单中“AP Div元素”命令或直接按F2键打开“AP Div 元素面板”，方便AP Div元素的选择操作，如图所示。 8.1.3 设置AP Div元素的属性 要正确的运用AP Div元素来设计网页，必须了解AP Div元素的属性和设置方法。AP Div元素属性设置之前必须要选中AP Div元素，选中AP Div元素的方法一般有以下几种： （1）单击网页编辑窗口中要选择的AP Div元素左上角的AP Div元素标记。 （2）先单击AP Div元素中任意位置激活AP Div元素，再单击AP Div元素左上角的矩形框标记。 （3）单击AP Div元素的边框。 （4）在AP Div元素未被选中或激活情况下，按住Shift键的同时再单击AP Div元素中任意位置。 （5）直接在AP Div元素面板上单击AP Div元素的名称。 选中AP Div元素后属性面板就变成了AP Div元素属性面板，对AP Div元素进行设置如图所示。 8.1.3 设置AP Div元素的属性 “AP Div元素编号”文本框：设置AP Div元素的名称，此名称将显示在AP Div元素面板中，在脚本程序中也会被用到。 “左”：设置AP Div元素左端距离页面左端或距离父级AP Div元素左端的数值，默认单位是像素（px）。也可以指定以下单位pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或%（父值的百分比）。单位的缩写必须紧跟在值后面，二者之间没有空格。 “上”：设置AP Div元素顶端距离页面顶端或距离父级AP Div元素顶端的数值。 “Z轴”文本框：设置AP Div元素在AP Div元素重叠中的顺序。Z轴上数值大的AP Div元素位于数值小的AP Div元素之上，Z轴上的值可以是正数，也可以是负数。正数表示AP Div元素位于网页内容之上；负数则表示AP Div元素位于网页