计算机网络与网页制作 Chapter 13 ：使用表格 复旦大学计算机学院 肖川 1.

Presentation on theme: "计算机网络与网页制作 Chapter 13 ：使用表格 复旦大学计算机学院 肖川 1."— Presentation transcript:

1 计算机网络与网页制作 Chapter 13 ：使用表格 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

2 目标  新建和修改表格  用 CSS 设定表格样式  导入数据  对表格数据排序 2

3 效果 3

4 1. 导入表格数据  查看数据：选中文件，快捷菜单 打开方式 >>Dreamweaver 4 在 Dreamweaver 中查看 Excel 数据

5 导入表格数据  在页面内定位光标，菜单 文件 >> 导入 >> 表格式数据 5

6 2. 选中表格元素  选择表格的行或列：单击行首或列首。如 果按住【 Ctrl 】键则能同时选中多行或多列。 6

7 选中整个表格  或者菜单 修改 >> 表格 >> 选择表格 7

8 选中一个或多个单元格  不论选择一个还是多个单元格，按住【 Ctrl 】 键再单击鼠标。 8

9 3. 修改表格大小  先选中表格，之后在 “ 属性 ” 面板内修改 “ 宽 ” 值。  可以是绝对的像素值  也可以是占浏览器窗口的百分比  或者 手工调整表格的宽度和高度。 9

10 调整某一行的高度 ( 或某一列的宽度 ) 10

11 设定某一行的高度 ( 或某一列的宽度 )  选中行或列内的某一个单元格，面板 属性 >>HTML 11

12 4. 修改表格结构  添加行或列：选中某个单元格作为插入行 或列的参考位置，再菜单修改 >> 表格 >> 插 入行或列。 12

13 删除行或列  选中某一行或某一列，再菜单 修改 >> 表格 >> 删除行 ( 删除列 ) 13

14 合并垂直 ( 或水平 ) 相邻单元格  先选中垂直 ( 或水平 ) 相邻的多个单元格，再 菜单 修改 >> 表格 >> 合并单元格 14

15 拆分单元格  先选中某一个单元格，再菜单 修改 >> 表格 >> 拆分单元格，把单元格拆分成若干行 ( 或 若干列 ) 。 15

16 设为标题行或标题单元格  把一行设为标题行：选中这一行，面板 属性 >>HTML>> 标题复选框 ( 选中 )  把一个单元格设为标题：单击这个单元格，面板 属性 >>HTML>> 标题复选框 ( 选中 ) 16 表格的 标签

17 5. 新建表格  先定位光标，再菜单 插入 >> 表格 17 表格的 标签， 显示于表格之上并居中

18 输入表格数据  用方向键移动光标。 18

19 6. 用 CSS 设定表格样式  新建 CSS 规则：在 “CSS 样式 ” 面板内新建 “tablestyle” 类 CSS 规则，保存于外部文件 mystyles.css 中。 19

20 设置 CSS 规则的属性值 20 此项不能在规则定义对话 框内设置。作用是去除相 邻单元格之间的空隙。 表格的 “ 边框 ” 宽度

21 把 CSS 规则作用于表格  选中表格，面板 属性 >>“ 类 ” 下拉列表 21 设计视图

22 7. 设定表格的高级 CSS 样式  在 “CSS 样式 ” 面板内新建 CSS 规则。 22 复合内容 CSS 规则将自动 作用于页面内对应的元素。

23 设置 CSS 规则的属性值 23

24 效果 24 浏览器预览

25 8. 用 CSS 控制单元格的对齐、填充及边框  属性面板内 “ 填充 ” 项：单元格内部的空间  单元格边框与其内容之间的空白间隔，用像素衡量， 默认值非 0 。  属性面板内 “ 间距 ” 项：单元格之间的空间  相邻单元格之间的空白间隔，用像素衡量，默认值非 0 。  属性面板内 “ 边框 ” 项：表格外边框宽度  表格边框的粗细，用像素衡量，默认值非 0 。此边框不 同于单元格边框。 25 已在.tablestyle 规则中设置表 格边框为 1 已通过.tablestyle 规则 的 border-collapse 属性 完全消除单元格间距 单元格内部的空间

26 在 “CSS 样式 ” 面板内新建 CSS 规则 26 复合内容 CSS 规则将自动 作用于页面内对应的元素。

27 设置 CSS 规则的属性值 27 单元格对齐 单元格填充 单元格边框

28 浏览器预览 28 在设计视图选中这一行， 单击面板 属性 >>HTML >> 粗体。 如何用 CSS 设置这一行？

29 9. 用 CSS 创建交替的行样式  在 “CSS 样式 ” 面板内新建 CSS 规则。 29

30 设置 CSS 规则的属性值 30

31 把类 CSS 规则作用于表格奇数行  按住 Ctrl 键，选中表格内编号为 1 、 3 、 5 、 … 、 11 的行  面板 属性 >>HTML>>“ 类 ” 下拉列表，选中 “oddrow” 项 31

32 让表格在页面内水平居中  选中表格，面板 属性 >> 对齐 >> 居中对齐 32 表格居中不是通过 设置 CSS 规则来实现。

33 10. 对其他表格重用已有的 CSS 样式  1. 表格所在页面引用外部样式文件  面板 CSS 样式 >> 附加样式  2. 把样式文件中的 CSS 规则作用于表格  手工指定表格 ( 或表格元素 ) 的 “ 类 ” 规则  手工设定表格 ( 或表格元素 ) 的 ID 33 为选定的行指定 “ 类 ” 规则 为选定的表格 指定 “ 类 ” 规则

34 效果 34 表格未居中，因为 引用的样式表中不 包含表格居中控制。

35 11. 对表格排序  交换两列：选中一列，菜单 编辑 >> 剪切； 再单击另一列的第一个单元格，菜单 编辑 >> 粘贴。 35

36 把表格各行按 “ 价格 ” 从低到高排列  选中表格，菜单 命令 >> 排序表格。 36

37 小结  菜单 修改 >> 表格 >>… …  新建 CSS 规则  把 CSS 规则作用于表格或表格元素  为表格标题设置样式  消除单元格的间隙  交替的行样式  表格排序 37