網(wǎng)站開發(fā)工具

今天，小編就將自己在開發(fā)網(wǎng)站和其他應(yīng)用程序時常用的幾個工具網(wǎng)站給大家介紹下，希望能對大家有所借鑒和參考。

提高大家的生產(chǎn)效率。

一、站長之家－站長工具tools.chinaz

站長之家相信很多人都很熟悉，一個老牌的站長站。

站長之家－站長工具

通過這幾張截圖，大家可以看到工具還是相當(dāng)豐富的。既有域名查詢類的，也有seo相關(guān)類的，也有權(quán)重查詢類，還是一很多的輔助工具。

二、在線工具網(wǎng)tool.lu

這個工具也相當(dāng)豐富，有開發(fā)類、站長類、極客類等，大家可以看看。

三、阿里的iconfont

這是阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺。設(shè)計師將圖標(biāo)上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用。

通過這個平臺，大家可以創(chuàng)建項目，根據(jù)我們的項目添加很多的矢量圖標(biāo)，然后下載引用到我們的項目中。非常好用。

今天就先介紹這三個，希望對大家有所幫助。如果你有好用的也可以與我們一起分享下。

程序員必學(xué)：瀏覽器開發(fā)者工具推廣視頻課程

墜落

瀏覽器開發(fā)者工具到底是什么？

其實簡單的說，瀏覽器開發(fā)者工具就是給專業(yè)的web應(yīng)用和網(wǎng)站開發(fā)人員使用的工具，當(dāng)然只要你有興趣想要了解，只要你對這個世界充滿這好奇，什么東西你都可以了解。

開發(fā)者工具到底有什么用？

它的作用在于，幫助開發(fā)人員對網(wǎng)頁進(jìn)行布局，比如HTML+CSS，幫助前端工程師更好的調(diào)試腳本（JavaScript、jQuery）之類的，還可以使用工具查看網(wǎng)頁加載過程，獲取網(wǎng)頁請求（這個過程也叫做抓包），抓包是非常有意思的過程，而每一個瀏覽器廠商生產(chǎn)出來的瀏覽器都會有自己的殺手锏，也就是功能上的差別，那么這個時候你就找一個最適合自己的瀏覽器使用就可以，接下來就是介紹我常用的三個瀏覽器。

chrom瀏覽器打開－開發(fā)人員工具－方式如下：

手動打開開發(fā)者工具的方法

當(dāng)然，也可使用快捷方式，最為簡便：打開方式有兩種：第一“按F12”，第二：shift+ctrl+i

開發(fā)人員工具的界面

下面，為大家介紹下幾個功能的使用方法：

Elements

Elements工具像一把手術(shù)刀一樣“解剖”了當(dāng)前頁面，我們看到的Elements頁面一般像這樣子：

圖中標(biāo)記為1的紅色區(qū)塊為頁面HTML文件，HTML中的每個元素比如<body>、<p>都是一個DOM節(jié)點，所有的DOM節(jié)點組成了DOM樹。我們完全可以把紅色區(qū)塊1當(dāng)做是DOM樹，把HTML元素標(biāo)簽看做DOM節(jié)點。

當(dāng)我們在這里選中某一DOM對象時，網(wǎng)頁中相應(yīng)元素也會被陰影覆蓋。我們可以對DOM對象進(jìn)行修改，修改后結(jié)果會在頁面實時顯示出來。此外，還可以用 Command + f 搜索DOM樹中指定的內(nèi)容，或者是以HTML形式更改頁面元素，如下圖：

選中DOM對象之后右鍵即可以看到一些輔助的功能，如圖中標(biāo)記為2的區(qū)塊所示：

Add Attribute: 在標(biāo)簽中增加新的屬性；

Force Element State: 有時候我們?yōu)轫撁嬖靥砑右恍﹦討B(tài)的樣式，比如當(dāng)鼠標(biāo)懸停在元素上時的樣式，這種動態(tài)樣式很難調(diào)試。我們可以使用Force Element State強(qiáng)制元素狀態(tài)，便于調(diào)試，如下圖：

![圖4. 強(qiáng)制元素狀態(tài)][4]Edit as HTML: 以HTML形式更改頁面元素；

Copy XPath: 復(fù)制XPath；

Delete Node: 刪除DOM節(jié)點；

Break On: 設(shè)置DOM 斷點。

圖中被標(biāo)記為3的藍(lán)色區(qū)塊顯示當(dāng)前標(biāo)簽的路徑：從html開始一直到當(dāng)前位置，我們單擊路徑中任何一個標(biāo)簽，即可以跳轉(zhuǎn)到相應(yīng)標(biāo)簽內(nèi)容中去。

圖中標(biāo)記為4的藍(lán)色區(qū)塊實時顯示當(dāng)前選中標(biāo)簽的CSS樣式、屬性等，一共有以下5小部分：

Styles: 顯示用戶定義的樣式，比如請求的default.css中的樣式，和通過Javasript生成的樣式，還有開發(fā)者工具添加的樣式；

Computed: 顯示開發(fā)者工具計算好的元素樣式；

Event Listeners: 顯示當(dāng)前HTML DOM節(jié)點和其祖先節(jié)點的所有JavaScript事件監(jiān)聽器，這里的監(jiān)聽腳本可以來自Chrome的插件?？梢渣c擊右邊小漏斗形狀(filter)選擇只顯示當(dāng)前節(jié)點的事件監(jiān)聽器。

DOM Breakpoints: 列出所有的DOM 斷點；

Properties: 超級全面地列出當(dāng)前選中內(nèi)容的屬性，不過基本很少用到。

實際應(yīng)用中我們經(jīng)常會用到Styles，如下圖：

圖中標(biāo)記為1的+號為New style rule，可以為當(dāng)前標(biāo)簽添加新的選擇器，新建立的樣式為inspector-stylesheet。此外，也可以直接在原有的樣式上增加、修改、禁用樣式屬性，如圖中標(biāo)記2顯示。

在New style rule右邊為Toggle Element State，選擇后會出現(xiàn)標(biāo)記3顯示的選擇框，如果選中:hover后，即可以看到鼠標(biāo)懸停在頁面元素上時的CSS樣式了，作用類似于前面的Force Element Satte，更多內(nèi)容可以看:hover state in Chrome Developer Tools 。

更強(qiáng)大的是，開發(fā)者工具以直觀的圖形展示了盒子模型的margin、border、padding部分，如標(biāo)記5所示。下面動態(tài)圖給出了盒子模型的一個示例：

Console

Console可以查看網(wǎng)頁運行后提示的消息，錯誤或者警告以及輸出內(nèi)容等，網(wǎng)頁后臺可以使用Console.debug("輸出內(nèi)容")；來在Console輸出顯示，可以做到調(diào)試的作用吧，不過一般真正調(diào)試不是拿Console。console.debug("Console使用介紹");console是小寫形式，不然提示沒有Console

Resources

Resources里可以查看web程序跑起來后所加載的一些資源（Resources），包括圖片或者其他“值”，以及Cookies

Network

有時候我們的網(wǎng)頁加載的很慢，而相同網(wǎng)速下，其他網(wǎng)頁加載速度并不慢。這時候就得考慮優(yōu)化網(wǎng)頁，優(yōu)化前我們必須知道加載速度的瓶頸在哪里，這個時候可以考慮使用Network工具。下圖為我的博客首頁加載時的Network情況：

請求的每個資源在Network表格中顯示為一行，每個資源都有許多列的內(nèi)容(如紅色區(qū)塊1)，不過默認(rèn)情況下不是所有列都顯示出來。

Name/Path: 資源名稱以及URL路徑；

Method: HTTP請求方法；

Status/Text: HTTP狀態(tài)碼/文字解釋；

Type: 請求資源的MIME類型；

Initiator解釋請求是怎么發(fā)起的，有四種可能的值：

Parser：請求是由頁面的HTML解析時發(fā)送的；

Redirect：請求是由頁面重定向發(fā)送的；

Script：請求是由script腳本處理發(fā)送的；

Other：請求是由其他過程發(fā)送的，比如頁面里的link鏈接點擊，在地址欄輸入URL地址。

Size/Content: Size是響應(yīng)頭部和響應(yīng)體結(jié)合起來的大小，Content是請求內(nèi)容解碼后的大小。進(jìn)一步了解可以看這里Chrome Dev Tools - “Size” vs “Content”；

Time/Latency: Time是從請求開始到接收到最后一個字節(jié)的總時長，Latency是從請求開始到接收到第一個字節(jié)的時間；

Timeline: 顯示網(wǎng)絡(luò)請求的可視化瀑布流，鼠標(biāo)懸停在某一個時間線上，可以顯示整個請求各部分花費的時間。

以上是默認(rèn)顯示的列，不過我們可以在瀑布流的頂部右鍵，這樣就可以選擇顯示或者隱藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。

我們可以按照上面任意一項來給資源請求排序，只需要單擊相應(yīng)的名字即可。Timeline排序比較復(fù)雜，單擊Timeline后，需要選擇根據(jù)Start Time、Response Time、End Time、Duration、Latency中的一項來排序。

紅色區(qū)塊2中，一共有6個小功能：

Record Network Log: 紅色表示此時正在記錄資源請求信息；

Clear: 清空所有的資源請求信息；

Filter: 過濾資源請求信息；

Use small resource raws: 每一行顯示更少的內(nèi)容；

Perserve Log: 再次記錄請求的信息時不擦出之前的資源信息；

Disable cache: 不允許緩存的話，所有資源均重新加載。

選擇Filter后，就會出現(xiàn)如紅色區(qū)塊3所顯示的過濾條件，當(dāng)我們點擊某一內(nèi)容類型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只顯示該特定類型的資源。在XHR請求中，可以在一個請求上右鍵選擇“Replay XHR”來重新運行一個XHR請求。

有時候我們需要把Network里面內(nèi)容傳給別人，這時候可以在資源請求行的空白處右鍵然后選擇Save as HAR with Content保存為一個HAR文件。然后可以在一些第三方工具網(wǎng)站，比如這里重現(xiàn)網(wǎng)絡(luò)請求信息。

選定某一資源后，我們還可以Copy as cURL，也就是復(fù)制網(wǎng)絡(luò)請求作為curl命令的參數(shù)，詳細(xì)內(nèi)容看 Copying requests as cURL commands

此外，我們還可以查看網(wǎng)絡(luò)請求的請求頭，響應(yīng)頭，已經(jīng)返回的內(nèi)容等信息，如下圖：

資源的詳細(xì)內(nèi)容有以下幾個：

HTTP request and response headers

Resource preview: 可行時進(jìn)行資源預(yù)覽；

HTTP response: 未處理過的資源內(nèi)容；

Cookie names and values: HTTP請求以及返回中傳輸?shù)乃蠧ookies；

WebSocket messages: 通過WebSocket發(fā)送和接收到的信息；

Resource network timing: 圖形化顯示資源加載過程中各階段花費的時間

Source

Sources面板幾乎是我最常用到的Chrome功能面板，也是在我看來決解一般問題的主要功能面板。通常只要是開發(fā)遇到了js報錯或者其他代碼問題，在審視一遍自己的代碼而一無所獲之后，我首先就會打開Sources進(jìn)行js斷點調(diào)試，而它也幾乎能解決我80%的代碼問題。Js斷點這個功能讓人興奮不已，在沒有js斷點功能，只能在IE（萬惡的IE）中靠alert彈出窗口調(diào)試js代碼的時代（特別alert一個object根本不會理你），那樣的開發(fā)環(huán)境對于前端程序員來說簡直是一場噩夢。本篇文章講會介紹Sources的具體用法，幫助各位在開發(fā)過程中夠愉快地調(diào)試js代碼，而不是因它而發(fā)瘋。首先打開F12開發(fā)工具切換到Sources面板中:

Sources功能面板是資源面板，他主要分為四個部分，四個部分并不是獨立的，他們互相關(guān)聯(lián)，互動共同實現(xiàn)一個重要的功能:監(jiān)控js在執(zhí)行期的活動。簡單來說就是斷點啦。

首先我們來看區(qū)域1，它的功能有些類似于Resources面板，主要是顯示網(wǎng)頁加載的腳本文件：例如css， js等資源文件（它不包含cookie，img等靜態(tài)資源文件）。

區(qū)域1的導(dǎo)航條上有三個tab切換選項，他們都存有不同域名和環(huán)境下的js和css文件，我們首先來說明Sources（資源）選項的作用:

Sources: 包含該項目的靜態(tài)資源文件。雙擊選中文件，該文件內(nèi)容會在區(qū)域2中顯示，如果你選中的是js文件，那么你可以在區(qū)域2種單擊行號進(jìn)行斷點調(diào)試，只要js執(zhí)行到了你所標(biāo)記的這一行，它會停止向下執(zhí)行并且等待你的命令:

從上圖可以看到j(luò)s執(zhí)行到斷點處時各個區(qū)域的變化，首先是區(qū)域3中的Breakpoints記錄信息會變高亮，然后是區(qū)域4中Scope 選項中列出了斷點處私有和公有的變量信息，這樣，我可以很直觀地知道，此時此刻js的執(zhí)行狀態(tài)。同樣的，你可以把鼠標(biāo)放到區(qū)域2種的某個變量上，瀏覽器會彈出一個小框框，框框里面則是你懸浮其上的變量所有信息:

然后，你可以按F10跟著js執(zhí)行的路徑一步一步地走下去，如果你遇到了一個函數(shù)包含著另外一個函數(shù)，那么你可以按F11進(jìn)入到個函數(shù)中去觀察它的代碼執(zhí)行活動。你也可以通過點擊區(qū)域1底部的各個圖標(biāo)對js代碼進(jìn)行跟蹤。不過我建議你使用快捷鍵，故名思義，因為它比較快捷方便。不過怎么用完全按照個人習(xí)慣來吧。下圖是各個按鈕的作用功能。

　在上圖藍(lán)色圓圈中數(shù)字，它們分別代表:

　　1、停止斷點調(diào)試

　　2、不跳入函數(shù)中去，繼續(xù)執(zhí)行下一行代碼（F10）

　　3、跳入函數(shù)中去（F11）

　　4、從執(zhí)行的函數(shù)中跳出

　　5、禁用所有的斷點，不做任何調(diào)試

　　6、程序運行時遇到異常時是否中斷的開關(guān)

接下來在區(qū)域4種切換到Watch Expressions 選項，它的作用是為目前斷點添加表達(dá)式，使得每次斷點往下走一步都會執(zhí)行你寫下的js代碼。需要注意的是這個功能必須謹(jǐn)慎使用，因為這可能會導(dǎo)致你寫下的監(jiān)控代碼段會不斷地被執(zhí)行。

為了避免你的調(diào)試代碼重復(fù)執(zhí)行，我們可以在調(diào)試時直接在console控制臺上一次性地輸出當(dāng)前斷點處的信息（推薦這樣做）。為了驗證我們在console面板中擁有的是當(dāng)前斷點環(huán)境，我門可以對比斷點執(zhí)行前后的this值變化。

如果你覺得在斷點的時候為了看一個變量必須借用console面板輸出的方式來查看會比較麻煩，那么你可以更新最新版的Chrome，它已經(jīng)為我們解決了這個煩惱。為了方便開發(fā)者調(diào)試，在這一點上谷歌已經(jīng)做到了極致，就在前幾天更新過Chrome以后，鹵煮意外地發(fā)現(xiàn)了斷點時監(jiān)控環(huán)境變量的另外一種方式，這種方式極為清晰，在斷點調(diào)試的時候，區(qū)域2中會自動顯示每個變量的值，每次代碼往下走的時候這個值都回時時更新。這讓開發(fā)者對當(dāng)前環(huán)境變量幾乎可以說是一目了然。（此功能有一個小缺陷，那就是無法查看數(shù)組或者對象的具體索引和值，不過我相信google會改進(jìn)它的。）

當(dāng)你的項目已經(jīng)線上，出現(xiàn)了一個bug，你修復(fù)了之后無法看到它真正在線上的效果，那么你可以在打開線上的項目，直接在瀏覽器中修改代碼然后看到效果。這樣的效果往往是最直接的，這種方法也能幫你省去頻繁驗證發(fā)布的麻煩，畢竟身為前端碼農(nóng)的你也一定會聽到過后臺（通常情況下是后臺發(fā)布）大哥的抱怨：“XXX，測試通過了沒，不要出現(xiàn)了哈，發(fā)布一次很麻煩的！”。而在Chrome里面，只需要在區(qū)域2種直接修改，你就可以驗證你的代碼在線上是否可行。鹵煮在此處只是指出該功能的用法之一。其他的就憑諸位的聰明才智去想了。

即使在斷點時，你也可以編輯代碼，按ctrl+S保存之后，你會看到區(qū)域2的背景由白色變?yōu)闇\色，而斷點會重新開始執(zhí)行。

回到區(qū)域1，Content script 選項開里面包含著一些第三方插件或者瀏覽器自身的js代碼,經(jīng)常它是被忽略的，實際上它的作用很少。我們可以更多關(guān)注一下Snippets選項。還記得基礎(chǔ)篇里面介紹的style嗎？在里面我們可以編輯界面的css代碼并且即時看到它們的映射效果，同樣地，在Sinppets中，我們也可以編輯（重寫）js代碼片段。這些片段實際上就相當(dāng)于你的js文件一樣，不同的是本地的js文件在編輯器里面編輯的，而此處，你是在瀏覽器中編寫的。這些代碼片段在瀏覽器刷新的時候既不會消失，也不會執(zhí)行，除非是你手動執(zhí)行它。它可以存在你的本地瀏覽器中，即使關(guān)閉瀏覽器，再次打開時它依然還在那里。它的主要作用可以使得我們編寫一些項目的測試代碼時提供便捷，你知道，如果你在編輯器上編寫這些代碼，在發(fā)布時你必須為它們添加注釋符號或者手動刪除它們，而在瀏覽器上編寫就不需要這樣繁瑣了。

在Snippets選項的空白處右鍵后選擇彈出的new選項，建立一個你自...

細(xì)說網(wǎng)頁開發(fā)者工具F12-前端開發(fā)利器一營銷視頻課程

Eric888

網(wǎng)頁開發(fā)者工具之 Elements

前言

寫這篇文章的目的主要是為了幫助前端小白，學(xué)習(xí)使用瀏覽器自帶的F12網(wǎng)頁開發(fā)者工具，來快速定位調(diào)試分析問題、解決問題。當(dāng)然這僅是作者的個人學(xué)習(xí)心得，有不足之處歡迎大家指點。由于篇幅有限，這篇文章僅介紹Elements。若覺得不錯請關(guān)注作者的后續(xù)更新。

如何在F12工具中定位元素

這里拿我的博客作為網(wǎng)頁、用Chrome谷歌瀏覽器作為例子。打開網(wǎng)頁，按下鍵盤上的F12鍵。點擊Elements欄，選擇body元素，如下圖：

1.左邊用半透明藍(lán)色覆蓋表示被選區(qū)域，仔細(xì)看左下角還有個標(biāo)志顯示元素名稱和寬高。

2.中部內(nèi)容就是Elements，即頁面元素?？磮D可以發(fā)現(xiàn)我們選擇了body元素

3.右側(cè)區(qū)域為Style，即css樣式,顯示的是被選元素對應(yīng)的css。這樣就非常方便我們調(diào)試樣式。

這里我們假設(shè)有個需求，需要右邊頭像的元素代碼和css演示。我們不需要右鍵查看源代碼（早期有些教程會使用這個方法）。

可以使用F12工具的左上角的指針工具

1.鼠標(biāo)左鍵單擊指針工具，單擊后工具會變?yōu)樗{(lán)色狀態(tài)

2.移動鼠標(biāo)到頭像上，你會發(fā)現(xiàn)自動出現(xiàn)藍(lán)色半透明選框。會顯示元素標(biāo)簽和寬高

3.點擊確認(rèn)后，你會發(fā)現(xiàn)中部Elements會自動定位到頭像代碼，右邊Style也會自動定位到頭像的css樣式

4.在中部選擇元素后，可以右鍵復(fù)制代碼。

5.在左側(cè)的Style面板中，點擊css右邊的css文件名也可以定位到個css文件中的具體位置

但是有些特殊的樣式需要鼠標(biāo)到達(dá)某一特殊位置的時候才會觸發(fā)，我們再去點指針的時候就會回到原位。（比如博客右側(cè)的小埋，需要鼠標(biāo)hover才能觸發(fā)）。

我們可以將鼠標(biāo)移上去后，按快捷鍵Ctrl+Shift+C直接使用指針工具。就可以獲取這些特殊樣式的css代碼

還有些時候，我們需要搜索頁面中的某些內(nèi)容。在中部Elements中使用Ctrl+F打開搜索框：

如圖我們搜索“一個好”就得到的想要的元素位置。

F12工具中的盒子模型

還有個東西這里提一下，選擇任意一個元素，在右邊的Style面板下拉倒最下面，都可以看到我們的盒子模型(網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。)

這里可以看出padding的值

這個是margin值

如何在F12工具中直接修改頁面

比如我們要修改下面這個標(biāo)題

直接在Element面板下，雙擊修改其文本的內(nèi)容（這里改成余額好多錢，是不是以后都不能相信截圖了）

接下來嘗試修改其css，我們選擇修改其字體顏色和大小

直接在Style面板下修改：顏色改成紅色，字體調(diào)大至32px。效果如下

我們也可以直接新加css元素，比如加個border(邊框)。

移動端開發(fā)

若是要調(diào)試移動端頁面怎么辦？

我們只要點擊指標(biāo)工具右邊的移動端工具就行，其他的和pc端一樣。效果如下：

最后的也是最重要的事

不要在他人電腦上不使用瀏覽器的記住密碼功能！不使用瀏覽器的記住密碼功能！不使用瀏覽器的記住密碼功能！不使用瀏覽器的記住密碼功能！

為什么？這里作者來舉個有道云筆記的栗子：

這是作者使用瀏覽器保密碼的有道云筆記的登錄頁面，你可以看到瀏覽器默認(rèn)給你填充好了賬號和密碼。密碼使用···號表示并不可見。

但是，我們打開F12工具:

用指針工具選擇密碼框。

只要將其input的輸入框的type=”password”值改為type=”text”，你的密碼就暴露無遺

希望這篇文章能給你帶來知識和樂趣，喜歡作者的文章可以點擊右上角關(guān)注哦()

超贊！不容錯過的5款實用網(wǎng)頁開發(fā)和設(shè)計工具流量視頻課程

赫訪琴

現(xiàn)如今，越來越多的移動和桌面端應(yīng)用開始應(yīng)用HTML、JS和CSS進(jìn)行開發(fā)，對于網(wǎng)頁開發(fā)和設(shè)計更是如此。目前這種局面也催生了更多新的網(wǎng)頁技術(shù)，包括React.js、Angular以及Node.js這樣的庫。此外，隨著需求及項目的進(jìn)一步細(xì)化，開發(fā)者社區(qū)幾乎每天都會出現(xiàn)新的庫和開發(fā)工具，作為網(wǎng)頁開發(fā)者或設(shè)計師的你，自然很有必要去了解和掌握當(dāng)下最新的、實用的工具，持續(xù)優(yōu)化工作方法、有效提高開發(fā)進(jìn)度。

以下小編收集了一系列優(yōu)秀的開發(fā)和設(shè)計工具，包括在線/離線搭站工具、開源代碼工具、在線代碼生成器、排版工具等，一起看看吧。

WordPress – 一站式網(wǎng)站搭建工具

· 價格：基礎(chǔ)版終身免費，個人版HK$30，高級版HK$63，商務(wù)版HK$199

· URL：https://zh-cn.wordpress/

· 推薦指數(shù)：★★★★★

WordPress – 一站式網(wǎng)站搭建工具

WordPress是使用PHP語言開發(fā)的博客平臺，支持PHP和MySQL數(shù)據(jù)庫的服務(wù)器上架設(shè)屬于自己的網(wǎng)站，也可以把它作為一個CMS（內(nèi)容管理系統(tǒng)）來架設(shè)商業(yè)網(wǎng)站，提供的功能包括：所見即所得的文章編輯器、多作者共同寫作、為搜索引擎而優(yōu)化的永久鏈接、生成和使用靜態(tài)頁面、Trackback/Pingback、會員注冊登錄等。

特色功能：

· 安裝方式簡單、易用，內(nèi)置許多搭站輔助工具，一鍵點擊即可完成安裝。

· 插件工具眾多，支持使用擴(kuò)充其功能，適合DIY豐富的網(wǎng)站內(nèi)容。

· 第三方開發(fā)的免費模板、主題豐富，各色各樣，應(yīng)有盡有！

· SEO搜索友好，收錄時間快。

· 強(qiáng)大的社區(qū)支持，成千上萬的開發(fā)者貢獻(xiàn)和審查WP，整個環(huán)境安全且活躍。

Mockplus – 更快、更簡單的Web/Mobile/Desktop設(shè)計平臺

價格：基礎(chǔ)版免費，個人版￥199/年，團(tuán)隊版￥999/年，企業(yè)版￥5999/年

URL：https://mockplus/

推薦指數(shù)：★★★★★

Mockplus –更快更簡單的設(shè)計平臺

作為國內(nèi)勢頭正猛的工具軟件，Mockplus（也叫摹客）適合軟件團(tuán)隊、個人在軟件開發(fā)的設(shè)計階段使用，交互快、設(shè)計快、演示快、上手快，很好地順應(yīng)了當(dāng)前敏捷開發(fā)（AgileDevelopment）的大趨勢。同時，秉承“關(guān)注設(shè)計，而非工具”的理念，摹客提供一系列獨家實用的功能，幫助用戶提高工作及開發(fā)進(jìn)度。

特色功能：

界面設(shè)計。組件開箱即用，提供項目和頁面模板、自定義組件庫、母版、組件樣式、格子、自動數(shù)據(jù)填充，讓設(shè)計快速復(fù)用。

團(tuán)隊協(xié)作。支持團(tuán)隊管理、角色設(shè)定和分組，可協(xié)作設(shè)計、分工編輯、多人審閱和評論、支持Sketch導(dǎo)入。

交互設(shè)計。拖拽鼠標(biāo)即完成交互設(shè)計，支持頁鏈接、組件交互、交互狀態(tài)、交互自動還原。

工作文檔。多種批注組件添加設(shè)計說明、頁面流程圖快速呈現(xiàn)業(yè)務(wù)邏輯，腦圖模式快速構(gòu)建頁面關(guān)系。

演示分享。隨時發(fā)布分享，提供8種演示方式，支持HTML在線預(yù)覽和離線包等多種導(dǎo)出方式。

Macaw – 革新性超前Web編輯器

· 價格：免費

· URL：http://macaw.co/

· 推薦指數(shù)：★★★★

Macaw – 革新性超前Web編輯器

Macaw是目前最熱門的開發(fā)工具之一，被網(wǎng)友戲稱為“金剛鸚鵡“。它是一款基于Mac平臺、支持語義HTML和簡潔CSS的Web開發(fā)軟件，可生成多分辨率頁。同時它也可以作為設(shè)計師的圖像編輯工具，提供實時的布局引擎，讓元素以類似AdobePS中的呈現(xiàn)方式進(jìn)行操作，通過編輯當(dāng)前的網(wǎng)頁圖片，最后生成HTML模板和JS代碼。

特色功能：

· 特定寬度功能，可以自動計算每行字符個數(shù)，也支持用戶指定的寬度，生成自適應(yīng)網(wǎng)頁布局。

· 組件庫功能，支持將自己設(shè)計的組件收藏和保存到庫，并拖拽到任意頁面中。

· 不同組件類別，可自己設(shè)計或者保存到指定的類別，并將它們快速應(yīng)用到整個文檔。

· 具備流計算所有必要的屬性（漂浮、清除等），并將元素作為靜態(tài)文件流。

Weebly – 主流Web開發(fā)及設(shè)計服務(wù)商

價格：基礎(chǔ)版免費，個人版8美金/月，Pro版12美金/月，商務(wù)版25美金/月

URL：https://weebly/

推薦指數(shù)：★★★★

Weebly – 主流Web開發(fā)及設(shè)計服務(wù)商

作為美國本土的一家自助建站服務(wù)商，Weebly使用了大量的Ajax技術(shù)，在操作性、用戶友好等方面做得很好，同類型的服務(wù)商還有Webs，Yola等，但像Weebly這樣針對中國用戶單獨增設(shè)中文網(wǎng)站的比較罕見。

特色功能：

· 拖拽實現(xiàn)編輯，無論是視頻、圖片、地圖和文章都能拖拽到網(wǎng)站中，無需HTML或其他網(wǎng)頁程序語言的支持，簡單且直觀。

· 專業(yè)模板設(shè)計直接使用，目前已有70個、且在持續(xù)增加中，如果懂HTML/CSS，可以直接用它們的編輯器來定制。

· 允許綁定個人的頂級域名，而且是綁定域名是免費的，直接提供IP地址即可，也可以在Weebly上購買域名。

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設(shè)計工具

價格：個人版$9.99-$82.99/月，商務(wù)版$33.99-$79.99/月

URL：https://adobe/products/dreamweaver.html

推薦指數(shù)：★★★★

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設(shè)計工具

相信不少做開發(fā)和設(shè)計的小伙伴對DW這款軟件并不陌生，它是集網(wǎng)頁制作和管理網(wǎng)站于一體的WYSIWYG網(wǎng)頁代碼編輯器，通過使用HTML、CSS、JavaScript等語言，程序員和設(shè)計師幾乎可以在任何地方快速制作和上線網(wǎng)站。支持Windows和Mac操作系統(tǒng)，對剛?cè)腴T初學(xué)者或者需要進(jìn)階的大神來說都是不錯的選擇。

特色功能：

· 自適應(yīng)網(wǎng)格，可使用CSS3自適應(yīng)網(wǎng)格版面，創(chuàng)建跨平臺和瀏覽器的兼容網(wǎng)頁設(shè)計，采用符合業(yè)界標(biāo)準(zhǔn)的代碼為各種不同設(shè)備和計算機(jī)開發(fā)項目。

· 實時視圖，支持再發(fā)布前測試頁面，采用最新版WebKit轉(zhuǎn)換引擎，提供絕佳的HTML5支持。

· “多平面預(yù)覽”面板，支持為智能手機(jī)、Tablet和個人計算機(jī)進(jìn)行設(shè)計，開發(fā)人員也可以通過其為各種設(shè)備設(shè)計樣式并實現(xiàn)渲染可視化。

結(jié)語

以上是小編力薦的網(wǎng)頁開發(fā)和設(shè)計工具，顯而易見每款工具都各有千秋，我們可以結(jié)合實際的開發(fā)需求和項目支持來做進(jìn)一步選擇：如果你擁有不錯的開發(fā)基礎(chǔ)、且想自己編代碼來搭站，那么Macaw和DreamWeaver都是不錯的選擇；如果你是開發(fā)新手或者小白、更需要完全成形的三方平臺來搭建網(wǎng)站，那么WordPress和Weebly都可以考慮；如果你更在意開發(fā)效率、網(wǎng)站功能以及資金預(yù)算，那么Mockplus是不二之選！

10個高超的web開發(fā)工具推廣視頻課程

申屠瑩

　　作為網(wǎng)絡(luò)開發(fā)人員，您必須使用最新的Web開發(fā)工具和技術(shù)來更新自己。在創(chuàng)建網(wǎng)站時，需要考慮的因素有很多。

　　網(wǎng)絡(luò)是不斷變化的，因此，您必須積極主動地學(xué)習(xí)新時代的技術(shù)、Web開發(fā)工具和資源。

　　繼續(xù)滲透到網(wǎng)絡(luò)上，找出開發(fā)成功網(wǎng)站的有效和高效的方式。

　　另外，確保你選擇了一套完美的工具，可以幫助你擁抱你的創(chuàng)造力，而不需要了解深入的編程和編碼技巧。

　　那么，如果你正在尋找一個網(wǎng)站建設(shè)者來創(chuàng)建最新版本的HTML，即HTML5，那么你需要閱讀這篇博文。

　　今天，我將分享一些最好的Web開發(fā)工具，這些工具將簡化Web設(shè)計和開發(fā)過程。那我們就開始吧。

　　1. BuilderEngine

　　BuilderEngine是一個簡單而直觀的Web開發(fā)工具，可讓您在幾秒鐘內(nèi)創(chuàng)建所有類型的網(wǎng)站。

　　對于網(wǎng)絡(luò)開發(fā)者和非技術(shù)熟練的用戶來說，這是一個理想的平臺，因為你不需要學(xué)習(xí)任何編碼技巧。您所需要做的就是立即注冊并啟動新的網(wǎng)站。

　　有一個免費的試用包，帶有模板主題和托管提供商。實際上，您可以從其不斷更新的應(yīng)用程序集中選擇加載項。

　　使用此工具，您可以輕松創(chuàng)建復(fù)雜的網(wǎng)站。

　　此外，如果您在Web開發(fā)過程中遇到困難，您將獲得強(qiáng)大的支持系統(tǒng)。為此，您需要使用論壇和票務(wù)支持系統(tǒng)。

　　2. Motion UI or Motion User Interface

　　運動用戶界面是一個Sass庫，用于制作響應(yīng)靈活和可擴(kuò)展的CSS轉(zhuǎn)換和動畫。

　　該工具幫助您快速輕松地創(chuàng)建動畫和CSS轉(zhuǎn)換。這是相對不太復(fù)雜的工具，可以讓你的應(yīng)用程序轉(zhuǎn)換看起來順利，有效，并與預(yù)定義的運動接合。

　　另外，Motion UI包括一個CSS文件包，以及大量現(xiàn)成的過渡和動畫，以及源Sass文件，讓您在幾分鐘內(nèi)創(chuàng)建自己的文件。

　　3. Jimdo

　　使用Jimdo直觀的網(wǎng)站制作工具，在幾分鐘內(nèi)建立一個專業(yè)的HTML5網(wǎng)站。

　　Jimdo是一個令人難以置信的網(wǎng)頁開發(fā)工具，可讓您按照您的需要，點擊幾下，自定義您的網(wǎng)站。

　　即使這樣，您也可以對流行的搜索引擎進(jìn)行優(yōu)化，而無需在編碼中弄臟手。

　　它配備了大量令人興奮的功能，包括照片庫，模板，存儲和無限帶寬，Google地圖集成等等，以幫助您輕松創(chuàng)建一個成功的網(wǎng)站。

　　4. Dunked

　　如果您是攝影師，設(shè)計師或任何創(chuàng)意藝術(shù)家，并尋找創(chuàng)造令人驚嘆的在線投資組合的工具，那么Dunked是您的理想解決方案。

　　它是一個簡單易用的平臺，提供響應(yīng)性的設(shè)計，讓您創(chuàng)建漂亮的在線投資組合，可以在多種設(shè)備和移動平臺上順利運行。

　　事實上，您可以從不斷更新的精心設(shè)計的模板集合中擇可自定義和像素完美的模板。

　　使用Dunked工具，您可以使用廣泛的自定義選項來編輯網(wǎng)頁設(shè)計的顏色，排版，布局和其他方面。

　　5. Silex

　　Silex是另一種令人興奮的Web開發(fā)工具，用于輕松創(chuàng)建具有視覺吸引力的網(wǎng)站。

　　它是一個免費的開放源代碼平臺，它包含一個簡單而直觀的所見即所得編輯器，可以幫助您將網(wǎng)站的不同方面融合在一起。

　　如果你對JavaScript和CSS很滿意，你可以通過在代碼中弄臟你的手來增加你的站點的風(fēng)格和交互性。

　　此外，您將獲得大量美麗的模板（免費和付費），無限的小部件和內(nèi)置的SEO。

　　6. Webflow

　　Webflow是一個多才多藝的網(wǎng)頁設(shè)計平臺,使您能夠設(shè)計、原型和創(chuàng)建響應(yīng)和互動網(wǎng)站,而無需編寫一行代碼。

　　如果您是新到Web開發(fā)部門的領(lǐng)域，您可以使用此平臺為您的業(yè)務(wù)創(chuàng)建一個用戶友好的站點。

　　它可以讓你創(chuàng)建一個響應(yīng)式網(wǎng)站，適用于所有移動設(shè)備，包括Android，iOS，黑莓等。

　　它是全功能的平臺，因為它是一個網(wǎng)頁設(shè)計工具和主機(jī)平臺，可以幫助你在幾秒鐘內(nèi)創(chuàng)建一個個性化的站點。

　　7. IM Creator

　　IM Creator是在幾分鐘內(nèi)創(chuàng)建漂亮，響應(yīng)，可擴(kuò)展和交互式HTML5的網(wǎng)站的簡單方式。自2011年推出以來，IM Creator已經(jīng)成為網(wǎng)路上最好的HTML5網(wǎng)站建設(shè)者之一。

　　該工具提供了一系列模板，從投資組合到企業(yè)模板，方便用戶定制網(wǎng)站。

　　這些模板是免費的，可定制的和響應(yīng)式的，可以讓您的在線業(yè)務(wù)達(dá)到一個新的水平。

　　8. Easy WebContent

　　Easy WebContent是一個了不起的HTML5網(wǎng)站制作工具，可讓您快速構(gòu)建漂亮的網(wǎng)站。您可以使用其先進(jìn)而強(qiáng)大的功能，以多種形式創(chuàng)建網(wǎng)站。

　　一旦注冊，您可以從大量的模板中選擇，以快速創(chuàng)建誘人的網(wǎng)站。

　　Easy WebContent中包含的所有模板均與多種移動平臺兼容，并可在所有瀏覽器上無縫運行。

　　此外，你可以把更多的顏色融入你的網(wǎng)站-因為你可以添加高分辨率的圖像，聲音剪輯，高清視頻等。

　　9. PrestaShop

　　創(chuàng)建高度互動的網(wǎng)上商店使用Prestashop。它是一個強(qiáng)大的開放源碼電子商務(wù)網(wǎng)站建設(shè)者，專注于建立一個完全成熟的網(wǎng)上商店輕松。

　　PrestaShop最棒的地方是它的默認(rèn)主題,幫助您為您的業(yè)務(wù)創(chuàng)建光滑和美麗的電子商務(wù)解決方案。

　　如果你想開始你的網(wǎng)上創(chuàng)業(yè)，你沒有深入的編碼知識，那么這個工具是你理想的選擇。

　　10. Moonfruit

　　選擇最合適的模板，你就準(zhǔn)備去創(chuàng)建一個漂亮的網(wǎng)上商店。

　　Moonfruit也是一個令人難以置信的電子商務(wù)網(wǎng)站建設(shè)者，可以幫助您免費創(chuàng)建一個網(wǎng)站。

　　總體而言，Moonfruit是一個響應(yīng)靈活，可定制和靈活的平臺，可幫助您為不同的設(shè)備和移動平臺創(chuàng)建視網(wǎng)膜準(zhǔn)備好的網(wǎng)站。

　　結(jié)論：

　　構(gòu)建網(wǎng)站是最具挑戰(zhàn)性的任務(wù)之一，特別是如果您是網(wǎng)絡(luò)開發(fā)行業(yè)的新興企業(yè)。在將網(wǎng)站用于個人或商業(yè)用途時，您應(yīng)該牢記各種因素。

　　在這些web開發(fā)工具的幫助下,你將能夠創(chuàng)建一個美麗、互動和可伸縮的網(wǎng)站效率。這些工具可以節(jié)省你的時間和幫助您快速輕松地構(gòu)建自己的令人印象深刻的網(wǎng)站。

　　也許你會喜歡

　　跟Alex學(xué)Python之- 2周搞定Django WEB開發(fā)實戰(zhàn)視頻課程

　　零基礎(chǔ)學(xué)java開發(fā)第一季（網(wǎng)站開發(fā)）視頻教程

　　全網(wǎng)首發(fā)：HTML5+CSS3速成實戰(zhàn)課程視頻教程【7天學(xué)會，上手實戰(zhàn)沒問題】