项目2-2CSS类选择器与transition属性

项目2中华优秀传统文化网站——揭秘自然规律课程名称授课内容CSS类选择器与transition属性授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业大一学生。学生知识经验分析学生对CSS的作用有初步了解，但未系统学习选择器，无法精准控制样式。学生学习能力分析能创建结构化的HTML页面，但页面缺乏美感和交互性，学习CSS的意愿强烈。学生思想状况分析上节课感受到了用技术展现文化内容的成就感，本节课期望能做出更“炫酷”的效果。教学目标知识目标掌握CSS类选择器（.class）的语法和作用，理解其与标签选择器的区别；理解CSS的transition属性的含义、语法及常用参数（如过渡属性、持续时间）；理解:hover伪类的作用。能力目标能够使用类选择器为页面中的特定元素精确添加样式；能够使用transition属性结合:hover伪类，为网页元素创建简单的平滑过渡动画效果；能够独立完成“春天的节气”图文网页的布局与动态效果实现。价值目标通过实现“鼠标悬停，文字浮现”的交互效果，培养学生对用户体验的关注，树立“技术服务于人”的理念；通过动态展现节气文化，感悟自然规律不仅是静态的观察，更是动态的、可感知的过程，深化对“天人合一”思想的理解。重点难点解决策略：1.采用“定义-应用”两步法讲解，通过对比同一标签使用不同类选择器呈现不同样式，加深理解；思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.回顾上节课知识点：<p>,<img>,<div>三大标签的作用；2.展示一个已完成的精美“春天节气”页面（带动态效果），激发学习兴趣。1.通过提问方式快速回顾；“如果我们要做一个漂亮的节气页面，还缺什么？”引导学生思考CSS的重要性。2.展示最终效果图，明确本节课目标：“让我们的网页从‘静态图片’升级为‘动态交互体验’。”1.回答提问，展示上节课完成的“立春”静态页面；2.对比静态页面与动态效果页面，产生学习新技术的强烈动机。温故知新，建立知识连接，明确本节课学习目标。学习目标掌握CSS类选择器（.class）的语法和作用；理解CSS的transition属性的含义与语法；理解:hover伪类的作用。1.通过PPT清晰展示本课三维目标；2.用通俗语言解释目标，如“学完这节课，你就能让你网页里的元素‘动起来’。”聆听目标，明确本节课需要掌握的核心概念和技能关键点。使学生带着清晰、具体的目标学习，提高学习专注度和效率。课前测验在智慧树平台题库模块发布课前测验试题，平台反馈测验结果，对学生掌握情况摸底。教师通过智慧树发布线上问答和课前测验。学生完成智慧树平台线上问答和课前测验。了解学生知识水平，调整教学方案。参与式学习-CSS类选择器（20分钟）智慧树平台学习任务：一、为什么需要类选择器？问题引入：如何让多个<div>变成不同的颜色？标签选择器的局限性。二、类选择器语法与使用定义与应用；命名规范。三、实战引出知识点：1.通过对比演示，展示使用标签选择器无法差异化设置样式，引出类选择器的必要性；2.清晰讲解两步走：①定义样式.{类名}{}②应用样式class="{类名}"；3.强调命名要有意义（如.season-title），体现语义化。4.演示示例2-5，展示如何用类选择器精确控制顶部和底部<div>的样式。明确知识点：1.理解“类”的概念，就像给元素贴上一个“分类标签”，可以批量或单独控制；2.跟随教师代码，练习定义一个.highlight类（如红色字体），并应用于不同的标签；3.尝试为页面中不同的区域定义不同的类（如.left-area,.right-area）。4.修改自己的“立春”页面，使用类选择器为标题和段落设置不同颜色。思政元素：学习类选择器，体现了“分门别类”、“具体问题具体分析”的科学方法和工作智慧。参与式学习-Transition与交互（25分钟）智慧树平台学习任务：一、什么是过渡（Transition）？概念：属性值变化时，不是瞬间完成，而是平滑过渡；二、transition属性核心语法三、:hover伪类——交互的触发器四、强强联合：hover+transition引出知识点：1.使用生活化比喻（如灯光渐亮、车辆启动）解释“过渡”概念；2.讲解语法：transition:propertydurationtiming-functiondelay;，重点讲解property（哪些属性要过渡）和duration（过渡时间）；3.引入:hover伪类，说明其作用是“当鼠标悬停在元素上时”改变样式；4.核心演示：将:hover时的样式变化（如高度从30px变为100px）与transition结合，展示平滑动画效果（示例2-6）。明确知识点：1.理解transition是让变化“有过程”，提升用户体验的关键；2.重点记忆常用简写形式：transition:all0.5s;；3.练习为<div>设置:hover样式，如改变背景色；4.将transition属性添加到元素上，体验鼠标悬停时的平滑动画效果。1.思政元素：追求平滑的过渡效果，体现了对细节和用户体验的重视，是数字时代的工匠精神；2.引导学生自主探究；2.自然规律的演变（如节气更替）本身就是平滑的过渡，用技术模拟这一过程，体现了对“道法自然”的深刻理解。参与式学习-VR体验（5分钟）提问：“自然界的变化是瞬间完成还是有一个过程？我们的网页动画应该如何模仿这种自然的感觉？”参与式学习-完整项目实战（35分钟）智慧树平台学习任务：任务1：完成“春天的节气”页面布局（15分钟）按照教材图2-7和2.3任务1的步骤，使用<div>划分左右区域，插入“春天”主题图和六个节气图。重点：使用类选择器（如.season_left,.season_right_item）为各个区域定义样式（宽度、浮动等）。任务2：为节气图片添加文本升降效果（20分钟）核心挑战：在每个.season_right_item的<img>下添加一个<divclass="JieShao">和<p>标签存放节气文字。魔法实现：在CSS中，为<p>标签设置绝对定位（position:absolute;），初始位置在图片下方不可见（bottom:-250px;）；添加transition:all0.5s;属性；为.season_right_item添加:hover伪类，悬停时改变<p>标签的位置（bottom:-140px;），实现平滑升起。引出知识点：1.提供步骤截图和代码框架，引导学生搭建页面结构；2.演示如何添加介绍文字的结构；3.重点讲解实现动态效果的核心CSS代码（绝对定位、初始位置、transition,:hover时改变位置）；4.鼓励学生调试transition的时间参数，感受不同速度带来的体验差异。明确知识点：1.在HBuilder中创建seasons.html和season.css文件；2.参照教材步骤，完成页面基本布局；3.为每个节气图片添加介绍文字段落；4.在CSS文件中编写关键样式，实现鼠标悬停时文字上浮的效果；5.反复测试效果，调试至满意为止。1.思政元素：在实战中巩固“结构化思维”和“精益求精”的编码习惯;通过创造“发现之美”的交互体验，培养学生“用户至上”的设计理念和追求极致体验的工匠精神。2.综合应用前三节课知识，完成一个完整的功能模块，获得巨大成就感；参与式学习-总结提高（3分钟）课堂总结：总结关键知识：类选择器实现精准控制，transition实现平滑动画，:hover实现交互。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生“文化自信、技能成才”。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：根据本节课的知识，进一步丰富网页内容。2.预习任务：学习智慧树下一单元的课程，