DWAP元素的创建和使用.ppt

第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代码,4.AP元素的绝对定位（一般是默认设置）和相对定位在居中页面中使用AP元素，最大的问题就是AP元素的定位问题，若AP元素设置成相对定位，当改变显示器分辨率后，AP元素相对其它居中元素就会改变位置；若AP元素设置成绝对定位，当改变分辨率后，AP元素的内容相对其它居中元素都不会发生错位现象。AP元素的绝对定位代码:AP元素的相对定位代码:注意：插入绝对定位代码，当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.课后习题,