Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元3 制作非遗名录页面—表格应用.docx

PAGE1

《Web前端开发技术》

课程教案

适用专业：

授课班级：

授课教师：

编制日期：

教案名称

单元3制作非遗名录页面—表格应用

计划学时

4学时

本次授课类型

□理论□实验?理实一体□实训□实习

教学目标

知识目标

1.掌握表格的创建与属性设置方法

2.理解表格结构化标记的应用场景

3.掌握跨行跨列操作实现复杂表格

4.学会使用表格嵌套进行页面布局

能力目标

能独立创建非遗名录数据表格

能调试解决表格兼容性问题

能运用表格实现页面基础布局

素质目标

培养自主学习和独立思考能力

提升快速学习新技术的能力

强化对非遗文化的保护意识

思政目标

通过非遗名录制作增强文化自信

培养严谨规范的代码编写习惯

教学重点

表格跨行跨列操作

表格嵌套布局的实现逻辑

教学难点

复杂表格的结构化语义化设计

多浏览器表格样式兼容性处理

教学设计思路

教学效果及改进思路

绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。

学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。

教学实施过程

要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写

备注

一、课前自主学习

（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元3的相关微课视频，完成在线测试。

(二）学生根据预习任务完成配套练习题，标注出理解不透彻的知识点。

（三）教师通过在线讨论区收集学生疑问，整理共性问题并在课堂中重点讲解。

二、课上探究学习

（一）情境引入，任务导入

小新整理了非遗项目信息，计划在网站上用表格展示国家级非遗名录。在学长王威的建议下，他决定采用类似Excel的表格形式呈现结构化数据，并制定了四个实施步骤：设计页面、创建表格、优化表格结构、完成页面布局。小新准备通过实践来完成这个项目。

（二）任务1创建表格—制作非遗名录清单表格（1学时）

1.任务描述

创建非遗名录表格，定义表头和表主体。设置表格边框样式、填充与边距、背景颜色、表格及内容的对齐方式等。效果如图。

2.任务准备

(1)熟悉各种表格创建标记如：tableth等

(2)了解表格基本结构

(3)认识网页中三种表达颜色的方式

(4)了解width、height属性

(5)了解两种空白：边距与填充

(6)了解对齐方式

(7)能使用bordercolor属性设置边框颜色

3.任务实施

1.主要内容：

(1)创建网页文件。打开HBuilderX,创建一个新的网页文件，并保存在对应的站点目录下。

(2)构建基础表格结构。在body标签内插入table标签，创建6行5列的表格框架：

第1行为表头，使用th标签（自动加粗居中），后续5行为数据行，使用td标签。

(3)设置表格基本属性。宽度设为页面80%（自适应浏览器窗口），高度固定为500像素，边框粗细设为1，居中对齐，边框颜色设为灰色(#CCCCCC)，单元格内边距设为10

，单元格间距设为0。

美化表格样式。表头行背景色设为深红色，表头文字颜色设为白色，所有内容水平居中显示。

非遗名录的参考代码如下：

2.师生活动：

教师通过分步演示非遗名录表格的制作过程，实时解答学生疑问，并巡视课堂进行个性化指导，记录学生实践情况。学生跟随演示完成实操练习，通过小组互评和自评表格完善学习反馈

3.教学方法：

采用案例教学法，结合非遗项目真实数据，利用HBuilderX软件实操演示，配合微课视频辅助理解重点难点。

任务2表格结构化标记—制作非遗名录清单表格（1学时）

1.任务描述

在任务1的基础上增加表格结构化标记，标识表格的页眉、主体部分，提高表格的

可读性，使表格更易于理解。非遗名录清单网页优化后的效果如图下所示。

2.任务准备

(1)熟悉表格的优化结构标记theadtbodytfoot。

3.任务实施

1.主要内容：

(1)将在任务1中的创建表格的第一行划分为表格页眉，添加表格结构化标记thead/thead。

(2)添加表格右下角文字。

(3)将在任务1中的创建表格的数据划分为表格主题，添加表格结构化标记tfoot/tfoot。

非遗名录的优化参考代码如下：

2.师生活动：

教师以非遗名录为案例，系统讲解表格布局技巧，在机房巡回检查学生代码编写情况，及时纠正典型错误。学生通过临摹教师案例完成实践任务，并分组展示作品进行互评。

3.教学方法：

采用任务驱动法，通过实际项目开发场景，结合屏幕录制回放功能强化关键步骤记忆。

任务3表格页面布局—非遗名录页面（2学时）

1.任务描述

非遗名录页面采用三表格布局结构：