網站(zhàn)開發一般分為前端和(hé)後端兩個(gè)部分。前端負責實現頁面效果，後端主要負責功能開發。一般的開發流程是先由美工或者網頁設計師(shī)進行網頁設計和(hé)切圖，所謂切圖就是将設計好的網頁效果圖利用html開發工具進行代碼實現成網頁形式，并且加入一些網頁特效。然後交給後端開發人員進行功能開發，一般采用主流的php技術(shù)進行開發。

那web開發都用什麼工具呢(ne)？最常用的前端開發工具有哪些呢(ne)？本文(wén)推薦8款最好用的web前端開發工具供美工或者前端開發人員使用，當然若你(nǐ)是NB的全棧工程師(shī)也可(kě)以下(xià)載使用。

WEB工具集下(xià)載合集地址 http://t.cn/Rk4fd1x

1.Dreamweaver

工具簡介：

老牌的網頁編輯軟件，功能非常強大，最大的優點是可(kě)視化編輯，還有錯誤提示，深受前端開發人員和(hé)網站(zhàn)開發人員歡迎！Dreamweaver CC 專注于快速響應設計、代碼編輯功能的改進、在設備上進行網頁預覽以及從 Photoshop 複合中(zhōng)批量提取具有多種分辨率的 Web 優化圖像。與 Bootstrap 框架的集成可(kě)幫助您構建移動(dòng)優先、快速響應的網站(zhàn)。視覺媒體查詢通(tōng)過讓您在各種斷點處對您的設計進行可(kě)視化和(hé)修改，進一步完善了快速響應網頁設計的體驗。

2.Photoshop

工具簡介：

Photoshop簡稱PS，全球最受歡迎的圖形圖像處理軟件。網頁設計師(shī)或者web前端開發人員可(kě)利用此軟件進行網頁的設計和(hé)切圖，PS的切圖工具非常強大，可(kě)以自動(dòng)生成html網頁格式，大大提高了網頁開發效率。

3.WebStorm MAC版

工具簡介：

非常好用的JavaScript開發工具，被廣大中(zhōng)國JS開發者譽為“Web前端開發神器(qì)”、“最強大的HTML5編輯器(qì)”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

4.browser-sync-master

工具簡介：

省時的浏覽器(qì)同步測試工具，Browsersync能讓浏覽器(qì)實時、快速響應您的文(wén)件更改（html、js、css、sass、less等）并自動(dòng)刷新頁面。更重要的是 Browsersync可(kě)以同時在PC、平闆、手機等設備下(xià)進項調試。您可(kě)以想象一下(xià)：“假設您的桌子(zǐ)上有pc、ipad、iphone、android等設備，同時打開了您需要調試的頁面，當您使用browsersync後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動(dòng)”。無論您是前端還是後端工程師(shī)，使用它将提高您30%的工作效率。

web前端開發工具排行：8款html開發工具推薦下(xià)載

作為前端開發工程師(shī)，以上這些工具基本就夠用了，若是想更專業(yè)、裝逼一點，可(kě)以參考下(xià)面的htm代碼編輯器(qì)工具

其它4款html開發工具推薦

1.SublimeText3

工具簡介：

Sublime Text是一款流行的代碼編輯器(qì)。Sublime Text 具有漂亮(liàng)的用戶界面和(hé)強大的功能，例如(rú)代碼縮略圖，Python的插件，代碼段等。還可(kě)自定義鍵綁定，菜單和(hé)工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。Sublime Text 是一個(gè)跨平台的編輯器(qì)，同時支持Windows、Linux、Mac OS X等操作系統。

2.Notepad++7.3.1

工具簡介：

Notepad++是在微軟視窗環境之下(xià)的一個(gè)免費的代碼編輯器(qì)。它使用較少(shǎo)的CPU功率，降低電腦系統能源消耗，但輕巧且執行效率高，使得Notepad++可(kě)完美地取代微軟視窗的記事本。内置支持多達27種語法高亮(liàng)度顯示（包括各種常見的源代碼、腳本，能夠很好地支持.nfo文(wén)件查看），還支持自定義語言；可(kě)自動(dòng)檢測文(wén)件類型，根據關(guān)鍵字顯示節點，節點可(kě)自由折疊/打開，還可(kě)顯示縮進引導線，代碼顯示得很有層次感；可(kě)打開雙窗口，在分窗口中(zhōng)又可(kě)打開多個(gè)子(zǐ)窗口，允許快捷切換全屏顯示模式（F11），支持鼠标滾輪改變文(wén)檔顯示比例；提供了一些有用工具，如(rú)鄰行互換位置、宏功能等；可(kě)顯示選中(zhōng)文(wén)本的字節數 （而不是一般編輯器(qì)所顯示的字數，這在某些情況下(xià)，比如(rú) 軟件本地化 很方便）。

3.Zend Studio 13.0.1

工具簡介：

Zend Studio是一個(gè)屢獲大獎的專業(yè)PHP集成開發環境，具備功能強大的專業(yè)編輯工具和(hé)調試工具，支持PHP語法加亮(liàng)顯示，支持語法自動(dòng)填充功能，支持書簽功能，支持語法自動(dòng)縮排和(hé)代碼複制功能，内置一個(gè)強大的PHP代碼調試工具，支持本地和(hé)遠(yuǎn)程兩種調試模式，支持多種高級調試功能。

Zend Studio 9 正式發布，主要包含以下(xià)更新：

Git和(hé)Github支持雲開發部署深度，Zend Framework和(hé)Zend Server集成更快、更精簡的IDE。

4.PhpStorm 10.0.1 Mac版

工具簡介：

phpstorm免費版是目前網絡上最為流行的php開發軟件。phpstorm免費版能全面的提升用戶php代碼編寫的效率，并且提供能代碼補全、快速導航、即時錯誤檢查等等功能，大大的節省php代碼編寫時間，phpstorm 2016.2版全新的軟件界面，全面的提升所有編寫功能，希望大家能夠喜歡，下(xià)載使用。