搜索
Web前端课程设计河北师范大学汇华学院1《Web前端技术课程设计》报告一、实训课题名称二、课题设计目的通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。三、实现功能：用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间通过超链接切换。最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。四、课题设计内容：（1）开发背景（2）网站分析设计部分1）客户需求分析网站栏目划分栏目内容介绍网站拓扑图网页风格创意设计2）网站风格定位3）网站建设方案4）网站效果图（3）网站制作部分1）效果图制作2）网页素材及网站架构制作3）首页制作页面设计4）子页面制作五、体会及下一步学习方向Web前端课程设计河北师范大学汇华学院2教师评语评分项分值得分网站设计实现部分(60分)1.实现.能力(50分)效果图5Logo5Banner5导航条5页面布局与美化5注册验证、登录10图片多媒体运用5程序复杂度5运行效果52.创新能力53.学生答辩5小计60设计报告部分(30分)1.结构完整，条理清晰（封面、任务书、教师评语、目录、正文内容、小结、参考文献）102.独立完成53.描述工具使用恰当：网站拓扑图54.制作步骤描述清晰55.报告内容充实5小计30学习态度部分(10分)考勤5认真完成，勤于思考，积极提问5小计10总计100成绩Web前端课程设计河北师范大学汇华学院3参考方案：目录开发背景…………………………………………………………………………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实训体会…………………………………………………………………………24Web前端课程设计河北师范大学汇华学院4一、开发背景如今已是信息化时代，很多网络中的强盗已经将魔爪伸向我们每一个网民。由此可见关于了解黑客以及黑客攻防方面的知识和新闻是很有必要的。黑客学习网一直致力于面向全球华人提供最新的黑客新闻、最先进的黑客攻防技术，力求将黑客学习网打造成网民每天必看的学习网站！二、前期准备本网站是以信息安全类为主体设计，系统的介绍了黑客攻防的新闻的知识。三、客户需求分析客户需求是指客户创建本网站的目的和对网站建设提出来的特定的要求。了解客户的需求，是建好黑客学习网站的前提。黑客学习网站通过互联网可以更好的开展信息技术的交流、学习和网上报名等活动。这样可以提高网站的访问量、知名度，也是网站业务的重要来源。客户对其拟建的黑客学习网站提出的主要要求有以下几点：1、宣传信息安全的重要性，提高人们对信息安全的认识，增加网站的知名度。2、适时地发布最新黑客新闻和技术，为学习者提供最佳资源。3、在网上发布报名表，引进国内外的爱好者来此学习交流。Web前端课程设计河北师范大学汇华学院54、网站上要设有爱好者交流留言板，用户可以网站新闻和技术文章进行评论和留言交流，对于网站的改进和更新很有帮助。四、网站风格定位网站风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括站点的logo、标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字、内容价值等诸多元素。可以从三个方面对长白山旅游网进行定位。1、色彩网站的色彩是浏览者整体的视觉感官，如果网站的色彩具有一致性，会使网站看起来美观，使浏览者不容易对内容混淆，增加了浏览的简洁与方便。从而更能衬托网站的主题，若色彩能与主题合理搭配，将会增加网站的易读性。黑客学习网站选定的主题色是黑灰色。因为若是要打开一个黑客方面的网站，每个人的头脑中肯定都是黑色或者灰色，即为较暗淡神秘的颜色。能给吸引更多用户并给用户一种神秘感，很适合黑客学习的网站。网站中除了采用黑灰色系外，还和淡蓝色、白色搭配，使网站产生一种舒适的气氛，使人可以长时间驻留其间，眼睛也不会觉得疲劳。2、排版Web前端课程设计河北师范大学汇华学院6网页是网站构成的基本元素。当浏览者轻点鼠标，在网站中漫游时，一幅幅精彩的网页会呈现在面前。那么，决定网页精彩元素是什么?色彩的搭配、文字的变化、图片的处理等式不可忽略的因素，除了这些外，还有一个非常重要的元素——网页排版。黑客学习网站采用的是“厂字型”排版形式。最上面是网站的logo。接下来是网站的menu，中心内容分为两部分：一是左侧meun二是右侧显示menu的主要内容。最下面的是网站的一种基本信息、联系方式、版权声明等。这种版式的优点是网页结构清晰，主次分明，但弱点是规矩呆板，信息量少。针对这个弱点，该网站在细节上做了一些处理。例如：对于黑客新闻以链接到另一个网页的形式，并将所有新闻的超级链接置于此网页，增大的信息量。logo设置较为个性并动态显示，使整个页面显得更加生动富有特色。3、特效网站的特效就是让网页看起来生动活泼的各种应用，如Flash、JavaScript等。五、网站建设方案在黑客学习网站的建设中，前期准备至关重要的，要有明确的做网站的根本目的。该黑客学习网站通过黑客的介绍、黑客新闻以及黑客攻防技术的宣传，大大的提高了网站的知名度。由于信息化时代Web前端课程设计河北师范大学汇华学院7的很多漏洞，大多数人没有全面的意识，且很大一部分人对黑客十分感兴趣，因此黑客学习网站的存在想必给很爱好者们大量的信息量和学习资源，也为同爱好者或是高手提供了交流平台，从而推动了信息化时代的进一步发展，也为网民提供了更多的学习平台。为了充分发挥黑客学习网站的作用，就需要对网站的内容进行系统规划。六、网页风格创意设计该网站页面颜色采用黑灰色为主，淡蓝色为辅。在此色调的基础上对黑灰色进行有机搭配，同时还要适当的辅以淡蓝色。通过颜色传达了新颖、神秘、安全、技术等元素，从而使网站产生了一种知识海洋的氛围。七、网站栏目划分1、网站首页2、黑客简介3、等级区分4、黑客新闻5、国内黑客网站6、相关电影资源7、爱好者报名表8、黑客交流版八、栏目内容介绍1、网站首页：本栏目为导航页面，为吸引用户在main中放置与黑客相关视频。2、黑客简介：本栏目中介绍黑客的基本定义，并对黑客名字的来源作以详细的介绍。4、黑客分类：本栏目中介绍黑客的分类，3、等级区分：本栏目主要是让用户在对黑客有了简单认识下区分黑客的等级，提升在用户心中的荣耀感。4、黑客新闻：该栏目具体放置的为有关黑客的最新新闻以及其中的技术。5、国内黑客网站：该栏目的主要目的是让用户了解国内四大有名的黑客网站：中国黑客联盟，中国红客，中国第八军团，华夏联盟。6、相关电影资源：该栏目主要是为用户提供有关黑客的电影。Web前端课程设计河北师范大学汇华学院87、爱好者报名表：该栏目主要是让爱好者通过报名的方式成为我们中的一员，进行更进一步的学习。8、黑客交流版：该栏目主要用来让黑客以及爱好者对黑客技术文章或者新闻等方面在网上进行评论交流。九、网站拓扑图相关电影黑客新闻黑客分类等级区分黑客交流版爱好报名表黑客简介网站首页国内黑客网站主页中国黑客联盟中国红客中国第八军团华夏联盟蓝客红客黑客十、实训目的1．更好的熟悉和掌握网站建设的基本流程和技术规范；Web前端课程设计河北师范大学汇华学院92．运用flash动画制作软件设计网页中动画的知识；3．巩固运用Fireworks图像处理软件进行网页中图形制作4．综合使用Dreamweaver、Flash、Photoshop、Css3Menu四个软件完成网站的建设，可以独立构思并设计出内容完整图文并茂的网站。5．具备独立撰写实训报告等科技文件的基本能力；6．在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力。十一、实训任务1．站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。2．进行主页设计。构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。3．网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。包括版面设计和图形设计、内容录入等。4．动画设计。主页动画设计和其余页面动画设计，充分运用Web前端课程设计河北师范大学汇华学院10所掌握技术，效果好。5．综合优化。链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）6．网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。十二、实训项目1、网站基本介绍网站的主题是:游览天下行，快乐共分享。背景图片均为国内外知名旅游地图片，体现网站主题。图片和文字部分采用浮动形式，让网站看起来更生动，更有吸引力；导航栏采用超链接，链接到相关网站，同时插入表单，设置了登陆界面和主页的链接。还插入了音乐，轻柔舒缓，仿佛置身于游览圣地中。Web前端课程设计河北师范大学汇华学院112、报名界面：Web前端课程设计河北师范大学汇华学院123、保存的文件位置：Web前端课程设计河北师范大学汇华学院134、首页展示效果图：