網頁設計

Uiverse 是一個匯集數千個由 CSS 或 Tailwind 精心設計的網頁元件線上工具。從 Buttons、Checkboxes、Toggle Switches、Cards、Loaders、Inputs、Radio Buttons、Forms、Patterns 到 Tooltips，涵蓋了網頁設計中常見的各種元件。每個元件都提供 HTML 和 CSS 原始碼，讓使用者輕鬆取得並直接應用於網頁。Uiverse 不僅提供了線上範例，讓使用者快速預覽效果，還具有社群驅動的特點，所有的 UI 元素都由熱衷的社群成員貢獻製作。這些元件完全免費，並以開放原始碼的形式提供，可在個人和商業項目中自由使用。這個資源庫為設計師和開發者提供了極具靈感的創意空間，讓網頁元素的選擇變得更加豐富多樣。

UI Colors 是一個免費的線上工具，專為提供色彩搭配整體解決方案而設計。使用者只需任選一種顏色，就能以該顏色為基準，自動生成前後搭配的數十種相輔相成的顏色，並將這些顏色組合成一個用色範例，讓使用者可以預覽該顏色在網頁設計中的搭配效果。UI Colors 可為產出的顏色提供適用於 Tailwind、CSS、SCSS 及 SVG 所使用的 HEX、OKLCH、HSL、RGB 及 Figma 顏色碼。使用 UI Colors 無須註冊，但若註冊後，可方便儲存所編輯的顏色，以供未來參考之用。

Picsvg 是一個 SVG 線上轉換器，使用方式很簡單，使用者只需要將圖檔上傳（jpg、gif、png） ，就可以透過參數選擇轉出不同風格的 SVG 檔案，並可以變更顏色，完成後直接可下載運用。使用 Picsvg 不但免註冊，成品亦不會有浮水印，但有上傳檔案最大4 Mb 的限制。

Nippon Colors（日本の伝統色）是一個以收錄日本傳統色系為主的網站，提供超過 250種曾在日本古典文學、手工藝、和服以及其它傳統藝術中出現的顏色。每種色彩都擁有獨特的專屬名稱，呈現出明度較低且質感清雅的特色。只要點擊其中任一顏色，網頁背景就會即時轉換為該色，同時 Nippon Colors 還會顯示該色彩的名稱，並提供CMYK、RGB、HEX 等色碼資訊。這使得在平面設計或網頁設計中，能夠直接獲取所需色彩的相關資訊，輕鬆應用於實際創作。

ManyPixels 收錄範圍根據各種常見的分類進行了整理，這些分類包括科技、網頁設計、財務或企業、分析、運動、職業、人物和活動、地理、城市、科學、環境、美食、健康和季節等，而這些插圖，均可以由使用者自訂插圖的主色調，直接在線上預覽效果，完成後點選要下載的格式即可。不僅如此，ManyPixels 還有 Outline、Monochromatic、Isometric、Flatline 和 Two Color 等插圖風格可選。

Live CSS Tester 是個免費的瀏覽器擴充功能，使用方式非常簡單，只要到達要測試的網站後，開啟 Live CSS Tester 的 CSS 編輯器，輸入 CSS 語法，就能將該段 CSS 語法注入到該網頁中，即時呈現該段 CSS 對網頁所帶來的效果與影響。Live CSS Tester 提供程式碼提示和程式碼完成功能，輔助用戶輸入 CSS 語法。

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式，可說是網頁的排版師，也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器，對於所需要的效果，可利用其產生器進行調整設定，便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。

很難想像英文字母也能利用 CSS 來建立，CSS SANS 利用純 CSS 建立包含 A 到 Z 的所有英文字母（沒有小寫），而且提供開放原始碼免費下載，讓網頁設計師只要透過網頁便可呈現。

2012-10-4 更新 Google Font Directory 改為 Google web fonts

通常為了增加網頁的美觀，在製作網頁的時候會運用一些非 Windows 內建的字型，但是當有使用者訪問到該網頁時，除非訪客的電腦裡也有該字型，才能正常顯示，若無也只能回到預設的網頁字型，因此網頁設計者為解決這樣的問題，都會將該字型做成圖片格式來顯示。Google web fonts 是由 Google 所提供的網頁字型服務，它的出現改變原有網頁字型運用的常規，要應用時該字型時，只要連結到 Google 的所提供的 CSS 字型樣式，就能讓網頁訪客存取到相同的字型，再也不用將該字型做成圖片了。

隨著可上網瀏覽網頁的設備越來越多元化，如果網站設計還僅侷限在以電腦瀏覽器為主時，將難以提供使用者良好的體驗。因此當網頁設計好，要如何觀看在不同設備間且多種螢幕尺寸下所呈現的方式呢？其實，不需要真的去購買這麼多的設備一一來測試，透過 Google 所推出的 Resizer 網站，只要輸入網址，便可以觀察自己的網頁在不同螢幕尺寸下所呈現的樣子，藉以調整，事半功倍。

不管有沒有接觸過虛擬電腦，現在都是個入門的好時機，微軟提供出結合 IE 各種版本的 Windows XP 及 Vista 作業系統的虛擬硬碟，只要下載也是微軟免費提供的 Virtual PC，掛載上去滿上就可以使用，不用在像以前要使用虛擬電腦就要像安裝新電腦的作業系統一步步的安裝起。雖說微軟提供 Internet Explorer Application Compatibility VPC Image 主要是提供網頁設計師與網頁開發人員測試所開發的網站在舊版本的 Internet Explorer 中，來調整相容性，但對一般的使用者而言，卻可體驗虛擬電腦的實用與方便性。

網頁在呈現之前是需要運算及傳輸時間的，如果可以在這個等待時間加入一個進度條，讓瀏覽者知道還要等多久，會是較理想的網頁設計，但進度條的準確度會受到很多條件的限制，因此，大部分的網頁都是提供一個等待圖示動畫，藉此提示瀏覽者，不需要有多餘的動作靜待網頁呈現。以往要加入此類的等待圖示動畫，我們會使用 Gif 圖檔，而現在我們可以更方便的使用 JavaScript 或是純 CSS 就能加入，Loaders 這個網站提供獨特且具有質感的 24個免費 loader ICON，每個均提供 REACT、HTML 及 CSS 原始碼，讓網頁設計使用 loader ICON可以更方便且有更多選擇。