Web前端技术实训报告书

《Web前端技术实训》任务书一、实训课题名称

1、教育类网站的设计与制作

2、商业类网站的设计与制作

3、旅游休闲类网站的设计与制作

4、体育健身类网站的设计与制作

二、课题设计目的

通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。

培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web 前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。

三、任务要求：

用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。

功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner （简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间通过超链接切换。

最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。

四、课题设计报告书要求：

1、课题设计报告书第一页为封面，封面上写清楚标题、班级、姓名、指导老师、

完成日期。

2、课题设计报告书第二页为本任务书。

3、课题设计报告书第三页为教师评语。

4、课题设计报告书第四页为目录。

5、课题设计报告书第五页开始为具体内容：

（1）开发背景

（2）网站分析设计部分1）客户需求分析

2）网站风格定位

3）网站建设方案

●网页风格创意设计

●网站栏目划分

●栏目内容介绍

●网站拓扑图

4）网站效果图

（3）网站制作部分

1）效果图制作

2）网页素材及网站架

构制作

3）首页制作页面设计

4）子页面制作

6、课题设计报告书最后一页是本次课程设计的小结和参考文献。

7、字数要求不少于3000字。

8、打印纸张使用B5纸，页边距设为上、下、左2厘米，右1.5厘米，

五、如有雷同，将作不及格处理。

六、完成时间：2012.1.5

教育类网站设计报告书——宁海职业技术学院网

教师评语

教师：

2012.1．5.

一前言 ........................................................................................................................................ - 3 -

1.1客户需求分析 ............................................................................................................... - 4 -

1.2网站风格定位 ............................................................................................................... - 4 -

1．色彩： .................................................................................................................... - 4 -

2．排版 ........................................................................................................................ - 5 -

3．特效 ........................................................................................................................ - 5 - 二网站设计前期准备 ................................................................................................................ - 5 -

2.1网站风格定位 ............................................................................................................... - 5 -

1．页面风格创意设计 ................................................................................................ - 6 -

2．网站栏目划分 ........................................................................................................ - 6 -

3.特效 .......................................................................................................................... - 6 -

三、网站拓扑图 .......................................................................................................................... - 6 -

四、网站效果图 .......................................................................................................................... - 7 -

五、中期网站制作 .................................................................................................................... - 10 -

（一）网站首页制作 ........................................................................................................ - 10 -

1、首页logo效果： ................................................................................................................ - 10 -

2、站内公告效果： .................................................................................................................. - 10 -

3、站内新闻效果图： .............................................................................................................. - 10 -

4、登陆效果图： ...................................................................................................................... - 11 -

（二）网站搭建过程 ........................................................................................................ - 13 -

三、制作网站的Logo动画 .............................................................................................. - 15 -

六、网站建设心得小结 ............................................................................................................ - 22 -

七、参考文献 ............................................................................................................................ - 24 -

一前言

教育类网站设计报告书——宁海职业技术学院网