李 成

（長(zhǎng)沙民政職業(yè)技術(shù)學(xué)院，湖南長(zhǎng)沙410004）

立足于學(xué)生素質(zhì)全面發(fā)展的教與學(xué)是現(xiàn)代職業(yè)教育的一個(gè)基本特點(diǎn)。校園活動(dòng)不僅能豐富大學(xué)生課余生活，而且對(duì)大學(xué)生素質(zhì)的全面提高也有著極其重要的意義。它是學(xué)生接觸服務(wù)社會(huì)的通道，是學(xué)生觀察了解社會(huì)的窗口，是學(xué)生社會(huì)意識(shí)形成的催化劑。通過(guò)內(nèi)容豐富、形式多樣的校園社團(tuán)活動(dòng),能促進(jìn)校園文化建設(shè)向深層次、高質(zhì)量方向發(fā)展,從而給學(xué)生的課余生活提供了活潑、高雅、寓教于樂(lè)的新天地，形成校園濃厚的學(xué)術(shù)氛圍、多層次的社會(huì)服務(wù)體系和活潑健康的校園文化氣息[1]。

隨著校園活動(dòng)的蓬勃發(fā)展，校園活動(dòng)高效管理與人員參與合理性成為目前校園活動(dòng)管理的新挑戰(zhàn)。本系統(tǒng)的開(kāi)發(fā)主要以校園活動(dòng)網(wǎng)上預(yù)約與報(bào)名等形式，實(shí)現(xiàn)校園活動(dòng)舉辦的公開(kāi)化、透明化。校園活動(dòng)預(yù)約平臺(tái)對(duì)校園活動(dòng)開(kāi)展進(jìn)行預(yù)約制與信息化管理，一方面提高了校園活動(dòng)舉行的透明度與公開(kāi)度，另一方面可以很大程度地減輕活動(dòng)管理人員的工作壓力，提高工作效率，使校園活動(dòng)的開(kāi)展更加合理，對(duì)全面提升學(xué)生素質(zhì)有著重要意義。

一、WEB標(biāo)準(zhǔn)

1、WEB標(biāo)準(zhǔn)簡(jiǎn)介

WEB標(biāo)準(zhǔn)是由W3C、ECMA等機(jī)構(gòu)聯(lián)合起草與發(fā)布的一系列標(biāo)準(zhǔn)的集合，如：CSS、HTML、XHTML、Javascript等，目的是對(duì)WEB表現(xiàn)層的技術(shù)標(biāo)準(zhǔn)進(jìn)行統(tǒng)一，通過(guò)不同瀏覽器或終端向用戶展示同一效果的信息內(nèi)容[2]。WEB標(biāo)準(zhǔn)是由表現(xiàn)（Presentation）、結(jié)構(gòu)（Structure）和行為（Behavior）三部分組成標(biāo)準(zhǔn)集，如下圖所示:

圖1.web標(biāo)準(zhǔn)結(jié)構(gòu)

（1）表現(xiàn)：主要對(duì)結(jié)構(gòu)化信息進(jìn)行版式、字體、顏色與大小等樣式控制，用于表現(xiàn)的WEB標(biāo)準(zhǔn)技術(shù)主要就是CSS技術(shù)，目前遵循的就是W3C推出的CSS2.0，其目的是為了實(shí)現(xiàn)表現(xiàn)與結(jié)構(gòu)分離。

（2）結(jié)構(gòu)：主要用于WEB結(jié)構(gòu)化設(shè)計(jì)，WEB標(biāo)準(zhǔn)技術(shù)中主要對(duì)HTML(超文本標(biāo)記語(yǔ)言)、XHTML（可擴(kuò)展超文本標(biāo)記語(yǔ)言）、XML（可擴(kuò)展標(biāo)記語(yǔ)言）進(jìn)行了定義。

（3）行為：對(duì)WEB文檔內(nèi)部的模型與交互行為進(jìn)行定義，主要包括DOM(文檔對(duì)象模型)與ECMAscript（由CMA制定的JAVASCRIPT標(biāo)準(zhǔn)）。

2、WEB標(biāo)準(zhǔn)優(yōu)點(diǎn)

WEB標(biāo)語(yǔ)主要優(yōu)勢(shì)是對(duì)WEB內(nèi)容進(jìn)行表現(xiàn)、結(jié)構(gòu)與行為的分離。主要體現(xiàn)如下：

（1）文件下載與頁(yè)面瀏覽速度更快，比傳統(tǒng)WEB設(shè)計(jì)至少節(jié)省50%的代碼與流量；

（2）表現(xiàn)與結(jié)構(gòu)分離的方法使改版更容易，只需要修改CSS文件就可以從版式、顏色等對(duì)網(wǎng)站進(jìn)行改版，煥然一新；

（3）符合SEO要求，更容易被搜索引擎訪問(wèn)、收錄；

（4）更多的瀏覽器與終端兼容，提供優(yōu)質(zhì)的用戶訪問(wèn)體驗(yàn)；

（5）更多的用戶樣式體驗(yàn)。用戶可以根據(jù)WEB提供的多樣式、多風(fēng)格來(lái)選擇表現(xiàn)效果[3]。

3、CSS布局與Table布局的區(qū)別

CSS它是控制網(wǎng)頁(yè)布局樣式的基礎(chǔ)并真正能夠做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML對(duì)樣式而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置進(jìn)行像素級(jí)的精確控制，并能夠進(jìn)行初步頁(yè)面交互設(shè)計(jì)[4]。其布局方式對(duì)比如下：

圖2.傳統(tǒng)的Table布局與CSS布局對(duì)比圖

相對(duì)于傳統(tǒng)布局主要有以下幾個(gè)優(yōu)勢(shì)：①瀏覽器支持完善；②表現(xiàn)與結(jié)構(gòu)分離；③樣式設(shè)計(jì)控制功能強(qiáng)大；④繼承性能優(yōu)越（層疊處理）[5]。

二、系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

1、系統(tǒng)結(jié)構(gòu)設(shè)計(jì)

系統(tǒng)采用B/S架構(gòu)，在WEB2.0標(biāo)準(zhǔn)下，利用C#+Sqlserver2008開(kāi)發(fā)，通過(guò)從校園現(xiàn)有信息系統(tǒng)中同步其學(xué)生基本信息與課表信息作為預(yù)約對(duì)象數(shù)據(jù)，各二級(jí)學(xué)院與學(xué)工處（活動(dòng)主管部門）通過(guò)管理平臺(tái)發(fā)布其活動(dòng)主題、舉辦時(shí)間、地點(diǎn)、參與人員、活動(dòng)人數(shù)、預(yù)約模式、預(yù)約截止時(shí)間等信息，經(jīng)過(guò)主管部門審核后提交到預(yù)約平臺(tái)。系統(tǒng)可根據(jù)活動(dòng)相關(guān)要求對(duì)預(yù)約對(duì)象進(jìn)行審核，對(duì)預(yù)約活動(dòng)進(jìn)行參與人員統(tǒng)計(jì)報(bào)表、黑名單設(shè)置等操作。其系統(tǒng)結(jié)構(gòu)設(shè)計(jì)如下：

圖3.校園活動(dòng)預(yù)約平臺(tái)架構(gòu)

1、系統(tǒng)功能設(shè)計(jì)

系統(tǒng)有學(xué)生、院部、系統(tǒng)管理員三個(gè)角色。學(xué)生主要有校園活動(dòng)的查看、預(yù)約、預(yù)約/報(bào)名結(jié)果查詢、新聞通知查看等功能；院部負(fù)責(zé)校園活動(dòng)的發(fā)布、新聞通知的發(fā)布/修改/刪除及黑名單管理；系統(tǒng)管理員主要有院部用戶信息管理、新聞/通知管理、校園活動(dòng)審核與管理、學(xué)生信息導(dǎo)入與管理、黑名單管理等功能，其功能模塊如下：

圖4.校園活動(dòng)預(yù)約平臺(tái)功能結(jié)構(gòu)

1、系統(tǒng)實(shí)現(xiàn)

校園活動(dòng)預(yù)約平臺(tái)主要實(shí)現(xiàn)了活動(dòng)發(fā)布及管理、新聞通知管理、黑名單管理、用戶信息管理等模塊。以下對(duì)校園活動(dòng)預(yù)約平臺(tái)中活動(dòng)發(fā)布與管理及查看預(yù)約核心模塊進(jìn)行闡述。

(1)校園活動(dòng)預(yù)約管理模塊

校園活動(dòng)預(yù)約管理主要是對(duì)校園活動(dòng)預(yù)約進(jìn)行發(fā)布、預(yù)約情況統(tǒng)計(jì)、預(yù)約名單管理、活動(dòng)修改、刪除等操作，預(yù)約管理如下圖所示：

圖5.校園活動(dòng)預(yù)約管理界面

其中主要包括活動(dòng)主題、活動(dòng)進(jìn)行狀況、預(yù)約狀況、已預(yù)約/報(bào)名狀況、已報(bào)名人數(shù)、發(fā)布單位、活動(dòng)舉行時(shí)間、發(fā)布日期、查看/導(dǎo)出活動(dòng)名單等信息。

(2)校園活動(dòng)發(fā)布模塊

校園活動(dòng)發(fā)布主要分成院部發(fā)布與主管部門直接發(fā)布兩種類型，院部發(fā)布的活動(dòng)需要經(jīng)過(guò)主管部門修改審核后方可預(yù)約，主管部門發(fā)布的活動(dòng)可直接預(yù)約，其如下圖所示：

圖6.校園活動(dòng)發(fā)布模塊

校園活動(dòng)信息發(fā)布主要包括活動(dòng)名稱（主題）、人數(shù)、舉辦時(shí)間、預(yù)約人數(shù)、活動(dòng)地點(diǎn)、預(yù)約模式、舉辦單位、接受預(yù)約開(kāi)始時(shí)間、接受預(yù)約結(jié)束時(shí)間、參與對(duì)象、是否開(kāi)啟預(yù)約、活動(dòng)內(nèi)容等信息

(3)校園活動(dòng)查看及預(yù)約模塊

校園活動(dòng)查看及預(yù)約模塊主要包括查看活動(dòng)通知、預(yù)約流程、查看熱點(diǎn)活動(dòng)與活動(dòng)報(bào)名/預(yù)約等功能，如下圖所示：

圖7.校園活動(dòng)查看及預(yù)約界面

三、WEB標(biāo)準(zhǔn)下系統(tǒng)應(yīng)用效果分析

系統(tǒng)自正常運(yùn)行以來(lái)，已有19個(gè)校園活動(dòng)超過(guò)15000人次預(yù)約，其系統(tǒng)可用性與穩(wěn)定性得到證實(shí)，其WEB標(biāo)準(zhǔn)下的系統(tǒng)應(yīng)用主要有以下幾個(gè)優(yōu)點(diǎn)：

頁(yè)面瀏覽速度得到提高，代碼量相比傳統(tǒng)布局大大減少；

瀏覽器兼容性得到提高，到目前為止，支持包括IE（6/7/8）、360、火狐、谷歌等；

CSS樣式布局使頁(yè)面更加多樣，可以滿足傳統(tǒng)布局所不支持的頁(yè)面效果，提高了用戶體驗(yàn)。

以校園活動(dòng)預(yù)約平臺(tái)首頁(yè)在WEB標(biāo)準(zhǔn)與傳統(tǒng)布局方式下的頁(yè)面代碼量及訪問(wèn)速度，通過(guò)360瀏覽器內(nèi)置測(cè)速工具實(shí)驗(yàn)對(duì)比結(jié)果如下：

圖8.WEB標(biāo)準(zhǔn)下的預(yù)約平臺(tái)首頁(yè)測(cè)速結(jié)果

圖9.傳統(tǒng)table下的預(yù)約平臺(tái)首頁(yè)測(cè)速結(jié)果

從以上實(shí)驗(yàn)數(shù)據(jù)得出在WEB標(biāo)準(zhǔn)下的校園活動(dòng)預(yù)約平臺(tái)首頁(yè)大小為2.3K，其瀏覽器加載速度為20MS,在傳統(tǒng)table下的首頁(yè)大小為4.1K，加載速度為42MS。實(shí)驗(yàn)結(jié)果表明WEB標(biāo)準(zhǔn)下的布局代碼量減少43%，其瀏覽速度提高55%。

[1]石鵬.社團(tuán)文藝對(duì)大學(xué)生素質(zhì)教育的意義性思考[J].理論觀察,2005,(3).

[2]季興東.應(yīng)用Web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)的實(shí)踐及思考[J].泰州職業(yè)技術(shù)學(xué)院學(xué)報(bào),2008,(3).

[3]李超.CSS網(wǎng)站布局實(shí)錄-基于WEB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)指南[M].科學(xué)出版社,2007.

[4]張偉宏,陳正棟.淺談DIV+CSS與TABLE布局[J].福建廣播電視大學(xué)學(xué)報(bào),2012,(6).

[5]梁靜琳.DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].武漢工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2009,(1).