線上工具 - 開發工具

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

常可以見到在網路上關於 CSS 排版的提問，例如元件在容器內如何橫排、對齊或是自動縮放等問題，而這些問題幾乎都可以使用 CSS Flexbox 來解決，那什麼是 Flexbox 呢？簡單的說就是將容器的 display 屬性設定為 flex，再透過 flex 的相關屬性來決定容器內的元件要如何排版，所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性，如果是 CSS Flexbox 的初學者建議先看 圖解：CSS Flex 屬性一點也不難 這篇文章，因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法，你也可能需要對 flex 屬性有基本的認識，即便是不全，在實際操作該網站後，便可以完全釐清疑問，增加自己對使用 flex 排版的功力。

網路上有很多免費的網頁模板可供下載，套用的方式也不複雜，但如要修改其中的版型結構，可能就有點門檻，而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾，但不論利用何種版型，如要套用模板，就需要找到相類似的模板，不然就是自己改，太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式，視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等，到最後產生該網頁版型的 CSS 樣式表，讓你不論用何種的網頁開發工具，都能輕鬆靈活的套用該 CSS，加快生產力。

「提示訊息框」常上網的人應該都有體驗過，也就是滑鼠指標指到某一物件，會出現提示訊息，告訴用戶該如何操作或其意義，如果想要在自己的網頁中加入這種提示訊息，也不用從頭打造起，可以透過 Menucool 這個網站所製作的 CSS Tooltip Generator 這個 Tooltip 產生器，只要對其提供的參數進行調整，就能輕鬆製作出符合各大主流瀏覽器都適用的提示訊息框。

階層樣式表 (Cascading Stylesheets；CSS) 主要用來塑造網站的特殊風格，例如有段文字要用紅色來標明重點或是網頁版面要呈現2欄或 3欄的架構等等，對初學者而言參考別人寫好的 CSS 語法，可以快速增加對 CSS 的靈活運用，「Copy & Paste CSS」 是個提供 Buttons 及 Box-shadows 的模板網站，使用者可以透過其展示的樣式，如果符合自己的需求，便可以複製其 CSS語法，然後套用到自己的網頁，另外，該網站的 Color palettes 還提供已搭配好的顏色組合，供你複製帶走。

CSS 是可以用來排版與美化網頁內各種元素的腳本語法，不論是整體布局或是內含元素的美化，均需要透過 CSS來完成，而 CSS 語法說難不難，說簡單也不簡單，尤其是對專攻程式或初學者的用戶來說，還是有學習門檻的，但還好網路上這方面的輔助工具有不少，EnjoyCSS 便是其中的一個，透過該網站所設計的介面，使用者僅需調整所需要參數，便可以輕鬆產生網頁常用到的元素，像是文字、輸入欄、按鈕、區塊會使用到的 Text、Background、Shadows、Border and Radius、Transition、Transform 等效果的 CSS 或是 LESS、SCSS 腳本語法，且還提供各瀏覽器所支援的程度，讓你可以快速佈局到自己的網頁內。

「程式設計」已被明訂在十二年國教課綱的科技領域內，成為必修課程，其學習內容分為「演算法」、「程式設計」、「系統平台」、「資料表示、處理及分析」、「資訊科技應用」以及「資訊科技與人類社會」等六大面向，而在程式設計這塊，光是程式語言就有相當多種，但屹立不搖的大概就只有 C、C++、JAVA，網頁用的 PHP、JavaScript 等這幾種，但一法通、萬法通，不論程式語言出多少種，只要扎扎實實學好一種，其他的大概也能通個5、6成，剩下的就是各個語言上的限制了，想要學程式設計，看別人的程式碼相當有用，如果能自己實作更能融會貫通，emnu 是個免費的線上 C++ 編譯器，非常適合初學者及需要有步驟值的程式碼來這裡執行，例如寫了個迴圈，想要看迴圈內各變數的變化，emnu 就能幫你輕鬆實現，免去逐步 trace 過程。

初學網頁編輯，除了功能外、美工外，還有排版用到的 CSS，樣樣都不是省心的事情，如果可以靠一些輔助工具來協助，絕對可以事半功倍，Type Anything 是一個可以用視覺化的方式來調整 H1、H2、H3 及 paragraph 等 HTML 元素的 Font family、Font Size、Font weight、Line height、Opacity、Margin top、Margin bottom、Letter spacing、Word spacing 及 Capitalization 等屬性的免費網站服務，每次的調整都會即時反映到樣板文字上，讓使用者檢視，完成調整後，就可以產生 CSS 排版語法，讓使用者複製到要應用的網頁，相當方便。

寫好的 HTML 及 CSS 通常必須存檔，然後由瀏覽器去執行，這一來一回的動作可能要經過無數次，相當浪費時間，HTML.cafe 是個線上 HTML 編輯器，所敲進去的 HTML 及 CSS 語法，會即時反應在呈現欄中，免去存檔後，再到瀏覽器執行的過程，這對初學者或是需要測試 HTML 語法或是 CSS 排版效果絕對是個好幫手。

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

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

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