# 校园活动网站——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 工作方式和视觉规范。 | **作品点评**
对颜色克制、文字清晰和选择器合理的页面进行点评。
**知识梳理**
总结“选择元素—设置属性—浏览器应用—工具检查”。 | **成果说明**
展示页面并说明主色和一个类选择器的用途。
**自查归档**
确认样式表路径正确、代码保存且无明显重复。 | 以解释设计选择促进技术与审美结合，为后续布局学习建立统一基线。 |
## 板书设计
```text
CSS 规则
选择器 {
属性: 值;
}
campus-events/
├── index.html
└── css/
└── style.css
基础视觉：主色 + 辅助色 + 正文色 + 字体
原则：内容与表现分离、样式集中复用
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够正确关联外部样式表，使用元素和类选择器建立网站基础视觉。多数作品颜色数量合理、文字可读，学生开始借助开发者工具确认规则是否匹配。 |
| **教学反思** | 部分学生追求颜色丰富而忽略一致性，或用过宽的元素选择器造成连锁变化。应先限定配色和选择器范围，再允许个性调整，并要求每次修改后说明影响对象。 |