文档介绍：该【Web前端技术课程实训报告 】是由【儒林】上传分享，文档一共【29】页，该文档可以免费在线阅读，需要了解更多关于【Web前端技术课程实训报告 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。Web前端技术课程实训报告Web前端课程设计河北师范大学汇华学院2《Web前端技术课程设计》报告实训课题名称Web前端课程设计河北师范大学汇华学院29课题设计目的通过实训,应使学生巩固所学知识,把所学的理论知识运用到网站制作实践中。培养学生动手能力,将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来,在实训环节中进行运用。为以后学****动态网站打下基础。实现功能:用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站,要求包括一个首页、至少三个子网页,按照网站开发流程,先做网页效果图,然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能,尔后进行网站测试,并编制出各阶段必要的文档。在编写文档时,必须严格遵照要求,最后提交文档。功能要求:该网站首页必须包括网站logo、导航条(带有鼠标事件变化效果)、banner(简单flash动画)、图片、多媒体运用、文字等主要信息展示;子网页包括用户注册(带有表单输入项本地验证功能)、登录(用户名和密码非空Web前端课程设计河北师范大学汇华学院29Web前端课程设计河北师范大学汇华学院5教师评语评分项分值得分网站设计实现部分(60分)(50分)效果图5Logo5Banner5导航条5页面布局与美化5注册验证、(30分),条理清晰(封面、任务书、教师评语、目录、正文内容、小结、参考文献):(10分)考勤5认真完成,勤于思考,积极提问5小计10总计100Web前端课程设计河北师范大学汇华学院8成绩参考方案:目录开发背景…………………………………………………………………………4前期准备…………………………………………………………………………4客户需求分析……………………………………………………………………4网站风格定位……………………………………………………………………5色彩………………………………………………………………………………5排版………………………………………………………………………………5特效……………………………………………………………………………....6网站建设方案……………………………………………………………………6网页风格创意设计………………………………………………………………7网站栏目划分……………………………………………………………………7栏目内容介绍……………………………………………………………………8网站拓扑图………………………………………………………………………9实训目的…………………………………………………………………………10实训任务…………………………………………………………………………10实训项目…………………………………………………………………………11网站基本介绍……………………………………………………………………11Web前端课程设计河北师范大学汇华学院8报名界面…………………………………………………………………………10保存的文件位置…………………………………………………………………11首页展示效果图…………………………………………………………………12导航条展示效果图………………………………………………………………13留言板表格布局…………………………………………………………………14网站版权的展示图………………………………………………………………14国内黑客网站界面展示图………………………………………………………15黑客新闻界面展示图……………………………………………………………16电影展示图………………………………………………………………………18黑客简介界面展示图……………………………………………………………20黑客区别界面展示图……………………………………………………………21黑客分类界面展示图……………………………………………………………22实训中的问题和解决办法………………………………………………………23实训体会…………………………………………………………………………24一、开发背景如今已是信息化时代,很多网络中的强盗已经将魔爪伸向我们每一个网民。由此可见关于了解黑客以及黑客攻防方面的知识和新闻是很有必要的。黑客学****网一直致力于面向全球华人提供最新的黑客新闻、最先进的黑客攻防技术,力求将黑客学****网打造成网民每天必看的学****网站!二、前期准备 Web前端课程设计河北师范大学汇华学院9本网站是以信息安全类为主体设计,系统的介绍了黑客攻防的新闻的知识。三、客户需求分析客户需求是指客户创建本网站的目的和对网站建设提出来的特定的要求。了解客户的需求,是建好黑客学****网站的前提。黑客学****网站通过互联网可以更好的开展信息技术的交流、学****和网上报名等活动。这样可以提高网站的访问量、知名度,也是网站业务的重要来源。客户对其拟建的黑客学****网站提出的主要要求有以下几点:1、宣传信息安全的重要性,提高人们对信息安全的认识,增加网站的知名度。2、适时地发布最新黑客新闻和技术,为学****者提供最佳资源。3、在网上发布报名表,引进国内外的爱好者来此学****交流。4、网站上要设有爱好者交流留言板,用户可以网站新闻和技术文章进行评论和留言交流,对于网站的改进和更新很有帮助。四、网站风格定位网站风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括站点的logo、标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字、内容价值等诸多元素。可以从三个方面对长白山旅游网进行定位。Web前端课程设计河北师范大学汇华学院111、色彩网站的色彩是浏览者整体的视觉感官,如果网站的色彩具有一致性,会使网站看起来美观,使浏览者不容易对内容混淆,增加了浏览的简洁与方便。从而更能衬托网站的主题,若色彩能与主题合理搭配,将会增加网站的易读性。黑客学****网站选定的主题色是黑灰色。因为若是要打开一个黑客方面的网站,每个人的头脑中肯定都是黑色或者灰色,即为较暗淡神秘的颜色。能给吸引更多用户并给用户一种神秘感,很适合黑客学****的网站。网站中除了采用黑灰色系外,还和淡蓝色、白色搭配,使网站产生一种舒适的气氛,使人可以长时间驻留其间,眼睛也不会觉得疲劳。2、排版网页是网站构成的基本元素。当浏览者轻点鼠标,在网站中漫游时,一幅幅精彩的网页会呈现在面前。那么,决定网页精彩元素是什么?色彩的搭配、文字的变化、图片的处理等式不可忽略的因素,除了这些外,还有一个非常重要的元素——网页排版。黑客学****网站采用的是“厂字型”排版形式。最上面是网站的logo。接下来是网站的menu,中心内容分为两部分:一是左侧meun二是右侧显示menu的主要内容。最下面的是网站的一种基本信息、联系方式、版权声明等。这种版式的优点是网页结构清晰,主次分明,但弱点是规矩呆板,信息量少。针对这个弱点,该网站在细节上做了一些处理。例如:对于黑客新闻以链接到另一个网页的形式,并将所有新闻的超级链接置于此网页,增大的信息量。logo设置较为个性并动态显示,使整个页面显得更加生动富有特色。Web前端课程设计河北师范大学汇华学院123、特效网站的特效就是让网页看起来生动活泼的各种应用,如Flash、JavaScript等。五、网站建设方案在黑客学****网站的建设中,前期准备至关重要的,要有明确的做网站的根本目的。该黑客学****网站通过黑客的介绍、黑客新闻以及黑客攻防技术的宣传,大大的提高了网站的知名度。由于信息化时代的很多漏洞,大多数人没有全面的意识,且很大一部分人对黑客十分感兴趣,因此黑客学****网站的存在想必给很爱好者们大量的信息量和学****资源,也为同爱好者或是高手提供了交流平台,从而推动了信息化时代的进一步发展,也为网民提供了更多的学****平台。为了充分发挥黑客学****网站的作用,就需要对网站的内容进行系统规划。六、网页风格创意设计Web前端课程设计河北师范大学汇华学院12