网站免费-个人网站设计论文

免费-个人网站设计论文

个人网站设 计

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

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

计算机科学与技术专业 - 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.*****.co m 。作为一个学生网

站我的服务群体及访问者都定位在在校学生为学生服务就是我的这个网站的目的和方向。从整个页面上可以看出我的这个整个网站涉及校园新闻、考研、男生女生等等都是关于我们在校学生的。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样企业网站的宗旨就是对外宣传企业形象发布企业最新的企业产品其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务这就是企业网站的建设方向个人网站的宗旨就是宣传自己提供一个自身和外界交流的场所 由此可见 网站的设计方向是依据网站的客户、服务群体等多方面来确定的。

1 .1 .2 本站明确的目的

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

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

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

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

网站设计规划

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

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

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

2.1 .1 软件准备

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

这“三剑客”包括 Dreamweaver MX、 Fireworks MX 和Flash MX其中DreamweaverMX是网页编辑软件 Fireworks MX是图形/图像处理软件 FlashMX是矢量动画编辑软件。当然到今天为止 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采用矢量图形格式来制作动画 因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点 从而是浏览者能够快速的下载效果非凡的动画。

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

2.1 .2 ISS 5.0 的安装与设置

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

I IS 5.0是专为Windows2000设计的WEB服务器软件。 Windows2000Server在安装系统时就以自动安装 I IS 5.0 但Windows 2000

Professional 不会自动安装它。下面就简单介绍一下在我设计过程中在

Windows 2000 Professional上安装I IS 5.0 的过程。

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

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

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

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

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

“C:\Inetpu b\wwwroot ” ,为了方便以后编辑和管理网站将其路径设置如”

D:\mysite ” 。如图2-7所示读者也可以根据实际情况设置为其他路径。选择“文档”标签打开如图 2-8所示界面。

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

对话框中输入文档名。为下一节的实例输入“ index.asp ”作为网页首页然后单击左边的向上和向下箭头改变默认文档的次序。

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

第三章本站的制作过程

3.1 首页的制作过程

3.1 .1 静态页面的制作

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