毕业论文之个人环保网站设计.docx

《毕业论文之个人环保网站设计.docx》由会员分享，可在线阅读，更多相关《毕业论文之个人环保网站设计.docx（29页珍藏版）》请在三一办公上搜索。

1、中央广播电视大学 毕业设计（论文）题目 个人环保网站设计姓 名： 隗海英学 号： 057100165学 校： 北京电大专 业： 信息系统开发与维护指导教师： 摘要本课题主要研究的是网站设计技术，阐述了本环保网站的课题内容、相关技术分析、网站的规划、关键技术的设计、数据库的设计、界面的实现、服务器的设置、数据库的连接与访问以及系统的运行环境和安装过程等。制作网页使用的工具主要有 Dreamweaver MX和ASP，数据库采用的是简单易用的Access，数据库访问使用的是ODBC技术，另外还使用了图像编辑软件Photoshop CS对网站中的部分图片进行了处理等。关键字：环保，动态网页，数据库，

2、Web服务器目录摘要I目录II第1章 绪论1第2章 需求分析与技术分析22.1 需求分析22.1.1 需求调查22.1.2 可行性分析22.2 相关技术分析22.2.1 操作系统和Web服务器技术对比22.2.2 数据库技术对比32.2.3 网站制作软件对比32.2.4 动态网页制作技术对比42.2.5 数据库连接技术对比4第3章 系统设计63.1 网站规划63.1.1 网站的主题和风格63.1.2 网站的整体结构及内容63.2 关键技术设计73.3 数据库设计73.4 交互式页面设计8第4章 系统实现104.1 LOGO和Banner104.2 界面的实现104.2.1 主页设计104.2.

3、2 绿色生活网页设计114.2.3 自然美景网页设计124.2.4 留言板设计124.3 设置服务器134.4 交互式页面的实现164.4.1 数据库连接代码的实现164.4.2 数据库访问代码的实现164.5 系统安装过程174.6 系统运行过程17结束语18致谢19参考文献20附录21第1章 绪论当今时代，环境污染已成为影响人们生活质量的世界性问题，也是全球都在关注和积极探索、深入研究的问题，工业污染、水污染、臭氧层破坏、生物多样化变化，曾几何时我们生存的这个星球已经变得面目全非。作为地球生命的一份子，这些问题也引起了我的深深思考，我觉得要想保护好我们的生存家园，最主要的一点就是要让地球上

4、的所有人类都能关注环保问题，多多学习环保知识，改变不良的生活方式，不要再因为我们人类自己的贪婪和一些恶劣的生活习惯来造成人为的污染；另外国家也应当在这方面多多投入人力、物力，尽可能的杜绝和改善一些工业发展造成的污染。而环保意识的加强、环保知识的普及无疑还是需要多作宣传，在众多的宣传媒介当中，包括书报、影视等都没有互联网更方便、更快捷、更有效。因此我想建立一个宣传环保的网站，和大家一起在信息高速路上学习环保知识，关注环保新闻，提高环保意识，普及环保常识，了解绿色环保的生活方式，欣赏地球家园的美丽生态景观，并且通过网站的留言板，为所有关注环保问题的网友提供一个交流的平台，为保护我们的生存环境一起出

5、谋划策，尽一份绵薄之力，作一份应有的贡献。第2章 需求分析与技术分析2.1 需求分析2.1.1 需求调查随着Internet技术的成熟与发展，成千上万的电脑用户学会了在网上发布、交流和获得信息，各种网站如雨后春笋般涌现，使得整个互联网变得多姿多彩。现在，无论是官方的还是个人的针对各个领域的环保网站应有尽有，有些网站内容相当全面和精彩，也有的比较简单。目前在人们的生活中环保意识还是远远不够的，需要进一步加强，所以作为宣传环保的公益性网站应该是多多益善的，只要有人看到它，就可以在它的影响范围内使环保的观念得到宣传，环保的知识得以普及，使网友们更加关注这一日益严重的生存危机，从而反思自己的言行，为环

6、保事业贡献一点自己的力量。 本站是环保网站，所以题材都要围绕这一主题来找，首先需要找一些环保方面的新闻报道，其次需要搜集一些环保科普知识和环保生活小常识，然后还要搜集一些地球自然景观和珍稀野生动物的精美图片，另外还要有一些警示性的图片，教育大家关注环保问题，爱护地球家园。2.1.2 可行性分析做一个个人的环保网站在技术和环境等方面的要求都不用太高，首先从技术方面来说要学过静态和动态网页的制作，并且要会建数据库；另外从环境配置方面来说，用来制作网站的电脑必须能上网，装有IE浏览器，还要安装有制作静态和动态网页的制作工具，比如Dreamweaver MX或FrontPage等，而操作系统的要求并不

7、是很高，Windows XP、Windows 95/98、或Windows 2000等都可以。构建网站开发环境，第一步是要将本机设置成一台真正的Internet服务器，以便提供WWW服务。首先需要给电脑安装网卡；其次，应该具有固定的IP地址，当用户在客户端的浏览器地址栏中键入URL地址时，就可以通过域名系统找到相应的IP地址并访问该网站；第三，在Internet服务器上必须安装相应的Web服务器程序，以便处理用户的请求，并运行用户请求页面，这就是建设一个网站所需要的基本环境配置。2.2 相关技术分析2.2.1 操作系统和Web服务器技术对比1 目前最流行的操作系统主要是微软公司的Windows

8、系列和最初由芬兰赫尔辛基大学的一个大学生编写的Linux。到现在为止，Windows系列仍然处于垄断地位，Windows之所以受欢迎是因为它有着众多的优点，比如：（1）图形化的界面：只要会使用鼠标，不必学习太多的操作系统知识，就能进行工作。（2）多用户、多任务：Windows可以使多个用户用同一台电脑而不会互相影响；多任务是让电脑互不干扰的执行不同的任务。（3）众多的应用程序：Windows有众多的应用程序可以满足用户各方面的需求。（4）良好的网络支持：Win 9x和Win 2000都内置了TCP/IP协议和拨号上网软件，用户只需进行一些简单的设置就能上网。同时用户可以在Windows中实现资

9、源共享。（5）良好的硬件支持：Windows 95以后的版本都支持“即插即用”技术。使新硬件的安装变得更加简单。（6）出色的多媒体功能：在Windows中可以进行音频、视频的编辑和播放，可以支持高级的显卡、声卡，使其“声色具佳”。这些特点都是其他操作系统所无法比拟的。2 要想在网站里访问动态的数据就必须配合使用应用程序服务器ASP，而使用ASP则必须安装支持它的网站服务器，例如IIS（Internet Information Server，因特网信息服务器）或PWS（Personal Web Server，个人网页服务器）。IIS能用于Windows 98以上版本，而PWS只能用于Window

10、s 95/98，有一定的局限性，显而易见，IIS的功能比PWS强得多了，因此我采用的是IIS作为网站的服务器。2.2.2 数据库技术对比对于动态网站，要准备一个用于储存客户信息的数据库，简单的网站可使用简单、易取的Access数据库，因为Access数据库界面友好、操作灵活、转移方便、运行环境简单，存储方式单一、支持ODBC，可以将程序应用于网络，并与网络上的动态数据相联接。SQL Server是基于服务器端的中型的数据库，可以适合大容量数据的应用，在功能和管理上要比Access强得多，在处理海量数据的效率，后台开发的灵活性，可扩展性等方面非常有优势。Access虽不适合作为大型数据库的使用，

11、但是对于像本站一样的小型个人网站已经足够了。2.2.3 网站制作软件对比现在流行的网站制作软件都是以图形化界面的操作方式进行网站开发的，其中最具代表性的是微软公司的FrontPage和Macromedia公司的Dreamweaver MX。FrontPage是微软推出的一个功能很强的网页编辑工具，它最大的特点是易学易用，可以像编辑Word文档一样在网页中加入表格、图像、声音和动画等媒体素材。而Dreamweaver MX是美国Macromedia公司开发的集网页制作和网站管理于一身的“所见即所得”的网页制作软件，与FrontPage不同，Dreamweaver MX采用的是浮动面板的设计风格，

12、这种操作方式的直观性与高效性是FrontPage所无法比拟的。正因为其最佳的制作效率、无可比拟的控制能力、强大的Web应用程序开发能力和网站管理功能以及浏览器适应性使其成为当前最为流行的网页制作软件，鉴于以上所述，本网站也将使用Dreamweaver MX作为本站的开发工具。2.2.4 动态网页制作技术对比本网站的动态网页是使用ASP技术来完成的。ASP是目前流行的Web应用开发技术之一，ASP之所以能受到重视和使用的原因，主要在于利用ASP开发的脚本程序全部运行在服务器端，与用户采用何种浏览器无关，因而极大地减少了对客户端的要求。其工作原理是：浏览器从Web服务器调用ASP文件，服务器端的脚

13、本引擎对每一条语句进行解释执行，然后再把执行的结果生成HTML文件传给客户端，显示在浏览器上。ASP的主要特点有：使用普通的文本编缉器，比如Windows记事本，就可以进行编辑。ASP脚本无需编译，可以在服务器端直接解释执行。语言兼容性高： ASP与所有的ActiveX Script语言都相容，可结合HTML、VBScript、Java Script、Active X服务器组件来设计。面向对象：ASP脚本可以方便地引用系统组件和内置组件。安全性高：ASP源程序不会被传到客户端，可以避免源程序被他人窃取。易于操控数据库：ASP可以轻易地通过ODBC驱动程序连接各种不同的数据库。网站内容的动态化、

14、数据库化是其发展的必然趋势，ASP以其简单、高效的开发方式及丰富的控制手段为网站的开发应用提供了强有力的支持。2.2.5 数据库连接技术对比在互联网迅猛发展的今天，人们已经不再只满足于通过浏览器看到静态页面，而是希望能根据要求生成更加灵活、生动的动态页面。数据库则用来存储这些动态信息，通过网页访问数据的前提是要建立数据库的连接，下面是目前流行的数据库连接技术的对比和介绍。DAO：提供了一种通过程序代码创建和操控数据库的机制。最大特点是对Mcrosoft Jet数据库的操作很方便，也是操作Jet数据库时性能最好的技术接口之一，并且通过DAO技术可以访问从文本文件到大型后台数据库等多种数据格式。A

15、DO：是基于OLE DB的访问接口，它是面向对象的OLE DB技术，继承了OLE DB的优点，属于数据库访问的高层接口。 ODBC：是一种底层的访问技术，因此，ODBC API可以使客户应用程序从底层设置和控制数据库。ODBC的最大优势是使用方便，对于不同的数据库，ODBC提供了一套统一的API，使应用程序可以应用所提供的API访问任何提供了ODBC驱动程序的数据库，本站就是采用ODBC技术访问数据库的。第3章 系统设计3.1 网站规划3.1.1 网站的主题和风格本站是一个个人环保网站，所以整个的设计都要突出环保这一主题，网站的名称是“家园网”，LOGO和Banner的图案均以蓝天白云和绿树为

16、背景，再配以文字，都体现了环保的风格。网站的文字和图片的色彩也都是以绿色和蓝色为主，菜单和链接都很简洁，除文字外首页还配有轻柔舒缓的音乐，给人以无边的遐想，另外还有一些环保图片以丰富网站的视觉效果，引起人们对环境污染问题的深刻思考。在美丽家园板块主要内容都是图片，有美不胜收的花卉、山川、河流等地球自然生态景观，也有各种神奇可爱的小动物和珍稀的野生动物，还有一些警示性图片，旨在教育和提醒人们关注环保问题。总之整个网站包括文字、图片和色彩都是以环保为主题风格。3.1.2 网站的整体结构及内容网站主要包括六大部分，第一部分是网站的首页，首页之外分别是环保新闻、环保知识、美丽家园、绿色生活和给我留言五

17、个板块。具体结构如下图：我的主页个人环保网站环保新闻环保知识美丽家园绿色生活给我留言留言板环保小常识（10篇）新闻内容（10篇）知识内容（11篇）自然美景可爱动物警示教育图3.1 网站功能结构 网站每个板块的具体功能如下：1 我的主页：网站栏目主菜单和友情链接，二级网页内容导航和环保画廊。2 环保新闻：最近的各种有关于环保的新闻报道。3 环保知识：各种环保常识、环保机构组织徽章和环境标志。4 美丽家园：自然生态景观图片、神奇野生动物图片和警示教育图片。5 绿色生活：各种环保的生活小常识。6 给我留言：网站留言板，用于网友间的交流。3.2 关键技术设计在本站动态部分的留言板页面，主要使用了Req

18、uest对象、Response对象、Server对象、Recordset对象和Connection对象等。在 default.asp和 delform.asp页使用Request对象的QueryString集合检索查询字符串page_no的值，用来确定显示第几页数据。在add页中使用Request对象的Form集合，用于获取传过来的记录编号。在default.asp页使用了Response对象的Write方法用于从Web服务器向客户端浏览器输出留言记录数据。在delete页和denglupanduan页分别使用了Response对象的Redirect方法在执行完操作后返回首面或根据判断转入de

19、lform.asp页或fault.asp页。在default.asp、denglupanduan页和delform.asp页使用了Recordset 对象创建和访问记录集、制作记录导航、搜索记录和更新记录。在delform.asp页使用了Server对象的CreateObject方法创建ADODB.Recordeset对象实例，用来建立到数据库的连接并实现对数据库的访问等。3.3 数据库设计本站的数据库采用的是微软自带的Access数据库，数据库名称为db1.mdb，数据库内共有tAdmin和tGuestBook两个表。 tAdmin表用来存储管理员信息（名称和密码）。tGuestBook表用

20、来存储网友留言的信息（姓名、内容、主页地址、邮箱等）。表结构分别如下表：表3.1 tAdmin表结构序号字段名称类型大小备注1fAdmin文本20管理员名称2fPassword文本20管理员密码表3.2 tGuestBook表结构序号字段名称类型大小备注1fID自动编号网友留言编号（主键） 2fName文本20网友姓名3fContent文本255网友留言内容4fOIcq文本15网友OICQ5fE-Mail文本50网友邮箱6fHomepage文本100网友主页地址7fTime日期/时间网友留言具体时间8fReplyContent备注站长回复留言3.4 交互式页面设计交互式页面主要包括留言板的书写

21、留言页、管理员登录页、管理留言页、站长回复页等。具体如下面各图：图3.2 书写留言页面图3.3 管理员登录页面图3.4 管理留言页面图3.5 回复留言页面第4章 系统实现4.1 LOGO和Banner本站的LOGO和Banner都突出了环保的风格，LOGO是一棵形如小房子的绿树，下面簇拥着鲜花，衬托着网站的名称“家园网”。Banner的背景是蓝天、白云和一片绿色的草原，草原上还有一座小房子和一棵小树，上面写着本站提倡的口号“请爱护我们赖以生存的家园”，具体如下面各图：图4.1 网站LOGO图4.2 网站Banner4.2 界面的实现 4.2.1 主页设计网站主页的版面设计基本是这样的：最上面是

22、网站的LOGO和Banner，下面是主菜单，点击可以进入二级页面和留言板。菜单下面分为左右两部分，左边是一个滚动的环保日历和其它环保网站的友情链接，右边是二级页面的内容导航和链接。再下面是环保画廊，有一些滚动的环保图片，环保画廊之下是一个栏目导航。主页的色调以蓝色和绿色为主，背景是几棵朦胧的树，文字和链接是简洁的黑色或蓝色，突出环保主题。在主页上还插入了一些Gif图片，使页面显得活泼生动，不那么单调死板。另外还配有一支好听的乐曲，在浏览网页的时候给人以听觉上的享受。网页布局和主页设计如下面各图： LOGOBanner主菜单环保日历友情链接网站内容导航和链接环保画廊栏目导航图4.3 网站布局结构

23、图4.4 网站主页4.2.2 绿色生活网页设计图4.5 二级网页4.2.3 自然美景网页设计图 4.6 三级网页4.2.4 留言板设计留言板分为书写留言、显示留言和管理留言等几个模块。用户首先看到的页面是显示留言页面，然后可以选择留言或者对留言进行管理，当然管理留言是有密码保护的。管理模块允许站长回复或者删除留言。具体功能和主要文件及界面设计如下面各图：显示留言Default.asp 留言成功提示Chenggong.asp 书写留言Add.asp 留言板管理员登陆Logain.asp 、fault.aspdenglupanduan.asp、删除留言delete.asp管理留言delform.a

24、sp回复留言reply.asp、huifutijiao.asp数据库连接odbc_connection图4.7 留言板功能模块图4.8 留言板首页4.3 设置服务器安装完IIS后，需要启动其Web服务。具体操作步骤如下：1 Windows XP操作界面下选择“开始”“设置” “控制面板”，打开“控制面板”对话框。2 单击“管理工具”图标，打开管理工具对话框，如图4.9所示。图4.9 “管理工具”窗口3 双击图标，打开“Internet信息服务”对话框，如图4.10所示。图4.10 “Internet信息服务”窗口4 选中 “默认网站”，单击右键，选择“属性”，打开“默认网站属性”对话框，如图4

25、.11所示。图4.11 “默认网站属性”对话框5 选择“网站”选项卡。在“网站标识”选项下的“描述”文本框中输入关于站点名称的说明，在“IP地址”文本框中输入该服务器在网络中的IP地址（该地址是用来访问、浏览网页时用的，用户在本地进行的设计测试阶段此IP地址可以不设置），如图4.12所示。图4.12 “网站”标签选项6 选择“主目录”选型卡。单击右侧的“浏览”按钮来设定网站的根文件夹所在路径，在“本地路径”中显示出网站所存在的物理路径名称，如图4.13所示。图4.13 “主目录”选项卡7 单击“文档”选项卡。在“启用默认文档”复选框下显示的文档名称是网站的首页名称。将首页面确定为Index.h

26、tm，如图4.14所示。图4.14 “文档”选项卡8 单击“确定”按钮，完成使用IIS的设置。4.4 交互式页面的实现4.4.1 数据库连接代码的实现在odbc_connection.asp页中用如下代码来实现ASP与数据库的连接：4.4.2 数据库访问代码的实现在留言板的显示留言页（default.asp）的数据库访问代码如下：0 循环直到当前页结束或记录集结尾I=I-1 每显示一条，I减1，当变成0时，表示本页结束%4.5 系统安装过程1 将本网站拷贝到硬盘上的某一目录下，如：拷贝至E盘根目录。2 设置IIS，将默认的Web站点主目录设置为该目录。具体步骤：(1) 右击默认网站，选择属性；

27、(2) 单击“主目录”按钮，将本地路径改为网站的根文件夹，其他不变，确定；(3) 设置启动默认文档为：Index.html。4.6 系统运行过程系统安装完毕后，可以在浏览器的地址栏中输入网站的地址，即可显示网站的首页，在首页的菜单栏里有其它页面的相关链接，直接点击就可以浏览本站的所有内容，也可以点击“给我留言”的链接，进入留言板页面进行留言。结束语经过我的个人网站的建设，对网站制作过程有了更深刻的了解，我觉得静态网页的制作相对比较容易，作为环保网站，素材也很好找。就我个人而言，对动态网页的制作方面还缺少很多的理论与实际操作知识，而网站的留言板部分却必须运用ASP进行动态网页的编辑，此技术的运用

28、大大地增加了我的工作量，在制作过程中也遇到了很多困难，但经过自己的努力和向老师、同学请教都一一解决了。通过这次网站设计，我感觉自己在动态网页制作方面的技能有了很大提高，今后我将继续学习动态网页制作的技巧，将本站的动态部分做的更加美观、完善，并将继续丰富静态部分的内容。致谢通过这次个人环保网站设计，使我增加了很多的知识，也掌握了很多网页设计的操作技巧，虽然仍有很多不足之处，但我一直在努力改进，这次毕业设计过程中，得到了很多朋友的帮助和老师的指点，特别是我的指导老师给我提供了很多有关网页设计的书和材料，并抽出时间帮我修改与纠正，在此表示衷心的感谢！参考文献1 刘世峰数据库基础与应用第1版中央广播电

29、视大学出版社，20032 赵增敏、朱粹丹、赵朱曦ASP动态网页设计电子工业出版社，20053 铁军网站设计技术第1版中央广播电视大学出版社，20044 李建梅新概念中文Dreamweaver MX教程第1版北京科海电子出版社，20055 贺雪晨、高幼年、胡隽、王能编著多媒体技术实用教程第1版清华大学出版社，2005附录附录1 主要文件列表1 Index.html 网站首页2 xw.html 环保新闻3 zs.html 环保知识4 jy.html 美丽家园5 ls.html 绿色生活6 Default.asp 留言板主页7 Add.asp 新留言 8 Chenggong.asp 留言成功提示 9

30、 Logain.asp 管理员登录 10 Denglupanduan.asp 登录判断 11 Fault.asp 登录错误12 delform.asp 管理留言13 Delete.asp 删除留言14 Reply.asp 回复留言15 Huifutijiao.asp 回复提交16 Odbc_connection.asp 数据库连接附录2 数据库结构列表表3.1 tAdmin表结构序号字段名称类型大小备注1fAdmin文本20管理员名称2fPassword文本20管理员密码表3.2 tGuestBook表结构序号字段名称类型大小备注1fID自动编号网友留言编号（主键） 2fName文本20网友姓名3fContent文本255网友留言内容4fOIcq文本15网友OICQ5fE-Mail文本50网友邮箱6fHomepage文本100网友主页地址7fTime日期/时间网友留言具体时间8fReplyContent备注站长回复留言附录3 设计代码动态网页（default.asp）设计代码：%LANGUAGE=VBSCRIPT CODEPAGE=936%留言板 我的主页 环保新闻 环保知识美丽家园 绿色生活 给我留言 全部留言 留言 管理 0 循环直到当前页结束或记录集结尾I=I-1 每显示一条，I减1，当变成0时，表示本页结束% 姓 名 留言时间 留 言 站长回复   %-