免费-个人网站设计论文[1]

发布时间：2024-11-10

这篇论文是关于我的一个个人网站的设计,首先我先从网站设计的方向和目的、网站设计的整个流程出发,然后通过自己设计的这个个人网站作品来说明并演示一个完整的网站制作过程。本论文详细的介绍了整个网站设计的全过程。本论文的每一章都是网站建设的一个步骤,理论和实践相结合。既有理论、又有实例,把每一章的实例合在一起,就构成一个大实例。

免费-个人网站设计论文

个人网站设计

【摘要】这篇论文是关于我的一个个人网站的设计，首先我先从网站设计的方向和目的、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个完整的网站制作过程。本论文详细的介绍了整个网站设计的全过程。本论文的每一章都是网站建设的一个步骤，理论和实践相结合。既有理论、又有实例，把每一章的实例合在一起，就构成一个大实例。当然，一个好网站的整个设计过程是不能用短短的几十页纸就可以说清楚，所以，在我的这篇论文中，我详细的介绍了整个网站中最重要的部分，其中包括主页的设计和一部分链接页面的设计。

【关键词】：设计策划网站。

计算机科学与技术专业 - 1 -

毕业(设计)论文：个人网站设计

引言 ······························· 3

第一章本网站设计规划 ······················· 3 1 .1 本网站建设的方向和目的： ··················· 3

第二章网站设计的前期准备 ····················· 5

2.1 软件准备和ISS 5.0的安装与设置 ················ 5

第三章本站的制作过程 ······················· 9

3.1 首页的制作过程 ························ 9

3.1.1静态页面的制作 ······················· 9

3.1.2动态页面的制作 ······················· 13

3.2 链接页面的制作 ························ 15

3.2.1校园资讯的制作 ······················· 15

第四章本站数据库的设计过程 ···················· 17

4.1 数据库设计 ·························· 17

4.2 网站数据安全 ························ 19

第五章网站的测试与上传 ······················ 20

5.1 网站的测试 ·························· 20

5.2 网站的上传 ·························· 21 附录 ······························ 26 参考文献 ····························· 27 Personal website design ······················ 29

- 2 - 计算机科学与技术专业

引言

网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来

说，建设好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场，开展24小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保持联系，进一步面向本地市场。

对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更

加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。在我的这个个人网站的制作过程中，我选择了我比较熟悉的大学生活中的许多内容做为我的网站的重要组成部分，这样相对相对于其他包括种类齐全的网站，我就有了一定的材料基础。这是我这个网站选择大学生主题的原因之一。

其次，做为在校大学生，我知道大学生现在对什么事物，内容，活动等等感

兴趣，所以，我做起来的时候相对来说是比较随手的，我不用像其他的网站那样去刻意的收集信息，资料，我只要在校园里稍微留意，我就会捕捉到大学生的兴趣点。所以，在整个网站的设计过程中，我广泛的听取同学的意见和建议，不断的改进和提高我的网站的内容和质量，这些都取得了比较好的效果。

在整个网站的设计过程中，我根据自己以往的设计经验和自己找来的资料，

又经过老师的指点，经过了近一个月的努力，几经易稿，最终做成了我的这个个人主页。

第一章本网站设计规划

1 .1 本网站建设的方向和目的：

1.1.1网站建设目的：

网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题，写出详尽的建站计划，

计算机科学与技术专业 - 3 -

可以说这是网站建设的根源和核心所在。这里就以我做的这个学生网站为实例给大家简述这个问题，如我设计的个人主页：http://www.*****.com 。作为一个学生网站，我的服务群体及访问者都定位在在校学生，为学生服务就是我的这个网站的目的和方向。从整个页面上可以看出，我的这个整个网站涉及校园新闻、考研、男生女生等等都是关于我们在校学生的。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样：企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所；由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。

1.1.2 本站明确的目的：

不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了和大学生的生活和学习相关联的主题。

本网站预计的用户群体：对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览者，也就是确定自己的用户群体。在已经确定了建设目的的前提下，应根据建站方向所会导致出现的不同用户群体的需求来规划设计整个网站。我的这个网站就确定了以大学生为用户群体。

本网站的结构和风格：网站的风格反映了一个网站的特色，它具有很大的代表性。出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。那么什么是网站的结构和风格呢？网站的结构是连接网站内容之间的支架。网站的结构是网站的核心和骨架，如果没有网站结构，网站将会变得一团糟。现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。

- 4 - 计算机科学与技术专业

如图所示，我的这个网站的结构主要由学生考研、英语特区、个性女生、网络学院、校园文学、校园资讯、动漫天下等几大部分组成。这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。

第二章网站设计的前期准备

2.1 软件准备和ISS 5.0的安装与设置

2.1.1 软件准备

在网页的设计过程中，因人而宜，每个人使用的软件也许不同，如比较有名的网站设计软件有Macromedia公司出品的网页设计“三剑客”、有微软的Frontpage 、还有国产的“东方网页王”等等。在这里，我们主要说的是Macromedia公司出品的“三剑客”。

这“三剑客”包括Dreamweaver MX、Fireworks MX和Flash MX，其中，Dreamweaver MX是网页编辑软件，Fireworks MX是图形/图像处理软件，Flash MX是矢量动画编辑软件。当然，到今天为止，Macromedia公司出品的这个“三剑客”都已经是2004版，估计2005版也应该很快出来了。Macromedia公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，它们是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

Dreamweaver MX采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweaver MX自动完成。另外，还有一点值得说明的是，Dreamweaver MX可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。

计算机科学与技术专业 - 5 -

Fireworks MX的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。Fireworks MX的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks MX中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。

Flash MX是比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。Flash MX提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。由于Flash MX采用矢量图形格式来制作动画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。

在我设计我的个人网站的过程中，我选择了Dreamwear MX 2004和Flash MX 2004和 Photoshop三种软件。因为自己向对于其它的软件来说，这三个还算是比较熟悉的。

2.1.2 ISS 5.0的安装与设置

在因特网/企业网上的基于浏览的开发方案中，Microsoft 的IIS起到客户端与服务器端的连接作用。当访问者在浏览器中键入对你服务器上的网页进行访问的请求，这个请求通过网络路由到服务器端，然后服务器再将它交给IIS处理。IIS检索所请求的页，并根据请求的文件名对该网页进行相应的处理。如果该文件是以.asp为扩展名或者该文件是某种类型的请求文件，那么IIS将对该页面上的代码进行处理。

IIS 5.0是专为Windows 2000设计的WEB服务器软件。Windows 2000 Server在安装系统时，就以自动安装IIS 5.0；但Windows 2000 Professional不会自动安装它。下面就简单介绍一下在我设计过程中在Windows 2000 Professional 上安装IIS 5.0的过程。

步骤 1 首先，我选择“开始”—“设置”—“控制面板”，在“控制面板”中选择“添加或删除程序”后，弹出“添加/删除程序”对话框。

步骤 2 在左边4个可选择的导航栏中选择“添加/删除Windows组建”按扭，弹出一个新的对话框。

步骤 3 在显示的组建里面，选中“Internet信息服务（IIS）”组建的复选框，单击“下一步”按钮，就进入了IIS 5.0的安装过程，如图所示。 - 6 - 计算机科学与技术专业

步骤 4 等到安装完成以后，在“控制面板”里面选择“管理工具”，在打开的管理工具里面如果有“Internet 服务管理器”，说明IIS 5.0已经安装好。打开IE浏览器，然后在地址栏输入“127.0.0.1”（或者localhost），就可以看到所链节的界面。

也可以改变默认的站点位置和主页，修改步骤如下：

步骤 1 打开“Internet 服务器管理器”，弹出一个对话框如图2-5所示。

步骤 2 右键单击“默认Web站点”，在弹出的菜单里面选择“属性”项，

计算机科学与技术专业 - 7 -

打开一个新的对话框如图2-6所示。

步骤 3 在图3-6所示的“Web站点”中，可以设置站点的说明、IP地址和其他一些属性。选择“主目录”标签，显示如图2-7所示界面。

步骤 4 在“主目录”选项卡中，“本地路径”的默认设置是：“C:\Inetpub\wwwroot”,为了方便以后编辑和管理网站，将其路径设置如”D:\mysite”。如图2-7所示，读者也可以根据实际情况设置为其他路径。选择“文档”标签，打开如图2-8所示界面。

- 8 - 计算机科学与技术专业

步骤 5 可以添加一个默认文档作为主页。选择“添加”按钮，在弹出的对话框中输入文档名。为下一节的实例输入“index.asp”作为网页首页，然后单击左边的向上和向下箭头改变默认文档的次序。

以上介绍了IIS 5.0的安装和设置。

第三章本站的制作过程

3.1 首页的制作过程

3.1.1静态页面的制作

计算机科学与技术专业 - 9 -

这是我的这个个人网站的首页的一部分，在这个主页的上部，是有两个Flash图片做成的，如上图所示。接下来，我就简单演示一下这个主页的制作过程。首先，运行Dreamwear MX 2004

，选择“文件”—“新建”—“创建基本页”如图：

选择“标准、扩展、布局”里的“布局”，接着选择旁边的“布局表格”，然后在空白页面上按我事先的规划画出如下布局：

- 10 - 计算机科学与技术专业

接着，选择“布局”旁边的“绘制布局单元格”在刚刚绘制好的“布局表格”上绘制出单元格，

如果只看两幅图，似乎没什么区别，但实际这是后一幅图比前一幅多了“绘制布局单元格”，这一点是非常重要的。接下来，回到“常用”--“标准”，选择“表格”，在最上面的布局里插入一行一列单元格，比例设为100，如图：

计算机科学与技术专业 - 11 -

将光标放在插入的表格内，接着就是插入一幅Flash动画。选择“插入”—“媒体”—“Flash”，在弹出的文件中选取我自己事先做好的Flash动画的，调整Flash 动画的大小，既可以手动调整，也可以在下面的属性里添上我自己事先设置好的大小，我通常是手动输入的。这样，首页顶部的这个Flash 动画就添加成功了。接下来，我用同样的方法把这个动画下的另一个动画菜单添加上。添加后的效果入图：

因为只有在浏览器中，整个Flash动画才可以被看到，所以，我就按下F12，这样就可以在浏览器中看到刚刚我做好的主页中的一部分了。接下来，我们就来讲讲首页底部的页面的制作过程。

首先，我先把底面按和顶部一样都插入一个一行一列的，边框为0的表格，然后把光标放在表格里，设置背景图片，如图：

- 12 - 计算机科学与技术专业

在设置背景图片的时候，我把选择了我自己事先做好的一幅图，接下来，就在这个表格里输入如图的文字，包括：本站简介，本站业务...最后，我把属于我的版权信息也输入到了这个底步。这样，整个首页的静态页面就大体做好了。

3.1.2动态页面的制作

在整个网站中，动态页面占了这个主页的大部分，在这里，我就把我的这个个人主页的动态页面的制作大体的讲解一下。首先，我根据我的个人主页所要实现的功能我制作好了我的数据库（在第四章），接下来，我就把我设定系统的DSN（数据源名称）的方法来讲讲。首先，我明白，DSN是用来确定数据库所在的位置以及数据库的相关属性的。使用DSN的优点是，如果我要移动数据库档案的位置或是使用其他类型的数据库的时候，我只要重新设定DSN即可，不需要去修改原来使用的程序。下面，我就演示我在自己的电脑上配置DSN的过程：

1.启动控制面板，双击“管理工具”下的“数据源（ODBC）”，如图所示：

2.在打开的“数据源（ODBC）”对话框中选择“系统DSN”标签，然后单击“添加”按钮，如图：

计算机科学与技术专业 - 13 -

3.在弹出的“创建新数据源”对话框中，选择数据库的驱动程序为“Microsoft Access Driver（*.mdb）”，然后单击“完成”按钮，如图：

4.在出现的“ODBC Microsoft Access 安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：youthfly,单击“数据库”栏中的“选择”按钮选择我的这个网站根目录中我已经建好的数据库 youthfly.mdb，然后单击“确定”按钮，如图：

5.这时，我发现系统数据源名称中已经多了一个“yougthfly.mdb”，这就是我的网站要使用的数据库。单击“完成”按钮，这样，我就完成了数据源的创建过程。如图：

- 14 - 计算机科学与技术专业

6.接下来，我要在Dreamweaver MX 2004中把数据库的连接完成。运行Dreamweaver MX 2004，打开“应用程序”面板，然后选择“数据库”标签，如图：

单击“+”按钮，在弹出的快捷菜单中选择“数据源名称”。随即打开“数据源名称”对话框，在“连接名称”文本框中输入“yougthfly”如图：

单击“测试”，我就可以测试数据库是否正确连接了。单击“确定”，这样，我就完成了数据库的连接设置过程。完成了数据库连接的设置，接下来就是把首页的部分内容和数据库相连接了。（略）

3.2 链接页面的制作

3.2.1校园资讯的制作