第六届星光杯-网站设计项目-决赛方案、练习题-中职组.doc

上海市“星光计划”
第六届职业院校职业技能大赛

网站设计（中职组）
决赛方案

上海市星光计划组委会竞赛办公室
二○一四年十二月

目 录

1. 简介 3
1.1项目名称 3
1.2项目说明 3
2. 决赛内容 4
2.1决赛项目及要求 4
2.1.1模块一：重设计 4
2.1.2模块二：页面实现 4
2.1.3模块三：代码功能 4
3. 评分标准 5
4. 安全规定 5
5. 材料与设备 5
5.1基本设施清单 5
5.2决赛选手自备的材料、设备和工具 6
5.3决赛场地禁止使用的材料和设备 6
附录一. 决赛技能练习题 7

1. 简介
1.1项目名称
网站设计
1.2项目说明
网站设计是一门不断动态发展变化的技术，融合了网页的制作和维护。网站设计人员使用计算机程序生成网页，包括其他网站的链接、图形元素、文字和照片。这些元素的布局也可以通过脚本或画纸的方式呈现。在技术实现方面需要运用电脑软件、开放源码库以及框架技术。在工作中，设计者和构建者一定要注意版权法以及相关道德问题。
当今任何人都可以尝试网站设计，这给专业设计师带来更大压力。为了吸引访客注意并在网站停留，设计师必须学习新技术并使用这些新技术来解决问题。当专业设计者而非业余者设计出的网站引来访客时，网络便成为企业沟通、营销和贸易的重要平台。
网站设计者能够理解网页制作的技术和相关艺术价值。在网站上，技术的运用是为了将功能自动化并帮助页面内容管理者更好地工作。网站的颜色、字体、图形以及布局则需要富有创意的设计技巧。用户界面（UI）的设计则确保了一种良好的用户体验（UX）。网站制作者也必须对项目工作内容、项目内容制作和网站管理有基本的理解。
最后的成品与标准的浏览器及软硬件间的兼容性也是十分重要的。
本决赛方案是对第六届“星光计划”职业技能决赛内容的框架性描述，具体内容要求以竞赛样题为准。
2. 决赛内容
2.1决赛项目及要求
本项目没有理论考试部分
比赛一共包含三个模块，在一天6小时的竞赛时间内全部完成。最终竞赛题将在2月10日前结合网上征集的意见进行完全公开，包括赛题、评分表和素材文件。并保证在最终比赛时不进行任何修改。
2.1.1模块一：重设计
时间：2小时
某知名B2C购物网站为了顺应移动互联网时代的购物需求，需要对其原有主页进行重设计。选手要提供电脑端、平板端和手机端的三个主页在不同分辨率下的设计文档（使用ps或fw）。电脑和平板端设计文件需要预留出主页banner动画的空间。
2.1.2模块二：页面实现
时间：2小时30分
将模块一中设计的三个页面实现在同一个网页文件中，使用CSS+JS脚本技术来进行响应式布局网页制作以及各种前端交互的实现，并确保在三种设备分辨率下（1440*900、768*1024、480*960）可以对该网站进行正确的浏览。对于1440*900、1024*768两个分辨率下还要进行站点banner动画的设计和制作。
2.1.3模块三：代码功能
时间：1小时30分
为前两个模块制作的页面添加后台代码功能，创建数据库按照要求设立默认用户。使用php脚本语言实现新用户的注册登录以及后台的用户管理功能（增删改查）。用户管理功能页面的设计和美观不做评价。
3. 评分标准
本部分确定了各模块的配分结构（主观和客观），评满分为100分。总评成绩合格者，核发网页设计制作员（四级）国家职业资格证书。
决赛题目最终配分以决赛当日的赛题为准。
操作技能部分配分
模块号
模块名称
分数（参照）
主观分
客观分
合计
模块一
重设计
20
15
35
模块二
页面实现
15
30
45
模块三
代码功能
0
20
20
小 计
35
65
100
注：主观评分的分值根据不同决赛项目在本模块配分的0-30%之间选取。本项目参照世界技能大赛标准，主观分有适当提升。
4. 安全规定
l 本项目没有特别安全规定，请注意赛场的用电安全。非赛场管理人员未经允许，不能随意拉接电源和用电设备。
l 选手应爱护赛场设施设备，操作规范，注意安全。违反安全操作规定造成的损失由考生负责。
l 如选手发生紧急的身体状况，将由赛场管理人员进行紧急处理。除非有集体性意外事件，否则本次比赛没有补时和重赛。
l 赛场内应配备常见的应急药品，比赛期间安排赛场单位医护人员值班。
5. 材料与设备
5.1基本设施清单
操作系统：WIN 7 Pro 64bit
Adobe Creative Suite 6 Design & Web Premium （PS、FW、AI、DW）
MS Office Prof Version 2010 （word、excel）
XAMPP 1.8.3
浏览器：
Firefox 33.1 or upper
Chrome 39.0 or upper
Internet Explorer 11 (64bit)
浏览器插件:
JRE 7
Flash player Version 15.0 or upper
辅助软件：
Edit plus 3.6.0.870 / Notepad++ 6.5.5.0 / Net beans for PHP 8.0
Filezilla Client 3.6 or upper
win RAR or 7ZIP new ver.
jdk 7 （供Net beans等软件安装使用）
所有同具体模块制作相关的帮助文档以及代码库、框架等的版本参照42届大赛题，直接由赛题中提供的素材决定
选手用机硬件配置：（机器性能不低于此配置）
CPU
Intel酷睿i5 2500 3.3GHz

内存
4G DDR3 1600MHz

硬盘
独立分区，选手可用的临时文件容量5G以上
显卡
AMD HD6350 1G显存

显示器
19" 宽屏LCD 1440*900

键盘鼠标
3键有线光电鼠标、标准美式键盘
5.2决赛选手自备的材料、设备和工具
l 选手可携带自己的键盘，如果选手所带键盘无法使用或者通不过赛前检测，赛场将提供一个标准键盘。
l 选手可携带自己的鼠标，要求同上
l 裁判有权禁止选手所携带的某些设备的使用
5.3决赛场地禁止使用的材料和设备
l 额外的软件
l 通讯工具
l 智能设备（包括穿戴设备）
l 不能使用任何带内置存储功能的设备
l 对具有争议性的设备和工具，现场执裁人员汇报裁判组认可后，有权禁止在比赛中使用某些设备
附录一. 决赛技能练习题

上海市“星光计划”
第六届职业院校职业技能大赛

网站设计（中职组）
决赛技能练习题

上海市星光计划组委会竞赛办公室
二○一四年十二月

参赛须知
一、选手须凭本人准考证和身份证原件（或带照片的社会保障卡、公安局核发的机动车驾驶证、初中职学校在校生学生学生证等有效证件原件）进入赛场，证件个人信息须与准考证信息一致，否则不得参加比赛。（以上证件复印件无效）
二、选手参加考试，迟到十五分钟以上不得入场。
三、凡有书面答题的，选手一律用蓝色或黑色的水笔（或圆珠笔）在卷内设定的位置书写，用其它颜色笔或在草稿纸上答题均属无效。
四、选手应爱护赛场设施设备，操作规范，注意安全。违反安全操作规定造成的损失由考生负责。
五、选手在比赛中严禁使用各类通讯工具。
六、选手必须严格遵守考场有关规定，严禁作弊或代考，自觉服从裁判长、裁判员、考场工作人员的管理。
七、选手着装、用品等在外观上不应显示选手所在单位等个人信息。
八、选手参加比赛，应穿戴整洁，衣冠不端者不可入内。
九、禁止在竞赛期间对赛场设施、设备、赛项题目或项目的其他组成部分进行摄影、摄像。
十、竞赛安全规定：请注意赛场的用电安全，非赛场管理人员未经允许，不能随意拉接电源和用电设备；选手应爱护赛场设施设备，操作规范，设备如遇问题要及时提出。
十一、技能竞赛场地禁止使用的材料和设备：
1. 额外的软件
2. 通讯工具
3. 智能设备（包括穿戴设备）
4. 任何带内置存储功能的设备
对具有争议性的设备和工具，现场执裁人员汇报裁判组确认后，有权禁止在比赛中使用这些设备
一般说明
注意：选手交卷时应将本地机器生成的文件保存在桌面选手规定名称的目录下，并分模块将文件夹命名为XX_模块X，其中”XX”是抽签工作机号，”X”是模块号（例如01_模块一），相关提示信息请参考熟悉赛场当天发的选手操作指南文件。只有按照要求保存到指定目录的内容才会被提交和评分，除特殊情况外一律不查看选手本地计算机中的其他文件。每个模块将严格按照规定比赛时间收卷和评分，超过规定时间后完成的内容将不予评分。

试题和任务说明
试卷组卷方案
模块号
模块名称
分数（参照）
主观分
客观分
合计
模块一
重设计
20
15
35
模块二
页面实现
15
30
45
模块三
代码功能
0
20
20
小 计
35
65
100

竞赛要求
模块一：重设计
竞赛时间：2小时
某B2C购物网站为了顺应移动互联网时代的购物需求，需要对其原有主页进行重设计。该设计应该是一种响应式的网站，为使用电脑，平板电脑或智能手机访问该网站的用户提供一个最佳的视觉体验。
在练习时可以基于任何一个网站的原始HTML文件进行，在正式公开的比赛题中选手将被提供相关网站的页面和图片素材。任务是完成一份设计，展现如何将原有的内容在三种设备中（电脑，平板电脑和智能手机）进行重新布局。
l 分析提供的网站素材，在重设计中用上所有核心元素。要求根据提供的原网站部分内容来进行站点重设计的创作，保持该公司的原始形象和色调没有较大变动。必要元素：
n 头部：Logo，一些顶部菜单(注册登录、我的账号)，文本等。
n 搜索框：输入文本框以及搜索按钮。
n 主导航：若干个导航链接
n 商品：图片，价格，文本，制作购买按钮，对新上架产品备注高亮“NEW”图标。
n 购物车：当前数量、金额信息等
n 产品分类菜单：侧边栏（可根据设备做成隐藏式）
n 社交媒体：按照提供的素材在页面中加入相应图标（如脸书等）
n 页脚：原网页中公司信息、版权、底部导航等

l 新设计的样稿应当被开发成可以在三种规定设备和分辨率下工作：电脑(1440宽 x 900高)、平板 (768宽 x 1024高)、智能手机 (480宽 x 960高)
l 手机和平板端至少各有2个及以上的交互效果，效果适当，不包括banner动画。选手可以创建额外的图片或者提示信息来展示设计中的交互操作隐藏元素、动画效果或者任何有助于优化响应式站点的额外的信息。（说明信息做在一个设计稿中或者做成多个设计稿均可）
l 站点设计图必须用真实像素尺寸单位。每个设备的设计图上都应有一个小于4px宽的清晰可见的外边框（颜色自定）。每个边框使用规定的三种分辨率来展示每个设计页面在三种设备中全屏显示时的实际可见范围和效果。
l 文件命名：
n 电脑端设计：XX_Computer.jpg
n 平板端设计：XX_Tablet.jpg
n 智能手机端设计：XX_Smartphone.jpg
n 在提交的XX_模块一文件夹中将所有源文件保存在一个名为XX_Source_Files的文件夹内。源文件即包含设计稿图层信息的文件。
n 可使用ps或fw工具软件进行制作。电脑和平板端设计文件需要预留出主页banner动画的空间，手机端是否有banner动画由选手自行决定。

三种分辨率下响应式布局样例效果

模块二：页面实现
竞赛时间：2小时30分
竞赛任务及要求：
将上午设计完成的三个页面实现到一个HTML文件中，使用HTML5+CSS3.0+JS脚本技术来进行响应式网页制作，使得在三种设备的分辨率下（1440*900、768*1024、480*960）可以对该网站进行正确的浏览。
l 平板与电脑宽屏布局之间变化的临界值是800px
l 设计将会在谷歌Chrome浏览器中进行评分
l 按照自己的设计稿，某些元素仅仅在宽屏布局下可见，一些将仅在窄屏布局下可见
l 对于1440*900、768*1024两个分辨率下包含的站点banner动画进行设计和实现。页面载入后自动播放并具备暂停和继续播放功能，并包含每个章节的章节按钮
l 实现上午设计稿中设计的2个及以上各种交互操作功能（如鼠标点击、触摸和隐藏列表等）
模块三：后台功能
竞赛时间：1小时30分
竞赛任务及要求：
使用php脚本语言为前两个模块制作的页面添加注册登录以及后台用户管理功能，创建数据库按照要求设立默认管理员用户。
l 默认管理员用户名：xgjh 密码：admin
l 能使用管理员用户来新建其他新用户。
l 能在首页上注册新用户
l 能在首页上用已注册的用户登录（包含用户验证及反馈）
l 管理员账户能登录到后台的用户管理功能模块（普通用户不可见）
l 能通过管理员用户对其他用户账户进行增、删、改、查操作
用户管理功能和新用户注册页面的设计和美观不做评价
5771001803090012095 579036822859633082
5771001803090012386 576137399735760696
5771001803090013594 578077579902515512
5771001803090012387 577164982601818051
5771001803090012138 572131192158918326
5771001803090012359 579036822361076053
5771001803090012356 576135286143791742
5771001803090012355 575087869704693279

17088100343355274 101229944325833379
17088100343355275 101866732938832008
17088100343356107 101581152501500522
17088100343356108 101000180059871732
17088100343354295 101074194142687017
17088100343356184 101878660869628802
17088100343356185 101775831174086674
17088100343356109 101086014373572846
17088100343356110 101152207216014916
17088100343355237 101027041605702709
17088100343355238 101229364861425414
17088100343356169 101862204402635718
17088100343354928 101760654089788804
l
第5页