展示型課程網(wǎng)站頁(yè)面布局泛型設(shè)計(jì)

摘 要：網(wǎng)站是信息化教育的主要載體，每年都有大量的課程和教學(xué)展示型網(wǎng)站被開發(fā)出來，許多部門和機(jī)構(gòu)也話費(fèi)了大量的精力和資金在網(wǎng)站開發(fā)上。本文正是探討設(shè)計(jì)一種通用的，并且頁(yè)面布局能夠根據(jù)內(nèi)容表達(dá)需要的變化的網(wǎng)站布局設(shè)計(jì)，并且通過div+css+javascript聯(lián)合作用，自由或自動(dòng)設(shè)置網(wǎng)頁(yè)層級(jí)元素的display和float兩個(gè)屬性，實(shí)現(xiàn)布局多變的網(wǎng)站模板。目前，這個(gè)模板的最初版本已經(jīng)應(yīng)用到實(shí)際中，并取得了良好的效果。

關(guān)鍵詞：課程網(wǎng)站；網(wǎng)站布局；泛型設(shè)計(jì)；流式布局；css display

中圖分類號(hào)：TP3

隨著計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)的發(fā)展，特別是近幾年來移動(dòng)網(wǎng)絡(luò)技術(shù)的崛起，校園信息化，課程開放化、網(wǎng)絡(luò)化已經(jīng)成為今天教育尤其是高等教育的一個(gè)重要發(fā)展趨勢(shì)。在教學(xué)網(wǎng)絡(luò)化發(fā)展的過程中，網(wǎng)站是教育者與受眾溝通的重要窗口。在很多院校的課程建設(shè)、教研教改、專業(yè)建設(shè)、骨干建設(shè)中，課程網(wǎng)站建設(shè)都是一個(gè)重要的內(nèi)容，并且花費(fèi)昂貴的開發(fā)維護(hù)費(fèi)用。本文正是嘗試探討通過分析各種常見教學(xué)展示型網(wǎng)站的布局規(guī)律，最終設(shè)計(jì)出一種靈活多變而且泛用的教學(xué)展示型網(wǎng)站布局，以達(dá)到節(jié)省課程網(wǎng)站開發(fā)的人力、財(cái)力，避免重復(fù)開發(fā)勞動(dòng)目的。

1 問題分析與擬解決辦法

經(jīng)過對(duì)大量的教育與課程網(wǎng)站進(jìn)行分析與對(duì)比，可以發(fā)現(xiàn)，絕大部分網(wǎng)站的主體非常的相似！再進(jìn)一步分析，這些網(wǎng)站的布局具有相似的構(gòu)造規(guī)律：（1）內(nèi)容上，網(wǎng)站的內(nèi)容是分不同模塊的，同一模塊的內(nèi)容又分不同的層次；（2）界面布局方面，絕大多數(shù)網(wǎng)站基本上由頭部標(biāo)識(shí)、導(dǎo)航、側(cè)邊欄、內(nèi)容主體和底部“頁(yè)腳”幾個(gè)部分構(gòu)成——頂部導(dǎo)航用以區(qū)分模塊，側(cè)邊欄用以區(qū)分和顯示層次，內(nèi)容在頁(yè)面中部顯示，底部“頁(yè)腳”用以顯示補(bǔ)充內(nèi)容。

通過上面的分析，可以設(shè)想，如果能夠設(shè)計(jì)出一種通用的網(wǎng)站頁(yè)面布局模板——它能夠提供多個(gè)模塊和多個(gè)層次來容納網(wǎng)站要展示的內(nèi)容，布局結(jié)構(gòu)能夠根據(jù)內(nèi)容的需要而自動(dòng)調(diào)整的話，或通過網(wǎng)站后臺(tái)設(shè)置調(diào)整，那么就可以根據(jù)需要將一個(gè)已有網(wǎng)站改頭換面為另一個(gè)需要的網(wǎng)站，從而避免開發(fā)不同課程的網(wǎng)站而做重復(fù)的工作。

2 設(shè)計(jì)與實(shí)現(xiàn)

圖1 六個(gè)層級(jí)，充分展示網(wǎng)站內(nèi)容

（http：//q1.wjxit.com/course_list.asp？cid1=435cid2=616cid3=650cid4=653cid5=729aid=1390）

①第一層級(jí)：頂部導(dǎo)航div，用于對(duì)網(wǎng)站內(nèi)容分模塊顯示；②第二層級(jí)：頂部標(biāo)簽欄；③第三層級(jí)：菜單欄；④第四層級(jí)：側(cè)邊菜單；⑤第五層級(jí)：側(cè)邊子菜單；⑥第六層級(jí)：側(cè)邊彈出菜單。

通過對(duì)大量的網(wǎng)站內(nèi)容和層次進(jìn)行總結(jié)分析，我們認(rèn)為，當(dāng)網(wǎng)站結(jié)構(gòu)層次達(dá)到6級(jí)時(shí)，絕大多數(shù)情況下，網(wǎng)站的內(nèi)容都能夠分模塊、分層次進(jìn)行表現(xiàn)了，如圖1。而更多的層次，通常很少用到。另外一方面，更多的層次也是不便于用戶理解的。很多情況下，內(nèi)容模塊和層次往往只到3～4級(jí)。因此，這里設(shè)計(jì)一個(gè)預(yù)置6個(gè)層次的網(wǎng)站布局。并且通過程序與css技術(shù)的協(xié)調(diào)實(shí)現(xiàn)不同情況下，層次的保留與去除。比如，當(dāng)一個(gè)層級(jí)下面只有一個(gè)分支時(shí)，這時(shí)候的這個(gè)分支的層級(jí)就可以被忽略，從而跳過這一個(gè)層次的顯示，引起布局的變化。

根據(jù)上面的設(shè)計(jì)，在網(wǎng)站使用過程中，根據(jù)內(nèi)容的取舍與設(shè)置，可以演變出多種形式迥異的網(wǎng)站頁(yè)面布局，而實(shí)際上它們使用的完全是相同的布局，同一種布局的變形：（a）導(dǎo)航+左側(cè)邊欄布局；（b）導(dǎo)航菜單+子菜單+右側(cè)邊欄布局；（c）導(dǎo)航菜單+子菜單布局；（d）只有側(cè)面導(dǎo)航菜單布局。

實(shí)現(xiàn)上面的效果，主要可以采取下面兩種方法：

（1）將下面的JavaScript語(yǔ)句寫在頁(yè)面的標(biāo)簽中間，并根據(jù)需要做適當(dāng)?shù)男薷?。通過判斷和jquery的hide（）函數(shù)的作用，當(dāng)當(dāng)前層級(jí)下只有一個(gè)子分支時(shí)，子層級(jí)將被忽略顯示。

（2）在輸出內(nèi)容到布局時(shí)，有服務(wù)端腳本判斷當(dāng)前子分支的數(shù)目，如果子分支數(shù)目為1，則或者沒有子分支，則設(shè)置子分支的“display”屬性為“none”，子層級(jí)將被忽略顯示。例如，當(dāng)不要側(cè)邊欄時(shí)，可以在服務(wù)器端輸出數(shù)據(jù)時(shí)仿照下面的設(shè)置：

……

以上兩種方式均可實(shí)現(xiàn)功能要求，不同的是：前一種將負(fù)擔(dān)放在客戶端，同一網(wǎng)站的不同頁(yè)面加載時(shí)，服務(wù)端發(fā)送的數(shù)據(jù)較少，適合網(wǎng)站訪問量大時(shí)使用，訪問速度相對(duì)較快；在而后一種將負(fù)擔(dān)放在服務(wù)端，服務(wù)端發(fā)送的數(shù)據(jù)相對(duì)較多，當(dāng)訪問量較小時(shí)，訪問速度快。實(shí)際上，由于層級(jí)數(shù)量不會(huì)太多，這兩種實(shí)現(xiàn)方式給用戶體驗(yàn)的差異很小。根據(jù)主體表現(xiàn)內(nèi)容的不同，有時(shí)候需要側(cè)邊欄靠左，有時(shí)候需要靠右，這一轉(zhuǎn)變可以通過程序設(shè)置側(cè)邊欄div和主題內(nèi)容樣式的float屬性去實(shí)現(xiàn)。當(dāng)float屬性為left時(shí)，側(cè)邊欄居左；float屬性為right時(shí)，側(cè)邊欄居右。

圖2 側(cè)邊欄靠左與側(cè)邊欄靠右

3 結(jié)束語(yǔ)

與眾多普通的展示型課程網(wǎng)站模板相比，這里設(shè)計(jì)出的網(wǎng)站模板，能夠根據(jù)內(nèi)容表現(xiàn)的需要，自動(dòng)或通過后臺(tái)設(shè)置調(diào)整頁(yè)面布局，使網(wǎng)站頁(yè)面效果產(chǎn)生巨大的變化。也由于它的這一特性，使得它可能通過簡(jiǎn)單的改動(dòng)，由一個(gè)網(wǎng)站變身為另一個(gè)完全不同的網(wǎng)站，從而達(dá)到避免網(wǎng)站開發(fā)重復(fù)勞動(dòng)的效果。特別適合于一個(gè)專業(yè)或者是一個(gè)機(jī)構(gòu)開發(fā)多個(gè)類似的課程網(wǎng)站或以展現(xiàn)為主要功能的網(wǎng)站時(shí)，只需開發(fā)出一個(gè)模板，其他的課程或網(wǎng)站即可以套用，從而達(dá)到大大地節(jié)省資源和勞動(dòng)的目的。

參考文獻(xiàn)：

[1]王振武.一種通用的門戶網(wǎng)站引擎研究[J].中國(guó)海洋大學(xué)學(xué)報(bào)（自然科學(xué)版），2010（06）.

[2]陳慧.DIV+CSS網(wǎng)站布局之最優(yōu)化設(shè)計(jì)[J].科技信息，2012（01）.

作者簡(jiǎn)介：宋寧（1985-），男，貴州赫章人，助教，本科，主要從事計(jì)算機(jī)輔助模具設(shè)計(jì)與制造方面的研究與教學(xué)。

作者單位：四川宜賓職業(yè)技術(shù)學(xué)院現(xiàn)代制造工程系，四川宜賓 644003