Web前端技术课程实训报告

Web前端技术课程

实训报告

1

2020年4月19日

《Web前端技术课程设计》报告

一、实训课题名称

二、课题设计目的

经过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。

三、实现功能：

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

功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入

2

2020年4月19日

项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间经过超链接切换。

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

四、课题设计内容：

（1）开发背景

（2）网站分析设计部分

1）客户需求分析

●网站栏目划分

●栏目内容介绍

●网站拓扑图

●网页风格创意设计

2）网站风格定位

3）网站建设方案

4）网站效果图

（3）网站制作部分

1）效果图制作

2）网页素材及网站架构制作

3

2020年4月19日

3）首页制作页面设计

4）子页面制作

五、体会及下一步学习方向

教师评语

4

2020年4月19日

参考方案：

目录

开发背景 (4)

前期准备 (4)

客户需求分析 (4)

网站风格定位 (5)

色彩 (5)

排版 (5)

特效 (6)

网站建设方案 (6)

网页风格创意设计 (7)

网站栏目划分 (7)

栏目内容介绍 (8)

5

2020年4月19日