济宁市“技能状元”职业技能大赛-网站技术（世赛选拔项目）技术文件

济宁市“技能状元”职业技能大赛

—第一届山东省职业技能大赛济宁市选赛暨

2023年度职业技工院校学生教师职业技竞赛

网站技术项目技术工作文件

第一届山东省职业技能大赛济宁市选拔赛

暨2023年度职业技工院校学生教师职业技能竞赛组委会

2023年4月

目录

一、技术描述.............................................1

（一）项目概要......................................1

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

二、试题与评判标准.......................................5

（一）试题（样题）..................................5

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

（三）评判标准.....................................24

三、竞赛细则............................................25

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

（一）赛场规格要求.................................26

（二）场地布局图...................................27

（三）基础设施清单.................................27

五、安全、健康要求......................................28

一、技术描述

（一）项目概要

网站技术项目是指根据项目需求进行站点整体风格与布局

的设计，根据设计的页面实现在各种终端上的页面效果、交互

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

选手需要熟练地进行图形图像处理，设计站点的logo、页

面的整体风格与版面布局，并在各版面中应用这些元素，同时

还需关注站点的受众群体，让制作的网站更受欢迎；使用HTML5

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

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

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

理。

在实际工作中，网页设计者要能理解网页制作的技术和艺

术价值。技术的运用是为了帮助网站经营者更好更高效地工作

(自动化)。网站的颜色、字体、图形以及布局则需要富有创意

的设计技巧。用户界面要确保具有良好的可用性。网站制作者

也必须理解项目工作、内容制作和网站管理的基础知识。

—1—

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

1、平面设计

选手必须知道并理解：

如何创建图形文件、图片并具备审美价值观

如何根据要求有效使用提供的文字简介进行设计

在设计网站颜色、排版和图像时所需要的创意和技巧

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

如何运用用户中心的设计

如何为网站创建动画

选手必须能够：

导入并编辑图像

为网页优化图像

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

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

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

为不同的屏幕分辨率进行设计；对给定的分辨率进行

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

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

创建高效、直观、易用的网站导航

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

—2—

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

2.页面交互

使用javascript、jQuery或其他一些插件实现页面

交互及一些动画效果

不能使用flash创建动画

3.通过PHP及MYSQL进行服务器端编程

选手必须知道并理解：

如何进行服务器端编程(PHP)

如何设计数据库(MySQL)

选手必须能够：

创建、修改服务器端应用程序(如CMS系统、网络数

据库)

使用服务器端组件(如缩略图、ZIP文件和PDF文

件)

4.通过开放源码库和框架实现客户端

选手必须知道并理解：

如何使用开放源码库和框架来编码

选手必须能够：

通过开放源码和框架创建客户端和服务器端

5.可用性及可及性

—3—

选手必须知道并理解：

如何使用最新的设计技术和编码技术制作遵循行业标

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

选手必须能够：

使用JavaScript、JQuery等工具来实现页面各部分

内容

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

修改

能在两种不同的浏览器(最新、稳定的版本)上优化

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

所创建的网站内容在不同分辨率的屏幕上要保持一致

且结构良好

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

来实现页面

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

CSS3.0)

6.必须具备的理论知识，但不直接测试

色彩构成理论

图片制作、加工、处理的要素

HTML、CSS、javascript、JQuery、PHP、MySql等

—4—

语言和工具的语法和使用规则

使用MVC框架结构来对网站服务器端进行编码

开源代码库及框架的使用

站点设计和受众分析

所有需要使用的软件的操作知识

网站设计与开发的步骤以及每个步骤需要完成的任务

7.必须了解的标准和法规，但不直接测试

网页的W3C标准

网站版权法规

二、试题与评判标准

（一）试题（样题）

主要包括基本内容分为3个模块或部分。

模块A

1.介绍

低碳环保，共享碧水蓝天

低碳环保生活（英文：Low-carbonliving）是指减少日常

作息时所耗用能量的绿色环保的生活方式，低碳环保生活主要

是从节电、节气和回收三个环节来改变生活细节。其目的主要

是减少温室气体的排放量，特别是二氧化碳，从而减少对大气

—5—

的污染，减缓生态恶化。低碳生活既是一种生活方式，同时更

是一种可持续发展的环保责任。低碳生活要求人们树立全新的

生活观和消费观，减少碳排放，促进人与自然和谐发展。低碳

生活将是协调经济社会发展和保护环境的重要途径。

2.项目及模块说明

你的任务是创建一套一页纸的网站设计(1920px，480px宽

的个人电脑，电话)一页设计是一个网页，所有内容显示在一个

长可滚动页面上，主导航使用滚动页面而不是单独的子页面。

你的设计可以是只要你喜欢，当你向下滚动。

您已经获得了可以帮助您进行设计的文本和图像。你不需

要使用所有的图像和文本，但你应该确保有足够的文本和图像

包含在你的设计，给一个良好的整体感觉，网站将如何构建。

设计应遵循英文网站的一般规定。您应该在每个设计中产

生所需的交互效果。您可以在设计中添加一个额外的文件或其

他文本和信息来描述交互效果。

最终的一页设计（全部2页）必须包含以下部分/列

标志

包含文本和图像

o

内部导航

遵循下面的列

o

—6—

手机的设计应该使用一个浮动的侧边栏来导航

o

横幅

内容包括：

o

.标题

.一般介绍

登录和注册

搜索栏

环保活动

使用自定义的交互效果来查看所有的照片

o

切实可用的环保（节能减排、低碳环保）知识

在预览列表中

o

日常生活的环保习惯

在预览列表中

o

由于需要在人们周围进行环保活动

在预览列表中

o

国家节能减排措施

在预览列表中

o

全民环保新方法

在预览列表中

o

国际环保公约

—7—

在预览列表中

o

包含首页的位置信息

返回到顶部按钮

页脚/底部信息

链接到相关网站的链接

o

复制权限信息

o

3.对竞争对手的说明

将文件保存在桌面的“XX_Module_A”文件夹中，XX是您

的计算机号码

您为这个项目提交的工作应该包含2个PNG文件，并且只

在这些文件上做出一个标记。

文件命名：

XX_logo.png/XX_logo.psd

XX_mainPC.png/XX_mainPC.psd

XX_mainPhone.png/XX_mainPhone.psd

模块B

1.介绍

近年来，互联网已成为我们日常生活不可或缺的一部分，

使信息传播成为取之不尽用之不竭的内容和互动来源。游戏在

我们的日常生活中发挥着重要作用，使数百万人能够快速免费

—8—

地获得乐趣和娱乐。

考虑到这些概念您决定开发一款适用于最常见网络浏览器

的小游戏，展示您在网络设计和开发方面的天赋。

游戏的开发将包括使用HTML和CSS来设计布局（使用您提

供的媒体文件）和客户端编程（JavaScript和开源库）来实现

游戏功能。zip文件中将提供一些媒体文件。您可以创建新媒

体并修改为游戏提供的任何内容。您的游戏将以1024x768像素

（宽x高）的平板电脑分辨率开发。如果游戏在更大的屏幕上

打开，游戏必须在屏幕的中心（水平和垂直）。

2.项目和模块说明

该模块将在2小时内完成。您将使用HTML/CSS创建布局，

并使用JavaScript创建游戏功能，以确保游戏在不同的网络浏

览器（Chrome和FireFox）中正确运行，并遵循以下描述的要

求。

游戏使用了以下元素:

飞船：由用户控制的元素。

行星：从右到左移动的元素给人飞船在空中运动的印象

陨石：飞船需要躲避的元素

敌人(飞船)：飞船需要躲避的元素

燃料：飞船需要拾取的元素并增加油料计数器

—9—

时间：显示飞船飞行的时间元素

星星：飞船需要拾取的元素并增加星星计数器

燃料计数器：显示可用燃料数量的元素

星星计数器：显示拾取到的星星数量的元素

暂停/继续按钮：该按钮可暂停/继续游戏。

声音按钮：启用和禁用游戏中的声音。

图标：在游戏中显示提供的图标

布局

基于给定的设计实现HTML页面

游戏板布局：这个布局必须呈现上面描述的所有元素：图

标，飞船，星星，行星，燃料，燃料计数器，星形计数器，

计时器，声音按钮，暂停/继续按钮。

排名显示：此布局必须显示游戏的标志，并按以下各栏进

行排名：姓名、星星和时间，表格将显示“开始游戏”按

钮。

游戏说明：游戏屏幕向用户展示说明和“开始游戏”按钮。

这个游戏的说明都包含在媒体文件中。

说明和开始游戏按钮。指令必须以动画的方式呈现。

所有按钮都必须具有活动的悬停效果。

HTML和CSS代码必须在HTML5和CSS3规则的W3C标准中有

—10—

效。

游戏功能

按下初始屏幕上的“开始游戏”按钮，显示用户名输入界面，

点击继续按钮进入游戏，用户名不能为空

进入游戏后，行星动态地从右向左移动，以人留下飞船在太

空移动的印象。时间从0开始，按照飞船移动的秒数呈现。

燃料计数器开始下降，每秒一分。游戏开始时，15分燃料（15

秒时间）。燃料最大值为60分（60秒飞行时间）。分数从

0分开始

玩家需要通过键盘操作飞船

在飞行期间，飞船需要摧毁出现在屏幕上的敌方飞船和小行

星。若飞船和小行星或飞船相撞，小行星或飞船会被摧毁，

并且燃料减少15分

玩家按空格键飞船发射，玩家不能一直继续地按空格键来发

射，也就是每按压一次空格键只有一发。

主飞船的一发只能摧毁一个目标。发射不可以穿过一个目标

射中另一个

飞船和行星的位置不规则动态出现，从右向左飞

敌方飞船可以被一次射击摧毁。每摧毁一架敌舰，分数计数

器增加2分

行星需要两发才能摧毁。每摧毁一个小行星，分数计数器增

—11—

加5分。

在飞行中，主飞船需要飞过燃料图标来收集燃料。燃料图标

以动态的形式从屏幕顶端往下掉，水平位置随机。每收集一

个燃料图标，燃料计数器增加15分。一分提供1秒飞行时

间

在飞行中，玩家可以点击当游戏暂停，所有互动和声音都停

止。若玩家再一次点击按钮，或者再一次按字母P，游戏从

刚刚停止的时刻继续暂停按钮暂停游戏或者在键盘上按字母

P

燃料计数器变0后，游戏结束

玩家名字，飞行时间和分数通过本地存储来记录，并使用这

些变量

排名根据分数顺序

为提高游戏互动，需要一些音效

必须可以开或关游戏声音。如果关了声音，任何的声音都不

播放。如果开启音量，所有的声音开启

你的游戏不能有JavaScript错误或者有信息显示在浏览器

控制

保持你的HTML/CSSandJavaScript代码安排有序和整洁，

使用有意义的变量名

游戏需要在两个浏览器上工作正常，oogleChromeand

—12—

MozillaFirefox。游戏要求将在GoogleChrome

中检查，兼容性在MozillaFirefox中检查

3.说明

ZIP文件中提供了媒体文件。您可以修改提供的文件并创建新

的媒体文件，以确保正确的功能并改进应用程序。

将所有图像源文件保存到“XX_Module_B/XX-Design”文件夹

中名为“XX_fonts”的文件夹中。源文件是包含图层、开发

文件的文件，即.psd、.ai、.svg。XX是您的计算机编号

将工作游戏保存到服务器上名为“XX_Module_B”的目录中。

请确保您的主文件名为index.html。

使用有意义的变量名，该模块将在Chrome和FireFox中进行

评估。

模块C

1.介绍

“Railpack”是一家致力于提供城市间铁路运输服务的公司，

公司希望你制作一个在线售票系统用于改善传统售票模式带来

的各种不便。委托开发的在线售票系统应当包含登陆、注册、

购票、车次查询、订单查询、订单改签等功能。

2.项目及模块的说明

（1）业务逻辑

—13—

1基本要求

2在访问根目录时，会显示主页。

3已使用了所提供的模板。任何已更改/修改的部分都将保

持原始的UI样式

4使用laravel框架

（2）有关该公司对于在线售票系统的需求如下：

登录页面

页面中必须包含如下内容:

账户、密码、登录按钮

注册界面

页面中必须包含如下内容:

账户、密码、确认密码、注册按钮

—14—

主界面

该页面为网站的默认页面，你可以通过一个表单搜索列车

信息。有关表单内容如下（注意括号中的内容仅作为赛题功能

要求提示，在页面中可以不被显示）：

出发城市、到达城市、日期、票务等级、人数、搜索按钮(列

车搜索页面链接)

搜索界面

在列车信息区域，每个列车信息包含如下内容（注意括号

中的内容仅作为赛题功能要求提示，在页面中可以不被显示）：

列车编号、来自（车站）、至（车站）、出发日期、发车时

间、到达日期、头等座价格（包括机票剩余信息和订购按钮）、

二等座价格（包括机票剩余信息和订购按钮）

—15—

订单确认页面

一个订单信息模块包含如下内容：

列车编号、来自（车站）、至（车站）、出发日期、发车时

间(HH:mm)、到达日期(HH:mm)、票务等级、价格（每张票的

价格）、总价

一个乘客信息模块包含如下内容：

选定乘客

名称、身份证

历史乘客

名称、身份证

添加新乘客

名称、身份证

—16—

订单结果页面

一段“Yourorderissuccessful”的提示应该出现在页面

的顶端，同时显示如下信息（注意括号中的内容仅作为赛题功

能要求提示，在页面中可以不被显示）：

列车编号、来自（车站）、至（车站）、出发日期、出发时

间、到达时间、乘客（带id的姓名）、票务等级、总价、

主页面按钮

—17—

我的订单页面

页面中包含一个列表用于显示历史订单信息，每一个订单信

息包含下列内容（注意括号中的内容仅作为赛题功能要求提示，

在页面中可以不被显示）：

列车编号、来自（车站）、至（车站）、出发日期、出发时

间、到达时间、票务等级、总价、乘客姓名（带有“更改”

按钮和“取消”按钮）

订单付款页面

当用户完成订单信息确认后，跳转至本页面。该页面中

LimitTime字段为一个2分钟起的倒计时，每秒钟刷新一次。

在该页面中包含如下信息：

Limittime、列车编号、来自（车站）、至（车站）、出发

—18—

日期、总价、支付按钮

管理面板页面

当管理账户登陆后，自动跳转至本页面，且导航栏中隐藏

其他页面链接。管理员可以在该页面中完成添加一个车次的操

作，所添加的车次应当能够在购票系统中被用户检索和购买。

该页面不提供模版（美观不做评分），添加车次功能包含如下

字段：

列车编号、来自（车站）、至（车站）、出发日期、出发时

间、到达时间、一等座价格、二等座价格、一等座位置数量、

二等座位置数量、创建按钮

1.功能和条件：

(1)主界面和搜索界面不需要登录即可使用，其他界面必须

登录后使用

—19—

(2)在各类搜索页面中如果车次所有座位等级的剩余票数小

于首页查询时输入的订票人数，应当不显示相应车次信息。

(3)在主页面点击搜索按钮后，页面应当正确跳转至搜索页

面。相关的查询字段应当与主页面中填写的一致。

(4)在搜索界面座位等级区域中，应当高亮显示用户在主界面

中选择的坐席等级。

(5)在搜索界面显示的发车时间和到达时间应当为首页选择

的发车日期当天的班次，发车时间在当前时间之前的车次

应当不显示。

(6)在订单确认页面中，历史乘客栏目显示该账户历史添加的

乘客信息。点击历史乘客中的乘客信息，该乘客信息应当

添加到选定乘客栏目中。历史乘客栏目中的乘客ID信息

不应当重复。选定乘客与历史乘客栏目的乘客信息可以通

过交互操作删除。

(7)当用户在订单确认页面提交信息后，相应的车票资源（数

量）应当被占用（减少）。我的订单页面中应当包含刚才

所定车票信息。

(8)在订单确认页面中点击Buy跳转至订单付款页面，用户可

以在该页面点击“Pay”按钮付款。在订单付款页面中用

户需要在2分钟内付款，超过2分钟后订单为取消状态且

—20—

不能继续付款，被占用的车票资源需要被正确释放。付款

成功后，页面应跳转至订单结果页面，页面中应当包含刚

才所购车票信息。

(9)用户在我的订单中可以看到状态为未付款的有效订单，并

点击付款按钮跳转订单付款页面继续操作支付。

(10)用户在订单支付剩余时间内，可以在我的订单页面中看

到未付款的订单，点击可以跳转至订单付款页面进行付款

(11)页面中相应数据应当按照数据库逻辑正确计算显示，所

有数据应当是真实且源自于数据库的。

(12)为了简化赛题逻辑，所有列车仅存在始发站与终点站，

列车途中不停靠车站。

(13)在Login页面中，为保护账户安全，在1分钟内登录错

误超过五次，需要等待30秒后才能继续登录。

(14)在历史乘客中，在同一个账户下乘客的身份证不能重复，

且身份证为18位。

(15)请设置一个账户名为“admin”密码为“admin”的管理

员账户和一个账户名为“user”密码为“user”的普通用

户，便于评分操作。

2.说明

—21—

(1)将您的文件保存在服务器上一个名为“XX_Module_C”的

文件夹中，其中XX是您的计算机号码。

(2)当访问网站的根目录时，可以显示主页。

(3)将数据关系映射保存到“\XX_Module_C”中，并将其命

名为“datSamap.jpg”。

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

1.比赛时间安排：

本项目比赛时间为一天,共计7个小时。本项目共A、

B、C三个模块，每个模块独立评分，总分为100分。每个

模块都基于不同的网页设计技能领域，相对其他模块可独立存

在。模块的配套素材，会在比赛开始前发给选手。选手需要遵

守组委会安排的时间表，在规定的结束时间前完成作品的存盘，

将由工作人员进行作品拷贝并由选手进行最终确认。

模块A：平面设计(25分)比赛时间：2小时

某机构需要制作一个主题宣传网站。选手作为一名设计师

需要设计一个在PC端和手机端同时展示的主页面和一个

logo。并按要求排列(顺序展现模块内容)。每位选手模块A

的页面设计内容应该具有原创性，不应和其他选手有相同或者

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

—22—

模块B：网页游戏(30分)比赛时间：2小时

某在线网站需要制作一个前端游戏，选手将使用提供的有

限素材，按照赛题要求进行游戏风格、界面、元素的设计。提

交的设计应能符合游戏主题，并能在设计稿中体现出交互友好

的设计理念。

模块C：后台管理系统(45分)比赛时间：3小时

选手需要使用后端主流框架，根据题目要求完成某管理系

统的开发工作。在制作过程中应当充分利用框架带来的便捷，

巧妙减少不必要的开发工作量。提交的作品还应该良好的遵循

素材中提供的页面模版风格，各种交互的体验也应当是良好的。

2.试题：

选手应在对应的模块时间内完成要求的比赛项目，并将最

终的作品保存到如下命名的文件夹中：

XX_Module_A

文件夹中应包含PSD格式分层文件和PNG格式效果文件

XX_Module_B

文件夹中应包含所有的源代码文件

上面的‘xx’是你的机器(抽签)号，只有按规定正确保

存的文件才会被评分，否则所提交内容无效，视为0分。

XX_Module_C

—23—

文件夹中应包含所有的源代码文件和数据库文件

（二）评判标准

1.分数权重

分数

模块评分标准

主观分客观分合计

模块A平面设计101525

模块B网页游戏62430

模块C后台管理系统54045

总分2179100

2.评判方法

采用综合评价(裁决)方式。所有裁判员各自单独评分，A

模块总分分差不能大于等于3分，B、C两个模块的总分分差

不能大于等于5分，否则，需要给出确切理由并在小组长或

裁判长的监督下进行重新评判打分。

裁判组：裁判长+现场裁判组成。每个参赛院校可申请一名

人员作为现场裁判，裁判长由组委会聘请。

裁判长带领现场裁判分别对各模块进行评分，评分结果须

提交给裁判长统一汇总。主观评分和具体测试数据需由每一个

—24—

参与评判的裁判员签字确认后提交裁判长。

成绩并列：当参赛选手出现中成绩并列时，可由裁判长对

比选手各模块的操作规范，例如：网站整体的美观性、游戏的

整体性、编程部分代码的书写规范、代码的执行效率等内容进

行对比。

三、竞赛细则

（一）赛前1小时，监考人员负责对各参赛选手的身份进

行检查，组织参赛选手抽签，并由各参赛选手对抽签结果签字

确认。选手根据抽签号现场查询竞赛工位并进行竞赛前的各项

准备工作。

（二）抽签号与设备号相对应，选手按抽签号选择机位，不

得随意更换，选手进入赛场后，如无特殊原因，不得再离开赛

场。

（三）赛前20分钟，监考人员将比赛素材拷贝到电脑上，

选手查看素材是否完整并签字确认。

（四）选手迟到20分钟将取消参赛资格。

（五）参赛选手应严格遵守赛场纪律，服从工作人员指挥，

选手除携带竞赛必备的用具外，不得带入任何技术资料和工具

书。所有通讯工具、摄像工具及其它包含存储器的设备一律不

—25—

得带入竞赛现场，否则取消比赛资格。

（六）选手在竞赛过程中不得擅自离开赛场，如有特殊情况，

需经裁判长同意后作特殊处理。竞赛过程中，选手若需休息、

饮水或去洗手间(监考人员陪同)，一律计算在比赛时间内。

（七）上午8：00比赛正式开始，比赛总时间为7个小时，

下午3:00结束(选手在工位就餐)。

（八）参赛选手在竞赛过程中，如遇问题需举手向监考人员

提，选手之间不得互相询问，否则按作弊处理。

（九）竞赛结束前10分钟，监考人员提醒选手注意时间。

选手不得提前离开赛场，比赛结束后，由参赛选手进行工位的

清理工作。经监考人员检查作品和完成拷贝之后，选手在竞赛

情况记录表上签字确认后方可离开竞赛场地。

（十）各参赛选手必须严格按竞赛规程进行操作，如出现较

严重的安全事故，将立即取消竞赛资格。

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

（一）赛场规格要求