div+css在思路和流程上實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離

內(nèi)容與表現(xiàn)分離，從標(biāo)準(zhǔn)到國(guó)人重視那天起，就已經(jīng)討論了，但是停留在div+css xhtml+css 純代碼的分離，思想上流程上，到底如何分離？

古老的話題：一首古詩(shī)的分離

　　1.給你一首古詩(shī)，保存為毫無(wú)格式的一堆文字，你去理解它的內(nèi)容，進(jìn)行結(jié)構(gòu)的處理。用word排版之后，他有了結(jié)構(gòu)
　　2.這個(gè)結(jié)構(gòu)其實(shí)包含了語(yǔ)義和表現(xiàn)
　　3.用html進(jìn)行結(jié)構(gòu)化，拋開(kāi)一切的表現(xiàn)形式，只考慮語(yǔ)義
　　4.用CSS進(jìn)行表現(xiàn)處理，包括html的默認(rèn)表現(xiàn)，他擁有了視覺(jué)表現(xiàn)，這個(gè)表現(xiàn)體現(xiàn)出了結(jié)構(gòu)化，也體現(xiàn)出了用戶體驗(yàn)，用戶體驗(yàn)中包含了交互的排版和視覺(jué)體驗(yàn)
　　5.如果加上行為，比如點(diǎn)擊注釋序號(hào)，緩緩跳轉(zhuǎn)到注釋內(nèi)容。

　　再看看css禪意花園
　　同樣是上面的5個(gè)步驟，形成第一版本的css禪意花園
　　而更多的模板提供者所做的工作是交互線稿+視覺(jué)設(shè)計(jì)。體現(xiàn)在網(wǎng)頁(yè)上就是CSS

　　可以看出從編碼角度來(lái)講
　　　第一步，內(nèi)容處理為結(jié)構(gòu)，純HTML的編寫(xiě)
　　　第二步，結(jié)構(gòu)處理為表現(xiàn)，純CSS的編寫(xiě)
　　　第三步，給表現(xiàn)加上行為。

　　從流程的角度來(lái)講
　　　第一步，策劃文檔
　　　第二步，結(jié)構(gòu)處理
　　　第三步，交互設(shè)計(jì)(交互樣式構(gòu)建)
　　　第四步，視覺(jué)設(shè)計(jì)(視覺(jué)樣式構(gòu)建)
　　　第五步，樣式構(gòu)建

　　再逆向思維
　　如果沒(méi)有css禪意花園，設(shè)計(jì)師設(shè)計(jì)了幾百?gòu)埖脑O(shè)計(jì)稿，然后做成頁(yè)面，HTML的結(jié)構(gòu)會(huì)相同嘛？類比，如果你的策劃，給兩個(gè)交互和視覺(jué)設(shè)計(jì)師處理，頁(yè)面構(gòu)建的結(jié)構(gòu)會(huì)相同嘛？答案是肯定的不會(huì)相同，為什么不會(huì)相同呢？這里討論的根本所在，這是需要我們深入思考的問(wèn)題！