2023广西职业院校技能大赛中职组《微网站设计与开发》赛项竞赛样题

2023年广西职业院校技能大赛

中职组《微网站设计与开发》赛项竞赛样题

（一）操作说明

1．赛前准备时间，请先检查所需使用的计算机软硬件是否正

常；

2．运行比赛机位桌面“微网站设计与开发比赛任务.rar”自

解压文件，所有比赛素材将会解压到桌面“微网站设计与开发比赛

任务”文件夹中，每任务所需的素材和样张分别存放“任务一”、

“任务二”子文件夹内；

3．请比赛选手在桌面上自行建立新文件夹，名称为“XXX参赛

作品”。请根据题目要求在此文件夹中分别建立名称为“任务二”、

“任务三”的子文件夹；

4．作品提交。最终比赛提交微网站成果需以APK格式保存在桌

面文件夹“XXX参赛作品”下“任务三”子文件夹中；桌面文件夹

“XXX参赛作品”内“任务二”子文件夹下应根据各个页面名称和

网站结构建立文件夹，微网站需要设计和制作的页面效果图必须存

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

文件等其他处理后的素材也要按照“图片”、“音乐”、“文字”进行

分类整理并保存。

注意：

解压密码由裁判现场公布；

其中XXX为三位赛位号，比如第一赛场赛位号后两位为

01号，文件夹名称为“101参赛作品”；第二赛场赛位号后两位

为17号，文件夹名称为“217参赛作品”；第三赛场赛位号后两

位为21号，文件夹名称为“321参赛作品”；

若在参赛选手桌面“XXX参赛作品”文件夹内无指定任务

文件夹及相关文件，会被减去相应分数；

微网站制作过程中请注意随时保存；

赛题所涉及的手册放在桌面“资料”文件夹中，pdf文件

建议用浏览器方式打开查看；

谷歌浏览器移动端网站预览方法如下图所示：

第一步：打开谷歌浏览器，按F12，点击“移动设备模式”；

第二步：在平台里点击编辑器右上角预览按钮，复制链接；

第三步：将复制的链接粘贴在谷歌浏览器地址栏。

注：如果显示不完整，请先点击Responsive选择任意一款手

机，刷新界面确定页面完整后输入405*640

（二）比赛任务及要求

比赛任务描述：

请为客户曼香集团旗下的北京曼香国际庄园制作宣传微网站，并

生成手机端APP。“曼香庄园”微网站需要有优秀的设计、精良的制

作、丰富的动感、便捷的交互，既能在手机浏览器中查看，又能在微

信中传播分享，达到快速提升集团企业公众号的访问量，不断增加粉

丝数，有效吸引潜在用户，快速提升曼香庄园知名度及形象之目的。

背景资料：

曼香庄园介绍

北京曼香国际庄园位于北京市怀柔区，由曼香集团融合法国、

美国、意大利、葡萄牙等多国资本，投资7亿余元，于2007年6

月全力打造完成。庄园建设得到国际葡萄与葡萄酒组织(OIV)的鼎

立支持，并由OIV主席罗伯特•丁洛特先生担任庄园名誉庄主。

庄园总占地1500余亩，其中建筑面积400亩，葡萄园1100余

亩，为国家4A级旅游景区，全国休闲农业与乡村旅游五星级园区、

北京市科普教育基地。庄园下设有生态农业开发公司、酒业公司、

旅游文化公司和国际会议中心，是一个集葡萄种植及酿酒、葡萄酒

主题文化旅游、休闲度假以及葡萄酒知识培训功能为一体的综合性

国际庄园。

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

葡萄酒主题文化旅游、葡萄酒销售、葡萄酒知识培训以及葡萄、葡

萄酒以相关延伸品、礼品的销售和服务。

国际会议中心是集住宿、餐饮、会议、娱乐、休闲、旅游度假

为一体的法式风情小镇。小镇划分为街道生活区、餐饮服务区、娱

乐休闲区、教堂博物区四个功能区。设有总统套房、酒店标准客房、

中西综合餐厅、会议室、电玩中心、杂货铺、咖啡厅、雪茄吧、红

酒吧、KTV、葡萄酒精油SPA高级会所等经营项目。这里有无法复

制的百年品牌，这里有无法比拟的美酒美食文化之旅，小镇的一切

无不诠释着国际庄园“国际庄园新领袖”的非凡气质！

任务一：曼香庄园微网站站点管理

制作要求如下：

1.在微设计、微开发平台中分别创建站点，名称为“曼香庄

园”，描述可根据需要自行添加；

2.请根据任务二曼香庄园微网站制作要求，加工“微网站设

计与开发比赛任务”中“任务一”子文件夹中提供的素材，制作

形成符合微网站标准的网页元素，调整至合理大小并保存为适当

格；

3.对微网站结构和素材进行整理，对素材进行加工并重新分

类整理归纳到自建“XXX参赛作品”文件夹中“任务二”的子文件

夹中。

例如：曼香庄园引导页面，文件夹名称为“引导页”，制作

引导页需要图片、音乐类素材，请建立“引导页”文件夹，内建

两个字文件夹分别为“图片”、“音乐”，将加工后的网页素材放

分类至其中。

任务二：曼香庄园微网站页面制作

1.微网站logo和首页设计

（1）Logo设计

根据客户背景资料描述设计符合企业形象的具象图形LOGO，

并合理运用在微网站页面中。

（2）首页页面设计

按照客户背景资料完成首页页面设计，要求页面包含有以下元

素：

全屏轮播图；

首页要有客户logo体现；

页面导航按钮，共有“关于庄园”、“旅游度假”、“婚礼庆

典”、“科普实践”、“庄园活动”和“联系我们”六项；

将制作完成的首页设计图以psd形式存放于桌面“\XXX参

赛作品\任务二\曼香庄园首页”文件夹内。

2.制作切片

按照提供的UI效果图样张进行合理切片，符合移动端页面的

设计要求，不允许使用整幅图片。

3.微网站页面制作要求

（1）引导页

在微开发平台中利用HTML5代码、CSS样式，按照提供的微网

站页面样张完成页面制作，保证与样张完全一致。

添加音乐；

为页面设计合理的动画效果。

（2）曼香庄园首页

在微开发平台中利用HTML5代码、CSS样式，按照提供的微网

站页面样张制作微网站页面，保证与样张完全一致。

制作全屏轮播效果；

设置页面中的导航菜单，并为其设计合理的动画效果。

（3）关于庄园

在微设计平台中应用基本组件，按照提供的微网站页面样张完

成页面制作，保证与样张完全一致。

设置页面中的导航菜单，并为其设计合理的动画效果。

（4）婚礼庆典

在微设计平台中应用基本组件，按照提供的微网站页面样张完

成页面制作，保证与样张完全一致。

制作轮播图；

为页面设计合理的动画效果。

（5）科普实践

在微开发平台中利用HTML5代码、CSS样式，按照提供的微网

站页面样张完成页面制作，保证与样张完全一致。

设置页面中的导航菜单，并为之设计合理的动画效果；

单击拓展体验，呈现弹出菜单效果。

（6）在线报名

在微设计平台中应用基本组件，按照提供的微网站页面样张完

成页面制作，保证与样张完全一致。

为页面中的文字设计合理的动画效果；

利用输入框和按钮完成表单制作，并提交至少一条记录，保

证能从站点管理下查看提交的数据。

（7）关于庄园-大事记

在微设计平台中应用基本组件，按照提供的微网站页面样张完

成页面制作，保证与样张完全一致。

设置页面中的日期和事件，并为之设计合理的动画效果。

（8）关于庄园-联系方式

在微开发平台中利用HTML5代码、CSS样式，按照提供的微网

站页面样张完成页面制作，保证与样张完全一致。

添加QQ客服；

为页面设计合理的动画效果。

4.页面交互

（1）制作引导页链接

“引导页”通过【进入曼香】按钮链接到“曼香庄园首页”

页面。

（2）制作“曼香庄园首页”链接

【关于庄园】菜单链接到“关于庄园”页面；

【婚礼庆典】菜单链接到“婚礼庆典”页面；

【科普实践】菜单链接到“科普实践”页面；

点击【联系我们】菜单，可实现一键拨号（电话：

4008471008）。

（3）制作“关于庄园”链接

【大事记】菜单链接“大事记”页面；

【联系方式】菜单链接到微开发平台制作的“联系方式”页

面；

底部菜单【首页】按钮链接到“曼香庄园首页”页面；

底部菜单【一键导航】按钮链接到提供的导航地址；

底部菜单【在线报名】按钮链接到“在线报名”页面；

底部菜单【关于我们】按钮链接到“关于庄园”页面。

（4）婚礼庆典

底部菜单【首页】按钮链接到“曼香庄园首页”页面；

底部菜单【在线报名】按钮链接到“在线报名”页面；

底部菜单【关于我们】按钮链接到“关于庄园”页面。

（5）科普实践

底部菜单【首页】按钮链接到“曼香庄园首页”页面；

底部菜单【在线报名】按钮链接到“在线报名”页面；

底部菜单【关于我们】按钮链接到“关于庄园”页面。

（6）在线报名

底部菜单【首页】按钮链接到“曼香庄园首页”页面；

底部菜单【在线报名】按钮链接到“在线报名”页面；

底部菜单【关于我们】按钮链接到“关于庄园”页面。

（7）大事记

底部菜单【首页】按钮链接到“曼香庄园首页”页面；

底部菜单【一键导航】按钮链接到提供的导航地址；

底部菜单【在线报名】按钮链接到“在线报名”页面；

底部菜单【关于我们】按钮链接到“关于庄园”页面。

（8）关于庄园-联系方式

底部菜单【首页】按钮链接到“曼香庄园首页”页面；

底部菜单【一键导航】按钮链接到提供的导航地址；

底部菜单【在线报名】按钮链接到“在线报名”页面；

底部菜单【关于我们】按钮链接到“关于庄园”页面。

任务三：生成曼香庄园APP

1.设置参数

在微开发平台“曼香庄园”站点生成APP；