【網(wǎng)站設計論文】玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站設計開發(fā)

《【網(wǎng)站設計論文】玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站設計開發(fā)》由會員分享，可在線閱讀，更多相關《【網(wǎng)站設計論文】玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站設計開發(fā)（7頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、【網(wǎng)站設計論文】玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站設計開發(fā) 摘要：當前，電子商務已成為農(nóng)產(chǎn)品宣傳和推廣的主流方式。通過網(wǎng)站宣傳和推廣，人們拓展了銷售渠道，解決了農(nóng)產(chǎn)品滯銷的問題。本研究運用HTML5等相關技術，開發(fā)和設計玉林農(nóng)產(chǎn)品銷售推廣網(wǎng)站，測試結果表明，其具有較高的應用價值。 關鍵詞：電子商務；HTML5；農(nóng)產(chǎn)品；宣傳推廣 利用HTML5技術開發(fā)的網(wǎng)站是時代的選擇，HTML5標準是當前Web設計與開發(fā)領域的熱門技術和未來發(fā)展趨勢，HTML5為中國互聯(lián)網(wǎng)企業(yè)發(fā)展提供了一個全新的網(wǎng)絡營銷平臺，利用HTML5進行網(wǎng)站設計變得日益重要。 1開發(fā)工具及技

2、術 1.1HTML5 HTML5（Web前端）技術是由HTML（結構）、CSS（樣式）和JavaScript（行為）組成的?？梢哉fHTML5是Web前端的未來，HTML5不僅在PC端有應用，而且在移動終端上具有廣泛的應用范圍［1］。在標準化的網(wǎng)頁設計方法中，HTML是基礎設施網(wǎng)絡標準化的Web設計方法，CSS是網(wǎng)頁的表現(xiàn)風格，JavaScript是行為的網(wǎng)頁代碼中的動態(tài)交互。 1.2CSS CSS是疊樣式表，它是一種能用來表示HTML或XML等文件系統(tǒng)樣式的計算機網(wǎng)絡語言。CSS不僅能靜態(tài)修改頁面，還能與多種腳本語言進行結合，對頁

3、面上的每一個元素進行動態(tài)格式化［2］。CSS在像素級別下能夠精確控制網(wǎng)頁中的元素布局，而且?guī)缀踔С炙凶煮w的大小及樣式，能夠編輯網(wǎng)頁的對象及模型樣式。 1.3JavaScript 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)容和更活躍的元素。

4、 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)品信息的介紹文字使用黑色，比較符合大

5、眾審美。 2.1.3頁面的制作。采用框架式結構，每個部分的內(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)品介紹，即

6、可跳轉(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ù)自己的需求進行選擇?？蛻裟苤苯铀阉刈约合胍私?/p>

7、的農(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)頁，

8、直接了解產(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)系模塊，用戶遇到問題時可隨時打電話

9、咨詢。 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ā)布及管理，支持流媒

10、體轉(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體系結構 玉林農(nóng)產(chǎn)品宣傳與推廣網(wǎng)站共分為前端和后臺兩部分。前端部分由HTML頁面和JSP頁面組成，利用HTML5、CSS3、JavaScript技術設計并開發(fā)。網(wǎng)頁使用div+css樣式進行頁面布局，網(wǎng)頁顯示信息，供用戶閱覽。后臺由JAVEWEB

11、和數(shù)據(jù)庫兩部分組成，用于用戶注冊和數(shù)據(jù)處理，實現(xiàn)用戶與客服的交互、用戶與用戶的交互、用戶與網(wǎng)站的交互，系統(tǒng)結構如圖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)站的交互。三是查看信息功能。用戶可以在

12、頁面中查看自己商鋪的情況，也可以查詢留言情況和參與交互的信息記錄。 3.4系統(tǒng)設計 本網(wǎng)站采用MVC（ModelViewControlle）模式來搭建系統(tǒng)結構。MVC是一種程序架構理念［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)、Hbuil

13、der、MySQL數(shù)據(jù)庫。 4.2測試記錄 基于Web開發(fā)的農(nóng)產(chǎn)品網(wǎng)站測試記錄如表1所示，測試結果和預期結果基本一致。因此，基于Web技術開發(fā)的網(wǎng)站基本實現(xiàn)了農(nóng)產(chǎn)品宣傳和推廣應用的目的。 5結語 本文提出利用HTML5技術設計營銷型網(wǎng)站，這種模式在多個網(wǎng)站設計中得到驗證。采用這個模式設計HTML5營銷型網(wǎng)站，極大地保證了網(wǎng)站的實用性、擴展性和維護性等。HTML5技術可以減少應用程序的響應時間，給用戶提供便捷的體驗，網(wǎng)站安全性好。HTML5技術從根本上改變了Web應用開發(fā)方式，無論是桌面應用還是移動應用，HTML5標準將繼續(xù)影響各種

14、網(wǎng)絡平臺。 參考文獻： ［1］賈曉芳，沈澤剛.JavaWeb應用開發(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.