teaching-design/data/Web/7.md

校园活动网站——CSS基础与视觉样式设计 教学设计

课题	校园活动网站——CSS基础与视觉样式设计
课时	1课时（40分钟）
教学目标	知识目标：理解 CSS 规则由选择器、属性和值组成，掌握外部样式表、元素选择器、类选择器及基础颜色和字体属性。 技能目标：能够建立校园活动网站目录，正确关联 style.css，为页头、栏目标题和正文制定统一视觉样式。 素养目标：建立内容与表现分离、样式复用和视觉一致性意识，养成集中管理样式代码的习惯。
教学重难点	重点：CSS 基本语法；外部样式表关联；元素与类选择器；颜色和字体设置。 难点：理解选择器匹配范围和样式覆盖现象，根据网站主题建立简洁一致的视觉规范。
教学资源准备	校园活动网站 HTML 初始模板、视觉效果示例、配色卡、Visual Studio Code、现代浏览器、开发者工具。

教学过程

教学环节	教学内容	教师活动	学生活动	设计意图
1. 项目情境导入 （5分钟）	展示未加样式和完成样式的校园活动网站，明确项目二目标。	案例对比 展示相同 HTML 内容的两种效果，提问：“内容没有变化，为什么阅读感受不同？” 任务发布 说明六课时将完成视觉统一、布局合理且适配手机的活动网站。	观察分析 从颜色、字体、间距、排列等方面描述差异。 目标记录 在项目单上写出希望网站呈现的三个视觉关键词。	用显著视觉差异引出 CSS 的价值，建立第二个项目的完整成果预期。
2. CSS语法探究 （10分钟）	学习选择器、声明块、属性和值，认识元素选择器和类选择器。	结构拆解 以 h1 { color: navy; } 为例标注语法组成，讲解分号和花括号。 匹配演示 比较 p 与 .notice 的作用范围，使用开发者工具查看匹配样式。	语法标注 在示例规则中圈出选择器、属性和值。 结果预测 观察 HTML 类名，预测两条规则会影响哪些元素。	通过结构标注和结果预测理解 CSS 规则，减少试错式编写。
3. 样式关联示范 （8分钟）	创建外部样式表并通过 link 标签关联，设置基础字体和页面颜色。	目录示范 建立 campus-events/css/style.css，演示在 head 中关联文件。 故障诊断 故意写错路径，展示样式未生效时如何检查文件、路径和开发者工具。	跟随操作 创建项目目录、复制 HTML 模板并关联样式表。 即时验证 修改页面背景色，保存刷新，确认关联成功。	把样式表路径与上一项目资源路径知识连接起来，建立快速验证方法。
4. 视觉规范实践 （13分钟）	设置全局字体、正文颜色、页头背景、标题颜色和提示文字样式。	任务分解 给出基础视觉清单：主色、辅助色、正文色、字体、标题层级；强调对比度与颜色数量控制。 巡回指导 检查选择器范围、类名拼写和样式覆盖，指导从开发者工具确认规则来源。	样式开发 根据配色卡完成页面基础样式，为提示信息添加可复用类。 对比测试 切换两组颜色方案，选择可读性更好的方案并说明理由。	让学生在约束下完成视觉决策，体验样式复用和开发者工具辅助调试。
5. 成果评价总结 （4分钟）	展示阶段成果，归纳 CSS 工作方式和视觉规范。	作品点评 对颜色克制、文字清晰和选择器合理的页面进行点评。 知识梳理 总结“选择元素—设置属性—浏览器应用—工具检查”。	成果说明 展示页面并说明主色和一个类选择器的用途。 自查归档 确认样式表路径正确、代码保存且无明显重复。	以解释设计选择促进技术与审美结合，为后续布局学习建立统一基线。

板书设计

CSS 规则

选择器 {
  属性: 值;
}

campus-events/
├── index.html
└── css/
    └── style.css

基础视觉：主色 + 辅助色 + 正文色 + 字体
原则：内容与表现分离、样式集中复用

教学成效与反思

教学成效	学生能够正确关联外部样式表，使用元素和类选择器建立网站基础视觉。多数作品颜色数量合理、文字可读，学生开始借助开发者工具确认规则是否匹配。
教学反思	部分学生追求颜色丰富而忽略一致性，或用过宽的元素选择器造成连锁变化。应先限定配色和选择器范围，再允许个性调整，并要求每次修改后说明影响对象。