Web前端技术课程实训报告.doc

《Web前端技术课程设计》报告 实训课题名称  课题设计目的 通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。 实现功能： 用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。 功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间通过超链接切换。 最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。 课题设计内容： （1）开发背景 （2）网站分析设计部分 1）客户需求分析 网站栏目划分 栏目内容介绍 网站拓扑图 网页风格创意设计 2）网站风格定位 3）网站建设方案 4）网站效果图 （3）网站制作部分 1）效果图制作 2）网页素材及网站架构制作 3）首页制作页面设计 4）子页面制作 五、体会及下一步学习方向 教师评语 评分项 分值 得分 网站 设计 实现 部分 (60分) 1.实现.能力(50分) 效果图 5 Logo 5 Banner 5 导航条 5 页面布局与美化 5 注册验证、登录 10 图片多媒体运用 5 程序复杂度 5 运行效果 5 2. 创新能力 5 3. 学生答辩 5 小计 60 设计 报告 部分 (30分) 1. 结构完整，条理清晰（封面、任务书、教师评语、目录、正文内容、小结、参考文献） 10 2. 独立完成 5 3. 描述工具使用恰当：网站拓扑图 5 4. 制作步骤描述清晰 5 5. 报告内容充实 5 小计 30 学习态度部分(10分) 考勤 5 认真完成，勤于思考，积极提问 5 小计 10 总计 100 成绩 参考方案： 目录 开发背景…………………………………………………………………………4 前期准备…………………………………………………………………………4 客户需求分析……………………………………………………………………4 网站风格定位……………………………………………………………………5 色彩………………………………………………………………………………5 排版………………………………………………………………………………5 特效……………………………………………………………………………....6 网站建设方案……………………………………………………………………6 网页风格创意设计………………………………………………………………7 网站栏目划分……………………………………………………………………7 栏目内容介绍……………………………………………………………………8 网站拓扑图………………………………………………………………………9 实训目的…………………………………………………………………………10 实训任务…………………………………………………………………………10 实训项目…………………………………………………………………………11 网站基本介绍……………………………………………………………………11 报名界面…………………………………………………………………………10 保存的文件位置…………………………………………………………………11 首页展示效果图…………………………………………………………………12 导航条展示效果图………………………………………………………………13 留言板表格布局…………………………………………………………………14 网站版权的展示图………………………………………………………………14 国内黑客网站界面展示图………………………………………………………15 黑客新闻界面展示图……………………………………………………………16 电影展示图………………………………………………………………………18 黑客简介界面展示图……………………………………………………………20 黑客区