校园招聘网站需求分析.docx

《校园招聘网站需求分析.docx》由会员分享，可在线阅读，更多相关《校园招聘网站需求分析.docx（4页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、校园招聘网站需求分析2.1招聘需求本次合作方是广州市黄埔区人力资源和社会保障局、广州开发区人力资源和保障局，主要面向2022届应届大学生进行2022校园招聘的官方网站，用于为开发区内企业引进人才，促进开发区发展。经过前期沟通，合作方的具体招聘需求如下：合作方给出的素材资源，其中文字资源共计5879个字包括8个公司简介，图片资源共计21张图片，链接10个包括8个公司官网链接、1个政府官网链接、一个开发区视频链接和1张E某cel表格，详情如表2.1所示。表表2.1素材资源资源种类政府资源企业资源资源总数文字资源2311字3568字5879字图片资源13张8张21张链接资源2条8条10条E某cel表

2、格1张0张1张2.2布局分析11、校园招聘网站的常用布局校园招聘网站常常分为PC端页面和H5页面，即手机端页面，PC端页面在一般情况下需要自适应手机端。在PC端页面中，常用布局有以下几种。图2.1PC端多页面上下框架型网站布局（1）PC端多页面上下框架型网站布局，既整个网页采用由上到下的方式布局，如图2.1所示。（2）左右框架型网站布局，既整个网页在布局上从左到右，划分布局，如图2.2所示。图2.2PC端多页面左右框架型网站布局（3）单页面单屏选项卡切换式布局，网页在页面中没有外部滚动条，可以有自定义滚动条，所有内容在一个整屏页面中展示，如图2.3所示。图2.3PC端单页面单屏选项卡切换式布局

3、（4）多页面单屏模态框，页面实际上是一个页面，切换由模态框、选项卡进行，切换效果多为滑动，如图2.4所示。图2.5H5单页面布局22、项目中采用的布局在整个项目中，根据用户的需求来选择整体布局。（1）体现青春与活力、展示页页面需要轮播图的需求，整个页面的风格尽量统一，在整体布局上采用多页面上下框架型网站布局和整屏单页面布局；（2）根据自适应手机端的需求，也要用到H5单页面布局。2.3技术分析11、校园招聘网站的常用技术（11）选项卡这个技术在实际操作中经常用到，主要原理是：第一步是获取元素，利用for循环历遍给按钮添加点击事件或鼠标悬浮事件，第二步通过CSS把所有的按钮样式设置伪类，也可以用f

4、or循环历遍把所有的按钮样式的显示属性设置的空，然后添加按钮响应样式，第三步利用CSS或者JS把当展示部分显示出来，显示属性设置为block。具体效果如图2.6所示。图2.6选项卡切换（22）轮播图这项技术主要用在页面展示中，例如banner图的轮播切换和页面中其他地方的图片切换等。轮播图的主要原理如下：将所有图片添加浮动依次排列，并给其添加一个父级元素，留一个部分显示图片，并将其他图片隐藏。将图片设置成对定位，利用JS控制图片CSS的属性，从起始位置到结束位置，需要先算出这两者间的像素距离，添加定时器，通过距离差值和移动的时间间隔，计算出每次需要移动的像素大小，利用定时器控制，实现图片的移动

5、，然后开始切换。图2.7轮播图效果由于轮播图在实际工作中的需求不统一，手动写占用大量时间，不利于提升效率，所以在工作中网页设计师们经常用到插件来进行轮播图的处理，常用的插件有jQuery、wiper等，如图2.7所示。（33）导航栏特效导航栏对于一个网站的用户体验来说是至关重要的，因为根据用户的浏览习惯、从左到右，从上到图2.8导航栏效果下，当他们进入一个新的页面，导航栏通常是他们最先看到的地方。用户对于产品的第一印象是很重要的，因为它会一直伴随接下来的使用过程，而且第一印象无法更改。在网站中起到的作用如名称所示导航作用，便于用户了解网站中包含的具体页面，并指引用户浏览网站。导航栏一般情况下具

6、有按钮、浮动、伸展等效果，具体效果以滑动、反转、渐变等特效相结合而形成，最常见的就是下拉菜单特效了。虽然导航栏特效相对来说简单一些，但这是网页中必不可少的元素，称得上是一项关键技术，如图2.8所示。（44）NJSON数据处理JSON是一种易于人阅读和编写的数据交换格式。同时也易于机器解析和生成。在制作校园招聘网页中，如果掌握了JSON数据处理方法，将会大大提高工作效率。在日常工作中，除了特定的校园招聘项目需要调用后台接口获取数据，大部分项目需要网页设计师自行处理数据，这些数据包括职位名称、职位链接、职位详情等等，通常结构比较简单，数据总量较少的情况下，及其容易处理，但在数据总量较多、数据结构相对复杂的时候，就需要用JSON来帮忙提高效率了，如图2.9所示。图2.9JSON应用场景22、项目中采用的技术