HTML PPT Studio 可视化编辑器 · 使用说明

一款基于 HTML 的幻灯片可视化编辑器，支持文本框、图片、视频、交互课件的自由拖拽排版，36 种主题一键切换，内置 LaTeX 公式、入场动画、画笔标注等功能。^[1]

一、界面布局

编辑器由以下区域组成：

┌──────────────────────────────────────────────────────────────┐│  顶部工具栏：标题 | 文件 | 主题 | ＋插入 | ⚙页面 | 🌙 | ▶预览 │├──────────────────────────────────────┬───────────────────────┤│                                      │                       ││        左侧主编辑画布                 │  右侧属性面板          ││        (iframe 实时编辑)              │  · 页面设置（动画/背景）││                                      │  · 文字样式           ││                                      │  · LaTeX 公式         ││                                      │                       │├──────────────────────────────────────┴───────────────────────┤│  底部导航栏：撤销/重做 | ◀ 1/5 ▶ | ＋⧉🗑 | − 100% ＋｜⊡⊞ │└──────────────────────────────────────────────────────────────┘

二、顶部工具栏

2.1 演示文稿标题

工具栏最左侧的输入框（默认显示”PHYSICS EDU”）是整个演示文稿的名称。修改后按 Enter 确认，该名称会作为导出 HTML 文件的网页标题和文件名。

2.2 文件操作（📄 文件）

点击「📄 文件」弹出下拉菜单：

导出时会弹出路径选择对话框：

• 远程 CDN 链接：资源引用指向 CDN 地址，导出的 HTML 文件轻量，需联网加载资源
• 本地相对路径：资源引用使用相对路径，需将 assets/ 目录放在 HTML 同级

2.3 主题切换（🎨 主题）

点击「🎨 主题」弹出主题选择面板，内置 36 种主题：

主题面板顶部还有「背景色调」颜色选择器，可单独覆盖当前主题的背景色。点击右侧 ↺ 按钮可恢复主题默认背景。

2.4 插入元素（＋ 插入）

点击「＋ 插入」弹出插入菜单：

文本样式（7 种）

插入后文本框出现在画布中央，可自由拖拽和缩放。

图片 / 视频 / 交互课件

这三种元素都支持两种方式插入：

• URL 链接：输入网络资源地址（如图片 URL、视频 MP4 链接、HTML 课件链接）
• 本地上传：选择本地文件，上传后以 data URL 嵌入编辑器

定义

注意：本地上传的资源在导出时会引用 folder/文件名 路径，需要将对应的资源文件放在导出 HTML 同级的 folder/ 目录下。

2.5 页面设置（⚙ 页面）

点击「⚙ 页面」弹出下拉菜单，包含两个功能：

页脚

设置全局页脚，预览和导出时生效：

悬浮球

启用后，在全屏预览或导出后的 HTML 中，屏幕右下角会出现一个悬浮按钮。点击弹出圆盘菜单：

各模式互斥切换；在绘画/橡皮擦模式下再次点击按钮关闭对应功能，在画布上右键可清空所有标记。

2.6 夜间模式（🌙）

点击工具栏右侧的 🌙 按钮切换编辑器的夜间/白天模式（仅影响编辑器界面样式，不影响幻灯片本身的主题）。

2.7 预览（▶ 预览）

点击「▶ 预览」进入全屏预览模式：

• 编辑器 iframe 会切换为全屏显示，并请求浏览器全屏 API
• 按 Esc 退出全屏预览
• 全屏预览下按 F 切换浏览器全屏

预览模式下的导航请见下文”预览与演示”章节。

三、左侧画布

3.1 编辑操作

画布中央是一个 iframe，实时显示当前幻灯片的可编辑状态。在画布上：

• 单击元素：选中，显示蓝色边框和操作手柄
• 双击文本框：进入文字编辑模式
• 长按拖拽手柄（元素顶部 ⠯）：拖拽移动位置
• 拖拽右下角手柄（◢）：缩放元素大小
• 选中后按 Delete：删除元素
• 在空白处双击：在点击位置插入默认文本框

3.2 网格辅助（⊞）

底部导航栏右侧的 ⊞ 按钮可切换画布网格辅助线，方便对齐元素。

3.3 缩放画布（− 100% ＋）

底部导航栏右侧的缩放控制：

3.4 HTML 源码编辑器

快捷键 Ctrl+E 切换源码编辑器面板。在面板中可以直接编辑当前幻灯片的 HTML 源码，编辑后点击「应用」生效。若源码不以 <section 开头会提示错误。

3.5 撤销与重做（↩ ↪）

最多保存 50 步操作历史。

四、幻灯片管理（底部导航栏）

底部导航栏中间区域控制幻灯片：

键盘翻页：

五、右侧属性面板

5.1 页面设置（✦ 页面设置）

点击属性面板顶部的「✦ 页面设置」可以折叠/展开该区域。

入场动画

给当前幻灯片设置切换动画：

设置了动画顺序（非 0）的元素，在演示模式下会按顺序逐条显示。

背景色

为当前幻灯片单独设置背景色，会覆盖主题的背景色。

定义

5.2 文字样式

选中画布上的文本框后，可在属性面板中调整：

定义

5.3 LaTeX 公式

1. 点击「📐 LaTeX 公式」按钮展开公式面板
2. 在文本框中输入 LaTeX 代码，如 E = mc^2 或 \frac{-b \pm \sqrt{b^2-4ac}}{2a}
3. 下方会实时渲染公式预览
4. 点击「插入公式」将渲染后的 SVG 公式插入到当前幻灯片中
5. 点击「清除」关闭面板
   

六、预览与演示

6.1 全屏预览

点击工具栏的「▶ 预览」按钮，进入全屏预览模式。

6.2 演示操作（导出后的 HTML）

编辑器导出的 HTML 文件可直接在浏览器中打开播放，支持以下操作：

动画顺序播放：如果某页元素设置了动画顺序（顺序号 > 0），演示时按顺序逐条显示。所有元素显示完毕后，按下一页才跳到下一张。

七、快捷键汇总

参考资料