作者 | 杨小爱

来源 | web前端开发（ID：web_qdkf）

hello，大家好，我是杨小爱，欢迎来到web前端开发公号平台。

在上一篇《【CMS建站】写给大家看的网站制作教程01—了解网站制作流程》文章中，我详细的讲解了关于制作一个在线网站，需要做的一些准备工作以及制作流程。

今天我再来介绍一下，在我们正式开始制作一个网站前，我们需要使用到的主要工具有哪些？

现在，我们就开始进入正题。

01、网页编辑器工具

关于网页制作的编辑器软件工具有很多，我在这里只分享两款，Adobe Dreamweaver（简称，DW软件）和Sublime text软件。

对于没有任何基础的人来讲，我建议你先从学习DW软件来进行学习网站制作会比较好，这是一款所见即所得的网页编辑软件，它有三种模式，分别是代码模式，拆分模式，视图模式。

虽然很多人都说它太笨重了，但是，我个人觉得，对于初学者，零基础的你来讲，你通过学习使用DW这款软件来实现网站制作，是非常理想的选择。

它的实时视图模式，你做的任何一个步骤，你都可以在软件里直接看到。

以下是DW软件的实时视图界面的截图：

除此之外，它还有拆分界面和代码界面两种模式。

拆分界面模式如下：

代码界面模式如下：

而Sublime text软件是没有那么多模式的，它只有类似DW软件的代码界面。

Sublime text软件界面截图如下：

并且，当你熟练掌握DW软件后，可以熟练运用里面的代码模式了，你可以随时换其他编辑器。

当然，你也可以直接使用Sublime text或者其他编辑器，这个也是可以的。

我这里分享的是，我自己个人的经验，这个比较适合没有基础，不懂代码的朋友们，可以先从DW开始，然后过渡到其他软件工具。这样你在后期学习或者使用其他同类型的工具时，不会感觉那么吃力，上手也会快很多。

网页代码编辑器，除了DW外，我个人还比较推荐的就是Sublime text。

因为DW软件是一款所见即所得的网站设计编辑软件，对于没有编程基础的人来讲，这个比较容易上手，会让你感觉做网页就像打字那样简单，这样可以保持你的自学自信心与兴趣。

如果你有PS基础的话，你使用DW软件，会感觉容易一些，因为这个也是Adobe公司的产品，只不过，DW最初是由美国MACROMEDIA公司开发，在2005年时，被Adobe公司收购了。

而对于这个软件的学习，不需要你掌握多么熟练，只需要你会一些基本操作。因为大部分时候，我们只是用到软件里面的【代码】界面来写网站页面的代码而已，其他很多功能，我们使用的比较少。

关于这两款软件工具的下载以及DW安装，你可以到我的个人博客去里进行查看，具体地址如下：

DW软件的下载：

链接: https://pan.baidu.com/s/14X3PFkyeaCVBXGAM-451yQ
提取码: tdjj 

DW安装：

https://www.yang5460.com/blog/gj/2020-03-26/147.html

Sublime text软件的下载：

链接: https://pan.baidu.com/s/1dSgxIojWXRJH2oPMSGd86g
提取码: 43x3 

02、PS工具

也许，你会问，我学习网站制作，为啥还要懂PS？其实，不是要你像专业设计师那样熟练的使用PS工具，而是，要求你会一些最基本最简单的PS操作即可，比方，文件的新建，图片的裁切，切片，图片合并制作，网页设计稿的简单制作。

做过开发的人都知道，我们在写的网站设计页面，基本都是由设计师来完成，但是，如果你是自己独立做一个网站的话，在没有设计师给你出设计稿的情况下，你需要自己来完成这部分工作。

如果我们想把自己的网站做得颜值高一点的话，那这个PS也需要会点，也许你会说，这个不是有设计师来做吗？

但如果你是自己做一个个人博客站点的话，那你就得独自一个人完成，从设计到网站程序。

也许你会说，那我把设计部分外包给别人来做，这个也不是不可以，但是我想说是，既然你都开始学了，为啥不把这个内容也一起学习了，而且这个PS的学习，不需要你像专业设计师那样精通熟练掌握PS软件，只是要求你会点基础的操作即可。

比方，我们在网络上看了很多的喜欢而好看的网页布局时，这个时候，你就可以将网页裁剪保持下来。

然后，打开PS，把这个裁剪下来的网页布局拼凑到一个页面里。

例如，我打开www.webqdkf.com这个网站时，看到里面的轮播图部分页面布局很好，我就直接截图下来，如下：

等到我在写轮播这块的时候，这个布局就可以作为一个参考。

同时，你还可以把它拼凑到任何网页效果图里去。但是，需要注意的是，一定要保持图片尺寸大小的一致性，这个就可以在PS软件里进行统一操作了。

接着，我又看，发现这个导航栏也不错，于是，我也截图下来：

最后再在PS里拼一下，于是就有了下面这个样子：

至于其他更多部分，你可以接着往后拼上。把一个设计页面拼完后，觉得可以了，就开始写静态页面。

颜色尽量不要太花俏，稍微协调一点，简洁一点即可。

我们这么做的目的，就是为了方便我们在学习写网站页面的时候，提高学习效率，不用一边想网页布局，一边写页面代码，也不用反复的修改网页效果图，不然会浪费很多时间，学习效率会下降。

所以前期学习的时候，还是需要简单学习一下PS软件。

因为在实际工作中，我们也是先出设计效果图，然后写网页界面，而我们在学习的时候，也尽量遵循这样一个步骤，这也是我为啥要把PS的学习列入其中的一个原因。

在这里，我也把PS软件工具的安装与下载分享给你，希望对你有帮助。

PS软件的下载：

下载地址：https://pan.baidu.com/s/1xXpx2qvKK3V3rt_1GrN6Bw
提取码: masy 

详细的安装教程，你可以到我的个人博客进行查看。

安装教程：https://www.yang5460.com/blog/gj/2020-03-26/148.html

03、FTP上传下载工具

FTP工具也是我们在网站制作过程中，使用最多的一个小工具，这个工具的目的就是帮助我们将自己做好的图片和代码整体上传到网站的服务器上，这样，别人才能通过我们的提供的域名地址进行访问我们制作的网站。

FTP工具的样子如下：

像里面的地址域，用户名称，密码，这些信息，我们在购买服务器的时候，服务器空间商都会提供给你的，这个你不用担心，这个软件使用非常简称，基本不需要什么学习成本，可以说，你拿到了，基本都会使用。

因此，我在这里，也不具体介绍了，如果实在有不明白的话，可以百度，也可以在留言区给我留言，我再考虑出一个详细使用教程。

在这里，我也将FTP软件的下载地址分享给你。

FTP软件下载地址：

链接: https://pan.baidu.com/s/1C6C_KK4Ptb5Jqsi3v-kbMw 

提取码: bcfp 

当然，除了这个工具以外，也还有其他同类型的一些工具，在这里，我就不详细介绍了，介绍的越多越有选择困难症，等你学会了这个工具以后，你再去挖掘其他更多的工具吧。

总结

我们在制作网站中使用到的主要工具，就介绍完了，还有一些提升工作效率，与制作各种小图标的小技巧小工具，我们在后面需要用到的时候，我再跟大家分享，今天内容就到这里了，我现在总结一下：

1、网页制作的编辑器工具主要分享了两款：DW与Sublime text。

2、网页设计稿的制作工具，PS软件，以及它在其中如何使用。

3、上传网站文件的工具，FTP。

以上的几款工具，也是我们在整个网站制作学习过程中，使用最多也是最重要的工具，如果你想学习怎么制作一个网站，请你一定要学习使用它们，我们大家都知道，工欲善其事，必先利其器。

如果不能很好的使用工具，那是很难提升学习效率的，在开始之前，请学习一下这几款工具的使用。

今天的内容，我就先分享到这里，如果还有什么问题，请在留言区给我留言。

下节内容，我将介绍一下学习网站制作的一些简单入门知识与技巧。

如果你对网站制作内容感兴趣的话，请记得继续关注我，如果你觉得对你有所帮助，也请记得给我点赞，以及将其分享给你身边需要这个知识的朋友。

最后，感谢你的阅读，希望我今天的内容对你有所帮助。

我是杨小爱，我们下次再见！

学习更多技能

请点击下方公众号