学生版实训教程五.pdfVIP

实训五：利用APdiv制作“daviDesignStudio”

Div简介：Div相当于一个容器，有起始Div和结束/Div之间的所有内容构成。

在div的里面可以加入表格(table、文本（text）等HTML代码。Div这个作为容器，没

有任何原始属性。

本次实训，主要以APDiv为例来说明网页的制作。

APdiv是absolutepositiondiv,他是div层定位的一种，是绝对定位，AP元素（绝对定位

元素）是分配有绝对位置的HTML页面元素，具体地说，就是div或其它任何。

AP元素可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。

单解：APDiv在网页以移动位的Div，在以的DW软版本

中“”

接下来以制作“daviDesignStudio”为例，说明APdiv的具体性质和用法

一、制作“index.html”

1、前期准备工作不赘述，将所有素材放置在某个驱动盘下，新建文件夹，命名为“web”

2、打开DW软件，4个html，保存为“index.html”“artdesign.html”“about.html”

“contact.html，标题统为为“daviDesignStudio”

3、打开“index.html”，引入图像“主页图像.jpg”，适当调整不，在“页面

属性”中设置背影颜色为：#3f2789，如下图所示

4、单击菜单“”—“布局对象”—“APdiv”，如下图所示

5、第一个APdiv可移动层，DW软件中出现以下内容

选中该apdiv，单击菜单“编辑”—“首选参数”—“AP元素”，出现以下内容

其中：

（1）“可见”拉列表：设置默认状态APDiv的视度以选择“default”（浏

览默认状态），“inherit”（继承可视度），“visible”（可视）和“hidden”（隐藏）

（2）“宽”和“高”文本框：设置默认状态下APDiv的宽度和高度，单位为像素

（3）“景颜色”按钮文本框：设默认状态下入APDiv的背景颜色默认为透

明

（4）“背图像文本框与“浏览”钮：来设置默认状态APDiv的背景图像

单击“浏览”按钮，可以弹“选择图像源”框，从中可以设定APDiv的背景图像

（5）“嵌套”复选框：选中它，以将APDiv动其APDiv时实现嵌套

关于APdiv的属性检查器说明(以下内容非内容，很要，请仔细阅读，你可以

选择忽略不看，但是这分内容对于作网页灰常灰常要！)

APDiv“属性”栏两：一种是单APDiv“属性”栏，这是在选中一个APDiv时出现

的；另一个是多APDiv“属性”栏，这是在选中多个APDiv时出现的。单APDiv“属

性”栏如图1所示，多APDiv“属性”栏如图2所示。从图中可以看出，多APDiv“属

性”栏内除了基本的属性设置选项外，还增加了关于文本属性的设置选项。其中各选项的作

用如下：

图1单APDiv

图2多APDiv

（1）“CSS-P元素”下拉列表框：用来输入APDiv的名称，它会在“AP素材”面板

中显示出来。该名称可以在中使用，例如通过实现APDiv的显示或隐藏等。

（2）“左（L）”文本框用来确定APDiv在页面中的位置，单位为像素，其内的数据是AP

Div