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

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

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

（一）操作說明

1．賽前準備時間，請先檢查所需使用的計算機軟硬件是否正

常；

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

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

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

“任務二”子文件夾內(nèi)；

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

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

“任務三”的子文件夾；

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

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

“XXX參賽作品”內(nèi)“任務二”子文件夾下應根據(jù)各個頁面名稱和

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

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

文件等其他處理后的素材也要按照“圖片”、“音樂”、“文字”進行

分類整理并保存。

注意：

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

其中XXX為三位賽位號，比如第一賽場賽位號后兩位為

01號，文件夾名稱為“101參賽作品”；第二賽場賽位號后兩位

為17號，文件夾名稱為“217參賽作品”；第三賽場賽位號后兩

位為21號，文件夾名稱為“321參賽作品”；

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

文件夾及相關(guān)文件，會被減去相應分數(shù)；

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

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

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

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

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

第二步：在平臺里點擊編輯器右上角預覽按鈕，復制鏈接；

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

注：如果顯示不完整，請先點擊Responsive選擇任意一款手

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

（二）比賽任務及要求

比賽任務描述：

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

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

作、豐富的動感、便捷的交互，既能在手機瀏覽器中查看，又能在微

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

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

背景資料：

曼香莊園介紹

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

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

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

立支持，并由OIV主席羅伯特?丁洛特先生擔任莊園名譽莊主。

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

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

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

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

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

國際莊園。

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

葡萄酒主題文化旅游、葡萄酒銷售、葡萄酒知識培訓以及葡萄、葡

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

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

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

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

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

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

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

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

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

制作要求如下：

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

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

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

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

形成符合微網(wǎng)站標準的網(wǎng)頁元素，調(diào)整至合理大小并保存為適當

格；

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

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

夾中。

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

引導頁需要圖片、音樂類素材，請建立“引導頁”文件夾，內(nèi)建

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

分類至其中。

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

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

（1）Logo設(shè)計

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

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

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

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

素：

全屏輪播圖；

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

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

典”、“科普實踐”、“莊園活動”和“聯(lián)系我們”六項；

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

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

2.制作切片

按照提供的UI效果圖樣張進行合理切片，符合移動端頁面的

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

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

（1）引導頁

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

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

添加音樂；

為頁面設(shè)計合理的動畫效果。

（2）曼香莊園首頁

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

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

制作全屏輪播效果；

設(shè)置頁面中的導航菜單，并為其設(shè)計合理的動畫效果。

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

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

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

設(shè)置頁面中的導航菜單，并為其設(shè)計合理的動畫效果。

（4）婚禮慶典

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

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

制作輪播圖；

為頁面設(shè)計合理的動畫效果。

（5）科普實踐

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

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

設(shè)置頁面中的導航菜單，并為之設(shè)計合理的動畫效果；

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

（6）在線報名

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

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

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

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

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

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

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

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

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

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

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

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

添加QQ客服；

為頁面設(shè)計合理的動畫效果。

4.頁面交互

（1）制作引導頁鏈接

“引導頁”通過【進入曼香】按鈕鏈接到“曼香莊園首頁”

頁面。

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

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

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

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

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

4008471008）。

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

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

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

面；

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

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

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

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

（4）婚禮慶典

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

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

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

（5）科普實踐

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

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

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

（6）在線報名

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

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

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

（7）大事記

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

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

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

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

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

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

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

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

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

任務三：生成曼香莊園APP

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

在微開發(fā)平臺“曼香莊園”站點生成APP；