玉林农产品宣传与推广网站设计开发

前言：想要写出一篇引人入胜的文章？我们特意为您整理了玉林农产品宣传与推广网站设计开发范文，希望能给你带来灵感和参考，敬请阅读。

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

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

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

1开发工具及技术

1.1HTML5

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

1.2CSS

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

1.3JavaScript

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页面组成，利用HT⁃ML5、CSS3、JavaScript技术设计并开发。网页使用div+css样式进行页面布局，网页显示信息，供用户阅览。后台由JAVEWEB和数据库两部分组成，用于用户注册和数据处理，实现用户与客服的交互、用户与用户的交互、用户与网站的交互，系统结构如图1所示。

3.2前端设计

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

3.3前端功能

一是搜索功能。用户想要查找某一产品并且查看信息，可以在网站的搜索框输入名称，实现对商品的查找，阅览详细信息。二是用户注册。用户可以在页面中的Web表单中填写个人信息，提交表单并完成注册后，才可以登录网站，实现用户与网站的交互。三是查看信息功能。用户可以在页面中查看自己商铺的情况，也可以查询留言情况和参与交互的信息记录。

3.4系统设计

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

4系统测试

4.1测试环境

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

4.2测试记录

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

5结语

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

参考文献：

［1］贾晓芳，沈泽刚.JavaWeb应用开发中的常见乱码形式及解决方法［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.

作者：唐贵大 韦宽蒋 刘华英 吴书叶 马春艳 魏小凡 禤世丽 单位：玉林师范学院数学与统计学院