项目4-1无序列表标签与有序列表标签

项目4中国传统文化网站-领略传统习俗课程名称授课内容无序列表标签与有序列表标签授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业大一学生，具备一定的计算机基础操作能力，但对网页开发概念较为陌生，缺乏系统化认知。学生知识经验分析学生对<ul>无序列表和<ol>有序列表的核心区别（并列vs有序）认知模糊，无法准确掌握两者的语法结构（如<ul>需嵌套<li>、<ol>的start/reversed属性），也难以根据网页内容需求（如“传统节日并列展示”vs“节日习俗步骤”）选择合适的列表标签，在实际排版中常出现标签嵌套错误或属性滥用问题。学生学习能力分析学生能初步编写简单HTML结构，但无法将<ul>和<ol>与传统节日网页的实际需求结合，例如不会用<ul>排版“春节、中秋、端午”等并列节日，也不能用<ol>展示“贴春联”的步骤，缺乏“需求→技术”的转化能力。学生思想状况分析青年学生思想活跃，对传统节日有一定生活认知，但缺乏对节日文化内涵的深度理解；在代码编写中存在畏难情绪，容易因语法细节（如标签闭合、属性拼写）出错而放弃，做事不够严谨。教学目标知识目标掌握<ul>无序列表标签的概念、语法结构（<ul>嵌套<li>）及使用场景（并列内容排版）；掌握<ol>有序列表标签的概念、语法结构，以及start（起始值）、reversed（反向排序）属性的用法；了解<ul>与<ol>的核心区别，能根据网页内容需求判断适用的列表标签。能力目标能使用<ul>无序列表完成“中国传统节日列表”等并列内容的网页排版；能使用<ol>有序列表完成“春节贴春联步骤”“端午包粽子流程”等有序内容的排版，并灵活设置start和reversed属性；能根据网页设计需求，准确选择<ul>或<ol>标签，解决实际排版问题。价值目标通过用列表标签排版传统节日内容，让学生在代码编写中了解节日文化（如春节的团圆内涵、端午的爱国精神），激发文化自信；培养学生严谨的代码编写习惯（如标签闭合、属性正确拼写），避免因细节失误影响网页效果。重点难点解决策略：思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入展示“无列表排版的传统节日文字（零散排列）”与“用列表排版的节日文字（整齐有序）”对比图展示对比图，提问“哪种排版更清晰？如何用HTML实现这种有序/并列排版？”观察对比图，小组讨论并分享对“列表排版优势”的初步想法通过视觉对比，激发学习列表标签的兴趣，明确学习必要性学习目标呈现本节课知识目标（<ul>/<ol>语法、区别）、能力目标（排版节日内容）、价值目标（文化自信） 用PPT展示三维目标，结合“春节列表+习俗步骤”案例，讲解“学会什么、能做什么、文化意义是什么”聆听并记录目标，与同桌交流“用列表传播传统文化”的理解 让学生清晰学习方向，建立“技术学习+文化传播”的双重意识课前测验智慧树平台发布测验题（如：<ul>的正确结构？<ol>start属性作用？节日列表选<ul>还是<ol>？）在平台发布测验，巡视查看完成情况，统计错误率高的题目独立完成测验，查看即时反馈，标记不懂的题目 检测预习效果，为课堂重点讲解提供依据，培养自主检测学习效果的习惯参与式学习-词汇学习（4分钟）讲解专业英语词汇：unorderedlist（<ul>）、orderedlist（<ol>）、startattribute等 用PPT展示词汇及释义，带读词汇；组织小组内互相听写词汇小组内朗读、记忆词汇；参与听写，纠正发音和拼写错误 强化专业术语认知，为后续代码学习打基础，提升专业英语素养参与式学习-VR体验（5分钟）VR体验“春节贴春联”场景，感受习俗步骤的有序性组织学生进行VR体验，引导观察场景中步骤的有序性；体验后提问“如何用列表标签展示这些步骤” 参与VR体验，观察并描述场景中的贴春联步骤；思考并回答如何用列表标签展示 参与式学习-播放视频（3分钟）参与式学习-任务一：传统习俗知识分类与流程呈现初建智慧树平台学习任务：引出知识点：1.对比纯文字与列表呈现的传统习俗内容，说明列表对信息梳理的优势；2.结合“习俗分类（非顺序）”“流程步骤（顺序）”场景，引出<ul>（非顺序）、<ol>（顺序）的必要性。明确知识点：1.掌握<ul><li>结构，能为端午习俗类别等非顺序知识创建无序列表；2.掌握<ol><li>结构，能为中秋步骤等顺序知识创建有序列表；3.理解两类列表在习俗分类/流程呈现中的不同作用。以任务驱动学习，结合平台资源，让学生在实践中掌握列表标签用法，同时完成页面模块制作，提升代码实操与知识应用能力参与式学习-任务二：传统习俗列表样式文化感美化（20分钟）智慧树平台学习任务：1.小组领取“春节民俗分类（<ul>）”“元宵灯会流程（<ol>）”模块，在平台研讨项目符号、序号的文化美化思路；2.提交含自定义样式（如灯笼符号、传统序号）的代码至“草稿区”。 引出知识点：1.对比默认与文化定制列表效果，说明样式对习俗氛围的烘托作用；2.引出list-style-type/list-style-image对列表文化适配性的作用。明确知识点：1.掌握list-style-type在<ul>/<ol>中设置符号、序号类型；2.理解list-style-image为<ul>添加传统符号（如灯笼图标）的方法；3.能为列表设计文化感样式。1.培养样式创新与文化适配能力；2.增强列表的传统习俗辨识度，提升文化感染力。参与式学习-任务三：传统习俗列表与页面布局整合（25分钟）智慧树平台学习任务：1.观看平台“列表与页面整合微课”，学习<ul>/<ol>与div、flex结合的布局方法；2.小组将“习俗分类（<ul>）”“发展流程（<ol>）”整合到“展示区”，提交效果并互评。引出知识点：1.对比孤立列表与嵌入页面的效果，说明布局整合对习俗页面整体性的作用；2.结合习俗页面“多模块展示”需求，引出列表与布局结合的逻辑。明确知识点：1.能结合div、flex将列表嵌入习俗页面指定区域；2.能通过padding/margin调整列表与其他元素间距，实现风格统一；3.理解列表在页面习俗叙事中的结构作用。提升综合代码能力（标签嵌套、多元素整合）；让传统节日展示更生动，深化“技术服务文化传播”的认知，培养审美与评价能力参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生“文化自信、技能成才”。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：根据本节课的知识，完成网站编写练习。2.预习任务：学习智慧树下一单元<a