基于Web的玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站設(shè)計(jì)和開發(fā)

唐貴大 韋寬蔣 劉華英 吳書葉 馬春艷 魏小凡 禤世麗

摘 要：當(dāng)前，電子商務(wù)已成為農(nóng)產(chǎn)品宣傳和推廣的主流方式。通過網(wǎng)站宣傳和推廣，人們拓展了銷售渠道，解決了農(nóng)產(chǎn)品滯銷的問題。本研究運(yùn)用HTML5等相關(guān)技術(shù)，開發(fā)和設(shè)計(jì)玉林農(nóng)產(chǎn)品銷售推廣網(wǎng)站，測試結(jié)果表明，其具有較高的應(yīng)用價(jià)值。

關(guān)鍵詞：電子商務(wù);HTML5;農(nóng)產(chǎn)品;宣傳推廣

中圖分類號(hào)：F323.7文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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技術(shù)開發(fā)的網(wǎng)站是時(shí)代的選擇，HTML5標(biāo)準(zhǔn)是當(dāng)前Web設(shè)計(jì)與開發(fā)領(lǐng)域的熱門技術(shù)和未來發(fā)展趨勢，HTML5為中國互聯(lián)網(wǎng)企業(yè)發(fā)展提供了一個(gè)全新的網(wǎng)絡(luò)營銷平臺(tái)，利用HTML5進(jìn)行網(wǎng)站設(shè)計(jì)變得日益重要。

1 開發(fā)工具及技術(shù)

1.1 HTML5

HTML5（Web前端）技術(shù)是由HTML（結(jié)構(gòu)）、CSS（樣式）和JavaScript（行為）組成的?？梢哉fHTML5是Web前端的未來，HTML5不僅在PC端有應(yīng)用，而且在移動(dòng)終端上具有廣泛的應(yīng)用范圍[1]。在標(biāo)準(zhǔn)化的網(wǎng)頁設(shè)計(jì)方法中，HTML是基礎(chǔ)設(shè)施網(wǎng)絡(luò)標(biāo)準(zhǔn)化的Web設(shè)計(jì)方法，CSS是網(wǎng)頁的表現(xiàn)風(fēng)格，JavaScript是行為的網(wǎng)頁代碼中的動(dòng)態(tài)交互。

1.2 CSS

CSS是疊樣式表，它是一種能用來表示HTML或XML等文件系統(tǒng)樣式的計(jì)算機(jī)網(wǎng)絡(luò)語言。CSS不僅能靜態(tài)修改頁面，還能與多種腳本語言進(jìn)行結(jié)合，對頁面上的每一個(gè)元素進(jìn)行動(dòng)態(tài)格式化[2]。CSS在像素級(jí)別下能夠精確控制網(wǎng)頁中的元素布局，而且?guī)缀踔С炙凶煮w的大小及樣式，能夠編輯網(wǎng)頁的對象及模型樣式。

1.3 JavaScript

JavaScript是解釋型編程語言之一，它在原型、函數(shù)的先行語言基礎(chǔ)上進(jìn)行研究，并支持面向服務(wù)的對象編程、命令式的編程技術(shù)及相關(guān)函數(shù)式的編程[3]?；贖TML，JavaScript能夠在兩個(gè)網(wǎng)頁間進(jìn)行流轉(zhuǎn)交換和實(shí)現(xiàn)交互式的網(wǎng)頁開發(fā)。JavaScript的出現(xiàn)使得企業(yè)網(wǎng)頁和用戶信息之間能夠?qū)崿F(xiàn)實(shí)時(shí)性的、交互性以及動(dòng)態(tài)的聯(lián)系，它讓網(wǎng)頁設(shè)計(jì)包含更精彩的內(nèi)容和更活躍的元素。

2 系統(tǒng)需求

2.1 頁面設(shè)計(jì)

在主網(wǎng)頁上，首先運(yùn)用一個(gè)導(dǎo)航欄和一個(gè)能實(shí)現(xiàn)搜索的引擎。它們的下面布局一個(gè)輪播圖，運(yùn)用動(dòng)畫設(shè)計(jì)，下放依次布局特色農(nóng)產(chǎn)品、地域特色和產(chǎn)品展示，右端分為上、下兩個(gè)區(qū)域，分別放置了相關(guān)類的文字鏈接和圖片鏈接。

2.1.1 頁面顏色的使用。本次的選題為農(nóng)產(chǎn)品推廣，所以選用較為醒目的綠色圖片作為頁面背景，主要內(nèi)容區(qū)域選用白色作為背景，綠色與白色相呼應(yīng)，減少用戶的視覺疲勞。頁面導(dǎo)航欄采用鮮艷的文字顏色進(jìn)行進(jìn)一步美觀。

2.1.2 頁面文字的使用。頁面的類別名稱使用綠色的字體顏色，農(nóng)產(chǎn)品信息的介紹文字使用黑色，比較符合大眾審美。

2.1.3 頁面的制作。采用框架式結(jié)構(gòu)，每個(gè)部分的內(nèi)容采用不同顏色的直線進(jìn)行區(qū)分，減少用戶的學(xué)習(xí)時(shí)間和學(xué)習(xí)成本。頁面內(nèi)容充實(shí)而不顯得繁雜，既能突出網(wǎng)站主題，又基本能夠滿足用戶需求。

在本設(shè)計(jì)的網(wǎng)站中，產(chǎn)品介紹頁面需要獨(dú)立設(shè)計(jì)，這是網(wǎng)頁的一個(gè)部分，用戶點(diǎn)擊主頁下的產(chǎn)品介紹，可以跳轉(zhuǎn)到這個(gè)子頁面。首先，這個(gè)頁面設(shè)計(jì)比較簡潔，通俗易懂，和主頁一樣，以綠色為背景，給用戶良好的視覺沖擊，使讀者能夠有更好的視覺去閱讀。頁面設(shè)計(jì)了標(biāo)題、圖文，并排介紹產(chǎn)品詳細(xì)情況，展示實(shí)物輪播圖供用戶參考，搜索框提供用戶查詢想要的產(chǎn)品。

子網(wǎng)頁需要獨(dú)立設(shè)計(jì)，這是網(wǎng)頁的一部分。用戶可點(diǎn)擊主頁下的產(chǎn)品介紹，即可跳轉(zhuǎn)到這個(gè)子頁面。這個(gè)頁面的設(shè)計(jì)比較簡潔，通俗易懂，和主頁一樣，用了導(dǎo)航欄頁面，用戶在一個(gè)網(wǎng)頁能實(shí)現(xiàn)網(wǎng)站內(nèi)的跳轉(zhuǎn)，操作方便快捷，使其有耐心去閱讀。頁面設(shè)計(jì)標(biāo)題、圖文，并排介紹了網(wǎng)頁詳細(xì)情況、知識(shí)問答、用戶互動(dòng)性設(shè)計(jì)面板。

2.2 功能需求設(shè)計(jì)

本次選題為農(nóng)產(chǎn)品推廣，所以選用醒目的綠色作為頁面背景，主要內(nèi)容區(qū)域選用白色作為背景，綠色與白色相呼應(yīng)，減少用戶的視覺疲勞;頁面導(dǎo)航欄采用鮮艷的文字顏色進(jìn)行進(jìn)一步美觀。

在主網(wǎng)頁中，首先運(yùn)用一個(gè)導(dǎo)航欄，主要包括產(chǎn)品介紹、地域特色、相關(guān)產(chǎn)品和關(guān)于我們四個(gè)欄目，能讓客戶清楚地看見，根據(jù)自己的需求進(jìn)行選擇?？蛻裟苤苯铀阉刈约合胍私獾霓r(nóng)產(chǎn)品，方便快捷，節(jié)省時(shí)間。導(dǎo)航欄下面布局了輪播圖，能讓客戶查看感興趣的產(chǎn)品，點(diǎn)擊就能進(jìn)入相關(guān)介紹頁面。接下來運(yùn)用動(dòng)畫設(shè)計(jì)，下方依次布局特色農(nóng)產(chǎn)品、地域特色和產(chǎn)品展示，只要客戶把網(wǎng)頁往下拉，就能清楚看到需要了解的產(chǎn)品項(xiàng)目。右端分為上、下兩個(gè)區(qū)域，分別放置相關(guān)類的文字鏈接和圖片鏈接。上方的相關(guān)文字鏈接主要放最新的相關(guān)鏈接，點(diǎn)擊后即可進(jìn)入相關(guān)頁面，下方亦是如此。

產(chǎn)品介紹是第一個(gè)子網(wǎng)頁，用戶點(diǎn)擊主頁下的產(chǎn)品介紹，可以跳轉(zhuǎn)到這個(gè)子頁面。這個(gè)頁面的設(shè)計(jì)比較簡潔，和主頁一樣，以綠色為背景，使用戶能夠有更好的視覺去閱讀。頁面設(shè)計(jì)了標(biāo)題、圖文，并排介紹產(chǎn)品詳細(xì)情況。通過點(diǎn)擊圖片，用戶就可以打開產(chǎn)品購物網(wǎng)頁，直接了解產(chǎn)品詳情。當(dāng)用戶看到產(chǎn)品價(jià)格和喜歡的產(chǎn)品時(shí)，可以點(diǎn)擊鏈接后立即購買。輸入用戶所需要的產(chǎn)品，點(diǎn)擊搜一搜，下方會(huì)彈出用戶想要的產(chǎn)品圖片，單擊圖片即可了解產(chǎn)品詳情。在產(chǎn)品輪播圖中，輪播圖會(huì)自動(dòng)輪播產(chǎn)品實(shí)物圖片，用戶可以點(diǎn)擊圖片，查看產(chǎn)品詳情。

關(guān)于我們也是該網(wǎng)站的子網(wǎng)頁之一。用戶點(diǎn)擊主頁下的產(chǎn)品介紹，即可跳轉(zhuǎn)到這個(gè)子頁面。這個(gè)頁面設(shè)計(jì)簡潔，運(yùn)用導(dǎo)航欄，用戶在一個(gè)網(wǎng)頁能實(shí)現(xiàn)網(wǎng)站內(nèi)的跳轉(zhuǎn)，操作快捷。在用戶互動(dòng)模塊，用戶可以提問和回答。在農(nóng)業(yè)服務(wù)特色模塊，用戶可以點(diǎn)擊自己需要了解的內(nèi)容，方便快捷。用戶可以根據(jù)需要填寫模板，寫寫老家的特色美食或地域特色，宣傳老家。在聯(lián)系模塊，用戶遇到問題時(shí)可隨時(shí)打電話咨詢。

2.3 技術(shù)說明及網(wǎng)站性能管理需求

2.3.1 非本網(wǎng)站內(nèi)部用戶前臺(tái)頁面信息展示。非本網(wǎng)站的內(nèi)部用戶只能看到統(tǒng)一的網(wǎng)頁功能頁面，只能瀏覽特定的前臺(tái)功能模塊和前臺(tái)信息內(nèi)容。

2.3.2 本網(wǎng)站內(nèi)部用戶前臺(tái)頁面信息展示。本網(wǎng)站的內(nèi)部用戶根據(jù)其在本網(wǎng)站的權(quán)限，在進(jìn)入網(wǎng)站后可看到相應(yīng)功能的模塊及內(nèi)容，并且擁有相應(yīng)功能操作權(quán)限。

2.3.3 網(wǎng)站用戶權(quán)限和發(fā)布管理。本網(wǎng)站能夠支持多個(gè)管理員進(jìn)行管理，不同管理員有不同的操作權(quán)限，對應(yīng)著不同的功能模塊和頁面操作權(quán)限。同時(shí)，本網(wǎng)站能夠支持文本、網(wǎng)頁、圖形、視頻及附件等多種樣式的發(fā)布及管理，支持流媒體轉(zhuǎn)換。

2.3.4 網(wǎng)站功能后臺(tái)維護(hù)和內(nèi)部信息的整合。網(wǎng)站的后臺(tái)能支持多個(gè)功能模塊進(jìn)行編輯操作，其功能包含增加、修改、刪除、顯示及隱藏，同時(shí)支持頁面布局、排版修改、編輯。本網(wǎng)站數(shù)據(jù)能夠用圖形來顯示，網(wǎng)站發(fā)布的信息支持且直接存檔到文檔管理系統(tǒng)，同時(shí)支持郵箱賬戶管理。

3 系統(tǒng)設(shè)計(jì)和分析

3.1 體系結(jié)構(gòu)

玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站共分為前端和后臺(tái)兩部分。前端部分由HTML頁面和JSP頁面組成，利用HTML5、CSS3、JavaScript技術(shù)設(shè)計(jì)并開發(fā)。網(wǎng)頁使用div+css樣式進(jìn)行頁面布局，網(wǎng)頁顯示信息，供用戶閱覽。后臺(tái)由JAVEWEB和數(shù)據(jù)庫兩部分組成，用于用戶注冊和數(shù)據(jù)處理，實(shí)現(xiàn)用戶與客服的交互、用戶與用戶的交互、用戶與網(wǎng)站的交互，系統(tǒng)結(jié)構(gòu)如圖1所示。

3.2 前端設(shè)計(jì)

按照網(wǎng)站功能的不同，分類設(shè)計(jì)頁面。每個(gè)功能為一個(gè)頁面，網(wǎng)站的頁面暫時(shí)可分為首頁、子頁面1（產(chǎn)品介紹）、子頁面2（關(guān)于我們）。

3.3 前端功能

一是搜索功能。用戶想要查找某一產(chǎn)品并且查看信息，可以在網(wǎng)站的搜索框輸入名稱，實(shí)現(xiàn)對商品的查找，閱覽詳細(xì)信息。

二是用戶注冊。用戶可以在頁面中的Web表單中填寫個(gè)人信息，提交表單并完成注冊后，才可以登錄網(wǎng)站，實(shí)現(xiàn)用戶與網(wǎng)站的交互。

三是查看信息功能。用戶可以在頁面中查看自己商鋪的情況，也可以查詢留言情況和參與交互的信息記錄。

3.4 系統(tǒng)設(shè)計(jì)

本網(wǎng)站采用MVC（Model View Controlle）模式來搭建系統(tǒng)結(jié)構(gòu)。MVC是一種程序架構(gòu)理念[4]，本網(wǎng)站使用MVC模式來進(jìn)行開發(fā)，把網(wǎng)站分為模型、視圖及控制器三部分。模型是指用來完成任務(wù)的代碼，可以多次使用，相對穩(wěn)定。視圖為應(yīng)用程序與用戶交互時(shí)的頁面，能夠靈活地改變。MVC模式使得網(wǎng)站維護(hù)變得簡單輕松，可以保證網(wǎng)站應(yīng)用程序開發(fā)進(jìn)度[5]。

4 系統(tǒng)測試

4.1 測試環(huán)境

測試環(huán)境要重點(diǎn)關(guān)注Windows10操作系統(tǒng)、Hbuilder、MySQL數(shù)據(jù)庫。

4.2 測試記錄

基于Web開發(fā)的農(nóng)產(chǎn)品網(wǎng)站測試記錄如表1所示，

測試結(jié)果和預(yù)期結(jié)果基本一致。因此，基于Web技術(shù)開發(fā)的網(wǎng)站基本實(shí)現(xiàn)了農(nóng)產(chǎn)品宣傳和推廣應(yīng)用的目的。

5 結(jié)語

本文提出利用HTML5技術(shù)設(shè)計(jì)營銷型網(wǎng)站，這種模式在多個(gè)網(wǎng)站設(shè)計(jì)中得到驗(yàn)證。采用這個(gè)模式設(shè)計(jì)HTML5營銷型網(wǎng)站，極大地保證了網(wǎng)站的實(shí)用性、擴(kuò)展性和維護(hù)性等。HTML5技術(shù)可以減少應(yīng)用程序的響應(yīng)時(shí)間，給用戶提供便捷的體驗(yàn)，網(wǎng)站安全性好。HTML5技術(shù)從根本上改變了Web應(yīng)用開發(fā)方式，無論是桌面應(yīng)用還是移動(dòng)應(yīng)用，HTML5標(biāo)準(zhǔn)將繼續(xù)影響各種網(wǎng)絡(luò)平臺(tái)。

參考文獻(xiàn)：

[1]賈曉芳，沈澤剛.Java Web應(yīng)用開發(fā)中的常見亂碼形式及解決方法[J].軟件導(dǎo)刊，2017（4）：214-216.

[2]李思璇.國內(nèi)農(nóng)產(chǎn)品網(wǎng)絡(luò)營銷現(xiàn)狀研究[J].科技創(chuàng)業(yè)月刊，2017（7）：35-37.

[3]張福軍.淺談“互聯(lián)網(wǎng)+”時(shí)代的農(nóng)產(chǎn)品營銷與農(nóng)業(yè)經(jīng)濟(jì)發(fā)展[J].農(nóng)民致富之友，2017（7）：227-228.

[4]張曉.基于“互聯(lián)網(wǎng)+”的特色農(nóng)業(yè)產(chǎn)業(yè)市場營銷創(chuàng)新模式研究[J].中國市場，2017（10）：107-108.

[5]丁麗娜.互聯(lián)網(wǎng)模式下農(nóng)產(chǎn)品推廣渠道研究[J].農(nóng)村經(jīng)濟(jì)與科技，2017（6）：277.