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

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

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

竞赛样

（一）操作说明

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

常；

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

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

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

“任务二”子文件夹内；

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

赛作品”。其中×××为三位赛位号，比如赛位号为001号，文件

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

参赛作品”并在请此文件夹中分别建立名称为“任务”、“任务

四”子文件夹；

4.在桌面文件夹“×××参赛作品”内“任务”文件夹下应建

立页面名称子文件夹，子文件夹下建立“效果图”、“切片”、“文

字”子文件夹，存放相应的文件。如图1-1微网站结构和素材

整理参考示例；

【第1页共15页】

图1-1微网站结构和素材整理参考示例

5.作品提交。最终比赛提交微网站成果需以APK格式保存

在桌面文件夹“×××参赛作品”下“任务四”子文件夹中；

注意：

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

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

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

微网站制作过程中请使用谷歌浏览器，并注意随时保存，浏

览微网站使用谷歌浏览器；谷歌浏览器移动端网站预览方法如下

图所示：

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

式”；

【第2页共15页】

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

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

【第3页共15页】

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

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

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

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

（二）比赛任务及要求

制作要求：

1.在微网站设计与开发平台中创建站点“易通房产”，按

照制作要求创建微网站页面；

2.按照微网站结构和素材整理参考示例（见图1-1），对

素材进行加工并重新分类整理归纳。

任务一：健康医疗微网站页面制作

【第4页共15页】

1.分类归档

按照微网站结构和素材整理参考示例（见图1-1），对素

材进行重新分类整理归纳。

2.制作切片

1按制作的UI效果图进行合理切片，符合移动端页面的

○

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

2将制作微网站所需的切片，存放于“桌面：\XXX参赛

○

作品\任务”相应页面“切片”文件夹内。

3.微网站页面制作要求

1易通首页

○

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“易通首页”；

设置页面中的九项导航菜单，为依次（延迟间隔0.1

秒）从左到右移入的动画效果；

设置页面中“世茂湖滨花园”、“周边附近”、“交通

便利”三项，为依次（延迟间隔0.1秒）从右到左移入的动

画效果；

页面中“8000家”、“10万”、“12年”使用“文字”

组件制作，字体设置为“微软雅黑”，字号设置为“20px”，

【第5页共15页】

字体颜色为“白色”；