个人网站的设计与实现.docx
《个人网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《个人网站的设计与实现.docx（25页珍藏版）》请在冰豆网上搜索。
个人网站的设计与实现
个人网站的设计与实现
摘要：
论文论述了系统的开发背景和设计目标，并对系统开发所采用的技术进行相应的简单介绍。
在系统分析中，对系统的模型进行简单分析，明确系统的操作流程，并对系统进行可行性分析，确定在目前的条件下，开发系统是可行的。
在需求分析结果的基础上，对系统的功能模块进行划分。
接着对系统中的数据库进行模型设计，包括数据流图及数据表结构。
本文以个人网站建设为例，系统介绍网站的需求、系统分析及设计方案，最终给出PHP技术实现网站的过程。
关键词：
留言板，互联网，相册
1绪论
1.1我国网络发展现状
2010年7月15日，中国互联网络信息中心（CNNIC）发布了《第26次中国互联网络发展状况统计报告》。
《报告》数据显示，截至2010年6月，中国网民规模达到4.2亿，突破了4亿关口，较2009年底增加3600万人；互联网普及率攀升至31.8%，较2009年底提高2.9个百分点。
家庭宽带上网网民规模达到36381万人，使用电脑上网的群体中宽带普及率已经达到98.1%。
我国手机网民规模为2.77亿，半年新增手机网民达4334万，增幅为18.6%，其中只使用手机上网的网民占整体网民比例提升至11.7%。
农村网民规模达到11508万，占整体网民的27.4%，半年增长7.7%。
2011年1月15日，中国互联网络信息中心（CNNIC）发布了《第27次中国互联网络发展状况统计报告》。
《报告》数据显示，截至2010年12月，中国网民规模达到4.85亿，较2010年底增加3770万人；互联网普及率攀升至34.3%，较2010年底提高2.5个百分点。
宽带网民规模为4.5亿，有线（固网）用户中的宽带普及率达到98.3%。
我国手机网民规模达3.03亿，较2009年底增加了6930万人。
手机网民在总体网民中的比例进一步提高，从2009年末的60.8%提升至66.2%。
农村网民规模达到1.25亿，占整体网民的27.3%，同比增长16.9%。
IT技术快速的发展，网页已经从WEB1.0时代发展到了WEB2.0，WEB2.0是一种更先进的理念，能更大程度的满足当下用户所谓需求。
WEB2.0的大趋势不可逆转，互联网正经历一次新秩序的建立。
WEB2.0的先进理念有：
1、更加开放、平等、协作、共享、精准。
2、能充分展现个人才华，集结群众智慧、广泛获取信息、提高办事效率。
3、市场更加细分、网络更加社会化、资源更加优化配置，大家都有更多成功的机会。
归根到底，用户需求变化推进互联网的发展。
首先，在WEB2.0时代信息爆炸的情况下，用户希望获得的信息更加精准；其次，希望提高使用互联网的效率或者效果；第三，希望能够按照自己的习惯和方式来使用互联网服务。
综上所述，学习一种适应WEB2.0理念的动态网页开发技术不论是在目前的WEB开发应用领域还是将来互联网的发展中都是十分有帮助的。
所谓WEB2.0，并没有什么明确的定义，一般来说WEB2.0是相对WEB1.0的新一类互联网应用的统称。
Web2.0是一个新生的术语，它更注重用户的交互作用，用户既是网站内容的消费者，也是网站内容的制造者。
也有人生动的将WEB2.0称作“大众的新智慧”，即利用网络来发掘大众的智慧。
还有很多这种概念的支持者认为WEB2.0服务将取代传统桌面计算机应用。
1.2开发环境和工具的介绍
在进行个人网站建站之前，首先介绍一下我搭建的系统平台环境和开发工具。
在此次设计中我采用了如下的开发坏境和工具：
Windows7操作系统，Mysql数据库，dreamweaver。
1.2.1Dreamweaver简介
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver具有以下两个优势：
（1）制作效率
Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。
使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。
对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。
Dreamweaver能与您喜爱的设计工具，如
PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。
除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
（2）网站管理
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。
改变网页位置或档案名Dreamweaver会自动更新所有连结。
使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
（3）控制能力
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。
它包含HomeSite和BBEdit等主流文字编辑器。
帧（frames）和表格的制作速度快的令您无法想像。
进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
甚至可以排序或格式化表格群组，Dreamweaver还支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。
所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。
当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。
梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。
建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。
您也可以使用样版正确地输入或输出XML内容。
全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。
对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。
使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。
当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。
1.2.2Mysql简介
MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQLAB公司。
在2008年1月16号被Sun公司收购。
而2009年，SUN又被Oracle收购。
MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内。
这样就增加了速度并提高了灵活性。
MySQL的SQL“结构化查询语言”。
SQL是用于访问数据库的最常用标准化语言。
MySQL软件采用了GPL（GNU通用公共许可证）。
由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。
由于MySQL是开放源码软件，因此可以大大降低总体拥有成本。
1.3个人网站研究的目的和意义
在飞速发展的21世纪，随着Internet的迅速普及，在你的身边已经有了各种各让的网站，腾讯微薄，新浪微博，qq空间，人人网等。
现在的我们已经不再满足于仅仅浏览网页，而是希望更深入地参预到网络中去，随着各种技术的不断发展和更新，我们也拥有了建立个人网站的知识，同时Internet的开放性使建立属于自己的网站成为一种可能，拥有自己的网站也越来越成为一种时尚，因为这个网页中会包含很多我的个人信息，我可以在网页上写出自己的心情，写下身边一些有趣的事和朋友们分享，贴上自己喜欢的照片。
在业余时间，很多人都喜欢看电影，现在也有很多电影网站，比如优酷、土豆、迅雷，但是当你看过之后你一定会发现，目前为止都没有一个专门介绍电影的网站，我未来的目标就是创建这样一个网站，让那些志同道合的朋友在选择电影时有一个参考，所以我选这个课题一是为了完成创建个人网站的梦想，二是为将来的网站创建打下一个基础。
1.4本章小结
本章先是讲述了我国目前网络发展状况，让读者对形势有一个总体了解，然后介绍一下个人网站设计过程中用到的工具，还有开发环境，最后讲述了本次课题选取的目的和意义。
2需求分析
2.1概述
需求分析最根本的任务是确定“系统需要具有哪些功能,才可以满足用户的需求”。
具体的说，应该确定系统必须具有的功能和性能，系统要求的运行环境，并且预测系统发展的前景。
必须要对系统进行详细的分析，既要分析系统中的数据流，又要分析长期使用的资料储存。
该阶段不是确定系统怎样完成它的工作，而仅仅是确定系统必须完成哪些工作，也就是对目标系统提出完整、准确、清晰、具体的要求。
2.2个人网站的问题定义与可行性分析
一般情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站主要是为了展示自我，同时附带电影介绍功能。
提供帮助给他人的同时，和一些现实中没机会接触到的人交个朋友也是我的目标之一。
2.2.1个人网站功能
管理员可实现的操作有：
登录，退出，修改密码；可以添加、更改、删除日志、音乐、游客的评论以及发表的留言，还可以对留言进行回复，游客可以查看日志，聆听音乐，在日志模块发表评论，在留言模块进行留言，在页面链接处可以转到google官方网页，可以查看相册。
2.2.2可行性分析
系统可行性分析主要从经济可行性、技术可行性和操作可行性三方面去分析。
（1）经济可行性分析
从系统的开发和效益关系上讲，该系统的开发不需要花费太多的经费，因为个人网站不涉及超大容量的文件存储和庞大的访问量，而且是毕业设计，开销不会很大。
因此，从经济性分析是可行的。
（2）技术可行性分析
根据现有的技术设备条件，在技术上实现也是可行的。
在设备方面，前期系统开发在本地端制作完成，只需通过ftp软件上传至服务器端即可，而软件开发所需条件相对较低，对于系统开发及运行环境均不造成任何困难。
对于系统开发人员基本具备了计算机专业知识，有一定的编程基础，熟悉和掌握数据库及网络相关知识，具备开发条件。
（3）操作可行性
该系统操作上非常简单，对于用户来说，只要具备IE浏览器8版本以上通过域名搜索即可登录网站。
2.3系统的总体设计
毕业设计的目标是个人网站，因此网站中所包含的内容都是我所喜欢的，希望网站在访客浏览之后会留下一个良好的印象。
运用的主要是现在流行的网站设计技术和数据库技术。
网站的设计主要分为前台页面展示和后台在线管理平台两个部分。
个人网站总设计如图2.1所示。
图2.1个人网站总设计图
2.4具体模块划分
1.个人信息
作为个人网站，网站管理员的相关信息无疑是首要的，因此这一模块被放在第一选项的位置。
希望游客可以通过简短的介绍认识管理员，同时给游客留下一个良好的印象。
2.我的日志
管理员可以在此版块下对日志及发表的留言进行查看、更改、删除、回复等操作。
游客可以进行查看、留言。
具体流程图如图2.2所示。
图2.2日志模块功能图
3.相册
在这个板块可以看到我上传的照片，照片内容主要都是关于朋友和学校的。
还有我看过的大部分电影的海报及简单的文字介绍。
4留言板
此模块是用于访客在浏览我的网站之后进行留言，这些留言会直接保存到数据库里面，并且能够轻松的读取。
图2.3留言板功能图
5.发送邮件
游客可以通过邮箱地址向我发送电子邮件。
6.链接google
如果访客想回到互联网上，可以直接点击这里。
这里可能有的人会觉得此模块没有用处，仅以个人角度而言，我有很多次在浏览网站时突然想查阅相关资料，我设计这一模块就是为了避免游客繁琐的操作。
2.5本章小结
我做的是一个个人网站，通过对QQ的个人网页的初步了解，做出个人网站的需求分析、总体设计以及系统的具体模块划分。
已经形成了一个初步的个人网站模型，包括管理员及游客的功能权限，每个模块的具体功能等。
3个人网站数据库设计
在设计和操作维护数据库时，关键的步骤就是要确保数据正确地分布到数据库的表中。
使用正确的数据结构，不仅便于对数据库进行相应的存取操作，而且可以极大地简化应用程序的其他内容（查询、窗体、报表、代码等）。
数据应该尽可能少地冗余，这意味着重复数据应该减少到最少。
3.1数据库结构设计
3.1.1管理员登陆
表3.1管理员登陆关系表
字段名
描述
数据类型
数据长度
额外
id
int
1
auto_increment、主键
admin_name
帐户名
varchar
50
无
admin_pw
帐户密码
varchar
50
无
1．表的说明
此表是用来论坛管理员登录的，共分为三个字段，其中id字段设为主键，数据类型是自动编号，admin_name和admin_pw字段分别用来存放管理员的登录名和密码，数据类型文本。
2．限制条件
管理员登录时，只有正确输入此表中的用户名和密码才能够登录到管理界面，才有权对日志模块里面的内容进行删除，否则只能在游客界面发表评论。
3.1.2日志表
表3.2日志表
字段名
描述
数据类型
数据长度
额外
id
int
11
auto_increment、主键
bt
日志标题
varchar
100
无
ct
日志内容
text
无
sj
发布时间
datetime
无
1．表的说明
此表是用来存储日志发布信息的，包含日志标题，日志内容和日志的发布时间信息。
2．限制条件
必须是登陆后才可以发布日志，并且日志的标题和内容不能为空。
3.1.3日志留言
表3.3日志留言表
字段名
描述
数据类型
数据长度
额外
id
int
11
auto_increment、主键
wid
日志ID
int
50
无
ct
评论内容
text
255
无
sj
评论时间
datetime
无
nc
评论称呼
varchar
30
无
hf
站长回复
text
无
1．表的说明
此表是用来记录访客基本信息以及发表评论内容的，共有六个字段，其中id字段设为主键，数据类型是自增，sj字段数据类型是日期/时间，其余为文本或者备注。
每个在论坛里发表评论的访客的基本信息和评论内容都可以保存在此表中，便于显示调用。
2．限制条件
没有在留言表单中正确填入自己的基本信息，就会导致留言失败，表中不会保存此内容。
3.1.4每日随笔
表3.4每日随笔
字段名
描述
数据类型
数据长度
额外
id
int
11
auto_increment、主键
ct
随笔内容
text
255
无
sj
发布时间
datetime
无
1．表的说明
此表用来存放显示随笔发送的信息，类似每日签名的功能。
2．限制条件
字数限制在255个字符内，超过部分将不予显示。
3.1.5图片存放
表3.5图片存放路径表
字段名
描述
数据类型
数据长度
额外
id
int
11
auto_increment、主键
fl
相册分类
varchar
50
无
pic
照片路径
varchar
255
无
ct
照片描述
varchar
255
无
sj
上传时间
datetime
无
1．表的说明
此表用来存放“照片”版块的照片，共有五个字段。
2．限制条件
增加或删除照片的时候只能在库里进行管理。
3.1.6留言板
表3.6留言表
字段名
描述
数据类型
数据长度
额外
id
int
11
auto_increment、主键
ch
评论称呼
varchar
50
无
bt
留言标题
varchar
100
无
sex
性别
varchar
10
无
ct
发布内容
text
无
sj
发布时间
datetime
无
ip
发布IP
varchar
15
无
hf
回复留言
test
五
1．表的说明
此表用来存放在“留言版”的留言人、留言标题以及留言内容，共有七个字段，其中id字段设置为主键，数据类型为自动编号，其余为文本和时间，留言者提交留言内容以后就会存储到此表中，网页再通过连接数据库调用此表显示每个留言内容。
2．限制条件
没有后台限制，想留言的任何访客都可以在此留言板中留言，并且能够显示出来。
3.2本章小结
本章对个人网站的数据库做了详细的设计。
其中一部分内容作了具体的描述，其他的等到具体实现的时候会在数据库中创建相应的表。
4网站具体实现
4.1“个人介绍”设计与实现
打开Dreamweaver进行首页的制作，首先编写style.css文件，这个是网页的公共样式文件，为了保持网站风格的统一，其余页面均可以调用该页面进行网页美工布局。
新建index.php文件，在title标记对中写上我们的网站名称“个人网站”，然后引入刚编写的样式文件。
这个时候预览就可以看到网页背景黑色和网站标题了。
继续我们编写布局操作，在body标签中插入一个宽度为900像素的表格，顶部一行放置运用photoshop制作好的banner图片banner.gif，该图的大小尺寸为900*180，在顶部设置改图为背景，然后插入一个透明flash:
top.swf（路径：
flash/top.swf），此事顶部的效果就做出来了，下面依次编写导航模块，主体中间信息模块（2列模式，左边为头像个日志相片统计），右边为个人信息介绍（从介绍数据表中获取信息），底部个版权信息和联系邮箱，最终的实现效果如图4.1所示。
图4.1个人网站首页效果图
从图4.1中可以看到网页主体部分分为上中下三部分，布局方式采用简约清晰的展示模式，让游客一目了然。
4.2“日志”设计与实现
“日志”模块采用的布局风格和首页是一致的，这里我们有一个新加的功能是音乐播放器，该播放器是运用flash开发制作，要调用该播放器首先要引用player.js文件，在文档加载的时候还要引入musiclist.xml,该文件为网页音乐列表，音乐文件在后台发布以后，可以通过生成musiclist.xml实现音乐列表歌曲的更新，由于该播放器不支持双字节，因此对中文支持不够好，所以中文添加可能存在不显示音乐标题，所以添加的时候尽可能用英文字符。
在主体区间的右边放置日志的列表，这里采用数字分页的模式，显示更加直观，最终的效果图如下4.2所示。
图4.2日志信息列表
在日志信息列表中，最具有亮点特色的就是音乐播放器，管理员可以在后台添加自己喜欢的音乐放入到当中，该播放器可以实现音乐的连续播放，还可以暂停、快进和下一曲实现歌曲的更换功能。
如图4.3所示。
图4.3音乐播放器
4.3“相册”设计与实现
“相册”这里默认显示所以上传的照片，这里制作的导航结构是这样的：
相册列表（全部）、兄弟相册、美丽的学校、电影介绍，点击兄弟相册就只显示兄弟分类下面的照片，点击美丽的学校则只显示美丽的学校该分类下的照片，电影介绍模块是一个独立模块，这里包含电影的封面图片，电影名称，电影介绍，在介绍中可以添加电影的海报等信息，最终制作的效果如图4.4和4.5所示。
图4.4相册
“相册”中的图片展示采用了DIV排版布局，实现一行两列的展示模式，从4.4图中可以看到已经上传的精彩照片，这里图片都是等比例缩小的，点击图片可以查看大图。
该页面的整体风格还是与首页和其他页面风格一致的。
图4.5电影介绍
在图4.5中可以看到电影信息，这是网站的核心模块，管理员可以在这里添加电影海报及个人的介绍。
所选的电影都是经过管理员筛选的。
4.4“留言板”设计与实现
“留言板”是衔接网站访客与站长的桥梁，是很重要的一个部分，点击导航栏目中的“留言板”就可以查看到一些访客朋友的留言信息。
留言信息展示的下方就是留言的入口，需要留言的时候，只需要填写称呼，留言标题，性别和留言内容就可以发布留言了，这里看一下留言实现的代码：
留言信息展示：
$sqlrow="SELECT*fromguestORDERBYiddesclimit$offset,$pagesize";
$exerow=mysql_query（$sqlrow）ordie（"失败！
"）;
$num=mysql_num_rows（$exerow）;
$num_rows=mysql_fetch_assoc（$exerow）;
while（$num_rows）
{
//循环展示部分
$num_rows=mysql_fetch_assoc（$exerow）;
}
?
>
//分页实现
phpechoPagerNum（$page,5,$pages,"guest.php","","fangkuai"）;?
>
表单提交留言：
php
$addSql="insertintoguest（ch,bt,sex,ct,sj,ip）values（'$g1','$g2','$g3','$g4',now（）,'$g5'）";
$addQuery=mysql_query（$addSql）ordie（mysql_error（））;
if（$addQuery）{
echo"";
}
?
>
具体效果如图4.6所示。
图4.6留言板
以上是通过表单留言的方式，这里还运用了邮件的方式，比如想给站长写一封邮件，可以点击发送邮件的按钮，进入到邮件发送页面，填写需要邮件的内容，点击发送，该内容就会通过SMTP的方式发送到我的邮箱当中。
实现的邮件发送代码需要运用到php的phpmail邮件发送类，实现代码如下：
php
include（"phpmail/class.phpmailer.php"）;
include（"phpmail/class.smtp.php"）;
$mail=newPHPMailer（）;
$mail->IsSMTP（）;//telltheclasstouseSMTP
$mail->SMTPAuth=true;//enableSMTPauthentication
$mail->Port=25;//settheSMTPserverport
$mail->Host="";//SMTPserver
$mail->Username="xuanzeweini@";//SMTPserverusername
$mail->Password="668699";//SMTPse
升级会员 