免費CSS編輯器整理及使用心得

　　最近在做一些CSS的工作，我不是美工人員，自認沒什麼天分，但基本的CSS還做的來，尤其是要和jQuery有好的配合，那一定少不了CSS。有感於前一篇「開發工具…」，所以最近也認真複習一下基礎的內容，說是簡單，從大學學網頁開始到現在，複習了以後才知道，原來「規範」又修改了許多，從事程式技術這一途只有一句話，「沒有超人的熱情」那你就快快轉行。

　　我使用一些工具來進行修改、撰寫的工作，PSPad、Notepad++，效果不是很理想，最後我Visual Studio都請出來，才發現使用的Visual Studio 2008 SP1的CSS IntelliSense還不是很健全，都已經是哪麼成熟的產品了，還是老話…大問題沒有，小問題一堆，永遠都有出不完Service pack。

　　想想，這是什麼時代了，網路上應該有「免費又好用」的CSS發開工具或CSS Editor，索性一套一套下載回來玩玩，測試看看，最後整理出下面的列表及心得。

個人評價順序一：純CSS編輯器

1. Stylizer Basic
2. TopStyle Lite
3. JustStyle CSS Editor
4. Free CSS Toolbox

　　純CSS編輯器裡，Stylizer Basic最好，強力推薦，頂多再加使用TopStyle Lite應該就可以完成絕大多數CSS的工作，用過就知道。

　　註：純CSS編輯器：就只單純撰寫、設定CSS樣式、檢查CSS。簡單說，就是集中火力在CSS上。

個人評價順序二：網頁開發工具

1. aptana studio

　　這已經比較算網頁開發工具，不是純CSS編輯器，aptana studio使用起來相當順手及簡單。如果你沒有預算買Visual Studio或DreamWeaver之類的開發工具，或你不是寫.NET(就沒必要買Visual Studio)而是寫PHP之類的網頁程式，可以考慮使用aptana。

個人評價順序三：純文字編輯器

1. PSPad
2. Notepad++

　　純文字編輯器，這兩個都很棒，但如果是在純文字撰寫、修改網頁方面，PSPad會比Notepad++來好一些，兩者都有內建FTP client連線程式，可以很方便連線到Server做修改的工作，而且PSPad內建一些網頁方面的小工具相當實用，例如顏色方面的工具…等，PSPad的Help也幫忙收集分類了許多網路網頁開發的資源，所以個人比較建議使用PSPad。

純CSS編輯器

• ｋｋ名次：2
  
• 軟體名稱： TopStyle Lite
• 軟體版本： 3.5
• 軟體語言： 英文
• 軟體性質： 免費(另有進階付費版)
• 檔案大小： 1.45 MB
• 官方網站： http://www.newsgator.com/
• 使用心得：　文字型和選擇型兩者之間，在文字輸入時，自動提示功能完整，樣式、樣式值都可以很快速選擇，在選擇時，除CSS 2.1外，還可以直接選擇其他支援類型的CSS：Internet Explorer 7、Outlook 2007…等。而工具最下方有一簡單的預視區，可以即時看到各元素或id或class設定的效果。

• ｋｋ名次：1
  
• 軟體名稱： Stylizer Basic
• 軟體版本： Basic
• 軟體語言： 英文
• 軟體性質： 免費(另有進階付費版)
• 檔案大小： 9.7 MB
• 官方網站： http://www.skybound.ca/
• 使用心得：即見即所得的CSS編輯器，UI、相關設定方式都相當不錯，點選式的CSS編輯器，Stylizer還會偵測使用者電腦中有那些Browser，可以直接在工具中切換Browser看畫面效果，不用一直切換畫面上的Browser，儲存時可以選擇儲存CSS的格式，還有各種視覺化的小功能，小功能裡有個「放大鏡,(Lens)」實在好用，這可是在Adobe CS系列(dreamweaver)才有的功能，可以很方便放大觀看局部區域。強力推薦。個人認為的小缺點：由於是純CSS Editor，所以無法做簡單HTML Code的修改，必須使用其他工具修改原始HTML Code，再來Stylizer看畫面的變化；另外在CSS設定方面，是完全點選設定，沒有可以切換到純CSS Code模式做修改，這是個人習慣問題，應不算缺點，沒有看到Code總覺得怪怪的^.^！[註]Stylizer安裝預設為Ultimate版本(付費)，只有14天試用期，14天後會轉換為Basic版本，Basic會取消大部份功能，所以取消排名。基本功能：只能使用Internet Explorer預覽畫面，CSS簡易設定(一般Keyin輸入)，其他功能全部取消。
  

• 軟體名稱： Oiko CSS editor
• 軟體版本： 1.00 RC3
• 軟體語言： 英文
• 軟體性質： 免費
• 檔案大小： 1.4 MB
• 官方網站： http://css-editor.info/
• 使用心得：看似強大，但我實在不太會玩。

• 軟體名稱： snapcss
• 軟體版本： 2.1
• 軟體語言： 英文
• 軟體性質： open-source
• 檔案大小： 653 KB
• 官方網站： http://www.improvingcode.com/snapcss/
• 使用心得：類似notepad工具，唯一的功能是幫你將CSS排成一行或是多行。不推薦安裝。

• ｋｋ名次：4
  
• 軟體名稱： Free CSS Toolbox
• 軟體版本： 1.2
• 軟體語言： 英文
• 軟體性質： 免費(另有進階付費版)
• 檔案大小： 1.34 MB
• 官方網站： http://www.blumentals.net/csstool/
• 使用心得：純文字類型的CSS編輯器，自動提示功能相當方便，能自動帶出所有樣式設定，但不會自動帶出樣式的各種建議值，有各種快速排序CSS內容的功能。

• ｋｋ名次：3
  
• 軟體名稱： JustStyle CSS Editor
• 軟體版本： 1.3.3
• 軟體語言： 英文
• 軟體性質： 免費
• 檔案大小： 1.24 MB
• 官方網站： http://www.ucware.com/juststyle/
• 使用心得：點選式的CSS編輯器，絕大多數的動作都能使用點選的方式完成，在選擇完Seletor後，右方是所有CSS的樣式值，依你想要的方式選擇或設定即可，還可以很方便幫你直接附加或插入HTML檔案中。網路上相當多人推薦，但我個人試用過後認為Stylizer更好。小缺點：UI小小難看。

• 軟體名稱： Simple CSS
• 軟體版本： 2
• 軟體語言： 英文
• 軟體性質： 免費
• 檔案大小： 1.72 MB
• 官方網站： http://www.hostm.com/css/
• 使用心得：　免安裝，點選式的CSS編輯器，點選方式比JustStyle更直覺，設定完成後只能進行匯出的動作，設定-->匯出-->看網頁效果-->re-peate，與網頁互動性不足。

網頁開發工具

• 　軟體名稱： aptana studio
• 　軟體版本： 1.2.6
• 　軟體語言： 英文
• 　軟體性質： Open Source
• 　檔案大小： 129 MB
• 　官方網站： http://www.aptana.com/
• 　使用心得：定位上為網頁基礎開發工具，或是說比較屬於用戶端(Client)的程式開發工具：HTML、CSS、Javascript…，而伺服器端(Server)的開發偏向like-Unix的網頁程式語言，如PHP、Ruby on Rails、Python、Java…等，不像高階開發工具哪麼強大(例如：Visual Studio、Adobe CS系列…)，但在開發工具的相關功能一點都沒有少，自動提示、高亮度…，還與目前各種ajax及javascript函式庫(例如jQuery)做整合，還會自動更新軟體，不失為一個基礎網頁開發的好工具。另外，雖然檔案大小跟其他工具列表比較是大了不少，但如果跟Visual Studio或Adobe CS系列相比，這個算是很小很小。

純文字編輯器

• 　軟體名稱： PSPad
• 　軟體版本： 4.5.3 (2298)
• 　軟體語言： 多國語言
• 　軟體性質： 免費
• 　檔案大小： 3.43 MB
• 　官方網站： http://www.pspad.com/en/
• 　使用心得： PSPad必備安裝，就不寫了。

• 　軟體名稱： Notepad++
• 　軟體版本： 5.3.1
• 　軟體語言： 多國語言
• 　軟體性質： 免費
• 　檔案大小： 2.48 MB
• 　官方網站： http://notepad-plus.sourceforge.net/tw/site.htm
• 　使用心得：Notepad++必備安裝，就不寫了。