3.2.4 应用表格布局网页 教学设计 2023—2024学年苏科版（2018）初中信息技术八年级全一册

第2节 制作网站———应用表格布局网页 【教学目标】 知识与技能目标 （1）了解表格在网页设计中的作用。 （2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。 （3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 过程与方法 比较———>分析———>实践（规划、充实、美化、预览、调整……）———>总结，参考样图，联系“WPS表格”中表格的制作方法，小组协作，完成任务操作和知识的小结。 情感态度与价值观 通过对比学习使学生体验软件学习的一般方法和规律，提高学生自主学习的能力；通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，体验创造的快乐；通过“动物———人类的朋友”网站的设计与制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 【教学重点】 1、了解表格在网页设计中的重要作用和功能。 2、掌握插入、编辑表格的方法及表格的属性设置。 3、掌握表格嵌套的作用及嵌套方法，恰当设计表格。 【教学难点】 恰当使用表格的嵌套设计；表格中的文字排版、表格间距的设定。 【教学方法】 对比教学法、探究学习、模仿学习、小组协作学习。 【课时安排】 1～2课时 【教学过程】 教学环节 教师活动 学生活动 设计意图 一、导入 【网页表格布局的作用】 1、对比：两种形式的网页效果：一种是表格结构网页（未显示表格线biaoge.html），一种是简单结构网页(biaoge2.html)，再呈现另一张表格结构的网页（显示表格线biaoge1.html) 2、结论：对比之下，在制作网站页面时，利用表格结构可有效控制文字、图片等对象的位置，使网页的布局既紧凑又整齐美观 3、引题：运用表格布局网页结构（呈现学案中效果图） 对比观察 得出结论 明确任务。 激情、激趣 开门见山 二、新授 分析 对照学案中的样图，分析表格的行列数。 （二）制作 【表格布局】 1、制作一个外框单元格 任务:1：启动Dreamweaver软件，导入“d:\dongwu”站点文件夹，新建一张空白网页。单击“插入”———�表格”命令，打开“表格”对话框，设置行、列数为1行1列，表格宽度为“1000 像素”，边框粗细为“1”像素，其他参数默认，并设置“页面属性”中上边距为“0”像素，左边距也为“0”像素。并以“biaoge.html”为文件名进行网页的首次保存。 重要提点： 用表格来布局网页时，通常会在整个表格外部加上仅有一个单元格的表格，即形成表格嵌套，这样可以使整个网页的结构稳定。 制作表格并设置表格的结构 （表格布局2演示视频） 任务2：在单元格内，分别插入1行3列、1行5列及8行1列的三个表格，再在8行1列的表格相应的4个单元格内，分别插入1行2列的表格，表格宽度为“100% 百分比”，边框粗细为“1”像素，其他参数默认。 【表格充实】 任务3：参照样图效果，在表格相应的单元格中插入图片和输入文字，并进行适当的编辑，再次保存，预览效果。（注：素材的保存）。 重要提点： 文字、图片的编辑、保存方法，跟首页制作过程中的方法、注意点一致。 在插入图片与文字前需注意单元格中光标的定位问题，一般设置单元格属性窗口中“垂直”属性为“顶端”对齐。 3、单元格属性面板：（在即将编辑的单元格内单击，属性面板即可切换到如图所示） 【表格美化】 任务4：根据网页设计需要，参考样图，选择表格或单元格，修改其属性的“背景颜色”值，再对不需要显示的表格边框线，设置其“边框”值为“0”像素。保存网页，预览欣赏效果，如有欠缺，再有针对性地加以调整设置，并最后保存、预览。 重要提点： 表格属性面板：（选中整个表格，属性面板即可切换到如图所示） 最终效果如下图： （详见学案） 大致分析 ... ...