基于HTML5的响应式网站的设计与实现论文正文Word文档下载推荐.docx
《基于HTML5的响应式网站的设计与实现论文正文Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《基于HTML5的响应式网站的设计与实现论文正文Word文档下载推荐.docx（58页珍藏版）》请在冰豆网上搜索。
CSS3；
JavaScript；
MySQLServer；
响应式网站
ABSTRACT
Withthedevelopmentofnetworkandpopularization,theupdatinganduseofallkindsofwebtechnology,nowtimeandcostofbuildingawebsitehasbecomemoreandmorelow,makestheenterprise'
sofficialwebsitegotgreatdevelopment.Fromtheearlysimplewebpages,tolatermarketingtypesite,theentirenetworkmarketingtypesite,andthereactivesitesofthelatestmostmainstream.BasedontheresponseoftheHTML5responsivewebsitecanautomaticallyadapttoscreensize,realizetheendcover,high-enddesign,richinspecificpagetoshowmoreelegant.
HTML5isHTMLnextmajorrevision,nowisstillinthestageofdevelopment.Generalizedwhenaskedaboutitactuallymeans,includingHTML,CSS,andJavaScript,asetoftechnologycombination.Ithopestobeabletoreducethebrowserplug-intoneedtherichnessofnetworkapplicationserviceRIA,suchasAdobeFlash,MicrosoftSilverlight,andthedemandoftheOracleJavaFX,andcanprovidemoreeffectiveenhancethestandardsetofnetworkapplications.HTML5istheemergingWebdevelopmenttechnology,hasgoodsemanticlabels,matchthelatestCSS3canshowauniquedisplayeffect.
ThistopiccombinesthetechniqueofHTML5andtheeclipsedevelopmenttools,MySQLasthedatabaseServer,realizethereactivesitesanditsmanagement,makeenterprisewebsitetoshowmoreelegant,moreconvenientmanagement.
Keywords:
HTML5;
CSS3;
JavaScript;
MySQLServer;
Reactivesites
目录
1.绪论 1
1.1课题研究意义和目的 1
1.2国内外发展现状和趋势 2
1.3本文工作和论文结构 3
1.3.1本文工作 3
1.3.2论文结构 3
2.系统技术理论基础 5
2.1HTML5简介 5
2.2JavaEE简介 7
2.3CSS3概述 9
2.4JSP概述 9
2.5JQuery概述 10
2.6B/S模式概述 11
2.7MySQL概述 12
3.系统需求分析 13
3.1系统基本需求 13
3.2系统用例图 14
3.2.1系统管理员用例 14
3.2.2会员用例 14
3.2.3游客用例 15
4.系统设计与实现 16
4.1系统设计原则 16
4.2系统前端设计与实现 17
4.3系统后台设计与实现 25
4.4数据库设计与实现 28
4.4.1数据库表 28
4.4.2数据库完整性和安全性 33
5.系统测试 35
5.1测试目的 35
5.2测试方法 35
5.3测试过程 36
6.总结和展望 41
参考文献 43
致谢 45
**********************************
1.绪论
1.1课题研究意义和目的
现在网络的发展已呈现商业化、全民化、全球化的趋势。
目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业文件乃至拓展市场、网上销售等，无所不能。
如今网络已成为企业进行竞争的战略手段。
企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。
在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。
网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径[1]。
随着3G、4G的发展和移动通信及WEB3.0技术的提升以及近年来各种移动智能设备的兴起，中国互联网正在往移动方向发展，呈现多元化趋势。
越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等,在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。
企业可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售渠道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。
今天越来越多的人使用智能手机、平板电脑等来查看邮件、浏览网页。
随着移动终端的流行和大趋势的变化，网站设计技术也在随之变化。
为了能够给移动终端客户提供更好的体验与服务，我们可以有很多选择。
例如为移动设备单独重新设计一个网站，这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点[2]。
另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验。
响应式Web设计（ResponsiveWebdesign）的理念是：
页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整[3]。
具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。
无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；
换句话说，页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
1.2国内外发展现状和趋势
响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。
当然专门为手机或者平板电脑设计的网站或者app应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有230多种不同的屏幕尺寸，我们不可能为所有这些常用的230多种屏幕尺寸都设计一个独有的网站或者app应用。
所以响应式设计此时体现出了它的价值所在。
有调查结果显示，移动设备正在逐渐超过PC设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。
设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择和趋势。
EthanMarcotte曾经在AListApart发表过一篇文章"
ResponsiveWebDesign"
，文中援引了响应式建筑设计的概念：
现出现了一门新兴的学科"
响应式架构（responsivearchitecture）"
提出，物理空间应该可以根据存在于其中的人的情况进行响应。
结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；
还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。
已经有公司在生产"
智能玻璃"
：
当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私[4]。
将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。
为什么一定要为每个用户群各自打造一套设计和开发方案？
和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。
显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。
好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的mediaqueries和脚本等。
但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式[5]。
响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。
比如，新的设备不断出来（iPadMini），这让以前的设计想法土崩瓦解。
而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。
1.3本文工作和论文结构
1.3.1本文工作
本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。
阐述了一个基于J2EE基础之上的、应用HTML5，JSP等语言开发的B/S结构的高校办公自动化系统的设计与实现过程。
具体工作如下：
⑴介绍本系统的开发背景和本系统的国内外发展现状；
⑵论述了开发本响应式网站平台开发过程中的理论支持、技
升级会员 