先分清两件事：这个“离线包”是 ZIP 压缩包，无需安装软件，解压后直接打开网页。云端链接始终指向同一个公开站点，会显示后来发布的最新版本；已下载的离线包是固定版本，不会自动更新。
01 / 选择使用方式
02 / 离线包怎么用
推荐 Windows 电脑使用最新版 Chrome 或 Edge。压缩包约 107 MB，下载和解压时建议预留至少 250 MB 空间。
- 把 ZIP 保存到电脑文件名为“甘谷麻鞋故事解码器-含视频与说明书完整离线包.zip”。请先完整下载，不要在浏览器的压缩包预览里打开网页。
- 右键 ZIP →“全部解压缩”也可使用常见解压工具。解压后会得到一个名为“甘谷麻鞋故事解码器”的完整文件夹。
- 打开解压后的文件夹双击根目录的 双击打开演示.html。页面会自动转到首页；如果没有自动转到首页，再双击 dist/index.html。
- 在浏览器中开始导览顶部导航进入故事解码、一线成鞋、地方记忆、研究工作台、创意工坊、纹样故事馆、历史与工艺。首屏有声效开关，需点击后才会发声。
- 观看两段视频首页“麻鞋制作七步法”下方点击“观看两段甘谷麻鞋影像”，到达视频区后点击播放器的 ▶。视频有原声，播放器可暂停、调整音量、全屏；卡片下方另有“下载原片”。
不要拆散文件夹。网页依赖 dist/assets/ 里的图片、音频和视频。只转发一个 HTML 文件、把 ZIP 内的网页直接拖出压缩包，都会造成资源缺失。要分享离线版，请分享完整 ZIP。
文件夹结构：甘谷麻鞋故事解码器/双击打开演示.html 是入口；dist/ 是网页及全部播放素材；用户提供原始素材/ 保存交付原件。使用说明书.html 就是本文件。
03 / 网页链接怎么用
- 点击链接或复制到浏览器地址栏建议用 Chrome、Edge、Safari 等现代浏览器。电脑和手机都可以访问。收到微信、QQ 等聊天软件中的链接时，点击即可；若内置浏览器播放不顺畅，可用系统浏览器打开。
- 等待首页出现，再按顶部导航浏览不用下载 ZIP。图片和视频会通过网络加载；移动网络下，首次打开视频可能需要稍等。
- 要看视频，使用视频直达链接点击后会进入“历史与工艺”页的“让手艺动起来”版块；再点击对应播放器的 ▶。网页不会自动播放有声视频。
同一个域名反复更新是正常的：以前消息里发出的本站链接也会显示当前已发布的网页。若刚更新后仍看到旧画面，可刷新页面；电脑可按 Ctrl+F5 强制刷新。
04 / 进入后可以做什么
| 顶部入口 | 观众操作 | 会得到什么 |
|---|---|---|
| 故事解码 | 选择麻鞋故事，依次观察纹样、猜含义、翻看故事、查看工艺。 | 了解名称、传说、实物观察与待核实问题。 |
| 一线成鞋 | 点击五道工序或“播放工艺动画”。 | 观看从材料到成鞋的教学动画。 |
| 地方记忆 | 点击姜维证据树不同分支。 | 分辨史料人物、文学人物、地方记忆和当代传播视角。 |
| 研究工作台 | 按页面说明用匿名编号参加 A/B 体验和测验。 | 得到本机记录，可导出实验数据；仅适合在教师组织下采集。 |
| 创意工坊 | 选鞋面或鞋帮等区域，点击纹样、调整配色或随机生成，再导出 PNG。 | 获得一张创意麻鞋设计图；它是数字模拟。 |
| 纹样故事馆 | 浏览 21 款图形，点击目录快速定位；生肖可看线描与彩绘。 | 查看图形说明、文化线索和数字上鞋效果。 |
| 历史与工艺 | 看证据时间线、七步工艺、两段视频；有实测数据时填入材料实验板。 | 观察工艺过程并可导出实验 CSV。 |
首页右上方“声效关”需要主动开启；“展台演示”可自动引导讲解。历史工艺页与创意工坊页也有独立声效按钮。
05 / 比赛展台的推荐操作顺序
- 提前准备把 ZIP 完整解压到展示电脑，接好投影或大屏，测试浏览器、音箱和两段视频。若有网络，再准备首页二维码供观众扫码。
- 先讲“一双麻鞋有几层故事”在首页选择故事，邀请观众猜测，再翻开故事卡解释纹样与民间叙述。不要把传说当作已证实历史。
- 展示手艺和科学问题从首页七步卡进入历史工艺页，选 1—2 个步骤演示，再播放视频的相关片段；用材料实验板说明需要怎样实测，而不是预填研究结果。
- 让观众参与设计切到创意工坊，让观众选纹样、调整颜色，导出图片。再到故事馆解释图形来源与“原创模拟”的边界。
- 最后说明研究方法介绍 A/B 组与即时、延迟测验；若正式采集，请由教师组织、固定设备和浏览器，并及时导出记录。
06 / 数据、图片与视频保存在哪里
| 内容 | 保存位置 | 用户需要做什么 |
|---|---|---|
| 站内图片、音效、视频 | 离线包的 dist/assets/；在线版由网站托管。 | 离线时保留整个文件夹；在线时保持网络通畅。 |
| 创意工坊导出图 | 点击“导出 PNG”后由浏览器保存到下载目录。 | 在浏览器下载列表或电脑“下载”文件夹中寻找。 |
| 材料实验 CSV | 输入的实验值先存在当前浏览器，点击“导出 CSV”另存文件。 | 正式实验后立即导出并做好备份。 |
| A/B 研究记录 | 只保存在当前浏览器，不是云端多人数据库。 | 使用同一设备、同一浏览器、同一入口；及时导出 CSV/JSON。 |
离线和在线记录不会自动合并。即使是同一台电脑，file:// 打开的离线页与 https:// 在线站点也按不同访问位置保存数据。换设备、换浏览器或清除浏览器数据，都可能看不到原记录。
07 / 常见问题
为什么图片或视频显示不出来？
先确认 ZIP 已完全解压，并且 dist/ 与 双击打开演示.html 仍在同一个项目文件夹里。不要只复制单个网页文件。在线访问则检查网络并刷新。
为什么视频或声效没有声音？
浏览器要求用户点击后才允许有声播放。请点击视频 ▶ 或页面“声效关”按钮，再检查播放器音量、系统音量和展台音箱。网页不会自动播放有声视频。
为什么旧链接打开后也是新内容？
因为始终更新同一个公开站点。旧消息中的链接没有变，打开时显示该地址当前发布的版本。已经下载的离线 ZIP 则保持下载时的内容。
为什么外部资料离线时打不开？
小红书、政府网站等是外部来源链接，不属于离线包。展览页面、内置图片、声效和两段视频本身不依赖这些外链。
页面打开但研究记录不见了？
检查是否换了浏览器、设备，或从离线地址改为云端地址。研究数据只在原浏览器保存，不能自动同步。请在原设备导出后再汇总。
还能用别的方式本地预览吗？
可以。已安装 Node.js 的电脑，在项目目录运行 node 本地启动.cjs，然后打开 http://127.0.0.1:8787。普通观众不需要执行这一步。
交付检查清单
交给观众或老师前，请确认：① ZIP 能完整解压；② 双击入口能打开首页；③ 首页图片显示；④ 两段视频能播放且有声音；⑤ 创意工坊能导出 PNG；⑥ 云端首页链接能在另一台设备打开。比赛正式对外展映视频前，还需核实原片传播授权。