个人网站的设计与实现

/福建儿童发展职业学院毕业论文（设计）(个人网站的设计和实现)姓名：学号：系别：人文科学系专业：初等教化（信息技术方向）年级：2009级指导老师：2011年10月30日目录TOC\o"1-3"\h\u1.引言 12.系统构架 12.1AdobeDreamweaverCS5简介 12.2ASP技术 22.3Access数据库软件 23.系统概要设计 33.1网站整体设计 33.2留言板设计 33.3数据库建立 34.具体设计 54.1静态网页设计 64.2动态页面的制作 74.3链接页面的制作 94.4其他页面的建立 105.测试 106.结束语 11个人网站的设计和实现摘要：随着国际互联网的普及，人们已经越来越不满意于在internet上阅读信息了。希望能够更深化的参和其中，拥有自己的网站。我们可以在网络这个平台上更好的呈现自我。个人网页的设计和实现不仅能够让我们更好的和外界沟通，沟通；还能够突出自己的特性和风格，增加个人魅力和自信。该探讨课题主要探讨现在人们的个人网站的实现。该课题主要是介绍了如何开发个人网站。

关键词：个人网站；ASP；web1.引言目前关于INTERNET是我们听到最多的部分就是万维网（worldwideweb）。Web事实上由数十亿单个页面组成，这特别类似于我们创建的WORD文档页面。这就是WEB——它就是一大堆页面。所谓的“页”，“页”中可能包括文字、图像、图形、声音、动画等。这些单个页面会链接到其他页面。通常一家企业或个人会创建统一的一组页面，这些页面彼此相关。相关页面的集合就称为网站。每个网站都有主页，这个页面就像一个书目。通常主页就是网站的第一个页面，不过有些网站还包含入口页面，这有些类似于书本的扉页，可以由这个入口页面进入主页。这次的课题探讨，我的网站设计和整个特性化页面生成系统主要由运用Dreamweaver开发的关联规则采掘系统和利用IIS+ASP技术实现的特性化Web页面生成器两部分组成。二者通过数据库服务器和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.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数据库平台的一个个人网站。网站开发的性能要求是实现网站的智能化。本设计能实现以下功能：心情版块的增、删、改和留言板的实现及一些静态网页的阅读。网站的数据库建设在这个网站的设计过程中占有特别重要的位置。其中，我们应当要考虑到的问题有：系统管理员：系统管理员具有对整个网站发布，数据库的管理，信息管理，人员管理的最高权限。包括心情的增、删、改，留言的回复、删除。以上的功能只能是管理员才有权限操作。阅读者：信息的最终阅读者，他们是不具有任何权限的一般用户。在设计数据库过程中，必需考虑到各种信息存放，更新。所以数据库必需能最大限度的满意各种信息的输入输出。以下为后台数据库的各表的结构和字段的分析。表3-5Admin（系统管理员）表：表3-6心情版块的管理表：表3-7内容管理表：表3-8留言管理表：5系统实现5.1动态页面的制作在我的整个网站中，动态页面占了很重要的部分。首先，我依据我的个人主页所要实现的功能我制作好了我的数据库，接下来，我就把我设定系统的DSN（数据源名称）的方法来讲讲。DSN是用来确定数据库所在的位置以及数据库的相关属性的。运用DSN的优点是，假如我要移动数据库档案的位置或是运用其他类型的数据库的时候，我只要重新设定DSN即可，不须要去修改原来运用的程序。下面，我就演示我在自己的电脑上配置DSN的过程：启动限制面板，双击“管理工具”下的“数据源（ODBC）”。在打开的“数据源（ODBC）”对话框中选择“系统DSN”标签，然后单击“添加”按钮。在弹出的“创建新数据源”对话框中，选择数据库的驱动程序为“MicrosoftAccessDriver（*.mdb）”，然后单击“完成”按钮。在出现的“ODBCMicrosoftAccess安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：myworld,单击“数据库”栏中的“选择”按钮选择我的这个网站根书目中我已经建好的数据库myworld.mdb，然后单击“确定”按钮。这时，我发觉系统数据源名称中已经多了一个“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’把变量num赋值给cookies

response.cookies("num").expires=#2030-1-1#’设定cookies过期日期

%>

制作计数器时，肯定要在代码的最写<%Response.buffer=true%>5.5添加记录的设计echo"字段数据编辑<br>" echo"<tablewidth=600border=0cellpadding=5cellspacing=1bgcolor=#CCCCCC><tr><td>" echo"<formaction='?key=edit&table_name="&names&"&primarykey="&keys&"&primarykeyvalue="&iif(action<>"add",rs(keys),"")&"'method='post'name='editor'>" echo"<br>" echo"<inputtype=hiddenname=actionvalue=save>" echoiif(action="add","","<inputtype=submitvalue=保存onclick=this.form.action.value='save';> ") echo"<inputtype=buttonvalue=添加onclick=if(confirm('的确要添加当前为新记录吗?')){this.form.action.value='new';this.form.submit();};> " echo"<inputtype=buttonvalue=上一条onclick=""this.form.action.value='pre';this.form.submit();""> " echo"<inputtype=buttonvalue=下一条onclick=""this.form.action.value='next';this.form.submit();"">  " echo"<ahref='?key=view&table_name="&names&"'>表结构</a>  " echo"<ahref='?key=sql&sql=select*from"&names&"&table_name="&names&"&primarykey="&keys&"'>表阅读</a>  " echo"<ahref='?'>主界面</a><br>"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"&request("primarykey")&"="&request("keylog") response.Writestrdel conn.execute(strdel) geturl="?"&replace(request.QueryString,"&keylog="&request("keylog"),"") response.Redirectgeturl endif5.7设置当前显示的页数page=request("page") ifpage=""ornotisNumeric(page)thenpage=1 pageUrl="?key=sql&sql="&sql ifrequest("primarykey")<>""andrequest("table_name")<>""then pageUrl=pageUrl&"&table_name="&request("table_name")&"&primarykey="&request("primarykey") endif5.8设置页面的大小设计 <selectname="pageSize"> <% ifrequest("pageSize")<>""andisNumeric(request("pageSize"))then echo"<optionvalue='"&request("pageSize")&"'selected>"&request("pageSize")&"</option>" else echo"<optionvalue='50'>50</option>" endif %> <optionvalue="10">10</option> <optionvalue="20">20</option> <optionvalue="30">30</option> <optionvalue="40">40</option> <optionvalue="50">50</option> <optionvalue="60">60</option> <optionvalue="70">70</option> <optionvalue="80">80</option> <optionvalue="90">90</option> <optionvalue="100">100</option> </select>六、测试一个好的网站建设好了之后是不能马上发布的，因为由于在程序开发和页面制作的过程中难免会出现误差，所以在正式发布前通过测试找出网页中的漏洞是特别重要的一个环节。在这之前须要进行一段时间的测试。测试的项目。我主要就如下几个方面进行探讨：性能测试，平安性测试，稳定性测试，阅读器兼容性测试，可用性/易用性测试，链接测试，代码合法性测试。在我的个人网站的测试过程中，在数据库的链接做的不好，很多图片的相对位置都出现了很多的错误，还好，经过我自己的修改，现在已基本消退了这种现象。下面是关于连接数据库的部分代码：连接数据库之前，首先必需声明一个对象来作为数据库和ASP程序之间的媒介，对象的声明方式如下：Setconn=server.Createobject(“ADOBO.Connection”)Createobject是server对象中建立的函数，利用上面书写的方法，即可建立一个和数据库交换数据的对象，这种对象称为connection对象。Conn是一个要和数据库沟通的对象变量。对象建立完成后，还要打开通道和数据库作连接才算是连接完成。通过ADO连接access数据库实例代码如下：<