# 模板 01：HTML 课件项目结构模板（仿 PPT 课件）
> 目标：一套"课程主页＋分次大课＋单页全屏"的 HTML 课件工程，打开即放映、可交互、可一键重建、可云发布。
> 参考实现（可直接抄改）：`dl-hub/22-软件项目管理教学包/课件成品-HTML/软件项目管理-16周课件/`
> 引用文件：本目录 `引用文件/`（styles.css、quiz.js、_build.py、logo.png）
## 一、目录结构（约定）
```
课程名-课件/
├── index.html # 课程主页：横幅 + 本次课卡片（由 _build.py 生成）
├── styles.css # 全部样式（含 quiz 交互、SVG 放大、打印等）——可整文件复用
├── quiz.js # 交互题脚本（点击判分/揭晓/重置）——可整文件复用
├── logo.png # 顶部 logo（建议白底透明 PNG，深蓝条上要看清）
├── assets/
│ └── chN/ # 第 N 章素材图片（从学校 PPT 拆出的 png/jpeg/svg 等，emf 不可用）
├── _素材/ # （不随网页发布）学校 PPT 文本抽取、制作参考
├── lecture1/ … lecture16/ # 每次大课一个目录
│ ├── index.html # 本课目录/TOC（或"未开放观看"占位页）
│ └── 1.1.html … 1.NN.html # 单页幻灯片（页号 1.NN 连续无前导零）
├── _content1.py … # 内容模块：SLIDES 列表（一页一项），见模板 02
├── _build.py # 生成器：产首页/目录/所有页面，见模板 03
```
## 二、命名与编号约定
- 大课编号＝教学周编号；页号 `第N课.页序`（如 `2.5.html`），页序从 1 连续。
- 内容模块文件 `_contentN.py` 与 `lectureN/` 一一对应（第 1 课内容多可拆 `_content1a/1b`）。
- 图片进 `assets/chN/` 后按语义改名（如 `pmp-cert.png`），html 内始终用相对路径 `../assets/chN/xx`。
## 三、每页（幻灯片）结构模板（由生成器产出，勿手写重复劳动）
```
课程 · 第 N 次课主页 / 第N次课 / 页号
上一页 / N.M / 总页数 / 下一页
键盘 ← → 或滚轮翻页
```
## 四、占位页规范（未制作的大课）
- 只显示：**"未开放观看"** ＋ 本课标题（周次/章节）＋ **一个"← 返回主页"按钮**；
- **禁止**出现"制作中/占位/备课参考/内部编号"等字眼；首页对应卡片标"🔒 未开放观看 →"。
## 五、首页卡片规范
- 标题＝课程名；副标题＝院系/学期；胶囊条＝学时/学分/考核口径（如"32 学时/2 学分 · 平时30＋期末70"）；
- 卡片字段：序号（Ⅰ Ⅱ Ⅲ…）、大课标题、周次·时长、一句话简介、状态（📋 查看全部 N 页 → / 🔒 未开放观看 →）。
## 六、服用步骤（新课程）
1. 复制 `引用文件/` 到新项目根；
2. 编辑 `_build.py` 的 `LECTURES` 元数据（每课标题/周次/简介/状态）与 `GROUPS`；
3. 写内容模块 `_contentN.py`（模板 02）；第 1 课先做，占位其余；
4. 跑 `python3 _build.py` → 双击 index.html 放映；
5. 按模板 05 做发布前质检；按模板 06 云发布。