个人网站设计与实现

泉州信息职业技术学院 毕题 目： * 名： 学 号： ********* 专 业： 班 级： 09指导教师： 业 设 计

个人网站的设计与实现

*** 计算机应用技术 计应 王源庆老师

2012年5月20日

泉州信息职业技术学院毕业论文（设计）

目 录

前言 ................................................. 错误!未定义书签。 一、个人网站设计需求分析 ................................................ ５

1.1、个人网站的问题定义与可行性分析 ................................. ５

1.1.1、功能定义 ................................................. ５ 1.1.2、可行性分析 ............................................... ５

1.2、个人网站整体要求 ................................................ ６

1.2.1 功能要求 .................................................. ６ 1.2.2、系统性能要求 ............................................. ６ 1.2.3、关于未来需求 ............................................. ６

二、个人网站建立的步骤 .................................................. ６

2.1、确定网站主题 ................................................... ６ 2.2、选择好域名 ..................................................... ７ 2.3、掌握建网工具 ................................................... ７ 2.4、确定网站界面 ................................................... ８ 2.6、 推广自己的网站 ............................................. １１ 三、网站开发环境及工具介绍 ............................................ １１

3.1、 个人网站开发环境 ............................................ １１ 3.2、IIS服务 ...................................................... １１ 3.3、ASP及其特点 .................................................. １１ 3.4、Dreamweaver简述 .............................................. １２ 3.6、 Flash简介 ................................................... １２ 4.2、 网站结构图 .................................................. １３

２

泉州信息职业技术学院毕业论文（设计）

个人网站的设计与实现

09计应 徐惠聪

摘 要

21世纪是Internet飞速发展的时代，网络也已经越来越普及，很多人也已经意识到网络的强大生命力和它在未来将处于的重要地位，互联网为我们提供了一个新的空间，新的领域，让我们充分的表达自我，使得网站也不再仅仅为企业或公司等大型结构所拥有，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。 本文主要是对个人网站的设计与实现进行研究和探讨。 关键词：个人网站 设计 实现

３

泉州信息职业技术学院毕业论文（设计）

前言

随着科技的进步，时代的发展，计算机信息行业的逐步壮大，人们也越来越离不开各种各样的信息了，人们对信息的追求也越来越迫切了。互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出极其重要的地位，并发挥着极其重要的作用。Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。

个人网站设计是一种建立在新型媒体之上的新型设计，它与传统媒体相比有许多的不同，它在信息传播方面具有声、像、图、文、视觉、听觉、互动的特点，通过视觉传达各种各样的个性化信息，而且更新和修正较为快捷方便，可以在任何时间更新，而不受时间和地域的限制。

４

一、个人网站设计需求分析

需求分析最根本的任务是确定“为了满足客户的需要，系统必须做什么”。具体的说，应该确定系统必须具有的功能和性能，系统要求的运行环境，并且预测系统发展的前景。必须仔细分析系统中的资料，既要分析系统中的数据流，又要分析长期使用的资料储存。该阶段不是确定系统怎样完成它的工作，而仅仅是确定系统必须完成哪些工作，也就是对目标系统提出完整、准确、清晰、具体的要求。 1.1、个人网站的问题定义与可行性分析

通常情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站一般体现在：为了展示自己的风采，让大家和我一起分享我的心得与经验，让和我有共同爱好的朋友有一个倾诉的地方。 1.1.1、功能定义

（1）管理员权限：修改所有页面内容、增删改文章、管理评论、修改公告、修改管理员自身信息、编辑各页面栏目、添加删除图片、添加删除音乐、修改版权信息等。 （2）浏览者权限：阅读所有页面内容、添加评论、添加留言、浏览文章、浏览图片、浏览音乐等。 1.1.2、可行性分析

系统可行性分析主要从经济可行性、技术可行性和操作可行性三方面去分析。 （1）经济可行性分析

从系统的开发和效益关系上讲，采用asp这个可以开发出交互、高性能Web数据库应用的技术进行开发，效率较高。该系统的开发不需要花费太多的经费，只需在域名和服务器空间租用上有开销，因为个人网站不涉及超大容量的文件存储和庞大的访问量，因此对于服务器来讲，要求不会太高，开销不会很大。因此，从经济性分析是可行的。 （2）技术可行性分析

根据现有的技术设备条件，在技术上实现也是可行的。在设备方面，前期系统开发在本地端制作完成，只需通过ftp软件上传至服务器端即可，而软件开发所需条件相对

泉州信息职业技术学院毕业论文（设计）

较低，对于系统开发及运行环境均不造成任何困难。对于系统开发人员基本具备了计算机专业知识，有一定的编程基础，熟悉和掌握数据库及网络相关知识，具备开发条件。 （3）操作可行性

该系统操作上非常简单，对于用户来说，只要具备IE浏览器5.5版本以上即可通过域名搜索即可登录本站。

1.2、个人网站整体要求

1.2.1 功能要求

（1）页面风格简洁明快，给人以较好的视觉印象。 （2）用户浏览、操作均便捷，迅速。 （3）用户权限、功能的设置要准确无误。 1.2.2、系统性能要求

在目前硬件设备条件下，要求处理程序的速度相对较快。因此，在程序设计阶段，优化代码，降低处理时间是需要考虑的问题。 1.2.3、关于未来需求

由于系统开发时间较短，可能不是很完善，在运行过程中还会遇到一些问题，所以应在系统设计过程中对未来可能需要的扩充和修改做好准备，以便及时变更。

二、个人网站建立的步骤

2.1、确定网站主题

制作网站，首先必须要解决的就是网站内容问题，即确定网站的主题。如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色；二者，在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。

对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。

６

泉州信息职业技术学院毕业论文（设计）

2.2、选择好域名

域名是网站在互联网上的名字。一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。失去这个域名，所有前期工作就将全部落空。

目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向，如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不光是它“适时”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了网页的传输速度。所以，就我个人观点来说，首先花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。 2.3、掌握建网工具

网络技术的发展带动了软件业的发展，所以用于制作Web页面的工具软件也越来越丰富。从最基本的HTML编辑器到现在非常流行的Flash互动网页制作工具，各种各样的Web页面制作工具，下面是几款具有代表性的网页制作器：

1、 HTML编辑器。虽然HTML代码复杂，编辑和调试要花费大量的时间，但因HTML的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级HTML规范，使用较为普遍的有Hotdog等专业HTML编辑器。

2、所见即所得的网页编辑器。其中以Microsoft Frontpage为代表，它具有如Word一样的操作界面，熟知Word功能的操作者，只要稍加培训就能轻松编制网页。而且，Frontpage还能解析网页的HTML源代码，并提供了预览支持。但Frontpage的一些特殊显示功能并不能在其它非IE浏览器下实现。所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。

3、Flash互动网页制作工具。这是一款功能非常强大的交互式矢量多媒体网页制作工具。能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比JAVA小巧精悍！但它的动画效果、互动效果、多媒体效果十分出色。而且还可以在Flash动画中封装Mp3音乐、填写表单等；并且由于Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。这是一款十分适合动态Web制作的工具。

当然，互联网还是一个免费的资料库。编制网页需要多种多样的按钮、背景还有各种各样图形、图片。如果这些都要靠自己完成，既浪费时间又浪费金钱，而且还需要强大的图形、图片制作技术。所以，为了省却这些麻烦，网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。

７

泉州信息职业技术学院毕业论文（设计）

2.4、确定网站界面

界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：

2.4.1、栏目与板块编排

构建一个网站就好比写一篇论文，首先要列出题纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。

网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是：

 尽可能删除那些与主题无关的栏目；  尽可能将网站内最有价值的内容列在栏目上；

 尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站

点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。 另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。一般来说，个人站点内容较少，只要分个栏目也就够了，不需要设置板块。如果有必要设置板块的，应该注意：

 各板块要有相对独立性；  各板块要有相互关联；  各板块的内容要围绕站点主题； 2.4.2、目录结构与链接结构

网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排。

８

泉州信息职业技术学院毕业论文（设计）

另需要注意的还有：目录的层次不要太深，不要超过3层；不要使用中文目录，使用中文目录可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接结构有两种基本方式：

 树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一

级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。

 星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有

链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。

2.4.3、进行形象设计

网站的设计可以从以下几点出发：

 设计网站标志(LOGO)。LOGO是网站的标志，可以是中文、英文字母，也可以是

符号、图案等。LOGO的设计创意应当来自网站的名称和内容。比如：网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。

９

泉州信息职业技术学院毕业论文（设计）

 设计网站色彩。网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同

的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站型象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。一般适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。  设计网站字体。和标准色彩一样，标准字体是指用于标志，标题，主菜单的特

有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，那么辛苦设计制作便可能付之东流了。

 设计网站宣传语。也可以说是网站的精神、主题与中心，或者是网站的目标，

用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。 2.5、确定网站风格

“风格”是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素，网站可以是平易近人的、生动活泼的也可以是专业严肃的。不管是色彩、技术、文字、布局，还是交互方式，只要你能由此让浏览者明确分辨出这是你网站独有的，这就形成了网站的“风格”。

风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个站点的个性：是粗犷豪放，还是清新秀丽；是温文儒雅，还是执著热情。

总之，有风格的网站与普通网站的区别在于：在普通网站上你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，在有风格的网站上你可以获得除内容之外的更感性的认识。

在明确自己想给人以怎样的印象后，要找出网站中最有特色的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化、宣传。总之，风格的形成不是一次定位的，你可以在实践中不断强化、调整、改进。

１０

泉州信息职业技术学院毕业论文（设计）

2.6、 推广自己的网站

网站的营销推广在个人网站的运行中也占着重要的地位，在推广个人网站之前，请确保已经做好了以下内容：网站信息内容丰富、准确、及时；网站技术具有一定专业水准，网站的交互性能良好。一般情况下，可按如下方式：

 搜索引擎注册与搜索目录登录技巧

注册著名的搜索引擎站点是在技术上推广网站的第一步。注册搜索引擎有一定的技巧，像AltaVista、搜索客这样的搜索引擎，它自动收录提交的网址。另外，注意Meta的使用，不要提交分栏Frame页面，大部分搜索引擎不识别Frame，所以一定要提交有内容的Main页面。

而像Yahoo、搜狐等搜索目录网站采用手工方式收录网址，以保证收录网站的质量，在分类查询时获得的信息相关性比搜索引擎站点（靠Spider自动搜索的）更强。由于搜索目录网站收录网站的人为因素相对较多，因此在提交网站时要注意遵守规则。如Yahoo要求注册站点描述不超过25个单词。在此要注意：将网址提交到最合适的目录下面，要认真详细的介绍网站，千万不要有虚假、夸张的成分。

三、网站开发环境及工具介绍

3.1、 个人网站开发环境

在进行个人网站建站之前，首先介绍一下我搭建的系统平台环境和开发工具。由于本人只是在学校专业课中接触过编程和网页制作的皮毛，现实工作中并未从事这方面，没有经验，因此在此次设计中我采用的是比较容易掌握且的Window XP+IIS+ASP的组合作为系统开发平台。 3.2、IIS服务

IIS是Internet Information Server的缩写，是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。 IIS的一个重要特性是支持ASP。IIS 3.0版本以后引入了ASP，可以很容易的张贴动态内容和开发基于Web的应用程序。 3.3、ASP及其特点

ASP是Active Server Page的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。

１１

泉州信息职业技术学院毕业论文（设计）

ASP作为一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。

ASP能够直观、简易地实现强大的Web应用程序，而且它具有开放性、易操作性、程序与外观分离等特点，加之集中了社会上优秀的地各类专业人员，使ASP业务有了更加广阔的发展空间。 3.4、Dreamweaver简述

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Dreamweaver具有最佳的制作效率、操作直观、简单易学、站点管理方便、无可比拟的控制能力等优势，但他同样存在着难以精确达到与浏览器完全一致的显示效果、页面原始代码难以控制等缺陷。

3.5、网站图片制作工具Photoshop简介

Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件。它功能强大，操作界面友好，得到了广大第三方开发厂家的支持，从而也赢得了众多的用户的青睐。

Adobe Photoshop最初的程序是由美国密歇根大学的研究生Thomas创建，后经Knoll兄弟以及Adobe公司程序员的努力，Adobe Photoshop产生巨大的转变，一举成为优秀的平面设计编辑软件。它的诞生可以说掀起了图象出版业的革命，目前ADOBE PHOTOSHOP最新版本为6.0，它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。

Photoshop支持众多的图像格式，对图像的常见操作和变换做到了非常精细的程度，使得任何一款同类软件都无法望其颈背；它拥有异常丰富的插件(在Photoshop中叫滤镜)，熟练后您自然能体会到\"只有想不到，没有做不到\"的境界。 3.6、 Flash简介

Flash是一种交互式矢量多媒体技术，他的前身是Future plash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash

１２

泉州信息职业技术学院毕业论文（设计）

已经渐渐成为交互式知量的标准，未来网页的一大主流。 四、个人网站的简单介绍 4.1、 我的个人网站概貌

因为是个人网站，所以只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台在线管理平台。

4.2、 网站结构图

网站结构图如下：用户通过输入网址登录主页。主页中包含管理员及注册用户登陆模块。普通用户浏览主页面或其它子页面，可以点击浏览详细内容，普通用户可对“留言板”可进行留言操作，对于“杂文”可加入评论。而管理员登录后，即可对各功能模块中的内容进行编辑、修改、甚至删除操作。如管理员未登录或退出登录，则于普通用户权限相同。

管理员 键入网址域名进入网站

浏览用户

主页

１３

泉州信息职业技术学院毕业论文（设计）

主页 个人简介 个人专题 链接百度 我的相册 网站简介 女生天地 我的班时尚衣橱 可爱饰网友 美丽校音乐欣文学鉴我的相给我留言 我的论坛 发送邮件 提交 参考文献：

[1] 《Flash CS4》 [2] 《网页设计》

[3] 刘瑞新《ASP动态网站开发、毕业设计指导及实例》[M]. 机械工业出版社 2000 [4] 王玉芬《网站规划与设计》[M]. 西北工业出版社 2003

[5]姜楠 《完美网页设计与制作 》 中国青年出版社 2004年5月

[6]贺凯 焦超 《Flash Mx 2004动画制作典型范例》 中国出版社 2005年2月

１４

泉州信息职业技术学院毕业论文（设计）

你的论文我看了大部分，发现跟杨雅霜同学的基本都是一样的，你们两个全部重新改了再发过给我。

１５