|
大家也許都已經(jīng)有了自己的管理方式,因?yàn)樗?a href=/pingce/yingyong/ target=_blank class=infotextkey>應(yīng)用的網(wǎng)頁(yè)類型的不同可能管理的思路也不一樣,這里我只是把我的樣式管理做一個(gè)整理。算是給大家提供一個(gè)可以參考與研究的范例,給對(duì)于沒有形成自己的管理方式的朋友們提供一個(gè)參照范本。
我的樣式管理是針對(duì)于單一項(xiàng)目、單一的風(fēng)格體系的網(wǎng)站,一般這樣的網(wǎng)站都是中小型的網(wǎng)站,風(fēng)格是上一致的。對(duì)于大型網(wǎng)站,或是風(fēng)格差異很大的網(wǎng)站體系是不適用的。我們?cè)谧鰳邮街笆紫纫氲綐邮降囊拙S護(hù)性。一旦需要修改就必需要快速方便,修改工作的成本是很高的,所以我們要盡量避免這樣的工作所占用時(shí)間的擴(kuò)大。那我們就有必要把樣式與結(jié)構(gòu)代碼分開。下面看一下我的目錄分配方法:
其中,[images] 是存放xHTML中出現(xiàn)的圖片,[jonStyle]我統(tǒng)稱之為主題包,在樣式包中包括了[CSS]、[img]、[js]分別存放CSS樣式表、樣式表中所引用的圖片、網(wǎng)頁(yè)中所用的JS。這里存放圖片的[img]與外面的[images]雖然都是存放圖片的,但是這里的圖片的性質(zhì)卻是不一樣的。[img]是CSS中所引用的圖片,所有的圖片的顯示與否都與CSS樣式有關(guān),他的歸屬性是,[img]里的圖片是歸屬于CSS的,而不是XHTML的。而CSS是不會(huì)引用[images]中的圖片。[images]中的圖片只歸屬于xHTML,xHTML也不要直接使用[img]中的圖片。
這里把[js]也放在了[jonStyle]文件夾中也許會(huì)有人覺得不妥,我的考慮是這樣的:行為與樣式本都是使得這個(gè)XHTML的結(jié)構(gòu)能多姿多彩。當(dāng)我們需要更換皮膚的時(shí)候,也有可通這個(gè)行為也是需要更換的。比如:在第一套方案中,某個(gè)區(qū)塊的內(nèi)容是要上下滾動(dòng)的,然而在第二套方案中,這個(gè)區(qū)塊就需要左右滾動(dòng)。那么這個(gè)行為也需要與樣工一起更換。當(dāng)然實(shí)際應(yīng)用的時(shí)候不一定是這么簡(jiǎn)單理由。
基本上大的結(jié)構(gòu)是這這樣的。那么樣式表的結(jié)構(gòu)又是怎么樣的呢?我是這樣來(lái)劃分的:樣式包中有一個(gè)base.css(基本共用樣式)module.css(模塊樣式)forms.css (表單樣式)mend.css(補(bǔ)丁樣式)print.css(打印樣式)
其中base.css是一個(gè)基本的樣式,也就是所有網(wǎng)頁(yè)的共性樣式,這個(gè)樣式與module.css配合基本上可以顯示正常的頁(yè)面。表單的劃分,也可以有利于對(duì)不同地方的表單的樣式管理。WEB標(biāo)準(zhǔn)涉及兼容性,所以需要有樣式補(bǔ)丁當(dāng)然還有針對(duì)性的這里就不一一列舉。最后一個(gè)的打印樣式,是提供給打印設(shè)置使用的。
我通過(guò)這樣的劃分,在對(duì)于維護(hù)與網(wǎng)站的樣工更新上,就顯得非常的容易,基本上可以在不需要程序人員的參與下就可以完成對(duì)網(wǎng)站的皮膚的更換。如果一個(gè)網(wǎng)站同時(shí)具備很多個(gè)主題包,那么只要簡(jiǎn)單的在XHTML中更換主題包的名稱就可以使用不同的樣式。這與網(wǎng)站的程序相配合將可以做出非常好的,具有很強(qiáng)擴(kuò)展性的應(yīng)用網(wǎng)站來(lái)!
以上內(nèi)容所講的比較局限,希望對(duì)大家的樣式管理上有一點(diǎn)幫助
HTML/CSS技術(shù):怎樣管理好樣式,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。