DWAP元素的创建和使用

《DWAP元素的创建和使用》由会员分享，可在线阅读，更多相关《DWAP元素的创建和使用（23页珍藏版）》请在装配图网上搜索。

1、第第7 7章章 APAP元素的创建和使用元素的创建和使用课题引入：课题引入：网页布局是指网页的各元素（如导航栏、图象、网页布局是指网页的各元素（如导航栏、图象、文字）在浏览器中的显示方式，是网页设计中的一项重要文字）在浏览器中的显示方式，是网页设计中的一项重要内容。使用传统的表格布局页面存在很多缺陷；而在布局内容。使用传统的表格布局页面存在很多缺陷；而在布局模式下，使用表格作为基础结构来设计页面，可以简化用模式下，使用表格作为基础结构来设计页面，可以简化用表格进行页面布局的过程，具有定位简单、容易调整等优表格进行页面布局的过程，具有定位简单、容易调整等优点；且能避免使用传统表格布局的缺陷，同时

2、也使网页布点；且能避免使用传统表格布局的缺陷，同时也使网页布局更加高效。局更加高效。本章将介绍用本章将介绍用DreamweaverDreamweaver进行网页布局的方法和技巧进行网页布局的方法和技巧.教学目标：教学目标：能使用能使用APAP元素来精确的布局网页，提高学生的审美观元素来精确的布局网页，提高学生的审美观教学内容：教学内容：APAP元素概述元素概述制作制作APAP元素元素APAP元素属性详解元素属性详解APAP元素的基本操作元素的基本操作嵌套嵌套APAP元素元素APAP元素元素HTMLHTML代码代码使用辅助工具精确定位网页元素使用辅助工具精确定位网页元素APAP元素和表格的相互转

3、换元素和表格的相互转换本章重点：本章重点：APAP元素的插入和属性设置。元素的插入和属性设置。本章难点：本章难点：嵌套嵌套APAP元素和元素和APAP元素元素HTMLHTML代码代码7.2.1AP7.2.1AP元素的概述元素的概述1 1、APAP元素的应用：元素的应用：布局网页；制作简单动画布局网页；制作简单动画(如网页上飘来飘去的浮动图如网页上飘来飘去的浮动图标标)；设计特效等；设计特效等(电子相册、显示与隐藏效果等电子相册、显示与隐藏效果等)。2 2、APAP元素的定义：元素的定义：APAP元素是被分配了绝对位置的元素是被分配了绝对位置的htmlhtml页面元素，是页面元素，是divdiv

4、标标签或任何其他标签或其他任何可在签或任何其他标签或其他任何可在htmlhtml文档正文中放入的文档正文中放入的内容内容,是一种新的网页元素定位技术。它的功能强大，可是一种新的网页元素定位技术。它的功能强大，可以创建复杂的页面布局。以创建复杂的页面布局。3 3、APAP元素的特点：元素的特点：在在APAP元素上可以放置很多可以放在网页上的内容（文元素上可以放置很多可以放在网页上的内容（文本、本、图片、表格、图像、图片、表格、图像、APAP元素等，除了框架）；元素等，除了框架）；APAP元素可以放在网页的任何位置，可以对网页元素精元素可以放在网页的任何位置，可以对网页元素精确定位；确定位；可以任

5、意调整可以任意调整APAP元素的大小、背景、叠放顺序等元素的大小、背景、叠放顺序等可以移动、隐藏、嵌套。可以移动、隐藏、嵌套。5 5、APAP元素的优点：元素的优点：可以像素为单位精确定位页面元素可以像素为单位精确定位页面元素(图象、文字、多媒图象、文字、多媒体、表单、超级链接，但不可是框架体、表单、超级链接，但不可是框架)；可以将可以将APAP元素放置在页面的任意位置，使用它可以使元素放置在页面的任意位置，使用它可以使页面布局的井然、美观，又能制作出重叠效果和运动页面布局的井然、美观，又能制作出重叠效果和运动效果。效果。当把页面元素放入当把页面元素放入APAP元素中时，还可以控制哪个显示元素

6、中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，在前面、哪个显示在后面、哪个显示、哪个隐藏，APAP元素的出现使网页从二维平面拓展到三维。元素的出现使网页从二维平面拓展到三维。6 6、APAP元素的缺点：元素的缺点：目前只有目前只有4.04.0以上的高版本浏览器才支持以上的高版本浏览器才支持APAP元素。元素。难以制作一个适应不同分辨率的网页。难以制作一个适应不同分辨率的网页。(当一个页面当一个页面使用了多个使用了多个APAP元素后，页面的复杂程度增加而导致元素后，页面的复杂程度增加而导致编辑起来非常烦琐；编辑状态与浏览状态的实际效编辑起来非常烦琐；编辑状态与浏览状态的实际

7、效果有相当明显的差别等。果有相当明显的差别等。)注意：考虑到兼容性和修改时的方便，一般可在编注意：考虑到兼容性和修改时的方便，一般可在编辑或排版网页时采用辑或排版网页时采用APAP元素布局或者部分页面采用元素布局或者部分页面采用APAP元素布局，而在发布网页时再将其转换为表格布元素布局，而在发布网页时再将其转换为表格布局。局。7 7、APAP元素面板元素面板APAP元素面板是一个可视化管理元素面板是一个可视化管理APAP元素的工具。元素的工具。执行【窗口】执行【窗口】-【APAP元素】命令，即可元素】命令，即可打开打开APAP元素面板，元素面板，如下图所示。如下图所示。其中眼睛睁开和关闭表示其

8、中眼睛睁开和关闭表示APAP元素的显示和隐藏。元素的显示和隐藏。APAP元素还元素还有一个概念就是有一个概念就是APAP元素数，元素数，APAP元素数决定了重叠时哪个元素数决定了重叠时哪个APAP元素在上面哪个元素在上面哪个APAP元素在下面。比如元素在下面。比如APAP元素数为元素数为2 2的的APAP元元素在素在APAP元素数为元素数为1 1的的APAP元素的上面。改变元素的上面。改变APAP元素数就可以元素数就可以改变改变APAP元素的重叠顺序。元素的重叠顺序。APAP元素面板中可以实现的操作有：可选择显示、隐藏、防元素面板中可以实现的操作有：可选择显示、隐藏、防止止APAP元素重叠。在

9、元素重叠。在DreamweaverDreamweaver中使用中使用APAP元素面板使得对元素面板使得对APAP元素的操作变得十分方便和简单。元素的操作变得十分方便和简单。7.2.27.2.2创制作创制作APAP元素元素1.1.在首选参数对话框中设置在首选参数对话框中设置APAP元素的参数元素的参数，可设置，可设置APAP元素嵌套和显示元素嵌套和显示APAP元素锚记。元素锚记。选中选中“AP元素锚记元素锚记”设置后，会在设置后，会在AP元素的左上角显元素的左上角显示一个示一个AP元素锚记，单击元素锚记，单击AP元素锚记可以方便的选择元素锚记可以方便的选择AP元素，尤其是选择被隐藏的元素，尤其是

10、选择被隐藏的AP元素。元素。2.2.在页面中插入在页面中插入APAP元素元素（嵌套（嵌套APAP元素是其代码包含在另一个元素是其代码包含在另一个APAP元素中的元素中的APAP元素）元素）单击插入栏单击插入栏“布局布局绘制绘制APAP元素元素”按钮按钮(按住按住ctrlctrl键单击键单击时，可以一次插入多个），即可在设计视图中绘制时，可以一次插入多个），即可在设计视图中绘制APAP元素。元素。选择菜单选择菜单“插入插入布局对象布局对象-AP-AP元素元素”命令，即可在设命令，即可在设计视图中绘制计视图中绘制APAP元素。元素。绘制绘制APAP元素和插入元素和插入APAP元素的差别：只是在代码

11、视图中与之元素的差别：只是在代码视图中与之相应的相应的htmlhtml代码位置不尽相同，代码位置不尽相同，绘制的绘制的APAP元素元素紧跟紧跟bodybody标标签之后显示代码；使用插入菜单插入的签之后显示代码；使用插入菜单插入的APAP元素，其相关代元素，其相关代码在插入点处插入。码在插入点处插入。为为APAP元素添加内容：用以往的插入对象的方法即可。元素添加内容：用以往的插入对象的方法即可。设置设置APAP元素的可见性：在属性面板和元素的可见性：在属性面板和APAP元素面板中都可设置。元素面板中都可设置。设置重叠性：在设置重叠性：在APAP元素面板中设置元素面板中设置3.AP3.AP元素的

12、元素的htmlhtml代码代码AP元素CSS样式AP元素标签4.AP4.AP元素的绝对定位（一般是默认设置）和相对定位元素的绝对定位（一般是默认设置）和相对定位 在居中页面中使用在居中页面中使用APAP元素，最大的问题就是元素，最大的问题就是APAP元素的定位问元素的定位问题，若题，若APAP元素设置成相对定位，当改变显示器分辨率后，元素设置成相对定位，当改变显示器分辨率后，APAP元素相对其它居中元素就会改变位置；若元素相对其它居中元素就会改变位置；若APAP元素设置成绝对元素设置成绝对定位，当改变分辨率后，定位，当改变分辨率后，APAP元素的内容相对其它居中元素都元素的内容相对其它居中元素

13、都不会发生错位现象。不会发生错位现象。APAP元素的绝对定位代码元素的绝对定位代码:div id=Layer1:width:400px;height:155px;z-index:1 APAP元素的相对定位代码元素的相对定位代码:div id=Layer1:width:400px;height:155px;z-index:1注意：注意：插入绝对定位代码，当插入绝对定位代码，当leftleft和和toptop含有正负数值时，含有正负数值时，APAP元素元素就无法居中。当清除就无法居中。当清除leftleft和和toptop属性后，属性后，APAP元素可以居中，元素可以居中，相对页面其它居中元素没有

14、错位现象。相对页面其它居中元素没有错位现象。在居中页面中，插入相对定位在居中页面中，插入相对定位APAP元素代码，元素代码，APAP元素的位置在元素的位置在页面居中。但是它变得不可移动，使用不够方便。页面居中。但是它变得不可移动，使用不够方便。7.2.3.AP7.2.3.AP元素属性详解元素属性详解单个单个APAP元素的属性元素的属性 APAP元素编号元素编号：用于指定一个名称，用于识别不同的：用于指定一个名称，用于识别不同的APAP元素。元素。APAP元素的命名规则：元素的命名规则：APAP元素的名字是唯一的，即不允许重元素的名字是唯一的，即不允许重名；使用英文字母的字符开头；不要使用空格、

15、连字符、名；使用英文字母的字符开头；不要使用空格、连字符、斜杠、句号等特殊字符。斜杠、句号等特殊字符。左和上左和上：指定：指定APAP元素的左上角相对于页面（如果嵌套，则元素的左上角相对于页面（如果嵌套，则为父为父APAP元素）左上角的位置。用以精确定元素）左上角的位置。用以精确定APAP元素的位置。元素的位置。用鼠标拖动的方法移动用鼠标拖动的方法移动APAP元素的位置时直观方便但不精确。元素的位置时直观方便但不精确。宽和高宽和高：指定：指定APAP元素的宽度和高度。元素的宽度和高度。Z Z 轴轴：确定：确定APAP元素的元素的z z轴顺序（即堆叠顺序）。轴顺序（即堆叠顺序）。背景图像：背景图

16、像：指定指定APAP元素的背景图像。元素的背景图像。背景颜色：背景颜色：指定指定APAP元素的背景颜色。元素的背景颜色。剪辑：剪辑：定义定义APAP元素的可见区域。指定左侧、顶部、右侧元素的可见区域。指定左侧、顶部、右侧和底边坐标可在和底边坐标可在APAP元素的坐标空间中定义一个矩形。元素的坐标空间中定义一个矩形。APAP元素经过元素经过“剪辑剪辑”后，只有指定的矩形区域才是可见。后，只有指定的矩形区域才是可见。（APAP元素本身的）可见性元素本身的）可见性：指定该：指定该APAP元素最初是否是可元素最初是否是可见的，有见的，有4 4个选项：个选项：auto“auto“默认默认”：不指定可见性

17、属性，默认为：不指定可见性属性，默认为“继承继承”。inherit“inherit“继承继承”：使用该：使用该APAP元素父级的可见性属性。元素父级的可见性属性。（子（子APAP元素会遗传父元素会遗传父APAP元素的特征）元素的特征）visible“visible“可见可见”：显示这些：显示这些APAP元素的内容。元素的内容。hidden“hidden“隐藏隐藏”：隐藏这些：隐藏这些APAP元素的内容。元素的内容。溢出（溢出（APAP元素中内容的可见性）：元素中内容的可见性）：控制当控制当APAP元素的内容元素的内容超过超过APAP元素的指定大小时如何在浏览器中显示元素的指定大小时如何在浏览器

18、中显示APAP元素。元素。visiblevisible“可见可见”：指示在：指示在APAP元素中显示额外元素中显示额外的内容的内容.hidden“hidden“隐藏隐藏”：指定不在浏览器中显示额外的内容。：指定不在浏览器中显示额外的内容。scroll“scroll“滚动滚动”：指定浏览器应在：指定浏览器应在APAP元素上添加滚动元素上添加滚动条，而不管是否需要滚条，而不管是否需要滚 动条。动条。auto“auto“自动自动”：使浏览器仅在需要时才显示：使浏览器仅在需要时才显示APAP元素的元素的滚动条。滚动条。多个多个APAP元素的属性：元素的属性：标签：制定所用的标签：制定所用的htmlht

19、ml标签。推荐使用标签。推荐使用spanspan和和divdiv。7.2.4AP7.2.4AP元素的基本操作元素的基本操作1.1.激活激活APAP元素元素:插入点放入插入点放入APAP元素内，向元素内，向APAP元素中添加内容。元素中添加内容。通过在通过在APAP元素中单击激活元素中单击激活APAP元素。元素。2.2.选择选择APAP元素元素:对对APAP元素设置属性；元素设置属性；和激活和激活APAP元素的显示方式元素的显示方式与作用均不同与作用均不同单击单击APAP元素边框元素边框选择一个选择一个APAP元素、多个元素、多个APAP元素、连续元素、连续APAP元素、不连续元素、不连续APA

20、P元素元素在在APAP元素面板中通过选择元素面板中通过选择APAP元素的名字元素的名字，直接选取一个，直接选取一个（按（按shiftshift选多个）选多个）单击单击APAP元素标记或标签元素标记或标签3.3.调整调整APAP元素大小元素大小一次可调整一个一次可调整一个APAP元素的大小也可同时调整几个元素的大小也可同时调整几个APAP元素的大小元素的大小具体操作是：拖动或在属性面板中输入具体操作是：拖动或在属性面板中输入APAP元素的宽、高元素的宽、高3.3.移动移动APAP元素元素选定要移动的选定要移动的APAP元素，拖动或按键盘的箭头元素，拖动或按键盘的箭头4.4.对齐对齐APAP元素元

21、素当将几个当将几个APAP元素对齐时，选择几个元素对齐时，选择几个APAP元素，然后选择元素，然后选择“修改修改-对齐对齐”5.5.吸附吸附APAP元素到网格元素到网格 显示网格有助于精确定位显示网格有助于精确定位APAP元素和调整元素和调整APAP元素的大小。元素的大小。若若启用吸附功能启用吸附功能，在移动或调整，在移动或调整APAP元素的大小时，则元素的大小时，则APAP元元素被自动定位到最近的吸附位置。素被自动定位到最近的吸附位置。要吸附要吸附APAP元素元素，选择，选择“查看查看网格网格靠齐到网格靠齐到网格”改变网格和吸附的位置改变网格和吸附的位置，选择，选择“查看查看网格网格设置设置

22、”7.2.57.2.5嵌套嵌套APAP元素元素 嵌套嵌套APAP元素是指在元素是指在APAP元素内部的子元素内部的子APAP元素，当移动元素，当移动APAP元素元素的时候，其内部的嵌套的时候，其内部的嵌套APAP元素也会随之移动。元素也会随之移动。添加嵌套添加嵌套APAP元素的元素的3 3种方法：种方法：n创建创建2 2个个APAP元素，把其中一个元素，把其中一个APAP元素对应的代码剪切元素对应的代码剪切并粘贴到另一个并粘贴到另一个APAP元素的元素的divdiv标签中。标签中。n创建一个创建一个APAP元素并激活它，然后在其中继续绘制元素并激活它，然后在其中继续绘制APAP元元素，则新绘制

23、的素，则新绘制的APAP元素即是子元素即是子APAP元素，嵌套在另一个元素，嵌套在另一个APAP元素中。元素中。n按住按住ctrlctrl键，在键，在APAP元素面板中用鼠标拖放一个元素面板中用鼠标拖放一个APAP元素元素到另一个到另一个APAP元素的上面。元素的上面。7.2.67.2.6使用辅助工具精确定位使用辅助工具精确定位网页元素当页面内容越来越复杂时，尤其使用了大量图片网页元素当页面内容越来越复杂时，尤其使用了大量图片时，页面内容的精确定位就会成为一个大问题，时，页面内容的精确定位就会成为一个大问题，Dreamweaver 8Dreamweaver 8提供了相当丰富的页面内容功能来解决

24、这个提供了相当丰富的页面内容功能来解决这个问题，比如使用辅助线、视图的缩放工具和使用视图的选问题，比如使用辅助线、视图的缩放工具和使用视图的选取工具等。取工具等。查看查看-辅助线辅助线-可以更方便地确定网页元素的位置或大小可以更方便地确定网页元素的位置或大小.将鼠标指针移动到辅助线分割的方格中将鼠标指针移动到辅助线分割的方格中,然后按然后按ctrlctrl键可以键可以显示此方格的高度和宽度显示此方格的高度和宽度.选中查看选中查看-辅助线辅助线-靠齐辅助线靠齐辅助线,在网页中插入元素时就会自在网页中插入元素时就会自动地贴近辅助线动地贴近辅助线.选中查看选中查看-辅助线辅助线-辅助线靠齐元素辅助线

25、靠齐元素,则拖动辅助线时就会自则拖动辅助线时就会自动地贴近网页中的元素动地贴近网页中的元素;拖动辅助线到网页的顶部或左侧时拖动辅助线到网页的顶部或左侧时它就会自动消失它就会自动消失;相当于删除该条辅助线相当于删除该条辅助线.查看查看-辅助线辅助线-清除辅助线则清除所有辅助线清除辅助线则清除所有辅助线.7.2.7.AP7.2.7.AP元素和表格的相互转换元素和表格的相互转换 APAP元素到表格元素到表格 （以兼容（以兼容IE3.0IE3.0以下的浏览器）以下的浏览器）修改修改转换转换APAP元素到表格元素到表格 表格到表格到APAP元素元素 修改修改转换转换表格到表格到APAP元素元素7.3 7

26、.3 课堂实例课堂实例用用APAP元素元素布局网站首页，实例效果如布局网站首页，实例效果如右图：右图：制作步骤制作步骤1 1使用跟踪图像辅助页面使用跟踪图像辅助页面的布局的布局2 2布局页面顶部布局页面顶部3 3布局左侧的导航条及友布局左侧的导航条及友情链接情链接4 4布局右边的主体部分布局右边的主体部分5 5布局页面的底部信息部布局页面的底部信息部分分本章作业：1.1.简述如何选择一个、多个连续、多个不连续的简述如何选择一个、多个连续、多个不连续的APAP元素？元素？2.2.说出说出APAP元素的分类及其区别。元素的分类及其区别。3.3.简述插入简述插入APAP元素的两种方法。元素的两种方法。4.4.课后习题课后习题