web前端毕业设计论文剖析.pdf

《web前端毕业设计论文剖析.pdf》由会员分享，可在线阅读，更多相关《web前端毕业设计论文剖析.pdf（81页珍藏版）》请在三一文库上搜索。

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

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

3、; 交互设计 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 information age, the site is also mov

4、ing 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 development topics, used in th

5、e 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. Although such looks very simple,

6、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 implementation of: The official website o

7、f 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; javascript; website landscaping;

8、 Interactive Design 目录 第一章绪 论 . 1 1.1 本课题研究的背景和目的 1 1.2 国内外 HTML5 响应式企业网站建设的状况 1 1.3 本章小结 2 第二章 前端开发及相关技术 . 3 2.1 HTML5 前端开发环境 . 3 2.2 HTML5 前端开发工具 . 3 2.3 HTML5 前端开发相关技术. 3 2.3.1 javascript简介 3 2.3.2 javascript基本特点 4 2.3.3 css 简介 . 4 2.3.4 jQuery . 5 2.4 本章小结 . 5 第三章 前端布局分析与设计 6 3.1 前端总体开发流程与设计 . 6

9、 3.1.1 分层开发 . 6 3.1.2 代码编写 . 6 3.1.3 内部测试与后续优化. 6 3.2 前端 UI 设计 7 3.2.1 模块分布 . 7 3.2.2 颜色配置 . 7 3.2.3 css 元素 . 8 3.3 交互设计与 UI 9 3.4 网站结构布局与设计 . 9 3.5.1 网站首页结构 . 9 3.5.2 主题鲜明，富有特色 10 3.5 网站前台页面设计 10 3.5.1 首页 10 3.5.2 其余子页面 10 3.7 本章小结 10 第四章 主要功能的实现 . 11 4.1 界面设计 11 4.2 具体设计文档 11 4.3 前台新闻文摘显示 11 4.3.1

10、 网站装饰风格 11 4.3.2 网站的链接结构 11 4.4 可视化设计 11 4.5 具体实现技术 12 4.5.1 css 在“写意集团响应式企业官网”中的应用实例 12 4.6 本章小结 13 第五章总结 73 致谢 73 参考文献 75 响应式企业网站设计与实现 1 第一章绪 论 1.1 本课题研究的背景和目的 如今的互联网已经渗透到了我们生活的每一个层面，网站的内容越来越丰富 全面，各大浏览器商也在竞相的开发各种各样的新的功能，供开发者进行开发构 建出更好的用户体验， 以此来满足各种不同需求的浏览者。随机计算机的这些技 术的飞速生长，手机的上网率高于传统PC ，而在手机端上，传统网

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

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

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

14、体 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 。 亚马逊宣布旗下网络 (包 括 A门户在内 ) 的所有广告将不再使用Flash 。 在可预见的未来， Flash 响应式企业网站设计与实现 2 广告将被 HTML5 广告所替代。

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

16、经渐渐走向标准化，成本问题也随着一些工具的出现有了极大的 改善。或许 H5技术的发展已经超出你的想象，很多问题已经有了不错的解决方 案。所以各大企业官网转型做响应式也是势在必得的过程。 1.3 本章小结 本章阐述了开发企业响应式官网的研究背景和意义。介绍了国内外HTML5 响应式网站的发展状态对比目前国内的现状，说明建设 HTML5 响应式网站的重 要性。 响应式企业网站设计与实现 3 第二章前端开发及相关技术 2.1 HTML5 前端开发环境 HTML5网页前端开发，实际也是HTML 网页开发， HTML5只是万维网的核心 语言、标准通用标记语言下的一个应用超文本标记语言（HTML ）的第五

17、次重大修 改的第五次， 其中增添很多新的API 功能。网页前端主要是由用户交互设计，视 觉体验设计等配合， 根据设计图合理的规划和布局页面，合理编写页面代码， 编 写易于管理具有一定的层次代码，挖掘用户深层次的体验效果， 进一步去优化体 验。一般都是由有网页三剑客之称的：HTML ，css,js来作为基本构建项目语言。 在该项目中用到的开发工具是WebStorm 。 2.2 HTML5 前端开发工具 (1)WebStorm WebStorm 是 jetbrains公司旗下一款 JavaScript 开发工具。被广大中国 JS开发者誉为“ Web前端开发神器”、 “最强大的 HTML5 编辑器”

18、、“最智能的 JavaScript IDE”等。与 IntelliJ IDEA同源，继承了IntelliJ IDEA强大的 JS部分的功能。 然后根据设计图制作静态页面，兼容各主流浏览器， 并做到 IE8 下排版不乱， IE9 以上响应式布局。另外，对网站做一些维护已经性能的优化。 整个网站的详细开发过程在后面将逐步具体介绍。 （2）Photoshop Adobe Photoshop, 简称“ PS ”, 他是由 Adobe Systems 开发和发行的图像处 理软件。Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与绘 图工具，可以有效地进行图片编辑工作。ps 有很多功能

19、，在图像、图形、文字、 视频、出版等各方面都有涉及。 （3）IE tester 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是一种直译

20、式脚本语言。 是一种动态类型、 弱类型、基于原型的 响应式企业网站设计与实现 4 语言，内置支持类型，具有自己独特的垃圾回收等机制，他的解释器被称为 Javascript引擎，为浏览器的一部分，目前最新的javascript引擎为 V8引擎 它是使用 C+ 开发出来的，并在谷歌浏览器中使用。 Javascript广泛用于客户端 的脚本语言，最早是在HTML （标准通用标记语言下的一个应用）网页上使用， 用来给 HTML 网页增加动态功能。 它的出现，起初只是进行简单的信息和用户之间的一种实时的，动态的，可 交互的脚本表达能力。 基于 CGI静态的 HTML 页面将可以通过 javascript

21、提供动 态实时信息，并对客户操作进行反馈。 目前它是众多脚本语言中较为优秀的一种， 随着 HTML5的出现， javascript的功能已经扩展到编写后台开发。配合HTML5 就能实现跨平台 webAPP 的开发。因此，掌握好 javascript脚本语言的编程方法 是目前我们必须去日益关心和学习的。 2.3.2 javascript基本特点 （1) 基于对象的语言 javascript也一种基于对象的语言，可以看作是一种面向对象编程的语言。 这意味着它能像其他语言一样声明与运用自己已经创建的对象。因此，许多功能 可以来自于脚本环境中对象的方法与脚本的相互作用。 (2) 简单性 javascr

22、ipt的简单性主要体现在： 它是一种弱语言脚本， 对使用的数据类型 没做严格的声明要求 , 而且 javascript是基于 Java基本语句和控制的脚本语言, 使其设计简单紧凑 (3) 安全性 javascript是一种安全性语言，它不允许访问本地的硬盘资料，不能将数据存 入到服务器上，不允许对网络文档进行修改和删除，javascript安全限制中有 同源策略的保护，一段脚本只能读取来自同一来源的窗口和文档的属性, 这里的 同一来源指的是主机名、 协议和端口号的组合。 只能通过浏览器实现信息浏览或 动态交互。从而有效地防止数据的丢失。而且 (4) 动态性 java script是动态的，它可

23、以直接通过检测用户和客户在浏览器上做出的 动作并做出相应， 而无须经过 Web 服务程序， 它对用户的反应相应， 是采用事件 驱动的方式进行的。事件驱动就是指在页面中执行了某种操作所产生的特定事 件。比如单击事件，滚轮事件，鼠标移动事件。当这些事件被触发时就能引起相 对应的事件程序响应。 2.3.3 css 简介 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用） 或 XML（标 准通用标记语言的一个子集） 等文件样式的计算机语言。 是用来进行网页风格修 饰的，可以有效地对各个标签的样式进行统一的修改。 CSS的全名中， Cascading 有“层叠”的意思，也就是说在同一个web

24、页面 中可以同时存在多个样式表，但这些样式表中的样式，会根据他们所在的位置， 拥有不同的优先级， 优先级越高的， 就会在最终显示出来。 样式表插入方法分为 3 种：(1) 内联式样式表； (2) 嵌入式样式表； (3) 外部式样式表； CSS某种程度上来说是扩展了HTML ，但不能用来替换HTML ，也就是说CSS 不能脱离 HTML ，它只是一种辅助修饰页面的“工具”，除了可以扩展HTML 默认 响应式企业网站设计与实现 5 的样式设定外， CSS让网站的设计样式维护更加方便搞笑，主要体现是为：减少 图片的使用率，方便管理样式表样式，设置公用样式，样式分类设置调用。 CSS目前最新版本为 C

25、SS3 ，是能够真正做到网页表现与内容分离的一种样式 设计语言。相对于传统HTML的表现而言， CSS能够对网页中的对象的位置排版 进行像素级的精确控制， 支持几乎所有的字体字号样式，拥有对网页对象和模型 样式编辑的能力， 并能够进行初步交互设计， 是目前基于文本展示最优秀的表现 设计语言。 CSS 能够根据不同使用者的理解能力，简化或者优化写法，针对各类 人群，有较强的易读性。 2.3.4 jQuery JQuery 是继 prototype之后又一个优秀的Javascript库。它是轻量级的 js库，它兼容CSS3 ，还兼容各种浏览器 （IE 6.0+, FF1.5+, Safari 2.

26、0+, Opera 9.0+），jQuery2.0 及后续版 本将不再支持 IE6/7/8 浏览器。 jQuery 使用户能更方便地处理HTML （标准通用 标记语言下的一个应用） 、events 、实现动画效果， 并且方便地为网站提供AJAX 交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也 说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页 面保持代码和 html 内容分离，也就是说，不用再在html 里面插入一堆 js 来调 用命令了，只需要定义id 即可。 jQuery 是一个兼容多浏览器的javascript库，核心理念是

27、write less,do more(写得更少 , 做得更多 )。jQuery 在 2006年 1 月由美国人 John Resig 在纽约 的 barcamp 发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的javascript库， 在世界前 10000 个访问最多的网站中，有超过55% 在使用 jQuery 。 jQuery 是免费、开源的，使用MIT 许可协议。 jQuery 的语法设计可以使开 发更加便捷，例如操作文档对象、选择DOM 元素、制作动画效果、事件处理、使 用 Ajax 以及其他功

28、能。除此以外， jQuery 提供 API 让开发者编写插件。其模块 化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 2.4 本章小结 本章介绍了开发企业响应式网站前端所需要用到的开发工具其运行环境，同 时讲述了相关的前端开发语言，比如：Javascript，css，Jquery 等。以便于在 后面的开发中对这些技术有深刻的理解 响应式企业网站设计与实现 6 第三章前端布局分析与设计 3.1 前端总体开发流程与设计 Web前端开发与其他平台开发不一样，它是一个先易后难的学习曲线，主要 包括三个基本技能要素： HTML,CSS, 和 Javascript，所以前端工程师不仅要掌

29、握 这些基本技能外，还要去学习网站的性能优化，SEO 和与后台服务器端交互的基 础知识，而且还要善于利用各种测试辅助工具辅助开发，例如IEtext ，google 的 debug，还要具有一定的沟通能力，协调美工设计与后台开发人员，还要掌握 如何封装代码组件，增加代码维护性，代码的易用性，浏览器兼容与适配，面向 对象的编程思想，等等。 3.1.1 分层开发 在响应式企业网站的具体概要确定之后，就要着手进行分层开发的划分， 根据项目内容的不同，划分出不同的功能模块，分步完成，以便合理地安排 开发时间，在有限的时间内，有条理地完成模块和需要功能，减少时间的浪 费，降低开发成本，提高开发效率。整个分

30、层开发大致分为总体结构搭建， 模块制作，页面设置制作，底层JS脚本搭建， JS交互效果，内部测试， bug 修复，代码优化。 3.1.2 代码编写 当总规划和设计图初稿完成后，就可以进入代码编写阶段，进行前期的 前端开发，大致流程如下：搭建大致的HTML结构，然后等设计图完成后再 对页面进行细节调整布局， 并添加页面样式修改完善， 最后搭建 javascript 脚本开发，嵌套脚本文件，实现逐层开发，减少整体消耗的时间，使得有更 多的时间对产品进行修改，优化和完善。 确定了流程后，还需要对产品原型进行分析，研究，把复用性高的部分 划分出来，重点标记，在以后的代码编写过程中，封装成一个复用组件，

31、方 便调用。并且根据二三级页面的设计布局，搭建统一的大致框架。 前端设计风格样式确定以后， 进行通用组件模块样式的设计 （例如按钮， 分页，字体样式等） 在代码编写的过程中，要做到遵守标准的w3c行业标准，在编写代码的 时候，尽可能的实现向下兼容，减少耦合性，增加扩展自由度，以便日后功 能等各方面的修改。 在整个过程中，先划分好各模块的开发顺序，先编写大概的HTML 布局， 设计图完成后在进行CSS 的开发，大大节省开发时间，提高开发效率，同时 也体现了模块化开发的重要性，强调编写规范，这样便于后期维护，减少维 护成本。模块化开发时工程师必备的技能，是敏捷开发必须的，易于复用与 组件管理。 3

32、.1.3 内部测试与后续优化 前端内部测试，主要是观察页面与设计图的差异，优化页面细节样式， 及时发现问题并且进行修改。并且利用IEtext查看页面的兼容性，当所有 细节与兼容问题修改完毕后，就要对制作文件进行代码优化，尽可能的压缩 文件大小和减少外部http 的链接请求数，优化访问速度。 该流程是参照公司开发流程制定出来的，以经过很长时间的磨合跟改进， 响应式企业网站设计与实现 7 尽管虽然不是很完美，但是很适合我们现在开发这个项目的需求，优点也是 很明显的，能更好的应对高强度，高质量的开发需求，代码更加容易控制和 修改优化，充分利用时间，提高了开发侠侣 3.2 前端 UI 设计 3.2.1

33、 模块分布 UI 即 User Interface（用户界面）的简称。 UI 设计则是指对页面的人 机交互、操作逻辑、界面美观的整体设计。好的UI 设计不仅是让页面变得 有个性有品味，还要让页面的操作变得舒适、简单、自由，充分体现页面的 定位和特点。 所以 UI 设计师设计中最重要的一点，也可以发挥出更多创意的设计想 法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清 晰 明 了 。 图3-1为 写 意 集 团 响 应 式 企 业 官 网 首 页 ： 图 3-1 写意集团响应式企业官网首屏着陆页 首页的 logo 还设计了一个动画，整个着陆页使用了一张满屏大图。 3.2.2 颜

34、色配置 产 生 丰 富 色 彩 的 三 原 色 是 红 ， 绿 ， 蓝 ， 也 就 是RGB ， 十 六 进 制 是 00 00 00，例如经常写的red ， color:#FF0000 ；缩写color:#F00 ； color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的 颜色，例如绿色和蓝色， 红色和黄色就互为邻近色。 采用邻近色设计网页可以使 网页避免色彩杂乱， 易于达到页面的和谐统一。 我们网站上用的色彩系是属于灰 白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色， 因为写意 集团是一个从事建筑行业的企业，所以网站要体现一种简洁， 自然，稳

35、重的色彩 风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的 色 背景色大量六百，同时背景色要与文字的排列对比强烈一些。首页的顶端使 用，满屏的图片下面用大量六百这两个部分过度的很自然。 在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不 同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。 如果要大面积留白一定要对内容的排版有比较充足的经验，不然不但不能让 用户感到留白的自由感反而多了一丝内容空洞的想法，如果是较深的背景下， 禁 响应式企业网站设计与实现 8 止大面积使用加粗文字。如图3-2 所示： 图 3-2 网站首页导航字体颜色变化 3.

36、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，该样式可将元素改为行内块状元素，将元素 对象呈递为内联元素对象，但是元素对象的内

37、容作为块对象元素呈递。旁边 的内联对象元素会被呈递在同一行内，允许空格，即可以让元素同时拥有块 状元素设置宽高行高等特性，同时也具有行内元素的同一行内显示。但对于 这个属性不是所有浏览器都识别，兼容性较差，而且会留下默认的外边距， 而且不能通过 margin：0 样式去掉，解决方法是利用浮动float来解决。 CSS 盒模型 : 网页设计中常听的属性名：内容(content)、填充 (padding) 、边框 (border) 、边界 (margin) ， CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解， 日常生活中所见的盒子也就是能装东西的一种

38、箱子，也具有这些属性，所以 叫它盒子模式。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维 模型。 内 边 距padding ： 元 素 的 内 边 距 在 边 框 和 内 容 区 之 间 。 padding:20px 15px 5px 10px; 上20px 右15px 下5px 左10px； padding:10px 5px 15px; 上 右 左 下padding:10px 15px; 上 右 下 左 无标题文档 这个 的宽度实质已经增加了40px 外边距 margin：围绕在元素边框的空白区域是 外边距。margin 支持负值，在页面布局中，应该大胆的用，可以解决很

39、多问 题。最常用的就是div居中 :margin:0 auto; 当然一定要固定宽度。 无标题文档 这个属性是无法居中的，如图所示 3-3 所示： 响应式企业网站设计与实现 9 3-3 盒子模型 3.3 交互设计与 UI 交互设计是一种目标导向设计，所有的工作内容都是在围绕着用户行为去设 计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业 务目标，获得愉快的用户体验。 如果是广义的UI 设计，应该包括原型设计、交互设计、视觉设计。狭义的 UI 往往只是人们看到的最后一个环节UI 视觉设计，交互是当用户发生动作事件， 所产生的反映。 比如点击弹出下拉菜单， 浏览过链接的颜色变

40、紫， 这都是非常细 微的交互，但却处处体现着用户体验。 交互设计更多是对用户行为响应的设计,UI 视觉设计，更多是界面的外观静态设计。 所以这种情况下，交互设计尤为重要，既不能失去UI 设计的特性，又要确 保 UI 设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术 3.4 网站结构布局与设计 3.5.1 网站首页结构 实际内容占据网页的大部分空间，为50% 80% ，导航部分不超过20% 。 颜色的选择以灰白色为主， 没有使用太多的颜色来修饰某个对象，此外，正， 一般字色为默认的近黑色， 并且用了不同的背景色条或大图与留白区区分正 文区与其他功能区。为了提高网页的可读性，标题区，标题

41、行和正文区使用 了不同大小的字体，正文使用的是静止的文字，且字体足够大，颜色各方面 易于辨认，以便于阅读。 写意集团响应式企业官网网站主要用来进行公司信息发布，公司资源展 示。作为一个网站，应该由一些相关及相对独立的模块整合而成。本网站系 统主要包括以下几个主要页面及几个大的模块，每个页面包含丰富的内容， 每个大的模块下又细分为几个的功能模块。 制作前台页面模块，包括主页及各个子页面，建立各个页面之间的相关 链接，。整体网站遵循写意集团响应式企业官网网站的设计思路，拥有完善 响应式企业网站设计与实现 10 的功能，风格要求简洁大方不单调。各个子页面都可正常返回主页以及正确 连接到各个子页面。功

42、能要求使用简单全面，容易操作。 3.5.2 主题鲜明，富有特色 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的 整体风格和特色做出定位，规划网站的组织结构。 整个首页大量运用动画以及目前常用的简单却用户体验好的效果，要做 到主题鲜明突出，力求简洁，要点明确，以简单动作与交互让用户更好的了 解网站的主题内容，吸引对本站点有需求的人的视线，对无关的人员也能留 下一定的印象。对于一些LOGO 标志也都给充分利用起来，在首页的logo 首 次加载的时候做了一个logo 动画，以其来吸引用户注意力。调动一切手段 充分表现网站的个性和情趣，突出个性，这样才能够办出网站的特色。 3.5 网站

43、前台页面设计 写意集团响应式企业官网主要包括：首页，关于写意，企业文化，新闻 中心，人才招聘，联系我们等9 个子页面。制作过程如下： 3.5.1 首页 网站制作过程：首先利用Photoshop 以宽度为 1920px，高度自动排列， 制作了网站的首页设计图，之后使用Webstorm 中用布局出整个首页的大体 布局格式，主要分为6 部分，虽然设计图宽为1920，但当屏幕不适配1920 宽度的时候，对其进行自适应满屏，并且因为要实现一个“滚一屏”效果， 故每个板块高度也要自适应高度。 然后通过 CSS 样式来调布局样式以及图片， 文字的位子。主页包括的内容主要有：网站的域名，导航条，LOGO ，版

44、权。 导航条又包含首页，关于写意，企业文化，新闻中心，人才招聘，联系我们 等。 3.5.2 其余子页面 子页面的设计风格基本一致，导航栏跟随浏览器滚动，始终贴在浏览器 窗口上方，下面是满屏幕宽度的banner 图，下方便是各大模块内容的显示； 制作过程中采用的制作方法和调用的模块内容跟上一个差不多 3.7 本章小结 本章主要介绍了写意集团响应式企业官网的具体布局，具体结构。也说明了 前端页面从设计到代码编写的基本工作流程，讲述了界面UI 设计和交互设计中 的一些理论和真是设计效果。 响应式企业网站设计与实现 11 第四章主要功能的实现 4.1 界面设计 完善的网站内容。 网站的整体颜色： 灰白

45、色为导航颜色； 主体颜色： 灰白色； 字体：微软雅黑；行距：150% 。 网站统一顶部为导航条， 首页，关于写意， 企业文化， 新闻中心， 人才招聘， 联系我们。 首页网站上中部： banner 图片。 网站中部：网站信息；站点数据；图文信息。 网站底部：网站 / 版面制作；版权信息。 其中网站的导航条会一路跟随屏幕滚动 4.2 具体设计文档 内容和功能设计 这个企业网站主要实现企业信息展示，公告展示等功能。先明确各板块提供 的主要功能： 首页功能板块： 旗下品牌（默认灰色，当鼠标移上去有一个变彩色的过程，起聚焦）； 服务项目（默认灰色，当鼠标移上去有一个变彩色的过程，起聚焦）； 服务领域（响

46、应式九宫格，当鼠标移上去，图片会以中心点向外放大）； 企业荣耀（静态数据，显示企业参与的项目） 合作商家（众多合作商家logo 排列） 版权（版权信息） 子页面功能如子页面标题所示； 4.3 前台新闻文摘显示 4.3.1 网站装饰风格 采用了灰白色为主导航颜色，首页中运用滚一屏效果，以及各种css 动 画或者 javascript效果，使整个网站看上去虽大部分为灰白色，但不失其 灵动。 4.3.2 网站的链接结构 校园网站的主要链接关系如下： 首页，关于写意，企业文化，新闻中心，人才招聘，联系我们等 其中关于写意，企业文化，新闻中心，有一个Javascript效果，整合在 一个按钮上，用一个下

47、拉方式展示 4.4 可视化设计 网站可视化设计的主要目的是提供给用户一个关于网站的信息展示方 案，一个良好有效的网站可视化设计能给用户留下深刻的印象，使得用户能 够自然，友好的浏览 Web 站点所提供的信息， 也是网站设计中重要的一环。 可视化设计最重要的是确定网站的页面布局。然后设计网页的表现框架， 建立页面模型。 响应式企业网站设计与实现 12 4.5 具体实现技术 4.5.1 css 在“写意集团响应式企业官网”中的应用实例 在该网站中使用了大量css 动画，使页面有了特殊的显示效果 写意集团响应式企业官网中CSS样式表使用的部分代码： .serviceArea_main ul li:h

48、over a img transform: scale3d(1.1,1.1,1); -webkit-transform: scale3d(1.1,1.1,1); -moz-transform: scale3d(1.1,1.1,1); -o-transform: scale3d(1.1,1.1,1); -ms-transform: scale3d(1.1,1.1,1); position: relative; .serviceArea_main ul li:hover .s_Area_gai p transform-style: preserve-3d; .serviceArea_main ul

49、 li a img transition:1s; top: 0; left:0; z-index:9; width: 100%; vertical-align: top; 以上样式是用于设置首页的服务领域一部分的CSS效果，当鼠标移上去 的时候，首先图片上方会有一个黑色的遮罩，然后图片有一个逐渐放大的效 果，但不撑开外面的DIV，其中 transform: scale3d(1.1,1.1,1);为控制图 片缩放，其下方还有加了 -webkit- ，-moz-，-o- ，-ms-前缀的样式，目的是 兼容别的浏览器厂商； transition:1s;改样式用于设定动画的过渡时间，如 果缺少则无法上述的图片缩放样式将没有动画，而只是直接把图片放大1.1 倍； 4.5.2 应用 Javascript设计网页 JavaScript是一种基于对象 (Object) 和事件驱动 (Event Driven) 并具 有安全性能的脚本语言。 使用它的目的是与HTML 超文本标记语言， Java 脚 本语言（ Java 小程序）一起实现在一个Web页面中链接多个对象，与Web 客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入或调入在 标准的 HTML 语言中实现的。它的出现弥补了HTML 语言的缺陷 17 。 JavaScript