简介面向平面设计、摄影后期、视觉艺术等方向的零基础用户这份中文版Photoshop CC基础培训教程移动学习版覆盖软件入门的完整知识链从工作界面与文件操作讲起逐步延伸到选区工具、绘图与修饰工具、图层管理与蒙版、曲线色阶等调整命令、滤镜特效、文字排版、矢量绘制以及导出打印并配套一套模拟题库系统以选择题、填空题、操作实践题和案例复盘的形式检验巩固学习效果。压缩包共包含216个文件约191.62MB其中83幅png、44张jpg、33个psd源文件提供大量可供临摹的视觉素材与分层工程gif动图展示操作过程exe、dll组件用于启动题库答题环境html、js、css、json构成前端交互界面db、pak保存题目数据与成绩记录整体目录结构清晰便于按章节检索。目前已有104人学习下载借助评分反馈可自动标记易错点用户可按自身节奏反复练习案例复盘有助于将软件操作落到广告排版、人像精修等真实场景适合入门自学、课堂培训及碎片化巩固。1. 这个 zip 包能让 PS 培训从「讲课件」升级成「边学边考」打开「中文版 PhotoshopCC 基础培训教程移动学习版_模拟题库系统.zip」这个压缩包你会同时拿到两样东西一套能在手机和平板上自学的 PhotoshopCC 基础课件以及一套用来检验学习效果的模拟题库系统。很多培训机构把这两件套打包交付本质上是想解决一个痛点——学员课上听得懂、课后不练手等到考证或结业考试时大面积翻车。我在给几家设计类培训机构搭过类似的培训环境后最直接的感受是这个包里最值钱的不是教程正文而是那套题库系统的数据结构。你能把它拆开、读懂、改写成自己的题整个培训才真正闭环。这篇文章要聊的就是解压后先看什么、课件怎么在本地跑起来、题库怎么改怎么抽题、以及我踩过的几个坑。2. 先认清「移动学习版」的真实形态它不是 App而是一包离线 HTML 课件拿到压缩包后很多人第一反应是找.exe安装程序或.apk安装包结果翻遍目录只看到一堆文件夹于是怀疑交付不完整。这里要先建立一个认知所谓「移动学习版」在培训交付里通常指的不是原生 App而是一套为移动端做了自适应排版的离线 HTML 课件包。2.1 为什么培训交付爱用「离线 HTML 课件」而不是 PDF 或视频常见做法是课程方把每一章的图文讲解、操作步骤、案例素材按章节组织成 HTML 页面再配上一套 CSS 控制手机屏幕上的字号和按钮大小。相比 PDF它的交互更丰富——可以内嵌步骤演示的轮播图、按章节折叠的目录、甚至直接嵌入 mp4 演示视频且不用跳转外部播放器相比纯视频它又更好做检索和更新。对培训讲师来说这种课件包最大的好处是复制到任何一台电脑上不需要装额外软件双击索引页就能看放到局域网服务器上学员就能用手机扫码打开课程方不用给每个学员单独发账号。判断一个「移动学习版」是否合格的简单办法是看它是否依赖外网。真正的离线课件所有 CSS、JavaScript、图片、视频都放在本地目录里断网也能打开如果页面里引用了 CDN 上的 Vue、jQuery 或字体库那只能算「半离线」。我在实际交付中会要求课程方把所有静态资源打进去否则学员在高铁、工地这类没网的场景里打开就是白屏。2.2 从目录结构反推课件组织方式一份值得抄的目录树拿到压缩包后第一步不是急着双击某个文件而是先把目录结构整体看一遍。一个规范的移动学习版课件包目录通常是这样的PhotoshopCC移动学习版/ ├── index.html # 入口页课程目录/首页 ├── chapter01/ │ ├── index.html # 章节页第1章 认识PhotoshopCC界面 │ ├── img/ │ │ ├── 01-01.png # 界面截图 │ │ └── 01-02.jpg │ └── video/ │ └── 01-操作演示.mp4 # 本地方案视频素材同目录 ├── chapter02/ │ ├── index.html │ └── img/ ├── assets/ │ ├── css/ │ │ └── mobile.css # 移动端自适应样式 │ ├── js/ │ │ ├── menu.js # 目录折叠 │ │ └── player.js # 视频播放控制 │ └── libs/ │ └── jquery.min.js # 本地引用的库 └── exam/ # 模拟题库系统的前端页面 ├── index.html # 刷题/考试入口 ├── js/ └── data/ └── question_bank.json # 题库数据后面细讲看目录顺序有一个经验先找入口文件再找数据文件。入口文件通常是index.html数据文件通常放在data/或json/下。如果压缩包里没有明显的exam/或题库/目录那题库系统可能以另外的压缩包形式嵌套在里边注意看文件名里有没有模拟题、题库、exam字样。2.3 在本地跑通课件为什么不能直接双击index.html新手最常见的操作是双击index.html页面开头能显示但往后点两下就出问题——图片加载不出来、章节跳转失效、刷题页面直接空白。这不是文件坏了而是浏览器安全策略不允许本地页面通过file://协议自由读取相邻目录的 JSON 和脚本资源。解决方法是起一个本地静态服务我一般这样操作# 在课件包的根目录打开终端执行 cd /path/to/PhotoshopCC移动学习版 # 如果本机装了 Python 3 python -m http.server 8080 # 或者用 Node 的 npx 也行 npx serve -l 8080执行完终端会显示Serving HTTP on 0.0.0.0:8080然后在浏览器地址栏输入http://localhost:8080/课件和题库系统都能正常访问了。这里有个参数要点端口号8080可以任意换但换完后浏览器地址要保持一致。用python -m http.server 8080时它默认把当前目录当站点根目录所以一定要在index.html所在的那一层执行而不是在chapter01里执行。用npx serve -l 8080的好处是会自动帮你选一个可用端口坏处是首次运行要下载依赖在没外网的机器上会失败。所以我的原则是能装 Python 用 Python不折腾 Node。3. 模拟题库系统的数据层先把题库文件挖出来再谈怎么刷题很多人打开题库系统后注意力全在界面上——按钮好不好看、倒计时有没有——但这些都不重要。对培训讲师和二次开发者来说题库系统的灵魂在数据文件里它决定了你能不能批量改题、能不能按章节抽题、能不能从题库里导出错题记录。我经手过的模拟题库系统数据层无外乎三种形态Excel 表格、JSON 文件、Access 数据库。其中 JSON 最常见Excel 最好改Access 最麻烦。3.1 三种题库载体的选型判断先看文件后缀再定改造方案载体识别特征改造难度适用场景Excel (.xlsx/.xls)目录里有题库.xlsx或题目表.xlsx低直接用 Excel 打开改或转成 JSON培训机构老师自己维护题库JSON (.json)data/下有question_bank.json中需要文本编辑器注意语法交付给开发者的标准形态Access (.mdb/.accdb)存在exam.mdb等文件高需要额外装驱动和工具读取老系统遗留不建议自己改判断用哪种方案不需要打开文件看后缀就行。但这里有一个多数人不知道的细节JSON 文件虽然有一个.json后缀但直接双击它浏览器通常会把它当作纯文本下载下来而不是展示成结构化内容。你需要用 VS Code 或 Notepad 打开它才能看到缩进格式。如果是大文件超过 5MB建议先别直接打开用脚本读取更稳。3.2 用 Python 把 Excel 题库转成标准 JSON一套可抄的转换脚本Excel 是讲师维护题库最顺手的工具但题库系统运行时通常只认 JSON。因此我需要一个可靠的转换脚本。下面这套脚本我在多个培训项目里复用字段做了标准化处理import pandas as pd import json # 题库 Excel 的标准列章考试章节、题型单选/多选/判断、题干、A~D选项、答案、解析 df pd.read_excel(题库.xlsx, sheet_name题目表, dtypestr) bq [] for idx, row in df.iterrows(): # 过滤全空行避免 Excel 里多出来的空行污染题库 if pd.isna(row[题干]) or str(row[题干]).strip() : continue # options 字典只保留非空选项空选项会影响前端渲染 options {} for opt in [A, B, C, D]: val row.get(opt) if pd.notna(val) and str(val).strip() ! : options[opt] str(val).strip() # 答案统一转大写兼容 a 和 A 混用 answer str(row[答案]).strip().upper() item { id: idx, # 用行索引做 id避免手工编号出错 chapter: str(row[章]).strip(), type: str(row[题型]).strip(), # 单选/多选/判断 question: str(row[题干]).strip(), options: options, answer: answer, analysis: str(row[解析]).strip() } bq.append(item) # utf-8 编码保证题库文件在浏览器里不乱码 with open(question_bank.json, w, encodingutf-8) as f: json.dump(bq, f, ensure_asciiFalse, indent2)逻辑说明脚本核心是重排字段——原始 Excel 里的「某某题」列名五花八门统一成question、options、answer三个键前端刷题页面只认这几个键就不用再改前端代码。id直接用行索引删掉 Excel 中间某行后 id 不会完全乱掉。chapter字段保留章节信息这样系统才能支持「按章节抽题」。参数说明里有三个坑值得专门讲一是dtypestr如果不加这一项题干里的数字型内容比如「PS 2020 中 3 个新增功能」的「3」会被 pandas 读成数值转成字符串后内容没有变化但「题号 001」这种会丢掉前导零。二是ensure_asciiFalse必须写否则中文会变成\uXXXX转义序列虽然浏览器能解析但用文本编辑器打开完全没法人读。三是indent2只是为了调试时好看交付给系统运行可以去掉文件能小三分之一。3.3 抽题与判分随机不重复、答案比对那点事题库文件准备好之后抽题逻辑就是另一个容易翻车的地方。大多数题库系统把抽题算法写在前端 JavaScript 里实现思路通常是「从题库里随机选 N 道同一套题不重复」。我的建议是抽题算法一定要做到三件事随机性、不重复、按章节配额。// 按章节配额抽题从原始题库中取指定数量的题 function pickQuestions(pool, chapterCounts) { // pool: 完整题库数组chapterCounts: {第1章: 5, 第2章: 5} const result []; const byChapter {}; for (const q of pool) { if (!byChapter[q.chapter]) byChapter[q.chapter] []; byChapter[q.chapter].push(q); } for (const chapter in chapterCounts) { const list byChapter[chapter] || []; const count Math.min(chapterCounts[chapter], list.length); // Fisher-Yates 洗牌取前 count 个保证每套题不重复 const shuffled list.slice(); for (let i shuffled.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [shuffled[i], shuffled[j]] [shuffled[j], shuffled[i]]; } result.push(...shuffled.slice(0, count)); } return result; }这段代码里最值得抄的是Math.floor(Math.random() * (i 1))和倒序交换。如果直接用Math.random()加sort做伪随机抽题结果会有概率偏好同一章里靠前的题目总是被抽到。Fisher-Yates 洗牌能保证每个位置概率完全均匀。参数chapterCounts是把「各章出几道题」的配置从考试页面里抽出来的我一般会把这份配置单独存成一个exam_config.json讲师要调整分值权重不用碰代码。判分逻辑相对简单但有一个细节必须说多选题的答案比对不能直接用answer ABC因为学员选的顺序可能是「ACB」这时候要用字符串排序后再比对。常见做法是把学员答案和标准答案都拆成字符数组排序后用join()比较。4. 把教程和题库串成闭环本机部署与局域网刷题的完整方案课件能打开、题库能解析接下来要做的就是把这两者放进同一个环境里让讲师在教室局域网里分发学员用手机就能学、能考。这一步做得好不好直接影响培训当天的运行表现。4.1 部署形态一个目录装下所有东西端口和路径要统一我总结的可靠部署结构是把课件、题库前端页面、题库 JSON 文件全部放在同一个根目录下用同一个静态服务器托管。目录结构如下PS培训包/ ├── index.html # 课件首页 ├── exam/ │ ├── index.html # 刷题页面 │ ├── js/exam.js # 抽题与判分逻辑 │ └── data/question_bank.json # 题库数据 └── assets/ # 课件公共资源这样做的好处是浏览器跨域问题彻底消失——因为所有资源都来自同一个端口不存在「页面在 8080、JSON 在 8081 被浏览器拦截」的尴尬。有些交付包把课件和题库分在两个目录里我会在部署时把它们合并路径用exam/前缀区分即可。4.2 一键启动脚本给不懂命令行的老师用的双版本启动如果你服务的对象是培训讲师他们大概率不会打开终端敲命令。这时候写一个启动脚本很实用。在 Windows 上我用.bat在 macOS/Linux 上用.sh两个脚本都遵循同一套逻辑查端口、起服务、自动打开浏览器。#!/bin/bash # 启动 PS 培训本地服务默认 8080被占用则自动换 8081 PORT8080 if lsof -i :$PORT -sTCP:LISTEN /dev/null 21; then echo 端口 $PORT 被占用尝试 8081... PORT8081 fi echo 服务已启动: http://localhost:$PORT # 自动打开默认浏览器 open http://localhost:$PORT 2/dev/null || start http://localhost:$PORT # 前台运行CtrlC 停止 python -m http.server $PORT参数说明lsof -i :$PORT -sTCP:LISTEN是端口占用检测的核心如果返回有监听进程就说明端口被占用自动换到 8081。open命令在 macOS 上可用Windows 上会用start兜底。这个脚本看起来简单但它解决了培训现场最大的尴尬——老师忘记怎么操作学员干等。4.3 局域网内手机访问IP 地址和防火墙那点事学员用手机刷题和电脑上访问localhost不同手机必须访问电脑在局域网里的 IP。查看 IP 的命令是ipconfigWindows或ifconfigmacOS/Linux。假设电脑 IP 是192.168.1.10那么手机浏览器输入http://192.168.1.10:8080/就能打开课件首页。这里要特别注意 Windows 防火墙。即使服务正常启动手机访问也可能超时原因通常是防火墙拦截了 Python 进程的入站连接。解决办法是在防火墙弹窗里勾选「专用网络」允许访问如果之前已经点了取消就要去「Windows Defender 防火墙」里手动添加 Python 的入站规则。我在搭建本地培训环境时都会提前做这一步测试否则到开课当天手忙脚乱。5. 必踩的五个坑解压、编码、端口和题库漏题排查这块内容是整个交付里最血泪的部分。我从实际项目里整理出五个高频问题每条都按「现象 → 原因 → 解决」写清楚供你直接对照排查。5.1 坑一zip 解压后文件缺失或提示压缩包损坏现象用 WinRAR 或 7-Zip 解压时弹窗「不可预料的压缩文件末端」强行解压后打开课件缺图片、少章节。 原因这个 zip 文件在传输过程中损坏或者压缩包本身做了分卷但交付方只发了最后一个分卷。 解决先别急着解压用 7-Zip 的「测试压缩包」功能完整跑一遍校验。如果文件确实坏了而且手上没有原始压缩包还有一个办法用zip -F damaged.zip --out repaired.zip尝试修复。但我的建议是直接找交付方重新要文件因为修复出来的压缩包可能丢尾部数据。此坑强调一遍收到任何交付 zip第一件事是校验文件哈希用sha256sum或 Windows 自带的certutil -hashfile再解压不要跳过这一步。5.2 坑二解压后文件名乱码页面路径全部对不上现象解压后看到的文件夹名是「第1章 熟悉界面」没毛病但里面图片是乱码名浏览器里图片加载不出来。 原因zip 压缩包在 Windows 上用 GBK 编码压缩而在 macOS/Linux/部分新版 Windows 上用 UTF-8 解压文件名编码不一致导致乱码。 解决Windows 上尽量用 7-Zip 解压它默认做了编码识别macOS 上可以用ditto -x -k 源.zip 目标目录命令解压它能按 Mac 的编码规则自动处理一部分问题。更稳妥的办法是解压后打开入口index.html按 F12 看控制台里有没有 404 报错把提示的路径和目录里真实文件名对比找出哪个文件乱码了手动改回来。5.3 坑三题库系统打开直接白屏服务却没报错现象本地服务正常启动访问课件首页正常点进题库页面的链接后页面空白F12 控制台显示SyntaxError: Unexpected token或JSON.parse报错。 原因题库 JSON 文件存在格式错误——最常见的是 Excel 转 JSON 时某一行没转义引号或者 JSON 文件开头多了一个BOM字节导致解析失败。 解决用文本编辑器打开question_bank.json肉眼检查开头是不是{而不是\ufeff。如果是 BOM 问题用 VS Code 右下方「选择编码 → 重新保存为 UTF-8 without BOM」。如果是JSON.parse报错用在线 JSON 校验工具把文件内容贴进去它会精确提示第几行第几个字符出错。我在脚本里加ensure_asciiFalse并设置utf-8编码目的就是避免 BOM 问题。5.4 坑四抽题总是重复或某些题永远抽不到现象同一套模拟卷刷完再刷总是抽到前几章的题最后一章从来没出过。 原因抽题算法没有做真正随机化或者按章节抽题时题库里chapter字段为空字符串导致这些题被归到「未分类」组里章节抽题时永远不会被选中。 解决先检查题库 JSON 文件的chapter字段是否为空。如果为空批量补全在 Excel 里按行筛选「章」列为空的手动补齐。抽题算法方面换成 3.3 节的 Fisher-Yates 洗牌方案并且抽题前先按chapter分组每组内洗牌后再拼接。5.5 坑五手机上打开的课件排版错乱字号大得离谱现象手机浏览器打开课件目录字体撑满整个屏幕点击章节后页面内容没有缩进按钮叠在一起。 原因课件页面的head里缺少meta nameviewport contentwidthdevice-width, initial-scale1移动端浏览器按桌面宽度渲染后等比缩放就会出现这种「排版稀疏」的怪象。 解决需要给所有课件页面的head里加 viewport 标签。如果页面数量多用脚本批量替换# 用 sed 批量增加 viewport 标签macOS/Linux 适用 find . -name *.html -exec sed -i \ s#head#head\n meta nameviewport contentwidthdevice-width, initial-scale1# {} \;这是典型的「问题在环境、不在内容」的坑。移动学习版课件自带mobile.css但如果页面没有 viewport 声明再好的 CSS 也无济于事。批量替换完成后用手机重新刷新确认效果。6. 把模拟题库改造成自己的考证题库字段规范与效果验证技巧如果你已经能把这套系统跑起来下一步通常是改题库——把里面的 PS 基础题换成自己机构的教学内容。这里有一套我总结的标准字段规范能让题库同时支持单选、多选、判断题三种题型不然后面验证效果时会被各种格式问题拖住。6.1 用 Excel 维护题库这套字段结构最省事字段名必填规则与示例章是格式统一「第1章」「第2章」不要写「一、基础」题型是单选 / 多选 / 判断三个值保持一致题干是不要包含选项内容题干里不要换行A / B / C / D单选多选填 4 个判断只填 A对和 B错答案是单选「A」多选「ABC」判断「A」或「B」解析否为空时系统不展示解析不影响判分判断题用 A/B 表示「对/错」而不是直接写「正确」两个字是为了解析环节的统一——前端判分时只比对字母不比对中文。我见过很多老师直接写「答案正确」导致系统永远判错。6.2 随机组卷参数难度、章节、分值权重怎么配在exam_config.json里配置抽题参数时我会按这样组织{ total: 30, chapterCounts: {第1章: 5, 第2章: 6, 第3章: 6, 第4章: 5, 第5章: 4, 第6章: 4}, scoreMap: {单选: 3, 多选: 5, 判断: 2}, timeLimit: 45 }配置里最值得关注的是scoreMap和chapterCounts的搭配。多选 5 分、单选 3 分、判断 2 分这种权重设置能让总分为 100 时刚好除尽章节题数按实际教学课时比例调配而不是平均分配——课时多、知识点多的章节多出题。6.3 学习效果验证模拟考试模式与错题回看整套系统部署完成后验证方式不是「打开页面看一眼」而是走一遍完整模拟考试流程用学员身份做一次 30 题试卷提交后检查总分计算结果、错题是否进入错题集、解析是否展示、再刷一套题确认抽题不重复。我习惯在每次交付前做一个 20 分钟的全流程自测把「考试 → 提交 → 查看错题 → 二次练习」四步全走通。这里有一个我吃过亏的教训以前我总以为题库系统只要能抽题就能交付结果有次学员反映「练习模式下永远只出这 10 道题」排查发现是练习模式没有走洗牌算法直接按题库顺序输出。后来我在每次交付时多问一句练习模式和模拟考试模式是不是共用抽题逻辑如果不是两套逻辑都要测。这个习惯帮我避开了很多隐性返工也希望能帮到你。本文还有配套的精品资源点击获取 PS培训课件+模拟题库系统：从解压部署到改造题库的完整指南
简介面向平面设计、摄影后期、视觉艺术等方向的零基础用户这份中文版Photoshop CC基础培训教程移动学习版覆盖软件入门的完整知识链从工作界面与文件操作讲起逐步延伸到选区工具、绘图与修饰工具、图层管理与蒙版、曲线色阶等调整命令、滤镜特效、文字排版、矢量绘制以及导出打印并配套一套模拟题库系统以选择题、填空题、操作实践题和案例复盘的形式检验巩固学习效果。压缩包共包含216个文件约191.62MB其中83幅png、44张jpg、33个psd源文件提供大量可供临摹的视觉素材与分层工程gif动图展示操作过程exe、dll组件用于启动题库答题环境html、js、css、json构成前端交互界面db、pak保存题目数据与成绩记录整体目录结构清晰便于按章节检索。目前已有104人学习下载借助评分反馈可自动标记易错点用户可按自身节奏反复练习案例复盘有助于将软件操作落到广告排版、人像精修等真实场景适合入门自学、课堂培训及碎片化巩固。1. 这个 zip 包能让 PS 培训从「讲课件」升级成「边学边考」打开「中文版 PhotoshopCC 基础培训教程移动学习版_模拟题库系统.zip」这个压缩包你会同时拿到两样东西一套能在手机和平板上自学的 PhotoshopCC 基础课件以及一套用来检验学习效果的模拟题库系统。很多培训机构把这两件套打包交付本质上是想解决一个痛点——学员课上听得懂、课后不练手等到考证或结业考试时大面积翻车。我在给几家设计类培训机构搭过类似的培训环境后最直接的感受是这个包里最值钱的不是教程正文而是那套题库系统的数据结构。你能把它拆开、读懂、改写成自己的题整个培训才真正闭环。这篇文章要聊的就是解压后先看什么、课件怎么在本地跑起来、题库怎么改怎么抽题、以及我踩过的几个坑。2. 先认清「移动学习版」的真实形态它不是 App而是一包离线 HTML 课件拿到压缩包后很多人第一反应是找.exe安装程序或.apk安装包结果翻遍目录只看到一堆文件夹于是怀疑交付不完整。这里要先建立一个认知所谓「移动学习版」在培训交付里通常指的不是原生 App而是一套为移动端做了自适应排版的离线 HTML 课件包。2.1 为什么培训交付爱用「离线 HTML 课件」而不是 PDF 或视频常见做法是课程方把每一章的图文讲解、操作步骤、案例素材按章节组织成 HTML 页面再配上一套 CSS 控制手机屏幕上的字号和按钮大小。相比 PDF它的交互更丰富——可以内嵌步骤演示的轮播图、按章节折叠的目录、甚至直接嵌入 mp4 演示视频且不用跳转外部播放器相比纯视频它又更好做检索和更新。对培训讲师来说这种课件包最大的好处是复制到任何一台电脑上不需要装额外软件双击索引页就能看放到局域网服务器上学员就能用手机扫码打开课程方不用给每个学员单独发账号。判断一个「移动学习版」是否合格的简单办法是看它是否依赖外网。真正的离线课件所有 CSS、JavaScript、图片、视频都放在本地目录里断网也能打开如果页面里引用了 CDN 上的 Vue、jQuery 或字体库那只能算「半离线」。我在实际交付中会要求课程方把所有静态资源打进去否则学员在高铁、工地这类没网的场景里打开就是白屏。2.2 从目录结构反推课件组织方式一份值得抄的目录树拿到压缩包后第一步不是急着双击某个文件而是先把目录结构整体看一遍。一个规范的移动学习版课件包目录通常是这样的PhotoshopCC移动学习版/ ├── index.html # 入口页课程目录/首页 ├── chapter01/ │ ├── index.html # 章节页第1章 认识PhotoshopCC界面 │ ├── img/ │ │ ├── 01-01.png # 界面截图 │ │ └── 01-02.jpg │ └── video/ │ └── 01-操作演示.mp4 # 本地方案视频素材同目录 ├── chapter02/ │ ├── index.html │ └── img/ ├── assets/ │ ├── css/ │ │ └── mobile.css # 移动端自适应样式 │ ├── js/ │ │ ├── menu.js # 目录折叠 │ │ └── player.js # 视频播放控制 │ └── libs/ │ └── jquery.min.js # 本地引用的库 └── exam/ # 模拟题库系统的前端页面 ├── index.html # 刷题/考试入口 ├── js/ └── data/ └── question_bank.json # 题库数据后面细讲看目录顺序有一个经验先找入口文件再找数据文件。入口文件通常是index.html数据文件通常放在data/或json/下。如果压缩包里没有明显的exam/或题库/目录那题库系统可能以另外的压缩包形式嵌套在里边注意看文件名里有没有模拟题、题库、exam字样。2.3 在本地跑通课件为什么不能直接双击index.html新手最常见的操作是双击index.html页面开头能显示但往后点两下就出问题——图片加载不出来、章节跳转失效、刷题页面直接空白。这不是文件坏了而是浏览器安全策略不允许本地页面通过file://协议自由读取相邻目录的 JSON 和脚本资源。解决方法是起一个本地静态服务我一般这样操作# 在课件包的根目录打开终端执行 cd /path/to/PhotoshopCC移动学习版 # 如果本机装了 Python 3 python -m http.server 8080 # 或者用 Node 的 npx 也行 npx serve -l 8080执行完终端会显示Serving HTTP on 0.0.0.0:8080然后在浏览器地址栏输入http://localhost:8080/课件和题库系统都能正常访问了。这里有个参数要点端口号8080可以任意换但换完后浏览器地址要保持一致。用python -m http.server 8080时它默认把当前目录当站点根目录所以一定要在index.html所在的那一层执行而不是在chapter01里执行。用npx serve -l 8080的好处是会自动帮你选一个可用端口坏处是首次运行要下载依赖在没外网的机器上会失败。所以我的原则是能装 Python 用 Python不折腾 Node。3. 模拟题库系统的数据层先把题库文件挖出来再谈怎么刷题很多人打开题库系统后注意力全在界面上——按钮好不好看、倒计时有没有——但这些都不重要。对培训讲师和二次开发者来说题库系统的灵魂在数据文件里它决定了你能不能批量改题、能不能按章节抽题、能不能从题库里导出错题记录。我经手过的模拟题库系统数据层无外乎三种形态Excel 表格、JSON 文件、Access 数据库。其中 JSON 最常见Excel 最好改Access 最麻烦。3.1 三种题库载体的选型判断先看文件后缀再定改造方案载体识别特征改造难度适用场景Excel (.xlsx/.xls)目录里有题库.xlsx或题目表.xlsx低直接用 Excel 打开改或转成 JSON培训机构老师自己维护题库JSON (.json)data/下有question_bank.json中需要文本编辑器注意语法交付给开发者的标准形态Access (.mdb/.accdb)存在exam.mdb等文件高需要额外装驱动和工具读取老系统遗留不建议自己改判断用哪种方案不需要打开文件看后缀就行。但这里有一个多数人不知道的细节JSON 文件虽然有一个.json后缀但直接双击它浏览器通常会把它当作纯文本下载下来而不是展示成结构化内容。你需要用 VS Code 或 Notepad 打开它才能看到缩进格式。如果是大文件超过 5MB建议先别直接打开用脚本读取更稳。3.2 用 Python 把 Excel 题库转成标准 JSON一套可抄的转换脚本Excel 是讲师维护题库最顺手的工具但题库系统运行时通常只认 JSON。因此我需要一个可靠的转换脚本。下面这套脚本我在多个培训项目里复用字段做了标准化处理import pandas as pd import json # 题库 Excel 的标准列章考试章节、题型单选/多选/判断、题干、A~D选项、答案、解析 df pd.read_excel(题库.xlsx, sheet_name题目表, dtypestr) bq [] for idx, row in df.iterrows(): # 过滤全空行避免 Excel 里多出来的空行污染题库 if pd.isna(row[题干]) or str(row[题干]).strip() : continue # options 字典只保留非空选项空选项会影响前端渲染 options {} for opt in [A, B, C, D]: val row.get(opt) if pd.notna(val) and str(val).strip() ! : options[opt] str(val).strip() # 答案统一转大写兼容 a 和 A 混用 answer str(row[答案]).strip().upper() item { id: idx, # 用行索引做 id避免手工编号出错 chapter: str(row[章]).strip(), type: str(row[题型]).strip(), # 单选/多选/判断 question: str(row[题干]).strip(), options: options, answer: answer, analysis: str(row[解析]).strip() } bq.append(item) # utf-8 编码保证题库文件在浏览器里不乱码 with open(question_bank.json, w, encodingutf-8) as f: json.dump(bq, f, ensure_asciiFalse, indent2)逻辑说明脚本核心是重排字段——原始 Excel 里的「某某题」列名五花八门统一成question、options、answer三个键前端刷题页面只认这几个键就不用再改前端代码。id直接用行索引删掉 Excel 中间某行后 id 不会完全乱掉。chapter字段保留章节信息这样系统才能支持「按章节抽题」。参数说明里有三个坑值得专门讲一是dtypestr如果不加这一项题干里的数字型内容比如「PS 2020 中 3 个新增功能」的「3」会被 pandas 读成数值转成字符串后内容没有变化但「题号 001」这种会丢掉前导零。二是ensure_asciiFalse必须写否则中文会变成\uXXXX转义序列虽然浏览器能解析但用文本编辑器打开完全没法人读。三是indent2只是为了调试时好看交付给系统运行可以去掉文件能小三分之一。3.3 抽题与判分随机不重复、答案比对那点事题库文件准备好之后抽题逻辑就是另一个容易翻车的地方。大多数题库系统把抽题算法写在前端 JavaScript 里实现思路通常是「从题库里随机选 N 道同一套题不重复」。我的建议是抽题算法一定要做到三件事随机性、不重复、按章节配额。// 按章节配额抽题从原始题库中取指定数量的题 function pickQuestions(pool, chapterCounts) { // pool: 完整题库数组chapterCounts: {第1章: 5, 第2章: 5} const result []; const byChapter {}; for (const q of pool) { if (!byChapter[q.chapter]) byChapter[q.chapter] []; byChapter[q.chapter].push(q); } for (const chapter in chapterCounts) { const list byChapter[chapter] || []; const count Math.min(chapterCounts[chapter], list.length); // Fisher-Yates 洗牌取前 count 个保证每套题不重复 const shuffled list.slice(); for (let i shuffled.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [shuffled[i], shuffled[j]] [shuffled[j], shuffled[i]]; } result.push(...shuffled.slice(0, count)); } return result; }这段代码里最值得抄的是Math.floor(Math.random() * (i 1))和倒序交换。如果直接用Math.random()加sort做伪随机抽题结果会有概率偏好同一章里靠前的题目总是被抽到。Fisher-Yates 洗牌能保证每个位置概率完全均匀。参数chapterCounts是把「各章出几道题」的配置从考试页面里抽出来的我一般会把这份配置单独存成一个exam_config.json讲师要调整分值权重不用碰代码。判分逻辑相对简单但有一个细节必须说多选题的答案比对不能直接用answer ABC因为学员选的顺序可能是「ACB」这时候要用字符串排序后再比对。常见做法是把学员答案和标准答案都拆成字符数组排序后用join()比较。4. 把教程和题库串成闭环本机部署与局域网刷题的完整方案课件能打开、题库能解析接下来要做的就是把这两者放进同一个环境里让讲师在教室局域网里分发学员用手机就能学、能考。这一步做得好不好直接影响培训当天的运行表现。4.1 部署形态一个目录装下所有东西端口和路径要统一我总结的可靠部署结构是把课件、题库前端页面、题库 JSON 文件全部放在同一个根目录下用同一个静态服务器托管。目录结构如下PS培训包/ ├── index.html # 课件首页 ├── exam/ │ ├── index.html # 刷题页面 │ ├── js/exam.js # 抽题与判分逻辑 │ └── data/question_bank.json # 题库数据 └── assets/ # 课件公共资源这样做的好处是浏览器跨域问题彻底消失——因为所有资源都来自同一个端口不存在「页面在 8080、JSON 在 8081 被浏览器拦截」的尴尬。有些交付包把课件和题库分在两个目录里我会在部署时把它们合并路径用exam/前缀区分即可。4.2 一键启动脚本给不懂命令行的老师用的双版本启动如果你服务的对象是培训讲师他们大概率不会打开终端敲命令。这时候写一个启动脚本很实用。在 Windows 上我用.bat在 macOS/Linux 上用.sh两个脚本都遵循同一套逻辑查端口、起服务、自动打开浏览器。#!/bin/bash # 启动 PS 培训本地服务默认 8080被占用则自动换 8081 PORT8080 if lsof -i :$PORT -sTCP:LISTEN /dev/null 21; then echo 端口 $PORT 被占用尝试 8081... PORT8081 fi echo 服务已启动: http://localhost:$PORT # 自动打开默认浏览器 open http://localhost:$PORT 2/dev/null || start http://localhost:$PORT # 前台运行CtrlC 停止 python -m http.server $PORT参数说明lsof -i :$PORT -sTCP:LISTEN是端口占用检测的核心如果返回有监听进程就说明端口被占用自动换到 8081。open命令在 macOS 上可用Windows 上会用start兜底。这个脚本看起来简单但它解决了培训现场最大的尴尬——老师忘记怎么操作学员干等。4.3 局域网内手机访问IP 地址和防火墙那点事学员用手机刷题和电脑上访问localhost不同手机必须访问电脑在局域网里的 IP。查看 IP 的命令是ipconfigWindows或ifconfigmacOS/Linux。假设电脑 IP 是192.168.1.10那么手机浏览器输入http://192.168.1.10:8080/就能打开课件首页。这里要特别注意 Windows 防火墙。即使服务正常启动手机访问也可能超时原因通常是防火墙拦截了 Python 进程的入站连接。解决办法是在防火墙弹窗里勾选「专用网络」允许访问如果之前已经点了取消就要去「Windows Defender 防火墙」里手动添加 Python 的入站规则。我在搭建本地培训环境时都会提前做这一步测试否则到开课当天手忙脚乱。5. 必踩的五个坑解压、编码、端口和题库漏题排查这块内容是整个交付里最血泪的部分。我从实际项目里整理出五个高频问题每条都按「现象 → 原因 → 解决」写清楚供你直接对照排查。5.1 坑一zip 解压后文件缺失或提示压缩包损坏现象用 WinRAR 或 7-Zip 解压时弹窗「不可预料的压缩文件末端」强行解压后打开课件缺图片、少章节。 原因这个 zip 文件在传输过程中损坏或者压缩包本身做了分卷但交付方只发了最后一个分卷。 解决先别急着解压用 7-Zip 的「测试压缩包」功能完整跑一遍校验。如果文件确实坏了而且手上没有原始压缩包还有一个办法用zip -F damaged.zip --out repaired.zip尝试修复。但我的建议是直接找交付方重新要文件因为修复出来的压缩包可能丢尾部数据。此坑强调一遍收到任何交付 zip第一件事是校验文件哈希用sha256sum或 Windows 自带的certutil -hashfile再解压不要跳过这一步。5.2 坑二解压后文件名乱码页面路径全部对不上现象解压后看到的文件夹名是「第1章 熟悉界面」没毛病但里面图片是乱码名浏览器里图片加载不出来。 原因zip 压缩包在 Windows 上用 GBK 编码压缩而在 macOS/Linux/部分新版 Windows 上用 UTF-8 解压文件名编码不一致导致乱码。 解决Windows 上尽量用 7-Zip 解压它默认做了编码识别macOS 上可以用ditto -x -k 源.zip 目标目录命令解压它能按 Mac 的编码规则自动处理一部分问题。更稳妥的办法是解压后打开入口index.html按 F12 看控制台里有没有 404 报错把提示的路径和目录里真实文件名对比找出哪个文件乱码了手动改回来。5.3 坑三题库系统打开直接白屏服务却没报错现象本地服务正常启动访问课件首页正常点进题库页面的链接后页面空白F12 控制台显示SyntaxError: Unexpected token或JSON.parse报错。 原因题库 JSON 文件存在格式错误——最常见的是 Excel 转 JSON 时某一行没转义引号或者 JSON 文件开头多了一个BOM字节导致解析失败。 解决用文本编辑器打开question_bank.json肉眼检查开头是不是{而不是\ufeff。如果是 BOM 问题用 VS Code 右下方「选择编码 → 重新保存为 UTF-8 without BOM」。如果是JSON.parse报错用在线 JSON 校验工具把文件内容贴进去它会精确提示第几行第几个字符出错。我在脚本里加ensure_asciiFalse并设置utf-8编码目的就是避免 BOM 问题。5.4 坑四抽题总是重复或某些题永远抽不到现象同一套模拟卷刷完再刷总是抽到前几章的题最后一章从来没出过。 原因抽题算法没有做真正随机化或者按章节抽题时题库里chapter字段为空字符串导致这些题被归到「未分类」组里章节抽题时永远不会被选中。 解决先检查题库 JSON 文件的chapter字段是否为空。如果为空批量补全在 Excel 里按行筛选「章」列为空的手动补齐。抽题算法方面换成 3.3 节的 Fisher-Yates 洗牌方案并且抽题前先按chapter分组每组内洗牌后再拼接。5.5 坑五手机上打开的课件排版错乱字号大得离谱现象手机浏览器打开课件目录字体撑满整个屏幕点击章节后页面内容没有缩进按钮叠在一起。 原因课件页面的head里缺少meta nameviewport contentwidthdevice-width, initial-scale1移动端浏览器按桌面宽度渲染后等比缩放就会出现这种「排版稀疏」的怪象。 解决需要给所有课件页面的head里加 viewport 标签。如果页面数量多用脚本批量替换# 用 sed 批量增加 viewport 标签macOS/Linux 适用 find . -name *.html -exec sed -i \ s#head#head\n meta nameviewport contentwidthdevice-width, initial-scale1# {} \;这是典型的「问题在环境、不在内容」的坑。移动学习版课件自带mobile.css但如果页面没有 viewport 声明再好的 CSS 也无济于事。批量替换完成后用手机重新刷新确认效果。6. 把模拟题库改造成自己的考证题库字段规范与效果验证技巧如果你已经能把这套系统跑起来下一步通常是改题库——把里面的 PS 基础题换成自己机构的教学内容。这里有一套我总结的标准字段规范能让题库同时支持单选、多选、判断题三种题型不然后面验证效果时会被各种格式问题拖住。6.1 用 Excel 维护题库这套字段结构最省事字段名必填规则与示例章是格式统一「第1章」「第2章」不要写「一、基础」题型是单选 / 多选 / 判断三个值保持一致题干是不要包含选项内容题干里不要换行A / B / C / D单选多选填 4 个判断只填 A对和 B错答案是单选「A」多选「ABC」判断「A」或「B」解析否为空时系统不展示解析不影响判分判断题用 A/B 表示「对/错」而不是直接写「正确」两个字是为了解析环节的统一——前端判分时只比对字母不比对中文。我见过很多老师直接写「答案正确」导致系统永远判错。6.2 随机组卷参数难度、章节、分值权重怎么配在exam_config.json里配置抽题参数时我会按这样组织{ total: 30, chapterCounts: {第1章: 5, 第2章: 6, 第3章: 6, 第4章: 5, 第5章: 4, 第6章: 4}, scoreMap: {单选: 3, 多选: 5, 判断: 2}, timeLimit: 45 }配置里最值得关注的是scoreMap和chapterCounts的搭配。多选 5 分、单选 3 分、判断 2 分这种权重设置能让总分为 100 时刚好除尽章节题数按实际教学课时比例调配而不是平均分配——课时多、知识点多的章节多出题。6.3 学习效果验证模拟考试模式与错题回看整套系统部署完成后验证方式不是「打开页面看一眼」而是走一遍完整模拟考试流程用学员身份做一次 30 题试卷提交后检查总分计算结果、错题是否进入错题集、解析是否展示、再刷一套题确认抽题不重复。我习惯在每次交付前做一个 20 分钟的全流程自测把「考试 → 提交 → 查看错题 → 二次练习」四步全走通。这里有一个我吃过亏的教训以前我总以为题库系统只要能抽题就能交付结果有次学员反映「练习模式下永远只出这 10 道题」排查发现是练习模式没有走洗牌算法直接按题库顺序输出。后来我在每次交付时多问一句练习模式和模拟考试模式是不是共用抽题逻辑如果不是两套逻辑都要测。这个习惯帮我避开了很多隐性返工也希望能帮到你。本文还有配套的精品资源点击获取