个人网站设计及其实现.doc

个人网站设计和实现
摘要：伴随国际互联网普及，大家已经越来越不满足于在internet上浏览信息了。期望能够更深入参与其中，拥有自己网站。我们能够在网络这个平台上愈加好展现自我。个人网页设计和实现不仅能够让我们愈加好和外界交流，沟通；还能够突出自己个性和风格，增加个人魅力和自信。该研究课题关键研究现在大家个人网站实现。该课题关键是介绍了怎样开发个人网站。
 关键词：个人网站；ASP；web

1.引言
现在相关INTERNET是我们听到最多部分就是万维网（world wide web）。Web实际上由数十亿单个页面组成，这很类似于我们创建WORD文档页面。这就是WEB——它就是一大堆页面。所谓“页”，“页”中可能包含文字、图像、图形、声音、动画等。
这些单个页面会链接到其它页面。通常一家企业或个人会创建统一一组页面，这些页面相互相关。相关页面集合就称为网站。
每个网站全部有主页，这个页面就像一个目录。通常主页就是网站第一个页面，不过有些网站还包含入口页面，这有些类似于书本扉页，能够由这个入口页面进入主页。
这次课题研究，我网站设计和整个个性化页面生成系统关键由使用Dreamweaver开发关联规则采掘系统和利用IIS+ASP技术实现个性化Web页面生成器两部分组成。二者经过数据库服务器和Web服务器连接。

2.系统构架
网站，一个全新而又时髦名词，正是有了无数大小网站，才使互联网能蓬勃发展。大家全部想拥有一个属于自己网站，所以，网站设计软件成为现在最为流行软件之一。下面就介绍一下我开发个人网站所需设计软件和开发环境。
2.1 Adobe Dreamweaver CS5 介绍
Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师尤其发展视觉化网页开发工具，利用它能够轻而易举地制作出跨越平台限制和跨越浏览器限制充满动感网页。
2.2 ASP技术
ASP是Active Server Page简写。Active Server Page 是创建动态网页一个很好工具，它起一个编程语言作用，能够利用它编写动态产生HTML程序代码。而且ASP也是服务器端脚本环境，能够用来创建交互式WEB页并建立强大Web应用程序。ASP技术能让Web开发员和网页设计员快速地开发轻易维护动态Web主页。用户端只要使用可实施HTML码浏览器就可阅读ASP所设计网页内容。ASP所使用脚本语言均在Web服务器端实施，用户端浏览器不需要实施这些脚本语言。
ASP不仅功效强大，而且语法编写规则很简单。ASP使用简单易懂脚本语言和HTML语言作为基础语言，对脚本语言类型没有限制，使用编辑器简单，使用像Windows记事本这么一般文本编辑器即可。
2.3 Access数据库软件
Access是Office软件中用来管理数据库应用软件，它操作简单、功效全方面，其存放方法简单且便于管理和维护；既能够用来存放数据，也能够作为用户端开发工具进行数据库应用系统开发，即能够开发小型软件，也能够用来开发大型应用系统。它可运行于多种Microsoft Windows系统环境中，因为它继承了Windows特征，不仅易于使用，而且界面友好。它并不需要数据库管理者含有专业程序设计水平，任何非专业用户无须编写代码，就能够用它来创建功效强大数据库管理系统。本网站采取功效强大Microsoft Access作为后台数据库，开发了一个小型个人网站。

3.系统概要设计
3.1 网站整体设计

布局网站
风格设计
搜集资料
目录设计
网页设计
策划网站
导航设计

3.2 留言板设计
管理留言
编辑留言
删除留言
签写保留留言
留言板系统
读取显示留言
回复留言

3.3 数据库建立
网站用到后台文件：
文件名
作用和功效
备注
admin.asp
登陆
后台
index.asp
首页

admin_article.asp
管理文章
后台
Delartcat.asp
删除功效
后台
post.asp
公布功效
后台
myworld.mdb
数据库文件
后台
admin_diary.asp
心情管理
后台
后台认证：只许可浏览者进入页面浏览，在对回复留言和新闻增加、删除这些管理时全部需要对用户身份进行认证，即需要管理员提供后台管理用户名和密码，该用户名和密码保留在相对应数据库中。

4. 具体设计
首先网站策划，因为我制作是个人网站，所以面正确对象是自己周围熟悉同学好友，专题和内容就是自己日常生活琐事，还有跟好好友有个交流沟通平台，相互了解小天地。这么就没有什么尤其高创意要求，只要温馨，简练大方就好了。当然，假如你要设计是一个面向大众个人展示平台，那就要求新奇创意了。
针对我自己个人网站，我关键从下面几点进行设计：
愉快世界：是一个表现个性板块内容，放置部分我比较喜爱优异文章或我认为很有意义小小说还有图片供大家欣赏。（其它多个页面也是类似，只是介绍方向不一样）。
拥抱阳光：展示部分自己近期生活照。
心情动态：让好友能够对我当日心情有一个直观快捷了解方法。
留言板：设计一个留言板作为和好友交流纽带，这么能够随时促进好友之间情感，又因为是自己设计，比较有保密性，分享愉快和秘密地方。
4.1静态网页设计
现在整体布局已经明确了，能够进行网页设计了。

这是我网站首页效果，接下来，我就简单演示一下这个主页制作过程。首先，运行Dreamwear cs5，接着就是页面布局了，选择“插入——>表格”然后依据你需要划分，选择你所需表格行列数。图：

然后依次在你所划分位置插入你所需要图片等等。

这么一个简单有漂亮网页划分就完成了.
4.2 动态页面制作
在我整个网站中，动态页面占了很关键部分。首先，我依据我个人主页所要实现功效我制作好了我数据库，接下来，我就把我设定系统DSN（数据源名称）方法来讲讲。DSN是用来确定数据库所在位置和数据库相关属性。使用DSN优点是，假如我要移动数据库档案位置或是使用其它类型数据库时候，我只要重新设定DSN即可，不需要去修改原来使用程序。下面，我就演示我在自己电脑上配置DSN过程：
1.开启控制面板，双击“管理工具”下“数据源（ODBC）”，图所表示：

2.在打开“数据源（ODBC）”对话框中选择“系统DSN”标签，然后单击“添加”按钮，图：

3.在弹出“创建新数据源”对话框中，选择数据库驱动程序为“Microsoft Access Driver（*.mdb）”，然后单击“完成”按钮，图：

4.在出现“ODBC Microsoft Access 安装”对话框，在“数据源名”文本框中输入我这个网站数据库名称：myworld,单击“数据库”栏中“选择”按钮选择我这个网站根目录中我已经建好数据库 myworld.mdb，然后单击“确定”按钮，图：

5.这时，我发觉系统数据源名称中已经多了一个“myworld.mdb”，这就是我网站要使用数据库。单击“确定”按钮，这么，我就完成了数据源创建过程。图：

弄好这些后，打开dreamwear，将数据库和网页进行连接。打开数据库，连接好数据库，并将数据库中内容分别拽入到表格中合适位置，这么，数据库中内容就显示在里面了。
4.3 链接页面制作
链接概念：
链接也称超级链接，是指从一个网页指向一个目标连接关系，所指向目标能够是另一个网页，也能够是相同网页上不一样位置，还能够是图片、电子邮件地址、文件、甚至是应用程序。能够分为文字，影像，邮件，文件下载这多个链接。
在网页中，单击了一些图片、有下划线或有明示链接文字就会跳转到对应网页中去。
1、在网页中选中要做超级链接文字或图片。 　
2、在属性面板中单击黄色文件夹图标，在弹出对话框里选中对应网页文件就完成了。做好超级链接属性面板出现链接文件显示。 　
3、按F12预览网页。在浏览器里光标移到超级链接地方就会变成手型
4.4 其它页面建立
一样，依据首页制作方法来制作其它页面，这里我们要尤其注意就是制作网站四个基础标准：对齐、亲密性、反复性和对比。
对齐就是指页面上元素相互之间对齐。
亲密性标准就是指元素相互靠近，放置在领进位置上时所建立起来关系。
反复概念就是指，在整个项目中反复一些元素，从而将全部分离部分联络在一起。网站整个看上去要表现统一性，表现出相同理念。
对比能够把你眼光吸引到页面上，让你为之注目。使元素形成对比能够吸引人视线浏览页面，并建立一个信息层次体系，让你能够查阅众多信息并从中挑出你真正需要信息。
4.5 数据库设计
本设计是采取ASP结合Access数据库平台一个个人网站。网站开发性能要求是实现网站智能化。本设计能实现以下功效：心情版块增、删、改和留言板实现及部分静态网页浏览。网站数据库建设在这个网站设计过程中占有很关键位置。其中，我们应该要考虑到问题有：
1. 系统管理员： 系统管理员含有对整个网站公布，数据库管理，信息管理，人员管理最高权限。包含心情增、删、改，留言回复、删除。以上功效只能是管理员才有权限操作。
2. 浏览者： 信息最终浏览者，她们是不含有任何权限一般用户。
3. 在设计数据库过程中，必需考虑到多种信息存放，更新。所以数据库必需能最大程度满足多种信息输入输出。
以下为后台数据库各表结构和字段分析。
Admin （系统管理员）表：

心情版块管理表：

内容管理表：

留言管理表：

5. 系统实现
一个好网站建设好了以后是不能立即公布，因为因为在程序开发和页面制作过程中难免会出现误差，所以在正式公布前经过测试找出网页中漏洞是很关键一个步骤。在这之前需要进行一段时间测试。
1． 为何测试显得这么关键呢？没有经过测试页面会出现那些问题呢？下面将从多个不在IIS服务器未改变“默认网站”默认路径前提下，实施第二步。
2． 在IE地址栏里输入http://localhost/qiqi/qiqi/，就能访问系统前台首页面。
3． 测试项目。
我关键就以下多个方面进行探讨：性能测试，安全性测试，稳定性测试 ，浏览器兼容性测试 ，可用性/易用性测试，链接测试 ，代码正当性测试 。
在我个人网站测试过程中，在数据库链接，还有图片相对位置全部出现了很多错误，还好，经过我自己修改，现在已基础消除了这种现象。

这是在地址栏中输入http://localhost/qiqi/qiqi/跳出来页面。

6. 结束语
两个多月毕业设计已告一段落，到此，我制作个人网站已经基础完成。但因为毕业设计时间较短，本人能力有限，造成于我无法让我数据库和网站进行正确相联接，这个系统还有很多不足地方。这些全部有待于深入改善。

参考文件

致 谢
经过这次毕业设计，我不仅提升了自己学习能力、动手能力，也拓宽了我知识面，同时也克服了自己害羞性格，增强了克服困难勇气。在此次毕业设计中，指导老师卓皓认真负责工作态度，不厌其烦地指导全部让我尤其感动。不管在理论上还是在实践中，全部给了我很大帮助，使我受益匪浅；这对于我以后工作和学习无疑是一个巨大帮助，很感谢她耐心教导。另外，在网站制作过程中身边同学一样给我不少帮助，当我有问题向大家请教时，大家全部很热情尽力帮助我，在这里一并表示感谢。