课程表打印版 · 交付说明

交付物：syllabus-print.html — 单文件、零依赖，双击即可打开。

浏览器打开后可直接使用；打印时自动切换为 A4 横向，仅输出当前所选版本。

一、这是什么

按参考截图还原的小学课程表成品，同一份数据、两种呈现：

版本	用途	呈现方式
电子版	线上发布 / 邮件 / PDF 存档	纯净 A4 纸张，深红双线外框，白底
照片版	实物拍照存档 / 宣传图	同一张课表压在背景照片上，带白边、投影与压膜光泽

顶部页签切换，右侧「班级」下拉可切换班级，再右侧「打印 / 导出 PDF」。

二、版式结构

┌─ A4 横向 297 × 210mm ────────────────────────────────────┐
│ ┌─ 深红双线外框 ───────────────────────────────────────┐ │
│ │  [校徽] 学校名（中/英）        ●●● 课程表   四(1)班  │ │  题头
│ ├──────────────────────────────────────────────────────┤ │
│ │ ┌─ 左侧栏 ─┐ ┌─ 课程表 ─────────────────────────┐    │ │
│ │ │ 班主任照片│ │ 时间 │ 周一…周五 五个日列         │    │ │
│ │ │          │ │ 上午 │                            │    │ │
│ │ │ 班主任    │ │ 中午 │   学科格（按学科着色）      │    │ │
│ │ │ 班级      │ │ 下午 │                            │    │ │
│ │ │ 英文短句  │ └────────────────────────────────┘    │ │
│ │ └──────────┘                                        │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘

左侧栏：班主任照片位（可空置）+ 班主任 / 班级信息 + 一句英文短句（Where there is a will, there is a way.）。

课程表：左侧竖排「上午 / 中午 / 下午」时段标签，每个课次独占一行「开始–结束」时间，五个工作日横向排布；课间、大课间、午餐午休等以通栏浅色横条穿插；午餐与课后服务为跨行合并格。

三、设计令牌

全部以 CSS 自定义属性集中在 :root，改一处即全局生效。

框线与表头

令牌	值	用途
`--frame`	`#8f2f28`	外框、表头分隔线（深红）
`--frame-soft`	浅红	内层细线
`--head-bg`	`#9d332b`	表头底色（白字）
`--paper`	`#ffffff`	纸张底色

学科色板

每个学科一个底色 + 文字色组合，保证 WCAG AA 对比度：

类别	底色	文字色	代表学科
主科	`#dff0d8`	`#2f5e23`	语文、数学、英语
道法	`#f0e5ef`	`#66305f`	道德与法治
艺体	`#f8e6e9`	`#7d2c39`	体育与健康、美术、音乐
校本	`#f7f3e2`	`#6b5c26`	校本课程
课后服务	`#eceee0`	`#4e5334`	课后服务、劳动
课间/午休	`#f5f2ea` / `#fdf4e6`	灰/棕	通栏横条

四、打印

@page { size: A4 landscape; margin: 0 } — A4 横向、零页边距
print-color-adjust: exact — 强制保留背景色与学科色，不被浏览器「省墨」抹掉
打印时自动隐藏页签、工具栏、图例、照片版的光泽层与上传控件
只输出当前所选版本，另一版在打印流中不占页

五、无障碍

页签使用 role="tablist" / role="tab" / aria-selected / aria-controls，面板用 hidden 同步
全部交互元素带 :focus-visible 焦点环，键盘可完整操作
学科底色与文字色对比度 ≥ 4.5:1（AA）
尊重 prefers-reduced-motion，关闭切换动画

六、如何接入真实数据

页面数据集中在脚本顶部的两个常量，替换即可，无需改渲染逻辑：

var CLASSES = { "一（1）班": { ... }, ... };   // 班级 -> 课程表数据
var ACTIVE_CLASS = "一（1）班";                // 默认班级

单行数据结构：

{
  k: "lesson",                        // 行类型：lesson / break / segmark
  no: 6,                              // 第几节课
  t: ["13:00", "13:35"],              // 起止时间（直接挂在行上，不按索引取）
  seg: "中午",                        // 该行所属时段（用于生成竖排标签）
  cells: ["语文", "科学", "道德与法治", "语文", ""],  // 五个工作日
  colspan: [false,false,false,false,true],           // 该列是否跨到行尾
  rowspan: [1,1,1,1,4]                               // 该列是否向下跨行
}

渲染要点：内部维护一张 occupy["行-列"] 占位图，逐行从左到右扫描五列，每写一个格就 markUsed 登记其 colspan/rowspan 覆盖范围——这是保证合并单元格不重叠、不错位的关键。通栏横条的 colspan 由占位图反算「本行仍空闲的列数」得出，因此不会与行尾的跨行空格冲突。

七、真实浏览器验证结果

用 Chromium 实测（非静态检查）：

检查项	结果
A4 纸张尺寸	1123 × 794 px（精确等于 297 × 210mm）
电子版纵向溢出	`0`（内容完全装下，无裁切）
时段标签	上午 ×8 / 中午 ×4 / 下午 ×3，三段齐全
表格行数	18 行，逐行均为矩形，无缺口/错位
两版结构一致性	电子版与照片版逐格比对 `identical: true`
照片版子层	951 × 662 px，完整落在纸张留白内，无裁切
背景图 / 光泽层	均正常渲染
打印样式表	已生效
控制台报错	无

八、已知取舍

数据为演示用样例，需替换为真实排课数据（见第六节）
照片版背景为内置生成的默认底色图，可通过「照片版」面板的按钮上传本地照片替换
字体使用系统无衬线族（system-ui 优先），未内嵌字体文件，离线可用

6.5 KiB Raw Permalink Blame History Unescape Escape