基于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.