推薦理由

製作 HTML Help Workshop 電子書

網頁研習室 第三階段 電子報 李文能編輯
壹、推薦理由：(好東西就要與好網友分享)
01. | 很多軟體在選單列的最右邊都有一個 Help 選項，您想學習自己也可以製作嗎？
02. | HTML Help Workshop 電子書因為跨平台，不需額外軟體，所以會比Word 或 PDF 文件更簡潔方便。
03. | Microsoft HTML Help Workshop 是由微軟公司出版的編程配套軟體，個人使用完全免費。
04. | 容量小(相當於網頁的容量)攜帶方便，完全的網頁格式，閱讀容易，是電腦上很棒的協助或說明工具。
05. | 所有檔案集中成為一個，外觀及操作都很清楚，不用進行編譯就可直接使用，有助於電腦課程教育及學習。
06. | 不需編寫程式語言，只要你會製作 HTML 文件，加上這篇報導，您也可以完成一個簡單的說明檔電子書。
07. | HTML Help Workshop 的 Help 選項，有一個 HTML Tag Reference 值得做為製作網頁的索引喔。
08. | 本軟體還提供一個 HTML Help Image Editor 圖檔編輯器，內含畫面擷取工具等等。
09. | 此軟體雖然沒有中文化版本(註1)但操作步驟不會太難，簡易版很容易學會的。
10. | 這個軟體不大，網頁可做到的效果它都可以做到，適合 windows98(註2) 以後系統使用。
註1：中國大陸有一家國華軟件工作室，他們製作過類似的繁體中文版，但必須購買才能完整使用。 註2：本軟體作業系統最底要求為 Win98 以後版本，操作環境必須裝設 IE3.0 Browser 以上版本，才能完整使用。


軟體簡介

製作 HTML Help Workshop 電子書

貳、軟體簡介：
軟體用途： | 可用來製作軟體說明書、產品介紹、學習教材、電子圖書、報刊電子版本、個人資料的整理等等。
軟體類別： | 電子書協助工具。
軟體檔名： | htmlhelp.exe。
軟體性質： | 免費軟體。
語言介面： | 英文。
作業系統： | Windows(含XP)。
軟體版本： | 最新 1.32 (4.74.8702.0)。
原創作者： | 微軟 Microsoft Corporation。
使用限制： | 非商業使用。
檔案大小： | 3.34 MB。
軟體網址： | http://www.microsoft.com/downloads/
軟體簡介： | 軟體簡介：HTML Help Workshop (或簡稱已編譯的 chm 文件)工具是微軟 1998 年推出的基於 HTML 文件特性的幫助文件系統，以替代早先的 WinHelp 幫助系統，在 Windows98 中把 chm 類型文件稱作[已編譯的HTML幫助文件]。 接受 Internet Explorer 支持的 JavaScript、VBScript、ActiveX、Java Applet、Flash、html 圖像文件(GIF、JPEG、PNG)、音頻視頻文件(AU、MIDI、WAV、AVI)等等，chm 同樣支持，並可以通過 URL 地址網際網路聯繫在一起。 如果使用者仍在使用 Windows95 系統，只要外加一個小程式(chm 文件閱讀升級包)就可以了。


軟體資訊

製作 HTML Help Workshop 電子書

參、軟體資訊：
 | 本軟體雖然是英文畫面，但完成後的已編譯的 chm 文件，標題、選項、快速導攬列..等，可視您電腦安裝系統版本，自動顯示顯示該國語系選單喔。
 | HTML Help 能提供幫助網際創作者於 HTML 製作一個獨立瀏覽器、跨平臺的補助解決方案，如一般視窗的補助功能。
 | HTML Help Workshop 是一個完整的編寫 HTML 補助檔的作業系統，包括提供 HTML Help ActiveX 控制項使瀏覽者能於網際獲得補助的系統。
 | 這個控制項支援目錄頁籤、目錄表、分割視窗、捷徑、相關主題、WinHelp 呼叫和版本說明主題等。
 | 另也包含了類似 Java applet 功能的 ActiveX 控制項。
 | 更新版有新增許多新的功能、更新文件、安裝分配的 HTML Help Installation 和更新的封裝(Hhupd.exe)。


HTML Help Workshop 畫面介紹

製作 HTML Help Workshop 電子書

肆、HTML Help Workshop 畫面介紹：
一、 | 製作完成後已編譯 chm 文件的畫面：(圖1) 標準 1.32 版本已編譯 chm 文件的操作界面視窗，可為上、左、右三個部份。 上面是功能按鈕區，包含一些常用的瀏覽器按鈕，如：隱藏/顯示頁籤(註1)、下一頁、列印、選項(註2)..等。 右邊是樹狀選單視窗，有選單目錄及清單前的小圖示。 右邊視窗上面還有一個快速導攬列，如：索引、搜索和標籤..等。 左邊是顯示主視窗，這些內容完全都是由 HTML 文件組合而成。 以上這些按鈕，在製作 chm 文件過程中，可以由您自己決定(安排)是否顯示。 (圖1) 註1：按下隱藏/顯示頁籤，就可以把左邊的樹狀選單視窗關閉或打開，其他按鈕與瀏覽器的功能一樣。 註2：選項就是一般的功能表列，包含一些常用的控制命令。
二、 | HTML Help WorkShop 操作畫面：(圖2) 主操作畫面很簡單，共分為上下四列，分別介紹如下： 跟一般軟體一樣，第一列為標題列，顯示 HTML Help Workshop 文字畫面。 第二列為功能表列，分別為文件(File)、查看(View)、測試(Test)、工具(Tools)、幫助(Help)。 第三列為一般工具列，分別為新建(New)、打開(Open)、編譯HTML文件(Compiled HTML file)、查看被編譯的文件(View Compiled file)、在線幫助(Display online information)。 第四列為工作區，也就是讓您編輯 HTML Help Workshop 的地方。 (圖2) 備註：為介紹方便，下面製作 chm 方法會將 HTML Help WorkShop 簡稱為 HHW 。
三、 | 幾個重要文件與說明：
01. | 項目文件(Project)，副檔名為 *.hhp，圖示為
包含建立 chm 文件所需的 HTML 文件信息(Project)、目錄表文件信息(Contents)、索引文件信息(Index)、視窗屬性、搜索、書籤定義等內容(一個 chm 文件至少要對應一個項目文件)。
02. | 目錄表文件(Contents)，副檔名為 *.hhc，圖示為
包含目錄表中每個選項標題與 HTML 文件的關聯，類似一本書的目錄(本文件不是必需的，如果建立 chm 文件沒有(不需要)導覽視窗，就可以不用建立)。
03. | 索引文件(Index)，副檔名為 *.hhk，圖示為
利用已經排序的字母、單詞、詞組來幫助讀者，快速找到所需資料位置(這與目錄文件中的標題是不同的，一個關鍵詞可以對應多個 HTML 文件)。
04. | 電子書(HTML Help Workshop)執行檔，副檔名為 *.chm，圖示為
完成製作電子書後產生的可攜式文件，所有目錄內 HTML 等文件均已被編譯並壓縮成此單一檔案。
05. | 電子書製作過程記錄檔(Log Text)，副檔名為 *.log，圖示為
這是製作電子書過程的詳細記錄資料，您必需勾選是否要產生該文件，對完成後的電子書可有可無。
四、 | 幾個重要文件(觀念)說明：
01. | 索引：在 chm 中也可以使用索引，索引文件中就會包含每個關鍵詞(keyword)與 HTML 文件的對應關係(如果你的 chm 文件的資料不是太複雜，索引文件不是必需的)。
02. | 搜索：要在 chm 文件中能使用全文搜索功能，只要在建立 chm 文件時打開一個開關就行了；使用者只要在搜索框中輸入要搜索的內容，chm 文件就會把全部包含該內容的 HTML 文件列出來，並把搜索內容高亮顯示(如果使用搜索功能，chm 文件會變大些喔)。
03. | 書籤：在我們閱讀圖書時，有時會在一些地方放一個書籤，以便下次能快速找到作標記的地方，在 chm 文件中也同樣允許你在感興趣的地方作標記。
04. | 視窗屬性：是指 chm 文件的介面視窗，你可以自由定義視窗位置、大小、按鈕、導覽視窗、顯示模式等。
05. | 目錄、索引、搜索和書籤是 chm 文件左邊的四個導覽選項，任何一個都可以隨意打開或關閉，當四個功能全部關閉時，導航嵌窗將自動消失。
06. | 因為 HHW 對 chm 文件的控制非常靈活，所以你可以製作出功能強大的 chm 文件，也可以製作出非常簡單的 chm 文件。
07. | 在製作中我們要注意 HTML 文件連接的正確，而圖形、視訊、聲音等文件不需另外指定位置，HHW 會根據 HTML 文件中的連接找到它們。
08. | 製作資料路徑下最好不要存放其他的不相關文件，注意整個文件的大小不要太大，以方便傳閱。


安裝與設定

製作 HTML Help Workshop 電子書

伍、安裝與設定：(過程簡單，僅以文字敘述)
軟體安裝：
步驟一： | 請參考軟體網址，去下載 htmlhelp.exe 的最新英文版。
步驟二： | 雙擊 htmlhelp.exe 程式 [image] Yes [image] Do you wish to install HTML Help Workshop 1.3 now [image] 是(Y)。
步驟三： | Choise an installation directory [image] OK [image] The folder 'C:\Program ... 是(Y) [image] 顯示安裝進度並開始安裝。
步驟四： | This computer alerady has a newer version of HTML Help. 確定 [image] HTML Help Workshop install complete=> 確定。
備註：此軟體並不會在桌面自建捷徑，所以請到安裝目錄去自己設一個吧(略)。
軟體設定：如果您是初學者，此項可以先用預設值即可。
步驟： | 雙擊 hhw.exe 捷徑程式 [image] File [image] Preferences [image] 依據您的需要自己修改設定值(略)。


製作簡易 HHW 電子書

製作 HTML Help Workshop 電子書

陸、製作簡易 HHW 電子書：(初學者必學)
請參考製作簡易 HHW 電子書專題報導


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
現在我們就來製作一個帶有目錄、索引、搜索及書籤的 chm 文件。
步驟一 | 與前面簡易一樣，將所有要用到的 HTML 文件及相關圖形、聲音、視訊等文件集中到一個資料夾中，並在 IE 瀏覽器中仔細測試無誤。
步驟二 | 請參考製作簡易 HHW 電子書步驟二 ~ 七完成一個新建項目(New Project)，此處改用一個新名稱，如：hard(略)，結果會產生一個 hard.hhp 檔(圖5之1)。 (圖5之1a) 請按下一步


反編譯 chm 方法

製作 HTML Help Workshop 電子書

捌、反編譯 chm 文件方法：
如果我們需要把一個已經存在的 chm 文件其中的內容取出時，就必要用到反編譯了。
步驟 反編譯的方法很簡單：
首先建立一個新的文件夾，然後啟動 HHW 軟體(hhw.exe)，在功能表列檔案(File)選單中選擇(Decompile)。
然後指定目標文件夾的位置和想要反編譯的 chm 文件 => 按 OK => 反編譯很快就執完成(圖7)。

(圖7)

這時在目標文件夾中就會看到 chm 文件中的所有文件和子文件夾，這樣你可以慢慢研究別人的技巧了。
但如果製作者設定電子書不允許反編譯時，您就無法反編譯喔。


本站會員注意事項

製作 HTML Help Workshop 電子書

玖、本站會員注意事項：
由於免費 PcHome 空間及速度有限，無法提供網友直接下載，請見諒。
為利網友快速取得本報導相關檔案等資料，歡迎採 贊助本站 方式，免費完整獲得 2 片網頁製作相關光碟片。
本報導所有檔案均存放於 CD:/study/maillist3/tools/06/內，簡單說明如下：
電子書協助工具微軟檔案，存放位置與檔名 /chm/htmlhelp.exe(3,426 KB)。
國華軟件工作室，存放位置與檔名 /chm/cdsetup.exe(989 KB)。
電子書協助工具相關參考chm檔案，存放位置與檔名 /chm/HelpDocs.zip(1,344 KB)。
製作簡易 HHW 電子書報導圖文資料，存放位置與檔名 /easy/index.htm & easy.chm。
製作進階 HHW 電子書報導圖文資料，存放位置與檔名 /hard/index.htm & hard.chm。
以上其相關安裝與使用說明，亦存放在同一目錄內。
特別聲明：以上檔案之版權均為原創公司所有，完全免費，均不含於贊助教學(材)費用內。


結論與建議

製作 HTML Help Workshop 電子書

拾、結論與建議：
♁本篇報導花了我 40 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會HTML語法網友永久保存。
♁本電子報第三階段報導資料，將繼續每隔30日發表一次，以嘉惠更多想學會HTML網友，歡迎訂閱！
♁本報導資料取自網頁研習室教學會員檔案資料，內附更多範例介紹，歡迎進一步研習。
♁強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。
♁本報導內容或資料，因限人力，非本報教學會員，不接受任何疑惑解答，敬請見諒。
♁即日起 網頁研習室 網站，開始提供所有電子報、網頁製作教材等資料，免費各別下載服務，歡迎蒞臨指教。
♁凡與網路有關之內容，您想要本報在未來報導那些專題？歡迎提出 出評價與討論。


製作 HTML Help Workshop 電子書

 網頁研習室

此網頁使用框架,但是您的瀏覽器並不支援.


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟三 建立目錄表文件(Contents)
點選 contents 標籤 [image] 選擇(Create a new contents file)建立一個新的目錄文件(圖5之2a)。

(圖5之2a)

並命名為 hard.hhc (圖5之2b)。

(圖5之2b)

備註：命名名稱您可以自訂喔。

按儲存後 [image] 進入目錄表編輯窗口(圖5之2c)

(圖5之2c)

在目錄編輯窗口左側，從上到下排列有 11 個按鈕，前 5 個分別是：
目錄表屬性設置、插入標題、插入頁面、編輯所選標題(頁面屬性)、刪除標題(頁面)。
下面 4 個箭頭用來調整所選標題或頁面的位置及主從關係。
最後兩個分別是顯示 HTML 文件源碼和儲存文件檔案。

請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟四 插入標題(Insert a heading)
按插入標題按鈕 [image] [image] 彈出(Table of Contents Entry)對話框 [image] 在(Entry title)中輸入標題內容，如：壹、推薦理由(圖5之3a)。

(圖5之3a)

再按[Add] [image] 於彈出的(Path or URL)對話框中[HTML Title]內選擇[推薦理由]對應到 HTML 的文件[01.htm](圖5之3b)。

(圖5之3b)

按 OK [image] 確定(圖5之3a) [image] 這一個標題就添加完成了。
備註：在這裏你也可以按下面的(Browse...)指定前面沒有選擇加入的 HTML 文件，或者直接在(File or URL)中輸入 HTML 文件。

如需在標題[壹、推薦理由]下面再添加另一個標題，如：[貳、軟體簡介] [image] 按標題按鈕 [image] [image] 會彈出一個詢問是否在所選標題上面插入標題的對話框 [image] 記得按[否](圖5之3c)。

(圖5之3c)

然後在(Entry title)中輸入標題文字，如：貳、軟體簡介 [image] 再按[Add]指定對應的 HTML文件(圖5之3d)。

(圖5之3d)
完成返回後就又會再加了一個標題(圖5之3e)。

(圖5之3e)

備註：使用同樣方法就可以加入許多標題。

請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟五 插入頁面(Insert a page)或子標題
現在我想要在標題[肆、HTML Help Workshop 畫面介紹]下面，插入一個頁面(或子標題)，如：[一、製作 chm 完成後畫面] [image] 按頁面按鈕 [image] [image] 在(Entry title)內輸入頁面文字，如：一、製作 chm 完成後畫面 [image] 再按[Add]指定對應的 HTML文件(圖5之4a)。

(圖5之4a)

完成返回後，就會在標題下面空一格處增加了一個頁面(圖5之4b)

(圖5之3b)

備註：使用同樣方法就可以加入許多子標題及頁面(圖5之4c)，並可以利用四個箭頭按鈕，來調整標題或頁面的位置及從屬關係( HHW 最多支持 9 個級別深度)。

(圖5之4c)

請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟六 | 修改及改變標題、頁面圖示 選中標題或頁面 [image] 按(Edit selection)按鈕 [image] [image] 在 Ceneral 標籤處，可叫出來重新指定所關聯的 HTML 文件(圖5之5a)。 (圖5之5a) 在 Advanced 標籤處 [image] 最下面的 Image index 位置 [image] 移動上下箭頭即可改變標題或頁面的圖示(圖5之5b)。 (圖5之5b)
步驟七 | 設置目錄屬性 按(Contents properties)按鈕 [image] => 就可以改變目錄表顯示樣式等(使用預設置即可)。 所有標題建立完成後，按左下角的(Save File)按鈕 [image] => 這個目錄表文件就算建立完成(圖5之5c)。 (圖5之5c) 備註：使用同樣方法就可以修改及改變標題、頁面圖示或設置目錄屬性。 請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟八 建立索引文件(Index)
與建立目錄文件的非常類似，只是索引文件中需要指定關鍵詞與 HTML 文件的關聯關係。
點選 Index 標籤 => 選擇(Create a new Index file)建立一個新的目錄文件(圖略) => 並命名為 Index.hhk (圖略) => 按儲存後 => 進入目錄表編輯窗口(圖5之6)。

(圖5之6)

目錄編輯視窗口與目錄文件差不多，從上到下排列也有 11 個按鈕，前 4 個分別是：
目錄表屬性設置、插入關鍵字、編輯所選標題(頁面屬性)、刪除標題(頁面)。
下面 4 個箭頭用來調整所選標題或頁面的位置及主從關係。
最後三個分別是搜引字母排序、顯示 HTML 文件源碼和儲存文件檔案。
備註1：命名名稱請使用預設值 Index.hhk 。
備註2：因與目錄文件非常類似，細節部份就請參考步驟三：建立目錄表文件(Contents)辦理。

請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟九 設置項目文件(Project)
點選 按 Project 選項標籤，進入項目編輯視窗口(圖5之7a)。

(圖5之7a)

在左邊排列有 7 個按鈕，分別是：
項目屬性設置、增加或刪除HTML文件、增加或改變窗口屬性定義、API信息、顯示HTML源碼、保存文件、保存文件並編譯。

請按第一個按鈕項目屬性設置(Change project options)(圖5之7b)。

(圖5之7b)

上面計有一般(General)、檔案(File)、編譯(Compiler)、檔案合併(Merge File)等五項標籤。
這裡就需要注意的部份說明如下：
如果一般(General)標籤的(Title)欄位是空白的，它會依據您在 HTML 文件的標題來顯示，Default file 就是預設首頁檔。
如果想在 chm 文件中具備全文搜索功能，請在(Compiler)標籤中勾選(Compile full-text search information)，其他標籤使用預設值便可(圖5之7c)。

(圖5之7c)

請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
步驟十 設置視窗顯示風格(Windows Types)
按第三個按鈕(Add/Modify windows defunitions)，設置 chm 文件的顯示風格 [image] 在彈出的對話框中給隨便指定一個名字 [image] 按 OK [image] 就進入了(Windows Types)對話框(圖5之8a)。

(圖5之8a)

上面計有一般(General)、按鈕(Buttons)、視窗位置(Position)、檔案(Files)、導覽視窗(Navigation Pane)、樣式(Styles)、擴充樣式(Externed Styles)等七項標籤。
 常用的幾個設定說明如下：
在一般(General)標籤的(Title bar text)中編修你想在 chm 文件標題欄顯示的文字，如：製作進階 HHW 電子書(圖5之8a)。
在(Buttons)標籤選擇想在 chm 中出現的按鈕(請參考製作簡易 HHW 電子書說明)。
在(Position)標籤如果勾選(Save user defined windows position after first use)，系統會保存使用者最後一次退出 chm 文件時窗口的位置、大小等。
在下次再打開時，系統會恢復這些屬性；如果不選，則每次都以你或預設的窗口大小、位置打開 chm 文件。
而 Left 和 Top 就是指定打開 chm 文件時，視窗左上角的位置， Width 和 Heigh 則指定窗口的寬和高(圖5之8b)。

(圖5之8b)

如果在(Buttons)標籤選擇了顯示 Home、Jump 按鈕，請在(Files)標籤輸入對應的 URL 超鏈接地址，如：你的個人主頁地址。
在(Navigation Pane)標籤(圖5之8c)。

(圖5之8c)
如果未將(Windows with navigation pane,topic pane,andbutton)打勾，則 chm 文件視窗會沒有導覽列和按鈕，而(Navigation pane width)是指定導覽視窗的寬度。
如果勾選(Open with navigation pane closed)在打開 chm 文件時，導覽視窗預設為關閉狀態。
如果勾選(Auto sync)，在 chm 文件中的目錄標題與 HTML 文件內容將自動保持同步。
如果勾選(Automatically show/hide navigation pane)，會依 chm 文件當前窗口狀況，顯示或自動隱藏。
而(Default tab)是指定導覽視窗中默認的顯示項(這裏可以是目錄、索引、搜索、書籤)。
如果勾選(Search tab)，在 chm 文件中將具備全文搜索功能，而(Advanced)可以讓 chm 文件具有高級搜索的功能(如使用and,or,not,near)。
如果勾選(Favorites tab)，在 chm 文件上就會具有書籤(我的最愛)功能。
另外兩個選項標籤可以不用管它，使用 HHW 的預設值就行。

請按下一步


製作進階 HHW 電子書

柒、製作進階 HHW 電子書
大工告成 經過上面的辛苦設定工作，我們終於可以編譯成 chm 文件了。
請按工具欄中的編譯按鈕 [image] ，或者直接按項目窗口左下方的(Save all file and Compile)按鈕 [image] ，祇要幾秒鐘時間 chm 文件就被編譯完成。 然後用滑鼠雙擊此 chm 文件就可以看到你的作品了，如果發現問題，還可以返回 HHW 裏進行修改調整(圖6)。

(圖6)