# PPT 设计规范

> 基于 L2-21《过马路》HTML→PPTX 转换经验 · 华平小超人 Scratch 课件

---

## 一、技术路线

**唯一方案：HTML 设计 → dom-to-pptx 转换 → PPTX 导出**

不使用 python-pptx 直接生成（会丢失渐变/阴影/圆角/字体）。

### 工具链
- **设计**：HTML + CSS（1920×1080px 内联样式）
- **转换**：[dom-to-pptx](https://github.com/atharva9167j/dom-to-pptx)（GitHub 182⭐）
- **渲染**：Playwright + Chromium
- **预览**：[PPTXjs](https://github.com/meshesha/PPTXjs)（文件站在线预览用）

---

## 二、视觉系统

### 色彩规范

| 用途 | 色值 | 说明 |
|------|------|------|
| 主蓝 | `#1E88FF` | 品牌主色、链接、强调 |
| 深蓝 | `#1A2B4B` | 文字色、边框色 |
| 亮黄 | `#FFD23F` | 高亮标签、步骤条 |
| 珊瑚 | `#FF6B9D` | 活泼点缀、次要标签 |
| 青绿 | `#4ECDC4` | 辅助色、卡片边框 |
| 橙 | `#FF8C42` | 警告/扩展 |
| 红 | `#FF4757` | bug/严重标签 |
| 浅蓝底 | `#E8F4FF` | 认识关页面背景 |
| 暖白底 | `#FFFBF2` / `#FFF5DC` | 常规页面背景 |

### 字体
- 标题：`ZCOOL KuaiLe`（快乐字体，儿童友好）
- 英文标注：`Baloo 2`
- 正文：`Noto Sans SC`

### 页面尺寸
- 设计稿：1920 × 1080px
- dom-to-pptx 自动缩放到 16:9 PPTX 标准尺寸

---

## 三、页面元素规范

### 章节标签
- 圆角胶囊形（32px 圆角）
- 彩色底 + 深蓝边框（3px solid #1A2B4B）
- 右下偏移阴影（5px 5px 0 #1A2B4B）
- 格式：`emoji 标签名`

### 卡片
- 白色底 + 深蓝边框（4px）
- 大圆角（28-32px）
- 偏移阴影（8px 8px 0 #1A2B4B 或彩色）

### 步骤胶囊
- `STEP 01` 格式，黄色底（#FFD23F）
- 圆角 32px + 相同边框/阴影

### 进度条
- 关卡标题页顶部细条
- 底色 #E8F4FF，已完成部分用黄色

### 页脚
- 左侧：华平小超人 · Lx-xx 课程名
- 右侧：页码 / 总页数
- 字号 18px，颜色 #8392AE

### 品牌条（封面/结尾页底部）
- 深蓝底 `#1A2B4B`
- 文字白色 / 黄色
- 置于页面底部 1080px 处

### 讲稿提示区（教师版 PPT 专用，学生版去掉）
- 浅黄底 `#FFF5DC`
- 虚线边框 `dashed #F5A623`
- 标注 "📝 讲稿提示"

---

## 四、关卡页面风格

| 关卡 | 主色调 | 页面底色 | 氛围 |
|------|--------|---------|------|
| 课前导入 | 海洋蓝渐变 | 蓝→暖白 | 故事感 |
| 认识关 | 浅蓝 `#E8F4FF` | 浅蓝系 | 学习感 |
| 编程关 | 暖白 `#FFFBF2` | 暖白/白 | 操作感 |
| 扩展关 | 创意彩色 | 渐变 | 自由感 |
| 课堂总结 | 暖白 + 黄色点缀 | `#FFFBF2` | 整理感 |
| 展示关 | 活泼彩色 | 渐变 | 庆祝感 |

---

## 五、图片/素材

### 小超人表情映射

| HTML 引用 | 中文素材 | 使用场景 |
|-----------|---------|---------|
| `hero-happy.png` | 开心.png | 封面、成功 |
| `hero-teacher.png` | 敲黑板.png | 讲解/教学 |
| `hero-thinking.png` | 思考.png | 提问/互动 |
| `hero-handsup.png` | 加油.png | 鼓励 |
| `hero-cheer.png` | 加油 (2).png | 庆祝 |
| `hero-surprised.png` | 惊讶.png | 发现问题 |
| `hero-thumbsup.png` | 点赞.png | 展示/评价 |
| `hero-salute.png` | 招手.png | 下课/告别 |

### 图片引用路径
- HTML 中：`./assets/文件名.png`
- 素材源：小超人素材.zip → 中文名 → 映射为英文引用

---

## 六、HTML 编写规范

1. **所有样式内联**：写在 `style="..."` 属性中，不依赖外部 CSS
2. **绝对定位**：`position:absolute; left:XXpx; top:XXpx;`
3. **尺寸固定**：1920×1080 容器，所有元素 px 定位
4. **字体内联**：`font-family:'ZCOOL KuaiLe',sans-serif`
5. **无 JavaScript**：纯静态 HTML，转换由 dom-to-pptx 处理
6. **引用 `../assets/`** 在合并时替换为 `./assets/`

---

## 七、交付规范

- PPTX 通过 Cloudflare Pages 文件站交付
- 地址：`https://files-f0v.pages.dev/文件名.pptx`
- 同时支持在线预览（PPTXjs）
- 文件站按 `教研/` 目录结构分层展示