線上工具 - 開發工具

適當的替作品加入背景，可增加作品的整體的滿意度，如果是網頁，以往因 CSS 語法在各家瀏覽器支援程度不一的情況下，多數會使用圖片來製作，不但前期製作麻煩，後續要維護也不容易，而如今瀏覽器與 CSS 標準逐漸統一，使用純 CSS 語法來製作背景圖對後續要更新維護也相對簡單，CSS Background Patterns 這個免費的線上服務，利用 CSS 語法做出多種樣式的背景圖案提供大家使用，使用者在該網站，可以更改背景圖案的前景色、背景色、透明度及圖案的濃密度，且每次更改會在該網頁的背景即時展示，讓使用者即時預覽，滿意就可以將該背景圖的 CSS 一鍵複製，方便使用者後續應用。

要開發系統或網站，通常都會依照所需流程及功能來構思整個系統架構，如果可以先將系統的操作介面以雛形的方式呈現出來，相形之下就可以對客戶進行良好的溝通，開發人員也不怕所開發的系統會與客戶所描述的落差太大，製作雛形如果需要用到圖片，通常就是隨便找張圖片裁剪成所需的尺寸先放上去，如果要更改就重複做同樣的事情，Dynamic Dummy Image Generator 這個網站可以透過網址的參數來動態調整圖片的寬、高尺寸、背景顏色及文字顏色，圖片格式支援 PNG、GIF 與 JPG，方便雛形的隨時調整與修改，加快與客戶溝通的速度。

漸層色較單一顏色來的有層次感，也深受美工人員的愛用，要用 CSS 做出漸層色，不難，但難在顏色如何搭配，這讓人很傷腦筋的，WebGradients 這個網站提供 180個已經配好色的漸層色彩，並提供 CSS3 語法與 PNG 圖檔，不論是個人或商業均可免費取用。

漸層色彩在視覺上可以產生層次感，這對常看單一顏色的人來說，會更加有吸引力，以往要做出漸層色，設計師都會傾向於使用圖片，原因在於各家瀏覽器對 CSS 所支援的程度不相同，造成觀感不佳的問題，而如今瀏覽器對 CSS 3 基本上都支援的情況下，要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整，完成後，就可產生 CSS 語法。

做了響應式網頁，該如何能夠看出其在不同螢幕尺寸下應有的效果呢？everysize 是個可以讓用戶選擇像是 iPhone、iPad、Google Pixel 等裝置的尺寸或是手動調整螢幕尺寸來呈現網頁的免費網站，不同以往看到的類似網站，該網站在呈現網頁後，用戶是可以直接操作非靜態的。

階層樣式表 (Cascading Stylesheets，CSS) ，最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式，讓同一個元素可以有不同的樣貌呈現，不過對於初學者而言，要了解整個 CSS 語法規則並不容易，除了時間之外，如果有輔助的工具可以協助，相信可以更快的跨過門檻，CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器，其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化，用戶可以透過可操作的面板進行屬性值變更，且立刻可看到所產生的變化，完成整個調整，還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法，快速套用到元素上。

「Google 搜尋引擎最佳化初學者指南」這份是由 Google 所撰寫的 SEO 教材，將 SEO 分成 14大主題，來教你如何做好搜尋引擎最佳化，內容相當不錯，非常適合有經營網站的站長們來閱讀研究，而且這份文件還翻譯成 40國語言，有需要的朋友可以下載下來研究看看。

需求分析是系統開發成敗的關鍵，系統分析師與客戶溝通時，如果可以拿出接近客戶心目中的實際系統操作雛形，相信會比用文字描述來的容易溝通，如果要將溝通時產生的手繪草稿圖利用 HTML 程式碼來呈現，讓客戶可以模擬操作，藉此確定系統規格，這對日後的系統驗收也有一定的幫助，Sketch2Code 是由 Microsoft 的 Azure 雲平台和Azure Cloud AI Web 服務支援，結合人工智慧、OCR 等各項技術，將任何的手繪設計稿件轉成 HTML，方便夥伴協同與客戶溝通。

CSS 版本進展到 CSS3.0，讓以往需要靠圖片來輔助才做得到的效果，變得只需用 CSS 即可，例如邊框特效、色彩展示、圖形變化、動畫、轉換特效、文字色彩、文字陰影、區塊陰影、文字旋轉...等，不過標準有了，語法的學習上卻變成是個門檻，還好，線上有很多關於 CSS 產生器，像是按鈕、陰影、圓角...等，如果對 CSS 語法陌生，又想產生圓角邊框，可以來試試 border radius 這個線上的 CSS 圓角框產生器，簡單方便。

在網頁內，如果要放入其他網站內的網頁、影片，通常都會使用 iframe 標籤，然後設定 src 這個屬性將其指到目標位置即可，例如 YouTube、Vimeo、Dailymotion、Google Maps、Google 文件的嵌入語法，都是如此，但產生的原始語法並無法直接套用到自適應網頁內，因此，取得這些原始語法後，我們可以透過 Embed Responsively 這個網站來幫我們產生可自適應網頁的 iframe 語法，讓自家網站也可以在不同螢幕尺寸或裝置下提供滿足訪問者的需求。

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

網站通常會包含許多的表單，像是註冊、留言回應、聯絡方式等等，製作這些制式化的表單，通常修改模板後，就可以快速的應用，而 Form-Builder 這個免費網路應用服務，就可以讓我們快速產生這樣的表單，其提供網頁常用的元件，像是 Text、EMail、Phone、Radio、URL、Password、Textarea、Select Option、Radio Group、Checkbox Group 讓用戶可以自行添加或刪減，並加入輸入提示，且已透過 CSS 美化，產生的 HTML Code 也只要稍加修改後，便可正式運用到網頁上，相當方便。