第九章使用表格布局页面

1、 使用表格布局页面使用表格布局页面课程代码：课程代码：课程介绍课程介绍v目的：通过学习掌握使用表格布局页面。目的：通过学习掌握使用表格布局页面。v内容内容: : 页面布局是进行网页设计最基本最重页面布局是进行网页设计最基本最重要的工作之一。用于网页布局设计的常用工具要的工作之一。用于网页布局设计的常用工具是表格。是表格。v重重点：点：制作表格的方法制作表格的方法, ,表格数据的处理。表格数据的处理。v难点：使用表格进行页面布局难点：使用表格进行页面布局。 制作表格的方法制作表格的方法表格数据的处理表格数据的处理使用其他模式进行页面布局使用其他模式进行页面布局在页面中使用表格进行排版在页面中使用

2、表格进行排版使用表格布局页面使用表格布局页面选择表格选择表格添加与删除行或列添加与删除行或列合并与拆分单元格合并与拆分单元格 设置表格整体属性设置表格整体属性 表格的嵌套表格的嵌套表格数据的处理表格数据的处理 页面布局是进行网页设计最基本页面布局是进行网页设计最基本、最重要的工作之一。用于网页、最重要的工作之一。用于网页布局设计的常用工具是表格。合布局设计的常用工具是表格。合理布局表格，会使网页更具有自理布局表格，会使网页更具有自身的特点，也可便于管理和修改身的特点，也可便于管理和修改。 制作表格的方法制作表格的方法插入表格插入表格 表格是整个网页设计的精华，它表格是整个网页设计的精华，它具有

3、输入数据和进行分类列表的具有输入数据和进行分类列表的功能，而且当前许多网站都用表功能，而且当前许多网站都用表格来协助网页的排版。表格为格来协助网页的排版。表格为WebWeb页带来了结构的概念。现在，页带来了结构的概念。现在，WebWeb页设计者已经把表格当作控页设计者已经把表格当作控制制WebWeb页面布局的重要的工具。页面布局的重要的工具。 DreamweaverDreamweaver可以在另一个应用程可以在另一个应用程序中创建并以分隔文本的格式（其序中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号或分中的项以制表符、逗号、冒号或分号隔开）保存的表格式数据导入到号隔开）保存的表格式数据

4、导入到 Dreamweaver Dreamweaver 中并设置为表格格中并设置为表格格式式。导入外部链接数据文件导入外部链接数据文件 表格是用于在表格是用于在HTMLHTML页上显示表格式数页上显示表格式数据以及对文本和图形进行布局的强有力据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。又由一个或多个单元格组成。 在网页中，表格用于网页内容的排版，在网页中，表格用于网页内容的排版，如文字放在页面的哪个位置，可以使用如文字放在页面的哪个位置，可以使用表格来解决这个问题。下面来介绍表格表格来解决这个问题。下面来介绍表

5、格的基本操作。的基本操作。 表格数据的处理表格数据的处理 像处理文本或图像一样，首先需要像处理文本或图像一样，首先需要选择表格选择表格, ,然后才是修改编辑。在然后才是修改编辑。在DreamweaverDreamweaver中用户可以一次选定中用户可以一次选定全部表格、一行、一列或几个连续全部表格、一行、一列或几个连续的单元格，也可以选定表格中不连的单元格，也可以选定表格中不连续的单元格，然后通过属性面板来续的单元格，然后通过属性面板来修改它们的属性。修改它们的属性。选择表格选择表格 表格创建后，可能需要添加内容而添加行或列。用户可以使用不同方法在表格中的几乎任何地方添加行或列。添加与删除行或

6、列添加与删除行或列 在使用表格的过程中，有时需要拆在使用表格的过程中，有时需要拆分单元格以达到最终的效果。拆分分单元格以达到最终的效果。拆分单元格就是将选中的单元格拆分为单元格就是将选中的单元格拆分为多行或多列。多行或多列。合并与拆分单元格合并与拆分单元格在在Adobe Dreamweaver Adobe Dreamweaver CS5CS5中为了使创建的表格中为了使创建的表格更加美观、醒目，需要对更加美观、醒目，需要对表格表格 属性进行设置。属性进行设置。设置表格整体属性设置表格整体属性 嵌套表格是指在另一个表格的单嵌套表格是指在另一个表格的单元格中插入表格，可以其他表格元格中插入表格，可以

7、其他表格一样对嵌套表格进行相应的设置一样对嵌套表格进行相应的设置，嵌套表格最大的优点在于它为，嵌套表格最大的优点在于它为用户提供了最大程度上对网页页用户提供了最大程度上对网页页面布局进行控制的能力面布局进行控制的能力。表格的嵌套表格的嵌套 在网页设计过程中，可以通过多种方法在网页设计过程中，可以通过多种方法来布局版面，利用来布局版面，利用DreamweaverDreamweaver提供的提供的布局视图就可以不使用一般表格模式中布局视图就可以不使用一般表格模式中的插入表格的对话框，直接通过拖动操的插入表格的对话框，直接通过拖动操作就能够在文档中插入表格和单元格，作就能够在文档中插入表格和单元格，

8、简化制作表格的烦琐操作，这样我们就简化制作表格的烦琐操作，这样我们就能够轻松设计出灵活而复杂的页面。能够轻松设计出灵活而复杂的页面。使用其他模式进行页面布局使用其他模式进行页面布局 创建页布局的一种常用的方法是使创建页布局的一种常用的方法是使用用 HTML HTML 表格对元素进行定位。最表格对元素进行定位。最初创建表格是为了显示表格式数据初创建表格是为了显示表格式数据，而不是用于对网页进行布局；使，而不是用于对网页进行布局；使用嵌套表格进行页面布局的过程，用嵌套表格进行页面布局的过程，表格的编辑及操作会变得困难，此表格的编辑及操作会变得困难，此时时Dreamweaver Dreamweave

9、r 提供了提供了“扩展表扩展表格格”模式。模式。使用扩展表格模式编辑表格使用扩展表格模式编辑表格 AP AP 元素（绝对定位元素）就是元素（绝对定位元素）就是 div div 标签的一标签的一种类型。种类型。AP AP 元素可以包含文本、图像或其它元素可以包含文本、图像或其它任何可放置到任何可放置到 HTML HTML 文档正文中的内容。同文档正文中的内容。同表格一样，我们也可以使用表格一样，我们也可以使用 AP AP 元素来设计页元素来设计页面的布局。同时，由于面的布局。同时，由于APAP元素的特有属性，我元素的特有属性，我们可以将们可以将 AP AP 元素放置到其它元素放置到其它 AP A

10、P 元素的前后元素的前后，隐藏某些，隐藏某些 AP AP 元素而显示其它元素而显示其它 AP AP 元素，以元素，以及在屏幕上移动及在屏幕上移动 AP AP 元素等。元素等。使用使用APITAPIT 使用布局版面进行布局的过程，实使用布局版面进行布局的过程，实际也是绘制表格的过程。根据页面际也是绘制表格的过程。根据页面布局的需要，表格可能会比较简单布局的需要，表格可能会比较简单，也可能会非常复杂。利用布局视，也可能会非常复杂。利用布局视图，我们可以像绘图一样，在页面图，我们可以像绘图一样，在页面上任意位置绘制表格和单元格。上任意位置绘制表格和单元格。设置设置AP AP 元素的属性元素的属性 使

11、用布局版面进行布局的过程，实使用布局版面进行布局的过程，实际也是绘制表格的过程。根据页面际也是绘制表格的过程。根据页面布局的需要，表格可能会比较简单布局的需要，表格可能会比较简单，也可能会非常复杂。利用布局视，也可能会非常复杂。利用布局视图，我们可以像绘图一样，在页面图，我们可以像绘图一样，在页面上任意位置绘制表格和单元格。上任意位置绘制表格和单元格。在页面中使用表格进行排版在页面中使用表格进行排版本章小结本章小结v在网页设计中，最常用就是使用表格来定位内在网页设计中，最常用就是使用表格来定位内容，表格是大家在网页的整体布局中使用最广容，表格是大家在网页的整体布局中使用最广的。这一方面是因为表

12、格的信息最大，它用最的。这一方面是因为表格的信息最大，它用最简洁的形式表达繁杂的内容，另一方面它还可简洁的形式表达繁杂的内容，另一方面它还可以用来控制文本和图像在页面上出现的位置，以用来控制文本和图像在页面上出现的位置，把文字和图像规范地按照行或列对齐，使整个把文字和图像规范地按照行或列对齐，使整个页面看上去紧凑而统一。这对于复杂版面的网页面看上去紧凑而统一。这对于复杂版面的网页排版来说，有很大的帮助，对于一个网页设页排版来说，有很大的帮助，对于一个网页设计者来说，如果能够灵活地应用表格，就会让计者来说，如果能够灵活地应用表格，就会让你的网页看上去井井有条、美观大方。你的网页看上去井井有条、美

13、观大方。思考与练习思考与练习一、选择题一、选择题 1. 1.在代码视图中，表格使用的标签是（在代码视图中，表格使用的标签是（ ） A. A.B.B. C. C.D.D. 2. 2.下列视图中不属于下列视图中不属于DreamweaverDreamweaver进行页面布局进行页面布局 的视图（的视图（ ） A. A.标准视图标准视图 B. B.布局视图布局视图 C. C.扩展视图扩展视图 D. D.表格视图表格视图思考与练习思考与练习 3. 3.在在DreamweaverDreamweaver中，若将中，若将* *.txt.txt的文本文件导入的文本文件导入 为表格为表格 ，主要依靠，主要依靠 什么来进行识别（什么来进行识别（ ） A. A.文字字体文字字体 B. B.文字颜色文字颜色 C. C.定界符定界符 D. D.文字大小文字大小 4. 4.插入表格得快捷键是（插入表格得快捷键是（ ） A. Ctrl+Alt+T A. Ctrl+Alt+T B. Alt+T B. Alt+T C. Ctrl+T C. Ctrl+T D. Ctr