web前端毕业设计论文剖析

毕业论文题目：响应式企业网站设计与实现学生姓名：罗智刚学号：1202012132专业班级：B12计算机科学与技术2班指导教师：李莉企业导师：林志宏二级学院：电气与信息工程学院2015版摘要在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越被人们接受，并且融入我们的生活。在2015年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。本论文主要围绕写意集团的HTML5响应式网站为开发主题，用到的也是最必备的三个技能元素，在布局页面时，用HTML将元素进行定义，布局基础布局；css对展示的HTML元素布局进行定位渲染，然后利用Javascript或者jQuery实现相应的效果和交互。虽然这么看起来很简单，但这里需要认真了解的东西很多。在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能等各种问题。分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及HTML5响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析实现中的难点和重点；关键词：HTML5;CSS3;响应式;javascript;网站美化;交互设计abstractInthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasalsobeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5comparedtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts.ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofskill,inthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,thenuseJavascriptorjQuerytoachievetheappropriateeffectsandinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithcompatibility,performanceandsoon.Analyzeandsolvetechnicalproblemsinimplementationof:TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities;Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign目录第一章绪论.....................................................11.1本课题研究的背景和目的..........................................11.2国内外HTML5响应式企业网站建设的状况............................11.3本章小结........................................................2第二章前端开发及相关技术.........................................32.1HTML5前端开发环境.............................................32.2HTML5前端开发工具.............................................32.3HTML5前端开发相关技术.........................................32.3.1javascript简介............................................32.3.2javascript基本特点........................................42.3.3css简介...................................................42.3.4jQuery.....................................................52.4本章小结.......................................................5第三章前端布局分析与设计..........................................63.1前端总体开发流程与设计.........................................63.1.1分层开发...................................................63.1.2代码编写...................................................63.1.3内部测试与后续优化.........................................63.2前端UI设计....................................................73.2.1模块分布...................................................73.2.2颜色配置...................................................73.2.3css元素...................................................83.3交互设计与UI..................................................93.4网站结构布局与设计.............................................93.5.1网站首页结构.............................................93.5.2主题鲜明，富有特色......................................103.5网站前台页面设计..............................................103.5.1首页......................................................103.5.2其余子页面................................................103.7本章小结......................................................10第四章主要功能的实现.............................................114.1界面设计......................................................114.2具体设计文档..................................................114.3前台新闻文摘显示..............................................114.3.1网站装饰风格..............................................114.3.2网站的链接结构............................................114.4可视化设计....................................................114.5具体实现技术..................................................124.5.1css在“写意集团响应式企业官网”中的应用实例..............124.6本章小结......................................................13第五章总结......................................................73致谢..............................................................73参考文献..........................................................75响应式企业网站设计与实现1第一章绪论1.1本课题研究的背景和目的如今的互联网已经渗透到了我们生活的每一个层面，网站的内容越来越丰富全面，各大浏览器商也在竞相的开发各种各样的新的功能，供开发者进行开发构建出更好的用户体验，以此来满足各种不同需求的浏览者。随机计算机的这些技术的飞速生长，手机的上网率高于传统PC，而在手机端上，传统网站又难以做到兼容所有的设备尺寸，越来越多的商家的传统门户官网已经不能满足用户的体验，各大商家大企业都开始重构新的HTML5响应式网站，以求将自己的产品信息和企业动态，更直接的展示给用户，并且通过丰富的交互去优化与用户沟通的过程。目前很多的企业已经建立起了自己的响应式官网。这些网站的建立使得企业可以突破传统的PC媒介，在移动网络上开辟属于自己的新天地。用户能在手机上，随时随地就能看到企业的最新动态，可以更好的利用用户的碎片时间去关注企业，网络之所以为网，也正是因为他具有超时空性。人们无论在哪都应该可以进行访问，体验空间层面上带来的开放性。整个官网设置多个板块与分页面，分别放置相关内容，不同板块的信息相互独立。交互上更多是体验在CSS3的新属性带给用户的新体验，用户在与官网进行交互的方式更加丰富与精彩了。与传统官网相比，响应式网站不外乎也是企业介绍，新闻发布，产品介绍一类等。为何还要花时间精力和人力去建立和维护网站呢？是正如上面所说：内容更加多姿多彩，