个人网站设计与实现

个人网站的设计与实现个人网站的设计与实现摘要：随着国际互联网的普及，人们已经越来越不满足于在internet上浏览信息了。希望能够更深入的参与其中，拥有自己的网站。我们可以在网络这个平台上更好的展现自我。个人网页的设计与实现不仅能够让我们更好的与外界交流，沟通；还能够突出自己的个性与风格，增加个人魅力与自信。该研究课题主要研究现在人们的个人网站的实现。该课题主要是介绍了如何开发个人网站。关键词：个人网站；ASP；web1.引言目前关于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. 结束语两个多月的毕业设计已告一段落，到此，我制作的个人网站已经基本完成。但由于毕业设计时间较短，本人的能力有限，导致于我无法让我的数据库和网站进行正确的相联接，这个系统还有许多不足的地方。这些都有待于进一步改善。参考