浅谈人才招聘网站的设计与实现

(成都师范学院计算机科学学院　四川　成都　611130)

一、研究的实现方式

(一)网页布局的实现。目前网络上存在着很多的人才招聘网站。根据调查显示，人们对于这些招聘网站的满意度很差。在功能方面上，虽然功能实现的很完善，但是网页布局杂乱，广告铺满整个网页，影响用户对于自身需求信息的获取。这样的网站对于用户体验并不友好。下文中，我们将以此展开介绍。

1.网页布局的实现。本研究网页布局设计所用的技术主要是上文提及的HTML5和CSS3。下文中，将挑选部分网站功能作为解析。

在网页的整体布局中，一个简洁明了的导航栏，往往能够让用户快速的定位到自己需要的功能。通过HTML5可以实现一个导航栏的架构。接下来我们将用部门代码为大家展示实现过程。代码如图1。

图1　导航条代码示例

导航条最简洁的实现方式是在一个div下面放一个图片作为网站logo，再加上一个ul列表，用于实现页面的导航。本研究的导航用a标签作为网站的跳转连接。ul列表标签默认样式是垂直排列，我们通过CSS3的浮动(float)使整个导航栏横向排列。再加上CSS3中的样式设计，加上背景色，文字颜色等效果，一个简洁明了的人才招聘网站导航条就完成了。效果图如图2。

图2　人才招聘网站导航条效果图

人才招聘网站最重要的功能是职位搜索功能。这个功能需要放在最为显眼的地方，一般我们会将搜索框放在整个网站最为显眼的地方。也就是导航条的下方。页面布局实现代码如图3：

图3　搜索框代码示例

通过HTML5的新表单元素，我们可以实现一个最简单的搜索输入框。元素的placeholder属性，能够给这个搜索框添加提示功能，让用户知道这个搜索框能够搜索到什么信息。效果图实现如图4。表单元素放了一个span标签，标签里面添加一个搜索图标的图片元素，用户在输入信息以后可以点击搜索。点击事件的实现与用户的交互功能，我们将在下文中详解。

图4　人才招聘网站搜索功能效果图

(二)网页的用户交互实现

1.网页用户交互实现原理。网页用户交互指的是，浏览者在点击网页的栏目、超链接、以及鼠标的划入划出时，网站会根据浏览者的行为，做出相应的变化。通过HTML5和CSS3的新特性可以实现部分简单用户交互，但是，较为复杂的交互处理以及逻辑关系处理，还是需要使用JavaScript脚本语言，以及基于JavaScript的框架JQuery。下文将为大家介绍人才招聘网站的用户交互实现。

2.网页用户交互的实现技术。在此次研究中，我们实现用户交互优化的技术主要分为两个方面。

一是使用JavaScript和JQuery来实现用户交互。通过JavaScript的事件，配合函数，实现用户的点击，轮播的实现等交互功能。部分代码如图5。

图5　选项卡代码示例

通过上述jQuery代码，我们能够实现一个选项卡交互效果。该效果主要原理是，当用户鼠标移动到li标签上时，显示用户移动到的选项具体内容，隐藏其它li标签下面的内容。通过这些交互功能，很大程度的提升了用户的体验，以及网页布局设计的优化。让网页不仅仅局限于所有信息垂直排列，让网页的布局更加优化。

二是使用CSS层叠样式表，通过CSS的hover伪类，我们能够实现鼠标移到某些DOM上面的效果，能够突出表现信息。比如说用在在关键词上，当鼠标移上去时，使字体颜色变为红色，更加醒目。CSS还有其他能够实现用户交互的属性，比如说阴影效果(box-shadow)，鼠标移上去的手型效果(cursor)等。

二、总结与展望

(一)全文总结。本文以人才招聘网站的设计与实现，以用户体验为实现目标，构建了一个符合用户审美和用户体验高的人才招聘网站。在构建网站之前，需要对用户喜好进行调研和分析。通过这些调研和统计分析，对网站的整体架构进行设计与实现。在前期设计网站原型图时，利用所调查到的数据，进行设计网站的整体风格和页面效果，以及用户功能需求。在参考了一些当前用户常用的大型招聘网站的优劣以后，完成了原型图的设计，所以本次研究针对用户需求，借用了某些招聘网站的优势所在，比如功能界面丰富等。再添加了一些常见招聘网站不具备的功能，简化了网站的整体界面，让用户能够快速的搜寻到自己所需要的信息。

(二)后续工作展望。随着网络的发展，新技术的层出不穷，用户需求的不断变化，招聘网站必将还会有更近一步的发展。所以，对于招聘网站的设计与实现依旧是一个很热门的话题。对于人才招聘，还需要我们不断地进行探索新需求，发展新技术，是的人才招聘的功能更加完善，信息更加丰富，信息处理更加方便快捷，信息的真实性更加准确，信息传递更加迅速。随着技术的发展，在人才招聘方面，还有崭新的天地等着我们去开拓。