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