html-slides是用來建立直接在 Web 瀏覽器中執行的簡報投影片的範本。若要查看此類投影片的實際效果，請查看簡報投影片。
演示特點
幻燈片功能
若要從投影片建立簡報，必須在電腦上安裝 Node.js。
此簡報可以使用任何主要的網頁瀏覽器（Firefox、Chrome、Edge、Safari、Opera...）顯示，並且不需要任何額外的軟體。
下載或複製 html-slides 儲存庫，然後開始在template資料夾中建立簡報。您不需要此資料夾之外的任何內容，並且可以重新命名或移動它。
template資料夾包含以下文件和資料夾：
slides包含您的幻燈片及其媒體資源。index.build.html包含幻燈片清單。deploy將您的幻燈片組裝到單一index.html檔案中。index.html是產生的簡報。style包含 CSS 樣式檔 ( style.inc.css ) 和字體。您可以在此處調整預設字體和顏色。skeleton包含 HTML、CSS 和 JavaScript 程式碼，可將您的投影片轉換為簡報。您不需要修改這裡的任何內容。 投影片通常是包含幾行 HTML 程式碼的檔案或 SVG 檔案。對於純視訊或純圖像幻燈片，框架提供了預先定義的 HTML 程式碼。
index.build.html檔案包含簡報的標題和投影片順序：
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >第一行和最後一行導入簡報框架，並且必須保持原樣。每張投影片均採用以下參數：
檔案副檔名決定投影片的類型：
.inc.html是 HTML 投影片（見下文）。.inc.svg是 SVG 幻燈片（見下文）。.mp4 、 .webm或.ogg是純視訊幻燈片。它們會產生幻燈片上顯示的視訊播放器。它們最適合“黑色”風格。.png 、 .jpg或.jpeg是純圖片幻燈片。合適的樣式是“黑色”（將圖像放置在黑色背景上）和“覆蓋”（覆蓋整個幻燈片）。準備的幻燈片尺寸為 1000 x 600 像素。在演示模式下，它們會縮放以適合顯示器的尺寸。
帶有要點的簡單 HTML 幻燈片 ( slides/slide-name.inc.html ) 如下所示：
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >這張投影片在右側（400 像素）顯示影像（img 標籤），並使用左側剩餘的 600 像素作為投影片標題（h1 標籤）和項目符號點（ul 標籤、ol 標籤、li 標籤）。
此範本包含定位文字和圖像以及插入表格的範例。
SVG 格式 ( slides/slide-name.inc.svg ) 適用於具有向量圖形的投影片，例如圖表或原理圖。可以使用 Inkscape 或任何其他能夠儲存或匯出 SVG 檔案的軟體來繪製此類投影片。
SVG 文件（頁）的大小必須為 1000 x 600 像素 ( width="1000" height="600" )。 SVG 程式碼在導入時會進行一些清理。特別是，刪除了 Inkscape 特定資訊和預設 ID（例如rect1098 ）。
若要重建簡報 ( index.html )，請開啟終端機視窗（命令列）並執行
./deploy/run
該腳本不斷尋找更改，並在必要時重建index.html 。若要退出它，請在終端機視窗中按Ctrl-C 。
部署腳本粗略地檢查您的 HTML 程式碼。特別是，如果標籤未正確關閉，它會發出警告。
若要開始示範，請按F11啟用全屏，然後按p切換到演示模式。使用鍵盤上的左/右箭頭鍵（或Page Up / Page Down ）移至上一張/下一張投影片。在行動裝置上，您可以向左/向右滑動。
右上角的選單按鈕（三條紋）可開啟幻燈片索引。點擊任何投影片都會切換到該投影片。
如果您在簡報過程中啟動另一個視窗（或投影片中的 iframe），則選單按鈕會變成紅色，表示箭頭鍵（移至下一張投影片）無法運作。單擊該紅色按鈕將再次聚焦演示文稿，並使箭頭鍵起作用。
許多瀏覽器允許列印幻燈片。每張投影片都適合 A4 橫向頁面。
當您連接投影機作為外部螢幕時，您可以在兩個螢幕上顯示簡報。
為此，請在兩個單獨的瀏覽器視窗（同一瀏覽器）中開啟相同的簡報。將一個視窗放置在主螢幕上，將另一個視窗放置在外部螢幕上（全螢幕模式）。兩個視窗將始終顯示同一張投影片。
請注意，互動式內容可能並不總是同步的。
在筆記型電腦上運行的演示可以透過行動電話遠端控制。這需要網路連接，因為控制訊息是透過伺服器發送的（https://viereck.ch/remote/）。
要進行此設定：
使用video標籤插入影片：
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Web 瀏覽器支援多種影片格式。幾乎所有網頁瀏覽器都支援 MP4（即 MPEG-4/H.264 視訊格式）。最受歡迎的瀏覽器還可以播放 WebM（影片/webm）或 Ogg/Theora（影片/ogg）檔案。
類似地，使用音訊標籤插入音訊檔案。
可以簡單地從幻燈片索引創建帶有全螢幕影片的幻燈片：
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;幻燈片索引可以使用topic和subTopic來建構：
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >主題和副主題僅出現在投影片索引中。它們對幻燈片或簡報流程沒有影響。
名為slides/slide-name.inc.js的 JavaScript 檔案會自動插入各自的投影片中。 JavaScript 允許建立具有模擬、動畫、互動元素等的高級幻燈片。
一個簡單的幻燈片腳本可能如下所示：
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ;載入簡報時將執行該程式碼。 slide是對應投影片<div>元素）的引用。當投影片出現在螢幕上時，將會呼叫onSlideAppears函數。相反，當投影片消失時會呼叫onSlideDisappears 。最好僅在幻燈片可見時運行動畫。請注意，多張投影片可能同時可見。
為了避免變數和函數名稱衝突，投影片的 JavaScript 程式碼被放置在匿名函數中。產生的幻燈片具有以下結構：
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div >幻燈片仍然可以透過window物件相互通訊：
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
...元素 ID 在整個 HTML 頁面中必須是唯一的。因此，投影片應使用獨特的投影片名稱作為前綴（上例中的fancySlide ）。
互動式投影片可以透過遠端控制將其狀態與其他實例同步（見上文）。請注意，這僅適用於少量數據，例如幾個數字、元素 ID 或短文字。
以下範例使用sendState和狀態偵聽器來同步文字輸入的內容：
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
