摘 要

本文研究借助网页编译软件Sublime Text3，运用HTML5编写网页源代码和CSS3进行页面布局设计。设计一个简单的电商导航网站，实现扫描商品二维码展示商品详细信息的功能。网站包含一个主页和服装、箱包、洗护、数码、食品五个分页，每个分页包含八个商品的实物图和详细信息的二维码，页面之间可以相互跳转。二维码的安全性也是本文讨论的一个重要方向，由于二维码的易获取，同时也可以植入大量的病毒或者木马程序，伴随着巨大风险，另外，二维码信息的归属权也是一个重要问题。针对以上两个问题，提出解决方案，在扫码程序中加入安全监测插件，并对用户做出提醒，另外，完善立法，确认二维码信息的相关归属问题。

论文主要研究了二维码技术以及基于互联网的二维码在电商平台上的应用。

研究结果表明：二维码在电商平台上可以实现用更小的空间展示大量的信息。

本文的特色：通过制作网站直观展现二维码在电商平台的应用，为二维码的使用提供了新的想法。

关键词：Sublime Text3；HTML5；CSS3；二维码

Abstract

This article uses the webpage compiling software Sublime Text3, using HTML5 to write webpage source code and CSS3 for page layout design. Design a simple e-commerce navigation website to realize the function of scanning the product QR code to display the detailed information of the product. The website contains a home page and five sub-pages of clothing, luggage, toiletries, digital and food. Each page contains the physical map of eight items and the two-dimensional code of the detailed information. The pages can jump between each other.The security of QR code is also an important direction discussed in this paper, because of the easy acquisition of QR code, but also can be implanted a large number of viruses or Trojan horse programs, accompanied by great risk, in addition, two-dimensional code information ownership is also an important issue. In view of the above two problems, put forward the solution, in the sweep program to add security monitoring plug-ins, and to make reminders to users, in addition, improve the legislation to confirm the two-dimensional code information related to the attribution issue.

The paper mainly studies the application of two-dimensional code technology and Internet-based two-dimensional code on the e-commerce platform.

The research results show that the QR code can realize a large amount of information in a smaller space on the e-commerce platform.

The characteristics of this article: Through the production of the website to visualize the application of QR code on the e-commerce platform, it provides a new idea for the use of QR code.

Key Words：Sublime Text3；HTML5；CSS3；QR code

目 录

第1章 绪论 1

1.1 论文的研究背景及意义 1

1.2 国内外发展现状 1

1.3 论文研究的主要内容 3

第2章 设计需求分析 4

第3章 二维码生成获取 6

3.1 二维码 6

3.1.1 二维码的类型 6

3.1.2 二维码与条形码对比 6

3.2 二维码的原理 7

3.2.1 QR Code符号结构 7

3.2.2 译码编码过程 8

3.2.3 扫描解码过程 9

3.3 二维码的生成和应用 11

第4章 网页功能实现 12

4.1 HTML5语言 12

4.1.1 HTML5的发展 12

4.1.2 HTML5的优势 13

4.2 HTML5代码设计过程及分析 13

4.2.1 主页代码设计过程及分析 13

4.2.2 分页代码设计过程及分析 15

4.3 网页功能验证 16

第5章 网页布局设计 17

5.1 CSS3语言 17

5.1.1 CSS3的发展 17

5.1.2 CSS3的优势 17

5.2 CSS3代码设计过程及分析 18

5.2.1 主页代码设计过程及分析 18

5.2.2 分页代码设计过程及分析 21

5.3 网页布局验证 22

第6章 二维码的问题及发展对策 24

6.1 二维码的问题 24

6.1.1 二维码的安全问题 24

6.1.2 二维码的商业模式 24

6.1.3 二维码的发展瓶颈 24

6.2 二维码的发展对策 25

第7章 结论与展望 27

7.1 结论 27

7.2 展望 27

参考文献 28

致谢 29

绪论

1.1 论文的研究背景及意义

随着科技的进步，各种新的东西都雨后春笋般出现，互联网是这个不断变化的世界中的领导者。互联网的出现已经极大地改变了我们的生活，在传统互联网时代，用台式或PC上网，聊天、搜索、购物，但是传统互联网受限于设配的便携性，使我们上网不得不在固定的地点。作为亲密伴侣的移动互联网伴随着智慧型手机的遍及和4G移动网络的推广，以其更强的便利性紧密地与我们结合，成为生活中密不可分的一部分，在任何时间任何地点我们都可以使用移动终端设备连接网络，使用我们喜欢的APP，二维码的广泛应用正是这一现象的重要体现。

电子商务是在互联网时代发展起来的一个重要事物，网上购物已从原来的担心戒备变得司空见惯，电商网站刚刚兴起时，在电商网站上购买电器等设备，让人无法想象，如今在网络上购买3C产品同时享受优质的快递服务已是屡见不鲜，消费者可以在各大电商平台上购买到任何你想要的东西，并且物美价廉。而二维码的普及又为网上购物带来了全新的体验。

街头巷尾二维码随处可见，扫一扫变成每一款APP的必备功能，无论扫码付款还是关注公众号，二维码都是一项必不可少的技术。二维码的这一储存和扩展信息的特性无疑会得到越来越广泛的应用，本次设计正是利用这一特性为二维码进一步应用于推广提供一个思考。

1.2 国内外发展现状

二维码在电商方面的应用表现极为突出。如拍码购物、移动支付、电子票务等，各种各样的二维码在电商平台中已屡见不鲜。

发达国家都制定了基础设施，互联网已经开发较早，和电子商务网站已经出生的早了，比如著名的eBay和亚马逊。由于eBay在中国的本土化不足，较早地失去了中国市场的份额，我们也可以通过浏览eBay网站，很难发现二维码的踪迹，错过这一重大趋势，也是eBay渐渐淡出人们视野的重大因素。与eBay相比，亚马逊巨头的情况喜忧参半，Amazon的founder兼CEO Jeff Bezos曾超越Microsoft的Bill Gates，成为世界上身价最高的人。亚马逊的中国本地化远远优于eBay，但由于物流等因素也面对了许多困境。我们打开Amazon的首页，在屏幕下方映入眼帘的一个弹窗就是一个二维码，我们可以用手机扫描这个二维码下载Amazon的手机客户端，并且领取新用户红包，这是扫描二维码下载客户端的应用十分广泛，基本是各大互联网平台的必备应用，传统互联网向移动互联网转换的过程中，通过二维码增加用户下载量是一个必不可少的市场拓展手段，Amazon的扫码下载图如图1.1所示^[1]。

图1.1 Amazon扫码下载图

Kindle是Amazon的一项重要业务，其不伤眼的水墨屏、海量的图书资源和便携性俘获了众多文艺青年的芳心，出行随身携带kindle是爱书人士的一种重要的生活方式，通过打开kindle的网站，在左侧的菜单栏会出现扫码关注kindle服务号，服务号是企业通过微信为用户提供便利服务的重要入口，在中国发展的企业，微信服务号是必备要素，由此可见，Amazon对中国市场的深耕，本土化程度高于许多国外的电商网站，kindle服务号二维码如图1.2所示。

图1.2 kindle服务号二维码

国内的电商网站虽然发展较晚，但绝对是后来居上，弯道超车。淘宝网、京东商城、唯品会，还有最近兴起的拼多多，国内的电商网站如雨后春笋，竞争也十分激烈。随着网络购物人数的增加，网站账号包含着大量的个人用户信息，甚至还有损失资金的风险，因此增加登录账号的安全性是一个不得不考虑的问题，电商网站都提供了手机扫码，安全登录的服务，通过手机的客户端扫描电脑上的登录二维码可立即登录，这是一个身份的双重确认，大大提高了账户的安全性，淘宝网扫码登录界面如图1.3所示。

图1.3 淘宝网扫码登录界面

二维码除上述应用还有许多其他应用场景，如常用的扫码支付，这里不多赘述。

1.3 论文研究的主要内容

该QR码具有大的数据容量，没有字母数字限制，和可扩展的大小的特征。本文设计了一个电子商务网站的导航，实现由电子商务导航网站或电子商务主页的QR码所提供的产品的QR码。查看产品信息和购买商品的功能，体现了大容量QR码的数据特征^[2]。

电脑屏幕大小有限，网页显示的内容有限，在购物过程中需要浏览很多自己不感兴趣的商品信息，二维码的应用大大节约了网站的空间，使网页在有限的空间内包含更多的信息。随着电子商务的发展，电商平台数量众多，而商品更是数不胜数，如何节省选购商品的时间，迅速找到自己喜欢的商品，这是本次设计的讨论方向。

HTML5和CSS3语言是设计网页的最佳选择，本次设计主要设计了一个主页，包含店铺推荐、最新活动、电商主页、登录界面、热门头条和大牌几个内容，还有服装、箱包、数码、洗护和食品五个分页，分页中均包含该分类的八个商品的图片和二维码，用手机扫一扫即可链接到相应的商品网站进行购买并查看商品的详细信息。通过设计这一电商导航网站，旨在为二维码在电商平台中的应用提供新的构想并探讨二维码的安全问题和未来的发展对策。

设计需求分析

根据发展现状和任务要求，针对研究对象二维码在电商平台中的应用构思网页设计的过程，网页设计结构图如图2.1所示。

项目测试

搜集网页素材

代码编译

生成二维码

设计网页布局

构思网页功能

图2.1 网页设计结构图

网页功能即通过扫描网页提供的商品二维码进一步查看商品的详细信息，构想好网页需要实现的功能后，按照网页功能设计任务书的要求并参照普通的电商网站设计网页的布局，设计出的主页布局如图2.2所示。

图2.2 主页布局

首页主要起引导作用，首页背景选择一张合适的图片来凸显网站的主旨。在首页背景上方加入导航栏和菜单栏，可以链接到分页。将二维码加入最新活动和电商主页两个栏目中，其他栏目用图片和文字装饰，由于不是本次设计的主要研究对象，不加入具体功能。网页最下方同样加入导航栏和版权标志，商家链接和关于我们等功能。

分页的布局设计相同，具体内容不同，分页布局如图2.3所示。

图2.3 分页布局

在分页背景上方加入与主页背景上方相同的导航栏和菜单栏，可以与主页和其他分页进行相互链接，分页背景选择与分页内容相匹配的图片，每个分页的商品二维码栏目都包含八个商品二维码。

二维码的生成和网页代码设计分析在后续章节中详细叙述。

第3章 二维码生成获取

3.1 二维码

3.1.1 二维码的类型

二维代码是用于通过一定几何图案分布的平面上的黑色和白色间隔图案记录数据和符号信息的条形码。二维代码是用于与精确标准的二维条形码的总称，根据二维条形码的编码原理和结构形状可分为两种类型：行类型和矩阵类型^[3]。

行型二维码的编码原理较一维条形码复杂许多。但其也是以条形码为基础进行扩展，并根据编码的需要堆砌成两行或更多行。如图3.1所示。

图3.1 行排式二维码

矩阵式二维码以矩阵的样式构成。在矩阵的相应元素的位置中，二进制"1"由暗模块（方形点或其他形状的模块）表示，二进制"0"由浅色模块表示。并定义了模块的组合安排。矩阵代码可以表示的含义。 Data Matrix，Maxi Code，Code One，QR Code等是最具代表性的。生活中常用的大部分QR码都是QR码，矩阵QR码如图3.2所示^[4]。

图3.2 矩阵式二维码

3.1.2 二维码与条形码对比

QR码和条形码都是信息展现、搬运和辨认的方法，区别是二维码可以描绘项目的详细内容，而条形码只能起到定义的作用。一维条码与二维条码的对比如表3.1所示^[5]。

表3.1 二维码与条形码对照表

3.2 二维码的原理

本设计使用生活常见，手机可扫描的矩阵式二维码。

3.2.1 QR Code符号结构

任何QR码都是由两部分组成的矩形：该函数由具有实际功能的图样和编译代码的区域这两个成分组成，其中，所述功能图形包括一个空白区域，位置检测图案，位置检测图案分离器，一个定位图案和一个校正图案，和编码区格式包括格式信息，版本信息和数据纠错码字。其具体成分如下：

(1)功能图形

①空白区：空白区在图形周围，是二维码的重要标识之一，与模块宽度相等，该区域模块的颜色为白色；

②位置探测图形：任何一个二维码都有三个位置检测的图形，这主要用于找到图形，并自动查找图形时软件识别QR码。

③分隔符：在三个明显的较大的矩阵方块与中间的编译代码的区域之间存在淡色的模块，被称作分隔符。

④定位图形：为了能够明确二维码的具体标识信息，迅速形成相应的矩形，引入水平与垂直方向都存在的定位图形。

⑤校正图形：其由两个黑一个白三个矩形嵌套而成，有个横3纵3的正方形浅色模块和横5纵5的正方形深色模块，在中心还有一个深色的模块。

以上是毕业论文大纲或资料介绍，该课题完整毕业论文、开题报告、任务书、程序设计、图纸设计等资料请添加微信获取，微信号：bysjorg。

相关图片展示：