first commit

data/docs/superpowers/specs/2026-06-15-web-teaching-design.md

@@ -0,0 +1,104 @@
+# Web 前端开发教学设计方案
+
+## 1. 建设目标
+
+在 `Web` 目录中建设一套面向中职学生的 Web 前端开发项目式教学设计。课程共 18 课时，每课时 40 分钟，覆盖 HTML、CSS 和 JavaScript 基础知识，并通过三个递进项目形成完整的学习路径。
+
+课程沿用现有 C#、Python 教学设计的表达风格和 Markdown 表格结构，突出真实任务、学生实践、成果展示和职业规范。
+
+## 2. 课程定位
+
+- 教学对象：中等职业学校信息技术相关专业学生。
+- 技术范围：HTML5、CSS3、原生 JavaScript，不引入前端框架和构建工具。
+- 开发环境：Visual Studio Code、Chrome 或 Edge 浏览器、浏览器开发者工具。
+- 教学组织：三个项目，每个项目 6 课时；每课完成一个可观察、可测试的项目子任务。
+- 课时标准：1 课时 40 分钟，各教学环节时长之和必须等于 40 分钟。
+
+## 3. 项目与课时设计
+
+### 项目一：个人主页
+
+项目目标是完成一个结构完整、内容丰富、可发布的个人主页，重点学习 HTML 页面结构和常用元素。
+
+| 课次 | 教学主题 | 项目成果 |
+|:---:|:---|:---|
+| 1 | 项目启动与开发环境搭建 | 建立项目目录并运行第一个网页 |
+| 2 | HTML 文档结构与文本内容 | 完成个人介绍内容区 |
+| 3 | 图片、链接与多媒体 | 完成作品和兴趣展示区 |
+| 4 | 列表与表格展示 | 完成技能清单与成长经历表 |
+| 5 | 表单设计与信息收集 | 完成联系信息表单 |
+| 6 | 语义化页面整合与发布 | 整合、检查并发布个人主页 |
+
+### 项目二：校园活动网站
+
+项目目标是完成一个视觉统一、布局清晰、适配不同屏幕的校园活动网站，重点学习 CSS 样式与响应式布局。
+
+| 课次 | 教学主题 | 项目成果 |
+|:---:|:---|:---|
+| 7 | CSS 基础与样式美化 | 建立网站基础视觉规范 |
+| 8 | 盒模型与页面分区 | 完成活动页面主体分区 |
+| 9 | Flex 弹性布局 | 完成活动列表弹性排列 |
+| 10 | 导航栏与卡片组件 | 完成导航和活动卡片组件 |
+| 11 | 响应式布局与媒体查询 | 完成移动端适配 |
+| 12 | 网站整合、调试与优化 | 完成校园活动网站并通过检查 |
+
+### 项目三：任务管理系统
+
+项目目标是完成一个能够添加、切换状态、删除并保存任务的浏览器应用，重点学习 JavaScript 程序逻辑和网页交互。
+
+| 课次 | 教学主题 | 项目成果 |
+|:---:|:---|:---|
+| 13 | JavaScript 基础与变量 | 读取并显示任务基础数据 |
+| 14 | 条件判断与循环 | 完成任务分类与批量渲染 |
+| 15 | 函数与事件处理 | 完成按钮事件和功能封装 |
+| 16 | DOM 操作与任务添加 | 实现动态添加任务 |
+| 17 | 任务状态管理与本地存储 | 实现状态切换、删除和持久化 |
+| 18 | 系统整合、测试与成果展示 | 完成系统验收和项目展示 |
+
+## 4. 文件结构
+
+| 文件 | 职责 |
+|:---|:---|
+| `Web/titles.md` | 保存 18 个课时标题的课程大纲 |
+| `Web/SKILLS.md` | 保存 Web 项目式教学设计角色、规则、流程和输出规范 |
+| `Web/1.md` 至 `Web/18.md` | 分别保存 18 份单课时教学设计 |
+
+除上述文件外，不修改 `C#` 和 `Python` 目录中的现有材料。
+
+## 5. 单课时文档规范
+
+每份教案必须包含以下部分：
+
+1. 一级标题，格式为“项目名称——课时任务 教学设计”。
+2. 基本信息表，包含课题、课时、教学目标、教学重难点、教学资源准备。
+3. 教学目标分为知识目标、技能目标、素养目标。
+4. 教学过程表，包含教学环节、教学内容、教师活动、学生活动、设计意图。
+5. 教师活动和学生活动中的主要活动使用加粗四字标题。
+6. 教学过程安排 5 个主要环节，各环节时长合计 40 分钟。
+7. 板书设计，以简明文本图示呈现知识结构、项目流程或关键代码关系。
+8. 教学成效与反思表，包含教学成效和教学反思，总字数不超过 300 字。
+
+每份教案正文控制在约 800 至 1200 个中文字符，教学过程为主体，课堂任务必须在标准机房环境中可完成。
+
+## 6. 教学设计原则
+
+- 项目驱动：知识点必须直接服务于当前项目子任务。
+- 理实一体：讲解后立即安排模仿、编码、调试或验收活动。
+- 循序渐进：从页面结构到视觉布局，再到程序交互，控制单课认知负荷。
+- 学生中心：安排需求分析、编码实践、协作测试、作品展示等具体活动。
+- 规范前置：强调目录管理、语义化标签、样式复用、代码缩进、命名和浏览器调试规范。
+- 成果可见：每课形成网页区域、样式组件或交互功能，并与前后课成果衔接。
+- 技术适度：只使用原生 Web 技术，不涉及框架、工程化构建、服务器开发和复杂算法。
+
+## 7. 验收规则
+
+完成后执行自动与人工结合的检查：
+
+- `Web` 中应有 `titles.md`、`SKILLS.md` 和编号 1 至 18 的教案，共 20 个 Markdown 文件。
+- 18 份教案均以一级标题开头，并包含“教学过程”“板书设计”“教学成效与反思”。
+- 每份教案的课时均为“1课时（40分钟）”。
+- 每份教案教学过程中的时间数字之和均为 40。
+- 每份教案均包含知识目标、技能目标、素养目标。
+- 教学过程表的五列齐全，教师活动和学生活动均包含四字活动标题。
+- 课次顺序与三个项目的能力递进一致，不重复设置同一课时任务。
+- HTML、CSS 和 JavaScript 示例语法准确，能够在现代浏览器中直接运行。