第五单元 任务3 修饰页面元素（教案）-《计算机网络基础》（高等教育出版社）同步精品课堂

《计算机网络基础》教案 课 题 《第五单元 任务3 修饰页面元素》 课 型 讲授 课 时 2 授课班级 计算机专业学生 授课时间 授课教师 教材分析 本课程是高等教育出版社《计算机网络基础》网页制作模块的关键美化实操任务。它承接任务1和任务2，是学生从“会制作网页”向“会美化网页”跨越的重要节点。教材以“舌尖上的杭州”项目为主线，本教学设计将CSS核心知识与项目实践深度结合，通过“选择器认知 → 属性掌握 → 实战美化”的递进逻辑，引导学生系统掌握使用CSS美化网页的核心技能，完全符合项目化教学“认知—方法—实践”的递进规律。通过三个子任务的完成，学生将能够独立运用多种选择器和基本属性，将朴素的“舌尖上的杭州”主页美化为一个具有专业感的网页。 学情分析 授课对象为中职计算机专业学生，他们已对 HTML 基础知识有一定了解，具备搭建简单网页结构的能力，但对于如何使网页更美观、更具交互性，还需进一步学习 CSS 相关知识。该阶段学生思维活跃，对实际操作和贴近生活的案例充满兴趣，但抽象理解能力和知识综合运用能力有待提高。在学习 CSS 选择器和属性时，可能对概念理解不深，难以在实际场景中灵活运用；在进行 “舌尖上的杭州” 页面制作时，可能在布局设计、样式搭配以及实现互动效果上遇到困难。教师需通过生动实例、直观演示和实践指导，帮助学生掌握知识和技能，培养其解决问题的能力。 学习目标 ·1、学生能够理解并熟练运用 CSS 常见选择器（标签选择器、类选择器、ID 选择器、后代选择器等），清楚各选择器的特性及优先级。 ·2、掌握 CSS 基本属性，如字体属性（font - family、font - size 等）、文本属性（color、text - align 等）、背景属性（background - color、background - image 等），并能根据需求灵活应用。 ·3、能够使用 Hbuilder 工具，综合运用 CSS 选择器和基本属性，完成 “舌尖上的杭州” 页面的制作，实现页面的样式设计与互动效果。 学习重难点 重点：各类 CSS 常见选择器的语法、特性及应用场景；CSS 基本属性的含义、取值及实际应用。 难点：理解并正确处理 CSS 选择器的优先级，避免样式冲突； 教学方法 讲授法、任务驱动法 课前准备 教学课件、思维导图、相关图片资料 教学媒体 PPT 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1、真实情境导入（对比图展示）： 教师在大屏幕上同时展示两张对比图： 图1：学朴素版“舌尖上的杭州”主页（上节课所做的）。 图2：经过CSS美化后的版本。 2、提问：你们觉得哪个好看？有哪些不一样的变化？如何应用CSS样式？ 3、引出主题：给咱们的‘舌尖上的杭州’也美美化！ 1. 仔细观察并对比两张图。 2. 思考并回答教师提问，指出图2比图1好在哪里。 3. 对本节课的学习目标产生明确期待：学会CSS，让我们的页面也变得好看。 通过直观的对比图，让学生一眼看出“有无CSS”的巨大差异，产生强烈的“我也要做出图2那种样子”的美化欲望和动机。这种视觉冲击极大地激发学习热情。 活动二： 调动思维 探究新知 子任务一：CSS常见选择器及其特性 1. 引导讲解：结合“舌尖上的杭州”案例，逐一讲解5种选择器： - 标签选择器：如h1 { ... }，选中所有<h1>标签。 - 类选择器：如.food { ... }，选中所有class="food"的元素（在案例中用于两个美食段落）。 - ID选择器：如#top { ... }，选中唯一具有id="top"的元素（在案例中用于锚点）。 - 后代选择器：如.food img { ... }，选中.food内部的所有<img>元素（在案例中用于图片圆角）。 - 伪类选择器：如a:hover { ... }，选中鼠标悬停时的<a>元素。 2.css选择器优先级 · 讲解当多个选择器同时应用到一个元素时，会根据选择器的优先级来确定最终应用的样式。 · 介绍优先级的计算规则：内联样式（最高优先级）、ID 选择器、类选择器、标签选择器（最低优先级）。如果优先级相同，则按照样式表中出现的顺序，后面的样式会覆盖前面的样式。 1. 听讲并记录5种常见选择器的语法和用途。 2. 学习选择器优先级的计算规则，通过观察示例在浏览器中的效果，深入理解优先级对样式的影响，思考在实际应用中如何避免因优先级问题导致的样式错误。 以 “舌尖上的杭州” 这一贴近生活且有趣的案例为载体，讲解 CSS 常见选择器。让学生明白所学知识并非抽象概念，而是能直接应用于实际网页制作，帮助他们理解如何通过不同选择器实现对网页元素的精准样式控制，从而提升学生的学习兴趣和积极性。 活动三： 调动思维 探究新知 子任务二：CSS基本属性 1. 引导讲解：结合“舌尖上的杭州”案例，分三类讲解基本属性： - 文本样式：font-size、font-weight、color、text-decoration、text-align、line-height、text-indent。/ - 边框样式：border（缩写）、border-radius（圆角）。 - 背景样式：background-color、background-image、background-repeat、background-position。 2. 【互动探究二】——“属性功能大匹配”： - 学生四人一组，发放“CSS属性名称”卡片和“效果描述”卡片。 - 任务：在2分钟内，将属性名称与对应的效果描述正确匹配。 - 配对示例：color → “设置文字颜色”、border-radius → “设置圆角边框”。 - 教师总结点评。 1. 听讲并记录文本、边框、背景三大类属性的常用属性和值。 2. 参与“属性功能大匹配”游戏，巩固对各个属性作用的理解。 借助 “舌尖上的杭州” 案例讲解 CSS 基本属性，能让学生清晰看到这些属性在实际网页设计中的具体应用，理解它们如何共同塑造网页的视觉效果。 活动四： 调动思维 探究新知 子任务三：用HBuilder制作“舌尖上的杭州”主页美化（实操） 1.  发布任务：我们的目标是在HBuilder中，为“舌尖上的杭州”项目添加CSS样式，实现图2的效果。 2.  教师分步演示（强调易错点）： - 步骤一：创建外部样式表：在css文件夹中创建style.css。 - 步骤二：编写CSS规则：在style.css中按上述要求逐一编写规则。 - 步骤三：在HTML中引入样式表。 - 步骤四：修改HTML结构：为两个美食段落添加class="food"，为页脚段落添加class="footer"。 - 强调错误点：选择器写法（点.和井号#的区别）、属性值加单位、分号结尾、引入路径正确。 3. 学生实操（巡堂指导与互动）： - 让学生独立完成从编写CSS、引入样式表到预览效果的全过程。 4.展示你的网页。 1. 明确任务要求：在HBuilder中美化“舌尖上的杭州”主页，达到图2效果。 2. 跟随实操： - 创建style.css → 编写CSS规则（全局、标题、美食区、链接、页脚） → 在index.html中引入样式表 → 修改HTML结构（添加class） → 预览效果。 3. 完成基本要求后，尝试个性化修改（如调整颜色、字体大小）。 4. 完成的学生举手参与展示。 将综合实操任务拆解为清晰的步骤（创建CSS → 编写规则 → 引入 → 修改HTML → 预览），并通过“教师演示→学生跟练→即时鼓励展示”的闭环，确保每位学生都能在30分钟内完成一个包含背景、标题、边框、链接、页脚样式的完整美化任务，极大提升成就感。 活动六： 巩固练习 素质提升 1、 完成课堂的随堂练习。 2、 要选中所有<h1>标签，应该使用哪种选择器？要设置文字颜色，应该使用哪个CSS属性？ 思考并回答教师提问，回顾本堂课所学知识点 回顾所学，巩固知识点 课堂小结 作业布置 课堂小结：引导学生回顾本节所学知识。 作业：1、完成课后习题 2、完成思维导图的绘制。 板书设计 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $