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)。
新聞熱點
疑難解答
圖片精選
