




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
2022年全省職業(yè)院校技能大賽中職學(xué)生組Web前端開發(fā)賽項(xiàng)競賽試題(樣卷)第18頁共18頁2022年全省職業(yè)院校技能大賽中職學(xué)生組Web前端開發(fā)賽項(xiàng)競賽試題A賽題說明一、競賽內(nèi)容本試卷適用于Window10平臺(tái),試題包含4個(gè)模塊,A模塊為網(wǎng)頁UI設(shè)計(jì)模塊,B模塊為網(wǎng)頁重構(gòu)模塊,C模塊網(wǎng)頁交互模塊,D模塊為數(shù)據(jù)庫操作模塊,團(tuán)隊(duì)成員分工并行,最終實(shí)現(xiàn)各個(gè)任務(wù),試卷滿分100分,四個(gè)模塊分別所占比重為:A模塊15%,B模塊40%,C模塊25%,D模塊20%二、競賽時(shí)間競賽時(shí)間:共計(jì)240分鐘。三、競賽事項(xiàng)要求參賽選手不得攜帶通信設(shè)備、存儲(chǔ)設(shè)備等物品進(jìn)入賽場(chǎng),違反者按作弊處理。請(qǐng)根據(jù)大賽所提供的比賽環(huán)境,檢查所列的硬件設(shè)備、軟件清單、材料清單是否齊全,計(jì)算機(jī)設(shè)備是否能正常使用。競賽結(jié)束前,將各任務(wù)代碼整合,統(tǒng)一拷貝到1號(hào)計(jì)算機(jī)的桌面(PC1),并提交一個(gè)完整的項(xiàng)目工程目錄到大賽組委會(huì)提供的U盤中,目錄格式如圖所示。競賽結(jié)束時(shí),請(qǐng)將U盤、試卷和答題紙統(tǒng)一提交。禁止將比賽所用的所有物品(包括試卷和稿紙)帶離賽場(chǎng)。裁判以各參賽隊(duì)部署到PC1計(jì)算機(jī)上運(yùn)行結(jié)果為評(píng)分依據(jù)。嚴(yán)禁在程序及運(yùn)行結(jié)果中任何位置標(biāo)注競賽隊(duì)的任何信息,否則按照作弊處理。PC1:或者localhost
模塊A:WebUI設(shè)計(jì)根據(jù)任務(wù)要求完成UI效果圖設(shè)計(jì)(15分)【任務(wù)要求】根據(jù)目錄查看A模塊下素材文件夾中Images目錄中提供的圖片素材,通過Photoshopcc2018軟件設(shè)計(jì)一張“某某酒店”首頁面。首頁面需要包含以下元素:“某某酒店“l(fā)ogo,導(dǎo)航欄,導(dǎo)航欄目需設(shè)置以下幾項(xiàng):關(guān)于我們,酒店房間,酒店餐飲,酒店分布,公司新聞,聯(lián)系我們一張banner圖片(素材已提供)通過圖片列表逐一展示“商務(wù)住宿”、“貴賓套房”、“酒吧餐飲”、“會(huì)議房間”、“休閑娛樂”、“酒店分布”。酒店概況介紹:“我們商務(wù)酒店,創(chuàng)立于2006年,定位于豪華商務(wù)連鎖酒店。以打造“城央、商務(wù)、雅致”的精品商務(wù)連鎖酒店為產(chǎn)品理念;駐足于重要商旅城市中心,專注于賓客需求與體驗(yàn);傾力打造以品質(zhì)、高雅、時(shí)尚、智能為主題,以快捷準(zhǔn)確、尊貴禮遇的對(duì)客服務(wù)的特點(diǎn)以塑造精品商務(wù)型酒店的典范;為中產(chǎn)白領(lǐng)人士提供優(yōu)質(zhì)的酒店住宿服務(wù),打造精品商務(wù)連鎖酒店品牌?!本频晏厣和怀觥暗乩砦恢脙?yōu)越”,“室內(nèi)豪華裝修”,“高級(jí)安全系數(shù)”,“住宿環(huán)境良好”。酒店房間掠影:通過素材庫中的圖片,展示酒店房間。網(wǎng)頁腳步提供分享至QQ、微信、微博的鏈接圖標(biāo)【任務(wù)提示】將設(shè)計(jì)好的UI設(shè)計(jì)圖,同時(shí)保存為.psd和.jpg兩種不同格式,存放于A模塊/設(shè)計(jì)效果圖目錄即可。
模塊B:網(wǎng)頁重構(gòu)根據(jù)給定網(wǎng)頁效果圖和重構(gòu)代碼文件包中的素材,通過HTML5+CSS3完成靜態(tài)頁面重構(gòu)(40分)【任務(wù)提示】推薦使用Photoshop軟件打開給定效果圖,通過Phosotshop提供的工具,完成顏色取值、間距測(cè)量等,盡可能在CSS樣式編寫中與效果圖保持一致。B模塊/重構(gòu)代碼/images目錄中已給定了可能用到的圖片素材(不一定全部使用),請(qǐng)根據(jù)效果圖選擇使用即可;【任務(wù)要求】目錄中已存在頁面文件index.html,參賽選手編寫代碼,實(shí)現(xiàn)網(wǎng)頁重構(gòu);空白CSS樣式文件已建立,如圖所示,所有的外觀樣式均需寫在style.css文件中,通過外鏈?zhǔn)綄⒃揷ss文件鏈入到index.html中。
模塊C:網(wǎng)頁交互根據(jù)任務(wù)要求,完成輪播圖網(wǎng)頁交互效果【任務(wù)提示】C模塊路徑如圖,C模塊根目錄index.html中,提供了靜態(tài)輪播圖代碼,提供了jQuery3.6版本的文件,放置于C模塊/js目錄中,命名為jQuery.js;index.html中已經(jīng)有靜態(tài)頁面代碼,代碼中包括了輪播圖的基本結(jié)構(gòu)和css樣式,打開后默認(rèn)顯示最后一張圖片(slide04.jpg)。【任務(wù)要求】通過給已有標(biāo)簽添加id或者class類名,實(shí)現(xiàn)DOM操作;鼠標(biāo)點(diǎn)擊輪播圖中的左右方向箭頭,實(shí)現(xiàn)對(duì)應(yīng)圖片切換效果,同時(shí)對(duì)應(yīng)的小圓點(diǎn)跟著變化;設(shè)置定時(shí)器,在不點(diǎn)擊小圓點(diǎn)的情況下,圖片可以實(shí)現(xiàn)每間隔2秒,自動(dòng)切換,并且小圓點(diǎn)跟著圖片及時(shí)變化。模塊D:數(shù)據(jù)庫操作根據(jù)項(xiàng)目提示和要求,按照已給頁面代碼中的注釋提示,補(bǔ)全所有代碼,實(shí)現(xiàn)數(shù)據(jù)的查詢,刪除,修改。(20分)【任務(wù)提示】如圖,根據(jù)模塊D目錄,lst.php為數(shù)據(jù)展示頁面,add.html為添加數(shù)據(jù)的表單頁面,add.php為添加數(shù)據(jù)時(shí)的數(shù)據(jù)處理頁面,del.php為刪除數(shù)據(jù)時(shí)的數(shù)據(jù)處理頁面,sql.php為數(shù)據(jù)庫鏈接頁面,5個(gè)頁面中均有不同數(shù)量的代碼和注釋。重要提示:考試目錄有中文,PHP文件不能正常顯示,為了保證答題正常,需要將D模塊中的5個(gè)頁面全部拷貝至PHPStudy的站點(diǎn)根目錄下,也就是D:\phpstudy_pro\WWW,這樣才可以正常作答。模塊D答題結(jié)束后,把文件全部拷貝至考試目錄D模塊下即可。數(shù)據(jù)庫主機(jī)名為localhost,通過瀏覽器地址訪問localhost/lst.php,可以看到學(xué)生數(shù)據(jù)展示頁面。如圖所示,參賽選手電腦已經(jīng)安裝MySQL數(shù)據(jù)庫,并且創(chuàng)建了名為user的數(shù)據(jù)庫,這個(gè)數(shù)據(jù)庫中,存在一張數(shù)據(jù)表,表名也是user,該數(shù)據(jù)表有四個(gè)字段,分別是id,name,age,gender,該表中有2條已存在的數(shù)據(jù),分別是小明的數(shù)據(jù)和小紅的數(shù)據(jù)。在已給.php結(jié)尾的文件中,只要看到“補(bǔ)全代碼”四個(gè)字,就需要在當(dāng)前位置取消注釋,并補(bǔ)全符合邏輯的正確代碼。【任務(wù)要求】請(qǐng)參賽選手打開sql.php文件,,根據(jù)注釋,補(bǔ)全代碼,實(shí)現(xiàn)數(shù)據(jù)庫鏈接正確;請(qǐng)參賽選手打開lst.php文件,根據(jù)注釋,補(bǔ)全代碼,實(shí)現(xiàn)查詢數(shù)據(jù)庫成功,并把存在的兩條數(shù)據(jù)顯示在頁面中,可通過瀏覽器查看數(shù)據(jù)是否顯示成功;點(diǎn)擊lst.php操作一列下的刪除按鈕,使得頁面跳轉(zhuǎn)到del.php,在del.php中,需要再次導(dǎo)入數(shù)據(jù)庫鏈接文件sql.php,并繼續(xù)根據(jù)注釋提示,完成代碼補(bǔ)全,實(shí)現(xiàn)數(shù)據(jù)刪除操作成功;點(diǎn)擊lst.php頁面中的添加數(shù)據(jù)按鈕(藍(lán)色按鈕),頁面會(huì)跳轉(zhuǎn)到add.html表單頁面,填入需要添加的數(shù)據(jù),點(diǎn)擊提交,使得頁面跳轉(zhuǎn)至add.php,并保證提交方式為“POST”方式;一旦頁面跳轉(zhuǎn)至add.php,就需要做數(shù)據(jù)的處理,在add.php中,首先也需要導(dǎo)入sql.php文件;在add.php文件中,需要判斷add.html提交表單的方式是GET方式還是POST方式,如
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2031年中國電動(dòng)防爆叉車行業(yè)投資前景及策略咨詢研究報(bào)告
- 2025至2031年中國電熔高鉻剛玉砂行業(yè)投資前景及策略咨詢研究報(bào)告
- 婚禮上父母發(fā)言稿
- 女性職場(chǎng)現(xiàn)狀調(diào)查報(bào)告
- 2025-2030年中國IT培訓(xùn)行業(yè)運(yùn)行形勢(shì)分析與投資趨勢(shì)預(yù)測(cè)研究報(bào)告
- 周期性癱瘓的臨床護(hù)理
- 制定公司客戶滿意策略的工作計(jì)劃
- 教學(xué)科研活動(dòng)規(guī)劃計(jì)劃
- 腎上腺腦白質(zhì)營養(yǎng)不良的臨床護(hù)理
- 競爭分析與應(yīng)對(duì)策略計(jì)劃
- 【9數(shù)一?!?025年安徽合肥市第四十五中學(xué)九年級(jí)中考一模數(shù)學(xué)試卷(含答案)
- 電網(wǎng)工程設(shè)備材料信息參考價(jià)(2024年第四季度)
- 2024年浙江省中考社會(huì)試卷真題(含標(biāo)準(zhǔn)答案及評(píng)分標(biāo)準(zhǔn))
- 醫(yī)療機(jī)構(gòu)消毒技術(shù)規(guī)范(2023年版)
- 小學(xué)班主任工作案例分析4篇
- 醫(yī)院感染臺(tái)賬【范本模板】
- DB43∕T 497-2009 博落回果-行業(yè)標(biāo)準(zhǔn)
- 創(chuàng)意綜藝風(fēng)脫口秀活動(dòng)策劃PPT模板
- 大客戶營銷技巧ppt課件
- C++優(yōu)秀課件PPT
- 團(tuán)險(xiǎn)新產(chǎn)品契約及核保細(xì)則
評(píng)論
0/150
提交評(píng)論