4 第 4 章 网页的布局 设计站点地图，有助于突出网站的主题，确定网 站的内容。而对于每一个网页来说，最重要的除了网 页的内容以外，还有就是网页的风格和布局。一个格 局凌乱的网页，内容再精彩，也不能说是一个好网页 。

Presentation on theme: "4 第 4 章 网页的布局 设计站点地图，有助于突出网站的主题，确定网 站的内容。而对于每一个网页来说，最重要的除了网 页的内容以外，还有就是网页的风格和布局。一个格 局凌乱的网页，内容再精彩，也不能说是一个好网页 。"— Presentation transcript:

1 4 第 4 章 网页的布局 设计站点地图，有助于突出网站的主题，确定网 站的内容。而对于每一个网页来说，最重要的除了网 页的内容以外，还有就是网页的风格和布局。一个格 局凌乱的网页，内容再精彩，也不能说是一个好网页 。

2 4 4.1 网页布局实例 -4.1.1 网页布局实例 所谓网页的布局，通俗地说，就是确定网页上的 网站标志、导航栏、菜单等元素的位置。不同的网页 ，各种网页元素所处的地位不同，它们的位置也就不 同。通常情况下，重要的元素都放在突出的位置。

3 4 4.1 网页布局实例 -4.1.1 网页布局实例 1 “ 厂 ” 字型结构，这种结构的特点是内容清晰、一目 了然。网页最顶端是徽标和图片（广告）栏，下半部分 的左边是导航链接，右边是信息发布区。

4 4 4.1 网页布局实例 -4.1.1 网页布局实例 2 “ 同 ” 字型结构是大型网站最常用的一种结构，其特 点是超链接多、信息量大。网站的顶端是徽标和图片（ 广告）栏，下面分为 3 列，或者更多。两边的两列区域 比较小，一般是导航超链接和小型图片广告等，中间是 网站的主要内容，最下面是网站的版权信息等。

5 4 4.1 网页布局实例 -4.1.1 网页布局实例 3 标题正文型结构顶端是网站标识和标题，下面是网 页正文，内容非常简单。

6 4 4.1 网页布局实例 -4.1.1 网页布局实例 4 分栏型结构，这种结构一般分为左右（或上下）两 栏，也有的分为多栏。通常将导航链接与正文放在不同 的栏中，这样打开新的网页，导航链接栏的内容不会发 生变化。在 Web 型的电子邮箱中多见这种结构。

7 4 4.1 网页布局实例 -4.1.1 网页布局实例 5 Flash 型结构，这种结构采用 Flash 技术完成，其视 觉效果和听觉效果与传统网页不同，往往能够给浏览者 以极大的冲击。

8 4 4.1 网页布局实例 -4.1.1 网页布局实例 6 封面型结构，这种结构往往首先看到的是一幅图片 或动画，在图片或动画的下面有一个进入下一级网页的 超链接提示文字。其中图片或动画可以用 Flash 来制作 ，但与 Flash 型不同，这种结构并不是在 Flash 中完成的 ，而是在网页制作软件中完成的。

9 4 4.1 网页布局实例 - 4.1.2 网页布局注意事项 ⑴平衡性 ⑵对称性 ⑶对比性 ⑷疏密度 ⑸反复性 ⑹韵律感

10 4 4.1 网页布局实例 - 4.1.3 画出网页布局草图

11 4 4.2 使用表格 - 4.2.1 插入表格 在网页中另起一行，确定光标的位置。然后单击 “ 插 入 ” 面板的 “ 插入表格 ” 按钮，在如图所示的对话框中输入 行列数。

12 4 4.2 使用表格 - 4.2.1 插入表格 在默认情况下，表格的两列的宽度是一样的，在本 例中，我们希望表格左列比右列窄些。将鼠标指针移动 到框线上，当鼠标指针变成双向箭头时，拖动鼠标到合 适位置松开鼠标 ，可以更改表格宽度和高度。

13 4 4.2 使用表格 - 4.2.2 插入、删除表格的行、列与单元格 使光标出现在某行中，单击鼠标右键打开快捷菜单 ，移动鼠标指针到快捷菜单的 “ 表格 ” 上弹出子菜单 ，在 下一级菜单中单击 “ 插入行或列 ” 。 在 “ 插入行或列 ” 对话框选中 “ 行 ” ，在 “ 行数 ” 右端的栏 位中输入 1 ，然后选中 “ 所选之下 ” 。单击 “ 确定 ” ，在图 片所在行的下面将插入一行。

14 4 4.2 使用表格 - 4.2.3 插入、删除表格的行、列与单元格 使光标出现在某行中。然后单击鼠标右键打开快捷 菜单，移动鼠标指针到快捷菜单的 “ 表格 ” 上弹出子菜单 ，在下一级菜单中单击 “ 删除行 ” ，该行被删除 。

15 4 4.2 使用表格 - 4.2.4 合并与拆分单元格 拖动鼠标指针选中两个单元格，移动鼠标指针到 “ 属 性 ” 面板上，单击 “ 合并单元格 ” 按钮，两个单元格被合并 。 单击鼠标，使光标出现在单元格中。移动鼠标指 针到 “ 属性 ” 面板上，单击 “ 拆分单元格 ” 按钮。 在 “ 拆分单元格 ” 对话框中选中 “ 拆分为行 ” ，在 “ 行数 ” 右端的栏位中输入 “2” 。单击 “ 确定 ” ，该单元格被分为 两个单元格，

16 4 4.2 使用表格 - 4.2.5 表格的嵌套 将光标移动到该单元格中，单击 “ 插入 ” 面板的 “ 插入 表格 ” 按钮，输入行列数，完成表格嵌套。

17 4 4.2 使用表格 - 4.2.6 设置表格框线 在属性面板中，能够设置框线的宽度、单元格间距 ，以及背景色等。 更改表格框线的宽度为 0 ，可以发现表格的框线变 成虚线，这样在浏览器中看到的表格将被隐藏。

18 4 4.3 布局视图 - 4.3.1 布局视图工具栏 在插入面板中单击 “ 常用 ” ，在下拉菜单中单击 “ 布局 ” ，结果如图所示。观察 “ 布局 ” 工具栏，可以发现按钮被 按下，标准视图就是我们设计网站的普通视图，右边的 “ 布局表格 ” 按钮和 “ 绘制布局单元格 ” 按钮是灰色的，不 可用，要想使用他们必须切换到布局视图。

19 4 4.3 布局视图 - 4.3.2 使用布局视图规划网页布局 ⑴单击绘制布局表格按钮，编辑区顶端出现 “ 布局表 格 ” 几个字。移动鼠标到编辑区，指针变成 “ 十 ” 字状，按 住鼠标指针拖动，画出一个绿色的表格

20 4 4.3 布局视图 - 4.3.2 使用布局视图规划网页布局 ⑵用同样的方法，在第一个表格的下面再画两个布 局表格。 ⑶在插入面板中单击绘制布局单元格按钮，移动鼠 标指针，在顶端表格中画出一大一小两个单元格；在第 二个表格中，一大五小六个单元格；最后在下面一个表 格中画出一个和表格一样大的单元格。

21 4 4.3 布局视图 - 4.3.2 使用布局视图规划网页布局 ⑷如果对表格中各单元格的大小和位置不满意，可 以进行修改。将鼠标移动到单元格框线上，这时框线颜 色由绿色变成红色，单击鼠标，单元格框线变成蓝色， 并出现 8 个正方形选取块。将鼠标指针放在正方形选取 块上鼠标指针变成双向箭头，拖动鼠标可以更改单元格 的大小。

22 4 4.3 布局视图 - 4.3.2 使用布局视图规划网页布局 ⑸在插入面板中单击 “ 标准视图 ” 按钮，返回标准视 图 。

23 4 小结 本章主要介绍了常见网页的风格与布局，实现网页 布局的两种方法：表格和布局视图。 对于表格的插入与修饰，本章介绍的比较详细，在 使用中要体会表格在网页设计中的作用，特别是在表格 中再插入表格，即表格的嵌套在网页制作中被经常使用 到，尤其是在一些大型网站中，为了使大量的信息整齐 地展示在浏览者面前，表格的嵌套就使用得最为频繁。 由于网页中的表格一般比较简单，所以 Dreamweaver 8 对表格的支持不象 WORD 那样好，这使得我们在应用 表格规划网页时非常烦琐。 Dreamweaver 8 提供了布局 视图来完成网页布局，然后可以转换成表格达到同样的 效果。学习者可以根据情况采用不同的方法来实现网页 的布局。