校園招聘網(wǎng)站需求分析

1、校園招聘網(wǎng)站需求分析2.1 招聘需求本次合作方是廣州市黃埔區(qū)人力資源和社會保證局、廣州開發(fā)區(qū)人力資源和保證局,主要面向2021屆應屆大學生進行2021校園招聘的官方網(wǎng)站,用于為開發(fā)區(qū)內(nèi)企業(yè)引進人才,促進開發(fā)區(qū)開展.經(jīng)過前期溝通,合作方的具體招聘需求如下：1 .表達青春與活力,由于招聘對象為應屆大學生,所以青春與活力的主題更適合作為該工程主題；2 .介紹開發(fā)區(qū)情況,給求職應屆生一個良好的第一印象；3 .鏈上政府官網(wǎng)和掛上微信公眾號；4 .配合合作方的線下校招活動,既展示校招活動地點與具體時間等信息；5 .在校招網(wǎng)頁上鏈上各個參與招聘企業(yè)的官網(wǎng)鏈接；6 .招聘頁面需要設計一個職位總需求表的下載按鈕

2、,還要掛上各個公司的簡介；7 .自適應端；8 .展示頁頁面需要輪播圖.合作方給出的素材資源,其中文字資源共計5879個字包括8個公司簡介,圖片資源共計21張圖片,鏈接10個包括8個公司官網(wǎng)鏈接、1個政府官網(wǎng)鏈接、一個開發(fā)區(qū)視頻鏈接和1張Excel表格,詳情如表2.1所不.表2.1素材資源資源種類政府資源企業(yè)資源資源總數(shù)文字資源2311字3568字5879字圖片資源13張8張21張鏈接資源2條8條10條Excel表格1張0張1張2.2 布局分析1、校園招聘網(wǎng)站的常用布局校園招聘網(wǎng)站常常分為PC端頁面和H5頁面,即端頁面,PC端頁面在一般情況下需要自適應端.在PC端頁面中,常用布局有以下幾種.圖2

3、.1PC端多頁面上下框架型網(wǎng)站布局(1)PC端多頁面上下框架型網(wǎng)站布局,既整個網(wǎng)頁采用由上到下的方式布局,如圖2.1所示.(2)左右框架型網(wǎng)站布局,既整個網(wǎng)頁在布局上從左到右,劃分布局,如圖2.2所示.圖2.2PC端多頁面左右框架型網(wǎng)站布局r銀二聚4皿:離.Jfc：d.tl.l!T.J.TA*iT-|1li-ft,sMW>m-匚卻11klTTI*、一:U：F二,>七面圖2.3PC端單頁面單屏選項卡切換式布局(3)單頁面單屏選項卡切換式布局,網(wǎng)頁在頁面中沒有外部滾動條,可以有自定義滾動條,所有內(nèi)容在一個整屏頁面中展示,如圖2.3所示.士跳.4Kt.貨lMinrAK.in呼tiiwi瞬

4、fl.TOpRi*.*fij(4)多頁面單屏模態(tài)框,頁面實際上是一個頁面,切換由模態(tài)框、選項卡進行,切換效果多為滑動,如圖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門,七聲官祖始加工白券廿抑,環(huán)型m“文匕鼻5處而過酎“樂Ri人才ATJfcfSCWriHU,自門世爭門腓叫施輔佗由ft檄.±2Pl'tfr；,K業(yè)15m勒".勃海與曼好末2MAi11天匕陣:"養(yǎng)#中聞履mBIT袖J假設松."貨腕7上宣便期當1否融在用世稈自心五通剌力四叼司T弓干人.L工任盟要求|八"妲4fll錨.內(nèi)門通.壁理與相關(guān)專業(yè)全白本H房.；0kH*?業(yè)三;MAQQ和瀏覽器中展示在整個工程中,根據(jù)用戶的需求來選擇整體布局H5頁面中有單頁面布局,即端頁面,在微信、獨特的分辨率,如圖2

6、.5所示.2、工程中采用的布局2.5H5單頁面布局2.4PC端多頁面單屏模態(tài)框布局歡送參加我們WELCOMETOJOINUS(1)表達青春與活力、展示頁頁面需要輪播圖的需求,整個頁面的風格盡量統(tǒng)一,在整體布局上采用多頁面上下框架型網(wǎng)站布局和整屏單頁面布局；(2)根據(jù)自適應端的需求,也要用到H5單頁面布局.2.3 技術(shù)分析1、校園招聘網(wǎng)站的常用技術(shù)(1)選項卡這個技術(shù)在實際操作中經(jīng)常用到,主要原理是：第一步是獲取元素,利用for循環(huán)歷遍給按鈕添加點擊事件或鼠標懸浮事件,第二步通過CSS把所有的按鈕樣式設置偽類,也可以用for循環(huán)歷遍把所有的按鈕樣式的顯示屬性設置的空,然后添加按鈕響應樣式,第三步

7、利用CSS或者JS把當展示局部顯示出來,顯示屬性設置為blocko具體效果如圖2.6所示.廠*fflwc雪n乎通電事喉.FEallrFiv中產(chǎn)e類J/十皆ID一3工1卬1也門*業(yè)戶智11H甫FT4ithB'HSS社11下1洵awwtM,就上圖2.6選項卡切換(2)輪播圖這項技術(shù)主要用在頁面展示中,例如banner圖的輪播切換和頁面中其他地方的圖片切換等.輪播圖的主要原理如下：將所有圖片添加浮動依次排列,并給其添加一個父級元素,留一個局部顯示圖片,并將其他圖片隱藏.將圖片設置成對定位,利用JS限制圖片CSS的屬性,從起始位置到結(jié)束位置,需要先算出這兩者間的像素距離,添加定時器,通過距離差

8、值和移動的時間間隔,計算出每次需要移動的像素大小,利用定時器限制,實現(xiàn)圖片的移動,然后開始切換.圖2.7輪播圖效果不利于提升效率,所以jQuery、swiper由于輪播圖在實際工作中的需求不統(tǒng)一,手動寫占用大量時間,在工作中網(wǎng)頁設計師們經(jīng)常用到插件來進行輪播圖的處理,常用的插件有等,如圖2.7所示.(3)導航欄特效導航欄對于一個網(wǎng)站的用戶體驗來說是至關(guān)重要的,由于根據(jù)用戶的瀏覽習慣、從左到右,從上到苜更創(chuàng)業(yè)大老關(guān)于我們視頻專區(qū)校招播送站圖2.8導航欄效果下,當他們進入一個新的頁面,導航欄通常是他們最先看到的地方.用戶對于產(chǎn)品的第一印象是很重要的,由于它會一直伴隨接下來的使用過程,而且第一印象無

9、法更改.在網(wǎng)站中起到的作用如名稱所示一一導航作用,便于用戶了解網(wǎng)站中包含的具體頁面,并指引用戶瀏覽網(wǎng)站.導航欄一般情況下具有按鈕、浮動、伸展等效果,具體效果以滑動、反轉(zhuǎn)、漸變等特效相結(jié)合而形成,最常見的就是下拉菜單特效了.雖然導航欄特效相對來說簡單一些,但這是網(wǎng)頁中必不可少的元素,稱得上是一項關(guān)鍵技術(shù),如圖2.8所示.(4)JSONB據(jù)處理JSON是一種易于人閱讀和編寫的數(shù)據(jù)交換格式.同時也易于機器解析和生成.在制作校園招聘網(wǎng)頁中,如果掌握了JSON數(shù)據(jù)處理方法,將會大大提升工作效率.在日常工作中,除了特定的校園招聘工程需要調(diào)用后臺接口獲取數(shù)據(jù),大局部工程需要網(wǎng)頁設計師自行處理數(shù)據(jù),這些數(shù)據(jù)包括職位名稱、職位鏈接、職位詳情等等,通常結(jié)構(gòu)比擬簡單,數(shù)據(jù)總量較少的情況下,及其容易處理,但在數(shù)據(jù)總量較多、數(shù)據(jù)結(jié)構(gòu)相對復雜的時候,就需要用JSON來幫助提升效率了,如圖2.9所示.AEIgiM電由"自謝巴培訓生：的江由為AgdcuiturcNf.snageimdntTEfim®4m宜卸曲MCornmeraiiirraiiee申jfi立即占fl亡5m所壯閭Tfftee屆號培訓生-MSM樂完仃生一CommarzifilTr鼠力電辱尾例施川空-LS0正更阻時威圖2.9JSON應用場景2、工程中采用的技術(shù)(1)根據(jù)展示頁頁面需要輪播圖,采用的技術(shù)有輪播