圖示

Google 提供相當多且好用的 Chrome 瀏覽器擴充功能，就連 Microsoft Edge 都可以使用，使得原本需要另外安裝應用程式的才能取得的應用，在瀏覽器內就可以得到相對應的解決方案，但安裝瀏覽器擴充功能後，會在瀏覽器的右上角處，出現該功能的圖示按鈕，佔據瀏覽器網址列的寬度，這對於安裝較多且有些偶而才會需要用到這些擴充功能的用戶而言，除了瀏覽器版面顯得較凌亂，也難以分辨，如何可以隱藏某些或全部所安裝的擴充功能圖示按鈕，使得瀏覽器版面顯得更簡潔些呢？其實，只要在這些擴充功能的圖示按鈕上使用滑鼠右鍵點擊，便可隱藏或移動，讓擴充功能的圖示按鈕在瀏覽器某處統一管理。

習慣了 Windows 預設的直式或橫式的工具列了嗎？若想來點變化時，不彷可以來試試 Circle Dock 這套免費輪盤式的豪華工具列，只要將你平時常用的程式或資料夾，用滑鼠拖拉到輪盤中，就可建立輪盤中的工作項目；Circle Dock 隱藏時也可透過快速鍵 F1 或滑鼠中間鍵就能叫出 Circle Dock，相當方便，另外 Circle Dock 也內建了超多精美的圖示(ICON)及多種面板，提供使用者隨時可更改外觀，做出與眾不同的工具列。

美工的配色，佔有成品成功的關鍵要素，想要取得好的配色效果，除了經驗外，若能透過工具來協助，取色就更加輕鬆簡單，ColorBug 是一套螢幕的取色碼的免費應用工具，透過拖曳相機圖示，可取到螢幕任何位置的顏色，支援 HEX、RGB 及 Delphi、C++、Visual StudioIDE 等程式的色碼表，除此之外，ColorBug 還有項很特別的功能，就是能製作所選顏色的漸層色，並為該漸層色產生 CSS 樣式表，方便你應用到網頁中。

「圖示」通常具有指引的作用，例如文宣上的的電話圖示，大家就會想到那是商家的聯絡電話，而在電腦上，常用於顯示檔案、裝置，以及顯示在按鈕、工具列和選單上，其大小從 16×16 到 256×256 等都有，副檔名則是以 .ico 來標示，想要將 PNG、GIF 或是 JPEG 圖片格式轉成 ICO 圖示，也不需要大費周章的安裝影像編輯軟體，可以來 converticon.com 這個免費將圖片輸出成 ICO、PNG 圖示的網站，就可以輕鬆達成，且尺寸從 16×16 到 512×512 都有 。

WIndows 的「輸入法整合器」有內建的特殊符號可供應用，但有點雜亂，而網路上也有很多此類的線上免費應用，圖示雖然很多，但同樣需要花一些時間去尋找想要應用的圖示，copy arrow 這個網站做得很簡單，就是只有箭頭圖示，需樣取用時，只須用滑鼠按下要取用的箭頭圖示，便可複製再貼到想要貼上的位置即可。

網頁加載時，如果可以給予提示，告訴訪客網站確實有按要求正在動作，相信訪客會比較願意等候，因此，在很多的網站中，會看到利用百分比的進度條、loading 的動畫圖示來顯示，直到加載完成，以 loading 的動畫圖示來說，可以使用 GIF 動畫圖檔來製作，不過前提是須要有 GIF loading 圖檔，另外一種則是利用 CSS 來製作，Tobiasahlin 這個旗下的 SpinKit 網站，提供了以 CSS 為主的 loading 動畫圖示，並提供 HTML 與 CSS 的語法讓有需要的用戶快速套用。

瀏覽網頁時，當我們看到帶有 ? 的圖示符號，通常將滑鼠指標指過去就會出現提示框，而其內容是解釋其意義或是提示使用者該如何操作等，而其出現的位置，可能會是在 ? 圖示符號的上、下、左、右。對 CSS 的初學者而言，要產生這樣的提示框並不容易，但我們可以透過一些輔助工具像是 CSS Tooltip Generator 這個免費網站，使用者僅需修改簡單的參數，便可以快速產生自己理想中的提示框，然後複製其產生的 CSS 語法，就可以應用到網頁內，相當方便。

如果網頁要使用一些動畫圖示，例如滑鼠移動按鈕上方，按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示，這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現，而現在你也可以單純利用 CSS 語法就可辦到，CSS WAND 提供 Hover、Loading 類型的 CSS 動畫，只要複製該範例的 CSS 語法，就可以將範例應用到自己的網頁，相當方便。

常在網頁上可以看到這樣 Chtouch^TM 或是 log₁₀n²的圖示或符號，為了要顯示這樣的樣式，很多人會利用圖形來製作或是插入特殊符號，這樣其實相當麻煩，其實可以利用 HTML 的 sup 與 sub 兩個 Tag 便可以達到上、下標字。

在網頁中如果要用圖示，例如電話、郵件或是箭頭，以往的做法就是要有該圖示的圖片檔，將其放在指定的位置，但隨著螢幕大小多元化，固定尺寸的圖示圖片檔，缺點盡顯，除了佔用流量外，亦無法滿足螢幕大小的變化，因此將圖示如同網頁字形般的運用，是目前圖示應用在網頁的做法。不論是 Unicode、Icons - Google Fonts 、Font Awesome 都有提供適合在網頁中使用的字形化圖示集，CSS.GG 這個網站同樣提供免費的字形化圖示集，使用者可以自訂顏色、尺寸，再透過其所提供的 HTML，CSS、SVG 或是 TSX 語法就能應用到網頁上。

human pictogram 2.0 (無料人物 ピクトグラム素材 2.0) 網站，主要提供像是鳥獸、剪影、人像行為、氣球、箭頭、植物、背景音樂、城市、聖誕節....等等的免費音樂與插圖素材，而 human pictogram 2.0 則是以人像行為為主，將人類的日常行為，像是運動、吃飯、上學、職業別、情感...等等，用一簡單的圖示來表示，圖示提供 Illustrator Ai，EPS，SVG，JPG，PNG 五種圖片格式下載，至於可以應用的範圍，只要不將其作為商標來使用，基本上都可以。

若是希望在電腦閒置的時候，能將桌面上的圖示全部清空，僅剩下桌布時，可以來安裝 DeskDuster 這套可自訂電腦在滑鼠無移動的狀況下，多久時間後，便會自動隱藏桌面所有圖示，讓桌面僅剩下桌布。