作者 |杨小二

来源 | Web前端开发()

在《》中，我给大家分享了制作网站的基本步骤，以及建立在线网站所需的网站域名、网站空间、网站程序等材料。从今天开始，我将和大家分享如何制作一个网站。网站需要一些工具和网站程序、网站模板、网页布局、网页标准以及一些HTML的基础知识。主要针对没有基础知识的人。有基础知识的请直接跳过。

01.网站创建工具

制作一个网站，其实有很多工具可以用来实现，但这里我主要介绍一下我会用到的几个工具。

一、FTP上传下载工具。我们在上一篇文章中已经接触过这个工具，所以我不再重复。如需下载安装，请前往“”获取。 FTP工具也比较简单，基本可以学会使用。

二、代码编辑工具。这个工具也是我们以后写网站代码时总会用到的工具。这也是我将在整个教程中使用的工具。我建议您安装它。以下是工具下载地址：

关联：

提取码：vxys

第三，网页切片工具，这个工具，尤其是前端开发者切割图片的时候，会用到里面的切片工具功能，而且不需要学习太多，因为我们只使用里面的一些基础功能。它不需要像专业设计师那样熟练。以下为下载地址：

关联：

提取码：wwwb

关于这个破解版的安装教程，如果你不知道怎么做，后面我会单独写一篇文章，本教程就不详细解释了。

这三个工具是我们以后会更频繁使用的。当然，还有很多小工具在搭建网站的时候会用到，比如这些，我们暂时用不到，等用到了之后再说。 ，我们再讲一下，倒是能理解一点。

主要用于测试时测试IE的兼容性。由于IE软件版本较多，所以它是一个用来方便在各个IE版本下测试网站的小工具。

它是一款代码比较软件，适用于大型项目以及网页代码较多的情况。

说完工具，接下来就是网站程序了。这也是制作网站非常重要的一个环节。这部分就和我们平时做饭的时候一样。我们不仅要准备大米，还要懂得如何把大米变成大米。 ，而前面的工具内容就像我们做饭用的电饭锅一样，那么接下来的过程就是如何把米变成米饭，这当然不难。

在讲这个过程之前，我们需要先了解与之相关的几个问题。之前我们一直在讲网站建设流程，那么到底什么是网站建设流程呢？

02.网站建设方案

事实上，网站建设程序有很多种。例如，我们自己编写的网站源代码也可以成为网站建设程序。还有一些开源的网站源代码也是网站建设程序，例如，（也叫 CMS）、（国外的博客系统）、（商城系统）、（论坛系统），这些都可以称为网站建设程序，这些程序中有付费的和免费的。像这个网站程序系统一样，有付费部分。其他的基本都是免费的。

其实这个建站程序就像我们安装的微信、微博程序一样。大家都可以下载安装，但是一旦安装了，并不意味着网站就准备好了。

我们都知道，安装了微信和微博后，我们需要进行一些简单的设置，比如更改头像、设置一个好听的昵称等。

网站建设程序也是如此。安装后，我们每个人的程序都是一样的。也就是说我们每个安装了这个建站程序的网站都是一样的风格，但是为了突出我们自己网站的风格和调性，所以我们还是需要对其进行修改。

在网站建设程序中，基本上有多种风格可供选择。这就是我们接下来要讲的，网站模板。

03. 网站模板

网站模板就是网站的风格，类似于我们现在手机上的皮肤风格。一个网站只能使用一种网站程序，但是可以实现多种网站样式，也就是说可以使用多个网站模板。

关于网站模板，之前我在公众号上分享过很多，包括一些网站模板，一些网站模板，还有一些全站网站模板。总之，学习资源还是比较丰富的。

在开始创建网站之前，你只需要考虑使用哪个网站程序来实现你的网站，然后你可以先在网上找到一些免费的网站模板来学习，等到差不多完成了。

事实上，您可以自己编写一些网站模板。例如，如果你打算使用这个建站程序来制作自己的网站，那么你可以先学习一些制作网站的相关知识。这样也更有针对性，更容易学习。上手很容易，你会对它更感兴趣。

说完了网站程序和网站模板，我们再来说说网站中的网页。每个网站都由不同的网页组成。网页分为静态网页和动态网页。

04.静态网页和动态网页

简单来说，静态网页就是没有后端数据库交互的网页。我们都称之为静态网页。这是相对于动态网页来说的。因此，动态网页就是与后端数据库交互的网页。

我的网站中的网页都是静态页面，每个页面的文件以xxxx.html或xxxx.html的文件格式出现。

动态网页的文件后缀有很多，主要根据开发网站后端所使用的语言而定，例如xxxx.php、xxxx.asp、xxxx.jsp等。点后的文件名表示网站。后端就是用这种语言开发的。像xxxx.php，这意味着网站的后台程序是用PHP语言开发的。

05.静态链接、伪静态链接和动态链接

当我们打开一个网站时，我们首先会输入它的链接URL。这个链接URL又称为 ，英文名称，URL（或）。

在我们的网站中，通常有三种类型的网站链接，静态链接、伪静态链接、动态链接。

静态链接是网站空间中存在的独立静态网页文件生成的静态地址。

例如，这是一个静态链接。当我们访问静态页面时，我们不需要操作数据库，而是直接提取静态网页。因此访问速度比较快，服务器负载也小。

对于搜索引擎来说，也可以节省大量的抓取时间。而这也是最有可能被搜索引擎索引的地址。

至于“伪静态”，它并不是真正的静态链接。从链接地址来看它只是一个静态链接。事实上，这个静态页面在服务器上并不存在。该页面可能是网站的后端语言，例如php、asp、jsp等页面。

我们使用伪静态链接是为了方便搜索引擎收录并抓取我们的网站页面，以便他人可以通过搜索引擎快速找到我们。这也是SEO优化时经常使用的方法。

动态链接是指当我们访问动态网页时，服务器程序需要调用数据库来提取网页内容，然后反馈给我们。经常会有一个“？”链接地址中的页面。例如这是一个微信页面地址：#rd

它是一个动态链接地址。

简单理解就是，不带问号的链接地址一般是静态地址，地址中带问号的链接地址是动态链接地址，两者之间的地址是伪静态地址。您可能应该首先了解这一点。就做一次，主要是为后面的内容做准备。

06.从网页诞生开始学习HTML和CSS知识

我们之前说过，网站是由网页组成的，而网页又是由 HTML 文件组成的。因此，学习网站制作实际上就是学习如何编写HTML文件。每个HTML文件编写完成后，我们可以通过标签将每个文件链接起来，从而形成一个网站。

01)、什么是HTML

HTML是一种超文本标记语言，它的英文全称是-。

在学习网站制作的时候，一定要学习HTML的基础知识，否则就无法开始后续的工作。

02) 第一个网页的诞生

第一步，打开工具，点击【文件】-新建文件，或者按快捷键ctrl+n。

第二步，编写如下代码：