《农业技术展示网》网站制作

1、农业技术展示网网站制作摘 要：中国经济随着改革开放，每年都会大幅增长，特别是工业，更是发生着翻天覆地的变化，但是中国有着一个奇怪的现象，中国可以把人送上太空，可以制造核武器，但是中国大部分地区，在农业生产上，还停留在几千年前的耕作方式。农业技术展示网，通过搜寻网络上一些优秀的技术文章，通过网站的方式传播。借助div+css技术布局网站，使用SQL server 2008作为数据库服务器，使用VS2010作为开发工具，实现了网站后台上传文章，管理文章，前台展示文章，供用户浏览。功能上虽然不是很强大，但是基本达到一般的使用功能，因本人水平有限，通过参考相关技术文章，同学的帮助，开发出了这一个差强人

2、意的网站，还望多多指教。关键词： div+css 农业发展 网站 1数据库1.1 设计数据库数据库设计是建立数据库及其应用系统的技术，是信息系统开发和建议中的核心技术。由于数据库应用系统的复杂性，为了支持相关程序运行，数据库设计就变得异常复杂，因此最佳设计不可能一蹴而就，而只能是一种“反复探寻，逐步求精”的过程，也就是规划和结构化数据库中的数据对象以及这些数据对象之间关系的过程。首先，我的网站需要的内容，是资料保存，用户保存，所以，我只要设计两个表，命名为：Article（资料保存表），Users（用户保存表）。数据库名字为lvyou。在Article表里，我需要设计的内容为ArticleID

3、（资料编号），ArticleTltle（文章标题），ArticleAuthor（文章出处），ArticleTime（文章添加时间），ArticleContent（文章内容），ArticleClass（文章类别）。在Users表里，我需要设计的内容为UserID（用户标号），UserName（用户名），UserPwd（用户密码），UserSex（用户性别），UserBirth（用户生日），UserPhone（用户电话），UserMobilePhone（用户手机），UserCode（邮编），UserAddress（地址），UserEnail（电子邮件），UserQQ（用户QQ），UserClass

4、（用户类别）。然后确定哪些选项可以为空（null），表内的数据类型。一部分数据类型如表1.1所示：表1.1数据类型Character 字符串char(n)固定长度的字符串最多 8,000 个字符varchar(n)可变长度的字符串。 最多 8,000 个字符。text可变长度的字符串。 最多 2GB 字符数据。Unicode 字符串nchar(n)固定长度的Unicode 数据。 最多 4,000 个字符ntext可变长度的Unicode 数据。 最多 2GB 字符数据。在Article里，除ArticleID，ArticleTitle外，其余均可为空（null），设ArticleID为主键（

5、主键是表中的一个或多个字段，它的值用于惟一地标识表中的某一条记录。）在Users表里，除UserID，UserPwd，UserName，外，均可设为空（null）。如图5.1所示图1.1数据库截图1.2 新建网站打开Microsoft Visual Studio 2010，点击左上方文件新建网站，选择C#编程语言，选择ASP.NET网站，确定文件保存的路径。如图1.2所示图1.2建网站修改web.config文件，连接数据库，Web.config文件是一个XML文本文件，它用来储存 ASP.NET Web 应用程序的配置信息（如最常用的设置ASP.NET Web 应用程序的身份验证方式），它可

6、以出现在应用程序的每一个目录中。当你通过VB.NET新建一个Web应用程序后，默认情况下会在根目录自动创建一个默认的Web.config文件，包括默认的配置设置，所有的子目录都继承它的配置设置。如果你想修改子目录的配置设置，你可以在该子目录下新建一个Web.config文件。它可以提供除从父目录继承的配置信息以外的配置信息，也可以重写或修改父目录中定义的设置。例如：本代码实现了网站连接数据库。web.config配置文件（默认的配置设置）以下所有的代码都应该位于和之间，下面的示例省略了这段XML标记(1) 节配置 ASP.NET 身份验证支持（为Windows、Forms、PassPort、N

7、one四种）。该元素只能在计算机、站点或应用程序级别声明。 元素必需与 节配合使用。(2) 节控制对 URL 资源的客户端访问（如允许匿名用户访问）。此元素可以在任何级别（计算机、站点、应用程序、子目录或页）上声明。必需与 节配合使用。(3) 节配置 ASP.NET 使用的所有编译设置。默认的debug属性为“True”.在程序编译完成交付使用之后应将其设为True。(4) 为 ASP.NET 应用程序提供有关自定义错误信息的信息。它不适用于 XML Web services 中发生的错误。自定义Web.config文件配置节过程分为两步。1) 在在配置文件顶部 和 标记之间声明配置节的名称和

8、处理该节中配置数据的 .NET Framework 类的名称。2) 在 区域之后为声明的节做实际的配置设置。示例：创建一个节存储数据库连接字符串.可以通过使用ConfigurationSettings.AppSettings 静态字符串集合来访问 Web.config 文件。例如：获取上面例子中建立的连接字符串。Dim sconstr As String = ConfigurationSettings.AppSettings(SconStr)Dim scon = New SqlConnection(sconstr)1.3 制作首页首先制作一张首页，鼠标右键单机解决方案管理器内的网站目录（没有出

9、现的在视图内选择显示），选择添加新项，选择web窗体，修改名称，单击添加。如图1.3所示图1.3制作首页打开新建的web窗体，删除原有的界面，在源代码内输入部分代码，例如body（页面主体），form（表格），head（网页标题），例如农业技术展示这段代码主要表示了网页的版权，网页标题等等。一般基础的完成后，在body范围内添加div插件，由于本网页的界面大量采用div+css技术，为方便起见，在div后加入id，使得在以后的页面中减少工作量，例如：欢迎浏览，这段代码新建了一个样式header，内容为单方向滚动“欢迎浏览”。如图1.4所示图1.4修改页面1.4 使用div+css排版在页面排版

10、时，关使用div是不能让页面变得优美的，需加上css技术，为方便使用，打开视图css属性，使得其在页面显示。在拆分页面，当鼠标光标停留在代码内，鼠标右键在css属性里单机，会出现新建样式，修改样式等选项，由于在之前提过将div添加ID，所以，可以很方便的修改该div，并可使其在其他页面也可以使用，若只想在当前页面使用，可选择新建级联样式，该选项会让div只在当前界面生效。在修改样式时，一般注意的问题是该div是否可以按照制作者意愿在一个区域内显示，一般调节样式里的定位与布局内容。如图1.5所示表1.5 div+css1.5 添加图片用div+css排好界面之后，可以添加图片了，图片可以让网页变

11、得色彩丰富，添加图片时，在工具栏里将图片控件拉进div里，在图片属性选择图片与调节大小即可。如图1.6所示图1.6添加图片1.6 制作其他页面制作其他页面时，若页面与主页相似，可将主页部分代码复制进去，其他方法与上面介绍的相同，这里不再深聊。在制作后台页面时，为方便，可将后台页面归于同一个文件夹内1.7 加数据绑定在所有页面都完成后，需进行数据绑定了，所谓数据绑定，是将数据库中的内容绑定到一个控件内，使其可以显示出来。除首页外，在工具栏里，将控件GridView与SqlDataSource拉进div内，可通过控件的功能实现数据绑定，或者使用代码实现功能。鼠标单击SqlDataSource控件，

12、出现SqlDataSource的代码，输入：protected void Page_Load(object sender, EventArgs e) this.PageCtrl1.gridView = GridView1; string Sql = ; /查询语句 Sql=select*from rticle whereArticleClass = 饲料绿肥 ORDER BY ArticleTimeDESC SqlDataSource1.SelectCommand = Sql;该代码提取了数据库Article表内所有ArticleClass内容是饲料绿肥的文章，然后在GridView控件输入：

13、 asp:HyperLink ID=Title NavigateUrl= runat=server Target=_blank Text=文章来源:asp:Label ID=ArticleAuthorLabel runat=server Text=asp:Label ID=Time runat=server Text=该代码提取了SqlDataSource提取的内容，并将这些内容显示在页面上。除首页外，其他页面操作相同。首页的数据绑定与以上不同，需将控件Repeater与SqlDataSource拉进div内，SqlDataSource的代码为：asp:SqlDataSource ID=Sql

14、DataSource4 runat=server ConnectionString=SelectCommand=SELECT top 10 ArticleID, ArticleTitle FROM Article WHERE (ArticleClass=ArticleClass)ORDERBYArticleIDDESConselecting=SqlDataSource4_Selecting这段代码的意思为提取Article前10行类别为饲料绿肥的文章。Repeater的代码：a href=ArticleView.aspx?Id= target=_blank这段代码意思为显示SqlDataSou

15、rce提取的内容并可点击跳转至ArticleView.aspx页面。如图5.7所示图1.7数据绑定2 测试网站2.1 管理员登陆完成网站后，测试网站功能实现状况，首先测试是否可以登陆后台，管理员是否可以正常登陆。本网站的用户名为admin，密码为。如图2.1图2.1管理员登陆输入密码后，测试后台添加文章功能，如图2.2图2.2添加文章输入标题与内容，选择文章栏目中的选择，这里选择饲料绿肥。点击添加。、返回后台管理，点击文章管理，查看刚才添加的文章是否出现，如出现，则证明文章可以添加至数据库中。如图6.3图2.3文章管理2.2 前台文章显示在确认后台文章可添加至数据库后，查看前台是否可正常显示绑

16、定的文章。如图2.42.4前台文章显示 3 结束语在这次设计网站过程中，使我更深入的了解了div+css技术对于设计网站的便利，运用div+css技术，的确可以为程序员提供便利，为使用者带来美感，这次设计相对而言是比较令我满意的，通过自己完成了一个网站的建设，让我非常高兴。关于div+css，我觉得最为困难的就是排版了，要将网页能够按自己所想的方式排列，但每次都会出现一点问题，例如模块移位之类的，但通过实践发现，只要我计算好模块的高度与宽度，设置好排列位置，其实也是可以完美的实现网页布局的。关于数据库，我觉得在设计的时候，最要清楚自己需要做什么，按自己的需要设计，以最少的方式实现数据库内容。在这次的网页设计中，其实还有一点地方不尽人意，局限与本人技术，在后台添加文章时，文章字数超出一定的范围就会出错，实在无法解决，还有一个搜索问题，也是没有实现，只能把他作为网页的装饰。参考文献1 罗必良现代农业发展理论，农业出版社，2009.03.2 杨持农业生态学，高等教育出版社，200