个人网站的设计与实现.docx

个人网站的设计与实现.docx

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

个人网站的设计与实现

福建儿童发展职业学院

毕业论文（设计）

（个人网站的设计与实现）

姓　　　名：

学　号:

系　别：

　　　人文科学系

专　业：

初等教育（信息技术方向）

年　级:

　　　　２009级

指导教师:

20１1年10月30日

1.引言1

２．系统构架1

2.1Ａｄobe　DreamweaｖerＣS５　简介ﻩ1

２.2ASP技术2

2.３Acｃess数据库软件2

3.系统概要设计ﻩ３

　3．1　网站整体设计3

3.2　留言板设计3

３.３　数据库建立3

４.1静态网页设计ﻩ6

　4.3　链接页面的制作ﻩ9

4.4其他页面的建立１０

5.测试１0

６.结束语１1

个人网站的设计与实现

摘要:

随着国际互联网的普及，人们已经越来越不满足于在iｎternet上浏览信息了。

希望能够更深入的参与其中,拥有自己的网站。

我们可以在网络这个平台上更好的展现自我。

个人网页的设计与实现不仅能够让我们更好的与外界交流,沟通；还能够突出自己的个性与风格,增加个人魅力与自信。

该研究课题主要研究现在人们的个人网站的实现。

该课题主要是介绍了如何开发个人网站。

 关键词：

个人网站;ASＰ;web

１.引言

目前关于ＩNTERＮＥＴ是我们听到最多的部分就是万维网（woｒlｄwｉdeweb）。

Web实际上由数十亿单个页面组成，这非常类似于我们创建的ＷORD文档页面。

这就是ＷＥＢ——它就是一大堆页面。

所谓的“页”，“页”中可能包括文字、图像、图形、声音、动画等。

这些单个页面会链接到其他页面。

通常一家企业或个人会创建统一的一组页面,这些页面彼此相关。

相关页面的集合就称为网站。

每个网站都有主页,这个页面就像一个目录。

通常主页就是网站的第一个页面，不过有些网站还包含入口页面，这有些类似于书本的扉页，可以由这个入口页面进入主页。

这次的课题研究,我的网站设计与整个个性化页面生成系统主要由使用Ｄｒeamｗeaｖｅｒ开发的关联规则采掘系统和利用IＩS+ＡＳP技术实现的个性化Ｗeb页面生成器两部分组成。

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

2.系统构架

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

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

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

2．1　ＡdｏｂeDreaｍweaver　CS5简介

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

2．２ASP技术

　AＳP是ＡctiveSｅrｖerPagｅ的简写。

ActｉveServerPａｇe　是创建动态网页的一个很好的工具，它起一种编程语言的作用，可以利用它编写动态产生HＴML的程序代码。

而且ＡSＰ也是服务器端脚本环境,可以用来创建交互式WＥB页并建立强大的的Web应用程序。

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

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

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

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

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

2．3Accesｓ数据库软件

Aｃcess是Ｏffice软件中用来管理数据库的应用软件，它操作简单、功能全面,其存储方式简单且便于管理和维护；既可以用来存放数据,也可以作为客户端开发工具进行数据库应用系统开发,即可以开发小型软件，也可以用来开发大型应用系统。

它可运行于各种MｉｃrｏsｏftWｉndｏwｓ系统环境中,由于它继承了Winｄoｗｓ的特性,不仅易于使用，而且界面友好。

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

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

图2-1体统的结构图:

3.系统概要设计

3.1网站整体设计

表3-１网站构架图

3.2留言板设计

表3-2　留言板构架图

3.3　　数据库建立

图3-3实体E－Ｒ图:

网站用到的后台文件:

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

文件名

作用与功能

备注

ａdｍin.ａsｐ

登陆

后台

iｎdeｘ.aｓｐ

首页

admiｎ_artｉcle．asｐ

管理文章

后台

Ｄｅｌarｔcat.asｐ

删除功能

后台

poｓt.ａsp

发布功能

后台

mｙｗorld．mdb

数据库文件

后台

aｄｍｉｎ_diary.aｓp

心情管理

后台

后台认证：

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

4．详细设计

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

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

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

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

快乐世界：

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

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

拥抱阳光：

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

心情动态:

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

留言板：

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

4.1静态网页设计

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

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

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

首先,运行Dreａmwearcs５,接着就是页面的布局了，选择“插入——>表格”然后根据你的需要划分,选择你所需的表格行列数。

如图:

图4-2　网页分栏图:

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

图４-３网页分栏效果图：

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

4.2数据库设计

本设计是采用ASＰ结合Ａccess数据库平台的一个个人网站。

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

本设计能实现以下功能：

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

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

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

1.系统管理员：

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

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

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

2.浏览者:

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

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

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

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

表3-5　Admiｎ（系统管理员）表:

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

表３－7　内容管理表:

表3－8留言管理表：

5系统实现

５．1　　动态页面的制作

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

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

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

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

下面,我就演示我在自己的电脑上配置DSＮ的过程:

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

2.在打开的“数据源（ODＢC）”对话框中选择“系统ＤSN”标签,然后单击“添加”按钮。

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

3.在出现的“ODBCMｉcrosoftＡcｃess　安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：

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

4.这时,我发现系统数据源名称中已经多了一个“mywｏｒld.ｍdb”，这就是我的网站要使用的数据库。

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

如图:

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

弄好这些后,打开dreamweａr,将数据库与网页进行连接。

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

５．２　链接页面的制作

　链接的概念:

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

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

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

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

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

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

3、按F1２预览网页。

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

5.３其他页面的建立

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

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

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

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

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

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

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

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

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

５．4计数器的设计

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

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

<%Resｐoｎsｅ．buｆfｅr=true%＞，意为先将页面先输出到缓冲区。

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

<%ﻫｄｉｍ　nuｍ　　　　　’先定义一个变量

nｕｍ=ｒeqｕesｔ.cｏｏkies（"num＂）　’从客户端获取COＯＫIＥS变量并赋值给nuｍ变量

iｆ　nｕm=＂"tｈen’判断如果客户端CＯＯＫＩEＳ变量为空,则赋值1，否则加1。

　　num=1　　　　　　

ｅｌseﻫnum=nｕｍ+1

endｉfﻫresponse．ｗｒitｅ"你是第"&num&"次访问本站"’利用rｅｓpｏnsｅ.wriｔe语句向客户瑞输出ｒeｓponse.cooｋies（"ｎum"）=nｕm　　’把变量num赋值给ｃookieｓ

resｐonｓe.ｃookies（"ｎum"）.expｉrｅs＝＃２030-1－1＃’设定cooｋies过期日期

％>ﻫ制作计数器时，一定要在代码的最写<%Rｅsｐonse．ｂuffer=ｔｒue%>

５.5　添加记录的设计

echｏ"字段数据编辑

echｏ""

ﻩechｏ"

keｙ＝edit&table＿namｅ=＂&naｍes＆"＆prｉmarｙkey="＆keys&"&pｒimａrykeｙvａlｕe="＆iｉf（action<>"adｄ",rs（keｙｓ）,""）＆　"'ｍeｔhod='post'nａme='ediｔor'＞"

echｏ　"

echo"＜inpｕｔtyｐｅ=hiｄden　naｍe＝ａctｉon　vａluｅ=save>＂

ﻩechoｉiｆ（action=＂add＂,""，" "）

ecｈo"

＇））｛this．fｏｒm.ａctｉｏn.valuｅ＝'new';tｈis．ｆｏrm．sｕｂmiｔ（）;};>&nｂsp;＂

ecｈo"<ｉnpｕtｔype=buｔｔonvaｌue=上一条oｎcliｃｋ=""tｈis．ｆｏrm.ａction.vaｌuｅ='pre'；ｔhis.fｏrｍ.sｕbmiｔ（）;＂">＆ｎbsp；"

eｃｈo"&nbｓp;&nｂsｐ；"

eｃhｏ＂<ａ　ｈreｆ='？

ｋｅy=viｅw&table_name＝＂&　ｎames&"'>表结构<／a＞＆nbsp;&ｎbｓｐ；＂

echｏ"

kｅy=sql&sqｌ=selｅct*　ｆｒoｍ　"　&ｎames&"&ｔabｌｅ_naｍe=＂&nameｓ＆＂＆primarｙｋey="&kｅys＆"'>表浏览＆nbｓp; ＂

ｅｃho"

'>主界面"

５.6设置当前页的记录数

subsｈoｗsｅlect（sql）

ﻩｄｉｍpａgｅ,pａgeUrl,strdｅｌ,ｇｅturｌﻩﻩ

ﻩpageSｉze=　requeｓｔ（"ｐaｇeＳizｅ＂）ﻩ＇设置每页显示的记录数

ﻩifpaｇeSize=""or　nｏt　iｓNumeｒic（pageSiｚｅ）tｈeｎ　ｐａgeSize　＝　50

ﻩ'判断是否删除

ifｒequest（"keylog"）<>"＂thｅn

ﻩﻩstrdel=＂deletｅ　frｏｍ"　＆reｑｕest（"tａbｌe＿namｅ"）&　"where"&　request（＂primarykey"）＆"＝＂＆ｒequest（"ｋeｙｌog＂）

ﻩresｐoｎse．Wrｉte　ｓtrdel

ﻩconn.execute（strdｅl）

ｇeｔurl="?

"＆rｅpｌaｃe（requesｔ.QueryString，＂＆kｅyｌog="&reqｕest（"ｋｅylog"）,＂"）

ﻩreｓpｏnsｅ．Rｅｄirecｔｇeｔｕrl

endif

５．7设置当前显示的页数

ｐａgｅ＝　ｒeqｕesｔ（"page"）　　

ﻩｉfｐａｇｅ=""ornot　isNuｍｅrｉc（ｐage）　thｅn　ｐagｅ＝1

pageUrl="？

key＝sql&sqｌ="&　ｓqｌ

ﻩif　ｒequｅsｔ（"priｍaｒyｋey"）<>　""andreqｕest（"taｂle_ｎａmｅ＂）<＞　""ｔｈeｎ

ﻩpａgｅUｒl　=pagｅUｒl&"&ｔａble_ｎame="　&　ｒｅqｕesｔ（＂table_name"）＆　"&ｐrimaｒｙkeｙ＝"&　requｅst（"primarykｅｙ"）

eｎｄiｆ

5．8　设置页面的大小设计

＜selectname="pagｅＳｉｚe">

ﻩﻩ　<％

ﻩﻩ　ifrequesｔ（"pageSize"）＜>""andisNumeric（rｅｑｕest（＂pagｅＳize"））thｅn

ﻩ　eｃho""&reqｕest（"pagｅSizｅ"）&＂＜/ｏption>＂

ﻩ　ｅlsｅ

　　　echｏ"＜optｉonvａｌue='５0'>50

ﻩﻩendif

ﻩ　％>

＜ｏｐtｉoｎvalue=＂１0"＞1０

　20＜/option>

<ｏptiｏnｖalue="30">30

ﻩ<ｏｐtionｖaｌuｅ="4０">40

ﻩ　５0

ﻩﻩ　＜ｏpｔionvalｕe=＂60"＞60

ﻩ　＜optｉon　ｖalｕe＝"70">70

ﻩ

ﻩ＜optionvａluｅ="90">９0<／optｉｏn＞

<ｏpｔionvalue="100">１00＜/oｐｔion>

ﻩ

六、测试

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

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

1．测试的项目。

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

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

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

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

连接数据库之前,首先必须声明一个对象来作为数据库与ＡSＰ程序之间的媒介,对象的声明方式如下:

Setcｏnｎ=seｒｖer.Ｃreatｅobjｅｃt（“AＤOBO.Cｏnｎｅｃtion”）

Ｃｒｅateoｂｊeｃｔ是ｓｅrvｅr对象中建立的函数，利用上面书写的方法，即可建立一个与数据库交换数据的对象，这种对象称为cｏｎnection对象。

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

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

通过ADO连接acｃｅss数据库实例代码如下:

<%ｓetｃonn＝sｅrver.crｅatｅobject（＂ａdodb.coｎｎection＂）　　/／建立ｃonｎｅｃtion对象

dbq=server．mappatｈ（"myｗoｒld．ｍdb"）　　//告诉aｓｐ数据库连接方法以及路径

conn.open"driver={ｍicrosoftaccessｄriver（*．mdｂ）}

//用ｃonｎ连接对象打开数据库%>

2.在IＥ地址栏里输入httｐ:

//ｌocalｈosｔ/tesｔ/，就能访问系统的前台首页面。

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

这是在地址栏中输入http:

//ｌocalhｏst/test/跳出来的页面。

6．　结束语

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

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

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

参考文献

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

机械工业,20０５.45-50．

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

北京大学，２00９．3-11.

[3］明日科技.ａsp开发典型模块大全[M］.北京：

人民邮电，２0０9.9８-122

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

上海科学普及出版社,2０0４

［５］薛凯,康亚雄.DrｅamweaｖerCS3入门提高精通[M].机械工业出版社,２００8

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

清华大学出版社，200９

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

清华大学出版社，2009

[8］杨继萍,孙岩,梁文新.Aｃcess2007数据库应用与开发[M].北京：

清华大学出版社,2０08

致谢

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

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

无论在理论上还是在实践中，都给了我很大的帮助,使我受益匪浅；这对于我以后的工作和学习无疑是一种巨大的帮助，非常感谢他耐心的辅导。

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