摘要

随着现代计算机科学的发展,网络已经越来越普及,如今网络已经成为每个人生活的一部分,同时网络也提供了一种很好的信息交换平台,而个人主页是一个可以在网络上展示个人信息的方便手段。本文介绍了如何开发个人网站。首先介绍开发工具ASP,HTML等技术,然后详细讲解了个人主页的开发。

关键词：个人主页,HTML技术,ASP技术

With the development of modern computer science, networking has

become increasingly popular, and now the network has become a part of life

for everyone, while the network also provides an excellent platform for

information exchange, while the personal home page is displayed on the

network can be an individual a convenient means of information. This

article describes how to develop personal website. Development tools,

first introduced ASP, HTML and other technologies, and then explain in

detail the development of personal home page.

第一章 概述

随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以刚好的展示自己，而且可以提高自己在计算机应用方面的能力。故本次作业，我选择制作个人网站。

个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。

在网页制作中，我借鉴了韩国个人网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用了photoshop和fireworks强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用Flash进行片头动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由Dreamwave完成的

第二章Dreamweaver简介

Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与 Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。

Dreamweaver对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Fireworks 并称为 Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说Dreamweaver是高级网页制作的首选并不为过。

Dreamweaver最新的版本为:Dreamweaver MX。这次的教程就以最新的Dreamweaver MX为基准进行讲解

第三章 网页的结构图

第四章 制作前的准备工作

在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。

4.1定义的方法

方法一：在站点窗口的下拉菜单选择最后一项编辑站点，如下图。

此时会弹出一个新的对话框，点击“新建”按钮就可以定义一个新网站，如果日后需要对旧有网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击“编辑”按钮便可。

方法二：选择菜单“站点”－－“新建站点”选项。（如图所示）

4.2基本设置

在接着看到的对话框中，要进行以下简单的设置：

① 网站名称：为你的网站起一个名字，这个名字只起着识别的作用，与网站发布后真实的名字无关，例如这里的名字是：“我的网站”，而实际上我的网站叫“电脑课堂”；

如果不需要什么特殊的服务器技术，就选“否”这项。

②本地根目录：设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；

③可以任意选择你想要将文件存储在服务器上的位置，方法同上一步本地根目录的建立相同。

④选择默认的状态即可。

完成后，回到站点窗口，就可以看到如下类似的画面：

可以看到，“我的网站”的名称已经出现在站点窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。

站点定义完毕之后，就可以正式制作属于你自己的网页了。

个人网页界面

第五章 建立超链接

超级链接（Link），简称链接，是页面与页面之间一个单向的关联关系。通过点击链接，我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。

5.1文字链接

在页面中选取需要建立链接的文字，如下图：

文字的链接

在属性面板的Link一项，填写链接地址，当浏览者点击该链接的时候，浏览器就回跳转到该页面，例如这里填写的是：

如果你希望该页面是在一个新窗口打开，可以在Target中选择“_balnk”。

如果要链接到网站内的文件，可以点击 ：

上图中，我们是将文字链接到“Berna Biotech AG Welcome!.htm”这个文件，特别注意的是最底的“相对于”的选项，意思是选择相对路径的形式，默认是“文档”，也可以选择“站点根目录”，区别在于，“文档”是指相对路径是从本页开始计算，而“站点根目录”是从根目录开始计算（即“/”），如下图：

另外，如果使用“站点根目录”的模式做成的链接，在本地硬盘直接打开页面浏览通常会出错，但在Dreamweaver的预浏模式和上传上服务器后，都不会有问题。

5.2图片链接

图片链接的建立过程与文字链接相似，就不多作介绍了。但特别要提出的是，某些图片，在加上链接后，会出现一个蓝色的边框，要将边框去掉，将Border设为0即可。

5.3热区链接

前面介绍的图片链接，一张图只能对应一个链接，能不能一张图对应多个链接呢？答案是可以的，选取一张图片后，可以在属性面板看到“地图”选项：

其中： 创建矩形热区， 创建原形热区， 创建多边形热区。例如我们现在点 ，光标变成一个十字，此时可以在图片上画出一个蓝色矩形的热区：

此时对应的属性面板为：

同样地，在“链接”输入链接地址（“#”表示一个空链接），而“目标”则为当鼠标指向热区时所显示的文字，与图片的“目标”相似。我们可以通过 选择不同的热区，并通过调整热区四个角的控制点调整热度的大小。通过热区，我们可以在一个杯子上做一个链接，同时又在另一个杆子上做一个链接，分别链接到不同的页面。

关于链接的提示

1、如果要链接到一个E-mail地址，则在“链接”处填写：“mailto:地址”，例如mailto:*****************，那么点击该链接的时候，就回打开默认的E-mail程序，例如Outlook，发送E-mail到*****************这个地址。

2、如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会弹出对话框，询问是将文件保存到硬盘的什么地方，这就实现了文件下载的功能

第六章 总结

结束语

在做毕业设计的近几个月时间是我学生生涯中最有价值的一段时光。这里有治学严谨而不失亲切的老师，有互相帮助的同学，更有向上、融洽的学习生活氛围。借此论文之际，我想向所有人表示我的谢意。

首先感谢老师。本论文是在老师的指导下修改完成的。在此，要对他们的细心帮助和指导表示由衷的感谢。在这段时间里，我从他们身上不仅学到了许多的专业知识，更感受到了他们工作中的兢兢业业，生活中的平易近人。此外，他们严谨的治学态度和忘我的工作精神值得我去学习。

非常感谢我的同学，毕业设计中，他的指导给予了我极大的帮助，使我对整个毕业设计的思路有了总体的把握，并耐心的帮我解决了许多实际问题，使我有了很大收获。

感谢我的朋友们，过程中提出了许多建设性意见，并给我解决了一些专业性问题。

还要感谢给与我帮助的我们项目小组的其他成员，他们在我的毕业设计过程中经常给我提出许多关键性的问题，使我受益匪浅。

感谢四年来传授我知识的老师们，更要感谢我的家人对我学业上的支持和鼓励，感谢所有关心帮助过我的人。同时感谢大学，感谢软件学院。

总之，在以后的学习生活中我将以加倍的努力作为对给予我帮助的学校、老师及同学们的回报。

。

第七章 参考文献

参考文献

1.（计数器、聊天室、留言簿、投票箱

2.(gif动画)

3.（网页特效）

4.

5.

6.（论文）

7.（个人空间、域名）

8./个人空间：NEASE。NET

9.（北极星网站域名：开通时间：2003/3/5---2003/6/5）

10.上传软件：cuteftp2.8 cuteftp4.0

leapftp 网络传神V1.4