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

摘 要随着网络的发展和普及，各类建站技术的更新与运用，现在搭建一个网站的时间和成本越来越低，使得企业官方网站得到了极大的发展。从早期简单的网页展示，到后来的营销型网站，全网营销型网站，以及目前最新最主流的响应式网站。基于 HTML5 的响应式网站能够自动适应屏幕大小，实现多终端覆盖，设计高端，丰富的特效让页面展示更精美。HTML5 是 HTML 下一个主要的修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务 RIA，如Adobe Flash、Microsoft Silverlight，与 Oracle Java FX 的需求，并且提供更多能有效增强网络应用的标准集。HTML5 是新兴的 Web 开发技术，其拥有良好的语义化标签，搭配最新 CSS3 可以展现出无与伦比的显示效果。本课题结合 HTML5 技术和 eclipse 开发工具，MySQL Server 作为数据库，实现了企业响应式网站及其管理，使得企业官网的展示更精美，管理更便捷。关键词：HTML5； CSS3； JavaScript； MySQL Server； 响应式网站ABSTRACTWith the development of network and popularization, the updating and use of all kinds of web technology, now time and cost of building a website has become more and more low, makes the enterprises official website got great development. From the early simple web pages, to later marketing type site, the entire network marketing type site, and the reactive sites of the latest most mainstream. Based on the response of the HTML5 responsive website can automatically adapt to screen size, realize the end cover, high-end design, rich in specific page to show more elegant.HTML5 is HTML next major revision, now is still in the stage of development. Generalized when asked about it actually means, including HTML, CSS, and JavaScript, a set of technology combination. It hopes to be able to reduce the browser plug-in to need the richness of network application service RIA, such as Adobe Flash, Microsoft Silverlight, and the demand of the Oracle Java FX, and can provide more effective enhance the standard set of network applications. HTML5 is the emerging Web development technology, has good semantic labels, match the latest CSS3 can show a unique display effect.This topic combines the technique of HTML5 and the eclipse development tools, MySQL as the database Server, realize the reactive sites and its management, make enterprise website to show more elegant, more convenient management.Key words: HTML5; CSS3; JavaScript; MySQL Server; Reactive sites 目 录1. 绪论 .11.1 课题研究意义和目的 .11.2 国内外发展现状和趋势 .21.3 本文工作和论文结构 .31.3.1 本文工作 .31.3.2 论文结构 .32. 系统技术理论基础 .52.1 HTML5 简介 .52.2 JavaEE 简介 .72.3 CSS3 概述 .92.4 JSP 概述 .92.5 JQuery 概述 .102.6 B/S 模式概述 .112.7 MySQL 概述 .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这个为他们单独设计的站点 2。另外一种选择就是将网站做成响应式，这种情况下无论客户使用何种终端设备访问网站，网站都会根据终端设备屏幕尺寸自动调整网站显示，使所有客户都能有最好的访问体验。响应式 Web 设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 3。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query 的使用等。无论用户正在使用笔记本还是 iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。1.2 国内外发展现状和趋势响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。当然专门为手机或者平板电脑设计的网站或者 app 应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有 230 多种不同的屏幕尺寸，我们不可能为所有这些常用的 230 多种屏幕尺寸都设计一个独有的网站或者 app 应用。所以响应式设计此时体现出了它的价值所在。有调查结果显示，移动设备正在逐渐超过 PC 设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择和趋势。Ethan Marcotte 曾经在 A List Apart 发表过一篇文章“Responsive Web Design“，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科“响应式架构(responsive architecture)“提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还*3可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产“智能玻璃 “：当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私 4。将这个思路延伸到 Web 设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web 设计同样应该做到根据不同设备环境自动响应及调整。显然，我们无法也无需使用运动传感器或是机器人技术，响应式 Web 设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的 media queries 和脚本等。但是响应式 Web 设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式 5。响应式设计在 2012 年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种 Web 的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以 Web 设计也将迎来更多的响应式设计元素。1.3 本文工作和论文结构1.3.1 本文工作本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。阐述了一个基于 J2EE 基础之上的、应用 HTML5，JSP 等语言开发的 B/S结构的高校办公自动化系统的设计与实现过程。具体工作如下： 介绍本系统的开发背景和本系统的国内外发展现状； 论述了开发本响应式网站平台开发过程中的理论支持、技术基础和实现的关键技术； 对本系统进行了需求分析和功能的设计，确定系统的体系结构；*4 以系统设计原则为标准，完成系统的前端页面、后台管理系统和数据库内容的具体实现过程。1.3.2 论文结构全文共分为六章，具体工作如下： 第一章 绪论。简单阐述了本系统的开发背景和国内外发展现状。 第二章 系统技术理论基础。主要介绍开发系统的过程中用到的技术和理论。第三章 系统需求分析。主要对响应式网站的基本需求进行分析、建模。 第四章 系统设计与实现。按照系统设计原则，对系统前端、后台和数据库进行设计，以及系统的前端页面、后台管理系统和数据库内容的具体实现过程。第五章 系统测试。对系统的兼容性和功能性进行测试。第六章 总结和展望。对当前系统在设计和实现的过程当中遇到的问题和针对这些问题给出的解决的方案做个概要的经验总结，以便今后对类似系统的开发提出良好的可行性的建议。对当前系统的不足加以总结，在今后系统的升级或类似系统的开发时做出修改和调整。*52. 系统技术理论基础2.1 HTML5 简介HTML5 是 HTML 下一个主要的修订版本，现在仍处于发展阶段。目标是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。HTML5 有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一