演讲是传达有价值的重要信息的好方法。 无论是用于商业,教育还是营销目的,您都必须创建有趣,内容丰富且引人入胜的演示幻灯片 。 它通常是在台式机或智能手机上完成的,但您也可以使用网络技术来创建它。 在这篇文章中,我将向您介绍Reveal.js ,这是一个易于进行漂亮HTML演示的框架。
Reveal.js是创建HTML演示文稿的非常强大的框架,因为它具有许多高级功能。 使用Reveal.js,您可以创建一个演示文稿,该演示文稿支持移动手势,例如pinch和slide 。 如果您不想用代码弄脏您的手,您也可以使用markdown或可视化编辑器(如Slides)来创建演示内容 。 它甚至为您提供了一些漂亮的过渡效果和主题,并提供了许多其他功能来帮助您。
揭秘入门
在这篇文章中,我将指导您完成Reveal.js的基本实现。 让我们从下载此存储库的副本开始。 下载的文件包含以下文件夹:
- CSS :核心风格
- js :javascript依赖项
- 插件 :一些组件开发为Reveal.js扩展
- lib :所有其他第三方资产(JavaScript,CSS,字体)
现在,我们将调用所有需要包含的依赖项。 在head
部分,调用主要样式以及您要使用的主题(给ID为“ theme”)。 可用的主题有: 默认 , 天空 , 米色 , 简单 , 衬线 , 夜晚 , 月亮和日光浴 。 对于此演示,我仅使用默认示例,如下所示:
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
在body
标记结束之前,请包含以下javascript:
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
HTML标记
在本指南中,假设我们将使用一些HTML代码创建三个基本幻灯片。 用于创建演示文稿幻灯片的三个主要元素。 它们是: <div class="reveal">
, <div class="slides">
和<section>
。
在<section>
标记中,您必须指定幻灯片内容。 默认幻灯片是水平移动的,如果要创建垂直幻灯片,请在其中轻松添加另一个<section>
。 这是示例:
<div class="reveal">
<div class="slides">
<section>This is horizontal slide</section>
<section>
<section>And this is vertical slide</section>
</section>
</div>
</div>
在第一张幻灯片中,我们将做介绍。 零碎的视图将在第二个视图中显示,最后是带有引号和内部链接的妙语幻灯片。
对于简介,我将使用h1
格式化标题,并使用h3
格式化子标题,如下所示:
<section>
<h1>Hongkiat Presentation</h1>
<h3>Hi, this is a demo for Reveal.js</h3>
</section>
现在,对于第二张幻灯片,我将使用一些单词作为片段。 要创建片段视图,您需要像创建垂直幻灯片一样将section
加倍。 然后,在content元素中包括带有fragments
ID和一类fragment
的子section
,如下所示:
<section>
<section id="fragments">
<h2>I'm Fragmented</h2>
<p>Hit the next arrow to reveal me!</p>
<p class="fragment">I'm number one</p>
<p class="fragment">And I'm number two</p>
<p class="fragment">Hey don't forget me! I'm third.</p>
</section>
</section>
最后,对于重点,我想使用流行的Eric Cantona报价。 只需用<blockquote>
元素包装单词即可获得漂亮的引用样式。 要在内部链接到其他幻灯片,只需在幻灯片链接图上添加a
标签。 结果如下:
<section>
<h2>The Punchline</h2>
<p>This is one of very popular <a href="http://en.wikipedia.org/wiki/Eric_Cantona" rel="external">Eric Cantona</a> quotes:</p>
<blockquote>
“When the seagulls follow the trawler, it's because they think sardines will be thrown into the sea. Thank you very much.”
</blockquote>
<p>Click <a href="#">here</a> to get back to the first page.</p>
</section>
一切准备就绪后,使演示文稿正常工作的最后一步是添加以下配置:
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
});
</script>
这些是我们基本实现所需的基本配置。 有关配置和其他高级设置(如减价,注释,自动滑动等)的完整列表,请参见此处 。
现在,我们为演示文稿制作了漂亮的幻灯片。 这是简介:
这是我们的碎片视图:
这是最后一张幻灯片:
结论
使用此工具,您可以在网站内创建出色HTML演示文稿。 您可以在此处找到一些启发示例。 与其他印象深刻的演示库(例如专注于其出色过渡动画的Impress.js)相比,我认为Reveal在功能方面仍然更加强大。
翻译自: https://www.hongkiat.com/blog/revealjs-html-presentation-framework/