第4章 网页表格的处理 通过本章学习，应该掌握以下内容： 利用FrontPage 2002创建表格的四种方法 编辑表格的方法

Presentation on theme: "第4章 网页表格的处理 通过本章学习，应该掌握以下内容： 利用FrontPage 2002创建表格的四种方法 编辑表格的方法"— Presentation transcript:

1 第4章 网页表格的处理 通过本章学习，应该掌握以下内容： 利用FrontPage 2002创建表格的四种方法 编辑表格的方法
第4章 网页表格的处理 通过本章学习，应该掌握以下内容： 利用FrontPage 2002创建表格的四种方法 编辑表格的方法 设置表格的属性的方法 用表格设计页面布局 利用HTML和Dreamweaver 4.0创建表格的方法

2 4.1 利用FrontPage 创建并编辑表格 1．使用菜单命令创建表格 4.1.1 创建表格
创建表格 表格以行和列的形式来组织信息，具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的记录或总结工具，比如个人简历、产品信息、业务报表甚至家庭理财都能用到表格。 FrontPage 2002提供了强大的制表功能，使得在制作网页的过程中插入表格的操作显得简便、快捷。 在FrontPage 2002中，创建表格有以下4种方法。 1．使用菜单命令创建表格 如果用户希望准确地设置要创建的表格的行、列数，可以通过执行菜单命令创建所需的表格。使用这种方法，可以同时设置表格所有的属性，如行和列的数目、边框宽度等。 ① 选择“表格”| “插入”| “表格”命令，打开图4.1所示的“插入表格”对话框； ② 输入行数、列数，设置表格的对齐方式、边框的粗细、单元格边距和间距，单击“确定”按钮，即可得到相应的表格。

3 2．使用命令按钮创建表格 3．绘制表格 4．将文本转换成为表格
在编辑网页时，使用“常用”工具栏中的“插入表格”按钮，可以快速地在网页中插入一个表格。插入表格时用户可以自由选择表格所包含的行数和列数. 3．绘制表格 利用前面两种方法可以建立“n乘m”单元数的表格，单元格大小会自动平均分配。如果需要的表格比较简单，则可以手动绘制表格。 手动绘制表格的操作步骤如下： ① 选择“视图”|“工具栏”|“表格”命令，打开表格对话框； ② 单击“手绘表格”按钮，在编辑区按下鼠标左键并拖动，即可划出表格边框，再在边框内添加线条即可画出需要的表格。 如果有画错的线条可以用表格中的“擦除”工具擦除。 4．将文本转换成为表格 如果有现成的文本，可以把文本转换成为表格。

4 4.1.2 表格的编辑 1．修改表格 （1）修改表格大小 （2）合并单元格
表格的编辑 1．修改表格 应用菜单或命令按钮创建后的表格，有些是需要经过修改才能应用的。修改表格主要包括修改表格的大小、合并单元格、拆分单元格等操作。 （1）修改表格大小 在FrontPage 2002中，修改表格的大小有以下两种方法。 通过鼠标拖拽法可以粗略地调整表格的大小。 通过“表格属性”对话框可以精确地调整表格的大小。 （2）合并单元格 在FrontPage 2002中合并单元格的方法有以下三种： 先选择要合并的单元格，然后执行“表格”|“合并单元格”命令即可。 选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的快捷菜单中选择“合并单元格”命令。 选择要合并的单元格，单击“表格”工具栏上的“合并单元格”按钮。

5 （3）拆分单元格 拆分单元格与合并单元格是两个逆操作。拆分单元格就是将一个单元格拆分为多个单元格。在FrontPage 2002中拆分单元格的方法有以下几种。 将光标放在要拆分的单元格内，执行“表格”|“拆分单元格”命令，弹出“拆分单元格”对话框，如图4.9所示。在该对话框中选择“拆分为列”或“拆分为行”，单击“确定”按钮。 将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜单中选择“拆分单元格”命令。 将光标放在要拆分的单元格内，单击“表格”工具栏上的“拆分单元格”按钮。

6 2．在表格中添加文字和图片 （1）在表格中添加文字 （2）在表格中插入图片 3．删除表格 （1）删除单元格
创建一个表格以后，就可以在表格中添加相应的内容了，在表格中添加的内容有文字与图片两种形式。 （1）在表格中添加文字 在创建好的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。 （2）在表格中插入图片 ① 选中要插入图片的单元格，选择“插入”| “图片”| “来自文件”（根据需要选择图片的来源）命令，打开“图片”对话框； ② 在对话框中选择图片，选中图片文件之后，单击“插入”按钮，则图片及插入到相应的单元格里。调整图片大小及位置。 3．删除表格 （1）删除单元格 在FrontPage 2002中如果要删除某个单元格，可以通过以下方法： 选择要删除的单元格，执行“表格”|“删除单元格”命令。 选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。

7 （2）删除列或行 （3）删除整个表格 在FrontPage 2002中如果要删除某列或某行，可以采用以下方法：
选择要删除的列或行，执行“表格”|“删除单元格”命令即可。 选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。 （3）删除整个表格 如果要删除某个表格，只需选中此表格中的所有单元格，然后单击右键并从弹出的快捷菜单中选择“删除单元格”命令即可。删除整个表格的操作方法如下： 注意：如果在删除表格、单元格、行或列时，使用Delete键删除，则只删除该表格、单元格、行或列中的文本，而不是删除表格。

8 4.1.3 设置表格的属性 1．表格的布局 （1）表格的对齐方式 （2）表格的浮动方式 （3）单元格的边距与间距
设置表格的属性 将光标置于表格中，然后单击右键并从弹出的快捷菜单中选择“表格属性”命令，在打开的“表格属性”对话框中进行表格属性设置。 1．表格的布局 （1）表格的对齐方式 FrontPage 2002中提供了4种对齐方式：默认、左对齐、右对齐和居中。单击“表格属性”对话框中的“对齐方式”下拉列表框，可从中选择所需的对齐方式。 （2）表格的浮动方式 此功能有点像图片的环绕功能。创建一个表格后，表格的两侧是不能输入任何文字的。 如果进行了浮动设置，就可以获得与图片环绕差不多的效果了。FrontPage 2002中提供了3种浮动方式：默认、左对齐和右对齐。 （3）单元格的边距与间距 如果想设置表格线与表格内容间的距离或两单元格间的距离，可以通过单元格边距与单元格间距两个选项来设置。

9 为表格添加背景也要应用“表格属性”对话框。表格背景可分为两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景图片。
2．为表格添加背景 为表格添加背景也要应用“表格属性”对话框。表格背景可分为两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景图片。 （1）为表格添加背景颜色 选中表格或单元格后，单击“表格属性”对话框中的“颜色”选项右侧的向下箭头，从弹出的颜色面板中选择所需的背景颜色，则此颜色就会显示在表格的背景层中。 （2）为表格添加背景图片 选中表格或单元格后，启用“表格属性”或“单元格属性”对话框中的“使用背景图片”复选框，然后选择一个图片作为表格的背景，可为表格添加背景图片。 3．为表格添加边框 在FrontPage中如果想要改变表格的边框，可以采用以下方法： 选择要设置边框的表格，执行“格式”| “边框和底纹”命令。 在要设置边框的表格中单击鼠标右键，从弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框，在“边框”选项组中进行相关设置。

10 4.1.4使用表格设计页面布局 在网页设计中表格还有一个重要的作用，就是设计页面布局。 一个空白网页布置起来比较困难，尤其是一些复杂的页面。这时可以利用表格将网页分成若干个单元格，每个单元格对应网页中的一个部分。然后，对每一部分分别进行设计和制作，这样就可以使复杂的网页设计简化，而且所设计的网页清晰、有条理性。 另外，在很多网页上都有各种细线的布局效果，使得页面简洁明快、条理清楚。这些细线要么是用图像的方式生成，要么是利用表格的各种特性制作而成。使用表格实现这些细线可以使页面文件更小，下载更快，因此更为实用。细线效果大致可以分为两类，一类是表格框线，另一类是各种横竖分隔线。 用表格布置页面时，首先要规划页面的布置，然后利用表格的平铺和嵌套，将网页中的各元素定位在各自的位置上。由于浏览器在下载网页时，先下载整个表格，然后再下载表格中的内容。所以在用表格布置页面时，不能将整个网页的内容都放在一个大表格中，以免影响网页的下在速度。

11 4.2 其他处理网页表格的方法 4.2.1 利用HTML处理网页表格 1．表格的基本构成 （1）TABLE （2）CAPTION （3）TR
4.2 其他处理网页表格的方法 利用HTML处理网页表格 1．表格的基本构成 通常在HTML中创建一个普通的表格应包括以下标记符： （1）TABLE TABLE标记符用于定义整个表格，表格内的所有内容都应该位于<TABLE>和<／TABLE>之间。 （2）CAPTION 如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在<CAPTION>和<／CAPTION>之间。 （3）TR TR标记符用于定义表格的行，对于每一个表格行，都对应一个TR标记符。TR标记符的结束标记符可以省略。

12 （4）TD和TH 3．表格的编辑及属性设置 （1）合并单元格 （2）边框与分隔线 （3）控制单元格空白
在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。TD与TH的功能和用法几乎完全相同（可以任意混合使用，但效果略有不同），唯一不同之处在于TD表示普通表格数据，而TH表示表格的行列标题数据（也就是通常所说的表头）。TD和TH的结束标记符都可以省略，并且可以不包括任何内容 3．表格的编辑及属性设置 （1）合并单元格 在<TD>和<TH>标记内使用rowspan属性可以进行行合并，rowspan的取值表示垂直方向上合并的行数；使用colspan属性可以进行列合并， colspan的取值表示水平方向上的合并的列数。 （2）边框与分隔线 在TABLE标记内使用frame、rules和border属性可以设置表格的边框和单元格分隔线。 （3）控制单元格空白 在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，

13 （4）表格的对齐 （5）控制表格和单元格大小 （6）设置表格和单元格的背景 表格的对齐包括页面对齐和内容对齐。 ① 表格的页面对齐
表格在页面中的对齐与其他页面内容一样，可以直接在TABLE标记符中使用align属性。另外，也可以用DIV标记符的align属性设置表格的对齐。 ② 表格的内容对齐 表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。 设置水平对齐的方法是：在标记符<TR>、<TH>、<TD>内使用align属性，其常用的取值可以是：center、left、right、justify . 设置表格数据在垂直方向的对齐应在TR、TD或TH标记符中使用valign属性，valign属性的常用取值包括：top 、bottom、middle。 （5）控制表格和单元格大小 可以使用标记符的width和height属性设置表格和单元格大小。 （6）设置表格和单元格的背景 在TABLE、TR或TD标记符内使用bgcolor属性设置背景颜色；使用background属性设置背景图案。

14 4.2.2 利用Dreamweaver 4.0处理网页表格 1．创建表格 （1）创建新表格
利用Dreamweaver 4.0创建新表格时，首先选中对象面板上“View”栏目下“Standard View”（标准视图）按钮，然后可以通过下列四种方式中的任意一种： ① 将对象面板调整到“Common”类上，单击“Insert Table”（插入表格）按钮。 ② 通过主窗口的菜单“Insert”|“Table”命令。 ③ 使用快捷组合键“Ctrl+Alt+T”。 ④ 将对象面板调整到“Common”类上，拖动“Insert Table”按钮到主窗口的工作区中。

15 （2）选择表格 选择表格可分为选择整个表格和选择表格中的单元格。 ① 如果要选择整个表格，则可进行如下的操作之一：
将光标置于表格中的某个单元格中，选择“Modify”|“Table”|“Select Table”命令。 将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。 将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“Select Table”命令。 将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。 单击表格的边线。 ② 选择单个单元格的方法有以下几种： 将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。 将光标置于所要选择的单元格中，向右拖动鼠标。 将光标置于所要选择的单元格中，选择“Edit”|“Select All”命令。 按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。

16 ③ 选择多个单元格的方法有以下几种： 按住Ctrl键，单击所要选择的所有单元格。 将光标置于单元格中，拖动鼠标，选择多个单元格。 如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。 如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。 ④ 选择的全部单元格的方法有以下几种： 将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。 将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。 将光标置于第1行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。 将光标置于第1列的上边缘，当光标变成图标时，向右拖动鼠标至最后一列。

17 （3）添加／删除行列 ① 在现有的表格中插入单元行，可以选择以下的操作之一：
将光标移到要插入单元行的下一行，选择“Modify”|“Table”|“Insert Row”命令。 将光标移到要插入单元行的下一行，按组合键“Ctrl+M”。 将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“Table”|“Insert Row”命令。 ② 在现有的表格中插入单元列，可以选择以上的操作之一： 将光标移到在插入单元列的右边一列，选择“Modify”|“Table”|“Insert Column”命令。 将光标移到要插入单元列的右边一列，按组合键“Ctrl+Shift+A”。 将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“Table”|“Insert Column”命令。 ③ 如果想在现有的表格中添加多行或多列，首先将光标移到要插r入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择“Table”|“Insert Rows or Columns”命令，弹出 “Insert Rows or Columns”对话框。在此对话框中进行相关的设置，然后单击“OK”按钮，设置的多列或多行将插入到页面中。

18 ④ 删除整行／整列，可以采用下列办法之一：
先选择欲删除的整行或整列，直接按Del键，即可删除。 先将光标移到要删除的行或列中，选择“Modify”|“Table”|“Delete Row”或“Delete Column”命令。 将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“Table”|“Delete Row”或“Delete Column”命令。 2．编辑表格 （1）设置表格高度 在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，则必须通过表格属性面板来确定。 （2）合并／拆分单元格 对表格中的单元格进行合并／拆分，既可以通过菜单命令来实现，也可以通过单元格属性面板（单击任意单元格，属性面板将会自动切换）上的快捷按钮来完成。 （3）设置单元格的宽度及高度 在单元格属性面板上可以改变单元格默认的宽度和高度。

19 3．表格属性的设置 （1）设置表格的边框颜色 （2）设置表格的背景 4．用表格进行页面布局
设置表格的边框颜色时，必须指定表格的边框线的宽度不为0。要为表格的边框指定颜色，首先选择表格，单击属性面板上“Brdr Color”的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为表格的边框添加颜色。 （2）设置表格的背景 表格的背景与网页背景一样，即可以设定为单一的颜色，也可以用图片作为表格的背景。要将表格背景设为单一的颜色，首先选择整个表格，再单击属性面板上“Bg Color”后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面板上的“Bg Image”文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。 4．用表格进行页面布局 Dreamweaver 4.0新增加的网页排版功能，可以很方便的实现网页的排版。