1

第第 77 章 章 规划网页布局规划网页布局

使用表格布局网页使用表格布局网页

在网页中使用在网页中使用 AP AP 元素元素

使用框架布局网页使用框架布局网页

2

网页布局网页布局 网页设计者应合理布局网页中的文字、图像等内容，使页网页设计者应合理布局网页中的文字、图像等内容，使页

面美观、结构清晰、层次分明，这样不仅使浏览者愿意把面美观、结构清晰、层次分明，这样不仅使浏览者愿意把视线停留在页面上，更可以方便地找到所需的目标内容。 视线停留在页面上，更可以方便地找到所需的目标内容。

3

实例：实现如图所示的网页布局实例：实现如图所示的网页布局

4

在实现网页布局前，可先绘出布局草图。在实现网页布局前，可先绘出布局草图。

5

一、使用表格布局网页一、使用表格布局网页 表格常用于在网页中定位图像和文本等页表格常用于在网页中定位图像和文本等页

面对象面对象 使用标准表格（即表格）进行布局使用标准表格（即表格）进行布局 使用“布局表格使用“布局表格””进行布局进行布局

6

表格常用于在网页中定位图像和文本等页面对象表格常用于在网页中定位图像和文本等页面对象 使用标准表格布局时，经常使用嵌套表格。 使用标准表格布局时，经常使用嵌套表格。

7

二、在网页中使用二、在网页中使用 APAP 元素元素 在在 DreamweaverDreamweaver 中，可以通过插入“中，可以通过插入“ AP AP 元素”，方元素”，方

便地实现对文档内容的精确定位。本节主要讲述便地实现对文档内容的精确定位。本节主要讲述Dreamweaver CSDreamweaver CS 的 “的 “ AP AP 元素”的使用方法。元素”的使用方法。

AP AP 元素可以包含文本、图像或其它任何可在元素可以包含文本、图像或其它任何可在 HTML HTML 文文档正。档正。

可以使用可以使用 AP AP 元素来设计页面的布局。元素来设计页面的布局。 用户可以将用户可以将 AP AP 元素前后放置。元素前后放置。 隐藏某些隐藏某些 AP AP 元素而显示其它元素而显示其它 AP AP 元素，以及在屏幕上元素，以及在屏幕上

移动移动 AP AP 元素元素 利用利用 AP AP 元素可以非常灵活地放置内容。元素可以非常灵活地放置内容。

8

AP AP 元素元素 创建创建 AP AP 元素元素 AP AP 元素大小和属性设置 元素大小和属性设置 认识“认识“ AP AP 元素”面板 元素”面板 选择、移动和对齐选择、移动和对齐 AP AP 元素 元素 AP AP 元素的显示和隐藏 元素的显示和隐藏 AP AP 元素名的变更 元素名的变更 AP AP 元素的堆叠元素的堆叠 删除删除 AP AP 元素 元素

9

创建创建 AP AP 元素元素 在“插入”面板选择“布局”类别，然后单击“绘制在“插入”面板选择“布局”类别，然后单击“绘制 AP AP

元素”按钮。元素”按钮。

选中 AP 元素后光标在 AP 元素中AP 元素的属性面板：

10

利用利用 AP AP 元素面板，改变元素面板，改变 AP AP 元素的堆叠次元素的堆叠次序序

堆叠次序

用鼠标拖动 AP 元素名可改变 AP 元素的堆叠次序

11

AP AP 元素的显示和隐藏元素的显示和隐藏 在在 AP AP 元素的眼形图标列内单击可以更改其可见元素的眼形图标列内单击可以更改其可见

性：性： 眼睛眼睛睁开睁开表示该表示该 AP AP 元素是可见的。元素是可见的。 眼睛眼睛闭合闭合表示该表示该 AP AP 元素是不可见的。元素是不可见的。 没有眼睛没有眼睛表示默认。表示默认。

利用 AP 元素的显示、隐藏可制作动态效果，如弹出式菜单。

12

AP AP 元素的修饰、元素的修饰、 AP AP 元素的定位元素的定位 使用使用 AP AP 元素面板完成元素面板完成 AP AP 元素的属性设置、元素的属性设置、 AP AP 元素元素

的定位等。的定位等。 使用使用 CSSCSS 样式完成样式完成 AP AP 元素的修饰、元素的修饰、 AP AP 元素的定位。元素的定位。 即 即 div+cssdiv+css ，（，（ AP AP 元素元素 +CSS+CSS 样式）样式）

实例：实例：【【例例 7-27-2 】】：： 在在【【例例 7-17-1 】】的基础上继续创建标题是“蓝色空间”的网的基础上继续创建标题是“蓝色空间”的网

站“我的站点”。本例中将创建“技术文章”栏目的网页站“我的站点”。本例中将创建“技术文章”栏目的网页（名为“（名为“ article.html”article.html” ）。页面的布局采用）。页面的布局采用 AP AP 元素技元素技术，页面的全部修饰效果采用术，页面的全部修饰效果采用 CSSCSS 样式。 样式。

13

14

表格和表格和 AP AP 元素布局网页的比较元素布局网页的比较 表格排版存在一些问题。首先，利用表格排版的页面很难表格排版存在一些问题。首先，利用表格排版的页面很难

升级，需要花费较大的精力重新设置表格的行和列的内容升级，需要花费较大的精力重新设置表格的行和列的内容及属性。其次，利用表格排版的页面在下载时必须等整个及属性。其次，利用表格排版的页面在下载时必须等整个表格都下载完毕以后才会一次性显示出来。表格都下载完毕以后才会一次性显示出来。

而利用而利用 AP AP 元素排版，可以避免上述问题。元素排版，可以避免上述问题。 CSSCSS 的的 AP AP 元素排版方式使得数据内容与元素排版方式使得数据内容与 CSSCSS 样式规则完全分离，样式规则完全分离，修改网页排版效果时不需要关心网页数据部分（网页正修改网页排版效果时不需要关心网页数据部分（网页正文）的代码。文）的代码。

AP AP 元素（元素（ divdiv ）） +CSS+CSS 样式的高度结合，已经成为网样式的高度结合，已经成为网页设计的主流方法。页设计的主流方法。

15

三、使用框架布局网页三、使用框架布局网页 认识框架和框架集 认识框架和框架集 创建框架和框架集创建框架和框架集 选择框架和框架集选择框架和框架集 保存框架和框架集保存框架和框架集 设置框架和框架集的属性设置框架和框架集的属性 处理不能显示框架的浏览器 处理不能显示框架的浏览器 框架间的超链接 框架间的超链接

16

认识框架和框架集认识框架和框架集 框架是浏览器窗口中的一个区域， 可以独立显示框架是浏览器窗口中的一个区域， 可以独立显示

一个网页的内容。一个网页的内容。 框架集文件本身不包含要在浏览器中显示的框架集文件本身不包含要在浏览器中显示的

HTML HTML 内容；框架集文件只是向浏览器提供应内容；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 文档的有关信息。

17

创建框架和框架集创建框架和框架集 通过预定义的框架集样式，用户可以很容易地选择通过预定义的框架集样式，用户可以很容易地选择

要创建的框架集类型。要创建的框架集类型。 执行执行““插入”插入” |“HTML”|“|“HTML”|“框架”子菜单中选择预框架”子菜单中选择预

定义的框架集；或在“插入”面板的“布局”类别定义的框架集；或在“插入”面板的“布局”类别中选择框架中选择框架

18

框架属性面板框架面板框架属性面板框架面板

框架面板框架面板

19

框架集的属性面板框架集的属性面板

使用框架集属性面板可以查看和设置大多数框架集属性。

20

框架间的超链接框架间的超链接 指定超链接的目标框架指定超链接的目标框架

四个默认的框架名：四个默认的框架名： _blank _blank 在新的浏览器窗口中打开链接的文档在新的浏览器窗口中打开链接的文档 _parent _parent 在显示链接的框架的父框架中打开链接的在显示链接的框架的父框架中打开链接的

文档文档 _self _self 在当前框架中打开链接在当前框架中打开链接 _top _top 在当前浏览器窗口中打开链接的文档在当前浏览器窗口中打开链接的文档

21

保存框架和框架集保存框架和框架集 可以单独保存每个框架集文件和带框架的文档可以单独保存每个框架集文件和带框架的文档 也可以同时保存框架集文件和框架中出现的所有也可以同时保存框架集文件和框架中出现的所有

文档。文档。 执行“文件执行“文件”” |”|”保存全部保存全部””，则保存全部；，则保存全部； 选择框架集后执行“文件”选择框架集后执行“文件” |“|“保存框架集”；保存框架集”； 选择某框架后执行“文件”选择某框架后执行“文件” |“|“保存框架”；保存框架”；

22

删除框架删除框架

删除不需要的框架时，用鼠标将要删除框架的边删除不需要的框架时，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。 框拖到父框架边框上或拖离页面即可。

23

框架网页实例框架网页实例【【例例 7-37-3 】】 创建一个如图所示的包含框架的网页，创建一个如图所示的包含框架的网页，框架类型为“顶部和嵌套的左侧框架”。框架类型为“顶部和嵌套的左侧框架”。

24

点击左侧框架中的“题西林壁点击左侧框架中的“题西林壁””后，网页显示结果后，网页显示结果

25

处理不能显示框架的浏览器处理不能显示框架的浏览器 如果浏览器不支持框架，框架和框架集的内容就如果浏览器不支持框架，框架和框架集的内容就

不能显示。不能显示。 Dreamweaver Dreamweaver 允许用户在框架集文件中，在允许用户在框架集文件中，在

<noframes><noframes> 和和 </noframes></noframes> 标签之间，给标签之间，给出类似“您的浏览器不支持框架，无法显示文档出类似“您的浏览器不支持框架，无法显示文档内容”提示信息。当不支持框架的浏览器加载该内容”提示信息。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用框架集文件时，浏览器只显示用 <noframes><noframes>和和 </noframes></noframes> 标签之间的内容。 标签之间的内容。

26

例如：在例如：在 DreamweaverDreamweaver 中，创建框架集时，在中，创建框架集时，在HTMLHTML 文件中加入下列内容：文件中加入下列内容：

<noframes><noframes>

<body><body>

您的浏览器不支持框架，无法显示文档内容您的浏览器不支持框架，无法显示文档内容 </body></body>

</noframes></noframes>