河南省第二届职业技能大赛网站设计与开发（世赛）项目技术工作文件

河南省第二届职业技能大赛

网站设计与开发（世赛）项目技术工作文件

河南省第二届职业技能大赛组织委员会

技术工作组

2023年1月

目录

一、技术描述1

（一）项目概要1

（二）基本知识与能力要求1

二、试题与评判标准4

（一）试题4

（二）比赛时间及试题具体内容5

（三）评判标准6

三、竞赛细则9

（一）竞赛日程安排9

（二）参赛选手10

（三）裁判人员10

（四）竞赛要求11

（五）项目特别规定12

（六）问题或争议处理13

四、竞赛场地、设施设备等安排13

（一）场地设备13

（二）场地布局示意图17

五、安全、健康要求17

（一）选手安全防护措施要求18

（二）现场突然非正常停电18

（三）医疗设备和措施18

（四）赛场突发事件应急预案19

附件：网站设计与开发（世赛）项目样题21

一、技术描述

（一）项目概要

网站设计与开发项目是指根据项目需求进行站点整体风格

与布局的设计，根据设计的页面实现在各种终端上的页面效果、

交互效果以及后台相应功能的竞赛项目。

选手需要具备熟练的图形图像处理能力和页面元素设计能

力，能够在各类页面中应用所设计的元素和素材，同时还根据注

站点的受众群体，制作更受欢迎的设计和交互效果；使用HTML5

及CSS3按设计稿实现页面，并完成各种交互效果的开发。此外

还要处理好代码编写过程中发生的异常。最终的作品同常用浏览

器以及软硬件之间的兼容性也是十分重要的，需要妥善处理。

（二）基本知识与能力要求

在实际工作中，要能理解网站业务制作的技术和艺术价值。

技术的运用是为了将功能帮助网站经营者和用户更好更高效地

工作（自动化）。网站的颜色、字体、图形以及布局则需要富有

创意的设计技巧。用户界面要确保具有良好的可用性，也必须理

解所制作项目的业务内容和网站管理的基础知识。

此表仅供参考，具体比重以试卷为准。

相关要求权重比例（%）

1设计能力

个人需要知道和理解：15

基本知识●如何遵循设计原则和模式，以产生美观和创造性

的设计

1

●同设计的认知、社会、文化、技术和经济背景有

关的问题

●如何凸显站点的目标受众群体

●如何为Web创建和调整图形

●如何在网站中嵌入所创建的动画和视频

●维护企业形象，品牌和风格指南的协议

●互联网设备和对应屏幕分辨率的约束

个人应能够：

●导入并编辑图像

●为网页优化图像

●使用某种图像处理软件创作图像

●使用某种图像处理软件对图片进行切片

●选用可以增强设计效果的布局版式

工作能力●为不同的屏幕分辨率进行设计；对给定的分辨率

进行优化并且页面在不同分辨率的设备中良好工作

●为各种自适应的站点页面设计合适的效果

●创建高效、直观、易用的网站导航，将想法融入

具有美观和创意的设计

●创建的页面布局包含：流式页面、网格页面、页

面留白、均衡的文字图像，清晰的层次

●评判并选择合适的草图设计、颜色和原型

2页面重构

个人需要知道和理解：

●万维网联盟（W3C）的HTML和CSS标准

●定位和布局方法

基本知识●可用性和交互设计

●对有特殊需要的用户的可访问性和通信

●浏览器兼容性

●搜索引擎优化（SEO）25

●创建符合并能通过W3C标准验证的代码

（HTML5,CSS3）

●为各种设备和屏幕分辨率创建可访问和可用的

网站

工作能力

●使用CSS或其他外部文件修改网站的外观

●为用户创建和更新的网站，并协助提升搜索引擎

性能

在需要的地方嵌入和集成动画，音频和视频

2

3前端开发

个人需要知道和理解：

20

●JavaScript

基本知识

●如何使用JavaScript来集成库、框架和其他系

统或功能

个人应能够：

●创建网站的动画和交互功能，帮助解释页面内容

和增加视觉吸引力

工作能力●创建和更新JavaScript代码，增强网站功能性，

可用性和美观

●使用JavaScript来操作数据和自定义媒体

●创建模块化和可重用的JavaScript代码

4后台开发

个人需要知道和理解：

●面向对象思想

●面向对象的PHP

●开源后端类库和框架

基本知识

●如何使用MySQL来设计和实现数据库

如何管理服务器和客户端系统之间的数据交换

●20

●软件设计模式（如MVC）

●网页应用程序的安全性

个人应能够：

●使用编程技能来操作数据，包括本地储存、数据

库和前后端通讯

工作能力

●使用php语言和常见框架（如：Laravel）开发

后端逻辑功能

●创建易读、可维护、可重用的后端代码模块

5可用性及可及性

个人需要知道和理解：

基本知识●如何使用最新的设计技术和编码技术制作遵循

行业标准且具有良好持续性、一致性的网站

10

个人应能够：

●使用CSS或其他的外部文件来对整个网站样式

工作能力进行修改

●能在两种不同的浏览器（最新、稳定的版本）上

优化页面，获得较好的跨浏览器兼容性

3

●所创建的网站内容在不同分辨率的屏幕上

要保持一致且结构良好

●对于自适应的页面设计能使用合适的样式和脚

本代码来实现页面

●所创建网站要符合当前的W3C标准(HTML5.0、

CSS3.0)

6工作组织管理

个人需要知道和理解：

●在团队工作中富有效益和实践

有助于产品可持续性的方案和实践

基本知识●

●使用现有工具解决问题和需求

●在多方案中选择合适的方案，正确的时间预估和

分配

个人应能够：10

●考虑功能限时和项目截止日期

●调试和处理错误

使用计算机设备和软件

工作能力●

●根据行业发展，应用和研究新技术及技能

●根据可用时间安排工作计划

●对工作文件进行归档

●使用版本控制系统

总分值100

二、试题与评判标准

（一）试题

竞赛项目包含网页设计制作、后台模块开发、前端游戏设计，

前端功能实现与交互4个模块的内容，不单独进行理论考试，采

用个人现场独立使用电脑进行设计。

公布《技术工作文件》和比赛试题；裁判长与裁判长助理根

据《技术工作文件》编制试题，赛前公布试题（样题）。赛前根

据普遍反映的问题或合理的意见建议以及结合赛场设备、材料状

4

况，由裁判长进行最终修正和调整（修订比例一般不超过30%），

并确定最终考核试题，予以公布。

（二）比赛时间及试题具体内容

本项目正式比赛时间为两天，正式比赛时间共计540分钟。

本项目共4个模块，每个模块独立评分，总分为100分。具体的

比赛时间安排如下所示：

模块编号模块名称比赛时间

A网页设计制作2小时

B后台模块开发2小时

C前端游戏设计2小时

D前端功能实现与交互3小时

合计9小时

每个模块都基于不同的网站设计与开发技能领域，相对其他

模块可独立存在。

1.模块A：网页设计制作部分比赛时间：120分钟

每位选手根据给定的素材进行创作,作品要求有完善统一的

风格。

模块A的设计稿应该具有原创性，不应和其他选手有相同或

者几乎一致的布局、元素及色调。

网页重构部分须与设计部分保持一致，否则将被扣除相应分

数。

2.模块B：后台开发部分比赛时间：120分钟

5

使用规定的编程语言实现网站要求的功能，构建数据库。

提供前端模板，但任何改变或修改的部分需保持原始的UI

风格。

使用jQuery框架或原生js进行页面交互；使用Laravel框

架进行后台开发。

3.模块C：前端游戏设计比赛时间：120分钟

为一家游戏公司，完成一款游戏的页面元素设计和前端页面

制作。选手需要使用有限的素材，对主题有针对性地设计优美的

界面和合理的操作逻辑，并在页面中实现赛题中的需求。

4.模块D：前端游戏功能实现比赛时间：180分钟

在上午制作完成的前端页面和设计风格之上，实现游戏功能

逻辑和交互。选手需要在项目中充分体现交互友好性，完成赛题

中对于游戏功能的描述。

（三）评判标准

1.分数权重

各模块分值分布，满分为100分。本次评分分两类，评价分

（主观）和测量分（客观）。

分数

模块竞赛时间

模块名称

编号min

测量分评价分合计

A网页设计制作120151025

B后台模块开发12020525

C前端游戏设计12015520

6

D前端功能实现与交互18025530

总计5407030100

（1）评价分（主观）

评价分（Judgement）打分方式：5名裁判为一组，各自单独

评分；去掉最高分和最低分，计算出平均权重分，除以3后再乘

以该子项的分值计算出实际得分。裁判相互间分差必须小于等于

1分，否则需要给出确切理由并在裁判长（助理）的监督下进行

调分。权重表如下：

权重分值要求描述

0分各方面均低于行业标准，包括“未做尝试”

1分达到行业标准

2分达到行业标准，且某些方面超过标准

3分达到行业期待的优秀水平

权重分值要求描述

更改现有CSS代码极度困难，CSS代码没有组织结构。

0分

HTML没有格式化

更改现有CSS代码较为困难，较难以定位需要的内容。

1分

HTML有基本格式

更改现有CSS代码比较容易，很方便就能定位需要的内容。

2分

HTML格式良好

在2分基础上，CSS还应用了一定的代码分组技术并至少包含5条以上

3分

有用的注释

（2）测量分（客观）

测量分（Measurement）打分方式：按模块设置若干个评分

组，每组由5名裁判构成。每个组所有裁判一起商议，在对该选

7

手在该项中的实际得分达成一致后最终只给出一个分值。若裁判

数量较多，也可以另定分组模式。

类型示例最高分值正确分值不正确分值

满分或零分网站地图动态链接至菜单0.500.500

CSS代码能通过验证[每种错

从满分中扣除2.002.000–1.5

误扣0.5分]

CSS代码有注释(0.5分)

从零分开始加1.01.00–0.5

XHTML代码有注释(0.5分)

2.评判方法

裁判组：根据组委会审核后的裁判组名单构成。

预期分组与分工方案：

根据裁判推选数量和情况决定，评分项拆分为多个评分小

组，每个评分组由3-5名裁判构成。

3.统分方法

经各组参与裁判员签字确认和裁判长或裁判长助理审核的

评判结果交由工作人员录入竞赛评分系统。四个模块的总和即为

选手的最终竞赛成绩。

4.成绩并列处理

当两名选手总成绩并列时，选手排名顺序按照D模块成绩先

后顺序排序；若D模块成绩依旧相同，依次按照C、A、B顺序比

较模块成绩。

8

三、竞赛细则

（一）竞赛日程安排

比赛日程共两天，共计9小时。

日期时间工作内容参与人员

C-3全天参赛选手、裁判员报到参赛选手/裁判员

裁判员培训、参赛选手参赛选手/裁判员、裁判长/裁判长助

C-2全天

熟悉设施设备场地理/场地主任/技术支持人员

裁判员培训、参赛选手

参赛选手/裁判员/裁判长/裁判长助

C-1全天熟悉设施设备场地、验

理/场地主任/技术支持人员

收封存设施设备场地

裁判长及助理

进入赛场各地市裁判员/参赛选手/场地经理及

助理

裁判长及助理

工位抽签选手检录试

//各地市裁判员/参赛选手/场地经理及

机

助理/监督仲裁组

裁判长及助理

C1全天模块A竞赛各地市裁判员/参赛选手/场地经理及

助理/监督仲裁组/技术支持人员

裁判长及助理各地市裁判员/参赛选

选手检录试机

/手/场地经理及助理

裁判长及助理

模块B竞赛各地市裁判员/参赛选手/场地经理及

助理/监督仲裁组/技术支持人员

裁判长及助理

模块评分

A各地市裁判员

裁判长及助理

进入赛场各地市裁判员/参赛选手/场地经理及

助理

裁判长及助理

工位抽签选手检录试

//各地市裁判员/参赛选手/场地经理及

机

C2全天助理/监督仲裁组

裁判长及助理

模块C竞赛各地市裁判员/参赛选手/场地经理及

助理/监督仲裁组/技术支持人员

裁判长及助理

模块评分

B各地市裁判员

9

裁判长及助理

选手检录/试机各地市裁判员/参赛选手/场地经理及

助理/监督仲裁组

裁判长及助理

模块D竞赛各地市裁判员/参赛选手/场地经理及

助理/监督仲裁组/技术支持人员

裁判长及助理

模块评分

C各地市裁判员

监督仲裁组/裁判长及助理

C3上午成绩公布和赛后点评会各地市裁判员/领队/选手/场地经理

及助理

注意：竞赛前10分钟，监考工作人员发试卷（包括纸质版

和电子版两个版本）。

（二）参赛选手

参赛选手应为2002年1月1日以后出生具有河南省户籍或

在豫工作学习满1年以上的人员，可按属地原则报名参赛。已获

得“中华技能大奖”“全国技术能手”的人员不以选手身份参赛。

（三）裁判人员

包括各项目裁判组全体成员。

1.裁判长

裁判长由省组委会技术工作组遴选确定。秉承公平公正原则

做好相应沟通协调、落实竞赛各项技术工作、不参与参赛选手评

判工作。做好本项目裁判员（含裁判长助理）的赛前培训和本项

目赛前技术交流，组织本项目开展赛后技术总结和技术点评。

2.裁判长助理

协助裁判长做好各项竞赛组织实施工作、不参与参赛选手评

判工作。

10

3.裁判员

裁判员由各代表队择优推荐，每个参赛项目限推荐1名裁判

员。经省组委会技术工作组审核确定后承担裁判员执裁工作。全

部裁判工作均采取回避制度，裁判员不对来自同一参赛队的选手

进行评判。

如裁判员人数不能满足工作需要，由项目裁判长在赛前提出

增加裁判员人选申请，由省组委会技术工作组遴选确定后增补。

服从裁判长工作安排，认真做好本职工作；熟练掌握竞赛技

术规则，参加赛前培训和技术讨论；对有争议的问题提出客观、

公正、合理的意见和建议；公平公正执裁，不徇私舞弊；坚守岗

位，严格遵守执裁时间安排，保证执裁工作正常进行。

4.工作人员

包括技术支持人员、录分员及赛务保障人员等。按照大赛统

一要求，在裁判长领导下做好相应的竞赛保障工作。

（四）竞赛要求

1.参赛选手须凭身份证和参赛证进入考场。

2.进入赛场前，签署诚信保证书，并将手机、U盘等考场

违禁设备放到指定地点。

3.参赛选手应准时参赛，迟到30分钟以上者，将不得入场，

按自动弃权处理。

4.参赛选手在竞赛期间可饮水、上洗手间，但其耗时一律

计入竞赛时间。

11

5.监考工作人员发出开始竞赛的时间信号后，参赛选手方

可进行操作。

6.参赛选手不得提前离场。

7.参赛选手必须独立完成所有项目，除征得裁判长许可，

否则严禁与其它选手或本单位裁判员交流接触。

8.竞赛期间，参赛选手遇有问题应向监考工作人员举手示

意，由监考工作人员负责处理。

9.监考工作人员发出结束竞赛的时间信号后，参赛选手应

立即停止操作，依次有序地离开赛场。

（五）项目特别规定

1.本项目赛题和配套文件，包括软件环境原则上为英语。

2.存在以下情况者，取消该模块成绩：

（1）在提交的作品中带有公司（单位）、个人或组织机构的

标记

（2）携带任何有记录内容的纸张等用品到工位上

（3）赛时间截止时不听从裁判结束比赛口令，经提醒后仍

继续操作电脑

3.存在以下情况者，取消该选手比赛成绩：

（1）考生在比赛过程中将禁止使用的设备带到工位上

（2）在比赛中存在有违诚信道德的事件，经当值裁判记录

并提交裁判长确认

4.如果发生非本人因素引起的软硬件故障且无法立即解决

12

的，裁判将予以记录并根据处理所花费的时间给予补时。

5.如选手在比赛中存在技术问题的争议，以本技术文件与

赛题规定为准，文件中未涉及的情况由裁判长组织商议决定。

（六）问题或争议处理

对竞赛期间出现的问题或争议按以下程序解决：

1.竞赛项目内解决。参赛选手、裁判员发现竞赛过程中存在

问题或争议，应向项目裁判长反映。项目裁判长依据相关规定处

理或组织比赛现场裁判员研究解决。处理意见需比赛现场全体裁

判员表决的，须获全体裁判员半数以上通过。最终处理意见应及

时告知意见反映人，并填写《河南省第二届职业技能大赛问题或

争议处理记录表》（以下简称《争议处理记录表》。

2.监督仲裁组解决。对项目内处理结果有异议的，在规定时

间内，各参赛队领队可向监督仲裁组出具署名的书面反映材料并

举证。

四、竞赛场地、设施设备等安排

（一）场地设备

（每一个工位包含）

序号设备名称类型/型号单位数量

1开发用主机（或者一体机）台式台1

2显示器（一体机除外）液晶台1

13

3键盘美式个1

4鼠标三键光电个1

选手比赛用主机配置：

硬件型号参数

CPUIntelCorei5或者i72.5GHz或以上

内存DDR3或以上16GB

硬盘SATA提供不少于40GB的可用临时硬盘空间

选手比赛用显示器配置：

尺寸分辨率色域亮度接口

21英寸或以上1080P广色域250cd/m2VGAHDMIDisplayPort

附表：选手机软件环境（所有软件均为英文版）

类别名称版本备注

操作系统Windows10Windows10x64(EN)

AdobePhotoshop2022orupper

AdobeIllustrator2022orupper

开发工具

AdobeXD2022orupper

XAMPP8.2orupper

MicrosoftEdge109orupper

浏览器Firefox109orupper

Chrome109orupper

MSOffice2021orupper

Postman10.9.0orupper

辅助软件

Editplus5.6orupper

14

PhpStorm2022.3.1orupper

WebStorm2022.3.1orupper

VScode1.74orupper

Sublime4143orupper

Band-Zip7.3orupper

7-Zip22.01(x64)orupper

pixijs7.1orupper

前端框架

jQuery3.6.3orupper

PHP框架Laravel9.xorupper

辅助工具清单

序号辅助工具与材料名称数量和要求

1文件袋60个

2签字笔100支

3荧光记号笔100支

4复印纸A4纸5包(包/500张)

5移动硬盘6个

6U盘10个

7投影仪1台

8白板1个

9黑白A4激光打印机2台

10电子计算器8台

11文件袋不干胶封条5套

12便利贴纸2本

15

13保险柜1个

14收纳箱8个

15便携音箱+话筒1套

16桌子、电脑椅各50张

17排插50个

18移动电视1台

19椅子50把

20文件柜2组

注:1、比赛设备、软件均由承办方统一提供，不允许选手自带软件参

赛和工具（选手自用键盘和鼠标除外，但入场前要经过裁判组的检查方可

带入比赛场地；严禁携带包含存储等功能的智能键盘和鼠标，一经发现并

经裁判组确认，按赛场作弊处理，取消竞赛资格！）。

2、共40个工位，每个工位大小是2000*2000。42台比赛pc计算机，

10台评分pc计算机。

16

（二）场地布局示意图

五、安全、健康要求

为有效预防和及时控制赛场突发事件，确保河南第一届职业

技能大赛“网站设计与开发项目”的顺利进行，特制定赛场突发

17

事件应急预案。

本赛区将建立与行政、交通、司法、公安、消防、卫生、食

品、质检等相关部门的协调机制，制定安全管理的相应规范、流

程和突发事件应急预案，保证比赛筹备和实施全过程的安全。

（一）选手安全防护措施要求

竞赛过程中，参赛选手须严格遵守安全操作规程及劳动保护

要求，接受裁判员、现场技术服务人员的监督和警示，确保设备

及人身安全。

（二）现场突然非正常停电

比赛现场如出现突然非正常停电，按下述步骤进行处理：

（1）裁判人员第一时间启动应急现场扩音设施，要求参赛

选手及观摩人员保持镇静，防止踩踏事件发生。

（2）保卫人员开启安全通道，有序疏散观摩人员离场。

（3）裁判员提示参赛选手在电源保护装置的有效时间内备

份计算机操作数据，等候处理决定。

（4）经向执委会汇报后，启动备用电源或决定延迟比赛。

（三）医疗设备和措施

赛场必须留有安全通道；必须配备灭火设备；赛场应具备良

好的通风、照明和操作空间要求；承办单位要做好大赛安全、健

康和公共卫生及突发事件预防与应急处理等工作。

承办单位要设置专门的竞赛后勤保障组，负责竞赛期间健康

18

和安全事务。主要包括检查竞赛场地、与会人员居住地、车辆交

通及其周围环境的安全防卫；制定紧急应对方案；督导竞赛场地

用电、空调等相关安全问题；监督与会人员食品安全与卫生；分

析和处理安全突发事件等工作。赛场必须配备医护人员和必须的

药品，并备有相应急救设施和救护设备。

（四）赛场突发事件应急预案

为有效预防和及时控制赛场突发事件，确保河南省第二届职

业技能大赛平面设计技术项目顺利进行，特制定赛场突发事件应

急预案，制定安全管理的相应规范、流程和突发事件应急预案，

保证比赛筹备和实施全过程的安全。

1.竞赛用计算机等竞赛硬件无法正常运行或使用。

赛前预置10台全套竞赛用硬件，并进行相关软件的安装调

试，保证正常运行或使用，同时针对硬件可能出现的情况组织技

术保障团队负责专业硬件维护。参赛选手发现硬件运行问题后，

按下列程序报告并处理：

参赛选手须立即举手示意监考工作人员，记录其故障发生时

间。

由现场裁判向裁判长及时反映，通知裁判长来处理，裁判长

19

会同当值裁判员、场地主任对电脑故障进行确认。

因参赛选手个人原因导致竞赛中断，中断的时间计入参赛选

手竞赛时间，不予补偿；非因参赛选手个人原因造成的竞赛中断，

中断时间不计入参赛选手竞赛时间，并予补足。

竞赛中断的原因由裁判长会同当值裁判员、场地主任做出判

断，并尽快告知参赛选手参赛队裁判员。

2.参赛选手发生意外受伤或急病等情况

参赛选手发生意外受伤或急病等情况，应按下列步骤进行处

理：

现场裁判及时联系赛场医疗人员救治参赛选手，并向裁判长

报告情况。

赛场医疗人员在进行必要的现场处理后，视伤病情况确定现

场救治或送医院进行救治。

3.现场突然非正常停电

比赛现场如出现突然非正常停电，按下述步骤进行处理：

裁判人员第一时间启动应急现场扩音设施，要求参赛选手及

观摩人员保持镇静，防止踩踏事件发生。

场地主任开启安全通道，有序疏散观摩人员离场。

20

经向执委会汇报后，启动备用电源或决定延迟比赛。

4.比赛现场出现暴力、人员拥堵、急性传染病人员进入等情

况，按下述步骤进行处理：

裁判人员迅速向赛项执委会汇报，并由赛项执委会向大赛组

委会汇报，由赛项执委会及大赛组委会根据势态发展情况确定是

否报告公安、公共卫生及医疗部门，在保证赛场内人员人身安全

的原则下，尽量不扩大事态。

根据赛前制订的现场保卫人员的职责范围，保卫人员迅速就

位，对赛场内队参赛选手以外的其他人员进行有序疏散。

人员疏散后进行现场清理，如消毒、找出突发事件隐患并进

行处理等。

进行处理后，在保证参赛选手人身安全的前提下，继续组织

比赛。

附件：网站设计与开发（世赛）项目样题

21

附件

网站设计与开发（世赛）项目样题

网

页

设

计

制

作

模

块

（模块A样题）

提交者姓名：

2023年1月

22

Competitiontime:2hours

1.INTRODUCTION:

Aneworganizationcalled“EnviroFund”requiressome

onedesignsfortheirnewwebsite.EnviroFundisacrowd

fundingwebsitethatwillhelponlineusersdonatemoneytohelp

funddifferentenvironmentalprojects.

Crowdfundingistheideaofmanypeoplejoiningtogetherto

helpfinancemultipleprojects.Insteadofafewlargemonetary

investors,crowdfundingfinancesprojectsbyhavingmanypeople

contributesmallamountsofmoney.Thetargetaudienceforthis

websiteisyoungerpeoplewhocarefortheenvironmentandare

willingtospendmoneytoimproveandprotectitsfuture.

2.DESCRIPTIONOFPROJECTANDMODULE:

Yourtaskistocreateasuitofonedesignoftheirwebsite

(1920px,768px，480pxwideforPC,Pad，Phone)andalogoforthe

organisation“EnviroFund".

Aonepagedesignisawebpagewhereallthecontentisdisplayed

ononelongscrollablepageandthemainnavigationusesscrolling

23

ofthepageinsteadofseparatesubpages.Yourdesigncanbeas

longasyoulike,asyouscrolldown.

Youhavebeenprovidedwithtextandimagesthatwillhelpyouin

yourdesign.Youarenotrequiredtousealloftheimagesandtext

thathavebeenprovidedbutyoushouldensurethatthereis

sufficienttextandimagesincludedinyourdesigntogiveagood

overallfeelofhowthewebsitewilllookonceconstructed.

DesignshouldfollowthegeneralregulationofEnglishwebsite.

Youshouldproduceatleast2interactioneffectineachdesign.You

mayaddothertextandinformationtodescribetheinteraction

effect.

Thefinalonedesign(allof3)mustincorporatethe

followingsections/columnsandfollowtheorderbelow:

•Designalogofor"EnviroFund"thatwillbethecorporateidentityfortheir

organisation.

1.Thelogomustbeusedaspartofyourdesignwithinthe

websiteconcept.

2.Yourlogoshouldrepresenttheorganisationandthesubject

ofthewebsite.

24

3.Yourlogoshouldincludebothtext“EnviroFund”andat

leastoneadditionalgraphicalelement.

•TopMenu

•InternalNavigation

1.Phone’sdesignshoulduseafloatingsidebartonavigate

•Banner

•LoginandRegistration

•Introductionofacurrentprojects,includingfollowingelements:

1.Atitle

2.Descriptivetext

3.Rateofprogress

4.Thetotalnumberofraisingmoney

5.Theremainingdaysoftheproject

6.Animage

7.Afund-button

•Listoftheotherprojects

1.Aleastshow3projectsatonce

2.Theremainingprojectistoshowthroughcustominteraction

Effect

•PhotoGalleriesandvideos

1.Withcustominteractioneffecttoviewallthephotos(Videos)

•CompanyHistory

25

•Statisticofallthecrowdfunding

•Afoldableprojectenrollmentfunctionbarincludingthefollowinginput

fieldsandasubmitbutton:

1.ProjectName

2.ProjectCountry

3.ProjectImage

4.ProjectDescription

5.E-mailAddress

6.Password

•SocialShareoptionsincludefacebook,TwitterandGoogle+.

•Backtotopbuttonforall3resolution

•Footer/bottominformation

3.INSTRUCTIONSTOTHECOMPETITOR:

•Yoursubmittedworkforthisprojectshouldconsistof3PNG

files,andonlygiveamarkonthesefile.

•NamingofFile:

XX_1920.png

XX_768.png

XX_480.png

•Saveanysourcefilesofimagestoafoldercalled

"XX_source_files"

inside"XX_Module_A"folder.Sourcefilesarethefiles

26

containingthe

layers,developmentfiles,i.e..psd/.ai/.jpg/.svg/

1.INTRODUCTION:

Implementyourdesignworkintoonehtmlfile,throughwhichuser

canbrowsethesitecorrectlyunder3resolutions(1920px,768px,

480pxwide).

ThatisuseHTML5&CSS3todoaresponsivepage

implementation.

2.DESCRIPTIONOFPROJECTANDMODULE:

•Youneedtopayattentiontothefollowingrequirements:

•Thecriticalvaluebetweenwidescreenandnarrowis800px,and

from

narrowtophoneis500px.

•YourcodecanpassHTML5validation(W3.org)

•YourcodecanpassCSS3validation(W3.org)

•UsecorrectprefixtomodifyyourCSScodeinordertomake

yourwebsitecross-browser.

•PropercommentinyourHTML&CSScodeandyourcode

shouldbereadableandeasymaintain.

27

•MainlyuseChrometomarkthismodule.

•Usethesamefont-familyasinyourdesign.Allthetextinthepageshould

beindexable.

•Accordingtoyourdesignwork,someelementwillonlyshowinwidescreen

layout,andotherswillshowinnarrow/phonescreenlayout.

•Implementallrequiredinteractioneffectinthedesignmodule.(i.e.mouse

over,click,foldEE)

•Theimplementedpageshouldbeassameaspossiblewithyourdesign.

3.INSTRUCTIONSTOTHECOMPETITOR:

•Namethemainhtmlfile“index.html”andputitintherootofthefolder

"XX_Module_A".

28

附件

河南省第二届职业技能大赛

网站设计与开发项目

后

台

模

块

开

发

模

块

（模块B样题）

提交者姓名：

2023年1月

29

一、Competitiontime:2hours

二、Competitiontasksandrequirements

1.INTRODUCTION:

Anewairlinecalled“airx”needtodevelopawebsitetosupporttheironlineservice,

suchasflightinfosearch,ticketpurchaseandcheck-in.Youareaskedtoaccomplish

aprototype(Usespecifiedphpframeworktogeneratecoderapidly)ofthiswebsite

accordingtotheforegoingrequirementanalysisinordertoverifythesefunctional

requirementandthebusinesslogic.

2.DESCRIPTIONOFPROJECTANDMODULE

AirxBusinessLogic

Basicrequirement

Displayhomepagewhenvisitrootdirectory.

Providedtemplatehasbeenused.Anychanged/modifiedpartwillkeepthe

originalUIstyle

UseLaravalframework

Businessprocess

Search

Noneedtologinwhenusingthesearchfunction.

Departurecityanddestinationaremandatoryandcannotbethesame.

Provideerrorhintsiftheinputisnotcorrect.

Aftersearching,flightinformation(flightnumber,aircraftmodel,departure

time,departurecityanddestination)willbedisplayedcorrectlyand

completelyinsearchresultpage.

30

Dateandcabinettypearenotmandatory.Noinputreferstoanydate/cabin

type.

Iftheflighthasstopsellingthetickets(onehourpriortothedeparturetime),

thisflightwon’tbeshowninthelist

Iftheuserdefinedthespecificcabintypeduringsearch,thesearchresultwill

onlylisttheflightwiththiscabintype.Thecabintypeisautomaticallychosen

(accordingtouser’sdefinition)inthesearchresult,anduserscouldstillclick

tochangetoothercabintypes.

Ifthespecificcabintypehasnoavailableseatsinthesearchresult,users

cannotpurchasetheticketwiththiscabintype.(theflightinfocouldbe

displayedinthesearchresultbutitwillprovidehintsofsoldoutwhenuser

click)

31

ClickBUYNowandthenturntoticketpurchasepage.Iftheuserdidn’t

choosecabintype,itshouldprovideproperhintofchoosingthecabintype

first

Provideproperhintifthereisnoavailableflightinthesearch.

Purchase

PurchaseTickets

Logged-inusercouldgotopurchasepagebyclickingBUYNOWinthe

searchpage.Correlationinformationshouldbecorrect(flightinformation,

cabintypeetc.)

Unlogged-inuserwillgotologinpagefirstandthenturntopurchase

pagewithcorrectedcorrelationinformation(flightinformation,cabintype

etc.)

Click<<CANCELonrightupnavigatorinpurchasepageandusercouldgo

backtopreviouspage(cancelpurchase)