div css在思路與流程上實現結構與表現的分離分析_經驗交流

古老的話題：一首古詩的分離

　　1.給你一首古詩，保存為毫無格式的一堆文字，你去理解它的內容，進行結構的處理。用word排版之後，他有了結構
　　2.這個結構其實包含了語意和表現
　　3.用html進行結構化，拋開一切的表現形式，只考慮語意
　　4.用CSS進行表現處理，包括html的預設表現，他擁有了視覺表現，這個表現體現出了結構化，也體現出了用戶體驗，用戶體驗中包含了互動的排版和視覺體驗
　　5.如果加上行為，例如點擊註釋序號，緩緩跳到註釋內容。

　　再看看css禪意花園
　　同樣是上面的5個步驟，形成第一版本的css禪意花園
　　而更多的模板提供者所做的工作是交互線稿視覺設計。體現在網頁上就是CSS

　　可以看出從編碼角度來講
　　　第一步，內容處理為結構，純HTML的編寫
　　　第二步，結構處理為表現，純CSS的寫作
　　　第三步，給表現加上行為。

　　從流程的角度來講
　　　第一步，策劃文檔
　　　第二步，結構處理
　　　第三步，交互設計(交互樣式構建)
　　　第四步，視覺設計(視覺樣式建構)
　　　第五步，樣式建構

　　再逆向思維
　　如果沒有css禪意花園，設計師設計了幾百張的設計稿，然後做成頁面，HTML的結構會相同嘛？類比，如果你的策劃，給兩個互動和視覺設計師處理，頁面建立的結構會相同嘛？答案是肯定的不會相同，為什麼不會一樣呢？這裡討論的根本所在，這是需要我們深入思考的問題！