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代码 AP元素CSS样式 AP元素标签 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种方法： n创建2个AP元素，把其中一个AP元素对应的代码剪切 并粘贴到另一个AP元素的div标签中。 n创建一个AP元素并激活它，然后在其中继续绘制AP元 素，则新绘制的AP元素即是子AP元素，嵌套在另一个 AP元素中。 n按住ctrl键，在AP元素面板中用鼠标拖放一个AP元素 到另一个AP元素的上面。 7.2.6使用辅助工具精确定位 网页元素当页面内容越来越复杂时，尤其使用了大量图片 时，页面内容的精确定位就会成为一个大问题， Dreamweaver 8提供了相当丰富的页面内容功能来解决这个 问题，比如使用辅助线、视图的缩放工具和使用视图的选 取工具等。 查看-辅助线-可以更方便地确定网页元素的位置或大小. 将鼠标指针移动到辅助线分割的方格中,然后按ctrl键可 以显示此方格的高度和宽度. 选中查看-辅助线-靠齐辅助线,在网页中插入元素时就会 自动地贴近辅助线. 选中查看-辅助线-辅助线靠齐元素,则拖动辅助线时就会 自动地贴近网页中的元素;拖动辅助线到网页的顶部或左侧 时它就会自动消失;相当于删除该条辅助线. 查看-辅助线-清除辅助线则清除所有辅助线. 7.2.7.AP元素和表格的相互转换 AP元素到表格 （以兼容IE3.0以下的浏览器） 修改