基于Dreamweaver中农产品资讯平台的搭建

陈洋 王治兵 李江科 王明俊 吴丽丽

摘要：“互联网+农业”是新时代下应用现代信息技术和互联网通信平台，推动传统农业向现代农业转变的重要举措。农业网站是互联网与农业结合的一种模式，而农业网站中的农产品资讯类网站对现代农业发展有着极其重要的作用，建立一个免费的农产品资讯平台对农民了解农业时事动态、降低交易成本、优化农产品资源配置、实现农产品销售利益最大化具有重要意义。因此，本项目将通过对Dreamweaver开发软件设计农产品资讯网站的各项技术和网站建设过程进行简要分析，搭建一个免费提供给农户和商家一些关于农产品交易信息的具有服务性公益网站特点的农产品资讯平台。

关键词：农产品资讯平台；Dreamweaver网页制作； HTML；CSS；

中图分类号：TP311 文献标识码：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 引言

農产品销售是一直存在于农户心中的难题，农产品“滞销”的现象也曾一度上演，从根本上解决农产品销售问题，必须打开市场销路。互联网时代电子商务的发展，借助网络发布农产品信息，使得农产品销售渠道得以扩展，可以从根本上解决农产品“销售难”问题。Dreamweaver是一款所见即所得的网络编辑软件，深受网页制作者和学习者的青睐[1]。Dreamweaver的四种网页布局技术（表格、框架、层、DIV标签与CSS样式表的结合）使得Dreamweaver在网页设计初学者中备受欢迎。基于Dreamweaver的易操作性，本项目在该软件上搭建农产品资讯平台，并对网站进行测试。

随着互联网技术的迅猛发展，我国农业信息网站大量涌现，建设农业信息网站是带动新型农业发展的重要手段之一，应用互联网技术将农产品的管理和销售集中化，有助于减少资源浪费，优化农产品资源配置。目前，我国农业信息网站的数量已经超过了4万，但农民无法充分利用已有的农业信息网，网站内容的有效性仍有待提高[2]。作为一个农业大国，我国农业信息网站的建设发展远远跟不上我国的农业生产、管理、教学和科研的发展需要。由于我国农业科技水平与国内其他行业相比较为落后，在“互联网+农业”的应用中不具优势，而互联网是建立农业新型推广技术，实现新形态下农产品销售的最佳手段，因而在农业信息网站中建立公益性农产品资讯平台对现代农业发展具有关键性作用。本文主要介绍如何利用Dreamweaver软件实现农产品资讯平台的网页制作。

2 网页制作技术分析

网站设计运行在Windows操作系统环境下，利用SQL Server数据库软件创建数据库，采用HTML、CSS、JavaScript开发语言，在Dreamweaver开发工具中借助Photoshop以及Flash软件进行图片处理和动画制作，实现网页的美观大方与动态交互，将网页页面不断进行优化，对网页设计起到了至关重要的作用。

2.1 HTML

HTML是HyperText Markup Language（超文本标记语言）的缩写，它是构成Web页面的基本元素，它是一种规范，一种标准，几乎所有的网页都是以HTML格式书写的[3]。HTML 语言具有简易性、可扩展、平台无关和通用性等语言特点[4]。HTML是一种标记语言，也是网络通用语言，应用HTML语言可将文本与图片相结合，使网页在浏览器中显示出引人注目的样式效果，而HTML的通用性可使得网页页面的浏览面向所有网页浏览者，改变了传统信息浏览受众范围小，更新不及时的各项缺点。

2.2 CSS

层叠样式表（Cascading Style Sheets，CSS）是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言[5]。CSS样式则是该软件控制网页内容和外观的主要工具，可以实现对网页制作中各对象显示属性的控制[6]。CSS具有丰富的样式定义，弥补了HTML在网页设计中的诸多不足，CSS易于修改使用和多页面应用的特点，在网页设计中，CSS样式表可被任何一个页面引用，实现多个页面的风格统一，有助于网站分格定位，实现网站风格统一化，增强用户浏览体验。

3 农产品资讯平台建设策略

网站开发与网页设计的涉及面较广，开发时应对网站开发有个全面的规划，根据网页的服务分类，选择适合农产品资讯平台的布局风格，从确定网站主题、网站整体规划、搜集整理网站素材、开发与测试网站、域名空间的申请与备案、到后来的发布网站，都应做好系统总体规划，撰写好网站策划书。

3.1 网站的风格定位

网站创意的独特性和风格的迥异能展现出网页的整体品质，对网站的发展有着巨大的影响力[7]。农产品资讯平台为资讯门户类网站，本类网站以提供信息资讯为主要目的。网站色调应该使用统一标准色，并将其贯彻到网站的各级网页页面中，该网站访问群体多以农户和购买商为主，网页布局应以简洁清晰为主，导航栏布局尤为重要，不应该过分创新，可放置在页面顶部，起到明确的指引作用。由于资讯类网站信息量庞大，必要时可增加搜索框，方便用户搜索信息。

3.2 网站整体信息架构，基本功能展示

根据需求分析，该系统为资讯类网站，主要负责发布农业信息实时动态，提供农产品交易信息，避免农户盲目的投入大量查询时间，错过最佳出售时机。网站主要针对农户和购买方需求展开设计，保证网页的页面简洁与查询简便为网站建设的主要切入点，进行网站整体系统架构的规划。该网站主页面规划框架图将以下图所示框图为主来设计，如图1：

3.3 网站的界面设计

首页作为一个网站的入口网页，首页的设计往往决定了用户对网站的整体印象，该页应该编辑得易于了解网站整体，引导用户对其他页面的浏览，而考虑到一般用户注册界面离开后往往很难回到网页中，该网站在用户注册界面设计可跳转的欢迎界面。用户注册界面（图2所示）。

3.3.1 页面设计技术分析

页面设计中主要采用HTML语言建立页面主体，展示网页内容，而网页设计中比较重要与困难的是进行网页布局设计，结合CSS+DIV进行网页布局，实现网页内容和样式效果的分离[8]，提高网页在浏览器中的测试速度。CSS+DIV对网站风格建设，代码维护增强用户网页浏览体验感都具有较大帮助。用 DIV+CSS 技术制作网站就是在 HTML中只放网页内容，用CSS控制内容的表现，实现网页表现和结构的分离[9]，使页面和样式的调整变得方便，有助于网页设计者进行布局控制。包含CSS+DIV嵌套结构的HTML代码示例如下所示：

3.3.2 预览网页

网页编辑成功后，应在浏览器中进行页面预览，查看网页的最终效果，尽管Dreamweaver是一款所见即所得的网络编辑器，但网页最终效果仍以浏览器中的展示效果为主，浏览器中的显示效果才是用户浏览到的最终效果。预览网页方法较多，可根据自身情况选定，在预览网页时可选择多种浏览器进行预览，观测多个浏览器中的预览效果的变化，设計出兼容于各个浏览器的网页页面。

3.4 数据库连接

数据库建好以后，如果要实现动态网页对其进行访问，必须先进行数据库的连接操作，而Dreamweaver中的应用程序面板可直接拥有数据库连接的操作的功能。可使用自定义连接字符串方法[10]，也可使用DSN（数据源名称）连接数据库。使用DSN连接数据库，具有许多好处，当移动数据档案后只需要重新设定DSN即可，无须修改原程序。连接时首先新建一个ASP文件，打开DSN对话框，输入数据库加密的用户名和密码进行连接，再进行测试，网站站点目录自动生成Connections的文件夹，包含*.asp的文件。 Dreamweaver中DSN（数据源名称）连接数据库为（图3所示）。

3.5 网站测试

在完成网站后，就该对网站进行测试。测试是为了发现网站中的错误和问题，以便于开发人员及时进行更改和完善，主要根据功能测试、浏览器兼容性测试和超链接测试三部分进行测试，其中浏览器测试应当尽可能使用大多数用户使用的浏览器版本来测试，并尽可能在多种浏览器上测试。优化网站速度也是网站测试中重要环节之一，尽管网页中采用高清图片可使得网页更加美观，但会增加网页页面加载速度，而对其中的高清图片进行压缩后再上传，可增加网页页面加载速度，增强用户体验感。

4 结束语

本文较为简单的阐述了农产品资讯平台在Dreamweaver中的网页制作技术。根据HTML、CSS、Javascript等Web前端开发技术完成了对网页静态页面的设计，通过进入网页主页面可以连接到各个子页面上，并连接了SQL Server数据库，可实现在数据库中的各项操作。Dreamweaver中站点管理器可实现创建和管理网页及目录，易于操作，十分适合网页初学者设计网站。总之，农产品资讯平台在Dreamweaver中的网页制作技术应该在深入学习中不断总结与研究，结合动态网页技术设计出一个符合农业信息网站要求的公益性农产品资讯网站，服务大众。

参考文献：

[1] 马莉.浅谈dreamweaver[J].电子世界，2017（21）：96-97.

[2] 郭蕾.农业信息网站建设现状及其发展[J].电子技术，2016（18）：137.

[3] 褚良久.Web前端开发技术—HTML、CSS、JavaScript[M].北京：清华大学出版社.2013.

[4] 张丽霞.基于HTML语言的网页制作方法[J].电子测试，2018（3）：86-87.

[5] 褚良久.Web前端开发技术--HTML、CSS、JavaScript[M].北京：清华大学出版社，2013.

[6] 韩莹.Dreamweaver cs6网页制作中CSS样式的应用研究[J].数字技术与应用，2017（1）：95-96.

[7] 马莉.浅谈dreamweaver[J].电子世界，2017（21）：96-97.

[8] 肖宇，季敏霞.DIV+CSS技术在资源平台网站建设的应用[J].科技资讯，2014（26）：37-39.

[9] 肖宇，季敏霞.DIV+CSS技术在资源平台网站建设的应用[J].科技资讯，2014（26）：37-39.

[10] 张呈宇.Dreamweaver制作asp网页自定义字符串连接sql server 2005数据库方法探究[J].电子信息，2017（5）：67.

【通联编辑：梁书】