企业官网建设流程全解析

简介：这份资源是面向Photoshop CC零基础学习者与入门设计师的培训教程配套模拟题库系统，以移动学习版形式呈现，帮助使用者在掌握界面布局、选择工具、图层管理、调色命令、滤镜特效、文字与矢量图形等基础操作后，通过练习检验学习效果。压缩包共216个文件，约191.62MB，包含83个png与44个jpg示例素材、33个psd分层练习文件、11个gif动图，以及html、js、css、json等题库系统运行文件，另有dll、pak、bin等程序依赖组件，构成可本地运行的完整练习环境。题库系统涵盖选择题、填空题、实践题与案例分析，并配有自动评分与反馈机制，便于定位薄弱环节。目前已有104人学习，适合希望边学边练、系统巩固Photoshop基础技能的读者使用。

1. 从一份模拟题库压缩包说起：Photoshop CC 基础培训的数字化落地

很多做设计培训的朋友都遇到过同一个尴尬：学员在手机上刷 Photoshop CC 基础题，题目里写着「调整图层混合模式」，可手边没有软件、没有素材、没有步骤，刷完还是不会。这份「中文版Photoshop CC基础培训教程（移动学习版）_模拟题库系统.zip」要解决的正是这个断层——它把一套基础培训教程和一套可移动端运行的模拟题库打包在一起，让学员在通勤、午休这类碎片时间里，既能看知识点，又能立刻用题目验证自己是否真的记住了。它适合三类人：刚接触 PS 的零基础学员、需要给团队做内训的设计主管、以及想把线下课程搬到手机端的培训讲师。核心不是「多了一个题库」，而是把「教程—练习—自测」压进一个可以离线打开的压缩包里，降低学习启动成本。

2. 拆开压缩包之前：先想清楚移动学习版题库的技术选型

2.1 为什么不是直接做一个 App，而是压缩包加网页

常见做法有两种：一是原生 App，二是「压缩包 + 本地网页」。前者体验好，但开发周期长、上架审核麻烦，学员装完就吃灰；后者把 HTML、CSS、JavaScript 和题目数据放在一个文件夹里，用手机浏览器打开index.html就能跑，不需要联网，也不需要安装。对于基础培训这种内容更新不频繁、题型以单选多选判断为主的场景，压缩包方案更划算。它的边界也很清楚：不适合需要实时排行榜、多人对战、云端批改的复杂场景。如果你只是想让学员把 PS 基础概念和快捷键记牢，压缩包方案足够。

2.2 题库系统的三个核心模块：题目数据、渲染逻辑、判分反馈

不管界面长什么样，一个能用的模拟题库系统至少拆成三块。第一块是题目数据，通常用 JSON 或 JavaScript 数组存，每道题包含题干、选项、正确答案、解析。第二块是渲染逻辑，负责把当前题目的题干和选项画到页面上，并记录用户选了哪个。第三块是判分反馈，用户点「提交」后对比答案，显示对错和解析，再决定是下一题还是重做。这三块分开写，后面加题、改题、换皮肤都不会互相牵扯。我一般会把题目数据单独放一个questions.js，渲染和判分放app.js，样式放style.css，结构清晰，学员自己也能照着改。

2.3 移动端适配的最低要求：视口、点击区域、字体缩放

移动学习版最容易翻车的地方不是功能，而是手指点不准。三个参数必须设：<meta name="viewport" content="width=device-width, initial-scale=1.0">让页面按手机宽度渲染；选项按钮的高度不低于 44px，这是手指点击的舒适下限；正文字号用rem或vw，避免在窄屏上出现横向滚动条。另外，PS 基础题里经常出现快捷键组合，比如Ctrl+Shift+Alt+S，在手机上要写成可换行的短代码块，不能挤在一行里被截断。这些细节不涉及高深技术，但直接决定学员愿不愿意继续刷下去。

3. 从零搭一个可离线运行的模拟题库：文件结构与核心代码

3.1 目录结构：四个文件就能跑起来

先建一个文件夹，名字随意，比如ps-mock-exam。里面放四个文件：index.html负责页面骨架，style.css负责移动端样式，questions.js存题目数据，app.js写渲染和判分逻辑。题目数据不要写进 HTML，否则加一道题就要动页面结构，容易改出问题。下面是最小目录结构：

ps-mock-exam/ ├── index.html ├── style.css ├── questions.js └── app.js

这个结构的好处是，你把这个文件夹压缩成 zip 发给学员，学员解压后用手机浏览器打开index.html就能做题。不需要服务器，不需要网络，也不需要任何构建工具。如果后续题目多了，可以在questions.js里继续追加，不影响其他文件。

3.2 题目数据格式：用 JSON 数组存题干、选项、答案和解析

questions.js里定义一个全局数组，每道题是一个对象。字段名用英文，避免中文键名在某些旧浏览器里出问题。下面是一道关于「图层混合模式」的示例题：

// questions.js // 每道题包含：id（题号）、stem（题干）、options（选项数组）、answer（正确选项索引，从0开始）、explain（解析） const questions = [ { id: 1, stem: "在 Photoshop CC 中，想要让当前图层只保留暗部、隐藏亮部，应该把混合模式改为？", options: ["滤色", "正片叠底", "叠加", "差值"], answer: 1, explain: "正片叠底会保留暗部并隐藏亮部，常用于压暗画面或叠加阴影。" }, { id: 2, stem: "移动工具（快捷键 V）在选中多个图层时，按住哪个键可以临时切换为自动选择？", options: ["Ctrl", "Shift", "Alt", "空格"], answer: 0, explain: "按住 Ctrl 可临时切换到自动选择模式，松开后恢复移动工具。" } ];

逻辑说明：answer存的是选项数组的索引，不是选项文字。这样做的好处是选项顺序可以打乱，判分时仍然准确。参数说明：id用于显示题号，stem是题干，options至少两个、最多六个，explain在用户答错时显示。如果你要加多选题，可以再加一个type: "multiple"字段，answer改成数组，判分逻辑相应调整。

3.3 渲染与判分：用原生 JavaScript 控制题目切换和反馈

app.js负责把当前题目画出来，并处理点击事件。下面是一个可运行的最小实现：

// app.js let currentIndex = 0; // 当前题目索引 let selectedOption = null; // 用户选中的选项索引 // 渲染当前题目 function renderQuestion() { const q = questions[currentIndex]; document.getElementById("stem").textContent = q.stem; const optionsBox = document.getElementById("options"); optionsBox.innerHTML = ""; q.options.forEach((text, idx) => { const btn = document.createElement("button"); btn.className = "option-btn"; btn.textContent = text; btn.onclick = () => { selectedOption = idx; // 清除其他按钮的选中状态 document.querySelectorAll(".option-btn").forEach(b => b.classList.remove("selected")); btn.classList.add("selected"); }; optionsBox.appendChild(btn); }); document.getElementById("feedback").textContent = ""; document.getElementById("next-btn").style.display = "none"; } // 提交答案并判分 function submitAnswer() { if (selectedOption === null) { document.getElementById("feedback").textContent = "请先选择一个选项。"; return; } const q = questions[currentIndex]; const feedback = document.getElementById("feedback"); if (selectedOption === q.answer) { feedback.textContent = "回答正确。" + q.explain; } else { feedback.textContent = "回答错误。正确答案是：" + q.options[q.answer] + "。" + q.explain; } document.getElementById("next-btn").style.display = "inline-block"; } // 下一题 function nextQuestion() { if (currentIndex < questions.length - 1) { currentIndex++; selectedOption = null; renderQuestion(); } else { document.getElementById("feedback").textContent = "已经是最后一题，可以重新开始。"; } } // 初始化 window.onload = function() { renderQuestion(); document.getElementById("submit-btn").onclick = submitAnswer; document.getElementById("next-btn").onclick = nextQuestion; };

逻辑说明：renderQuestion每次清空选项容器再重新生成按钮，避免上一题的选中状态残留。selectedOption记录用户点击的索引，提交时与q.answer比较。参数说明：currentIndex从 0 开始，questions.length是题目总数。如果要做「上一题」功能，加一个prevQuestion函数，把currentIndex--并重新渲染即可。注意不要用innerHTML直接拼接用户输入的内容，这里题目数据是固定的，所以安全。

3.4 移动端样式：让选项按钮在手机上点得准、看得清

style.css不需要复杂，重点是把点击区域做大、字体自适应。下面是一段可直接用的样式：

/* style.css */ body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; margin: 0; padding: 16px; background: #f5f5f5; color: #222; } #stem { font-size: 1.1rem; line-height: 1.6; margin-bottom: 16px; } .option-btn { display: block; width: 100%; min-height: 48px; margin-bottom: 10px; padding: 12px; font-size: 1rem; text-align: left; border: 1px solid #ccc; border-radius: 8px; background: #fff; box-sizing: border-box; } .option-btn.selected { border-color: #2b7de9; background: #e8f1fd; } #feedback { margin-top: 12px; font-size: 0.95rem; line-height: 1.5; color: #444; } #submit-btn, #next-btn { min-height: 44px; padding: 0 20px; font-size: 1rem; border: none; border-radius: 6px; background: #2b7de9; color: #fff; margin-right: 10px; }

逻辑说明：.option-btn用display: block和width: 100%让每个选项占满一行，避免误触。min-height: 48px保证手指点得准。box-sizing: border-box防止 padding 把宽度撑出屏幕。参数说明：font-size用rem相对根字号，根字号默认 16px，用户系统调大字体时页面也会跟着缩放。如果学员反馈字太小，把body的font-size改成18px即可。

4. 把教程内容嵌进题库：知识点与题目的对应关系怎么建

4.1 先列知识点清单，再出题，不要反过来

很多培训资料翻车的原因是先凑题，结果题目之间没有覆盖梯度。我的做法是先把 Photoshop CC 基础培训教程拆成若干知识模块，比如「界面与首选项」「图层与混合模式」「选区与蒙版」「文字与形状」「调色与滤镜」「导出与批处理」。每个模块下列出必须掌握的操作点，再针对每个操作点出 2 到 3 道题。这样题库的覆盖面是可控的，学员做完题也能反推出自己哪一块没掌握。知识点清单可以用表格管理，下面是一个示例：

这张表不用放进压缩包，但你自己要有一份。题目数据里的id和表格里的题号对应，后续加题时先更新表格，再改questions.js，避免题目散落。

4.2 题干里嵌入操作场景，而不是直接问概念

基础培训的学员最怕干巴巴的概念题。比如问「正片叠底的原理是什么」，不如问「一张火焰素材拖进画面后，想让火焰只保留亮部、去掉黑色背景，应该把混合模式改成什么」。后者把操作场景和知识点绑在一起，学员答完能直接对应到软件里的动作。写题干时注意三点：场景要具体到图层和素材类型；选项要包含常见误操作；解析要写清楚为什么其他选项不对。这样即使答对了，学员也能从解析里巩固一遍。

4.3 用解析字段做二次教学，别只写「正确答案是 X」

explain字段是移动学习版最容易被浪费的地方。很多题库只写「正确答案是 B」，学员看完就忘。我一般会写三句话：第一句点明正确选项为什么对，第二句说明其他选项为什么错，第三句给一个记忆口诀或快捷键。比如正片叠底那道题，解析可以写成：「正片叠底保留暗部、隐藏亮部，适合压暗和叠阴影；滤色相反，保留亮部；叠加是两者的混合；差值用于反相效果。记住：正片叠底让画面变暗，滤色让画面变亮。」这样学员即使做对了，也能多记一个对比关系。

5. 避坑与排查：移动端题库最常见的五个翻车点

5.1 现象：手机上打开 index.html 一片空白，什么都不显示

原因：最常见的是questions.js或app.js路径写错，或者文件编码不是 UTF-8，中文题干变成乱码导致脚本报错。解决：先看浏览器控制台有没有红色报错；确认四个文件在同一目录；用 VS Code 或记事本另存为 UTF-8 编码。如果还是空白，把app.js里的window.onload改成直接在</body>前调用renderQuestion()，排除加载顺序问题。

5.2 现象：选项按钮点一次没反应，要点两次才选中

原因：移动端浏览器有 300ms 点击延迟，或者按钮上同时绑定了click和touchstart导致重复触发。解决：只用click事件，不要混用touchstart；在<meta name="viewport">里加user-scalable=no禁止双击缩放；如果仍然延迟，引入一个轻量的 fastclick 逻辑，或者直接用pointerdown代替click。我一般先用click，真遇到延迟再换。

5.3 现象：题目数据里中文引号和英文引号混用，脚本直接报错

原因：题干里出现「他说“你好”」这种中文引号，如果外层用单引号包裹字符串，中文引号本身没问题，但英文单引号出现在题干里就会提前结束字符串。解决：统一用双引号包裹字符串，题干内部的英文双引号用反斜杠转义，或者改用中文引号。更稳妥的做法是把题目数据写成严格的 JSON 格式，用 JSON 校验工具检查一遍再放进questions.js。

5.4 现象：学员做完题后刷新页面，进度全丢了

原因：没有做本地存储，currentIndex和已答题记录只存在内存里。解决：用localStorage存当前题号和答题结果。下面是一段可用的保存逻辑：

// 保存进度 function saveProgress() { localStorage.setItem("ps_exam_index", currentIndex); localStorage.setItem("ps_exam_selected", JSON.stringify(selectedOption)); } // 读取进度 function loadProgress() { const savedIndex = localStorage.getItem("ps_exam_index"); if (savedIndex !== null) { currentIndex = parseInt(savedIndex, 10); } }

参数说明：localStorage的键名加前缀避免和其他页面冲突。注意selectedOption可能是null，用JSON.stringify存，读取时用JSON.parse还原。如果学员想重新开始，加一个「重置」按钮调用localStorage.clear()。

5.5 现象：题目多了以后，一页显示太长，滚动卡顿

原因：所有题目一次性渲染到页面上，DOM 节点过多。解决：不要一次性渲染全部题目，只渲染当前一道题，通过currentIndex切换。上面的renderQuestion已经是这个思路。如果要做「答题卡」总览，用 Canvas 画或者只渲染题号按钮，不要渲染题干。另外，图片素材不要用大图，PS 基础题里如果需要展示界面截图，压缩到宽度 600px 以内，格式用 WebP 或 JPEG。

6. 进阶技巧：用一套数据同时生成练习模式和考试模式

6.1 用 mode 变量区分「即时反馈」和「交卷后统一判分」

练习模式下，用户点提交立刻看到对错和解析；考试模式下，用户答完所有题再统一显示分数和错题。实现方式是在app.js顶部加一个mode变量，submitAnswer里根据模式决定是否立即显示反馈。下面是一段示例：

// 模式：practice（练习）或 exam（考试） let mode = "practice"; let userAnswers = []; // 考试模式下记录每道题的选择 function submitAnswer() { if (selectedOption === null) { document.getElementById("feedback").textContent = "请先选择一个选项。"; return; } if (mode === "practice") { // 练习模式：立即判分 const q = questions[currentIndex]; const feedback = document.getElementById("feedback"); if (selectedOption === q.answer) { feedback.textContent = "回答正确。" + q.explain; } else { feedback.textContent = "回答错误。正确答案是：" + q.options[q.answer] + "。" + q.explain; } document.getElementById("next-btn").style.display = "inline-block"; } else { // 考试模式：只记录答案，不显示对错 userAnswers[currentIndex] = selectedOption; nextQuestion(); } }

逻辑说明：练习模式保留即时反馈，考试模式把选择存进userAnswers数组，等所有题答完后遍历判分。参数说明：mode可以在页面加载时通过 URL 参数读取，比如index.html?mode=exam，用new URLSearchParams(location.search).get("mode")获取。这样同一套题目数据，两种使用场景都能覆盖。

6.2 用错题本提高复习效率：只存错题索引，不存整道题

考试模式结束后，把答错的题号存进localStorage，下次打开时优先推送错题。不要存整道题的副本，只存id或索引，题目内容仍然从questions.js读取。这样题目更新后，错题本自动跟着更新。下面是一个错题记录的示例：

// 记录错题 function recordWrongQuestions() { const wrongIds = []; questions.forEach((q, idx) => { if (userAnswers[idx] !== q.answer) { wrongIds.push(q.id); } }); localStorage.setItem("ps_exam_wrong", JSON.stringify(wrongIds)); }

参数说明：wrongIds存的是题目的id，不是数组索引，这样即使以后调整题目顺序，错题本仍然有效。读取时用questions.find(q => q.id === id)找到对应题目。如果学员全部答对，wrongIds为空数组，显示「没有错题」即可。

6.3 验证方法：用三道题快速检查判分逻辑是否可靠

搭好之后不要急着加几百道题，先用三道题验证。第一道选正确答案，看是否显示「回答正确」；第二道选错误答案，看是否显示正确答案和解析；第三道不选直接提交，看是否提示「请先选择一个选项」。这三步能覆盖判分、反馈和空选三个分支。如果都通过，再把题目数据批量导入。我自己的习惯是每加十道题就重新跑一遍这三步，防止新题目的answer索引写错。这个习惯帮我省了很多后悔药，因为索引错一位，学员就会看到莫名其妙的判分结果。

6.4 一个具体技巧：用快捷键编号代替鼠标点击，方便快速录题

录题时最烦的是反复在编辑器和浏览器之间切换。我的做法是在app.js里加一段键盘监听，按数字键 1 到 4 直接选中对应选项，按回车提交，按右方向键下一题。这样录题时手不用离开键盘，效率高很多。代码很短：

// 键盘快捷键：1-4 选择选项，Enter 提交，右方向键下一题 document.addEventListener("keydown", function(e) { if (e.key >= "1" && e.key <= "4") { const idx = parseInt(e.key, 10) - 1; const btns = document.querySelectorAll(".option-btn"); if (btns[idx]) btns[idx].click(); } else if (e.key === "Enter") { document.getElementById("submit-btn").click(); } else if (e.key === "ArrowRight") { document.getElementById("next-btn").click(); } });

参数说明：e.key在数字键上返回字符串 "1" 到 "4"，比较时注意类型。这段代码只在桌面浏览器录题时有用，移动端不会触发键盘事件，所以不影响学员使用。如果你要录多选题，把数字键改成切换选中状态，而不是直接提交。

这套压缩包方案我前后改过几版，最大的教训是：不要一上来就追求界面好看，先把题目数据结构和判分逻辑跑通，再慢慢调样式。题目数据格式一旦定下来，后面加题、换模式、做错题本都是顺水推舟。希望帮到你。

本文还有配套的精品资源，点击获取