第7章AP元素的创建和使用.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代码 AP元素CSS样式 AP元素标签 4.AP元素的绝对定位（一般是默认设置）和相对定位 在居中页面中使用AP元素，最大的问题就是AP元素的定位问题，若AP元素设置成相对定位，当改变显示器分辨率后，AP元素相对其它居中元素就会改变位置；若AP元素设置成绝对定位，当改变分辨率后，AP元素的内容相对其它居中元素都不会发生错位现象。 AP元素的绝对定位代码:div id=Layer1 style=position: absolute; left:45px; top:25px; wi