陳洋 王治兵 李江科 王明俊 吳麗麗

摘要：“互聯(lián)網(wǎng)+農(nóng)業(yè)”是新時代下應(yīng)用現(xiàn)代信息技術(shù)和互聯(lián)網(wǎng)通信平臺，推動傳統(tǒng)農(nóng)業(yè)向現(xiàn)代農(nóng)業(yè)轉(zhuǎn)變的重要舉措。農(nóng)業(yè)網(wǎng)站是互聯(lián)網(wǎng)與農(nóng)業(yè)結(jié)合的一種模式，而農(nóng)業(yè)網(wǎng)站中的農(nóng)產(chǎn)品資訊類網(wǎng)站對現(xiàn)代農(nóng)業(yè)發(fā)展有著極其重要的作用，建立一個免費的農(nóng)產(chǎn)品資訊平臺對農(nóng)民了解農(nóng)業(yè)時事動態(tài)、降低交易成本、優(yōu)化農(nóng)產(chǎn)品資源配置、實現(xiàn)農(nóng)產(chǎn)品銷售利益最大化具有重要意義。因此，本項目將通過對Dreamweaver開發(fā)軟件設(shè)計農(nóng)產(chǎn)品資訊網(wǎng)站的各項技術(shù)和網(wǎng)站建設(shè)過程進(jìn)行簡要分析，搭建一個免費提供給農(nóng)戶和商家一些關(guān)于農(nóng)產(chǎn)品交易信息的具有服務(wù)性公益網(wǎng)站特點的農(nóng)產(chǎn)品資訊平臺。

關(guān)鍵詞：農(nóng)產(chǎn)品資訊平臺；Dreamweaver網(wǎng)頁制作； HTML；CSS；

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）32-0069-03

Abstract： "Internet + agriculture" is an important measure to promote the transformation from traditional agriculture to modern agriculture under the new era of modern information technology and Internet communication platform. Agricultural website is a mode of combination of Internet and agriculture. Agricultural product information websites in agricultural websites play an important role in the development of modern agriculture. Establishing a free agricultural product information platform can help farmers understand the current situation of agriculture， reduce transaction costs， optimize the allocation of agricultural resources， and realize agricultural products. The maximization of sales interests is of great significance. Therefore， this project will build a service-oriented agricultural products information platform which will provide free information for farmers and businessmen on agricultural products trading through a brief analysis of the technology and website construction process of Dreamweaver software design agricultural products information website.

Key words： agricultural products consultation platform； Dreamweaver web page production；HTML；CSS

1 引言

農(nóng)產(chǎn)品銷售是一直存在于農(nóng)戶心中的難題，農(nóng)產(chǎn)品“滯銷”的現(xiàn)象也曾一度上演，從根本上解決農(nóng)產(chǎn)品銷售問題，必須打開市場銷路。互聯(lián)網(wǎng)時代電子商務(wù)的發(fā)展，借助網(wǎng)絡(luò)發(fā)布農(nóng)產(chǎn)品信息，使得農(nóng)產(chǎn)品銷售渠道得以擴(kuò)展，可以從根本上解決農(nóng)產(chǎn)品“銷售難”問題。Dreamweaver是一款所見即所得的網(wǎng)絡(luò)編輯軟件，深受網(wǎng)頁制作者和學(xué)習(xí)者的青睞[1]。Dreamweaver的四種網(wǎng)頁布局技術(shù)（表格、框架、層、DIV標(biāo)簽與CSS樣式表的結(jié)合）使得Dreamweaver在網(wǎng)頁設(shè)計初學(xué)者中備受歡迎?；贒reamweaver的易操作性，本項目在該軟件上搭建農(nóng)產(chǎn)品資訊平臺，并對網(wǎng)站進(jìn)行測試。

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，我國農(nóng)業(yè)信息網(wǎng)站大量涌現(xiàn)，建設(shè)農(nóng)業(yè)信息網(wǎng)站是帶動新型農(nóng)業(yè)發(fā)展的重要手段之一，應(yīng)用互聯(lián)網(wǎng)技術(shù)將農(nóng)產(chǎn)品的管理和銷售集中化，有助于減少資源浪費，優(yōu)化農(nóng)產(chǎn)品資源配置。目前，我國農(nóng)業(yè)信息網(wǎng)站的數(shù)量已經(jīng)超過了4萬，但農(nóng)民無法充分利用已有的農(nóng)業(yè)信息網(wǎng)，網(wǎng)站內(nèi)容的有效性仍有待提高[2]。作為一個農(nóng)業(yè)大國，我國農(nóng)業(yè)信息網(wǎng)站的建設(shè)發(fā)展遠(yuǎn)遠(yuǎn)跟不上我國的農(nóng)業(yè)生產(chǎn)、管理、教學(xué)和科研的發(fā)展需要。由于我國農(nóng)業(yè)科技水平與國內(nèi)其他行業(yè)相比較為落后，在“互聯(lián)網(wǎng)+農(nóng)業(yè)”的應(yīng)用中不具優(yōu)勢，而互聯(lián)網(wǎng)是建立農(nóng)業(yè)新型推廣技術(shù)，實現(xiàn)新形態(tài)下農(nóng)產(chǎn)品銷售的最佳手段，因而在農(nóng)業(yè)信息網(wǎng)站中建立公益性農(nóng)產(chǎn)品資訊平臺對現(xiàn)代農(nóng)業(yè)發(fā)展具有關(guān)鍵性作用。本文主要介紹如何利用Dreamweaver軟件實現(xiàn)農(nóng)產(chǎn)品資訊平臺的網(wǎng)頁制作。

2 網(wǎng)頁制作技術(shù)分析

網(wǎng)站設(shè)計運行在Windows操作系統(tǒng)環(huán)境下，利用SQL Server數(shù)據(jù)庫軟件創(chuàng)建數(shù)據(jù)庫，采用HTML、CSS、JavaScript開發(fā)語言，在Dreamweaver開發(fā)工具中借助Photoshop以及Flash軟件進(jìn)行圖片處理和動畫制作，實現(xiàn)網(wǎng)頁的美觀大方與動態(tài)交互，將網(wǎng)頁頁面不斷進(jìn)行優(yōu)化，對網(wǎng)頁設(shè)計起到了至關(guān)重要的作用。

2.1 HTML

HTML是HyperText Markup Language（超文本標(biāo)記語言）的縮寫，它是構(gòu)成Web頁面的基本元素，它是一種規(guī)范，一種標(biāo)準(zhǔn)，幾乎所有的網(wǎng)頁都是以HTML格式書寫的[3]。HTML 語言具有簡易性、可擴(kuò)展、平臺無關(guān)和通用性等語言特點[4]。HTML是一種標(biāo)記語言，也是網(wǎng)絡(luò)通用語言，應(yīng)用HTML語言可將文本與圖片相結(jié)合，使網(wǎng)頁在瀏覽器中顯示出引人注目的樣式效果，而HTML的通用性可使得網(wǎng)頁頁面的瀏覽面向所有網(wǎng)頁瀏覽者，改變了傳統(tǒng)信息瀏覽受眾范圍小，更新不及時的各項缺點。

2.2 CSS

層疊樣式表（Cascading Style Sheets，CSS）是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言[5]。CSS樣式則是該軟件控制網(wǎng)頁內(nèi)容和外觀的主要工具，可以實現(xiàn)對網(wǎng)頁制作中各對象顯示屬性的控制[6]。CSS具有豐富的樣式定義，彌補(bǔ)了HTML在網(wǎng)頁設(shè)計中的諸多不足，CSS易于修改使用和多頁面應(yīng)用的特點，在網(wǎng)頁設(shè)計中，CSS樣式表可被任何一個頁面引用，實現(xiàn)多個頁面的風(fēng)格統(tǒng)一，有助于網(wǎng)站分格定位，實現(xiàn)網(wǎng)站風(fēng)格統(tǒng)一化，增強(qiáng)用戶瀏覽體驗。

3 農(nóng)產(chǎn)品資訊平臺建設(shè)策略

網(wǎng)站開發(fā)與網(wǎng)頁設(shè)計的涉及面較廣，開發(fā)時應(yīng)對網(wǎng)站開發(fā)有個全面的規(guī)劃，根據(jù)網(wǎng)頁的服務(wù)分類，選擇適合農(nóng)產(chǎn)品資訊平臺的布局風(fēng)格，從確定網(wǎng)站主題、網(wǎng)站整體規(guī)劃、搜集整理網(wǎng)站素材、開發(fā)與測試網(wǎng)站、域名空間的申請與備案、到后來的發(fā)布網(wǎng)站，都應(yīng)做好系統(tǒng)總體規(guī)劃，撰寫好網(wǎng)站策劃書。

3.1 網(wǎng)站的風(fēng)格定位

網(wǎng)站創(chuàng)意的獨特性和風(fēng)格的迥異能展現(xiàn)出網(wǎng)頁的整體品質(zhì)，對網(wǎng)站的發(fā)展有著巨大的影響力[7]。農(nóng)產(chǎn)品資訊平臺為資訊門戶類網(wǎng)站，本類網(wǎng)站以提供信息資訊為主要目的。網(wǎng)站色調(diào)應(yīng)該使用統(tǒng)一標(biāo)準(zhǔn)色，并將其貫徹到網(wǎng)站的各級網(wǎng)頁頁面中，該網(wǎng)站訪問群體多以農(nóng)戶和購買商為主，網(wǎng)頁布局應(yīng)以簡潔清晰為主，導(dǎo)航欄布局尤為重要，不應(yīng)該過分創(chuàng)新，可放置在頁面頂部，起到明確的指引作用。由于資訊類網(wǎng)站信息量龐大，必要時可增加搜索框，方便用戶搜索信息。

3.2 網(wǎng)站整體信息架構(gòu)，基本功能展示

根據(jù)需求分析，該系統(tǒng)為資訊類網(wǎng)站，主要負(fù)責(zé)發(fā)布農(nóng)業(yè)信息實時動態(tài)，提供農(nóng)產(chǎn)品交易信息，避免農(nóng)戶盲目的投入大量查詢時間，錯過最佳出售時機(jī)。網(wǎng)站主要針對農(nóng)戶和購買方需求展開設(shè)計，保證網(wǎng)頁的頁面簡潔與查詢簡便為網(wǎng)站建設(shè)的主要切入點，進(jìn)行網(wǎng)站整體系統(tǒng)架構(gòu)的規(guī)劃。該網(wǎng)站主頁面規(guī)劃框架圖將以下圖所示框圖為主來設(shè)計，如圖1：

3.3 網(wǎng)站的界面設(shè)計

首頁作為一個網(wǎng)站的入口網(wǎng)頁，首頁的設(shè)計往往決定了用戶對網(wǎng)站的整體印象，該頁應(yīng)該編輯得易于了解網(wǎng)站整體，引導(dǎo)用戶對其他頁面的瀏覽，而考慮到一般用戶注冊界面離開后往往很難回到網(wǎng)頁中，該網(wǎng)站在用戶注冊界面設(shè)計可跳轉(zhuǎn)的歡迎界面。用戶注冊界面（圖2所示）。

3.3.1 頁面設(shè)計技術(shù)分析

頁面設(shè)計中主要采用HTML語言建立頁面主體，展示網(wǎng)頁內(nèi)容，而網(wǎng)頁設(shè)計中比較重要與困難的是進(jìn)行網(wǎng)頁布局設(shè)計，結(jié)合CSS+DIV進(jìn)行網(wǎng)頁布局，實現(xiàn)網(wǎng)頁內(nèi)容和樣式效果的分離[8]，提高網(wǎng)頁在瀏覽器中的測試速度。CSS+DIV對網(wǎng)站風(fēng)格建設(shè)，代碼維護(hù)增強(qiáng)用戶網(wǎng)頁瀏覽體驗感都具有較大幫助。用 DIV+CSS 技術(shù)制作網(wǎng)站就是在 HTML中只放網(wǎng)頁內(nèi)容，用CSS控制內(nèi)容的表現(xiàn)，實現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離[9]，使頁面和樣式的調(diào)整變得方便，有助于網(wǎng)頁設(shè)計者進(jìn)行布局控制。包含CSS+DIV嵌套結(jié)構(gòu)的HTML代碼示例如下所示：

3.3.2 預(yù)覽網(wǎng)頁

網(wǎng)頁編輯成功后，應(yīng)在瀏覽器中進(jìn)行頁面預(yù)覽，查看網(wǎng)頁的最終效果，盡管Dreamweaver是一款所見即所得的網(wǎng)絡(luò)編輯器，但網(wǎng)頁最終效果仍以瀏覽器中的展示效果為主，瀏覽器中的顯示效果才是用戶瀏覽到的最終效果。預(yù)覽網(wǎng)頁方法較多，可根據(jù)自身情況選定，在預(yù)覽網(wǎng)頁時可選擇多種瀏覽器進(jìn)行預(yù)覽，觀測多個瀏覽器中的預(yù)覽效果的變化，設(shè)計出兼容于各個瀏覽器的網(wǎng)頁頁面。

3.4 數(shù)據(jù)庫連接

數(shù)據(jù)庫建好以后，如果要實現(xiàn)動態(tài)網(wǎng)頁對其進(jìn)行訪問，必須先進(jìn)行數(shù)據(jù)庫的連接操作，而Dreamweaver中的應(yīng)用程序面板可直接擁有數(shù)據(jù)庫連接的操作的功能。可使用自定義連接字符串方法[10]，也可使用DSN（數(shù)據(jù)源名稱）連接數(shù)據(jù)庫。使用DSN連接數(shù)據(jù)庫，具有許多好處，當(dāng)移動數(shù)據(jù)檔案后只需要重新設(shè)定DSN即可，無須修改原程序。連接時首先新建一個ASP文件，打開DSN對話框，輸入數(shù)據(jù)庫加密的用戶名和密碼進(jìn)行連接，再進(jìn)行測試，網(wǎng)站站點目錄自動生成Connections的文件夾，包含*.asp的文件。 Dreamweaver中DSN（數(shù)據(jù)源名稱）連接數(shù)據(jù)庫為（圖3所示）。

3.5 網(wǎng)站測試

在完成網(wǎng)站后，就該對網(wǎng)站進(jìn)行測試。測試是為了發(fā)現(xiàn)網(wǎng)站中的錯誤和問題，以便于開發(fā)人員及時進(jìn)行更改和完善，主要根據(jù)功能測試、瀏覽器兼容性測試和超鏈接測試三部分進(jìn)行測試，其中瀏覽器測試應(yīng)當(dāng)盡可能使用大多數(shù)用戶使用的瀏覽器版本來測試，并盡可能在多種瀏覽器上測試。優(yōu)化網(wǎng)站速度也是網(wǎng)站測試中重要環(huán)節(jié)之一，盡管網(wǎng)頁中采用高清圖片可使得網(wǎng)頁更加美觀，但會增加網(wǎng)頁頁面加載速度，而對其中的高清圖片進(jìn)行壓縮后再上傳，可增加網(wǎng)頁頁面加載速度，增強(qiáng)用戶體驗感。

4 結(jié)束語

本文較為簡單的闡述了農(nóng)產(chǎn)品資訊平臺在Dreamweaver中的網(wǎng)頁制作技術(shù)。根據(jù)HTML、CSS、Javascript等Web前端開發(fā)技術(shù)完成了對網(wǎng)頁靜態(tài)頁面的設(shè)計，通過進(jìn)入網(wǎng)頁主頁面可以連接到各個子頁面上，并連接了SQL Server數(shù)據(jù)庫，可實現(xiàn)在數(shù)據(jù)庫中的各項操作。Dreamweaver中站點管理器可實現(xiàn)創(chuàng)建和管理網(wǎng)頁及目錄，易于操作，十分適合網(wǎng)頁初學(xué)者設(shè)計網(wǎng)站?？傊?，農(nóng)產(chǎn)品資訊平臺在Dreamweaver中的網(wǎng)頁制作技術(shù)應(yīng)該在深入學(xué)習(xí)中不斷總結(jié)與研究，結(jié)合動態(tài)網(wǎng)頁技術(shù)設(shè)計出一個符合農(nóng)業(yè)信息網(wǎng)站要求的公益性農(nóng)產(chǎn)品資訊網(wǎng)站，服務(wù)大眾。

參考文獻(xiàn)：

[1] 馬莉.淺談dreamweaver[J].電子世界，2017（21）：96-97.

[2] 郭蕾.農(nóng)業(yè)信息網(wǎng)站建設(shè)現(xiàn)狀及其發(fā)展[J].電子技術(shù)，2016（18）：137.

[3] 褚良久.Web前端開發(fā)技術(shù)—HTML、CSS、JavaScript[M].北京：清華大學(xué)出版社.2013.

[4] 張麗霞.基于HTML語言的網(wǎng)頁制作方法[J].電子測試，2018（3）：86-87.

[5] 褚良久.Web前端開發(fā)技術(shù)--HTML、CSS、JavaScript[M].北京：清華大學(xué)出版社，2013.

[6] 韓瑩.Dreamweaver cs6網(wǎng)頁制作中CSS樣式的應(yīng)用研究[J].數(shù)字技術(shù)與應(yīng)用，2017（1）：95-96.

[7] 馬莉.淺談dreamweaver[J].電子世界，2017（21）：96-97.

[8] 肖宇，季敏霞.DIV+CSS技術(shù)在資源平臺網(wǎng)站建設(shè)的應(yīng)用[J].科技資訊，2014（26）：37-39.

[9] 肖宇，季敏霞.DIV+CSS技術(shù)在資源平臺網(wǎng)站建設(shè)的應(yīng)用[J].科技資訊，2014（26）：37-39.

[10] 張呈宇.Dreamweaver制作asp網(wǎng)頁自定義字符串連接sql server 2005數(shù)據(jù)庫方法探究[J].電子信息，2017（5）：67.

【通聯(lián)編輯：梁書】