基于HTML5+CSS3技術(shù)的“433”學生成才信息展示系統(tǒng)

趙曉凡 高天棟 李文迪 陳燕

摘 要：“433”學生成才工程是我院為落實立德樹人根本任務，助力新時代學生成長成人成才而推進實施的一項全新工程。自工程實施以來，全院上下積極響應，認真落實。本設計目的是以信息化手段展示學院“433”工程實施的政策文件以及成才典型等信息，以便于讓全院師生更加精準的實施工程內(nèi)容，實時掌握工程實施成果。

關(guān)鍵詞：“433”學生成才功能;信息展示;HTML5+CSS3

一、引言

新時代新形勢，高等職業(yè)教育對培養(yǎng)高素質(zhì)技術(shù)技能人才提出了新的更高要求。2019年4月11日，我院為加快推進第三次黨代會“新時代培養(yǎng)學生要有新作為”的總體部署，特制定“433”學生成才工程。自當月起，學院各職能部門、二級學院助力學生在校三年期間全部參與成才工程。學院培育100名優(yōu)秀指導教師，且每年評選20個“433”學生成才典型。全員全方位全過程加強指導落實，跟蹤記錄每一名學生的成才過程。探索建立科學的具有特色的助力學生成才體系。學院高度重視該工程實施，定時定期開展不同形式、不同主題的針對學生工作隊伍推進落實“433”學生成才工程的專題培訓，為全面貫徹落實學院第三次黨代會對“學生培養(yǎng)有新作為”的新要求，推進實施“433”學生成才工程，切實提高新時代助力學生成長成人成才的本領(lǐng)?！?33”學生成才工程的實施主體是全體教職工和學生，要求全校教職員工積極做好學生的知心人、熱心人、引路人，助力學生成長成人成才。自工程實施起，學院著力從學生的成長特點和實際需求出發(fā)，力求從課程、科研、實踐、文化、網(wǎng)絡、心理、管理、服務、資助、組織等多個維度形成合力，打通育人環(huán)節(jié)，創(chuàng)新育人模式，整合育人體系，實現(xiàn)全員育人、全程育人、全方位育人。本設計目標是通過信息化手段，全方位展示學院“433”學生成才工程實施文件以及學生成才典范，通過信息展示，讓全院師生進一步了解工程的實施路徑、實施方法、實施手段，以及工程的實施成果。

二、系統(tǒng)首頁設計

系統(tǒng)首頁有四個板塊，分別是引導欄，中間內(nèi)容欄（導航欄，文字滾動，輪播圖，選項卡與圖片特效），頁腳與回頂部功能欄，首頁以藍色漸變?yōu)榛{(diào)，文字內(nèi)容與logo和圖片素材等由校園官網(wǎng)和個人收集獲取。本頁面以簡單操作的功能交互來實現(xiàn)“433”學生成才功能相關(guān)政策文件的介紹。系統(tǒng)首頁界面如下圖1所示：

1、引導欄

在“首頁”頁面的引導欄部分是系統(tǒng)相關(guān)logo。在頁面中能看到本校官方logo與所屬二級學院“信息學院”的logo，最左邊的“433成才”logo簡潔明了，用三個廣告藝術(shù)形體的數(shù)字表達的本系統(tǒng)的主題“433學生”成才工程信息展示。如下圖2所示：

2、導航欄：

引導欄下面是系統(tǒng)導航欄，導航欄包含系統(tǒng)的四大主題模塊，分別是“首頁（433工程簡介）”，“433”學生風采展示頁，“433”相關(guān)活動的助力頁和“433”工程的學生心得體會頁面。導航欄引用jQuery插件和HTML+CSS等實現(xiàn)。在功能實現(xiàn)上，主要使用ID名類名等命名必要的標簽元素，方便在層疊樣式表與JS源代碼中方便引用。如下圖3所示。

系統(tǒng)首頁中的其他模塊都是使用相同的方法來顯示信息的展示，比如先使用HTML5標記搭建區(qū)域框架，設計重要標簽的ID或類名，然后編寫CSS樣式表文件，最后為了實現(xiàn)元素的交互，編寫JS代碼或者引入jQuery文件來實現(xiàn)相關(guān)信息的展示功能。其中，引入外部文件的代碼如下：

（1）CSS樣式表文件的引入：

<link rel="stylesheet" href="樣式表文件路徑">

（2）JQurey與JavaScript文件的引入：

<script src="文件路徑"></script>

另外JavaScript也可以寫在HTML源代碼中，但是這樣會影響整體排版觀感，所以通常都是寫入文件中鏈入。

三、“433風采”頁面功能設計

系統(tǒng)第二大模塊為“433風采”，目的是為了展現(xiàn)經(jīng)貿(mào)學子的成才典型以及他們的成才路徑，為其他學弟學妹提供榜樣和幫助。該頁面主要分為四個板塊，如下圖4所示，其中引導欄和頁腳與首頁頁面基本相同，下面就其余板塊做詳解。

1、左側(cè)鼠標交互二級菜單的設計

頁面左側(cè)鼠標交互二級菜單，在HTML5+CSS3技術(shù)基礎(chǔ)上，使用了Bootstrap框架和jQuery庫技術(shù)大件了可交互的二級菜單，使用該二級菜單可以選擇查看各年級的優(yōu)秀學子信息。點擊按鈕實現(xiàn)菜單向左隱藏和查看，引用了如下查看和框架來實現(xiàn)。

<script src="../js/fengcai/jQuery-1.8.3.min.js"

<script src="../js/fengcai/bootstrap.min.js"></script>

2、時間軸特效的設計

頁面中間時間軸學生信息內(nèi)容在鼠標滑動時可以實現(xiàn)變換背景顏色效果。選中某個學生名字可以進入該學生詳情頁面，如下圖5所示。時間軸效果的實現(xiàn)過程是先寫好網(wǎng)頁基本框架，設置好頁面樣式，最后引用jQurey插件和JavaScript代碼來實現(xiàn)交互效果。

四、“433助力”頁面功能設計

本頁面采用上中下界面局部結(jié)構(gòu)，頁面主要內(nèi)容是“433”工程相關(guān)活動的展示，主要包含“433”工程相關(guān)活動的預告、新聞和活動特色三個板塊。三個板塊內(nèi)容分別使用了文字動畫，輪播圖，TAB選項卡和鼠標與圖片交互效果。功能上基本采用jQuery動畫技術(shù)實現(xiàn)。頁面效果如下圖6所示。

1、活動預告文字滾動的實現(xiàn)：

“433”學生成才工程是學院一個浩大長遠的工程，目的是培養(yǎng)更多的優(yōu)秀學子，提升學生們的個人素養(yǎng)，學習能力等，所以學院會定期精心策劃、組織不同形式、不同類型的活動來培養(yǎng)學生的綜合素養(yǎng)。全院師生可以通過該頁面及時了解到學院活動的安排和通告等，以免錯過活動安排。其中，活動消息滾動的核心代碼如下：

$（function （） {/*消息滾動*/

var $ul = $（'.roll ul'）;//定義變量

var timeID;

function roll（） {

clearInterval（timeID）; //清除變量timeID

timeID = setInterval（function （） {//為變量timeID賦值

clearInterval（timeID）;

$ul.animate（{ top： "0px" }， 2500， function （） {//設置滾動高度與時差

$ul.find（"li：first"）.removeClass（）.addClass（'roll_hide'）.appendTo（$ul）;

for（var i=0;i<5;i++）{//賦值

$ul.find（"li"）.eq（i）.removeClass（）.addClass（'roll_'+ （i+1） +''）

}roll（）}）

}， 1000）;}//滾動時間

roll（）

}）

該功能代碼在獲取系統(tǒng)源代碼中的類名之后，通過設置滾動時間，數(shù)量與距離來實現(xiàn)活動預告文字的滾動效果。

2、活動新聞的實現(xiàn)：

在活動新聞這一內(nèi)容欄目中最左側(cè)設置一個輪播圖，展示了學院的微信公眾號，以便讓全院師生可以更便捷的獲取學院關(guān)于“433”成才活動的通知公告信息，為增添頁面UI效果，還設置了一些活動照片，通過實時更換照片，可以讓師生門第一時間了解相關(guān)活動的內(nèi)容。

右邊設置一個Tab選修卡功能的展示欄，可以快速查看活動圖片和活動信息。同時設置了鼠標的交互效果，如鼠標放入圖片，圖片會變大，文字背景會變色等，可以讓頁面看起來更豐富。其中的核心代碼如下：

.buttons2：hover{width：62px;height：17px;box-shadow：4px 4px 4px #a3d8f4;}

// 鼠標移入邊框大小變化

.buttonHover{background：linear-gradient（45deg，#7579e7，#a3d8f4）;border-bottom：solid #a3d8f4 4px;}// 鼠標移入背景顏色變化

buttons：hover{background：background：linear-gradient（ 45deg，#7579e7，#a3d8f4）;border-bottom：solid #a3d8f4 4px;}// 鼠標移入背景顏色變化

.img1 img{ cursor： pointer;transition： all 0.6s;} //圖片變化速度

五、“433心得”頁面功能設計

本頁面設計的目的是讓學生們通過系統(tǒng)，可以發(fā)表一些心得感言。單擊“點擊留言”按鈕。將姓名和留言分別寫入單行和多行文本框，技術(shù)上采用jQuery框架，通過追加的方式，將每位學生的留言動態(tài)顯示到頁面上。頁面效果如下圖7所示。

六、總結(jié)

隨著我院“433”學生成才工程的執(zhí)行以來，取得了不錯的效果，同學們有了明確的目標，實現(xiàn)的路徑，我院立足將“433”發(fā)展成學院特色，以更好的培養(yǎng)新時代的大學青年。本設計基于學生角度的“433”成才信息展示系統(tǒng)，在契合我院發(fā)展需要的同時，在一定程度上為學生帶來了便利。

參考文獻：

[1] 危華明，陳積常，汪小威.基于HTML5+CSS3.0的響應式網(wǎng)站前端設計與實現(xiàn)[J]. 福建電腦，2018，34（05）：15+31.

[2] 葉潮流，馬林山.基于HTML5+CSS3+jQuery的響應式布局網(wǎng)頁設計[J].梧州學院學報，2018，28（03）：22-35.

[3] 李剛.《瘋狂HTML5+CSS3+JavaScript講義（第二版）[M]》 出版地：電子工業(yè)出版社 出版年：2017.5.

[4] 黑馬程序員.《網(wǎng)頁設計與制作項目教程（HTML+CSS+JavaScript）[M]）》出版地：人民教育出版社 ?出版年：2017.1.

[5] 焦新偉.HTML5在WEB前端開發(fā)中的應用研究[J]. 網(wǎng)絡安全技術(shù)與應用，2020（04）：73-75.

[6] 李桂林.HTML5在WEB前端開發(fā)中的應用研究[J].計算機產(chǎn)品與流通，2020（08）：17.

[7] 劉麗媛.基于HTML5技術(shù)的微商城設計與實現(xiàn)[J].電腦編程技巧與維護，2020（05）：53-55.

[8] 李正君.HTML5新技術(shù)的應用設計與實現(xiàn)技巧探究[J].科技傳播，2020，12（06）：128-129.