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

  • kk名次: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排成一行或是多行。不推薦安裝。

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

  • kk名次: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)的程式開發工具:HTMLCSS、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++必備安裝,就不寫了。

4 則留言:

  1. 很不錯的語法整理。感謝ant2legs提供。

    回覆刪除
  2. 您好,請問我想用同一套CSS架構,測試不同的屬性值(如顏色、背景圖路徑等...),希望可以存檔/輸出比較同架構CSS但不同的顯示效果,並且希望CSS主體仍然可以繼續編輯或添加新的id/class等描述後再次輸出不同效果的CSS檔而不需要重新編寫CSS,不知道您是否知道是否有這樣的工具呢?

    回覆刪除
    回覆
    1. http://blog.kkbruce.net/2015/12/auto-reload-browsers-for-visual-studio.html#.WhbI00xuLD4
      http://blog.kkbruce.net/2016/07/dotnet-watch-aspnet-core-live-hot-reload.html#.WhbI4kxuLD4

      你用"hot reload"關鍵字可以找到許多工具。

      刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。