00.13.01 Adobe Captivate(eLearning)- Webpage
這裡的 Webpage,指的是 傳統的網頁,即:文字、圖檔、Gif 動畫
不要覺得傳統的網頁就很簡單,光是要您擺上一些數學公式,九成九的網頁設計師就開始求爺爺、找奶奶了 !!
1. 文字
所有的網民初上網時,都是以文字為主
譬如 MSN, BBS ( 電子佈告欄, 如 PTT ), Message Board ( 留言板 ), Forum ( 論壇 ), Blog ( 部落格 ), MicroBlog ( 微型部落格, 如 Plurk, Facebook ), ...
文字是 eLearning 的主軸,但只有文字卻很難表情達意,所以最傳統也最不可被替代的 eLearning 就是 圖文教學
文字的輸入有幾種方法:
‧手寫 ( 手寫板 ) 輸入,速度最慢,但適合不熟中文輸入法的電腦初學者
‧就打字囉
‧OCR ( Optical character recognition ) 文字辨視,如 丹青,即把圖檔中的文字轉成文字檔
‧Windows 內建的語音輸入 ( 語音轉文字 )
4 eLearning 的執筆者,除了 打字的速度不能太慢 之外,文采 與 幽默感 也得有一定的程度
2. 影像
圖檔是 eLearning 僅次於文字的重要元素 ( 縱視訊教學已漸為主流,但依舊無法替代圖文 )
4 eLearning 的執筆者,一定得使用 Photoshop,如此,創意才不會受限、才可以編製出適切的 jpg 檔 與 背景透明的 png 檔
3. Gif 動畫
雖然 Flash 已經佔領整個網路動畫的市場,但很多時後還是得使用 Gif 動畫
編製 Gif 動畫的軟體非常多:
‧Photoshop 已經把 Adobe 以前搞 Gif 動畫的 ImageReady 整併進去了
‧Ulead Gif Animator 可以直接載入 Photoshop 的 psd 檔 再來搞 Gif 動畫
4 eLearning 的執筆者,要嘛就是使用 Photoshop 來搞 Gif 動畫,不然就使用 Ulead Gif Animator 來搞 Gif 動畫
4. 向量
當年,Adobe 推出 LiveMotion 與 SVG 來撲殺 Macromedia 的 Flash
結果,Adobe 落敗,於是乎 把 SVG 送給 W3C 當網頁 向量圖 的標準
後來,Adobe 併購了 Macromedia
現在,SVG 重生了,未來的瀏覽器都會支援 SVG 檔
編製向量圖的軟體也非常多:
‧免費的 InkScape
‧免費的 OpenOffice.org Draw
‧Namo WebCanvas
‧ACD Canvas
‧Xara Xtreme
‧CorelDRAW
‧Adobe Illustrator
4 eLearning 的執筆者,若是要編製 SVG 檔:
‧簡易的繪圖,請用 Namo WebCanvas
‧精緻的繪圖,要嘛使用 Illustrator,不然就使用 CorelDRAW
5. 數學公式
高階的數學軟體有:Maple, Matlab, MathCAD, Mathematica,但筆者並不是要介紹這些,筆者要介紹的是 簡易的數理公式排版
( 題外話:WolframAlpha 是 Mathematica 作者 Stephen Wolfram 的最新作品,主參考, 次參考 )
4eLearning 的執筆者 ( 如國中小, 高中, 大學的數理老師 ),若是不會 簡易的數理公式排版,那又如何編寫 eLearning 的教材呢 ?!
▼ OpenOffice.org Math:很工程師思維,有語法欄, 符號小視窗, 公式小視窗,但不是很順手
.
▼ Microsoft Math:前面提到的 Word 2007 Add-in: Microsoft Math,只是精簡版,本例是完整版
.
▼ Namo WebEditor:OpenOffice.org Math 與 MS Word 都是 文書 軟體,其中的方程式編排功能,都是附屬的,但不錯用
而 Namo WebEditor 則是 網頁編製 軟體,其中的方程式編排功能,也是附屬的
( Microsoft Math 比較難定位,因為除了方程式編排之外,Microsoft Math 還有計算與繪圖等功能 )
.
▼ Math Type:最知名的方程式編輯器
.
▼ Framemaker:Word + MS Math + Math Type = 自成一個體系,那 Adobe 呢 ?!
Namo WebEditor 的方程式屬於 入門級, 網頁級,故品質與效果都很有限
Microsoft Word 與 OpenOffice.org Math 的方程式則是 辦公級, 文書級,品質與效果雖然比 Namo WebEditor 好不少,但還是達不到專業級
Adobe 當然沒有在數理排版上缺席,Adobe 一堆都有更新 專業級, 排版級 的軟體, Framemaker
.
▼ LaTex:最正統的數學公式排版,就是 LaTex
6. PDF 檔
1973 年,PARC 的 Xerox Alto ( 這是個人電腦的濫觴:全錄的 PARC 實驗室推出全世界第一台個人電腦,圖形化的 UI, 滑鼠, 雷射印表機, 印表語言, 乙太網路, ... )
.
1975 年,Microsoft 成立
.
1976 年,Apple 成立 ( Microsoft 與 Apple,都曾到 PARC 實驗室去巧取豪奪 Xerox Alto 的各種技術與人員 )
.
1980 年,DOS ( Apple II 大賣後,IBM 才開始留意個人電腦:IBM 製訂規格,CPU 交給 Intel 做,OS 交給 Microsoft 做 ← Bill Gates 趁 IBM 之急,買了一個 Dirty DOS 就騙 IBM 說 Microsoft 擁有自己的 OS )
.
1982 年,Intel 推出 80286
Adobe 成立 ( Adobe 的老闆,就是 PARC 印表語言的技術首腦:帶著印表語言的技術出走、成立了 Adobe )
.
1984 年,Apple 推出 Mac ( 從 PARC 偷走技術與人員後,Apple 推出叫好卻不叫座的超貴個人電腦, 圖形介面的 Lisa:Lisa 的精簡版就是大大成功的 Mac )
Macromedia 成立 ( Lisa / Mac 讓全世界大大地驚豔,於是乎很多軟體公司就紛紛成立,Macromedia 就是當時成立的一家 )
.
1985 年,Microsoft 推出 Windows 1.0 ( Apple Lisa 加快了 Microsoft 推出圖形介面 OS 的時程:第一代的 Windows,可是被全世界嘲笑為世界爛的 OS )
Adobe 推出 PostScript ( Adobe 成立三年了,終於推出了印表語言 PostScript:後來 PostScript 變成了印刷界唯一的標準語言,這讓 Adobe 賺盡了大錢 )
Corel 成立 ( 如同 Lisa / Mac 推出後,一堆軟體公司紛紛成立:Windows 推出後,也開始有軟體公司成立 )
.
1987 年,Adobe 推出 Illustrator ( Adobe 第一個應用程式:基於 PostScript 標準所編寫出來的 Illustrator )
Microsoft 推出 DOS 3.3 ( Bill Gates 很務實:Windows 暫時賺不了錢,但 DOS 可以 )
.
1990 年,Adobe 推出 Photoshop ( 在 Adobe 的眼中,只有 PostScript-based 的 Illustrator 才是嫡系,Photoshop 只是 Adobe 代銷 的產品 ← 直到 Photoshop 4.0,Adobe 才買下 Photoshop 的所有權 )
.
1991 年,Microsoft 推出 DOS 5.0 ( PC 能賺錢,所以 Microsoft 還是一直在推 DOS )
Adobe 推出 Premiere ( 當時有另一套既非 Mac, 也非 PC, 還專注於視訊剪接的電腦系統, Commodore Amiga,所以 Adobe 也就順勢推出了 Premiere )
.
1992 年,Microsoft 推出 Windows 3.1 ( 不想丟掉賺錢的 DOS,又不得不推出圖形化 OS:所以 Microsoft 就推出 based on DOS 的 Windows 3.1 )
WWW released by CERN ( 是的,WWW 很早就問世了 )
.
1993 年,Intel 推出 Pentium ( PC 真正起飛是從 Pentium 開始 )
Adobe 推出 Photoshop for Windows ( Adobe 已把重心從 Mac 轉向 PC )
Adobe 推出 Acrobat ( Acrobat 很早就推出了 )
.
1994 年,Adobe 併 Aldus,這是 Adobe 最重要的併購案 ( 至此,Adobe 深知併購才能壯大之道 !! )
取得了 Pagemaker, After Effects, ...
.
1995 年,Microsoft 推出 Windows 95 ( Microsoft 的 GUI OS 從此開始起飛 )
Adobe 推出 Photoshop 3.0 ( Photoshop 最重要的版本, 3.0:支援 Layer,因此大獲好評 )
.
1996 年,Microsoft 推出 IE 3.0 ( 網路大戰的戰鼓響起了,Microsoft 推出 IE 3.0 來攻打 Netscape:等到 IE 5.0 推出後,NetScape 就徹底被擊垮 )
Macromedia 併購 FutureWave ( Flash 的前身 ) ( 網路的 RIA 號角也悄悄響起 )
.
1997 年,Adobe 推出 Illustrator 7.0 ( Photoshop-like 的 UI ) ( CorelDRAW 節節進逼,Illustrator 直到把介面改成 Photoshop 的樣子,才重獲新生 )
Macromedia 推出 Flash, Dreamweaver ( Macromedia 從 光碟 製作市場轉換到 網頁 製作的市場 )
.
1998 年,Google 成立 ( 山雨欲來風滿樓,Google 悄悄進入網路的市場 )
Quark 惡意併購 Adobe 不成 ( 應用軟體已開始急速發展、輔之網路也開始竄起,Adobe 疲態漸現,Quark 想趁機而入 )
.
1999 年,Adobe 推出 InDesign 來攻打 QuarkXPress ( Adobe 也開始反擊:丟棄老舊的 Pagemaker,推出 Photoshop UI-like 的 InDesign 來報仇 )
Adobe 推出 GoLive 來攻打 Dreamweaver ( Adobe 的戰線越拉越長:左打 Quark、右打 Corel、還得旁擊 Macromedia,最重的是,Adobe 開始正視網路 )
.
2000 年,台灣 921 大地震
Intel 推出 Pentium IV ( P4 ),直到 P4,PC 才開始跑得動多媒體
Adobe 推出 LiveMotion 來攻打 Flash ( Adobe 已徹底地從只專注於 平面出版 的軟體公司轉型到兼顧 網路出版 )
.
2001 年,美國 911
Microsoft 推出 Windows XP, IE 6.0 ( Microsoft 活的最久的 OS:Windows XP‧Microsoft 活的最久的 Browser:IE 6 )
.
2002 年,Adobe 推出第一代的 Adobe CS ( Adobe 開始把平面軟體與網頁軟體 套餐化 )
.
2003 年,Macrmedia 到處瘋狂併購 ( Macromedia 也想藉由併購而壯大,好與 Adobe 對抗 )
Corel 被併購下市 ( 多媒體軟體的市場開始大洗牌,Corel 第一家被洗出市場,直到 2006 年才重新在 Nasdaq 上市 )
Adobe 併購 CoolEdit ( 後更名為 Adobe Audition ) ( Adobe 最缺的就是 Audio 軟體與 3D 軟體 )
.
2004 年,Macromedia 推出 Flex ( Macromedia 開始把 FlashPlayer 擴展到可以與資料庫連結 )
.
2005 年,Microsoft 正視 Flash 帶來的威脅,推出 Expression Studio ( Flash 已經紅到連 Microsoft 都不得不正視的地步了 )
Adobe 併購 Macromedia ( 這是 Adobe 第二重要的併購案:打不贏 Flash, Dreamweaver,就乾脆把 Macromedia 整家公司買下來 )
Adobe 推出 Soundbooth
Adobe 推出 Adobe CS2
.
2006 年,Autodesk 併購 Alias,取得高階的 3D 軟體, Maya
.
2007 年,Adobe 推出 Adobe CS3
Autodesk 併購 3D 塑型軟體, Mudbox
.
2008 年,Adobe 推出 Adobe CS4
Adobe 推出 Acrobat 9.0 ( Acrobat 從跨平台的文件閱讀器 → 在印刷方面 PDF 可以取代 PostScript → 現在已經可以置入 Flash / Flv、3D )
Autodesk 併購 Avid 的高階 3D 軟體, Softimage ( 至此高階的 3D 軟體:3D Studio MAX, Maya, Softimage,都是 Autodesk 的囊中物 )
.
2010 年 4 月,Adobe 推出 Adobe CS5
講了那麼多,主要有三個目的:
第一、Adobe 除了 PostScript, Illustrator, Premiere, Acrobat 之外,其它的軟體都是併購來的 ( InDesign:從併購來的 Pagemaker 所改良的 )
扣掉 Premiere,PostScript, Illustrator, Acrobat 這三者根本就是一體三面
第二、PDF 檔已經可以在印刷方面取代 PostScript ( 即令是 Microsoft Word,只要輸出成 PDF 檔,就可以印刷 )
第三、不管是哪一家軟體公司被併購、不管是哪一家公司的軟體、不管是哪一種媒體格式,只要有 Acrobat,全都可以納入:
‧納入平面的檔案格式 ( 點陣圖、向量圖、Office、HTML、... ),就可以 PDF 檔印刷
‧納入多媒體的檔案格式 ( 平面, Flash, Flv, 3D, ... ),就可以在網頁中觀看 PDF 檔
4 PDF 的教學可以參考 這一篇
7. 網頁
網頁編製的軟體非常多,以下只舉幾個知名的:
‧Dreamweaver 毫無疑問是最強的網頁編製軟體
‧Fireworks 可以同時編製網頁的點陣圖, 向量圖, HTML / CSS
‧Frontpage 是 Microsoft 之前的網頁編製軟體,Frontpage 2003 以後,就不再更新
‧Expression Web 是 Microsoft 用以取代 Frontpage 的網頁編輯器 ( 與 Expression Web 幾乎一模一樣的 Sharepoint Design 2007 現在可以免費下載 )
‧Namo WebEditor 是高麗棒子的網頁編輯器,完全吸取 Frontpage 與 Dreamweaver 的優點,故 Namo WebEditor 大受歡迎
‧NetObjects Fusion 是唯一 100% WYSIWYG ( 所見即所得 ) 的網頁編輯器,也因為是 WYSIWYG,所以其網頁編輯的功能並不突出
8. XHTML
XHTML = HTML + DIV + CSS
但是目前並沒有好用的 DIV 視覺化編輯器,所以得自行 Coding
4 Google 的 Blogger,就是 XHTML 最佳的練習場 !! 在 這一篇 中,筆者會提到一些 Blogger 的基本功能
2010‧0406