模块2任务2.2和2.3：使用页面格式化标签组织课程概况和使用图像展示课程特色（教案）-《网页设计与制作》（电子工业出版社）上好课

《任务2.2和2.3：使用页面格式化标签组织课程概况和使用图像展示课程特色》教案 课 题 使用页面格式化标签组织课程概况和使用图像展示课程特色 课 型 新授课 课 时 2课时 授课班级 授课时间 授课教师 教材分析 本节课选自《网页设计与制作》模块2“HTML网页元素”中的任务2.2“使用页面格式化标签组织”课程概况“与任务2.3”使用图像展示课程特色“。学生已在模块1初识网页与HTML的基本概念，并在任务2.1中掌握了DOCTYPE、html、head、body四个核心部分，能编写”我的第一个网页“。本节课承接任务2.1的文档框架，进入真正的页面内容组织阶段：先运用标题标签<hn>、段落标签<p>、水平线标签<hr/>、换行标签<br/>、预格式化标签<pre>和文本格式化标签（<strong>、<em>等），把”课程概况“页面的文字内容组织得层级分明、重点突出；再学习常见网页图像格式的特点与选用，认识图像标签<img/>的属性，掌握绝对路径与相对路径的写法，完成图文混排的页面效果。教材按”任务描述—任务分析—知识链接—任务实施—试一试“的体例编排，内容由标签语法到属性配置、由单一文本页面到图文混排页面，层层递进；既是后续列表、超链接、语义化标签的学习基础，也是对接网页设计岗位能力、对口升学考试中HTML基础标签部分的重点内容，起承上启下的关键作用。 学情分析 授课对象为中职计算机应用专业学生，已完成模块1的学习，并在任务2.1中能借助VS Code搭建规范的HTML文档结构，会用标题标签、段落标签写出简单页面，掌握双标签、单标签与注释标签的书写规范。学生对“看得见的页面效果”兴趣浓厚、动手意愿强，但普遍存在三类问题：一是把Word的排版习惯带入代码，习惯用回车键换行、用空格键缩进，不理解HTML会把它们当成一个空格处理；二是只关注“字加粗了没有”，不能区分<strong>与<b>的语义差异，缺乏“语义优先”的编码意识；三是喜欢展示图片但版权意识薄弱，习惯直接从搜索引擎“另存为”后使用。此外，图像路径是中职学生最容易卡住的技能点，相对路径中“../”的层级推算需要具象演示。本节课正是规范其代码习惯、路径意识与版权意识的关键节点。 学习目标 【知识目标】 ①掌握标题标签<hr>、段落标签<p>的书写格式与align属性的用法； ②掌握水平线标签<hr/>、换行标签<br/>、预格式化标签<pre>的作用与常用属性； ③掌握文本格式化标签<b>/<strong>、<u>/<ins>、<i>/<em>、<s>/<del>的显示效果与语义区别； ④了解GIF、PNG、JPG、WebP四种常见网页图像格式的特点与选用场景，掌握图像标签<img/>的常用属性； ⑤掌握绝对路径与相对路径的区别，掌握相对路径的4种书写方式。 【能力目标】 ①能运用页面格式化标签制作层级清晰、重点突出的“课程概况”页面； ②能正确使用<img/>标签插入图像，并设置width、height、border、align、hspace等属性； ③能依据图像与网页文件的位置关系正确书写相对路径，制作图文混排的“课程特色”页面； ④能用浏览器预览页面，并初步排查“换行无效”“图像裂图”等常见问题。 【素养目标】 ①培养规范的HTML代码编写习惯，自觉遵循语法规则，写出可读性强、便于维护的代码； ②树立知识产权保护意识，使用网络图像、字体等外部资源时规范引用、主动获取授权，杜绝侵权行为； ③养成“语义优先”的编码意识，理解<strong>与<b>的区别不仅关乎外观，更关乎可访问性与搜索引擎识别。 学习重难点 【学习重点】 1. 标题标签<hn>的层级含义与align属性的用法，段落标签<p>的用法； 2. 水平线标签<hr/>的属性对显示效果的控制； 3. 文本格式化标签中<strong>与<b>、<em>与<i>的语义区别； 4. 图像标签<img/>的必备属性src及alt、title、width、height、border、align的用法； 5. 相对路径的4种书写方式。 【学习难点】 1. 换行标签<br/>与段落标签<p>的区别，以及回车键、空格键在HTML中“失效”的原因； 2. 相对路径中“../”表示返回上一级文件夹的层级推算，以及图像无法显示时的路径排查； 3. 单标签的书写习惯与属性配置。 教学方法 讲授法、示范操作演示法、任务驱动法、对比教学法 课前准备 阅读教材模块2任务2.2、任务2.3的内容，熟悉页面格式化标签与图像标签的用法；检查机房内VS Code、Edge浏览器及Live Server插件是否可正常使用；准备好模块1任务1.3已建的website项目文件夹结构，并准备“用回车键换行的错误示例”“鼠标悬停提示截图”“图像裂图对比截图”，以及本节要用的课程特色图像素材zhineng.png。 教学媒体 多媒体机房、电子教室广播软件、VS Code、Edge浏览器 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1. 教师广播展示两组对比效果：A组是“文字堆砌版”课程概况初稿，没有标题层级、没有分隔线，关键技术名词淹没在正文中；B组是教材图2-3“页面格式化标签的使用效果”，标题醒目、分隔清晰，用<strong>强调的关键词一眼可见。 2. 提问：“同样是这份课程概况，为什么B组一眼就能看出哪是标题、哪是正文、哪些是关键词？” 3. 教师现场删除B组代码中的<hr/>标签并刷新页面，让学生直观看到去掉分隔线后页面结构感立刻变弱。 4. 再展示教材图2-10“图像标签的使用效果”，追问：“如果课程网站只有密密麻麻的文字，同学们还有兴趣读下去吗？” 5. 点明本节课的两个任务与学习目标：用页面格式化标签组织“课程概况”，用图像展示“课程特色”，让精品课程网站的页面从“能看”走向“好看、好读”。 1. 观察两组页面的对比效果，主动说出自己的发现。 2. 观看教师删除<hr/>再刷新的即时演示，感受分隔线对页面结构清晰度的作用。 3. 对比纯文字页面与图文混排页面，说出图像对阅读兴趣的影响。 4. 明确本节课两个任务的学习目标，带着“怎样让文字更有条理、怎样插入图片”的问题进入新知学习。 1. 用同一页面中“修改前、修改后”两个版本做对比，制造认知冲突，让学生自己生成对格式化标签与图像的学习需求。 2. 通过“删除标签—刷新页面”的即时演示，把抽象标签变成看得见的效果差异，降低理解门槛。 3. 情境取自教材图2-3、图2-10的真实效果，任务真实、拿来即可讲。 活动二： 页面格式化标签 ——标题、段落与分隔 1.新知讲授 （1）标题标签<hn>：HTML提供6级标题，<h1>到<h6>字号依次递减，<h1>级别最高、常用于页面主标题；语法为<hn align="对齐方式">文本标题</hn>。 （2）段落标签<p>：用于定义段落，浏览器中段前段后会自动换行；语法为<p align="对齐方式">段落文本</p>。 （3）水平线标签<hr/>：单标签，默认添加一条水平线，常用属性有align、size、color、width四个，分别控制对齐方式、粗细、颜色与宽度。 （4）换行标签<br/>：仅实现换行，不会在前后添加空白间距，属于单标签。 （5）预格式化标签<pre>：让文字按照源码中的换行与空格原样显示，可替代大量的<br/>和&nbsp;。 2.对比分析 演示教材example01～example05五个示例页，重点讲清“在VS Code里按回车键换行，浏览器中并不会真正换行，只会显示为一个空格”。 出示两段代码：一段用<p>分段、一段连用<br/>换行，运行后让学生观察行间距差异，归纳“<p>是段落、带间距；<br/>只换行、不带间距”的结论。 3.背诵记忆 罗列5分钟速记清单：①标题6级<h1>～<h6>，字号递减；②align三值left/right/center；③分隔线<hr/>四属性align、size、color、width；④换行<br/>、原样排版<pre>；⑤回车键在HTML里只是一个空格。要求学生在规定时间内完成识记，并通过问答抽查，识记不牢固的学生课后继续巩固。 4.课堂问答 ①<p>和<br/>都能换行，区别是什么？②想在页面中保留诗句原有的换行排版，应使用哪个标签？③<hr width="80%">中的80%是什么含义？要求学生自主思考并主动回答问题，给予肯定评价并鼓励全员参与。 5.课堂练习 发布教材“试一试2-2”中的对应小题：①在页面中添加<h3>～<h6>各级标题，观察字号变化；②使用<hr/>添加3条不同颜色、粗细、宽度的水平线；③在段落中使用<br/>强制换行并与<p>对比。教师巡视点评，对积极作答的学生给予肯定。 1. 跟随教师逐一学习5个页面格式化标签，在教材上批注语法格式与常用属性值。 2. 观察“<p>分段”与“<br/>换行”的运行效果，同桌讨论后归纳两者区别。 3. 完成5分钟限时背诵，接受教师抽查，对识记薄弱项做好课后巩固标记。 4. 思考并抢答3道课堂问答题，说清<p>与<br/>的用法差异。 5. 在VS Code中新建文件完成“试一试2-2”的①③小题，保存后用Edge浏览器预览，验证“回车键换行失效”的现象。 1. 按“语法格式—演示效果—对比归纳”的顺序讲授，把5个标签一次讲清、讲透，符合中职学生由感性到理性的认知规律。 2. 用“<p>与<br/>”的对比演示突破本节第一个难点，让学生亲眼看到差异而不是死记结论。 3. 通过背诵、问答与练习三层强化，夯实标签记忆，为下一活动的文本格式化标签扫清语法障碍。 活动三： 文本格式化标签与 “课程概况”页面制作 1.新知讲授 （1）讲解4组文本格式化标签的显示效果：<b>/<strong>加粗、<u>/<ins>下划线、<i>/<em>倾斜、<s>/<del>删除线。 （2）重点讲清语义区别：<strong>表示内容非常重要，搜索引擎与读屏软件会把它识别为重点信息；<ins>表示文档中新增、增补的内容；<em>表示语气上需要着重强调的词；<del>表示已被删除、废弃的旧内容；而<b>、<i>只是单纯的加粗与倾斜，不代表语义上的强调。 2.例题分析 题目：制作“课程概况”页面。教师机广播，逐行讲析教材代码： · <h1 align="center">网页设计与制作课程</h1>——一级标题居中，作为页面主标题； · <hr width="80%" align="center" color="#FF0000" size="1"/>——红色细分隔线，宽度为浏览器窗口的80%； · <h2>课程简介</h2>与<h2>课程目标</h2>——用二级标题搭建两个内容板块的层级； · <p>本课程旨在帮助学生掌握<strong>HTML5</strong>和<strong>CSS3</strong>的核心技术 </p>说明这里为什么用<strong>而不用<b>：因为HTML5、CSS3是本段真正重要的关键词； · 现场演示：把<strong>改成<b>后刷新页面，引导学生观察“外观一模一样，但源代码的语义发生了变化”。 3.任务布置 要求学生按教材“任务实施”三步，在VS Code中创建“任务2-2.html”，制作如图2-3所示的“课程概况”页面。 4.巡回指导 学生动手操作，教师巡视，重点帮助出现“漏写结束标签”“align属性写错位置”“修改后忘记保存”等问题的学生，提醒“先保存、再运行”。 5.成果展示 选取2～3名学生广播展示作品，并说明“哪里用了<strong>、为什么用”，教师给予肯定评价与针对性点评。 1. 跟随教师学习4组文本格式化标签，在教材表2-4旁批注每组标签的语义含义。 2. 认真听教师讲析“课程概况”例题代码，在草稿本上画出页面的<h1>—<hr>—<h2>—<p>层级结构。 3. 观察“把<strong>改成<b>”的对比演示，说出“外观一样、语义不同”的结论。 4. 明确任务要求，独立动手创建“任务2-2.html”，对照教材图2-3检查自己的页面。 5. 展示作品并说明代码中<strong>的使用理由，听取点评后修改完善。 1. 把“语义区别”作为本活动的突破口，用“改一个标签、刷新一次页面”的方式让抽象语义可视化，纠正学生只关注加粗效果的习惯。 2. 例题直接采用教材任务实施代码并逐行讲析，保证内容与教材一致、拿来即可讲。 3. 通过“任务布置—巡回指导—成果展示”的任务驱动流程，让学生亲历完整制作过程，把标签知识转化为页面成果。 活动四： 图像的格式、标签与路径 ——制作“课程特色”图文混排页面 1.新知讲授 （1）常见图像格式：GIF支持动画、无损压缩且支持透明，适合Logo、小图标等色彩单一的图像；PNG无损压缩、支持透明但不支持动画，半透明图像可用真彩色PNG；JPG有损压缩但色彩丰富，专为照片设计，适合Banner、商品照片与较大插图；WebP是Google推出的高效格式，有损压缩比JPEG再小25%～34%。归纳选用原则：小图或网页元素用GIF、PNG-8，半透明图像用PNG32，色彩丰富的图像用JPG或WebP，动态图像用GIF或WebP。 （2）图像标签<img/>：语法为<img src="图像URL"/>，src是必备属性；常用属性还有alt、title、width、height、border，以及align。 （3）图像路径：绝对路径是含盘符的完整硬盘路径或完整的网络地址，相对路径以当前HTML文件为起点、不含盘符。相对路径有4种写法： ①图像与网页在同一文件夹，写src=“logo.gif”； ②图像在子文件夹，写src=“images/logo.gif”； ③图像在多级子文件夹，写src=“images/banner/logo.gif”； ④图像在上一级文件夹，写src=“../images/logo.gif”。教师打开website项目的真实目录树，逐一对应这4种位置关系。 2.例题分析 题目：制作图文混排的“什么是人工智能？”页面。结合教材步骤讲析： · 准备工作呼应任务1.3：同级新建img文件夹，放入素材zhineng.png； · <img src="img/zhineng.png" width="200px" alt="人工智能技术" align="left" hspace="30" title="人工智能技术"/>——相对路径引用子文件夹中的图像，width控制显示尺寸，align=“left”配合hspace=“30”实现“图像居左、文字环绕、留出30像素水平间距”的效果； · <h2><font face="微软雅黑" size="6" color="#545454">什么是人工智能？</font></h2>——按教材要求使用<font>控制字体、字号与颜色，后续模块将系统学习用CSS控制样式； · 正文用<p style="…">配合<strong>自主决策</strong>、<strong>模式识别</strong>、<strong>分析数据</strong>突出核心功能，并用&nbsp;实现段首缩进，呼应活动二中“空格键在HTML中失效”的知识点。 · 现场演示三种典型错误：把路径改成绝对路径再刷新对比差异；把图片文件名改错后刷新引出“裂图”与alt替代文本；只写width不写height观察图像是否变形，顺势归纳“图像不显示先查路径与文件名”的排错口诀。 3.任务布置 要求学生按教材“任务实施”三步创建“任务2-3.html”，先用教师统一提供的素材zhineng.png完成图2-10的图文混排效果。 4.课堂练习与巡回指导 发布教材“试一试2-3”：①将3张不同格式的图像放入img文件夹并插入页面，分别设置不同的width、height、border；②为每张图像添加alt和title，测试图像无法显示时的效果；③将其中一张设为align=“right”，观察文字环绕；④分别用绝对路径与相对路径引用同一张图，对比差异。教师巡视，重点帮扶路径书写有误的学生。 5.素养落点与成果展示 教师强调：“从网上下载的图像若用于公开发布的网站，必须确认授权与出处”——呼应教材模块2的知识产权素养要求；随后选取2～3名学生展示作品，并说明图像路径的书写依据。 1. 跟随教师学习4种网页图像格式的特点与选用原则，在教材上标注每种格式适用的场景。 2. 学习<img/>标签的属性，在教材表2-5旁批注每个属性的作用，特别记住src是必备属性。 3. 跟着教师在真实目录树中核对相对路径的4种写法，在草稿本上画出website项目的文件夹结构。 4. 独立完成“任务2-3.html”与“试一试2-3”，验证alt、title、align、hspace的实际效果。 5. 展示作品并说明图像路径的书写依据，说出图像不显示时的排查步骤。 1. 把图像格式、<img/>属性与相对路径三块内容放在同一个真实页面任务中完成，避免知识碎片化。 2. 用“绝对路径对比、文件名改错致裂图、只写width导致变形”三组现场错误演示，让学生在排错中掌握路径知识。 3. 通过“新知识—例题—练习”的递进，让学生当堂产出图文混排作品；版权提示紧扣教材素养目标，把技术规范与职业素养落在具体行为上。 课堂小结 作业布置 【课堂小结】 本节课围绕“精品课程网站”项目完成了两个任务：一是用<h1>/<h2>搭建标题层级、<p>组织正文、<hr>分隔板块、<br>强制换行、<pre>保留原排版，并用<strong>、<em>等文本格式化标签突出关键词，把“课程概况”页面做得层级分明、重点突出；二是认识了GIF、PNG、JPG、WebP四种网页图像格式，学会了用<img/>插入图像并配置src、alt、title、width、height、border、align等属性，掌握了相对路径的4种写法，完成“图像居左、文字环绕”的图文混排页面。同时要记住两句话：写代码不仅要“看起来对”，更要“语义对、路径对、来源合法”；<p>带间距、<br/>只换行，<strong>有语义、<b>只有样式。 【作业布置】 1. 预习模块2任务2.4“使用列表组织课程大纲”，思考：无序列表<ul>和有序列表<ol>分别适合展示什么内容？ 2. 完善“课程概况”页面：新建并补充“<h2>课程特色</h2>”小节，要求至少使用一次<hr/>分隔、一次<br/>换行、一处<strong>强调关键词，保存后用浏览器预览效果。 3. 制作“课程特色”图文混排页面：在website项目中放入至少2张课程相关图像，使用相对路径引用，设置width与border，分别为每张图添加alt和title，其中一张使用align=“right”实现图文环绕，并用<pre>标签展示一小段自己的HTML学习笔记。 4. 上交方式：源文件提交至学习平台，下节课抽查展示。 板书设计 一、页面格式化标签 <h1>～<h6>　标题6级，字号递减　align：left / right / center <p>　段落　　<br/>　换行 <hr/>　水平线，单标签　属性：align、size、color、width <pre>　按源码原样保留换行与空格 回车键、多个空格在HTML中只显示为一个空格 2、 文本格式化标签 <b>/<strong> 加粗　　　<u>/<ins> 下划线 <i>/<em> 倾斜　　　　　<s>/<del> 删除线 <strong>=重要　　<em>=语气着重 <ins>=新增内容　　<del>=已删除　　<b>、<i>=只有样式、没有语义 三、图像 格式：GIF 动画 · PNG 透明 · JPG 照片 · WebP 小体积 <img src=" " alt=" " title=" " width=" " height=" " border=" " align=" "/> src为必备属性；alt是图像不能显示时的替代文本；title是悬停提示 路径：绝对路径 = 带盘符的完整路径 / 完整网址 相对路径：①同文件夹写文件名　②子文件夹 images/文件名 　　　　　③多级逐级拼　　　　④上一级 ../images/文件名 教学反思 本节课以“课程概况”页面两个版本的对比导入，学生对“为什么要用这些标签”有了直观感受，学习积极性较高；通过“把<strong>改成<b>刷新”“把文件名改错致裂图”两组对比演示，有效突破了“语义区别”与“相对路径”两个难点，多数学生能当堂说出“外观一样但含义不同”“图像不显示先查路径”。不足之处在于：相对路径中“../”返回上一级的层级推算仍有近三分之一学生需要同伴帮助才能完成，后续需在website项目中增加一层嵌套目录的专项练习；另外，个别学生在拓展练习中仍习惯使用从搜索引擎下载的图片，虽已现场提示授权规范，后续还应在素材发放环节统一提供可商用图源清单，把知识产权意识真正落到实处。此外，演示节奏还需适当放慢，并为操作较慢的学生准备操作步骤提示卡。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $