製作簡易 HHW 電子書

網頁研習室 第三階段 電子報 李文能編輯
陸、製作簡易 HHW 電子書
步驟七 New Project -- Finish [image] 完成(圖4之9) [image] 按下一步製作精靈就會進入項目編輯畫面。

(圖4之9)
備註：下面這頁是 HHW 的主要編輯畫面，當您將滑鼠移到每一個小圖示上面時，它會顯示該按鈕的英文功能說明。

(圖4之10)
請在左邊(Project)標籤按一下第三個按鈕(Add/Modify windows definitions) [image] 圖示 [image] 下一步。


 網頁研習室

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


陸、製作簡易 HHW 電子書(初學者必學)
因為沒有導覽選項功能所以製作方法簡單，網頁之間的互動就全部依靠 HTML 文件中的超鏈接。
步驟一 | 請把所有要用到的 HTML 文件及相關圖形、聲音、視訊等文件集中到一個資料夾中(也可以包含次資料夾)，並在 IE 瀏覽器中仔細測試無誤。 注意：所有檔案之中必需選擇一個起始頁(內定是 index.htm 或 default.htm )，您可以使用子目錄(次資料夾)來放圖檔，程式會自動帶進來的；放在專案上層以上之目錄檔不會被編譯，並請避免使用電腦內絕對路徑或網址。
步驟二 | 然後啟動 HHW [image] 在 File 選單中點選(New) [image] 將會彈出一個新建文件對話框(圖4之1)。 (圖4之1) 備註：您也可以按一般工具列上這個 [image] 圖示，或雙擊桌面捷徑 hhw.exe 程式。


陸、製作簡易 HHW 電子書
步驟三 請先選新建項目(Project) [image] OK (圖4之2)。

(圖4之2)
備註：這裡您還可以選文本文件(Text)、HTML文件(HTML File)、目錄表文件(Table of Contents)和索引文件(Index)。

接著彈出新建項目(New Project)導引製作精靈視窗 [image] 下一步(圖4之3)。

(圖4之3)
備註：這裡提示你可以把之前存在的 WinHelp 項目文件轉換為 HHW 項目文件，因為是新建立所以不需要打勾。


陸、製作簡易 HHW 電子書
步驟四 這頁是要你指定想建立的項目之位置和文件名稱 [image] 請按[Browse](圖4之4a) [image] 選擇 HTML 文件所在目錄 [image] 並自定定義一個項目文件名稱，如：easy [image] 開啟(圖4之4b)。

(圖4之4a)

(圖4之4b)
備註：此時製作精靈會自動添加並產生一個帶有 *.hhp 副檔名的項目文件檔案(圖4之5) [image] 再按下一步。

(圖4之5)


陸、製作簡易 HHW 電子書
步驟五 這頁是要你指定已經存在的文件(說明1) [image] 請在 HTML files (.htm)前面打勾(圖4之6)。

(圖4之6)
說明1：因為我們目前只有 HTML 文件而沒有目錄文件(*.hhc)和索引文件(*.hhk)，所以這兩個暫時不用勾 [image] 再按下一步。


陸、製作簡易 HHW 電子書
步驟六 這頁是要你加入現有 HTML 文件 [image] 先按[Add]按鈕(圖4之7a) [image] 把有關的 HTML 文件全部逐一加入(說明2)(圖4之7b) [image] 開啟 [image] 加入結果(圖4之8)。

(圖4之7a)

(圖4之7b)

(圖4之8)

說明2：您也可以一次全部選取加入 [image] 再按下一步。


陸、製作簡易 HHW 電子書
步驟八 在 Create a new type named 內 [image] 隨便輸入一個名字，如：easy [image] 再按 OK (圖4之11)。

(圖4之11)
備註：按 OK 後，此時精靈就會進入視窗屬性定義對話框(圖4之12)。

(圖4之12)

請按下一步。


陸、製作簡易 HHW 電子書
步驟九 在一般(General)選項標籤中的標題條文字(Title bar text)中 [image] 輸入如：製作簡易 HHW 電子書 [image] 確定(圖4之13a)。

(圖4之13a)
備註：因為我們不需要導覽視窗及功能按鈕部份，所以導覽視窗(Navigation Pane)中先不要打勾。

按確定後就會回到 HHW 的主要編輯畫面，視窗中會多了一列[WINDOWS]訊息(圖4之13b)。
接下來按編譯按鈕(Compiled HTML file) [image] (說明3) [image] 再按下一步。

(圖4之13b)

說明3：您也可以按功能表列選單(File)中的(Compile)進行編譯。


陸、製作簡易 HHW 電子書
步驟十 此時跳出一個 Create a compiled file 對話視窗 [image] 按 Browser 選擇要儲存的位置(說明4) [image] Compile (說明5) (圖4之14)。

(圖4之14)
說明4：Create a compiled file 裡有兩個 Seave all ... 及 Automaically ... 選項，可自己視需要是否打勾。
說明5：如果打勾，按下 Compile 後，製作精靈會再問您 Log1.log(說明6) 檔要存放的位置，系統會多產生一個 Log1.log 檔。
說明6：Log1.log 是製作過程的記錄檔，只是提供您參考而已，對 chm 文件沒有任何作用 [image] 請再按下一步。


陸、製作簡易 HHW 電子書
完成 | 這時候 HHW 軟體開始編譯，完成後又會回到 HHW 主畫面。 你也可以到檔案總管的剛剛儲存目錄，找尋您新產生的 easy.chm 及 Log1.log 兩個文件。 雙擊 easy.chm 程式 [image] 此時 chm 文件已經包含了所有的 HTML 文件了(圖4之15)。 (圖4之15) 備註：您也可以按一般工具列上這個 [image] 圖示 [image] View [image] 瀏覽已完成的 chm 文件。 注意：如果雙擊 easy.chm 發現起始頁次不是內定( index.htm 或 default.htm )值，您可叫出 easy.hhp 來修改(如下步驟)。
步驟 | 點選檔案總管 easy.hhp 點一下 index.htm 檔 [image] 按步驟八的第三個按鈕 [image] [image] 在 Files 標籤內 [image] 將 Default 改為 index.htm 檔 [image] 確定(圖4之16)。 (圖4之16)
結論 | 這就是最簡單且沒有功能按鈕的 chm 文件顯示效果(圖4之15)，夠簡單吧？ 接下來您可以再加些功能按鈕到 chm 文件上，這樣看起來會更專業及好用些 [image] 請繼續看下去喔。


陸、製作簡易 HHW 電子書(增加功能按鈕到 chm 文件上)
步驟一 雙擊檔案總管內的 easy.hhp 程式 [image] 按步驟八的第三個按鈕 [image] (說明7) [image] 點選一般(General)選項標籤 [image] 按鈕(Button)選項標籤 [image] 勾取您想要增加的按鈕(圖4之17)。

(圖4之17)
說明7：與前面步驟八、九畫面(順序)相同，不同的是這次您要增加 Button 標籤設定 [image] 請按下一步。


陸、製作簡易 HHW 電子書(增加功能按鈕到 chm 文件上)
步驟二 按導覽視窗(Navigation Pane)標籤 [image] 將它打勾(與之前不一樣喔)，其他選項中我們先使用默認值(圖4之18)。

(圖4之18)

設定好後 [image] 確定 [image] 請按下一步。


陸、製作簡易 HHW 電子書(增加功能按鈕到 chm 文件上)
步驟三 | 按編譯按鈕(同前步驟十，略) [image] 系統也會產生(或覆蓋之前) easy.chm 及 Log1.log 兩個檔 [image] 請按下一步。
步驟四 | 請再雙擊檔案總管內的 easy.chm 程式 [image] 仔細看看最上面是不是已多出了一排，有圖示的一般工具列按鈕呢(圖4之19)？ (圖4之19) 備註1：因為我們沒有製作目錄表文件和索引文件，所以 chm 中的導覽視窗是不會顯示出來的。 備註2：這個簡易製作 chm 方法屬於比較簡單，對於不是很複雜的 HTML 文件，在某些時候或狀況下也是足夠使用。
 | 結論與建議： ♁本篇報導花了我 40 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會HTML語法網友永久保存。 ♁本報導資料取自網頁研習室教學會員檔案資料，內附更多範例介紹，歡迎進一步研習。 ♁本電子報 第三階段 報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。 ♁強烈建議您【學會 HTML 語法】，她真的簡單易學，懂了她您就能駕馭她，將【所見即所得】軟體當做輔助工具吧。 ♁為因應網友要求，本報自即日起全面改為 索取教材資料 方式 ，繼續提供及服務有此需求網友。 ♁本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的兩套光碟片，則是我們的誠意而已。 ♁本報導內容或資料，因限人力、時間，非 索取教材資料包含線上指導 網友，不接受任何疑惑解答，敬請見諒。 ♁本報導 非會員 可免費訂閱及享用我的電子報報導成果，而 會員 則可以進一步取得所有資料與線上指導。 ☆本站所有報導資料，歡迎網友免費加入鏈結，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。