開封市第一屆職業(yè)技能大賽網(wǎng)站設(shè)計(jì)與開發(fā)賽項(xiàng)項(xiàng)目樣題（世賽項(xiàng)目）

開封市第一屆職業(yè)技能大賽

網(wǎng)站設(shè)計(jì)與開發(fā)項(xiàng)目

樣題

開封市第一屆職業(yè)技能大賽執(zhí)委會技術(shù)指導(dǎo)組

2023年2月

項(xiàng)目說明

項(xiàng)目名稱：網(wǎng)站設(shè)計(jì)與開發(fā)項(xiàng)目

一、項(xiàng)目完成時間：

300分鐘（5小時），本項(xiàng)目共有2個模塊，其中模塊A網(wǎng)頁設(shè)計(jì),120分鐘;模塊B網(wǎng)頁重構(gòu),180分鐘。

二、項(xiàng)目配分：滿分100分，其中模塊A網(wǎng)頁設(shè)計(jì),50分；模塊B網(wǎng)頁重構(gòu),50分。

三、競賽設(shè)備：見附件2軟件環(huán)境與附件3硬件配置。

四、注意事項(xiàng)

1.選手要在抽簽的工位上進(jìn)行比賽。

2.除組委會規(guī)定允許攜帶的比賽資料外，不得攜帶任何與競賽無關(guān)的物品和通訊工具等進(jìn)場。進(jìn)入競

賽場地后，必須遵守賽場紀(jì)律，否則現(xiàn)場裁判人員有權(quán)取消該選手參賽資格。

3.請不要在試卷內(nèi)填寫與競賽無關(guān)的內(nèi)容，按題目要求完成競賽任務(wù)。

4.競賽時間結(jié)束，所有參賽選手要立刻停止操作，等待裁判人員驗(yàn)收。

5.在比賽過程中，選手若有違規(guī)操作，將根據(jù)具體情況在專業(yè)規(guī)范扣除相應(yīng)的分?jǐn)?shù)。

6.每次任務(wù)完成后，應(yīng)保證桌面、工具清潔，現(xiàn)場工具及其他物品擺放整齊。不合格者視情況在專

業(yè)規(guī)范項(xiàng)扣除相應(yīng)的分?jǐn)?shù)。

模塊A網(wǎng)頁設(shè)計(jì)(試題)

時間：120分鐘

分值：50分

1.任務(wù)描述

隨著我國人口老齡化程度的加劇，家庭規(guī)模的縮小，城市生活、工作的壓力，

使得居家面臨著種種困難，養(yǎng)老已成為一個急需解決的問題。敬老院、老年福利

院等老年福利服務(wù)機(jī)構(gòu)作為社會養(yǎng)老的一部分，在緩解家庭養(yǎng)老的壓力中起到了

一定的作用。而社區(qū)養(yǎng)老則是是指以家庭為核心，以社區(qū)為依托，以老年人日間

照料、生活護(hù)理、家政服務(wù)和精神慰藉為主要內(nèi)容，以上門服務(wù)和社區(qū)日托為主

要形式，并引入養(yǎng)老機(jī)構(gòu)專業(yè)化服務(wù)方式的居家養(yǎng)老服務(wù)體系。

“XX社區(qū)養(yǎng)老院”正是這樣一一個集社區(qū)醫(yī)院、社區(qū)餐廳、養(yǎng)老院與托老四

者為一體的社區(qū)養(yǎng)老機(jī)構(gòu)，將家庭與社會二者結(jié)合起來，極大地滿足老年人的養(yǎng)

老需求。

您的任務(wù)是為“XX社區(qū)養(yǎng)老院”創(chuàng)建一套一頁的網(wǎng)站(1920px,768px,480px

寬的PC,Pad，手機(jī))，網(wǎng)頁中能夠使用HTML相關(guān)標(biāo)記、CSS樣式屬性、布局和

排版以及一些簡單的CSS3動畫特效技巧。該養(yǎng)老院希望您在開發(fā)過程中注重用

戶體驗(yàn)。

2.任務(wù)要求

項(xiàng)目任務(wù)：結(jié)合給定素材完成符合主題的網(wǎng)站效果圖制作。

（1）有自己設(shè)計(jì)且符合網(wǎng)站主題的banner和logo。

（2）網(wǎng)頁整體風(fēng)格一致，色彩協(xié)調(diào)美觀。

（3）網(wǎng)頁內(nèi)容符合題意，設(shè)計(jì)意圖清晰。

模塊B網(wǎng)頁重構(gòu)(試題)

時間：180分鐘

分值：50分

一、任務(wù)描述

結(jié)合給定素材實(shí)現(xiàn)“xx社區(qū)養(yǎng)老院”單頁式網(wǎng)站。將您以前的設(shè)計(jì)工作實(shí)現(xiàn)

為一個html文件，通過該文件，用戶可以在3個分辨率(1920px,768px,480px

寬)下正確瀏覽網(wǎng)站。也就是說，使用HTML5和CSS3來實(shí)現(xiàn)響應(yīng)性頁面。

二、任務(wù)要求

評估瀏覽器：谷歌瀏覽器、火狐瀏覽器

1.使用HTML5、CSS3來實(shí)現(xiàn)對網(wǎng)頁中元素的控制（如文字的大小，顏色，網(wǎng)

站的背景），以及網(wǎng)站的布局。

2.頁面中有前端的交互動態(tài)效果，用Javascrip、JQuery完成。

附表1.評分標(biāo)準(zhǔn)

本項(xiàng)目樣題評分標(biāo)準(zhǔn)主要由以下評分規(guī)則組成，實(shí)際考題評分標(biāo)準(zhǔn)會根據(jù)題

目變化進(jìn)行相應(yīng)細(xì)化和調(diào)整。

項(xiàng)目評分項(xiàng)評分規(guī)則得分

①所有必須的文件都已提交。

②效果圖中包含logo。

③效果圖中包含banner圖。

平面客觀④效果圖中包含指定模塊。

設(shè)計(jì)⑤圖片以英文或數(shù)字命名。

（50⑥設(shè)計(jì)中使用到的素材來自于給定素材。

分）⑦是否提交psd格式源文件。

⑧提交文件是否在指定文件夾中。

主觀①整體設(shè)計(jì)符主題設(shè)計(jì)訴求。

②logo設(shè)計(jì)貼合主題。

③導(dǎo)航分類合理、符合用戶習(xí)慣。

④banner圖設(shè)計(jì)具有較強(qiáng)的受眾引導(dǎo)作用。

⑤整體色彩運(yùn)用合理。

⑥內(nèi)容布局新穎、得體。

⑦頁面整體設(shè)計(jì)有創(chuàng)新。

⑧頁面中出現(xiàn)的文字內(nèi)容通順，無語病。

①文件命名規(guī)范。

②網(wǎng)頁中含有非flash的動畫效果。

③網(wǎng)頁中所有圖片均可正確顯示。

④網(wǎng)頁中含有交互內(nèi)容。

客觀⑤網(wǎng)頁樣式、使用圖片存放在單獨(dú)的文件中。

⑥是否能夠在chrome和Firefox兩款瀏覽器中正常顯示。

程序⑦是否在指定文件夾中。

設(shè)計(jì)

⑧編輯代碼中注釋大于等于10條。

（50

分）⑨文件命名規(guī)范。

⑩網(wǎng)頁文件能夠通過w3c驗(yàn)證。

①設(shè)計(jì)方便用戶，功能完善。

②網(wǎng)站首頁導(dǎo)航直觀、易用。

主觀

③合理使用css統(tǒng)一頁面風(fēng)格。

④動畫效果新穎，吸引注意。

⑤代碼設(shè)計(jì)清晰，無冗余。

總分

附表2.軟件環(huán)境

類別名稱版本備注

操作系統(tǒng)Windows10及以上WIN10Pro64bit及以上

AdobePhotoshopCC2019orupper

AdobeIllustratorCC2019orupper

開發(fā)工具

AdobeXDCC2019orupper

XAMPP7.2orupper

瀏覽器IEInternetExplorer11(64bit)

FirefoxFirefox33.1以上版本

ChromeChrome39.0以上版本

MSOffice2016orupper

輔助軟件

7-Zip19.00(x64)orupper

Postman7.20.1orupper

Adminer4.7.6

WinSCP5.1orupper

Filezilla3.5orupper

輔助軟件

Editplus5.0orupper

PHPStorm2019orupper

Sublime3.2.2(BUILD3211)

WinRAR

Vue2.6orupper

VueRouter3.4orupper

前端框架

Axios0.2orupper

jQuery3.5orupper

PHP框架Laravel7.27orupper

附表3.硬件配置

硬件配置（不低于此配置）

CPU