第7课 使用表格构建网页布局（2）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第7课 使用表格构建网页布局（2） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握拆分与合并单元格的方法 （2）掌握在表格中添加或删除行与列的方法 技能目标： （1）在网页的表格布局中能够拆分与合并单元格 （2）在网页的表格布局中能够添加或删除行与列 素质目标： 学习中不要过分注重得失，要保持乐观和积极向上的心态 教学重难点 教学重点：表格布局中拆分与合并单元格 教学难点：表格布局中添加或删除行与列 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（32 min）→课堂讨论（8 min） 第2节课：问题导入（2 min）→ 传授新知（13 min）→ 课堂实训（25 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网查询各类网页中，是否出现过不规则的表格布局 【学生】按照要求完成课前任务 通过课前任务，让学生认识表格布局中的特殊格式 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3 min） 【教师】提出以下问题，并随机邀请学生进行回答 网页中不规则的表格布局经常会出现某一个单元格后面有好几行，或者某一个单元格下面有好几列，思考是如何实现的？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：表格的高级应用 通过不规则的表格，让学生认识表格布局的灵活性，并思考如何合并或拆分单元格 传授新知 （32 min） 【教师】讲解新知，介绍表格的高级应用 任务三 表格的高级应用 一、任务说明 在实际的网页制作中，经常需要拆分或合并单元格以及插入、删除行和列，下面就来学习这些知识。此外，还将应用所学知识为“天音”网站子页构建布局。 二、预备知识 （一）拆分与合并单元格 在网页制作中，经常会用到一些特殊结构的表格，此时就需要拆分或合并单元格。 1．拆分单元格 拆分单元格就是将一个单元格拆分成两个或多个单元格，具体操作如下。 【多媒体】演示拆分单元格的具体操作 步骤1在Dreamweaver中新建一个网页文档，并在其中插入一个3行3列，宽200像素，其他各项均为0的表格。 步骤2在要拆分的单元格中单击（此处为第1行中间的单元格），然后单击属性检查器上的“拆分单元格为行或列”按钮。 步骤3打开“拆分单元格”对话框，在“把单元格拆分”区选择“列”单选钮，在“列数”编辑框中输入“2”，然后单击“确定”按钮，单元格被拆分为2列。 【提示】 如果在“拆分单元格”对话框的“把单元格拆分”区选择“行”单选钮，则下方的“列数”会自动变为“行数”。 2．合并单元格 所谓合并单元格，就是将相邻的两个或多个单元格合并成一个单元格。下面继续在前面的文档中操作，也就是将前面拆分的单元格再合并成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1行中间的2个单元格），然后单击属性检查器上的“合并所选单元格，使用跨度”按钮，则2个单元格合并为1个单元格，如图4-35所示（详见教材）。 【提示】 如果需要，也可以选中某一列单元格将其合并，比如图4-35所示（详见教材）第1列的3个单元格。 （二）在表格中添加或删除行与列 在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录，具体操作如下。 【多媒体】演示添加或删除行与列的具体操作 步骤1在Dreamweaver中打开本书配套素材“素材与实例\素材\Dreamweaver\table”目录下的“table.html”文档。 步骤2在表格的第1行第1列单元格中单击鼠标右键，在弹出的快捷菜单中选择“表格”>“插入行或列”菜单。 步骤3打开“插入行或列”对话框，在“插入”区选择“行”单选钮，设置行数为“1”，位置为“所选之上”。 【课堂问答】 【教师】随机邀请学生回答以下问题 参考上述插入行的操作，如何插入新的一列？ 【学生】聆听、思考、回答 【教师】总结学生的回答 如果要在某单元格的左侧或右侧添加列，只需在“插入行或列”对话框中的“插入”区选择“列”，下方会自动变为“列数”，“位置”也会自动变为针对列的选项。 另外，如果要在所选行上方插入1行，可直接在快捷菜单中选择“表格”>“插入行”菜单；如果要在所选列左侧插入1列，可直接选择“表格”>“插入列”菜单。 步骤4单击“确定”按钮，在插入点所在行上方插入1个新行，并且插入点自动移至新行中。 步骤5如要删除某行，只需在该行单