个人网站设计与实现

1、个人网站的设计与实现摘要：随着国际互联网的普及， 人们已经越来越不满足于在 internet 上浏览 信息了。 希望能够更深入的参与其中， 拥有自己的网站。 我们可以在网络这个平 台上更好的展现自我。个人网页的设计与实现不仅能够让我们更好的与外界交 流，沟通；还能够突出自己的个性与风格，增加个人魅力与自信。该研究课题主 要研究现在人们的个人网站的实现。该课题主要是介绍了如何开发个人网站。关键词：个人网站； ASP；web1. 引言目前关于 INTERNET 是我们听到最多的部分就是万维网（ world wideweb ）。Web实际上由数十亿单个页面组成，这非常类似于我们创建的WORD文档页面

2、。这就是 WEB它就是一大堆页面。所谓的“页”，“页”中可能包括文字、图像、图形、声音、动画等。这些单个页面会链接到其他页面。 通常一家企业或个人会创建统一的一组页 面，这些页面彼此相关。相关页面的集合就称为网站。每个网站都有主页， 这个页面就像一个目录。 通常主页就是网站的第一个页 面，不过有些网站还包含入口页面， 这有些类似于书本的扉页， 可以由这个入口 页面进入主页。这次的课题研究，我的网站设计与整个个性化页面生成系统主要由使用Dreamweaver 开发的关联规则采掘系统和利用 IIS+ASP 技术实现的个性化Web 页面生成器两部分组成。二者通过数据库服务器和 Web 服务器连接。2

3、. 系统构架网站，一个全新而又时髦的名词，正是有了无数的大小网站，才使互联网能 蓬勃发展。很多人都想拥有一个属于自己的网站，因此， 网站设计软件成为目前 最为流行的软件之一。 下面就介绍一下我开发个人网站所需的设计软件以及开发 环境。简介2.1 Adobe Dreamweaver CS5Adobe Dreamweaver CS5 是一款集网页制作和管理网站于一身的所见即 所得网页编辑器， Dreamweaver CS5 是第一套针对专业网页设计师特别发展的 视觉化网页开发工具， 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器 限制的充满动感的网页。2.2 ASP 技术ASP 是 Activ

4、e Server Page 的简写。 Active Server Page 是创建动态网页 的一个很好的工具， 它起一种编程语言的作用， 可以利用它编写动态产生 HTML的程序代码。而且ASP也是服务器端脚本环境，可以用来创建交互式WEB页并 建立强大的的 Web 应用程序。 ASP 技术能让 Web 开发员和网页设计员快速地 开发容易维护的动态 Web 主页。用户端只要使用可执行 HTML 码的浏览器就可 阅读ASP所设计的网页内容。ASP所使用的脚本语言均在Web服务器端执行, 用户端的浏览器不需要执行这些脚本语言。ASP 不但功能强大，而且语法的编写规则很简单。 ASP 使用简单易懂的脚

5、 本语言和 HTML 语言作为基础语言，对脚本语言的类型没有限制，使用的编辑 器简单，使用像 Windows 的记事本这样的普通文本编辑器即可。2.3 Access 数据库软件Access是Office软件中用来管理数据库的应用软件，它操作简单、功能全面，其存储方式简单且便于管理和维护； 既可以用来存放数据，也可以作为客户端开发工具进行数据库应用系统开发，即可以开发小型软件，也可以用来开发大型应用系统。它可运行于各种 Microsoft Win dows系统环境中，由于它继承了Win dows的特性，不仅易于使用，而且界面友好。它并不需要数据库管理者具有专业的程序设计水平，任何非专业的用户不必

6、编写代码，就可以用它来创建功能强大的数据库管理系统。本网站采用功能强大的Microsoft Access作为后台数据库，开发了一个小型的个人网站。3. 系统概要设计3.1 网站整体设计3.2留言板设计3.3 数据库建立 网站用到的后台文件:文件名作用与功能备注adm in.asp登陆后台in dex.as p首页admin_article.as p管理文章后台Delartcat.as p删除功能后台po st.as p发布功能后台myworld.mdb数据库文件后台admin_diary.as p心情管理后台后台认证：只允许浏览者进入页面浏览，在对回复留言和新闻的增加、删除这些管理时都需要对用

7、户的身份进行认证，即需要管理员提供后台管理的用户名 和密码，该用户名和密码保存在相对应的数据库中。4. 详细设计首先网站的策划， 因为我制作的是个人的网站， 所以面对的对象是自己周围 熟悉的同学朋友， 主题和内容就是自己日常生活琐事， 还有跟好朋友有个交流沟那就通的平台，互相了解的小天地。这样就没有什么特别高的创意要求，只要温馨， 简洁大方就好了。当然， 如果你要设计的是一个面向大众的个人展示平台， 要求新颖的创意了。针对我自己的个人网站，我主要从下面几点进行设计的：快乐世界： 是一个体现个性的板块内容， 放置一些我比较喜欢的优秀文章或 者我觉得很有意义的小故事还有图片供大家欣赏。 （其他几个

8、页面也是类似的， 只是介绍的方向不同） 。拥抱阳光：展示一些自己近期的生活照。心情动态：让朋友可以对我当天的心情有一个直观快捷的了解方式。留言板： 设计一个留言板作为和朋友交流的纽带， 这样可以随时促进朋友之 间的情感，又因为是自己设计的，比较有保密性，分享快乐和秘密的地方。4.1 静态网页设计现在整体的布局已经明确了，可以进行网页的设计了。aJj百话;ilf：乐T汽牟有站 rt甘的祷BT,恣ffl.再 帆下管aa斤遵ft的手佑 n Lil. -i THltJGXI rlKF逬I加AJLaPAH 协中斗ir fttiftWMsr-1经tri、魁r如 WISH i TC tWT#*WE-鶯为?才

9、帥I人市吳:彌叶 界评琦*gap旳補亀，tJU- jtt14ctf*AiMileg 阿阳殛an第讦諏人生II叮Atsir中T星砒iPf这是我网站首页的效果，接下来，我就简单演示一下这个主页的制作过程。首先，运行Dreamwear cs5，接着就是页面的布局了，选择“插入表格”然后根据你的需要划分，选择你所需的表格行列数。如图:-叵H . H H . H H - H JV. .-； ； 2 :ST-rT- E SV.TJI 2 :V - - 2 :V - FF r r I ； . ij然后依次在你所划分的位置插入你所需要的图片等等。这样一个简单有漂亮的网页的划分就完成了4.2动态页面的制作DSN

10、在我的整个网站中，动态页面占了很重要的部分。首先，我根据我的个人主 页所要实现的功能我制作好了我的数据库，接下来，我就把我设定系统的（数据源名称）的方法来讲讲。DSN是用来确定数据库所在的位置以及数据库 的相关属性的。使用DSN的优点是，如果我要移动数据库档案的位置或是使用 其他类型的数据库的时候，我只要重新设定 DSN即可，不需要去修改原来使用的过程:的程序。下面，我就演示我在自己的电脑上配置DSN1.启动控制面板，双击“管理工具”下的“数据源（ODBC）”，如图所示:H 査计御L営逼G任耐划程序E事性童看議注源（ODBG性盲&器2 KB2 KB2 KB2 KB1 KB2 KB2 KB20Q

11、9/7/14 12i41 2009/7/14 12;422 00WU 1242 2009/7/14 12:41 200W1412：dl ；009/7/1 1:41 2009/7/14 12:462. 在打开的“数据源（ODBC）”对话框中选择“系统DSN ”标签，然后单 击“添加”按钮，如图:用户ksh系统 冋I文件 问I驱动程B跟踪I连接瓶倚确定 | I 取消 I 应用（A I 解助 3. 在弹出的“创建新数据源”对话框中，选择数据库的驱动程序为“ MicrosoftAccess Driver （*mdb ）”，然后单击“完成”按钮，如图:迭择您憩为其安装融据煉的碾无應摩e) 名称Drive

12、r Driver Driver DriverDrivardododo doMicroEoft Hiorosoft MlCTOSO fl Mi croEoflAccess O.mdb) diiEft C# dbf) fucel C*. kIs) Faradoir C*. db )para o niirseft Vi F&xlvaHierosoft AccDriver C*. mlt) I M1 cro soft Acc ess-Tirei (*. mdbjH1 cr 0 soEt dBa.se Crzver (*. Jb) 4r 带-|完咸取谓4. 在出现的“ ODBC Microsoft Ac

13、cess安装”对话框，在“数据源名”文myworld.mdb ，然本框中输入我的这个网站的数据库的名称：myworld,单击“数据库”栏中的“选择”按钮选择我的这个网站根目录中我已经建好的数据库 后单击“确定”按钮，如图:ODBC Microsoft Access 妄装數摒煩名0O：mpforld说日月00:数te库 勘据库：Wmog陳慧玲I夷血业遠握1辭)储姮宙).j I压缩州I5. 这时，我发现系统数据源名称中已经多了一个“myworld.mdb ”，这就是我的网站要使用的数据库。单击“确定”按钮，这样，我就完成了数据源的创 建过程。如图:苓 ODBC用户至貌DSH文件DSff系统数据煩C

14、SJ:跟踪逹援也关于滋加on名称 驱动程厚弄好这些后，打开dreamwear，将数据库与网页进行连接。打开数据库,连接好数据库，并将数据库中的内容分别拽入到表格中的适当位置，这样，数据 库中的内容就显示在里面了。4.3 链接页面的制作链接的概念:链接也称超级链接，是指从一个网页指向一个目标的连接关系， 所指向的目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮 件地址、文件、甚至是应用程序。可以分为文字，影像，邮件，文件下载这几种 链接。在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应 的网页中去。1、在网页中选中要做超级链接的文字或者图片。2、在属性面

15、板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。3、按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型 4.4其他页面的建立一样的，根据首页的制作方式来制作其他页面， 这里我们要特别注意的就是 制作网站的四个基本原则：对齐、亲密性、重复性和对比。对齐就是指页面上的元素相互之间对齐。亲密性原则就是指元素相互靠近，放置在领进位置上时所建立起来的关系。重复的概念就是指， 在整个项目中重复某些元素， 从而将所有分离的部分联 系在一起。网站整个看上去要体现统一性，体现出相同的理念。对比可以把你的目光吸引到页面上， 让你为之注目。 使元

16、素形成对比能够吸 引人的视线浏览页面， 并建立一个信息层次体系， 让你能够查阅众多信息并从中 挑出你真正需要的信息。4.5 数据库的设计本设计是采用ASP结合Access数据库平台的一个个人网站。网站开发的性 能要求是实现网站的智能化。本设计能实现以下功能：心情版块的增、删、改和 留言板的实现及一些静态网页的浏览。 网站的数据库建设在这个网站的设计过程 中占有非常重要的位置。其中，我们应该要考虑到的问题有：1. 系统管理员： 系统管理员具有对整个网站发布，数据库的管理， 信息管 理，人员管理的最高权限。包括心情的增、删、改，留言的回复、删除。以上的 功能只能是管理员才有权限操作。2. 浏览者：

17、 信息的最终浏览者，他们是不具有任何权限的普通用户。3. 在设计数据库过程中，必须考虑到各种信息存放，更新。所以数据库必须能最大限度的满足各种信息的输入输出。以下为后台数据库的各表的结构和字段的分析。Admin （系统管理员）表：J admin :表 adjn:n_id_ 4djn5n_n*mt_ 4inin_p4555rd_ pigi&uiie toJay_couiit tQday_time_ E血p_tmw自动生験编号 卽电贯的姓窑 管$里贯的甕码页码心情版块的管理表:J day :表d_idd_d4t k d content内容管理表:art_Ld art titlear t_d 砒 e

18、 art_cont eit ar t_k*y*orJ间间JJ dj日EB当日登录數蚩 当B登m的时间衞匏1立时间勤据搓型I自动漏号自动生成漏号0朗丿时闾存当BB期管主垂址 情肉咨g自动编号自动生成骗号 存越文章的标题存方比文章的关讎字1屋B期用寸间存血文章的上餐时间 保存艾章的内容留言管理表:r word :.表_ I拿段盘称VTidvrname snail titL cdnl eiktimea.coneiLa_ti动本本S注期注注 自文文立膏日膏膏自动生成编号存啟留言S的姓名存St留言者的由0箱存肢留sS的阿址存做留害音的留=内容保存留言时间存啟管理员回fi留言的内誓 保存管理员回S的时间5. 系统实现一个好的网站建设好了之后是不能立即发布的， 因为由于在程序开发和页面制作的过程中难免会出现误差，所以在正式发布前通过测试找出网页中的漏洞 是非常重要的一个环节。在这之前需要进行一段时间的测试。1.为什么测试显得这么重要呢？没有经过测试的页面会出现那些问题呢?F面将从几个不在IIS服务器未改变“默认网站”默认路径的前提下，执行第二步。,就能访问系统的前台2 .在 IE 地址栏里输入 http:/localhost/qiqi/qiqi