官网基于html5的微官网设计与实现

阳光学院

本科毕业论文、毕业设计题 目:基于HTL5的微官网设计与实现

系 别:计算机工程系

专 业:计算机科学与技术

年 级:2014级

学 号:4110  909

姓 名:黄陈力

指导教师

年 月 日

基于HTL的微官网设计与实现

摘要

微信的商业价值不断凸显睿智的企业主跃跃欲试,一个属于移动互联网的大时代呼之欲出手机用户正在逐渐成为企业的主要消费人群用户大多更倾向于使用手机、平板等终端工具浏览信息,企业如果要想获得更多用户的青睐,手机官方网站的设计与实现就显的尤为重要,微官网是一种基We Ap和PC版网站相融合的新型网站,建立微官网对提升企业形象促进企业产品宣传,提升用户产品体验从而赢得更多的移动客户群体等均起到了重要推动作用成为企业进行营销的另一种方式和途径。

论文主要是完成基于HTL5的微官网设计与实现以文字、 图片、视频等多种丰富的多媒体形式向客户展示企业产品信息。微官网的页面呈现主要是基于当前流行的TM 5的新特性,运用HTML5技术,优化网站的显示,能够自动识别窗户屏幕大小,完全适用于手机、平板网站内容精简,加载速度非常快让手机用户更方便的浏览信息同时兼具一键拔打电话、 一键分享及在线留言、地图导航等功能,让微官网内容展示更加丰富,管理更加便捷。

系统主要基于SP.NET进行程序开发,利用SQL rv  r数据库来存储数据同时采用 TML 技术来实现微官网的页面展示。论文首先分析了系统的开发环境接着重点介绍了系统的可行性分析、系统的概要设计及详细设计,技术实现难点最后完成了系统的功能测试。本论文主要实现基于 的漳州市宏博油画微官网,该网站经过一段时期的运行测试,能以丰富的图文形式向用户展示企业信息,企业的油画产品,完成企业产品信息的管理,实现了企业与客户之间的互动交流从而提高企业在移动网络里的宣传力度,从而为企业赢得更多的移动客户群体。

关键词:微官网 TL5 ASP NET

目 录

1绪论. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

1 .1研究现状. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

1 .2 发展前景. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

  本论文的创新点. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

系统开发工具. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

2  1HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

2.2 .ET. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

2. Qrve . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

系统分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

3.1项目概述. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

3  2 需求分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

.3可行性分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

. . 1 经济可行性分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

3.3.2社会可行性分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

3.3   技术可行性分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

.4 业务分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

3.5数据流分析. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4 系统设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

4   功能模块设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

4.2数据库设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

4.3 程序设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

5系统测试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27

5.1 系统测试的重要性. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27

5.测试实例的研究与选择. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28

5. 系统运行情况与评价. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

结论. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41

1绪论

1 . 1研究现状

依据中国网络发展现状调查得出,我国手机上网的人数已达6亿多,与2  14年相比,人数上增 303万人,如图1-1所示。可见,手机已经成为每个人不可或缺的部分。移动互

联网成为一种方便快捷的信息获取手段和沟通交流方式,它已经深深融入手机用户群体的日常生活之中。

图  -  手机用户比例图

在移动网络发展中,特别是4G 1]的产生,移动网络的优越性愈发凸显,使得人们与移动设备和移动互联网的接触越来越频繁。随着手机的智能化发展,安装不同操作系统的手机,具备了功能强大的浏览器后使得它的功能跟电脑操作显示的效果更加接近。手机的换

代也使得手机的浏览器随着不断的优化和升级,这也为HTML 技术在移动移动网络方向的发展提供源源不断的动力。

由此,用户大多使用手机进行信息浏览。但是很多的网站在手机上的显示效果并不好。网站的设计因此出现了新的要求,就是网站必须要适应移动设备显示,这使得手机网站由此诞生。运用HTL 技术,优化网站的显示让手机用户更方便的浏览信息。手机网站可以图文并茂的展现企业的信息从而为企业的营销市场开拓了一条宽阔的道路。

1 .2 发展前景

如今,层出不穷的现代信息技术服务模式对传统信息化服务系统产生一定的影响。用户大多使用手机浏览信息,而企业要想获得手机用户的青睐手机网站的搭建就必不可少。微网站靠着移动网络和手机网站的支持成为企业进行营销的另一种方式和途径。在现在手机用户居多的情况下,建立微官网将能够是用户有更好的体验,从而提升企业的形象,赢得更多的移动客户群体,推动企业的发展。

微官网是一种基于WebApp和传统版网站相融合的新型网站。可迅速与微信、微博等网络互动咨询平台链接。 [2微官网能够实现用户随时随地通过手机了解企业信息,而且还能实现一键通话、新闻评论和留言等等的功能。

微官网比电脑版网站更有优势。它是应移动互联网的大环境而生的移动互联网为微官网搭建了一个随时可供浏览的大平台。而相对于电脑版的官网,微官网省去了很多的操作步骤符合现代的快节奏生活环境让用户有更方便快捷的体验。微官网不仅仅实现了电脑版网页应该有的功能,而且能够以更完美的显示效果呈现给手机用户。微官网具有网站内容精简页面资源小,加载速度非常快,可以和微信公共平台完美结合的特点。微官网作为展示、营销、互动和服务的载体可以包罗绝大部分功能的实现,它将成为中小

型企业必不可少的重要部分。

现在的移动网络社会中出现越来越多的借助微信浏览器而开发的新型网站,而微官网的设计与实现将对企业的营销能够起到一定的作用。

  本论文的创新点

当前层出不穷的现代信息技术服务模式,对传统信息化服务系统产生了深远的影响,如果企业要想获得更多用户的青睐,手机网站的设计与实现就显的尤为重要,这就为微官网的产生与发展奠定良好的基础。本文旨在完成一款美观实用的基于TML 的企业微官网的设计与实现,本文的创新点在于:

(1 引入微官网设计理念,实现跨平台的营销型网站。

微网站是一种跨移动平台的营销型网站它源于We App和网站的融合创新,兼容 OS、 androi 、WP等各大操作系统,可以便于微信、微博等应用的链接,适应现在移动客户端浏览市场,是符合浏览体验与交互性能要求的新一代网站。

2引入当前流行的HML5技术来完成微官网的页面设计与展示。

采用当前流行的T 5技术来完成微官网的页面设计与展示。优化网站的显示能够自动识别窗户屏幕大小,完全适用于手机、平板,网站内容精简加载速度非常快,让手机用户更方便的浏览信息。

 系统开发工具

2 1 HTML

HTL5简称“5”)是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTL的第五次重大修改。 目前 H5技术正处于不断发展的过程中作为

移动轻应用,它在未来具有无限可能,潜力巨大。 [3]

HML5是W3C和谷歌、苹果等几百家公司一起得出来的成果。 TML5最大的好处在于它是一个开放的技术,而且具有基于ebkit  ]内核的浏览器这个最大的特点,将会是未来移动开发技术的发展趋势。 当今主流浏览器都支持HL ,TML5在未来的5-1 年中将成为移动发展的一个重要因素。

HTML5以开放的W b标准为基础,开发出来的较为完备的新的编程规范。它具有视频和音乐的展示以及动态的效果,具备强大的离线存储功能等等的特点。运用HT技术进行设计,简单易懂易用,它可以实现让同一张网页自动适应不同大小的屏幕,再根据屏幕宽度,自动调整进行页面布局。 HTL 技术能够在移动设备上支持多媒体。它具有新的语法特征,也能够实现一些新的功能,用户与文档的交互方式受到了本质性的改变。

从性能角度来说,HTML 首先是缩减了HTML文档,使这件事情变得更简单。从用户可读性上说,原先一大堆东西对初学者来说第一次看到这些东西是看不懂的,而HL5的声明方式对用户来说显然更友好一些。

2.2 .ET

AS  E是.NET Frmeor 的一部分,是一项微软公司的技术,是一种使嵌入网页中的脚本,是可由因特网服务器执行的服务器端脚本技术。它可以在通过HT请求文档时在W b服务器上动态创建Active Server Pa   s(动态服务器页面 ,并且运行于 ISi n  ows开发的W b服务器之中的程序。

在微软的.NET战略中,新推出的S.NE。它是建立在公共语言运行库的基础上,借鉴了 ava技术的优点。ASP.NET的推荐语言是C harp[5]语言,对以前的ASP安全性差等缺陷进行了相当大的改进。在执行SP.NET的时候,程序引擎调用了系统中的

I IS[6]服务器执行对嵌在HTML中的ASPX文件进行解释,最终以页面的形式显示。

但是,使用APNT还是具有一定的局限性。 因为从某种角度来说,它们只能良好的运行于微软的Windos N/2000/P和  S的服务器平台上。没有和Chi l l iSoft[7]一样提供在UNIX/ inux上运行P的解决方案。所以,平台的局限性和AP.ET的安全性限制了AS.NT的广泛运用。

2. Q rve 

QL是英文S  ruct   ed Quer Langu   e的缩写中文称作结构化查询语言。 SQL被几乎一切的数据库操作命令所认同,成为关系型数据库管理系统的标准语言。QL命令的输入能够实现对数据库的操作和管理。比如在数据库中进行增加、删除和更新数据或者从数据库中提取数据等一系列的操作进行数据的管理。 SQL数据库是储存和管理数据信息的智能化操作平台。 8

SQL S rv  r是由Micro  of 开发和推广的关系数据库管理系统(DBMS ,它最初是由Mi   osoft、 S base和Ashto -Tate三家公司共同开发的。它的性能超群,集成了ind ws NT/2000平台[9] ,与eb搭建配合紧密,得到网络和存储技术的支持,使得最大限度地提高了WEB站和企业的应用的扩展性和保障性,应用于In  ernet领域。而且,SL Ser  er提供了十分便民的缺省安装和使用方法,使用起来难度并不大。此外,SQ S rver还能够兼顾规模不同的应用,具有很强的实用性。

其中QL Server    8是一个重大的产品版本,它推出了许多新的特性和关键的改进,是较为强大和全面的SQL erver版本。 SQL Se  v  r2   8允许在使用Mi  ros  f  .T和V  s  al Stu  io开发的自定义应用程序中使用数据,在面向服务的架构S)和通过M  cr soft Bizalk Server进行的业务流程中使用