网页设计与制作项目式教程（HTML+CSS）电子教案 08.制作“诗人简历”模块.docxVIP

网页设计与制作教案

授课教师

授课班级

授课日期

课题

制作“诗人简历”模块

计划学时

教学目标

知识目标

掌握表格的基本结构（table、tr、td）

理解合并单元格属性rowspan和colspan

掌握border-collapse与border-spacing的CSS应用

能力目标

能根据需求设计表格结构并实现内容排版

能通过CSS美化表格样式

能完成“诗人简历”模块的开发

素质目标

通过诗人简历制作，增强文化认同感

培养耐心细致的职业素养

教学重点

表格的HTML结构与属性设置

单元格合并技巧

表格边框与间距的CSS控制

教学难点

复杂表格的结构设计

CSS样式对表格布局的影响

教学模式

及教学方法

理实一体化、线上+线下混合教学模式

项目教学法、任务驱动法、讲授法。

教学活动及主要环节

素质培养

课前导学

1.观看学习平台相关微课视频。

2.让学生搜集2-3位诗人的生平介绍及经典作品

3.完成课前测试题。

课中践学

【情景导入】

互动提问：

“同学们见过哪些用表格展示的信息？”（学生举例）

“如何用表格清晰展示诗人的简历信息？”

任务发布：

展示“诗人简历”效果图，明确开发要求

【新知探究】

活动1：表格结构初体验

教师演示：

用表格制作简易简历，逐步添加caption、th、td

学生操作：

用表格展示“诗人基本信息”，教师实时投屏优秀作品

活动2：表格变形记

小组竞赛：

完成以下变形任务（每完成一项加10分）：

将“性别”单元格合并2行

将“代表作品”列合并3列

用嵌套表格展示作品分类

活动3：CSS样式魔法屋

创意任务：

为表格添加以下效果：

去除默认边框间隙

设置斑马线背景色

添加悬停高亮效果

【项目实战】

任务：完成“诗人简历”模块

1.结构搭建

学生独立完成HTML结构，教师提供代码提示

2.复杂布局

教师引导：

如何让“作品风格”占据多行多列？

如何在表格中插入诗句？

学生实操：

应用rowspan=3colspan=2，并嵌套无序列表展示代表作

3.创意美化

小组合作：

为表格添加动画效果（提示：使用transition），并尝试响应式设计

四、任务拓展

布置拓展任务：用表格制作“诗人年表”，包含时间、事件、名句。（学生可在完成基本任务的前提下，完成拓展任务。）

项目小结

通过本项目的学习，小丁完成了“古诗词”网站中“著名诗人”“诗词推荐”“诗文释义”“诗人简历”功能模块。通过功能模块的制作，我们一起学习了网页中选择器、盒子模型、浮动、列表和表格的相关知识，总结如?下。

1．选择器是用于选择HTML元素并应用样式的工具，了解和熟练运用选择器可以精确地控制和定位特定的元素，并为其添加样式和行?为。

2．盒子模型是HTML中布局和定位元素的基础，它由内容区、内边距、边框和外边距组成。掌握盒子模型可以更好地控制元素的尺寸、边距和定?位。

3．浮动属性允许元素在容器中左浮动或右浮动，使其他元素环绕在其周围。浮动常用于创建多列布局和实现图文混排的效?果。

4．列表是用来组织和呈现项目清单的一种方式，HTML提供了无序列表（ul）、有序列表（ol）和定义列表（dl）3种类型的列表。可以使用li标签创建列表项，使用CSS来自定义列表样?式。

5．表格是一种常见的HTML元素，用于以行和列的形式呈现数据。使用table标签创建表格，tr标签定义表格行，td标签定义单元格内?容。

学习了以上知识，我们可以更加灵活和有效地设计和布局网页，提升用户体验和页面可读性。同时，结合CSS来美化这些元素，可以创造出各种各样的视觉效?果。

项目延伸

课后同学们可以根据所学知识，丰富网站内容，将完成的功能模块进行整合，参考效果如图3-36所?示。

图3-36“古诗词”网站首页参考效果

通过学习平台学习相关内容，让学生养成自主学习的习惯。

通过搜索学习诗人的生平介绍及经典作品，通过梳理诗人所处时代，让学生能理解文学与历史的互动关系，形成对民族文化脉络的整体认知。

通过任务分析，锻炼学生分析问题的能力，以及用数字化、图形化的方式来呈现，培养其数字素养。

通过学习新知，积极思考，引导学生培养创新思维和解决问题的能力。

通过规范编码习惯，培养学生精益求精的工匠精神，提升职业素养。