构建个人网站教程：掌握网页设计学习路径全解析

如何掌握网站制作

从最基础的内容入手，最直接的方法是学习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公司的出品，是一款真正的网页绘图软件。Fireworks与Dreamweaver之间有着紧密的配合，只需将Dreamweaver的默认图像编辑器设置为Fireworks，那么在Fireworks中修改的文件将立即在Dreamweaver中更新。另一个特色功能是能够在同一文本框中改变单个文字的颜色。当然，Fireworks可以调用所有Photoshop的滤镜，并且可以直接导入PSD格式的图片。它主要用于绘图，相当于将Photoshop（点阵图处理）和CorelDRAW（向量图绘制）的功能结合在一起。网页上流行的阴影、立体按钮等效果，只需轻轻一点鼠标，无需再依赖KPT等外挂滤镜。而且Fireworks完全支持网页16进制色彩模式，提供安全色盘的使用和转换，要切割图形、制作影像映射（Image Map）、背景透明，要图又小又美观，在Fireworks中操作都非常便捷，修改图形也很容易。无需再同时打开Photoshop和CorelDRAW等众多软件，频繁切换。

Dreamweaver、Flash、Fireworks并称为网页制作三剑客，将这三个软件结合使用，可以制作出非常精美的网页。

gif动画制作器

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

制作网站主页

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

申请网站空间，将制作的主页上传到服务器

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

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

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

HTML网页制作教程

首语：刚接触前端的小伙伴可能会不理解，HTML是什么？HTML其实是前端的基础，下面会为大家讲解什么是前端，以及如何才能把前端学好。

Web前端的学习误区

网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境（IDE）想必大多是Dreamweaver，这种所见即所得的“神器”IDE为我们制作网页带来了极大的方便。

入门快、见效快让我们在不知不觉中已经深深爱上了网页制作。此时，很多人会陷入一个误区，那就是既然借助这么强大的IDE，通过鼠标点击菜单就可以快速方便地制作网页。

那么我们为什么还要去学习HTML、CSS、JavaScript、jQuery等这些苦逼的代码呢？这不是舍简求繁吗？

但是随着学习的深入，就会发现我们步入了一种困境——过分的依赖IDE导致我们不清楚其实现的本质，知其然但不知其所以然。

因此在页面效果出现问题时，我们便束手无策，更不用提如何进行页面优化以及完成一些更高级的应用了。其原因是显而易见的——聪明的IDE成全了我们的惰性，使我们忽略了华丽的网页背后最本质的内容——code。

正确的方向胜过无谓的努力

有两只蚂蚁想翻越一段墙，寻找墙那头的食物。一只蚂蚁来到墙脚就毫不犹豫地向上爬去，可是每当它爬到大半时，就会由于劳累、疲倦而跌落下来。虽然它不气馁，一次次跌落下来，又迅速地调整一下自己，重新开始向上爬去。

另一只蚂蚁观察了一下，决定绕过墙去。很快，这只蚂蚁绕过墙来到食物前，开始享受起来；而另一只蚂蚁还在不停地跌落下去又重新开始。

很多时候，成功除了勇气、坚持不懈外，更需要方向。也许有了一个好的方向，成功来得比想象的更快。如果在错误的路上奔跑，再怎么努力也是白搭。学习Web前端也是如此，首先应该选择一个正确的学习路线。

那么我们应该怎么学习前端开发这门技术呢？现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了，并没有什么用！如果你真的想学习网页制作这门技术，你可以来这个群，前面是四九四，中间是灵六思，最后是就三思！在这里有最新的HTML课程免费学习，也有很多人指导你进步，不需要你付出什么，只要你是真心想学习的，随便看看的就不要加了，加了也是浪费大家的时间。

那么我们该如何掌握前端开发这项技能呢？目前众多朋友倾向于在网上搜寻视频资料来学习网页设计，但仅凭观看视频是无法真正掌握网页设计的，缺乏导师的指导，并且许多视频内容已经过时，毫无实用价值！若你真心想学习网页设计，可以加入这个群，前缀是四九四，中间是灵六思，最后是就三思！在此，你可以免费学习最新的HTML课程，同时有许多人可以指导你进步，无需你付出任何代价，只要你是真心想学习的，随便看看的请不要加入，以免浪费大家的时间。

前端开发的发展前景如何？

行业发展旺盛

从我们日常生活的各个方面来看，互联网行业无疑是当前最具发展潜力的行业之一。潭州教育致力于革新中国IT实践教学模式，引领中国IT教学技术及人才培养标准。让有志于学习的人随时随地都能进行学习！

人才需求旺盛

互联网对人们生活的影响日益加深，各行各业对人才的需求也在不断增加，前端开发人才的需求比以往有了显著提升。我们希望从业者：“我们学习技术并非仅仅为了技术本身，而是为了能更好地制作产品”。最后引用乔布斯的名言，Web就是未来，我们作为前端开发人员也是未来的创造者。相信Web前端开发的未来会更加美好。

就业薪资丰厚

作为互联网行业急需的职位之一，web前端开发工程师人才缺口巨大，且持续更新。人才稀缺，薪资自然颇具吸引力，据某网站77939样本统计，从业人员平均月薪达到9690元，并且随着经验的积累，薪资也在持续攀升。渥瑞达就业团队专业指导毕业学员，确保实现万元就业目标。

更容易进入知名企业

专业的前端开发人才往往与知名企业对口，如百度、淘宝、京东等都在积极招聘，大企业对每个职业的专业化要求更高，发展前景广阔。渥瑞达的Web前端培训课程由众多资深实战导师精心设计，从实战出发，教学质量更优，Web前端学习班课程针对企业用人标准设置，毕业前严格筛选，更有利于实现高薪就业。