《网页设计与制作基础实验指导书实验6.docVIP

实验六 基于CSS的网页布局设计 实验目的 CSS的页面分割技术、盒模式和定位技术 熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素； 掌握模板的创建、编辑和应用。 实验环境 WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。 实验重点及难点 CSS盒模式和定位技术 灵活利用层来实现网页元素的精确定位。 利用模板生成多个风格一致的网页。 实验内容 在你的站点中创建文件夹：sy6。在sy6文件夹下创建两个文件：index.html、和zzy.html。并将给定的多媒体文件放入相应的文件夹中。 结合所学的CSS布局知识和实验操作说明中关于AP Div（层）的知识，利用Dreamweaver对index.htm进行设计编辑，效果如下图所示。 说明： 红色显示的文字“中国四大名园”不是图片的一部分 左下的各行文字为空超链接 编辑网页文件“zzy.html”，效果如下图所示。 说明： 1）“首页”链接index.html，“拙政园”链接zzy.html，其它为空链接。 根据网页文件“zzy.html”生成模板文件“zzy.dwt”。文件存放Templates 文件夹下。 根据模板文件“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 代码： head meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 / titleSample AP Div Page/title style type=text/css !-- #apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } -- /style /head body div id=apDiv1 /div /body /html 可以更改页面上的 AP Div （或任何 AP 元素）的属性，包括 x 坐标和 y 坐标、z 轴（也称作堆叠顺序）和可见性等所有CSS布局属性。 插入 AP Div 将插入点放置在“ 文档” 窗口中，然后选择“ 插入”“ 布局对象”“AP Div”。创建 AP Div 后，只需将插入点放置于该 AP Div 中，然后就可以像在页面中添加内容一样，将内容添加到 AP Div 中。 使用嵌套的 AP Div 嵌套的 AP Div 是其代码包含在另一个 AP Div 的标签内的 AP Div。例如： div id=apDiv1/div div id=apDiv2/div div id=apDiv3 div id=apDiv4/div /div apDiv4 div 实际上位于 apDiv3 div 的内部。（可以在“AP 元素” 面板中更改 AP Div 堆叠顺序。） 嵌套通常用于将 AP Div 组合在一起。嵌套 AP Div 随其父 AP Div 一起移动，并且可以设置为继承其父级的可见性。 插入嵌套 AP Div 1 确保已取消选择“ 防止重叠”。 2 在“ 文档” 窗口的“ 设计” 视图