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

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

中职学生组

《Web前端开发》赛项

竞赛试题

2023年3月

赛题说明

一、竞赛内容

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

二、竞赛时间

竞赛时间：共计240分钟。

三、注意事项

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

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

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

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

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

按照作弊处理。

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

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

任务背景：

OTA全称为OnlineTravelAgency,中文译为在线旅行社，旅游消费者通过

网络向旅游服务提供商预定旅游产品或服务，并通过网上支付或者线下付费，

即各旅游主体可以通过网络进行产品营销或产品销售。OTA的出现将原来传统

的旅行社销售模式放到网络平台上，更广泛的传递了线路信息，互动式的交流

更方便了客人的咨询和订购。

某旅游公司希望开展线上旅游业务，要从产品和落地服务出发，对公司的

业务进行变革。他们要设计并搭建一套符合中国人使用习惯的线上景点介绍和

订票的网站，用于显示景区的相关的景点、信息、在线订票申请。

任务描述：

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

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

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

第一部分：页面设计

完成“OTA网站”页面设计，包含电脑端（1330px）、平板端（768px）、

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

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

视作未提交）:

1.电脑端设计稿：XX_Home_1330.jpg、XX_Appointment_1330.jpg（XX为

参赛队工位号，下同）

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

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

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

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

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

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

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

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

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

1.页面头部

景区Logo

咨询热线

主导航，至少包括首页、关于我们、景区景点、景区动态、景区项

目、景点预约、行业动态

2.轮播图片

至少3张可自动交互切换的轮播图。

3.景区景点

展示4个景区分类名称

景区分类下面至少展示4个景点。展示内容需要涵盖景点图片、景

点名称。

4.景区描述和介绍，至少包含一张背景图，一段说明文字，一张介绍图

片和一个查看更多按钮。

5,景区项目，带有4个以上的项目列表，每个项目包括项目图片、项目

名称和项目简介。

6,动态中心

列出至少两个分类，每个分