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

2023年甘肃省职业院校技能竞赛中职学生组《Web前端开发》赛项竞赛试题2023年3月

赛题说明竞赛内容本试卷包含页面设计、前端实现和网站重构三部分内容，满分100分。竞赛时间竞赛时间：共计240分钟。注意事项参赛选手不得携带通信设备等物品进入赛场，违反者按作弊处理。请根据大赛所提供的比赛环境，检查所列的硬件设备、软件清单、材料清单是否齐全，计算机设备是否能正常使用。裁判以各参赛队提交到竞赛服务器上的成果物为评分依据。严禁在作品界面、代码、文件名等任何位置标注竞赛队的任何信息，一经发现按照作弊处理。竞赛结束时，请将试卷和答题纸统一提交，检验提交内容。禁止将比赛所用的所有物品（包括试卷和草稿纸）带离赛场。

任务背景：多年来，某国际学校一直致力于为学生提供更加良好的学习及生活环境。在建校时只是一个拥有50名学生的小型国际学校，经过多年的快速发展，到目前已经拥有学龄前、小学部、初中部、高中部、大学预科等各个学部。课程体系采用英国国民教育课程，与麻省理工学校合作开设科学、技术、工程、艺术和数学基础学科，与世界领先的表演艺术学院合作，为孩子们提供最好的表演艺术教育。任务描述：这所国际学校想要搭建一套现代并优雅的英文网站，用于显示学校相关信息、课程、新闻和在线申请，并适应学校的目标受众。你需要按照“页面设计”要求完成具有原创性和统一设计风格、符合品牌形象和受众群体的响应式设计，按照“前端实现”要求完成响应式前端开发、并按照“网站重构”要求使用将静态页面改造成动态页面并部署到服务器。

第一部分：页面设计完成“国际学校”页面设计，包含电脑端（1330px）、平板端（768px）、移动端（480px）三种设备的适配，一些元素可在特定分辨率中通过交互效果隐藏或显示。选手应在服务器中提交以下内容（若在服务器中未找到以下资源，视作未提交）：电脑端设计稿：XX_Home_1330.jpg、XX_Cources_1330.jpg、XX_Contact_1330.jpg（XX为参赛队工位号，下同）平板端设计稿：XX_Home_768.jpg、XX_Cources_768.jpg、XX_Contact_768.jpg移动端设计稿：XX_Home_480.jpg、XX_Cources_480.jpg、XX_Contact_480.jpg除设计稿文件之外，你需要提交额外的文件用于解释和描述你的交互设计，例如：XX_Description.doc（XX为参赛队工位号）。请在服务器上传所有包含图层信息的设计图源文件和交互设计说明文件。站点设计图必须用真实像素尺寸单位；若设计图尺寸大于赛题要求，需在设计图中使用小于4px的清晰可见边框（颜色自定）表示对应分辨率宽度，所有页面内的元素需在该边框内完整显示。一、首页应包含以下元素：页面头部网站Logo主导航，至少包括主页（HOME）、关于我们(ABOUTUS)、服务(SERVICES)、课程(COURSES)、价格(PRICING)、联系我们(CONTACT)轮播图片（Banner）至少2张可通过自动切换的轮播。学校介绍（OurSchool）带有6个演出的学校介绍内容列表介绍内容参考文字附件课程内容(OurCourses)大事件(OurEvents)带有3个大事件内容列表内容用图文表示文字参考文字附件页面底部联系我们（OurContact）最新新闻（Latestposts）常用连接（UsefulLinks）课程页面应包含以下元素：页面头部网站Logo主导航，至少包括主页（HOME）、关于我们(ABOUTUS)、服务(SERVICES)、课程(COURSES)、价格(PRICING)、联系我们(CONTACT)课程信息显示8种课程信息每种课程信息涵盖以下细节：一个课程图片、说明文字、一个获取更多按钮（LearnMore）页面底部联系我们（OurContact）最新新闻（Latestposts）常用连接（UsefulLinks）联系我们页面应包含以下元素:页面头部网站Logo主导航，至少包括主页（HOME）、关于我们(ABOUTUS)、服务(SERVICES)、课程(COURSES)、价格(PRICING)、联系我们(CONTACT)联系我们第一页（个人信息）姓名（Name）邮箱（Email）（Message）下一页按钮（NEXTPAGE）联系我们页面第二页（问题回答）您想要送几个孩子到学校？（Howmanychildrenwouldyouliketoenrol），选项有1，2，3，4，5参观学校（Visitingourschool）姓氏（LastName）邮箱地址（EmailAddress）联系电话（ContactTelephoneNumber）上一页按钮（PREVIOUSPAGE）提交按钮（SUBMIT）第二部分：前端实现根据“页面设计”完成的设计图，使用HTML5、CSS3、JavaScript等前端技术完成符合W3C组织HTML5和CSS3标准的前端代码。所实现的前端布局应与“页面设计”中完成的设计相同。响应式设计要求的页面应使用响应式技术实现不同分辨率的适配，使页面在三种设备分辨率（1330px、768px、480px）下可以正常浏览，一些元素在特定分辨率下应隐藏或显示。所编写的前端代码应符合W3C组织的HTML5和CSS3标准。所编写的HTML代码应有SEO优化并符合W3CWAI-ARIA规范，具备搜索引擎和无障碍访问友好性。前端交互效果和功能需与设计图中的说明和表现一致，至少包括：首页轮播图，不少于三张并可交互切换的图片。页面之间的流转交互设计。HTML/CSS/JavaScript代码应该具备良好的编码风格（各不少于3个可重用模块）和注释（各不少于3个）。选手应在竞服务器中上传成果物项目文件夹，项目文件夹应包含以下内容(网页文件命名如下)：首页HTML文件：index.html课程页面HTML文件：courses.html联系我们页面HTML文件：contact.html其他CSS、JavaScript等网页资源文件

第三部分：网站重构公司已经完成了网站后台管理功能开发，并提供了可用于前端的API接口，接口详情见API稳定性测试报告。你需要根据后台接口重构前端页面，将前端页面中某些部分实现数据获取和提交。首页功能模块：使用轮播图API查询轮播图，通过后台返回的轮播图数据，动态实现首页轮播图片。使用获取活动API查询首页活动列表，通过后台返回的首页活