DW-07使用表格

42
教育学院
网站建设
第7章使用表格
4、统一列宽
调整表格中的各列宽度后，可以使再其宽度 相同。
方法：单击某一列，在其列宽度菜单中，选 择“清除列宽”。
2019年11月22日星期五
43
教育学院
网站建设
第7章使用表格
三、增加行和列
1、增加行
方法：右击某行→“表格”—“插入行”/“插入行 或列”；
“修改”—“表格”—“插入行”/“插入行或列” 命令。
2019年11月22日星期五
19
教育学院
网站建设
第7章使用表格
辅助中的标题
2019年11月22日星期五
20
教育学院
网站建设
第7章使用表格
表格宽度菜单：单击表格中的任意位置，在表格的 上方或者下方显示宽度和宽度分布。
单击其中的小三角可以对其进行相应的设置。 也可以在“查看”中“可视化助理”的“表格宽度” 中设置显示或者隐藏，默认显示。
边框：用于设置表格外边框的宽度。 类：用于设置表格的CSS样式。 单击 按钮，（宽度橡皮擦）可以取消单元格的 宽度设置，使其宽度随单元格的内容自动缩放。 单击 按钮，（高度橡皮擦）可以取消单元格的 高度设置，使其高度随单元格的内容自动调整。 单击 按钮，可以将表格宽度转换为像素。 单击 按钮，可以将表格宽度转换为百分比。
“修改”—“表格”—“插入列”/“插入行或列” 命令。
“插入”—“表格对象”—“在左边插入列”/“在 右边插入列”命令。
选中表格，在属性面板中“列”数中增加数值。
2019年11月22日星期五
46
教育学院
网站建设
第7章使用表格
四、删除表格元素
1、删除单元格内的对象
方法：选中一个或者多个单元格，按Delete，或者 “编辑”—“清除”。
二、设置单元格内容的对齐方式
水平：设置单元格内容在水平方向上的对齐方式， 主要有：默认、左、中、右。
垂直：设置单元格内容在垂直方向上的对齐方式， 主要有：默认、顶端、剧中、底部、基线。
2019年11月22日星期五
38
教育学院
网站建设
第7章使用表格
三、设置单元格背景 选取单元格，在属性面板中的“背景”中添 加背景图片或在“背景颜色”中选取一种颜色 或利用16进制数指定一种颜色；
2019年11月22日星期五
40
教育学院
网站建设
第7章使用表格
二、清除和均化表格大小
1、清除所有高度
方法：选中表格，选择表格宽度 菜单中的“清除所有高度”。或者 “修改”—“表格”—“清除单元 格高度”。
使表格高度收缩至最小程度，即 不能再小了。
2019年11月22日星期五
41
教育学院
网站建设
第7章使用表格
第7章使用表格
一、版面布局概述
一般情 况 下一个 网 页主要 包 括： LOGO （标志 ） ， Banner（横幅广告条），导航栏，导航菜单，网页正 文，版权声明。
在设计页面布局时，也正是围绕着这些元素展开的。 在页面制作过程中要确定一个页面的布局（版式）， 应该综合考虑如何安置页面中的各种内容，比如标题 文字、导航栏、图片、动画、超链接等。
2、清除所有宽度
方法：选中表格，选择表格宽度菜单中的“清除所 有宽度”。或者“修改”—“表格”—“清除单元格 宽度”。
使表格宽度收缩至最小程度，即不能再小了。
3、统一所有宽度
宽度不一致现象：代码设置与可视化属性中设置的 不一致。
方法：选中表格，选择表格宽度菜单中的“使所有 宽度一致”
2019年11月22日星期五
从某处按下左键，拖动出一个多行多列的矩形区域。 插入点置于某单元格中时，在“标签选择器” 单击 <tr>，则选中插入点所在的行。 单击表格宽度菜单中的小三角，选“选择列”
2019年11月22日星期五
27
教育学院
网站建设
第7章使用表格
三、选择单元格
1、选择单个单元格
Ctrl+单击 在单元格中单击，按下Ctrl+A
网站建设
第7章使用表格
在对话框中进行选项设置。 行、列数：用于设置插入表格的行数和列数。 表格宽度：用于设置表格的宽度，选择“像素”为 单位时，表格的宽度为固定像素的宽度； 选择“百分比”为单位时，表格的宽度与其上一级 窗口的宽度将保持相同的百分比。 边框粗细：用于设置表格的边框宽度。 单元格边距：(属性面板是填充)用于设置表格中单 元格中的内容与单元格边框的距离。
2、选择相邻的单元格
单击首，Shift+单击尾
3、选择不相邻的单元格
Ctrl+逐个单击
2019年11月22日星期五
28
教育学院
网站建设
第7章使用表格
4、用“标签选择器”选择单元格
插入点置于某单元格中时，在“标签选择器”中单 击<td>，则选中插入点所在单元格。
网页中插入的表格 状态栏中的“标签选择器”
2019年11月22日星期五
34
教育学院
网站建设
第7章使用表格
2019年11月22日星期五
教育学院
网站建设
第7章使用表格
第五节 设置行、列和单元格的属性
单击某单元格，在属性面板中可以设置其属性，上 半部分为单元格内文本的属性，下半部分为单元格的 属性。
2019年11月22日星期五
的行中单击，选择“修改”—“表 格”—“删除行”命令；
在欲删除的行中右击，选择“删除行”命令；
选中表格，在属性面板中“行”数中减少数值，则
从表格底部删除相应的行数。
2019年11月22日星期五
2019年11月22日星期五
18
教育学院
网站建设
第7章使用表格
单元格间距：用于设置表格中单元格之间的间距。 页眉：把表格的第一行或第一列作为标题行或标题 列，作为标题行或标题列的行或列的内容将以粗体的 形式显示。 分别为无、左、顶部、两者。 即确定是否启用表格的行列标题。在左侧为行标题， 在顶部为列标题。 辅助功能中的标题：用于设置表格标题，该标题在 表格的外侧。(选中后，可知，也作为表格的一部分) 摘要：用于描述表格的相关信息。
第7章使用表格
一、拆分和合并单元格
拆分单元格的操作是将一个单元格拆分为几个连续 的单元格；
拆分方法：选取一个单元格，单击属性面板中的 “拆分单元格为行或列” 按钮→填写拆分行（列） 的数目。
2019年11月22日星期五
37
教育学院
网站建设
第7章使用表格
合并是将多个连续的单元格合并成一个； 合并方法：选取待合并的多个连续的单元格，单击 属性面板中的“合并所选单元格” 按钮。
网站建设
第7章使用表格
第二节 插入表格
一、创建表格
1、插入表格
在文档窗口的设计视图中，将插入点置于要插入表 格的位置，单击“插入”菜单中的“表格”或单击插 入栏的“常用”中的“插入表格”按钮 ，或者 Ctrl+Alt+T。
设置行列数以及边框等。
2019年11月22日星期五
16
教育学院
网站建设
第7章使用表格
4．“川”字型
网站建设
第7章使用表格
5．其他类型
(1) 封面型 (2) Flash 型 (3) 框架型
网站建设
第7章使用表格
6、网页页面的构成
1）网页尺寸 根据屏幕分辨率的大小设计网页的宽度。 一般如果屏幕分辨率为800*600 那么设计网页的尺寸为780*428，
如果屏幕分辨率为1024*768，那么设计页面尺寸为980*600。 2）页头（页眉） 通常放置logo（网站标志）和banner（广告条） 3）页脚 放置版权信息、联系电话、网站介绍、备案信息等等。 4）导航栏 各版块栏目的超链接。
2019年11月22日星期五
31
教育学院
网站建设
第7章使用表格
2019年11月22日星期五
教育学院
网站建设
第7章使用表格
border(边框的厚度)
cellpadding (单元格填充)
内容
内容
内容
cellspacing (单元格间距)
内容
2019年11月22日星期五
33
教育学院
网站建设
第7章使用表格
“修改”—“表格”—“选定表格”；
右击，选“表格”—“选定表格”
表格内任意单击，在“标签选择器”中单击<table>
其它方法不常用略。
2019年11月22日星期五
26
教育学院
网站建设
第7章使用表格
二、选择表格的行或列
鼠标指针指向行左边缘或者列的顶边，出现实心箭 头时单击，或者单击并拖动可选择多行或者多列。
主讲：韩维良
2019年11月
第7章使用表格
第一节 使用表格对页面进行布局
由于网页的主要组成元素是文字、图形或其它一些 可视化元素（如 Flash动画、图像或文本段落），为 了不使它们从一个边缘流向另一个边缘，必须将它们 插入到一个“容器”中，这个“容器”就是表格。
表格能将页面划分为任意矩形区域，除了可以使大 量的信息资料有组织地排列起来以便管理外，还可以 用于网页布局，将网页中的元素放到表格的单元格中 进行页面排版，是最常用的一种控制页面整体布局的 工具。
2019年11月22日星期五
39
教育学院
网站建设
第7章使用表格
第六节 表格基本操作
一、调整表格大小
1、调整列宽：拖动列右边框。 2、调整行高：拖动行下边框。 3、调整表宽：选中表格，拖动右侧尺寸控点。 4、调整表高：选中表格，拖动底边尺寸控点。 5、同时调整表宽表高：选中表格，拖动右下角尺寸 控点。
2019年11月22日星期五
23
教育学院
网站建设
第7章使用表格
2、表格的html标签
<table width="300" border="1">
<tr> <td>a1</td> <td>b1</td>
</tr>
<tr> <td>a2</td> <td>b2</td>
</tr>
</table>
2019年11月22日星期五
24
教育学院
网站建设
第7章使用表格
<table> </table> 表格标记
<tr> </tr>
行标记
<td> </td>
单元格标记
2019年11月22日星期五
25
教育学院
网站建设
第7章使用表格
第三节 选择表格
一、选择表格
鼠标指针指向表格左上角，当鼠标指针右下角出现 表格图形时，单击。
将光标指向表格边框，单击鼠标，可以选择整个表 格。
“插入”—“表格对象”—“在上面插入行”/“在 下面插入行”命令。
选中表格，在属性面板中“行”数中增加数值。
2019年11月22日星期五
44
教育学院
网站建设
第7章使用表格
2019年11月22日星期五
45
教育学院
网站建设
第7章使用表格
2、增加列
方法：右击某列→“表格”—“插入列”/“插入行 或列”；
2019年11月22日星期五
29
教育学院
网站建设
第7章使用表格
第四节 设置表格的属性
选择要设置属性的表格区域(可以是整个表格、一行 或一列或一个单元格)后，在属性面板中设置。
2019年11月22日星期五
30
教育学院
网站建设
第7章使用表格
表格：用于设置表格的名称。 行和列：用于设置表格的行数和列数。 宽：用于设置表格的宽度，单位为“百分比”或 “像素”。 填充：用于设置单元格中的内容与边框之间的距离。 （单位：象素）(内边距)，在表格插入对话框称为单 元格边距。 间距：用于设置单元格之间的距离，（单位：象素） 对齐：用于设置表格在网页中的对齐方式。
2019年11月22日星期五
5
教育学院
网站建设
第7章使用表格
做一个网页，尤其是主页，先要规划好版面布局 （页面的条块分割）。
如同一个容器，规划好位置。 几种常用的版式（分栏结构）：二分栏，三分栏的 结构等。
2019年11月22日星期五
6
教育学院
网站建设
第7章使用表格
2019年11月22日星期五
7
教育学院
网站建设
第7章使用表格
2019年11月22日星期五
8
教育学院
网站建设
第7章使用表格
常见的网页布局类型：有“国”字型、“匡”字型、 “三”字型、“川”字型等。
网站建设
第7章使用表格
1．“国”字型
网站建设
第7章使用表格
2．“匡”字型
网站建设
第7章使用表格
3．“三”字型
网站建设
第7章使用表格
2019年11月22日星期五
3
教育学院
网站建设
第7章使用表格
实际上，在 Internet 上的绝大多数网页都是用表 格辅助布局的。
借助表格实现网页的精细排版。可以说表格的灵活 应用是网页制作中最为重要的一个技巧，表格运用得 好坏，直接反映了网页设计师的水平。
2019年11月22日星期五
4
教育学院
网站建设
2019年11月22日星期五
21
教育学院
网站建设
第7章使用表格
实践：实现如下的操作。
2019年11月22日星期五
22
教育学院
网站建设
第7章使用表格
在网页中插入表格后，可以向单元格中直接输入 文本或插入其它的对象，如图像、动画等，还可以向 表格中插入嵌套表格。
另外,表格内容的排版等。 当然，用户也可以从外部导入其它软件编辑的表格， 如Excel电子表格等。