學習網站建設技術CSS布局心得

css|網站建設|心得

從開始認識CSS(DW4)那時起,我就知道了CSS的強大,但從未用CSS排版過,因為我曾經嘗試過學習,但感覺太難了
而且用DW的表格,所見及所得,做起頁面來非常的快,排版也容易的多,由於最近求職,很多公司都要求DIV,CSS,所以我再次嘗試學習

1.學習方式

我以為,看別人的代碼是一個非常好的學習方式(前提是你需要有點基礎知識),在查看別人的代碼時可以去除一些重複的,或者一些於CSS無關的代碼,將更利於我們分析,你可以從中瞭解到別人是怎麼做的,更深一點,你可以考慮為什麼要這樣做,當然它們做的也不一定全對,就算淘寶,我發現它們的CSS裡面也有不少的多餘代碼,我曾經從淘寶的網頁代碼裡面學到不少的東西,我把基本的架構保留下來,然後分析,並且我將我的分析記錄了下來,你可以在這裡查看：
http://www.dayanmei.com/blog.php/ID_536.htm

2.練習方式

在瞭解到一些基本的布局方式,以及一些容器的屬性之後,可以嘗試自己,編寫一些簡單的布局,遇到出現問題的時候,可以在google搜尋一下,或者想\象理想論壇以及其他一些討論標準化的論壇詢問一下,會有很多好心人的哦

3.一本手冊
在遇到問題的時候或者對某個屬性不是很瞭解,或者對於屬性的相容性不太清楚的時候,這就有很大的作用了
手冊可以去這裡下載
http://www.w3cn.org/resource/down/2004/73.html

4.多寫多練
你發現自己多寫了幾個布局,或者出了一些問題並解決後,你已經基本掌握了布局的要點了.

如何學習標準化

1、幾本書、幾個網站、幾篇貼子、幾個blog

《網站重構》掀起國內web標準熱潮的第一本相關著作。理論性質多一些，全書涉及到具體操作和代碼的部分很少。新手初次閱讀很可能覺得沒有實際用途。建議在閱讀學習《CSS網站布局實錄》有了一定的技術基礎了再回頭學習，反思自己之前學習和設計過程中的問題，這樣才能有效地提高。
《樣式表中文手冊》必備的工具，我一般放在案頭隨時查詢。裡面提供了詳細的使用說明和執行個體。
《CSS網站布局實錄》較新的一本標準化著作。告訴你怎麼去寫符合標準的xhtml和css代碼，告訴你一些常見布局和頁面效果的代碼是什麼樣子。這本書很適合初學者，基本上都是針對執行個體的布局、效果的實際操作，比較系統的講述了如何進行標準化網站製作。這本書只是在講具體的實現，關於標準化的概念、網站重構的目標這些指導實際操作的理念性東西幾乎沒有。可以在學習這本書之後讀一下《網站重構》，二者結合起來學習效果不錯。目前的版本可能因為時間問題，校對很倉促，有不少錯別字和有問題的句子沒，但涉及到代碼到沒有發現錯誤。
《CSS權威指南》詳細闡述CSS1.0每個屬性的規則和定義，並且展望了CSS2.0許多誘人的東西。對實現web標準化有著重要的意義。通過本書的學習可以深入理解瀏覽器如何解析屬性的規則和定義，為準確實現設計意圖提供保障。
《html和xhtml權威指南》應該是一本權威的工具書，沒有必要通讀，可以在實際設計製作過程中參考。詳細的講述了html和xhtml的規則定義提示。
《javascript權威指南》作為行為層的主要技術，不學習javascript就不能完整地學習web標準。

網站設計師 最初接觸web標準化學習必須訪問並且認真閱讀的網站。包含教程、資訊、參考資料等重要訊息。
渡硐氡曜薊ò?lt;/a> 這個不用說吧，對幾位版主熱心勤勞在此致敬。不少牛人潛水與此。但近期的學習瘴韻願≡輳揮猩釗肜斫饌Ａ粼赾ss表現層次的朋友較多。
CSSer.org 這個網站不知道怎麼關掉了……有段時間不去看了，等待站長再次開放吧。
網易 作為門戶網站裡較早採用web標準的網站之一，其最新版本很值得研究。

下面是一些web標準屆牛人朋友的blog，跟著他們能學習很多，而且通過blog這樣親切的形式學習效果應該很好。建議靜心閱讀他們的系列教程。

http://www.realazy.org/blog/
http://www.andymao.com/andy/
http://old9.blogsome.com/
http://www.greengnn.com/
http://blog.pr1984.com/
http://www.loaoao.com/

2、如何學習

• 讀寫
  讀書讀上面我推薦的貼子、網站和blog。互連網的宗旨在於共用和傳播，那些接觸技術比較早的理解和實踐比較深入的朋友給我們提供經驗和教程。要靜下心來，不能僅僅為了一個效果或者一個布局的實現去找答案。而是去理解教程給我們帶來的實現思路。要系統地讀書也要針對性的搜集某個問題的方法去總結提取。讀到的時候就要寫，寫一些代碼片斷，一些布局結構，一些效果的實現。哪怕是照著書敲出代碼來，加深記憶和理解，效果要比單純的度過效果要好得多。
• 改動
  改，不是抄襲。把別人的網站另存下來，改動其中的部分內容，看看頁面顯示有什麼變化，在這些變化中去理解你所改動部分代碼再實現頁面效果中起到了什麼作用。這是一個很重要的學習方法。你看到的效果變化來源於你的改動，這本身就是一個加深記憶和理解的過程。另外一種改法就是把複雜的頁面簡單化，簡單到能示範效果為主，代碼少了看起來清晰有利於學習。或者把簡單的布局填充內容之後看頁面怎麼顯示，會不會影響到布局，自適應的還是固定大小的，超出固定大小的內容hidden了還是流向了結構之外？有沒有什麼Bug？青蛙用永遠逮不到一個安安靜靜站在那裡的蜻蜓，只有蜻蜓飛起來了青蛙才能判斷才能捕食。
• 睡覺
  睡覺前的思考。在顯示器之外去思考之前學習到的東西，要有一定的距離和空間高度去看待去思考，比如今天寫的布局是不是合理，有沒有必要這樣複雜，如果把浮動改成絕對位置呢。等等，就像作平面設計一樣，有時候椅子往後一仰，稍稍的遠離螢幕，對之前的細節處理就能有一個全新的認識。
• 收藏
  好記性不如爛筆頭，總去發帖提問也不是辦法。把看到的有用的教程收集起來分類整理，比如布局代碼、導航特效、瀏覽器安全色hack寫法等等。建立自己的文件庫，時間久了整理整理，如果有合適的條件不要忘記和朋友們分享。
• 實踐
  作一個完整的網站/網頁項目，未必要複雜或者龐大。但至少要有一個完整的頁面，儘可能用熟悉的技術去實現。檢驗自己、發現問題給自己繼續學習的動力。