Web前端開發最常見的程式設計軟體有以下幾種：

DreamWeaver是一款老牌前端開發工具，功能強大且元件豐富，作為前端開發的一款利器被廣泛使用。DreamWeaver是一款視覺化的前端開發工具，一邊寫程式碼一邊就能看到效果，所以使用起來還是比較方便的。但是DreamWeaver的缺點就是比較耗費系統資源，這也許是IDE類產品的通病。

Hbuilder是最近幾年被廣泛使用的一款前端開發工具，我最初開始使用Hbuilder是因為它可以做Android和IOS的開發，移動互聯團隊的同事推薦給我使用的，我用了一段時間感覺還不錯。整個操作比較簡便，顯示風格我也比較喜歡，給人一種很輕的感覺，同時功能又很強大。但是使用Hbuilder有一個問題一直讓我比較困惑，就是我之前開發過的頁面如果透過匯入功能匯入到Hbuilder中會出現中文亂碼，而同樣的操作在Eclipse中則不會亂碼，這也讓我比較困惑，不知道官方什麼時候能解決這個問題。

sublime text也是前端開發比較常見的工具之一，特點是可透過配置外掛來構建一個比較豐富的開發環境，同時sublime text比較輕（比Hbuilder還要輕），如果熟悉了它的快捷鍵，那麼使用起來還是比較便捷的。當然它也支援很多開發語言，雖然在程式碼管理方面沒有DW那麼強大，但是由於它很輕，速度很快，所以很多前端開發人員還是比較喜歡使用它。

Eclipse也是可以進行前端開發的，使用Eclipse進行前端開發的程式設計師有很多是做後端開發出身的。因為可能是使用Java語言比較多的緣故，我對Eclipse的使用比較熟悉，所以很多時候我都使用Eclipse進行前端開發。使用Eclipse進行前端開發可以直接跟後端開發整合測試，在這一點上還是有一定的優勢，雖然Eclipse本身較重，但是如果既做前端又要做一部分後端除錯，使用Eclipse總要好過使用DW+Eclipse。但是某些Eclipse版本在JavaScript程式片的支援上有一些小Bug，在使用的時候要多加註意。

Editplus本身就是一個功能強大的記事本，我最初使用Editplus是在2001年，當年使用Editplus做C語言開發，後來改用Vim了，因為Vim比Editplus更方便。Editplus可以進行很多語言的開發，透過配置編譯和執行環境，可以在Editplus下進行程式編寫和除錯。Editplus沒有編寫提示，最大的優點是執行快，Editplus只有幾M大，非常小巧。由於早期長時間使用Editplus，所以鍛鍊了我的手寫程式碼能力，也提高了模組化程式碼的能力，因為Editplus沒有這些輔助功能。

做前端開發需要系統的學習HTML、CSS以及JavaScript，同時還要學習諸多框架的使用，內容多且繁雜，好在難度並不高，只是需要做大量的實驗。前端的工具也並不僅限於以上提到的幾種，隨著前端開發的不斷變化，以後軟體廠商也會陸續推出更加方便的開發工具。

學習前端開發的程式設計軟體很多，不同的人有不同的愛好習慣和使用習慣，也有收費的和免費。sublime text3是一款非常不錯的前端開發編輯器。本人也用此編輯器進行開發。原因有幾個：

1.啟動速度非常快，幾乎是瞬間完成。

2.sublime 是一款輕量級的編輯器。

3.免費使用，但有一點：時不時彈出對話方塊叫你購買。

4.它有很多外掛，這可以說是非常強功能的。比如emmet等，語法高亮等。

5.可以快速搭建文字，修改內容（包括一行多行都可以），快速查詢、定位等。

對於像我這樣屌絲級別的程式設計師，sublime編輯器已經足夠。也非常推薦使用。

如果你真的想學習web前端，不應該糾結使用什麼軟體，而應該多學習知識，有自己的知識體系。目前市面上有很多web前端開發工具，會使人眼花繚亂，不知道該如何學則。

我建議：

1、剛開始可以先使用DW(DreamWeaver),

優點：是一款老牌前端開發工具，功能強大且元件豐富，作為前端開發的一款利器被廣泛使用。DreamWeaver是一款視覺化的前端開發工具，一邊寫程式碼一邊就能看到效果，所以使用起來還是比較方便的。

缺點：DreamWeaver的缺點就是比較耗費系統資源，這也許是IDE類產品的通病。

2、等你有了一定的基礎以後可以使用的軟體就很多了，比如：Hbuilder、sublime text、Eclipse、Editplus……

web前端正確學習流程：

1HTML

第一階段——HTML的學習。

超文字標記語言（HyperText Mark-up Language 簡稱HTML）是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML程式碼，瀏覽器將HTML程式碼解釋渲染後呈現給使用者。因此，我們必須掌握HTML的基本結構和常用標記及屬性。

HTML的學習是一個記憶和理解的過程，在學習過程中可以藉助Dreamweaver的“拆分”檢視輔助學習。在“設計”檢視中看效果，在“程式碼”檢視中學本質，將各種檢視的優勢發揮到極致，這種對照學習的方法彌補了單純識記HTML標籤和屬性的枯燥乏味，想必對各位初學的小盆友們來說必定是極好的！

在學習了HTML之後，我們只是掌握了各種“原材料”的製作方法，要想蓋一幢樓房就還需要把這些“原材料”按照我們設計的方案組合佈局在一起並進行一些樣式的美化。

2CSS

於是進入第二個階段——CSS的學習。

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以複用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。

同時CSS中的盒子模型、相對佈局、絕對佈局等能夠實現對網頁中各物件的位置排版進行畫素級的精確控制。透過此階段的學習，我們就可以順利完成“一幢樓房”的建設。

“樓房”建設完成之後，我們可以交給使用者使用，但是如果想讓使用者獲得更佳的體驗，我們還可以對“樓房”進行更深一步的“裝修”，讓它看起來更“豪華”一些。

3JavaScript

為了完成這個任務，我們進入第三個階段——JavaScript的學習。

JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內建函式、物件和DOM操作，藉助這些內容我們可以來實現一些客戶端的特效、驗證、互動等，使我們的頁面看起來不那麼呆板，屌絲瞬間逆襲高富帥！有麼有？

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的專案經理卻突然對你大吼道:

“這個效果在××瀏覽器下不相容，重新搞……”

“不相容？”瞬間石化了有木有？

“我擦，坑爹啊！那可是花了我一個晚上寫了幾百行程式碼搞定的啊，吐血了都!”

JavaScript的相容性和複雜性有時候的確讓我們頭疼，還好有“大神”幫我們做了封裝。

4jQUery

接下來我們進入第四個階段——jQUery的學習。

jQuery是一個免費、開源的輕量級的JavaScript庫，並且相容各種瀏覽器（jQuery2.0及後續版本放棄了對IE6/7/8瀏覽器的支援），同時現在有很多基於jQuery的外掛可供選擇。

這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了其write less,do more的核心宗旨。這個Feel倍兒爽！有麼有？

“豪華大樓”至此拔地而起，但是每天這樣日復一日，年復一年的蓋樓，好繁瑣！能不能將大樓裡面每一個單獨部件模組化，當需要蓋樓時就像堆積木一樣組合在一起，這樣豈不是爽歪歪？可以實現嗎？答案是肯定的。

5前端框架

這種思想在Web前端開發中也是適合的，於是乎就出現了各種前端框架，在這裡推薦給大家的是Bootstrap。

在專案開發過程中，我們可以藉助Bootstrap提供的CSS樣式、元件、JavaScript外掛等快速的完成頁面佈局和樣式設定，然後再有針對性的微調樣式，這樣基於框架進行開發大大縮短了開發週期。站在巨人的肩膀上就是爽！

Web前端的學習建議

最後給大家聊聊在學習Web前端中的一些建議和方法。

在CSS佈局時需要注意的一個問題是很多同學缺乏對頁面佈局進行整體分析，不能夠從宏觀上對頁面中盒子間的巢狀關係進行把握，就急於動手去做，導致頁面中各元素間的關係很混亂，容易出現盒子在浮動時錯位等情況。

建議大家在佈局時採用“自頂向下，逐步細化”的思想，先用幾個盒子將頁面從整體上劃分，然後逐步在盒子中繼續巢狀盒子。

“君子生非異也，善假於物也”，在學習的過程中還要多瀏覽一些優秀的網站，善於分析借鑑其設計思路和佈局方法，見多方能識廣，進而才可以融會貫通，取他人之長為我所用。

同時還要善於使用Firebug這個利器。Firebug一方面可以在我們學習過程中幫助我們除錯自己的頁面，另一方面我們可以使用Firebug方便地檢視、分析別人網站的原始碼，“偷”也是一種技能！

隨著移動網際網路熱潮的到來，移動開發越來越受到大家的追捧，響應式佈局、微網站等需求量不斷增加，也是我們Web前端未來的發展方向之一，學有餘力的同學可以多多關注。

主要是Photoshop、Fireworks

所見即所得的：Dreamweaver

文字類：EmEditor、Editplus、記事本等

程式設計類與更復雜的前端語言應該不大適合還不是初學者的！

更深的，就要學習流行的前端框架，還有熟悉H5、CSS3、Bootstrap、響應式等技術！

僅一些淺見，請前端大神們發言吧！