《网页设计与制作基础》实验指导书---实验.doc

实验六 基于CSS的网页布局设计 实验目的 CSS的页面分割技术、盒模式和定位技术 熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素； 掌握模板的创建、编辑和应用。 实验环境 WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网 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 在“ 文档” 窗口的“ 设计” 视图中，将插入点放置在一个现有 AP Div 的内部，然后选择“ 插入”“ 布局对象”“AP Div”。 使用 AP 元素面板将现有 AP 元素嵌套在另一个 AP 元素中 1 选择“ 窗口”“AP 元素” 打开“AP 元素” 面板。 2 在“AP 元素” 面板中选择一个 AP 元素，然后按住 Ctrl 拖动 (Windows)将此 AP 元 素拖动到“AP 元素” 面板中的目标 AP 元素。 3 当目标 AP 元素的名称高亮显示时，松开鼠标按钮。 注：使用“ 首选参数” 对话框中的“AP 元素” 类别可指定新建 AP 元素的默认设置。 1 选择“ 编辑”“ 首选参数”(Windows) 或“Dreamweaver”“ 首选参数”(Macintosh)。 使用 DREAMWEAVER CS4 142 使用 CSS 创建页面 2 从左侧的“ 分类” 列表选择 AP 元素并指定以下任意首选参数，然后单击“ 确定”。 可见性确定 AP 元素在默认情况下是否可见。其选项为“default”、“ 继承”、“ 可见” 和“ 隐藏”。 宽和高指定使用“ 插入”“ 布局对象”“AP Div” 创建的 AP 元素的默认宽度和高度（以像素为单位）。 背景颜色指定一种默认背景颜色。请从颜色选择器中选