网页制作与开发教程 第6章表格.ppt

《网页制作与开发教程 第6章表格.ppt》由会员分享，可在线阅读，更多相关《网页制作与开发教程 第6章表格.ppt（130页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在在Dreamweaver8中创建和操纵表格中创建和操纵表格6.2布局单元格和表格布局单元格和表格6.4实践与练习：表格制作与使用实践与练习：表格制作与使用6.3使用使用HTML建立表格建立表格6.1使用布局单元格和表格使用布局单元格和表格6.5实践与练习：运用实践与练习：运用“布局布局”模式制作网模式制作网页页6.6小结小结 使用表格可以清晰地显示列成表的数据，使用表格可以清晰地显示列成表的数据，例如图例如图6-1所示的是股票行情的数据列表。所示的是股票行情的数据列表。实际上表格的作用不只是显示数据，它还实际上表格的作用不只是显示数据，它还在网页定位上起着重要的作用。在网页定位上起着重要的作

2、用。图图6-1 6-1 使用表格显示数据使用表格显示数据6.1使用使用HTML建立表格建立表格表格的建立将利用表格的建立将利用3个最基本的个最基本的HTML标签来完成，它们分别是标签来完成，它们分别是“”标签、标签、“”标签和标签和“”标签。建立一个标签。建立一个最基本的表格，必须包含一组最基本的表格，必须包含一组“”和和“”标签、一组标签、一组“”和和“”标签以及一组标签以及一组“”和和“”标签，这也是最简单的单元格表标签，这也是最简单的单元格表格。格。“”和和“”标签的作用标签的作用是定义一个表格，是定义一个表格，“”和和“”标标签的作用是定义一行，而签的作用是定义一行，而“”和和“”标签

3、的作用是定义一个单元格。标签的作用是定义一个单元格。6.1.1 一个最简单的表格一个最简单的表格观察例观察例6-1所示的代码。所示的代码。【例例6-1】最简单的表格示例最简单的表格示例单元格单元格单元格单元格1单元格单元格2单元格单元格3单元格单元格4单元格单元格5单元格单元格6图图6-2 6-2 表格表格6.1.2 各种表格样式各种表格样式1表格边框的设置表格边框的设置现在来了解一下现在来了解一下“”标签中各标签中各属性的用法，首先是设置表格边框的样式，属性的用法，首先是设置表格边框的样式，如例如例6-2所示。所示。【例例6-2】表格边框设置示例表格边框设置示例表格的边框属性表格的边框属性图

4、图6-3表格的边框属性表格的边框属性单元格单元格1单元格单元格2图图6-3 6-3 表格的边框属性表格的边框属性属属 性性 名名设设 置置 值值功功 能能BorderBorder数字（以像素为单位）数字（以像素为单位）设置表格的外边框粗细设置表格的外边框粗细CellspacingCellspacing数字（以像素为单位）数字（以像素为单位）设置表格的内边框粗细设置表格的内边框粗细CellpaddingCellpadding数字（以像素为单位）数字（以像素为单位）设置文字到单元格内边框设置文字到单元格内边框的距离的距离表表6-16-1 控制表格边框的属性及其功能控制表格边框的属性及其功能 2表格

5、高宽的控制表格高宽的控制表格的高度和宽度是通过表格的高度和宽度是通过“height”和和“width”两个属性来控制的，如例两个属性来控制的，如例6-3所示。所示。【例例6-3】高度和宽度设置示例高度和宽度设置示例表格的长宽表格的长宽课程课程教室教室语文语文东楼东楼1-13表格相关颜色的设置表格相关颜色的设置下面介绍表格边框和背景颜色的设置，下面介绍表格边框和背景颜色的设置，如例如例6-4所示。所示。【例例6-4】表格边框和背景颜色设置示例表格边框和背景颜色设置示例表格的颜色设置表格的颜色设置课程课程教室教室语文语文东楼东楼1-1英语英语西楼西楼1-1图图6-4 6-4 表格的长宽表格的长宽图

6、图6-5 6-5 表格的颜色设置表格的颜色设置6.2在在Dreamweaver8中创建和操纵表格中创建和操纵表格Dreamweaver8对表格的控制非常灵对表格的控制非常灵活。属性面板可以分别控制整个表格、表活。属性面板可以分别控制整个表格、表格的一行、表格的一列或一个单元格。属格的一行、表格的一列或一个单元格。属性面板的控制对象由选中的对象决定。当性面板的控制对象由选中的对象决定。当把鼠标指针移到表格的四周时，鼠标指针把鼠标指针移到表格的四周时，鼠标指针的形状变为十字形，这时单击鼠标左键，的形状变为十字形，这时单击鼠标左键，表格四周出现一个框，表示选中整个表格，表格四周出现一个框，表示选中整

7、个表格，这时属性面板如图这时属性面板如图6-6所示。所示。图图6-6 6-6 控制整个表格的属性控制整个表格的属性图图6-7 6-7 控制表格一列的属性控制表格一列的属性6.3实践与练习：表格制作与使用实践与练习：表格制作与使用6.3.1 练习练习1：制作：制作“成绩单成绩单”表格表格图图6-8 6-8 “成绩单成绩单”基本表格效果基本表格效果图图6-9 6-9 输入表格标题文字输入表格标题文字图图6-10 6-10 “表格表格”对话框对话框 图图6-11 6-11 设置表格设置表格 图图6-12 6-12 生成的表格生成的表格 图图6-13 6-13 在单元格内输入数据在单元格内输入数据图图

8、6-14 6-14 设置单元格为设置单元格为“居中对齐居中对齐”图图6-15 6-15 “成绩单成绩单”基本表格效果基本表格效果 6.3.2 练习练习2：制作：制作“旅游行程表旅游行程表”立体表格立体表格本例着重练习在本例着重练习在Dreamweaver8中创中创建一个建一个“旅游行程表旅游行程表”，通过对表格边框，通过对表格边框的属性设置来创建一个有立体感的表格。的属性设置来创建一个有立体感的表格。本例最终效果如图本例最终效果如图6-16所示。所示。图图6-16 6-16 “旅游行程表旅游行程表”立体表格效果立体表格效果图图6-17 6-17 在新文档中输入表格标题在新文档中输入表格标题图图

9、6-18 6-18 “表格表格”对话框对话框 图图6-19 6-19 生成的立体表格生成的立体表格 图图6-20 6-20 选中表格选中表格图图6-21 6-21 属性面板属性面板图图6-22 6-22 修改属性修改属性 图图6-23 6-23 生成的立体效果生成的立体效果 图图6-24 6-24 对表格输入数据对表格输入数据 图图6-25 6-25 “旅游行程表旅游行程表”立体表格效果立体表格效果 6.3.3 练习练习3：制作：制作“旅游行程表旅游行程表”双线表格双线表格本例着重练习在本例着重练习在Dreamweaver8中创中创建一个建一个“旅游行程表旅游行程表”，通过对表格的边，通过对表

10、格的边框及边框颜色的设置来创建双线表格。本框及边框颜色的设置来创建双线表格。本例最终效果如图例最终效果如图6-26所示。所示。图图6-26 6-26 “旅游行程表旅游行程表”双线表格效果双线表格效果 图图6-27 6-27 在新文档中输入表格标题在新文档中输入表格标题 图图6-28 6-28 创建的新表格创建的新表格 图图6-29 6-29 选取表格选取表格 图图6-30 6-30 设置属性面板设置属性面板“间距间距”图图6-31 6-31 表格效果表格效果 图图6-32 6-32 设置边框背景色设置边框背景色 图图6-33 6-33 设置后的属性面板设置后的属性面板 图图6-34 6-34

11、双线表格双线表格 图图6-35 6-35 “旅游行程表旅游行程表”双线表格效果双线表格效果 6.3.4 练习练习4：套用设计方案制作：套用设计方案制作“会议议程会议议程表表”本例着重练习在本例着重练习在Dreamweaver8中创中创建一个建一个“会议议程表会议议程表”，通过对表格执行，通过对表格执行“格式化表格格式化表格”命令，套用设计方案。本命令，套用设计方案。本例最终效果如图例最终效果如图6-36所示。所示。图图6-36 6-36 “会议议程表会议议程表”套用设计方案效果套用设计方案效果 图图6-37 6-37 在新文档中输入表格标题在新文档中输入表格标题 图图6-38 6-38 插入表

12、格插入表格图图6-39 6-39 向表格的单元格中输入文本向表格的单元格中输入文本图图6-40 6-40 选取表格选取表格图图6-41 6-41 “格式化表格格式化表格”对话框对话框图图6-42 6-42 套用设计方案套用设计方案图图6-43 6-43 在格式化对话框中设计新方案在格式化对话框中设计新方案图图6-44 6-44 “会议议程表会议议程表”套用设计方案效果套用设计方案效果6.3.5 练习练习5：用表格制作：用表格制作“绿叶乡舟绿叶乡舟”网页网页顶部顶部本例着重练习在本例着重练习在Dreamweaver8中创中创建复杂的表格。主要通过拆分单元格、合建复杂的表格。主要通过拆分单元格、合

13、并单元格、插入行、插入列等操作，制作并单元格、插入行、插入列等操作，制作一个复杂的表格。本例最终效果如图一个复杂的表格。本例最终效果如图6-45所示。所示。图图6-45 6-45 “绿叶乡舟绿叶乡舟”网页顶部效果网页顶部效果图图6-46 6-46 创建的表格创建的表格图图6-47 6-47 设置表格属行设置表格属行图图6-48 6-48 合并单元格合并单元格图图6-49 6-49 插入图像后调节列宽插入图像后调节列宽图图6-50 6-50 拆分单元格拆分单元格图图6-51 6-51 “拆分单元格拆分单元格”对话框对话框图图6-52 6-52 拆分单元格后的效果拆分单元格后的效果图图6-53 6

14、-53 单击单元格背景单击单元格背景URLURL按钮按钮图图6-54 6-54 添加背景图添加背景图图图6-55 6-55 输入输入“绿叶乡舟绿叶乡舟”图图6-56 6-56 “绿叶乡舟绿叶乡舟”网页顶部效果网页顶部效果6.4布局单元格和表格布局单元格和表格前面我们介绍了用表格进行网页布局定前面我们介绍了用表格进行网页布局定位的基本方法，它是通过直接设定表格的位的基本方法，它是通过直接设定表格的参数来实现的。对于简单的情况，这种方参数来实现的。对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其烦琐的工直接设定表格就会变成一

15、件极其烦琐的工作。因此作。因此Dreamweaver8为用户提供了方为用户提供了方便的手段来创建和控制网页页面的布局，便的手段来创建和控制网页页面的布局，而本质仍然是通过表格来实现的。而本质仍然是通过表格来实现的。为了简化使用表格来创建页面布局的过为了简化使用表格来创建页面布局的过程，程，Dreamweaver8提供了布局视图。在提供了布局视图。在布局视图下，用户可以使用表格作为潜在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，例如可以在网页上

16、轻松地画出单元格，然后定制和移动这些单元格到需要的任何然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。要使用布局视可以占满整个浏览器窗口。要使用布局视图，必须首先从图，必须首先从Dreamweaver8的标准视的标准视图模式切换到布局视图模式。图模式切换到布局视图模式。首先观察首先观察Dreamweaver8的的“插入插入”面板中的面板中的“布局布局”页，如图页，如图6-57所示。所示。图图6-57 6-57 “插入插入”面板中的面板中的“布局布局”页页图图6-58 6-58 在布局视图页面中绘制单元格在布局视

17、图页面中绘制单元格6.5使用布局单元格和表格使用布局单元格和表格在布局视图模式下，可以在页面中绘制在布局视图模式下，可以在页面中绘制布局单元格和表格。如果是先创建布局单布局单元格和表格。如果是先创建布局单元格，则会自动创建一个布局表格作为它元格，则会自动创建一个布局表格作为它的容器，布局单元格总是存在于布局表格的容器，布局单元格总是存在于布局表格中。中。6.5.1 绘制布局单元格绘制布局单元格图图6-59 6-59 绘制的表格和单元格绘制的表格和单元格6.5.2 绘制布局表格绘制布局表格图图6-60 6-60 在表格的底部显示宽度数值在表格的底部显示宽度数值6.5.3 围绕已经存在的表格或者单

18、元格绘制新围绕已经存在的表格或者单元格绘制新表格表格具体的操作步骤如下。具体的操作步骤如下。（1）在布局视图模式下，在）在布局视图模式下，在“插入插入”面板面板的的“布局布局”页中单击绘制布局表格按钮，页中单击绘制布局表格按钮，这样光标就会变成十字的形状（）。这样光标就会变成十字的形状（）。（2）单击并围绕已存在的单元格和表格拖）单击并围绕已存在的单元格和表格拖动鼠标。这样绘制的表格会将围绕的单元动鼠标。这样绘制的表格会将围绕的单元格和表格都包含进去，成为这个新创建的格和表格都包含进去，成为这个新创建的布局表格的单元格或者下一级布局表格。布局表格的单元格或者下一级布局表格。6.5.4 绘制嵌套

19、表格绘制嵌套表格图图6-61 6-61 嵌套表格嵌套表格6.5.5 为布局单元格添加内容为布局单元格添加内容图图6-62 6-62 在表格单元格中添加文本在表格单元格中添加文本6.5.6 移动或者重新设置布局单元格和表格的移动或者重新设置布局单元格和表格的大小大小在布局中的每个单元格和表格都可以被在布局中的每个单元格和表格都可以被移动或者重新设置大小，这样就可以方便移动或者重新设置大小，这样就可以方便地调整页面的布局了。地调整页面的布局了。1重新设置单元格的大小重新设置单元格的大小图图6-63 6-63 出现把柄后的单元格出现把柄后的单元格2移动单元格移动单元格3调整表格大小调整表格大小4移动

20、一个布局表格移动一个布局表格6.5.7 设置布局宽度设置布局宽度在布局视图中可以有两种设定宽度的方在布局视图中可以有两种设定宽度的方式：固定宽度和自动伸展。在列底部区域式：固定宽度和自动伸展。在列底部区域显示了宽度数值。固定宽度是一个指定的显示了宽度数值。固定宽度是一个指定的十进制数值，例如十进制数值，例如300（像素）。自动伸展（像素）。自动伸展设置了宽度可以根据窗口的宽度而自动调设置了宽度可以根据窗口的宽度而自动调整。使用了自动伸展命令，布局将总是能整。使用了自动伸展命令，布局将总是能够填满浏览器窗口。够填满浏览器窗口。图图6-64 6-64 设置列的布局宽度属性设置列的布局宽度属性1设置

21、自动伸展宽度设置自动伸展宽度设置自动伸展宽度有两种方法。设置自动伸展宽度有两种方法。（1）单击要设为自动伸展宽度的列底部的）单击要设为自动伸展宽度的列底部的数字（也就是显示了该列宽度的数值），数字（也就是显示了该列宽度的数值），然后在出现的（允许自动伸展命令）菜单然后在出现的（允许自动伸展命令）菜单（以后我们把这个菜单称为该列的底部菜（以后我们把这个菜单称为该列的底部菜单）中选择单）中选择“列设置为自动伸展列设置为自动伸展”命令，命令，如图如图6-65所示。所示。图图6-65 6-65 选择允许列自动伸展命令选择允许列自动伸展命令（2）选择该列，然后在属性面板中选择）选择该列，然后在属性面板中

22、选择“自动伸展自动伸展”选项。选项。2设置固定宽度列设置固定宽度列对于刚刚创建的布局表格和布局单元格对于刚刚创建的布局表格和布局单元格而言，表格中的列都是根据初始条件设置而言，表格中的列都是根据初始条件设置的宽度，例如用鼠标拖曳出的宽度。的宽度，例如用鼠标拖曳出的宽度。对于已经被设为自动伸展的列来说，在对于已经被设为自动伸展的列来说，在该列的底部菜单中选择该列的底部菜单中选择“列设置为固定宽列设置为固定宽度度”命令，就可以把该列转换为固定宽度命令，就可以把该列转换为固定宽度的列。这时在该列的底部，可以看到在宽的列。这时在该列的底部，可以看到在宽度数值两边是绿色双线。度数值两边是绿色双线。6.6

23、实践与练习：运用实践与练习：运用“布局布局”模式制模式制作网页作网页本例通过使用本例通过使用“布局表格布局表格”和和“布局单布局单元格元格”制作网页，最终的页面效果如图制作网页，最终的页面效果如图6-66所示。所示。图图6-66 6-66 最终效果最终效果1设计页面设计页面2绘制表格绘制表格3插入图像插入图像 图图6-67 6-67 创建页面结构创建页面结构 图图6-68 6-68 绘制网页绘制网页图图6-69 6-69 分别存储图像分别存储图像图图6-70 6-70 选择选择“布局布局”命令命令图图6-71 6-71 启用启用“布局模式布局模式”图图6-72 6-72 启用启用“绘制单元格绘

24、制单元格”模式模式图图6-73 6-73 绘制单元格绘制单元格 图图6-74 6-74 完成第一个单元格的绘制完成第一个单元格的绘制 图图6-75 6-75 设置单元格的宽、高设置单元格的宽、高图图6-76 6-76 绘制第二个单元格绘制第二个单元格图图6-77 6-77 修改单元格的尺寸修改单元格的尺寸图图6-78 6-78 完成表格的绘制完成表格的绘制 图图6-79 6-79 标准模式下的表格标准模式下的表格图图6-80 6-80 插入图像插入图像图图6-81 6-81 插入对应图像插入对应图像图图6-82 6-82 选择图像的插入点选择图像的插入点图图6-83 6-83 选择图像路径选择

25、图像路径图图6-84 6-84 插入背景图像插入背景图像图图6-85 6-85 完成背景图像的插入完成背景图像的插入图图6-86 6-86 为单元格填充背景颜色为单元格填充背景颜色图图6-87 6-87 添加文字信息添加文字信息图图6-88 6-88 最后效果最后效果小小结结本章的内容是介绍如何在网页中加入表本章的内容是介绍如何在网页中加入表格，并且对表格进行设置，使它能够以各格，并且对表格进行设置，使它能够以各种丰富的样式展现出来。表格最重要的三种丰富的样式展现出来。表格最重要的三个标签分别是个标签分别是“”、“和和”，分别用于定义表格、表格中的行和，分别用于定义表格、表格中的行和表格单元格。此外，还有与之相关的一些表格单元格。此外，还有与之相关的一些属性需要记清，比如边框、边距等参数的属性需要记清，比如边框、边距等参数的设置。表格在网页中的作用除了显示数据设置。表格在网页中的作用除了显示数据以外，还经常被用作网页定位和布局的工以外，还经常被用作网页定位和布局的工具。具。