校园招聘网站需求分析
2.1 招聘需求
本次合作方是广州市黄埔区人力资源和社会保障局、广州开发区人力资源和保障局，主要面向2019届应届大学生进行2019校园招聘的官方网站，用于为开发区内企业引进人才，促进开发区发展。
经过前期沟通，合作方的具体招聘需求如下：
1.体现青春与活力，因为招聘对象为应届大学生，所以青春与活力的主题更适合作为该项目主题；
2.介绍开发区情况，给求职应届生一个良好的第一印象；
3.链上政府官网和挂上微信公众号；
4.配合合作方的线下校招活动，既展示校招活动地点与具体时间等信息；
5.在校招网页上链上各个参与招聘企业的官网链接；
6.招聘页面需要设计一个职位总需求表的下载按钮，还要挂上各个公司的简介；
7.自适应手机端；
8.展示页页面需要轮播图。
合作方给出的素材资源，其中文字资源共计5879个字包括8个公司简介，图片资源共计21张图片，链接10个包括8个公司官网链接、1个政府官网链接、一个开发区视频链接和1张Excel表格，详情如表2.1所示。
表2.1素材资源
2.2 布局分析
1、校园招聘网站的常用布局
校园招聘网站常常分为PC端页面和H5页面，即手机端页面，PC端页面在一般情况下需要自适应手机端。在PC端页面中，常用布局有以下几种。
图2.1PC端多页面上下框架型网站布局
（1）PC端多页面上下框架型网站布局，既整个网页采用由上到下的方式布局，如图2.1所示。
（2）左右框架型网站布局，既整个网页在布局上从左到右，划分布局，如图2.2所示。
图2.2PC端多页面左右框架型网站布局
（3）单页面单屏选项卡切换式布局，网页在页面中没有外部滚动条，可以有自定义滚动条，所有内容在一个整屏页面中展示，如图2.3所示。
图2.3PC端单页面单屏选项卡切换式布局
（4）多页面单屏模态框，页面实际上是一个页面，切换由模态框、选项卡进行，切换效果多为滑动，如图2.4所示。
图2.4PC端多页面单屏模态框布局
（5）H5页面中有单页面布局，即手机端页面，在微信、QQ和手机浏览器中展示，主要特点为其
独特的分辨率，如图2.5所示。
图2.5H5单页面布局
2、项目中采用的布局
在整个项目中，根据用户的需求来选择整体布局。
（1）体现青春与活力、展示页页面需要轮播图的需求，整个页面的风格尽量统一，在整体布局上采用多页面上下框架型网站布局和整屏单页面布局；
（2）根据自适应手机端的需求，也要用到H5单页面布局。
2.3 技术分析
1、校园招聘网站的常用技术
（1）选项卡
这个技术在实际操作中经常用到，主要原理是：第一步是获取元素，利用for循环历遍给按钮添加点击事件或鼠标悬浮事件，第二步通过CSS把所有的按钮样式设置伪类，也可以用for循环历遍把所有的按钮样式的显示属性设置的空，然后添加按钮响应样式，第三步利用CSS或者JS把当展示部分显示出来，显示属性设置为block。具体效果如图2.6所示。
图2.6选项卡切换
（2）轮播图
这项技术主要用在页面展示中，例如banner图的轮播切换和页面中其他地方的图片切换等。轮播图的主要原理如下：将所有图片添加浮动依次排列，并给其添加一个父级元素，留一个部分显示图片，并将其他图片隐藏。将图片设置成对定位，利用JS控制图片CSS的属性，从起始位置到结束位置，需要先算出这两者间的像素距离，添加定时器，通过距离差值和移动的时间间隔，计算出每次需要移动的像素大小，利用定时器控制，实现图片的移动，然后开始切换。
图2.7轮播图效果
由于轮播图在实际工作中的需求不统一，手动写占用大量时间，不利于提升效率，所以在工作中网页设计师们经常用到插件来进行轮播图的处理，常用的插件有jQuery、swiper 等，如图2.7所示。
（3）导航栏特效
导航栏对于一个网站的用户体验来说是至关重要的，因为根据用户的浏览习惯、从左到右，从上到
图2.8导航栏效果
下，当他们进入一个新的页面，导航栏通常是他们最先看到的地方。用户对于产品的第一印象是很重要
的，因为它会一直伴随接下来的使用过程，而且第一印象无法更改。在网站中起到的作用如名称所示——导航作用，便于用户了解网站中包含的具体页面，并指引用户浏览网站。导航栏一般情况下具有按钮、
浮动、伸展等效果，具体效果以滑动、反转、渐变等特效相结合而形成，最常见的就是下拉菜单特效了。虽然导航栏特效相对来说简单一些，但这是网页中必不可少的元素，称得上是一项关键技术，如图2.8所示。
（4）JSON数据处理
JSON是一种易于人阅读和编写的数据交换格式。同时也易于机器解析和生成。在制作校园招聘网页中，如果掌握了JSON数据处理方法，将会大大提高工作效率。在日常工作中，除了特定的校园招聘项目需要调用后台接口获取数据，大部分项目需要网页设计师自行处理数据，这些数据包括职位名称、职位链接、职位详情等等，通常结构比较简单，数据总量较少的情况下，及其容易处理，但在数据总量较多、数据结构相对复杂的时候，就需要用JSON 来帮忙提高效率了，如图2.9所示。
图2.9JSON应用场景
2、项目中采用的技术
（1）根据展示页页面需要轮播图，采用的技术有轮播图技术，因为项目较简单，所以该项目中的轮播图效果一致，且在制作过程中不采用插件，具体形式是四张图片轮流切换播放；
（2）合作方要求提供职位需求总表的下载按钮；
（3）因为合作方提供的职位较多，所以在职位页面采用的技术有选项卡、和JSON数据处理技术；
（4）导航栏部分将采用的技术有简单的导航栏特效来完善网页之间的过渡。