30個實用的網頁設計和開發工具

發表於2013-03-20

作為一位網頁設計師或開發者，你一直需要搜尋獲取強大的網頁設計工具。這能夠幫助你節約時間並完成工作。以下我們列舉了一系列優秀的工具，包括CSS、html generators、網頁維護工具、排版工具、網站模板以及線上程式碼生成器等。

看看一下三十種優秀網頁設計工具列表，它們可以幫助你在網頁設計與維護專案中節約時間。你也可以把它們設為書籤，以便便捷使用。

ExpanDrive 是一款能把SSH伺服器對映成Windows網路驅動器的伺服器本地對映工具，有了這款軟體，使用者可以方便地在本地進行刪除，編輯等操作，就像在本地硬碟上一樣方便。

線上網頁相容性測試工具，能夠對網頁進行多款瀏覽器的相容性除錯，以螢幕截圖的方式呈現測試結果，方便設計人員的頁面除錯。在該工具的首頁，列出了常見作業系統 (Linux, Windows, Mac OS, BSD) 下的各種瀏覽器列表，可以根據需要勾選。

3. Lightbox 2

一款很漂亮很有動感的lightbox外掛。原始檔壓縮包有jQuery及Mootools2種版本，而且每個版本都有黑白2種皮膚。該外掛支援單張圖片，一組圖片，gif動態圖片，HTML內容，IFrame內容，Ajax等內容的展示，會隨滾動條自動居中展示，效果很好。而且支援彈出層的震動效果。原始檔壓縮包裡還提供PSD檔案，大家可以自己修改。

4. Typeteste

Typetester是一款字型對比的線上應用程式，經過簡單的操作可以線上對比哪種字型更適合您的網站。

Typetester 支援使用您電腦上安裝的字型，完美支援中文而且您可以進行簡單的 css 樣式定義，是網頁設計中不可缺少的好幫手。Typetester 可以同時對比三種字型的顯示效果，並且顯示的方式包括標準、粗體、斜體、粗斜體、全大寫等10多種，通過簡單的列表方式一目瞭然的展示在您的螢幕上，您可以通過對比來檢視哪種顯示模式更加匹配您的網站頁面。

5. jQuery UI

jQuery UI 是以 jQuery 為基礎的開源 JavaScript 網頁使用者介面程式碼庫。包含底層使用者互動、動畫、特效和可更換主題的可視控制元件。我們可以直接用它來構建具有很好互動性的web應用程式。

6. Adobe kuler

Adobe Kuler是Adobe推出的基於Adobe Air的優秀的色彩配色軟體，Kuler能讓你對色彩知識有良好的掌控，在設計中做到遊刃有餘。使用需要先安裝Adobe Air平臺支援。

7. Smush.it

網頁圖片優化是網頁加速中非常重要的一步，對圖片進行壓縮，不僅能夠節約頻寬，並且加快網頁的速度。我們常用的圖片編輯軟體都可以在壓縮圖片。而使用 Smush.it 則可以大幅壓縮圖片，並且它還是一個無損的壓縮工具。Smush.it 不但支援本地上傳圖片，而且還支援網路路徑圖片獲取！

8. Clean AJAX

Clean一個開源的Ajax引擎，一組簡化AJAX開發的高階介面。

9. Web design library

這個網站的內容包括了免費的網頁設計指南、資訊、文章、評審建議。也提供模板交易服務。

10. Stripemania

Stripemania是一個簡單免費的Web 2.0工具，用於設計創造無縫的斜條紋。你可以選擇條紋的間距大小，也可以為所有的條紋新增顏色漸變效果。

11. Whatthefont

圖片中的字型字型識別是非常頭痛的事情，因為圖片的字型並沒有任何相關的資訊，非設計人員面對成千上萬的字型可能無從判斷。既然存在OCR技術，那麼就可以利用OCR直接對圖片中的字型進行識別。WhatTheFont，正是這樣一個線上英文字型字型識別網站。

12. Lorem Ipsum

Lorem ipsum是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。

13. Behance

Behance 是2006年創立的著名設計社群，在上面，創意設計人士可以展示自己的作品，發現別人分享的創意作品（上面有許多質量上乘的設計作品），相互還可以進行互動（評論、關注、站內簡訊等）。

14. Stylevault

Stylevault.net是一個網頁設計師可以展示自己的才能並獲得賦予靈感的地方。

15. Blueprint CSS

Bluprint 是一個 CSS框架，其目的在於縮短你的開發時間。易於使用的柵格、合理的排版、有效的外掛，甚至列印樣式表，這些優點成為給了使用者做專案的堅實基礎。

16. CleanCSS

CleanCSS是一個免費的CSS精簡壓縮工具，通過這個線上工具，可以將你的CSS檔案壓縮、優化成更精簡，這將大大提高你的網站的載入速度。進入CleanCSS後，你可以輸入要壓縮的CSS程式碼或是該CSS檔案的所在URL地址，然後選擇程式碼佈局和相應的精簡壓縮選項，最後點選生成即可。

17. Firebug

Firebug是firefox下的一個外掛,能夠除錯所有網站語言，如Html,Css等，但FireBug最吸引我的就是javascript除錯功能，使用起來非常方便，而且在各種瀏覽器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能還很強大，比如html,css,dom的察看與除錯，網站整體分析等等。總之就是一整套完整而強大的 WEB開發工具。

18. Zend Studio

Zend Studio 7.0是我們的專業PHP應用程式開發環境下的新生代產品。它的設計最大限度地提高開發人員的工作效率，使你開發和維護的程式碼速度更快，快速解決應用問題，並改善團隊協作。

19. Typeface.js

這個專案提供了一個字型的解決方案，你能使用任何字型顯示，不管客戶端是否安裝了這種字型，而且不使用Flash（sIFR使用Flash）。

typeface.js並不使用flash或者圖片，只是直接展示你希望使用的圖形化字型，你能使用typeface.js和寫普通HTML和CSS程式碼，就像你的訪問者在本機擁有這種字型一樣。這是一個正在發展的專案，但是已經擁有足夠的功能來渲染圖形化字型。

20. Color hunter

一個線上配色篩選工具。可以按照圖片來自動生成相應的不同調色盤，也就是配色方案。如果你想尋找某種風格的配色方案，可以在網站上方的搜尋區域進行相應的搜尋。

21. Browsercam

使用Browsercam需要一個昂貴的VNC客戶端。其提供超過70種瀏覽器，基於Linux, Win, Mac和移動裝置作業系統BlackBerry, Win Mobile等多種平臺的測試服務。Browsercam的收費有多種模式，支付費用由20到1000美元/月。不過，在Browsercam註冊後24 小時內是可以免費使用的。

22. Colour lovers

Colourlovers 是一個聚集了各種設計師和藝術家的國際化社群。他們通過瀏覽該網頁獲取顏色的靈感、想法和專業或個人專案的反饋資訊。COLOURlover的忠實成員建立顏色、調色盤和模板，以培養他們對於色彩搭配的興趣。

23. W3C Validator

The W3C 驗證器是一款由W3C提供的免費服務。它旨在對Web文件的有效性進行協助檢查。也可用於CSS驗證。

24. Deviantart

Deviantart 是網際網路上最大的藝術櫥窗之一。你可以在這裡尋求靈感。

25. WIX

免費的flash頁面建立工具。

26. Are my sites up?

Are my sites up 是一項簡單的服務，在你網頁出現問題時通知你。

27. pForm

HTML 表單線上製作器。