Part 2：Reveal.js 簡報框架

打開你的第一個 HTML 簡報

Reveal.js 鍵盤操作總覽模式講者備註

曾慶良(阿亮老師) | AI 協作簡報實戰工作坊
實作 3 | Time 3

Time 3

實作 3：打開你的第一個 HTML 簡報 Part 1/6

認識 Reveal.js

把 HTML 變成可切換的簡報框架

Reveal.js 的優點：
- 免費開源
- 用瀏覽器就能看，不用安裝軟體
- 可放到網路上分享
- 支援鍵盤操作、動畫效果
- 講者備註、總覽模式等專業功能

亮師 15：Reveal.js 簡報畫面

Time 3

體驗 Reveal.js 官方範例 Part 2/6

操作步驟

1打開 Chrome 瀏覽器

2輸入：revealjs.com/demo/

3用方向鍵操作簡報

→	下一頁
←	上一頁
↓	進入子頁面
↑	離開子頁面

亮師 16：按方向鍵切換頁面

Time 3

HTML 簡報的特殊功能 Part 3/6

按 Esc

總覽模式

一次看到所有頁面，像攤開的卡片

適合快速找到特定頁面

按 F

全螢幕模式

簡報佔滿整個螢幕

正式簡報時更專業

按 S

講者備註視窗

顯示備註、下一頁預覽、計時器

像專業演講者一樣！

亮師 17：按 Esc 進入總覽模式

Time 3

鍵盤快捷鍵完整整理 Part 4/6

按鍵	功能	使用時機
→	下一頁	正常播放簡報
←	上一頁	回到前一頁
↓ / ↑	子頁面切換	有垂直頁面時
Esc	總覽模式	快速找到特定頁面
F	全螢幕	正式簡報
S	講者備註	雙螢幕簡報
Home	跳到第一頁	從頭開始
End	跳到最後一頁	跳到結尾
B / .	黑屏	暫停講解時

Time 3

Reveal.js 簡報的 HTML 結構 Part 5/6

基本結構

<div class="reveal">
  <div class="slides">

    <section>第一頁</section>
    <section>第二頁</section>
    <section>第三頁</section>

  </div>
</div>

記住：每個 <section> = 簡報的一頁

結構說明

class="reveal" - 簡報的最外層容器
class="slides" - 包住所有頁面
<section> - 每一頁簡報

這就是我們實作 1 學的 Section 概念！

巢狀 Section：Section 裡面再放 Section 會產生垂直（子）頁面

Time 3

實作 3 完成確認 Part 6/6

體驗官方範例

打開 revealjs.com/demo/ 實際操作過

學會鍵盤操作

方向鍵、Esc、F、S 等快捷鍵

理解 HTML 結構

reveal → slides → section 的層次

打開本地檔案

成功用瀏覽器打開 index.html

完成！你已經會操作 HTML 簡報了！接下來要設計你自己的版面。

Part 2 完成！

你已經會操作 Reveal.js 簡報了

Reveal.js

HTML 簡報框架

快捷鍵

Esc, F, S

HTML 結構

reveal > slides > section

下一章：Part 3 - 手繪設計與 AI 生成 →