web前端毕业设计论文

毕 业 论 文

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

学生姓名： 罗智刚 学号： **********

专业班级： B12计算机科学与技术2班

指导教师： **

企业导师： 林志宏

二级学院： 电气与信息工程学院 2015版

摘 要

在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越被人们接受，并且融入我们的生活。在2015年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。

本论文主要围绕写意集团的HTML5响应式网站为开发主题，用到的也是最必备的三个技能元素，在布局页面时，用HTML将元素进行定义，布局基础布局；css对展示的HTML元素布局进行定位渲染，然后利用Javascript或者jQuery实现相应的效果和交互。虽然这么看起来很简单，但这里需要认真了解的东西很多。在开发前，需要对这些概念弄清楚，在开发过程中还要考虑兼容，性能等各种问题。

分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及HTML5响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析

实现中的难点和重点；

关键词：HTML5; 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 information 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 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. Although 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 implementation

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; javascript; website

landscaping; Interactive Design目 录

第一章 绪 论 0

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

1.2 国内外HTML5响应式企业网站建设的状况 ................. 1

1.3本章小结 ............................................. 2

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

2.1 HTML5前端开发环境 ................................... 3

2.2 HTML5前端开发工具 ................................... 3

2.3 HTML5前端开发相关技术 ............................... 4

2.3.1 javascript简介 .................................... 4

2.3.2 javascript基本特点 ................................ 5

2.3.3 css简介 .......................................... 6

2.3.4 jQuery ............................................ 7

2.4 本章小结 ............................................ 8

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

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

3.1.1 分层开发 .......................................... 9

3.1.2 代码编写 .......................................... 9

3.1.3 内部测试与后续优化 ............................... 10

3.2 前端UI设计 ........................................ 11

3.2.1 模块分布 ......................................... 11 3.2.2 颜色配置 ......................................... 12

3.2.3 css元素 ......................................... 13

3.3 交互设计与UI ...................................... 15

3.4 网站结构布局与设计 ................................. 16

3.5.1 网站首页结构 ................................... 16

3.5.2 主题鲜明，富有特色 ............................. 16

3.5 网站前台页面设计 ................................... 17

3.5.1 首页 ............................................. 17

3.5.2 其余子页面 ....................................... 17

3.7 本章小结 ........................................... 18

第四章 主要功能的实现 18

4.1 界面设计 ........................................... 18

4.2 具体设计文档 ....................................... 19

4.3 前台新闻文摘显示 ................................... 19

4.3.1 网站装饰风格 ..................................... 19

4.3.2 网站的链接结构 ................................... 19

4.4 可视化设计 ......................................... 20

4.5 具体实现技术 ....................................... 20

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

4.6 本章小结 ........................................... 24

第五章 总结 142

致谢 143