{eval=Array;=+count(Array);}
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.啟動速度非??欤瑤缀跏撬查g完成。
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是Twitter推出的一個開源的用于前端開發的工具包,是一個CSS/HTML框架,并且支持響應式布局。一經推出后頗受歡迎,一直是GitHub上的熱門開源項目。
在項目開發過程中,我們可以借助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置,然后再有針對性的微調樣式,這樣基于框架進行開發大大縮短了開發周期。站在巨人的肩膀上就是爽!
Web前端的學習建議
最后給大家聊聊在學習Web前端中的一些建議和方法。
在CSS布局時需要注意的一個問題是很多同學缺乏對頁面布局進行整體分析,不能夠從宏觀上對頁面中盒子間的嵌套關系進行把握,就急于動手去做,導致頁面中各元素間的關系很混亂,容易出現盒子在浮動時錯位等情況。
建議大家在布局時采用“自頂向下,逐步細化”的思想,先用幾個盒子將頁面從整體上劃分,然后逐步在盒子中繼續嵌套盒子。
“君子生非異也,善假于物也”,在學習的過程中還要多瀏覽一些優秀的網站,善于分析借鑒其設計思路和布局方法,見多方能識廣,進而才可以融會貫通,取他人之長為我所用。
同時還要善于使用Firebug這個利器。Firebug一方面可以在我們學習過程中幫助我們調試自己的頁面,另一方面我們可以使用Firebug方便地查看、分析別人網站的源代碼,“偷”也是一種技能!
隨著移動互聯網熱潮的到來,移動開發越來越受到大家的追捧,響應式布局、微網站等需求量不斷增加,也是我們Web前端未來的發展方向之一,學有余力的同學可以多多關注。
3
回答10
回答0
回答0
回答2
回答0
回答10
回答10
回答0
回答4
回答