2013年上海市职业技能竞赛
市级一类竞赛
网页设计制作员
决赛方案
上海市职业技能竞赛组织委员会
二○一三年五月
目录
1. 简介 (1)
1.1项目名称 (1)
1.2项目说明 (1)
2. 决赛内容 (1)
2.1技能模块内容及要求 (1)
2.1.1模块一：网站总体设计 (1)
2.1.2模块二：网页设计制作 (2)
3. 评分标准 (3)
4. 安全规定 (3)
5. 材料与设备 (3)
5.1基本设施清单 (3)
5.2参赛选手自备的材料、设备和工具 (4)
5.3竞赛场地禁止使用的材料和设备 (4)
1. 简介
1.1项目名称
网页设计制作员
1.2项目说明
本竞赛项目内容以网页设计制作员（三级）国家职业标准为参考，竞赛内容由2个操作技能模块组成，决赛时间为3小时。
本方案是对上海市一类技能大赛决赛内容的框架性描述，正式决赛内容要求以决赛题为准。
2. 决赛内容
本方案所描述的内容在一般情况下为决赛内容，如参加竞赛的人数较多，则操作技能需进行复赛，复赛内容可参照本网页设计制作员（三级）的二类竞赛内容。
2.1技能模块内容及要求
本项目技能模块分成网站总体设计和网页设计制作2个模块，时间合并计算为3小时。
2.1.1模块一：网站总体设计
1．网站创意设计：
（1）网站需求分析；
（2）根据网站主题设计网站用户体验（UI）
（3）分析和量化网站用户体验的四个关联要素；
（4）根据文档规范要求编写网站设计方案；
2．网站结构设计：
（1）根据网页功能需求设计网站层次结构；
（2）根据文档规范要求编写网站层次结构设计文档；3．网站视觉设计：
（1）设计网站界面视觉效果方案
（2）设计网页动态效果方案
2.1.2模块二：网页设计制作
1．制作页面效果图（使用PhotoshopCS3）
（1）运用形式感法则设计版面；
（2）划分网站首页的功能区域；
（3）按照色彩使用法则明确功能区的色彩；
（4）按照版面设计的原则进行初步排版；
（5）确定版面文字；
（6）确定动画及音乐等媒体效果；
2．制作网站主标识（Logo）
（1）使用Adobe Photoshop CS3制作网站主标识（logo）；（2）设计字母标志；
（3）设计概括形体；
（4）选择字体及位置；
3．制作网站导航
（1）根据网站的信息量及网站风格设计导航；
（2）根据用户需求和网站风格设计不同形式的导航；4．制作Flash动画
（1）应用Adobe Flash CS3软件进行特殊效果处理；（2）应用ActionScript实现交互式flash制作；
5. 制作网页动态效果
（1）设计制作视觉效果样本；
（2）使用网页脚本程序实现网页动态效果；
6. 制作合成网站
（1）将以上制作的内容根据网站策划案合成发布为一个网站
（2）进行必要的测试
3. 评分标准
本部分确定了各模块的配分结构，参照世界技能大赛的规则，本次技能竞赛设置了主观分和客观分，主观分由竞赛裁判根据自己的主观判断进评分；客观分根据物理指标进行评分。评分标准的设置还将遵循注重竞赛任务完成的质量、技能操作的规范和操作过程的文明与安全。
评分标准中操作技能配100分。成绩合格者，核发网页设计制作员（三级）国家职业资格证书。
决赛题目最终配分以决赛当日的赛题为准。
操作技能部分配分
4. 安全规定
无。
5. 材料与设备
5.1基本设施清单
设备需求清单：
5.2参赛选手自备的材料、设备和工具
本项目为计算机上机考试，不需要带特殊设备，考生带水笔即可。
5.3竞赛场地禁止使用的材料和设备
1. 额外的软件（如有必要，需提前向决赛组委会申请，未经申请或申请未
批准者，禁止私自携带或在竞赛机器上安装）。
2. 移动电话。
3. 掌上电脑。
4. 存储盘（数据存储设备）。
5. 不能使用任何带内置存储器的设备。
6. 赛场专家有权禁止在比赛中使用某些设备。
网页设计比赛方案 一、参赛对象:1013、 1102 二、参赛时间:5月 20日—— 6月 10日 三、参赛内容及设计要求: 1、网页内容健康、合法、安全、不得有恶意代码,可运用多项网络技术。 2、参赛作品要求内容积极向上,形式新颖,构思独特,有开创性;页面协调统一,能够引发浏览者的视觉享受; 网站内容丰富, 实用性强; 网页标志鲜明突出, 网页显示速度快; 有效运用网页特效,有较强的艺术表现力和感染力;导航明显突出,方便快捷。 3、选手可根据自己掌握的网页技术自由创作,但必须主题明确,构思新颖 . 。 4、页面深度必须在 3层左右,网页的总页面数不少于 8页,全部文件的总容量不超过 20M 。 5、网页规模:网页的深度至少包括二级页面,以 4~7个页面为适宜。 6、作品中所有文件均要以小写字母或阿拉伯数字命名;由于系统对字母的读写敏感, 请不要采用中文作为文件名且一律使用小写字母。 7、作品制作规范符合要求;作品首页请一律采用 index.htm 或 index.asp 等文件名。 8、超连接的路径为相对路径,所有路径都必须正确而且不作空白。 9、我们鼓励原创,允许模仿他人但不可以直接利用他人模板,完全盗用模板者一律无条件退出比赛。 四、评选原则:以页面设计为主,兼及内容、网页动态技巧。
五、奖项设置:一等奖 1名,二等奖 2名,三等奖 3名,优秀奖若干。 六、评分标准(百分制 1. 内容质量(20分 内容健康、充实且积极向上; 内容具有观赏性、普及性、艺术性、可读性, 语言文字有特色; 分突出主题,全站点围绕一个主题及其周边内容进行建设 设计思路清晰,明确表达设计意图; 2、网页结构(15分 框架及表格结构清楚合理,页面内容清晰明了。 子页面及父页面方便返回访问,打开 /关闭窗口较为轻易 没有空链接和错误链接。 3. 版面与视觉感受(40分 浏览页面时不得出现乱码,无因布局不合理而出现的表格错位情况 图片使用得当,网页内各个元素搭配合理,色彩搭配协调,页面美观。 4. 网页创意(25分 5. 页面具有较强的个人设计创意。 (10分 网页整体风格创意,色彩搭配鲜明,内容布局合理。
协议编号：WU-PO-701-19 网站设计制作协议（三）标准样本 In Order T o Protect The Legitimate Rights And Interests Of Each Party, The Cooperative Parties Reach An Agreement Through Common Consultation And Fix The Responsibilities Of Each Party, So As T o Achieve The Effect Of Restricting All Parties 甲方：_________________________ 乙方：_________________________ 时间：________年_____月_____日 A4打印/ 新修订/ 完整/ 内容可编辑
网站设计制作协议（三）标准样本 使用说明：本协议资料适用于协作的当事人为保障各自的合法权益，经过共同协商达成一致意见并把各方所承担的责任固定下来，从而实现制约各方的效果。资料内容可按真实状况进行条款调整，套用时请仔细阅读。 根据国家知识产权及网络管理的有关规定， _________（以下简称甲方）委托_________（以下简称乙方）为甲方筹建Internet网站，设计制作网页的合作项目，经双方协商达成以下协议： 一、合同内容和要求 1．网站有_________种语言版本：_________； 2．网站页数范围：_________； 3．网站建设方案：_________。 二、合同金额及付款方式 1．甲方应向乙方网站规划费，网站设计费，网站制作费，以及网站后期维护费共计人民币_________
网页设计及制作 【实习目的】 熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。 过网页设计理论联系实际操作，巩固所学的知识，提高处理问题的能力。 充分学习 网页设计实践中的操作理论，提高自己网页设计水平，并为能顺利与社会环境 做准备。 【实习时间 【实习地点 未来路锦江国际花园9栋501室 【实习单位】 郑州市托斯卡纳餐饮有限公司 【实习内容和过程】 实习内容: 我在托斯卡纳餐饮公司旗下的56网络蛋糕店一个月的实习，我的工作就 责设计整个网站的页面部分。为其一个月的实习，使我第一次亲身感受到了 识与实际的应用，作为一个网站美工除了要求网页三剑客，ps,这些必会的 软件以 外, 还要对Html 用的很熟,对ASP 或PHP 或jsp 要有初步的了解。 通过这 次实习，进 步巩固和深化所学的理论知识，为以后的工作打好基础。 以下是我做的一些实习过程中的经验总结 (1表达一定的艺术效果 接轨 2012年2月 15日至2012年3月15日 是负 所学知
一个成功的网站应该把网页设计得吸引人，同时又要传达设计思想和情感。网页作为一种媒体，它必须具有一定的艺术感染力，一个平淡无奇、杂乱无章或毫无 美感的网页很难会有浏览者喜欢，更不要说让浏览者去注意它的内容了。(2使页面 结构清晰可读性强 经常可以看到这样的页面，上面堆砌了许多内容，却没有考虑它的空间框架 人看了无法知晓哪些内容才是最具发言权的。没有流畅的视觉流程，这是典型 的没有注意到编排清晰度、可读性的表现。 (3实现不同的功能 在网络这条信息高速公路上，网页最主要的功能就是一种传递信息的手段。 此，它一切内容都是为了这个目的而服务，都是要围绕这个中心进行设计的。然而，要实现这个功能，网页的美工设计和内容都必须有针对性。所谓针对性，就是指对不同类别的网页要求采用不同的美工艺术效果。 (4网页的内容 网页设计人员美化网页，增加网页设计的艺术感，都是为了网页设计的内容服务的。一般来说，网页的几项基本内容：标题、网站标志、主体内容、导航、广告栏等。 (5确定网站的类型 在设计网页之需要做大量的准备工作，需要思考以下几个问题：1、网站的类型: 站点属于新闻、娱乐、商务类的综合站点，还是个人主页； (6确定网站的风格 如果浏览者主要是年轻人，页面就要设计得基调明快，活泼富有朝气；如果针对的群体是政府工作者或科学工作者，那么页面就要设计得严谨、严肃、理性、科学;如果针对的群体是妇女儿童，页面则要设计得温馨、友爱、轻松；如果针对的群体是恋人或从事艺术工作的人，页面就要设计得浪漫并有艺术感 (7确定网页之间的链接关系 在网站的总体规划列出来后，就必须要考虑各个网页之间的关系，是星型、树型、网型还是直线链接。
网页设计大赛策划书 计算机工程系首届网页设计大赛 策 划 书 主办：东莞职业技术学院计算机工程系 承办：计算机工程系新闻网络部宣传部 时间：二零一零年十一月二十八日 计算机工程系网页设计大赛一、活动目的： 为丰富校园文化生活、点缀校园缤纷色彩，鼓励同学们对生活积极的观察与发现，提高学生审美能力以及对平面设计作品视觉传达的认识，激发学生创新和设计的潜能，发掘优秀网页设计人才；提高同学们的网页制作水平，使学生学习和实际工作联系起来，拟举办本系第一届网页设计大赛。 二、大赛主题参赛选手可在下列主题中任选其一制作： 1. 校园青春群落，如：校园音乐、摄影、校园文化艺术、旅游、志愿者等等； 2. 电脑方方面面，如：介绍各类型软件的使用及实用教程，收集有意思的图片或动画，体现计算机学习乐趣等等； 3.介绍本系，如：学生会、团总支、老师的介绍、本系各专业的介绍。
4.自由主题，根据自己喜好制作。 三、参赛对象： 东莞职业技术学院全体学生，可以个人参赛，可以团队参赛(团队不能超过2个人) 四、报名方式： 于12月1日至12月3日中午12：00-13：00在饭堂门口活动咨询点领取报名表，并在报名期间填完交回报名处。 四、比赛流程 一、大赛日程具体安排： 12月1日—12月3日：宣传阶段 12月6日—12月8日：现场咨询和报名 12月8日—12月15日：提交作品 12月17日：初赛作品评选 12月21日：决赛和现场颁奖 二、活动具体流程： 1，活动宣传工作（宣传部） 2，参赛人员上传作品（网络新闻部） ? 作品提交方式以ftp提交为主 ? 该服务只有上传和续传功能，为了保护各参赛者的公平性和知识产权 不开通下载功能。
网页设计之静态网页制作 课程目标：不用精通编程语言，主要围绕网页布局设计。 教学特色：以循序渐进学习为主，从学员的学习接受程度出发，通过阶梯式课程提高学习效果，通过阶梯式的项目课程设计迅速提高学员网站\网页美工设计能力。 适用对象： 1、高中及以上学历; 2、有志于IT行业发展; 3、对网站美工设计制作感兴趣; 4、企业职员培训 课程学习内容包括下面三个软件： 1. Dreamweaver Dreamweaver是Adobe公司推出的一款专业的网站开发与维护软件，支持DHTML、CSS、网页编程，所见即所得等技术，是目前使用的较多的网站布局设计与维护软件。 培训内容：网页的版面规范、网站建设流程、Dreamweaver的操作界面、各种网页元素的使用、表格与布局表格、层、时间轴与简单动画制作、框架、表单的制作、库与模板、行为、网站的维护与管理、HTML 与JavaScript简介、HTML基础语言；常用的SEO技巧、设计网页要注意的事项。 主要核心步骤：运用掌握的界面效果图进行HTML模板制作，其中涉及到SEO、table+css和Div+css布局（重点掌握的内容）。 2. FLASH FLASH是Adobe公司推出的一款专业的动画制作软件，采用矢量图形来制作动画，支持“流”媒体技术，并支持ActionScript编程，广泛应用于网页设计、网站广告、游戏、MTV、教学软件与电子杂志制作等方面！ 培训内容：动画的基本概念、FLASH操作界面、FLASH动画的鼠绘技巧、动画的分类与制作方法、元件的分类、区别和应用、层的种类与应用、Flash常见的问题、初级ActionScript语言、大量关于网络广告和多媒体课件的商业实例制作。 主要核心步骤：结合HTML模板进行网站的菜单导航、网络广告、网络动画和简单的flash网站制作。 3. Photoshop 专门针对网页设计（网页美工）行业，熟悉Photoshop在WEB中的应用。有Photoshop基础效果会更好。培训内容：Photoshop基本操作界面、工具使用、层及滤镜，提高实用技巧；Photoshop选区的选取与编辑；UI用户界面制作、Photoshop里面的行为和批处理技巧；Photoshop制作企业网页效果图（综合讲解）；配合DR制作出Table和DivCSS的HTML模板页面. 主要核心步骤：学员根据所学的知识点来策划自己的网站界面。 网页设计之动态网站建设 课程目标：提高网页编程能力，主要围绕网页功能开发。使学员了解基于https://www.doczj.com/doc/3516157731.html,的应用程序一般开发流程。全面学习掌握最新的https://www.doczj.com/doc/3516157731.html,和https://www.doczj.com/doc/3516157731.html, 开发技术，掌握基于三层架构的https://www.doczj.com/doc/3516157731.html,企业级应用程序的开发流程。 适用对象： 要有一定的面向对象程序设计或C语言程序设计基础，主要是要对https://www.doczj.com/doc/3516157731.html,开发技术感兴趣有志之士。
网页制作比赛活动策划方案 一、活动目的： 适应信息化的时代要求，展示我系学生的信息技术创作才华和成果，促进信息交流，营造良好的科技文化氛围。 二、活动时间： 三、主办单位： 四、报名资格 1、参赛选手为全院在校学生 2、参赛分为三年制组和五年制组 3、可以以个人或者组队形式参加比赛 五、报名方式 1、到系部网站下载报名表格 2、报名表格复印有效 3、报名表交至*********处 4、报名截至时间：*年*月*日 六、作品上交方式（三种方式任取两种）
1、将作品发到******邮箱 2、将作品拷贝到经济贸易系系部电脑D盘下“网页制作比赛”文件夹内 3、将作品刻录成光盘送至经济贸易系学工办王淼老师处 七、作品要求 1、由参赛选手自行策划设计制作，不限定创作工具。作品内容不得含有不健康信息，可出现商业性广告语和任何外部链接，应严格遵守国家有关法律法规。 2、网页首页文件名为index.html、index.htm或index.asp、index.php等。 3、网页应有较好的浏览兼容性，同时应考虑显示分辨率（以1024*768分辨率为显示标准），必须支持IE浏览。 4、所有网页应保证不携带病毒。（若由于病毒问题影响网页显示效果，由参赛选手自行负责）。 5、网页应充分体现数字技术开放性、交互性和共享性的特征，网页作品大小不超过50MB（非压缩文件）。 6、作品提交时必须注明：作品名，作者名，作者Email ，联系电话，以及完整的作品简介( 包括作品名称、作品说明、创作动机、创作思路等) 。 八、评委会组成:
主任： 副主任： 成员： 九、评比标准 详细内容见附件3。 十、奖项设置： 一等奖1名 二等奖2名 三等奖3名 参与奖5名 十一、注意事项 1、参赛作品收件后概不退还，所有得奖作品将于系部网站做长期展示。 2、若得奖作品经检举有抄袭之嫌查证属实，取消名次、并且追回奖项。 3、比赛作品所有引用之数据，务必标示出及来源。十二、所需设备 计算机一台、移动硬盘一个
网站制作方案
目录 一、网站的建设和目的 (3) 二、网站定位 (3) 三、网站风格 (3) 四、网站设计原则 (4) 五、平台用户类型 (5) 六、网站栏目............................................................. 错误!未定义书签。 七、网站功能要求 (5) 八、网站运行基础 (7) 九、其它 (7)
网站制作方案（草案） 一、网站的建设和目的 随着时代的发展，企业网站的建设已经成为开展营销推广的必要环节和手段。各个企业对网站建设的目的各不相同，本案公司为某品牌汽车经销商，公司需要做一个企业集团型的网站，该企业网站建设的目的在于“实现全新的公司对外宣传形象升公司在消费者中的认识度。 二、网站定位 ●科技、创新、朝气、清新进取 ●以企业形象宣传和产品销售为导向 ●结构清晰，层次分明 三、网站风格 页面 风格要有现代感、有新意、体现科技创新特点； 强调色彩、出时尚性、但要求协调、页面流畅，不可以给用户凌乱的感觉、保证浏览者在较短的时间内看到最想看到的内容； 注重页面和banner、flash和图片的协调。 合理安排首页的信息，避免信息过多分不清主次，造成信息冗余；
颜色 色彩要与VI相同，页面要求精致，通过页面可以体现我们的技术实力和数据权威，这一点在页面的精致和专业程度上体现出来。 搭配图片、banner、flash等装饰，使得页面有灵活性 四、网站设计原则 在网站的设计和开发过程中，我们要求遵循以下原则： ●一致性——符合网站的定位思想，各页面之间要有连续性； ●易用性——系统设计制作使用的技术对使用者的专业技能没 有特殊要求，方便个人和客户的使用； ●高效性——网站页面的设计简洁、美观，尽可能地提高浏览速 度，突出主要信息。导航系统在层次清晰的同时方便浏览者对 相关信息和服务的访问； ●可扩展性——为保证公司未来发展的需要，同时兼顾系统建设 的阶段性，尽量减少模块间的连动设计，便于今后系统扩展与 升级； ●安全稳定性——在充分考虑网站功能的同时，应格外重视网站 的安全和稳定性； ●多用户——考虑到网站的使用者同时操作的情况，系统支持多 人操作；
网页制作课程设计报告 学院： 专业班级： 姓名： 学号： 成绩： 阅卷教师：
目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (2)
1.设计目的 阐述该个人网站的设计意图和创意，简单介绍自己的个人网站。 2.设计思想 阐述网站的整体设计思想，包括： 2.1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。 2.2 主页设计思想 要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析 要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作该网页的步骤，所使用的网页对象以及该网页对象的操作方法。
4结论 对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最后提出展望。 一、设计目的 本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素
个人网页设计大赛活动策划书 一、活动前言 经过年寒窗的苦读，我们终于进入了我们期待已久的大学生活。网页大家也再熟悉不过，我系有自己的信计专业，而计算机系在这面专攻，为了让这些学子在步入社会后有更多工作经验，我PHP网页开发协会特地举办本次个人网页设计大赛，希望能鼓励更多人去学习网页设计，为国家和社会提供一批专业人才。 二、活动时间：XX年11月XX日至XX年11月XX日 三、活动主体 策划主办单位：怀化学院ＰＨＰ网页开发协会协会 活动对象：怀化学院在校全日制学生 四、活动主题：畅游网页世界编织你我梦想 六、活动流程： （1）报名时间：XX年11月XX日21:00 决赛地点：E1B-511 比赛形式：采取答辩的形式现场进行展示、演示并进行解说。老师现场提问。 评选方式：邀请相关有设计经验的老师、给参赛选手打分，以平均分决出最终比赛结果。 评比标准：原创性（25%）、创新性（25%）、质量（30%）、实用性（20%）
七、注意事项 1、初赛作品必须按时提交。 2、必须原创性，若有抄袭现象，主办方有权取消其参赛资格。 3、决赛每个队伍时间在8—10分钟左右。 八、奖项设置 一等奖 院级证书 奖金 一名 二等奖 院级证书 奖金 二名 三等奖 院级证书 奖金 四名 优胜奖 院级证书 六名 优秀工作者
院级证书 二名 九、活动经费预算： 报名表：200份 200*=20元 宣传单：200份 200*=20元 矿泉水：10瓶 10*=15元 获奖奖金 一等奖 1*60=60元 二等奖 2*40=80元 三等奖 4*20=80元 总计：275元 怀化学院PHP网页开发协会XX年11月XX日
软件职业技术学院 网页设计大赛 策 划 书 策划单位：社团联合会策划部 策划时间：2014年3月一、大赛主题： 知识源于创作，网页来自新颖 二、大赛背景：
在网站搭建中网页的设计往往发挥着非同凡响的作用，一个网页做的好坏直接影响到能不能吸引访客驻足的时间长短。同时访客多少同时又是体现设计水平的高低。 三、大赛目的： 通过本次网页制作比赛，旨在丰富同学们的课余生活，活跃同学们的思想，拓宽视听范围。体现大学生朝气蓬勃积极向上的精神状态，培养挖掘设计类与审美类人才，提高同学们对于独具想法、审美设计、统筹规划、技术操作、语言组织能力等。 四、大赛宗旨： 让网页更有魅力 五、比赛时间： 2014年5月日-2014年5月日 六、比赛地点： 软件楼116 七、活动对象： 软件职业技术学院全体12、13级本专科学生 八、比赛项目： 网页设计大赛 九、报名办法： 请各班同学于5月日将职业规划发送到指定邮箱： 十、活动流程： 本次大赛分为初赛和决赛两个阶段进行 1）初赛阶段： 从下发通知时开始投稿，截止到决赛前9天，再由大赛组委会交于相关评委老师评审，决出决赛选手名单，赛前一个礼拜公
布决赛选手名单，进入决赛的选手（12位） 2）决赛阶段： 环节一：需要对初赛作品进行优化，并现在场的观众展现决赛成果。 环节二：抽取操作题，并向在场观众展示实现操作（限时1分钟）。 十一、奖项设置： 第一名：奖励 +荣誉证书 第二名：奖励 +荣誉证书 第三名：奖励 +荣誉证书 最佳创意奖：奖励 +荣誉证书 最佳潜力奖：奖励 +荣誉证书 十二、备注： 1、网页数量不低于10张、且采用不低于8中构造手法。 2、网页路径都采用绝对路径。 3、网页必须原创，一经发现拷贝痕迹立即取消参赛资格。 4、网页主题必须选自：家乡美、学院十周年、个人show 等 软件职业技术学院社团联合会 2014年3月29日
2013年上海市职业技能竞赛 市级一类竞赛 网页设计制作员 决赛方案 上海市职业技能竞赛组织委员会 二○一三年五月
目录 1. 简介 (1) 1.1项目名称 (1) 1.2项目说明 (1) 2. 决赛内容 (1) 2.1技能模块内容及要求 (1) 2.1.1模块一：网站总体设计 (1) 2.1.2模块二：网页设计制作 (2) 3. 评分标准 (3) 4. 安全规定 (3) 5. 材料与设备 (3) 5.1基本设施清单 (3) 5.2参赛选手自备的材料、设备和工具 (4) 5.3竞赛场地禁止使用的材料和设备 (4)
1. 简介 1.1项目名称 网页设计制作员 1.2项目说明 本竞赛项目内容以网页设计制作员（三级）国家职业标准为参考，竞赛内容由2个操作技能模块组成，决赛时间为3小时。 本方案是对上海市一类技能大赛决赛内容的框架性描述，正式决赛内容要求以决赛题为准。 2. 决赛内容 本方案所描述的内容在一般情况下为决赛内容，如参加竞赛的人数较多，则操作技能需进行复赛，复赛内容可参照本网页设计制作员（三级）的二类竞赛内容。 2.1技能模块内容及要求 本项目技能模块分成网站总体设计和网页设计制作2个模块，时间合并计算为3小时。 2.1.1模块一：网站总体设计 1．网站创意设计： （1）网站需求分析； （2）根据网站主题设计网站用户体验（UI） （3）分析和量化网站用户体验的四个关联要素； （4）根据文档规范要求编写网站设计方案；
2．网站结构设计： （1）根据网页功能需求设计网站层次结构； （2）根据文档规范要求编写网站层次结构设计文档；3．网站视觉设计： （1）设计网站界面视觉效果方案 （2）设计网页动态效果方案 2.1.2模块二：网页设计制作 1．制作页面效果图（使用PhotoshopCS3） （1）运用形式感法则设计版面； （2）划分网站首页的功能区域； （3）按照色彩使用法则明确功能区的色彩； （4）按照版面设计的原则进行初步排版； （5）确定版面文字； （6）确定动画及音乐等媒体效果； 2．制作网站主标识（Logo） （1）使用Adobe Photoshop CS3制作网站主标识（logo）；（2）设计字母标志； （3）设计概括形体； （4）选择字体及位置； 3．制作网站导航 （1）根据网站的信息量及网站风格设计导航； （2）根据用户需求和网站风格设计不同形式的导航；4．制作Flash动画 （1）应用Adobe Flash CS3软件进行特殊效果处理；（2）应用ActionScript实现交互式flash制作； 5. 制作网页动态效果 （1）设计制作视觉效果样本； （2）使用网页脚本程序实现网页动态效果；
网页设计竞赛方案 网页设计竞赛方案1 一、活动目的 本次网页制作比赛，旨在丰富同学们的课余生活，活跃同学们的思想，拓宽视听范围。体现大学生朝气蓬勃积极向上的精神状态，培养挖掘设计类与审美类人才，提高同学们对于独具想法、审美设计、统筹规划、技术操作、语言组织能力等。 二、活动内容 限定题材，在全院范围内举行网页设计比赛。 三、活动流程 时间流程： 项目 时间、地点 内容 宣传时间 20XX5月12日～20XX5月22日 海报宣传;电台宣传 报名时间 20XX5月12日～*****年5月22日 各系团总支处 开幕讲座 5月19日(星期四) 晚7点梯形教室一 各系选送准备时间 5月22日～6月9日 各系选送时间 5月10日～6月12日
各系团总支报到何晓莹处 内部预审时间 6月18日(星期三) 晚7点梯形教室一 确定评委，讲评，再自行修改 正式比赛时间 6月25日(星期三) 晚7点梯形教室一 评奖、颁奖 宣传流程 时间：20XX5月12日～20XX5月22日 方式：海报宣传：学生公寓门口、食堂门口、教学楼三号楼1楼; 电台宣传：校园电台宣传(时间、次数) 报名方式 报名时间：20XX5月12日～20XX5月22日 报名对象：全院13、14级学生， 计算机专业只允许报名专业组; 非计算机专业可以报名专业组或非专业组 可以以个人或组队的形式参加比赛，每队人员不能超过3人，不能跨系组队，参赛个人或队伍必须有指导老师， 报名方式：向各系团委直接报名，由各系团委选送参与决赛 比赛方式 专业组： 由信息系团委在规定时间内选送5名作品参赛 非专业组： 由各系分别选送2名作品参赛，利用业余时间搜集资料，存放于机房FTP中，在比赛时使用，作品完成后进行作品展示。 颁奖方式 在正式比赛当日晚间举行颁奖仪式
网页制作技能竞赛题 一、内容为制作一个班级网站。 二、制作环境： Dreamweaver，flash，Photoshop等 三、试题要求： 建立网站，站点文件夹名为考生姓名，网站内文件夹要规范，页面要美观大方，色调统一，主题突出。 四、具体要求： 1、在主页上：要有站点标志（用Photoshop 制作一个简单的标志图形）；用Flash制作 一个文字动画（要求切合网站主题）简单的介绍该站点内容，并插入到网页中。（30分数） 2、具体的设计所需图片和新闻文字示例，可在本机素材中查找或使用考试素材，不得 作出一些侵害别人版权的行为。（30分数） 3、页面要求：网页设计要色彩搭配合理；主页整洁、美观；网页主题突出；浏览便捷， 具有吸引力。（35分数） 4、联系方式和版权信息格式为：（5分数） ? 2014 归XXX所有未经许可不得复制、更改 E-mail：XX@XX.XX 联系电话：（0826）XXXXXXX 设计范围： 1、根据要求设计网页，主题，栏目，导航等自行设计。根据主题页面导航条要设计合 理。 2、可以自己制作图片、动画等以增加网页展示效果。 3、网页分辨率要求：以1280*768显示分辨率为准。 4、网站下建立的目录结构应清晰，除首页外、图片、动画等应放在相应的文件夹下， 并且所有文件、图片、动画、子文件夹名都必须使用英文小写字母。 最后将结果显示在IE浏览器中。 网站从内容上划分可分为六个模块，分别是“动态”、“风采”、“学习”、“交流”、“资源”、“联系”，而网站会再对每个模块进行细化划分，不要求全部做完,但首页上要有体现，具体划分方法可见图1。
图1 网站内容结构图 本次内容模块主要从实用性出发，力图将班级各方面的内容从网页中展示出来，方便班级中的每一个成员浏览，方便以最快的速度从网站中获取所需的内容。 我们从“动态”模块中获得班级的最新资讯，包括活动通知、教务通知及其它的通知，也可以查看网站的最新动态，包括班级微博所显示的内容，同学们的语录，及网站的留言。 从“风采”模块中查看校、班级曾举办或正在举办的活动，可以查看我们班中的每一个成员，或者是小组，甚至是整个班级的荣誉。从“学习”模块中，可以关注到班级专业发展的各种学科的资讯，还有现在上课或课程设计时的学科任务通知，还可以在本模块中的“作业讨论”分支与大家讨论各学习上的知识。从“交流”模块中，我们可以讨论就业、娱乐和情感等方面的内容，形成一个良好的互动的气氛。我们还可以方便地从“资源”模块中获取到在班级成长过程中的竞赛、娱乐、学科、会议、活动等资源。最后，本网站还提供“联系”模块，我们可以以最快的方式获得与各干部、同学、老师的联系方式 三、评比标准。 评分：1、能进行站点的正确设置，制作FLASH动画(30分) 2、网页设计要接近效果图；
网页设计大赛策划书 一、活动目的 为了提高学生网络技术水平，调动学生动手制作网页的热情和创新能力，全面提高学生的综合素质，创造健康向上的网络文化氛围,为推动学院信息化建设和提高学院网站整体建设水平作贡献。 二、参赛对象 信息工程系各专业学生及其他系部爱好网页制作的学生。 三、活动时间及注意事项 1、各参赛队于9月15日之前将参赛作品用u盘或e-mail报送至信息工程系杜毅老师处（602室 e-mail： gaite_1981@126ZZZ）。 2、上交的作品必须标明系部、班级、姓名（本人及其他成员）、作品名称及联系方式（只需组长联系方式）。 3、9月17日组织专业老师进行初评，评选出前10组作品进入决赛。 4、9月24日晚7：00进行决赛。（注：决赛为选手个人现场演示其网页作品并进行现场讲解，每幅作品演示时间不超过5分钟。） 四、活动地点：西区学术报告厅 五、参赛形式
1、比赛作品以个人、班级或者各社团、院系网页内容为主，要求健康充实、有适当的时效性，形式不限。 2、参赛队可以是个人组队，也可以是团体组队（团体组队不得超过3人） 六、比赛规则 （一）网页内容： 1、网页文本撰写应富于文采并体现社团、班级或个人特色； 2、网页内容应符合主题要求，构思新颖，有特别之处； 3、各页面和超级链接应形成清晰合理的框架； （二）浏览效果： 1、页面布局协调合理，整体风格统一且有美感； 2、恰当使用图形和动画，美观且能突出主题； 3、所有背景和色彩搭配合适，有恰当的音效； 注：以上三项应切合主题，且考虑相互之间的和谐统一。 （三）技术要求： 1、图形、动画、声音文件不能太大。整套网页不超过15m，注意提高网上浏览速度； 2、浏览便利，联接处明显，易点击； 3、充分考虑不同浏览器下的浏览效果，且注意分辨率； （四）决赛地点：西区学术报告厅。 七、奖项设置
《网页设计与制作课程设计》 实验报告 院系名称：管理学院专业班级：电子商务XXX 学生姓名： XXX 学号： XXXXXXX 2016年 06 月 一、实验目的 本实验属于设计性实验，在学习完《网页设计与制作》课程的基础上，通过实验学习网页制作的步骤与方法，使用CSS+DIV制作一个简单的网站，能够对网站有一个清晰的认知和规划。进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构。将理论与实践相结合，加深对本课程的理解。 二、实验步骤 1、进行网站整体规划，包括网站主题、栏目以及界面的构思，确定网站结构，形成初步设计思路。 2、设计网站的主页以及栏目，利用CSS+DIV制作网站主页和弹出式导航条菜单，利用JavaScript制作动态效果，并用firework软件对主页进行切图。 3、设计并利用CSS+DIV制作列表页，并用firework软件对列表页进行切图。 4、设计并利用CSS+DIV制作内容页，并用firework软件对内容页进行切图。 5、进行调试和修改已形成最终实验结果。 三、网站设计思路 1、参照“唯品会”“折800”等电商网站，确定网站主题为“轻奢电商”。 2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类等七个一级栏目。其中美妆、服饰、零食、母婴四个栏目含有二级栏目。
3、首页设置品牌热卖、限量抢购等图片展示，并利用Javascript设置用户名和密码的表单验证，在图片之下设置一个新闻列表提供有关网站的最新消息，右侧设置账户、密码的表单验证，并在网页结尾处写上官方微信和版权信息。 4、由主页导航栏上的的在售分类引出列表页，在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。 5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面，主要由图片以及相应的文字介绍组成。 四、网站的核心代码 1、主页