个人网站的设计与实现

个人网站的设计与实现福建儿童发展职业学院毕业论文（设计）个人网站的设计与实现）姓 名： 学 号： 系 另U: 人文科学系专 业:初等教育（信息技术方向）年 级： 2009级 指导教师： 2011 年 10 月 30 日目录1. 引言 12. 系统构架 121 Adobe Dreamweaver CS5 简介 12.2 ASP 技术 22 3 Access数据库软件 23. 系统概要设计 33 1 网站整体设计 332 留言板设计 33 3 数据库建立 34. 详细设计 44.1静态网页设计 54.2 动态页面的制作 74 3 链接页面的制作 84.4 其他页面的建立 85 测试 错误!未定义书签 结束语 13个人网站的设计与实现摘要：随着国际互联网的普及,人们已经越来越不满足于在internet上浏览信息了.希 望能够更深入的参与其中,拥有自己的网站我们可以在网络这个平台上更好的展现自我. 个人网页的设计与实现不仅能够让我们更好的与外界交流,沟通；还能够突出自己的个性与 风格，增加个人魅力与自信该研究课题主要研究现在人们的个人网站的实现该课题主要 是介绍了如何开发个人网站关键词：个人网站;ASP；web1. 引言目前关于INTERNET是我们听到最多的部分就是万维网(world wide web)。

Web实际上由数十亿单个页面组成，这非常类似于我们创建的WORD文档页面 这就是WEB――它就是一大堆页面所谓的“页〃，“页”中可能包括文字、图像、 图形、声音、动画等.这些单个页面会链接到其他页面.通常一家企业或个人会创建统一的一组页 面，这些页面彼此相关相关页面的集合就称为网站每个网站都有主页，这个页面就像一个目录通常主页就是网站的第一个页 面，不过有些网站还包含入口页面，这有些类似于书本的扉页，可以由这个入口 页面进入主页.这次的课题研究，我的网站设计与整个个性化页面生成系统主要由使用Dreamweaver开发的关联规则采掘系统和利用IIS+ASP技术实现的个性化Web页 面生成器两部分组成二者通过数据库服务器和Web服务器连接.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的记事本这样的普通文本编辑器即可3 Access数据库软件Access是Office软件中用来管理数据库的应用软件，它操作简单、功能全 面，其存储方式简单且便于管理和维护；既可以用来存放数据，也可以作为客户 端开发工具进行数据库应用系统开发，即可以开发小型软件，也可以用来开发大 型应用系统.它可运行于各种Microsoft Windows系统环境中，由于它继承了 Windows的特性，不仅易于使用，而且界面友好•它并不需要数据库管理者具有 专业的程序设计水平，任何非专业的用户不必编写代码，就可以用它来创建功能 强大的数据库管理系统。

本网站采用功能强大的Microsoft Access作为后台数 据库，开发了一个小型的个人网站图2-1体统的结构图：3. 系统概要设计31 网站整体设计表 3 — 1 网站构架图3.2 留言板设计表 3-2 留言板构架图3.3 数据库建立图 3—3 实体 E-R 图：个人网站后台管理系统网站用到的后台文件：表 3-4 后台文件部分图：文件名作用与功能备注admin asp登陆后台index asp首页admin_article.asp管理文章后台Delartcat .asp删除功能后台pos t.asp发布功能后台myworld mdb数据库文件后台admin_diary.asp心情管理后台后台认证：只允许浏览者进入页面浏览，在对回复留言和新闻的增加、删除 这些管理时都需要对用户的身份进行认证,即需要管理员提供后台管理的用户名 和密码，该用户名和密码保存在相对应的数据库中 详细设计首先网站的策划，因为我制作的是个人的网站，所以面对的对象是自己周围 熟悉的同学朋友，主题和内容就是自己日常生活琐事，还有跟好朋友有个交流沟 通的平台,互相了解的小天地这样就没有什么特别高的创意要求，只要温馨， 简洁大方就好了。

当然,如果你要设计的是一个面向大众的个人展示平台，那就 要求新颖的创意了.针对我自己的个人网站,我主要从下面几点进行设计的：快乐世界：是一个体现个性的板块内容,放置一些我比较喜欢的优秀文章或 者我觉得很有意义的小故事还有图片供大家欣赏其他几个页面也是类似的， 只是介绍的方向不同）拥抱阳光:展示一些自己近期的生活照心情动态：让朋友可以对我当天的心情有一个直观快捷的了解方式留言板：设计一个留言板作为和朋友交流的纽带，这样可以随时促进朋友之 间的情感，又因为是自己设计的，比较有保密性，分享快乐和秘密的地方1静态网页设计现在整体的布局已经明确了，可以进行网页的设计了图4—1网站首页效果图：1天汽t圍今天去隹乐陪：汽午兩站 相当的拥協fttr s 也下•尊在国斥迟祥的节悵H抱阳光小•主■¥_!：卄伤・"申中对吨t刃乓f*・Si可三耳了昭戒.啬不甜时.（B而钿f.M不誅环生的五片邑g一耳姬柚 了豹 酬*.斫外这是我网站首页的效果，接下来,我就简单演示一下这个主页的制作过程首先，运行Dreamwear cs5,接着就是页面的布局了，选择“插入--〉表格"然后根据你的需要划分，选择你所需的表格行列数如图:图4-2网页分栏图:然后依次在你所划分的位置插入你所需要的图片等等。

图4—3网页分栏效果图：这样一个简单有漂亮的网页的划分就完成了 •4・2数据库设计本设计是采用ASP结合Access数据库平台的一个个人网站网站开发的性 能要求是实现网站的智能化•本设计能实现以下功能：心情版块的增、删、改和 留言板的实现及一些静态网页的浏览网站的数据库建设在这个网站的设计过程 中占有非常重要的位置•其中，我们应该要考虑到的问题有：1. 系统管理员：系统管理员具有对整个网站发布，数据库的管理，信息管 理，人员管理的最高权限包括心情的增、删、改，留言的回复、删除以上的 功能只能是管理员才有权限操作.2. 浏览者：信息的最终浏览者，他们是不具有任何权限的普通用户3. 在设计数据库过程中，必须考虑到各种信息存放，更新.所以数据库必须 能最大限度的满足各种信息的输入输出以下为后台数据库的各表的结构和字段的分析表3-5 Admin （系统管理员）表：I admin ;表字段售称 丨 數据奠型 丨¥ ：±idriiri_id _ :iiiri i ri_TL：=dTi eiidriirijiaEET-jril pagesiiq tu iiay_i2LniTLt to iiay_tirTiu SQ tUp_ti[TlQ号 间间 迦応応字字期期 自丈交數數曰曰自动生成编号 管理员的姓名 菅理员的酒码页码保存当曰登录埶重 詡肖曰登录的时间 囱创立时间表3—6心情版块的管理表:day ;妻字园售称数協类型d id自动编号自动生成编号d d：it«曰期/时冋存啟当日曰期d c cm tent亀主存锁心情肉容囱表3-7内容管理表:口 art :寒字段茗称勘捐粪刮kar t_i I自动编号自动生成编号art ti tie存敢文章的标题ar t 已日船时间存敢文章的上传时间srt con保存文章的内容ar or d存啟文章的关健宇|#11 4丨表3—8留言管理表:宝段窑称 丨勒据型型 I¥ Yr_idw_nam 已 email■h^con t entvr time自动生成编号 存放留言者的姓茗存放留言者的邮箱存放留言者的网址► v a izuTL-ten• =_■_M 晋注 time日期/■时间民存留言时间存議菅理员回夏留言的内咨 保存管理员回夏的时间5系统实现5。

1 动态页面的制作在我的整个网站中，动态页面占了很重要的部分首先，我根据我的个人主 页所要实现的功能我制作好了我的数据库，接下来，我就把我设定系统的DSN（数 据源名称）的方法来讲讲DSN是用来确定数据库所在的位置以及数据库的相关 属性的使用DSN的优点是，如果我要移动数据库档案的位置或是使用其他类型 的数据库的时候，我只要重新设定DSN即可，不需要去修改原来使用的程序下 面，我就演示我在自己的电脑上配置DSN的过程：1. 启动控制面板，双击“管理工具”下的“数据源（ODBC）”2•在打开的“数据源（ODBC） ”对话框中选择“系统DSN”标签，然后单击 “添加”按钮在弹出的“创建新数据源”对话框中,选择数据库的驱动程序为“ Microsof t Access Driver (*.mdb)”，然后单击“完成”按钮.3. 在出现的“ODBC Microsoft Access安装”对话框，在“数据源名”文本 框中输入我的这个网站的数据库的名称:myworld，单击“数据库'栏中的“选择” 按钮选择我的这个网站根目录中我已经建好的数据库myworld.mdb，然后单击“确定”按钮.4. 这时，我发现系统数据源名称中已经多了一个“myworld。

mdb”，这就是 我的网站要使用的数据库单击“确定”按钮，这样，我就完成了数据源的创建 过程如图：图5—1数据源添加成功图：「耳ODBC数垢源营坯器 I菱「|用户 画|裁 吨 丽 画|驱动程序|跟踪|连接迪|寻滋加5〕...刪除00飢置©…系统数摇源6):名称 晅动程序Mi crozoft Access Dr iver (*. mdb〕弄好这些后，打开dreamwear，将数据库与网页进行连接打开数据库，连 接好数据库，并将数据库中的内容分别拽入到表格中的适当位置，这样，数据库 中的内容就显示在里面了.5.2链接页面的制作链接的概念：链接也称超级链接，是指从一个网页指向一个目标的连接关系，所指向的目 标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮 件地址、文件、甚至是应用程序可以分为文字，影像，邮件，文件下载这几种 链接.在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应 的网页中去.1、 在网页中选中要做超级链接的文字或者图片2、 在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页 文件就完成了做好超级链接属性面板出现链接文件显示.3、 按F12预览网页。

在浏览器里光标移到超级链接的地方就会变成手型 5.3其他页面的建立一样的，根据首页的制作方式来制作其他页面,这里我们要特别注意的就是 制作网站的四个基本原则：对齐、亲密性、重复性和对比对齐就是指页面上的元素相互之间对齐亲密性原则就是指元素相互靠近，放置在领进位置上时所建立起来的关系 重复的概念就是指，在整个项目中重复某些元素,从而将所有分离的部分联 系在一起.网站整个看上去要体现统一性，体现出相同的理念.对比可以把你的目光吸引到页面上,让你为之注目使元素形成对比能够吸 引人的视线浏览页面，并建立一个信息层次体系，让你能够查阅众多信息并从中 挑出你真正需要的信息.下面要给大家介绍我的设计中的部分代码：54计数器的设计采用 ASP 编程的方式实现访问者第几次光临本站.首先在代码的起始部分写 如下代码：＜%Response.buffer二true%〉，意为先将页面先输出到缓冲区然后 在底部计数器部分写下如下代码：＜%dim num '先定义一个变量num二request.cookies ("num")'从客户端获取COOKIES变量并赋值给num变 量if num二”” then '判断如果客户端COOKIES变量为空，则赋值1,否则加1.num=1 elsenum=num+1end ifresponse.write"你是第"&num&"次访问本站” '利用 response.write 语句向客户瑞输出response。

cookies (" num") =num '把变量num赋值给cookiesresponsecookies("num")expires二#2030—1—1# ' 设定 cookies 过期日期%〉制作计数器时，一定要在代码的最写＜%Responsebuffer二true%〉55添加记录的设计echo ”字段数据编辑＜br〉"echo"〈tablewidth=600border=0cellpadding=5cellspacing=1bgcolor= ＃CCCCCC〉〈tr〉”echo ""echo ””echo iif (action二” add” , "”，"

form action value二'save' ;> ；” )echo ”〈input type=button ▼3山6=添力口 onclick二if (confirm ('确实要 添加当前为新记录吗？ ')){t his.form.ac tion .value二'new'； t hisform submit()；}；> ；"echo " ； "echo ”  ；”echo ”表浏览 ；  "echo "〈a href=' ?' >主界面

6设置当前页的记录数sub showselect(sql)dim page,pageUrl，strdel，geturlpageSize = request(”pageSize”) '设置每页显示的记录数if pageSize =”” or not isNumeric(pageSize) then pageSize = 50'判断是否删除if request("keylog") <〉”” thenstrdel = "delete from” & request("table_name") &” where ”& request("primarykey") ＆”=" & request(”keylog”)response Write strdelconn.execute(strdel)geturl = "?" & replace (requestQueryString, ” &keylog二"&request(”keylog"),””)response.Redirect geturlend if57设置当前显示的页数page = request(”page”)if page=”” or not isNumeric(page) then page=1pageUrl = "?key=sql&sql=” & sqlifrequest("primarykey”)<〉 "” andrequest(” table_name”) 〈〉 ” " thenpageUrl = pageUrl&”&table_name=" & request(”table_name") & "&primarykey=” & request("primarykey”)end if5。

8设置页面的大小设计〈select name="pageSize”〉〈％if request("pageSize") 〈>”” and isNumeric(request("pageSize”)) thenecho"〈optionvalue='"&request(”pageSize")&”'selected>" &request(”pageSize”)&"”elseecho "〈option value='50'〉50〈/option>”end if%>10 〈option value="40"〉40〈/option> 〈option value="60”〉6080〈/option> 〈option value="90”〉90

在这之前需要进行一段时间的测试1．测试的项目. 我主要就如下几个方面进行探讨：性能测试，安全性测试，稳定性测试 ， 浏览器兼容性测试 ，可用性/易用性测试，链接测试 ，代码合法性测试在我的个人网站的测试过程中，在数据库的链接做的不好，很多图片的相对 位置都出现了很多的错误，还好，经过我自己的修改，现在已基本消除了这种现 象.下面是关于连接数据库的部分代码：连接数据库之前，首先必须声明一个对象来作为数据库与ASP程序之间的媒 介,对象的声明方式如下：Set conn=server.Createobject(“ADOBO.Connection”)Createobject是server对象中建立的函数，利用上面书写的方法，即可 建立一个与数据库交换数据的对象，这种对象称为connection对象Conn是一 个要与数据库沟通的对象变量对象建立完成后，还要打开通道与数据库作连接 才算是连接完成通过ADO连接access数据库实例代码如下：〈％ set conn二server.createobject ("adodb.connection") 〃建立connection 对象dbq二server。

mappath ("myworldmdb") 〃告诉 asp 数据库连接方法以及路径conn.open ” driver二{microsoft access driver (* 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］ 薛凯,康亚雄.Dreamweaver CS3入门 提高 精通［M］。

机械工业出版社，2008［6］ 甘登岱网页设计三合一［M］ •北京：清华大学出版社,2009［7］ 邱云飞，温国峰网页设计与网站建设［M］北京：清华大学出版社,2009［8］ 杨继萍，孙岩，梁文新.Access2007数据库应用与开发［M］北京：清华大学出版社，2008个人网站的设计与实现致谢通过这次的毕业设计,我不仅提高了自己的学习能力、动手 能力,也拓宽了我的知识面，同时也克服了自己害羞的性格，增 强了克服困难的勇气在本次毕业设计中，指导老师认真负责的 工作态度，不厌其烦地指导都让我特别感动无论在理论上还是 在实践中，都给了我很大的帮助，使我受益匪浅；这对于我以后 的工作和学习无疑是一种巨大的帮助，非常感谢他耐心的 另外,在网站制作过程中身边的同学同样给予我不少帮助，当我 有问题向大家请教时，大家都很热情尽力的帮助我,在这里一并 表示感谢。