欢迎来到天天文库
浏览记录
ID:43083643
大小:516.50 KB
页数:21页
时间:2019-09-29
《Dreamweaver CS3 项目教程之div》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、淘宝网女装www.maixixi.netDreamweaverCS3项目教程项目三布局技术任务七布局技术之三—层APDiv技能目标熟练运用层APDiv进行页面布局技术。熟练运用层的嵌套和定位技术改变页面的布局。知识目标熟练掌握如何描绘层和层的插入。掌握层的属性设置及调整。掌握在层中输入文字、插入图像的方法。掌握嵌套层的创建方法。了解层与表格之间的相互转换方法。项目三布局技术3.3.1使用层APDiv搭建页面3.3.2问题探究—认识层APDiv3.3.3知识拓展—AP元素与表格的转换3.3.3知识拓展—拖动AP元素行为3.3.3知识拓展—显示-隐
2、藏元素行为任务七布局技术之三—层APDiv项目三布局技术任务七APDiv—构建任务工作任务层是网页制作时经常用到的对象,也是重要的网页布局工具之一。由于层在页面布局方面具有更大的随意性,通过拖动、方向键或指定坐标位置的方式就可以放到网页的任何位置,不受网页中其他元素的限制和干扰,就像浮在页面上方一样。运用层的此特性创建布局更加合理、美观的网页效果。项目三布局技术任务七APDiv—构建任务工作流程在站点中新建一个页面并保存。在网页中插入一个层作为整个页面的限制范围。插入嵌套子层。在层中插入文字和图片元素。在层中插入表格等复杂网页元素。通过属性设置
3、精确调整层的位置和大小。项目三布局技术任务七APDiv—构建任务网页布局效果项目三布局技术任务七APDiv—问题探究在DreamweaverCS3以下版本APDiv被称为层。APDiv又称绝对定位元素(AP元素),是分配有绝对位置的,用来精确控制浏览器窗口对象位置的HTML页面构成元素。APDiv可以通过层的重叠和次序的改变,实现一组包含着文字或图像等元素的胶片变换效果;可以通过动态设定层的显示或隐藏,实现层内容的动态交替等特殊显示效果;通过层子层遗传父层的嵌套特征,实现内容的可见及位置移动等。APDiv的出现使网页技术从二维空间拓展到三维空间
4、,使页面元素能实现相互重叠,及更复杂的布局设计,成为网页设计新的发展方向。项目三布局技术任务七APDiv—问题探究APDiv的创建在DreamweaverCS3中,可以在页面上轻松地创建和定位层APDiv。创建步骤如下:选择菜单“插入记录/布局对象/APDiv”命令,在设计窗口创建一个预设大小的APDiv。直接将“绘制APDiv”按钮拖动到设计窗口松开左键,就可在编辑区创建一个预设大小的APDiv。单击“插入”面板中“布局”选项下的“绘制APDiv”按钮,这时鼠标形状变成了“+”形,按下鼠标左键并向右下拖动,画出大小合适的一个矩形,释放鼠标左键
5、,就可以绘制APDiv。项目三布局技术任务七APDiv—问题探究属性设置选中页面上的某个层后,在属性检查器上对应显示该层的所有属性,可查看或修改对应的属性值,如图所示。图层的属性面板项目三布局技术任务七APDiv—问题探究AP元素面板在AP元素比较多的情况下,AP元素面板提供了一种快速管理方法。利用AP元素面板可准确指定AP元素、防止重叠、更改可见性、嵌套或堆叠AP元素,大大简化了操作方法。AP元素按照Z轴的顺序显示为一列名称。默认情况下,第一个创建的AP元素(Z轴为1)显示在列表底部,最新创建的AP元素显示在列表顶部。不过,可以通过更改AP元
6、素在堆叠顺序中的位置来更改它的Z轴。图AP元素面板项目三布局技术任务七APDiv—问题探究AP元素面板改变AP元素的可见性AP元素面板中的眼睛图标表示其可见性,单击面板上眼睛图标就可以显示或隐藏对应APDiv。如果图标是睁开的眼睛,表示该AP元素是可见的;如果图标是闭上的眼睛,表示该AP元素是不可见的。如果没有眼睛图标,那么继承其父APDiv的可见性,没有嵌套的APDiv总是可见的。改变层的堆叠顺序在HTML代码中,AP元素的堆叠顺序或Z轴决定了AP元素在浏览器中绘制的顺序。AP元素的Z轴值越高,该AP元素在堆叠顺序中的位置就越高。项目三布局技
7、术任务七APDiv—问题探究AP元素面板APDiv的重叠与嵌套如果页面上有两个交叉的APDiv,存在重叠与嵌套两种关系。重叠的两个APDiv是相互独立的,任何一个APDiv的改变不影响另外一个APDiv。嵌套通常用于将APDiv组合在一起。嵌套APDiv和表格的嵌套有些类似,就是在层APDiv里面再建一个层APDiv。嵌套APDiv总是随其父APDiv一起被移动,并继承其父APDiv的所有特征,包括可视性和背景颜色等。与表格嵌套不同的是,父表格一定是大于子表格的,但是APDiv的子APDiv可以超出父APDiv或在父APDiv之外。项目三布局技
8、术任务七APDiv—知识拓展AP元素和表格都是用来定位页面内容的,AP元素能够更方便、精确地定位页面元素。DreamweaverCS3可以使用AP元素
此文档下载收益归作者所有