《(辽师大版)六年级信息技术下册教案 利用表格定位网页元素》由会员分享,可在线阅读,更多相关《(辽师大版)六年级信息技术下册教案 利用表格定位网页元素(7页珍藏版)》请在金锄头文库上搜索。
1、第八课第八课 利用表格定位网页元素利用表格定位网页元素三维目标三维目标知识目标在网页中插入表格能力目标在网页中插入文字和图片情感目标 本节重点本节重点网页中表格的插入、编辑和设置难点在表格中插入文字和图片 板书设计板书设计第八课利用表格定位网页元素 教学环节教学环节知识内容及教法学法预期目标一、导入新课一) 、表格的组成表格的几个部分组成:表头:表格的首行,表示表格各列的名称。行:表格的一行,水平方向。列:表格的一列,垂直方向。单元格:在表格中,每个方格称为一个单元格(Cell) ,可以为每个单元格设置不同的属性。边框:在表格的四周,可设置有无。在每个单元格中,除了可以填写文本之外,还可以放置
2、图片、表单等,表格的最大好处是能分类显示数据,同时还能利用表格来组织网页的整体布局。二) 、插入表格在 FrontPage 2003 中插入一张表格的方法有三种: 1、使用【插入表格】工具按钮(1)将光标移到你要插入表格的位置,即插入点。(2)在常用工具栏中单击“ ”图标工具,在下方出现一个“45”的表格小方框。(3)按住鼠标左键,同时朝右下方拖动鼠标,在方框底部显示相应的表格行数和列数。(4)松开鼠标左键,在插入点处自动出现一张空的表格。2、使用【表格】菜单命令(1)将光标移到你要插入表格的位置,即插入点。(2)单击【表格】菜单,选择【插入】选项,并在选择项中单击【表格】选项,出现插入表格对
3、话框。(3)在对话框中,在“行数”输入需要的行数(例中为 5) ,在“列数”输入需要的列数(例中为 4) ,同时设置好“对齐方式” 、 “边框粗细” 、 “单元格边框”、 “单元格间距” 。(4)最后单击【确定】按钮,屏幕上就会出现一张空的表格。说明:如果在对话框中“边框粗细”值设置为 0 时,则该表格线在浏览网页时不会被显示出来。3、使用手工绘制表格如果想在网页中插入一张不规则的表格,可以采用以下步骤:(1)将插入点移到你要添加表格的地方。(2)在【表格】菜单中选择【绘制表格】选项,或单击表格工具栏上的“ ” 。(3)此时光标变成笔的形状。按住鼠标左键,然后向右下方拖动,到达适当位置的时候松
4、开鼠标左键后,将会出现“11”的表格。(4)如果要在表格内添加表格的行和列,可以利用这支笔在表格内画水平或垂直线。(5)单击工具栏上的“ ”擦除按钮,可以删除表格内的任意一条线。4、嵌套表格很多时候,我们要在一张表格中插入另一张表格,其做法与前面所介绍的插入表格操作并没有太大的区别,只是在插入表格之前应该把插入点定位在单元格内。利用这种做法,我们将可以制作出非常复杂却符合我们要求的表格来。三) 、表格的属性1、选定表格元素选定表格元素指选择表格的单元格、一行或一列、多行或多列、整个表格。在表格元素被选定后,才能修改单元格属性、表格属性、复制和删除等操作。选定整个表格。其操作方法:单击【表格】菜
5、单,选择【选定】单击【表格】选项,则整个表格反色显示,表示已被选定了整个表格。选定表格的行。其操作方法主要有以下两种:将光标移到表格中某一行的左边,当光标变成向右的“ ”黑色小箭头时,单击鼠标左键。此时该行反色显示,表示该行已被选中。将光标移到表格中某一行的任意一个单元格内,然后单击【表格】菜单,选择【选定】后再单击【行】选项,则该行被选定。选定表格的列。其操作方法主要也有两种:将光标移到表格中某一列的最上边,当光标变成一个向下的“ ”黑色小箭头时,单击鼠标左键,此时该列被选中。将光标移到表格中某一行的任意一个单元格内,然后单击【表格】菜单,选择【选定】后再单击【列】选项,则该列被选定。选定单
6、元格 选定一个单元格。将光标移到某单元格内,单击【表格】菜单,选择【选定】后再单击【单元格】选项,则该单元格被选定。 选定多个单元格。在选定一个单元格后,用手按住 Ctrl 键,不要松开,然后单击要选定的其他单元格。选定表格的多行或多列。用与“选定多个单元格”的类似方式来操作。2、设置表格的属性设置整个表格的多种属性,其操作步骤如下:将光标移到表格中,单击【表格】菜单,选择【属性】 ,再单击【表格】选项,或在表格上单击鼠标右键,接着选择【表格属性】 ,出现一个对话框。对齐方式。该设置是整个表格在网页内的对齐方式,开始设为默认,可设置为左对齐、右对齐、水平居中、两端对齐。单元格边距。单元格边界与
7、内容之间的距离。该值越大,单元格内的文字与表格线的距离越大。单元格间距。单元格与单元格之间的距离。边框粗细。设置表格外边框的宽度。如不显示外边框,可将此值设为 0。此外,在【表格属性】对话框中,也可以设置表格的背景颜色、背景图片、整个表格的宽度与高度,只要单击相应按钮,就可以为表格设置各种属性。3、设置单元格的属性设置某个单元格的属性,也可同时设置多个单元格的属性。步骤如下:(1)选定要设置属性的单元格(如果只须设置某个单元格的属性,只需将光标移到该单元格内,无需选定该单元格) ;(2)单击【表格】菜单,选择【属性】 ,然后单击【单元格】选项,或单击鼠标右键,选择【单元格属性】选项,将会出现一
8、个对话框。(3)在单元格属性对话框中,我们可以设置单元格的多种属性。(4)设置完毕后,单击【应用】按钮,可以预览一下设置效果。(5)单击【确定】按钮,设置结束。在这个对话框中,我们可以设置单元格的属性有:单元格布局 水平对齐方式。有五个选项:默认左对齐、左对齐、右对齐、水平居中、两端对齐。 垂直对齐方式。有五个选项:默认靠上、靠上、居中、基线、靠下。 行跨距。即单元格跨越的行数。例如此数设为 2,则这个单元格就对应两行单元格的高度。 列跨距。即单元格跨越的列数。例如此数设为 2,则这个单元格就对应两行单元格的宽度。 标题栏。如果选择了此项,表格的第一行就变成了表格的标题。 不换行。设置此项后,
9、这个单元格中的文字不会随着表格大小的变化而自动换行。 指定宽度。该单元格的最小宽度。可以是像素(Pixels)或百分数(in percent) 。如果是百分比方式,该值是指该单元格占整个表格宽度的百分比。 指定高度。该单元格的最小高度,一般无需指定。浏览器会根据显示窗口的大小而自动调整。边框 边框颜色。设置边框的颜色,默认为黑色。 亮边框。单元格内右边与下边框的颜色。 暗边框。单元格内左边与上边框的颜色。背景单击“颜色”下拉列表框右边的箭头,可以指定每个单元格的背景颜色。没有指定时,浏览器采用默认颜色。也可以为每个单元格指定不同的背景图案,单击“浏览”按钮就可以实现这一点。四) 、插入与删除、
10、合并与拆分 一张表格创建后,可以在单元格内输入文字、符号等,也可以删除单元格中的任何内容,这与在网页中的操作方式完全相同。以表格为例输入内容。此外,可通过插入、删除、合并、拆分表格或单元格,得到需要的新表格。1、插入行或列创建一张表格后,觉得表格的行数或列数不够,就用到插入行或列的功能。实例:把表格扩大,最下方插入 3 行,最右方插入 2 列。(1)在表格中插入行。其操作方法有以下两种:使用菜单命令:1)将光标定位在待插入行的任意单元格内;2)然后单击【表格】菜单,选择【插入】菜单项,在子菜单中单击【行或列】选项,出现对话框;3)在对话框中选择【行】单选按钮。在【行数】框内输入要插入的行数(例
11、如 3) ,并在【位置】栏中选择“所选区域下方”单选按钮。4)单击【确定】按钮,在光标所在行的下方插入了新的行(设为 3) 。使用【表格】工具栏选定一行后,单击工具栏上的“ ”插入行图标,也可以在选定行的上方插入新的一行。(2)在表格中插入列。其操作方法与插入行类似,也有以下两种:使用菜单命令:1)将光标定位在待插入列的任意单元格中;2)然后单击【表格】菜单,选择【插入】菜单项,在子菜单中单击【行或列】选项,出现对话框;3)在对话框中选择【列】单选按钮。在【列数】框内输入要插入的列数(设为 2) ,并在【位置】栏中选择“所选区域右方”单选按钮。4)单击【确定】按钮,则在当前所在列的右方插入了新
12、的列(2 列) 。使用【表格】工具栏选定一行后,单击工具栏上的“ ”插入列图标,则可以在选定列的左方插入新的一行。经过上述插入行和列的操作步骤,得到表格中插入 3 行、2 列后的效果.2、删除行、列或单元格当表格中某行或某列数据多余,或某不需要单元格时,应把它们删除。实例:以表格为例,把表格中新插入的 3 行、2 列删除。通过删除行、列进行。操作步骤如下:1)先删除行:A) 选定行:将光标移到表格中要删除的行的最左边,光标变成向右的“ ”小箭头时,单击鼠标左键,该行反色显示被选中。B) 删除行:单击“ ”图标工具,则选中行被删除。C) 重复上述 A)、B)两步骤把其余两行也删除。2)再删除列:
13、a)选定列:将光标移到表格中要删除的列的最上边,光标变成向下的“ ”黑色小箭头时,单击鼠标左键。此时该列被选中。b)删除列:单击“ ”图标工具,则选中列被删除。c)重复上述 a) 、b)两个步骤把另一列也删除。通过删除单元格进行。其操作步骤如下:1)选定一个单元格:单击【表格】菜单项,选择【选定】 ,单击【单元格】选项。2)选定多个单元格:选定一个单元格后,用手按住 Ctrl 键,不要松开,然后单击要选定的其他所有需要删除的单元格。3)删除单元格:单击【表格】菜单,选择【删除单元格】选项,则选中的所有单元格都会被删除。3、合并单元格将多个单元格合并成一个单元格。下面通过一个实例来说明,其操作步
14、骤:(1)在表格中,选定第一列的后面的三个单元格。(2)单击“ ”图标工具,或单击【表格】菜单项,选择【合并单元格】选项,这时选定的三个单元格合并为一个单元格。(3)选中最后一行的后两个单元格,采用上述(2)中的操作也可以把它们合并为一个单元格。4、拆分单元格将一个单元格拆分成多个单元格,这与合并单元格的操作正好相反。拆分单元格有两种不同的方式:一种是按行拆分,即把单元格按行拆分为多个单元格;另一种是列拆分,即把单元格按列拆分为多个单元格。下面我们通过一个实例来说明,其操作步骤如下:(1)在网页中插入一个 22 的空表格。(2)将光标定位在第一行第一列的单元格内。(3)单击鼠标右键,弹出一个快
15、捷菜单,也可以单击【表格】菜单项。此时选择【拆分单元格】菜单项,出现一个对话框。 (或单击“ ”图标工具)(4)在【拆分单元格】对话框中,选择【拆分为行】单选按钮。(5)把【行数】的值设为 2(默认值) ,单击【确定】按钮。此时表格第一行第一列的单元格被拆分为两行,左上角两个单元格。(6)将光标定位在第一行右边的单元格内。(7)再次单击鼠标右键,选择【拆分单元格】菜单项,出现一个拆分单元格对话框。(8)在对话框中,选择【拆分为列】单选按钮。(9)把【列数】的值设为 2(默认值) ,单击【确定】按钮。此时表格第一行第二列的单元格被拆分为两列,得最后结果。五) 、表格的妙用我们除了用表格组织来数据之外,还有就是用表格来组织网页内容。下面用实例来说明如何设计由一个表格所组织的网页,其操作步骤如下:(1)在空白网页中插入一个 22 的表格,将表格的边界大小设置为 0;(2)在表格第一行第一列的单元格和第二行第二列的单元格中输入内容;(3)在表格中第一行第二列的单元格和第二行第一列的单元格中插入图片;得最后的效果。六) 、上机操作