网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第6章 表格 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习主要内容： 1.表格的基本操作 2.简单表格的排版 3.复杂表格的排版 4.表格的数据功能

3 6.1表格的简单操作 在一个表格中，横向称为行，纵向称为列，行列交 叉部分称为单元格，单元格中的内容和边框之间的 距离称为边距，单元格和单元格之间的距离称为间 距，整张表格的边缘称做边框。

4 6.1表格的简单操作 6.1.1表格的组成 6.1.2插入表格 6.1.3表格属性 6.1.4表格单元格属性 6.1.5在表格中插入内容
6.1.6选择表格元素 6.1.7合并和拆分单元格

5 6.1.1表格的组成 一个完整的表格是由多个HTML表格标签组合而成 的。
<table>和</table>分别是表格的起始标签和终 止标签，所有有关表格的内容均位于这两个标签之 间。<tr>和</tr>是表格的行标签，出现几对 <tr>和</tr>，表格就包含几行。<td>和</td> 是表格的列标签，位于<tr>和</tr>标签之间，出 现几对<td>和</td>，该行就包含几列。

6 6.1.2 插入表格 选择菜单【插入】|【表格】，或选择【插入】面板 中的【布局】选项卡，单击【表格】按钮 ，也可使 用<Ctrl+Alt+T>组合键，打开【表格】对话框， 设置表格相关属性后，单击【确定】按钮，即可在 网页中光标所在位置上插入表格。

7 6.1.3表格属性 在页面中新建表格或选中表格，打开表格【属性】 面板，在表格的【属性】面板中，可以设置表格属 性，用来控制表格的外观特征。

8 6.1.4表格单元格 在对表格的操作过程中，如需设置行、列或者是某 几个单元格的属性，可选中一个或多个单元格，打 开单元格【属性】面板进行设置。

9 6.1.5在表格中插入内容 根据需要可以在表格的某些单元格中插入文本、图 像或各种多媒体对象。在表格中插入内容通常采用 两种方法。
（1）直接在【文档】窗口中插入。 （2）利用剪贴板插入。

10 6.1.6选择表格元素 1．选择单元格 2．选择行/列 3．选择整个表格

11 6.1.7合并和拆分单元格 在绘制不规则表格过程中，经常要将多个单元格合 并成一个单元格，或者将一个单元格拆分成多行或 多列。
在采用简单表格布局的网页中，根据网页布局情况 合并和拆分单元格是网页布局的关键工作。 1. 单元格的合并 2. 单元格的拆分

12 6.2简单表格的排版 简单表格排版就是在页面中插入一个边框宽 度为0的表格，通过对行、列和单元格的设 置和调整，实现网页元素的精确定位，完成 页面排版。 用于行列比较规整，结构比较简单的网页。

13 6.2简单表格的排版 6.2.1课堂案例-融通室内装饰 6.2.2复制、粘贴表格 6.2.3删除表格和清除表格内容
6.2.4增加和删除表格的行和列

14 6.2.1课堂案例-融通室内装饰 案例学习目标：学会表格基本操作，体验简单 排版过程。
案例知识要点：选择菜单【修改】|【表 格】，打开子菜单，选择相应菜单项，对表格 进行编辑，实现简单表格的排版。在表格【属 性】面板和单元格【属性】面板中设置其基本 属性，对整个页面进行外观设计。 素材所在位置：光盘/素材/ch06/课堂案例- 融通室内装饰。 案例布局如图6-11所示，案例效果如图6-12 所示。

15

16

17 6.2.2复制、粘贴表格 1.利用菜单 2.利用快捷键 3.利用鼠标直接拖动

18 6.2.3删除表格和清除表格内容 1.删除整个表格 2.删除整行或整列 3.清除表格中的内容

19 6.2.4增加和删除表格的行和列 1.利用表格【属性】面板 2.利用【修改】菜单

20 6.3复杂表格的排版 通过更多次的拆分合并，以及更多的表格嵌套，形 成更加复杂的表格布局形式。
由于浏览器下载网页是采取逐层下载的形式，如果 将整个复杂网页放在一个大<table>中进行布局， 会极大地影响网页的下载速度。 如果表格超过了3层，搜索引擎就不再抓取。 应尽量将一个大的表格，拆分成多个小的表格，由 上至下排列，以最大地提高网页的浏览和检索效 率。

21 6.3复杂表格的排版 6.3.1课堂案例-江雨桥的博客 6.3.2表格的嵌套 6.3.3单元格与表格背景 6.3.4细线表格

22 6.3.1课堂案例-江雨桥的博客 案例学习目标：学习复杂表格排版。
案例知识要点：在页面中插入多个表格。在主表 格中，通过嵌套表格和进一步拆分单元格，实现 复杂表格的排版。在表格【属性】面板和单元格 【属性】面板中设置其基本属性，对整个页面进 行外观设计。 素材所在位置：光盘/素材/ch06/课堂案例-江雨 桥的博客。 案例效果图如图6-35所示，案例布局如图6-36 所示。

23

24

25 6.3.2表格的嵌套 1. 嵌套表格的大小 2. 嵌套表格的位置

26 6.3.3单元格与表格背景 在Dreamweaver中，单元格【属性】面板中仅提 供了单元格的背景颜色设置方法，设置表格的背 景，或是设置单元格的背景图片，通常采用以下两 种方法。 1.直接修改代码 2.通过添加CSS样式

27 6.3.4细线表格 在很多网页制作风格中，设置表格内框线的细线效 果，可以强化表格的装饰性而使表格更加美观。但 是，细线表格的设置方式不是简单地将表格边框宽 度设置为1px，因为此时表格边框宽度和形状都不 是细线效果。 创建细线表格的方法是，当单元格间距为1px时， 分别对表格和单元格设置不同背景颜色，内框线的 细线效果即可显示出来。

28 6.4表格数据功能 在实际制作网页过程中，有时需要将其他程序中建 立的表格数据导入到网页中，利用【导入表格式数 据】命令可以很容易地实现这一功能。

29 6.4表格数据功能 6.4.1课堂案例-远景苑小区 6.4.2导入Word或Excel数据 6.4.3排序

30 6.4.1课堂案例-远景苑小区 案例学习目标：学习使用表格表示数据。
案例知识要点：使用菜单【插入】|【表格对象】| 【导入表格式数据】，在页面指定位置插导入表格 式数据。 素材所在位置：光盘/素材/ch06/课堂案例-远景 苑小区。 案例效果图如图6-60所示。

31

32 6.4.2导入Word或Excel数据 1. 将Word文档中数据导入到网页表格中 2. 将Excel文档中数据导入到网页表格中

33 6.4.3排序 Dreamweaver还具.有为表格中数据排序的功能

34 6.5练习案例 6.5.1练习案例-爱丽丝家具 6.5.2练习案例-鲜花速递网

35 6.5.1练习案例-爱丽丝家具 案例练习目标：练习简单网页排版。 案例操作要点：
1．创建名称为index.html的网页文档并存于站点根 文件夹中。 2．设置页面属性：字体大小12px，颜色白色，加 粗，背景颜色为#897715。 3．采用简单表格进行布局。插入6行2的布局表格， 表格宽度为900px，单元格间距为5px，并根据案例 布局图进行单元格合并。

36 6.5.1练习案例-爱丽丝家具 4．插入单元格的图像用空格隔开。
5．创建名称为mystyle.css的CSS样式文档，并将 所有样式存在该文档中。 6. 建立标题文字样式：名称为.w1，字体为黑体， 字号为16px，颜色为白色；部分正文文本样式： 名称为.w2，字体为宋体12px，颜色为#FF6，加 粗。 素材所在位置：光盘/案例素材/ch06/练习案例- 爱丽丝家具，案例布局效果如图6-72所示，案例 效果如图6-73 所示。

37

38

39 6.5.2练习案例-鲜花速递网 案例练习目标：练习复杂表格布局。 案例操作要点：
1．创建名称为index.html的新文档并存于站点根 文件夹中。 2．采用多表格和嵌套表格进行网页布局。自上而 下分别插入：表格一为2行1列，表格二为1行2列， 表格三为1行1列，宽度均为960px。 3．在表格二第1列中插入3行3列嵌套表格，宽度 均为93%，居中对齐，并进行适当的单元格合并； 第2列中也插入3行1列嵌套表格，宽度均为90%， 居中对齐。

40 6.5.2练习案例-鲜花速递网 4．创建名称为mystyle.css的CSS样式文档，并将 所有样式存在该文档中。
5．建立表格二背景样式：名称为.t，背景图片为 bg.gif，作用在整个表格二上。建立标题文字样式： 名称为.w1，字体为黑体，字号为24px，颜色为白 色；正文文本样式：名称为.w2，字体为宋体，字 号为12px，颜色为白色。 素材所在位置：光盘/案例素材/ch06/练习案例- 鲜花速递网，案例布局效果如图6-74所示，案例 效果如图6-75所示。

41

42