《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 ppt 作者申莉莉教案第8章》由会员分享，可在线阅读，更多相关《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 ppt 作者申莉莉教案第8章（19页珍藏版）》请在金锄头文库上搜索。
1、第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元素
2、还可以被显示或隐藏，总之，使用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）将光标置于文档的插入点，选择“插入记
3、录”菜单中“布局对象”中的“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 D
4、iv”按钮。 （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元素,选择“窗口”菜单中“A
5、P 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元素未被选中或激活情况下，按
6、住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（厘米）或%（父值的百分比
7、）。单位的缩写必须紧跟在值后面，二者之间没有空格。 “上”：设置AP Div元素顶端距离页面顶端或距离父级AP Div元素顶端的数值。 “Z轴”文本框：设置AP Div元素在AP Div元素重叠中的顺序。Z轴上数值大的AP Div元素位于数值小的AP Div元素之上，Z轴上的值可以是正数，也可以是负数。正数表示AP Div元素位于网页内容之上；负数则表示AP Div元素位于网页内容之下，也就是说，这时AP Div元素会被网页中的内容覆盖。 “溢出”下拉列表：设置当AP Div元素的内容超出AP Div元素范围之后会用什么效果，,8.1.4 AP Div元素的操作,操作AP Div元素主要有对A
8、P Div元素的激活、选择、调整大小、移动对齐等。 1. 激活AP Div元素 如果想往AP Div元素中加入网页的内容，首先要激活该AP Div元素，使当前网页编辑在此AP Div元素内。把鼠标移至AP Div元素内任何地方单击，即可激活AP Div元素，这时插入点被置于AP Div元素内。被激活AP Div元素的边界突出显示，选择手柄也会显示出来如图8-12所示，这是对AP Div元素的激活，不是对AP Div元素操作的选择。因为激活的是该AP Div元素中的位置，并选择整个AP Div元素，此时“AP Div元素”没有被选中，如图所示。,8.1.4 AP Div元素的操作,2. 选中AP
9、 Div元素 要对AP Div元素进行移动、调整大小等操作首先要选择AP Div元素，可以选择一个AP Div元素，也可以同时选择多AP Div元素。在选择单AP Div元素的操作有以下几种操作方法： （1）在文档窗口单击AP Div元素的标志即可为如图所示。,8.1.4 AP Div元素的操作,（2）单击AP Div元素边界。 （3）如果没有活动AP Div元素，也没有AP Div元素被选择，则在AP Div元素内按住Shift键单击。 （4）在“AP Div元素面板”中单击AP Div元素的名字，如图所示。,8.1.4 AP Div元素的操作,多个AP Div元素的操作使用下面几种方法：
10、（1）在多个AP Div元素内或边界上按住Shift键单击，如图所示。,8.1.4 AP Div元素的操作,（2）在“AP Div元素面板”按住Shift键，单击多个AP Div元素。 （3）当多个AP Div元素选择时，最后选择的AP Div元素的手柄以黑色突出显示，其他AP Div元素的手柄以白色突出显示。,8.1.4 AP Div元素的操作,3. 重设AP Div元素大小 调整AP Div元素的大小时，可以单独调整一个AP Div元素的大小，也可以同时调整多个AP Div元素的大小。 调整一个AP Div元素的大小可以使用以下方法： （1）选择AP Div元素，用鼠标拖曳它的改变大小手柄
11、。 （2）选择AP Div元素，按住Ctrl键+光标箭头，可以按像素调整AP Div元素的大小。 （3）按住Ctrl+Shift+光标箭头，可以按网格吸附增量调整AP Div元素的大小。 （4）在“属性检查器”中直接输入“宽”度和“高”度值，可以精确的调整AP Div元素的大小。 提示：如果在AP Div元素的属性面板中勾选了“防止重叠”复选框，在调整某AP Div元素大小时不能使它与另一AP Div元素重叠。,8.1.4 AP Div元素的操作,4. 移动和对齐AP Div元素 在文档窗口中移动AP Div元素，可移动一个AP Div元素，也可同时移动多个AP Div元素，主要有以下几种方法： （1）选择AP Div元素，把选定AP Div元素拖到想放置的位置。如果同时选择了多AP Div元素，拖曳最后选定AP Div元素(以黑色突出显示)的选择手柄。 （2）选择AP Div元素，使用光标箭头键移动AP Div元素。 （3）使用Shift键+光标箭头键按当前网络吸附增量移动AP Div元素。 （4）移动多个AP Div元素的方法与单个AP Div元素类似，只要选中多个AP Div元素，移动其中一个即可，其他的AP Div元素也将和该AP Div元素一起移动。 （5）选择要对齐的几个AP Div元素，选择“修改”中“排列顺序”命令，然后选择对齐方式，可以对齐AP Div元素。,
