使用APDiv元素PPT学习教案课件

,#,单击此处编辑母版标题样式,会计学,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,会计学,1,使用,APDiv,元素,会计学1使用APDiv元素,1 AP Div,概述,AP Div,是,DIV,标签中的一种定位技术，在,Dreamweaver,中也被叫做图层，,用来控制浏览器窗口中元素的位置、层次。,AP Div,最主要的特性就是它是浮动在网页内容之上的，也就是说，可以在网页上任意改变其位置，实现对,AP Div,的准确定位,。把,页面元素放在,AP Div,中，可以控制,AP Div,堆叠次序、显示或隐藏等性质,。,第1页/共36页,1 AP Div概述AP Div是DIV标签中的一种定位技,2,创建,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,元素。,第2页/共36页,2 创建AP Div元素创建AP Div元素有以下几种方法,提示：在“插入”面板中选择“布局”标签，点击后，在文档窗口中，按住,Ctrl,键的同时按住鼠标左键拖曳鼠标，可以绘制多个,AP Div,元素。,在默认情况下，每当用户创建一个新的,AP Div,，都会使用,DIV,标志它，并将标记 显示到网页左上角的位置。创建的,AP Div,元素如图,7-1,所示。,若要在网页左上角显示出,AP Div,标记，首先选择“查看可视化助理不可见元素”命令，使“不可见元素”命令呈被选择状态，然后再选择“编辑首选参数”命令，弹出“首选参数”对话框，选择“分类”选项框中的“不可见元素”选项，选择右侧的“,AP,元素的锚点”复选框，如图,7-2,所示，单击,【,确定,】,按钮完成设置。,图,7-1,创建的,AP Div,元素,第3页/共36页,提示：在“插入”面板中选择“布局”标签，点击后，在文档窗口,图,7-2 “,首选参数”对话框,第4页/共36页,图7-2 “首选参数”对话框第4页/共36页,设置,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,元素未被选中或激活情况下，按住,Shift,键的同时再单击,AP Div,元素中的任意位置。,第5页/共36页,设置AP Div元素的属性 要正确地运用AP Div元素来设,在“,AP Div,元素”面板中，直接单击,AP Div,元素的名称。,选中,AP Div,元素后，其对应的“属性”面板如图,7-3,所示。,AP Div“,属性”面板中各项含义：,CSS-P,元素：为选中的,AP Div,元素设置名称。名称由数字或字母组成，不能用特殊字符。每个,AP Div,元素的名称是唯一的。,左、上：分别设置,AP Div,元素左边界和上边界相对于页面左边界和上边界的距离，默认单位为像素（,px,）。也可以指定为,pc,（,pica,）、,pt,（点）、,in,（英寸）、,mm,（毫米）、厘米（,cm,）或,%,（百分比）。,图,7-3 “AP Div”,的属性面板,第6页/共36页,在“AP Div元素”面板中，直接单击AP Div元素的名称,宽、高：分别设置,AP Div,元素高度和宽度，单位设置同“左”、“上”属性。,Z,轴：设置,AP Div,元素的堆叠次序，该值越大，则表示其在越前端显示。,可见性：设置,AP Div,元素的显示状态。“可见性”右侧下拉列表框包括四个可选项：“,default,（缺省）”，选中该项，则不明确指定其可见性属性，在大多数浏览器中，该,AP Div,会继承其父级,AP Div,的可见性。“,inherit,（继承）”，选择该项，则继承其父级,AP Div,的可见性。“,visible,（可见）”，选择该项，则显示,AP Div,及其中内容，而不管其父级,AP Div,是否可见。“,hidden,（隐藏）”，选择该项，则隐藏,AP Div,及其中内容，而不管其父级,AP Div,是否可见。,背景图像：设置,AP Div,元素的背景图像。可以通过单击“文件夹”按钮选择本地文件，也可以在文本框中直接输入背景图像文件的路径确定其位置。,背景颜色：设置,AP Div,的背景颜色，值为空表示背景为透明。,第7页/共36页,宽、高：分别设置AP Div元素高度和宽度，单位设置同“左”,类：可以将,CSS,样式表应用于,AP Div,。,溢出：设置,AP Div,中的内容超过其大小时的处理方法。“溢出”右侧下拉列表框中包括四个可选项：“,visible,（可见）”，选择该项，当,AP Div,中内容超过其大小时，,AP Div,会自动向右或者向下扩展。“,hidden,（隐藏）”，选择该项，当,AP Div,中内容超过其大小时，,AP Div,的大小不变，也不会出现滚动条，超出,AP Div,内容不被显示。“,scroll,（滚动）”，选择该项，无论,AP Div,中的内容是否超出,AP Div,的大小，,AP Div,右端和下端都会显示滚动条。“,auto,（自动）”，选择该项，当,AP Div,内容超过其大小时，,AP Div,保持不变，在,AP Div,右端和下端都出现滚动条，以使其中的内容能通过拖动滚动条显示。,剪辑：设置,AP Div,可见区域大小。在“上”、“下”、“左”、“右”文本框中，可以指定,AP Div,可见区域上、下、左、右端相对于,AP Div,边界距离。,AP Div,经过剪辑后，只有指定的矩形区域才是可见的。,第8页/共36页,类：可以将CSS样式表应用于AP Div。第8页/共36页,AP,元素面板,通过“,AP,元素”面板可以方便地管理网页文档中,AP Div,元素。在,Dreamweaver,中，选择“窗口,AP,元素”菜单命令或按,F2,键，均可打开“,AP,元素”面板，如图,7-4,所示。,“,AP,元素”面板各选项含义如下：,防止重叠：选中此选项，可以防止,AP Div,元素之间发生重叠。不选中此复选框，,AP,元素则可以相互重叠。该选项主要用在,AP Div,和表格相互转换时，当将,AP Div,转换为表格，为防止浏览器,不兼容，选中该选项，以防止,AP,元素相互重叠。,图,7-4“AP,元素”面板,第9页/共36页,AP元素面板通过“AP元素”面板可以方便地管理网页文档中AP,图标：如果某一个,AP,元素左侧有该图标，表示该,AP,元素可见，如果图标变成，则不可见。如果没有该图标，表示该层继承其父级,AP Div,元素的可见性。如果没有父级,AP Div,元素，则父级,AP Div,元素可以看成其本身，通常情况下，这意味着是可见的。可以通过单击图标控制该,AP Div,的可见属性。,ID,：该属性用来显示和更改,AP Div,元素的名称。通过双击,ID,下面对应的,AP,元素默认名称来更改,AP,元素的名称。,Z,：该属性见“属性”面板相关设置。可以通过双击,AP Div,元素的,Z,值属性来更改其值。,第10页/共36页,图标：如果某一个AP 元素左侧有该图标，表示该A,AP Div,元素的基本操作,1,调整,AP Div,的大小,调整,AP Div,时，既可以单独调整一个,AP Div,，也可以同时调整多个,AP Div,。,（,1,）调整一个,AP Div,的大小,选中一个,AP Div,后，执行下列操作之一，可调整一个,AP Div,的大小：,应用鼠标拖曳方式。选中,AP Div,，拖动四周的任何调整手柄。,应用键盘方式。选中,AP Div,，按住,Ctrl+,方向键,，每次调整一个像素大小。,应用网络靠齐方式。选中,AP Div,，同时按住,Ctrl+Shift+,方向键,，可按网格靠齐增量来调整大小。,第11页/共36页,AP Div元素的基本操作1调整AP Div的大小第11页,应用修改属性值方式。在“属性”面板中，修改“宽”和“高”选项值来调整,AP Div,的大小,（,2,）同时调整多个,AP Div,的大小,在“文档”窗口中按住,Shift,键，依次选中两个或多个,AP Div,，执行以下操作之一，可同时调整多个,AP Div,的大小：,应用菜单命令。选择“修改排列顺序设成宽度（或高度）相同”命令。,应用快捷键。按下组合键,Ctrl+Shift+7,或者,Ctrl+Shift+9,，则以当前,AP Div,为标准同时调整多个层的宽度或高度。,第12页/共36页,应用修改属性值方式。在“属性”面板中，修改“宽”和“高”选项,2,更改,AP Div,的堆叠顺序,对网页进行排版时，常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果。,使用,AP,元素“属性”面板或“,AP”,面板可以改变,AP,元素的堆叠顺序。,AP,元素的显示顺序与,Z,轴值的顺序一致。,Z,值越大，,AP,元素的位置越靠上。在“,AP,元素”控制面板中按照堆叠顺序排列,AP,元素的名称，如图,7-5,所示。,第13页/共36页,2更改AP Div的堆叠顺序第13页/共36页,图,7-5 AP AP,元素的显示顺序与,Z,轴值的顺序一致,第14页/共36页,图7-5 AP AP元素的显示顺序与Z轴值的顺序一致第1,（,1,）使用“,AP”,面板改变层的堆叠顺序,打开“,AP”,面板，在“,AP”,面板中执行下列操作之一，改变,AP,元素的堆叠顺序。,选中指定的,AP,元素名，将其拖动到所需的堆叠顺序处，然后释放鼠标。,在“,Z”,列中单击需要修改的,AP,元素编号，如果要上移则输入一个比当前值更大的数值，如果要下移则输入一个比当前值更小的数值。,（,2,）使用,AP,元素“属性”面板改变层的堆叠顺序。,在“,AP,元素”面板或文档窗口中选择一个,AP,元素，在其“属性”面板的“,Z,轴”文本框中输入一个更高或更低的编号，使当前,AP,元素沿着堆叠顺序向上或向下移动,。,第15页/共36页,（1）使用“AP”面板改变层的堆叠顺序第15页/共36页,3,嵌套,AP,元素,所谓嵌套,AP Div,，是指在一个,AP Div,元素中创建子,AP Div,元素。使用嵌套,AP Div,的好处是能确保子,AP Div,永远定位于父级,AP Div,上方。嵌套通常用于将,AP,元素组织在一起。,（,1,）创建嵌套,AP,元素,使用下列方法之一，创建嵌套,AP,元素：,应用菜单命令。将插入点放在现有,AP,元素中，选择“插入布局对象,AP Div”,命令。,应用按钮拖曳。拖曳“插入”面板“布局”选项卡中的“绘制,AP Div”,按钮，然后将其放在现有,AP,元素中。,应用按钮绘制。选择“编辑首选参数”命令，启用“首选参数”对话框，在“分类”选项列表中选择“,AP,元素”选项，在右侧选择“在,AP Div,中创建以后嵌套”复选框，单击,【,确定,】,按钮。单击“插入”面板“布局”标签中的“绘制,AP Div”,按钮，在现有,AP,元素中，按住,Ctrl,键的同时拖曳鼠标绘制一个嵌套,AP,元素。,创建的嵌套,AP,