如何利用 reveal.js 随心所欲地制作 PPT

在面临课题总结或者小组活动的时候，我们几乎都避免不了使用PPT的情境。而制作一个质量较高的PPT可能需要花费比较长的时间¹ 。倘若你是个“完美主义者”，对细节要求几近苛刻，而知识储备并不是很尽如人意的话，往往会弄得是一头絮乱，制作一个PPT可能是种折磨...

制作一个好的PPT，在一些演讲的情境中，对于演讲者来说，也是自信的源泉，也有可能会让演讲的表现力提升一个档次。

那接下来就我个人认知和使用，粗浅的说下个人观点...

PowerPoint

谈及到PPT的使用，微软的PowerPoint和Apple的Keynote都是我们日常使用居多的幻灯片制作工具。

以老牌的课件制作工具PowerPoint为例。
优点：

1. 可塑性强，可对组件，动画等进行简单的编辑；
2. 强大的SmartArt工具以及丰富的图表样式；
3. 支持数学公式，对理科老师有用；
4. 适用于大部分设备；
5. 因为广泛使用，更容易传播；
6. 丰富的插件（PPT动画大师，Nordri Tools，iSlide等）。

缺点：

1. 自带的组件相对来说不够美观，动画效果比较僵。
2. 对于非深度使用者来说很多功能几乎用不上。
3. 操作界面相对不够直观，需要大量编辑，也就造成了需要投入大量时间，却又吃力不讨好的局面。
4. 不同设备之间的同步不够方便。

而Keynote苹果iOS，OS X系统（分别对应移动端系统和非移动端系统）上的一款制作课件软件。刚推出的时候曾经以“闪烁”和“火焰”等酷炫效果占据几乎所有Keynote演示场合。
优点：

1. 可以短时间做出一个看上去不太丑的课件。
2. 操作方便，在Keynote3.3的更新内容中，在运行iOS11的iPad上，可以通过多任务管理在Keynote和其他应用之间拖放文本，图像等，使得Keynote的操作效率更加快捷，简单。
3. 自带模板比较美观，风格偏扁平化，动画效果比较平滑，带有缓冲，弹性的效果，可观性很强。
4. 设备之间可以通过iCloud同步非常方便，也可以通过AirDrop来传输。
5. 讲座时可以将手机当成翻页笔来控制电脑上正在放映的Keynote演示。

缺点：

1. 对于插件、第三方软件兼容性相对差。
2. 相对比较难对课件做深度设计。
3. iOS平台的限制性，不能被广泛使用。

reveal.js

reveal动词形式直译的话有揭露，[神]启示的意思，名词形式直译的意思有揭示，展现的意思。

正如他的名词解释一样，reveal.js是一个基本Web的展示框架。简单来说就是用网页来制作很棒的交互式的幻灯片。

Vertical Slides

正常的幻灯都是水平布局，左右切换，而reveal.js可以垂直布局，上下切换，有点类似于PowerPoint中"节"的使用。减少水平布局的幻灯片过多的压力，以防概览很乱，垂直分布使主题分成几个"小节"一目了然。嵌入在下方的幻灯片可以用作对上方（等级较高的）幻灯片补充额外的细节的作用。

▲ Vertical Slides

一些快捷键

• ← ↑ → ↓:控制幻灯片的切换。
• ESC：对幻灯片做个整体的概览。
• ALT+click ：类似PowerPoint放映的时候的放大镜的效果，镜头迅速拉近。
• S：开启演讲者模式，这点和PowerPoint类似，分成四个板块：当前幻灯片的显示，下一张幻灯片的预览，当前演讲时间以及演讲的备注笔记。
• B：暂时停止当前的幻灯片的放映，呈现黑屏。在演讲时，当你希望听众能把注意力集中在你身上的时候，非常有用。

Slides

reveal.js是基于WEB的框架，基本网页能实现的内容，reveal都能实现。然而我们的目的只是制作一个简约，有逼格的幻灯片。不是一个程序员，不会代码，不是个问题。关于reveal.js有一个充满特色的线上可视化编辑应用网页，注册下登录即可开始简单的制作了。磁力

用Slides制作幻灯片

Slides是一个用作创造（create），展示（presenting）和分享的（sharing）的幻灯片制作的平台。因为Web的特性，使得它可以在几乎任何有网络的地方都能被你获得和编辑。让你抛开的平台的限制以及其他因素，进行轻量级的使用。

Create

在不牺牲简单易用的优势下，Slide 的布局是非常精确和灵活的。通过背景的网格基准线可以使内容排版非常轻松，也可以通过拖选得方式，同时移动多个模块内容。

▲ 拖选、吸附的基准线

工具栏

最左侧的工具栏也就是幻灯片保存，撤销，预览，导入/出等基础的文件功能。

毛笔状的style，主要是设置当前幻灯片的主题色彩，字体样式，转场动画以及背景转场动画。整体风格偏简约，扁平化，几乎都挺实用的。发挥自己的想象，明暗背景的转场会有不错的效果。

▲ 主题样式

页面左侧的media library可以上传一些制作PPT的需要使用素材，也可以用作素材的堆积库。

▲ media library

工具

可以分为文本，图片，视频，图形，线形，表格，代码块区域，数学公式区域块等。每个工具组件都有网页组件的特性，页边距，边框等，动画效果有自定义的延迟和持续时间的属性修改。利用动画效果的特性可以做出很nice的呈现。

▲ 算是比较nice的个人制作 orz

比较特殊的是Iframe，通过url或者<iframe>标签实现在幻灯片嵌入幻灯片的效果以及其他网页的嵌入。

背景工具栏

背景设置

• 颜色：CSS所支持的颜色都涵盖...
• 图片：可以选择media library中的图片作为背景，也可以通过工具栏下方的设定按钮开启"开发者模式"，将图片平铺。

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

• 视频：添加media library的视频作为背景。
• 动图：动图居然也可以作为背景233...

片段放映

闪电状功能主要将当前幻灯片的各组件分段显示。单击需要编辑的组件，组件被阴影遮罩遮住，即可进入显示次序排列的编辑。转到当前幻灯片的时候，按照设定的层次显示次序，通过切换幻灯片的动作，依次显示..

▲ 层级

演讲备注笔记

演讲者笔记是通过在当前幻灯片添加，并在演讲者视角开启时，才能看得到。如果想要分享自己的备注笔记的话，也可以在左下角的deck setting里开启选项。这样所有浏览模式的人都可以看见笔记了。

▲ shanre notes

编辑html

需要通过左下角的editor setting中开启。获得三个权限：

• 幻灯片的html编辑
• 通过导出reveal.js，可以获得制作完的幻灯片的html源码。
• 可以添加class names。通过传统的CSS来添加所需的内容。

Present

speaker view

通过工具栏的放映键位进入放映界面。

开启演讲者视角即

http://slides.com/用户名/幻灯片名/speaker

▲ 演讲者视角

remote control

可以通过移动设备控制：

▲ 终端控制

send SMS的方式，打开链接，从移动设备通过点击和滑动来控制幻灯片的放映，即在手机上打开speaker view的url。

▲ SMS发送url

present live

通过工具栏的present live的link即可进入幻灯片的实时放映页面，任何都可以通过链接，进行实时的访问。

http://slides.com/用户名/幻灯片名/live

勾选fullscreen让幻灯全屏显示，然后点击Start presetation，开始幻灯片的放映，打开"live"url的人就能看到你的放映了！

▲ 记住勾选 Fullscreen

Share

通过左下角的Share功能，可以将幻灯片全部概览，分享出去。

• link

http://slides.com/用户名/幻灯片名/fullscreen

• Embed通过<iframe>标签嵌入到其他网页，可以直接嵌入到另一张幻灯片。
• E-mail通过e-mail发送简讯...

Export

可以离线保存幻灯片的html文件，但不包括外部的资源，例如图片等，不适合离线使用。

也可以将reveal.js的框架资源下载下来，把本幻灯片的源码资源在index.html中替换掉，即可形成完整的项目资源。

导出zip,pdf则需要升级Pro...

尾巴

reveal.js的开发者模式的有关介绍，链接。

综上，reveal.js 制作PPT的优势

 

• 制作简单，对于前端攻城狮来说就是做个页面；对于小白可以使用Slides。
• 运行简单，导出的HTML文件只要设备上有浏览器即可运行。
• 功能强大，灵活。由于基本Web的特性，用HTML+CSS+JS，几乎可以实现一切想要的效果。内联PPT，解析Markdown等功能也是很强大。

 

• 交互性强，观者可以通过自己的设备与演讲者进行实时交互。例如与现场用户进行交互（用户在手机上进行投票，页面上实时显示投票数）。
• 逼格够高 orz

要说reveal.js缺点的话，目前直观看来，应该是图表的制作，可能还是PowerPoint来的直观迅速，虽说可以添加外部的CSS样式的图表...
不会CSS的话，也不用担心，用PowerPoint图表制作完成后，图片直接导入到slides就行了，或者用Numebers等其他一些图表制作的软件（图表本身就是个麻烦活..）。