分類


關注我們

網頁設計教學

Tuts+ Web Design

Tuts+ Web Design

Tuts+ 是一個老牌的設計教學網站,包含平面設計、網頁設計、程式開發等等的大量教學。

詳細資訊 立即前往

W3School

W3School

W3School 是一個非常完整,且內容遵循最新標準的網頁前端知識庫,所有的 HTML / CSS / JavaScript 基本語法都能在這裡找到。 網站內也有語法教學與線上測試工具。

詳細資訊 立即前往

W3School 在線教程

W3School 在線教程

同樣也是大量收錄網頁語法資源的網站,但是簡體中文版。

詳細資訊 立即前往

Codecademy

Codecademy

最有名的網頁設計與開發線上學院,可以從基礎 HTML & CSS 開始學起,註冊後網站即會提供自動化課程線上操作。

詳細資訊 立即前往

Khan Academy 可汗學院

Khan Academy 可汗學院

一個專門提供各類專領域線上教學的平台,其中也包含 Computer Programming 的系列課程,有不少前端程式的教學。

詳細資訊 立即前往

Treehouse

Treehouse

另一個主打網頁設計與網頁開發語言的線上學習平台,課程內容包含 CSS3, RWD, HTML5, JavaScript 與 iOS 開發等等。

詳細資訊 立即前往

Javascript 庭院

Javascript 庭院

完整介紹 Javascript 各種奇異特性,並給予讀者開發引導的網站,內有中文版可選擇。

詳細資訊 立即前往

網頁設計靈感

Dribbble

Dribbble

最有人氣的設計靈感網站,許多神級設計師會將自己的作品上傳這個網站分享給大家,是挖寶的好地方。

詳細資訊 立即前往

Behance

Behance

近年來非常火紅的作品集網站,整體素質水準非常高,常常有令人驚豔的作品出現。

詳細資訊 立即前往

UI 中國

UI 中國

非常專業的網頁與介面設計師交流平台,有許多不錯的商業設計案例。

詳細資訊 立即前往

The Design Inspiration

The Design Inspiration

每日分享各類創作主題,有設計、插畫、LOGO、名片與網頁等等,非常豐富。

詳細資訊 立即前往

Media Queries

Media Queries

蒐集各類 RWD 響應式網站的設計案例,網站收錄內容經過嚴選,每個作品都非常優秀。

詳細資訊 立即前往

Star Gallery 星辰網頁蒐藏

Star Gallery 星辰網頁蒐藏

Star Gallery 星辰網頁蒐藏是由 Allstars 所經營建置的網站設計資料庫。

詳細資訊 立即前往

Best Web Gallery

Best Web Gallery

蒐藏許多網頁設計、CSS 模版或CMS模版參考的網站,收錄的作品都很有獨特風格。

詳細資訊 立即前往

Awwwards

Awwwards

這個網站定期蒐集優秀的網站設計案例,並交由網友們投票,選出得獎者,是追蹤最新網頁設計趨勢的重要平台。

詳細資訊 立即前往

siteinspire

siteinspire

此網站蒐集的大多是具有質感的形象或廣告網站,很適合做企業形象的設計者前來參考。

詳細資訊 立即前往

Collect UI

Collect UI

提供許多精美的 UI 設計案例參考與靈感啟發,蒐藏的作品設計水準不錯,很有獨特風格。

詳細資訊 立即前往

User Onboarding Teardowns

User Onboarding Teardowns

各大產品的 Onboarding 設計參考。

詳細資訊 立即前往

CSS 前端框架

Bootstrap

Bootstrap

最知名的 CSS 框架,被全世界廣泛的使用,可以用簡單的語法製作各種頁面排版、按鈕與表單特效等,適合作為各類 Web UI 介面的底層。

詳細資訊 立即前往

Uikit

Uikit

由 YOOTheme 出品的另一套強大的 CSS 框架,功能更多更完整,且在部分元件的間距編排上比 Bootstrap 更優美,適合作為形象佈景的底層框架。

詳細資訊 立即前往

Foundation

Foundation

由 Zurb 出品的老牌 CSS 框架,在全世界也有許多使用者,在部分技術上比 Bootstrap 更難掌握一些,但靈活性也更強大。

詳細資訊 立即前往

Semantic UI

Semantic UI

強調要以非常語意化的語法來編寫 Web 介面的框架,其語法都較長也較繁瑣,盡量避開無意義或難懂的簡寫。

詳細資訊 立即前往

Flat UI

Flat UI

Flat UI 是一款基於 Bootstrap 的扁平化前端 UI 工具包,設計非常清新且漂亮,可以給原本的 Bootstrap 耳目一新的感受。

詳細資訊 立即前往

Pure CSS

Pure CSS

由 Yahoo 出品的 CSS 框架,結構簡單小巧,外型也很清新。不過功能也真的非常簡潔,需要自行編寫更多功能上去。

詳細資訊 立即前往

Bootstrap Material

Bootstrap Material

將 Bootstrap 轉成 Google Material Design 風格的前端框架。

詳細資訊 立即前往

Susy

Susy

標榜用 Compass 編寫的 CSS 框架,可以大幅增進開發速度。

詳細資訊 立即前往

Skeleton

Skeleton

超級簡潔的 CSS 框架,如同其名一樣,只給你最簡單的功能,讓你自行描繪網站的輪廓。

詳細資訊 立即前往

網頁設計素材

Material Design Icons

Material Design Icons

由 Google 出品的 Material Design 專用圖示集。

詳細資訊 立即前往

Freepik

Freepik

充滿大量圖像設計素材的搜尋引擎,有不少向量圖型可以下載來使用。

詳細資訊 立即前往

Sketch App Sources

Sketch App Sources

專門提供 Sketch 軟體可用模版與素材的網站,收錄許多美麗的樣板。

詳細資訊 立即前往

Freebiesbug

Freebiesbug

收藏各類免費網頁與UI設計的素材,有 PSD, AI, Sketch, 程式片段與 Web Font 等等相關資源。

詳細資訊 立即前往

Flaticon

Flaticon

非常多扁平化 Icon 圖示可以使用 ,適合作為介面設計的圖示來源。

詳細資訊 立即前往

FontAwesome

FontAwesome

很有名的字型圖示的提供者,有大量且完整的向量圖型文字可以選擇。

詳細資訊 立即前往

IcoMoon

IcoMoon

另一個知名的圖示字型提供者,同樣也是可縮放與變色的向量圖示。

詳細資訊 立即前往

IconFinder

IconFinder

老牌圖示搜尋引擎,收錄大量的付費與免費圖示,使用前請注意各個作者的授權規範。

詳細資訊 立即前往

Unsplash

Unsplash

老牌的 CC0 圖片提供者,每週更新十張圖片,其選的圖片都很空靈、優美,充滿意境,適合作為大橫幅圖片使用。

詳細資訊 立即前往

Pexels

Pexels

一個 CC0 圖片搜尋引擎,收錄了許多網站的 CC0 圖片,並用 tag 分門別類,方便尋找想要的圖片。

詳細資訊 立即前往

Pixabay

Pixabay

非常大量的 CC0 圖片,除了各家分享的高品質 CC0 圖片外,也包含不少基本的去背物品等圖片,適合用在商業文章或企業簡介中。

詳細資訊 立即前往

Visualhunt

Visualhunt

非常大量的 CC 授權圖片,不只有 CC0 而已,也另外蒐集了其他不同的 CC 授權圖片,因此能找到的題材更為多樣化。但非 CC0 的圖片記得要注意授權條款喔。

詳細資訊 立即前往

Creative Market

Creative Market

許多高水準的平面設計與網頁設計素材,各類特殊設計字體等,免費與付費皆有。

詳細資訊 立即前往

Freebbble

Freebbble

將 Dribbble 上許多設計師分享的免費素材檔案分門別類整理起來,包括 HTML/CSS、背景、圖示集、字型、PSD、使用者介面、網站模版等等。

詳細資訊 立即前往

Kit8

Kit8

來自莫斯科的設計工作小組 Kit8 善於設計扁平化風格的插圖,您可以根據自己的設計需求購買圖片並下載。

詳細資訊 立即前往

UnDraw

UnDraw

可商用扁平化圖示免費下載!適合用於網站、應用程式或簡報設計

詳細資訊 立即前往

模版蒐集

Start Bootstrap

Start Bootstrap

各類免費又優質的 Bootstrap 佈景主題,可直接下載來修改使用,適合形象網站。

詳細資訊 立即前往

Bootswatch

Bootswatch

提供各種經過調整顏色的 Bootstrap 版本,可以套用在已有的 Bootstrap 網站上,令人耳目一新。

詳細資訊 立即前往

Bootstrap Bay

Bootstrap Bay

提供付費 Bootstrap 佈景的網站,前後台界面都有,每個佈景風格迴異且多樣化。

詳細資訊 立即前往

WrapBootstrap

WrapBootstrap

提供付費 Bootstrap 佈景的網站,品質非常優良,包含形象網站布景與高規格的後台介面佈景,很適合系統開發使用,

詳細資訊 立即前往

Templated

Templated

提供各類純 CSS 模板下載使用,風格也是以形象網站為主。

詳細資訊 立即前往

ThemeForest

ThemeForest

知名的佈景主題販賣平台,匯聚各家佈景,設計水準優良。無論要 CSS 模板、CMS模板還是各類設計用素材都有販售。

詳細資訊 立即前往

網站產生器

Wix

Wix

一款給不會寫網頁程式但又有網站需求的線上個人架站服務。

詳細資訊 立即前往

Weebly

Weebly

一款給不會寫網頁程式但又有網站需求的線上個人架站服務。

詳細資訊 立即前往

SquareSpace

SquareSpace

一款給不會寫網頁程式但又有網站需求的線上個人架站服務。

詳細資訊 立即前往

Jekyll

Jekyll

最知名的靜態網站產生器,GitHub 官方就是以這一套為範例,需在 Ruby 環境運行。

詳細資訊 立即前往

Sculpin

Sculpin

PHP 語言的靜態網站產生器,功能強大,但操作也較為複雜,由 Symfony 框架驅動。

詳細資訊 立即前往

Vaseman

Vaseman

PHP 製作的 Prototype 工具與靜態網站產生器,也可以製作超簡易動態網站,操作簡單,可以很快就上手,適合做小型文件網站或是系統 Prototype。

詳細資訊 立即前往

StaticGen

StaticGen

更多不同語言的靜態網站產生器可供參考

詳細資訊 立即前往

Static Site Generators

Static Site Generators

更多不同語言的靜態網站產生器可供參考

詳細資訊 立即前往

Brix.io

Brix.io

一款 Bootstrap 線上編輯器,功能強大,可以支援團隊一同協作。

詳細資訊 立即前往

JetStrap

JetStrap

一款 Bootstrap 線上編輯器,功能強大,可以支援團隊一同協作。

詳細資訊 立即前往

前端開發與設計工具

Fire.app

Fire.app

由台灣人開發的強大HTML頁面產生器,可以高效率的進行前端開發與設計工作,自動整合許多流程。

詳細資訊 立即前往

Sketch

Sketch

Sketch 是一款輕量化但功能強大的介面繪製工具,比起 Photoshop 的繁瑣,Sketch 非常完美的整合 UI、Icon、與螢幕顯示元素的設計工作,讓設計師可以更有效率的工作。

詳細資訊 立即前往

Lunacy

Lunacy

Lunacy 是一套可以相容並打開 Sketch 檔案的 UI 繪製工具,雖然目前功能較少一些,但是 Sketch 在 Windows 上不錯的替代用品。

詳細資訊 立即前往

Zeplin

Zeplin

可以跟 Sketch 整合,工程師與設計師溝通版面的好用工具。

詳細資訊 立即前往

Avocode

Avocode

Avocode 是一款 photoshop 增強功能,主要用於將圖層屬性轉換成 CSS 樣式查看,只需點擊即可顯示和預覽圖層的樣式、字體、顏色等等,查看圖層 CSS 變得很方便。

詳細資訊 立即前往

Grunt

Grunt

一款將前端開發工作流程整合的工具,可以自動化編譯、壓縮與處理前端專案的 CSS, JS, Script 等等。

詳細資訊 立即前往

Gulp

Gulp

一款將前端開發工作流程整合的工具,可以自動化編譯、壓縮與處理前端專案的 CSS, JS, Script 等等,是繼 Grunt 之後的後起之秀。

詳細資訊 立即前往

LiveReload

LiveReload

可以跟瀏覽器整合,每次編輯儲存之後就自動刷新網頁頁面的工具。

詳細資訊 立即前往

SEO 檢測工具

夏木樂 Google / Yahoo 關鍵字排名查詢

夏木樂 Google / Yahoo 關鍵字排名查詢

這個網站可以快速的輸入關鍵字與要偵測的網址,就能知道這個網址在Google與Yahoo中特定關鍵字的排名狀況。還可以將這個查詢結果頁面分享給其他人看。

詳細資訊 立即前往

台灣網站登錄目錄 關鍵字排名查詢

台灣網站登錄目錄 關鍵字排名查詢

這是比較早期的排名查詢工具之一,也是簡單的輸入網址與關鍵字就能查詢Google與Yahoo的排名囉。除此之外這個網站還能偵測網站的 PageRank 值。

詳細資訊 立即前往

CuteRank

CuteRank

CuteRank 是桌面軟體,安裝起來後可以查詢多種搜尋引擎的排名,包含 Google / Yahoo / AOL 等等,可以選擇搜尋特定國家地區的排名,還能互相比較,是一套蠻完整的查詢工具。

詳細資訊 立即前往

Facebook Open Graph 檢測器

Facebook Open Graph 檢測器

這個工具可以協助您檢查網頁的原始碼,幫您診斷網站是否合乎FB規範 , 並做出改進建議。

詳細資訊 立即前往

Google 網站管理員工具

Google 網站管理員工具

Google 提供的網站內容分析工具,可以得知自己網站的搜尋分析與收錄狀態,也可以測試 Google 是怎麼觀看你的網站的。

詳細資訊 立即前往

Google 網頁速度檢測器

Google 網頁速度檢測器

PageSpeed Insights 會分析網頁內容,並提供如何加快網頁載入速度的建議。

詳細資訊 立即前往

Google 行動裝置相容性測試

Google 行動裝置相容性測試

Google 所提供的行動裝置相容性測試工具可以幫助網站設計者測試自己的網站是否適合手機瀏覽,並且列出各種問題與改善方案。

詳細資訊 立即前往

夏木樂 RWD 檢測工具

夏木樂 RWD 檢測工具

此網站可以輸入網址後,協助您用各種不同裝置的螢幕大小來檢視自己的網站。

詳細資訊 立即前往

瀏覽器外掛

Viewport Resizer

Viewport Resizer

一個書籤 RWD 檢測工具,可以快速測試某個網站在多種螢幕裝置下的檢視效果。

詳細資訊 立即前往

WhatFont

WhatFont

(Chrome) 立即檢視頁面上的網頁字體是什麼,只需要將滑鼠游標懸停在網頁中字體的上方,就可以瞭解該字體的相關信資訊。

詳細資訊 立即前往

Chrome Sniffer

Chrome Sniffer

(Chrome) 快速了解一個網站的技術資訊,例如主機程式、CMS 類型、還有用了哪些前端框架等等。

詳細資訊 立即前往

SEO SERP

SEO SERP

(Chrome) 可以讓你快速檢查關鍵字在網站中的位置。

詳細資訊 立即前往

SEO SERP Workbench

SEO SERP Workbench

(Chrome) 快速檢查關鍵字在多個網站中的位置,支持多個國家。

詳細資訊 立即前往

Open SEO Stats

Open SEO Stats

(Chrome) 顯示當前網頁的 Google PageRank、Alexa、Compete、Quantcast 排名,以及 IP 位置、Whois、SNS、Cache、backlinks 等。

詳細資訊 立即前往

編輯器與 IDE

Sublime Text

Sublime Text

最知名且擁有龐大社群與支援的輕量級程式編輯器,有大量外掛可以增強其功能,但中文支援差強人意。

詳細資訊 立即前往

Atom

Atom

由 GitHub 開發,採用 Web 技術編寫的編輯器,功能更為強大,但效能比 Sublime 稍差一些,也有大量社群支援。

詳細資訊 立即前往

Komodo Edit

Komodo Edit

功能極為強大完整的程式碼編輯器,可以當半個 IDE 使用,當然也較為肥大一些,支援中文 Big5 與 UTF-8 之間的轉換。

詳細資訊 立即前往

VS Code

VS Code

微軟推出的強大編輯器,擁有豐富的功能與外掛。

詳細資訊 立即前往

Aptana

Aptana

專門為了 Web 語言而開發的免費 IDE,是 Eclipse 的家族成員之一。

詳細資訊 立即前往

WebStorm

WebStorm

IDEA 系列成員之一,專門開發來支援 Web 前端開發的強大 IDE,需要付費,但近年來頗受好評,Opensource 專案或教育專案有機會免費使用。

詳細資訊 立即前往

IntelliJ IDEA

IntelliJ IDEA

IDEA 的完整版全功能 IDE,或者任何一套後端主力 IDE 如 PHPStorm、Rubymine 或 PyCharm 等等,都能完整支援前端開發工作。

詳細資訊 立即前往

Nuclide

Nuclide

Nuclide 是 Fackbook 開發的開源免費 IDE,與 Atom 一樣採用 Electron 技術,是專門為 React 與 Hack 而生的 IDE。

詳細資訊 立即前往

線上服務與工具

JSFiddle

JSFiddle

線上 Javascript 測試沙箱,可以編寫測試程式碼或範例給他人觀看,或是嵌入網頁作為文件使用。

詳細資訊 立即前往

Codepen

Codepen

線上 CSS 測試沙箱,可以編寫測試程式碼或範例給他人觀看,或是嵌入網頁作為文件使用。

詳細資訊 立即前往

Placehold.it

Placehold.it

簡單好用的線上即時假圖產生器,只要輸入對應網址並插入在 img 標籤中就能使用

詳細資訊 立即前往

Unsplash.it

Unsplash.it

簡單好用的線上即時假圖產生器,以 Unsplash 內的 CC0 圖片為主,會隨機產生相關圖片作為設計填塞用。

詳細資訊 立即前往

Pravatar

Pravatar

可快速取用的線上隨機大頭貼工具,方便設計 UI 或前端介面時替刻插入 Avatar,最大的特色是支援用自訂字串取得固定的頭像。

詳細資訊 立即前往

Lorem 英文假文產生器

Lorem 英文假文產生器

快速產生我們稱為 Lorem Ipsum 的無意義英文假文用來填塞頁面用。

詳細資訊 立即前往

MoreText.js 中文假文產生器

MoreText.js 中文假文產生器

以蘋果日報、賴和與徐志摩為語料庫的中文假文產生器,內容較具可讀性,但一樣沒意義(笑)。

詳細資訊 立即前往

TinyJPG

TinyJPG

非常好用的圖片壓縮服務,可以快速將各種圖片檔轉成網頁最佳化的品質與大小。

詳細資訊 立即前往

Biteable

Biteable

Biteable 是一個,快速、簡單,不用太多學習就能立刻製作形象影片的的影片套版製作工具。

詳細資訊 立即前往

其他

隱私權條款範例

隱私權條款範例

中文與英文的隱私權條款範例模板,以《政府網站版型與內容管理規範》中為基礎的隱私權政策範本,稍微調整過移除不適用一般企業的項目,更改網站名稱即可使用。

詳細資訊 立即前往

中文 CSS 排版原則指南

中文 CSS 排版原則指南

本文件提供一個易讀且清晰的常用中文網頁排版指南,供網頁設計師參考。

詳細資訊 立即前往