div+css在思路和流程上實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離分析
更新時間:2008年08月29日 09:15:03 作者:
內(nèi)容與表現(xiàn)分離,從標準到國人重視那天起,就已經(jīng)討論了,但是停留在div+css xhtml+css 純代碼的分離,思想上流程上,到底如何分離?
古老的話題:一首古詩的分離
1.給你一首古詩,保存為毫無格式的一堆文字,你去理解它的內(nèi)容,進行結(jié)構(gòu)的處理。用word排版之后,他有了結(jié)構(gòu)
2.這個結(jié)構(gòu)其實包含了語義和表現(xiàn)
3.用html進行結(jié)構(gòu)化,拋開一切的表現(xiàn)形式,只考慮語義
4.用CSS進行表現(xiàn)處理,包括html的默認表現(xiàn),他擁有了視覺表現(xiàn),這個表現(xiàn)體現(xiàn)出了結(jié)構(gòu)化,也體現(xiàn)出了用戶體驗,用戶體驗中包含了交互的排版和視覺體驗
5.如果加上行為,比如點擊注釋序號,緩緩跳轉(zhuǎn)到注釋內(nèi)容。
再看看css禪意花園
同樣是上面的5個步驟,形成第一版本的css禪意花園
而更多的模板提供者所做的工作是交互線稿+視覺設計。體現(xiàn)在網(wǎng)頁上就是CSS
可以看出從編碼角度來講
第一步,內(nèi)容處理為結(jié)構(gòu),純HTML的編寫
第二步,結(jié)構(gòu)處理為表現(xiàn),純CSS的編寫
第三步,給表現(xiàn)加上行為。
從流程的角度來講
第一步,策劃文檔
第二步,結(jié)構(gòu)處理
第三步,交互設計(交互樣式構(gòu)建)
第四步,視覺設計(視覺樣式構(gòu)建)
第五步,樣式構(gòu)建
再逆向思維
如果沒有css禪意花園,設計師設計了幾百張的設計稿,然后做成頁面,HTML的結(jié)構(gòu)會相同嘛?類比,如果你的策劃,給兩個交互和視覺設計師處理,頁面構(gòu)建的結(jié)構(gòu)會相同嘛?答案是肯定的不會相同,為什么不會相同呢?這里討論的根本所在,這是需要我們深入思考的問題!
1.給你一首古詩,保存為毫無格式的一堆文字,你去理解它的內(nèi)容,進行結(jié)構(gòu)的處理。用word排版之后,他有了結(jié)構(gòu)
2.這個結(jié)構(gòu)其實包含了語義和表現(xiàn)
3.用html進行結(jié)構(gòu)化,拋開一切的表現(xiàn)形式,只考慮語義
4.用CSS進行表現(xiàn)處理,包括html的默認表現(xiàn),他擁有了視覺表現(xiàn),這個表現(xiàn)體現(xiàn)出了結(jié)構(gòu)化,也體現(xiàn)出了用戶體驗,用戶體驗中包含了交互的排版和視覺體驗
5.如果加上行為,比如點擊注釋序號,緩緩跳轉(zhuǎn)到注釋內(nèi)容。
再看看css禪意花園
同樣是上面的5個步驟,形成第一版本的css禪意花園
而更多的模板提供者所做的工作是交互線稿+視覺設計。體現(xiàn)在網(wǎng)頁上就是CSS
可以看出從編碼角度來講
第一步,內(nèi)容處理為結(jié)構(gòu),純HTML的編寫
第二步,結(jié)構(gòu)處理為表現(xiàn),純CSS的編寫
第三步,給表現(xiàn)加上行為。
從流程的角度來講
第一步,策劃文檔
第二步,結(jié)構(gòu)處理
第三步,交互設計(交互樣式構(gòu)建)
第四步,視覺設計(視覺樣式構(gòu)建)
第五步,樣式構(gòu)建
再逆向思維
如果沒有css禪意花園,設計師設計了幾百張的設計稿,然后做成頁面,HTML的結(jié)構(gòu)會相同嘛?類比,如果你的策劃,給兩個交互和視覺設計師處理,頁面構(gòu)建的結(jié)構(gòu)會相同嘛?答案是肯定的不會相同,為什么不會相同呢?這里討論的根本所在,這是需要我們深入思考的問題!
相關(guān)文章
給自己的網(wǎng)站制作一個favicon.ico圖標的實現(xiàn)方法
給自己的網(wǎng)站制作一個favicon.ico圖標的實現(xiàn)方法...2007-03-03低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案
現(xiàn)在我們可以選擇瀏覽器非常多,所以瀏覽器的環(huán)境也是種類繁多,同一個瀏覽器也是包含各種不同的版本,不同的版本之間的渲染方法也存在差異,它們支持的 HTML5、CSS3 特性恐怕也不盡相同。這種情況于是造成Web開發(fā)者在開發(fā)網(wǎng)站時,要面對數(shù)量龐大的瀏覽器種類2014-03-03htm頁面中<a name>加name和id的沖突附解決方法
原來在<a name="jb51"> 和<span id="jb51">是沖突的,唉弄了好一會,郁悶 臨時解決方法就是在后面的id中加了一個2,就是<span id="jb512">2008-07-07