網路實用工具

第六篇
使用免費 Kompozer 製作網頁表單

適合程度: 初學者 一般程度 進階者 以上均宜

壹、報導前言:(好東西就要與好網友分享)
KompoZer 是一套免費的網頁編輯軟體,它的前身是 NVU(已停止更新),同樣是以 Mozilla 為核心的網頁編輯器。
Kompozer 是一套開放源碼(Open Source)、跨平台(Cross Platform)、免費的軟體,任何人都可以自由下載使用。
這是一套所見即所得(What You Is What You Get) 軟體,很適合初學者及不是很懂 HTML 語法者使用,值得推薦。
如果你不想一直被付費的 Dreamweaver 網頁編輯軟體所綁架,或想換個網頁編輯軟體,Kompozer 是你最佳的選擇。
Kompozer 已有繁體中文版,安裝的方法承襲了 Mozilla 一貫風格,如果只是想做簡單的網頁,它是個很棒的工具。
KompoZer 軟體本身持續發展到可以擴充套件與佈景主題等非常實用的功能,在開放原始碼驅動下,未來必成主流。
根據官方說法,你可以輕鬆的編輯網頁而不需要真正了解 HTML 或是 CSS 等語法;話說如此,我仍建議你學會 HTML。
搜索網路上中文 KompoZer 教學發現,鮮少針對表單製作教學,故本報導特別就一個表單實際範例製作詳細介紹給你。
歸咎原因在於表單製作教學,必需搭配任何一種網頁程式語言,如果想用 Mailto 語法取代,是無法測試出實際效果。
很抱歉!基於使用者付費精神,以下詳細圖解部份,限付費會員;一般訪客或訂閱電子報會員,仍可使用純文字瀏覽。
聲明:本軟體為 Powered By Mozilla 公司所有,屬於免費共享軟件,並不包括購買的費用內,特此聲明。

貳、軟體簡介:
軟體名稱:KompoZer 網頁編輯軟體。
軟體類型:網頁編輯器。
特殊功能:內含 CSS 編輯器及 FTP 發布功,支援擴充套件與佈景主題機制,提供個人化所見即所得編輯介面。
軟體性質:開放源代碼的自由軟體。
最新版本:Latest stable version: 0.7.10 (2007-08-30)、Latest development version: 0.8b3 (2010-02-28)。
作業系統:Windows、Mac OS X、GNU / Linux。
官方網站:http://kompozer.net/ (英文)。
檔案格式:安裝和免安裝(可攜式)版本。
語言介面:繁體中文多國語言。
下載語言:選 zh-TW Chinese Go
檔案下載︰選正體中文 (繁體) + 作業系統 Go
開發者社群︰http://kompozer.sourceforge.net/dev/ (英文)。
補充說明:本教材內已搜錄 kompozer-0.8b3.zh-TW.win32.zip 免安裝版軟體,凡購買教材或線上教學會員不必另外下載。
存放於本篇目錄內 maillist4/tools/06/kompozer-0.8b3.zh-TW.win32.zip

軟體特色 Go

參、視窗介紹:
是 KompoZer 網頁編輯器的操作介面,中間主要區域為網頁內容編輯區,可以在這邊編寫網頁內容、調整網頁版面配置。
左邊的側邊欄(按 F9 顯示、隱藏)提供網站管理器、FTP 主控台、DOM 查看器...等快速功能區,方便快速編輯、整理網站內容。
編輯區域的下方提供了[設計]、[分離]與[原始碼]三種不同編輯模式,方便我們隨時查看 HTML 原始碼、修改網頁內容等細節。

更多視窗介紹(圖文介紹): Go
更多視窗介紹(影音教學,限付費會員): Go

肆、準備工作:
將想要製作的表單欄位文字等內容,先用筆在紙上簡單描繪出想要的樣子,這樣才方便後面要施做的表格與表單工作。

更多視窗介紹(文字): Go
更多視窗介紹(圖解,限付費會員): Go

伍、設定表單:(本報導重點)
表單設定之前請務必先學習上一項(準備工作)內的取得網頁程式碼要領,以利完成聯絡我們表單後可以順利測試。
表單製作 HTML 語法,請參考網頁研習室 - HTML 教學第三篇 HTML 教學 - 09.網頁表單 Go

更多設定表單介紹(文字): Go
更多設定表單介紹(圖解,限付費會員): Go

陸、製作表格:
為了讓表單文字與欄位看起來整齊與好看些,建議為聯絡我們表單先製作一個表格。
表格製作 HTML 語法,請參考網頁研習室 - HTML 教學第三篇 HTML 教學 - 07.表格運用 Go

更多製作表格介紹(文字): Go
更多製作表格介紹(圖解,限付費會員): Go

柒、製作表單:(本報導重點)
在製作表單之前請務必先學習上一項(準備工作)環境內的取得網頁程式碼,以利完成聯絡我們表單後可以順利測試。
表單製作 HTML 語法,請參考網頁研習室 - HTML 教學第三篇 HTML 教學 - 09.網頁表單 Go

更多製作表單介紹(文字): Go
更多製作表單介紹(圖解,限付費會員): Go

捌、製作技巧:(本報導重點)
將想要製作的表單欄位文字等內容,先用筆在紙上簡單描繪出想要的樣子,這樣才方便後面要施做的表格與表單工作。
使用 kompozer 網頁編輯器有個缺點:安排或調整表格等距比較困難,最後還是要借用 HTML 語法來做適當的修改與調整。
最好的網頁編輯器都無法滿足你的需求,如果你你學會製做好網站,我還是十萬分的強烈希望你找出時間學會 HTML 語法。
如果你不會寫程式的話,請務必先學習上面所述(設定環境)內的取得網頁程式碼,以利完成聯絡我們表單後可以順利測試。
如果操作上做錯了,隨時都可以按一下工具列上復原按鈕,也請養成製作完成到某個階段時,按一下工具列上的存檔習慣。
建議你隨時按下最底部的原始碼標籤,經常藉此查看剛剛完成的 HTML 標籤與屬性,這樣也可趁此加強與學習 HTML 語法。
你可以進一步學習使用 JavaScript 程式來偵測各欄位是否填寫確實?大部份的表單都需要這個功能,很不錯的學習機會。
如果你儲存後打開原始碼發現裡面的中文產生亂碼?
請在功能表列:檔案選儲存並變更字元編碼選正體中文(Big5)按確定選原設檔名即可。
編輯網頁到一半時,可在任何時候按一下鍵盤上的「F5」在預設的瀏覽器中快速預覽目前編輯中的網頁內容。

玖、如何取得:

拾、結論與建議: