第13课网页表格与表单( 一 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页表格与表单( 一 ） 课时 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中，使用<table>标签标记表格，使用<tr>子标签标记行，使用<td>子标签标记单元格。 其中，一个<tr>标签表示一行，一个<td>标签表示一个单元格，<td>标签必须包含在<tr>标签中。此外，<table>标签还具有一些用于设置基本格式的属性。 （1）border属性用于设置表格的整体边框，它与CSS3中的border属性用法不同，其属性值为数值（省略其单位“px”）。 （2）cellpadding和cellspacing属性分别用于设置单元格的内、外边距，属性值为数值（省略其单位“px”）。 （详见教材） 2．表头 【教师】展示Dreamweaver CC中表头的代码，帮助学习理解 表头是对一组数据的概括或解释，表头信息可以方便用户理解表格数据的含义，提高网页的可读性。使用Dreamweaver CC在网页文档中添加表格时，选择“Table”对话框“标题”设置区中的选项 （或 、 ）即可添加带表头的表格。 在HTML5中，使用<th>标签标记表头单元格。 （详见教材） 【课堂互动】教师提出以下问题： 结合实际情况说一说，表头都有哪些位置放置方法？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在实际应用中，可以根据需要将表头单元格放置在表格中的任意位置，也可以设置多重表头。默认情况下，表头单元格中的文本居中对齐、字体加粗。 3．标题 【教师】展示Dreamweaver CC在网页文档中添加表格的界面，帮助学习理解 标题就是表格的名称，可以提示整个表格要表达的内容。使用Dreamweaver CC在网页文档中添加表格时，在“Table”对话框中的“标题”文本框中输入标题内容即可添加带标题的表格。 （详见教材） 【课堂互动】教师提出以下问题： 表格的表头和表格标题都在设置区的哪个部分设置？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在“Table”对话框中，“标题”设置区中的4个选项只用于设置表格的表头，下方“辅助功能”设置区中的“标题”文本框才是用来设置表格标题的。 4．表格分组 【教师】展示HTML5表格标签界面，帮助学习理解 在实际应用中，根据