项目3美化简单新闻页面（CSS入门）教案8

附件教案课程名称：授课教师：适用专业：教学单位：信息工程学院编制时间：2026年2月天津滨海汽车工程职业学院授课教案首页授课班级：课程名称课程类型□理论☑理论+实践□实训总学时64授课地点周次4授课学时2教学目标1.知识目标：（1）掌握字体样式属性（font-familyfont-sizefont-weightfont-stylefont）的用法。（2）掌握文本外观属性（colortext-aligntext-indentline-heighttext-decoration）的用法。2.技能目标：（1）能熟练运用字体与文本属性设置新闻页面的文本样式，实现字体、字号、颜色、对齐方式等效果。（2）会使用font复合属性简化样式代码，运用text-overflow处理溢出文本。3.素质目标：（1）培养“用户体验优先”的思维，通过合理的文本样式提升页面可读性。（2）养成简洁编码习惯，能用复合属性优化CSS代码结构。教学重点字体与文本核心属性的用法，font复合属性的语法顺序，text-indent的em单位应用。教学难点line-height行高与字号的关系，text-overflow实现溢出文本省略号显示的条件（需配合white-space:nowrapoverflow:hidden）。教材及教参《AI+网页前端开发企业级项目教程》版本978-7-5606-7987-1信息化资源PPT课件、学习通教学环节安排教学设计1.理实结合：以模块化任务为核心，知识点对应实操场景，避免纯理论讲解。2.三维目标：明确知识、技能、素质目标，自然融入思政元素。3.分层适配：设计基础、提高、拓展内容，适配不同学生水平。4.闭环反馈：遵循“讲解-实操-纠错-总结-复盘”逻辑，强化知识吸收。教学实施要求1.讲练结合：实操占比≥60%，以案例演示+自主实操为主。2.规范把控：强调语义化HTML、模块化CSS，注重代码细节与注释。3.问题导向：聚焦高频错误，精准突破教学难点。4.过程评价：结合课堂表现、作业质量、实操成果综合评价。教学后记课后练习1.完成教材对应习题拓展提高尝试探索RGBA颜色模式（如rgba(255,0,0,0.5)）的透明度效果；尝试用text-shadow为标题添加阴影效果，丰富文本视觉表现；对比italic与oblique的差异。教学反思教学内容与教学过程注释巩固复习知识回顾：提问基础选择器的优先级，类选择器与ID选择器的区别，检查上节课作业完成情况。2.过渡引导：“通过选择器定位元素后，如何设置丰富的文本样式？”引出字体与文本外观属性的学习。新课导入案例对比：展示文本样式杂乱（字号不一、颜色混乱、无缩进）与样式规范（字体统一、行高合理、首行缩进）的新闻页面对比，强调文本样式对用户体验的重要性。任务驱动：明确本节课目标——运用字体与文本属性，为新闻页面设置统一字体、合理行高、首行缩进、链接去下划线等效果。新课讲授字体样式属性教学：font-family：演示设置字体（如font-family:"微软雅黑",tahoma,arial;），说明字体fallback机制（浏览器按顺序加载），强调中文字体加引号。font-size：演示用px设置字号（如font-size:16px;），说明px为常用单位。font-weight：演示设置字体粗细（normal/bold/400/700），如font-weight:normal;取消标题加粗。font-style：演示设置字体风格（normal/italic），如font-style:italic;设置斜体。font复合属性：演示简化写法（font:font-stylefont-weightfont-size/line-heightfont-family;），如font:italicbold16px/24px"微软雅黑";，强调必须保留font-size和font-family。文本外观属性教学：color：演示用预定义颜色（red）、十六进制（#F00）、RGB（rgb(255,0,0)）设置文本颜色。text-align：演示left/center/right对齐方式，如text-align:center;设置标题居中。text-indent：演示用em设置首行缩进（1em=1个中文字符），如text-indent:2em;实现段落首行缩进2字符。line-height：演示设置行高（如line-height:24px;），说明行高与字号的合理比例（1.5-2倍）提升可读性。text-decoration：演示none（去除下划线）、underline（添加下划线），如a{text-decoration:none;}取消链接下划线。text-overflow：演示实现溢出文本省略号（需配合white-space:nowrap;overflow:hidden;）。学生实操：运用上述属性为新闻页面文本设置样式，教师巡视指导，纠正font复合属性顺序错误、text-indent单位使用不当等问题。课程思政理念渗透：结合文本样式的“统一性”与“可读性”，强调“细节决定体验”，培养学生关注用户需求、精益求精的工匠精神。价值引导：通过合理的行高、颜色搭配，引导学生理解“技术服务于人”，用专业技能提升产品的用户体验，树立正确的技术价值观。课堂总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。总结与作业梳理字体与文本核心属性的用法