第2章总体规划1表格课件.ppt

1、第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用知识点及学习目标知识点及学习目标 通过本章的学习，应达到以下目的：通过本章的学习，应达到以下目的：创建表格的方法创建表格的方法设置表格的属性设置表格的属性绘制布局单元格和表格的方法绘制布局单元格和表格的方法设置布局表格、单元格的格式设置布局表格、单元格的格式调整布局表格、单元格的大小调整布局表格、单元格的大小 第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.1 编编 辑辑 表表 格格2.1.1创建表格创建表格 (4)在插入在插入“常用常用”面板上，拖动表格按钮面板上，

2、拖动表格按钮 到主窗口到主窗口的的 工作区中。工作区中。(1)在插入在插入“常用常用”面板上，单击插入表格按面板上，单击插入表格按钮钮 1.通过下列任意一种方式调出插入表格的对话框：通过下列任意一种方式调出插入表格的对话框：(2)通过主窗口的菜单通过主窗口的菜单“插入插入”“表格表格”命令。命令。(3)使用快捷组合键使用快捷组合键“Ctrl+Alt+T”。2.在表格对话框中据需要设置各选项在表格对话框中据需要设置各选项实例演示实例演示第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用选择整个表格方法：选择整个表格方法：光标光标某单元某单元“修改修改”“表格表

3、格”“选择表格选择表格”命令。命令。光标光标某单元某单元按两次组合键按两次组合键“Ctrl+A”。光标光标某单元某单元右击右击“表格表格”“选择表格选择表格”命令。命令。光标光标表格单击状态栏左侧表格单击状态栏左侧、等标记。等标记。单击表格的边线。单击表格的边线。选择单个单元格方法：选择单个单元格方法：光标光标要选择的单元格，按一次组合键要选择的单元格，按一次组合键“Ctrl+A”。光标光标要选择的单元格，单击状态栏上相应的要选择的单元格，单击状态栏上相应的标标光标光标要选择的单元格，选择要选择的单元格，选择“编辑编辑”“全选全选”命令。命令。按住按住Ctrl键，单击要选单元格，再单击取消选择

4、。键，单击要选单元格，再单击取消选择。2.1.2选择表格选择表格第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用选择多个单元格方法：选择多个单元格方法：按住按住Ctrl键，单击要选择的所有单元格。键，单击要选择的所有单元格。光标光标单元格中，拖动鼠标，选择多个单元格。单元格中，拖动鼠标，选择多个单元格。选择整行：光标选择整行：光标该行左边缘，变成该行左边缘，变成图标时单击鼠标。图标时单击鼠标。选择整列：光标选择整列：光标该列上边缘，变成该列上边缘，变成图标时单击鼠标。图标时单击鼠标。选择整个单元格方法：选择整个单元格方法：光标光标第第1个单元格，拖动鼠标至

5、最后一个单元格。个单元格，拖动鼠标至最后一个单元格。光标光标第第1个单元格，按住个单元格，按住Shift键，单击最后单元格。键，单击最后单元格。光标光标第第1行的左边缘，变成行的左边缘，变成图标时，拖鼠标至最后行。图标时，拖鼠标至最后行。光标光标第第1列的上边缘，变成列的上边缘，变成图标时，拖鼠标至最后列。图标时，拖鼠标至最后列。2.1.2选择表格选择表格第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用选中表格后弹出选中表格后弹出“表格属性表格属性”设置面板：设置面板：2.1.3设置表格属性设置表格属性设置以下表格属性：设置以下表格属性：“表格表格Id”文

6、本框文本框设置表格的设置表格的Id使用使用JavaScript脚本语脚本语言控制表格时填写言控制表格时填写(宜用英文宜用英文)。行数、列数；宽、高数值设置；行数、列数；宽、高数值设置；“填充填充”设置单元格内容和其边界之间的像素值；设置单元格内容和其边界之间的像素值；“间距间距”设置相邻表格单元格之间的设置相邻表格单元格之间的像素值像素值；“对齐对齐”设置表格相对同一段落其他元素设置表格相对同一段落其他元素(图像图像)显示位显示位置置第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用“边框边框”设置表格边框宽度的像素值；设置表格边框宽度的像素值；2.1.3设

7、置表格属性设置表格属性【清除列宽清除列宽】【清除行高清除行高】按钮：按钮：从表格中删除所有显示指定的行高或列宽值。从表格中删除所有显示指定的行高或列宽值。【表格宽度转换成表格宽度转换成百分比百分比】【表格高度转换成表格高度转换成百分比百分比】按钮：按钮：将表格中各行高将表格中各行高/列宽值按列宽值按占窗口宽度百分比占窗口宽度百分比设置。设置。【表格宽度转为像素表格宽度转为像素】【表格高度为像素表格高度为像素】按钮按钮 将表格中各行高列宽值设为像素值。将表格中各行高列宽值设为像素值。【背景颜色背景颜色】,【边框颜色边框颜色】,【背景图像背景图像】：分别设置表格背景、边框、颜色，背景图像。分别设置

8、表格背景、边框、颜色，背景图像。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用附：附：课堂小实例课堂小实例 本实例主要运用表格来制作一个课程表。实例中用到：本实例主要运用表格来制作一个课程表。实例中用到：表格的插入、表格边框的设置、单元格的合并、背景颜表格的插入、表格边框的设置、单元格的合并、背景颜色的设置及文本的输入等知识。色的设置及文本的输入等知识。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用附：附：课堂小实例课堂小实例 本实例主要运用表格来制作一个课程表。实例中用到：本实例主要运用表格来制作一个课程表。实例

9、中用到：表格创建，图片的插入，表格边框、单元格的拆分以及表格创建，图片的插入，表格边框、单元格的拆分以及边框、背景颜色的设置等属性的设置。边框、背景颜色的设置等属性的设置。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用设置自动套用格式操作：设置自动套用格式操作：2.1.4自动套用格式自动套用格式“命令命令”菜单菜单“格式化表格格式化表格”命命令令“格式化表格格式化表格”对话框对话框据情况设置各选项后单击据情况设置各选项后单击“确定确定”。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用自动套用格式各选项功能：自动套用

10、格式各选项功能：“行颜色行颜色”选项选项设置行颜色及颜色交换的频率。设置行颜色及颜色交换的频率。“第一行第一行”选项选项设置第一行（可包括行标题）的对齐设置第一行（可包括行标题）的对齐方方 式，文本样式，文本、背景颜色。式，文本样式，文本、背景颜色。“最左列最左列”选项选项设置最左列（可包括行标题）的对齐设置最左列（可包括行标题）的对齐方方 式与文本样式。式与文本样式。“边框边框”设置表格边框宽度的像素值；设置表格边框宽度的像素值；提示提示：边框为：边框为“0”时，显示为虚框。此虚框可以隐藏，时，显示为虚框。此虚框可以隐藏，方法是：单击方法是：单击“查看查看”“可视化助理可视化助理”“表格边框

11、表格边框”。2.1.4自动套用格式自动套用格式第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用设置单元格、行、列属性操作：设置单元格、行、列属性操作：选中表格需要设置的相应元素框选中表格需要设置的相应元素框据需要设置各选项；据需要设置各选项；设置后单击设置后单击“确定确定”。2.1.5设置单元格、行、列属性设置单元格、行、列属性设置单元格、行、列属性面板：设置单元格、行、列属性面板：第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用单元格、行、列属性面板各选项功能：单元格、行、列属性面板各选项功能：“水平水平”框框设置指

12、定单元格设置指定单元格/行行/列内容的水平对齐方列内容的水平对齐方式。式。“垂直垂直”框框设置指定单元格设置指定单元格/行行/列内容的垂直对齐方列内容的垂直对齐方式。式。“宽宽/高高”框框设置单元格的宽度或高度。设置单元格的宽度或高度。“背景背景”框框设置单元格设置单元格/行行/列的背景图像。列的背景图像。“背景颜色背景颜色”框框设置单元格设置单元格/行行/列的背景颜色。列的背景颜色。“边框边框”按钮按钮设置单元格的边框颜色。设置单元格的边框颜色。2.1.5设置单元格、行、列属性设置单元格、行、列属性第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用【合并单

13、元格合并单元格】按钮：按钮：将所选将所选单元格单元格/行行/列列合并为一个单元格。合并为一个单元格。【拆分单元格拆分单元格】按钮：按钮：将所选将所选单元格单元格/行行/列列拆分为多个单元格。拆分为多个单元格。“不换行不换行”复选项：复选项：使单元格中所有文本都在一行，防止换行。使单元格中所有文本都在一行，防止换行。“标题标题”复选项：复选项：将所选单元格格式设为表格标题单元格。将所选单元格格式设为表格标题单元格。2.1.5设置单元格、行、列属性设置单元格、行、列属性第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2 布局单元格和布局单元格和 表表 格格

14、3.2.1布局模式基础知识布局模式基础知识一、布局模式概念一、布局模式概念“布局模式布局模式”是表格三种视图是表格三种视图(标准模式标准模式,扩展表格模扩展表格模式式)之一，它是一种新的网页排版视图之一，它是一种新的网页排版视图布局视图布局视图。在这种视图模式下，用户可以通过绘制布局表格和布在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页移动布局表格和布局单元格的位置来

15、精确地定位网页上的文本和图像。上的文本和图像。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2 布局单元格和布局单元格和 表表 格格二、布局模式特点二、布局模式特点1.在布局模式中，可以像绘图一样方便、灵活地绘制布在布局模式中，可以像绘图一样方便、灵活地绘制布局单元格，将其移到所需位置。局单元格，将其移到所需位置。2.可以创建固定宽度的布局表格和自动伸展为可以创建固定宽度的布局表格和自动伸展为 整个浏整个浏览器窗口宽度的布局表格。览器窗口宽度的布局表格。3.布局表格中绘制布局单元格时布局表格中绘制布局单元格时,会出现一条明亮的网会出现一条明亮的网格线

16、，从任意新布局单元格的边缘向外延伸到包含该格线，从任意新布局单元格的边缘向外延伸到包含该单元格的布局表格边缘。这些线可帮助新单元格和以单元格的布局表格边缘。这些线可帮助新单元格和以前的单元格对齐，并帮助显现基础前的单元格对齐，并帮助显现基础 HTML 表格的结构。表格的结构。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2.2 绘制布局单元格和绘制布局单元格和 表表 格格1.绘制布局单元格操作：绘制布局单元格操作：单击单击“察看察看”菜单菜单“表格模式表格模式”“布局模式布局模式”命令；命令；在在“布局布局”对象面板上，单击对象面板上，单击“绘制布局

17、单元格绘制布局单元格”按钮；按钮；拖动鼠标绘制单元格。绘制的单元格如下窗口所示：拖动鼠标绘制单元格。绘制的单元格如下窗口所示：绘制的布局单元格：绘制的布局单元格：由蓝色线框标识由蓝色线框标识选中时有选中时有8个定位点个定位点绘制布局单元格时，绘制布局单元格时，出现的明亮的网格线出现的明亮的网格线第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2.2 绘制布局单元格和绘制布局单元格和 表表 格格2.绘制布局表格操作：绘制布局表格操作：单击单击“察看察看”菜单菜单“表格模式表格模式”“布局模式布局模式”命命令；令；在在“布局布局”对象面板上，单击对象面板上

18、，单击“绘制布局表格绘制布局表格”按钮；按钮；拖动鼠标绘制表格。绘制的表格如下窗口所示：拖动鼠标绘制表格。绘制的表格如下窗口所示：注：注：1.空文档绘制的布局表格空文档绘制的布局表格 自动捕捉页面左上角。自动捕捉页面左上角。2.布局表格不能相互重叠。布局表格不能相互重叠。绘制的布局表格：绘制的布局表格：由绿色线框标识由绿色线框标识选中时有选中时有3个定位点个定位点第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2.3绘制嵌套布局表绘制嵌套布局表 格格绘制嵌套布局表格操作：绘制嵌套布局表格操作：同上方法，在已绘制的布局表格中再绘制一个表格。同上方法，在已

19、绘制的布局表格中再绘制一个表格。如下窗口图所示：如下窗口图所示：嵌套的布局表格嵌套的布局表格第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2.3绘制嵌套布局表绘制嵌套布局表 格格嵌套布局表格特点嵌套布局表格特点:1.布局表格中可嵌套多层或多个布局表格。布局表格中可嵌套多层或多个布局表格。2.嵌套的布局表格中能创建多个布局单元格。嵌套的布局表格中能创建多个布局单元格。3.布局单元格中不能创建布局表格。布局单元格中不能创建布局表格。4.在嵌套布局表格的布局单元格中插入对象时，布在嵌套布局表格的布局单元格中插入对象时，布 局单元格的长度变化不会受外表格大小

20、约束。局单元格的长度变化不会受外表格大小约束。5.嵌套布局表格只能在现有布局表格的空白区域或嵌套布局表格只能在现有布局表格的空白区域或现有单元格周围创建。现有单元格周围创建。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.2.4在布局单元格中添加内容在布局单元格中添加内容在布局单元格中添加内容操作：在布局单元格中添加内容操作：光标光标布局单元格布局单元格“插入插入”“图像图像”如下窗口单元格中插入的图像：如下窗口单元格中插入的图像：注：在注：在布局表格布局表格中不中不能直接插入内容。能直接插入内容。第第1部分部分 Dreamweaver篇篇二、二、总体

21、规划总体规划表格的使用表格的使用2.3 设置布局模式设置布局模式3.3.1设置布局表格格式操作：设置布局表格格式操作：1.布局表格属性面板：布局表格属性面板：2.布局表格属性面板的各选项设置：布局表格属性面板的各选项设置：“固定固定”单选单选设置表格固定宽度；设置表格固定宽度；“自动延伸自动延伸”单选单选使表格可随其内容自动延伸；使表格可随其内容自动延伸；“填充填充”设置布局单元格内容和其边界之间的距离；设置布局单元格内容和其边界之间的距离；“间距间距”设置布局单元格之间的距离；设置布局单元格之间的距离；第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.

22、3.1 设置布局表格格式设置布局表格格式“距离距离”设置布局单元格之间的距离设置布局单元格之间的距离“删除嵌套删除嵌套”按钮按钮 删除布局表格中的嵌套布局删除布局表格中的嵌套布局表格（不会删除表格中的内容）表格（不会删除表格中的内容）“删除所有间隔图像删除所有间隔图像”按钮按钮 删除布局表格中所删除布局表格中所有的间隔图像。有的间隔图像。“清除行高清除行高”按钮按钮 清除布局表格中的行高。清除布局表格中的行高。“使单元格宽度一致使单元格宽度一致”按钮按钮 自动设置布局单元自动设置布局单元格于其内容的宽度相匹配。格于其内容的宽度相匹配。第第1部分部分 Dreamweaver篇篇二、二、总体规划总

23、体规划表格的使用表格的使用2.3.2 设置布局单元格格式设置布局单元格格式1.布局单元格的属性面板：布局单元格的属性面板：“水平水平”框框设置单元格内容的水平对齐方式；设置单元格内容的水平对齐方式；“垂直垂直”框框设置单元格内容的垂直对齐方式；设置单元格内容的垂直对齐方式；“不换行不换行”设置输入内容超宽时不会换行，而是设置输入内容超宽时不会换行，而是自动改变单元格宽度；自动改变单元格宽度；2.布局单元格各属性选项设置：布局单元格各属性选项设置：第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.3.3 设置布局模式参数设置布局模式参数1.布局模式下首选参

24、数对话框：布局模式下首选参数对话框：第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.3.3 设置布局模式参数设置布局模式参数2.布局表格属性面板的各选项设置：布局表格属性面板的各选项设置：“自动插入间隔符自动插入间隔符”设置能否在设为设置能否在设为“自动伸展自动伸展”时自动插入图像。时自动插入图像。“站点间隔图像站点间隔图像”和和“图像文件图像文件”在站点中设置间隔图像。在站点中设置间隔图像。“单元格外框单元格外框”设置布局单元格外框颜色。设置布局单元格外框颜色。“表格外框表格外框”设置布局表格的外框颜色。设置布局表格的外框颜色。“表格背景表格背景”设

25、置布局表格的背景颜色。设置布局表格的背景颜色。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.3.4 调整布局单元格和表格调整布局单元格和表格大小大小操作：操作：选中单元格或表格；选中单元格或表格；鼠标鼠标边角控制点边角控制点拖动。如图示：拖动。如图示：第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用附：附：对表格的各项编辑对表格的各项编辑添加添加/删除行列操作删除行列操作插入行的四种方法：插入行的四种方法：光标光标待插行下行待插行下行,“修改修改”“表格表格”“插入行插入行”命令。命令。光标光标待插行下行，按组合

26、键待插行下行，按组合键“Ctrl+M”。光标光标待插行下行待插行下行,在快捷菜单中选择在快捷菜单中选择“插入行插入行”命令。命令。插入列的三种方法：插入列的三种方法：光标光标待插列右列待插列右列,“修改修改”“表格表格”“插入列插入列”命令。命令。光标光标待插列右列，按组合键待插列右列，按组合键“Ctrl+Shift+A”。光标光标列右列列右列,在快捷菜单中选择在快捷菜单中选择“插入行插入行”命令。命令。可利用可利用“布局布局”面板面板“插入行插入行”或或“列列”按钮添加行按钮添加行/列列第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用添加多行或多列操作：

27、添加多行或多列操作：光标光标待插行或列附近的单元格中，选待插行或列附近的单元格中，选“表格表格”“插入行或列插入行或列”命令命令“插入行或列插入行或列”对话框。对话框。在对话框中进行相关的设置，然后单击在对话框中进行相关的设置，然后单击“确定确定”按按钮。钮。删除整行删除整行/整列的三种方法：整列的三种方法：选中欲删除的整行或整列，直接按选中欲删除的整行或整列，直接按Del键。键。光标光标要删除行或列中，选要删除行或列中，选“修改修改”“表格表格”“删除行删除行”或或“删除列删除列”命令。命令。光标光标要删除行或列中，用快捷菜单删除行或列要删除行或列中，用快捷菜单删除行或列。附：附：对表格的各

28、项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用导入表格数据文件：导入表格数据文件：在网页中，利用插入列表数据命令可以很容易把表格在网页中，利用插入列表数据命令可以很容易把表格数据加入到网页中。在插入外部数据前，首先要将表数据加入到网页中。在插入外部数据前，首先要将表格数据文件转换成格数据文件转换成.txt（文本文件）格式，并且该文件（文本文件）格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等，但中的数据要带有分隔符，如逗号、分号、冒号等，但加入到网页中的数据并不会出现分隔符，且会自动生加入到网页中的数据并不会出现分隔符，且

29、会自动生成表格。成表格。加入外部数据的三种操作：加入外部数据的三种操作：(1)选选“文件文件”“导入导入”“表格式数据表格式数据”命令。命令。(2)选选“插入插入”“表格对象表格对象”“导入表格式数据导入表格式数据”命令。命令。(3)单击插入单击插入“常用常用”面板上的面板上的“表格数据表格数据”按钮。按钮。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用修改表格大小修改表格大小：设置表格的宽度及高度两种方法设置表格的宽度及高度两种方法 通过鼠标拖曳法粗略地调整表格的大小。通过鼠标拖曳法粗略地调整表格的大小。通过通过

30、“表格属性表格属性”对话框精确地调整表格的大对话框精确地调整表格的大小。小。创建表格时，可通过表格对话框设置表格的宽度，创建表格时，可通过表格对话框设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，但无法设置表格的高度，如果要设置表格的高度，可通过表格属性面板来确定。可通过表格属性面板来确定。合并合并/拆分单元格：拆分单元格：附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用选中需合并的单元格，属性面板变成单元格属性面板选中需合并的单元格，属性面板变成单元格属性面板 单击单元格属性面板上的拆分单元格图标单击单

31、元格属性面板上的拆分单元格图标选中需合并的单元格，属性面板变成单元格属性面板选中需合并的单元格，属性面板变成单元格属性面板 单击单元格属性面板上的合并单元格图标单击单元格属性面板上的合并单元格图标合并单元格三种方法：合并单元格三种方法：选择选择“修改修改”菜单菜单“表格表格”“合并单元格合并单元格”命令。命令。按组合键按组合键“Ctrl+Alt+M”。拆分单元格三种方法：拆分单元格三种方法：选择选择“修改修改”菜单菜单“表格表格”“拆分单元格拆分单元格”命令。命令。按组合键按组合键“Ctrl+Alt+S”。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二

32、、总体规划总体规划表格的使用表格的使用表格的排序表格的排序在在Dreamweaver MX 中可以实现按数字的排序和按中可以实现按数字的排序和按字母的排序，具体操作方法如下：字母的排序，具体操作方法如下：1)单击表格中的任一单元格，单击表格中的任一单元格，“命令命令”菜单菜单“排序排序表格表格”命令命令“排序表格排序表格”对话对话框框：2)在在“排序按排序按”下拉列表框中选择要排序的列（第一关下拉列表框中选择要排序的列（第一关键字）在键字）在“顺序顺序”下拉列表框中选择所需顺序。下拉列表框中选择所需顺序。3)在在“再按再按”下拉列表框中选择要进行次级排序的顺序。下拉列表框中选择要进行次级排序的

33、顺序。4)据需要设置据需要设置“选项选项”后单击后单击“确定确定”按钮完成设置。按钮完成设置。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用表格的格式化表格的格式化在在Dreamweaver MX预置了十几种表格设计样式，使用预置了十几种表格设计样式，使用这些预置的表格样式格式化表格，可大大提高表格的设这些预置的表格样式格式化表格，可大大提高表格的设计效率。计效率。格式化表格的具体方法如下：格式化表格的具体方法如下：1）选中表格）选中表格“命令命令”菜单菜单“格式化表格格式化表格”命令命令“格式格式 化表格化表格”

34、对话框。对话框。2）选择一种模板方案，再对各选项进一步自定义设置，）选择一种模板方案，再对各选项进一步自定义设置，然后应用于自己所设计的表格中。然后应用于自己所设计的表格中。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用本章学习结束本章学习结束第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用课课 后后 习习 题题一、一、填空题填空题 1）表格属性中）表格属性中“间距间距”文本框用于设置文本框用于设置_之间的之间的_值。值。2）如果要套用表格样式，应执行）如果要套用表格样式，应执

35、行_菜单中的命令。菜单中的命令。3）在一个表格中要选择多个连续单元格，应先按）在一个表格中要选择多个连续单元格，应先按_键。键。4）表格高度采用的单位是指）表格高度采用的单位是指_。5）若要确保表格在浏览器中不显示边距和间距应）若要确保表格在浏览器中不显示边距和间距应_。6）将视图切换到布局模式的快捷键是）将视图切换到布局模式的快捷键是_。7）用）用_ _ _菜单命令可以打开布局模式。菜单命令可以打开布局模式。8）绘制布局单元格的两个条件绘制布局单元格的两个条件是是_、_。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用二、选择题二、选择题1Dreamwe

36、aver MX 2004中对表格进行操作中，下中对表格进行操作中，下列说法正确的是：列说法正确的是：_。A选中单个或多个单元格都能对其进行拆分操作选中单个或多个单元格都能对其进行拆分操作 B在一个表格中，如果所选择的区域是矩形区域可在一个表格中，如果所选择的区域是矩形区域可以对其进行拆分操作以对其进行拆分操作 C在一个表格中，如果所选择的区域是矩形区域可在一个表格中，如果所选择的区域是矩形区域可以对其进行合并操作以对其进行合并操作 DDreamweaver MX 2004的表格中，只有所选择的的表格中，只有所选择的区域是非连续的区域才可以对其进行合并操作区域是非连续的区域才可以对其进行合并操作

37、第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用2.Dreamweaver MX 2004中提供查看和操作表格的两种中提供查看和操作表格的两种 方式是方式是_和和_。A标准视图标准视图 B代码视图代码视图 C活动数据视图活动数据视图 D布局视图布局视图 E文档窗口文档窗口3.在在Dreamweaver MX 2004中用来插入表格的按钮是中用来插入表格的按钮是_。A B C D4.使用键盘移动单元格操作是使用键盘移动单元格操作是_。A.按按Tab键键 B.按光标控制键按光标控制键 C.按按Shift+Tab键键 D.按按Shift+Alt键键5.布局表格中

38、没有的属性设置是布局表格中没有的属性设置是_。A.背景颜色背景颜色 B.自动伸展自动伸展 C.间距间距 D.换行换行第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用三、简答题三、简答题 1.制作表格细线有哪几种方法？制作表格细线有哪几种方法？2.简述使用布局视图的意义？简述使用布局视图的意义？四、操作题四、操作题 1.创建一个创建一个5行行4列的表格，表格的宽度为列的表格，表格的宽度为75%，边框宽度，边框宽度为为1，背景色为绿色，边框线为，背景色为绿色，边框线为#3366FF。2.参考书参考书3.4.2制作实例导航网页。制作实例导航网页。3.参考书参考书

39、3.4.3制作网络游戏网页制作网络游戏网页 4.根据第二章计划书中设计的网站，应用表格制作相应的根据第二章计划书中设计的网站，应用表格制作相应的网页。网页。第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用利用利用HTML处理网页表格处理网页表格一、一、HTML中普通表格包括的标记符：中普通表格包括的标记符：1.TABLE TABLE标记符用于定义整个表格，表格内的所有内标记符用于定义整个表格，表格内的所有内容都应该位于容都应该位于和和之间。之间。2.CAPTION 如果表格需要标题，那么就应该使用如果表格需要标题，那么就应该使用CAPTION标标记符将表格

40、标题包括在记符将表格标题包括在和和之之间。间。CAPTION标记符的格式为：标记符的格式为：标题标题 附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用 3.TR TR标记符用于定义表格的行，对于每一个表格行，都标记符用于定义表格的行，对于每一个表格行，都对应一个对应一个TR标记符。标记符。TR标记符的结束标记符可以省略。标记符的结束标记符可以省略。4.TD和和TH 在表格行中的每个单元格，都对应于一个在表格行中的每个单元格，都对应于一个TD标记符或标记符或者者TH标记符，用于标记表格的内容，其中可以包括文字、标记符，

41、用于标记表格的内容，其中可以包括文字、图像或其他对象。图像或其他对象。TD与与TH的功能和用法几乎完全相同，的功能和用法几乎完全相同，唯一不同之处在于唯一不同之处在于TD表示普通表格数据，而表示普通表格数据，而TH表示表格表示表格的行列标题数据。的行列标题数据。TD和和TH的结束标记符都可以省略，并的结束标记符都可以省略，并且可以不包括任何内容。且可以不包括任何内容。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用二、合并单元格二、合并单元格：在在和和标记内使用标记内使用rowspan属性可以进行属性可以进行行合并，

42、行合并，rowspan的取值表示垂直方向上合并的行数。的取值表示垂直方向上合并的行数。在在和和标记内使用标记内使用colspan属性可以进行属性可以进行列合并，列合并，colspan的取值表示水平方向上的合并的列数。的取值表示水平方向上的合并的列数。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用三、边框与分隔线：三、边框与分隔线：在在TABLE标记内使用标记内使用frame、rules和和border属性属性可以设置表格的边框和单元格分隔线。可以设置表格的边框和单元格分隔线。表格边框表示表格最外层的四条框线，可以用

43、表格边框表示表格最外层的四条框线，可以用frame属性进行控制；属性进行控制；rules属性用于控制是否显示单元属性用于控制是否显示单元格之间的分隔线；格之间的分隔线；border属性用于设置边框的宽度，属性用于设置边框的宽度，其值为像素数。如果设置其值为像素数。如果设置border=0，则意味着，则意味着frame=void，rules=none 。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用四、控制单元格空白四、控制单元格空白：在在TABLE标记符中使用标记符中使用cellspacing属性可以控制属性可以控

44、制单元格之间的空白，使用单元格之间的空白，使用cellpadding属性可以控制表属性可以控制表格分隔线和数据之间的距离，这两个属性之间的取值格分隔线和数据之间的距离，这两个属性之间的取值通常采用像素数。通常采用像素数。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用五、对齐表格：五、对齐表格：1.表格的页面对齐表格的页面对齐 表格在页面中的对齐与其他页面内容一样，可以表格在页面中的对齐与其他页面内容一样，可以直接在直接在TABLE标记符中使用标记符中使用align属性。另外，也可以属性。另外，也可以用用DIV标记符

45、的标记符的align属性设置表格的对齐，方法是：属性设置表格的对齐，方法是：将将TABLE标记符包含在标记符包含在和和之间。之间。2.表格的内容对齐表格的内容对齐 表格单元格内容的对齐包括各数据项在水平方向表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。和垂直方向上的对齐。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用六、控制表格和单元格的大小六、控制表格和单元格的大小：由于表格能将网页划分为任意大小的矩形区域，由于表格能将网页划分为任意大小的矩形区域，所以表格在网页中更多地是用作排版工具。如果要分所

46、以表格在网页中更多地是用作排版工具。如果要分割页面区域，经常要做的就是设置表格和单元格大小。割页面区域，经常要做的就是设置表格和单元格大小。可以使用标记符的可以使用标记符的width和和height属性设置表格和属性设置表格和单元格大小，这两个属性的取值可以是像素数，也可单元格大小，这两个属性的取值可以是像素数，也可以是百分比，但一般都使用绝对的像素数。以是百分比，但一般都使用绝对的像素数。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用七、设置表格和单元格的背景七、设置表格和单元格的背景：与设置整个页面的背景类似，

47、表格或单元格也可与设置整个页面的背景类似，表格或单元格也可以设置背景颜色或图案；设置方法为：以设置背景颜色或图案；设置方法为：在在TABLE、TR或或TD标记符内使用标记符内使用bgcolor属性设属性设置背景颜色；使用置背景颜色；使用background属性设置背景图案。属性设置背景图案。附：附：对表格的各项编辑对表格的各项编辑第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用“排序表格排序表格”对话框对话框1 1 第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用“排序表格排序表格”对话框对话框2 2第第1部分部分 Dreamweaver篇篇二、二、总体规划总体规划表格的使用表格的使用“排序表格排序表格”对话框对话框3 3