用網頁做簡報

簡介

參觀一下網頁式簡報 s5 (點 "introductory slide show") 注意: 將滑鼠移到畫面下方, 會出現選單讓你直接跳到某一頁。
參觀一下改良版 presntacular (點 "slide show demo"), 及一些例子: Microformats, ...

基本 s5

從 s5 首頁下載最新的穩定版 (例如寫講義的當時是 s5-11.zip ; 不要抓到研發版 development release), 並且用 unzip -v ~/s5-11.zip | less 看一下裡面有那些東西。
如果直接解開來, 所有檔案會放在家目錄, 太亂。建一個空目錄, 解在裡面: mkdir ~/s5 ; cd ~/s5 ; unzip ~/s5-11.zip
其實真正需要用到的, 只有 s5-blank.zip 裡面的東西。 unzip -v s5-blank.zip | less 看一下裡面有那些東西。這次它底下已經分成兩個子目錄, 而且其中的 __MACOSX 我們用不到, 所以我們就不另外在 ~/public_html 底下建立目錄了: 直接到那裡去解壓縮, 並且改一下名字: cd ~/public_html/ ; unzip ~/s5/s5-blank.zip ; mv s5-blank s5 ; rm -rf __MACOSX
進入 s5 子目錄。然後複製一份: cp s5-blank.html hw3.html 並用瀏覽器看檢查一下是否成功放入你的帳號。應該要可以自己猜得出來 ~/public_html/s5/hw3.html 這個檔案的網址是什麼; 或請老師給網址。
另外開一個視窗, 進 vim hw3.html 編輯, 把投影片的標題, 講者, ... 等等資訊改一下, 存檔 (但不要跳出 vim) 並在瀏覽器裡面重新整理, 確認生效。
複製幾張空白投影片: 把遊標移到第二個 (也是最後一個) <div class="slide"> 那一列, 按 shift-v 進入 visual line mode, 再將遊標移到下面的空白列, 按 y 複製。然後按幾次 P (大寫!) 貼在遊標之前。
開始隨便打一點東西吧。
嚴格來說, 應該要在 <title> 那句之下加上: <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 表示文件是正體中文, 以 big5 編碼。

Presentacular

其實 Presentacular 可以獨立使用, 不必先安裝 s5; 不過這裡為了讓大家更清楚究竟那些檔案很重要, 所以採取稍微麻煩的步驟。
下載 presentacular-example.zip
用 unzip -v ~/presentacular-example.zip | less 看一下裡面有那些東西。它自己就已經有一個最上層目錄 "example", 所以我們不必另外再建目錄。
在家目錄底下將它解壓縮: cd ~ ; unzip ~/presentacular-example.zip
進去 example 子目錄看一下。更改一個檔名: mv index.html presentacular.html
特別注意到, 這裡面的 ui/default 子目錄, 與 s5 的重複; 但其實內容又不完全一樣。所以把它搬過去相同的位置, 但更改名稱: mv ui/default ~/public_html/s5/ui/pt
清理一下垃圾。刪除 ui 子目錄: rmdir ui 咦, 它怎麼說不是空的? 再仔細看: ls -a ui 原來有隱藏檔。暴力遞迴刪除: rm -rf ui
把所有東西搬到網頁目錄的 s5 底下, 並且移到那邊工作: mv * ~/public_html/s5/ ; cd ~/public_html/s5/
正在 vim 編輯檔案的視窗, 請改編輯 presentacular.html : 按 :e preTAB 可能還要再手動將檔名敲完。
找到  從這裡開始, 進入 visual line mode, 接下來這十列左右 (不要到 </head>) 全部標示起來, 用 y 鍵複製。這些指令的功用是把 presentacular 的特效檔叫進來。任何想用 presentacular 的網頁, 都要有這些指令。
按 ctrl-shift-6 切換回剛才的 hw3.html, 把遊標移到 </head> 按 P (大寫!) 貼上
現在隨便挑一頁, 把 <div class="slide"> 改成 <div class="slide appear"> 再挑另一頁的 <ul> 改成 <ul class="incremental">, 最後將某個 <li> 改成 <li class="shake">
用瀏覽器看一下 ~/public_html/s5/presentacular.html (自己想一下網址...) 發現怪怪的 ... (待續)

特效摘要:

適用於整頁的效果: appear, grow, blinddown
與上述各項相反的 "消失" 效果: fade, shrink, fold
適用於單項的效果: incremental, shake, pulsate
其他: puff

結語

其實 s5 及 presentacular 並不需要 Linux 作業系統, 也不需要網頁伺服器 apache。請自行在 Windows 底下下載 presentacular, 解壓縮後, 直接用瀏覽器開啟 index.html。然後用記事本 (notepad) 打開 index.html 修改, 並重新整理網頁。

用網頁做簡報的缺點是花俏度比較低; 優點則是:

不依賴任何作業系統
除了瀏覽器與文字檔案編輯器之外, 不依賴任何應用軟體
視障者或較舊的瀏覽器還是可以看得見靜態的圖文
相較於真正的簡報系統, 檔案小很多; 如果許多份簡報放在一起, 省更多
符合組合的原則, 多學一點點 html, 可以讓你在任何用到 html 的場合多佔一點便宜
特別是如果未來的資訊技術真的朝 Microformats 發展, 略通 html (不必精通; 我自己也不精通) 將是很基本, 具有長遠投資價值的技能。

其他參考資料:

勤益技術學院電算中心朱孝國: 網頁式簡報

本頁最新版網址: http://people.ofset.org/~ckhung//b/clr/slide.php; 您所看到的版本: May 18 2006 13:59:24.
作者: 朝陽科技大學資訊管理系洪朝貴
寶貝你我的地球, 請減少列印, 多用背面, 丟棄時做垃圾分類。
本文件以 Creative Commons Attribution-ShareAlike License 或以 Free Document License 方式公開授權大眾自由複製/修改/散佈。