很多人都想學HTML的製作，但在Linux作業系統下，又不知要用那一種WYSIWYG所視即所得的軟體，才能達到輕鬆製作網站的目的，本文就是告訴有心想學HTML製作的朋友，如何使用及結合現有的自由軟體，輕鬆完成完整網站的製作。
本文利用Netscape Composer作為製作HTML的WYSIWYG操作介面軟體，Bluefish來補足Netscape Composer所久缺的部份，不需要背很多HTML的的Tag，只需知道基本的如Table、Anchor、Image的標籤語法就夠了。
 
• 啟動Composer

要想啟動Composer，可以在Command Line命令列模式下，打入netscape -composer&直接啟動並將它丟入背景執行，或者是用Netscape領航者，最右下的開啟網頁編輯器如圖形所示，來執行Composer。

• Composer快速鍵

要想快速駕御軟體的使用方法，就是學會軟體所設定的快速鍵(或是所謂的熱鍵HotKey)，而Composer所設定的快速鍵並沒有很多，以下表格是一份Composer快速鍵的整理清單。

使用快速鍵的最大好處，是不需要只有使用滑鼠到處移來移去，才能達成所想要作到的功能，利用滑鼠與快速鍵的交互運用，可以快速地增加工作的效率。
• xcin的標點符號

有時在輸入中文時，需要全形的標點符號，使文章更有可讀性，只要Linux系統擁有Xcin的中文輸入環境，就可以輸入所需要的簡易標點符號，至於比較罕見的標點符號，可能需要另行想辦法才能解決。
Xcin提供了輸入標點符號的快速鍵，就是按下Alt-Shift+標點符號對應鍵。

• Composer功能簡介
• Icon工作列功能簡介

新的網頁 開啟舊網頁儲存網頁 上傳檔案/目錄 新瀏覽器開啟檔案 剪下 複製 貼上 列印

尋找文字 插入連結 插入鏈結 插入圖片 插入水平線 插入表格 檢查拼字

表格所列是如上圖紅色方框所示的功能簡表，其中有包含系統功能(如開啟新頁、上傳檔案)，或是網頁編輯功能(如插入超連結、圖片、表格)。

• 格式工作列功能簡介

表格所列是如上圖紅色方框所示的格式工作列功能簡表，其中有包含改變字型格式功能(如粗體、斜體、底線、改變字型顏色)，或是改變段落格式功能(如改變段落或標題格式、改變水平對齊方式)。
• 字型

改變字型的大小是在作網頁處理時，一定會遇到的問題，下圖就指出改變字型的大小所要執行的步驟，先把所要改變的字，反白選取Highlight起來，以圖形所示進行字型的調整o

同樣的步驟也是適用於在改變字型的顏色、粗體、斜體、底線。

• 表格Table

表格在網頁的排版上是非常重要的，在排列圖片、文字的位置時，都需要使用表格，插入表格會出現如的圖形。

表格的屬性

• Table的HTML標籤簡介
• <table><tr><td></td></tr></table>
• 屬性：
• Border
• Cellspacing/Cellpadding
• width/height
• 欄位的合併
• 水平合併Colspan
• 垂直合併Rowspan
• 圖片Image

俗語說「一圖解千文」，圖形的說服力與吸收力，遠勝於文字的描述，所以善用圖形可以增加網站的吸引力。
• Image的HTML標籤簡介
• <img src="圖片來源位置路徑">
• width/height
• alt="圖片說明的文字描述"，如果圖形無法看到，但還有文字的說明可以得知圖片大致是什麼樣的內容。
• 超連結

 
HTML的文件之所以有如此大吸引力，就是在於它有超連結的設計，它可以連結到網際網路的任何一處或是自己文件中的一個位置。
• 相對路徑與絕對路徑
• 相對路徑

相對路徑指的是所要連結的路徑並不是指定或是描述的很完整，只是指出它連結到一個檔案(可能是圖片或目錄)而已。
所使用到的HTML語法是 <a href="相對路徑">連結名稱</a>
• 絕對路徑

絕對路徑指的是所要連結的路徑，可能連結到網際網路的任何一處或一個檔案，指定或是描述的路徑非常完整，通常都有http://或是file://的字眼作為開頭。
所使用到的HTML語法是 <a href="絕對路徑">連結名稱</a>
• 連結名稱

有時連結的只是在文件中的一個名稱，或是書籤，所以用下列方式來指定這般的連結情形。 <a name="連結路徑">連結名稱</a>
• 搭配Gimp

Gimp號稱是Linux下的Photoshop，超強的圖形處理功能，簡易的使用介面，最重要的它是自由軟體，可以讓使用者用起來相當的放心，下圖是Gimp的各類圖形工具(Toolbox)使用畫面。

以及Gimp在處理圖形的畫面。

Gimp在處理圖形時，可以按下滑鼠右鍵，會出現處理圖形所需的選項功能表，處理後可以讓圖形更加具有吸引力。

• Gimp快速鍵

下表列出所要使用Gimp的快速鍵，善用它可以減少工作的時間喔！

Ctrl+n：新檔 Ctrl+o：開啟舊檔 Ctrl+s：儲檔 Ctrl+x：剪下 Ctrl+c：複製 Ctrl+v：貼上 Ctrl+w：關閉檔案 Ctrl-Alt+s：Grab ScreenCtrl+z：Undo

Ctrl+數字： 叫出最近處理過的圖形檔案 Ctrl+k：Clear Ctrl+,：填滿前景 Ctrl+.：填滿背景 Ctrl+A：全選 Shfit+Ctrl+A：不選 Ctrl+Alt+F：壓平圖層

• 搭配Bluefish
• 啟動Bluefish

本文所使用的Bluefish，是bluefish-0.5.i686.rpm在支援中文部份，並不會產生任何問題。在啟動Bluefish時，並不能以root的身份來啟動，必須以普通user的身份來啟動，不然Bluefish會出現一個警告訊息
Error: cannot run as root (for security reasons)
use -s to override
所以必須在Command Line命令列模式下，打入bluefish -s&的命令，並將它丟入背景執行。

• Bluefish功能簡介

以下圖形是在Bluefish下，開啟本文的網頁，進行一些細節的處理，如圖片的大小調整，或是表格的合併，事實上以Bluefish來補足Composer不足之處，所需要的只是HTML基本Tag的認識，其餘的部份，就如同在使用一般性的文書處理程式，相當容易。

• 補足Composer的不足

因為在Composer之中，要想調節圖片的大小，可能不太容易，所以就用Bluefish開啟該文件的HTML檔，並在適當的位置找出圖片的tag，把它修改成自己想要的大小，同樣的情形也是適合表格欄位合併的狀況。
在在Composer之中，有時想要進行欄位的合併，但並不容易，結合Bluefish的使用，可以很輕鬆的達成此目的。

• 實作網站

以下就簡單的介紹一個網站的實作過程，把所有上述介紹的功能，一併用在此節的範例中。
• 旅遊網站
• 假設想要設計一個旅遊網站，所需要的是所要遊玩據點的圖片、交通、食宿費用分析、及一些具吸引力的文字描述，以及聯絡電話，可以按照這個方向進行網站的設計。
• 但是要記住，不需要把所有的資訊都放在一個單獨網頁中，可以分成數個網頁來進行介紹，此時就要牽連到整體網站的規劃。
• 家庭作業
• 蝴蝶網站
• 電玩網站