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分)(50分)效果图5Logo5Banner5导航条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黑客区别界面展示图……………………………………………………………21黑客分类界面展示图……………………………………………………………22实训中的问题和解决办法………………………………………………………23实训体会…………………………………………………………………………24一、开发背景如今已是信息化时代,很多网络中的强盗已经将魔爪伸向我们每一个网民。由此可见关于了解黑客以及黑客攻防方面的知识和新闻是很有必要的。黑客学习网一直致力于