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

《响应式企业网站设计与实现》由会员分享，可在线阅读，更多相关《响应式企业网站设计与实现（80页珍藏版）》请在金锄头文库上搜索。

1、毕毕 业业 论论 文文 题目：题目： 响应式企业网站设计与实现响应式企业网站设计与实现 学生姓名：学生姓名： 学学号号： 专业班级：专业班级：计算机科学与技术计算机科学与技术 指导教师：指导教师： 企业导师：企业导师： 二级学院：二级学院：电气与信息工程学院电气与信息工程学院 摘 要 在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越 被人们接受，并且融入我们的生活。在 2015 年时，随着 HTML5 在国内的兴起， 也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格， 如今的 HTML5 比起以前的 HTML 来说，更容易维护和管理，而且还能实现跨平台 开发，

2、减少开发成本。 本论文主要围绕写意集团的 HTML5 响应式网站为开发主题，用到的也是最 必备的三个技能元素，在布局页面时，用 HTML 将元素进行定义，布局基础布局； css 对展示的 HTML 元素布局进行定位渲染，然后利用 Javascript 或者 jQuery 实现相应的效果和交互。虽然这么看起来很简单，但这里需要认真了解的东西 很多。在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能 等各种问题。 分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及 HTML5 响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析 实现中的难点和重点； 关键词：HTM

3、L5; CSS3; 响应式; javascript; 网站美化; 交互设计 abstract In this era of rapid development of information and network as the most convenient media now increasingly being accepted and integrated into our lives. In 2015, with the rise of HTML5 in the country, has also been advancing the development of the inform

4、ation age, the site is also moving away from the traditional boring page style, and now HTML5 compared to the previous HTML is easier to maintain and management, but also to achieve cross-platform development, reduce development costs. This paper mainly around Freehand Group HTML5 Responsive website

5、 development topics, used in the three most essential elements of skill, in the layout of the page, using HTML to define the elements, layout basic layout; css to display HTML elements positioning layout rendering, then use Javascript or jQuery to achieve the appropriate effects and interactions. Al

6、though such looks very simple, but here need to understand a lot of serious things. Before development, the need to clarify these concepts in the development process, but also consider a variety of problems with compatibility, performance and so on. Analyze and solve technical problems in implementa

7、tion of: The official website of the general principles of corporate background personalized page HTML5 and responsive layout; elaborate structure and working principle of the whole enterprise official website; Analysis Implementation difficulties and priorities; Keywords: HTML5; CSS3; responsive; j

8、avascript; website landscaping; Interactive Design 目 录 第一章 绪 论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 jQuery.10 2.4 本章小结.10 第三章 前端布局分析与设计1

9、0 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 交互设计与 UI 14 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 前台新闻文摘显

10、示.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.1 本课题研究的背景和目的 如今的互联网已经渗透到了我们生活的每一个层面，网站的内容越来越丰 富全面，各大浏览器商也在竞相的开发各种各样的新的功能，供开发者进行开 发构建出更好的用户体验，以此来满足各种不同需求的浏览者。随机计算机的 这些技术的飞速生长，手机的上网率高

11、于传统 PC，而在手机端上，传统网站又 难以做到兼容所有的设备尺寸，越来越多的商家的传统门户官网已经不能满足 用户的体验，各大商家大企业都开始重构新的 HTML5 响应式网站 ，以求将自己的产品信息和企业动态，更直接的展示给用户，并且通过丰富的 交互去优化与用户沟通的过程。 目前很多的企业已经建立起了自己的响应式官网。这些网站的建立使得企 业可以突破传统的 PC 媒介，在移动网络上开辟属于自己的新天地。用户能在手 机上，随时随地就能看到企业的最新动态，可以更好的利用用户的碎片时间去 关注企业，网络之所以为网，也正是因为他具有超时空性。人们无论在哪都应 该可以进行访问，体验空间层面上带来的开放性

12、。 整个官网设置多个板块与分页面，分别放置相关内容，不同板块的信息相 互独立。交互上更多是体验在 CSS3 的新属性带给用户的新体验，用户在与官网 进行交互的方式更加丰富与精彩了。 与传统官网相比，响应式网站不外乎也是企业介绍，新闻发布，产品介绍 一类等。 为何还要花时间精力和人力去建立和维护网站呢？是正如上面所说：内容更加 多姿多彩，板块，内容更加丰富，而且能够相应不同屏幕大小，在这个用手机 多过 PC 的时代，能更好更快地将第一手信息送到用户手上。 这些都促成了各个企业组织新的信息化建设，构建专业，易于维护和管理 的网站。 我们要构建专门的企业响应式官网，网站前端开发最基本的还是 3 个技

13、能： html;css;Javascript,也用到其他部分工具，如 PS 图片处理工具，新的 HTML5，css3；javascript 的工具集 jQuery。这些都是开发中最基本的技能。 前端开发的过程中，页面的布局将会用 HTML 元素进行定义和布局，css 对布局 元素进行元素的定位和画面效果的渲染，然后再通过 javascript 实现相对应的 网站效果和优化用户交互体验。 1.2 国内外 HTML5 响应式企业网站建设的状况 1、截至 2015，有 80%的 App 将全部或部分基于 HTML5。这意味着大部分 App 的内容都将是以网页的形式呈现，典型的例子包括微信、 Face

14、book、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 工具平台 ，2015.9) 3、谷歌浏览器于 9 月 1 日起不再自动播放 Flash。 亚马逊宣布旗下网络 响应式企业网站设计与实现 2 (包括 A 门户在内)的所有广告将不再使用 Flash。在可预见的未来， Flash 广告

15、将被 HTML5 广告所替代。 4、朋友圈广告上线，据传起投 20 万， CPM 40 元。详情外链的 H5 页面可 以用微信提供的模板，也可以自行定制。 以上的信息反映了 H5 在内容营销的应用潜力。出于好奇，笔者又调研了国 内外的几个社交平台。目前支持 H5 分享的平台：国内的微信、微博，国外有 Facebook、Twitter、LinkedIn，当然每个平台分享的形式略有差异。各大主流 社交平台对 H5 分享的支持都是比较友好的，只不过每个平台的分享接口都需要 单独的定制。当然这也在暗示 HTML5 的推广渠道其实可以更加多元化，并且其 在内容营销中有着极大的应用潜力。 事实上随着技术的

16、成熟和各种 H5 工具的 涌现，H5 制作已经渐渐走向标准化，成本问题也随着一些工具的出现有了极大 的改善。或许 H5 技术的发展已经超出你的想象，很多问题已经有了不错的解决 方案。所以各大企业官网转型做响应式也是势在必得的过程。 1.3 本章小结 本章阐述了开发企业响应式官网的研究背景和意义。介绍了国内外 HTML5 响应式网站的发展状态对比目前国内的现状，说明建设 HTML5 响应式网站的 重要性。 响应式企业网站设计与实现 3 第第 2 章章 前端开发及相关技术前端开发及相关技术 2.1 HTML5 前端开发环境 HTML5 网页前端开发，实际也是 HTML 网页开发，HTML5 只是万维网的核心 语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大 修改的第五次，其中增添很多新的 API 功能。网页前端主要是由用户交互设计， 视觉体验设计等配合，根据设计图合理的规划和布局页面，合理编写页面代码， 编写易于管理具有一定的层次代码，挖掘用户深层次的体验效果，进一步去优 化体验。一般都是由有网页三剑客之称的：HTML，css,