项目7 制作员工信息表（表格）教案三

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：年月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称AI+网页前端开发企业级项目教程课程类型□理论☑理论+实践□实训总学时64授课地点周次13授课学时2教学目标学习目标：灵活运用表格相关知识点技能目标：能独立制作主题为“数字中国”的页面素质目标：提高编程能力、分析问题、解决问题的能力教学重点讲解主题为“数字中国”的页面的结构、相关知识点和开发步骤教学难点主题为“数字中国”的页面的结构、相关知识点和开发步骤教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计首先导入“数字中国”页面的图片，其次系统讲解表格标签（<table>、<tr>、<td>、<th>）及单元格合并属性（colspan/rowspan），最后学生独立完成教学实施要求1.对教师要求：采用项目驱动教学，演示时严守代码规范，将严谨、责任的职业素养自然融入教学。2.环境与资源：统一使用VSCode等主流开发工具，提供项目源码与在线文档，充分利用浏览器开发者工具进行调试演示。教学后记课后练习完成教材对应习题拓展提高教学反思教学内容与教学过程注释一、巩固复习，导入任务教师先简要复习表格这一章的基础知识点。并展示一张图片。展示过程中，教师结合主题进行引导：“同学们，数字中国建设是国家重要战略，这张页面通过表格清晰呈现了其核心内容，大家仔细观察，这张页面的表格布局有什么特点？标题、板块、数据是如何通过表格组织的？”同时，教师简要介绍数字中国的核心内涵，激发学生的家国情怀与学习兴趣。让学生充分观察页面结构、表格设计细节，初步感知表格在主题页面中的应用价值，为后续思考和实操做好铺垫，期间针对学生的疑问进行简单回应，聚焦表格结构与主题呈现的关联。提问启发：“大家仔细看这张员工信息表，它包含了哪些核心信息？表格的布局有什么特点？和我们之前学过的简单表格相比，它多了哪些设计元素？”学生思考如何完成关键操作明确思考核心任务：结合之前所学的HTML表格相关知识，梳理完成“数字中国”页面开发的关键操作步骤，重点思考表格结构搭建、单元格合并、CSS样式美化三大核心环节的具体实现方法，同时预判操作中可能遇到的问题并思考解决思路。为帮助学生有序思考，教师给出针对性引导提示教师写出难点步骤代码。首先，结合页面主题，确定表格的整体结构，思考标题区、核心板块区、数据展示区、总结区各自需要的行数和列数，明确表格的整体框架；其次，观察页面中的合并单元格，区分哪些单元格需要横向合并（如标题区）、哪些需要纵向合并（如核心板块区的分类标题），回忆对应的HTML标记及使用规范；最后，思考如何通过CSS样式贴合“数字中国”主题，比如设置庄重的配色、规范的字体、清晰的边框，让页面既美观又贴合主题。思考过程中，学生可对照教材回顾表格标记、合并单元格、CSS样式等知识点，结合页面图片逐一梳理操作思路。教师完成部分关键代码，边演示边讲解，兼顾知识性与实操性。写出部分关键代码：<divclass="table-wrapper"><tableclass="data-table"><thead><tr><th>指标</th><th>2018年</th><th>2020年</th><th>2022年</th><th>2023年</th><th>年复合增长率</th></tr></thead><tbody><!--智慧环境监测点数量（万个）--><tr><th>智慧环境监测点数量<spanclass="unit">(万个)</span></th><td>12.5</td><td>21.8</td><td>35.6</td><td>42.3</td><td>28.7%</td></tr>.............................学生独立完成案例学生结合讲解的知识点和梳理的操作步骤，独立完成“数字中国”页面开发，要求表格结构完整、布局合理，准确使用表格标记和合并单元格标记，运用CSS样式美化页面，确保页面呈现与教师展示的图片基本一致，同时鼓励学生在规范基础上，结合“数字中国”主题优化样式（如调整配色、完善字体层次），体现个人设计思路总结归纳。对于共性问题教师集中指导，并让学生提交作业。四、总结归纳、思政元素总结：教师针对学生实操中的共性问题，结合具体错误案例进行集中讲解纠正，比如部分学生合并单元格时遗漏多余单元格、CSS样式属性书写错误、表格语义化不规范（如未正确使用表格头单元格标记和表格数据单元格标记）等，演示正确操作方法，帮助学生改正错误、巩固知识点。同时，展示几位优秀学生作品，表扬其编码规范、布局合理、样式贴合主题，分享其操作思路和优化技巧，引导其他学生学习借鉴，激发学习积极性。随后，教师融入思政教育元素，以代码语义化要求为切入点，延伸到工作中遵守规范的重要性。思政元素：教师：“本节课，我们不仅学会了‘数字中国’页面的开发技巧，更要学会坚守规范、担当责任。希望大家从今天起，养成规范编码、严谨做事的习惯，在每一次实操、每一行代码中，践行‘清晰结构、规范操作’的要求，不仅要成为技术过硬的信息技术从业者，更要成为有责任、有担当、懂尊重、善协作的新时代青年，将课堂