第八章 页面布局设计.pptVIP

第八章 页面布局设计——AP DIV（层） 信息工程系 张婷婷 * 目标 8.1 层的概念 8.2 创建层 8.3 在层中插入内容 8.4 设置层属性 8.5 使用“AP元素”面板 8.6 层和表格的转换 8.7 AP DIV与时间轴的结合 * 8.1 层的概念 层是被分配了绝对位置的HTML页面元素（div标签、span标签）。层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容，它为网页设计者提供了强大的网页控制能力。 * 层主要功能包括排版布局和制作动态效果。通过层可以对文档内容实现精确的绝对定位。因为层相当于网页内的一种容器，凡是可以放到网页上的对象几乎都可以放在层中，如：文本、图像、表格、表单等；除此之外，层中还可以包含层。因为层允许重叠，可以控制隐藏或显示其中的任何一个，通过设置行为可以使其交替出现产生动态效果。 * 8.2 创建层---创建普通层 切换到 “布局”工具栏-------单击“描绘层”按钮 ，在文档窗口中通过拖动来绘制一个层。 若要在文档中的特定位置插入层的代码，将插入点放入文档窗口，然后选择“插入记录”---“布局对象”---“AP DIV” 。 默认状态下创建的多个层是允许重叠的，如果用户要创建平铺式层（各个层间没有重叠之处），可选择“层”面板中的“防止重叠”复选框。 * 8.2 创建层---创建嵌入式层 1．插入法：把插入点放置于页面上已有层内，然后选择“插入记录”“布局对象” “AP DIV”菜单命令插入一个嵌套层。 2．描绘法：单击“插入”工具栏布局面板中的层按钮，然后拖动到一个已有层中，即画出一个嵌套层。 * 关于嵌套层 关于嵌套层，需要特别注意的是嵌套层并不是页面上一层位于另一层内。嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML代码之内。 * 层“sub”的代码嵌套在层“main”的HTML代码之内，所以它是嵌套层。反过来，即使在页面上看，一个层位于另一层之内，如果它们的HTML代码互不包含，它们就不是嵌套层。当然最直观的方法还是通过层面板查看层间是不是存在嵌套关系。 * 连续绘制多个层 （1）单击“插入”栏上的“绘制AP Div”按钮。（2）通过按住 Ctrl 键并拖动鼠标来绘制各个层。只要不松开 Ctrl键，就可以继续绘制新的层。 * 调整层大小 光标拖拽调整 Ctrl+方向键 ，每次调整1像素大小 Ctrl+Shift+方向键，每次调整10像素大小 * 8.3 在层中插入内容 在层中可以插入多种页面元素，包括文本、表格、图像、插件、按钮等。方法是先在某层内单击鼠标，将光标插入点置于层内，然后就可以采用与在页面中插入元素的相同方法将各种元素插入到层中。 * 8.4 设置层属性 选定层后，在Dreamweaver的底部会出现层的属性面板。 * 层编号：该文本框设置当前层的名称。层的名称只能由标准的字母和数字表示，不能使用空格、连字符、斜杠符等。 左：设置层左边边框相对于页面的左边界或父层左边界的距离。 上：设置层上边边框相对于页面的上边界或父层顶端的距离。 宽：该域用于设置层的宽度值，默认单位是像素。 高：该域用于设置层的高度值，默认单位是像素。 * Z轴：在该文本框中输入层在Z方向上的索引值。 显示：该下拉列表框设置层的可见性。 背景图像：设置层的背景图像。 背景颜色：设置层的背景色。单击颜色框按钮，在色盘中选取合适的颜色，或者在文本框中直接输入背景颜色的十六进制数值。 类：将某种CSS样式应用到层中。 溢出：设置当层中的内容超出层的范围后产生的效果。 * * 层参数设置 选择菜单“编辑”“首选参数”，打开“首选参数”对话框，在左侧的分类列表中选择“AP元素”选项 * AP元素锚点一般不勾选 * 8.5 使用“AP元素”面板 若要打开层面板，请选择“窗口”“AP元素” 。层显示为按z轴顺序排列的名称列表；首先创建的层出现在列表的底部，最新创建的层出现列表的顶部。 嵌套的层显示为连接到父层的 名称。单击加号 (+) 或减号 (-) 图标显示或隐藏嵌套的层。 * 层的可见性 层的可见性分为以下三种： （1）睁开的眼睛表示层可见 （2）闭上的眼睛表示层不可见 （3）如果没有眼睛图标，表示该层继承其父层的可见性。 * 改变层的名称和叠放顺序 在打开的层面板中，名称为层的标识名，Z表示层的索引号。任意单击管理器中的某一层，即选中该层，按Delete键可以删除它。按住Shift键可同时选择多个层，然后可同时移动或删除它们。双击名称项可为层更改标识名。 * 在层面板中用鼠标拖动层的上下位置，可以改变层的叠放顺序，也可以双击层面板中某层的Z选项，直接输入新值以修改该层的位置顺序。当输入比当前值大的数值时，该层将