个人空间网站毕业论文

宁德职业技术学院毕业设计论文题 目： 个人空间网站 作 者： 林汉斌 学 号： 2009042127 班 级： 09网络（1）班 系 别： 计算机 专 业： 计算机应用技术（网络技术方向） 指导教师： 陈小利 专业技术职务 讲师 20012 年 06 月 福建福安摘要本论文就个人网站的规划与建设，以软件工程的方法对全过程进行了分析与研究。本论文的主要工作集中在：1. 对Web页进行概述，主要是对Internet的历史和发展作了回顾，并对Web页的定义和特性进行阐述。并对网站开发过程中使用的开发工具和技术作了简要的介绍。2. 对自己的个人网站从规划到建设进行了详细的分析。3. 使用ASPIISAccess技术实现了我的网站的各种功能，其中和数据库的连接使用到了ODBC技术。4. 使用Dreamweaver(DIV+CSS)开发软件工具对我的个人网站进行布局，使我的网站布局整体工整、美观。关键词 网站ASP Dreamweaver(DIV+CSS) Access风格创意目录1 绪 言12 基本工具的选择12.1 Web的简介12.1.1 什么是Web12.2 开发工具的介绍及选择22.2.1 梦幻网页的编织者-Dreamweaver8.022.2.2 网页动画的制作软件-Micromedia Flash 3.022.2.3动态网站的脚本语言-ASP22.3 关系型数据库的选择32.3.1 Access33 个人网站设计分析43.1 相关术语及解释43.1.1 Internet43.1.2 站点43.1.3 超链接43.2 我的个人网站的设计与规划43.2.1 我的个人网站43.2.2 功能划分53.2.3 功能描述54 网站的详细设计64.1 数据库的设计64.1.1 数据库搭建64.1.2 连接数据库74.2 网站页面设计84.2.1 界面设计84.2.2 关键代码设计155 测试与维护225.1 测试与维护225.1.1 IIS(Internet 信息服务)安装配置225.1.2 Dream weaver测试站点和用IIS测试本地站点235.1.3 维护24结束语25谢辞26参考文献271 绪 言进入21世纪，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大1。目前，我国上网的人口已近五个亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑， 网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷出现。个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的风格与才华。2 基本工具的选择2.1 Web的简介2.1.1 什么是WebWeb(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。Web采用浏览器/服务器（B/S）工作模式，其运作模式可以描述为：请求处理应答。Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示2。2.2 开发工具的介绍及选择2.2.1 梦幻网页的编织者-Dreamweaver8.0Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式3。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序3。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。2.2.2 网页动画的制作软件-Micromedia Flash 3.0Micromedia Flash 8.0用于web站点的交互式的矢量图形和动画的制作，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动的富于表现力的网页3。Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。 2.2.3动态网站的脚本语言-ASPActive Server Pages：“动态服务器网页”，一般简称为“ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或 JavaScript是在客户端（Client）的浏览器上执行，若使用VBScript来设计程序，客户端（Client）在浏览器中可以显示程序执行的结果，可是，客户端（Client）若使用Netscape浏览器就无法显示VBScript的执行结果4。(一)、ASP的特点：1、任何开发工具皆可发展ASP只要使用一般的文书编辑程序，如Windows记事本，就可以编辑3。当然，其他网页发展工具，例如，FrontPage Express、 rontPage等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写ASP，可能会发生一些意想不到的离奇状态。通过各家浏览由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于不同的浏览器。2、语言相容性高ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java ScriptActive X服务器组件来设计外，并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（Third Party）所提供的语言。3、隐密安全性高如果我们在浏览器中直接查看网页的原始代码，就只能看到文件，原始的ASP程序代码是看不到的！这是因杰ASP程序先于网站服务（eb Server）端执行后，将结果转换成标准文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的ASP程序并不会轻易地被看见进而被盗用。4、易于操控数据库ASP可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可将“文本文件”或是”Excel” 文件当成数据库用。5、面向对象学习容易ASP具备有面向对象（Object-Oriented）功能，学习容易，ASP提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用ASP内建的“Application”对象或”Session”对象所撰写出来的ASP程序可以在多个网页之间暂时保存必要的信息3。所以我选择了ASP结合Dreamweaver架构个人站点。2.3 关系型数据库的选择2.3.1 AccessMicrosoft Access是一种桌面数据库，只适合数据量少的应用，在处理少量数据和单机访问的数据库时是很好的，效率也很高。但是它的同时访问客户端不能多于4个。Microsoft Access数据库有一定的极限，如果数据达到100M左右，很容易造成服务器iis假死，或者消耗掉服务器的内存导致服务器崩溃。3 个人网站设计分析3.1 相关术语及解释3.1.1 InternetInternet(英特网)诞生于上世纪60年代，发展非常慢，到90年代才开始迅速发展6。现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。3.1.2 站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。3.1.3 超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接6。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使Web服务存在广泛和持久的生命力，超链接可以说是Web的灵魂。3.2 我的个人网站的设计与规划3.2.1 我的个人网站因为是个人网站，所以只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术6。因此将网站设计分为前台页面展示平台和后台在线管理平台。3.2.2 功能划分本网站设计实现的功能分前台与后台功能，前台有：发表个人心情、查看个人资料、发表留言、图片放映特效、添加日志、视频欣赏与文章阅读；后台有：修改个人资料、回复与删除留言、删除日志；3.2.3 功能描述1、主页在主页界面，可以实现发表个人心情，说说你自己想说的话，然后把它提交给数据库sjk中的fb表，利用把你刚才提交的内容提取到主页中来；在主页中还有文字和图片的移动，用Flash软件制作的图片特效。2、个人资料是一个关于我基本信息的页面，在这个页面中，你们可以了解关于我个人的一些资料，通过这个页面，大家能够更进一步加深对我的了解；当然，该页面可以更好地展现我个人的风格与特征。3、相册在这个页面，可以展示漂亮的图片，包括我的照片、我的同学、风景照片、美女栏木；点击图片时，可以切换到图片特效播放，可以增添大家的视觉感官，丰富相册。4、留言板在该页面中，大家有什么话想对我说，可以发表留言告诉我；通过该页面，能够促进我们的交流与沟通，而我则通过后台登陆，对其进行回复与删除。5、MV该页面包括家乡文化视频、音乐MV、搞笑视频；虽然资料不是很多，但都是不错的题材，希望大家能喜欢。6、日志在其中展示我喜爱的东西，包括我的日记、精品文章、社会文化和一些杂七杂八的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。 7、收藏是我个人收藏一些我很喜爱的东西，包括视频、文章、名人名句；在这个页面中，大家可以和我一起分享我喜爱的，能够进一步促进我们的联系。8、后台管理是我管理和添加到新内容的地方，为了方便实现信息的经常更新，我设计了这个管理页面，经过身份认证后我可以进入网站对其中的信息进行管理。 9、页面组织和数据库设计在明确了我的个人网站的风格和定位后，就是网站的材料组织以及网站的页面设计和数据库设计。建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块。结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢？栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。因此我将自己的个人网站分为八个栏目，分别是关于主页、个人资料、相册、日记、MV、留言、收藏、后台管理7。4 网站的详细设计4.1 数据库的设计4.1.1 数据库搭建使用Access2000 实现关系型数据库1、 用户密码登记表Admin存储了系统用户的信息，包括：登陆口令，登录密码。它的设计视图如图1：图12、 个人资料信息表，如图2图23、 留言基本档案表liuyan存储了用户的档案包括：ID,留言者名字、留言者E-mail、留言内容，留言时间，回复留言，留言头像，留言主题,其中ID为该表的主关键字。它的设计视图如图3：图34、日记基本信息表 log，存储了用户的档案包括：ID、日志标题、日志内容、创建时间和创建日期，其中ID为该表的主关键字。它的设计视图如图4：图4以上数据表为Access类型的库文件，将它定名为：“sjk.mdb”。4.1.2 连接数据库在上面，我们已经为我们的程序创建了一个数据库，在这里，我们来用ASP把程序和数据库连接起来，以后就可以连接到数据库、在ASP中显示数据库中的数据以及更复杂的插入、修改和删除8。 一起看以下代码，这就是ASP程序中常用的连接数据库的代码： 一切OK了!结束ASP程序。4.2 网站页面设计4.2.1 界面设计1、主页 是整个网站的门面，其整体布局工整、美观。（1）功能利用DIV+CSS样式与ASP语言对主页进行布局，让大家再打开网站的第一眼可以使其焕然一新，感受其主页所带来的视觉美观，也可以了解本网站的发展方向，主要要实现什么功能，包含多少子页。（2）组成构造网站打开显示的第一页面Index.asp，用来包含所有的子页，同时还具备发表心情功能。如图5图52、个人资料该页面主要介绍我个人的基本资料与兴趣爱好，可以通过浏览该页，了解我个人的基本信息。（1）功能利用ASP对象语句显示信息，从数据库中提取个人资料，显示在页面上。大家可以浏览页面，了解我的基本信息。（2）组成构造个人资料显示页面document.asp：用来显示所有个人信息。如图6图63、相册是一个个人相片和精彩图片展示的地方，在相册中，可以了解到我的个人风采和自己喜欢的图片。（1）功能利用ASP对象语句显示图片，让大家可以看见所有图片的缩略图，同时每个图片都有快照功能，可以浏览图片的全图。（2）组成构造相册结果显示页面 photo.asp：用来显示所有图片，同时还具备图片的分类功能和图片单个浏览功能。（3）相册页面浏览效果图，如图7： 图7（4）图片效果浏览图，如图8：图84、留言本是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。（1）功能利用SQL语法过滤特定的用户留言意见，让站长可以针对某位特定用户所发表的意见作出独立的回答，同时，用户在发表个人意见时，若认为意见内容涉及敏感的话题或是意见内容涉及私人隐私，都可用“悄悄话”的方式发言，这些“悄悄话”将不会被显示出来让大家看到，当然，站长拥有管理的能力，只要以密码登录管理模式，就可以进行各个用户的单独意见回复，而且还能看到用户所留下的“悄悄话（2）组成构造意见留言结果网页liuyan.asp：用来显示用户发言与站长回复内容，同时还具备查看留言和发表留言两个功能。（3）留言页面浏览效果图,如图9。图94、发表留言浏览效果图，如图10。图105、日记是一个记录个人日记和精品收藏文章的地方，供给大家一起分享。（1）功能利用ASP对象语句分类显示日记或文章记录，让大家浏览到最新的日记或文章（2）组成结构日记或文章显示页面 log.asp：显示所有日记或文章，同时还具备显示不同子类日记或文章（3）日记页面浏览效果图，如图12图116、后台管理是一个统领整个网站后台运行的页面，可以在该页面中进行修改、删除、回复。 （1）功能 利用ASP对象语句对网站进行操作，可以对留言板进行回复与删除；可以对日志进行删除；也可以对个人信息进行修改。 （2）组成结构 登陆页面：admin.asp；个人信息修改：d2.asp; 留言删除：del.asp; 日志删除：zd.asp9。 （3）登陆页面，如图12图12 （4）个人信息修改，如图13图13（5）留言删除，如图14图14（6）日志删除，如图15图154.2.2 关键代码设计 1、DIV+CSS样式关键代码：bodybackground:url(image/bj.jpg);margin:0px;padding:0px;text-align:center;#h1float:left;color:#666666;margin:10px 20px 20px 0px; width:300px;#h2float:right;margin:10px 20px 20px 0px;#containerposition:relative;margin:1px auto 0px auto; width:1000px;#globallinkwidth:800px;height:100px;margin:0px;background:url(image/banner.jpg)no-repeat;padding-bottom:100px;font-size:20px; border:2px groove #FF9966; #globallink ul list-style-type:none; position:absolute; display:inline;width:684px;left:111px;op:140px;padding:0px;margin:0px; height:57px;background-color:#666666; border:2px groove #FF9966;#globallink li float:left; text-align:center; padding-top:10px; padding:15px 10px 1px 20px; #leftwidth:150px;height:700px;background-color:#666666;border:2px groove #FF9966;float:left;margin:2px;border-bottom:1px dashed #333333;#left img margin:6px;#left ul list-style-type:none; margin:0px; padding:0px;#left liheight:20px; width:150px; border-bottom:1px dashed #FF9966;#left li a display:block; float:left;#left li a:link,#left li a:visited font-size:18px; color:#333333;#left li a:hover color:#FF6633; font-size:15px; background:#333333; width:150px; height:20px;#middle width:640px; height:600px; background:#666666; margin:10px; float:left; border:1px groove #00CC33;#middle h4 margin:0px 1px 0px 0px; float:left; width:430px;#middle1width:740px;height:800px;background:#666666;margin:10px;float:left; border:1px groove #00CC33; cursor: crosshair; float:left;#middle1 table margin:2px 5px 5px 5px; cursor: wait;#middle1 table a:hovercolor:#333333;#middle2width:230px;height:600px;float:right;cursor:move; margin:0px;#middle2 img border: 1px groove #00CC33; margin:5px; #middle3 width:500px; height:680px; float:left;#middle4width:740px;height:600px;background:#666666;margin:10px; float:left; border:1px groove #00CC33; cursor: crosshair; float:left;#middle4 table margin:2px 5px 5px 5px; cursor: wait;#middle4 table a:hovercolor:#333333;#middle4 img border:2px double #333333; border-bottom-width:10px; border-right-width:10px;border-left-width:10px;border-top-width:10px#middle5 width:735px; height:700px; float:left;#middle5 img a:hover width:100px; height:90px;#right width:170px; background:#666666; float:right; height:500px; margin:0px; border:1px groove #FF9900; height:700px;#right img margin:5px;a:link color:#FF9966; text-decoration:none;a:visited color:#FF9999; text-decoration:none;a:hover color:#FF6600; font-size:18px; 112、数据库连接代码页面 conn.asp 3、分页功能模块代码 % Set rs = Server.CreateObject(ADODB.Recordset) Page = CLng(Request(Page) sql = Select * from liuyan order by id rs.open sql, conn, 3, 2 rs.PageSize = 1 每页显示记录数 If Page rs.PageCount Then Page = rs.PageCount 指定页数 实际页数的处理 If rs.PageCount 0 then rs.AbsolutePage = Page 页数 0 的处理 % 1 then % a href=?Page=上一页   % For i = 1 to rs.PageCount If i = Page then color = Red response.write + Cstr(i) +   Else color = white response.write + Cstr(i)+   End If Next % a href=?Page= 下一页 % ElseIf rs.PageCount 1 then response.Write 无相关数据!. End If%4、添加记录操作% Set Rs = Server.CreateObject(ADODB.Recordset) Sql = Select * From liuyanRs.Open Sql,conn,1,3 Rs.AddNewrs(name)=request.Form(name)rs(e-mail)=request.Form(e-mail)rs(subject)=request.Form(subject) rs(body)=request.Form(body)rs(time)=request.Form(time)rs(data)=request.Form(data)Rs.Update Rs.Close Set Rs=Nothing conn.close set conn=nothing response.Write(alert(您好，您所留言的信息已成功提交,正在转入留言页面);location.href=ly.asp;) %5、删除记录操作%set rs=Server.CreateObject(ADODB.Recordset) sql = select * from liuyan where id=&id rs.open sql,conn,3,2if not rs.eof then rs.delete response.Write(alert(删除成功！);location.href=liuyyan.asp;) end if%6、记录的修改和查看% Set rs = Server.CreateObject(ADODB.Recordset) Sql = Select * From document2 rs.open sql,conn,1,3rs(name)=request.Form(name) rs(age)=request.Form(age) rs(sex)=request.Form(sex) rs(phone)=request.Form(phone)rs(address)=request.Form(address)rs(hy)=request.Form(hy)rs(xx)=request.Form(xx)rs(home)=request.Form(home)rs(work)=request.Form(work)rs(company)=request.Form(company)rs(cdz)=request.Form(cdz)rs.update rs.close response.Write(alert(恭喜你,修改成功!);location.href=./admin/admin.asp;) % Response.Write() Response.Write(标题) Response.Write(+rs(subject)+ ) Response.Write() For i = 1 to rs.PageSize If rs.EOF Then Exit For If i mod 2=0 Then Color = #333333 Else Color = #333333 End If Response.Write() Response.Write(内容) Response.Write(+rs(body)+&rs(time)&rs(data)&) Response.Write() rs.MoveNext Next %5 测试与维护5.1 测试与维护5.1.1 IIS(Internet 信息服务)安装配置可以在添加或删除程序 添加/删除Windows组件对话框中把Internet 信息服务(IIS)前的勾选中，点下一步进行安装就行了(注：在这之前应把系统安装盘放到光驱)。 IIS 装好之后再作一下简单的配置。定位到开始管理工具Internet 信息服务(IIS)管理器，打开IIS管理器。在本地计算机网站默认网站上右键单击，在快捷菜单里选属性(或者直接在操作菜单下选属性)，弹出如下对话框图16:图16切换到主目录标签(图2)，重新选择网站根目录(我选择的是E盘下的my web目录)，默认是系统盘:Inetpubwwwroot,因为系统盘不宜放太多的非系统文件，所以在这里重设默认网站要目录，如果嫌麻烦可以跳过这步。再切换到文档标签，通过添加、删除、上移、下移 ，把站点的默认文档设置如图17：图17可能有些朋友会疑惑，设置默认内容文档有什么作用？细心的朋友应该会发现，在浏览一些大网站的首页时用它的一级域名就行了，并不需要指定请求页的文件名，这就是设置了默认内容文档的缘故，它的作用就是在浏览器请求没有指定文档的名称时，将默认文档提供给浏览器。要得到更详尽的解释说明，可以点击图3中的“帮助”。之所以有这步，是因为网站的默认内容页中没有index.asp，不大符合国人习惯。5.1.2 Dream weaver测试站点和用IIS测试本地站点Dream weaver MX提供了全面检测站点的功能，它比检测链接更全面。全面地检测内部、外部链接、去除错标签、空标签、多余的标签等，它的使用相当简单，使用全面检测站点功能如下：1、选择菜单中【站点】的【报告】命令，打开一个窗口。2、选择检测范围，在【报告】选项中有四个内容供选择：Current Document、Entire Local Site、Select Files in site、Folder。3、对工作流方面的信息进行检测。4、对HTML文件的信息做出检查。把编好的网站文件复制到D:/my web文件夹中，可以打开浏览器，在地址栏中输入http:/localhost/my web/index.asp ,就会看见网站了。 5.1.3 维护网站建成后并不意味着网站建设的结束，网站内容需要不断更新，这样才会不断的吸引更多的浏览者访问，才能成为一个优秀的网站。通过FTP软件将更新过的网页上传到服务器或通过Dream weaver MX来远程管理站点，同时还要认真回复浏览者的电子邮件和留言，做到有问比答。平时多收集资料，多听听别人建议，定期更新版面，还有推广站点9。28结束语建设本个人网站耗时接近四个月，在其设计过程中，经过老师耐心细致的指导，及同学之间的相互交流，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)