Dreamweaver网页制作简明教程第4章课件.ppt

1、4.1 4.1 使用表格使用表格 所谓表格就是由一个或多个单元格构成的集合，所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使页中的元素通常都被放置在这些单元格中，以使其其“各安其位各安其位”。此处表示未此处表示未明确设置单明确设置单元格的宽度元格的宽度 此处显示了表格的宽此处显示了表格的宽度。如果只显示一个度。如果只显示一个“”符号，表示未符号，表示未明确设置表格宽度明确设置表格宽度 4.1.

2、1 4.1.1 创建表格创建表格 在在DreamweaverDreamweaver中创建表格的方法非常简单。中创建表格的方法非常简单。确定插入点后，单击确定插入点后，单击“常用常用”插入栏中的插入栏中的“表表格格”按钮，打开按钮，打开“表格表格”对话框，设置各项参对话框，设置各项参数后，单击数后，单击“确定确定”按钮，即可插入表格。按钮，即可插入表格。4.1.2 4.1.2 选择表格和单元格选择表格和单元格 在在DreamweaverDreamweaver中选择表格的方法非常简单，中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。只需用鼠标单击表格边框线即可。要选择某个单元格，可首先将插

3、入点放置在要选择某个单元格，可首先将插入点放置在该单元格内，然后按该单元格内，然后按【CtrlCtrlA A】组合键或单组合键或单击击“标签选择器标签选择器”中对应的中对应的“”标签。标签。要选择某行或某列，可将光标置于该行左侧要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头或该列顶部，当光标形状变为黑色箭头 或或 时单击鼠标。时单击鼠标。4.1.3 4.1.3 设置表格和单元格的属性设置表格和单元格的属性 选中表格后，使用属性面板可以修改表格的选中表格后，使用属性面板可以修改表格的行、列、宽、高，以及填充、间距等。行、列、宽、高，以及填充、间距等。在单元格中单击，属性

4、面板中将显示相应单在单元格中单击，属性面板中将显示相应单元格的属性。元格的属性。1 1设置表格和单元格的宽度与高度设置表格和单元格的宽度与高度 制作网页时，很多情况下都需要改变表格和单制作网页时，很多情况下都需要改变表格和单元格的宽度与高度，通过拖动边框或在属性面元格的宽度与高度，通过拖动边框或在属性面板的板的“宽宽”和和“高高”文本框中直接输入数值，文本框中直接输入数值，就可以非常方便地改变表格和单元格的宽度与就可以非常方便地改变表格和单元格的宽度与高度。高度。设置表设置表格高度格高度 设置单元格设置单元格“宽宽”和和“高高”2 2为表格和单元格设置背景颜色及背景图像为表格和单元格设置背景颜

5、色及背景图像 为表格和单元格设置背景颜色及背景图像的为表格和单元格设置背景颜色及背景图像的方法相当简单。方法相当简单。将插入点置将插入点置于单元格中于单元格中 单击单击“背景背景”文本框后的文文本框后的文件夹图标件夹图标选选择择文文件件 课堂练习课堂练习1 1 使用表格构建使用表格构建“火百合火百合”主页布局主页布局在学习了表格的简单应用后，下面将结合表格在学习了表格的简单应用后，下面将结合表格与图像的应用来看一下与图像的应用来看一下“火百合火百合”主页的具体主页的具体制作方法。制作方法。课堂练习课堂练习2 2 制作细线表格制作细线表格在在DreamweaverDreamweaver中，有多种

6、方法可以制作细线中，有多种方法可以制作细线表格，下面我们讲解一种最简单也是最常用的表格，下面我们讲解一种最简单也是最常用的方法，就是通过设置表格的间距和背景颜色来方法，就是通过设置表格的间距和背景颜色来制作细线表格。制作细线表格。4.1.4 4.1.4 合并与拆分单元格合并与拆分单元格 1 1合并单元格合并单元格 所谓合并单元格，就是将相邻的几个单元格所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。合并成一个单元格。拖动鼠标选拖动鼠标选中要合并的中要合并的单元格单元格单击单击“合并所合并所选单元格，使选单元格，使用跨度用跨度”按钮按钮2 2拆分单元格拆分单元格 拆分单元格表示将一个单元

7、格拆分成多个单元拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下。前面合并的单元格拆分开来，具体操作如下。在要拆分在要拆分的单元格的单元格中单击中单击单击单击“拆分单元格拆分单元格为行或列为行或列”按钮按钮打开打开“拆分单元拆分单元格格”对话框，设对话框，设置各项参数后单置各项参数后单击击“确定确定”按钮按钮 4.1.5 添加或删除行和列在使用表格布局网页时，往往需要在创建好在使用表格布局网页时，往往需要在创建好的表格中添加或删除行和列。的表格中添加或删除行和列。在要添加行或列在要添加

8、行或列的单元格中单击的单元格中单击鼠标右键，在弹鼠标右键，在弹出的快捷菜单中出的快捷菜单中选择选择“表格表格”“插入行或列插入行或列”菜菜单单 在打开的在打开的“插入插入行或列行或列”对话框对话框中设置各项后单中设置各项后单击击“确定确定”按钮按钮 4.1.6 4.1.6 格式化表格格式化表格 在使用表格显示数据信息时，为便于浏览者阅在使用表格显示数据信息时，为便于浏览者阅读，往往需要为单元格设置不同的背景颜色。读，往往需要为单元格设置不同的背景颜色。常用的方法如下。常用的方法如下。选中表格后，选选中表格后，选择择“命令命令”“格格式化表格式化表格”菜单菜单 在在“格式化表格格式化表格”对话框

9、中设置对话框中设置各项后，单击各项后，单击“确定确定”按钮按钮 课堂练习课堂练习3 3 制作嵌套表格制作嵌套表格 所谓嵌套表格，所谓嵌套表格，就是就是在一个大表格的某个单元在一个大表格的某个单元格里插入一个新的表格格里插入一个新的表格，我们看到的绝大多数，我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的网页都是由多个表格相互嵌套进行网页布局的。本节通过制作本节通过制作“lily”lily”网站中的网站中的“产品展示产品展示”页面来看看嵌套表格的应用和制作方法。页面来看看嵌套表格的应用和制作方法。课堂练习课堂练习4 4 制作圆角表格制作圆角表格 在浏览网页时，经常会看到圆角表格，这使得

10、在浏览网页时，经常会看到圆角表格，这使得整个网页看起来更加柔和、美观。整个网页看起来更加柔和、美观。制作圆角表格的方法有很多，下面就以制作下制作圆角表格的方法有很多，下面就以制作下图左侧的表格为例，具体讲解一下此类表格的图左侧的表格为例，具体讲解一下此类表格的制作方法。制作方法。4.2 4.2 使用框架使用框架 4.2.1 4.2.1 关于框架和框架集关于框架和框架集 在框架网页中，浏览器窗口被划分成了若干区在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。每个框架可显示域，每个区域称为一个框架。每个框架可显示不同的文档内容，彼此之间互不干扰。不同的文档内容，彼此之间互不干扰。

11、框架网页由框架集定义，框架集是特殊的框架网页由框架集定义，框架集是特殊的HTMLHTML文件，它定义一组框架的布局和属性，包括框文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初架的数目、大小和位置，以及在每个框架中初始显示的页面始显示的页面URLURL。4.2.2 4.2.2 创建框架集创建框架集 用户可以直接创建框架集，也可以在普通页面用户可以直接创建框架集，也可以在普通页面中加载预定义的框架集。其中，直接创建框架中加载预定义的框架集。其中，直接创建框架集的方法与创建普通页面的方法相似。集的方法与创建普通页面的方法相似。选择选择“文件文件”“新新建建”菜单，打

12、开菜单，打开“新建文档新建文档”对话框对话框在在“类别类别”列表中选择列表中选择“框架集框架集”选项，右侧将显选项，右侧将显示系统预定义的框架集类示系统预定义的框架集类型，选择其中一种，然后型，选择其中一种，然后单击单击“创建创建”按钮按钮4.2.3 4.2.3 框架和框架集的基本操作框架和框架集的基本操作 1 1认识认识“框架框架”面板面板 利用利用“框架框架”面板可以对框架和框架集进行面板可以对框架和框架集进行操作，选择操作，选择“窗口窗口”“框架框架”菜单，可以菜单，可以打开打开“框架框架”面板。面板。2 2选择框架和框架集选择框架和框架集 在文档窗口中选择框架的方法为，按住在文档窗口中

13、选择框架的方法为，按住【AltAlt】键，然后在要选择的框架内单击，被键，然后在要选择的框架内单击，被选中的框架边线将显示为虚线。选中的框架边线将显示为虚线。如要选择框架集，单击该框架集上的任意边如要选择框架集，单击该框架集上的任意边框即可，此时框架集的所有边框都呈虚线显框即可，此时框架集的所有边框都呈虚线显示。示。利用利用“框架框架”面板选择框架时，直接在面板面板选择框架时，直接在面板中相应区域单击即可。选择框架集时，在面中相应区域单击即可。选择框架集时，在面板中单击框架集的边框即可。板中单击框架集的边框即可。4.2.4 4.2.4 框架和框架集的属性设置框架和框架集的属性设置 1 1设置框

14、架属性设置框架属性 选中框架后，选中框架后，“属性属性”面板上将显示相应框面板上将显示相应框架的属性。架的属性。显示框架显示框架源文件的源文件的保存路径保存路径选择是否选择是否显示框架显示框架的边框的边框设置框设置框架滚动架滚动条的属条的属性性2 2设置框架集属性设置框架集属性 选中框架集，属性面板中将显示框架集的属选中框架集，属性面板中将显示框架集的属性。性。该面板中各参数的含义同框架属性面板基本该面板中各参数的含义同框架属性面板基本相同，不同的是在相同，不同的是在“行行”或或“列列”文本框中文本框中可设置框架的行高或列宽，在可设置框架的行高或列宽，在“单位单位”下拉下拉列表框中可选择具体单位。列表框中可选择具体单位。4.2.5 4.2.5 保存框架和框架集保存框架和框架集 1 1保存框架保存框架2 2保存框架集保存框架集 3 3保存框架集中的所有文档保存框架集中的所有文档 课堂练习课堂练习5 5 用框架布局网页用框架布局网页 该例制作了一个名为该例制作了一个名为“娱乐天地娱乐天地”的网页，的网页，它首先利用框架将页面划分成了若干区域。它首先利用框架将页面划分成了若干区域。另外，在局部布局中也用到了表格。另外，在局部布局中也用到了表格。