前言

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

那web開(kāi)發(fā)都用什么工具呢？最常用的前端開(kāi)發(fā)工具有哪些呢？本文推薦8款最好用的web前端開(kāi)發(fā)工具供美工或者前端開(kāi)發(fā)人員使用，當(dāng)然若你是NB的全棧工程師也可以下載使用。

web前端開(kāi)發(fā)工具排行

1.Dreamweaver

工具簡(jiǎn)介：

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

2.Photoshop

工具簡(jiǎn)介：

Photoshop簡(jiǎn)稱(chēng)PS，全球最受歡迎的圖形圖像處理軟件。網(wǎng)頁(yè)設(shè)計(jì)師或者web前端開(kāi)發(fā)人員可利用此軟件進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)和切圖，PS的切圖工具非常強(qiáng)大，可以自動(dòng)生成html網(wǎng)頁(yè)格式，大大提高了網(wǎng)頁(yè)開(kāi)發(fā)效率。

3.WebStorm MAC版

工具簡(jiǎn)介：

非常好用的JavaScript開(kāi)發(fā)工具，被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為“Web前端開(kāi)發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。

4.browser-sync-master

工具簡(jiǎn)介：

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

作為前端開(kāi)發(fā)工程師，以上這些工具基本就夠用了，若是想更專(zhuān)業(yè)、裝逼一點(diǎn)，可以參考下面的htm代碼編輯器工具

其它4款html開(kāi)發(fā)工具推薦

1.SublimeText3

工具簡(jiǎn)介：

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

2.Notepad++7.3.1

工具簡(jiǎn)介：

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

3.Zend Studio 13.0.1

工具簡(jiǎn)介：

Zend Studio是一個(gè)屢獲大獎(jiǎng)的專(zhuān)業(yè)PHP集成開(kāi)發(fā)環(huán)境，具備功能強(qiáng)大的專(zhuān)業(yè)編輯工具和調(diào)試工具，支持PHP語(yǔ)法加亮顯示，支持語(yǔ)法自動(dòng)填充功能，支持書(shū)簽功能，支持語(yǔ)法自動(dòng)縮排和代碼復(fù)制功能，內(nèi)置一個(gè)強(qiáng)大的PHP代碼調(diào)試工具，支持本地和遠(yuǎn)程兩種調(diào)試模式，支持多種高級(jí)調(diào)試功能。

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

Git和Github支持云開(kāi)發(fā)部署深度，Zend Framework和Zend Server集成更快、更精簡(jiǎn)的IDE。

4.PhpStorm 10.0.1 Mac版

工具簡(jiǎn)介：

phpstorm免費(fèi)版是目前網(wǎng)絡(luò)上最為流行的php開(kāi)發(fā)軟件。phpstorm免費(fèi)版能全面的提升用戶(hù)php代碼編寫(xiě)的效率，并且提供能代碼補(bǔ)全、快速導(dǎo)航、即時(shí)錯(cuò)誤檢查等等功能，大大的節(jié)省php代碼編寫(xiě)時(shí)間，phpstorm 2016.2版全新的軟件界面，全面的提升所有編寫(xiě)功能，希望大家能夠喜歡，下載使用。