2023年甘肃省职业院校技能竞赛（中职组）Web前端开发赛项试题C卷 .pdfVIP

2023年甘肃省职业院校技能竞赛

中职学生组

《Web前端开发》赛项

竞赛试题

2023年3月

赛题说明

一、竞赛内容

本试卷包含页面设计、前端实现和网站重构三部分内容，满分100分。

二、竞赛时间

竞赛时间：共计240分钟。

三、注意事项

1、参赛选手不得携带通信设备等品进入赛场，违反者按作弊处理。

2、请根据大赛所提供的比赛环境，检查所列的硬件设备、软件清单、材

料清单是否齐全，计算机设备是否能正常使用。

3、裁判以各参赛队提交到竞赛服务器上的成果为评分依据。严禁在作

品界面、代码、文件名等任何位置标注竞赛队的任何信息，一经发现

按照作弊处理。

4、竞赛结束时，请将试卷和答题纸统一提交，检验提交内容。禁止将比

赛所用的所有品（包括试卷和草稿纸）带离赛场。

任务背景：

多年来，某国际学校一直致力于为学生提供更加良好的学习及生活环境。

在建校时只是一个拥有50名学生的小型国际学校，经过多年的快速发展，到目

前已经拥有学龄前、小学部、初中部、高中部、大学预科等各个学部。课程体

系采用英国国民教育课程，与麻省理工学校合作开设科学、技术、工程、艺术

和数学基础学科，与世界领先的表演艺术学院合作，为孩子们提供最好的表演

艺术教育。

任务描述：

这所国际学校想要搭建一套现代并优雅的英文网站,用于显示学校相关信

息、课程、新闻和在线申请，并适应学校的目标受众。

你需要按照“页面设计要求完成具有原创性和统一设计风格、符合品牌形象

和受众群体的响应式设计，按照“前端实现要求完成响应式前端开发、并按

照“网站重构”要求使用将静态页面改造成动态页面并部署到服务器。

第一部分：页面设计

完成“国际学校”页面设计，包含电脑端(1330px)、平板端(768px)、

移动端(480px)三种设备的适配，一些元素可在特定分辨率中通过交互效果隐

藏或显示。选手应在服务器中提交以下内容(若在服务器中未找到以下资源，

视作未提交)：

1.电脑端设计稿：XX_Home_1330.jpg、XX_Cources_1330.jpg、

XX_Contct_1330.jpg(XX为参赛队工位号，下同)

2.平板端设计稿：XX_Home_768.jpg、XX_Cources_768.jpg、

XX_Contct_768.jpg

3.移动端设计稿：XX_Home_480.jpg、XX_Cources_480.jpg、

XX_Contct_480.jpg

除设计稿文件之外，你需要提交额外的文件用于解释和描述你的交互设计，例

如：XX_Description.doc(XX为参赛队工位号)。请在服务器上传所有包含图

层信息的设计图源文件和交互设计说明文件。

站点设计图必须用真实像素尺寸单位；若设计图尺寸大于赛题要求，需在

设计图中使用小于4px的清晰可见边框(颜色自定)表示对应分辨率宽度，所

有页面内的元素需在该边框内完整显示。

一、首页应包含以下元素：

1)页面头部

•网站Logo

•主导航，至少包括主页(HOME)、关于我们(ABOUTUS)、服务

(SERVICES)课程(COURSES)价格(PRICING)联系我们

(CONTACT)

2)轮播图片(Bnner)

•至少2张可通过自动切换的轮播。

3)学校介绍(OurSchool)

•带有6个演出的学校介绍内容列表

•介绍内容参考文字附件

4)课程内容(OurCourses)

5)大事件(OurEvents)

•带有3个大事件内容列