第47屆世界技能大賽江蘇省選拔賽網(wǎng)站設(shè)

計(jì)與開(kāi)發(fā)項(xiàng)目技術(shù)工作文件

第47屆世賽江蘇省選拔賽組委會(huì)技術(shù)工作組

2022年7月

30

一、技術(shù)描述

（一）項(xiàng)目概要

網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)項(xiàng)目指根據(jù)項(xiàng)目需求設(shè)計(jì)制作站點(diǎn)，實(shí)現(xiàn)

能在各種終端上使用的頁(yè)面、交互效果以及后端功能（或游戲）

的競(jìng)賽項(xiàng)目。

選手不但要能熟練使用圖形設(shè)計(jì)工具制作設(shè)計(jì)稿，熟練運(yùn)

用HTML5及CSS3，按設(shè)計(jì)稿實(shí)現(xiàn)頁(yè)面，完成各種前端交互

效果，還應(yīng)能獨(dú)立使用Javascript制作前端應(yīng)用，例如：前

端游戲、前端管理工具、前端交互性展示以及完成后端應(yīng)用功

能的開(kāi)發(fā)等。

此外，選手應(yīng)能處理好代碼編寫(xiě)過(guò)程中發(fā)生的異常，最終

的作品也需要妥善處理常用瀏覽器以及軟硬件之間的兼容性。

在實(shí)際工作中，網(wǎng)頁(yè)設(shè)計(jì)者要能理解網(wǎng)頁(yè)制作的技術(shù)和藝

術(shù)價(jià)值。技術(shù)的運(yùn)用是為了實(shí)現(xiàn)功能，幫助網(wǎng)站經(jīng)營(yíng)者更好更

高效地工作（自動(dòng)化）。網(wǎng)站的顏色、字體、圖形以及布局則

需要富有創(chuàng)意。用戶(hù)界面要確保具有良好的可用性。網(wǎng)站制作

者也必須理解項(xiàng)目工作、內(nèi)容制作和網(wǎng)站管理的基礎(chǔ)知識(shí)。

（二）基本知識(shí)與能力要求

本競(jìng)賽是對(duì)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)技能的展示和評(píng)估。主要測(cè)試

各網(wǎng)站設(shè)計(jì)與實(shí)施技能在操作層面的能力。參賽選手要按照賽

題中規(guī)定的標(biāo)準(zhǔn)（或要求）展示其網(wǎng)站設(shè)計(jì)及開(kāi)發(fā)技能。參賽

選手必須掌握本項(xiàng)目的理論知識(shí)，但是在本次競(jìng)賽中理論知識(shí)

31

不單獨(dú)列為考核項(xiàng)目。

本次競(jìng)賽選手應(yīng)具備的能力如下：

部分類(lèi)別

1頁(yè)面重構(gòu)

個(gè)人需要知道和理解：理論

?萬(wàn)維網(wǎng)聯(lián)盟（W3C）的HTML和CSS標(biāo)準(zhǔn)

?定位和布局方法

?可用性和交互設(shè)計(jì)

?瀏覽器兼容性

?如何在需要的地方嵌入集成動(dòng)畫(huà)、音頻和視頻

個(gè)人應(yīng)能夠：實(shí)操

?創(chuàng)建符合并能通過(guò)W3C標(biāo)準(zhǔn)驗(yàn)證的代碼（HTML5,CSS3）

?為各種設(shè)備和屏幕分辨率創(chuàng)建可訪(fǎng)問(wèn)和可用的網(wǎng)站

?使用CSS或其他外部文件修改網(wǎng)站的外觀(guān)

?使用CSS預(yù)處理/后處理器

?使用CSS開(kāi)發(fā)動(dòng)畫(huà)和與用戶(hù)界面的交互

2前端開(kāi)發(fā)

個(gè)人需要知道和理解：理論

?JavaScript

?如何使用JavaScript來(lái)集成庫(kù)、框架和其他系統(tǒng)或功能

?使用JavaScript前置/后置處理器和任務(wù)運(yùn)行工作流

個(gè)人應(yīng)能夠：實(shí)操

?創(chuàng)建網(wǎng)站的動(dòng)畫(huà)和交互功能，幫助解釋頁(yè)面內(nèi)容和增加視覺(jué)吸引力

?創(chuàng)建和更新JavaScript代碼，增強(qiáng)網(wǎng)站功能性，可用性和美觀(guān)

?使用JavaScript來(lái)操作數(shù)據(jù)和自定義媒體

?創(chuàng)建模塊化和可重用的JavaScript代碼

?使用JavaScript操作圖形元素

3后端開(kāi)發(fā)

32

個(gè)人需要知道和理解：理論

?面向?qū)ο蟮腜HP

?如何使用MySQL來(lái)設(shè)計(jì)和實(shí)現(xiàn)數(shù)據(jù)庫(kù)

?FTP服務(wù)器與客戶(hù)端的關(guān)聯(lián)以及軟件包

?如何管理服務(wù)器和客戶(hù)端系統(tǒng)之間的數(shù)據(jù)交換

?軟件設(shè)計(jì)模式（如.MVC）

?網(wǎng)頁(yè)應(yīng)用程序的安全性

個(gè)人應(yīng)能夠：實(shí)操

?使用編程技能來(lái)操作數(shù)據(jù)，包括本地儲(chǔ)存、數(shù)據(jù)庫(kù)和前后端通訊

?創(chuàng)建或維護(hù)數(shù)據(jù)庫(kù)以支持系統(tǒng)需求

?創(chuàng)建易讀、可維護(hù)、可重用的后端代碼模塊

二、試題與評(píng)判標(biāo)準(zhǔn)

（一）試題（樣題）

本次比賽共二個(gè)模塊，在一天內(nèi)完成，分別針對(duì)頁(yè)面重構(gòu)、

前端功能開(kāi)發(fā)和后端編碼及數(shù)據(jù)庫(kù)等技術(shù)進(jìn)行考核。

模塊競(jìng)賽時(shí)間分?jǐn)?shù)

模塊名稱(chēng)

編號(hào)min評(píng)價(jià)分測(cè)量分合計(jì)

A前端開(kāi)發(fā)150153550

B后端開(kāi)發(fā)120104050

總計(jì)2702575100

（二）試題具體內(nèi)容

模塊A：選手將使用提供的有限素材，按照賽題要求使用

JavaScript、JQuery等技術(shù)進(jìn)行一款射擊類(lèi)游戲的制作。完成所

有游戲界面的重構(gòu)，且游戲邏輯能夠按照賽題的要求制作完

成。所有功能均使用前端腳本技術(shù)完成，游戲排行和其他部分

數(shù)據(jù)由本地存儲(chǔ)保存。

模塊B：客戶(hù)想在他的網(wǎng)站上建立一個(gè)簡(jiǎn)單的在線(xiàn)游戲。選

手將獲得前端模板和素材，需要在服務(wù)器端上使用純手工生成

33

的php代碼，將游戲邏輯和功能集成到前端模板上。使用恰當(dāng)

的前后端通訊技術(shù)并將游戲數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中。

（三）評(píng)判標(biāo)準(zhǔn)

1.評(píng)分規(guī)則：本項(xiàng)目采用事后結(jié)果評(píng)分，不設(shè)競(jìng)速分，當(dāng)天

下午完成上午競(jìng)賽部分的評(píng)分，下午競(jìng)賽部分評(píng)分在當(dāng)天晚上

進(jìn)行，當(dāng)日必須完成所有模塊評(píng)分和統(tǒng)分工作。選手的最終完

成作品直接保存在比賽機(jī)本地服務(wù)器規(guī)定文件夾中，完成一個(gè)

模塊后需更換到另一組工位繼續(xù)下一個(gè)模塊。評(píng)分時(shí)由裁判在

選手機(jī)上直接經(jīng)行操作和打分。

由評(píng)分裁判復(fù)核后交登分員錄入系統(tǒng)，再根據(jù)系統(tǒng)操作流程

進(jìn)行二次復(fù)核，匯總分?jǐn)?shù)由所有裁判簽字確認(rèn)，最終匯總結(jié)果

由全體裁判簽字確認(rèn)。如遇到總分相同情況，則根據(jù)B模塊得

分高低進(jìn)行認(rèn)定。

2.評(píng)價(jià)分：評(píng)價(jià)分（Judgement）打分方式：3名裁判為一

組，各自單獨(dú)評(píng)分，計(jì)算出平均權(quán)重分，除以3后再乘以該子

項(xiàng)的分值計(jì)算出實(shí)際得分。裁判相互間分差必須小于等于1分，

否則需要給出確切理由并在小組長(zhǎng)或裁判長(zhǎng)的監(jiān)督下進(jìn)行調(diào)

分。

權(quán)重表如下：

權(quán)重分值要求描述

0分各方面均低于行業(yè)標(biāo)準(zhǔn)，包括“未做嘗試”

1分達(dá)到行業(yè)標(biāo)準(zhǔn)

2分達(dá)到行業(yè)標(biāo)準(zhǔn)，且某些方面超過(guò)標(biāo)準(zhǔn)

34

3分達(dá)到行業(yè)期待的優(yōu)秀水平

例如：

權(quán)重分值要求描述

0分更改現(xiàn)有CSS代碼極度困難，CSS代碼沒(méi)有組織結(jié)構(gòu)。HTML沒(méi)有格式化

1分更改現(xiàn)有CSS代碼較為困難，較難以定位需要的內(nèi)容。HTML有基本格式

2分更改現(xiàn)有CSS代碼比較容易，很方便就能定位需要的內(nèi)容。HTML格式良好

在2分基礎(chǔ)上，CSS還應(yīng)用了一定的代碼分組技術(shù)并至少包含5條以上有用

3分

的注釋

3.測(cè)量分：測(cè)量分（Measurement）打分方式：按模塊設(shè)置

若干個(gè)評(píng)分組，每組由3名及以上裁判構(gòu)成。每個(gè)組所有裁判

一起商議，在對(duì)該選手在該項(xiàng)中的實(shí)際得分達(dá)成一致后最終只

給出一個(gè)分值。

測(cè)量分評(píng)分準(zhǔn)則樣例表：

類(lèi)型示例最高分值正確分值不正確分值

滿(mǎn)分或零分網(wǎng)站地圖動(dòng)態(tài)鏈接至菜單0.500.500

從滿(mǎn)分中扣除CSS代碼能通過(guò)驗(yàn)證（每種錯(cuò)誤扣0.5分）2.002.000～1.5

CSS代碼有注釋(0.5分)

從零分開(kāi)始加1.01.00～0.5

XHTML代碼有注釋(0.5分)

三、競(jìng)賽細(xì)則

選手應(yīng)遵守比賽相關(guān)規(guī)則，服從裁判長(zhǎng)的賽事管理。此外，

還應(yīng)遵守以下特別規(guī)定：

1.存在以下情況者，裁判長(zhǎng)有權(quán)取消該模塊成績(jī)：

a)在提交的作品中帶有選派單位、選手個(gè)人或相關(guān)組織機(jī)

構(gòu)的標(biāo)記

b)攜帶任何有記錄內(nèi)容的紙張等用品到工位上

35

c)競(jìng)賽時(shí)間截止時(shí)不聽(tīng)從裁判結(jié)束比賽口令，繼續(xù)操作電

腦

2.存在以下情況者，裁判長(zhǎng)有權(quán)取消該選手比賽成績(jī)：

a)考生在比賽過(guò)程中將禁止使用的設(shè)備帶到工位上

b)在比賽中存在有違誠(chéng)信道德的事件，經(jīng)當(dāng)值裁判記錄并

提交裁判長(zhǎng)確認(rèn)

3.如果發(fā)生非本人因素引起的軟硬件故障且無(wú)法立即解決

的，裁判將予以記錄并根據(jù)處理所花費(fèi)的時(shí)間給予補(bǔ)時(shí)。

4.如選手在比賽中存在技術(shù)問(wèn)題的爭(zhēng)議，以本技術(shù)說(shuō)明與

賽題規(guī)定為準(zhǔn)，文件中未涉及的情況由裁判組決定。

四、競(jìng)賽場(chǎng)地、設(shè)施設(shè)備等安排

（一）賽場(chǎng)規(guī)格要求

每一個(gè)名選手均配備以下設(shè)備（套）

序號(hào)設(shè)備名稱(chēng)型號(hào)單位數(shù)量

1開(kāi)發(fā)用主機(jī)臺(tái)式臺(tái)1

2顯示器FullHD臺(tái)1

3鍵盤(pán)美式個(gè)1

4鼠標(biāo)三鍵光電個(gè)1

選手比賽用主機(jī)配置：

硬件型號(hào)參數(shù)

CPUIntelCorei52.5GHz以上

內(nèi)存DDR48GB

硬盤(pán)SATAHDD提供不少于50GB的可用臨時(shí)硬盤(pán)空間

選手主機(jī)與本地服務(wù)器相連，不連接英特網(wǎng)，并按照下表標(biāo)準(zhǔn)

安裝相關(guān)軟件：

36

附表：臺(tái)式機(jī)軟件環(huán)境

類(lèi)別名稱(chēng)版本備注

操作系統(tǒng)Windows10Windows10

AdobePhotoshopCC2019orupper

AdobeIllustratorCC2019orupper

開(kāi)發(fā)工具

AdobeXDCC2019orupper

XAMPP7.2orupper

MicrosoftEdge44orupper

瀏覽器FirefoxDeveloperEditionV75orupper

ChromeV80orupper

MSOffice2016orupper

7-Zip19.00(x64)orupper

Filezilla3.5orupper

輔助軟件Editplus5.0orupper

PHPStorm2019orupper

Sublime3.2.2

WinRAR

前端框架jQuery3.5orupper

（二）場(chǎng)地布局要求

提供規(guī)格（長(zhǎng)度、寬度）清晰的布局圖。例如：

1.選手操作臺(tái)臺(tái)面尺寸為1米*0.6米以上

2.選手座位空間不小于3平方米

3.場(chǎng)地總面積不小于100平方米，兩場(chǎng)考試設(shè)備間距5米以

上

4.選手工位數(shù)量20個(gè)以上（備4工位）

5.評(píng)分機(jī)6臺(tái)以上

（三）基礎(chǔ)設(shè)施清單

賽場(chǎng)提供統(tǒng)一的標(biāo)準(zhǔn)美式鍵盤(pán)和3鍵光電鼠標(biāo)，選手無(wú)需

37

自帶設(shè)備工具。

五、安全、健康要求

（一）賽場(chǎng)人員安全要求

現(xiàn)場(chǎng)裁判、選手、工作人員在競(jìng)賽期間應(yīng)該遵守組委會(huì)和

執(zhí)委會(huì)的安全規(guī)定和要求。

參賽選手進(jìn)入競(jìng)賽場(chǎng)地后，須聽(tīng)從并尊重裁判人員的管理，

文明參賽。

參賽選手必須在確保人身安全和設(shè)備安全的前提下開(kāi)始競(jìng)

賽，發(fā)現(xiàn)或發(fā)生有關(guān)安全問(wèn)題，應(yīng)立即向裁判報(bào)告。

嚴(yán)格注意賽場(chǎng)用電安全，非賽場(chǎng)管理人員未經(jīng)允許，不能

隨意拉接電源以及拔插設(shè)備。

如選手發(fā)生緊急的身體狀況，由賽場(chǎng)管理人員進(jìn)行緊急處

理。除非有集體性意外事件，否