在线PPT: reveal.js介绍

reveal.js是什么

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

优势

和传统的PPT相比,reveal.js 有哪些吸引我的地方呢?主要有:

  • 界面优美:UI风格简介优美,对数学公式、代码、多媒体扩展支持。
  • 运行简单:因为是一个HTML文件,那么只要双击,就能在浏览器中展示。也可以通过url分享。
  • 功能强大:因为是在浏览器中运行的,可以用HTML+CSS+JS,做各种想要的东西:比如与现场的用户进行交互(如用户在手机上进行一些投票,页面上实时显示投票数);并且,reveal.js 有多套默认皮肤,支持 多种PPT切换动画,Fragments,内联PPT( nested slides),代码高亮,解析 Markdown,懒加载图片和视屏,导出为PDF和一系列的 JS API 等特性

安装

简单版

1. 下载: https://github.com/hakimel/reveal.js/releases

2. 解压下载的文件。将 index.html 里的内容替换成自己的内容

3. 打开 index.html 来查看效果

完整版

对于reveal.js 的某些特性如外部Markdown、演讲者注释需要本地Web服务器的支持。接下来的步骤教你建立这样一个服务器。

1. 安装Node.js(9.00 or later)

2. clone reveal.js仓库

$ git clone https://github.com/hakimel/reveal.js.git

3. 进入reveal.js文件夹

$ cd reveal.js

4. 安装依赖

$ npm install

5. 运行presentation和监视源文件的变化

$ npm start

6. 打开 http://localhost:8000/ 查看你的presentation

你可以通过运行 npm start -- --port=8001 换端口.

有前端基础的可以采用编辑源代码的方式,可参考官方文档

在线编辑

需要去slides.com注册账号,我这里使用的免费版(可能有广告,空间小,不能使用某些特性)

利用其在线编辑器就可以开始编辑:

一个有趣的地方是可以向下加Page,也可以向右加Page.

还有两个有用的功能:

1)REMOTE CONTROL:远程控制功能,先向手机发送一条信息,手机打开链接即能控制PC端的PPT

2)PRESENT LIVE:实时展示,当观众通过live链接查看,观众端将会与PC端保持一致

语言描述能力太差,自己去体验吧。

你可以通过url展示,也可以以html格式下下来(由于没有生成assets文件夹,所以image不能离线查看)。

支持一些快捷键:

  • ESC:预览slides
  • Alt + click:局部放大slides
  • B 或.: 锁屏slides
  • S:演讲者模式

Demo

参考链接:https://www.jianshu.com/p/e78cce9d5af0

原文地址:https://www.cnblogs.com/lfri/p/12255630.html

时间: 2024-10-14 17:47:10

在线PPT: reveal.js介绍的相关文章

reveal.js让程序员做ppt也享受快乐

前言 程序员除了会写的一手漂亮的代码,也要求做出风格优雅的PPT,诸如向领导汇报工作.向小组成员反馈项目进展自己的工作等等.就本人而言,做ppt还要去找模板,还需要设计风格,内心是焦灼的.于是乎,我搜到了这样的一款js库,用代码完成ppt,培训期间论文的答辩PPT采用这一方案,得到了领导同事的一致好评.这篇文章简单地讲一下reveal.js的基础知识,我是用了不到两个小时做出了一个ppt,从无到有,个人觉得很简单. 正文 reveal.js是一个专门用来做 HTML 演示文稿的框架.只需要在in

Reveal.js一个用来做WEB演示文稿的框架

reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库.它提供了多种幻灯片过渡效果,是一个非常棒的在线演示库. reveal.js还拥有许多高级特性,完整安装,某些 reveal.js 的功能,像外部的Markdown和演讲注释,需要演示文稿运行在本地的一个web服务器上,因此需要在nodejs环境下运行,安装node.js以及grunt,稍微比较复

使用reveal.js制作酷炫的页面

几天前遇到一个制作3D幻灯片效果的插件,试着用到自己的在线简历页面中,展示效果蛮好的.不过查阅了很多文档,几乎都是英文,于是想着整理一下写一篇博客当总结. 准备工作: 1.首先当然是下载相应reveal的资源,下载链接:https://github.com/hakimel/reveal.js 2.将相应的文件夹(css.is.lib.plugin)引入到自己的工作目录,目录层次如下:(忽略我的imgs文件夹~~) 下面就可以着手写自己的页面啦~ <!doctype html> <html

弹出ifame页面(jquery.reveal.js)

1 <body> 2 <a data-reveal-id="myModalDailyModify" data-animation="fade" title="编辑">编辑</a> 3 <div style="position:fixed"> 4 <div id="myModalDailyModify" class="reveal-modal&q

node.js介绍

转自知乎 作者:厂长链接:https://www.zhihu.com/question/33578075/answer/56951771来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 国外有一篇非常好的Node.js 介绍文章,从原理入手讲解,在这里给大家翻译一下(本人非翻译出身,一些地方结合了点个人理解,有错误欢迎指出). 原文地址 Node.js is the New Black 译文如下:如果你去年注意过技术方面的新闻,我敢说你至少看到node.js不下一两

PDF在线编辑的方法介绍

PDF文件中的内容可以进行在线编辑, PDF文件是可以进行文字的在线编辑的,PDF怎么在线编辑?在线编辑的方法介绍,那么PDF文件是怎么在线编辑的呢?下面就简单给大家介绍一下.1. PDF文件在线编辑的方法可以直接进入到迅捷PDF转换器在线网站的首页进行:2. 进入导航栏中然后点击文档处理,再进入到PDF在线编辑中:3. 进入之后需要进行PDF文件的上传,点击上传PDF文件,将之前准备好的PDF文件进行上传:4. 上传好之后就可以进行文件的打开了,选择好PDF文件,点击打开即可:5. 打开之后就

Node.js介绍、优势、用途

一.Node.js介绍Node.js是一个javascript运行环境.它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与PHP.Java.Python..NET.Ruby等后端语言平起平坐. Nodejs是基于V8引擎,V8是Google发布的开源JavaScript引擎,本身就是用于Chrome浏览器的js解释部分,但是Ryan Dahl 这哥们,鬼才般的,把这个V8搬到了服务器上,用于做服务器的软件. 二.node.js的优势1.Nodejs语法完全是js

impress.js 一个创建在线幻灯的js库

真的好奇怪,我居然会写前端技术的博客.没有办法的,最近实习,看的大多是前端.所以今天就用这个来练练手了. Impress.js 是一个非常棒的用来创建在线演示的Javascript库.它基于CSS3转 换和过渡.工作于现代浏览器(Google Chrome.Safari.Firefox 10 或 IE10).并受prezi.com的理念启发的演示工具.如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常 好的选择,用它做的PPT更加直观,效果也非常不错.在线De

Modernizr.js介绍与使用

Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分利用这个feature做一些工作,反之没有实现开发人员也好提供一个fallback.所以,我们要明白的是Modernizr只是帮我们检测feature是否被支持,它并不能够给浏览器添加那些本来不支持的feature. Modernizr在2010和2011年均赢得了 .net Award for Open Source App of the Year ,要知道它的竞争对手都是像Wordpress.D