別人的警告:大多數初學者學習網頁製作所用的集成開發環境(IDE)大多是Dreamweaver(我現在用的就是DW cc),這種所見即所得的“弔炸天”IDE為我們帶來了極大的方便。But:雖然它入門快,見效快,很容易讓初學者愛上,,聰明的IDE也成全了我們的惰性。 正確的方向勝過無謂的努力:也不知道它 ...
別人的警告:大多數初學者學習網頁製作所用的集成開發環境(IDE)大多是Dreamweaver(我現在用的就是DW cc),這種所見即所得的“弔炸天”IDE為我們帶來了極大的方便。But:雖然它入門快,見效快,很容易讓初學者愛上,,聰明的IDE也成全了我們的惰性。
正確的方向勝過無謂的努力:也不知道它對不對,沒有大神指導的鋁孩紙也是沒辦法了:
第一階段--HTML學習:超文本標記語言(HyperText Mark-up Language)是網頁的骨架,無論是靜態網頁還是動態網頁,最終返回到瀏覽器端的都是HTML代碼,瀏覽器將HTML代碼解釋渲染後呈現給用戶。
HTML的學習是一個記憶和理解的過程,學習中,可以藉助DW的拆分“視圖輔助學習”,在“設計”視圖中看效果,在“代碼”里學習本質,這裡,只掌握了各種“原材料”的製作方法。
第二階段--CSS學習:層疊樣式表(Cascading Style Sheets),真正做到網頁表現與內容分離的一種樣式設計語言,極大提高了開發速度,降低了維護成本。
css中的盒子模型,相對佈局,絕對佈局等能夠實現對網頁中各對象的位置排版進行像素級的精確控制。
第三個階段--JavaScript:它是一種在客戶端廣泛使用的腳本語言,提供了一些內置函數,對象和DOM操作,藉助這些可以實現一些客戶端的特效,驗證,交互等,使頁面看起來不那麼呆板。
關於相容性:很讓人頭痛。
第四個階段--jQUery:是一個免費,開源的輕量級的JavaScript庫,並且相容各種瀏覽器(jQuery2.0以及後續版本放棄了對IE6/7/8瀏覽器的支持),現在有很多基於jQuery的插件可供選擇,這樣在實現一些豐富的動態效果時更方便快捷,大大節省了開發時間,提高了開發速度,這也充分體現了其write less , do more的核心宗旨
Bootstrap:是Twriter推出的一個開源的用於前端開發的工具包,是一個css/HTML框架,並且支持響應式佈局,一直是GitHub上的熱門開源項目。
在項目開發過程中,可以藉助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速完成頁面佈局和樣式設置,然後再有針對性的微調樣式,這樣基於框架進行開發大大縮短了開發周期。
別人的建議:很多初學者缺乏對頁面佈局進行整體分析,不能巨集觀上對頁面中盒子間的嵌套關係進行把握,就急於動手去做,導致頁面中各元素間的關係很紊亂,容易出現盒子在浮動時錯位等情況。建議採用“自頂向下,逐步細化”的思想,先用幾個盒子將頁面從整體上劃分,然後逐步在盒子中繼續嵌套盒子。
還要多瀏覽優秀的網站,善於分析借鑒設計思路和佈局方法,見多識廣,進而融會貫通,取他人之長為我所用。
同時還要善於使用Firebug這個利器,一方面可以再學習過程中幫助我們調試自己的頁面,另一方面可以使用Firebug方便查看,分析別人網站的源代碼。