開封市第一屆職業(yè)技能大賽網站設計與開發(fā)賽項項目樣題（世賽項目）

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

網站設計與開發(fā)項目

樣題

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

2023年2月

項目說明

項目名稱：網站設計與開發(fā)項目

一、項目完成時間：

300分鐘（5小時），本項目共有2個模塊，其中模塊A網頁設計,120分鐘;模塊B網頁重構,180分鐘。

二、項目配分：滿分100分，其中模塊A網頁設計,50分；模塊B網頁重構,50分。

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

四、注意事項

1.選手要在抽簽的工位上進行比賽。

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

賽場地后，必須遵守賽場紀律，否則現場裁判人員有權取消該選手參賽資格。

3.請不要在試卷內填寫與競賽無關的內容，按題目要求完成競賽任務。

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

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

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

業(yè)規(guī)范項扣除相應的分數。

模塊A網頁設計(試題)

時間：120分鐘

分值：50分

1.任務描述

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

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

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

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

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

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

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

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

老需求。

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

寬的PC,Pad，手機)，網頁中能夠使用HTML相關標記、CSS樣式屬性、布局和

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

戶體驗。

2.任務要求

項目任務：結合給定素材完成符合主題的網站效果圖制作。

（1）有自己設計且符合網站主題的banner和logo。

（2）網頁整體風格一致，色彩協(xié)調美觀。

（3）網頁內容符合題意，設計意圖清晰。

模塊B網頁重構(試題)

時間：180分鐘

分值：50分

一、任務描述

結合給定素材實現“xx社區(qū)養(yǎng)老院”單頁式網站。將您以前的設計工作實現

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

寬)下正確瀏覽網站。也就是說，使用HTML5和CSS3來實現響應性頁面。

二、任務要求

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

1.使用HTML5、CSS3來實現對網頁中元素的控制（如文字的大小，顏色，網

站的背景），以及網站的布局。

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

附表1.評分標準

本項目樣題評分標準主要由以下評分規(guī)則組成，實際考題評分標準會根據題

目變化進行相應細化和調整。

項目評分項評分規(guī)則得分

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

②效果圖中包含logo。

③效果圖中包含banner圖。

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

設計⑤圖片以英文或數字命名。

（50⑥設計中使用到的素材來自于給定素材。

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

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

主觀①整體設計符主題設計訴求。

②logo設計貼合主題。

③導航分類合理、符合用戶習慣。

④banner圖設計具有較強的受眾引導作用。

⑤整體色彩運用合理。

⑥內容布局新穎、得體。

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

⑧頁面中出現的文字內容通順，無語病。

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

②網頁中含有非flash的動畫效果。

③網頁中所有圖片均可正確顯示。

④網頁中含有交互內容。

客觀⑤網頁樣式、使用圖片存放在單獨的文件中。

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

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

設計

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

（50

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

⑩網頁文件能夠通過w3c驗證。

①設計方便用戶，功能完善。

②網站首頁導航直觀、易用。

主觀

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

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

⑤代碼設計清晰，無冗余。

總分

附表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