Dreamweaver CS3 项目教程之div

《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元素