作者 | 楊小愛

來源 | web前端開發(fā)（ID：web_qdkf）

hello，大家好，我是楊小愛，歡迎來到web前端開發(fā)公號平臺。

在上一篇《【CMS建站】寫給大家看的網(wǎng)站制作教程01—了解網(wǎng)站制作流程》文章中，我詳細的講解了關(guān)于制作一個在線網(wǎng)站，需要做的一些準備工作以及制作流程。

今天我再來介紹一下，在我們正式開始制作一個網(wǎng)站前，我們需要使用到的主要工具有哪些？

現(xiàn)在，我們就開始進入正題。

01、網(wǎng)頁編輯器工具

關(guān)于網(wǎng)頁制作的編輯器軟件工具有很多，我在這里只分享兩款，Adobe Dreamweaver（簡稱，DW軟件）和Sublime text軟件。

對于沒有任何基礎(chǔ)的人來講，我建議你先從學習DW軟件來進行學習網(wǎng)站制作會比較好，這是一款所見即所得的網(wǎng)頁編輯軟件，它有三種模式，分別是代碼模式，拆分模式，視圖模式。

雖然很多人都說它太笨重了，但是，我個人覺得，對于初學者，零基礎(chǔ)的你來講，你通過學習使用DW這款軟件來實現(xiàn)網(wǎng)站制作，是非常理想的選擇。

它的實時視圖模式，你做的任何一個步驟，你都可以在軟件里直接看到。

以下是DW軟件的實時視圖界面的截圖：

除此之外，它還有拆分界面和代碼界面兩種模式。

拆分界面模式如下：

代碼界面模式如下：

而Sublime text軟件是沒有那么多模式的，它只有類似DW軟件的代碼界面。

Sublime text軟件界面截圖如下：

并且，當你熟練掌握DW軟件后，可以熟練運用里面的代碼模式了，你可以隨時換其他編輯器。

當然，你也可以直接使用Sublime text或者其他編輯器，這個也是可以的。

我這里分享的是，我自己個人的經(jīng)驗，這個比較適合沒有基礎(chǔ)，不懂代碼的朋友們，可以先從DW開始，然后過渡到其他軟件工具。這樣你在后期學習或者使用其他同類型的工具時，不會感覺那么吃力，上手也會快很多。

網(wǎng)頁代碼編輯器，除了DW外，我個人還比較推薦的就是Sublime text。

因為DW軟件是一款所見即所得的網(wǎng)站設(shè)計編輯軟件，對于沒有編程基礎(chǔ)的人來講，這個比較容易上手，會讓你感覺做網(wǎng)頁就像打字那樣簡單，這樣可以保持你的自學自信心與興趣。

如果你有PS基礎(chǔ)的話，你使用DW軟件，會感覺容易一些，因為這個也是Adobe公司的產(chǎn)品，只不過，DW最初是由美國MACROMEDIA公司開發(fā)，在2005年時，被Adobe公司收購了。

而對于這個軟件的學習，不需要你掌握多么熟練，只需要你會一些基本操作。因為大部分時候，我們只是用到軟件里面的【代碼】界面來寫網(wǎng)站頁面的代碼而已，其他很多功能，我們使用的比較少。

關(guān)于這兩款軟件工具的下載以及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工具

也許，你會問，我學習網(wǎng)站制作，為啥還要懂PS？其實，不是要你像專業(yè)設(shè)計師那樣熟練的使用PS工具，而是，要求你會一些最基本最簡單的PS操作即可，比方，文件的新建，圖片的裁切，切片，圖片合并制作，網(wǎng)頁設(shè)計稿的簡單制作。

做過開發(fā)的人都知道，我們在寫的網(wǎng)站設(shè)計頁面，基本都是由設(shè)計師來完成，但是，如果你是自己獨立做一個網(wǎng)站的話，在沒有設(shè)計師給你出設(shè)計稿的情況下，你需要自己來完成這部分工作。

如果我們想把自己的網(wǎng)站做得顏值高一點的話，那這個PS也需要會點，也許你會說，這個不是有設(shè)計師來做嗎？

但如果你是自己做一個個人博客站點的話，那你就得獨自一個人完成，從設(shè)計到網(wǎng)站程序。

也許你會說，那我把設(shè)計部分外包給別人來做，這個也不是不可以，但是我想說是，既然你都開始學了，為啥不把這個內(nèi)容也一起學習了，而且這個PS的學習，不需要你像專業(yè)設(shè)計師那樣精通熟練掌握PS軟件，只是要求你會點基礎(chǔ)的操作即可。

比方，我們在網(wǎng)絡(luò)上看了很多的喜歡而好看的網(wǎng)頁布局時，這個時候，你就可以將網(wǎng)頁裁剪保持下來。

然后，打開PS，把這個裁剪下來的網(wǎng)頁布局拼湊到一個頁面里。

例如，我打開www.webqdkf.com這個網(wǎng)站時，看到里面的輪播圖部分頁面布局很好，我就直接截圖下來，如下：

等到我在寫輪播這塊的時候，這個布局就可以作為一個參考。

同時，你還可以把它拼湊到任何網(wǎng)頁效果圖里去。但是，需要注意的是，一定要保持圖片尺寸大小的一致性，這個就可以在PS軟件里進行統(tǒng)一操作了。

接著，我又看，發(fā)現(xiàn)這個導航欄也不錯，于是，我也截圖下來：

最后再在PS里拼一下，于是就有了下面這個樣子：

至于其他更多部分，你可以接著往后拼上。把一個設(shè)計頁面拼完后，覺得可以了，就開始寫靜態(tài)頁面。

顏色盡量不要太花俏，稍微協(xié)調(diào)一點，簡潔一點即可。

我們這么做的目的，就是為了方便我們在學習寫網(wǎng)站頁面的時候，提高學習效率，不用一邊想網(wǎng)頁布局，一邊寫頁面代碼，也不用反復的修改網(wǎng)頁效果圖，不然會浪費很多時間，學習效率會下降。

所以前期學習的時候，還是需要簡單學習一下PS軟件。

因為在實際工作中，我們也是先出設(shè)計效果圖，然后寫網(wǎng)頁界面，而我們在學習的時候，也盡量遵循這樣一個步驟，這也是我為啥要把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工具也是我們在網(wǎng)站制作過程中，使用最多的一個小工具，這個工具的目的就是幫助我們將自己做好的圖片和代碼整體上傳到網(wǎng)站的服務(wù)器上，這樣，別人才能通過我們的提供的域名地址進行訪問我們制作的網(wǎng)站。

FTP工具的樣子如下：

像里面的地址域，用戶名稱，密碼，這些信息，我們在購買服務(wù)器的時候，服務(wù)器空間商都會提供給你的，這個你不用擔心，這個軟件使用非常簡稱，基本不需要什么學習成本，可以說，你拿到了，基本都會使用。

因此，我在這里，也不具體介紹了，如果實在有不明白的話，可以百度，也可以在留言區(qū)給我留言，我再考慮出一個詳細使用教程。

在這里，我也將FTP軟件的下載地址分享給你。

FTP軟件下載地址：

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

提取碼: bcfp

當然，除了這個工具以外，也還有其他同類型的一些工具，在這里，我就不詳細介紹了，介紹的越多越有選擇困難癥，等你學會了這個工具以后，你再去挖掘其他更多的工具吧。

總結(jié)

我們在制作網(wǎng)站中使用到的主要工具，就介紹完了，還有一些提升工作效率，與制作各種小圖標的小技巧小工具，我們在后面需要用到的時候，我再跟大家分享，今天內(nèi)容就到這里了，我現(xiàn)在總結(jié)一下：

1、網(wǎng)頁制作的編輯器工具主要分享了兩款：DW與Sublime text。

2、網(wǎng)頁設(shè)計稿的制作工具，PS軟件，以及它在其中如何使用。

3、上傳網(wǎng)站文件的工具，F(xiàn)TP。

以上的幾款工具，也是我們在整個網(wǎng)站制作學習過程中，使用最多也是最重要的工具，如果你想學習怎么制作一個網(wǎng)站，請你一定要學習使用它們，我們大家都知道，工欲善其事，必先利其器。

如果不能很好的使用工具，那是很難提升學習效率的，在開始之前，請學習一下這幾款工具的使用。

今天的內(nèi)容，我就先分享到這里，如果還有什么問題，請在留言區(qū)給我留言。

下節(jié)內(nèi)容，我將介紹一下學習網(wǎng)站制作的一些簡單入門知識與技巧。

如果你對網(wǎng)站制作內(nèi)容感興趣的話，請記得繼續(xù)關(guān)注我，如果你覺得對你有所幫助，也請記得給我點贊，以及將其分享給你身邊需要這個知識的朋友。

最后，感謝你的閱讀，希望我今天的內(nèi)容對你有所幫助。

我是楊小愛，我們下次再見！

【CMS建站】寫給大家看的網(wǎng)站制作教程02—網(wǎng)站制作的工具介紹與下載安裝

學習更多技能
請點擊下方公眾號

【CMS建站】寫給大家看的網(wǎng)站制作教程02—網(wǎng)站制作的工具介紹與下載安裝

學習更多技能請點擊下方公眾號

學習更多技能
請點擊下方公眾號