网页设计与制作项目式教程（HTML+CSS）电子教案 07.制作“古诗推荐”“诗文释义”模块.docx

网页设计与制作教案

授课教师

授课班级

授课日期

课题

制作“古诗推荐”模块

计划学时

教学目标

知识目标

掌握有序列表ol、无序列表ul、定义列表dl的HTML语法

理解list-style-type属性对列表符号的控制方法

掌握列表项间距与样式的CSS设置技巧

能力目标

能根据需求选择合适的列表类型实现内容排版

能通过CSS灵活控制列表样式（符号、缩进、颜色等）

能完成“古诗推荐”模块的结构搭建与样式美化

素质目标

通过古诗推荐模块开发，增强对传统文化的兴趣

培养页面布局的逻辑性与审美能力

教学重点

三种列表的HTML结构与属性设置

list-style-type属性的取值与效果

列表项的间距控制（margin/padding）

教学难点

定义列表dl的嵌套使用

列表与其他布局方式的结合应用

教学模式

及教学方法

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

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

教学活动及主要环节

素质培养

课前导学

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

2.让学生搜集经典古诗文作品

3.完成课前测试题。

课中践学

【情景导入】

互动游戏：

展示网页截图（如古诗列表、商品目录、术语解释）

学生分组抢答：“这些内容适合用哪种列表？为什么？”

情境创设：

展示“古诗推荐”模块效果图，提出核心问题：

“如何用列表结构清晰展示古诗信息？”

【新知探究】

活动1：有序列表大发现

教师演示：

HTML:

ol

li《将进酒》-李白/li

li《沁园春·雪》-毛泽东/li

/ol

CSS:

ol{list-style-type:upper-alpha;}

学生实践：

将序号改为小写罗马数字，观察效果变化

活动2：无序列表变形记

小组竞赛：

用无序列表展示诗人朝代，要求：

唐代诗人用实心方块

宋代诗人用空心圆

元代诗人用自定义符号（如◆）

活动3：定义列表挑战

案例分析：

展示古诗注释需求，引导学生设计定义列表：

HTML:

dl

dt词牌名/dt

dd沁园春/dd

dt创作背景/dt

dd1936年毛泽东.../dd

/dl

互动问答：

“定义列表的dt和dd可以嵌套其他列表吗？”（引导学生尝试）

【项目实战】

任务：完成“古诗推荐”模块

1.结构搭建

学生独立完成HTML结构

2.样式美化

教师引导：

如何去除默认列表符号？

如何调整列表项间距？

如何实现“更多”右对齐？

四、任务拓展

布置拓展任务：思考如何用CSS定位实现“古诗推荐”模块的更多布局效果。（学生可在完成基本任务的前提下，完成拓展任务。）

课后拓学

1.完成任务3.3的课后练习。

2.扫码观看任务3.4中的微课视频，预习新课。

3.完成项目延伸任务，将结果文件上传至教学平台。

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

通过搜集并制作古诗推荐模块，让学生重温经典诗词作品，感受传统文化的魅力，增强民族自信。

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

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

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