响应式企业网站设计与实现毕业论文.docx

响应式企业网站设计与实现毕业论文.docx

《响应式企业网站设计与实现毕业论文.docx》由会员分享，可在线阅读，更多相关《响应式企业网站设计与实现毕业论文.docx（110页珍藏版）》请在冰豆网上搜索。

响应式企业网站设计与实现毕业论文

响应式企业设计与实现毕业论文

第一章绪论

1.1本课题研究的背景和目的

如今的互联网已经渗透到了我们生活的每一个层面，的容越来越丰富全面，各大浏览器商也在竞相的开发各种各样的新的功能，供开发者进行开发构建出更好的用户体验，以此来满足各种不同需求的浏览者。

随机计算机的这些技术的飞速生长，手机的上网率高于传统PC，而在手机端上，传统又难以做到兼容所有的设备尺寸，越来越多的商家的传统门户官网已经不能满足用户的体验，各大商家大企业都开始重构新的HTML5响应式

，以求将自己的产品信息和企业动态，更直接的展示给用户，并且通过丰富的交互去优化与用户沟通的过程。

目前很多的企业已经建立起了自己的响应式官网。

这些的建立使得企业可以突破传统的PC媒介，在移动网络上开辟属于自己的新天地。

用户能在手机上，随时随地就能看到企业的最新动态，可以更好的利用用户的碎片时间去关注企业，网络之所以为网，也正是因为他具有超时空性。

人们无论在哪都应该可以进行访问，体验空间层面上带来的开放性。

整个官网设置多个板块与分页面，分别放置相关容，不同板块的信息相互独立。

交互上更多是体验在CSS3的新属性带给用户的新体验，用户在与官网进行交互的方式更加丰富与精彩了。

与传统官网相比，响应式不外乎也是企业介绍，新闻发布，产品介绍一类等。

为何还要花时间精力和人力去建立和维护呢？

是正如上面所说：

容更加多姿多彩，板块，容更加丰富，而且能够相应不同屏幕大小，在这个用手机多过PC的时代，能更好更快地将第一手信息送到用户手上。

这些都促成了各个企业组织新的信息化建设，构建专业，易于维护和管理的。

我们要构建专门的企业响应式官网，前端开发最基本的还是3个技能：

html;css;Javascript,也用到其他部分工具，如PS图片处理工具，新的HTML5，css3；javascript的工具集jQuery。

这些都是开发中最基本的技能。

前端开发的过程中，页面的布局将会用HTML元素进行定义和布局，css对布局元素进行元素的定位和画面效果的渲染，然后再通过javascript实现相对应的效果和优化用户交互体验。

1.2国外HTML5响应式企业建设的状况

1、截至2015，有80%的App将全部或部分基于HTML5。

这意味着大部分App的容都将是以网页的形式呈现，典型的例子包括微信、Facebook、Twitter等。

（数据来源：

国际科技媒体ReadWriteWeb，2015）

2、浏览量最高的1000个H5作品中，42%是心灵鸡汤，最高17,358,480uv;27%是测试题，最高49,940,339uv;15%是社交互动游戏，最高2,892,047uv;5%是大型品牌宣传，最高551,195uv。

（数据来源：

在线h5工具平台ih5.，2015.9）

3、谷歌浏览器于9月1日起不再自动播放Flash。

亚马逊宣布旗下网络（包括A门户在）的所有广告将不再使用Flash。

在可预见的未来，Flash广告将被HTML5广告所替代。

4、朋友圈广告上线，据传起投20万，CPM40元。

详情外链的H5页面可以用微信提供的模板，也可以自行定制。

以上的信息反映了H5在容营销的应用潜力。

出于好奇，笔者又调研了国外的几个社交平台。

目前支持H5分享的平台：

国的微信、微博，国外有Facebook、Twitter、LinkedIn，当然每个平台分享的形式略有差异。

各大主流社交平台对H5分享的支持都是比较友好的，只不过每个平台的分享接口都需要单独的定制。

当然这也在暗示HTML5的推广渠道其实可以更加多元化，并且其在容营销中有着极大的应用潜力。

　事实上随着技术的成熟和各种H5工具的涌现，H5制作已经渐渐走向标准化，成本问题也随着一些工具的出现有了极大的改善。

或许H5技术的发展已经超出你的想象，很多问题已经有了不错的解决方案。

所以各大企业官网转型做响应式也是势在必得的过程。

1.3本章小结

本章阐述了开发企业响应式官网的研究背景和意义。

介绍了国外HTML5响应式的发展状态对比目前国的现状，说明建设HTML5响应式的重要性。

第二章前端开发及相关技术

2.1 HTML5前端开发环境

HTML5网页前端开发，实际也是HTML网页开发，HTML5只是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改的第五次，其中增添很多新的API功能。

网页前端主要是由用户交互设计，视觉体验设计等配合，根据设计图合理的规划和布局页面，合理编写页面代码，编写易于管理具有一定的层次代码，挖掘用户深层次的体验效果，进一步去优化体验。

一般都是由有网页三剑客之称的：

HTML，css,js来作为基本构建项目语言。

在该项目中用到的开发工具是WebStorm。

2.2 HTML5前端开发工具

（1）WebStorm

WebStorm是jetbrains公司旗下一款JavaScript开发工具。

被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。

与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。

然后根据设计图制作静态页面，兼容各主流浏览器，并做到IE8下排版不乱，IE9以上响应式布局。

另外，对做一些维护已经性能的优化。

整个的详细开发过程在后面将逐步具体介绍。

（2）Photoshop

AdobePhotoshop,简称“PS”,他是由AdobeSystems开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。

使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

（3）IEtester

IETester是一个免费的WebBrowser控件，让我们可以在Windows系列的桌面Vista和XP系统中看到IE5.5、IE6、IE7、IE8、IE9、IE10、IE11的渲染和JavaScript引擎。

可以帮我们模拟网页在IE5.5、IE6、IE7、IE8、IE9以及IE10等浏览器中的兼容性，让我们可以检测到我们做的能否兼容各版本的IE浏览器，用于观察兼容性。

2.3 HTML5前端开发相关技术

2.3.1 javascript简介

Javascript是一种直译式脚本语言。

是一种动态类型、弱类型、基于原型的语言，置支持类型，具有自己独特的垃圾回收等机制，他的解释器被称为Javascript引擎，为浏览器的一部分，目前最新的javascript引擎为V8引擎它是使用C++开发出来的，并在谷歌浏览器中使用。

Javascript广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

它的出现，起初只是进行简单的信息和用户之间的一种实时的，动态的，可交互的脚本表达能力。

基于CGI静态的HTML页面将可以通过javascript提供动态实时信息，并对客户操作进行反馈。

目前它是众多脚本语言中较为优秀的一种，随着HTML5的出现，javascript的功能已经扩展到编写后台开发。

配合HTML5就能实现跨平台webAPP的开发。

因此，掌握好javascript脚本语言的编程方法是目前我们必须去日益关心和学习的。

2.3.2 javascript基本特点

（1）  基于对象的语言    

javascript也一种基于对象的语言，可以看作是一种面向对象编程的语言。

这意味着它能像其他语言一样声明与运用自己已经创建的对象。

因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

（2）  简单性     

javascript的简单性主要体现在：

它是一种弱语言脚本，对使用的数据类型没做严格的声明要求,而且javascript是基于Java基本语句和控制的脚本语言,使其设计简单紧凑

（3）  安全性     

javascript是一种安全性语言，它不允许访问本地的硬盘资料，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，javascript安全限制中有同源策略的保护，一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合。

只能通过浏览器实现信息浏览或动态交互。

从而有效地防止数据的丢失。

而且

（4）  动态性     

java script是动态的，它可以直接通过检测用户和客户在浏览器上做出的动作并做出相应，而无须经过Web服务程序，它对用户的反应相应，是采用事件驱动的方式进行的。

事件驱动就是指在页面中执行了某种操作所产生的特定事件。

比如单击事件，滚轮事件，鼠标移动事件。

当这些事件被触发时就能引起相对应的事件程序响应。

2.3.3 css简介

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

是用来进行网页风格修饰的，可以有效地对各个标签的样式进行统一的修改。

CSS的全名中，Cascading有“层叠”的意思，也就是说在同一个web页面中可以同时存在多个样式表，但这些样式表中的样式，会根据他们所在的位置，拥有不同的优先级，优先级越高的，就会在最终显示出来。

样式表插入方法分为3种：

（1） 联式样式表；

（2）嵌入式样式表；（3）外部式样式表； 

CSS某种程度上来说是扩展了HTML，但不能用来替换HTML，也就是说CSS不能脱离HTML，它只是一种辅助修饰页面的“工具”，除了可以扩展HTML默认的样式设定外，CSS让的设计样式维护更加方便搞笑，主要体现是为：

减少图片的使用率，方便管理样式表样式，设置公用样式，样式分类设置调用。

CSS目前最新版本为CSS3，是能够真正做到网页表现与容分离的一种样式设计语言。

相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

2.3.4 jQuery

 JQuery是继prototype之后又一个优秀的Javascript库。

它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页面保持代码和html容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是writeless,domore（写得更少,做得更多）。

jQuery在2006年1月由美国人JohnResig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由DaveMethvin率领团队进行开发。

如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。

jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

除此以外，jQuery提供API让开发者编写插件。

其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

2.4 本章小结

本章介绍了开发企业响应式前端所需要用到的开发工具其运行环境，同时讲述了相关的前端开发语言，比如：

Javascript，css，Jquery等。

以便于在后面的开发中对这些技术有深刻的理解

第三章前端布局分析与设计

3.1 前端总体开发流程与设计

Web前端开发与其他平台开发不一样，它是一个先易后难的学习曲线，主要包括三个基本技能要素：

HTML,CSS,和Javascript，所以前端工程师不仅要掌握这些基本技能外，还要去学习的性能优化，SEO和与后台服务器端交互的基础知识，而且还要善于利用各种测试辅助工具辅助开发，例如IEtext，google的debug，还要具有一定的沟通能力，协调美工设计与后台开发人员，还要掌握如何封装代码组件，增加代码维护性，代码的易用性，浏览器兼容与适配，面向对象的编程思想，等等。

3.1.1 分层开发

在响应式企业的具体概要确定之后，就要着手进行分层开发的划分，根据项目容的不同，划分出不同的功能模块，分步完成，以便合理地安排开发时间，在有限的时间，有条理地完成模块和需要功能，减少时间的浪费，降低开发成本，提高开发效率。

整个分层开发大致分为总体结构搭建，模块制作，页面设置制作，底层JS脚本搭建，JS交互效果，部测试，bug修复，代码优化。

3.1.2 代码编写

当总规划和设计图初稿完成后，就可以进入代码编写阶段，进行前期的前端开发，大致流程如下：

搭建大致的HTML结构，然后等设计图完成后再对页面进行细节调整布局，并添加页面样式修改完善，最后搭建javascript脚本开发，嵌套脚本文件，实现逐层开发，减少整体消耗的时间，使得有更多的时间对产品进行修改，优化和完善。

确定了流程后，还需要对产品原型进行分析，研究，把复用性高的部分划分出来，重点标记，在以后的代码编写过程中，封装成一个复用组件，方便调用。

并且根据二三级页面的设计布局，搭建统一的大致框架。

前端设计风格样式确定以后，进行通用组件模块样式的设计（例如按钮，分页，字体样式等）

在代码编写的过程中，要做到遵守标准的w3c行业标准，在编写代码的时候，尽可能的实现向下兼容，减少耦合性，增加扩展自由度，以便日后功能等各方面的修改。

在整个过程中，先划分好各模块的开发顺序，先编写大概的HTML布局，设计图完成后在进行CSS的开发，大大节省开发时间，提高开发效率，同时也体现了模块化开发的重要性，强调编写规，这样便于后期维护，减少维护成本。

模块化开发时工程师必备的技能，是敏捷开发必须的，易于复用与组件管理。

3.1.3 部测试与后续优化

前端部测试，主要是观察页面与设计图的差异，优化页面细节样式，及时发现问题并且进行修改。

并且利用IEtext查看页面的兼容性，当所有细节与兼容问题修改完毕后，就要对制作文件进行代码优化，尽可能的压缩文件大小和减少外部http的请求数，优化访问速度。

该流程是参照公司开发流程制定出来的，以经过很长时间的磨合跟改进，尽管虽然不是很完美，但是很适合我们现在开发这个项目的需求，优点也是很明显的，能更好的应对高强度，高质量的开发需求，代码更加容易控制和修改优化，充分利用时间，提高了开发侠侣

3.2 前端UI设计

3.2.1 模块分布

UI即UserInterface（用户界面）的简称。

UI设计则是指对页面的人机交互、操作逻辑、界面美观的整体设计。

好的UI设计不仅是让页面变得有个性有品味，还要让页面的操作变得舒适、简单、自由，充分体现页面的定位和特点。

所以UI设计师设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。

图3-1为写意集团响应式企业官网首页：

图3-1写意集团响应式企业官网首屏着陆页

首页的logo还设计了一个动画，整个着陆页使用了一满屏大图。

3.2.2 颜色配置

产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00 00， 例如经常写的red，color:

#FF0000； 缩写color:

#F00；color:

gray（#808080）；是比较深的灰色。

所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。

采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。

我们上用的色彩系是属于灰白色系这个选择符合的整体风格，不可能把设计成五颜六色，因为写意集团是一个从事建筑行业的企业，所以要体现一种简洁，自然，稳重的色彩风格。

背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色

背景色大量六百，同时背景色要与文字的排列对比强烈一些。

首页的顶端使用，满屏的图片下面用大量六百这两个部分过度的很自然。

在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。

不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。

如果要大面积留白一定要对容的排版有比较充足的经验，不然不但不能让用户感到留白的自由感反而多了一丝容空洞的想法，如果是较深的背景下，禁止大面积使用加粗文字。

如图3-2所示：

图3-2首页导航字体颜色变化

3.2.3 css元素

CSS块状元素（block）：

CSS块状元素非常“霸道”， 总是另起一行开始，可对其设置高度，宽度，行高等等，常用的有：

div p table h1 ul dl 等等。

CSS联元素（inline）:

CSS联元素和其它联元素可以同时都在一行上；高度，行高以及顶，底边距不可改变；常用的有：

a strong font img input span small label等等  

CSS行块状元素（inline-block）:

Display:

 inline-block，该样式可将元素改为行块状元素，将元素对象呈递为联元素对象，但是元素对象的容作为块对象元素呈递。

旁边的联对象元素会被呈递在同一行，允许空格，即可以让元素同时拥有块状元素设置宽高行高等特性，同时也具有行元素的同一行显示。

但对于这个属性不是所有浏览器都识别，兼容性较差，而且会留下默认的外边距，而且不能通过margin：

0样式去掉，解决方法是利用浮动float来解决。

CSS盒模型:

网页设计中常听的属性名：

容（content）、填充（padding）、边框（border）、边界（margin），CSS盒子模式都具备这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

边距padding：

元素的边距在边框和容区之间。

padding:

20px 15px 5px 10px;上 20px右 15px下 5px左 10px；padding:

10px 5px 15px; 上右左下padding:

10px 15px;上右下左

100px; padding:

0 20px;">无标题文档