WEB標準之內(nèi)容結(jié)構(gòu)表現(xiàn)和行為到底怎么分離
  • 更新時間:2024-12-23 15:34:14
  • 建站經(jīng)驗
  • 發(fā)布時間:2年前
  • 828

內(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禪意花園

而更多的模板提供者所做的工作是交互線稿+視覺設(shè)計。體現(xiàn)在網(wǎng)頁上就是CSS

可以看出從編碼角度來講

第一步,內(nèi)容處理為結(jié)構(gòu),純HTML的編寫

第二步,結(jié)構(gòu)處理為表現(xiàn),純CSS的編寫

第三步,給表現(xiàn)加上行為。

從流程的角度來講

第一步,策劃文檔

第二步,結(jié)構(gòu)處理

第三步,交互設(shè)計(交互樣式構(gòu)建)

第四步,視覺設(shè)計(視覺樣式構(gòu)建)

第五步,樣式構(gòu)建

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

本文章出于推來客官網(wǎng),轉(zhuǎn)載請表明原文地址:https://www.tlkjt.com/experience/7325.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部