第壹階段——HTML學習。
超文本標記語言(簡稱HTML)是網頁的骨架。無論是靜態網頁還是動態網頁,HTML代碼最終都是返回給瀏覽器,瀏覽器對HTML代碼進行解釋和渲染,呈現給用戶。所以壹定要掌握HTML的基本結構和常用標簽、屬性。
學習HTML是壹個記憶和理解的過程。在學習過程中,可以使用Dreamweaver的“拆分”視圖來輔助學習。在“設計”視圖中見效果,在“代碼”視圖中學精髓,發揮各種視圖的優勢。這種對比學習的方法彌補了單純記憶HTML標簽和屬性的枯燥,對於初學者來說壹定非常優秀!
學了HTML之後,我們只知道做各種“原材料”。如果我們要建壹棟樓,就需要按照我們的設計方案把這些“原材料”放在壹起,美化壹些風格。
於是我進入了第二階段——CSS學習。
培訓是針對有條件的人,很多小夥伴更喜歡自學。但是,自學的力量畢竟有限。為了讓想學習的人更好,我推薦壹條裙子,前面6 1 1,中間4 28,後面1 4。第二,有很多人想學著和妳交流,也有大牛每晚免費授課。任何想學習的人都可以加入我們,但我們只歡迎想學習的人,而不是為了學習。隨便看看,不要進去。
CSS是英文層疊樣式表的縮寫,稱為層疊樣式表。它是壹種能夠真正將網頁表達與內容分離的風格設計語言。與傳統的HTML相比,它的樣式可以重用,大大提高了我們的開發速度,降低了維護成本。
同時,CSS中的盒子模型、相對布局、絕對布局等可以在像素級實現對網頁中各個對象的位置布局的精確控制。通過這壹階段的學習,可以順利完成“壹棟樓”的搭建。
大樓建成後,我們可以交給用戶,但如果我們想讓用戶獲得更好的體驗,我們可以進壹步裝修大樓,讓它看起來更豪華。
為了完成這個任務,我們進入了第三個階段——JavaScript學習。
JavaScript是壹種在客戶端廣泛使用的腳步語言,它為我們提供了壹些內置的函數、對象和DOM操作。有了這些內容,就可以實現壹些特效、驗證、交互等。在客戶端,讓我們的頁面看起來不那麽死板,屌絲瞬間攻擊高富帥!有嗎?
此時,妳可能還沈浸在JavaScript帶給妳的驚喜中,妳的項目經理卻突然對妳大喊:
“此效果在XXX瀏覽器下不兼容,請重試……”
“不兼容?”瞬間就石化了。有木有?
“我擦,坑爸爸!那花了我壹個晚上寫了幾百行代碼,我吐血了!”
JavaScript的兼容性和復雜性有時候真的讓我們很頭疼,不過還好有“大神”幫我們打包。
接下來進入第四個階段——jQuery學習。
JQuery是壹個免費、開源、輕量級的JavaScript庫,兼容各種瀏覽器(jQuery2.0及其後續版本放棄了對IE6/7/8瀏覽器的支持)。同時,還有很多基於jQuery的插件可供選擇,讓我們實現壹些豐富的動態效果更加方便快捷,大大節省了我們的開發時間,提高了開發速度,充分體現了其“少寫多做”的核心宗旨。這種感覺很酷!有嗎?
“豪華建築”在這裏拔地而起,但蓋樓卻如此復雜,日復壹日,年復壹年!妳能把建築中的每壹個單獨的組件模塊化,當需要蓋樓的時候,它就會像壹堆木頭壹樣組合在壹起,這不酷嗎?能實現嗎?答案是肯定的。
這種思路也適用於Web前端開發,於是各種前端框架應運而生,在這裏向大家推薦Bootstrap。Bootstrap是Twitter推出的用於前端開發的開源工具包。它是壹個CSS/HTML框架,支持響應式布局。壹經推出就大受歡迎,壹直是GitHub上廣受歡迎的開源項目。
在項目開發過程中,我們可以利用Bootstrap提供的CSS樣式、組件、JavaScript插件,快速完成頁面布局和樣式設置,然後有針對性地進行樣式微調,從而大大縮短基於框架的開發周期。站在巨人的肩膀上很酷!
Web前端的學習建議
最後跟大家說壹下學習Web前端的壹些建議和方法。
CSS布局需要註意的壹個問題是,很多同學缺乏對頁面布局的整體分析,無法從宏觀角度把握頁面中方框之間的嵌套關系,急於求成,導致頁面中元素之間的關系混亂,浮動時容易出現方框錯位的情況。建議妳在布局上采用“自上而下,逐步細化”的思路,先用幾個方框將頁面整體分割,然後在方框中逐步繼續嵌套方框。
“君子生而不同,善於作偽。”在學習的過程中,我要多瀏覽優秀的網站,善於分析和借鑒他們的設計思路和布局方法,多方面的知識,做到融會貫通,取長補短,為我所用。
同時要善於使用Firebug。壹方面,Firebug可以幫助我們在學習過程中調試自己的頁面。另壹方面,我們可以使用Firebug方便地查看和分析別人網站的源代碼。“偷”也是壹種技能!
隨著移動互聯網熱潮的到來,移動開發越來越受到大家的追捧,對響應式布局和微站點的需求越來越大,這也是我們Web前端未來的發展方向之壹。有余力的同學可以多關註壹下。最後祝大家都能在Web前端開發的道路上走出更廣闊的天地!