使用布局网页

项目4　使用APDIV布局网页

项目描述

Dreamweaver将带有绝对位置的所有DIV标签视为AP元素（分配有绝对位置的元素）。AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，即DIV标签或其他任何标签。AP元素可以包含文本、图像或任何可以放置到HTML文档中的元素。利用Dreamweaver，用户可以使用AP元素来设计网页的布局。本项目以用AP DIV元素布局网页的方法制作“拍拍网商品信息页”为例，讲解利用AP DIV元素布局网页的方法。“拍拍网商品信息页”效果如图4-59所示。

项目分析

本项目所制作的网页按由上面的页头区到下面的法律和版权声明区顺序，可以分成7部分，相应地可以插入7个AP DIV元素来实现页面的布局，然后输入相应的页面元素。因此，本项目可分解为以下任务：

图4-59　“拍拍网商品信息页”效果

任务1　利用AP DIV元素进行页面布局

任务2　给AP DIV插入相应的页面元素

项目目标

●了解层的概念

●掌握创建层的方法

●掌握利用AP DIV元素布局网页的方法

任务1　利用AP DIV元素进行页面布局

操作步骤

图4-60　【文件】面板

图4-61　绘制出7个AP DIV

图4-62　设置apDiv1属性

任务2　给AP DIV插入相应的页面元素

操作步骤

图4-63　为“apDiv1”插入图片

图4-64　为“apDiv2”插入文本

图4-65　为“apDiv3”插入水平线

图4-66　文本属性设置

图4-67　为“apDiv4”插入文本

图4-68　为“apDiv5”插入水平线

图4-69　为“apDiv6”完成布局及填充

图4-70　为“apDiv7”插入法律和版权声明区图片

知识百科

1.层简介

网页布局主要采用表格布局和层布局两种方法，目前业界越来越关注用层进行网页布局。层布局是目前比较流行的网页布局方式，采用层的好处是可以让页面内容和显示样式分离，提高页面的更新速度。

2.使用AP DIV

1）创建AP DIV的方法

方法1　执行【插入记录】→【布局对象】→【AP Div】命令，可以在页面创建层。

2）设置层的属性

在页面创建层后，可以看到层的形状。在Dreamweaver CS3 中插入的每个层，都可以通过【属性】面板来设置层的大小、背景、颜色等。有关层的属性如下：

●CSS-P元素：给每个层定义一个不同的名称，即ID编号，用来区分不同的层。

●左：在文本框中输入一个像素值，确定层的左边框的位置。

●上：在文本框中输入一个像素值，确定层的上边框的位置。

●宽：设置层的宽度，以像素为单位。

●高：设置层的高度，以像素为单位。

●Z轴：确定层的堆叠顺序，以数字表示，作为层的编号。可以随时改变，但不能重复。编号数字大的层内容将显示在编号数字小的层之上。

●可见性：设置层的显示状态，有default、inherit、visible、hidden 4种。

●背景图像：设置层的背景图像。

●背景颜色：设置层的背景颜色，默认层为透明背景。

3）层的编辑

●移动：将光标移到层的左上角标记处，即可拖动层、改变层的位置。

●调整大小：选中层后，将光标移到层的边缘处，鼠标会变成手柄，这时可拖动鼠标改变层的大小。

项目小结

通过本项目学习，了解到层可以放置在网页文档中的任何位置；层内可以放置网页文档中的其他构成元素；层可以自由移动；层与层之间可以重叠；可以使页面上的元素进行复杂的布局。