2023年甘肅省職業(yè)院校技能競賽（中職組）Web前端開發(fā)賽項(xiàng)試題C卷

2023年甘肅省職業(yè)院校技能競賽中職學(xué)生組《Web前端開發(fā)》賽項(xiàng)競賽試題2023年3月

賽題說明競賽內(nèi)容本試卷包含頁面設(shè)計(jì)、前端實(shí)現(xiàn)和網(wǎng)站重構(gòu)三部分內(nèi)容，滿分100分。競賽時(shí)間競賽時(shí)間：共計(jì)240分鐘。注意事項(xiàng)參賽選手不得攜帶通信設(shè)備等物品進(jìn)入賽場，違反者按作弊處理。請根據(jù)大賽所提供的比賽環(huán)境，檢查所列的硬件設(shè)備、軟件清單、材料清單是否齊全，計(jì)算機(jī)設(shè)備是否能正常使用。裁判以各參賽隊(duì)提交到競賽服務(wù)器上的成果物為評分依據(jù)。嚴(yán)禁在作品界面、代碼、文件名等任何位置標(biāo)注競賽隊(duì)的任何信息，一經(jīng)發(fā)現(xiàn)按照作弊處理。競賽結(jié)束時(shí)，請將試卷和答題紙統(tǒng)一提交，檢驗(yàn)提交內(nèi)容。禁止將比賽所用的所有物品（包括試卷和草稿紙）帶離賽場。

任務(wù)背景：多年來，某國際學(xué)校一直致力于為學(xué)生提供更加良好的學(xué)習(xí)及生活環(huán)境。在建校時(shí)只是一個(gè)擁有50名學(xué)生的小型國際學(xué)校，經(jīng)過多年的快速發(fā)展，到目前已經(jīng)擁有學(xué)齡前、小學(xué)部、初中部、高中部、大學(xué)預(yù)科等各個(gè)學(xué)部。課程體系采用英國國民教育課程，與麻省理工學(xué)校合作開設(shè)科學(xué)、技術(shù)、工程、藝術(shù)和數(shù)學(xué)基礎(chǔ)學(xué)科，與世界領(lǐng)先的表演藝術(shù)學(xué)院合作，為孩子們提供最好的表演藝術(shù)教育。任務(wù)描述：這所國際學(xué)校想要搭建一套現(xiàn)代并優(yōu)雅的英文網(wǎng)站，用于顯示學(xué)校相關(guān)信息、課程、新聞和在線申請，并適應(yīng)學(xué)校的目標(biāo)受眾。你需要按照“頁面設(shè)計(jì)”要求完成具有原創(chuàng)性和統(tǒng)一設(shè)計(jì)風(fēng)格、符合品牌形象和受眾群體的響應(yīng)式設(shè)計(jì)，按照“前端實(shí)現(xiàn)”要求完成響應(yīng)式前端開發(fā)、并按照“網(wǎng)站重構(gòu)”要求使用將靜態(tài)頁面改造成動(dòng)態(tài)頁面并部署到服務(wù)器。

第一部分：頁面設(shè)計(jì)完成“國際學(xué)?！表撁嬖O(shè)計(jì)，包含電腦端（1330px）、平板端（768px）、移動(dòng)端（480px）三種設(shè)備的適配，一些元素可在特定分辨率中通過交互效果隱藏或顯示。選手應(yīng)在服務(wù)器中提交以下內(nèi)容（若在服務(wù)器中未找到以下資源，視作未提交）：電腦端設(shè)計(jì)稿：XX_Home_1330.jpg、XX_Cources_1330.jpg、XX_Contact_1330.jpg（XX為參賽隊(duì)工位號(hào)，下同）平板端設(shè)計(jì)稿：XX_Home_768.jpg、XX_Cources_768.jpg、XX_Contact_768.jpg移動(dòng)端設(shè)計(jì)稿：XX_Home_480.jpg、XX_Cources_480.jpg、XX_Contact_480.jpg除設(shè)計(jì)稿文件之外，你需要提交額外的文件用于解釋和描述你的交互設(shè)計(jì)，例如：XX_Description.doc（XX為參賽隊(duì)工位號(hào)）。請?jiān)诜?wù)器上傳所有包含圖層信息的設(shè)計(jì)圖源文件和交互設(shè)計(jì)說明文件。站點(diǎn)設(shè)計(jì)圖必須用真實(shí)像素尺寸單位；若設(shè)計(jì)圖尺寸大于賽題要求，需在設(shè)計(jì)圖中使用小于4px的清晰可見邊框（顏色自定）表示對應(yīng)分辨率寬度，所有頁面內(nèi)的元素需在該邊框內(nèi)完整顯示。一、首頁應(yīng)包含以下元素：頁面頭部網(wǎng)站Logo主導(dǎo)航，至少包括主頁（HOME）、關(guān)于我們(ABOUTUS)、服務(wù)(SERVICES)、課程(COURSES)、價(jià)格(PRICING)、聯(lián)系我們(CONTACT)輪播圖片（Banner）至少2張可通過自動(dòng)切換的輪播。學(xué)校介紹（OurSchool）帶有6個(gè)演出的學(xué)校介紹內(nèi)容列表介紹內(nèi)容參考文字附件課程內(nèi)容(OurCourses)大事件(OurEvents)帶有3個(gè)大事件內(nèi)容列表內(nèi)容用圖文表示文字參考文字附件頁面底部聯(lián)系我們（OurContact）最新新聞（Latestposts）常用連接（UsefulLinks）課程頁面應(yīng)包含以下元素：頁面頭部網(wǎng)站Logo主導(dǎo)航，至少包括主頁（HOME）、關(guān)于我們(ABOUTUS)、服務(wù)(SERVICES)、課程(COURSES)、價(jià)格(PRICING)、聯(lián)系我們(CONTACT)課程信息顯示8種課程信息每種課程信息涵蓋以下細(xì)節(jié)：一個(gè)課程圖片、說明文字、一個(gè)獲取更多按鈕（LearnMore）頁面底部聯(lián)系我們（OurContact）最新新聞（Latestposts）常用連接（UsefulLinks）聯(lián)系我們頁面應(yīng)包含以下元素:頁面頭部網(wǎng)站Logo主導(dǎo)航，至少包括主頁（HOME）、關(guān)于我們(ABOUTUS)、服務(wù)(SERVICES)、課程(COURSES)、價(jià)格(PRICING)、聯(lián)系我們(CONTACT)聯(lián)系我們第一頁（個(gè)人信息）姓名（Name）郵箱（Email）（Message）下一頁按鈕（NEXTPAGE）聯(lián)系我們頁面第二頁（問題回答）您想要送幾個(gè)孩子到學(xué)校？（Howmanychildrenwouldyouliketoenrol），選項(xiàng)有1，2，3，4，5參觀學(xué)校（Visitingourschool）姓氏（LastName）郵箱地址（EmailAddress）聯(lián)系電話（ContactTelephoneNumber）上一頁按鈕（PREVIOUSPAGE）提交按鈕（SUBMIT）第二部分：前端實(shí)現(xiàn)根據(jù)“頁面設(shè)計(jì)”完成的設(shè)計(jì)圖，使用HTML5、CSS3、JavaScript等前端技術(shù)完成符合W3C組織HTML5和CSS3標(biāo)準(zhǔn)的前端代碼。所實(shí)現(xiàn)的前端布局應(yīng)與“頁面設(shè)計(jì)”中完成的設(shè)計(jì)相同。響應(yīng)式設(shè)計(jì)要求的頁面應(yīng)使用響應(yīng)式技術(shù)實(shí)現(xiàn)不同分辨率的適配，使頁面在三種設(shè)備分辨率（1330px、768px、480px）下可以正常瀏覽，一些元素在特定分辨率下應(yīng)隱藏或顯示。所編寫的前端代碼應(yīng)符合W3C組織的HTML5和CSS3標(biāo)準(zhǔn)。所編寫的HTML代碼應(yīng)有SEO優(yōu)化并符合W3CWAI-ARIA規(guī)范，具備搜索引擎和無障礙訪問友好性。前端交互效果和功能需與設(shè)計(jì)圖中的說明和表現(xiàn)一致，至少包括：首頁輪播圖，不少于三張并可交互切換的圖片。頁面之間的流轉(zhuǎn)交互設(shè)計(jì)。HTML/CSS/JavaScript代碼應(yīng)該具備良好的編碼風(fēng)格（各不少于3個(gè)可重用模塊）和注釋（各不少于3個(gè)）。選手應(yīng)在競服務(wù)器中上傳成果物項(xiàng)目文件夾，項(xiàng)目文件夾應(yīng)包含以下內(nèi)容(網(wǎng)頁文件命名如下)：首頁HTML文件：index.html課程頁面HTML文件：courses.html聯(lián)系我們頁面HTML文件：contact.html其他CSS、JavaScript等網(wǎng)頁資源文件

第三部分：網(wǎng)站重構(gòu)公司已經(jīng)完成了網(wǎng)站后臺(tái)管理功能開發(fā)，并提供了可用于前端的API接口，接口詳情見API穩(wěn)定性測試報(bào)告。你需要根據(jù)后臺(tái)接口重構(gòu)前端頁面，將前端頁面中某些部分實(shí)現(xiàn)數(shù)據(jù)獲取和提交。首頁功能模塊：使用輪播圖API查詢輪播圖，通過后臺(tái)返回的輪播圖數(shù)據(jù)，動(dòng)態(tài)實(shí)現(xiàn)首頁輪播圖片。使用獲取活動(dòng)API查詢首頁活動(dòng)列表，通過后臺(tái)返回的首頁活