← 返回列表

01-课件项目结构模板.md

模板 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

二、命名与编号约定

三、每页（幻灯片）结构模板（由生成器产出，勿手写重复劳动）

<body class="slide-page">
  <div class="logo-bar"><img src="../logo.png"><span>课程 · 第 N 次课</span></div>
  <div class="slide-breadcrumb">主页 / 第N次课 / 页号</div>
  <div class="single-slide-page">
    <div class="single-slide-wrapper">
      <div class="slide-card">
        <div class="slide-number">Slide N.M</div>
        <div class="slide-title">页标题</div>
        <div class="slide-content">…页面正文…</div>
      </div>
    </div>
    <div class="single-nav-bar">上一页 / N.M / 总页数 / 下一页</div>
    <div class="kbd-hint">键盘 ← → 或滚轮翻页</div>
  </div>
  <script>…键盘/滚轮翻页；含交互的页自动再引 ../quiz.js…</script>
</body>

四、占位页规范（未制作的大课）

五、首页卡片规范

六、服用步骤（新课程）

  1. 复制 引用文件/ 到新项目根；
  2. 编辑 _build.py 的 LECTURES 元数据（每课标题/周次/简介/状态）与 GROUPS；
  3. 写内容模块 _contentN.py（模板 02）；第 1 课先做，占位其余；
  4. 跑 python3 _build.py → 双击 index.html 放映；
  5. 按模板 05 做发布前质检；按模板 06 云发布。
下载此文件