第7章AP元素的创建和使用

第7章AP元素的创建和使用课题引入：网页布局是指网页的各元素（如导航栏、图象、文字）在浏览器中的显示方式，是网页设计中的一项重要内容。使用传统的表格布局页面存在很多缺陷；而在布局模式下，使用表格作为基础结构来设计页面，可以简化用表格进行页面布局的过程，具有定位简单、容易调整等优点；且能避免使用传统表格布局的缺陷，同时也使网页布局更加高效。本章将介绍用Dreamweaver进行网页布局的方法和技巧.教学目标：能使用AP元素来精确的布局网页，提高学生的审美观教学内容：–AP元素概述–制作AP元素–AP元素属性详解–AP元素的基本操作–嵌套AP元素–AP元素HTML代码–使用辅助工具精确定位网页元素–AP元素和表格的相互转换本章重点：AP元素的插入和属性设置。本章难点：嵌套AP元素和AP元素HTML代码7.2.1AP元素的概述1、AP元素的应用：布局网页；制作简单动画(如网页上飘来飘去的浮动图标)；设计特效等(电子相册、显示与隐藏效果等)。2、AP元素的定义：AP元素是被分配了绝对位置的html页面元素，是div标签或任何其他标签或其他任何可在html文档正文中放入的内容,是一种新的网页元素定位技术。它的功能强大，可以创建复杂的页面布局。3、AP元素的特点：–在AP元素上可以放置很多可以放在网页上的内容（文本、图片、表格、图像、AP元素等，除了框架）；–AP元素可以放在网页的任何位置，可以对网页元素精确定位；–可以任意调整AP元素的大小、背景、叠放顺序等–可以移动、隐藏、嵌套。5、AP元素的优点：•可以像素为单位精确定位页面元素(图象、文字、多媒体、表单、超级链接，但不可是框架)；•可以将AP元素放置在页面的任意位置，使用它可以使页面布局的井然、美观，又能制作出重叠效果和运动效果。•当把页面元素放入AP元素中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，AP元素的出现使网页从二维平面拓展到三维。6、AP元素的缺点：•目前只有4.0以上的高版本浏览器才支持AP元素。•难以制作一个适应不同分辨率的网页。(当一个页面使用了多个AP元素后，页面的复杂程度增加而导致编辑起来非常烦琐；编辑状态与浏览状态的实际效果有相当明显的差别等。)注意：考虑到兼容性和修改时的方便，一般可在编辑或排版网页时采用AP元素布局或者部分页面采用AP元素布局，而在发布网页时再将其转换为表格布局。7、AP元素面板AP元素面板是一个可视化管理AP元素的工具。执行【窗口】-【AP元素】命令，即可打开AP元素面板，如下图所示。其中眼睛睁开和关闭表示AP元素的显示和隐藏。AP元素还有一个概念就是AP元素数，AP元素数决定了重叠时哪个AP元素在上面哪个AP元素在下面。比如AP元素数为2的AP元素在AP元素数为1的AP元素的上面。改变AP元素数就可以改变AP元素的重叠顺序。AP元素面板中可以实现的操作有：可选择显示、隐藏、防止AP元素重叠。在Dreamweaver中使用AP元素面板使得对AP元素的操作变得十分方便和简单。7.2.2创制作AP元素1.在首选参数对话框中设置AP元素的参数，可设置AP元素嵌套和显示AP元素锚记。选中“AP元素锚记”设置后，会在AP元素的左上角显示一个AP元素锚记，单击AP元素锚记可以方便的选择AP元素，尤其是选择被隐藏的AP元素。2.在页面中插入AP元素（嵌套AP元素是其代码包含在另一个AP元素中的AP元素）•单击插入栏“布局—绘制AP元素”按钮(按住ctrl键单击时，可以一次插入多个），即可在设计视图中绘制AP元素。•选择菜单“插入—布局对象---AP元素”命令，即可在设计视图中绘制AP元素。绘制AP元素和插入AP元素的差别：只是在代码视图中与之相应的html代码位置不尽相同，绘制的AP元素紧跟body标签之后显示代码；使用插入菜单插入的AP元素，其相关代码在插入点处插入。为AP元素添加内容：用以往的插入对象的方法即可。设置AP元素的可见性：在属性面板和AP元素面板中都可设置。设置重叠性：在AP元素面板中设置3.AP元素的html代码AP元素CSS样式AP元素标签4.AP元素的绝对定位（一般是默认设置）和相对定位在居中页面中使用AP元素，最大的问题就是AP元素的定位问题，若AP元素设置成相对定位，当改变显示器分辨率后，AP元素相对其它居中元素就会改变位置；若AP元素设置成绝对定位，当改变分辨率后，AP元素的内容相对其它居中元素都不会发生错位现象。•AP元素的绝对定位代码:divid=Layer1style=position:absolute;left:45px;top:25px;width:400px;height:155px;z-index:1/div•AP元素的相对定位代码:divid=Layer1style=position:relative;left:45px;top:25px;width:400px;height:155px;z-index:1/div注意：•插入绝对定位代码，当left和top含有正负数值时，AP元素就无法居中。当清除left和top属性后，AP元素可以居中，相对页面其它居中元素没有错位现象。•在居中页面中，插入相对定位AP元素代码，AP元素的位置在页面居中。但是它变得不可移动，使用不够方便。7.2.3.AP元素属性详解单个AP元素的属性•AP元素编号：用于指定一个名称，用于识别不同的AP元素。•AP元素的命名规则：AP元素的名字是唯一的，即不允许重名；使用英文字母的字符开头；不要使用空格、连字符、斜杠、句号等特殊字符。•左和上：指定AP元素的左上角相对于页面（如果嵌套，则为父AP元素）左上角的位置。用以精确定AP元素的位置。用鼠标拖动的方法移动AP元素的位置时直观方便但不精确。•宽和高：指定AP元素的宽度和高度。•Z轴：确定AP元素的z轴顺序（即堆叠顺序）。•背景图像：指定AP元素的背景图像。•背景颜色：指定AP元素的背景颜色。•剪辑：定义AP元素的可见区域。指定左侧、顶部、右侧和底边坐标可在AP元素的坐标空间中定义一个矩形。AP元素经过“剪辑”后，只有指定的矩形区域才是可见。•（AP元素本身的）可见性：指定该AP元素最初是否是可见的，有4个选项：–auto“默认”：不指定可见性属性，默认为“继承”。–inherit“继承”：使用该AP元素父级的可见性属性。（子AP元素会遗传父AP元素的特征）–visible“可见”：显示这些AP元素的内容。–hidden“隐藏”：隐藏这些AP元素的内容。•溢出（AP元素中内容的可见性）：控制当AP元素的内容超过AP元素的指定大小时如何在浏览器中显示AP元素。–visible“可见”：指示在AP元素中显示额外的内容.–hidden“隐藏”：指定不在浏览器中显示额外的内容。–scroll“滚动”：指定浏览器应在AP元素上添加滚动条，而不管是否需要滚动条。–auto“自动”：使浏览器仅在需要时才显示AP元素的滚动条。多个AP元素的属性：•标签：制定所用的html标签。推荐使用span和div。7.2.4AP元素的基本操作1.激活AP元素:插入点放入AP元素内，向AP元素中添加内容。通过在AP元素中单击激活AP元素。2.选择AP元素:对AP元素设置属性；和激活AP元素的显示方式与作用均不同–单击AP元素边框选择一个AP元素、多个AP元素、连续AP元素、不连续AP元素–在AP元素面板中通过选择AP元素的名字，直接选取一个（按shift选多个）–单击AP元素标记或标签3.调整AP元素大小一次可调整一个AP元素的大小也可同时调整几个AP元素的大小具体操作是：拖动或在属性面板中输入AP元素的宽、高3.移动AP元素选定要移动的AP元素，拖动或按键盘的箭头4.对齐AP元素当将几个AP元素对齐时，选择几个AP元素，然后选择“修改---对齐”5.吸附AP元素到网格显示网格有助于精确定位AP元素和调整AP元素的大小。若启用吸附功能，在移动或调整AP元素的大小时，则AP元素被自动定位到最近的吸附位置。•要吸附AP元素，选择“查看—网格—靠齐到网格”•改变网格和吸附的位置，选择“查看—网格—设置”7.2.5嵌套AP元素嵌套AP元素是指在AP元素内部的子AP元素，当移动AP元素的时候，其内部的嵌套AP元素也会随之移动。添加嵌套AP元素的3种方法：创建2个AP元素，把其中一个AP元素对应的代码剪切并粘贴到另一个AP元素的div标签中。创建一个AP元素并激活它，然后在其中继续绘制AP元素，则新绘制的AP元素即是子AP元素，嵌套在另一个AP元素中。按住ctrl键，在AP元素面板中用鼠标拖放一个AP元素到另一个AP元素的上面。7.2.6使用辅助工具精确定位网页元素当页面内容越来越复杂时，尤其使用了大量图片时，页面内容的精确定位就会成为一个大问题，Dreamweaver8提供了相当丰富的页面内容功能来解决这个问题，比如使用辅助线、视图的缩放工具和使用视图的选取工具等。•查看-辅助线-可以更方便地确定网页元素的位置或大小.•将鼠标指针移动到辅助线分割的方格中,然后按ctrl键可以显示此方格的高度和宽度.•选中查看-辅助线-靠齐辅助线,在网页中插入元素时就会自动地贴近辅助线.•选中查看-辅助线-辅助线靠齐元素,则拖动辅助线时就会自动地贴近网页中的元素;拖动辅助线到网页的顶部或左侧时它就会自动消失;相当于删除该条辅助线.•查看-辅助线-清除辅助线则清除所有辅助线.7.2.7.AP元素和表格的相互转换•AP元素到表格（以兼容IE3.0以下的浏览器）修改—转换—AP元素到表格•表格到AP元素•修改—转换—表格到AP元素7.3课堂实例――用AP元素布局网站首页，实例效果如右图：制作步骤1．使用跟踪图像辅助页面的布局2．布局页面顶部3．布局左侧的导航条及友情链接4．布局右边的主体部分5．布局页面的底部信息部分本章作业：1.简述如何选择一个、多个连续、多个不连续的AP元素？2.说出AP元素的分类及其区别。3.简述插入AP元素的两种方法。4.课后习题