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

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

1.

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

· 價(jià)格：基礎(chǔ)版終身免費(fèi)，個(gè)人版HK$30，高級(jí)版HK$63，商務(wù)版HK$199

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

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

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

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

特色功能：

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

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

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

· SEO搜索友好，收錄時(shí)間快。

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

2.

Mockplus – 更快、更簡(jiǎn)單的Web/Mobile/Desktop設(shè)計(jì)平臺(tái)

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

URL：https://mockplus/

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

Mockplus –更快更簡(jiǎn)單的設(shè)計(jì)平臺(tái)

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

特色功能：

界面設(shè)計(jì)。組件開箱即用，提供項(xiàng)目和頁(yè)面模板、自定義組件庫(kù)、母版、組件樣式、格子、自動(dòng)數(shù)據(jù)填充，讓設(shè)計(jì)快速?gòu)?fù)用。

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

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

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

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

3.

Macaw – 革新性超前Web編輯器

· 價(jià)格： 免費(fèi)

· URL：http://macaw.co/

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

Macaw – 革新性超前Web編輯器

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

特色功能：

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

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

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

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

4.

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

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

URL：https://weebly/

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

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

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

特色功能：

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

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

· 允許綁定個(gè)人的頂級(jí)域名，而且是綁定域名是免費(fèi)的，直接提供IP地址即可，也可以在Weebly上購(gòu)買域名。

5.

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

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

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

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

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

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

特色功能：

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

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

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

結(jié)語

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

大數(shù)據(jù)文摘作品

編譯：趙逸云、GAO Ning、荊浩男

博客真的很好用！它不僅可以成為你的創(chuàng)意來源，而且如果你想成為一名獨(dú)立開發(fā)者，它可能成為你銷售產(chǎn)品的平臺(tái)。當(dāng)然它也可以只是一個(gè)簡(jiǎn)單的展示你的想法的工具。

我寫博客已經(jīng)十一年了，雖然是斷斷續(xù)續(xù)地更新——而且有時(shí)候確實(shí)停了很長(zhǎng)的一段時(shí)間。最近整理了一下我的博客，并打算堅(jiān)持寫下去——是真正的堅(jiān)持：每天都寫一點(diǎn)東西。對(duì)我而言，已經(jīng)受益良多。

在經(jīng)營(yíng)博客的過程中，我找到了自己的使命：幫助開發(fā)新人學(xué)習(xí)前端開發(fā)。每天，我都會(huì)在我的博客flaviocopes中更新教程，介紹關(guān)于某方面我所了解的全部知識(shí)。如果你對(duì)JavaScript或者網(wǎng)頁(yè)開發(fā)感興趣，千萬別錯(cuò)過它！

接下來是我關(guān)于博客的一些想法：關(guān)于為什么每個(gè)開發(fā)者都應(yīng)該有博客，并且如何堅(jiān)持寫下去。

前提：一些我想讓你忘掉的東西

“我不是專家啊”

每個(gè)人在任意一件事上都有一個(gè)獨(dú)特的視角和看法，值得與他人分享。你可能會(huì)覺得你不如甲知道得多，但可能乙比你知道得還要少。那么對(duì)乙而言，他可能會(huì)從你的想法和經(jīng)驗(yàn)里收獲很多。

而且傳授知識(shí)的最好時(shí)機(jī)，就是在你剛掌握它們之后，因?yàn)榇藭r(shí)的你仍然記得對(duì)它們手足無措時(shí)的感受。

在這種情況下，你可以用剛學(xué)到一些知識(shí)的學(xué)生的語氣來寫博客。我每天都會(huì)學(xué)一些新東西，博客里有50%的內(nèi)容是我在研究某個(gè)主題學(xué)到新東西后立馬寫下的。

“我不是一個(gè)好的作者”

我本來就不是一個(gè)好的作者，但是我不在乎。

請(qǐng)牢記：除非連續(xù)數(shù)年每天堅(jiān)持寫作，否則你永遠(yuǎn)也不可能成為一個(gè)好的作者。相信自己，最終一定能成為一名優(yōu)秀的作者。

“我害怕被人批評(píng)”

的確，在互聯(lián)網(wǎng)上人們肆無忌憚地對(duì)事情發(fā)表苛刻的觀點(diǎn)，比如眾所周知的Reddit和Hacker News，但這是好事。

如果沒有挑戰(zhàn)，就不會(huì)有成長(zhǎng)。而且如果你不想，沒有人可以強(qiáng)制你在那兒發(fā)帖。如果你擔(dān)心有人會(huì)對(duì)有爭(zhēng)議的帖子發(fā)表刻薄的評(píng)論，刪掉那些評(píng)論就好啦。

對(duì)開發(fā)者而言：寫作的益處

你可以學(xué)得更快

最好的學(xué)習(xí)方法之一就是動(dòng)手去做。從字面上先選擇一個(gè)自認(rèn)為了解的主題，然后通過學(xué)習(xí)一些不了解的知識(shí)，甚至從來沒想過的內(nèi)容，然后螺旋狀逐步深入學(xué)習(xí)。

有人說，只有當(dāng)你能夠把它明白地解釋出來，你才是真正的理解了這個(gè)主題。博客就是用來解釋知識(shí)的一個(gè)門檻相對(duì)較低的平臺(tái)。

你可以開啟自己的職業(yè)生涯

多虧了博客，我才開啟了我在軟件方面的職業(yè)生涯。

2017年，在大學(xué)的課業(yè)項(xiàng)目中，我需要搭建一些網(wǎng)站應(yīng)用，基于過程中學(xué)到的一些零零散散的知識(shí)，我開始了自己的博客分享之旅。

通過這個(gè)博客，我開啟了自己即將成為自由職業(yè)者和承包商的職業(yè)生涯。

那個(gè)舊的博客已經(jīng)不見了——很久以前我就沒有再更新它，里面的內(nèi)容也早已過時(shí)。但是如果沒有它，我絕不會(huì)想到有朝一日，我能在剛踏出校園時(shí)就能有自己的事業(yè)。

你可以調(diào)整技術(shù)方向

在博客寫作中我做過幾次方向調(diào)整。如果專注于某種技術(shù)的同時(shí)，發(fā)現(xiàn)自己對(duì)另外的一些知識(shí)感興趣，我也會(huì)另寫幾篇關(guān)于它們的文章。

舉個(gè)例子，去年夏天，我花了兩個(gè)月時(shí)間深入學(xué)習(xí)Go編程。然后我收到了工作的offer。關(guān)鍵是我并沒有進(jìn)行申請(qǐng)，僅僅是因?yàn)樗麄兛吹搅宋以诰€分享的博客內(nèi)容。

技術(shù)博客成功的關(guān)鍵因素

保持博客主題一致

我從不訂閱沒有主要關(guān)注點(diǎn)的博客。就我而言，我討論的是前端開發(fā)的內(nèi)容，因此訂閱了一些其他關(guān)于前端開發(fā)的博客。

去年夏天我討論了很多關(guān)于Go的內(nèi)容，Go對(duì)于前端開發(fā)者來說，也是他們很感興趣的內(nèi)容（如果你有機(jī)會(huì)的話去學(xué)Go吧，這個(gè)編程語言讓人耳目一新）。但也不要試圖分享你想到的一切——保持專業(yè)。

持續(xù)更新

如果你計(jì)劃每周發(fā)布一篇博客，請(qǐng)堅(jiān)持做下去。當(dāng)然一周兩次可能會(huì)更好?，F(xiàn)在我堅(jiān)持每天寫，因?yàn)槲抑廊绻坏┰试S自己某天停更，接下來我就會(huì)不斷地允許自己休息，如此下去，我可能就很難再有更新了……

提前寫好你想發(fā)布的內(nèi)容

不要在打算更新博客的那天再開始寫。提前一周寫好它們，或者更早。這樣即使你打算休息幾天，或者生病等等，你也不會(huì)輕易地錯(cuò)過博客更新日。

提前發(fā)布也是個(gè)好方法。WordPress可以非常簡(jiǎn)單的實(shí)現(xiàn)這個(gè)功能，即使是靜態(tài)博客也可以使用（這是我用Netlify和Hugo做的）。制定一個(gè)具體的時(shí)間表，安排好寫博客的時(shí)間，然后堅(jiān)持下去。

做一個(gè)想法記錄表

James Altucher說過，每天記下10個(gè)點(diǎn)子，那么一年就有3650個(gè)點(diǎn)子了，總會(huì)有一些會(huì)成為好的點(diǎn)子。

對(duì)于在博客文章的主題而言，這個(gè)方法同樣適用。列一張關(guān)于博客文章的想法清單。當(dāng)你有靈感的時(shí)候，你將會(huì)將作品呈現(xiàn)得非常完美。

多讀書，閱讀博客，刷Twitter，收聽播客

在你想寫的主題上要保持與時(shí)俱進(jìn)。比如我的博客主要是關(guān)于軟件開發(fā)的，而Twitter上有源源不斷的和軟件開發(fā)相關(guān)的創(chuàng)意和想法，書和博客也是如此。媒介的力量是驚人的。

播客有些不同，因?yàn)樗怯脕砺牭?。我通常是在開車時(shí)，或是外出遛狗的半天時(shí)間里去聽。

早起

設(shè)置鬧鐘督促自己早起，然后開始寫作。之前我都是早上8點(diǎn)才起床，因?yàn)槲也恍枰s早高峰（遠(yuǎn)程工作）?，F(xiàn)在我早上6點(diǎn)起床，8點(diǎn)之前就能寫完下周的新博文。當(dāng)你完成了一項(xiàng)任務(wù)，比如8點(diǎn)之前創(chuàng)作好了一篇新的文章，你會(huì)超有干勁地對(duì)待接下來的一整天。

阻止分心

當(dāng)你為了寫一篇博文在網(wǎng)站上查資料時(shí)，很容易跳轉(zhuǎn)到一些讓人分心的網(wǎng)站。我在Mac上使用SelfControl軟件來防止這種情況，而且我不能禁用這個(gè)阻止程序。

在自己的平臺(tái)上寫作

在你自己的平臺(tái)上寫作！在你自己的平臺(tái)上寫作！在你自己的平臺(tái)上寫作!重要的事情說三遍。使用其它平臺(tái)轉(zhuǎn)載，可以獲得更大的影響力。

放眼未來，你發(fā)布的每篇文章在接下來的十年里都可能有成千上萬的訪問者。也許不是，但也許下一次谷歌最喜歡并貼上#1的爆文可能就是你的文章。

不要只在別人的平臺(tái)上寫作：你不曾擁有他們，他們甚至可能會(huì)倒閉（時(shí)有發(fā)生）或者停止服務(wù)，你將從此失去你的心血。

尋找觀眾

這與前面的觀點(diǎn)是一致的。在剛開始的時(shí)候，即使你很積極地分享你的博文，每天的訪問量可能也只有為10。（除非你在一些類似Reddit或者Hacker News的分享平臺(tái)上努力頂貼）。

通過搜索引擎，你的博客流量會(huì)持續(xù)增長(zhǎng)，但這就像是一個(gè)很長(zhǎng)期的投資。如果你充滿激情的文章不為別人所知的話，你很容易灰心。

所以，找到屬于你的觀眾。在自己的博客上寫好文章后，把文章導(dǎo)入到一些媒介平臺(tái)上（給它加上標(biāo)簽，避免激起谷歌對(duì)重復(fù)內(nèi)容的憤怒），或者想辦法在一些有規(guī)模的刊物上發(fā)行。出版社渴望新的內(nèi)容，因?yàn)樗麄冃枰獫M足一批讀者?？赡芩麄冋趯ふ业?，就是你。有了早期的觀眾，將會(huì)增加你的熱情和決心。最后，記得在文章里加上你的博客鏈接注明出處。

積極營(yíng)銷

在你點(diǎn)擊“發(fā)布”的時(shí)候，你已經(jīng)完成了50%的工作：你有自己的想法，也完成了主題研究和實(shí)際寫作，也找出了拼寫錯(cuò)誤，有了適合的配圖……現(xiàn)在需要做的，就是宣傳你的文字。即使你的Twitter只有一個(gè)粉絲，也要將其在Twitter上發(fā)布出來，同時(shí)要積極尋找另外的途徑讓你的博客更廣為人知。

一些社交平臺(tái)可能會(huì)很歡迎你的自我宣傳，但具體要取決于它的規(guī)則。

博客是個(gè)人專屬媒體平臺(tái)

幾周前我在Hacker News看到了這句話：

不要僅僅把它當(dāng)做一個(gè)博客。要把它看成你的專屬媒體平臺(tái)，唯一的目的是為了銷售做推廣。

這句話可以說是非常中肯了。我保存了它并打算每個(gè)月都重讀一次。

說是銷售可能會(huì)讓你不舒服，但你可以想成在出售一些想法，或者售賣你自己的專業(yè)知識(shí)、自我營(yíng)銷。

設(shè)立一個(gè)電子郵箱列表

講真。RSS并未消逝，但只有少部分人在使用了。 現(xiàn)在，如果你在Twitter或Medium上沒有關(guān)注者，那么你只有自己的電子郵件列表了。我推薦你使用TinyLetter，因?yàn)樗僮骱?jiǎn)單，而且免費(fèi)，你值得擁有。

不要在乎設(shè)計(jì)

當(dāng)你對(duì)設(shè)計(jì)毫無興趣的時(shí)候，就選最簡(jiǎn)單的主題就好了。大道至簡(jiǎn)。

博客不是要寫你自己

讀者們并不在乎你是誰，他們來到你的博客無非是期望你能幫他們解決某個(gè)具體的問題（如果他們是從谷歌搜索跳轉(zhuǎn)過來的話），或者他們希望能夠從你的博客里學(xué)到些有用的知識(shí)，可以幫助他們做一些事情。所以，請(qǐng)為了幫助他們而寫作吧！

避免彈窗和廣告

不要有彈窗。如果你將開發(fā)人員作為你的目標(biāo)讀者，那么它們真的一點(diǎn)兒用都沒有，因?yàn)閺棿罢娴暮軣┤?，并且谷歌可能?huì)為此而降低你的搜索結(jié)果排名。

同時(shí)，不要在你的網(wǎng)頁(yè)上放廣告。因?yàn)檫@些廣告通常非常糟糕，除非你每天都有成千上萬的閱讀量，否則不要放廣告，因?yàn)檎娴牟恢担?/p>

如果你使用的是第三方服務(wù)，請(qǐng)檢查下相關(guān)的一些功能。因?yàn)橐话闱闆r，除非是付費(fèi)用戶，否則它會(huì)向其他未登錄該平臺(tái)的用戶展示廣告。

不要讓你的博客“積灰”

如果你新建了一個(gè)博客，那么在發(fā)布一篇文章前，請(qǐng)準(zhǔn)備好另外幾篇待發(fā)文章。

不要長(zhǎng)時(shí)間徘徊在這些文章上——給他們排個(gè)隊(duì)，然后依次發(fā)布。設(shè)定一個(gè)發(fā)布時(shí)間表，堅(jiān)持下去，永不放棄。

有些博客上每年只有3、4篇文章，或者已經(jīng)被遺棄。想想這些博客的主人在建立這個(gè)博客之初的種種暢想，這真是一件很難過的事情。這些夢(mèng)想從來沒有被實(shí)現(xiàn)，而博客就這樣被留了下來，孤獨(dú)著，與主人漸行漸遠(yuǎn)。

不要讓你的博客和它們一樣沉淪下去。