毕业设计(论文)-基于HTML5的微官网设计与实现.doc

基于HTML5的微官网设计与实现
阳光学院
本科毕业论文、毕业设计

题 目：基于HTML5的微官网设计与实现

系 别：计算机工程系
专 业：计算机科学与技术
年 级：2014级
学 号：2414101909
姓 名：
指导教师：

年 月 日

基于HTML5的微官网设计与实现
基于HTML5的微官网设计与实现
摘要
微信的商业价值不断凸显，睿智的企业主跃跃欲试，一个属于移动互联网的大时代呼之欲出，手机用户正在逐渐成为企业的主要消费人群，用户大多更倾向于使用手机、平板等终端工具浏览信息，企业如果要想获得更多用户的青睐，手机官方网站的设计与实现就显的尤为重要，微官网是一种基WebAp和PC版网站相融合的新型网站，建立微官网对提升企业形象，促进企业产品宣传，提升用户产品体验，从而赢得更多的移动客户群体等均起到了重要推动作用，成为企业进行营销的另一种方式和途径。
论文主要是完成基于HTML5的微官网设计与实现，以文字、图片、视频等多种丰富的多媒体形式向客户展示企业产品信息。微官网的页面呈现主要是基于当前流行的HTML5的新特性，运用HTML5技术，优化网站的显示，能够自动识别窗户屏幕大小，完全适用于手机、平板，网站内容精简，加载速度非常快，让手机用户更方便的浏览信息，同时兼具一键拔打电话、一键分享及在线留言、地图导航等功能，让微官网内容展示更加丰富，管理更加便捷。
系统主要基于ASP.NET进行程序开发，利用SQLServer数据库来存储数据，同时采用 HTML5技术来实现微官网的页面展示。论文首先分析了系统的开发环境，接着重点介绍了系统的可行性分析、系统的概要设计及详细设计，技术实现难点，最后完成了系统的功能测试。本论文主要实现基于HTML5的漳州市宏博油画微官网，该网站经过一段时期的运行测试，能以丰富的图文形式向用户展示企业信息，企业的油画产品，完成企业产品信息的管理，实现了企业与客户之间的互动交流，从而提高企业在移动网络里的宣传力度，从而为企业赢得更多的移动客户群体。

关键词：微官网 HTML5 ASP.NET

1

基于HTML5的微官网设计与实现
目 录
1 绪论 1
1.1 研究现状 1
1.2 发展前景 2
1.3 本论文的创新点 2
2 系统开发工具 3
2.1 HTML5 3
2.2 ASP.NET 3
2.3 SQLServer 4
3 系统分析 5
3.1 项目概述 5
3.2 需求分析 5
3.3 可行性分析 6
3.4 业务分析 7
3.5 数据流分析 8
4 系统设计 13
4.1 功能模块设计 13
4.2 数据库设计 14
4.3 程序设计 16
5 系统测试 19
5.1 系统测试的重要性 19
5.2 测试实例的研究与选择 20
5.3 系统运行情况与评价 22
6 系统展示 23
6.1 前台展示模块 23
6.2 后台管理模块 26
结论 30
参考文献 31
附录一 32
致谢 36

1

基于HTML5的微官网设计与实现
1 绪论
1.1 研究现状
依据中国网络发展现状调查得出，我国手机上网的人数已达6亿多，与2014年相比，人数上增6303万人，如图1-1所示。可见，手机已经成为每个人不可或缺的部分。移动互联网成为一种方便快捷的信息获取手段和沟通交流方式，它已经深深融入手机用户群体的日常生活之中。
图 1-1 手机用户比例图
在移动网络发展中，特别是4G[1]的产生，移动网络的优越性愈发凸显，使得人们与移动设备和移动互联网的接触越来越频繁。随着手机的智能化发展，安装不同操作系统的手机，具备了功能强大的浏览器后，使得它的功能跟电脑操作显示的效果更加接近。手机的换代也使得手机的浏览器随着不断的优化和升级，这也为HTML5技术在移动移动网络方向的发展提供源源不断的动力。
由此，用户大多使用手机进行信息浏览。但是，很多的网站在手机上的显示效果并不好。网站的设计因此出现了新的要求，就是网站必须要适应移动设备显示，这使得手机网站由此诞生。运用HTML5技术，优化网站的显示，让手机用户更方便的浏览信息。手机网站可以图文并茂的展现企业的信息，从而为企业的营销市场开拓了一条宽阔的道路。
1.2 发展前景
如今，层出不穷的现代信息技术服务模式，对传统信息化服务系统产生一定的影响。用户大多使用手机浏览信息，而企业要想获得手机用户的青睐，手机网站的搭建就必不可少。微网站靠着移动网络和手机网站的支持，成为企业进行营销的另一种方式和途径。在现在手机用户居多的情况下，建立微官网将能够是用户有更好的体验，从而提升企业的形象，赢得更多的移动客户群体，推动企业的发展。
微官网是一种基于WebApp和传统PC版网站相融合的新型网站。可迅速与微信、微博等网络互动咨询平台链接。[2] 微官网能够实现用户随时随地通过手机了解企业信息，而且还能实现一键通话、新闻评论和留言等等的功能。
微官网比电脑版网站更有优势。它是应移动互联网的大环境而生的，移动互联网为微官网搭建了一个随时可供浏览的大平台。而相对于电脑版的官网，微官网省去了很多的操作步骤，符合现代的快节奏生活环境，让用户有更方便快捷的体验。微官网不仅仅实现了电脑版网页应该有的功能，而且能够以更完美的显示效果呈现给手机用户。微官网具有网站内容精简，页面资源小，加载速度非常快，可以和微信公共平台完美结合的特点。微官网作为展示、营销、互动和服务的载体，可以包罗绝大部分功能的实现，它将成为中小型企业必不可少的重要部分。
现在的移动网络社会中，出现越来越多的借助微信浏览器而开发的新型网站，而微官网的设计与实现将对企业的营销能够起到一定的作用。
1.3 本论文的创新点
当前层出不穷的现代信息技术服务模式，对传统信息化服务系统产生了深远的影响，如果企业要想获得更多用户的青睐，手机网站的设计与实现就显的尤为重要，这就为微官网的产生与发展奠定良好的基础。本文旨在完成一款美观实用的基于HTML5的企业微官网的设计与实现，本文的创新点在于：
（1）引入微官网设计理念，实现跨平台的营销型网站。
微网站是一种跨移动平台的营销型网站，它源于WebApp和网站的融合创新，兼容iOS、android、WP等各大操作系统，可以便于微信、微博等应用的链接，适应现在移动客户端浏览市场，是符合浏览体验与交互性能要求的新一代网站。
（2）引入当前流行的HTML5技术来完成微官网的页面设计与展示。
采用当前流行的HTML5技术来完成微官网的页面设计与展示。优化网站的显示，能够自动识别窗户屏幕大小，完全适用于手机、平板，网站内容精简，加载速度非常快，让手机用户更方便的浏览信息。
2 系统开发工具
2.1 HTML5
HTML5（简称“H5”）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。目前，H5技术正处于不断发展的过程中，作为移动轻应用，它在未来具有无限可能，潜力巨大。[3]
HTML5是W3C和谷歌、苹果等几百家公司一起得出来的成果。 HTML5最大的好处在于它是一个开放的技术,而且具有基于Webkit[4]内核的浏览器这个最大的特点，将会是未来移动开发技术的发展趋势。当今主流浏览器都支持HTML5，HTML5在未来的5-10年中，将成为移动发展的一个重要因素。
HTML5以开放的Web标准为基础，开发出来的较为完备的新的编程规范。它具有视频和音乐的展示以及动态的效果，具备强大的离线存储功能等等的特点。运用HTML5技术进行设计，简单易懂易用，它可以实现让同一张网页自动适应不同大小的屏幕，再根据屏幕宽度，自动调整进行页面布局。HTML5技术能够在移动设备上支持多媒体。它具有新的语法特征，也能够实现一些新的功能，用户与文档的交互方式受到了本质性的改变。
从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。
2.2 ASP.NET
ASP.NET是.NET FrameWork的一部分，是一项微软公司的技术，是一种使嵌入网页中的脚本，是可由因特网服务器执行的服务器端脚本技术。它可以在通过HTTP请求文档时，在Web服务器上动态创建Active Server Pages（动态服务器页面），并且运行于IIS（Windows开发的Web服务器）之中的程序。
在微软的.NET战略中，新推出的ASP.NET。它是建立在公共语言运行库的基础上，借鉴了Java技术的优点。ASP.NET的推荐语言是C Sharp[5]语言，对以前的ASP安全性差等缺陷进行了相当大的改进。在执行ASP.NET的时候，程序引擎调用了系统中的IIS[6]服务器，执行对嵌在HTML中的ASPX文件进行解释，最终以页面的形式显示。
但是，使用ASP.NET还是具有一定的局限性。因为，从某种角度来说，它们只能良好的运行于微软的 Windows NT/2000/XP 和IIS的服务器平台上。没有和ChilliSoft[7]一样，提供在UNIX/Linux上运行ASP的解决方案。所以，平台的局限性和ASP.NET的安全性限制了ASP.NET的广泛运用。
2.3 SQLServer
SQL是英文Structured Query Language的缩写，中文称作结构化查询语言。SQL被几乎一切的数据库操作命令所认同，成为关系型数据库管理系统的标准语言。SQL命令的输入能够实现对数据库的操作和管理。比如，在数据库中进行增加、删除和更新数据，或者从数据库中提取数据等一系列的操作进行数据的管理。SQL数据库是储存和管理数据信息的智能化操作平台。[8]
SQL Server是由Microsoft开发和推广的关系数据库管理系统（DBMS），它最初是由Microsoft、Sybase和Ashton-Tate三家公司共同开发的。它的性能超群，集成了Windows NT/2000平台[9]，与Web搭建配合紧密，得到网络和存储技术的支持，使得最大限度地提高了WEB站和企业的应用的扩展性和保障性，应用于Internet领域。而且，SQL Server 提供了十分便民的缺省安装和使用方法，使用起来难度并不大。此外，SQL Server还能够兼顾规模不同的应用，具有很强的实用性。
其中SQL Server 2008是一个重大的产品版本，它推出了许多新的特性和关键的改进，是较为强大和全面的SQL Server版本。SQL Server 2008允许在使用Microsoft .NET和 Visual Studio开发的自定义应用程序中使用数据，在面向服务的架构（SOA）和通过 Microsoft BizTalk Server进行的业务流程中使用数据。它可以组织管理任何数据，可以将结构化、半结构化和非结构化文档的数据直接存储到数据库中。还能够对数据进行查询、搜索、同步、报告和分析之类的操作。信息工作人员可以直接访问数据，是一个可信的、高效率智能数据平台，可以满足用户的所有数据需求。
3 系统分析
3.1 项目概述
本文所设计与实现的是针对中小企业而开发的一款以信息管理系统为基础（涉及到企业信息的展示和管理）的微官网。它以广泛的调查为基础，满足用户的需求，以此来提升企业的信息管理水平以及优化资源管理，从而尽可能使得成本有所降低，统筹安排以实现利益的最大化效益。
微官网是网络环境下网站移动化发展的典型代表，适应手机的体验让用户对其依赖程度越来越高。所面向的用户人群:员工、信息管理员、移动终端客户群众。
我们的系统设计需要达到的目标：
（1）建立操作简单易用、具备良好交互性的微官网。
（2）动态显示企业信息，制作成本尽量低，注重实用性。
（3）该网站可为让广大手机用户更加方便了解企业的情况。
3.2 需求分析
企业建立微官网的目的是为了在移动互联网上对手机用户进行宣传与推广，提高企业的知名度。我们可以通过建立覆盖面积广的、统一的网站，进一步实现企业在网上发布相关行业信息，以及规范和优化市场的信息。
3.2.1 功能需求
根据企业对微官网的需求，我将采用B/S模式开发系统。前台的功能主要包括：信息展示、地理定位、信息分享、一键拨号、用户评论、用户留言。而在后台的管理中，它主要功能包括：信息管理、留言管理和评论管理。其中，信息管理又包括产品管理、新闻管理、图库管理和视频管理。具体详细的功能描述如下：
（1）信息展示：用户能对产品信息、新闻信息、视频信息进行浏览。
（2）地理定位：系统可以定位企业的具体位置。
（3）信息分享：用户可以对企业信息分享到其他网络平台。
（4）一键拨号：用户可以更加便捷地与企业相关人员进行沟通。
（5）用户评论：用户可以进行对具体的新闻信息进行评论。
（6）用户留言：用户可以根据自身情况对企业进行留言。
（7）信息管理：管理员能够对产品信息、新闻信息和视频信息的发布、修改和删除。
（8）评论管理：管理员审核用户的评论，通过审核则对评论进行回复，审核不通过则删除评论。
（9）留言管理：留言信息管理员无需回复，但是他可以根据用户留言信息里的联系方式，拨打电话直接与留言用户取得联系。
3.2.2 性能需求
根据用户对功能的需求，系统对于性能的要求如下：
（1）响应性：系统响应时间迅速，能够满足用户要求。
（2）适应性：在操作系统、运行环境、使用设备改变的情况下，系统能够自动适应，有相应的布局调整。
（3）可使用性：操作便捷，能够对输入的格式和数据的类型进行验证，并采用友好的错误提醒，使用户能够输入正确的数据，便于用户的正确操作。
（4）可维护性：采用的B/S结构，更加有利于管理人员的维护。
3.2.3 其他需求
微官网使用ASP.NET进行开发与设计，程序需上传至阿里云虚拟主机中。其中，Web服务器主要环境是：Microsoft-IIS，.NET版本为4.0，使用SQLServer2008数据库。
微官网主要是在Android、iOS、WP系统的手机上运行，此外能支持PC计算机运行。具有基本配置的硬件设备都能满足微官网的正常运行。
3.3 可行性分析
可行性分析主要的活动是要对所研究开发的课题的可行性做一个详细的分析。微官网能够展示信息，并且实现对信息的管理。通过微官网的建立，增强企业与客户之间的联系，使客户能够及时了解企业的信息，更好的服务于客户，进而增强企业和客户之间的友好业务关系。通过对经济、技术、社会等方面的分析来确定微官网能否成功开发。
3.3.1 经济可行性分析
根据用户的需求，分析其经济可行性。微官网可以很方便的对各种各样的产品信息进行采辑和发布，管理人员可以方便快捷地发布产品信息。企业采集到发布的信息的时间周期缩短，人力开支也随之减少，从而提高了服务的品质。
APP的开发、维护和推广成本高，而微官网是一种轻APP化的产品，使用他能让企业的开发和维护成本降低，有利于在线上和线下进行宣传和推广，获得更多的经济效益。
在经济上，建立微官网是可行的。
3.3.2 社会可行性分析
移动网络技术飞速发展，手机用户不断增加，用手机浏览信息的人更是越来越多。可见，微网站己成为新兴的社会信息聚合平台。信息互动、新闻动态通通聚集在这里，形成有一种特殊的社会。而微官网的建设，正是将企业在特殊社会中的突出展现，企业形象和知名度有进一步提升，从而推动服务的创新以及与客户良性互动。
在社会上，建立微官网是可行的。
3.3.3 技术可行性分析
微官网的建立是利用ASP.NET和SQLServer技术进行WEB应用的开发，这样能够降低用户对客户端的需求。使用HTML5技术，使得HTML页面更适合移动用户的体验。在原有门户网站的基础上，使用HTML5技术，按移动门户的展现标准，使得页面更适合移动用户的体验，同时还能够兼容各大手机操作系统。
在技术上，建立微官网是可行的。
3.4 业务分析
业务分析是对系统的业务流程进行分析，这样能够知道使用者的操作流程，然后对应这样的流程，设计功能来完成数据之间的传递。业务流程的分析能够看出系统所需实现的功能。
根据用户对功能的需求，我反复研究后，得出的微官网的业务流程，如图3-1所示。

图 3-1 业务流程图
3.5 数据流分析
数据流图能够明确的表示数据及其流动的方向，能够从其中直观深刻的看到数据的流动，还可能体会到系统逻辑的完整性。
根据之前对业务流程的分析，我进一步分析各个业务模块之间的数据及数据的流向。我得出微官网的流程图，它包括顶层图（图3-2）和0层图（图3-3），根据0层图细化至1层流程图，它包括登录流程图（图3-4）、产品管理流程图（图3-5）和新闻管理流程图（图3-6）。

图 3-2 微官网顶层数据流图

图 3-3 微官网0层数据流图

图 3-4 登录1层流程图

图 3-5 产品管理1层流程图

图 3-6 新闻管理1层流程图
根据以上的数据流图，我对其中的新闻管理的数据流图进行数据字典的解释。主要内容有数据流（表3-1至3-3）、数据存储（表3-4和3-5）、数据加工项（表3-6）、外部项（表3-7和表3-8）。
表 3-1 新闻信息数据流表
数据流
系统名：微官网
编号：F5
条目名：新闻信息
别名：资讯信息
来源：新闻表
去处：用户
数据流结构：新闻信息=编号+标题+内容+发布时间+点击量
简要说明：新闻资讯的相关信息

表 3-2 回复信息数据流表
数据流
系统名：微官网
编号：F7
条目名：回复信息
别名：返评信息
来源：回复表
去处：留言管理
数据流结构：回复信息=留言编号+回复内容
简要说明：管理员回复的信息
表 3-3 评论信息数据流表
数据流
系统名：微官网
编号：F8
条目名：评论信息
别名：论坛信息
来源：用户
去处：评论管理
数据流结构：评论信息=编号+昵称+内容
简要说明：用户评论的相关信息
表 3-4 新闻数据存储表
数据存储
系统名：微官网
编号：D7
条目名：新闻表
别名：资讯表
存储组织：每个新闻一个记录
主关键字：新闻编号 记录数：约800
记录组成：项目名：新闻编号 新闻标题 新闻内容 发布时间 点击量
近似长度： 5 50 300 50 5
表 3-5 评论数据存储表
数据存储
系统名：微官网
编号：D8
条目名：评论表
别名：论坛表
存储组织：每个评论一个记录
主关键字：评论编号 记录数：约800
记录组成：项目名：评论编号 新闻编号 昵称 评论内容
近似长度： 5 5 50 100

表 3-6 新闻管理数据加工表
数据加工
系统名：微官网
编号：4
条目名：新闻管理
别名：资讯管理
输入数据流：新闻操作信息、评论信息
输出数据流：新闻信息、回复信息
加工逻辑：对新闻信息进行查询、增加、修改和删除
简要说明：对新闻的相关信息进行管理
表 3-7 用户外部项表
外部项
系统名：微官网
编号：E2
条目名：用户
别名：客户
输入数据流：评论信息、留言信息
输出数据流:产品信息、图库信息、新闻信息、视频信息、回复信息、外链信息
主要特征：用户是浏览微官网的人
简要说明：用户浏览微官网，对新闻进行评论，可以给管理员留言。
表 3-8 操作分类部项表
外部项
系统名：微官网
编号：E3
条目名：操作分类
别名：操作类别
输入数据流：操作信息
输出数据流:产品操作信息、新闻操作信息、视频操作信息、外链操作信息
主要特征：管理具体的操作信息
简要说明：根据操作的信息不同，对系统进行不同的操作。

4 系统设计
4.1 功能模块设计
根据对环境的详细的调研，以及用户的需求进行分析，本系统主要有管理员和用户这两种角色，可以将系统划分为前台展示和后台管理这两大模块。其中，前台展示模块的主要功能包括信息展示、用户评论、用户留言、信息分享和一键联系；后台管理模块包括留言管理、信息管理、评论管理和外链管理。具体的系统功能模块，如图4-1所示。

图 4-1 功能模块图

4.2 数据库设计
微官网是采用SQLServer数据库完成设计，是由最广大的手机用户和企建起业共同组来的信息平台，它的开发与设计从数据的检索，到插入或删除等等操作，都依赖于背后的数据库系统的支持。
对系统进行分析后，我在数据库的设计里，需要清楚各个实体之间的联系。对此，我进行数据库的概念结构设计，如图4-2所示。

图 4-2 E-R图
根据以上数据库的实体之间的联系，我进一步对数据库表进行详细的设计。
（1）系统管理员表(admin)主要存储系统管理员信息，如表4-1所示。
表 4-1 管理员表
字段名称
数据类型
主键
自增
允许为空
描述
aId
Int
是
增1
不允许
编号
adminName
Varchar(50)
否
无
允许
登陆账号
adminPwd
Varchar(50)
否
无
允许
登陆密码
（2）产品表(Product)主要存储系统的产品信息，如表4-2所示。
表 4-2 产品表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Gid
Int
否
无
允许
图片编号
Info
Varchar(50)
否
无
允许
产品内容

（3）图库表(Gallery)主要存储系统的图片信息，如表4-3所示。
表 4-3 图库表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Gname
Varchar(50)
否
无
允许
图片标题
Path
Varchar(100)
否
无
允许
存放位置

（4）新闻表(News)主要存储系统的新闻资讯信息，如表4-4所示。
表 4-4 新闻表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Title
Varchar(50)
否
无
允许
新闻标题
Time
Datetime
否
无
允许
发布时间
Photo
Varchar(100)
否
无
允许
新闻图片
Content
text
否
无
允许
新闻内容
Hit
Int
否
无
允许
点击量

（5）评论表(Blog)主要存储系统的新闻评论信息，如表4-5所示。
表 4-5 评论表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Title
Varchar(50)
否
无
允许
新闻标题
Name
Varchar(50)
否
无
允许
用户昵称
Time
Datetime
否
无
允许
评论时间
Nid
Int
否
无
允许
新闻编号
Message
Text
否
无
允许
评论内容
续表4-5
字段名称
数据类型
主键
自增
允许为空
描述
Examine
Varchar(50)
否
无
允许
评论审核
Reply
Text
否
无
允许
回复评论

（6）视频表(Video)主要存储系统的视频信息，如表4-6所示。
表 4-6 视频表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Title
Varchar(50)
否
无
允许
视频标题
Vedio
Varchar(100)
否
无
允许
视频位置
Info
Varchar(50)
否
无
允许
视频内容

（7）留言表(Contacts)主要存储系统的留言信息，如表4-7所示。
表 4-7 留言表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Time
Datetime
否
无
允许
留言时间
Name
Varchar(50)
否
无
允许
姓名
Tel
Varchar(50)
否
无
允许
联系电话
Message
Text
否
无
允许
留言内容

（8）外链表(Extends)主要用于系统管理员对留言信息的管理，如表4-8所示。
表 4-8 外链表
字段名称
数据类型
主键
自增
允许为空
描述
Id
Int
是
增1
不允许
编号
Title
Varchar(50)
否
无
允许
链接标题
Link
Varchar(300)
否
无
允许
链接地址
4.3 程序设计
整个微官网由HTML5标准进行设计。HTML5标准的形式简洁，最显著的标志就是代码首行不带版本信息和其他内容的网页声明，原先的HTML网页声明是一串很长的字符串。HTML5新标签的使用以及运用JQuery能够做出炫丽的2D或3D效果的美化网站，带给人一种耳目一新的感觉。
运用HTML5的预加载功能进行设计。它能够针对指定的地址预加载页面或者页面中的特定资源，利用浏览器的空闲时间去先下载指定的内容，放入缓存。这样，下次浏览这个页面的时候,就能够直接从缓存中取出来，提高页面加载的速度。而我将预加载图库页面和新闻页面，这样来提高图片和新闻页面的加载速度。
运用HTML5的新标签进行页面的设计。
（1）meta标签，使用这个标签强制让文档与设备的宽度保持1：1，适应所以设备的显示。其中，初始缩放比例initial-scale为1.0，也就代表网页初始大小占屏幕面积的100%。
（2）Header标签，用它来将页面的首部进行定义，其中调用了custom.js和easing.js来实现导航栏的滑动开关。
（3）Nav标签，用它进行导航的内容定义，更加容易被识别。
（4）Footer标签，用它来将网页的底部内容进行定义。其中，small标签被用来定义小字，用于解释网站底部的正确版权的信息。
（5）section和article标签，它们能够相互的嵌套使用。换句话说，它们之间没有上与下级的联系。在section标签里能够嵌套article标签，article标签也可以包含section标签。它们都全部能成为一个整体。然而，article标签代表文章，文章就是一段完整的独立的内容。某种意义上，section标签也能够看成html标准里面的div块，但是比div更具有语义的标签。
运用HTML5的新元素进行页面的设计。
（1）<figure>是HTML5中的图形元素。当它和<figcaption>结合使用后，我们能够语义化地将图片和相应的注释联系起来。我将在产品图片的展示的页面中使用，页面调用了photoswipe.js来实现图片的展示。
（2）支持多媒体的播放是HTML5技术的主要特色之一。HTML5中不单单有支持音频播放的<audio>元素，而且还具有有支持视频播放的<video>元素。然而，它和<audio>很相似，浏览器的不同效果也有所不同。当用户访问页面时，在<video>元素中加上preload="preload" ，preload属性使得视频得以预载。为了渲染出播放控制条，我们必须在<video>元素内指定controls属性。这我将主要运用在视频的展示页面。
运用HTML5的新属性进行页面的设计，主要体现于表单的验证。
（1）pattern属性，它将无须服务器端的检测，与正则表达式相结合，就可以判断各种的输入的文本格式，防止用户输入错误的信息。
（2）required属性，指定了输入信息的必要性，当文本框被指定必需输入的时候，如果空白的话表单就不能被提交，输入框将被高亮红色显示。
（3）Autofocus 属性，是HTML5的新解决方案，能够起到和JavaScript的一样的效果。在一般情况下，如果提交表单的信息有误，可以利用自动聚焦属性，自动对焦具体错误的文本框。
新元素主要运用于系统的留言页面和管理员登录页面中。其中，管理员登录的程序流程图，如图4-3所示。

图 4-3 管理员登录的流程图
此外，还引用高德地图的组件。它是基于HTML5实现的轻应用产品，专门为移动端定制，能够实现位置标注、路线规划、周边搜索、地图选址等功能的调用。响应速度飞快，支持iOS和Android的操作系统，也适用于PC浏览器。它主要通过URL的形式调用该组件，用户可在URL按照不同的参数组合调用不同的功能。
（1）dest参数，用于表示待标注点的坐标。坐标的格式为（经纬，纬度），小数点后不超过6位。
（2）destName参数，用于表示待标注点文字的描述。
（3）hideRouteIcon参数，具有隐藏路线的功能。如果需要路线指引，不选择此参数即可。
以上程序设计的具体代码，详见附录一。
5 系统测试
系统测试是在完成系统的各种设计之后进行的非常重要的一个阶段。这并不是只要系统能够运行这么简单，系统需要通过严格的测试，才能够最终投入使用。系统测试是使用正确或错误的输入方式，进一步验证输出的结果是否与期望的结果一致，从而来判断开发的系统是否运行正常。本质上来讲，系统测试实际上是检测和发现的系统错误的过程。
本系统的测试流程，如图5-1所示。
测试数据
系统程序
期望结果
测试结果
评价信息
评价
测试

图 5-1 系统测试流程图
5.1 系统测试的重要性
随着互联网络的高速发展，一个新的观点被业界中越来越多的人颇为认同。那就是每一个系统的开发完成之后，要对开发的系统进行测试。以此来尽量争取系统的功能的实现都能准确无误。否则，不同的错误有可能会相互影响，从而变成无法挽回的错误。等到系统正式投入使用后，再发现就为时已晚。
对于整个系统的开发来说，发现错误是必定会出现的过程。就算运用最新的语言和新的方式进行系统的开发，完全消灭错误也是几乎不可能做到的事情。而这些错误的发现，还要从测试中找出来。系统中的错误与正确的比重，也要从测试里得到。所有的专业研究基本上都要有测试的加入，系统的开发也不例外。
如今，系统测试已经成为了一门完整的学科体系。在系统的开发总成本之中，25%到50%被测试所消耗。如果，维护的阶段也包括在内的话，那将会更大的缩短系统测试的时间，维护工作就会很容易多次发生。所以，我们必须对开发的系统进行相对应的二次测试甚至进行多次测试。所以说，从全面的角度考虑来看，系统测试还是必须要存在的一个过程，也是必不可少的过程。

5.2 测试实例的研究与选择
在系统测试的方法中，我主要采用的是黑盒测试法。在测试中，对指定的功能测试其实现的情况。下面仅仅只列举了部分功能模块的测试用例设计。
管理员登录功能主要是测试依据是管理员是否能够成功进入后台系统，对其出现的几种情况进行测试，如表5-1所示。
表 5-1 管理员登录后台功能测试用例表
功能描述
管理员登录
用例目的
检测管理员是否可以正常登陆
前提条件
该管理员存在
输入
期望输出
实际情况
直接点击“登录”按钮
登录不成功，弹出提示框“请输入用户名和密码!”
与期望输出一致
输入数据库中存在的管理员的账号和密码，点击“登录”按钮
登录不成功，弹出提示框“请输入验证码!”
登录不成功，弹出提示框“验证码错误！”
输入存在的管理员账号、密码，点击“登录”按钮
登录成功，进入后台首页
与期望输出一致

针对视频管理模块中的视频上传功能，可能出现的几种情况对其进行功能的测试，如表5-2所示。
表 5-2 视频上传功能测试用例表
功能描述
管理员上传视频
用例目的
检测视频是否上传成功
前提条件
该管理员存在
输入
期望输出
实际情况
管理员的视频管理页：点击“添加视频”按钮，输入视频标题和具体内容，并选择视频，再点击“确定”按钮
视频上传成功，显示视频信息
与期望输出一致
管理员的视频管理页：点击“添加视频”按钮，未输入视频名称和具体内容，不选择视频，点击“确定”按钮
上传不成功，显示提示“名称不能为空”、“请选择视频”和“内容不能为空”
与期望输出一致

续表5-2
输入
期望输出
实际情况
管理员的视频管理页：点击“添加视频”按钮，输入视频名称，点击“确定”按钮
上传不成功，显示提示 “请选择视频”和“内容不能为空”
与期望输出一致
管理员的视频管理页：点击“添加视频”按钮，输入具体内容，点击“确定”按钮
上传不成功，显示提示“名称不能为空”和“请选择视频”
与期望输出一致
管理员的视频管理页：点击添加视频按钮，选择视频，点击“确定”按钮
添加不成功，显示提示“名称不能为空” 和“内容不能为空”
与期望输出一致
针对前台显示模块中的用户留言功能，可能出现的几种情况对其进行功能的测试，如表5-3所示。
表 5-3 用户留言功能测试用例表
功能描述
用户进行留言操作
用例目的
检测视频是否上传成功
前提条件
出现留言页面
输入
期望输出
实际情况
未输入任何内容，直接点击 “提交留言”按钮
称呼、手机和留言内容处出现“不能为空！”的红字的提示
与期望输出一致
输入称呼，点击“提交留言”按钮
留言和手机处出现“不能为空！”的红字提示
与期望输出一致
输入称呼，输入手机号为“你好”，输入留言，点击“提交留言”按钮
手机处出现“输入号码不正确!”的红字提示
与期望输出一致
输入称呼为“123456”，电话号码和留言，点击“提交留言”按钮
称呼处出现“请输入中文名称”的红字提示
与期望输出一致
输入称呼、电话号码和留言信息后，点击“提交留言”按钮
弹出“留言成功，我们会与您联系！”的对话框
与期望输出一致
我使用安卓和苹果手机进行测试，通过系统的测试，我希望能够达到以下的目标：
（1）在功能实现上，系统都能满足用户的功能需求。
（2）在数据反馈上，对系统操作的信息能够正常反馈到云服务器中。
（3）在性能反应上，系统能够使手机用户有更好的体验。
5.3 系统运行情况与评价
我通过系统的测试，所有需要测的试项目都已经通过测试。基本的功能已经实现，该系统能够正常的运行。
对于微官网来说，系统评价是在系统发布在网络上去之后，对微官网在功能、速度和实用等等各个方面，进行的反馈意见的收集。手机用户针对本微官网的评价如下：
（1）反应速度良好，访问各个页面很迅速，节省了大量的时间。
（2）交互界面友好，满足移动用户的观感和体验。
（2）便捷的服务，让用户能够更快的与企业取得联系。
6 系统展示
本系统用HTML5技术进行前端显示，ASP.NET作为后端信息管理的开发，共有两大个模块，前台展示模块和后台管理模块。前台展示模块主要是对产品、视频、新闻和地图的展示；后台管理模块包括管理员登录、产品管理、新闻管理、视频管理、评论管理和留言管理。
6.1 前台展示模块
通过扫描二维码进入系统前台首页，首页主要展示企业的简介信息，如图6-1所示，点击左上角的菜单图标，动态出现菜单列表，显示如图6-