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