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

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

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

任務背景：OTA全稱為OnlineTravelAgency，中文譯為在線旅行社,旅游消費者通過網(wǎng)絡向旅游服務提供商預定旅游產(chǎn)品或服務，并通過網(wǎng)上支付或者線下付費，即各旅游主體可以通過網(wǎng)絡進行產(chǎn)品營銷或產(chǎn)品銷售。OTA的出現(xiàn)將原來傳統(tǒng)的旅行社銷售模式放到網(wǎng)絡平臺上，更廣泛的傳遞了線路信息，互動式的交流更方便了客人的咨詢和訂購。某旅游公司希望開展線上旅游業(yè)務，要從產(chǎn)品和落地服務出發(fā)，對公司的業(yè)務進行變革。他們要設計并搭建一套符合中國人使用習慣的線上景點介紹和訂票的網(wǎng)站，用于顯示景區(qū)的相關的景點、信息、在線訂票申請。任務描述：你需要按照“頁面設計”要求完成具有原創(chuàng)性和統(tǒng)一設計風格、符合品牌形象和受眾群體的響應式設計，按照“前端實現(xiàn)”要求完成響應式前端開發(fā)、并按照“網(wǎng)站重構”要求將靜態(tài)頁面改造成動態(tài)頁面并部署到服務器。

第一部分：頁面設計完成“OTA網(wǎng)站”頁面設計，包含電腦端（1330px）、平板端（768px）、移動端（480px）三種設備的適配，一些元素可在特定分辨率中通過交互效果隱藏或顯示。選手應在服務器中提交以下內容（若在服務器中未找到以下資源，視作未提交）：電腦端設計稿：XX_Home_1330.jpg、XX_Appointment_1330.jpg（XX為參賽隊工位號，下同）平板端設計稿：XX_Home_768.jpg、XX_Appointment.jpg移動端設計稿：XX_Home_480.jpg、XX_Appointment.jpg除設計稿文件之外，你需要提交額外的文件用于解釋和描述你的交互設計，例如：XX_Description.doc（XX為參賽隊工位號）。請在服務器上傳所有包含圖層信息的設計圖源文件和交互設計說明文件。站點設計圖必須用真實像素尺寸單位；若設計圖尺寸大于賽題要求，需在設計圖中使用小于4px的清晰可見邊框（顏色自定）表示對應分辨率寬度，所有頁面內的元素需在該邊框內完整顯示。一、首頁應包含以下元素：頁面頭部景區(qū)Logo咨詢熱線主導航，至少包括首頁、關于我們、景區(qū)景點、景區(qū)動態(tài)、景區(qū)項目、景點預約、行業(yè)動態(tài)輪播圖片至少3張可自動交互切換的輪播圖。景區(qū)景點展示4個景區(qū)分類名稱景區(qū)分類下面至少展示4個景點。展示內容需要涵蓋景點圖片、景點名稱。景區(qū)描述和介紹，至少包含一張背景圖，一段說明文字，一張介紹圖片和一個查看更多按鈕。景區(qū)項目，帶有4個以上的項目列表，每個項目包括項目圖片、項目名稱和項目簡介。動態(tài)中心列出至少兩個分類,每個分類展示四條最新數(shù)據(jù)。分類目錄名稱：在每個分類的頭部展示。圖片：每個分類中的第一條數(shù)據(jù)展示圖片，其它數(shù)據(jù)不展示圖片；如果第一條數(shù)據(jù)未設置圖片，應有相應的占位圖片。標題：每條數(shù)據(jù)都要展示標題。日期：每個分類第一條數(shù)據(jù)不展示日期，其他數(shù)據(jù)展示日期。摘要：每個分類第一條數(shù)據(jù)展示摘要，其他分類不展示摘要。頁面底部社交媒體版權聲明

景點預約頁面應包含以下元素：頁面頭部景區(qū)Logo咨詢熱線主導航，至少包括首頁、關于我們、景區(qū)景點、景區(qū)動態(tài)、景區(qū)項目、景點預約、行業(yè)動態(tài)輪播圖片至少3張可交互切換的輪播圖。景區(qū)景點側邊欄側邊欄頭部名稱：景區(qū)景點至少展示四個景區(qū)分類名稱最新資訊側邊欄側邊欄頭部名稱：最新資訊查看更多按鈕至少展示五條景區(qū)動態(tài)或景區(qū)新聞景點詳情圖文，展示任意景點詳情，展示內容需要涵蓋景點名稱、景點圖片和景點描述。景點預約，提交時需對相關信息進行非空校驗，聯(lián)系方式進行格式校驗。預約人姓名聯(lián)系方式預約日期參觀人數(shù)提交按鈕預約記錄預約列表顯示預約的記錄，展示數(shù)據(jù)項包括姓名、聯(lián)系方式、參觀人數(shù)、預約時間。頁面底部社交媒體版權聲明第二部分：前端實現(xiàn)根據(jù)“頁面設計”完成的設計圖，使用HTML5、CSS3、JavaScript等前端技術完成符合W3C組織HTML5和CSS3標準的前端代碼。所實現(xiàn)的前端布局應與“頁面設計”中完成的設計相同。響應式設計要求的頁面應使用響應式技術實現(xiàn)不同分辨率的適配，使頁面在三種設備分辨率（1330px、768px、480px）下可以正常瀏覽，一些元素在特定分辨率下應隱藏或顯示。所編寫的前端代碼應符合W3C組織的HTML5和CSS3標準。所編寫的HTML代碼應有SEO優(yōu)化并符合W3CWAI-ARIA規(guī)范，具備搜索引擎和無障礙訪問友好性。前端交互效果和功能需與設計圖中的說明和表現(xiàn)一致，至少包括：首頁輪播圖，不少于三張并可自動交互切換的圖片。首頁景區(qū)景點的4個景區(qū)分類，每點擊一個分類，下方展示的景點內容自動切換成相應的景點。在480分辨率下，可以通過單擊按鈕隱藏/顯示頁面頭部主導航景點預約頁，提交相關信息，完成訂票操作，底部訂票記錄有相關數(shù)據(jù)回顯。頁面之間的流轉交互設計。HTML/CSS/JavaScript代碼應該具備良好的編碼風格（各不少于3個可重用模塊）和注釋（各不少于3個）。選手應在競服務器中上傳成果物項目文件夾，項目文件夾應包含以下內容(網(wǎng)頁文件命名如下)：首頁HTML文件：index.html景點預約頁面HTML文件：appointment.html其他CSS、JavaScript等網(wǎng)頁資源文件

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