网站建设与管理PPT电子课件教案-第5章 表格和框架.ppt

第五章 表格和框架,内容提要,5.1 表格概述 5.2 制作表格 5.3 选择表格对象 5.4 编辑表格 5.5 表格属性面板的使用 5.6 框架,5.1 表格概述,表格在网页中具有非常重要的作用，表格是网页设计人员用来进行网页排版的设计工具。本章将学习如何插入表格、选取表格或单元格区域、合并与拆分单元格、格式化表格及表格属性的设置等。,5.2 制作表格,插入表格 插入表格的步骤： 1 新建一个html文档，将光标放在要插入表格的位置。 2 单击“常用”工具栏的“表格”按钮，打开如图所示的“表格”对话框。,制作表格,3 在“表格大小”栏中的“行数”输入框中输入要创建的表格的行数3。在“列数”输入框中输入表格的列数3。 4“表格宽度”输入框用于设置表格的宽度，右侧的列表中可选择“像素”或“百分比”。 5. “边框粗细”输入框用于设置表格边框的粗细。输入大于0的整数表示有边框，若输入0表示在网页中不显示边框，在设计页面中以虚线表示。 6. “单元格边距”输入框用于输入单元格边框和单元格内容之间的像素数。 7.“单元格间距”输入框用于输入单元格与单元格间的间距值，值越大间距越宽。 8. “页眉”栏用于设置“页眉”在表格中的位置 。,制作表格,9设置好需要的参数后，单击“确定”按钮即可将设置的表格插入到设计页面中。下图所示为加了标题文字的表格。, 演示,制作表格,10单击插入表格中“700”的向下箭头，弹出如图所示的列表。,制作表格,选择表格：选择该项，就可选取整个表格。 清除所有行高：选择该项，表格高度为默认值。 清除所有宽度：选择该项，表格宽度缩为一个字符宽。 使所有宽度一致：固定为第一行中所有单元格的宽度。 隐藏表格宽度：选择该项后表格中的宽度显示线被隐藏。此时，可选择 “查看”“可视化助理”“表格宽度”命令使其显示。,各选项的含义如下：,制作表格,11单击“700”上方的向下箭头按钮，打开如下图所示的表格列设置列表。,各选项的含义如下： l 左侧插入列：在当前列左边插入一列，则将平分单元格宽度，同时每个单元格下方都出现列按钮。 l 右侧插入列：在当前列右边插入一列，重新平分所有单元格宽度。,嵌套表格,嵌套表格就是在一个表格的单元格中再插入一个表格。 插入嵌套表格的步骤： 1将光标定位到要插入表格的单元格中。 2单击“常用”工具栏的“表格”按钮，打开“插入表格”对话框。 3根据需要分别输入行数、列数、宽度和边框等项。然后单击“确定”。,5.3 选择表格对象,选择表格： 表格的选中方法有以下几种: 1.将鼠标移到表格上鼠标变为 图标时，单击鼠标左键即可。 2.将鼠标移到表格的边框线上，表格四周的边框线呈现红色，并且光标变为 时单击鼠标左键即可。 3.将光标定位到表格中，表格弹出绿线的标志，单击标有大小“700”的绿线中的按钮，如下图所示。然后从列表中选取“选择表格”项即可。, 演示,选择行列,选择行列的方法有以下几种: 1将光标移到要选定行的左侧，当所选行的边框线变为红色时单击鼠标左键即可。 2将光标定位到所选行最左侧的单元格中，再水平拖动鼠标到该行中最终一个单元格中释放鼠标可选定嵌套表格的行。 列的选取方法与行类似，只是从上方来选取 。,选定单元格,选定单元格的方法有以下几种: 1单个单元格的选定方法很简单，只需将光标定位到要选定的单元格中即可。 2选择相邻的多个单元格的方法：将鼠标光标定位到开始的单元格中，按下鼠标左键不放，并开始拖动鼠标到最后一个单元格中释放鼠标即可。 3选中不相邻的单元格的方法：按住键盘的ctrl键，用鼠标单击要选中的的单元格，可以选定任意多个不相邻的单元格。,5.4 编辑表格,合并单元格的步骤： 1 选取要合并的单元格区域。 2 单击“属性”面板左下角的 按钮即可。如果未见 按钮，则点击右下角 按钮即可。,拆分单元格,拆分单元格的步骤（以拆分成若干行为例 ）： 1将光标定位于要拆分的单元格中。 2单击“属性”面板中的 按钮，打开如图所示的“拆分单元格”对话框。,拆分单元格,拆分单元格的步骤（以拆分成若干行为例 ）： 3在“把单元格拆分”栏中，选中“行”单选项。 4在“行数”框中输入要拆分的行数，如输入2。 5单击“确定”按钮，即可按设置的参数拆分指定的单元格。如图所示的粗框部分即为拆分的行。,拆分列的方法与拆分行的方法类似。,插入行列,插入单行的步骤： 1将光标定位到要插入行的单元格中 。 2选择“插入”“表格对象”“在上面插入行”命令，即可在当前行的上方插入一行，并且该行成为当前行 。 3选择“修改”“表格”“插入行”命令，或在当前单元格上单击鼠标右键，在弹出的菜单中选择“表格”“插入行”命令也可以实现插入行功能。,插入行列,插入多行的步骤： 1将光标置于表格中希望插入多行的位置上，单击鼠标右键，在打开的菜单中选择“表格 ”|“插入行或列”命令，此时将打开一个“插入行或列”对话框。 2在“插入”选项组中选择“行”，在“行数”文本框中输入数值2，在“位置”选项组中选中“所选之上”。 3.单击“确定”按钮后就能在光标所在的单元格之上插入2行。,插入行列,插入单列的步骤： 1.在要插入列的位置单击鼠标左键。 2.再单击该列下方的 按钮，从弹出的列表中选择“左侧插入列”或“右侧插入列”项即可将列插入到对应的位置。,插入多列与插入多行的方法基本类似,删除行列,删除表格行或列的方法有以下两种: 1.选定要删除的行或列，按delete键即可删除。 2.选定要删除的行或列，或将光标定位到表格中要删除的行或列中，单击鼠标右键，从弹出的快捷菜单中选择“表格”“删除行”或“删除列”命令即可。,格式化表格,用命令格式化表格的步骤： 1.选择表格，选择菜单“命令”“格式化表格”命令，打开如下图所示的“格式化表格”对话框。,用命令格式化表格的步骤： 2.从列表中选择需要的设计方案，预览框中显示对应的表格样式。 3.“行颜色”栏用于设置两种不同的颜色；“交错”下拉列表框可选择表格交错的方式。 4在“第一行：对齐”下拉列表框中选择表格第一行中文本的对齐方式。 5.在“文字样式”下拉列表框中选择第一行文本的字体格式。在“背景色”色块中设置表格第一行单元格的背景颜色；在“文本颜色”色块中设置文本的颜色。 6.单击“确定”按钮，则可得到按选定格式格式化的表格。,格式化表格, 演示,导入表格式数据,可以直接将数据从文件中导入到表格。方法是选择“插入” |“表格对象” |“导入表格式数据”。 选择具有一定分界格式的数据文件。 设定定界符、表格宽度、边距、边框等参数后，单击“确定”按钮即可。, 演示,排序表格,1. 选择表格 2. 选择“命令” | “排序表格”菜单项 3. 设置排序项、排序方式，以及是否排序标题行等参数 4. 单击“确定”按钮, 演示,5.5 表格属性面板的使用,表格的属性面板显示了所插入的表格的所有属性，通过修改属性面板中的参数可调整表格的各种属性。 设置表格格式 设置表格格式的步骤： 1.选定表格，打开窗口底部的“属性”面板，如图所示。,设置表格格式的步骤： 2. “表格id”输入框用于输入表格名，如输入“table1”。 3“行”和“列”输入框用于修改表格的行数和列数修改完后按enter键进行确认。 4“宽”和“高”输入框用于修改表格的宽度和高度在其后的列表框中可选择“像素”或“百分比”。 5.“填充”输入框用于修改单元格中的内容和单元格边框之间的距离。,表格属性面板的使用,设置表格格式的步骤： 6“间距”输入框用于设置相邻单元格之间的距离. 7.“对齐”下拉列表框中选择表格与同一段落中的文本或图像的对齐方式。 8“边框”输入框用于设置边框线的粗细。 9“边框颜色”颜色块用于设置边框的颜色。 10“背景颜色”色块用于设置表格的背景色。 11“背景图像”输入框用于输入背景图像的路径，或单击输入框右侧的文件夹图标选择背景图像文件。,表格属性面板的使用,设置表格格式的步骤： 12.“类”下拉列表框用于选择设置的css样式。 13单击图中a按钮可清除表格的列宽，单击b按钮可清除行高。 14单击c（d）按钮可将表格宽度（高度）从浏览器窗口的百分比转换为像素。单击e（f）按钮则从像素转换为百分比。 15设置完成后，按enter键进行确认。,表格属性面板的使用,设置单元格格式 设置行、列或单元格属性的步骤： 1.选定要设置属性的单元格、行或列，“属性”面板显示如图所示的参数。,表格属性面板的使用,设置行、列或单元格属性的步骤： 2. “水平”下拉列表框用于设置单元格中文本在水平方向的对齐方式；“垂直”列表框用于设置单元格中的文本在垂直方向的对齐方式。 3“宽”和“高”输入框用于分别设置单元格的宽度和高度。默认单位是像素，若用百分比则应在数值后加上百分号(%)。 4“背景”输入框用于指定单元格、行或列的背景图像路径，也可单击文件夹图标选择一幅图像。 5“背景颜色”和“边框”色块用于设置单元格、列或行的背景颜色和边框颜色。,表格属性面板的使用,表格上机实战, 演示,5.6 使用框架,框架是目前网页设计最为常用的技术之一。框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分所显示内容无关的html文档。框架集是html文件，它定义了一组框架的布局和属性，包括框架的数目、大小和位置 ，以及在每个框架中初始显示的页面的url。,创建框架和框架集,可以使用预定义的框架集或者自己设计框架集。 使用预定义的框架集： 选择“文件” “新建”，打开“新建文档”对话框。 在“常规”选项卡中选择“框架集”，从“框架集”列表中选择想要创建的框架集类型，如下图所示。,单击“创建”按钮，框架集出现在设计窗口中，如下图所示。每个框架中都可以独立显示不同的html文档。,创建框架和框架集,也可以使用以下两种方法来选择预定义的框架集： 从“插入” “html” “框架”子菜单中选择预定义的框架集，如图1； 在“插入”工具栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图2。,创建框架和框架集,图1,图2,创建框架和框架集,设计框架集： 方法：选择“修改” “框架页”，从子菜单中选择拆分项。 技巧： 要以垂直或水平方式拆分一个框架，可将框架边框从设计视图的边缘拖入设计视图的中间； 要将一个框架拆分成4个框架，可将框架边框从设计视图的一角拖入框架的中间； 要单独拆分一个框架，可首先打开“框架”面板，在面板上选中待拆分的框架，再用光标拖动相应框架的边缘； 要删除一个框架，可直接将框架边框拖离页面或拖到父框架的边框上。,选择框架和框架集,可以在文档窗口中或者通过“框架”面板选择框架和框架集。 在文档窗口中选择： 方法： 选择框架：按下alt键的同时单击框架内部，框架周围显示选择轮廓； 选择框架集：单击框架集的某一内部框架边框，框架集周围显示选择轮廓。 技巧：可通过按下alt键和不同的方向键来选择不同的框架或框架集 alt+：选择同级别的前一框架（框架集）； alt+：选择同级别的后一框架（框架集）； alt+：选择父框架集； alt+：选择第一个子框架或子框架集。,选择框架和框架集,通过“框架”面板选择： 方法：选择“窗口” “框架”，打开“框架”面板 选择框架：在面板中单击框架，框架周围显示选择轮廓，如图1所示； 选择框架集：在面板中单击环绕框架集的边框，框架集周围显示选择轮廓，如图2所示。,图1,图2,保存框架和框架集,保存框架集文件和所有带框架的文档： 方法：选择“文件” “保存全部”。 保存框架集文件： 方法：选中框架集，然后执行下列操作之一： 选择“文件” “保存框架页”； 选择“文件” “框架集另存为”。 保存带框架的文档： 方法：单击要保存文档所在的框架，然后执行下列操作之一： 选择“文件”“保存框架”； 选择“文件”“框架另存为”。,保存框架和框架集,改变在框架中显示的文档： 方法：将光标放置在要显示新文档的框架中，选择“文件”“在框架中打开”，然后选择要在该框架中显示的新文档，最后单击“确定”按钮。如下图所示。 说明：如果要使该文档成为在浏览器中打开框架集时在框架中显示的默认文档，则必须保存该框架集。,设置框架和框架集属性,框架属性是确定框架集内各个框架的名称、源文件、边距、滚动、边框和能否调整大小，可以使用属性检查器来设置框架和框架集的属性。 框架属性及其设置方法： 选择框架； 选择“窗口”“属性”，打开属性检查器，如下图所示；,设置框架和框架集属性,在属性检查器内设置框架的各项属性值，如下图所示。,设置框架和框架集属性,框架集属性及其设置方法： 选择框架集； 打开属性检查器，如下图所示；,框架集,设置框架和框架集属性,在属性检查器内设置框架集的各项属性值，如下图所示。,为框架设置链接,要在一个框架中使用链接来打开另一个框架中的文档，必须设置链接目标。链接的目标属性指定了在其中打开链接内容的框架或窗口。 为框架设置链接的具体步骤： 选择要设置为超链接的文本或对象； 打开属性检查器，在“链接”域中设置要链接到的文件，如下图所示；,为框架设置链接,在属性检查器的“目标”下拉列表中，选择链接的文档应在其中显示的框架或窗口，如下图所示。,处理不能显示框架的浏览器,框架在ie3.0以下版本的