资源简介

课题 网页表格与表单( 一 ）
课时 2课时（90 min）
教学目标 知识技能目标： （1）熟悉表格的基础知识 （2）能够在网页中添加表格 （3）能够设置表格样式 思政育人目标： （1）勤动脑、多思考，持续提升工作能力。 （2）了解我国高铁的辉煌成就，提升民族自豪感。
教学重难点 教学重点：表格的基础知识 教学难点：设置表格样式
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10min）→传授新知（23 min）→小组互助（15 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解在Dreamweaver CC中如何添加表格 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望
考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况
问题导入 （10 min） 【教师】提出以下问题： 在网页中表格的作用是什么？ 【学生】思考、举手发言 在网页中使用表格可以清晰直观地显示数据。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容
传授新知 （23 min） 【教师】通过学生的发言，引入新的知识点，介绍使用Dreamweaver CC添加表格 一、添加表格 【教师】展示表格的结构，帮助学习理解 1．表格的基本结构 表格由行和列组成，它们的交点称为单元格 （详见教材） 【教师】演示使用Dreamweaver CC插入表格的方法 使用Dreamweaver CC可以直接在网页文档中添加表格，将插入点置于想要插入表格的位置，单击“插入”面板中的“Table”按钮，打开“Table”对话框；然后在“表格大小”设置区中设置表格的行数、列数、表格宽度及表格边框的粗细，在“标题”设置区中选择表格表头所在的位置，在“辅助功能”设置区中设置表格的标题与摘要；最后单击“确定”按钮。 （详见教材） 【学生】观察、记录、理解 【教师】展示HTML5中表格的代码，帮助学习理解 一个最基本的表格结构包括行标签与单元格标签。在HTML5中，使用

标签标记表格，使用子标签标记行，使用标签表示一行，一个标签中。此外，

子标签标记单元格。 其中，一个
标签表示一个单元格，	标签必须包含在

标签还具有一些用于设置基本格式的属性。 （1）border属性用于设置表格的整体边框，它与CSS3中的border属性用法不同，其属性值为数值（省略其单位“px”）。 （2）cellpadding和cellspacing属性分别用于设置单元格的内、外边距，属性值为数值（省略其单位“px”）。 （详见教材） 2．表头 【教师】展示Dreamweaver CC中表头的代码，帮助学习理解 表头是对一组数据的概括或解释，表头信息可以方便用户理解表格数据的含义，提高网页的可读性。使用Dreamweaver CC在网页文档中添加表格时，选择“Table”对话框“标题”设置区中的选项 （或 、 ）即可添加带表头的表格。 在HTML5中，使用、和标签。 （2）按列分组。当需要单独设置表格中某一列或多列的样式时，可以将表格按列分组。在HTML5中，使用标签对列进行分组，该标签必须包含在

标签标记表头单元格。 （详见教材） 【课堂互动】教师提出以下问题： 结合实际情况说一说，表头都有哪些位置放置方法？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在实际应用中，可以根据需要将表头单元格放置在表格中的任意位置，也可以设置多重表头。默认情况下，表头单元格中的文本居中对齐、字体加粗。 3．标题 【教师】展示Dreamweaver CC在网页文档中添加表格的界面，帮助学习理解 标题就是表格的名称，可以提示整个表格要表达的内容。使用Dreamweaver CC在网页文档中添加表格时，在“Table”对话框中的“标题”文本框中输入标题内容即可添加带标题的表格。 （详见教材） 【课堂互动】教师提出以下问题： 表格的表头和表格标题都在设置区的哪个部分设置？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在“Table”对话框中，“标题”设置区中的4个选项只用于设置表格的表头，下方“辅助功能”设置区中的“标题”文本框才是用来设置表格标题的。 4．表格分组 【教师】展示HTML5表格标签界面，帮助学习理解 在实际应用中，根据需要可以将表格按行或列进行分组。 （1）按行分组。一个完整的表格按行分组可分为表头、表体和表尾3部分，它们分别对应

标签中。 （详见教材） 二、设置表格样式 1．使用设计视图调整表格 在添加表格时，通过设置行数与列数能够插入格式非常整齐的表格。但当需要特殊格式的表格时，往往还需要调整表格的单元格以显示特殊的行或列，这时可以通过设计视图对表格进行可视化调整。 【教师】根据教材例6-1步骤演示使用Dreamweaver CC中设计视图调整表格的方法 （1）新建一个名为“schedule.html”的网页文件，将网页标题命名为“在网页中添加表格”。 （2）将插入点置于标签中，单击“插入”面板中的“Table”按钮，打开“Table”对话框；在“行数”文本框中输入“13”，在“列”文本框中输入“7”，在“表格宽度”文本框中输入“600”，在其后的下拉列表中选择“像素”选项；在“标题”设置区中选择“两者”选项；在“标题”文本框中输入“高中课程表”。 （3）单击“确定”按钮，文档窗口自动生成代码。切换至“设计”视图，可以看到当前表格的结构。 （4）在“设计”视图中按住鼠标左键并拖动，选中表格第一行的第一列与第二列单元格，然后右击此处，在弹出的快捷菜单中选择“表格”→“合并单元格”选项，将这两个单元格合并。 （5）切换到“代码”视图，可以看到表格的代码自动更新。 （6）在“设计”视图中按住鼠标左键并拖动，选中表格第一列的第二行至第六行单元格，然后右击此处，在弹出的快捷菜单中选择“表格”→“合并单元格”选项，将这5个单元格合并。 （7）参考步骤4与步骤6，继续合并单元格。 （8）在“设计”视图中单击表格第一行的第二列单元格，在其中输入“星期一”，设置表格的内容。然后参考图6-7继续在表格中输入其余内容。 （9）切换到“代码”视图，将“早自习”单元格对应的

标签修改为	标签。 （10）参考步骤9将“第一节”“第二节”……“第八节”单元格对应的	标签修改为	标签。 （11）在页面中定义样式。在