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

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

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

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

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