web前端毕业设计论文.docx

web前端毕业设计论文.docx

《web前端毕业设计论文.docx》由会员分享，可在线阅读，更多相关《web前端毕业设计论文.docx（114页珍藏版）》请在冰豆网上搜索。

web前端毕业设计论文

2015版

毕业论文

题目：

响应式企业设计与实现

学生：

罗智刚

学号：

1202012132

专业班级：

B12计算机科学与技术2班

指导教师：

莉

企业导师：

林志宏

二级学院：

电气与信息工程学院

摘要

在信息高速开展的这个时代，网络作为现今最为方便快捷的媒介也越来越被人们承受，并且融入我们的生活。

在2015年时，随着HTML5在国的兴起，也在不断的推进着信息时代的开展，也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发本钱。

本论文主要围绕写意集团的HTML5响应式为开发主题，用到的也是最必备的三个技能元素，在布局页面时，用HTML将元素进展定义，布局根底布局；css对展示的HTML元素布局进展定位渲染，然后利用Javascript或者jQuery实现相应的效果和交互。

虽然这么看起来很简单，但这里需要认真了解的东西很多。

在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能等各种问题。

分析并解决实现中的假设干技术问题：

介绍企业官网个性化页面的背景及HTML5响应式布局的一般原理；阐述整个企业官网的构造及工作原理；分析

实现中的难点和重点；

关键词：

HTML5;CSS3;响应式;javascript;美化;交互设计

abstract

Inthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasalsobeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5paredtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts.

ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofskill,inthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,thenuseJavascriptorjQuerytoachievetheappropriateeffectsandinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithpatibility,performanceandsoon.

Analyzeandsolvetechnicalproblemsinimplementationof:

TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;Analysis

Implementationdifficultiesandpriorities;

Keywords:

HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign

第一章绪论6

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

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

1.3本章小结7

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

2.1 HTML5前端开发环境8

2.2 HTML5前端开发工具8

2.3 HTML5前端开发相关技术8

2.3.1 javascript简介8

2.3.2 javascript根本特点9

2.3.3 css简介9

2.3.4 jQuery10

2.4 本章小结10

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

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

3.1.1 分层开发10

3.1.2 代码编写11

3.1.3 部测试与后续优化11

3.2 前端UI设计11

3.2.1 模块分布11

3.2.2 颜色配置12

3.2.3 css元素12

3.3 交互设计与UI14

3.4 构造布局与设计14

3.5.1  首页构造14

3.5.2  主题鲜明，富有特色14

3.5 前台页面设计14

3.5.1 首页15

3.5.2 其余子页面15

3.7 本章小结15

第四章主要功能的实现15

4.1 界面设计15

4.2 具体设计文档15

4.3 前台新闻文摘显示16

4.3.1 装饰风格16

4.3.2 的构造16

4.4 可视化设计16

4.5 具体实现技术16

4.5.1 css在“写意集团响应式企业官网〞中的应用实例16

4.6 本章小结18

第五章总结18

致18

参考文献19

第一章绪论

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。

亚马逊宣布旗下网络（包括Amazon.门户在）的所有广告将不再使用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查看页面的兼容性，当所有细节与兼容问题修改完毕后，就要对制作文件进展代码优化，尽可能的压缩文件大小和减少外部的请求数，优化访问速度。

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

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块状元素非常“霸道〞， 总是另起一行开场，可对其设置