如何使用網絡幻燈片製作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
• 動畫.css
• particle.js
• pt

使用webslides製作的HTML演示演示

您可以看到一系列使用網絡幻燈片製作的HTML演示示例 這裡。 以相同的方式，當您下載框架時，您可以訪問每個演示的編碼。

這是一個使我們能夠快速創建具有出色效果的HTML演示文稿的工具，但它也將幫助我們專注於內容並獲得我們之前從未想像的結果。