校园招聘网站需求分析

1、校园招聘网站需求分析2.1 招聘需求本次合作方是广州市黄埔区人力资源和社会保证局、广州开发区人力资源和保证局,主要面向2021届应届大学生进行2021校园招聘的官方网站,用于为开发区内企业引进人才,促进开发区开展.经过前期沟通,合作方的具体招聘需求如下：1 .表达青春与活力,由于招聘对象为应届大学生,所以青春与活力的主题更适合作为该工程主题；2 .介绍开发区情况,给求职应届生一个良好的第一印象；3 .链上政府官网和挂上微信公众号；4 .配合合作方的线下校招活动,既展示校招活动地点与具体时间等信息；5 .在校招网页上链上各个参与招聘企业的官网链接；6 .招聘页面需要设计一个职位总需求表的下载按钮

2、,还要挂上各个公司的简介；7 .自适应端；8 .展示页页面需要轮播图.合作方给出的素材资源,其中文字资源共计5879个字包括8个公司简介,图片资源共计21张图片,链接10个包括8个公司官网链接、1个政府官网链接、一个开发区视频链接和1张Excel表格,详情如表2.1所不.表2.1素材资源资源种类政府资源企业资源资源总数文字资源2311字3568字5879字图片资源13张8张21张链接资源2条8条10条Excel表格1张0张1张2.2 布局分析1、校园招聘网站的常用布局校园招聘网站常常分为PC端页面和H5页面,即端页面,PC端页面在一般情况下需要自适应端.在PC端页面中,常用布局有以下几种.图2

3、.1PC端多页面上下框架型网站布局(1)PC端多页面上下框架型网站布局,既整个网页采用由上到下的方式布局,如图2.1所示.(2)左右框架型网站布局,既整个网页在布局上从左到右,划分布局,如图2.2所示.图2.2PC端多页面左右框架型网站布局r银二聚4皿:离.Jfc：d.tl.l!T.J.TA*iT-|1li-ft,sMW>m-匚却11klTTI*、一:U：F二,>七面图2.3PC端单页面单屏选项卡切换式布局(3)单页面单屏选项卡切换式布局,网页在页面中没有外部滚动条,可以有自定义滚动条,所有内容在一个整屏页面中展示,如图2.3所示.士跳.4Kt.货lMinrAK.in呼tiiwi瞬

4、fl.TOpRi*.*fij(4)多页面单屏模态框,页面实际上是一个页面,切换由模态框、选项卡进行,切换效果多为滑动,如图2.4所示.TiTil""BWO4&a且事&卬审*PBEKr*rWMH归3痂状.*丁*4i万疆"仃*.I-L>ZWf.LA-«“*上*,J；一上空"门,IWZ葬E'SC&Mi*«*-4.fl-r-11eIT1Ii；f-«TEk1.£DMAaiTO411期历*修二串'0讣工析博耳不*41.卬5窜加及史*博具川世次黑蚓了"jiz工是01噌一;J

5、L*片代培口生1.松日工有品雷/一归口川弧druc门,七声官祖始加工白券廿抑,环型m“文匕鼻5处而过酎“乐Ri人才ATJfcfSCWriHU,自门世争门腓叫施辅佗由ft檄.±2Pl'tfr；,K业15m勒".勃海与曼好末2MAi11天匕阵:"养#中闻履mBIT袖J假设松."货腕7上宣便期当1否融在用世秆自心五通剌力四叼司T弓干人.L工任盟要求|八"妲4fll锚.内门通.壁理与相关专业全白本H房.；0kH*?业三;MAQQ和浏览器中展示在整个工程中,根据用户的需求来选择整体布局H5页面中有单页面布局,即端页面,在微信、独特的分辨率,如图2

6、.5所示.2、工程中采用的布局2.5H5单页面布局2.4PC端多页面单屏模态框布局欢送参加我们WELCOMETOJOINUS(1)表达青春与活力、展示页页面需要轮播图的需求,整个页面的风格尽量统一,在整体布局上采用多页面上下框架型网站布局和整屏单页面布局；(2)根据自适应端的需求,也要用到H5单页面布局.2.3 技术分析1、校园招聘网站的常用技术(1)选项卡这个技术在实际操作中经常用到,主要原理是：第一步是获取元素,利用for循环历遍给按钮添加点击事件或鼠标悬浮事件,第二步通过CSS把所有的按钮样式设置伪类,也可以用for循环历遍把所有的按钮样式的显示属性设置的空,然后添加按钮响应样式,第三步

7、利用CSS或者JS把当展示局部显示出来,显示属性设置为blocko具体效果如图2.6所示.厂*fflwc雪n乎通电事喉.FEallrFiv中产e类J/十皆ID一3工1卬1也门*业户智11H甫FT4ithB'HSS社11下1洵awwtM,就上图2.6选项卡切换(2)轮播图这项技术主要用在页面展示中,例如banner图的轮播切换和页面中其他地方的图片切换等.轮播图的主要原理如下：将所有图片添加浮动依次排列,并给其添加一个父级元素,留一个局部显示图片,并将其他图片隐藏.将图片设置成对定位,利用JS限制图片CSS的属性,从起始位置到结束位置,需要先算出这两者间的像素距离,添加定时器,通过距离差

8、值和移动的时间间隔,计算出每次需要移动的像素大小,利用定时器限制,实现图片的移动,然后开始切换.图2.7轮播图效果不利于提升效率,所以jQuery、swiper由于轮播图在实际工作中的需求不统一,手动写占用大量时间,在工作中网页设计师们经常用到插件来进行轮播图的处理,常用的插件有等,如图2.7所示.(3)导航栏特效导航栏对于一个网站的用户体验来说是至关重要的,由于根据用户的浏览习惯、从左到右,从上到苜更创业大老关于我们视频专区校招播送站图2.8导航栏效果下,当他们进入一个新的页面,导航栏通常是他们最先看到的地方.用户对于产品的第一印象是很重要的,由于它会一直伴随接下来的使用过程,而且第一印象无

9、法更改.在网站中起到的作用如名称所示一一导航作用,便于用户了解网站中包含的具体页面,并指引用户浏览网站.导航栏一般情况下具有按钮、浮动、伸展等效果,具体效果以滑动、反转、渐变等特效相结合而形成,最常见的就是下拉菜单特效了.虽然导航栏特效相对来说简单一些,但这是网页中必不可少的元素,称得上是一项关键技术,如图2.8所示.(4)JSONB据处理JSON是一种易于人阅读和编写的数据交换格式.同时也易于机器解析和生成.在制作校园招聘网页中,如果掌握了JSON数据处理方法,将会大大提升工作效率.在日常工作中,除了特定的校园招聘工程需要调用后台接口获取数据,大局部工程需要网页设计师自行处理数据,这些数据包括职位名称、职位链接、职位详情等等,通常结构比拟简单,数据总量较少的情况下,及其容易处理,但在数据总量较多、数据结构相对复杂的时候,就需要用JSON来帮助提升效率了,如图2.9所示.AEIgiM电由"自谢巴培训生：的江由为AgdcuiturcNf.snageimdntTEfim®4m宜卸曲MCornmeraiiirraiiee申jfi立即占fl亡5m所壮闾Tfftee届号培训生-MSM乐完仃生一CommarzifilTr鼠力电辱尾例施川空-LS0正更阻时威图2.9JSON应用场景2、工程中采用的技术(1)根据展示页页面需要轮播图,采用的技术有轮播