模块2任务2.4：使用列表组织课程大纲（教案）-《网页设计与制作》（电子工业出版社）上好课

《任务2.4：使用列表组织课程大纲》教案 课 题 使用列表组织课程大纲 课 型 新授课 课 时 2课时 授课班级 授课时间 授课教师 教材分析 本节课选自《网页设计与制作》模块2“HTML网页元素”任务2.4，是模块2的核心内容之一。教材在任务2.1搭建HTML文档基本结构、任务2.2运用页面格式化标签组织课程概况、任务2.3使用图像展示课程特色的基础上，进一步讲解有序列表<ol>、无序列表<ul>与定义列表<dl>三类列表标签的语法格式、常用属性及适用场景，并以制作“课程大纲”页面为任务载体，要求学生综合运用三类列表组织“课程模块”“课程资源”“技术术语”三类信息。列表既是网页中组织导航菜单、目录、词条解释的基本手段，也是后续任务2.5使用超链接完成页面跳转、任务2.6使用语义化标签搭建课程页面框架的直接基础。教材内容按“语法格式—属性设置—案例演示—任务实施”层层递进，是培养学生规范编码习惯与信息结构化表达能力的关键一环。 学情分析 授课对象为中职计算机应用专业学生。学生已掌握HTML文档基本结构，能使用标题标签<h1>~<h6>、段落标签<p>、水平线标签<hr>及图像标签<img>制作简单页面，会在VS Code中新建文件并在浏览器中查看效果，具备继续学习的基础。但学生普遍存在三方面问题：一是代码书写不规范，标签漏写、嵌套错位的现象较多；二是习惯把全部内容堆进段落，缺乏“按信息类型组织内容”的意识；三是对成对的标签与属性记忆困难，容易混淆<ol>与<ul>、<dt>与<dd>。学生喜欢直观可见的页面效果，对纯语法讲解容易走神，需要通过“先讲清用哪种、再讲怎么写”的方式降低记忆负担。 学习目标 【知识目标】 ①理解有序列表、无序列表、定义列表的作用与适用场景，能说明“有顺序用<ol>、相并列用<ul>、要解释用<dl>”的选用依据。 ②掌握<ol>、<ul>与列表项标签<li>，以及<dl>与词条标签<dt>、定义标签<dd>的语法格式与嵌套关系。 ③掌握<ol>的start属性与type属性的取值及效果，掌握<ul>的type属性的取值及效果。 【能力目标】 ①能根据信息的类型正确选择列表类型并完成代码编写。 ②能综合运用三类列表制作“课程大纲”页面，做到标签成对闭合、层级嵌套正确。 ③能使用type、start属性调整列表的编号与项目符号样式，并完成嵌套列表的编写。 【素养目标】 ①养成标签成对书写、代码规范缩进的良好编码习惯。 ②树立“结构清晰、便于阅读”的网页信息组织意识，体会Web标准中语义化的价值。 ③在小组互评与作品展示中养成规范表达、虚心听取建议的职业素养。 学习重难点 【学习重点】 三类列表标签的语法格式，以及<li>、<dt>、<dd>与容器标签的配合使用； <ol>的start、type属性与<ul>的type属性的设置方法及显示效果。 【学习难点】 列表标签的多层嵌套书写与成对闭合，尤其是嵌套列表中外层<li>与内层<ul>的位置关系； <dl>中<dt>与<dd>的配对关系；根据内容语义正确判断该用哪一类列表，而不是凭“好不好看”随意选择。 教学方法 讲授法、示范操作演示法、任务驱动法、小组合作探究法 课前准备 阅读教材模块2任务2.4的内容，复习任务2.2中<h1>~<h6>、<p>、<hr>标签的用法；启动VS Code与Edge浏览器，准备好“website”项目文件夹。 教学媒体 多媒体教学设备、极域电子教室、VS Code、Edge浏览器 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1. 展示对比：在屏幕上同时呈现两个页面——A页面把“课程模块、课程资源、技术术语”全部写进<p>段落，文字连成一片；B页面使用三类列表组织完全相同的内容：教材图2-11“课程大纲”效果，引导学生观察并比较两页的差别。 2. 提出任务：请学生先在A页面中快速找出“CSS3样式设计排在第几项”“HTML5的含义是什么”，体验查找的困难；再在B页面中完成同样的查找，感受列表带来的便利。 3. 归纳提炼：根据学生的回答，点明列表的作用——把“有先后顺序的”“彼此并列的”“需要名词解释的”三类信息分开呈现，让页面条理分明，并引出本节课的三类列表。 4. 出示课题与目标：板书课题“任务2.4 使用列表组织课程大纲”，展示本节课的学习目标，要求学生带着“什么信息该用什么列表”这一问题进入新知学习。 1. 观察对比两个页面的展示效果，说出A、B两页在查找速度和信息层次上的差异。 2. 按教师要求完成两次查找任务，用自己的话描述“哪一类信息适合排成列表”。 3. 倾听教师归纳，初步建立“有序、无序、定义”三类列表的印象。 4. 明确本节课的学习任务与目标，带着问题进入新知学习。 1. 用“同一内容两种排版”的直观对比，把抽象的“信息组织”变成学生看得见、找得到的体验，降低理解门槛，激发学习兴趣。 2. 让学生在“找不到—很快找到”的真实体验中自己发现列表的价值，自然生成学习需求，为后续三类列表的学习做好铺垫。 活动二： 有序列表——按顺序排好队 1.新知讲授 （1）讲解有序列表<ol>的作用与适用场景：用于展示有先后顺序、不宜随意调换的信息，如课程模块、操作步骤、排行榜。 （2）结合教材讲解<ol>与<li>的语法格式，强调<li>必须写在<ol>内部，标签必须成对书写、正确闭合。 （3）讲解start属性：<ol start="n">用于重新定义编号的起始值，n为起始编号。 （4）用表格罗列type属性的5种编号样式：1阿拉伯数字、a小写英文字母、A大写英文字母、i小写罗马字母、I大写罗马字母，对应教材表2-6，并逐一在浏览器中演示效果。 2.例题分析 题目：教材example07.html。 带领学生逐行读代码，对比<ol type="1">、<li type="a">、<li type="I">在浏览器中的显示差异：教材图2-12；特别提醒学生注意教材案例中</ol>的位置，避免照抄时出现标签错配。 3.课堂问答 提问：“课程大纲里‘HTML5网页基本元素’和‘CSS3样式设计’两个模块的顺序能不能调换？换成无序列表合适吗？”要求学生自主思考并回答，对学生的回答给予肯定评价并鼓励更多同学参与。 4.背诵记忆 罗列<ol>的语法格式、type的5个取值与start属性的写法，要求学生在规定时间内完成识记，并通过抽查问答检验效果，要求识记不牢固的学生利用课后时间继续巩固。 5.课堂练习 教师展示单项选择题：要使有序列表以大写罗马字母I、II、III编号，正确的写法是哪一个，要求学生思考并回答，针对典型错误当堂讲评。 1. 跟随教师讲授，在教材上标记<ol>的语法格式，记录type的5种编号样式与start属性的作用。 2. 逐行分析example07.html，说出三种编号在浏览器中的不同效果，比较start与type的区别。 3. 参与课堂问答，判断“课程模块”该用哪类列表并说明理由。 4. 在规定时间内完成知识点识记，接受教师抽查，认真作答课堂练习题。 1. 把“能不能调换顺序”作为选用依据，先讲语义再讲样式，帮助学生建立“先判断信息类型、再选择标签”的思维，突破“只会照抄不会选用”的难点。 2. 用表格罗列type取值、用案例逐行演示，把零散的属性系统化，降低记忆难度。 3. 通过问答、背诵、练习三个环节层层巩固，及时检验学生的掌握情况，为后续两类列表的学习打下基础。 活动三： 无序列表——并列平等的“课程资源” 1.新知讲授 （1）讲解无序列表<ul>的作用与适用场景：用于展示彼此并列、没有先后之分的信息，如课程资源清单、导航菜单。 （2）讲解<ul>与<li>的语法格式，并与<ol>对比：两者都使用<li>，区别只在于有无编号。 （3）讲解默认符号样式：一级列表默认为实心圆disc，嵌套在其他列表中的二级列表默认为空心圆circle。 （4）用表格罗列type属性的3种取值（disc实心圆形、circle空心圆形、square方形），对应教材表2-7。 2.例题分析 题目：教材example08.html（<ul type="square">春夏秋冬）。 先让学生根据type="square"预测运行效果，再运行展示教材图2-13，强化“属性值决定符号样式”的认识。 3.课堂问答 提问：“‘课件下载、视频教程、在线练习’三项资源谁先谁后？该用<ol>还是<ul>？”要求学生独立判断并说明理由，给予肯定评价。 4.背诵记忆 罗列<ul>的语法格式与type的3种取值，要求学生在规定时间内完成识记，并开展抽查问答。 5.课堂练习 教师展示单项选择题：要把项目符号改成空心圆形，正确的写法是哪一个，要求学生思考作答并点评。 1. 跟随教师讲授，记录<ul>的语法格式与type的3种取值，并在教材表2-7上做标记。 2. 先预测example08.html的运行效果，再与实际效果对照，说出type属性与符号的对应关系。 3. 参与课堂问答，判断“课程资源”该用哪类列表并说明依据。 4. 完成知识点识记与课堂练习，主动回应教师提问。 1. 通过与<ol>的对比讲授，让学生用“有没有顺序”这一条标准区分两种列表，避免机械记忆。 2. “先预测后验证”的例题处理方式，把被动听讲变成主动思考，强化属性与效果的对应关系。 3. 通过问答、背诵与练习及时巩固，帮助学生扎实掌握<ul>的用法。 活动四： 定义列表——名词解释的“术语表” 1.新知讲授 （1）讲解定义列表<dl>的作用：用于对技术术语、名词进行“名词—解释”的配对展示，如术语表、常见问题解答。 （2）用“词典”类比讲解三组标签的层级关系：<dl>是整本词典，<dt>是词条，<dd>是释义；一个<dt>后面可以跟多个<dd>，<dd>默认全文缩进显示。 （3）结合教材讲解<dl>、<dt>、<dd>的语法格式，强调三者是“容器—词条—解释”的关系，不可互换位置。 2.例题分析 题目：教材example09.html（词条“红色”）。 逐行分析1个<dt>与4个<dd>的配对关系，运行展示教材图2-14的缩进效果，引导学生观察<dd>的缩进特点。 3.对比归纳 用表格对比三类列表（所用标签、适用场景、默认显示效果、常用属性），师生共同总结出选用口诀：“有顺序用<ol>，相并列用<ul>，要解释用<dl>”。 4.背诵记忆 罗列三类列表的标签与选用口诀，要求学生在规定时间内完成识记，并通过抽查问答检验。 5.课堂问答 提问：“要在页面里解释<img>、<a>、<p>三个标签的功能，应该用哪一类列表？<dt>和<dd>分别写什么？”要求学生作答并互相补充。 1. 跟随教师讲授，理解<dl>、<dt>、<dd>三者的关系，并在教材上标记语法格式。 2. 逐行分析example09.html，说出<dt>与<dd>的配对数量和<dd>的缩进效果。 3. 与教师共同完成三类列表的对比表格，熟记选用口诀。 4. 完成知识点识记，参与课堂问答，尝试说出三个标签的功能解释该怎么写。 1. 用“词典—词条—释义”的生活类比，把三组标签的层级关系讲清楚，突破<dt>与<dd>易混淆的难点。 2. 通过三类列表的横向对比与口诀提炼，帮助学生把零散知识结构化，形成可迁移的选用依据。 3. 通过问答与背诵检验学习效果，为任务实施环节的独立编写做好准备。 活动五： 任务实施——制作“课程大纲”页面 1.任务布置 出示任务：对照教材图2-11，在VS Code中创建“任务2-4.html”，使用三类列表组织“课程模块”“课程资源”“技术术语”三部分内容，要求标签成对闭合、层级正确。 2.示范演示 步骤1 准备工作：打开VS Code，在“website”文件夹中新建“任务2-4.html”，先写出<!DOCTYPE html>、<html>、<head>、<meta charset="utf-8">、<title>、<body>的文档骨架。 步骤2 编写代码：先写<h1 align="center">课程大纲</h1>与<hr width="80%" color="#3366CC" size="2"/>分隔线；再依次添加<ol>展示课程模块、<ul type="square">展示课程资源、<dl>展示技术术语。演示“先写外层容器、再写内部项、最后补闭合标签”的书写顺序，提醒学生嵌套时内层<ul>必须放在外层<li>里面。 步骤3 查看效果：保存文件后在Edge浏览器中打开，对照有序列表的编号、无序列表的方形符号、定义列表的缩进解释逐一验证是否达到预期。 3.学生实操 题目要求：完成教材“试一试2-4.html”。 1. 为有序列表设置type="I"，将编号样式修改为大写罗马字母。 2. 为无序列表设置type="circle"，将项目符号修改为空心圆形。 3. 创建嵌套列表：在有序列表的某个<li>标签中嵌套一个无序列表，展示子模块内容。 4. 使用定义列表展示<img>、<a>、<p>三个常用HTML标签的功能解释。 5. 为有序列表设置start="5"，观察编号起始值的变化。 教师巡视指导，针对“标签未闭合”“<li>写在<ol>外面”“<dt>与<dd>颠倒”等共性问题集中讲评。 4.展示评价 投屏展示2~3份学生作品，从“列表类型选用是否正确”“标签是否成对闭合”“页面效果是否条理清晰”三个方面组织师生共同点评，肯定优点并指出改进方向。 1. 明确任务要求，跟随教师示范在VS Code中新建文件并写出HTML文档骨架。 2. 观察教师的书写顺序，重点记录嵌套列表的写法与闭合顺序。 3. 独立或以小组合作的形式完成“任务2-4.html”与“试一试2-4.html”的编写，保存后在浏览器中检查效果，遇到报错先对照教材自查，再向教师或同学求助。 4. 观看同学作品并参与点评，对照评价标准修改完善自己的页面。 1. 采用“教师示范—学生模仿—独立实操”的递进方式，让基础薄弱的学生也能跟着做出可运行的页面，落实能力目标。 2. 以教材“试一试”的五项要求作为实操任务，把type、start、嵌套等难点全部落到代码里，在真实操作中暴露并纠正错误。 3. 通过作品展示与师生共评，让学生在互评中发现共性问题，强化规范编码意识，提升表达与反思能力。 课堂小结 作业布置 【课堂小结】 本节课我们认识了网页中的三类列表：用<ol>配合<li>展示有先后顺序的信息，可用start属性改变起始编号、用type属性设置5种编号样式；用<ul>配合<li>展示并列平等的信息，可用type属性设置disc、circle、square三种符号；用<dl>配合<dt>和<dd>完成“名词—解释”的配对展示；并通过制作“课程大纲”页面把三类列表综合运用到同一个页面中。请同学们记住选用口诀：“有顺序用<ol>，相并列用<ul>，要解释用<dl>”。 【作业布置】 1. 预习教材任务2.5“使用超链接完成页面跳转”，思考导航栏为什么常用无序列表来制作。 2. 完善课堂完成的“任务2-4.html”：为有序列表设置type="I"，为无序列表设置type="circle"，并在其中一个<li>里嵌套一个无序列表展示子模块，将最终效果截图提交。 3. 新建“试一试2-4.html”：使用定义列表展示<img>、<a>、<p>三个标签的功能解释，并为有序列表设置start="5"，观察编号起始值的变化。 板书设计 任务2.4 使用列表组织课程大纲 一、有序列表　<ol> + <li>　　属性：type：1/a/A/i/I、start="n" 二、无序列表　<ul> + <li>　　属性：type：disc/circle/square 三、定义列表　<dl> + <dt> + <dd>　 选用口诀：有顺序用<ol>，相并列用<ul>，要解释用<dl> 教学反思 本节课以“同一内容两种排版”的对比导入，学生能较快体会到列表在信息组织上的作用，导入环节的参与度预计较高。三类列表分开讲授、最后横向对比并提炼口诀的方式，有助于学生建立选用依据，但课堂容量偏大，活动四与活动五的时间需要严格控制，必要时可将“试一试”的第3、4两项调整为课后完成。实操环节中，学生最容易出错的是嵌套列表的闭合位置和<dt>、<dd>的先后顺序，后续需在巡视时有针对性地个别指导，并把典型错误代码投屏讲评。此外，个别学生对属性值的记忆仍有困难，可在后续课时中通过“看效果猜属性”的小游戏反复强化。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $