个人网页设计论文

摘要

随着现代计算机科学的发展,网络已经越来越普及,如今网络已经成为每个人生活的一部分,同时网络也提供了一种很好的信息交换平台,而个人主页是一个可以在网络上展示个人信息的方便手段。本文介绍了如何开发个人网站。首先介绍开发工具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即可。