做网站需要用到的一些工具与网站程序，网站模板

作者 | 杨小二

来源 | web前端开发（web_qdkf）

在《》里，我跟大家分享了做一个网站的基本步骤，以及一个线上网站，需要用到的网站域名，网站空间，网站程序等素材，而从今天开始，我将跟大家分享，做网站需要用到的一些工具与网站程序，网站模板，网页布局，web标准，HTML方面的一些基础知识。主要是针对一些没有基础的小伙伴，对于有基础的小伙伴们，请直接跳过。

01、网站制作工具

做一个网站，其实有很多工具可以将其实现出来，但是在这里我将重点讲几个在我会使用到的工具。

第一，FTP上传下载工具，这个我们在上篇文章里已经接触到了这个工具，我就不再重复，需要下载安装的话，请到《》里面去获取。FTP工具，也比较简单，基本拿来就学使用。

第二，代码编辑器工具，Sublime。这个工具，也是我们后面做网站写代码时候，会一直用到的工具，也是我在整个教程中，会使用到的工具，我建议大家可以安装一下，以下是Sublime工具下载地址：

链接:

提取码:vxys

第三，网页切片工具，AdobePhotoshopCC，这个工具seo链接基础知识，特别是在前端开发人员切图的时候，会使用到里面的切片工具这个功能，也不需要学多精深，因为我们只是用到里面的一些基本功能seo链接基础知识，不会像专业设计师那样，要求精通。以下是AdobePhotoshopCC的下载地址：

链接:

提取码:wwab

关于这个破解版的安装教程，如果不会的话，我后面再单独写一篇文章来讲，这篇教程里就不详细讲解了。

这三个工具，就是我们后面使用频率比较高的工具，当然，做网站还有很多小工具会使用到，像IEtester，beyondcompare，这些我们目前用不到，我们就先不说了，等到用到的时候，我们再讲，但是，我们可以稍微了解一下。

IEtester主要是在测试时，用来测试IE兼容性的，因为IE软件版本比较多，为了网站在各种IE版本下测试方便，而使用的一个小工具。

beyondcompare是一个代码比较软件，这个在大型项目，还有网页代码比较多的时候会用到。

讲完了工具，接下来，就是网站程序了，这个也是做一个网站，非常重要的部分了，这个部分就好像我们平时做饭一样，我们不仅需要准备米，我们还需要知道怎么将米变成饭，而前面的工具内容，它就好像我们做饭用的电饭煲这个工具，所以接下来这个过程就是怎么把米做成饭的一个过程，当然也不难。

在讲这个过程之前，我们还需要再了解一下与其相关的几个问题。前面我们一直在讲建站程序，那到底什么是建站程序呢？

02、建站程序

其实，建站程序，有很多种，比方我们自己写的网站源码，也可以成为建站程序，还有一些开源的网站源码也是建站程序，例如，dedecms（也叫织梦CMS），wordpress（国外的一个博客系统），ecshop（一个购物商场系统），discuz，（一个论坛系统），这些都可以称之为建站程序，而且这些程序里，有付费，也有免费之分，像ecshop这个网站程序系统里面就有付费的部分，而其他几个基本都是免费的。

其实，这个建站程序就好像我们安装的微信，微博程序一样，是人人都可以下载安装的，但是安装完了，不是就表示网站已经做好了。

我们都知道，我们安装的微信，微博，安装好以后，也是需要做些简单设置，比方，换个头像，设置一个好听的昵称等等。

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

而在一个建站程序里，基本都会有很多风格可以选择，这个就是我们接下来要说到的，网站模板。

03、网站模板

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

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

在开始网站制作之前，你只要想好了用哪个网站程序来实现自己的网站，然后就可以在网上先找一些免费的网站模板来进行学习，等到自己学得差不多了。

其实，你自己就可以写一些网站模板了，比方，你打算用dedecms这个网站程序来制作自己的网站，那你就可以先去学习一些dedecms做网站的相关知识，这个也比较有针对性，学习起来更加容易上手，兴趣也会大点。

讲完了网站程序，网站模板，我们再来说一下网站里的网页，每个网站都是由不同的网页组合而成。网页又分为静态网页与动态网页。

04、静态网页与动态网页

简单讲，静态网页就是没有后台数据库交互的网页，我们都把它成为静态网页，这个是相对于动态网页而言的，所以，动态网页就是有后台数据库交互的网页。

像我的这个站点里的网页都是静态页面，而且每一个页面的文件都是以xxxx.html，或者xxxx.html这样的文件格式出现。

而动态网页的文件后缀名，就比较多了，主要是根据开发网站后台的语言来的，例如，xxxx.php，xxxx.asp，xxxx.jsp等，而点后面的文件名，就是表示这个网站后台是用这个语言来开发的。像xxxx.php这个就是表示网站的后台程序是用php语言开发的。

05、静态链接，伪静态链接与动态链接

当我们在打开一个网站时，我们会先输入它的链接网址，这个链接网址也叫做统一资源定位符，英文名，URL（UniformResourceLocator）。

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

静态链接就是存在网站空间上的一个独立静态网页文件所生成的一个静态地址。

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

对搜索引擎来说，同样可以节省大量的抓取时间。而这个也是最容易被搜索引擎收录的地址。

而“伪静态”，它不是真的静态链接，只是从链接地址上看好像是静态链接，事实是在服务器上并不存在这个静态页面，这个页面可能是php，asp，jsp等网站后台语言的页面。

我们使用伪静态链接就是为了方便搜索引擎收录与抓取我们的网站页面，能够让别人通过搜索引擎快速找到我们，这个也是在SEO优化的时候，会经常使用的一种手段。

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

它就是一个动态的链接地址。

简单点的理解就是，没有问号的链接地址一般都是静态地址，而地址里有问号出现的链接地址就是动态链接地址，处在这两者之间的地址就是伪静态地址，这个大概先了解知道一下即可，主要是为了后面内容做准备的。

06、从一个网页的诞生来学习HTML与CSS知识

在前面我们已经讲了，网站都是由一个一个的网页组成，而网页就是由一个一个的HTML文件，所以，学习网站制作，其实就是学习怎么写HTML文件，当每个HTML文件写完以后，我们通过一个标签就可以把各文件链接起来，于是就组成了一个网站。

01）、什么是HTML

HTML就是一种超文本标记语言，英文全称HyperTextMark-upLanguage。

学习网站制作一定要学会HTML的基本知识，不然没有办法开始后面的工作。

02）、第一个网页的诞生

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

第二步，写下下面这些代码：