談如何統(tǒng)籌學(xué)校外部網(wǎng)CSS文件群

[摘要]在教學(xué)生編寫網(wǎng)頁代碼時(shí)，不僅要教會(huì)他們編寫具體的代碼，還要培養(yǎng)他們具有統(tǒng)籌整個(gè)網(wǎng)站頁面效果的能力，而后者是現(xiàn)有的教學(xué)所缺乏的，需要進(jìn)行改革。

[關(guān)鍵詞]CSS CSS文件群 外部網(wǎng) 全局定義

在教學(xué)生編寫網(wǎng)頁代碼時(shí)，傳統(tǒng)的教法是，只教會(huì)他們編寫每一個(gè)網(wǎng)頁的具體代碼，基本上不會(huì)培養(yǎng)他們具有統(tǒng)籌整個(gè)網(wǎng)站頁面效果的能力。這種只關(guān)注局部而不審視全局的技術(shù)思維，會(huì)制約這些學(xué)生更好更迅速地適應(yīng)現(xiàn)實(shí)工作的需要，因此相關(guān)的課程教學(xué)要進(jìn)行改革。

一、分析學(xué)校內(nèi)、外部網(wǎng)的需求，確定外部網(wǎng)的要求

我們知道，學(xué)校網(wǎng)站主要分為私密辦公的內(nèi)部網(wǎng)和公開展示的外部網(wǎng)兩部分，前者一般訂購專業(yè)的程序軟件實(shí)現(xiàn)各種界面搭配和功能需求，后者則一般另行設(shè)計(jì)合適的網(wǎng)頁并發(fā)布到網(wǎng)站上，對(duì)外提供的功能模塊往往比較少，主要是文章回復(fù)、留言板、投票或調(diào)查、會(huì)員登陸框、站內(nèi)短信、論壇等，網(wǎng)頁設(shè)計(jì)和欄目布局也比較簡單相似。

一般來說，學(xué)校外部網(wǎng)的拓?fù)浣Y(jié)構(gòu)主要分為四層：網(wǎng)站首頁—科室首頁—欄目列表頁—內(nèi)容頁。其中，網(wǎng)站首頁只有一個(gè)（個(gè)別網(wǎng)站還會(huì)前置一個(gè)flash展示頁），科室首頁視學(xué)校具體情況而定，一般有10到20個(gè)，欄目列表頁從幾十個(gè)到幾百個(gè)不等。

有些學(xué)校喜歡追求視覺上的好看，要求每個(gè)科室首頁都各不相同，各個(gè)科室又各自擁有一套獨(dú)特的列表頁和內(nèi)容頁。這種要求雖然不是很符合做網(wǎng)站的規(guī)律，但客戶的需求必須要滿足，如果網(wǎng)頁制作人員對(duì)CSS文件的配置不熟練，甚至采取把全部樣式寫到一個(gè)CSS文件去，或者一個(gè)模板對(duì)應(yīng)一個(gè)CSS文件的方式，必然會(huì)幾何級(jí)別地加大日后的維護(hù)工作量。所以要告訴學(xué)生，一定要杜絕這種情況，否則不但加大自己的工作量，更重要的是，領(lǐng)導(dǎo)不會(huì)喜歡這樣的員工。

二、以采取共同樣式組建全局性的CSS文件的方法統(tǒng)籌文件群

事實(shí)上，一個(gè)小型規(guī)模的網(wǎng)站（學(xué)校網(wǎng)站的規(guī)模一般都比較?。渚W(wǎng)頁的CSS文件可以依據(jù)兩種方式進(jìn)行歸類。

第一種方式是，以科室為獨(dú)立單位，每個(gè)科室頻道對(duì)應(yīng)一個(gè)CSS文件，同時(shí)容納科室首頁、列表頁、內(nèi)容頁的樣式。這種方式的好處是，每個(gè)科室可以獨(dú)立進(jìn)行改版而絲毫不會(huì)影響到其他科室頁面的顯示效果，但弊端也是很明顯的，相同模塊或樣式的代碼難以有效共享，從而加大了相同代碼的冗余度。

另外一種方式是，抽取全站共同樣式的代碼組建一個(gè)全局性的CSS文件，各個(gè)科室的個(gè)性代碼視規(guī)模大小組建一個(gè)或幾個(gè)CSS文件，如果列表頁和內(nèi)容頁比較類似，還可以設(shè)置單獨(dú)的列表頁CSS文件和內(nèi)容頁CSS文件。這種方式的好處是，可以最大限度地共用相同樣式的代碼，既可以帶來視覺上的統(tǒng)一性，又可以使網(wǎng)頁代碼的編寫和維護(hù)更加便利，日后進(jìn)行改版時(shí)，能極大地減少工作量。但是，這種方式需要網(wǎng)頁制作人員和設(shè)計(jì)師先規(guī)劃好整個(gè)網(wǎng)站的樣式，包括版塊的樣式、圖片的尺寸和邊框顏色等樣式、文字的各種樣式，然后再開始設(shè)計(jì)和制作網(wǎng)頁。

筆者從建站實(shí)戰(zhàn)中發(fā)現(xiàn)，在學(xué)校網(wǎng)站中采取第二種方式來統(tǒng)籌CSS文件群，更能適應(yīng)實(shí)際需要，比如說，可以快速建立樣式一致的新模板，呈現(xiàn)新的頁面內(nèi)容，從而滿足領(lǐng)導(dǎo)的需求。在這種方式下，網(wǎng)頁制作人員需要先和設(shè)計(jì)師規(guī)劃好整個(gè)網(wǎng)站的頁面樣式，比如說，每個(gè)頁面的焦點(diǎn)新聞標(biāo)題，統(tǒng)一用一種樣式，統(tǒng)一使用H1標(biāo)簽；標(biāo)題列表統(tǒng)一采用1-2中樣式，統(tǒng)一使用H2或者H3標(biāo)簽；整個(gè)網(wǎng)站的內(nèi)容圖片最多不超過5種尺寸，這些前置工作做完了，網(wǎng)頁也設(shè)計(jì)好了，開始編寫代碼前，需要確定：那些樣式代碼編寫到哪個(gè)CSS文件中去。

以一個(gè)網(wǎng)頁結(jié)構(gòu)比較簡單的學(xué)校網(wǎng)站為例，可以設(shè)置以下4個(gè)CSS文件：global.css、index.css、list.css、content.css，分別對(duì)應(yīng)全局樣式、網(wǎng)站和頻道首頁樣式、列表頁樣式、內(nèi)容頁樣式的代碼。

global.css文件主要放以下一些類別的代碼：全局定義、body、H1-H6、P、清除浮動(dòng)、鏈接定義、圖片定義、大模塊結(jié)構(gòu)定義（logo區(qū)、nav區(qū)、main區(qū)、link區(qū)、footer區(qū)等）、class定義。這些代碼的作用是，在任意一個(gè)html文件中，只要使用這些標(biāo)簽，都會(huì)默認(rèn)顯示同樣的樣式效果，比如說，使用H1標(biāo)簽時(shí)，統(tǒng)一顯示16像素、黑色、加粗、宋體、沒有下劃線的文字，鼠標(biāo)放上去，文字變成紅色、有下劃線。

index.css文件主要放各個(gè)頻道首頁的樣式代碼。比如說，main區(qū)放的是一個(gè)網(wǎng)頁中的主要內(nèi)容，它可能按照結(jié)構(gòu)從左到右分為兩列或者三列，也有可能從上到下分為2部分、3部分甚至更多部分，更有可能是兩者的結(jié)合。那么，在index.css文件中，就可以針對(duì)這個(gè)區(qū)域放置諸如main_left、main_right、main_first、main_second、main_third的子模塊代碼，而每個(gè)子模塊下面又可以分成若干個(gè)更小的模塊，一直細(xì)分到最底端的圖片標(biāo)簽、標(biāo)題標(biāo)簽、段落標(biāo)簽。

一般情況下，許多模塊的樣式是非常相似甚至完全一樣的，那么，可以同時(shí)為該模塊指定一個(gè)ID和class，在global.css文件中定義class的樣式，比如規(guī)定該模塊的邊框樣式，margin值和padding值，等等，在index.css文件中定義ID的樣式，主要是規(guī)定其是否浮動(dòng)，寬度和高度的數(shù)值，背景色和背景圖。可以這樣理解：許多模塊可以具有厚度、顏色等屬性相同的邊框，具有相同的margin值和padding值，但卻可以自由變胖瘦和變高矮，所以前者用class定義，后者用ID來定義。list.css和content.css文件的代碼則比較簡單，可以說是index.css文件的簡易版本，如果列表頁和內(nèi)容頁的模板數(shù)量不多，分別只有3個(gè)左右，甚至可以把它們合并為一個(gè)CSS文件。那些頁面結(jié)構(gòu)相對(duì)復(fù)雜點(diǎn)的網(wǎng)站，往往需要建立多個(gè)頻道首頁CSS文件，每個(gè)文件對(duì)應(yīng)一個(gè)頻道，雖然數(shù)量上會(huì)有所增加，但其功能和只有一個(gè)index.css文件是基本相同的，可以看成是對(duì)該文件的分拆。也就是說，全局CSS文件主要定義整個(gè)網(wǎng)站的共同樣式部分，頻道首頁CSS文件、列表頁CSS文件、內(nèi)容頁CSS文件分別主要定義各頻道首頁、列表頁、內(nèi)容頁的細(xì)分結(jié)構(gòu)樣式和較為特殊的標(biāo)簽樣式，前者主抓頁面的一致性，后者照顧頁面的特殊性。只要理順兩者的關(guān)系，網(wǎng)頁制作人員就可以清楚地區(qū)分，哪些代碼應(yīng)該寫到global.css文件中，哪些代碼應(yīng)該寫到index.css文件中。以后進(jìn)行代碼維護(hù)，甚至進(jìn)行網(wǎng)站改版時(shí)，只要直接修改對(duì)應(yīng)的CSS文件，就可以迅速解決問題。在明確了每個(gè)CSS文件的分工后，還需要解決另外一個(gè)重要問題：在不同模塊中使用了相同的標(biāo)簽，比如說都使用了P標(biāo)簽，它們的樣式并不相同，那么，應(yīng)該把標(biāo)簽P的不同樣式定義放到一起，還是分散到各個(gè)模塊組團(tuán)里面去？筆者認(rèn)為，采用哪種方式，要看實(shí)際情況而定，比如說，相同標(biāo)簽要顯示的樣式有七八種甚至更多，那么，最好是把它們歸類到一塊，如果只是有零星差異，則讓它歸屬各個(gè)模塊的代碼群更為合適。但有一個(gè)原則，兩種方式只采取其中一種，要么全部相同標(biāo)簽歸類到一起，要么都分散到各個(gè)模塊群去，否則很容易造成混亂，也不便于其他人接手維護(hù)。

筆者在實(shí)際教學(xué)過程中，發(fā)現(xiàn)有很多學(xué)生都對(duì)網(wǎng)頁制作感到迷茫，不知道應(yīng)該如何最大限度地提高編寫代碼的效率，因此嘗試著采用新方式去教學(xué)，取得了一些效果，也贏得了學(xué)生的好評(píng)。

參考文獻(xiàn)

[1]Andy Budd.精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案[M].北京：人民郵電出版社，2006.

[2][美]威克·史密斯.寫給大家看的CSS書[M].北京：人民郵電出版社，2009.

[3]Dave Shea，Molly E.Holzschlag.CSS禪意花園[M].北京：人民郵電出版社，2007.