文档介绍：网页设计第3章
76 网页设计三剑客（Studio 8）标准教程
第3章 Error! No text of specified style in document. 71
第3章 设计网页布局
布局设计是网页制作中一项很重要的工作，涉及到网页在浏览器中所显示的外观，网页布局往往决定着网页设计的成败。一个完美的网页，不仅要有丰富、活泼的页面内容和信息，而且还要有清晰、美观的页面布局，这样才能给浏览者留下深刻的印象。在Dreamweaver中，有一个【布局】视图功能，利用布局视图功能可以方便地在一个空白网页上随心所欲地设计布局，并能自动转换为表格。
本章将介绍Dreamweaver 8中有关表格和框架的使用方法与技巧，以及在【布局】模式下，如何绘制用于页面布局的表格和单元格，并且设置其属性，为布局表格指定一个宽度等操作。只有在全面了解、掌握这些工具的使用方法后，才能更好地编辑网页以及定位页面中的元素。
76 网页设计三剑客（Studio 8）标准教程
第3章 Error! No text of specified style in document. 71
本章学****目标：
掌握表格的基本使用方法
熟悉表格的编辑
运用表格布局网页
掌握框架的实际运用
创建表格
在日常生活中接触到的表格，多是用来组织数据、方便查询和浏览的，比如我们比较熟悉的Excel中的表格。在网页设计中，表格同样具有组织数据的功能，如图3-1所示。使用表格可以清晰地以列表的形式显示网页中的元素，使浏览者一目了然。另外，表格在网页定位上还有更重要的作用，
76 网页设计三剑客（Studio 8）标准教程
第3章 Error! No text of specified style in document. 72
就是布局页面，平时在网上浏览时看到的排列整齐的页面，在很大程 度上就是利用表格进行布局的，如图3-2所示。
插入表格
在表格中添加内容
选定表格元素并调整表格大小
导入表格数据
格式化表格
表格不仅用于查询浏览数据，而且还可以布局页面、美化网页。通过设置表格的属性，可以有效地改变表格的外观，从而充分发挥表格的布局作用。，对表格做进一步的美化操作。
76 网页设计三剑客（Studio 8）标准教程
第3章 Error! No text of specified style in document. 73
设置表格属性
表格属性面板中各按钮的名称及功能
图标
名称
功能
清除列宽
清除表格中已设置的列宽
将表格宽度转换成像素
将表格当前宽度单位转换为像素单位
将表格宽度转换成百分比
将表格当前宽度单位转换为以表格占【文档】窗口的百分比为 单位
清除行高
清除表格中已设置的行高
将表格高度转换成像素
将表格当前高度单位转换为像素单位
将表格高度转换成百分比
将表格当前高度单位转换为以表格占【文档】窗口的百分比为 单位
设置单元格属性
使用预先设计的格式化表格
课堂练****3-1：表格的导入、排序与导出
本练****主要讲述在Dreamweaver中导入一个Excel文档“学生情况登记表”，然后对“学生情况登记表”中的“专业课成绩1”进行排序，最后再将排序好的表格导出为文本文件的全部过程。通过该练****可以熟悉通过利
76 网页设计三剑客（Studio 8）标准教程
第3章 Error! No text of specified style in document. 75
使得网页上的数据排列更有条理、更美观。在制作一个产品报价单的过程中，利用了前面讲到的一些对表格操作的方法。通过这个练****有助于巩固前面学****的知识点。
应用【布局】模式设计网页
布局模式是另一种对页面进行布局的方式，布局模式主要是通过布局表格和布局单元格布局页面的。由于对于初学者来说，还没有表格的设计经验，要想使用表格设计出布局合理的页面，往往会适得其反。为了简化利用表格布局页面，Dreamweaver中就特意提供了一种新的【布局】模式。在这种模式下使用布局工具，可以避免在【标准】模式下使用表格的缺陷，可以轻松地在页面中绘制布局表格以及单元格。并且可以方便地设置其属性或者对其进行移动等操作，布局表格可以有一定的固定宽度，也可以占据整个浏览器窗口。
76