-*- Outline -*-

* Web Based Presentation

[<h2>outline2html:</h2>]
[<h3>Presentation Using Web Browser</h3>]

- Jedi
- JediLin@Gmail.com
- http://Jedi.org/blog/

* outline2html

** 關於 outline2html

- 作者: [http://gugod.org/|gugod]
- 將 Emacs 的大綱格式轉換成投影片
- 製作投影片的時候需要 Perl ，不過並不需要任何額外的 Perl 模組
- 播放投影片的時候不需要 Perl
- 要在 Windows 上製作投影片，請先[http://www.activestate.com/Products/Download/Download.plex?id=ActivePerl|取得 ActivePerl] 並安裝
- [http://rt.openfoundry.org/Foundry/Project/Download/index.html?Queue=43|下載 outline2html] 並解壓縮到妳要存放大綱檔案及投影片的目錄
- 用任何妳熟悉的純文字編輯器來編輯大綱檔案 ─ 甚至用記事本都可以
- 絕對不要用 Word
- 檔名可以隨便取，副檔名也沒有限制

** 大綱檔案基本架構

- 標題 (*)
- 子標題 (**)
- 要點 (-)
- 其他效果

** 標題與子標題

- 第一層的標題寫成單獨的一行，並在最前面加上一個星號和一個空格 (* )
- 第二層的標題寫成單獨的一行，並在最前面加上兩個星號和一個空格 (** )
- 這些標題與子標題會出現在投影片的導覽列裏
- 妳還可以有更多層標題，就是依序用更多的星號加上一個空格
- 導覽列裏預設祇會出現兩層標題，不過這是可以調整的選項之一

以下為範例：

[<pre>* 標題一<br />* 標題二<br />** 子標題二之一<br />** 子標題二之二<br />* 標題三</pre>]

** 要點

- 每一個要點寫成單獨的一行，並在最前面加上一個減號和一個空格 (- )
- 也可以用其他的符號來代替，像是用點號加上一個空格 (. )
- 但是前後要一致，不要混用
- 不能祇有一個要點
- 可以用空行來區隔兩群要點

以下為範例：

[<pre>- 要點一<br />- 要點二<br />- 要點三<br />- 要點四</pre>]

* outline2html 格式語法

** 文字段落

- 可以在任意的地方用 Enter 換行以利編輯；在投影片上她們仍然會被接回來
- 段落間以空行隔開。注意空行也不能包含空格

以下為範例：

[<pre>這裡是第一段<br />這裡還是第一段<br />這裡仍然是第一段<br /><br />這裡就變成第二段了</pre>]

** 圖片

- 使用 [[]image: picture.png[]] 語法插入圖片
- 妳可以把 picture.png 代換成任何的圖檔檔名
- 也可以使用相對路徑表達出其他目錄裏的圖檔
- 例如 [[]image: ../pic/picture.png[]]

** 鏈結

- [[]link: Jedi , http://Jedi.org/blog/[]] 會做成 [link: Jedi , http://Jedi.org/blog/]
- [[]http://Jedi.org/blog/|Jedi[]] 會做成 [http://Jedi.org/blog/|Jedi]
- Jedi [(]http://Jedi.org/blog/[)] 會做成 Jedi (http://Jedi.org/blog/)

** 內嵌 HTML

- outline2html 會自動處理掉小於符號 (<) 和大於符號 (>) ，所以妳輸入的 HTML 標籤通通都會失效，而直接顯示出來
- <b>粗體字</b> 會顯示成 <b>粗體字</b>
- 要內嵌 HTML 標籤時，需要用一組方括號 ([[] 和 []]) 把他們包起來
- [[]<b>粗體字</b>[]] 會顯示成 [<b>粗體字</b>]

** 例外處理與特殊符號

- 方括號 ([[] 和 []]) 是 outline2html 裏唯一的特殊符號
- 要輸入方括號的時候祇需要用另一組方括號把它包起來就行了
- [[[]]] 會顯示成 [[]]

** 製作投影片

- 要把大綱檔案製作成投影片，得用到我們抓到的 outline2html.pl
- 而妳需要有 Perl 纔能執行這個 outline2html.pl 腳本
- 所以請先確認妳有把他們都給裝好了，並且至少重新開機過一次

首先我們得進入命令列模式

- 如果妳用的是 WindowsXP, Windows2000 的話，「開始 > 執行 > cmd 」然後按確定
- 如果妳用的是 WindowsME, Windows98, Windows95 的話，「開始 > 執行 > command 」然後按確定

假設妳把 (從 outline2html-0.1.tar.gz 解出來的) outline2html.pl 、 style.css 還有剛剛編輯好的大綱檔案 (假設他叫 outline.txt) 都放在 D:\slides\ 這個資料夾裏的話，首先要把工作路徑切換到那個資料夾裏：

[<pre>d:<br />cd \slides\</pre>]

然後下達這個指令來做出投影片

[<pre>perl outline2html -c -p outline.txt</pre>]

這樣就做好了！

** 播放投影片

- 現在在妳的投影片目錄裏，會有一些 HTML 檔案
- 第一章投影片 (通常是封面) 位於 root-0.html 這個檔案裏
- 用任何網頁瀏覽器開啟 root-0.html
- 使用導覽區的鏈結來切換投影片
- 前十張投影片配有快速鍵， Alt-0 會跳到第一張， Alt-1 會跳到第二張，依此類推

* outline2html 奇技淫巧

** 投影片變數

製作投影片時，有一些命令列參數可以選用：

- -c 在導覽區裏，把第二層以及更低層的標題縮起來，祇展開目前這一個標題底下的子標題
- -l N 在導覽區裏要顯示出來的標題層數。 N 是數字，預設值是 2
- -p 多頁模式，也就是把每一個 (第一層) 標題做成一個單獨的 HTML 檔
- -t foo 指定每一頁的頁頭。 foo 可以代換成任何文字
- -f bar 指定每一頁的頁尾。 bar 可以代換成任何文字

注意：如果不使用多頁模式 (-p) 的話，需要指定輸出的 HTML 檔案檔名。例如像這樣：

[<pre>perl outline2html.pl -c outline.txt &gt; speech.html</pre>]

其中 speech.html 就是產生出來的 HTML 檔案

- 除了命令列的參數外，也可以在大綱檔案裏直接設定一些選項
- 這些選項必須寫在大綱檔案的最後一段 (跟前一段至少必須要有一個空白隔開) 
- 這一段的第一行一定要是：

[<pre>Local Variables:</pre>]

- 接下來幾行都是選項
- 這幾行間絕對不能有空行
- 這一段的最後一行一定要是：

[<pre>End:</pre>]

以下列出可以選用的選項：

- document-output-coding-system: 指定輸出網頁檔案的字元編碼
- buffer-file-coding-system: 目前這份大綱檔使用的字元編碼
- document-multipage-mode: 指定是否(T/F)要採用多頁模式
- document-title: 來指定抬頭
- document-footer: 來指定頁尾

例如：

[<pre>Local Variables:<br />document-output-coding-system: utf-8<br />buffer-file-coding-system: big-5<br />document-multipage-mode: t<br />document-title: 第一份簡報<br />document-footer: This page is generated by outline2html<br />End:</pre>]

這樣表示這份文件是以 BIG-5 字元集編輯，但是產生投影片時要自動轉碼成 UTF-8 ；投影片採用多頁模式，每一頁的頁頭都會顯示「第一份簡報」，頁尾則會顯示「This page is generated by outline2html」

** 模組化投影片

- [[]include: foo.txt[]] 會把 foo.txt 的檔案內容抓進來
- 必須寫成單獨一行，也就是那一行除了 [[]include:foo.txt[]] 之外不能有別的內容
- 不能遞迴 include ；也就是說妳 include 的檔案裡，不能再 include 別的檔案
- 也可以包含相對路徑，例如 [[]include: ../foo.txt[]]
- 所以妳可以把一份投影片拆成很多的「模組」，日後如需針對相似主題演說時，祇需揀出合用的部分即可湊出一份投影片
- 平常祇需要按照需要更新這些「模組」，就可以確保任何一份用到此模組的投影片都能做出夠新的版本

** 變更樣式

- 編修或替換掉 style.css
- 妳可以試著用 [http://www.bradsoft.com/topstyle/|TopStyle] 這類 CSS 編輯器來做這件事
- ....在這麼做之前，妳應該會想要先備份一下原來的 style.css

** 還有呢？

- 把 outline2html 產生出來的所有 HTML 檔，連同 style.css 一併上傳到任何網頁伺服器，就可以用了
- 就算網頁伺服器無法執行 CGI 腳本也無所謂，投影片還是能正常放映及使用
- 如果妳有叫用別的圖片或檔案，別忘了也要一併上傳
- 用 zip 或 rar 把這些檔案壓縮起來寄給別人也不錯

* 感謝大家

此投影片由 [link: outline2html.pl , http://www.gugod.org/outline2html/] 產生。

- 此投影片位於 http://Jedi.org/p4/slide/20061017_TOSSUG/root-0.html
- 此投影片源碼位於 http://Jedi.org/p4/slide/20061017_TOSSUG/outline.text (UTF-8)
- 此投影片源碼所使用之模組位於 http://Jedi.org/p4/slide/module/ (UTF-8)
- 此投影片所使用之圖片位於 http://Jedi.org/p4/slide/image/

* <img src="../image/somerights.png" alt="保留部分權力" style="border:0">

本投影片內容可依[http://creativecommons.org/licenses/by-nc-sa/2.5/tw/deed.zh_TW|創用 CC 姓名標示─非商業性─相同方式分享 2.5 台灣版授權條款]，於非商業使用之前提下，任意顯示、複製、散佈及使用，惟需提及原作者；同時源自本投影片之衍生著作亦需遵照[http://creativecommons.org/licenses/by-nc-sa/2.5/tw/deed.zh_TW|此授權條款]。

Local Variables:
document-output-coding-system: utf-8
buffer-file-coding-system: utf-8
document-multipage-mode: t
document-title: Web Based Presentation: outline2html
document-footer: This page is generated by outline2html
End: