2022廣西職業(yè)院校技能大賽中職組《微網(wǎng)站設(shè)計(jì)與開發(fā)》賽項(xiàng)競(jìng)賽樣題

2022年廣西職業(yè)院校技能大賽

中職組《微網(wǎng)站設(shè)計(jì)與開發(fā)》賽項(xiàng)競(jìng)賽樣題

一、操作說明

1．賽前準(zhǔn)備時(shí)間，請(qǐng)先檢查所需使用的計(jì)算機(jī)軟硬件是否正常；

2．運(yùn)行比賽機(jī)位桌面“微網(wǎng)站設(shè)計(jì)與開發(fā)比賽任務(wù).rar”自解壓

文件，所有比賽素材將會(huì)解壓到桌面“微網(wǎng)站設(shè)計(jì)與開發(fā)比賽任務(wù)”

文件夾中，每任務(wù)所需的素材和樣張分別存放“任務(wù)一”、“任務(wù)二”子文

件夾內(nèi)；

3．請(qǐng)比賽選手在桌面上自行建立新文件夾，名稱為“XXX參賽

作品”。請(qǐng)根據(jù)題目要求在此文件夾中分別建立名稱為“任務(wù)二”、“任務(wù)

三”的子文件夾；

4．作品提交。最終比賽提交微網(wǎng)站成果需以APK格式保存在桌

面文件夾“XXX參賽作品”下“任務(wù)三”子文件夾中；桌面文件夾“XXX

參賽作品”內(nèi)“任務(wù)二”子文件夾下應(yīng)根據(jù)各個(gè)頁面名稱和網(wǎng)站結(jié)構(gòu)建

立文件夾，微網(wǎng)站需要設(shè)計(jì)和制作的頁面效果圖必須存放其中，要求

所有效果圖保存格式為PSD文件；制作時(shí)需要的切片文件等其他處

理后的素材也要按照“圖片”、“音樂”、“文字”進(jìn)行分類整理并保存。

注意：

解壓密碼由裁判現(xiàn)場(chǎng)公布；

其中XXX為三位賽位號(hào)，比如第一賽場(chǎng)賽位號(hào)后兩位為

01號(hào)，文件夾名稱為“101參賽作品”；第二賽場(chǎng)賽位號(hào)后兩位為

17號(hào)，文件夾名稱為“217參賽作品”；第三賽場(chǎng)賽位號(hào)后兩位為

21號(hào)，文件夾名稱為“321參賽作品”；

若在參賽選手桌面“XXX參賽作品”文件夾內(nèi)無指定任務(wù)文

件夾及相關(guān)文件，會(huì)被減去相應(yīng)分?jǐn)?shù)；

微網(wǎng)站制作過程中請(qǐng)注意隨時(shí)保存；

賽題所涉及的手冊(cè)放在桌面“資料”文件夾中，pdf文件建

議用瀏覽器方式打開查看；

谷歌瀏覽器移動(dòng)端網(wǎng)站預(yù)覽方法如下圖所示：

第一步：打開谷歌瀏覽器，按F12，點(diǎn)擊“移動(dòng)設(shè)備模式”；

第二步：在平臺(tái)里點(diǎn)擊編輯器右上角預(yù)覽按鈕，復(fù)制鏈接；

第三步：將復(fù)制的鏈接粘貼在谷歌瀏覽器地址欄。

注：如果顯示不完整，請(qǐng)先點(diǎn)擊Responsive選擇任意一款手

機(jī)，刷新界面確定頁面完整后輸入405*640

二、比賽任務(wù)及要求

比賽任務(wù)描述：

請(qǐng)為客戶曼香集團(tuán)旗下的北京曼香國際莊園制作宣傳微網(wǎng)站，并

生成手機(jī)端APP?！奥闱f園”微網(wǎng)站需要有優(yōu)秀的設(shè)計(jì)、精良的制作、

豐富的動(dòng)感、便捷的交互，既能在手機(jī)瀏覽器中查看，又能在微信中

傳播分享，達(dá)到快速提升集團(tuán)企業(yè)公眾號(hào)的訪問量，不斷增加粉絲數(shù)，

有效吸引潛在用戶，快速提升曼香莊園知名度及形象之目的。

背景資料：

曼香莊園介紹

北京曼香國際莊園位于北京市懷柔區(qū)，由曼香集團(tuán)融合法國、

美國、意大利、葡萄牙等多國資本，投資7億余元，于2007年6

月全力打造完成。莊園建設(shè)得到國際葡萄與葡萄酒組織(OIV)的鼎

立支持，并由OIV主席羅伯特?丁洛特先生擔(dān)任莊園名譽(yù)莊主。

莊園總占地1500余畝，其中建筑面積400畝，葡萄園1100

余畝，為國家4A級(jí)旅游景區(qū)，全國休閑農(nóng)業(yè)與鄉(xiāng)村旅游五星級(jí)園

區(qū)、北京市科普教育基地。莊園下設(shè)有生態(tài)農(nóng)業(yè)開發(fā)公司、酒業(yè)公

司、旅游文化公司和國際會(huì)議中心，是一個(gè)集葡萄種植及釀酒、葡

萄酒主題文化旅游、休閑度假以及葡萄酒知識(shí)培訓(xùn)功能為一體的綜

合性國際莊園。

其中曼香旅游文化有限公司面向葡萄及葡萄酒愛好者提供給

葡萄酒主題文化旅游、葡萄酒銷售、葡萄酒知識(shí)培訓(xùn)以及葡萄、葡

萄酒以相關(guān)延伸品、禮品的銷售和服務(wù)。

國際會(huì)議中心是集住宿、餐飲、會(huì)議、娛樂、休閑、旅游度假

為一體的法式風(fēng)情小鎮(zhèn)。小鎮(zhèn)劃分為街道生活區(qū)、餐飲服務(wù)區(qū)、娛

樂休閑區(qū)、教堂博物區(qū)四個(gè)功能區(qū)。設(shè)有總統(tǒng)套房、酒店標(biāo)準(zhǔn)客房、

中西綜合餐廳、會(huì)議室、電玩中心、雜貨鋪、咖啡廳、雪茄吧、紅

酒吧、KTV、葡萄酒精油SPA高級(jí)會(huì)所等經(jīng)營項(xiàng)目。這里有無法

復(fù)制的百年品牌，這里有無法比擬的美酒美食文化之旅，小鎮(zhèn)的一

切無不詮釋著國際莊園“國際莊園新領(lǐng)袖”的非凡氣質(zhì)！

任務(wù)一：曼香莊園微網(wǎng)站站點(diǎn)管理

制作要求如下：

1.在微設(shè)計(jì)、微開發(fā)平臺(tái)中分別創(chuàng)建站點(diǎn)，名稱為“曼香莊

園”，描述可根據(jù)需要自行添加；

2.請(qǐng)根據(jù)任務(wù)二曼香莊園微網(wǎng)站制作要求，加工“微網(wǎng)站設(shè)

計(jì)與開發(fā)比賽任務(wù)”中“任務(wù)一”子文件夾中提供的素材，制作形

成符合微網(wǎng)站標(biāo)準(zhǔn)的網(wǎng)頁元素，調(diào)整至合理大小并保存為適當(dāng)格；

3.對(duì)微網(wǎng)站結(jié)構(gòu)和素材進(jìn)行整理，對(duì)素材進(jìn)行加工并重新分

類整理歸納到自建“XXX參賽作品”文件夾中“任務(wù)二”的子文件夾中。

例如：曼香莊園引導(dǎo)頁面，文件夾名稱為“引導(dǎo)頁”，制作引

導(dǎo)頁需要圖片、音樂類素材，請(qǐng)建立“引導(dǎo)頁”文件夾，內(nèi)建兩個(gè)

字文件夾分別為“圖片”、“音樂”，將加工后的網(wǎng)頁素材放分類至其

中。

任務(wù)二：曼香莊園微網(wǎng)站頁面制作

1.微網(wǎng)站logo和首頁設(shè)計(jì)

（1）Logo設(shè)計(jì)

根據(jù)客戶背景資料描述設(shè)計(jì)符合企業(yè)形象的具象圖形LOGO，

并合理運(yùn)用在微網(wǎng)站頁面中。

（2）首頁頁面設(shè)計(jì)

按照客戶背景資料完成首頁頁面設(shè)計(jì)，要求頁面包含有以下元

素：

全屏輪播圖；

首頁要有客戶logo體現(xiàn)；

頁面導(dǎo)航按鈕，共有“關(guān)于莊園”、“旅游度假”、“婚禮慶典”、“科

普實(shí)踐”、“莊園活動(dòng)”和“聯(lián)系我們”六項(xiàng)；

將制作完成的首頁設(shè)計(jì)圖以psd形式存放于桌面“\XXX參賽

作品\任務(wù)二\曼香莊園首頁”文件夾內(nèi)。

2.制作切片

按照提供的UI效果圖樣張進(jìn)行合理切片，符合移動(dòng)端頁面的

設(shè)計(jì)要求，不允許使用整幅圖片。

3.微網(wǎng)站頁面制作要求

（1）引導(dǎo)頁

在微開發(fā)平臺(tái)中利用HTML5代碼、CSS樣式，按照提供的微

網(wǎng)站頁面樣張完成頁面制作，保證與樣張完全一致。

添加音樂；

為頁面設(shè)計(jì)合理的動(dòng)畫效果。

（2）曼香莊園首頁

在微開發(fā)平臺(tái)中利用HTML5代碼、CSS樣式，按照提供的微

網(wǎng)站頁面樣張制作微網(wǎng)站頁面，保證與樣張完全一致。

制作全屏輪播效果；

設(shè)置頁面中的導(dǎo)航菜單，并為其設(shè)計(jì)合理的動(dòng)畫效果。

（3）關(guān)于莊園

在微設(shè)計(jì)平臺(tái)中應(yīng)用基本組件，按照提供的微網(wǎng)站頁面樣張完

成頁面制作，保證與樣張完全一致。

設(shè)置頁面中的導(dǎo)航菜單，并為其設(shè)計(jì)合理的動(dòng)畫效果。

（4）婚禮慶典

在微設(shè)計(jì)平臺(tái)中應(yīng)用基本組件，按照提供的微網(wǎng)站頁面樣張完

成頁面制作，保證與樣張完全一致。

制作輪播圖；

為頁面設(shè)計(jì)合理的動(dòng)畫效果。

（5）科普實(shí)踐

在微開發(fā)平臺(tái)中利用HTML5代碼、CSS樣式，按照提供的微

網(wǎng)站頁面樣張完成頁面制作，保證與樣張完全一致。

設(shè)置頁面中的導(dǎo)航菜單，并為之設(shè)計(jì)合理的動(dòng)畫效果；

單擊拓展體驗(yàn)，呈現(xiàn)彈出菜單效果。

（6）在線報(bào)名

在微設(shè)計(jì)平臺(tái)中應(yīng)用基本組件，按照提供的微網(wǎng)站頁面樣張完

成頁面制作，保證與樣張完全一致。

為頁面中的文字設(shè)計(jì)合理的動(dòng)畫效果；

利用輸入框和按鈕完成表單制作，并提交至少一條記錄，保

證能從站點(diǎn)管理下查看提交的數(shù)據(jù)。

（7）關(guān)于莊園-大事記

在微設(shè)計(jì)平臺(tái)中應(yīng)用基本組件，按照提供的微網(wǎng)站頁面樣張完

成頁面制作，保證與樣張完全一致。

設(shè)置頁面中的日期和事件，并為之設(shè)計(jì)合理的動(dòng)畫效果。

（8）關(guān)于莊園-聯(lián)系方式

在微開發(fā)平臺(tái)中利用HTML5代碼、CSS樣式，按照提供的微

網(wǎng)站頁面樣張完成頁面制作，保證與樣張完全一致。

添加QQ客服；

為頁面設(shè)計(jì)合理的動(dòng)畫效果。

4.頁面交互

（1）制作引導(dǎo)頁鏈接

“引導(dǎo)頁”通過【進(jìn)入曼香】按鈕鏈接到“曼香莊園首頁”頁面。

（2）制作“曼香莊園首頁”鏈接

【關(guān)于莊園】菜單鏈接到“關(guān)于莊園”頁面；

【婚禮慶典】菜單鏈接到“婚禮慶典”頁面；

【科普實(shí)踐】菜單鏈接到“科普實(shí)踐”頁面；

點(diǎn)擊【聯(lián)系我們】菜單，可實(shí)現(xiàn)一鍵撥號(hào)（電話：4008471008）。

（3）制作“關(guān)于莊園”鏈接

【大事記】菜單鏈接“大事記”頁面；

【聯(lián)系方式】菜單鏈接到微開發(fā)平臺(tái)制作的“聯(lián)系方式”頁面；

底部菜單【首頁】按鈕鏈接到“曼香莊園首頁”頁面；

底部菜單【一鍵導(dǎo)航】按鈕鏈接到提供的導(dǎo)航地址；

底部菜單【在線報(bào)名】按鈕鏈接到“在線報(bào)名”頁面；

底部菜單【關(guān)于我們】按鈕鏈接到“關(guān)于莊園”頁面。

（4）婚禮慶典

底部菜單【首頁】按鈕鏈接到“曼香莊園首頁”頁面；

底部菜單【在線報(bào)名】按鈕鏈接到“在線報(bào)名”頁面；

底部菜單【關(guān)于我們】按鈕鏈接到“關(guān)于莊園”頁面。

（5）科普實(shí)踐

底部菜單【首頁】按鈕鏈接到“曼香莊園首頁”頁面；

底部菜單【在線報(bào)名】按鈕鏈接到“在線報(bào)名”頁面；

底部菜單【關(guān)于我們】按鈕鏈接到“關(guān)于莊園”頁面。

（6）在線報(bào)名

底部菜單【首頁】按鈕鏈接到“曼香莊園首頁”頁面；

底部菜單【在線報(bào)名】按鈕鏈接到“在線報(bào)名”頁面；

底部菜單【關(guān)于我們】按鈕鏈接到“關(guān)于莊園”頁面。

（7）大事記

底部菜單【首頁】按鈕鏈接到“曼香莊園首頁”頁面；

底部菜單【一鍵導(dǎo)航】按鈕鏈接到提供