公務(wù)員期刊網(wǎng) 論文中心 正文

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

前言:想要寫(xiě)出一篇引人入勝的文章?我們特意為您整理了玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站設(shè)計(jì)開(kāi)發(fā)范文,希望能給你帶來(lái)靈感和參考,敬請(qǐng)閱讀。

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

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

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

利用HTML5技術(shù)開(kāi)發(fā)的網(wǎng)站是時(shí)代的選擇,HTML5標(biāo)準(zhǔn)是當(dāng)前Web設(shè)計(jì)與開(kāi)發(fā)領(lǐng)域的熱門(mén)技術(shù)和未來(lái)發(fā)展趨勢(shì),HTML5為中國(guó)互聯(lián)網(wǎng)企業(yè)發(fā)展提供了一個(gè)全新的網(wǎng)絡(luò)營(yíng)銷平臺(tái),利用HTML5進(jìn)行網(wǎng)站設(shè)計(jì)變得日益重要。

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

1.1HTML5

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

1.2CSS

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

1.3JavaScript

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

2系統(tǒng)需求

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

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

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

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

2.1.3頁(yè)面的制作。采用框架式結(jié)構(gòu),每個(gè)部分的內(nèi)容采用不同顏色的直線進(jìn)行區(qū)分,減少用戶的學(xué)習(xí)時(shí)間和學(xué)習(xí)成本。頁(yè)面內(nèi)容充實(shí)而不顯得繁雜,既能突出網(wǎng)站主題,又基本能夠滿足用戶需求。在本設(shè)計(jì)的網(wǎng)站中,產(chǎn)品介紹頁(yè)面需要獨(dú)立設(shè)計(jì),這是網(wǎng)頁(yè)的一個(gè)部分,用戶點(diǎn)擊主頁(yè)下的產(chǎn)品介紹,可以跳轉(zhuǎn)到這個(gè)子頁(yè)面。首先,這個(gè)頁(yè)面設(shè)計(jì)比較簡(jiǎn)潔,通俗易懂,和主頁(yè)一樣,以綠色為背景,給用戶良好的視覺(jué)沖擊,使讀者能夠有更好的視覺(jué)去閱讀。頁(yè)面設(shè)計(jì)了標(biāo)題、圖文,并排介紹產(chǎn)品詳細(xì)情況,展示實(shí)物輪播圖供用戶參考,搜索框提供用戶查詢想要的產(chǎn)品。子網(wǎng)頁(yè)需要獨(dú)立設(shè)計(jì),這是網(wǎng)頁(yè)的一部分。用戶可點(diǎn)擊主頁(yè)下的產(chǎn)品介紹,即可跳轉(zhuǎn)到這個(gè)子頁(yè)面。這個(gè)頁(yè)面的設(shè)計(jì)比較簡(jiǎn)潔,通俗易懂,和主頁(yè)一樣,用了導(dǎo)航欄頁(yè)面,用戶在一個(gè)網(wǎng)頁(yè)能實(shí)現(xiàn)網(wǎng)站內(nèi)的跳轉(zhuǎn),操作方便快捷,使其有耐心去閱讀。頁(yè)面設(shè)計(jì)標(biāo)題、圖文,并排介紹了網(wǎng)頁(yè)詳細(xì)情況、知識(shí)問(wèn)答、用戶互動(dòng)性設(shè)計(jì)面板。

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

本次選題為農(nóng)產(chǎn)品推廣,所以選用醒目的綠色作為頁(yè)面背景,主要內(nèi)容區(qū)域選用白色作為背景,綠色與白色相呼應(yīng),減少用戶的視覺(jué)疲勞;頁(yè)面導(dǎo)航欄采用鮮艷的文字顏色進(jìn)行進(jìn)一步美觀。在主網(wǎng)頁(yè)中,首先運(yùn)用一個(gè)導(dǎo)航欄,主要包括產(chǎn)品介紹、地域特色、相關(guān)產(chǎn)品和關(guān)于我們四個(gè)欄目,能讓客戶清楚地看見(jiàn),根據(jù)自己的需求進(jìn)行選擇??蛻裟苤苯铀阉刈约合胍私獾霓r(nóng)產(chǎn)品,方便快捷,節(jié)省時(shí)間。導(dǎo)航欄下面布局了輪播圖,能讓客戶查看感興趣的產(chǎn)品,點(diǎn)擊就能進(jìn)入相關(guān)介紹頁(yè)面。接下來(lái)運(yùn)用動(dòng)畫(huà)設(shè)計(jì),下方依次布局特色農(nóng)產(chǎn)品、地域特色和產(chǎn)品展示,只要客戶把網(wǎng)頁(yè)往下拉,就能清楚看到需要了解的產(chǎn)品項(xiàng)目。右端分為上、下兩個(gè)區(qū)域,分別放置相關(guān)類的文字鏈接和圖片鏈接。上方的相關(guān)文字鏈接主要放最新的相關(guān)鏈接,點(diǎn)擊后即可進(jìn)入相關(guān)頁(yè)面,下方亦是如此。產(chǎn)品介紹是第一個(gè)子網(wǎng)頁(yè),用戶點(diǎn)擊主頁(yè)下的產(chǎn)品介紹,可以跳轉(zhuǎn)到這個(gè)子頁(yè)面。這個(gè)頁(yè)面的設(shè)計(jì)比較簡(jiǎn)潔,和主頁(yè)一樣,以綠色為背景,使用戶能夠有更好的視覺(jué)去閱讀。頁(yè)面設(shè)計(jì)了標(biāo)題、圖文,并排介紹產(chǎn)品詳細(xì)情況。通過(guò)點(diǎn)擊圖片,用戶就可以打開(kāi)產(chǎn)品購(gòu)物網(wǎng)頁(yè),直接了解產(chǎn)品詳情。當(dāng)用戶看到產(chǎn)品價(jià)格和喜歡的產(chǎn)品時(shí),可以點(diǎn)擊鏈接后立即購(gòu)買。輸入用戶所需要的產(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)頁(yè)之一。用戶點(diǎn)擊主頁(yè)下的產(chǎn)品介紹,即可跳轉(zhuǎn)到這個(gè)子頁(yè)面。這個(gè)頁(yè)面設(shè)計(jì)簡(jiǎn)潔,運(yùn)用導(dǎo)航欄,用戶在一個(gè)網(wǎng)頁(yè)能實(shí)現(xiàn)網(wǎng)站內(nèi)的跳轉(zhuǎn),操作快捷。在用戶互動(dòng)模塊,用戶可以提問(wèn)和回答。在農(nóng)業(yè)服務(wù)特色模塊,用戶可以點(diǎn)擊自己需要了解的內(nèi)容,方便快捷。用戶可以根據(jù)需要填寫(xiě)模板,寫(xiě)寫(xiě)老家的特色美食或地域特色,宣傳老家。在聯(lián)系模塊,用戶遇到問(wèn)題時(shí)可隨時(shí)打電話咨詢。

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

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

2.3.2本網(wǎng)站內(nèi)部用戶前臺(tái)頁(yè)面信息展示。本網(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)限和管理。本網(wǎng)站能夠支持多個(gè)管理員進(jìn)行管理,不同管理員有不同的操作權(quán)限,對(duì)應(yīng)著不同的功能模塊和頁(yè)面操作權(quán)限。同時(shí),本網(wǎng)站能夠支持文本、網(wǎng)頁(yè)、圖形、視頻及附件等多種樣式的及管理,支持流媒體轉(zhuǎn)換。

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

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

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

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

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

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

3.3前端功能

一是搜索功能。用戶想要查找某一產(chǎn)品并且查看信息,可以在網(wǎng)站的搜索框輸入名稱,實(shí)現(xiàn)對(duì)商品的查找,閱覽詳細(xì)信息。二是用戶注冊(cè)。用戶可以在頁(yè)面中的Web表單中填寫(xiě)個(gè)人信息,提交表單并完成注冊(cè)后,才可以登錄網(wǎng)站,實(shí)現(xiàn)用戶與網(wǎng)站的交互。三是查看信息功能。用戶可以在頁(yè)面中查看自己商鋪的情況,也可以查詢留言情況和參與交互的信息記錄。

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

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

4系統(tǒng)測(cè)試

4.1測(cè)試環(huán)境

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

4.2測(cè)試記錄

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

5結(jié)語(yǔ)

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

參考文獻(xiàn):

[1]賈曉芳,沈澤剛.JavaWeb應(yīng)用開(kāi)發(fā)中的常見(jiàn)亂碼形式及解決方法[J].軟件導(dǎo)刊,2017(4):214-216.

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

[3]張福軍.淺談“互聯(lián)網(wǎng)+”時(shí)代的農(nóng)產(chǎn)品營(yíng)銷與農(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è)市場(chǎng)營(yíng)銷創(chuàng)新模式研究[J].中國(guó)市場(chǎng),2017(10):107-108.

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

作者:唐貴大 韋寬蔣 劉華英 吳書(shū)葉 馬春艷 魏小凡 禤世麗 單位:玉林師范學(xué)院數(shù)學(xué)與統(tǒng)計(jì)學(xué)院