内容发布更新时间 : 2024/12/23 12:06:16星期一 下面是文章的全部内容请认真阅读。
实验六 基于CSS的网页布局设计
实验目的
1、 CSS的页面分割技术、盒模式和定位技术
2、 熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素； 3、 掌握模板的创建、编辑和应用。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
? CSS盒模式和定位技术
? 灵活利用层来实现网页元素的精确定位。 ? 利用模板生成多个风格一致的网页。
实验内容
1、 在你的站点中创建文件夹：sy6。在sy6文件夹下创建两个文件：index.html、和zzy.html。
并将给定的多媒体文件放入相应的文件夹中。
2、 结合所学的CSS布局知识和实验操作说明中关于AP Div（层）的知识，利用Dreamweaver
对index.htm进行设计编辑，效果如下图所示。
说明：
1） 红色显示的文字“中国四大名园”不是图片的一部分 2） 左下的各行文字为空超链接
3、 编辑网页文件“zzy.html”，效果如下图所示。
说明： 1）“首页”链接index.html，“拙政园”链接zzy.html，其它为空链接。 4、
a) 根据网页文件“zzy.html”生成模板文件“zzy.dwt”。文件存放Templates 文件夹下。b) 根据模板文件“zzy.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站
点中的my.html的导航莱单内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。
实验操作说明
使用 CSS 对页面进行布局
关于 Dreamweaver 中的 AP 元素
AP 元素（绝对定位元素，层）是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其它任何标签。
AP 元素可以包含文本、图像或其它任何可放置于 HTML 文档正文中的内容。 AP 元素用于设计页面的布局。
AP 元素通常是绝对定位的 div 标签。（它们是 Dreamweaver 默认插入的 AP 元素类型。）但是请记住，可以将任何 HTML元素（例如，一个图像）作为 AP 元素进行分类，方法是为其分配一个绝对位置。所有 AP 元素（不仅仅是绝对定位的 div 标 签）都将在“AP 元素” 面板中显示。 AP Div 元素的 HTML 代码
Dreamweaver 使用 div 标签创建 AP 元素。当使用“ 绘制 AP Div” 工具绘制 AP 元素时，Dreamweaver 在文档中插入一个div 标签，并为该div 指定一个 ID 值（默认情况下为第一个div指定apDiv1，第二个div分配apDiv2，依此类推）。
可以使用“AP 元素” 面板或属性检查器将 AP Div 重新命名为想要的任何名称。 以下是 AP Div 的示例 HTML 代码：
Sample AP Div Page