项目4-3CSS属性之字体属性与文本属性

项目4中国传统文化网站-领略传统习俗课程名称授课内容CSS属性之字体属性与文本属性授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业大一学生，具备一定的计算机基础操作能力，但对网页开发概念较为陌生，缺乏系统化认知。学生知识经验分析学生对CSS字体属性（font-family、font-size、font-weight、color）的语法和缩写形式掌握不牢，常混淆font缩写的顺序（如把“font:bold16px宋体”写成“font:16pxbold宋体”）；对文本属性（line-height、text-align、letter-spacing、text-decoration）的作用理解模糊，无法根据“传统节日展示页面”需求（如“节日标题居中、正文行高适中”）设置样式。学生学习能力分析能编写“能用但不美观”的网页，缺乏“审美+技术”的结合能力，不会用CSS优化传统节日页面的文字样式（如节日标题用红色粗体，正文用清晰的行高）；对“内部样式表”（<style>标签）的使用不熟练，常出现选择器与属性对应错误。学生思想状况分析对“美化传统节日网页”有兴趣，但在样式调试（如颜色搭配、行高调整）中缺乏耐心；对传统节日的视觉文化（如春节常用红色、中秋常用黄色）了解不深，难以将“文化氛围”与“CSS样式”结合。教学目标知识目标掌握CSS字体属性的用法：font-family（字体类型）、font-size（字体大小）、font-weight（字体粗细）、color（字体颜色），以及font属性的缩写形式（顺序：粗细→大小→字体）；掌握CSS文本属性的用法：line-height（行高）、text-align（文本对齐）、letter-spacing（字符间距）、text-decoration（文本装饰线）；了解字体和文本属性在“网页美化”中的核心作用，以及如何结合传统节日氛围选择样式。能力目标能使用CSS字体属性，为“传统节日展示页面”设置文字样式（如春节标题：font:bold24px宋体;color:#C71585;）；能使用CSS文本属性，优化页面文字排版（如正文：line-height:28px;text-align:left;letter-spacing:1px;）；能结合传统节日氛围（如春节的喜庆、中秋的温馨），选择合适的字体和文本样式，提升网页美观度和文化感。价值目标通过用CSS美化传统节日网页，让学生体会“技术服务于文化展示”，增强文化自信；培养学生的审美能力和严谨的样式调试习惯（如行高过小会影响阅读，颜色过亮会破坏氛围），提升职业素养。重点难点解决策略：思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、小组学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.线上预习资源反馈（智慧树平台CSS字体、文本属性教学视频预习情况）；2.展示“未美化的传统节日页面”与“已美化的传统节日页面”对比 查看智慧树预习反馈，结合“未美化vs已美化页面”提问“如何用CSS让节日页面更美观且契合文化氛围？” 1.线上观看预习资源，观察页面对比；2.课堂分享对“CSS美化文化页面”的初步想法 了解预习情况，激发对CSS美化页面的兴趣，明确学习必要性学习目标1.知识目标（掌握CSS字体属性、文本属性用法）；2.能力目标（能美化传统节日页面文字样式、排版）；3.价值目标（体会技术服务文化展示，培养审美与严谨习惯）用PPT展示三维目标，结合“春节标题用红色粗体宋体美化”案例，讲解“学会什么、能做什么、文化意义是什么” 聆听并记录目标，与同桌交流“CSS技术+文化展示”的理解 让学生清晰学习方向，建立“技术+审美+文化”的学习意识课前测验智慧树平台发布测验题：CSS中设置字体大小的属性；font属性的正确缩写顺序；实现“文本居中对齐”的text-align属性值在智慧树平台发布测验，巡视查看，统计“font缩写顺序、text-align取值”等错误率高的题目独立完成测验，查看反馈，标记不懂的题目（如font缩写、行高设置）检测预习效果，为课堂重点讲解提供依据，培养自主检测习惯参与式学习-词汇学习（4分钟）讲解专业英语词汇：font-family、font-size、font-weight、line-height、text-align、letter-spacing、text-decoration1.讲解词汇含义，组织小组内互相朗读并记忆词汇；2.随机抽查小组的词汇掌握情况（如抽问“line-height对应中文术语”） 1.小组内互相朗读、记忆词汇；2.参与抽查，纠正发音与记忆错误强化专业术语认知，为CSS属性学习打基础，提升专业英语素养参与式学习-VR体验（5分钟）参与式学习-播放视频（3分钟）参与式学习-任务一：传统习俗文本基础样式初建（15分钟）智慧树平台学习任务：1.分析习俗页面“标题”“正文”“注释”层级，明确字体、文本样式需求；2.查看平台“字体+文本属性基础示例”，模仿设置font-family（如楷体）、font-size、color等样式；3.完成“字体与文本基础属性小测”。引出知识点：1.对比默认与定制样式的习俗内容呈现，说明字体、文本样式对文化氛围的塑造优势；2.结合“习俗标题庄重感”“正文可读性”需求，引出字体（font-family/size/weight）、文本（color/line-height）属性的必要性。明确知识点：1.掌握font-family（楷体/宋体等）、font-size、font-weight的设置；2.掌握color、line-height的调整；3.理解字体对“文化气质”、文本对“可读性”的作用。1.掌握字体与文本基础样式技能；2.为习俗内容打造“文化感+可读性”文本样式，提升页面质感。参与式学习-任务二：传统习俗文本样式精细化美化（20分钟）智慧树平台学习任务： 1.小组领取“传统诗词展示”“习俗步骤说明”模块，在平台研讨字体（font-style斜体）、文本（text-align居中）的美化思路；2.提交含优化样式（如诗词斜体、标题居中）的代码至“草稿区”。引出知识点：1.对比基础与美化后效果，说明细节调整对“文化表现力+美感”的提升作用；2.引出font-style/font-variant、text-align/text-indent/text-decoration等属性的必要性。明确知识点：1.掌握font-style（斜体体现诗词韵味）、font-variant（小型大写突出文本）；2.掌握text-align（居中/左对齐）、text-indent（首行缩进）、text-decoration（下划线等装饰）；3.能根据习俗内容（诗词、说明）选择精细化样式。1.培养文本样式精细化设计与文化适配能力；2.让习俗文本更具表现力，提升文化艺术感染力。参与式学习-传统习俗文本样式与页面风格统一（25分钟）智慧树平台学习任务：1.观看平台“字体+文本属性整合微课”，学习与div、class结合实现多模块样式统一的方法；2.小组对“习俗标题区”“正文区”“注释区”的字体、文本样式统一化设计，提交效果并互评。引出知识点：1.对比样式杂乱与统一的页面效果，说明“字体+文本统一”对习俗页面整体性的作用；2.结合习俗页面“文化气质塑造”需求，引出字体、文本与布局结合的逻辑。明确知识点：1.能通过class定义统一字体（如标题用“华文楷体”）、文本样式（正文统一行高/颜色）并应用于多模块；2.能结合div的padding/margin，让字体、文本与布局更协调；3.理解字体、文本在页面习俗风格塑造中的核心作用。1.培养样式统一化与页面整合能力；2.打造风格统一的习俗页面，提升文化传播专业度与沉浸感。参与式学习-总结提高（3分钟）课堂总结：总结知识点，强调重难点。点明任务：教师归纳总结，夯实基础。明确任务：学生通过回顾本节课知识点，拓展提高。思政元素：引导学生“文化自信、技能成才”。课后测试（5分钟）智慧树平台发布课后测试：1.拓展任务：根据本节课的知识，完成网站编写练习。