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

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

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

中圖分類號：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技術開發(fā)的網(wǎng)站是時代的選擇，HTML5標準是當前Web設計與開發(fā)領域的熱門技術和未來發(fā)展趨勢，HTML5為中國互聯(lián)網(wǎng)企業(yè)發(fā)展提供了一個全新的網(wǎng)絡營銷平臺，利用HTML5進行網(wǎng)站設計變得日益重要。

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

1.1 HTML5

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

1.2 CSS

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

1.3 JavaScript

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

2 系統(tǒng)需求

2.1 頁面設計

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

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

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

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

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

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

2.2 功能需求設計

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

在主網(wǎng)頁中，首先運用一個導航欄，主要包括產(chǎn)品介紹、地域特色、相關產(chǎn)品和關于我們四個欄目，能讓客戶清楚地看見，根據(jù)自己的需求進行選擇。客戶能直接搜素自己想要了解的農(nóng)產(chǎn)品，方便快捷，節(jié)省時間。導航欄下面布局了輪播圖，能讓客戶查看感興趣的產(chǎn)品，點擊就能進入相關介紹頁面。接下來運用動畫設計，下方依次布局特色農(nóng)產(chǎn)品、地域特色和產(chǎn)品展示，只要客戶把網(wǎng)頁往下拉，就能清楚看到需要了解的產(chǎn)品項目。右端分為上、下兩個區(qū)域，分別放置相關類的文字鏈接和圖片鏈接。上方的相關文字鏈接主要放最新的相關鏈接，點擊后即可進入相關頁面，下方亦是如此。

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

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

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

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

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

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

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

3 系統(tǒng)設計和分析

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

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

3.2 前端設計

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

3.3 前端功能

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

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

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

3.4 系統(tǒng)設計

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

4 系統(tǒng)測試

4.1 測試環(huán)境

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

4.2 測試記錄

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

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

5 結(jié)語

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

參考文獻：

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

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

[3]張福軍.淺談“互聯(lián)網(wǎng)+”時代的農(nóng)產(chǎn)品營銷與農(nóng)業(yè)經(jīng)濟發(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)濟與科技，2017（6）：277.