南通颐猩文化传播有限公司

當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  建站經(jīng)驗(yàn) >  正文

WEB標(biāo)準(zhǔn)之內(nèi)容結(jié)構(gòu)表現(xiàn)和行為到底怎么分離

 2022-04-01 14:01  來(lái)源: 網(wǎng)絡(luò)綜合   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

內(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)建

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
web服務(wù)器
Web

相關(guān)文章

熱門(mén)排行

信息推薦