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

知识点及学习目标通过本章的学习，应达到以下目的：■创建表格的方法■设置表格的属性■绘制布局单元格和表格的方法■设置布局表格、单元格的格式■调整布局表格、单元格的大小

知识点及学习目标通过本章的学习，应达到以下目的：■创建表格2.1编辑表格2.1.1创建表格

(4)在插入“常用”面板上，拖动表格按钮到主窗口的工作区中。(1)在插入“常用”面板上，单击插入表格按钮1.通过下列任意一种方式调出插入表格的对话框：(2)通过主窗口的菜单“插入”→“表格”命令。

(3)使用快捷组合键“Ctrl+Alt+T”。2.在表格对话框中据需要设置各选项〔实例演示〕2.1编辑表格2.1.1创建表格(4)在选择整个表格方法：⑴光标→某单元→“修改”→“表格”→“选择表格”命令。⑵光标→某单元→按两次组合键“Ctrl+A”。⑶光标→某单元→右击→“表格”→“选择表格”命令。⑷光标→表格单击状态栏左侧<table>、<tr>、<td>等标记。⑸单击表格的边线。选择单个单元格方法：⑴光标→要选择的单元格，按一次组合键“Ctrl+A”。⑵光标→要选择的单元格，单击状态栏上相应的<td>标⑶光标→要选择的单元格，选择“编辑”→“全选”命令。⑷按住Ctrl键，单击要选单元格，再单击取消选择。2.1.2选择表格选择整个表格方法：2.1.2选择表格选择多个单元格方法：⑴按住Ctrl键，单击要选择的所有单元格。⑵光标→单元格中，拖动鼠标，选择多个单元格。⑶选择整行：光标→该行左边缘，变成

图标时单击鼠标。⑷选择整列：光标→该列上边缘，变成

图标时单击鼠标。选择整个单元格方法：⑴光标→第1个单元格，拖动鼠标至最后一个单元格。⑵光标→第1个单元格，按住Shift键，单击最后单元格。⑶光标→第1行的左边缘，变成

图标时，拖鼠标至最后行。⑷光标→第1列的上边缘，变成

图标时，拖鼠标至最后列。2.1.2选择表格选择多个单元格方法：2.1.2选择表格选中表格后弹出“表格属性”设置面板：2.1.3设置表格属性设置以下表格属性：⑴“表格Id”文本框—设置表格的Id使用JavaScript脚本语言控制表格时填写(宜用英文)。⑵行数、列数；宽、高数值设置；⑶“填充”—设置单元格内容和其边界之间的像素值；⑷“间距”—设置相邻表格单元格之间的像素值；⑸“对齐”—设置表格相对同一段落其他元素(图像)显示位置选中表格后弹出“表格属性”设置面板：2.1.3设置表格属性设⑹“边框”—设置表格边框宽度的像素值；2.1.3设置表格属性⑺【清除列宽】【清除行高】按钮：从表格中删除所有显示指定的行高或列宽值。⑼【表格宽度转换成百分比】【表格高度转换成百分比】按钮：将表格中各行高/列宽值按占窗口宽度百分比设置。⑻【表格宽度转为像素】【表格高度为像素】按钮将表格中各行高列宽值设为像素值。⑽【背景颜色】,【边框颜色】,【背景图像】：分别设置表格背景、边框、颜色，背景图像。⑹“边框”—设置表格边框宽度的像素值；2.1.3设置表格属附：课堂小实例本实例主要运用表格来制作一个课程表。实例中用到：表格的插入、表格边框的设置、单元格的合并、背景颜色的设置及文本的输入等知识。附：课堂小实例本实例主要运用表格来制作一个课程表。实例中附：课堂小实例本实例主要运用表格来制作一个课程表。实例中用到：表格创建，图片的插入，表格边框、单元格的拆分以及边框、背景颜色的设置等属性的设置。附：课堂小实例本实例主要运用表格来制作一个课程表。实例中设置自动套用格式操作：2.1.4自动套用格式“命令”菜单→“格式化表格”命令→“格式化表格”对话框据情况设置各选项后单击“确定”。设置自动套用格式操作：2.1.4自动套用格式“命令”菜单→“自动套用格式各选项功能：⑴“行颜色”选项—设置行颜色及颜色交换的频率。⑵“第一行”选项—设置第一行（可包括行标题）的对齐方式，文本样式，文本、背景颜色。⑶“最左列”选项—设置最左列（可包括行标题）的对齐方式与文本样式。⑷“边框”—设置表格边框宽度的像素值；＊提示：边框为“0”时，显示为虚框。此虚框可以隐藏，方法是：单击“查看”→“可视化助理”→“表格边框”。

2.1.4自动套用格式自动套用格式各选项功能：2.1.4自动套用格式设置单元格、行、列属性操作：选中表格需要设置的相应元素框据需要设置各选项；设置后单击“确定”。2.1.5设置单元格、行、列属性设置单元格、行、列属性面板：设置单元格、行、列属性操作：2.1.5设置单元格、行、列属性单元格、行、列属性面板各选项功能：⑴“水平”框—设置指定单元格/行/列内容的水平对齐方式。⑵“垂直”框—设置指定单元格/行/列内容的垂直对齐方式。⑶“宽/高”框—设置单元格的宽度或高度。⑷“背景”框—设置单元格/行/列的背景图像。⑸“背景颜色”框—设置单元格/行/列的背景颜色。⑹“边框”按钮—设置单元格的边框颜色。2.1.5设置单元格、行、列属性单元格、行、列属性面板各选项功能：2.1.5设置单元格、行、⑺【合并单元格】按钮：将所选单元格/行/列合并为一个单元格。⑻【拆分单元格】按钮：将所选单元格/行/列拆分为多个单元格。⑼“不换行”复选项：使单元格中所有文本都在一行，防止换行。⑽“标题”复选项：将所选单元格格式设为表格标题单元格。2.1.5设置单元格、行、列属性⑺【合并单元格】按钮：2.1.5设置单元格、行、列属性2.2布局单元格和表格3.2.1布局模式基础知识一、布局模式概念“布局模式”是表格三种视图(标准模式,扩展表格模式)之一，它是一种新的网页排版视图——布局视图。在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。2.2布局单元格和表格3.2.1布局模式基础知识2.2布局单元格和表格二、布局模式特点1.在布局模式中，可以像绘图一样方便、灵活地绘制布局单元格，将其移到所需位置。2.可以创建固定宽度的布局表格和自动伸展为整个浏览器窗口宽度的布局表格。3.布局表格中绘制布局单元格时,会出现一条明亮的网格线，从任意新布局单元格的边缘向外延伸到包含该单元格的布局表格边缘。这些线可帮助新单元格和以前的单元格对齐，并帮助显现基础HTML表格的结构。2.2布局单元格和表格二、布局模式特点2.2.2绘制布局单元格和表格1.绘制布局单元格操作：单击“察看”菜单→“表格模式”→“布局模式”命令；在“布局”对象面板上，单击“绘制布局单元格”按钮；拖动鼠标绘制单元格。绘制的单元格如下窗口所示：绘制的布局单元格：由蓝色线框标识选中时有8个定位点绘制布局单元格时，出现的明亮的网格线2.2.2绘制布局单元格和表格1.绘制布局单元格操作：2.2.2绘制布局单元格和表格2.绘制布局表格操作：单击“察看”菜单→“表格模式”→“布局模式”命令；在“布局”对象面板上，单击“绘制布局表格”按钮；拖动鼠标绘制表格。绘制的表格如下窗口所示：注：1.空文档绘制的布局表格自动捕捉页面左上角。

2.布局表格不能相互重叠。绘制的布局表格：由绿色线框标识选中时有3个定位点2.2.2绘制布局单元格和表格2.绘制布局表格操作：注2.2.3绘制嵌套布局表格绘制嵌套布局表格操作：同上方法，在已绘制的布局表格中再绘制一个表格。如下窗口图所示：嵌套的布局表格2.2.3绘制嵌套布局表格绘制嵌套布局表格操作：嵌套的布局2.2.3绘制嵌套布局表格嵌套布局表格特点:1.布局表格中可嵌套多层或多个布局表格。2.嵌套的布局表格中能创建多个布局单元格。3.布局单元格中不能创建布局表格。4.在嵌套布局表格的布局单元格中插入对象时，布局单元格的长度变化不会受外表格大小约束。5.嵌套布局表格只能在现有布局表格的空白区域或现有单元格周围创建。2.2.3绘制嵌套布局表格嵌套布局表格特点:2.2.4在布局单元格中添加内容在布局单元格中添加内容操作：光标→布局单元格→“插入”→“图像”如下窗口单元格中插入的图像：注：在布局表格中不能直接插入内容。2.2.4在布局单元格中添加内容在布局单元格中添加内容操作：2.3设置布局模式3.3.1设置布局表格格式操作：1.布局表格属性面板：2.布局表格属性面板的各选项设置：⑴“固定”单选—设置表格固定宽度；⑵“自动延伸”单选—使表格可随其内容自动延伸；⑶“填充”—设置布局单元格内容和其边界之间的距离；⑷“间距”—设置布局单元格之间的距离；2.3设置布局模式3.3.1设置布局表格格式操作：2.布局2.3.1设置布局表格格式⑸“距离”—设置布局单元格之间的距离⑼“删除嵌套”按钮—删除布局表格中的嵌套布局表格（不会删除表格中的内容）⑻“删除所有间隔图像”按钮—删除布局表格中所有的间隔图像。⑹“清除行高”按钮—清除布局表格中的行高。⑺“使单元格宽度一致”按钮—自动设置布局单元格于其内容的宽度相匹配。2.3.1设置布局表格格式⑸“距离”—设置布局单元格之间2.3.2设置布局单元格格式1.布局单元格的属性面板：⑴“水平”框—设置单元格内容的水平对齐方式；⑵“垂直”框—设置单元格内容的垂直对齐方式；⑶“不换行”—设置输入内容超宽时不会换行，而是自动改变单元格宽度；2.布局单元格各属性选项设置：2.3.2设置布局单元格格式1.布局单元格的属性面板：2.3.3设置布局模式参数1.布局模式下首选参数对话框：2.3.3设置布局模式参数1.布局模式下首选参数对话框：2.3.3设置布局模式参数2.布局表格属性面板的各选项设置：⑴“自动插入间隔符”

—设置能否在设为“自动伸展”时自动插入图像。⑵“站点间隔图像”和“图像文件”

—在站点中设置间隔图像。⑶“单元格外框”—设置布局单元格外框颜色。⑷“表格外框”—设置布局表格的外框颜色。⑸“表格背景”—设置布局表格的背景颜色。2.3.3设置布局模式参数2.布局表格属性面板的各选项设置2.3.4调整布局单元格和表格大小操作：选中单元格或表格；鼠标→边角控制点→拖动。如图示：2.3.4调整布局单元格和表格大小操作：附：对表格的各项编辑添加/删除行列操作插入行的四种方法：⑴光标→待插行下行,“修改”→“表格”→“插入行”命令。⑵光标→待插行下行，按组合键“Ctrl+M”。⑶光标→待插行下行,在快捷菜单中选择“插入行”命令。插入列的三种方法：⑴光标→待插列右列,“修改”→“表格”→“插入列”命令。⑵光标→待插列右列，按组合键“Ctrl+Shift+A”

。⑶光标→列右列,在快捷菜单中选择“插入行”命令。＊可利用“布局”面板“插入行”或“列”按钮添加行/列附：对表格的各项编辑添加/删除行列操作添加多行或多列操作：⑴光标→待插行或列附近的单元格中，选“表格”→“插入行或列”命令→“插入行或列”对话框。⑵在对话框中进行相关的设置，然后单击“确定”按钮。删除整行/整列的三种方法：⑴选中欲删除的整行或整列，直接按Del键。⑵光标→要删除行或列中，选“修改”→“表格”→“删除行”或“删除列”命令。⑶光标→要删除行或列中，用快捷菜单删除行或列。附：对表格的各项编辑添加多行或多列操作：附：对表格的各项编辑导入表格数据文件：在网页中，利用插入列表数据命令可以很容易把表格数据加入到网页中。在插入外部数据前，首先要将表格数据文件转换成.txt（文本文件）格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等，但加入到网页中的数据并不会出现分隔符，且会自动生成表格。加入外部数据的三种操作：(1)选“文件”→“导入”→“表格式数据”命令。(2)选“插入”→“表格对象”→“导入表格式数据”命令。(3)单击插入“常用”面板上的“表格数据”按钮。附：对表格的各项编辑导入表格数据文件：附：对表格的各项编辑修改表格大小

：设置表格的宽度及高度两种方法①通过鼠标拖曳法粗略地调整表格的大小。②通过“表格属性”对话框精确地调整表格的大小。创建表格时，可通过表格对话框设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可通过表格属性面板来确定。合并/拆分单元格：附：对表格的各项编辑修改表格大小：附：对表格的各项编辑⑴选中需合并的单元格，属性面板变成单元格属性面板单击单元格属性面板上的拆分单元格图标⑴选中需合并的单元格，属性面板变成单元格属性面板单击单元格属性面板上的合并单元格图标合并单元格三种方法：⑵选择“修改”菜单→“表格”→“合并单元格”命令。⑶按组合键“Ctrl+Alt+M”。拆分单元格三种方法：⑵选择“修改”菜单→“表格”→“拆分单元格”命令。⑶按组合键“Ctrl+Alt+S”

。附：对表格的各项编辑⑴选中需合并的单元格，属性面板变成单元格属性面板⑴选中需合并表格的排序在DreamweaverMX中可以实现按数字的排序和按字母的排序，具体操作方法如下：

1)单击表格中的任一单元格，→“命令”菜单→“排序表格”命令→“排序表格”对话框：

2)在“排序按”下拉列表框中选择要排序的列（第一关键字）在“顺序”下拉列表框中选择所需顺序。

3)在“再按”下拉列表框中选择要进行次级排序的顺序。

4)据需要设置“选项”后单击“确定”按钮完成设置。附：对表格的各项编辑表格的排序附：对表格的各项编辑表格的格式化在DreamweaverMX预置了十几种表格设计样式，使用这些预置的表格样式格式化表格，可大大提高表格的设计效率。格式化表格的具体方法如下：

1）选中表格→“命令”菜单→“格式化表格”命令→“格式化表格”对话框。

2）选择一种模板方案，再对各选项进一步自定义设置，然后应用于自己所设计的表格中。附：对表格的各项编辑表格的格式化附：对表格的各项编辑本章学习结束本章学习结束课后习题一、填空题1）表格属性中“间距”文本框用于设置______之间的_____值。2）如果要套用表格样式，应执行_________菜单中的命令。3）在一个表格中要选择多个连续单元格，应先按_____键。

4）表格高度采用的％单位是指_________。

5）若要确保表格在浏览器中不显示边距和间距应_________。

6）将视图切换到布局模式的快捷键是_________。

7）用_____→_____→_____→菜单命令可以打开布局模式。

8）绘制布局单元格的两个条件是________、________。课后习题一、填空题二、选择题1．DreamweaverMX2004中对表格进行操作中，下列说法正确的是：________。A．选中单个或多个单元格都能对其进行拆分操作B．在一个表格中，如果所选择的区域是矩形区域可以对其进行拆分操作C．在一个表格中，如果所选择的区域是矩形区域可以对其进行合并操作D．DreamweaverMX2004的表格中，只有所选择的区域是非连续的区域才可以对其进行合并操作二、选择题2.DreamweaverMX2004中提供查看和操作表格的两种方式是_______和______。

A．标准视图B．代码视图 C．活动数据视图

D．布局视图 E．文档窗口3.在DreamweaverMX2004中用来插入表格的按钮是_____。A．B．C．D．4.使用键盘移动单元格操作是______。

A.按Tab键B.按光标控制键C.按Shift+Tab键D.按Shift+Alt键5.布局表格中没有的属性设置是______。

A.背景颜色B.自动伸展C.间距D.换行2.DreamweaverMX2004中提供查看和操作表三、简答题1.制作表格细线有哪几种方法？

2.简述使用布局视图的意义？四、操作题

1.创建一个5行4列的表格，表格的宽度为75%，边框宽度为1，背景色为绿色，边框线为#3366FF。

2.参考书3.4.2制作实例导航网页。

3.参考书3.4.3制作网络游戏网页

4.根据第二章计划书中设计的网站，应用表格制作相应的网页。三、简答题利用HTML处理网页表格一、HTML中普通表格包括的标记符：1.TABLETABLE标记符用于定义整个表格，表格内的所有内容都应该位于<TABLE>和</TABLE>之间。2.CAPTION如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在<CAPTION>和</CAPTION>之间。CAPTION标记符的格式为：<CAPTIONalign="">标题</CAPTION>

附：对表格的各项编辑利用HTML处理网页表格附：对表格的各项编辑3.TR

TR标记符用于定义表格的行，对于每一个表格行，都对应一个TR标记符。TR标记符的结束标记符可以省略。

4.TD和TH在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。TD与TH的功能和用法几乎完全相同，唯一不同之处在于TD表示普通表格数据，而TH表示表格的行列标题数据。TD和TH的结束标记符都可以省略，并且可以不包括任何内容。附：对表格的各项编辑3.TR附：对表格的各项编辑二、合并单元格

：在<TD>和<TH>标记内使用rowspan属性可以进行行合并，rowspan的取值表示垂直方向上合并的行数。

在<TD>和<TH>标记内使用colspan属性可以进行列合并，colspan的取值表示水平方向上的合并的列数。附：对表格的各项编辑二、合并单元格：附：对表格的各项编辑三、边框与分隔线：在TABLE标记内使用frame、rules和border属性可以设置表格的边框和单元格分隔线。表格边框表示表格最外层的四条框线，可以用frame属性进行控制；rules属性用于控制是否显示单元格之间的分隔线；border属性用于设置边框的