基于Web的玉林农产品宣传与推广网站设计和开发

唐贵大 韦宽蒋 刘华英 吴书叶 马春艳 魏小凡 禤世丽

摘 要：当前，电子商务已成为农产品宣传和推广的主流方式。通过网站宣传和推广，人们拓展了销售渠道，解决了农产品滞销的问题。本研究运用HTML5等相关技术，开发和设计玉林农产品销售推广网站，测试结果表明，其具有较高的应用价值。

关键词：电子商务;HTML5;农产品;宣传推广

中图分类号：F323.7文献标识码：A文章编号：1003-5168（2020）17-0026-03

Design and Development of Yulin Agricultural Products Publicity and Promotion Website Based on Web

TANG Guida WEI Kuanjiang LIU Huaying WU Shuye MA Chunyan WEI Xiaofan XUAN Shili

（School of Mathematics and Statistics， Yulin Normal University，Yulin Guangxi 537000）

Abstract：Currently， e-commerce has become the mainstream method of agricultural product publicity and promotion. Through website publicity and promotion， people have expanded sales channels and solved the problem of unmarketable agricultural products. This research uses HTML5 and other related technologies to develop and design Yulin agricultural products sales and promotion websites， the test results show that it has high application value.

Keywords： e-commerce;TML5;agricultural products;publicity and promotion

利用HTML5技術开发的网站是时代的选择，HTML5标准是当前Web设计与开发领域的热门技术和未来发展趋势，HTML5为中国互联网企业发展提供了一个全新的网络营销平台，利用HTML5进行网站设计变得日益重要。

1 开发工具及技术

1.1 HTML5

HTML5（Web前端）技术是由HTML（结构）、CSS（样式）和JavaScript（行为）组成的。可以说HTML5是Web前端的未来，HTML5不仅在PC端有应用，而且在移动终端上具有广泛的应用范围[1]。在标准化的网页设计方法中，HTML是基础设施网络标准化的Web设计方法，CSS是网页的表现风格，JavaScript是行为的网页代码中的动态交互。

1.2 CSS

CSS是叠样式表，它是一种能用来表示HTML或XML等文件系统样式的计算机网络语言。CSS不仅能静态修改页面，还能与多种脚本语言进行结合，对页面上的每一个元素进行动态格式化[2]。CSS在像素级别下能够精确控制网页中的元素布局，而且几乎支持所有字体的大小及样式，能够编辑网页的对象及模型样式。

1.3 JavaScript

JavaScript是解释型编程语言之一，它在原型、函数的先行语言基础上进行研究，并支持面向服务的对象编程、命令式的编程技术及相关函数式的编程[3]。基于HTML，JavaScript能够在两个网页间进行流转交换和实现交互式的网页开发。JavaScript的出现使得企业网页和用户信息之间能够实现实时性的、交互性以及动态的联系，它让网页设计包含更精彩的内容和更活跃的元素。

2 系统需求

2.1 页面设计

在主网页上，首先运用一个导航栏和一个能实现搜索的引擎。它们的下面布局一个轮播图，运用动画设计，下放依次布局特色农产品、地域特色和产品展示，右端分为上、下两个区域，分别放置了相关类的文字链接和图片链接。

2.1.1 页面颜色的使用。本次的选题为农产品推广，所以选用较为醒目的绿色图片作为页面背景，主要内容区域选用白色作为背景，绿色与白色相呼应，减少用户的视觉疲劳。页面导航栏采用鲜艳的文字颜色进行进一步美观。

2.1.2 页面文字的使用。页面的类别名称使用绿色的字体颜色，农产品信息的介绍文字使用黑色，比较符合大众审美。

2.1.3 页面的制作。采用框架式结构，每个部分的内容采用不同颜色的直线进行区分，减少用户的学习时间和学习成本。页面内容充实而不显得繁杂，既能突出网站主题，又基本能够满足用户需求。

在本设计的网站中，产品介绍页面需要独立设计，这是网页的一个部分，用户点击主页下的产品介绍，可以跳转到这个子页面。首先，这个页面设计比较简洁，通俗易懂，和主页一样，以绿色为背景，给用户良好的视觉冲击，使读者能够有更好的视觉去阅读。页面设计了标题、图文，并排介绍产品详细情况，展示实物轮播图供用户参考，搜索框提供用户查询想要的产品。

子网页需要独立设计，这是网页的一部分。用户可点击主页下的产品介绍，即可跳转到这个子页面。这个页面的设计比较简洁，通俗易懂，和主页一样，用了导航栏页面，用户在一个网页能实现网站内的跳转，操作方便快捷，使其有耐心去阅读。页面设计标题、图文，并排介绍了网页详细情况、知识问答、用户互动性设计面板。

2.2 功能需求设计

本次选题为农产品推广，所以选用醒目的绿色作为页面背景，主要内容区域选用白色作为背景，绿色与白色相呼应，减少用户的视觉疲劳;页面导航栏采用鲜艳的文字颜色进行進一步美观。

在主网页中，首先运用一个导航栏，主要包括产品介绍、地域特色、相关产品和关于我们四个栏目，能让客户清楚地看见，根据自己的需求进行选择。客户能直接搜素自己想要了解的农产品，方便快捷，节省时间。导航栏下面布局了轮播图，能让客户查看感兴趣的产品，点击就能进入相关介绍页面。接下来运用动画设计，下方依次布局特色农产品、地域特色和产品展示，只要客户把网页往下拉，就能清楚看到需要了解的产品项目。右端分为上、下两个区域，分别放置相关类的文字链接和图片链接。上方的相关文字链接主要放最新的相关链接，点击后即可进入相关页面，下方亦是如此。

产品介绍是第一个子网页，用户点击主页下的产品介绍，可以跳转到这个子页面。这个页面的设计比较简洁，和主页一样，以绿色为背景，使用户能够有更好的视觉去阅读。页面设计了标题、图文，并排介绍产品详细情况。通过点击图片，用户就可以打开产品购物网页，直接了解产品详情。当用户看到产品价格和喜欢的产品时，可以点击链接后立即购买。输入用户所需要的产品，点击搜一搜，下方会弹出用户想要的产品图片，单击图片即可了解产品详情。在产品轮播图中，轮播图会自动轮播产品实物图片，用户可以点击图片，查看产品详情。

关于我们也是该网站的子网页之一。用户点击主页下的产品介绍，即可跳转到这个子页面。这个页面设计简洁，运用导航栏，用户在一个网页能实现网站内的跳转，操作快捷。在用户互动模块，用户可以提问和回答。在农业服务特色模块，用户可以点击自己需要了解的内容，方便快捷。用户可以根据需要填写模板，写写老家的特色美食或地域特色，宣传老家。在联系模块，用户遇到问题时可随时打电话咨询。

2.3 技术说明及网站性能管理需求

2.3.1 非本网站内部用户前台页面信息展示。非本网站的内部用户只能看到统一的网页功能页面，只能浏览特定的前台功能模块和前台信息内容。

2.3.2 本网站内部用户前台页面信息展示。本网站的内部用户根据其在本网站的权限，在进入网站后可看到相应功能的模块及内容，并且拥有相应功能操作权限。

2.3.3 网站用户权限和发布管理。本网站能够支持多个管理员进行管理，不同管理员有不同的操作权限，对应着不同的功能模块和页面操作权限。同时，本网站能够支持文本、网页、图形、视频及附件等多种样式的发布及管理，支持流媒体转换。

2.3.4 网站功能后台维护和内部信息的整合。网站的后台能支持多个功能模块进行编辑操作，其功能包含增加、修改、删除、显示及隐藏，同时支持页面布局、排版修改、编辑。本网站数据能够用图形来显示，网站发布的信息支持且直接存档到文档管理系统，同时支持邮箱账户管理。

3 系统设计和分析

3.1 体系结构

玉林农产品宣传与推广网站共分为前端和后台两部分。前端部分由HTML页面和JSP页面组成，利用HTML5、CSS3、JavaScript技术设计并开发。网页使用div+css样式进行页面布局，网页显示信息，供用户阅览。后台由JAVEWEB和数据库两部分组成，用于用户注册和数据处理，实现用户与客服的交互、用户与用户的交互、用户与网站的交互，系统结构如图1所示。

3.2 前端设计

按照网站功能的不同，分类设计页面。每个功能为一个页面，网站的页面暂时可分为首页、子页面1（产品介绍）、子页面2（关于我们）。

3.3 前端功能

一是搜索功能。用户想要查找某一产品并且查看信息，可以在网站的搜索框输入名称，实现对商品的查找，阅览详细信息。

二是用户注册。用户可以在页面中的Web表单中填写个人信息，提交表单并完成注册后，才可以登录网站，实现用户与网站的交互。

三是查看信息功能。用户可以在页面中查看自己商铺的情况，也可以查询留言情况和参与交互的信息记录。

3.4 系统设计

本网站采用MVC（Model View Controlle）模式来搭建系统结构。MVC是一种程序架构理念[4]，本网站使用MVC模式来进行开发，把网站分为模型、视图及控制器三部分。模型是指用来完成任务的代码，可以多次使用，相对稳定。视图为应用程序与用户交互时的页面，能够灵活地改变。MVC模式使得网站维护变得简单轻松，可以保证网站应用程序开发进度[5]。

4 系统测试

4.1 测试环境

测试环境要重点关注Windows10操作系统、Hbuilder、MySQL数据库。

4.2 测试记录

基于Web开发的农产品网站测试记录如表1所示，

测试结果和预期结果基本一致。因此，基于Web技术开发的网站基本实现了农产品宣传和推广应用的目的。

5 结语

本文提出利用HTML5技术设计营销型网站，这种模式在多个网站设计中得到验证。采用这个模式设计HTML5营销型网站，极大地保证了网站的实用性、扩展性和维护性等。HTML5技术可以减少应用程序的响应时间，给用户提供便捷的体验，网站安全性好。HTML5技术从根本上改变了Web应用开发方式，无论是桌面应用还是移动应用，HTML5标准将继续影响各种网络平台。

参考文献：

[1]贾晓芳，沈泽刚.Java Web应用开发中的常见乱码形式及解决方法[J].软件导刊，2017（4）：214-216.

[2]李思璇.国内农产品网络营销现状研究[J].科技创业月刊，2017（7）：35-37.

[3]张福军.浅谈“互联网+”时代的农产品营销与农业经济发展[J].农民致富之友，2017（7）：227-228.

[4]张晓.基于“互联网+”的特色农业产业市场营销创新模式研究[J].中国市场，2017（10）：107-108.

[5]丁丽娜.互联网模式下农产品推广渠道研究[J].农村经济与科技，2017（6）：277.