基于HTML5的响应式网站的设计与实现(论文)正文

摘要随着网络的发展和普及，各类建站技术的更新与运用，现在搭建一个网站的时间和成本越来越低，使得企业官方网站得到了极大的发展。从早期简单的网页展示，到后来的营销型网站，全网营销型网站，以及目前最新最主流的响应式网站。基于HTML5的响应式网站能够自动适应屏幕大小，实现多终端覆盖，设计高端，丰富的特效让页面展示更精美。HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。本课题结合HTML5技术和eclipse开发工具，MySQLServer作为数据库，实现了企业响应式网站及其管理，使得企业官网的展示更精美，管理更便捷。关键词：HTML5；CSS3；JavaScript；MySQLServer；响应式网站ABSTRACTWiththedevelopmentofnetworkandpopularization,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.绪论..............................................11.1课题研究意义和目的...................................11.2国内外发展现状和趋势.................................21.3本文工作和论文结构...................................31.3.1本文工作...........................................31.3.2论文结构...........................................32.系统技术理论基础..................................52.1HTML5简介...........................................52.2JavaEE简介..........................................72.3CSS3概述............................................92.4JSP概述.............................................92.5JQuery概述.........................................102.6B/S模式概述........................................112.7MySQL概述..........................................123.系统需求分析.....................................133.1系统基本需求........................................133.2系统用例图..........................................143.2.1系统管理员用例....................................143.2.2会员用例..........................................143.2.3游客用例..........................................154.系统设计与实现...................................164.1系统设计原则........................................164.2系统前端设计与实现..................................174.3系统后台设计与实现..................................254.4数据库设计与实现....................................284.4.1数据库表..........................................284.4.2数据库完整性和安全性..............................335.系统测试.........................................355.1测试目的............................................355.2测试方法............................................355.3测试过程............................................366.总结和展望.......................................41参考文献................................................43致谢..................................................45**********************************11.绪论1.1课题研究意义和目的现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业文件乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以信息技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径[1]。随着3G、4G的发展和移动通信及WEB3.0技术的提升以及近年来各种移动智能设备的兴起，中国互联网正在往移动方向发展，呈现多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等,在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一致体验这将成为了整个网页设计行业的一个新挑战。企业可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售渠道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。今天越来越多的人使用智能手机、平板电脑等来查看邮件、浏览网页。随着移动终端的流行和大趋势的变化，网站设计技术也在随之变化。为了能够给移动终端客户提供更好的体验与服务，我们可以有很多选择。例如为移动设备单独重新设计一个网站，这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点[2]。另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验。响应式Web设计(ResponsiveWebdesign)的理念是：页面的设计与开发应当**********************************2根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整[3]。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。1.2国内外发展现状和趋势响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。当然专门为手机或者平板电脑设计的网站或者app应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有230多种不同的屏幕尺寸，我们不可能为所有这些常用的230多种屏幕尺寸都设计一个独有的网站或者app应用。所以响应式设计此时体现出了它的价值所在。有调查结果显示，移动设备正在逐渐超过PC设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备