基于HTML5+CSS3技術的“433”學生成才信息展示系統

趙曉凡 高天棟 李文迪 陳燕

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

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

一、引言

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

二、系統首頁設計

系統首頁有四個板塊，分別是引導欄，中間內容欄（導航欄，文字滾動，輪播圖，選項卡與圖片特效），頁腳與回頂部功能欄，首頁以藍色漸變為基調，文字內容與logo和圖片素材等由校園官網和個人收集獲取。本頁面以簡單操作的功能交互來實現“433”學生成才功能相關政策文件的介紹。系統首頁界面如下圖1所示：

1、引導欄

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

2、導航欄：

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

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

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

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

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

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

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

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

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

1、左側鼠標交互二級菜單的設計

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

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

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

2、時間軸特效的設計

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

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

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

1、活動預告文字滾動的實現：

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

$（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（）

}）

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

2、活動新聞的實現：

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

右邊設置一個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心得”頁面功能設計

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

六、總結

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

參考文獻：

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

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

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

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

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

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

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

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