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

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

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

（一）操作說(shuō)明

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è)頁(yè)面名稱和

網(wǎng)站結(jié)構(gòu)建立文件夾，微網(wǎng)站需要設(shè)計(jì)和制作的頁(yè)面效果圖必須存

放其中，要求所有效果圖保存格式為PSD文件；制作時(shí)需要的切片

文件等其他處理后的素材也要按照“圖片”、“音樂(lè)”、“文字”進(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ú)指定任務(wù)

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

微網(wǎng)站制作過(guò)程中請(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ī)，刷新界面確定頁(yè)面完整后輸入405*640

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

比賽任務(wù)描述：

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

生成手機(jī)端APP。“曼香莊園”微網(wǎng)站需要有優(yōu)秀的設(shè)計(jì)、精良的制

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

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

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

背景資料：

曼香莊園介紹

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

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

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

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

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

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

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

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

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

國(guó)際莊園。

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

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

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

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

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

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

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

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

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

無(wú)不詮釋著國(guó)際莊園“國(guó)際莊園新領(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)頁(yè)元素，調(diào)整至合理大小并保存為適當(dāng)

格；

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

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

夾中。

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

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

兩個(gè)字文件夾分別為“圖片”、“音樂(lè)”，將加工后的網(wǎng)頁(yè)素材放

分類至其中。

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

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

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

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

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

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

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

素：

全屏輪播圖；

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

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

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

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

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

2.制作切片

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

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

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

（1）引導(dǎo)頁(yè)

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

站頁(yè)面樣張完成頁(yè)面制作，保證與樣張完全一致。

添加音樂(lè)；

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

（2）曼香莊園首頁(yè)

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

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

制作全屏輪播效果；

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

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

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

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

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

（4）婚禮慶典

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

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

制作輪播圖；

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

（5）科普實(shí)踐

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

站頁(yè)面樣張完成頁(yè)面制作，保證與樣張完全一致。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

站頁(yè)面樣張完成頁(yè)面制作，保證與樣張完全一致。

添加QQ客服；

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

4.頁(yè)面交互

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

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

頁(yè)面。

（2）制作“曼香莊園首頁(yè)”鏈接

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

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

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

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

4008471008）。

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

【大事記】菜單鏈接“大事記”頁(yè)面；

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

面；

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

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

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

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

（4）婚禮慶典

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

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

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

（5）科普實(shí)踐

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

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

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

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

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

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

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

（7）大事記

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

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

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

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

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

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

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

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

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

任務(wù)三：生成曼香莊園APP

1.設(shè)置參數(shù)

在微開發(fā)平臺(tái)“曼香莊園”站點(diǎn)生成APP；