如何使用网络幻灯片制作HTML演示文稿

在一个世界里 在互联网上展示我们的想法 它已变得越来越必要，并且工具的多样性导致我们创建了惊人的演示文稿，在许多情况下，这些演示文稿最终与某些媒体不兼容，毫无疑问， HTML演示 它们将继续成为该领域的通用替代品。

但是，对于任何人来说，创建漂亮的HTML演示文稿都可能会花费很长时间，并且需要对HTML，CSS以及某些情况下的JavaScript有一些高级的了解并不是什么秘密。 从这些问题中，出现了一种出色的工具，称为 网络幻灯片。

什么是幻灯片？

它以某种方式称为开源的“框架”，由 何塞·路易斯·安特尼斯，这使我们 创建HTML演示文稿 快速轻松地。 该工具具有您制作自己的演示文稿的必备条件，同样，您可以在几分钟内获得其中一个演示文稿演示文稿，并根据自己的喜好对其进行自定义。

我使用此工具制作的HTML演示文稿具有令人印象深刻的美感。 值得注意的是，此工具需要非常基本的HTML和CSS知识，因此它是所有类型用户的理想选择，这些用户只应关注内容而很少准备演示文稿。

如何下载网络幻灯片？

要下载网络幻灯片，只需从您喜欢的目录中执行以下命令：

wget https://github.com/jlantunez/webslides/archive/master.zip

您也可以使用以下命令克隆官方存储库

git clone https://github.com/jlantunez/webslides.git

在项目文件夹中，您将获得必要的js，css和演示，以轻松开始创建自己的HTML演示文稿。

如何使用网络幻灯片？

webslides的最大优点是易于使用，该工具确实使创建具有各种目标的演示文稿变得容易，并且它的演示系列将演示文稿创建过程的速度大大提高了。

下载webslides会得到什么？

下载幻灯片时，我们访问各种文件夹，其中包括演示和图像（设备和徽标）。

• css文件夹将存储我们演示文稿的样式
• 必需的javascript文件将存储在js文件夹中，其中包括基本的webslide.js，这是完成大多数操作的地方。
• 演示的图像和html文件将分别保存在图像和演示文件夹中。

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

使用网络幻灯片创建HTML演示文稿

使用网络幻灯片时，有2个基本优点，我们在下面提到：

• 该代码干净且可扩展。 它还包括使用最受欢迎的术语的直观标记。 无需使用类或过度使用嵌套。
• 每 <section> 在#webslides中，它代表一张幻灯片。 因此分页非常简单。

投影片1  投影片1

同样，我们可以制作垂直幻灯片，添加垂直样式

构成Webside CSS的类

• 版式：.text-landing，.text-data，.text-intro ...
• 背景颜色：.bg-primary，.bg-apple，.bg-blue ...
• 背景图片：.background，.background-center-bottom ...
• 卡：.card-50，.card-40 ...
• 弹性区块：.flexblock.clients，.flexblock.metrics ...

扩展到网络幻灯片

webslides允许我们添加新的样式和功能，例如，我们可以添加以下一些资源：

• Unsplash
• animate.css
• particle.js
• pt

使用webslides制作的HTML演示演示

您可以看到使用webslides制作的一系列HTML演示示例。 信息。 同样，当您下载框架时，您可以访问每个演示的编码。

该工具将使我们能够快速，出色地创建HTML演示文稿，但也将帮助我们专注于内容并获得我们之前从未想象的结果。