內容與表現分離,從標准到國人重視那天起,就已經討論了,但是停留在div+CSS xHtml+CSS 純代碼的分離,思想上流程上,到底如何分離?
古老的話題:一首古詩的分離
1.給你一首古詩,保存為毫無格式的一堆文字,你去理解它的內容,進行結構的處理。用Word排版之後,他有了結構
2.這個結構其實包含了語義和表現
3.用Html進行結構化,拋開一切的表現形式,只考慮語義
4.用CSS進行表現處理,包括Html的默認表現,他擁有了視覺表現,這個表現體現出了結構化,也體現出了用戶體驗,用戶體驗中包含了交互的排版和視覺體驗
5.如果加上行為,比如點擊注釋序號,緩緩跳轉到注釋內容。
再看看CSS禅意花園
同樣是上面的5個步驟,形成第一版本的CSS禅意花園
而更多的模板提供者所做的工作是交互線稿+視覺設計。體現在網頁上就是CSS
可以看出從編碼角度來講
第一步,內容處理為結構,純Html的編寫
第二步,結構處理為表現,純CSS的編寫
第三步,給表現加上行為。
從流程的角度來講
第一步,策劃文檔
第二步,結構處理
第三步,交互設計(交互樣式構建)
第四步,視覺設計(視覺樣式構建)
第五步,樣式構建
再逆向思維
如果沒有CSS禅意花園,設計師設計了幾百張的設計稿,然後做成頁面,Html的結構會相同嘛?類比,如果你的策劃,給兩個交互和視覺設計師處理,頁面構建的結構會相同嘛?答案是肯定的不會相同,為什麼不會相同呢?這裡討論的根本所在,這是需要我們深入思考的問題!