DWAP元素的创建和使用ppt课件

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页面元素，是页面

4、元素，是divdiv标标签或任何其他标签或其他任何可在签或任何其他标签或其他任何可在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元素面板中可以实现的操作有：可选择显示、隐藏、防元素面板中可以实现的操作

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

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

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

12、置元素面板中设置3.AP3.AP元素的元素的htmlhtml代码代码AP元素CSS款式AP元素标签4.AP4.AP元素的绝对定位普通是默许设置和相对定位元素的绝对定位普通是默许设置和相对定位 在居中页面中运用在居中页面中运用APAP元素，最大的问题就是元素，最大的问题就是APAP元素的定位问元素的定位问题，假设题，假设APAP元素设置成相对定位，当改动显示器分辨率后，元素设置成相对定位，当改动显示器分辨率后，APAP元素相对其它居中元素就会改动位置；假设元素相对其它居中元素就会改动位置；假设APAP元素设置成元素设置成绝对定位，当改动分辨率后，绝对定位，当改动分辨率后，APAP元素的内容相对其

13、它居中元元素的内容相对其它居中元素都不会发生错位景象。素都不会发生错位景象。 APAP元素的绝对定位代码元素的绝对定位代码:div id=Layer1 style=position: : height:155px; z-index:1 APAP元素的相对定位代码元素的相对定位代码:div id=Layer1 style=position: :height:155px; z-index:1留意：留意：插入绝对定位代码，当插入绝对定位代码，当leftleft和和toptop含有正负数值时，含有正负数值时，APAP元素就元素就无法居中。当去除无法居中。当去除leftleft和和toptop属性后，属

14、性后，APAP元素可以居中，相元素可以居中，相对页面其它居中元素没有错位景象。对页面其它居中元素没有错位景象。在居中页面中，插入相对定位在居中页面中，插入相对定位APAP元素代码，元素代码，APAP元素的位置在页元素的位置在页面居中。但是它变得不可挪动，运用不够方便。面居中。但是它变得不可挪动，运用不够方便。7.2.3.AP7.2.3.AP元素属性详解元素属性详解单个单个APAP元素的属性元素的属性APAP元素编号：用于指定一个称号，用于识别不同的元素编号：用于指定一个称号，用于识别不同的APAP元素。元素。APAP元素的命名规那么：元素的命名规那么：APAP元素的名字是独一的，即不允许重元素

15、的名字是独一的，即不允许重名；运用英文字母的字符开头；不要运用空格、连字符、名；运用英文字母的字符开头；不要运用空格、连字符、斜杠、句号等特殊字符。斜杠、句号等特殊字符。左和上：指定左和上：指定APAP元素的左上角相对于页面假设嵌套，那么元素的左上角相对于页面假设嵌套，那么为父为父APAP元素左上角的位置。用以准确定元素左上角的位置。用以准确定APAP元素的位置。元素的位置。用鼠标拖动的方法挪动用鼠标拖动的方法挪动APAP元素的位置时直观方便但不准确。元素的位置时直观方便但不准确。宽和高：指定宽和高：指定APAP元素的宽度和高度。元素的宽度和高度。Z Z 轴：确定轴：确定APAP元素的元素的z

16、 z轴顺序即堆叠顺序。轴顺序即堆叠顺序。 背景图像：指定背景图像：指定APAP元素的背景图像。元素的背景图像。 背景颜色：指定背景颜色：指定APAP元素的背景颜色。元素的背景颜色。 剪辑：定义剪辑：定义APAP元素的可见区域。指定左侧、顶部、右侧元素的可见区域。指定左侧、顶部、右侧和底边坐标可在和底边坐标可在APAP元素的坐标空间中定义一个矩形。元素的坐标空间中定义一个矩形。APAP元素经过元素经过“剪辑后，只需指定的矩形区域才是可见。剪辑后，只需指定的矩形区域才是可见。 APAP元素本身的可见性：指定该元素本身的可见性：指定该APAP元素最初能否是可元素最初能否是可见的，有见的，有4 4个选

17、项：个选项： auto“auto“默许：不指定可见性属性，默以为默许：不指定可见性属性，默以为“承继。承继。 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元素的属性：元素的属性

19、：标签：制定所用的标签：制定所用的htmlhtml标签。引荐运用标签。引荐运用spanspan和和divdiv。7.2.4AP7.2.4AP元素的根本操作元素的根本操作1.1.激活激活APAP元素元素: :插入点放入插入点放入APAP元素内，向元素内，向APAP元素中添元素中添加内容。加内容。 经过在经过在APAP元素中单击激活元素中单击激活APAP元素。元素。2.2.选择选择APAP元素元素: :对对APAP元素设置属性；和激活元素设置属性；和激活APAP元素的元素的显示方式与作用均不同显示方式与作用均不同单击单击APAP元素边框选择一个元素边框选择一个APAP元素、多个元素、多个APAP元

20、素、延续元素、延续APAP元素、不延续元素、不延续APAP元素元素在在APAP元素面板中经过选择元素面板中经过选择APAP元素的名字，直接选取一元素的名字，直接选取一个按个按shiftshift选多个选多个单击单击APAP元素标志或标签元素标志或标签3.3.调整调整APAP元素大小元素大小一次可调整一个一次可调整一个APAP元素的大小也可同时调整几个元素的大小也可同时调整几个APAP元元素的大小素的大小详细操作是：拖动或在属性面板中输入详细操作是：拖动或在属性面板中输入APAP元素的宽、元素的宽、高高3.3.挪动挪动APAP元素元素选定要挪动的选定要挪动的APAP元素，拖动或按键盘的箭头元素，

21、拖动或按键盘的箭头4.4.对齐对齐APAP元素元素当将几个当将几个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种方法：种方法：创建创建2 2个个APAP元素，把其中一个元素，把其中一个APAP元素对应的代码剪元素对应的代码剪切并粘贴到另一个切并粘贴到另一个APAP元素的元素的divdiv标签中。标签中。创建一个创建一个APAP元素并激活它，然后在其中继续绘制元素并激活

23、它，然后在其中继续绘制APAP元素，那么新绘制的元素，那么新绘制的APAP元素即是子元素即是子APAP元素，嵌元素，嵌套在另一个套在另一个APAP元素中。元素中。按住按住ctrlctrl键，在键，在APAP元素面板中用鼠标拖放一个元素面板中用鼠标拖放一个APAP元元素到另一个素到另一个APAP元素的上面。元素的上面。7.2.67.2.6运用辅助工具准确定位运用辅助工具准确定位网页元素当页面内容越来越复杂时，尤其运用了大量图片网页元素当页面内容越来越复杂时，尤其运用了大量图片时，页面内容的准确定位就会成为一个大问题，时，页面内容的准确定位就会成为一个大问题，Dreamweaver 8Dreamweaver 8提供了相当丰富的页面内容功能来处理这个提供了相当丰富的页面内容功能来处理这个问题，比如运用辅助线、视图的缩放工具和运用视图的选问题，比如运用辅助线、视图的缩放工具和运用视图的选取工具等。取工具等。查看查看- -辅助线辅助线- -可以更方便地确定