Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第8章.ppt

《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第8章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章APDiv元素APDiv元素是一种网页元素的定位技术，使用APDiv元素可以以像素为单位精确定位页面元素。APDiv元素可以放置在页面的任意位置。把页面元素放入APDiv中可以使用户对页面操作的布局更加轻松。简单地说，APDiv元素就是网页内容的容器。它同表格一样，可以容纳网页中的所有内容，甚至还可以实现APDiv元素的嵌套。APDiv元素最主要的特性是可以在网页中任意浮动。在APDiv元素内可以包含文本、图像、表单、插件。除了具有定位的特性外，APDiv元素还有一些其他的重要特性。APDiv元素可以重叠，所以在网页中可以实现网页内容的重叠效果。APDiv元素还可以被显示或隐藏，

2、总之，使用APDiv元素可以让用户更完美方便的对网页进行各种精美的雕琢。案例：创建APDiv元素并在其中添加文字和图像【案例目的】在DreamweaverCS3中插入APDiv元素，并在其中添加文字和图像。如图8-1所示，在左边的APDiv元素中插入文字，在右边的APDiv元素中插入一副图片。【核心知识】掌握创建APDiv元素，在APDiv元素中插入其他元素及修饰APDiv元素的方法。8.1.1创建普通APDiv元素创建普通APDiv元素的方法可以有三种方法：1.在主菜单的插入APDiv元素（1）将光标置于文档的插入点，选择“插入记录”菜单中“布局对象”中的“APDiv”选项。（2）在

3、文档的插入点出现APDiv元素，用户可以选中APDiv元素的边框移动其位置或大小如图所示。8.1.1创建普通APDiv元素2.使用对象面板将APDiv元素拖放到插入点（1）将光标放在文档插入点，在“插入面板”中选择“布局”标签下的“绘制APDiv”按钮按住鼠标左键不放如图所示。8.1.1创建普通APDiv元素（2）从“插入面板”中拖到文档窗口就可以创建一个APDiv元素如图所示。8.1.1创建普通APDiv元素3.绘制APDiv元素（1）将光标放在文档插入点，在“插入面板”中单击“绘制APDiv”按钮。（2）在文档窗口中拖动画出APDiv元素，如图所示。8.1.1创建普通APDiv元素

4、（3）在画APDiv元素时按住Ctrl即可画多个APDiv元素如图所示。8.1.2创建嵌入式APDiv元素嵌入式APDiv元素的创建实际就是在APDiv元素中创建APDiv元素。其方法和创建单个APDiv元素大同小异。1.最简单的办法就是把“插入面板”的“绘制APDiv”按钮直接拖放到要创建的嵌套APDiv元素的APDiv元素里面，新APDiv元素就被嵌套在第一APDiv元素里面，如图所示。8.1.2创建嵌入式APDiv元素选择“窗口”菜单中“APDiv元素”命令或直接按F2键打开“APDiv元素面板”，方便APDiv元素的选择操作，如图所示。8.1.3设置APDiv元素的属性要正确的

5、运用APDiv元素来设计网页，必须了解APDiv元素的属性和设置方法。APDiv元素属性设置之前必须要选中APDiv元素，选中APDiv元素的方法一般有以下几种：（1）单击网页编辑窗口中要选择的APDiv元素左上角的APDiv元素标记。（2）先单击APDiv元素中任意位置激活APDiv元素，再单击APDiv元素左上角的矩形框标记。（3）单击APDiv元素的边框。（4）在APDiv元素未被选中或激活情况下，按住Shift键的同时再单击APDiv元素中任意位置。（5）直接在APDiv元素面板上单击APDiv元素的名称。选中APDiv元素后属性面板就变成了APDiv元素属性面板，对APDiv

6、元素进行设置如图所示。8.1.3设置APDiv元素的属性“APDiv元素编号”文本框：设置APDiv元素的名称，此名称将显示在APDiv元素面板中，在脚本程序中也会被用到。“左”：设置APDiv元素左端距离页面左端或距离父级APDiv元素左端的数值，默认单位是像素（px）。也可以指定以下单位pc（十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或%（父值的百分比）。单位的缩写必须紧跟在值后面，二者之间没有空格。“上”：设置APDiv元素顶端距离页面顶端或距离父级APDiv元素顶端的数值。“Z轴”文本框：设置APDiv元素在APDiv元素重叠中的顺序。Z轴上数值大的AP

7、Div元素位于数值小的APDiv元素之上，Z轴上的值可以是正数，也可以是负数。正数表示APDiv元素位于网页内容之上；负数则表示APDiv元素位于网页内容之下，也就是说，这时APDiv元素会被网页中的内容覆盖。“溢出”下拉列表：设置当APDiv元素的内容超出APDiv元素范围之后会用什么效果，8.1.4APDiv元素的操作操作APDiv元素主要有对APDiv元素的激活、选择、调整大小、移动对齐等。1.激活APDiv元素如果想往APDiv元素中加