构建个人网站教程：掌握网页设计技能的入门指南

如何掌握网站构建

从最基础的知识入手，最基础的就是HTML网页，直接将图片添加上去，然后设置边距、边框、按钮等，基本就完成了。最后，自己在各个浏览器中进行调试，调整参数即可！

如何进行网站设计

在网站设计的认知上，许多人似乎还停留在网站构建的水平上。认为只要熟练掌握了网站构建软件，就能做好网站设计……

在网站设计的认知上，许多人似乎还停留在网站构建的水平上。认为只要熟练掌握了网站构建软件，就能做好网站设计。

实际上，网站设计是一个感性与理性分析相结合的复杂过程，其方向取决于设计任务，其实现依赖于网站构建。正所谓“功夫在诗外”，网站设计中最重要的东西，并非软件的应用，而是在我们对网站设计的理解以及设计制作的能力上，在于我们自身的美感以及对页面的掌控上。

首先，我们要明确网站设计的任务。

一、设计任务

设计是一种审美活动，成功的设计作品往往具有艺术性。但艺术只是设计的手段，而非目的。设计的目的是要实现设计者的意图，而非创造美。

网站设计的任务，是指设计者要表达的主题和要实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类。

第一类是资讯类站点，如新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量信息，访问量较大。因此，需要注意页面的分割、结构的合理性、页面的优化、界面的亲和力等问题。

第二类是资讯与形象相结合的网站，如一些大型公司、国内高校等。这类网站在设计上要求较高，既要满足资讯类网站的要求，又要突出企业、单位的形象。然而，从现状来看，这类网站存在粗制滥造的问题。

第三类是形象类网站，如一些中小型公司或单位。这类网站一般规模较小，有的只有几页，需要实现的功能也较为简单，网站设计的主要任务是突出企业形象。这类网站对设计者的美术水平要求较高。

当然，这只是从整体上进行分析，具体情况还需具体分析。不同的站点需要区别对待。别忘了最重要的一点，那就是客户的需求，它也属于设计任务。

明确了设计任务后，接下来要考虑的就是如何完成这个任务了。

二、设计实现

设计的实现可以分为两个部分。第一部分是站点的规划及草图绘制，这一部分可以在纸上完成。第二部分是网站制作，这一过程在计算机上完成。

设计首页的第一步是设计版面布局。我们可以将网页看作传统的报纸杂志来编辑，其中包含文字、图像甚至动画，我们的任务是找到最适合的方式将图片和文字放置在页面的不同位置。除了配置不错的计算机外，软件也是必需的。不能简单地说一个软件的好坏，只要设计者使用起来觉得方便且得心应手，就可以称为好软件。当然，它应该能满足设计者的需求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、ImageReady，这些都是不错的软件。接下来，我们要通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver中完成。虽然在草图上，我们已确定了页面的大体轮廓，但灵感往往在制作过程中产生。设计作品一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作过程中，我们会遇到许多问题，其中最敏感的莫过于页面颜色。

三、色彩的运用

色彩是一种奇妙的东西，它美丽而丰富，能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。

我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其他色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际的意义，与不同的颜色搭配，它所表现出来的效果也不同。比如，绿色与金黄、淡白搭配，可以产生优雅、舒适的气氛。蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛。红色与黄色、金色的搭配能渲染喜庆的气氛。而金色与栗色的搭配则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应尽量使用网页安全色。

但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经验上，我们可先确定一种能表现主题的主体色，然后根据具体需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。

四、造型的组合

在网站设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是一个重要的元素。抛开图像还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素——点、线、面来进行处理。在一幅成功的作品中，需要点、线、面的共同组合与搭配来构造整个页面。

在网页制作领域，我们主要依靠视觉传达来展现主题。在视觉传达方面，造型占据着至关重要的地位。无论画面上呈现的是图像还是文字，所有元素都可以统一视为构成画面的基础元素：点、线、面，并对其进行处理。在一幅优秀的作品中，点、线、面的相互组合与搭配是构建整个页面的关键。

通常，我们可以运用多种组合技巧，如规律、比例、平衡、对称、连续、间隔、叠加、重复、交织、节奏、韵律、归纳、变异、特写、反射等，每种技巧都有其独特的特点。在设计过程中，应根据具体情况进行选择，以便更好地展现主题。

通过点、线、面的组合，可以凸显页面上的关键元素，突出设计主题，提升美感，使观者在欣赏美的过程中领悟设计主题，从而完成设计任务。

巧妙运用造型不仅能够带来强烈的视觉美感，还能有效突出企业形象，将网页上的各种元素有机地组织起来，甚至引导观者的视线。

五、设计原则

设计有其基本原则，无论采用何种手法对画面元素进行组合，都必须遵循五大原则：统一、连贯、分割、对比和和谐。

统一，指的是设计作品的整体性和一致性。设计作品的整体效果至关重要，在设计中应避免将各部分孤立分散，以免造成画面杂乱无章的效果。

连贯，指的是注意页面之间的相互关系。设计中应利用各部分在内容和表现形式上的内在联系和相互呼应，并注意整体页面设计风格的一致性，实现视觉和心理上的连贯，使页面设计各部分融洽无间，如同浑然一体。

分割，指的是将页面分成若干小块，小块之间在视觉上有所区别，使观者一目了然。在信息量较多的情况下，为使观者能够清晰观看，要注意对画面进行有效分割。分割不仅是表现形式的需要，也可以视为对页面内容的一种分类归纳。

对比，通过矛盾和冲突，使设计更具活力。对比手法众多，如多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等。在使用对比时，应谨慎行事，避免对比过强破坏美感，影响统一。

和谐，指的是整个页面符合美的法则，浑然一体。如果设计作品仅是色彩、形状、线条等的随意混合，那么作品将失去“生命感”，也无法实现视觉设计的传达功能。和谐不仅要关注结构形式，还要关注作品所形成的视觉效果是否与人的视觉感受形成沟通，产生心灵共鸣。这是设计成功与否的关键。

六、网页优化

在网页设计中，网页优化是一个至关重要的环节。其成功与否将影响页面的浏览速度和适应性，进而影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化尤为重要。使用CSS样式表指定文字样式是必要的，通常将字体指定为宋体，大小为12px，颜色根据背景色而定，原则上以清晰易读且与整体页面搭配和谐为准。在白色背景上，一般使用黑色，这样不易产生视觉疲劳，保证浏览者能够长时间浏览网页。

图片是网页中的重要元素。在保证浏览质量的前提下，将图片尺寸降至最低，可以大幅提高网页下载速度。利用Photoshop6或Fireworks4将图片切割成小块，分别进行优化。输出格式可为gif或jpeg，具体取决于实际情况。一般将颜色变化复杂的小块优化为jpeg，而将只有单纯色块的卡通画式小块优化为gif，这是由这两种格式的特点决定的。

表格（table）是页面中的重要元素，是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格边框设为0，以此定位页面元素，或确定各元素相对位置。我们知道，浏览器在读取网页HTML原代码时，是读完整个table才将其显示出来。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等待多时无结果，按“停止”按钮却一下显示出页面，就是这个原因。因此，在设计页面表格时，应尽量避免将所有元素嵌套在一个表格中，且表格嵌套层次尽量少。在使用Dreamweaver制作网页时，会自动在每一个td内添加一个空字符“”。如果单元格内没有填充其他元素，这个空字符会保留。在指定td的宽度或高度后，可以在源代码中将其删除。

网页的适应性至关重要，在不同系统、分辨率和浏览器上，我们将看到不同的效果。因此，在设计时，要全面考虑。一般我们在800600分辨率下制作网页，最佳浏览效果也是在800600分辨率下。在其他情况下，只要保证基本一致，不出现较大问题即可。

总之，以上内容旨在为从事“网页设计”的人提供帮助，希望他们在设计网页时能够从整体出发，不负“设计”二字。以下是建立自己网站的较好步骤：

必须注意的是，建立自己的网站是一项庞大的工程，一般比较繁琐。因此，应当按照一定的步骤逐步进行。

我认为建站可以按照以下步骤进行：

1. 首先在本地创建一个文件夹，作为网站存储的地方。文件夹名称最好为“My Sites”。

2. 在网站文件夹内创建一些文件夹，如“images”等（存储图片、文件等），并根据网页内容，再创建几个文件夹。（也可以在每个内容文件夹内创建存储图片、文件的文件夹）

1、在网站文件夹中创建若干子文件夹，诸如“images”等（用于存放图片、文件等），并依据网页内容，再创建数个文件夹。（亦可在每个内容文件夹内分别设立存储图片、文件的文件夹）

2、启动您的网页编辑器（如FP、Dreamwear等），创建新网页，命名为“index”（主页），重复上述步骤，在网站文件夹中创建“search”（搜索）、“map”（网站地图）、“index02”（网站简介等）。

3、按照上述步骤，在网站分类文件夹中创建众多网页（随后还需将内容输入网页）

4、已经完成这些，我们该准备内容了。在硬盘上再建立一个名为“File”的文件夹，将准备好的文档、图片、程式、文件和网页特效等放入其中。（可添加一些动态网页）

5、逐步将这些文件逐一放入网页中（需掌握技巧）

6、网站内容丰富后，就基本完成了。这时应申请一个域名（免费空间、付费均可）。并将自己的网站提交给搜索引擎，同时在各种留言板上进行宣传。

7、将网站上传至空间，删除准备文件，任务完成！

以下为FP建站的其他步骤：

1、在FP中选择新建站点。

2、在【导航】中设置网页名称及标题。

3、准备好文档、图片、程式、文件和网页特效等，将它们充实到网站中。

4、申请一个域名（免费空间、付费均可）。并将自己的网站提交给搜索引擎，同时在各种留言板上进行宣传。

5、将网站上传至空间，删除准备文件，任务完成。

若使用Dreamwear建站，那就更加高级了！Dreamwear功能强大，安装了它的朋友们可以研究研究。

在网站设计中，仅使用HTML格式的网页通常被称为“静态网页”，早期的网站大多由静态网页制作。静态网页的网址形式通常为：www.example.com/eg/eg.htm，即以.htm、.html、.shtml、.xml等为后缀。在HTML格式的网页上，也可出现各种动态效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”仅是视觉上的，与下面将要介绍的动态网页是不同的概念。

在《网络营销基础与实践》第二版第3章“网络营销导向的企业网站建设”中，提出了采用静态网页对搜索引擎的影响，书中对静态网页本身的介绍较少，尤其对静态网页的特点没有做专门的介绍。网络营销教学网站(www.wm23.com)将静态网页的特点简要归纳如下：

（1）静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；

（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；

（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；

（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；

（5）静态网页的交互性较差，在功能方面有较大的限制。

网页制作软件的选择

选择一个适合自己的网页编辑工具

了解了网页的类型及相关技术之后，下一步，就是要选择一个适合自己的网页编辑工具。

Frontpage

Frontpage是 Microsoft出品的，可能是最简单、最容易，却又功能强大的网页编辑工具。采用典型的 Word界面设计，只要你懂得使用 Word，就差不多等于已经会使用 Frontpage。就算你不懂 Word也没关系，“所见即所得”的操作方式会让你很快上手，而且你无需学习 HTML语法。

但 Frontpage的也有其不足之处：首先是浏览器兼容性不好，做出来的网页，用 Netscape往往不能正常显示；其次，生成的垃圾代码多，也会自动修改代码，导致在某些情况下极为不便；再次，对DHTML的支持不好。但不管怎么说，Frontpage的确是最好的入门级网页编辑工具。

常见的版本为 Frontpage98和 Frontpage2000。

Dreamweaver

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

Dreamweaver对于 DHTML的支持特别好，可以轻松地制作出许多炫目的页面特效。插件式的程序设计使得其功能可以无限扩展。Dreamweaver与 Flash、Firework并称为 Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。而最新推出的 Dreamweaver UltraDev更支持 Asp，Jsp。因此，说Dreamweaver是高级网页制作的首选并不为过。

常见的版本为 Dreamweaver4.0和 Dreamweaver UltraDev 1.0。

Flash

Flash也是 Macromedia公司的产品，Flash是交互式矢量图和 Web动画的标准。网页设计者使用 Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。相信凡是见过 Flash技术的人，没有一个不想掌握它的。它不仅易学、易用，而且可以制作出有很多动画的网站，并且声色结合，是一种很有前途的网页制作技术。

Firework

Firework也是 Macromedia公司的产品，是真正的网页作图软件。Fireworks与 Dreamweaver结合很紧密，只要将 Dreamweaver的默认图像编辑器设为 Fireworks，那么在 Fireworks里修改的文件将立即在 Dreamweaver里更新。另一个功能是可以在同一文本框里改变单个字的颜色。当然，Fireworks可以引用所有的 Photoshop的滤镜，并且可以直接将 PSD格式图片导入。它是用来画图的，它相当于结合了Photoshop(点阵图处理)以及CorelDRAW(绘制向量图)的功能。网页上很流行的阴影、立体按钮...等等的效果，也只需用鼠标点一下，不必再靠什么KPT之类的外挂滤镜。而且 Fireworks很完整地支持网页16进制的色彩模式，提供安全色盘的使用和转换，要切割图形、做影像对应(Image Map)、背景透明，要图又小又漂亮，在Fireworks中做起来都非常方便，修改图形也是很容易的。不需要再同时打开Photoshop和CorelDRAW...等等各类软件，切换来切换去的了。

烟火也是 Macromedia公司的产品，是真正的网页绘图软件。烟火与 Dreamweaver紧密结合，只要将 Dreamweaver的默认图像编辑器设置为烟火，那么在烟火里修改的文件将立即在 Dreamweaver里更新。另一个功能是可以在同一文本框里改变单个字的颜色。当然，烟火可以引用所有的 Photoshop的滤镜，并且可以直接将 PSD格式图片导入。它是用来绘图用的，它相当于结合了Photoshop(点阵图处理)以及CorelDRAW(绘制向量图)的功能。网页上很流行的阴影、立体按钮...等等的效果，也只需用鼠标一点，不必再依赖什么KPT之类的外挂滤镜。而且烟火很完整地支持网页16进制的色彩模式，提供安全色盘的使用和转换，要切割图形、做影像对应(Image Map)、背景透明，要图又小又漂亮，在烟火中做起来都非常方便，修改图形也是很容易的。不需要再同时打开Photoshop和CorelDRAW...等等各类软件，切换来切换去的了。

Dreamweaver、Flash、烟火称为网页制作三剑客，将三个软件配合起来使用，会制作出非常精美的网页

gifanimator

Ulead GIF Animator 4.0是目前最快和最易使用的 GIF动画工具，它在一个软件包中提供了顶级的功能，用于动画编排、编辑、特效和优化。 GIF Animator差不多支持每个主要的文件格式，包括视频文件，并允许输出为 Windows AVI、QuickTime电影、Autodesk动画或图像序列。用户可以生成适当的 HTML代码，以便将动画嵌入到网页中，并且可以将动画打包成独立的 EXE文件，以便通过电子邮件发布和在任何地方来查看。

u制作主页

制作主页无非是添加文字、添加图片、添加链接，跟用word没什么区别，经过简单的学习后，你就会制作主页了！但是，要作出高水平的主页那要学的东西就太多了，不过总结起来就是html，图形制作，动画制作，页面特效制作和后台程序制作几个部分。

u申请的主页空间，把你制作的主页传上去

我们制作的页面放在我们自己的计算机上，别人是不能看见的。为了让别人看见我们制作的主页，我们必须将它们放到一台和internet一直连接的计算机（服务器）上。你可以到提供空间服务的站点申请主页空间。有空间以后就可以利用相应的FTP（文件传输协议）工具软件将我们制作的主页传上去。这样，就可以让大家来分享我的精彩页面了。

常见的FTP工具软件有cuteFTP、leapFTP等，其功能和使用方法都比较类似，具体使用方法可参见本站相应文章。

可能你开始的主页只是非常简单，但是这是你的第一步，也是良好的开端，然后再一步步学习：如何把网页制作得更漂亮？如何制作动画？对于新手，千万不要一下子就想：我看到某某某网页这么漂亮，它是怎样做出来的？我很想马上做出来，于是马上就去研究复杂的网页，这样你会发现网页制作很难，学两下就放弃了，这样永远学不会制作主页。想当初，我对于我的网页能产生链接也高兴了半天，于是产生了更大的兴趣。记住：一步一步来，不要一下子想成为高手，否则很难成为高手。

如何自学网页设计

先学一学HTML，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计三天就够了；然后用两天时间学CSS，方法同上；进而再花些时间了解一下JavaScript。

然后就可以用记事本尝试写几个网页，记住这时千万不要用那些可视化工具，比如FrontPage、Dreamweaver（那些以后再学）。

有一个提高自己“写网页”的捷径，就是上各大网站，把网页保存下来（什么？你说你不会保存网页？就是“文件→另存为”），然后打开保存下来的网页，点击右键→查看源文件，看看人家的网页是怎么写的，然后模仿他们的写法，不断规范自己的代码。嘿嘿，这个方法不错吧。先好好模仿一下吧。

接下来该学一下烟火了。建议一开始就到网上找些实例教程，这些实例教程一般都介绍得很详细，跟着它一步一步做下来，每学会一个实例就掌握了几项操作，而且也有了自己的作品，很有成就感的，长期积累下来对自己的提高很有帮助。学烟火主要是学图片处理，比如加一些效果，还有很重要的就是切图，这对于初学者是很重要的。

这时还可以结合Dreamweaver进行学习，你就可以体会到Dreamweaver和烟火的无缝集成了。利用这些工具多做几个网页，你就可以达到一定水平了。

要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript基础打得好的话，学到Flash中ActionScript时，你会有一种似曾相识的感觉，因为这两种语法几乎是一模一样的。

到这时，相信你就可以真正领会到“网页三剑客”的威力了。

在实践中不断提高

要是每天能拿出两个小时来学习，完成以上这些学习估计只要20天就差不多了。要是天赋高的话（比如说像我这样的，呵呵)，那需要的时间就更少了。接下来该实习了，找个地方锻炼一下自己，比如可以去一些公司干干兼职，或是给自己的单位设计一下主页等。

最好是能进入一个正规的开发团队，你就会学会如何以团队合作的方式开发网站，特别是怎样和程序组合作，把页面与后台程序数据库配合起来。可能你会担心自己是新手，人家会嫌弃你，没关系，只要努力去找，总会有机会的。

到此，你就基本可以称作是一个“准Web Designer”了，不过要从根本上提高自己，最好去学学美术，这是当一个网页设计师的基本功。