个人网站的设计与实现Word文档格式.docx

个人网站的设计与实现Word文档格式.docx

《个人网站的设计与实现Word文档格式.docx》由会员分享，可在线阅读，更多相关《个人网站的设计与实现Word文档格式.docx（13页珍藏版）》请在冰豆网上搜索。

二者通过数据库服务器和Web服务器连接。

2.系统构架

网站，一个全新而又时髦的名词，正是有了无数的大小网站，才使互联网能蓬勃发展。

很多人都想拥有一个属于自己的网站，因此，网站设计软件成为目前最为流行的软件之一。

下面就介绍一下我开发个人网站所需的设计软件以及开发环境。

2.1AdobeDreamweaverCS5简介

AdobeDreamweaverCS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，DreamweaverCS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

2.2ASP技术

ASP是ActiveServerPage的简写。

ActiveServerPage是创建动态网页的一个很好的工具，它起一种编程语言的作用，可以利用它编写动态产生HTML的程序代码。

而且ASP也是服务器端脚本环境，可以用来创建交互式WEB页并建立强大的的Web应用程序。

ASP技术能让Web开发员和网页设计员快速地开发容易维护的动态Web主页。

用户端只要使用可执行HTML码的浏览器就可阅读ASP所设计的网页内容。

ASP所使用的脚本语言均在Web服务器端执行，用户端的浏览器不需要执行这些脚本语言。

ASP不但功能强大，而且语法的编写规则很简单。

ASP使用简单易懂的脚本语言和HTML语言作为基础语言，对脚本语言的类型没有限制，使用的编辑器简单，使用像Windows的记事本这样的普通文本编辑器即可。

2.3Access数据库软件

Access是Office软件中用来管理数据库的应用软件，它操作简单、功能全面，其存储方式简单且便于管理和维护；

既可以用来存放数据，也可以作为客户端开发工具进行数据库应用系统开发，即可以开发小型软件，也可以用来开发大型应用系统。

它可运行于各种MicrosoftWindows系统环境中，由于它继承了Windows的特性，不仅易于使用，而且界面友好。

它并不需要数据库管理者具有专业的程序设计水平，任何非专业的用户不必编写代码，就可以用它来创建功能强大的数据库管理系统。

本网站采用功能强大的MicrosoftAccess作为后台数据库，开发了一个小型的个人网站。

图2-1体统的结构图：

3.系统概要设计

3.1网站整体设计

表3-1网站构架图

3.2留言板设计

表3-2留言板构架图

3.3数据库建立

图3-3实体E-R图：

网站用到的后台文件：

表3-4后台文件部分图：

文件名

作用与功能

备注

admin.asp

登陆

后台

index.asp

首页

admin_article.asp

管理文章

Delartcat.asp

删除功能

post.asp

发布功能

myworld.mdb

数据库文件

admin_diary.asp

心情管理

后台认证：

只允许浏览者进入页面浏览，在对回复留言和新闻的增加、删除这些管理时都需要对用户的身份进行认证，即需要管理员提供后台管理的用户名和密码，该用户名和密码保存在相对应的数据库中。

4.详细设计

首先网站的策划，因为我制作的是个人的网站，所以面对的对象是自己周围熟悉的同学朋友，主题和内容就是自己日常生活琐事，还有跟好朋友有个交流沟通的平台，互相了解的小天地。

这样就没有什么特别高的创意要求，只要温馨，简洁大方就好了。

当然，如果你要设计的是一个面向大众的个人展示平台，那就要求新颖的创意了。

针对我自己的个人网站，我主要从下面几点进行设计的：

快乐世界：

是一个体现个性的板块内容，放置一些我比较喜欢的优秀文章或者我觉得很有意义的小故事还有图片供大家欣赏。

（其他几个页面也是类似的，只是介绍的方向不同）。

拥抱阳光：

展示一些自己近期的生活照。

心情动态：

让朋友可以对我当天的心情有一个直观快捷的了解方式。

留言板：

设计一个留言板作为和朋友交流的纽带，这样可以随时促进朋友之间的情感，又因为是自己设计的，比较有保密性，分享快乐和秘密的地方。

4.1静态网页设计

现在整体的布局已经明确了，可以进行网页的设计了。

图4-1网站首页效果图：

这是我网站首页的效果，接下来，我就简单演示一下这个主页的制作过程。

首先，运行Dreamwearcs5，接着就是页面的布局了，选择“插入——>

表格”然后根据你的需要划分，选择你所需的表格行列数。

如图：

图4-2网页分栏图：

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

图4-3网页分栏效果图：

这样一个简单有漂亮的网页的划分就完成了.

4.2数据库设计

本设计是采用ASP结合Access数据库平台的一个个人网站。

网站开发的性能要求是实现网站的智能化。

本设计能实现以下功能：

心情版块的增、删、改和留言板的实现及一些静态网页的浏览。

网站的数据库建设在这个网站的设计过程中占有非常重要的位置。

其中，我们应该要考虑到的问题有：

1.系统管理员：

系统管理员具有对整个网站发布，数据库的管理，信息管理，人员管理的最高权限。

包括心情的增、删、改，留言的回复、删除。

以上的功能只能是管理员才有权限操作。

2.浏览者：

信息的最终浏览者，他们是不具有任何权限的普通用户。

3.在设计数据库过程中，必须考虑到各种信息存放，更新。

所以数据库必须能最大限度的满足各种信息的输入输出。

以下为后台数据库的各表的结构和字段的分析。

表3-5Admin（系统管理员）表：

表3-6心情版块的管理表：

表3-7内容管理表：

表3-8留言管理表：

5系统实现

5.1动态页面的制作

在我的整个网站中，动态页面占了很重要的部分。

首先，我根据我的个人主页所要实现的功能我制作好了我的数据库，接下来，我就把我设定系统的DSN（数据源名称）的方法来讲讲。

DSN是用来确定数据库所在的位置以及数据库的相关属性的。

使用DSN的优点是，如果我要移动数据库档案的位置或是使用其他类型的数据库的时候，我只要重新设定DSN即可，不需要去修改原来使用的程序。

下面，我就演示我在自己的电脑上配置DSN的过程：

1.启动控制面板，双击“管理工具”下的“数据源（ODBC）”。

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

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

3.在出现的“ODBCMicrosoftAccess安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：

myworld,单击“数据库”栏中的“选择”按钮选择我的这个网站根目录中我已经建好的数据库myworld.mdb，然后单击“确定”按钮。

4.这时，我发现系统数据源名称中已经多了一个“myworld.mdb”，这就是我的网站要使用的数据库。

单击“确定”按钮，这样，我就完成了数据源的创建过程。

图5-1数据源添加成功图：

弄好这些后，打开dreamwear，将数据库与网页进行连接。

打开数据库，连接好数据库，并将数据库中的内容分别拽入到表格中的适当位置，这样，数据库中的内容就显示在里面了。

5.2链接页面的制作

链接的概念：

链接也称超级链接，是指从一个网页指向一个目标的连接关系，所指向的目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮件地址、文件、甚至是应用程序。

可以分为文字，影像，邮件，文件下载这几种链接。

在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

1、在网页中选中要做超级链接的文字或者图片。

2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。

做好超级链接属性面板出现链接文件显示。

3、按F12预览网页。

在浏览器里光标移到超级链接的地方就会变成手型

5.3其他页面的建立

一样的，根据首页的制作方式来制作其他页面，这里我们要特别注意的就是制作网站的四个基本原则：

对齐、亲密性、重复性和对比。

对齐就是指页面上的元素相互之间对齐。

亲密性原则就是指元素相互靠近，放置在领进位置上时所建立起来的关系。

重复的概念就是指，在整个项目中重复某些元素，从而将所有分离的部分联系在一起。

网站整个看上去要体现统一性，体现出相同的理念。

对比可以把你的目光吸引到页面上，让你为之注目。

使元素形成对比能够吸引人的视线浏览页面，并建立一个信息层次体系，让你能够查阅众多信息并从中挑出你真正需要的信息。

下面要给大家介绍我的设计中的部分代码：

5.4计数器的设计

采用ASP编程的方式实现访问者第几次光临本站。

首先在代码的起始部分写如下代码：

<

%Response.buffer=true%>

，意为先将页面先输出到缓冲区。

然后在底部计数器部分写下如下代码：

%

dimnum’先定义一个变量

num=request.cookies（"

num"

）’从客户端获取COOKIES变量并赋值给num变量

ifnum="

"

then’判断如果客户端COOKIES变量为空，则赋值1，否则加1。

num=1

else

num=num+1

endif

response.write"

你是第"

&

num&

次访问本站"

’利用response.write语句向客户瑞输出response.cookies（"

）=num’把变量num赋值给cookies

response.cookies（"

）.expires=#2030-1-1#’设定cookies过期日期

%>

制作计数器时，一定要在代码的最写<

5.5添加记录的设计

echo"

字段数据编辑<

br>

echo"

tablewidth=600border=0cellpadding=5cellspacing=1bgcolor=#CCCCCC>

tr>

td>

formaction='

?

key=edit&

table_name="

&

names&

"

primarykey="

keys&

primarykeyvalue="

iif（action<

>

add"

rs（keys）,"

）&

'

method='

post'

name='

editor'

inputtype=hiddenname=actionvalue=save>

echoiif（action="

"

inputtype=submitvalue=保存onclick=this.form.action.value='

save'

;

nbsp;

）

inputtype=buttonvalue=添加onclick=if（confirm（'

确实要添加当前为新记录吗?

））{this.form.action.value='

new'

this.form.submit（）;

};

inputtype=buttonvalue=上一条onclick="

this.form.action.value='

pre'

inputtype=buttonvalue=下一条onclick="

next'

ahref='

key=view&

表结构<

/a>

key=sql&

sql=select*from"

keys&

表浏览<

主界面<

5.6设置当前页的记录数

subshowselect（sql）

dimpage,pageUrl,strdel,geturl

pageSize=request（"

pageSize"

）'

设置每页显示的记录数

ifpageSize="

ornotisNumeric（pageSize）thenpageSize=50

'

判断是否删除

ifrequest（"

keylog"

）<

then

strdel="

deletefrom"

request（"

table_name"

where"

primarykey"

="

response.Writestrdel

conn.execute（strdel）

geturl="

replace（request.QueryString,"

keylog="

request（"

）,"

response.Redirectgeturl

endif

5.7设置当前显示的页数

page=request（"

page"

）

ifpage="

ornotisNumeric（page）thenpage=1

pageUrl="

sql="

sql

andrequest（"

pageUrl=pageUrl&

5.8设置页面的大小设计

<

selectname="

<

ifrequest（"

andisNumeric（request（"

））then

echo"

optionvalue='

）&

selected>

/option>

else

50'

50<

endif

%>

optionvalue="

10"

10<

20"

20<

30"

30<

40"

40<

50"

60"

60<

70"

70<

80"

80<

90"

90<

100"

100<

/select>

六、测试

一个好的网站建设好了之后是不能立即发布的，因为由于在程序开发和页面制作的过程中难免会出现误差，所以在正式发布前通过测试找出网页中的漏洞是非常重要的一个环节。

在这之前需要进行一段时间的测试。

1．测试的项目。

我主要就如下几个方面进行探讨：

性能测试，安全性测试，稳定性测试，浏览器兼容性测试，可用性/易用性测试，链接测试，代码合法性测试。

在我的个人网站的测试过程中，在数据库的链接做的不好，很多图片的相对位置都出现了很多的错误，还好，经过我自己的修改，现在已基本消除了这种现象。

下面是关于连接数据库的部分代码：

连接数据库之前，首先必须声明一个对象来作为数据库与ASP程序之间的媒介，对象的声明方式如下：

Setconn=server.Createobject（“ADOBO.Connection”）

Createobject是server对象中建立的函数，利用上面书写的方法，即可建立一个与数据库交换数据的对象，这种对象称为connection对象。

Conn是一个要与数据库沟通的对象变量。

对象建立完成后，还要打开通道与数据库作连接才算是连接完成。

通过ADO连接access数据库实例代码如下：

%setconn=server.createobject（"

adodb.connection"

）//建立connection对象

dbq=server.mappath（"

myworld.mdb"

）//告诉asp数据库连接方法以及路径

conn.open"

driver={microsoftaccessdriver（*.mdb）}

//用conn连接对象打开数据库%>

2.在IE地址栏里输入http:

//localhost/test/，就能访问系统的前台首页面。

图5-1网站首页示意图：

这是在地址栏中输入http:

//localhost/test/跳出来的页面。

6.结束语

两个多月的毕业设计已告一段落，到此，我制作的个人网站已经基本完成。

但由于毕业设计时间较短，本人的能力有限，导致于我无法让我的数据库和网站进行正确的相联接，这个系统还有许多不足的地方。

这些都有待于进一步改善。

参考文献

[1]刘瑞新.asp动态网站开发毕业设计指导及实例[M].北京：

机械工业，2005.45-50.

[2]陈旭东.网页设计与制作[M].北京:

北京大学，2009.3-11.

[3]明日科技.asp开发典型模块大全[M].北京：

人民邮电，2009.98-122

[4]赵艳铎.网页制作三剑客[M].上海：

上海科学普及出版社，2004

[5]薛凯，康亚雄.DreamweaverCS3入门提高精通[M].机械工业出版社，2008

[6]甘登岱.网页设计三合一[M].北京：

清华大学出版社，2009

[7]邱云飞，温国峰.网页设计与网站建设[M].北京：

[8]杨继萍，孙岩，梁文新.Access2007数据库应用与开发[M].北京：

清华大学出版社，2008

致谢

通过这次的毕业设计，我不仅提高了自己的学习能力、动手能力，也拓宽了我的知识面，同时也克服了自己害羞的性格，增强了克服困难的勇气。

在本次毕业设计中，指导老师认真负责的工作态度，不厌其烦地指导都让我特别感动。

无论在理论上还是在实践中，都给了我很大的帮助，使我受益匪浅；

这对于我以后的工作和学习无疑是一种巨大的帮助，非常感谢他耐心的辅导。

另外，在网站制作过程中身边的同学同样给予我不少帮助，当我有问题向大家请教时，大家都很热情尽力的帮助我，在这里一并表示感谢。

【本文档内容可以自由复制内容或自由编辑修改内容期待你的好评和关注，我们将会做得更好】

感谢您的支持与配合，我们会努力把内容做得更好！