xuyue/teaching-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
yuetsh
2026-06-15 00:55:47 -06:00
commit 2bd1e0399a
98 changed files with 9986 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
data/Web/1.md Normal file
View File

@@ -0,0 +1,41 @@
# 个人主页——项目启动与开发环境搭建 教学设计
| **课题** | **个人主页——项目启动与开发环境搭建** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：了解网站、网页与浏览器的关系，认识 HTML、CSS、JavaScript 在前端项目中的分工。<br>**技能目标**：能够规范创建个人主页项目目录，使用 Visual Studio Code 新建 `index.html`，并在浏览器中运行第一个网页。<br>**素养目标**：建立“先规划、后开发、再测试”的项目意识，养成规范命名和分类管理文件的职业习惯。 |
| **教学重难点** | **重点**：Web 前端三项核心技术的作用；项目目录创建；HTML 文件的编辑与运行。<br>**难点**：理解浏览器读取 HTML 文件并呈现页面的基本过程；建立文件路径与网页资源之间的联系。 |
| **教学资源准备** | Visual Studio Code、Chrome 或 Edge 浏览器、个人主页成品示例、项目需求单、离线安装包、包含 `images` 文件夹的目录模板。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 项目情境导入**<br>（6分钟） | 展示个人主页成品，明确项目要呈现个人简介、技能、作品和联系方式。 | **成品展示**<br>演示桌面端和手机端页面效果，提问：“一个网页需要哪些内容和技术？”<br><br>**任务发布**<br>发放项目需求单，说明六课时阶段成果与最终验收标准。 | **观察思考**<br>浏览成品页面，列出看到的文字、图片、链接和表单。<br><br>**需求标注**<br>在需求单上标记自己主页准备展示的内容。 | 用可见成果建立学习目标，将“学习网页制作”转化为“完成个人主页”的真实任务。 |
| **2. 技术角色认知**<br>（8分钟） | 认识 HTML、CSS、JavaScript 的功能及浏览器的作用。 | **类比讲解**<br>用“结构、装修、行为”类比三项技术，演示关闭 CSS 或 JavaScript 后的页面变化。<br><br>**流程梳理**<br>画出“代码文件→浏览器解析→网页呈现”的基本流程。 | **对比观察**<br>比较不同技术缺失时的页面效果，填写技术作用表。<br><br>**口头归纳**<br>用一句话说明 HTML、CSS、JavaScript 各自负责什么。 | 通过对比建立前端技术整体认知，为后续按层次开发页面形成清晰框架。 |
| **3. 环境搭建示范**<br>（8分钟） | 安装或确认编辑器与浏览器，认识资源管理器、编辑区和浏览器开发者工具。 | **操作示范**<br>演示打开文件夹、创建文件、保存代码和刷新浏览器；强调扩展名显示及 UTF-8 编码。<br><br>**规范提示**<br>说明项目名使用英文小写、文件名不含空格、资源分类存放。 | **跟随操作**<br>启动开发工具，找到主要功能区，完成环境检查。<br><br>**规范记录**<br>在任务单记录 `index.html`、`css`、`js`、`images` 的用途。 | 降低工具使用门槛，把目录和文件规范作为项目质量管理的起点。 |
| **4. 首个页面实践**<br>（14分钟） | 创建 `personal-homepage` 项目，编写并运行第一个 HTML 页面。 | **代码演示**<br>输入 `<!DOCTYPE html>`、`html`、`head`、`body` 基本结构，在正文中添加标题“我的个人主页”。<br><br>**巡回指导**<br>检查目录、扩展名、保存状态和浏览器打开方式，帮助定位空白页问题。 | **目录创建**<br>建立项目文件夹及 `images` 子目录，新建 `index.html`。<br><br>**编码测试**<br>完成基本结构，修改标题和问候语，保存后在浏览器中刷新验证。 | 通过首次“编辑—保存—运行—修改”闭环建立操作信心，形成网页开发的基本工作节奏。 |
| **5. 成果验收总结**<br>（4分钟） | 按标准检查首课成果，回顾项目路径并保存项目文件。 | **快速验收**<br>依据“目录正确、文件正确、页面可见、中文正常”四项标准抽查。<br><br>**知识梳理**<br>总结三项技术分工和网页运行流程。 | **同伴互检**<br>两人交换检查项目目录和页面效果，记录一个待改进项。<br><br>**成果归档**<br>关闭前确认文件已保存，并整理项目位置。 | 用明确标准完成阶段评价，强化文件管理和自我检查习惯。 |
## 板书设计
```text
个人主页项目
HTML CSS JavaScript
结构 样式 交互
└──────── 浏览器解析 ────────┘
personal-homepage/
├── index.html
└── images/
开发流程：规划 → 编码 → 保存 → 浏览 → 检查
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够说出三项前端技术的基本分工，多数学生按规范建立项目目录并成功运行首个网页。成品展示使项目目标清晰，同伴互检提升了文件管理意识。 |
| **教学反思** | 初学者易忽略文件扩展名和保存操作，导致页面无变化。教学中应统一开启扩展名显示，并用“修改文字—保存—刷新”的短循环反复确认工作流程，减少环境问题占用实践时间。 |

44
data/Web/10.md Normal file
View File

@@ -0,0 +1,44 @@
# 校园活动网站——导航栏与活动卡片组件 教学设计
| **课题** | **校园活动网站——导航栏与活动卡片组件** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解组件由稳定结构和可复用样式组成，掌握组合选择器、伪类及导航栏、卡片的常见结构。<br>**技能目标**：能够制作横向导航栏和统一的活动卡片，使用类名复用样式，并为链接和卡片添加悬停反馈。<br>**素养目标**：形成模块化、复用和一致性意识，养成用清晰类名表达组件职责的编码习惯。 |
| **教学重难点** | **重点**：组件结构；类选择器复用；导航排列；`:hover` 交互反馈。<br>**难点**：保持多个卡片结构一致，控制组合选择器作用范围，避免样式相互干扰。 |
| **教学资源准备** | 校园活动网站项目、导航与卡片结构图、活动图文素材、组件验收清单、浏览器开发者工具。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 组件需求导入**<br>（5分钟） | 分析重复活动信息和站内跳转需求，引出导航与卡片组件。 | **问题展示**<br>展示样式各异的活动条目，提问：“新增一条活动时，怎样保持外观一致？”<br><br>**任务明确**<br>发布导航栏和活动卡片组件开发任务。 | **页面诊断**<br>指出重复信息的共同结构和不一致之处。<br><br>**组件识别**<br>圈出导航项、卡片图片、标题、时间和按钮。 | 从维护问题引出组件复用，让学生理解统一结构和样式的工程价值。 |
| **2. 组件结构探究**<br>（9分钟） | 分析导航和卡片的 HTML 层级及类名设计。 | **结构拆解**<br>画出 `nav-list`、`event-card`、`event-card__title` 等职责明确的类名关系。<br><br>**范围讲解**<br>比较 `.event-card a` 与所有 `a` 的匹配范围，说明局部样式的重要性。 | **结构标注**<br>在页面模板上标注组件、子元素和重复部分。<br><br>**命名练习**<br>为三个组件元素拟定可读类名。 | 先识别稳定结构再写样式，培养模块边界和选择器范围意识。 |
| **3. 样式交互示范**<br>（8分钟） | 使用 Flex 排列导航，设计卡片边框、圆角、阴影及悬停状态。 | **代码演示**<br>演示导航列表去除默认样式、横向排列和链接点击区域；为卡片添加圆角和轻量阴影。<br><br>**状态演示**<br>使用 `:hover` 改变链接背景或卡片位移，说明反馈应克制且可预测。 | **跟随编码**<br>完成导航基础样式和一张卡片外观。<br><br>**交互体验**<br>用鼠标和键盘操作链接，观察反馈是否清晰。 | 将静态样式与操作反馈结合，提升组件的可用性和完整度。 |
| **4. 组件开发实践**<br>（14分钟） | 完成站内导航和至少四张活动卡片，测试新增内容的一致性。 | **任务发布**<br>导航链接对应页面栏目；卡片结构一致并复用同一类样式；新增第五张卡片不得复制整段 CSS。<br><br>**巡回指导**<br>检查类名拼写、选择器过宽、图片比例和按钮点击区域，指导定位局部样式冲突。 | **组件制作**<br>完成导航和四张卡片，填入不同活动数据。<br><br>**复用验证**<br>复制卡片结构新增一项，仅更换内容，确认样式自动应用。 | 用“新增组件无需新增样式”检验复用是否真正实现，强化模块化思维。 |
| **5. 成果评价总结**<br>（4分钟） | 依据结构一致、样式复用、操作清晰三项标准评价成果。 | **作品点评**<br>展示类名清楚、组件统一的页面，指出过多动画和全局选择器问题。<br><br>**方法总结**<br>归纳“定结构—起类名—写一次样式—复制内容—测试状态”。 | **同伴互评**<br>选择一张卡片和一个导航链接进行检查。<br><br>**反思归纳**<br>说明组件化为新增活动带来的便利。 | 以可维护性而非只看外观评价作品，建立初步组件开发标准。 |
## 板书设计
```text
组件 = 稳定结构 + 可复用样式 + 操作状态
导航组件
nav > ul > li > a
活动卡片
.event-card
├── 图片
├── 标题
├── 时间地点
└── 操作链接
状态：:hover
检验：新增内容，不新增重复 CSS
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够使用统一结构和类样式制作导航与活动卡片，并通过新增卡片验证样式复用。多数作品组件一致、链接反馈明确，类名可读性有所提升。 |
| **教学反思** | 一些学生仍为每张卡片设置独立类名，造成重复代码。评价时应把“新增第五张卡片是否需要改 CSS”作为硬性检验，并限制悬停效果数量，避免忽视信息清晰度。 |

45
data/Web/11.md Normal file
View File

@@ -0,0 +1,45 @@
# 校园活动网站——响应式布局与媒体查询 教学设计
| **课题** | **校园活动网站——响应式布局与媒体查询** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解响应式设计、视口和断点的含义，掌握视口设置、相对尺寸、图片自适应和媒体查询基本语法。<br>**技能目标**：能够使用浏览器设备模拟发现小屏问题，并通过媒体查询调整导航、卡片和页面间距，使网站适配桌面与手机。<br>**素养目标**：建立多设备用户意识和移动优先的基础观念，养成在不同视口下持续测试网页的习惯。 |
| **教学重难点** | **重点**：视口设置；弹性图片；媒体查询；小屏布局调整。<br>**难点**：根据内容出现问题的位置选择断点，而不是照搬固定设备宽度；避免横向滚动和文字过小。 |
| **教学资源准备** | 校园活动网站项目、桌面与手机效果对比图、浏览器设备工具、响应式验收清单。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 多端问题导入**<br>（5分钟） | 在手机视口打开现有网站，发现导航拥挤、图片溢出和卡片过窄问题。 | **设备演示**<br>用开发者工具切换桌面和手机视口，展示同一页面的差异。<br><br>**任务发布**<br>提出“让网站在窄屏仍可阅读、可操作”的适配任务。 | **问题记录**<br>按结构、文字、图片、操作四类记录小屏问题。<br><br>**优先排序**<br>选出最影响使用的两个问题。 | 从真实设备体验出发，让学生理解响应式设计服务于不同用户环境。 |
| **2. 响应原理探究**<br>（10分钟） | 学习视口、流式尺寸、最大宽度和内容断点。 | **概念讲解**<br>说明视口元标签的作用，演示固定宽度与百分比宽度的差异。<br><br>**断点观察**<br>缓慢缩小窗口，在布局开始拥挤的位置记录宽度，解释断点应由内容决定。 | **宽度实验**<br>拖动窗口观察布局变化并记录首次出现问题的宽度。<br><br>**概念判断**<br>区分固定尺寸、相对尺寸和最大宽度的适用场景。 | 通过连续变化观察断点形成过程，避免把响应式等同于记忆某个数值。 |
| **3. 媒体查询示范**<br>（8分钟） | 学习 `@media (max-width: ...)`，调整导航方向、卡片宽度和页面间距。 | **代码演示**<br>在窄屏条件下将导航改为纵向或换行，卡片改为单列，缩小容器内边距。<br><br>**图片优化**<br>设置图片最大宽度不超过容器并保持比例。 | **跟随编码**<br>添加一组媒体查询，观察规则在断点前后是否生效。<br><br>**工具验证**<br>从计算样式中确认覆盖规则来源。 | 用最小适配规则理解条件样式和覆盖关系，连接前面选择器知识。 |
| **4. 多端适配实践**<br>（13分钟） | 完成导航、卡片、图片和间距的响应式优化。 | **任务分解**<br>要求无横向滚动、图片不溢出、导航可操作、卡片在小屏单列、正文保持可读。<br><br>**巡回指导**<br>针对固定宽度、断点冲突和规则顺序问题，引导用设备工具逐项定位。 | **样式改造**<br>根据内容问题设置断点并完成四项适配。<br><br>**设备测试**<br>在至少三种视口宽度下测试，填写验收结果并修正问题。 | 以多视口验收保证响应式不是“写了媒体查询”，而是实际解决使用问题。 |
| **5. 成果总结评价**<br>（4分钟） | 对比桌面与手机效果，归纳响应式测试流程。 | **作品抽测**<br>随机选择视口宽度检查作品，点评内容完整性和操作可达性。<br><br>**流程总结**<br>归纳“缩放观察—定位问题—设置断点—编写覆盖—多端复测”。 | **动态展示**<br>拖动窗口展示布局连续变化。<br><br>**自查归档**<br>确认三种宽度均通过清单。 | 用随机宽度避免只适配某个设备，形成持续测试和内容驱动断点意识。 |
## 板书设计
```text
响应式设计
同一份内容 → 适配不同视口
基础：
viewport
max-width: 100%
弹性布局
媒体查询：
@media (max-width: 700px) {
/* 小屏覆盖规则 */
}
流程：观察 → 断点 → 覆盖 → 多端复测
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够使用设备模拟识别小屏问题，并通过媒体查询调整导航、卡片和间距。多数网站在三种视口下无横向滚动，图片和文字保持可读。 |
| **教学反思** | 学生容易先套用断点数值再寻找问题，或只测试一种手机尺寸。教学应坚持先缩放观察并记录问题宽度，再编写规则；验收采用随机宽度可有效检验适配的真实性。 |

43
data/Web/12.md Normal file
View File

@@ -0,0 +1,43 @@
# 校园活动网站——项目整合调试与质量优化 教学设计
| **课题** | **校园活动网站——项目整合调试与质量优化** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解网页质量由结构、视觉、布局、响应、可用性和性能等方面共同构成，掌握常见 CSS 问题的排查顺序。<br>**技能目标**：能够整合校园活动网站，使用开发者工具修复样式冲突、溢出和响应问题，完成多视口验收和项目交付。<br>**素养目标**：培养质量检查、团队协作和迭代优化意识，形成依据现象与证据调试页面的职业习惯。 |
| **教学重难点** | **重点**：项目整合；选择器与盒模型调试；多视口测试；质量清单。<br>**难点**：区分结构问题、样式问题和资源问题，按优先级完成有限时间内的优化。 |
| **教学资源准备** | 前五课校园活动网站、综合验收清单、典型故障项目、开发者工具、展示评分表、压缩工具或校内发布空间。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 交付任务导入**<br>（5分钟） | 回顾 CSS 项目成果，明确最终验收、调试和交付任务。 | **成果串联**<br>梳理基础样式、盒模型、Flex、组件和响应式五项成果。<br><br>**标准发布**<br>说明功能完整、视觉一致、布局稳定、多端可用、代码规范五项评分。 | **进度盘点**<br>对照清单标记项目风险项。<br><br>**角色分工**<br>两人一组确定开发者和测试员，之后交换角色。 | 用明确质量标准和角色分工组织综合实践，避免整合课变为随意美化。 |
| **2. 调试方法梳理**<br>（8分钟） | 建立“元素—规则—盒模型—视口—资源”的 CSS 排错流程。 | **故障示范**<br>展示类名不匹配、规则被覆盖、宽度溢出和图片路径错误，逐步使用元素面板定位。<br><br>**优先说明**<br>强调先修影响访问和操作的问题，再优化装饰细节。 | **诊断练习**<br>根据四个故障现象选择检查工具和排查顺序。<br><br>**方法记录**<br>完成个人调试流程卡。 | 将分散的工具操作整理成可重复方法，培养按证据处理问题的能力。 |
| **3. 综合优化实践**<br>（17分钟） | 按清单完成结构、样式、布局、组件和响应式的双轮测试。 | **任务组织**<br>第一轮由开发者自测，第二轮由测试员使用随机视口和新增卡片进行压力测试。<br><br>**巡回评审**<br>要求学生先说明现象和推断，再协助定位；记录高频问题用于集中讲评。 | **项目修复**<br>检查导航锚点、图片、卡片复用、间距、溢出和媒体查询，逐项修正。<br><br>**交叉测试**<br>交换项目，随机改变宽度、增加活动卡片并填写缺陷记录。 | 通过角色化双轮测试模拟真实质量流程，综合运用前五课知识完成项目闭环。 |
| **4. 成果展示交付**<br>（6分钟） | 完成项目归档并展示设计与优化成果。 | **展示组织**<br>邀请小组用一分钟展示桌面与手机效果，并说明一项调试证据。<br><br>**评价反馈**<br>依据评分表给出结构化反馈，突出可维护性和适配表现。 | **项目路演**<br>展示网站视觉规范、组件复用和响应变化。<br><br>**成果归档**<br>清理无关资源，统一命名，重新打开交付包确认完整。 | 将技术成果、调试过程和表达能力共同纳入评价，强化交付意识。 |
| **5. 项目复盘总结**<br>（4分钟） | 总结 CSS 知识链并提出网页交互需求。 | **知识梳理**<br>串联“选择器—盒模型—Flex—组件—媒体查询—调试”。<br><br>**问题迁移**<br>提问：“如何让用户添加活动或改变页面内容？”引出 JavaScript。 | **复盘反思**<br>记录一个有效调试方法和一个布局改进点。<br><br>**学习迁移**<br>描述希望网页具备的一项交互功能。 | 巩固样式与布局体系，并从静态页面自然过渡到程序交互学习。 |
## 板书设计
```text
校园活动网站质量模型
结构完整
视觉一致
布局稳定
组件复用
多端可用
代码规范
CSS 排错：
选元素 → 查规则 → 看盒模型 → 换视口 → 核资源
交付：自测 → 互测 → 修复 → 复测 → 归档
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够综合运用 CSS 知识完成网站优化，并在随机视口和新增卡片测试中修复实际问题。双角色测试使缺陷记录更具体，多数项目达到可展示、可复用和可交付标准。 |
| **教学反思** | 综合调试时间有限，学生容易优先处理颜色等低风险细节。应要求先按“影响访问—影响操作—影响布局—视觉细节”排序缺陷，并保留修复前后证据，提升优化决策质量。 |

43
data/Web/13.md Normal file
View File

@@ -0,0 +1,43 @@
# 任务管理系统——JavaScript基础与任务数据 教学设计
| **课题** | **任务管理系统——JavaScript基础与任务数据** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 JavaScript 在网页交互中的作用，掌握外部脚本关联、`const`、`let`、字符串、数字、布尔值和控制台输出。<br>**技能目标**：能够建立任务管理系统项目，正确关联 `app.js`，使用变量描述任务名称、优先级、预计时长和完成状态并输出检查。<br>**素养目标**：形成用数据描述业务对象的程序思维，养成变量命名清晰、使用控制台验证代码和及时查看错误的习惯。 |
| **教学重难点** | **重点**：脚本文件关联；变量声明；基本数据类型；模板字符串；控制台。<br>**难点**：根据数据是否需要变化选择 `const` 或 `let`，理解代码执行顺序和控制台报错信息。 |
| **教学资源准备** | 任务管理界面 HTML/CSS 模板、Visual Studio Code、现代浏览器、开发者工具、任务数据需求卡、错误示例。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 交互项目导入**<br>（5分钟） | 展示可添加和完成任务的成品，分析静态网页无法响应操作的问题。 | **成品演示**<br>添加任务、切换状态并刷新页面，提问：“页面如何记住用户操作？”<br><br>**任务发布**<br>说明六课时将用原生 JavaScript 完成任务管理系统。 | **功能观察**<br>列出输入、添加、完成、删除和保存等操作。<br><br>**技术回顾**<br>说明 HTML、CSS 已完成什么，还缺少什么。 | 从静态页面过渡到交互应用，建立 JavaScript 项目的完整功能预期。 |
| **2. 脚本运行认知**<br>（10分钟） | 认识外部脚本、执行顺序、控制台和基础语句。 | **关联示范**<br>创建 `js/app.js`，在页面底部通过 `script` 关联，使用 `console.log` 输出启动信息。<br><br>**错误诊断**<br>故意写错路径和变量名，引导从控制台查看文件位置与错误信息。 | **跟随操作**<br>建立项目目录并关联脚本，打开控制台确认启动信息。<br><br>**报错阅读**<br>根据错误提示定位一处拼写问题并修正。 | 把控制台作为程序开发的基本工具，建立“先看报错再修改”的调试习惯。 |
| **3. 变量类型示范**<br>（8分钟） | 学习 `const`、`let` 和任务所需的基本数据类型。 | **代码演示**<br>声明任务名称、优先级、预计分钟数和完成状态，修改可变状态并使用模板字符串输出。<br><br>**选择讲解**<br>说明默认优先使用 `const`，确需重新赋值时使用 `let`。 | **类型判断**<br>根据四项任务数据判断适合的类型。<br><br>**代码跟随**<br>声明自己的模拟任务数据并输出一句完整描述。 | 将抽象类型映射到项目数据，让变量选择服务于实际业务含义。 |
| **4. 任务数据实践**<br>（13分钟） | 完成一组任务变量并模拟状态更新，检查输出结果。 | **任务分层**<br>基础任务输出名称、优先级和时长；进阶任务用布尔值决定输出“待完成”或“已完成”。<br><br>**巡回指导**<br>检查命名、引号、大小写和 `const` 重新赋值错误，引导学生读取控制台行号。 | **独立编码**<br>创建两组任务数据，使用模板字符串输出任务摘要。<br><br>**状态测试**<br>改变可变状态并再次输出，对比执行结果；修复控制台错误。 | 通过数据变化体验程序状态，以真实报错训练基本调试能力。 |
| **5. 成果评价总结**<br>（4分钟） | 归纳脚本运行、变量和类型，保存首课项目成果。 | **代码点评**<br>展示命名清晰和类型合理的示例，纠正常量滥改与拼音缩写。<br><br>**知识梳理**<br>总结“定义数据—执行代码—控制台验证—根据错误修正”。 | **成果说明**<br>解释一个变量名和类型选择。<br><br>**自查归档**<br>确认脚本路径正确、控制台无错误。 | 通过说明设计意图提升代码可读性意识，为后续批量任务处理奠定基础。 |
## 板书设计
```text
任务管理系统
HTML：界面结构
CSS：界面样式
JavaScript：数据 + 逻辑 + 交互
任务数据：
const taskName = "完成网页作业";
const priority = "高";
const minutes = 30;
let isDone = false;
流程：编写 → 保存 → 刷新 → 看控制台 → 修正
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够关联外部脚本并使用变量描述任务数据，多数学生能根据数据变化需求选择 `const` 或 `let`，并开始利用控制台定位路径和拼写错误。 |
| **教学反思** | 初学者常忽略大小写和控制台，遇错后反复修改代码。应要求每次调试先读错误类型和行号，再做一次有依据的修改；变量示例需保持数量适中，避免类型概念过载。 |

43
data/Web/14.md Normal file
View File

@@ -0,0 +1,43 @@
# 任务管理系统——条件判断与循环处理 教学设计
| **课题** | **任务管理系统——条件判断与循环处理** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：掌握 `if...else` 条件判断、比较运算、逻辑运算、数组和 `for...of` 循环的基本用法。<br>**技能目标**：能够根据完成状态和优先级生成不同任务提示，使用数组保存多项任务并循环输出任务清单和统计结果。<br>**素养目标**：建立“条件决定分支、循环处理重复”的算法思维，培养先分析规则再编码、使用测试数据验证边界的习惯。 |
| **教学重难点** | **重点**：布尔条件；多分支判断；数组；循环遍历；计数统计。<br>**难点**：把任务管理规则转化为互斥条件，在循环中正确更新待办和已完成数量。 |
| **教学资源准备** | 上节课项目、任务规则表、流程图卡、不同状态测试数据、Visual Studio Code、浏览器控制台。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 批量处理导入**<br>（5分钟） | 从单个任务扩展到多个任务，提出自动分类和统计需求。 | **需求演示**<br>展示十项任务，提问：“逐条写输出代码会有什么问题？”<br><br>**规则发布**<br>给出已完成、待完成、高优先级三类提示规则。 | **问题分析**<br>识别重复代码和人工判断的低效。<br><br>**规则转述**<br>用自然语言说明三类任务判断条件。 | 以任务数量增长引出控制结构，突出自动决策和重复处理的价值。 |
| **2. 条件结构探究**<br>（10分钟） | 学习比较、逻辑表达式和 `if...else if...else` 执行流程。 | **流程讲解**<br>绘制任务分类流程图，先判断是否完成，再判断优先级。<br><br>**代码演示**<br>根据 `isDone` 和 `priority` 输出“已完成”“优先处理”或“普通待办”。 | **流程追踪**<br>代入三组数据，沿流程图判断输出结果。<br><br>**跟随编码**<br>完成分支代码并测试真假值变化。 | 用流程图建立条件顺序，避免分支重叠和遗漏。 |
| **3. 数组循环示范**<br>（8分钟） | 使用数组保存任务名称并通过循环逐项处理。 | **概念讲解**<br>说明数组是有顺序的数据集合，演示创建数组、读取长度和 `for...of` 遍历。<br><br>**统计示范**<br>在循环中累加任务总数，输出编号和名称。 | **代码跟随**<br>建立包含四个任务名称的数组并循环输出。<br><br>**执行观察**<br>在每轮输出当前任务，理解循环变量变化。 | 从简单数组开始理解批量处理，为后续任务对象和页面渲染降低难度。 |
| **4. 分类统计实践**<br>（13分钟） | 综合条件和循环，对任务状态数组进行分类与统计。 | **任务分解**<br>提供名称数组和对应状态数组，要求循环输出每项状态并统计完成数量；进阶任务统计高优先级待办。<br><br>**巡回指导**<br>检查循环范围、计数器初值、条件顺序和数组长度对应问题。 | **算法设计**<br>先在任务单写出输入、处理和输出，再编写循环与判断。<br><br>**数据测试**<br>使用全未完成、部分完成、全完成三组数据验证统计结果。 | 通过多组边界数据检验逻辑正确性，培养从规则到算法再到测试的完整思维。 |
| **5. 成果总结评价**<br>（4分钟） | 展示分类结果，归纳条件与循环的职责。 | **代码点评**<br>比较重复判断和循环处理两种方案，指出计数器未初始化等常见错误。<br><br>**知识总结**<br>概括“条件负责选择，循环负责重复，二者结合处理清单”。 | **成果说明**<br>解释自己的分支顺序和一组测试结果。<br><br>**自查修正**<br>确认三组测试数据均得到正确统计。 | 用解释和测试证据评价程序逻辑，为后续封装功能做准备。 |
## 板书设计
```text
任务处理逻辑
任务 → 是否完成？
├── 是：已完成
└── 否 → 是否高优先级？
├── 是：优先处理
└── 否：普通待办
数组：保存多项任务
循环：逐项处理
计数器：统计结果
测试：全否 / 混合 / 全是
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够使用分支判断任务状态，并用循环批量输出和统计任务。三组测试数据帮助多数学生发现条件顺序或计数器错误，算法表达更有条理。 |
| **教学反思** | 使用平行数组虽便于入门，但学生容易出现长度不一致。课堂中应明确它是过渡方案，并把重点放在循环与条件组合；调试时要求先手算预期结果，再与控制台对比。 |

45
data/Web/15.md Normal file
View File

@@ -0,0 +1,45 @@
# 任务管理系统——函数封装与事件处理 教学设计
| **课题** | **任务管理系统——函数封装与事件处理** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解函数的定义、调用、参数和返回值，掌握浏览器事件及 `addEventListener` 的基本用法。<br>**技能目标**：能够把任务校验、状态统计等重复逻辑封装为函数，为添加按钮绑定点击事件，并通过参数传递输入数据。<br>**素养目标**：形成单一职责、代码复用和事件驱动意识，养成用函数名表达功能、避免复制重复代码的习惯。 |
| **教学重难点** | **重点**：函数定义与调用；参数和返回值；点击事件绑定。<br>**难点**：区分函数本身与函数调用，理解事件发生后浏览器才执行回调函数。 |
| **教学资源准备** | 任务管理系统项目、重复代码案例、函数结构卡、带输入框和按钮的页面模板、浏览器控制台。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 重复问题导入**<br>（5分钟） | 分析多处重复校验和统计代码，提出功能封装与按钮响应任务。 | **案例展示**<br>展示三次复制的空值判断代码，修改规则后逐处调整，提问其维护风险。<br><br>**任务发布**<br>要求用函数统一处理规则，并让“添加任务”按钮响应点击。 | **问题诊断**<br>找出重复代码和可能遗漏的修改点。<br><br>**功能命名**<br>为“检查任务名称”“统计完成数”等功能拟定名称。 | 从维护痛点引出函数，通过功能命名建立职责意识。 |
| **2. 函数结构探究**<br>（9分钟） | 学习函数名、参数、函数体、返回值和调用。 | **结构讲解**<br>演示 `validateTask(name)`，传入任务名，返回是否合法；说明参数是函数接收的数据。<br><br>**调用对比**<br>比较函数名与带括号调用的差异，追踪返回值流向。 | **结构标注**<br>在代码中标出函数名、参数和返回值。<br><br>**手动追踪**<br>代入空字符串和正常名称，写出执行结果。 | 通过结构标注和数据代入理解函数输入、处理和输出。 |
| **3. 事件机制示范**<br>（8分钟） | 认识点击事件、事件监听和回调函数。 | **交互演示**<br>获取按钮并使用 `addEventListener("click", handleAddTask)` 绑定处理函数。<br><br>**时序讲解**<br>画出“页面加载—等待操作—用户点击—执行函数”的事件流程。 | **跟随编码**<br>为按钮绑定点击事件，点击后在控制台输出提示。<br><br>**现象验证**<br>刷新页面但不点击，确认函数不会立即执行。 | 用时序观察突破“代码为何没有立即运行”的事件驱动难点。 |
| **4. 功能封装实践**<br>（14分钟） | 封装输入校验和任务摘要函数，完成按钮点击后的读取、校验与反馈。 | **任务分解**<br>点击后读取输入值，调用校验函数；合法时生成任务摘要，不合法时给出提示。<br><br>**巡回指导**<br>检查事件绑定是否传入函数本身、参数作用域和返回值使用，帮助定位重复触发问题。 | **函数开发**<br>编写校验和摘要函数，在事件处理函数中组合调用。<br><br>**交互测试**<br>分别输入空白、正常文字和超长文字，记录反馈并修正逻辑。 | 将函数和事件组合成可运行交互，体现模块复用和测试边界。 |
| **5. 成果评价总结**<br>（4分钟） | 展示按钮交互，归纳函数与事件的协作关系。 | **代码点评**<br>展示职责清晰的函数，纠正一个函数承担过多任务和事件重复绑定。<br><br>**关系总结**<br>概括“事件决定何时做，函数规定具体怎么做”。 | **成果演示**<br>用三类输入展示不同反馈。<br><br>**代码自查**<br>检查函数名、参数和职责是否清楚。 | 以多输入演示验证交互质量，为下一课动态修改页面做好准备。 |
## 板书设计
```text
函数
输入参数 → 处理逻辑 → 返回结果
事件流程
页面加载
↓
等待用户操作
↓ click
执行 handleAddTask
↓
调用校验函数和摘要函数
原则：
事件决定“何时做”
函数规定“怎么做”
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够把重复逻辑封装为函数，并为按钮绑定点击事件。通过空白、正常和超长输入测试，多数学生理解了参数、返回值及事件触发时机。 |
| **教学反思** | 常见错误是把 `handleAddTask()` 的调用结果传给监听器，导致页面加载时立即执行。应借助事件时序图反复区分“交给浏览器一个函数”和“现在调用函数”，并保持函数示例职责单一。 |

41
data/Web/16.md Normal file
View File

@@ -0,0 +1,41 @@
# 任务管理系统——DOM操作与动态添加任务 教学设计
| **课题** | **任务管理系统——DOM操作与动态添加任务** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 DOM 是浏览器对 HTML 文档的对象化表示，掌握查询元素、读取输入、创建元素、设置文本和追加节点的基本方法。<br>**技能目标**：能够在点击按钮后读取任务名称，动态创建任务列表项并添加到页面，同时清空输入框和阻止空任务。<br>**素养目标**：建立数据驱动界面和安全输出意识，养成优先使用 `textContent`、分步检查 DOM 操作的习惯。 |
| **教学重难点** | **重点**：元素查询；输入值读取；`createElement`；`textContent`；`append`。<br>**难点**：理解 JavaScript 对象与页面元素的对应关系，按正确顺序创建、设置和插入节点。 |
| **教学资源准备** | 上节课项目、DOM 树结构图、动态添加效果示例、代码步骤卡、浏览器元素面板和控制台。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 页面更新导入**<br>（5分钟） | 回顾按钮只能在控制台反馈的问题，提出把新任务真正显示到页面的需求。 | **现象演示**<br>点击按钮后控制台有信息但页面不变，提问：“程序怎样找到并修改页面？”<br><br>**任务发布**<br>明确本课完成“输入任务—点击添加—列表出现新项”。 | **问题分析**<br>指出需要读取输入框、找到列表并新增元素。<br><br>**步骤排序**<br>尝试排列查询、读取、创建、设置、插入五个动作。 | 从已有交互的缺口引出 DOM，建立清晰的操作目标和步骤预期。 |
| **2. DOM模型探究**<br>（10分钟） | 认识文档树、元素节点和 JavaScript 元素对象。 | **树形讲解**<br>把任务页面画成 DOM 树，说明父子关系和浏览器如何把标签转换为对象。<br><br>**查询示范**<br>使用 `querySelector` 获取输入框、按钮和列表，在控制台查看对象。 | **结构对应**<br>在 DOM 图中定位三个目标元素。<br><br>**查询练习**<br>根据 `id` 或类名写选择器并确认返回元素。 | 用 HTML 结构与对象一一对应，帮助学生理解“找到元素才能操作元素”。 |
| **3. 节点创建示范**<br>（8分钟） | 演示读取输入、创建列表项、设置文本和追加节点。 | **分步演示**<br>依次执行读取 `value`、`createElement("li")`、设置 `textContent`、追加到列表。<br><br>**安全说明**<br>比较 `textContent` 与直接拼接 HTML，强调用户输入应按文本处理。 | **代码跟随**<br>逐步输入并在每一步用控制台检查变量。<br><br>**顺序复述**<br>用自己的话说出创建节点的四步。 | 通过分步验证降低连续 DOM 操作难度，同时建立基础安全意识。 |
| **4. 添加功能实践**<br>（13分钟） | 完成动态添加、空值阻止、输入清空和焦点返回。 | **任务分层**<br>基础任务添加列表项；进阶任务使用 `trim()` 阻止空白输入，添加成功后清空并聚焦输入框。<br><br>**巡回指导**<br>检查选择器、事件函数、变量作用域和插入目标，指导用元素面板确认节点变化。 | **功能开发**<br>在原事件处理函数中整合校验与 DOM 创建。<br><br>**交互测试**<br>连续添加三项任务，测试空格输入、中文和较长文字，修复问题。 | 让学生完成系统首个核心可见功能，并用多类输入验证稳定性和用户体验。 |
| **5. 成果评价总结**<br>（4分钟） | 展示动态添加效果，归纳 DOM 操作流程。 | **作品点评**<br>检查是否存在空列表项、重复事件或输入未清空问题。<br><br>**流程总结**<br>概括“查询元素—读取数据—创建节点—设置内容—插入页面”。 | **成果演示**<br>现场添加任务并说明代码步骤。<br><br>**自查归档**<br>确认控制台无错误，页面节点数量正确。 | 用现场操作检验真实功能，形成可迁移的 DOM 修改流程。 |
## 板书设计
```text
DOM：HTML 在浏览器中的对象树
动态添加流程：
1. querySelector() 找元素
2. input.value 读数据
3. createElement() 建节点
4. textContent 设内容
5. append() 插页面
输入检查：trim()
成功后：清空 + focus()
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够查询页面元素并动态创建任务列表项，多数系统实现了空值阻止、添加后清空和焦点返回。元素面板帮助学生直观看到 DOM 节点变化。 |
| **教学反思** | 连续 DOM 步骤易造成变量混淆，应坚持每完成一步就输出或检查结果。部分学生倾向直接拼接 HTML，后续需持续强调用户输入使用 `textContent`，并通过特殊字符测试展示差异。 |

47
data/Web/17.md Normal file
View File

@@ -0,0 +1,47 @@
# 任务管理系统——状态管理与本地存储 教学设计
| **课题** | **任务管理系统——状态管理与本地存储** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解任务状态、数据数组、界面渲染和持久化之间的关系，掌握对象、数组更新、`localStorage`、JSON 序列化与反序列化。<br>**技能目标**：能够保存任务对象，实现完成状态切换、任务删除和刷新后恢复，并通过统一渲染函数保持数据与页面一致。<br>**素养目标**：建立“数据是单一事实来源”的状态管理意识，养成每次修改数据后保存、渲染和复测的习惯。 |
| **教学重难点** | **重点**：任务对象数组；状态更新；删除；JSON 转换；本地存储读写。<br>**难点**：理解先修改数据、再保存、最后重新渲染的流程，避免只改页面而数据未同步。 |
| **教学资源准备** | 上节课项目、状态流转图、本地存储示例、测试任务数据、浏览器 Application 面板、故障代码。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 数据丢失导入**<br>（5分钟） | 刷新页面后任务消失，提出状态管理和本地保存需求。 | **问题演示**<br>添加任务后刷新页面，展示列表清空；再演示完成版可恢复数据。<br><br>**任务发布**<br>明确本课实现添加、完成、删除和刷新恢复。 | **现象分析**<br>说明当前任务只存在于页面节点中。<br><br>**流程猜想**<br>提出需要把数据保存到浏览器并在启动时读取。 | 用数据丢失形成真实动机，引出界面之外的数据状态和持久化。 |
| **2. 状态模型探究**<br>（10分钟） | 使用对象表示单项任务，用数组保存全部任务，建立数据与界面关系。 | **模型讲解**<br>示范任务对象包含 `id`、`name`、`done`，说明唯一标识和状态字段作用。<br><br>**流程绘制**<br>画出“用户操作→修改数组→保存数据→重新渲染”的单向流程。 | **对象建模**<br>为两项任务填写对象属性和值。<br><br>**流程追踪**<br>模拟点击完成后数组中哪一项、哪个字段发生变化。 | 把操作转化为数据变化，建立后续功能共享同一状态的核心模型。 |
| **3. 存储渲染示范**<br>（8分钟） | 学习 `JSON.stringify`、`JSON.parse` 和 `localStorage` 读写。 | **代码演示**<br>编写 `saveTasks()` 保存数组，启动时读取字符串并还原；在 Application 面板查看数据。<br><br>**边界讲解**<br>说明首次访问没有数据时使用空数组，避免解析空值。 | **跟随编码**<br>保存两项模拟任务，刷新后读取并在控制台确认。<br><br>**面板观察**<br>查看键名和值，删除存储后观察程序默认状态。 | 通过可视化存储面板理解浏览器持久化及 JSON 转换的必要性。 |
| **4. 完整功能实践**<br>（13分钟） | 改造添加逻辑，完成统一渲染、状态切换、删除和本地保存。 | **任务分解**<br>添加时先写入数组；完成和删除根据 `id` 更新数组；每次修改后调用保存与渲染。<br><br>**巡回指导**<br>检查只改 DOM、标识重复、删除索引错误和启动时未渲染等问题。 | **系统改造**<br>编写 `renderTasks()`，为任务生成完成和删除按钮，连接状态更新函数。<br><br>**持久测试**<br>添加三项、完成一项、删除一项、刷新页面，核对剩余数据和状态。 | 以固定测试序列验证数据、界面和存储一致，完成系统核心闭环。 |
| **5. 成果评价总结**<br>（4分钟） | 展示刷新恢复效果，归纳状态管理流程。 | **故障点评**<br>对比只修改页面与修改数据后渲染的两种实现，说明前者刷新后失效。<br><br>**知识总结**<br>强调“数据先变、保存跟上、界面重画”。 | **成果演示**<br>按测试序列操作并刷新验证。<br><br>**流程复述**<br>说明一次删除操作经过的四个步骤。 | 用刷新作为真实性检验，强化单一数据来源和一致性意识。 |
## 板书设计
```text
任务状态
tasks = [
{ id, name, done }
]
用户操作
↓
修改 tasks
↓
saveTasks()
↓
renderTasks()
localStorage 只存字符串
数组 → JSON.stringify → 保存
读取 → JSON.parse → 数组
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够用任务对象数组管理状态，并实现完成、删除和刷新恢复。固定操作序列有效检验了数据、页面和本地存储的一致性，多数学生理解了统一渲染的价值。 |
| **教学反思** | 本课概念密度较高，学生容易同时修改 DOM 和数组造成不同步。应提供状态流转图和函数骨架，把实践重点限定为“修改数据—保存—渲染”，高级事件委托不在本课展开。 |

41
data/Web/18.md Normal file
View File

@@ -0,0 +1,41 @@
# 任务管理系统——系统整合测试与成果展示 教学设计
| **课题** | **任务管理系统——系统整合测试与成果展示** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解功能测试、边界测试、可用性测试和回归测试的基本含义，掌握前端项目交付检查流程。<br>**技能目标**：能够整合任务系统全部功能，依据测试用例发现并修复问题，完成项目归档、演示和技术说明。<br>**素养目标**：培养质量责任、协作测试、问题记录和成果表达能力，形成“功能完成不等于项目完成”的职业认识。 |
| **教学重难点** | **重点**：功能整合；测试用例；缺陷定位；回归测试；项目展示。<br>**难点**：覆盖正常、异常和边界场景，修复问题后验证其他功能未受影响。 |
| **教学资源准备** | 前五课任务管理系统、综合验收表、测试用例卡、缺陷记录单、浏览器开发者工具、项目展示评分表。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 验收任务导入**<br>（5分钟） | 回顾项目功能链，发布最终整合、测试和展示任务。 | **功能回顾**<br>串联任务数据、条件循环、函数事件、DOM 添加和本地存储。<br><br>**标准发布**<br>说明功能正确、界面清楚、数据持久、代码规范、表达完整五项验收标准。 | **进度盘点**<br>按功能清单标记已完成项和高风险项。<br><br>**测试分工**<br>两人一组确定开发者与测试员角色。 | 将分散知识整合为系统能力，以明确标准组织最终项目交付。 |
| **2. 测试方法梳理**<br>（8分钟） | 学习正常、异常、边界和回归测试，编写简要测试用例。 | **案例讲解**<br>以添加任务为例设计正常文字、空白、超长和特殊字符输入；说明预期结果和实际结果。<br><br>**回归说明**<br>演示修复添加功能后重新测试完成、删除和保存。 | **用例设计**<br>为添加、完成、删除、刷新恢复各写一条测试用例。<br><br>**结果预判**<br>填写预期结果，明确通过标准。 | 用结构化用例代替随意点击，建立覆盖风险和回归验证意识。 |
| **3. 系统整合测试**<br>（17分钟） | 执行双轮测试，记录、定位、修复并复测缺陷。 | **测试组织**<br>第一轮按用例执行，第二轮交换项目进行探索性测试；要求缺陷包含步骤、现象和截图或控制台信息。<br><br>**巡回评审**<br>引导按“复现—定位—最小修改—回归”的顺序处理，集中讲解高频问题。 | **用例执行**<br>测试空白、重复文字、特殊字符、连续删除和刷新恢复，记录结果。<br><br>**缺陷修复**<br>根据元素、控制台和存储面板定位原因，修复后重跑全部核心用例。 | 通过真实测试闭环综合运用调试工具，培养可复现、可验证的问题解决能力。 |
| **4. 成果展示交付**<br>（6分钟） | 完成项目整理并进行一分钟路演。 | **展示组织**<br>要求演示添加、完成、删除、刷新恢复，并说明数据流程和一个修复案例。<br><br>**多元评价**<br>教师与同伴依据评分表评价功能、代码和表达。 | **项目路演**<br>按固定场景操作系统，展示 localStorage 持久化。<br><br>**成果归档**<br>清理测试代码和无关文件，提交项目、测试表和缺陷记录。 | 让最终评价同时关注产品表现、技术理解和质量过程，形成完整交付成果。 |
| **5. 课程复盘总结**<br>（4分钟） | 回顾三项目能力递进，完成个人学习复盘。 | **体系梳理**<br>总结“HTML 组织内容、CSS 设计表现、JavaScript 管理数据与交互”。<br><br>**成长评价**<br>引导学生对照首课目标评估结构、样式、编程和调试能力。 | **个人复盘**<br>记录最有价值的技能、典型错误和下一步改进方向。<br><br>**成果确认**<br>提交完整学习成果并完成自评。 | 将18课时知识整合为前端开发基本流程，帮助学生形成可迁移的项目经验。 |
## 板书设计
```text
任务管理系统交付闭环
需求 → 数据 → 逻辑 → DOM → 存储
↓
测试用例 → 复现 → 定位 → 修复 → 回归
前端三层：
HTML CSS JavaScript
内容结构 视觉布局 数据交互
项目完成 = 功能 + 质量 + 文档 + 表达
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够依据测试用例完成系统验收，使用控制台、元素面板和存储面板定位问题。多数项目实现添加、完成、删除和刷新恢复，学生能说明数据流程与修复依据。 |
| **教学反思** | 自由测试容易遗漏边界情况，测试用例卡显著提升了覆盖度。部分学生修复后未做回归，教学中应把核心用例全量重跑设为交付条件，并在评分中保留测试证据权重。 |

42
data/Web/2.md Normal file
View File

@@ -0,0 +1,42 @@
# 个人主页——HTML文档结构与文本内容 教学设计
| **课题** | **个人主页——HTML文档结构与文本内容** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 HTML 元素、标签、属性和嵌套关系，掌握标题、段落、换行、强调等文本标签的语义。<br>**技能目标**：能够使用规范的 HTML 文档结构完成个人主页的页头、个人介绍和学习目标区域，并通过缩进检查层级。<br>**素养目标**：形成语义化表达和结构先行的开发意识，养成规范缩进、及时保存和浏览器验证的习惯。 |
| **教学重难点** | **重点**：HTML 文档基本结构；常用文本标签；元素嵌套与缩进。<br>**难点**：根据内容含义选择合适标签，而不是仅根据默认显示效果选择标签。 |
| **教学资源准备** | 上节课项目文件、个人简介素材单、标签功能卡、结构错误示例、Visual Studio Code、现代浏览器。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 任务回顾导入**<br>（5分钟） | 回顾项目目录和首个页面，提出“让浏览器读懂内容层级”的任务。 | **问题展示**<br>展示全部使用普通文本的页面，提问：“标题、正文和重点为什么难以区分？”<br><br>**目标明确**<br>说明本课要建立清晰的个人介绍内容结构。 | **页面诊断**<br>观察页面并指出信息层级不清的问题。<br><br>**素材准备**<br>整理姓名、专业、兴趣和学习目标等文字。 | 从已有页面的问题出发，引出标签语义与内容结构的必要性。 |
| **2. 标签结构探究**<br>（10分钟） | 学习文档声明、`html`、`head`、`body` 以及元素的开始标签、内容、结束标签和属性。 | **结构拆解**<br>用层级图讲解 HTML 文档，标出 `lang`、`meta charset`、`title` 的作用。<br><br>**错误辨析**<br>展示漏写结束标签、层级交叉和字符乱码示例，引导判断原因。 | **图示记录**<br>在任务单补全文档结构图。<br><br>**纠错讨论**<br>小组修正错误代码，说明标签应正确嵌套的理由。 | 通过可视化和纠错活动理解结构规则，避免只会机械复制模板。 |
| **3. 文本标签示范**<br>（8分钟） | 学习 `h1` 至 `h3`、`p`、`strong`、`em` 等标签及其语义。 | **代码演示**<br>将个人简介拆分为主标题、栏目标题和段落，演示重点信息的语义化标记。<br><br>**对比讲解**<br>比较用多个换行制造间距与使用段落组织内容的差异。 | **跟随编码**<br>在页面中添加姓名主标题、三个栏目标题和介绍段落。<br><br>**语义判断**<br>根据内容选择标题级别和强调方式。 | 将标签直接应用于项目文本，建立“内容含义决定标签”的基本原则。 |
| **4. 个人介绍实践**<br>（13分钟） | 完成页头、关于我、学习目标三个内容区，检查层级和浏览器显示。 | **任务分解**<br>给出验收清单：页面标题正确、仅一个 `h1`、栏目层级清楚、段落完整、重点突出。<br><br>**巡回点拨**<br>针对标签遗漏、嵌套错误和缩进混乱进行个别指导。 | **独立开发**<br>根据个人素材完善文本内容，使用标签组织信息。<br><br>**浏览调试**<br>保存并刷新页面，结合编辑器格式化功能检查缩进和闭合。 | 以清晰标准引导学生独立完成真实内容区，在实践中巩固结构和语义。 |
| **5. 展示评价总结**<br>（4分钟） | 展示典型作品，归纳 HTML 文本结构设计原则。 | **作品点评**<br>选择层级清晰和存在典型问题的页面，对照验收清单点评。<br><br>**要点归纳**<br>总结“一个主标题、层级不跳跃、段落表达完整”。 | **成果说明**<br>展示页面并解释一个标签选择。<br><br>**自查修正**<br>根据反馈修正一处结构问题。 | 通过说出选择理由深化语义理解，形成依据标准改进作品的习惯。 |
## 板书设计
```text
HTML 文档结构
html
├── head：页面信息
│ ├── meta charset
│ └── title
└── body：可见内容
├── h1：页面主标题
├── h2：栏目标题
└── p：正文段落
原则：语义正确、层级清楚、嵌套规范
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够识别 HTML 文档的主要组成，使用标题和段落标签完成个人介绍区域。多数作品层级清楚、内容完整，学生开始关注标签含义和代码缩进。 |
| **教学反思** | 部分学生把标题标签当作“调字号工具”，容易跳级使用。评价时应要求学生说明栏目关系，并用页面结构图辅助选择标签；对闭合错误可借助编辑器高亮快速定位。 |

41
data/Web/3.md Normal file
View File

@@ -0,0 +1,41 @@
# 个人主页——图片链接与多媒体展示 教学设计
| **课题** | **个人主页——图片链接与多媒体展示** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：掌握 `img`、`a`、`audio` 或 `video` 标签的基本属性，理解相对路径、替代文本和链接目标。<br>**技能目标**：能够为个人主页添加头像、作品图片、站内锚点和外部链接，并正确处理本地资源路径。<br>**素养目标**：树立图片版权、个人隐私和无障碍意识，养成资源分类、文件压缩和链接测试的习惯。 |
| **教学重难点** | **重点**：图片与链接标签；相对路径；`alt` 替代文本；站内外链接。<br>**难点**：根据当前文件位置推导资源路径，定位图片不显示和链接失效问题。 |
| **教学资源准备** | 个人主页项目、经过授权的示例图片与短音视频、路径关系图、图片压缩工具、链接测试清单。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 展示需求导入**<br>（5分钟） | 分析纯文字主页的不足，提出增加头像、作品图片和跳转入口的任务。 | **对比展示**<br>呈现纯文字版与图文版主页，提问：“哪些资源让个人特点更直观？”<br><br>**规范提醒**<br>说明不公开敏感信息，不使用来源不明的图片。 | **观察比较**<br>说出图像和链接对信息表达的作用。<br><br>**资源筛选**<br>从授权素材中选择头像和作品图片。 | 以项目展示需求引出多媒体，同时把版权与隐私规范置于操作之前。 |
| **2. 路径原理探究**<br>（9分钟） | 理解同级、下级和上级目录关系，学习相对路径写法。 | **图示讲解**<br>以 `index.html` 和 `images/avatar.jpg` 为例绘制目录树，演示浏览器如何查找资源。<br><br>**故障演示**<br>故意修改文件名和路径，展示图片破损图标并分析原因。 | **路径推导**<br>根据三组目录图填写正确资源路径。<br><br>**故障判断**<br>检查文件名、大小写和所在目录，说明错误位置。 | 用目录图和真实故障突破路径难点，培养按证据排查问题的意识。 |
| **3. 标签属性示范**<br>（8分钟） | 学习图片、链接和多媒体标签的核心属性与安全使用方式。 | **代码演示**<br>演示 `<img src="images/avatar.jpg" alt="个人头像">`，讲解 `src`、`alt`；演示外部链接和 `target="_blank"`。<br><br>**锚点示范**<br>为“作品展示”栏目设置 `id`，创建页内跳转链接。 | **跟随编码**<br>添加头像和一个外部学习资源链接，编写准确的替代文本。<br><br>**即时测试**<br>点击链接并临时修改路径，观察不同结果。 | 通过最小可运行示例掌握属性作用，让学生立即验证代码与页面行为。 |
| **4. 图文主页实践**<br>（14分钟） | 完成头像、作品展示、站内导航和可选多媒体区域。 | **任务发布**<br>要求添加一张头像、两张作品图、一个页内链接和一个外部链接；图片必须分类存放并写 `alt`。<br><br>**巡回指导**<br>帮助处理路径、中文文件名、图片过大和链接协议缺失等问题。 | **功能开发**<br>整理资源文件，完成图文和链接代码；进度较快者添加带控制条的短音频或视频。<br><br>**交叉测试**<br>与同伴交换项目，逐项测试图片、锚点和外部链接。 | 以多项可测试功能整合标签知识，通过交叉测试培养用户视角和质量意识。 |
| **5. 评价归纳总结**<br>（4分钟） | 展示作品并总结资源引用与链接测试方法。 | **案例点评**<br>对路径规范、替代文本准确和资源体积合理的作品进行点评。<br><br>**方法归纳**<br>总结“看目录、核文件、查路径、再刷新”的排错顺序。 | **展示交流**<br>说明自己解决的一次路径问题。<br><br>**清单自查**<br>确认资源均能打开且未暴露敏感信息。 | 将排错经验显性化，强化资源管理、版权和隐私责任。 |
## 板书设计
```text
personal-homepage/
├── index.html
└── images/
├── avatar.jpg
└── work-1.jpg
图片：src + alt
链接：href + 可读文字
页内跳转：href="#works" ↔ id="works"
排错：目录 → 文件名 → 路径 → 保存刷新
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够使用相对路径添加图片和链接，完成个人主页图文展示。交叉测试发现并修正了多处大小写、文件名和锚点错误，资源管理与用户测试意识得到强化。 |
| **教学反思** | 路径问题仍是主要障碍，直接告知答案不利于形成能力。后续指导应先让学生画出目录树，再按“文件在哪里、页面在哪里、如何到达”逐步推导，同时限制大体积媒体以保障课堂效率。 |

40
data/Web/4.md Normal file
View File

@@ -0,0 +1,40 @@
# 个人主页——列表与表格信息展示 教学设计
| **课题** | **个人主页——列表与表格信息展示** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解有序列表、无序列表和表格的语义及适用场景，掌握 `ul`、`ol`、`li`、`table`、`tr`、`th`、`td` 的结构关系。<br>**技能目标**：能够用列表呈现技能与兴趣，用表格呈现学习经历，并检查行列对应关系。<br>**素养目标**：培养信息分类和结构化表达能力，养成先分析数据关系再选择页面元素的习惯。 |
| **教学重难点** | **重点**：列表类型选择；表格行、列、表头结构；规范嵌套。<br>**难点**：将原始个人资料转换为层次清楚的列表和二维表格，避免使用表格进行页面布局。 |
| **教学资源准备** | 个人主页项目、技能兴趣素材卡、学习经历数据表、结构错误示例、Visual Studio Code、浏览器。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 信息整理导入**<br>（5分钟） | 比较长段落与结构化信息，明确技能清单和成长经历展示任务。 | **案例对比**<br>展示同一组资料的段落版、列表版和表格版，提问哪种更易查找。<br><br>**任务明确**<br>提出为个人主页新增“我的技能”和“成长经历”区域。 | **阅读比较**<br>从查找速度和关系表达角度评价三种形式。<br><br>**资料分类**<br>将个人素材分为并列项、顺序项和行列数据。 | 从信息表达效率出发，引导学生依据数据关系选择合适结构。 |
| **2. 列表结构探究**<br>（9分钟） | 学习无序列表、有序列表及列表项的嵌套规则。 | **语义讲解**<br>用兴趣爱好说明并列关系，用学习计划说明先后关系，比较 `ul` 与 `ol`。<br><br>**代码辨析**<br>展示把 `li` 写在列表外部的错误，说明父子关系。 | **关系判断**<br>为四组信息选择列表类型并说明理由。<br><br>**跟随编码**<br>完成技能清单和三步学习计划。 | 将标签选择建立在信息关系上，巩固正确嵌套与语义表达。 |
| **3. 表格结构示范**<br>（8分钟） | 学习表格、行、表头和数据单元格的组织方式。 | **网格讲解**<br>把学习经历表拆成“时间、经历、收获”三列，演示逐行编写代码。<br><br>**错误演示**<br>展示单元格数量不一致造成的错位，引导定位问题。 | **结构标注**<br>在纸面表格上标出行、列和表头。<br><br>**模仿操作**<br>输入表头和一行数据，观察浏览器默认效果。 | 用二维网格对应代码结构，帮助学生理解多层标签关系。 |
| **4. 信息模块实践**<br>（14分钟） | 完成技能列表、兴趣列表和学习经历表格，并进行结构检查。 | **任务发布**<br>要求至少使用两种列表，表格包含表头和三行数据；强调表格只用于数据。<br><br>**巡回指导**<br>检查列表父子关系、每行单元格数量和缩进，指导使用开发者工具查看结构。 | **独立开发**<br>根据个人资料完成两个列表和一个表格。<br><br>**协作核验**<br>同伴按“类型合适、嵌套正确、行列一致、内容真实”四项检查。 | 通过真实资料组织提升结构化表达能力，以同伴核验发现不易察觉的嵌套问题。 |
| **5. 成果总结评价**<br>（4分钟） | 归纳列表和表格的选择原则，展示阶段成果。 | **作品点评**<br>展示信息清晰的页面，指出用表格做布局的不当做法。<br><br>**规则总结**<br>概括“并列用无序、步骤用有序、二维数据用表格”。 | **口头归纳**<br>用自己的页面举例说明三种结构。<br><br>**自查修正**<br>根据规则调整一个不合适的结构。 | 将操作经验提炼为可迁移的选择规则，服务后续内容设计。 |
## 板书设计
```text
信息关系 → HTML 结构
并列信息：ul > li
顺序信息：ol > li
二维数据：table
├── tr > th
└── tr > td
个人主页成果：
技能清单 + 学习计划 + 成长经历表
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够依据数据关系选择列表或表格，完成技能、计划和经历模块。纸面网格标注有效降低了表格嵌套难度，同伴核验促进了行列一致性检查。 |
| **教学反思** | 少数学生仍倾向用空格或表格控制页面位置，说明内容结构与视觉布局尚未完全区分。课堂点评应明确 HTML 负责语义结构，布局将在 CSS 项目中完成，并通过反例强化边界。 |

42
data/Web/5.md Normal file
View File

@@ -0,0 +1,42 @@
# 个人主页——表单设计与信息收集 教学设计
| **课题** | **个人主页——表单设计与信息收集** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解表单、控件、标签和提交的基本关系，掌握 `form`、`label`、`input`、`textarea`、`button` 的常用属性。<br>**技能目标**：能够设计并实现包含姓名、邮箱、留言和提交按钮的联系表单，使用浏览器内置校验检查必填项和邮箱格式。<br>**素养目标**：建立用户体验、隐私保护和最少收集原则，养成让表单标签明确、操作可理解的设计习惯。 |
| **教学重难点** | **重点**：标签与控件关联；输入类型；`name`、`required` 等属性；表单结构。<br>**难点**：从用户任务出发设计合理字段，理解当前静态页面只能完成前端输入与校验，不能真正保存数据。 |
| **教学资源准备** | 个人主页项目、优秀与问题表单案例、表单需求卡、浏览器开发者工具、隐私安全提示卡。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 联系需求导入**<br>（5分钟） | 从“访问者如何联系主页作者”引出联系表单和信息边界。 | **场景创设**<br>展示只公开手机号与使用联系表单的两种页面，提问哪种更稳妥。<br><br>**安全提示**<br>强调课堂使用模拟信息，不收集身份证、住址等敏感数据。 | **风险判断**<br>比较两种联系方式的便利性和隐私风险。<br><br>**字段筛选**<br>选出完成留言所必需的最少信息。 | 将表单学习与真实联系需求、隐私责任结合，建立最少收集意识。 |
| **2. 表单要素探究**<br>（10分钟） | 认识表单容器、标签、输入框、文本域和按钮。 | **结构讲解**<br>说明 `label` 描述字段，`for` 与控件 `id` 对应；讲解文本、邮箱输入类型及 `name`。<br><br>**体验对比**<br>演示点击已关联与未关联标签的差异，说明可用性价值。 | **要素配对**<br>将标签、控件、属性和作用卡片正确配对。<br><br>**代码跟随**<br>完成姓名字段，并通过点击标签验证关联。 | 通过交互体验理解标签关联，而不是只记忆表单标签名称。 |
| **3. 校验功能示范**<br>（8分钟） | 学习 `required`、`type="email"`、`placeholder`，理解浏览器内置校验。 | **代码演示**<br>为姓名和邮箱设置必填要求，输入错误邮箱并提交，观察提示。<br><br>**边界说明**<br>说明前端校验改善输入质量，但静态页面不会保存或发送数据。 | **测试记录**<br>分别测试空值、错误邮箱和正确邮箱，记录页面反馈。<br><br>**概念辨析**<br>区分“输入校验”和“数据存储”。 | 用测试结果理解属性作用，同时避免学生误认为表单已具备后端处理能力。 |
| **4. 联系表单实践**<br>（13分钟） | 完成姓名、邮箱、留言和提交按钮，优化字段顺序与提示文字。 | **任务发布**<br>要求字段有明确标签，姓名和邮箱必填，邮箱使用正确类型，留言使用文本域。<br><br>**巡回指导**<br>检查 `for` 与 `id`、字段 `name`、控件嵌套及隐私提示，帮助修复提交无提示问题。 | **表单开发**<br>编写联系区域，设置标签、控件和必要属性。<br><br>**用户测试**<br>同伴扮演访问者完成三组测试，反馈字段含义和错误提示是否清楚。 | 让学生从开发者和用户双重视角完善功能，培养可用性测试习惯。 |
| **5. 评价总结提升**<br>（4分钟） | 总结表单结构、基础校验和信息安全原则。 | **成果点评**<br>展示字段简洁、标签清晰的表单，纠正只用占位文字代替标签的问题。<br><br>**要点归纳**<br>总结“字段必要、标签明确、格式校验、隐私优先”。 | **自评修正**<br>按四项原则检查并修正表单。<br><br>**成果说明**<br>说明一项为用户考虑的设计。 | 将表单技术提升为用户体验和信息责任意识，完成项目功能模块。 |
## 板书设计
```text
联系表单
form
├── label ↔ input
│ ├── id / for
│ ├── name
│ └── required
├── textarea
└── button
设计原则：
最少收集 + 清晰标签 + 格式校验 + 隐私保护
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够完成带标签关联和浏览器校验的联系表单，并通过同伴测试发现字段含义不清等问题。多数学生能区分前端校验与数据保存，隐私保护意识得到强化。 |
| **教学反思** | 学生容易依赖 `placeholder` 而省略可见标签，也容易把“提交按钮可点击”理解为数据已发送。应持续用键盘操作和断网测试呈现差异，并明确静态项目的功能边界。 |

42
data/Web/6.md Normal file
View File

@@ -0,0 +1,42 @@
# 个人主页——语义化整合与项目发布 教学设计
| **课题** | **个人主页——语义化整合与项目发布** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 `header`、`nav`、`main`、`section`、`footer` 等语义化结构，了解网页质量检查和静态发布的基本流程。<br>**技能目标**：能够重构个人主页结构，修复标签、路径和链接问题，按验收清单完成浏览器测试并生成可分享的项目成果。<br>**素养目标**：培养版本意识、质量意识和成果表达能力，形成开发完成后必须测试、整理和复盘的职业习惯。 |
| **教学重难点** | **重点**：语义化区域划分；项目整合；结构、资源、链接与表单检查。<br>**难点**：在不改变内容的前提下重构结构，依据测试现象定位问题并完成规范发布。 |
| **教学资源准备** | 前五课个人主页项目、语义标签卡、项目验收清单、浏览器开发者工具、压缩工具或校内静态发布空间。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 项目验收导入**<br>（5分钟） | 回顾各模块成果，发布“整合并交付个人主页”的最终任务。 | **进度回顾**<br>展示六课时成果链，说明本课不再增加大量内容，而是提升结构与质量。<br><br>**标准发布**<br>讲解内容完整、结构语义、资源有效、操作可用、目录规范五类验收项。 | **成果盘点**<br>在清单上标记已完成和待完善模块。<br><br>**问题预判**<br>写出项目当前最可能存在的两个问题。 | 从“写完代码”转向“完成交付”，建立基于标准验收项目的意识。 |
| **2. 语义结构重构**<br>（8分钟） | 学习页面区域语义，将现有内容组织为页头、导航、主体栏目和页脚。 | **结构示范**<br>把普通容器替换为 `header`、`nav`、`main`、`section`、`footer`，说明各区域职责。<br><br>**层级提醒**<br>强调 `main` 的唯一性和标题层级连续。 | **结构分析**<br>在页面截图上标注五类区域。<br><br>**跟随重构**<br>先完成页头、主体和页脚的语义化调整。 | 用区域职责提升代码可读性，为后续 CSS 布局和协作开发建立基础。 |
| **3. 项目整合实践**<br>（17分钟） | 整合文本、图片、列表、表格和表单，依据清单修复问题。 | **任务组织**<br>按“结构→内容→资源→交互→目录”顺序安排测试，示范使用开发者工具检查元素。<br><br>**巡回诊断**<br>不直接代改代码，引导学生根据错误位置、控制台或网络面板信息定位原因。 | **独立重构**<br>完成全部语义区域，补齐缺失内容和替代文本。<br><br>**双轮测试**<br>先自测，再由同伴按清单测试图片、锚点、外链、表单校验和标题层级。 | 留出主体时间进行真实项目整合，通过双轮测试形成发现、定位、修复的质量闭环。 |
| **4. 成果发布展示**<br>（6分钟） | 整理目录、生成压缩包或发布到校内静态空间，展示项目。 | **发布示范**<br>演示删除无关文件、确认入口文件、压缩项目并在新位置重新打开测试。<br><br>**展示评价**<br>邀请学生用一分钟介绍页面定位、主要栏目和一个解决的问题。 | **成果归档**<br>按统一命名整理项目并完成离线发布测试。<br><br>**项目路演**<br>展示主页，说明设计选择和调试经历。 | 让学生经历可复现的交付流程，以表达和演示强化项目成就感。 |
| **5. 项目复盘总结**<br>（4分钟） | 回顾 HTML 项目知识链，完成个人复盘。 | **知识串联**<br>梳理“文档结构—文本—媒体—结构化数据—表单—语义整合”。<br><br>**迁移提问**<br>提出“如何让页面更美观并适配不同屏幕”，衔接 CSS 项目。 | **复盘填写**<br>记录一个掌握点、一个典型错误和一个改进目标。<br><br>**成果确认**<br>提交项目与验收清单。 | 通过知识串联和项目复盘巩固 HTML 结构能力，自然过渡到样式与布局学习。 |
## 板书设计
```text
个人主页语义结构
header
├── nav
main
├── section：关于我
├── section：技能与经历
├── section：作品展示
└── section：联系表单
footer
验收：结构 → 内容 → 资源 → 操作 → 目录
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够用语义标签整合前五课成果，并依据清单完成自测和同伴测试。多数项目可在新位置正常打开，学生能清楚说明页面结构和一次调试过程。 |
| **教学反思** | 整合课容易演变为教师集中修错，应坚持让学生先描述现象、定位区域、提出原因再修改。发布测试暴露了部分绝对路径和遗漏资源问题，说明跨位置复测是检验项目完整性的有效方式。 |

43
data/Web/7.md Normal file
View File

@@ -0,0 +1,43 @@
# 校园活动网站——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
基础视觉：主色 + 辅助色 + 正文色 + 字体
原则：内容与表现分离、样式集中复用
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够正确关联外部样式表，使用元素和类选择器建立网站基础视觉。多数作品颜色数量合理、文字可读，学生开始借助开发者工具确认规则是否匹配。 |
| **教学反思** | 部分学生追求颜色丰富而忽略一致性，或用过宽的元素选择器造成连锁变化。应先限定配色和选择器范围，再允许个性调整，并要求每次修改后说明影响对象。 |

41
data/Web/8.md Normal file
View File

@@ -0,0 +1,41 @@
# 校园活动网站——盒模型与页面分区 教学设计
| **课题** | **校园活动网站——盒模型与页面分区** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解内容区、内边距、边框和外边距组成的 CSS 盒模型，掌握宽度、间距、边框及 `box-sizing` 的作用。<br>**技能目标**：能够使用盒模型调整校园活动网站的页头、公告区和内容区尺寸与间距，解决元素拥挤和宽度溢出问题。<br>**素养目标**：培养用开发者工具测量和调试界面的习惯，形成以数据而非反复猜测调整布局的工程意识。 |
| **教学重难点** | **重点**：盒模型四层结构；`padding` 与 `margin` 的区别；边框和宽度设置。<br>**难点**：理解默认盒模型下实际占用宽度的计算，正确使用 `box-sizing: border-box` 控制尺寸。 |
| **教学资源准备** | 上节课项目、盒模型实体图、宽度计算练习卡、问题页面、浏览器开发者工具。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 布局问题导入**<br>（5分钟） | 观察文字贴边、区域拥挤和横向溢出，提出页面分区优化任务。 | **问题呈现**<br>展示三个典型问题，提问：“为什么设置了宽度，元素仍超出容器？”<br><br>**任务明确**<br>要求本课完成页头、公告区和主体容器的间距设计。 | **现象描述**<br>指出各区域在尺寸和间距上的问题。<br><br>**原因猜测**<br>根据已有经验判断可能与边框、内外间距有关。 | 从可见问题引出盒模型，让抽象尺寸概念服务于具体页面优化。 |
| **2. 盒模型探究**<br>（10分钟） | 学习 content、padding、border、margin 的位置和用途。 | **模型讲解**<br>用“礼盒”类比四层结构，在开发者工具中高亮元素并展示颜色区域。<br><br>**概念对比**<br>比较 `padding` 增加内部留白与 `margin` 拉开元素距离的效果。 | **模型标注**<br>在盒模型图中填写四层名称和作用。<br><br>**参数实验**<br>分别修改内外边距，观察文字和相邻元素的位置变化。 | 通过开发者工具可视化尺寸关系，避免把两个间距属性混用。 |
| **3. 宽度计算示范**<br>（8分钟） | 理解标准盒模型占用宽度和 `border-box` 规则。 | **计算演示**<br>计算 `width: 300px` 加左右内边距和边框后的实际宽度，说明溢出原因。<br><br>**方案示范**<br>设置 `box-sizing: border-box`，观察总宽度保持不变。 | **计算练习**<br>完成两道实际宽度计算并核对工具显示值。<br><br>**代码验证**<br>切换盒模型规则，记录元素宽度变化。 | 将计算结果与浏览器测量对应，建立可验证的尺寸判断能力。 |
| **4. 页面分区实践**<br>（13分钟） | 优化页头、公告区和主体容器，建立统一的间距规则。 | **任务发布**<br>要求设置全局 `border-box`、主体最大宽度、居中外边距、区域内边距和公告边框。<br><br>**巡回指导**<br>引导使用计算样式和盒模型面板定位溢出、间距叠加等问题。 | **样式调整**<br>按验收图完成三个区域的尺寸、边框和间距设置。<br><br>**工具测量**<br>选择元素查看实际宽高，修复横向滚动和贴边问题。 | 在完整页面中综合使用盒模型，以工具测量替代盲目修改数值。 |
| **5. 展示总结评价**<br>（4分钟） | 比较优化前后页面，归纳尺寸与间距调试方法。 | **前后对比**<br>展示典型作品，说明统一间距如何提升秩序感。<br><br>**方法总结**<br>归纳“选元素—看盒模型—算尺寸—改属性—再验证”。 | **结果说明**<br>指出自己修复的一个布局问题及所用属性。<br><br>**规范自查**<br>检查是否存在随意叠加的重复间距。 | 将实践经验形成调试流程，增强对布局问题的分析能力。 |
## 板书设计
```text
盒模型（由内到外）
content → padding → border → margin
标准盒模型：
实际宽度 = width + 左右padding + 左右border
推荐：
* { box-sizing: border-box; }
调试：选择元素 → 查看盒模型 → 测量 → 修改
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够区分内边距和外边距，使用盒模型优化页面分区。通过计算与开发者工具测量，多数学生成功解决了宽度溢出和内容贴边问题。 |
| **教学反思** | 盒模型计算对部分学生仍较抽象，单纯公式讲解效果有限。应保持“纸面计算—浏览器测量—切换规则”的三步验证，并限制同一环节引入过多尺寸单位。 |

41
data/Web/9.md Normal file
View File

@@ -0,0 +1,41 @@
# 校园活动网站——Flex弹性布局 教学设计
| **课题** | **校园活动网站——Flex弹性布局** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 Flex 容器、项目、主轴和交叉轴，掌握 `display: flex`、排列、对齐、换行和间距等常用属性。<br>**技能目标**：能够将校园活动列表从纵向堆叠改为可换行的弹性布局，并完成不同数量卡片的对齐测试。<br>**素养目标**：培养根据布局目标选择工具、通过控制变量观察效果的实验意识，形成适配内容变化的弹性设计思维。 |
| **教学重难点** | **重点**：容器与项目关系；主轴和交叉轴；`justify-content`、`align-items`、`flex-wrap`、`gap`。<br>**难点**：根据 `flex-direction` 判断轴向，区分主轴排列与交叉轴对齐。 |
| **教学资源准备** | 校园活动网站项目、Flex 轴向图、属性效果卡、活动卡片 HTML 素材、浏览器开发者工具。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 排列需求导入**<br>（5分钟） | 分析活动条目纵向堆叠造成空间利用低的问题，提出多卡片排列任务。 | **场景演示**<br>增加活动数量，展示普通文档流下的页面，提问如何让卡片自动横排并在空间不足时换行。<br><br>**任务发布**<br>明确本课完成活动列表弹性布局。 | **问题观察**<br>描述现有排列的不足和理想效果。<br><br>**方案猜想**<br>思考需要控制父区域还是逐个移动卡片。 | 以内容数量变化制造真实布局需求，引出容器统一控制的价值。 |
| **2. Flex原理探究**<br>（10分钟） | 认识 Flex 容器、项目、主轴、交叉轴及方向变化。 | **图示讲解**<br>在轴向图上标注容器和项目，切换 `row` 与 `column` 展示主轴变化。<br><br>**属性实验**<br>使用开发者工具开启 Flex 标识，实时调整主轴排列和交叉轴对齐。 | **轴向判断**<br>根据四张布局图指出主轴和交叉轴。<br><br>**效果预测**<br>修改属性前先预测卡片位置，再观察结果。 | 用图示、预测和实时结果建立轴向概念，减少属性死记硬背。 |
| **3. 常用属性示范**<br>（8分钟） | 学习换行、间距、对齐及卡片基础宽度控制。 | **代码演示**<br>为活动列表设置 `display: flex`、`flex-wrap: wrap` 和 `gap`，比较不同 `justify-content`。<br><br>**边界测试**<br>删除或增加卡片，观察布局能否自动调整。 | **跟随编码**<br>把活动列表设为 Flex 容器，调整间距与对齐。<br><br>**变化测试**<br>使用三张、四张、五张卡片验证排列。 | 强调布局应适应内容变化，让学生理解弹性布局不是固定摆放。 |
| **4. 活动列表实践**<br>（13分钟） | 完成活动卡片横向排列、自动换行和整齐对齐。 | **任务分层**<br>基础任务实现横排换行；进阶任务设置卡片弹性宽度并保持最小可读尺寸。<br><br>**巡回指导**<br>针对把属性写在子元素、轴向判断错误和固定宽度过大进行点拨。 | **布局开发**<br>完成活动列表样式，调整 `gap`、对齐方式和卡片宽度。<br><br>**窗口测试**<br>拖动浏览器宽度，记录卡片从三列到两列或一列的变化。 | 通过分层任务兼顾差异，让学生在真实窗口变化中验证弹性布局。 |
| **5. 成果评价总结**<br>（4分钟） | 展示不同宽度下的页面，归纳 Flex 布局步骤。 | **作品点评**<br>选择能自然换行、间距统一的作品，指出过度固定宽度的问题。<br><br>**步骤梳理**<br>总结“找父容器—定方向—排主轴—对交叉轴—测变化”。 | **成果演示**<br>拖动窗口展示布局变化并说明一项属性。<br><br>**口诀归纳**<br>复述 Flex 布局五步。 | 用动态演示检验真实适配效果，将属性知识转化为布局方法。 |
## 板书设计
```text
Flex 布局
容器：display: flex
项目：容器的直接子元素
主轴：justify-content
交叉轴：align-items
换行：flex-wrap
间距：gap
步骤：找父容器 → 定轴向 → 排列 → 对齐 → 测试
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够识别 Flex 容器与项目，使用换行、间距和对齐属性完成活动列表。多数学生通过增删卡片和改变窗口宽度验证了布局弹性。 |
| **教学反思** | 主轴与交叉轴仍易混淆，尤其在方向改为纵向后。应坚持每次设置对齐前先画箭头判断轴向，并减少同时修改多个属性，便于观察因果关系。 |

96
data/Web/SKILLS.md Normal file
View File

@@ -0,0 +1,96 @@
# Role: 中职 Web 前端开发项目式教学设计专家
## Profile
- language: 中文
- description: 面向中等职业学校学生设计 HTML、CSS、JavaScript 项目式课程，以完整网页项目为主线，将知识讲解、编码实践、调试测试和成果展示整合为可直接实施的单课时教案。
- expertise: Web 前端基础、项目式教学、理实一体化课堂、任务分解、学习评价、Markdown 教学文档编排。
- target_audience: 中职信息技术相关专业教师、Web 前端实训教师和职业培训教师。
## Core Skills
1. **项目任务设计**
- 将 HTML、CSS、JavaScript 知识映射到可观察、可验收的网页功能。
- 保持课时之间成果衔接，使学生逐步完成完整项目。
- 将复杂功能拆分为符合中职学生认知水平的阶梯任务。
2. **课堂活动设计**
- 按“情境导入—新知探究—示范操作—项目实践—展示总结”组织教学。
- 教师活动突出提问、示范、点拨、巡回指导和评价。
- 学生活动突出需求分析、代码编写、浏览器测试、同伴互评和成果表达。
3. **Web 技术教学**
- 使用 HTML5 语义化标签组织网页内容。
- 使用 CSS3 完成视觉样式、盒模型、Flex 布局和响应式适配。
- 使用原生 JavaScript 完成变量、流程控制、函数、事件、DOM 和 localStorage 教学。
- 使用 Visual Studio Code、现代浏览器和开发者工具构建可复现的实训环境。
## Rules
1. **项目目标导向**
- 每份教案必须属于“个人主页”“校园活动网站”或“任务管理系统”中的一个明确课时。
- 每课必须形成网页区域、样式组件或交互功能等阶段成果。
- 知识点和练习必须直接服务于本课项目任务，不设置脱离情境的孤立练习。
2. **理实一体**
- 理论讲解后立即安排代码模仿、功能实现或调试验证。
- 课堂实践应能在普通计算机实训室完成，不依赖服务器和付费服务。
- 示例代码必须使用 HTML5、CSS3 和原生 JavaScript，可在现代浏览器中直接运行。
3. **难度与范围**
- 面向 Web 前端入门学生，避免框架、构建工具、复杂算法和后端开发。
- 单课任务容量必须适合 40 分钟，教学过程各环节时间之和必须等于 40 分钟。
- 重点培养结构化页面、样式复用、交互逻辑、调试测试和项目表达能力。
4. **职业规范**
- 强调项目目录、文件命名、代码缩进、语义化标签、样式复用和注释规范。
- 强调图片版权、个人信息保护、表单数据安全和无障碍基础意识。
- 引导学生使用浏览器开发者工具定位结构、样式和脚本问题。
## Workflow
1. 明确本课所属项目、前置成果、阶段任务和验收标准。
2. 编写知识、技能、素养三维目标以及教学重难点。
3. 将 40 分钟分配给 5 个教学环节，并在每个环节中完整设计教学内容、教师活动、学生活动和设计意图。
4. 设计板书，呈现页面结构、样式关系、程序流程或关键代码。
5. 撰写具体的教学成效与反思，检查项目连贯性、技术准确性和课堂可实施性。
## Output Format
1. 顶级标题必须为：
`# 项目名称——本课时任务 教学设计`
2. 基本信息使用 Markdown 表格，必须包含：
- 课题
- 课时：`1课时（40分钟）`
- 教学目标：知识目标、技能目标、素养目标
- 教学重难点
- 教学资源准备
3. 教学过程使用五列表格：
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
4. 教师活动和学生活动中的主要活动必须使用加粗四字标题，例如：
`**情境创设**`、`**代码演示**`、`**动手实践**`、`**协作测试**`
5. 教学过程后必须依次设置：
- `## 板书设计`
- `## 教学成效与反思`
6. 教学成效与反思使用独立表格，包含“教学成效”和“教学反思”，合计不超过 300 字。
## Validation
1. 检查标题是否包含项目名称和具体任务。
2. 检查课时是否为 40 分钟，教学过程时间总和是否为 40。
3. 检查三维目标、重难点和资源准备是否完整。
4. 检查教学过程是否包含 5 个主要环节和 5 个规定列。
5. 检查教师活动、学生活动是否使用四字活动标题。
6. 检查每课是否有明确阶段成果并与前后课衔接。
7. 检查 HTML、CSS、JavaScript 示例的语法和浏览器兼容性。
8. 检查教学成效与反思是否具体、非模板化。

28
data/Web/titles.md Normal file
View File

@@ -0,0 +1,28 @@
# Web 前端开发课程大纲
## 项目一：个人主页
- 项目启动与开发环境搭建
- HTML 文档结构与文本内容
- 图片、链接与多媒体
- 列表与表格展示
- 表单设计与信息收集
- 语义化页面整合与发布
## 项目二：校园活动网站
- CSS 基础与样式美化
- 盒模型与页面分区
- Flex 弹性布局
- 导航栏与卡片组件
- 响应式布局与媒体查询
- 网站整合、调试与优化
## 项目三：任务管理系统
- JavaScript 基础与变量
- 条件判断与循环
- 函数与事件处理
- DOM 操作与任务添加
- 任务状态管理与本地存储
- 系统整合、测试与成果展示