Web站點的風(fēng)格切換是很常見、也很受大家歡迎的功能,比如大家熟知的博客園就提供了幾十款風(fēng)格模板供大家選擇。在Asp.Net中,我們可以通過模板頁master page和主題theme來實現(xiàn)網(wǎng)站的風(fēng)格切換,但是.Net提供的默認(rèn)設(shè)置不夠強大和靈活。本文將向大家介紹如何在.Net提供的方法上進行改進和擴展,以提供更加強大的網(wǎng)站風(fēng)格切換功能。
效果預(yù)覽:http://www.tracefact.net/Demo/StyleSetting/default.aspx
NOTE:本文將master page稱為模板(有的書上叫母版),將theme稱為主題。
網(wǎng)站的風(fēng)格的切換,說白了,實際上就是對頁面進行分解和重組。所以在進行之前,我們先簡單回顧看一下頁面究竟有哪些組成部分可以供我們分解,分清楚哪些是可變的、哪些是不變的,進行后繼的工作才會容易得多。現(xiàn)在我們先暫時脫離服務(wù)器端,看一下一個靜態(tài)的.htm頁面由哪幾部分組成:
結(jié)構(gòu)(有語義的XHTML):這部分由XHTML標(biāo)記組成,應(yīng)該注意,這里使用“有語義”三個字作為修飾。XHTML的職責(zé)是告訴“這里是什么”,而不是告訴“這里應(yīng)該如何顯示”。盡管瀏覽器對于幾乎每個XHTML的標(biāo)記都賦予了某種內(nèi)置的樣式控制,但是XHTML的本意只是規(guī)范文檔的結(jié)構(gòu)。比如h1表示為標(biāo)題,p表示為段落。而不是為了這個字顯示的更大一些才去使用h1。
表現(xiàn)和布局(CSS):CSS用來控制頁面的顯示及布局。在Web標(biāo)準(zhǔn)的概念普及以前,我想大多人都是表格套表格來布局的,現(xiàn)在基本都在使用CSS了,這里沒有太多好說的。
行為(Javascript):靜態(tài)網(wǎng)頁也可以添加一些交互的行為,這些行為由Javascript來完成。我們時常會把onclick="alert('hello')"這樣的代碼嵌入到XHTML標(biāo)記中,比如一個Input標(biāo)記上;一些結(jié)構(gòu)、行為分離的狂熱人士則主張將行為與結(jié)構(gòu)(XHTML)分離,他們不會將javascript代碼寫到<body>之間,而全部寫在了head中,或者是body下面,使用 window.onload=function(){ // …} 這種形式。有個極力主張這種做法的人(Peter-Paul Koch)寫了本書叫《ppk on javascript》。
好了,大概了解了這些,我們看下.Net中如何將這三者分離,以及它的一些限制:
我到現(xiàn)在都覺得 行為與結(jié)構(gòu) 完全分離的概念太前衛(wèi)了,另外它也不影響對網(wǎng)站的風(fēng)格設(shè)置,所以我們這里不討論它。
我們先看一下結(jié)構(gòu):現(xiàn)在我們將思維向服務(wù)器端靠攏一下,很快會發(fā)現(xiàn)上面的結(jié)構(gòu)部分仍需要再細(xì)分一次,就是XHTML標(biāo)記和標(biāo)記中的內(nèi)容(網(wǎng)頁內(nèi)容)分離。XHTML標(biāo)記屬于變化的部分,不同的風(fēng)格可能會需要不同的XHTML結(jié)構(gòu),而對于各個風(fēng)格,它所顯示的內(nèi)容顯然是一樣的。想要得到這樣的效果,我們可以使用Master Page模板頁。由Master Page模板頁對應(yīng)XHTML結(jié)構(gòu)(變化部分),由Page頁面對應(yīng)于XHTML頁面的內(nèi)容(不變部分),即是一個Page可以設(shè)置為不同的Master Page以達到不同的樣式(look and feel)。
新聞熱點
疑難解答
圖片精選