响应式的hml5站点设计与实现__开题报告

文献综述

(一) HTML5

从2010年开始，HTML 5与CSS 3就一直是互联网技术中最受关注的两个话题。HTML 5的使用将弥补上一代HTML的不足，同时实现富Web应用的本地化，使浏览器逃离Flash和Silverlight等富客户端插件的羁绊，加上CSS 3的配合来简化CSS的编程模型，满足当前Web应用日益增长的高性能、高用户体验的需求，从而基于HTML 5与CSS 3的网站开发效率提高，结构清晰，关键是能在不同浏览器上实现统一的展现形式。

    

HTML5 尝试改变这些。当它完成时，新标准将在改善的互动、多媒体和定位中提供多个Tag和API。随着由实验支持的HTML5特征被加入到目前盛行的Web 浏览器中，一些开发者已开始表示出对这新型现代的HTML的兴趣，而不再依赖于像Flash, QuickTime和Silverlight这类专有插件。HTML 5自2010年正式推出，它立刻受到世界各大浏览器的热烈欢迎与支持，微软为了能够支持HTML 5在IE9上做了标准的改进 ，通过对Internet Explor、Google、Firefox、Safari、Opera等主要的Web浏览器的调 查，发现他们都采取了相关措施来支持HTML5。它是新一代的Web技术标准，在一些核心上做了改进从而改变了我们建站和使用互联网的方式。  HTML5的主要特性： 

本地存储  HTML 5针对本地存储提供了两个重要内容-Web Storage与本地数据库。其中Web Storage是对HTML 4中的cookies存储机制的一个改善。由于cookies存在很多的不足之处。Web Storage依然是在Web上存储的功能，分为sessionStorage临时保存和locaStorage本地磁盘保存两种。HTML5大大丰富了客户端本地可以存储的内容，新增的很多内容可以实现原本必须保存在服务器上的数据现在只需要存放在客户端本地，这一变化很大程度上提高了Web应用程序的性能，减轻了服务器的负担，HTML 5的本地数据库功能就是为了完成这一重要的使命。HTML 5内置了一个可以通过SQL语言来访问的数据库从而就可以实现访问本地文件一样地轻松对内置数据库直接访问。 

2. 本地缓存  在HTML 5中新增加了一个本地缓存机制的API，为了让Web应用程序在离线状态也能正常运行，就必须把构成该应用程序的所有资源文件，例如HTML文件、CSS

文件、java script脚本文件放在本地缓存中，这样就能使得Web应用程序在离线状态也能正常运行。 

绘制图形  在HTML 5中新增加了canvas元素以及伴随这个元素的一套编程接口—Canvas API。有这样一个新的元素和一套新的接口就可以不用Flash或者其他的插件就能够实现在网页上涂鸦。HTML 5让浏览器原生地支持相关的标记语言。内容创作者可以把用MathML(用于渲染公式)和SVG(用于渲染可扩展矢量图形)编写的标记直接嵌入到HTML 5网页中。  

多媒体播放  在HTML 5出现之前，在网页上展示视频、音频和动画必须要用到Flash或者其他的第三方插件，但是现在HTML 5提供了音频和视频的标准接口，通过相关技术播放视频、音频等多媒体不再需要安装插件了。  

5. 获取地理位置  Geolocation API是一套用来获取用户的地理位置的编程接口，如果浏览器能够支持以及设备具备定位功能就可以直接使用HTML 5的这一套API来获取当前位置信息。  

6. 表单控制的优化  在这新一代HTML中，搜索框，文本输入和其它类型的字段可以获得更好的控制，如焦点处理，数据验证，与其它页血元素的交互，通过电了邮件发送等，大大地减少了用户的烦扰。

(二)CSS3 & 响应式布局

这里简单介绍下响应式布局的三个概念：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）原本都是指现有的一些技术手段，但在做响应式设计研究的过程中，这些概念还是有更广泛的意义，设计师也应该有所了解：

流动布局：原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念：在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。

媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。

弹性图片：伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是Ethan Marcotte提出设计产品时提出的概念，我们在后续的研究中可以以图片为典型，扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式研究。

响应式设计的概念从提出至今，一直不断蔓延扩散，并得到各方认可的主要原因：

1、外部环境：快速增长且日趋加剧的可联网设备的多样化，让现今已不再有标准的屏幕尺寸；

2、自身特色：严格定义的响应式一般是指响应式Web设计，而Web凭借其特有的灵活性和可塑性，可以适应各种尺寸和配置的设备，可以无处不在。

3、内部需求：响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可以更灵活地去适配更多设备，尤其是现在移动设备大爆棚的时代。

目前大多网站中选择成为响应式的设计模式主要有两种：

1、基于设备：通过主流设备的类型及尺寸来确定布局断点（break point），设计多套样式，再分别投射到响应的设备。 

2、内容优先：根据内容的可读性、易读性作为确定断点（break point）的标准，即在对内容进行布局设计的时候，可以无视设备，有内容决定何时需要采用不同的呈现方式。

个人还是倾向内容优先的方式，这是真正符合响应式设计核心策略的模式，也是对未来友好的方式。 从过去基本上是基于pc的几个尺寸，选择最佳的标准尺寸去设计页面；到现在移动设备已经玲琅满目，同时电视、穿戴设备也慢慢开始起来，已经不再有固定的尺寸；未来，将是更加无法预知的设备环境；那么什么才是王道呢？——就是内容本身！ 变化总是来得快且狠，我们要做的就是抓住那根可以贯通全局的线！

在内容优先的策略中，有三点思维模式可以贯穿整个响应式设计的过程：

1、忘记设备：因为我们不知道用户会用什么样的设备来访问网站，因此，我们必须尽可能地把所有情况都囊括进来；所有的东西（布局、组件等）都能与不同类型的设备和平台相兼容。

2、优雅降级：虽然这个概念一开始是技术实现上对新的特性在老的浏览器上无法很好实现时的折中做法，但在此仅想表达在对布局做弹性设计时，内容从宽到窄的变化呈现，必须经过重重筛选，留存最核心的内容块。这种模式非常适合对已存在的pc页面产品进行响应式设计改造。

3、渐进增强：此概念是在Steven在2003年的SXSW活动上提出的。在本质上来说，就是把优雅降级倒过来：先创建一个基本体验，侧重让内容以一种简介的方式来展现；之后，在保证基本体验的前提下，开始着手做有关显示的布局和交互。而在此，也借用来说明下对于响应式设计的内容策略中，内容从窄到宽的变化呈现中，可以让内容的丰富度也相应地有所增加。这种模式与移动优先策略是相匹配的。

(三) 硬件加速促进了标准的发展和应用

 

  在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome 18+，Firefox 4+，IE 9+，Safari 5.1+，Opera 12+，360 安全浏览器 6.0 超速版，360极速浏览器，搜狗浏览器（默认使用兼容模式打开，需切换到高速模式），QQ 浏览器（默认使用兼容模式打开，需切换到极速模式）。傲游浏览器的最新版（Maxthon v4.0.0.2000）依然不支持硬件加速。从系统平台的角度而言，Linux 要远远落后于 Windows 和 Mac OS。手机系统情况比较乐观，主流的智能手机系统 iOS、Android 以及 Windows Phone 上的原生浏览器都已经支持硬件加速，Android 4.0+上的 Chrome在硬件加速方面更是超越了原生浏览器的表现。但有些显卡在硬件加速的支持上有比较明显的问题，如被多款笔记本使用的“Intel(R) HD Graphics 3000”在 Windows 7 系统上使用硬件加速容易崩溃；“Nvidia Geforce 7025 / Nvidia nForce 630a”显卡在 Windows XP 系统上开启硬件加速多次被报告导致蓝屏等等

互联网巨头重视HTML5的发展 

 目前，包括国内的360，新浪，腾讯，淘宝等公司，国外的Google，Facebook，Twitter，Youtobe，Adobe均高度重视HMTL5相关业务的发展，微软公司推出的IE10浏览器对HTML5的支持度已经由IE9的40%提升到68%。

二、^范文提纲

一、绪论

（一）本课题国内研究现状

（二）本课题国外研究现状

二、研究内容及相关技术

（一）java script

（二）ECMAScript6

（三）HTML5

（四）CSS3

（五）LESS

（六）Bootstrap

（七）VUEJS

（八）ICONFONT

三、系统设计

（一）浙江大学首页重构

（二）PC浏览器下的展示效果   （三）iPad/Android Pad下的展示效果

（四）iPhone/Android Phone/Win Phone 下的展示效果 

四、系统详细设计及实现

 （一）基于media Query在不同分辨率下的展示

 （二）选项卡的切换

 （三）下拉列表

 （四）background切换

五、总结与展望

    （一）总结

    （二）展望

六、参考文献

七、致谢

八、软件使用说明书

软件概述

运行环境

使用指南

三、参考文献

[1]  Adam Freeman、 The Definitive Guide To HTML5、Apress 、2014年1月

[2]  唐俊开、HTML5移动Web开发指南、 电子工业出版社2012年3月

[3]  Elizabeth，Castro，Bruce，Hyslop、HTML5与CSS3基础教程（第8版）、人民邮电出版社、2014年5月 

[4] 廖伟华、图解CSS3：核心技术与案例实战、 机械工业出版社、2014年7月

[5] 谢郁、CSS高效开发实战 CSS 3 LESS SASS Bootstrap Foundation、 电子工业出版社、2014年9月

[6] Stephen Woods、HTML5触摸界面设计与开发、人民邮电出版社、2014年1月

[7] 徐涛、Web开发技术丛书：深入理解Bootstrap、机械工业出版社、2014年8月

[8] 阮一峰 著、ES 6 标准入门（第2版）、电子工业出版社、2015年12月

[9]  Nicholas C.Zakas、Professional java script for Web Developers 3rd Edition、 人民邮电出版社、2012年3月

[10] 曾探、java script设计模式与开发实践、人民邮电出版社、2015年5月

[11]  Nicholas C. Zakas、编写可维护的java script、 人民邮电出版社、2013年3月