响应式企业网站设计与实现.docx
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《响应式企业网站设计与实现.docx》由会员分享,可在线阅读,更多相关《响应式企业网站设计与实现.docx(146页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、响应式企业设计与实现目录第一章绪 论11.1 本课题研究的背景和目的11.2 国外 HTML5 响应式企业建设的状况21.3 本章小结3第二章 前端开发 及相关技术42.1 HTML5 前端开发环境42.2 HTML5 前端开发工具42.3 HTML5 前端开发相关技术52.3.1 javascript 简介52.3.2 javascript 基本特点62.3.3 css 简介72.3.4 jQuery72.4 本章小结8第三章 前端布局分析与设计9WORD 版本.3.1 前端总体开发流程与设计93.1.1 分层开发93.1.2 代码编写93.1.3 部测试与后续优化103.2 前端 UI 设
2、计113.2.1 模块分布113.2.2 颜色配置113.2.3 css 元素123.3 交互设计与 UI143.4 结构布局与设计153.5.1 首页结构153.5.2 主题鲜明,富有特色153.5 前台页面设计163.5.1 首页163.5.2 其余子页面163.7 本章小结16第四章 主要功能的实现174.1 界面设计174.2 具体设计文档174.3 前台新闻文摘显示184.3.1 装饰风格184.3.2 的结构184.4 可视化设计184.5 具体实现技术194.5.1 css 在“写意集团响应式企业官网”中的应用实例194.6 本章小结22第五章总结141致谢141参考文献143第
3、一章绪 论1.1 本课题研究的背景和目的如今的互联网已经渗透到了我们生活的每一个层面,的容越来越丰富全面, 各大浏览器商也在竞相的开发各种各样的新的功能,供开发者进行开发构建出更好的用户体验,以此来满足各种不同需求的浏览者。随机计算机的这些技术的飞速生长,手机的上网率高于传统 PC,而在手机端上,传统又难以做到兼容所有的设备尺寸,越来越多的商家的传统门户官网已经不能满足用户的体验,各大商家大企业都开始重构新的 HTML5 响应式,以求将自己的产品信息和企业动态,更直接的展示给用户,并且通过丰富的交互去优化与用户沟通的过程。目前很多的企业已经建立起了自己的响应式官网。这些的建立使得企业可以突破传
4、统的 PC 媒介,在移动网络上开辟属于自己的新天地。用户能在手机上, 随时随地就能看到企业的最新动态,可以更好的利用用户的碎片时间去关注企业,网络之所以为网,也正是因为他具有超时空性。人们无论在哪都应该可以进行访问,体验空间层面上带来的开放性。整个官网设置多个板块与分页面,分别放置相关容,不同板块的信息相互独立。交互上更多是体验在 CSS3 的新属性带给用户的新体验,用户在与官网进行交互的方式更加丰富与精彩了。与传统官网相比,响应式不外乎也是企业介绍,新闻发布,产品介绍一类等。为何还要花时间精力和人力去建立和维护呢?是正如上面所说:容更加多姿多 彩,板块,容更加丰富,而且能够相应不同屏幕大小,
5、在这个用手机多过 PC 的时代,能更好更快地将第一手信息送到用户手上。这些都促成了各个企业组织新的信息化建设,构建专业,易于维护和管理的。我们要构建专门的企业响应式官网,前端开发最基本的还是3 个技能:html;css;Javascript,也用到其他部分工具,如PS 图片处理工具,新的HTML5, css3;javascript 的工具集 jQuery。这些都是开发中最基本的技能。前端开发的过程中,页面的布局将会用 HTML 元素进行定义和布局,css 对布局元素进行元素的定位和画面效果的渲染,然后再通过 javascript 实现相对应的效果和优化用户交互体验。1.2 国外HTML5 响应
6、式企业建设的状况1、截至 2015,有 80%的 App 将全部或部分基于 HTML5。这意味着大部分App 的容都将是以网页的形式呈现,典型的例子包括微信、Facebook、Twitter 等。(数据来源:国际科技媒体 ReadWriteWeb,2015)2、浏览量最高的 1000 个H5 作品中,42%是心灵鸡汤,最高 17,358,480 uv;27%是测试题,最高 49,940,339 uv;15%是社交互动游戏,最高 2,892,047 uv; 5%是大型品牌宣传,最高 551,195 uv。(数据来源:在线 h5 工具平台 ih5.,2015.9) 3、谷歌浏览器于 9 月 1 日
7、起不再自动播放 Flash。 亚马逊宣布旗下网络(包括 A 门户在)的所有广告将不再使用 Flash。在可预见的未来,Flash 广告将被 HTML5 广告所替代。4、朋友圈广告上线,据传起投 20 万, CPM 40 元。详情外链的H5 页面可以用微信提供的模板,也可以自行定制。以上的信息反映了 H5 在容营销的应用潜力。出于好奇,笔者又调研了国外的几个社交平台。目前支持 H5 分享的平台:国的微信、微博,国外有 Facebook、Twitter、LinkedIn,当然每个平台分享的形式略有差异。各大主流社交平台对H5 分享的支持都是比较友好的,只不过每个平台的分享接口都需要单独的定制。当然
8、这也在暗示 HTML5 的推广渠道其实可以更加多元化,并且其在容营销中有着极大的应用潜力。事实上随着技术的成熟和各种 H5 工具的涌现,H5 制作已经渐渐走向标准化,成本问题也随着一些工具的出现有了极大的改善。或许 H5 技术的发展已经超出你的想象,很多问题已经有了不错的解决方案。所以各大企业官网转型做响应式也是势在必得的过程。1.3 本章小结本章阐述了开发企业响应式官网的研究背景和意义。介绍了国外 HTML5 响应式的发展状态对比目前国的现状,说明建设 HTML5 响应式的重要性。第二章前端开发及相关技术2.1 HTML5 前端开发环境HTML5 网页前端开发,实际也是 HTML 网页开发,
9、HTML5 只是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改的第五次,其中增添很多新的 API 功能。网页前端主要是由用户交互设计,视觉体验设计等配合,根据设计图合理的规划和布局页面,合理编写页面代码,编写易于管理具有一定的层次代码,挖掘用户深层次的体验效果,进一步去优化体验。一般都是由有网页三剑客之称的:HTML,css,js 来作为基本构建项目语言。在该项目中用到的开发工具是 WebStorm。2.2 HTML5 前端开发工具(1)WebStormWebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国J
10、S 开发者誉为“Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的JavaScript IDE”等。与 IntelliJ IDEA 同源,继承了 IntelliJ IDEA 强大的JS 部分的功能。然后根据设计图制作静态页面,兼容各主流浏览器,并做到 IE8 下排版不乱,IE9 以上响应式布局。另外,对做一些维护已经性能的优化。整个的详细开发过程在后面将逐步具体介绍。(2) PhotoshopAdobe Photoshop,简称“PS”,他是由 Adobe Systems 开发和发行的图像处理软件。Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具
11、,可以有效地进行图片编辑工作。ps 有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。(3) IE testerIETester 是一个免费的 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 javascri
12、pt 简介Javascript 是一种直译式脚本语言。是一种动态类型、弱类型、基于原型的语言,置支持类型,具有自己独特的垃圾回收等机制,他的解释器被称为Javascript 引擎,为浏览器的一部分,目前最新的 javascript 引擎为 V8 引擎它是使用 C+开发出来的,并在谷歌浏览器中使用。Javascript 广泛用于客户端的脚本语言,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用, 用来给 HTML 网页增加动态功能。它的出现,起初只是进行简单的信息和用户之间的一种实时的,动态的,可交互的脚本表达能力。基于 CGI 静态的 HTML 页面将可以通过 javascript
13、 提供动态实时信息,并对客户操作进行反馈。目前它是众多脚本语言中较为优秀的一种, 随着 HTML5 的出现,javascript 的功能已经扩展到编写后台开发。配合 HTML5 就能实现跨平台 webAPP 的开发。因此,掌握好 javascript 脚本语言的编程方法是目前我们必须去日益关心和学习的。2.3.2 javascript 基本特点( 1)基于对象的语言javascript 也一种基于对象的语言,可以看作是一种面向对象编程的语言。这意味着它能像其他语言一样声明与运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。(2) 简单性javascript
14、的简单性主要体现在:它是一种弱语言脚本,对使用的数据类型没做严格的声明要求,而且javascript 是基于Java 基本语句和控制的脚本语言, 使其设计简单紧凑(3) 安全性javascript 是一种安全性语言,它不允许访问本地的硬盘资料,不能将数据存入到服务器上,不允许对网络文档进行修改和删除,javascript 安全限制中有同源策略的保护,一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合。只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。而且(4) 动态性java script 是动态的,它可以直接通过检测用户和客户在浏览器
15、上做出的动作并做出相应,而无须经过 Web 服务程序,它对用户的反应相应,是采用事件驱动的方式进行的。事件驱动就是指在页面中执行了某种操作所产生的特定事 件。比如单击事件,滚轮事件,鼠标移动事件。当这些事件被触发时就能引起相对应的事件程序响应。2.3.3 css 简介层叠样式表是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是用来进行网页风格修饰的,可以有效地对各个标签的样式进行统一的修改。CSS 的全名中,Cascading 有“层叠”的意思,也就是说在同一个 web 页面中可以同时存在多个样式表,但这些样式表中的样式,会
16、根据他们所在的位置, 拥有不同的优先级,优先级越高的,就会在最终显示出来。样式表插入方法分为3 种:(1) 联式样式表;(2)嵌入式样式表;(3)外部式样式表;CSS 某种程度上来说是扩展了 HTML,但不能用来替换 HTML,也就是说 CSS 不能脱离 HTML,它只是一种辅助修饰页面的“工具”,除了可以扩展HTML 默认的样式设定外,CSS 让的设计样式维护更加方便搞笑,主要体现是为:减少图片的使用率,方便管理样式表样式,设置公用样式,样式分类设置调用。CSS 目前最新版本为 CSS3,是能够真正做到网页表现与容分离的一种样式设计语言。相对于传统 HTML 的表现而言,CSS 能够对网页中
17、的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS 能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。2.3.4 jQueryJQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理
18、 HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为提供 AJAX 交互。jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和html 容分离,也就是说,不用再在 html 里面插入一堆 js 来调用命令了,只需要定义 id 即可。jQuery 是一个兼容多浏览器的 javascript 库,核心理念是 write less,do more(写得更少,做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barc
19、amp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。如今,jQuery 已经成为最流行的 javascript 库, 在世界前 10000 个访问最多的中,有超过 55%在使用 jQuery。jQuery 是免费、开源的,使用 MIT 许可协议。jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。除此以外,jQuery 提供 API 让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。2.4 本章小结本章介绍了
20、开发企业响应式前端所需要用到的开发工具其运行环境,同时讲述了相关的前端开发语言,比如:Javascript,css,Jquery 等。以便于在后面的开发中对这些技术有深刻的理解第三章 前端布局分析与设计3.1 前端总体开发流程与设计Web 前端开发与其他平台开发不一样,它是一个先易后难的学习曲线,主要包括三个基本技能要素:HTML,CSS,和 Javascript,所以前端工程师不仅要掌握这些基本技能外,还要去学习的性能优化,SEO 和与后台服务器端交互的基础知识,而且还要善于利用各种测试辅助工具辅助开发,例如 IEtext,google 的debug,还要具有一定的沟通能力,协调美工设计与后
21、台开发人员,还要掌握如何封装代码组件,增加代码维护性,代码的易用性,浏览器兼容与适配,面向对象的编程思想,等等。3.1.1 分层开发在响应式企业的具体概要确定之后,就要着手进行分层开发的划分,根据项目容的不同,划分出不同的功能模块,分步完成,以便合理地安排开发时间,在有限的时间,有条理地完成模块和需要功能,减少时间的浪费,降低开发成本,提高开发效率。整个分层开发大致分为总体结构搭建,模块制作,页面设置制作,底层 JS 脚本搭建,JS 交互效果,部测试,bug 修复, 代码优化。3.1.2 代码编写当总规划和设计图初稿完成后,就可以进入代码编写阶段,进行前期的前端开发,大致流程如下:搭建大致的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 响应 企业 网站 设计 实现
![提示](https://www.deliwenku.com/images/bang_tan.gif)
限制150内