网页设计与制作技术 十三.pptx

项目三 布局技术布局技术层AP Div 技能目标熟练运用层AP Div进行页面布局技术。熟练运用层的嵌套和定位技术改变页面的布局。知识目标熟练掌握如何描绘层和层的插入。掌握层的属性设置及调整。掌握在层中输入文字、插入图像的方法。掌握嵌套层的创建方法。了解层与表格之间的相互转换方法。第1页/共17页项目三 布局技术3.3.1 使用层AP Div搭建页面 3.3.2 问题探究认识层AP Div3.3.3 知识拓展AP元素与表格的转换 3.3.3 知识拓展拖动AP元素行为 3.3.3 知识拓展显示-隐藏元素行为 布局技术层AP Div 第2页/共17页项目三 布局技术AP Div 构建任务工作任务 层是网页制作时经常用到的对象，也是重要的网页布局工具之一。由于层在页面布局方面具有更大的随意性，通过拖动、方向键或指定坐标位置的方式就可以放到网页的任何位置，不受网页中其他元素的限制和干扰，就像浮在页面上方一样。运用层的此特性创建布局更加合理、美观的网页效果。第3页/共17页项目三 布局技术AP Div 构建任务工作流程1.在站点中新建一个页面并保存。2.在网页中插入一个层作为整个页面的限制范围。3.插入嵌套子层。4.在层中插入文字和图片元素。5.在层中插入表格等复杂网页元素。6.通过属性设置精确调整层的位置和大小。第4页/共17页项目三 布局技术AP Div 构建任务网页布局效果第5页/共17页项目三 布局技术AP Div 问题探究 在Dreamweaver CS4以下版本AP Div被称为层。AP Div又称绝对定位元素（AP元素），是分配有绝对位置的，用来精确控制浏览器窗口对象位置的HTML页面构成元素。AP Div可以通过层的重叠和次序的改变，实现一组包含着文字或图像等元素的胶片变换效果；可以通过动态设定层的显示或隐藏，实现层内容的动态交替等特殊显示效果；通过层子层遗传父层的嵌套特征，实现内容的可见及位置移动等。AP Div的出现使网页技术从二维空间拓展到三维空间，使页面元素能实现相互重叠，及更复杂的布局设计，成为网页设计新的发展方向。第6页/共17页项目三 布局技术AP Div 问题探究AP Div的创建 在Dreamweaver CS3中，可以在页面上轻松地创建和定位层AP Div。创建步骤如下：选择菜单“插入记录/布局对象/AP Div”命令，在设计窗口创建一个预设大小的AP Div。直接将“绘制AP Div”按钮拖动到设计窗口松开左键，就可在编辑区创建一个预设大小的AP Div。单击“插入”面板中“布局”选项下的“绘制AP Div”按钮，这时鼠标形状变成了“+”形，按下鼠标左键并向右下拖动，画出大小合适的一个矩形，释放鼠标左键，就可以绘制AP Div。第7页/共17页项目三 布局技术AP Div 问题探究属性设置 选中页面上的某个层后，在属性检查器上对应显示该层的所有属性，可查看或修改对应的属性值，如图所示。图 层的属性面板第8页/共17页项目三 布局技术AP Div 问题探究AP元素面板 在AP元素比较多的情况下，AP元素面板提供了一种快速管理方法。利用AP元素面板可准确指定AP元素、防止重叠、更改可见性、嵌套或堆叠AP元素，大大简化了操作方法。AP元素按照Z轴的顺序显示为一列名称。默认情况下，第一个创建的AP元素（Z轴为1）显示在列表底部，最新创建的AP元素显示在列表顶部。不过，可以通过更改AP元素在堆叠顺序中的位置来更改它的Z轴。图 AP元素面板第9页/共17页项目三 布局技术AP Div 问题探究AP元素面板改变AP元素的可见性 AP元素面板中的眼睛图标表示其可见性，单击面板上眼睛图标就可以显示或隐藏对应APDiv。如果图标是睁开的眼睛，表示该AP元素是可见的；如果图标是闭上的眼睛，表示该AP元素是不可见的。如果没有眼睛图标，那么继承其父APDiv的可见性，没有嵌套的APDiv总是可见的。改变层的堆叠顺序 在HTML代码中，AP元素的堆叠顺序或Z轴决定了AP元素在浏览器中绘制的顺序。AP元素的Z轴值越高，该AP元素在堆叠顺序中的位置就越高。第10页/共17页项目三 布局技术AP Div 问题探究AP元素面板AP Div的重叠与嵌套 如果页面上有两个交叉的AP Div，存在重叠与嵌套两种关系。重叠的两个AP Div是相互独立的，任何一个AP Div的改变不影响另外一个AP Div。嵌套通常用于将AP Div组合在一起。嵌套AP Div和表格的嵌套有些类似，就是在层AP Div里面再建一个层AP Div。嵌套AP Div总是随其父AP Div一起被移动，并继承其父AP Div的所有特征，包括可视性和背景颜色等。与表格嵌套不同的是，父表格一定是大于子表格的，但是AP Div的子AP Div可以超出父AP Div或在父AP Div之外。第11页/共17页项目三 布局技术AP Div 知识拓展注意：Dreamweaver CS4不会把重叠的AP元素转换为表格，要防止AP元素重叠，可在AP元素面板中启用“防止重叠”选项。如果是在建立了重叠AP元素之后才选择了此选项，此时只有通过移动AP元素的方法把重叠的AP元素分开。第12页/共17页项目三 布局技术AP Div 知识拓展 DeamweaverCS4提供的“拖动AP元素”功能，允许访问者自由的放置网页的各个栏目模块，让用户自定义网页的布局，大大增加了用户的体验性，受到越来越多网友的欢迎，其设置非常简单，功能又十分强大，大大简化了设计工作。第13页/共17页项目三 布局技术任务七 AP Div 知识拓展 2.“拖动AP元素”对话框由“基本”和“高级”两个选项卡组成。在基本选项卡中，可以设置是否限制拖动AP元素时可移动范围（若选择限制则需给出有效范围的上、下、左、右坐标）、拖动AP元素的“放下目标”位置以及“靠齐距离”属性，该属性与“放下目标”配合使用，当AP元素被拖动到“放下目标”位置的距离小于“靠齐距离”时，将自动靠齐以实现AP元素的精确移动。3.如果还要定义图AP元素的拖动柄等动作，可以单击“高级”标签，弹出高级选项卡。4.在高级选项卡，可设置“拖动控制点”（用于设置AP元素区域内用户执行该动作的范围，如果选择“整个元素”则无需设置范围坐标，控制点为整个元素范围）、拖动时是否使该层在文档的最前方，以及拖动整个元素时和放下整个元素后需要的JavaScript脚本程序。第14页/共17页项目三 布局技术任务七 AP Div 知识拓展显示-隐藏元素行为 利用显示-隐藏元素动作可以显示、隐藏或恢复一个或多个图AP元素默认的可见性。此动作用于在用户与页面进行交互时显示信息。“显示-隐藏元素”行为其实是由“显示元素”和“隐藏”元素两上行为组成，由于这两个元素通常搭配使用，因此Dreamweaver CS3将其归为一个行为。还可用于创建预先载入AP元素，即一个最初挡住页的内容的较大的AP元素，在所有页组件都完成载入后该AP元素即消失。第15页/共17页项目三 布局技术任务七 AP Div 知识拓展调用该动作的方法如下：1.在页面中插入一张图片，在图片旁边插入一个AP元素，设置为隐藏属性。选中图片，在行为面板中单击按钮添加行为，从弹出菜单中选择“显示-隐藏元素”命令，弹出显示-隐藏元素对话框。2.选择显示，行为面板就增加了一个行为，修改事件为“onMouseOver”，再次选择图片，同样增加行为，事件选择“onMouseOut”，在对话框中选择隐藏。3.按下F12键预览，可以看到鼠标经过图片AP元素就显示，鼠标离开图片AP元素就隐藏。第16页/共17页17 主讲教师：徐颖感谢您的观看！第17页/共17页