高山流水

但问耕耘，莫问收获

0%

Reveal.js初学者指南（未完）

发表于 更新于 分类于

Reveal.js允许您使用HTML创建美观的交互式幻灯片，并且免费。以下是使用默认主题的典型Reveal.js演示文稿的屏幕截图：

##一、操作键 1. 使用空格键或方向键移动演示文稿 2. iOS风格的滑动功能也适用于任何带有触摸功能的屏幕 3. Escape键：缩略图视图 4. .键：使屏幕变暗

##二、下载和安装 ###（一）获取Reveal.js-master.zip文件并解压缩到工作目录 1. 访问Reveal.js主页：https://github.com/hakimel/reveal.js 2. 寻找Zip图标，并点击下载

![](http://htmlcheats.com/wp-content/uploads/2013/03/gitub-download-as-zip.png)
  1. 解压缩后获得reveal.js master文件夹

###（二）将需要的文件复制到你的工作目录 1. 将reveal.js master文件夹中的css，js，plugin和lib文档复制到用来写HTML文件，并制作演示文稿的目录中。

###（三）将幻灯片创建为单个HTML文件

##三、逐步创建Reveal.js演示文稿 1. 以最小的HTML文件开始

1
2
3
4
5
6
7
8
<!doctype html>
<html lang="en">	
<head>
	<meta charset="utf-8">
</head>
<body>
</body>
</html>

  1. 给Reveal.js base增加references，给

    section增加theme style sheets

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <head>
    	<meta charset="utf-8">
    	<title>Reveal.js 3 Slide Demo</title>
    	<link rel="stylesheet" href="css/reveal.min.css">
    	<link rel="stylesheet" href="css/theme/default.css" id="theme">	
    	<!--Add support for earlier versions of Internet Explorer -->
    	<!--[if lt IE 9]>
    	<script src="lib/js/html5shiv.js"></script>
    	<![endif]-->
    </head>

    <head>部分必须包含两个样式表：reveal.min.css和一个主题，例如default.css

    • 按照惯例，minimized的文件像完整样式表一样被命名为（在本例中为reveal.css），但在“css”之前有“min”，因此为reveal.min.css。

    • default.css文件表示默认的Reveal.js主题，它为您的演示文稿的整体外观提供了一个外观。 如果用“sky.css”代替“default.css”，它会加载Sky主题，如下所示：

    • 可以在目录css-theme中找到所有主题。

  2. 将对Internet Explorer 9的支持添加到

    部分