《网络建设毕业论文.doc》由会员分享，可在线阅读，更多相关《网络建设毕业论文.doc（33页珍藏版）》请在三一办公上搜索。
1、毕业论文题 目 校园信息交流网站的建设指导老师 李 宏 图 年 级 二五级 院 校 云 南 警 官 学 院 专 业 计 算 机 科 学 与 技 术 姓 名 白 朝 剑 学 号 5051184 2009年5月20日校园信息交流网站建设白朝剑（云南警官学院 计算机科学与技术专业，2005，云南 昆明，650223）摘要：本文围绕网站的项目分析、网站构思、整体设计、效果图设计、页面生成、数据库设计、运用程序设计、网站的测试、发布、推广各个重要环节，运用数据库与ASP整合的开发技术，实现了网站动态菜单、信息更新、后台登录、在线留言、站内调查等动态网页的交互功能。对网站设计进行分析和讨论，阐述了开发一个
2、网站的全过程，并提出网站设计的新思想。在网站设计中既要讲求视觉界面上的艺术美感，用户操作过程中的简单易用，又要注重计算机网络方面的程序控制。只有做到设计艺术、人机工学与计算机技术的完美结合，才能开发出特色鲜明、具有一定文化内涵和艺术品位的网站。关键词：网页设计 ASP技术 网站开发Exchange of information on campus construction sitesBai ChaoJian(Yunnan Police Officer Academy of Computer Science and Technology, 2005, Kunming, Yunnan, 65022
3、3)Abstract: This article projects around the site analysis, site concept, the overall design, the effect of map design, page generation, database design, application programming, web site testing, release, promotion of various important aspects of the use of a database with ASP technology integratio
4、n to achieve a Dynamic Menu website, information updates, background registry, online messages, site investigation of the interactive features dynamic pages. Site design analysis and discussion on the development of the whole process of a Web site and site design of the new ideas put forward. Web si
5、te design it is necessary to stress the art of visual aesthetic interface, the user operation in the process of easy-to-use, but also pay attention to the process control computer network. Only by succeeding in the design of art, science and the mechanic were the perfect combination of computer tech
6、nology in order to develop distinctive characteristics, a certain cultural content and artistic quality of the site.Key words: web design ASP technology website development目 录1引 言12网站构思22.1设计定位22.2网站策划分析22.3栏目策划22.4功能设置22.5网站布局32.6开发工具的选用及介绍42.6.1 Photoshop CS2简介42.6.2 Dreamweaver 8.0简介42.6.3 Flash
7、8.0简介52.6.4 Microsoft Office Access软件简介52.7构建开发环境52.7.1安装IIS服务器组建52.7.2配置ASPAccess开发环境52.7.3 在Dreamweaver8中建立网站测试站点63网站界面美工设计63.1网站元素设计63.2网站的界面设计74数据库设计95ASP运用程序设计125.1连接数据库程序设计125.2动态菜单设计125.3前台显示程序设计135.3.1网站首页程序设计135.3.2信息标题页程序设计145.3.3信息显示页程序设计155.4留言板块程序设计165.4.1签写留言程序设计175.4.2查看程序设计175.5后台管理系
8、统程序设计195.5.1用户登陆管理程序设计205.5.2用户管理程序设计：215.5.3菜单管理程序设计225.5.4综合信息管理程序设计235.5.5留言管理程序设计245.5.6调查管理程序设计256网站测试266.1运用程序测试266.2浏览器兼容性测试267网站的发布推广277.1网站的发布277.1.1购买服务器277.1.2申请域名277.2网站的推广277.2.1代码优化277.2.2搜索引擎推广287.2.3CNNIC通用网址注册288总结28主要参考文献291 引 言随着网络技术的发展，因特网已渐渐成为人们生活中不可或缺的一部分。因特网正逐步改变全球的通讯方式，并成为继印刷
9、媒介（报纸、书刊、杂志等）、广播、电视后的第四传媒。这也向设计工作者提出了一个全新的课题。一个崭新的、前景无限的设计领域网页设计顺势而生，并飞速发展着。这不仅给很多企业带来了商机，也给很多设计公司带来了发展空间，更给每一个网页设计者提供了一个多彩的舞台。网页不仅拥有传统媒体的特点，同时又超越了传统媒体，具有传播更为直接、省力、有效的优点。学校信息网站建设是学校教育信息化建设的重要方面，是适应现代教育技术和信息技术的发展，加大学校对外交流与宣传力度，提高教学、科研、管理效率的重要途径；学校网站是学校对外宣传的窗口，也是展示全校师生才能，加强对校外联系，互相学习，共同发展的阵地，学校网站建设的目的
10、是促进师生与学校共同发展。如今网络的高速发展，及教育体制改革的深入，通过网络自主学习与搜集信息，已经成为每个人所必须做的事情。特别是计算机知识，因其自身知识更新快的特点，通过信息网站进行自主学习无疑是最佳的选择。2 网站构思2.1 设计定位综合国内外优秀网站的特点，界面简洁、美观，采用CSS标准构建网站，并融入FLASH动画元素，实现设计艺术与网络技术的完美结合。校园信息网的建设是为了加大学校对外交流与宣传力度，提高教学、科研、管理效率的重要途径；同时加强对校外联系，互相学习，促进师生与学校共同发展。2.2 网站策划分析网站采用居中的形式，并把所有页面都分为头部中部底部三部分组成，其中头部和底
11、部都是调用页面top.asp和but.asp形式。前台建立首页，信息标题页，信息显示页，其中信息标题页与信息显示页通过动态菜单循环调用；首页不但显示相关重要信息，还有变化图片，滚动图片，网站调查，友情链接等设计。留言板块建立鉴写留言，查看留言。后台管理系统主要建立菜单管理、综合信息管理、调查管理、留言管理和用户管理功能。网站的设计选用动中有静、静中有动的设计风格，同时把导航嵌入到图片与Flash动画之中，更加突出网站的吸引力。2.3 栏目策划为了增加网站的可互动性，网站栏目采用动态菜单：菜单分为一级菜单和二级菜单，分别储存于数据库的yikind表和erking表，通过程序调用于网站头部，并在后
12、台建立管理模块，可根据用户自己的需要自定义菜单，并且随时可以更改、添加、删除等。2.4 功能设置整个网站的功能结构主要有数据库、后台管理系统、前台显示模块三部分组成，功能模块结构图如2-1所示。图 21网站功能结构数据库：该数据库采用Microsoft Office Access软件建立，以自设计数据库来存储网站所用相关信息。网站前台：导航应该层次清晰，简单直白，让浏览者轻松找到想要的东西，使网站的浏览过程轻松愉快。留言系统应该做到方便留言、方便查看，还要加入回复留言功能，以提高留言者之间的互动性。调查内容要有一定的意义。后台管理：要注重实用性，要能通过后台系统管理网站上的内容。管理的操作流程
13、要通俗易懂，让没有专业基础的人也可以使用。2.5 网站布局网站结构和布局要做到条理清晰。首页要和其他文件分开放置。网站中的所有元素，包括图片、文字、声音和Flash动画等，应该分门别类放置到各个文件夹。在整个网站布局中，建立十个文件夹，分别以“Admin、CSS、Data、dongimg、Guestbook、Img、NewsFocus、Scripts、Templates、Vote、Webs”命名，并把网站的所有文件分门别类的放到相应文件夹里面。这十个文件夹类别依次为：后台系统文件、样式表文件、数据库文件、滚动图片文件、留言板文件、图片多媒体文件、变化特效文件、JS代码文件、调查文件、网站前台页
14、面文件。网站结构如图2-2、2-3所示。图 22网站的文件布局2.6 开发工具的选用及介绍“工欲善其事，必先利其器”。善于利用开发工具才能达到事半功倍的效果。本设计选用Dreamweaver、Flash和Photoshop作为开发工具。并做如下分工：Photoshop负责网站的风格设计，包括页面以及页面中所需的各种元素的制作；Dreamweaver利用Photoshop制作的版面及元素进行网页的生成；Flash负责网站上所有的Flash动画设计。2.6.1 Photoshop CS2简介Adobe Photoshop是由美国Adobe公司开发的一套集图像制作、编辑修改、广告创意、图像合成、图像
15、输入/输出于一体的专业图形处理软件。Adobe Photoshop在电脑美术的二维平面领域里，是最具代表性的软件。运用Adobe Photoshop，可以随心所欲的设计色彩丰富、形式多样的网页，配合Adobe Photoshop的捆绑软件Adobe Image Ready，可以制作完美的网页界面、翻转按钮、Banner动画等。因此，运用它进行网页设计，将会达到事半功倍的效果。2.6.2 Dreamweaver 8.0简介Dreamweaver是Macromedia公司推出的一款所见即所得的网页编辑工具（现被Adobe公司收购）。Dreamweaver采用的是苹果机浮动面版的设计风格，具有超强的
16、直观性与高效性。Dreamweaver对于动态网站的支持特别全面，可以轻而易举地实现很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。因此，说Dreamweaver是高级网页制作的首选并不为过。Dreamweaver最新的版本为：Adobe Dreamweaver 8.0。Adobe Dreamweaver 8.0不但在静态网页制作中有极大的优势，还支持网站的统筹管理、ASP（网站程序开发语言）、JSP（网站程序开发语言）等程序的编写与调试。2.6.3 Flash 8.0简介Flash是一款非常优秀的多媒体制作软件，利用Flash可以做出很出色的卡通动漫、MTV（音乐电视）短片
17、等。当然，还有一个很值得Flash炫耀的就是运用Flash制作的动感网站。现在网络已经涌现出不计其数的Flash站点。比较著名的如韩国的Flash动感网站，几乎全部采用了Flash 和Director（多媒体程序）。在韩国的网站设计界，由于拥有足够的带宽和出色的Flash动画制作技术，使得很多制作精美、绚丽动感的Flash网站在网络世界里脱颖而出，成为众人喜爱和模仿的对象。可以说Flash已经渐渐成为交互式矢量的标准，是未来网页的一大主流。2.6.4 Microsoft Office Access软件简介Microsoft Office Access软件是办公软件自带的一款简单方便的数据库开发
18、软件，利用Microsoft Office Access开发的数据库使用起来非常方便，在没有安装办公软件的服务器上也可以使用，是普通网站数据库的最佳选择。2.7 构建开发环境ASP动态网站的开发环境为：Windows XP/NT/2000/Vista（操作系统）IIS5.0/6.0/7.0（服务器组建）+ Access（数据库）。在网站设计开始前，要安装IIS （Internet Information Server的缩写）互联网信息服务器，构建网站的开发环境。2.7.1安装IIS服务器组建本网站是在Windows Vista系统下进行开发的。Windows Vista系统中包含有IIS最新版
19、本IIS7，但默认是不安装的。所以安装完Windows Vista系统之后要重新安装IIS。安装的步骤为：开始控制面板程序打开或关闭Windows功能。勾选“Internet信息服务”选项，确定。2.7.2配置ASPAccess开发环境IIS7安装完成后，还需要配置ASPAccess开发环境。配置ASPAccess开发环境有两个步骤：设置应用程序池默认值和Temp（文件）目录安全性。应用程序池默认值的设置步骤如下：开始控制面板管理工具Internet信息服务管理器，打开设置选项卡。选择左边的“Default Web Site”，打开“基本设置”对话框。把应用程序池设置为“Classic .NE
20、T AppPool”（默认是“Default AppPool”）。设置Temp目录安全性的步骤如下：打开“C:WindowsServiceProfilesNetworkServiceAppDataLocalTemp”目录。右键打开“Temp”目录属性选项卡，再依次打开安全编辑选项卡。单击“添加”，在下面的“输入对象名称来选择”输入框中输入Authenticated Users，确定。返回到“Temp 的权限”，将Authenticated Users的权限中的完全控制给勾上，确定。至此，完成了Windows Vista中IIS7的安装及ASPAccess的配置。2.7.3 在Dreamweav
21、er8中建立网站测试站点启动Dreamweaver 8，然后依次选择主菜单中的“站点”、“新建站点”命令，打开站点定义设置窗口，输入站点名；单击下一步，进入服务器技术选举窗口，这里选择ASP VBScript服务器技术，单击下一步，选择本地编辑和测试，并选择站点存储位置；单击下一步，输入测试URL的地址，单击测试，显示测试成功；单击下一步下一步至完成。3 网站界面美工设计3.1 网站元素设计网站元素设计包括网页背景、网站LOGO（标志）以及网页中出现的教学大楼、国徽、学生等，还有FLASH中用到的各种元素。网站LOGO以“一张主题图片”作为设计元素，如图3-1所示的最终效果图。图 31网站LO
22、GO效果图除了网站LOGO，还有网页中用到的教学大楼、国徽、学生、卡通人物等元素需要设计。这些元素的设计要保留透明背景的源文件，以便在网页和FLASH的设计中用到。网站元素的最终效果图如图3-2所示。图 32网站元素效果图3.2 网站的界面设计本网站所有前台和留言页面采用“头部导航-内容-版权”三部分组成，模版如图3-3所示：标题+导航（top.asp文件）内容（相关功能文件）版权信息（but.asp文件）图 33网站模板效果图其中top.asp文件以简单的一个表格实现标题图片和flish的定位，以及动态菜单链接的实现；而but.asp文件也仅仅使用一个表格定位版权信息；在主文件中代码标识bo
23、dy首部以的方式引用top.asp文件内容，同理在代码标识body尾部以的方式引用but.asp文件。网站所有前台和留言页面采用此结构，这样第一可以保持网站外观的统一，第二在需要增减导航、版权信息时仅仅需要修改一个文件。top.asp效果图如3-4所示图 34网站top.asp效果图but.asp效果图如3-5所示图 35网站but.asp效果图界面设计主要是运用Dreamweaver软件，按照网站构思和风格，把上面已经设计好的网站元素进行组合设计，构成最终的网站的平面效果图。效果图的设计要注意整体性和协调性。如图3-6所示。图 36网站页面4 数据库设计本网站通过策划分析一共要建立七个表，分
24、别为Admin、new1、yikind、erkind、vitem、vname和guestBook，这七个表分别用来存储管理员信息、文章数据、一级栏目信息、二级栏目信息、网站调查标题、网站调查项目和留言信息。打开Microsoft Office Access软件，新建数据库文件，保存为Data.mdb。并按照策划分析建立七个表。如图4-1所示。图 41数据库设计示意图建立数据表相关信息如下： 表1：Admin（存储用户信息）字段名数据类型字段大小备注ytssid自动编号长整型用户自编号，主键tuz_supe文本50用户名tuz_super_pas文本50密码Admin_type文本50用户级别表
25、2：news1（存储综合信息）字段名数据类型字段大小备注id自动编号长整型信息自编号，主键yiid数字长整型一级菜单自编号erid数字长整型二级菜单自编号title文本50信息标题newstime日期/时间日期文章发布时间content备注长整型文章内容hit数字长整型文章浏览次数shoupic文本50图片连接表3：yikind（存储一级栏目菜单信息）字段名数据类型字段大小备注yiid自动编号长整型一级菜单自编号，主键yiname文本50一级菜单内容show是/否1是否启用菜单yiorder文本50一级菜单顺序表4：erkind（存储二级栏目菜单信息）字段名数据类型字段大小备注erid自动编号
26、长整型二级菜单自编号，主键yiid数字长整型一级菜单自编号ername文本50二级菜单内容show是/否1是否启用菜单erorder文本50二级菜单顺序 表5：vname（存储调查项目信息）字段名数据类型字段大小备注id自动编号长整型调查项目自编号，主键title文本50调查项目内容cf文本50是否重复投票kind文本50单选/多选vtime日期/时间日期二级菜单顺序表6：vitem（存储调查条目信息）字段名数据类型字段大小备注id自动编号长整型调查条目自编号，主键vid数字长整型调查项目自编号vtitle文本50调查条目内容vocunt数字长整型投票次数表7：guestbook（存储留言信息
27、）字段名数据类型字段大小备注id自动编号长整型留言自编号，主键chenghu文本50留言者称呼myface文本50头像homepage文本50个人主页email文本50电子邮箱qq文本50留言QQcontenttitle备注长整型留言标题content备注长整型留言内容recontent备注长整型回复内容emot文本50表情ip文本50留言者IPdatetime日期/时间日期留言时间5 ASP运用程序设计网站的ASP运用程序设计，包括网站数据库连接、动态菜单、前台文章显示、留言板块、后台管理系统的设计。其中一个网站主要用到的DML语句有Insert（插入数据）用于向表中插入数据；Update（
28、更新数据）用于更新表中现存数据；Delete（删除数据）用于删除表中现存数据；Select（查询数据）用于查询表中所有行和若干列数据；5.1 连接数据库程序设计连接数据库的程序写成一个独立的脚本，打开记事本进行编写，编写完保存为conn.asp即可，然后在每个前台页面中调用该程序即可。数据库调用代码为：。数据库连接程序代码如下。5.2 动态菜单设计网站动态菜单实现是先在数据库中建立两个储存菜单的表yikind（存储一级栏目菜单信息）、erkind（存储二级栏目菜单信息），然后通过后台菜单管理把需要的菜单添加到数据库中，菜单管理还包含修改、删除、菜单顺序和菜单是否显示设置等功能。其中二级栏目的储
29、存与调用是居于一级栏目的编号之下，具体实现见后台菜单管理。网站首页菜单调用相关程序如下： 本院首页a href=look_title.asp?yiid= 实现效果如下：5.3 前台显示程序设计前台程序的任务是把数据库中的文章信息提取出来，显示到相应的栏目下，是直接在前台页面中编写程序代码来实现的。首先要编写连接数据库程序，然后要编写数据显示程序。5.3.1 网站首页程序设计网站首页为一个网站的面子，不但要美观，还要有各种特效，信息排版等。（一）网站首页信息显示是先编写一段打开数据库的代码，然后编写显示信息的代码与转到详细页面的代码循环执行，最后关闭数据库。相关代码如下：% sub readne
30、ws(string)set rs=server.createobject(ADODB.recordset)sql=select top 5 * from news1 where &string& order by id descrs.open sql,conn,1,1（此段为打开数据库表）do while not rs.eofresponse.Write （此段为点击转到详细页面设置）rs(title)if len(trim(rs(title)=15 thenresponse.write left(trim(rs(title),15)elseresponse.write left(trim(r
31、s(title),15) & end ifif date()rs(newstime)+2 thenresponse.write end if（显示相关信息）response.write rs.movenextloop（循环执行）rs.closeset rs=nothingend subcall readnews(yiid=12 and erid=11) %（二）特效滚动图片区域相关代码 var speed=20tpgd2.innerHTML=tpgd1.innerHTMLfunction Marquee1()if(tpgd2.offsetWidth-tpgd.scrollLeft=0)tpgd
32、.scrollLeft-=tpgd1.offsetWidthelsetpgd.scrollLeft+var MyMar1=setInterval(Marquee1,speed)tpgd.onmouseover=function() clearInterval(MyMar1)tpgd.onmouseout=function() MyMar1=setInterval(Marquee1,speed)（三）特效变换图片相关代码imgUrl1=images/1.jpg; imgtext1=图片说明imgLink1=escape(./webs/show.asp?id=2);imgUrl2=images/2
33、.jpg; imgtext2=图片说明imgLink2=escape(./webs/show.asp?id=2); var focus_width=480 var focus_height=232 var text_height=18 var swf_height = focus_height+text_height var pics=imgUrl1+|+imgUrl2 var links=imgLink1+|+imgLink2 var texts=imgtext1+|+imgtext2 5.3.2 信息标题页程序设计%set rs=server.createobject(ADODB.reco
34、rdset)if trim(request(erid)= thensql=select * from news1 where yiid= & cstr(yiid) & order by id DESCelseer=oksql=select * from news1 where yiid= & cstr(yiid) & and erid= &cstr(erid)& order by id DESCend ifrs.open sql,conn,1,1if rs.eof thenresponse.write 暂无相关信息elsenumber=20 设置梅页显示条数if request(page)=
35、thencurpage = 1elsecurpage = cint(request(page)end ifrs.pagesize=cint(number)rs.absolutepage = curpagefor i= 1 to rs.pagesizeresponse.Write if len(trim(rs(title)=15 thenresponse.write left(trim(rs(title),18)elseresponse.write left(trim(rs(title),18) & end ifif date()rs(newstime)+2 thenresponse.write
36、 end ifresponse.write &rs(newstime)&rs.movenextif rs.eof theni=i+1exit forend ifnext%实现效果图如下：5.3.3 信息显示页程序设计信息标题：发布时间：信息内容：实现效果图如下：5.4 留言板块程序设计留言板块的功能主要是提交留言数据并显示。在留言页面上编写提交和显示数据的程序，把相应的内容提交到数据库，同时显示已提交的留言。5.4.1 签写留言程序设计首先建立签写留言页面如图5-1所示图 51留言系统前台鉴写留言页面结构添加留言相关代码如下：Set rs = Server.CreateObject(ADODB
37、.Recordset) rs.Open select * from guestbook,conn,1,3 rs.addnew rs(chenghu ) =trim(txtname) rs(myface ) =trim(txttitle) rs(homepage ) =trim(txtemail)rs(qq ) =trim(txtemail) rs(contenttitle ) =trim(txttitle) rs(content ) =trim(txtemail) rs(emot ) =invert2(txtarea) rs(recontent ) = rs(ip) =txtip rs.Update rs.close set rs=nothing conn.close5.4.2 查看程序设计建立留言显示页面如图52所示：图 51留言系统前台查看留言页面结构然后编写查看留言相关代码：%set rs=server.createobject(ADODB.recordset)sql=select * from guestbook order by id desc
