个人网站设计论文.docx

个人网站设计论文.docx

《个人网站设计论文.docx》由会员分享，可在线阅读，更多相关《个人网站设计论文.docx（11页珍藏版）》请在冰豆网上搜索。

个人网站设计论文

摘要

本论文主要是对个人网站的建立进行研究和探讨。

作品的主要技术指标包括：

1、制作出一个具有静态技术的“个人网站”；2、在制作的过程中，加强和深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法和理论。

本设计的主要内容包括：

1、个人网站的设计思想，整体规划及相关基础知识；2、个人网站的前台设计，包括汇编HTML语言程序及效果图；3、个人网站的调试。

网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

网站主题就是所要包含的主要内容，一个网站必须要有一个明确的主题。

特别是对于个人网站，不可能像单独的网页那样做得内容少而单一。

所以必须要找准一些自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。

关键词：

技术指标　基本设计内容　网站规划　网站主题

第一章预备知识

1.1什么是Internet

Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，它是采用开放系统协议的计算机通讯网络。

然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。

1.2Internet有那些功能

Web页浏览：

这是目前利用最广泛、最直接的互联网服务，通过浏览WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息……几乎想找到什么样的信息，就有什么信息。

正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家万户。

1.3WWW的简介

WWW的全称为WorldWideWeb，含义是“环球网”，又称“万维网”、3W、Web。

WWW是一个基于超文本（Hypertext）方式的信息检索服务工具。

我们上网浏览到的网页就是这样的超文本，也就是HTML（HypertextMark-upLanguage,超文本标记语言）文件，这些网页檔被放置到WWW服务器上，并且都有一定的地址。

当我们想浏览某个网站时，首先要在计算机上安装浏览器，如Internet Explorer或Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。

在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间动画和声音等信息。

通跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功劳。

1.4网页基本构成元素

要学会制作网页，首先需要了解网页都是由什么元素构成的。

文字：

文本是构成网页的基本元素。

一个最简单的网页可以只有几行文本。

图片：

正是有个各种美丽的图片，网页才变得多姿多彩。

动画：

如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。

超连接：

如上所述，超连接几乎是必不可少的。

一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。

其它元素：

还可以在网页中添加声音、视频等元素。

1.5软件的安装与启动

要使用网站设计软件，自然先要将这些软件安装到自己的计算机中。

安装完毕，还需要如何启动，如何创建快捷方式。

下面就让我们来详细地看一看具体的操作步骤。

一、软件的安装

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

Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。

Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

二、软件启动

软件安装完毕后，我们就可以使用它了。

安装程序已经自动在“开始”菜单中加入了快捷方式。

单击“开始”菜单，将鼠标指针依次指向“程序”|“Macromedia”|“MacromediaMX”,并在上面单击鼠标左键。

三、创建快捷方式

使用“开始”菜单启动程序的过程比较烦琐。

可以在Windows桌面或快速启动栏上创建快捷方式，这样可以快速的启动程序。

1.6制作网页前的准备

计算机必备：

计算机速度够快，最好能够上网。

操作系统：

Windows98/NT/Me/2000/XP.其它软件：

看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。

1.7Dreamweaver8.0的操作环境

我们将工作接口分成了“标题栏”、“菜单栏”、“快捷工具栏”、“属性面板”、“浮动控制面板”5个部分来分别介绍。

一、标题栏

Dreamweaver8的“标题栏”中将显示文字“MacromediaDreamweaver8”如果打开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及网页名称，右边有三个钮，分别对应Dreamweaver8的最大化最小化和关闭的操作。

二、菜单栏

“标题栏”下面就是“菜单栏”，栏中提供了“檔”、“编辑”、“查看”、“插入”、“修改”、“文本”、“站点”、“窗口”、“帮助”10项菜单。

三、快捷工具栏

“快捷工具栏”指的是“菜单栏”下边的3排按钮，选择菜单“查看/工具栏”，勾选里面的“插入”、“文檔”和“标准”3项，完整的快捷工具栏就显现出来了。

四、属性面板

在网页编辑窗口的下面还有一个面板，它是有名的“属性面板”，它在这个软件中起到举足轻重的作用。

属性面板顾名思义，就是显示，调整属性的面板，根据鼠标所选中对象的不同，“属性面板”在接口上也会有所差异，用户可以分别对不同的对象进行调整。

第二章网站制作实战

设计图如下：

2.1站点

2.1.1创建站点

要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“myweb”。

填好后，单击“下一步”，进入下一个步骤。

由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。

单击“下一步”，进入下一个步骤。

在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。

底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点檔的本地副本。

单击该文本框后面的文件夹图示，之后单击“下一步“，进入下一个步骤。

这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。

而后“下一步”再“完成”，即可。

2.1.2创建站点内容

站点创建完成后，就可以创建Web页来填充站点了。

在“右侧浮动面板组”中选择“檔/檔”面板，在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm（或index.html）,它就是未来的首页。

2.2首页

2.2.1设置首页布局和页面属性

一、设置首页布局

每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中显示的第一个页面。

它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。

当然，后缀名为html也是正确的。

具体设置方法是：

右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。

操作步骤：

1、在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。

2、将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。

（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。

“myweb”表格布局如下图：

二、设置首页的页面属性

首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。

右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。

在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目

“myweb”首页设置的属性如下图所示：

2.2.3查看和编辑头内容

一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。

头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。

2.2.4插入图像

图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。

首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。

左起第5个即为“图像：

图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。

随即弹出“选择图像源文件”对话框。

从计算机磁盘中选择想要插入的图像文件，下面的“相对于”下拉表框中，可选择文件URL地址的类型，插入logo图像，如图所示:

最后单击“确定”按钮，即可完成插入图像的操作。

2.2.5插入多媒体

在Dreamweaver8中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频等媒体元素，并且还可以在Dreamweaver自身内插入MacromediaFlashMX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。

在Dreamweaver8文文件中，可以插入媒体文件包FlashShockwave影片、QuickTime、AVIjava、appletActiveX控件以及各种格式的音频檔。

要在浏览器中播放放Flash动画，必须在浏览器中集成“Flash播放器（FlashPlayer）”。

操场作步骤：

步骤1 、将游标停留在要插入Flash的位置，然后单击菜单栏下面“插入快捷栏”的下拉列表，选择其中的“常用”分类，左起第6个即为“媒体”按钮，单击它右侧的下拉列表，选择第1项Flash图示。

步骤2、在弹出的对话框中选择扩展名为swf的Flash檔，即可将其插入到Dreamweaver的“网页编辑窗口”中，可以看到，在这个窗口中Flash文件的大小。

在这里我的主页入的一个动画，如图所示：

2.2.6插入文本

文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。

插入文本的两种方式：

一种是在网页编辑窗口中直接用键盘敲入文本。

另一种是复制文本的方式。

直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：

打开文本编辑软件（如MicrosoftWord），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。

这在我的“闲情逸致”中用到很多。

2.3创建其它网页

还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。

“放松