2.7.1在网页中插入层

时间：2022-10-15 百科知识版权反馈

【摘要】：使用Dreamweaver在网页中插入层有两种方法：一是先插入一个应用层，再设置该层的属性；二是先为层定义一个样式类或ID样式，创建层时为它指定CSS样式，或者在创建DIV层的同时创建样式。选择菜单“插入”>“布局对象”>“AP DIV”命令，即可在网页中插入一个应用层，如图2-47左所示。用这种方式插入层，操作方法没有前一种那么简便。在图中插入两个apDiv层，其中一层背景色为红、Z轴值为1，另一层背景色为蓝、Z轴值为2。

2.7.1　在网页中插入层

使用Dreamweaver在网页中插入层有两种方法：一是先插入一个应用层(AP DIV)，再设置该层的属性(HTML属性和CSS属性)；二是先为层定义一个样式类或ID样式，创建层(DIV)时为它指定CSS样式，或者在创建DIV层的同时创建样式。

1. 插入应用层

选择菜单“插入”−>“布局对象”−>“AP DIV”命令，即可在网页中插入一个应用层，如图2-47左所示。拖动其左上角的“回”字形控制柄，可在网页里移动层的位置；拖动边框上的六个控制小方块之一，可改变层的大小。在选中层的情况下，可看到层的属性面板如图2-47右所示，在层的属性面板中，可以设置层的左上坐标、宽度、高度、Z轴(当多层重叠时，Z轴值越小层次越低)、背景图像、背景颜色、类、剪辑、溢出属性等。溢出属性是指内容超出层的范围时如何显示，可选项有：visible、hidden、scroll和auto。

图2-47　层及其属性

转换到“代码”视图，可以看到，在网页head头部自动定义了一个名为apDiv2的ID样式，样式的内容就是层属性面板中相关设置；在网页主体body元素内插入了一个div元素，该元素应用了ID样式apDiv2。层及其CSS样式的代码如下。

<head>

<!--

#apDiv2 {

position:absolute;　　　　　　/∗ 指定绝对坐标，即窗口左上角为原点 ∗/

left: 23px;　 top: 21px;　　　/∗ 指定层左上角的坐标值 ∗/

width:200px;　height:115px;　/∗ 指定层的大小 ∗/

z-index:1;　}　　-−>　　　/∗ 指定层的层次 ∗/

</style>

</head>

<body>

<div id="apDiv2"></div>　/∗ 插入一个Div元素 ∗/ </body>

可以在层内插入文字、图片、媒体、表格、表单等元素。

2. 插入层(DIV)

也可以选择“插入”−>“布局对象”−>“DIV标签”命令的方式来插入层，或者在插入面板中单击按钮也可实现这一功能。这时出现如图2-48所示的对话框。在该对话框中，在插入Div标签(层)的同时，还要为它指定已有的样式类、ID类，或者单击“新建CSS规则”按钮新建一个样式。用这种方式插入层，操作方法没有前一种那么简便。