線上工具 - 開發工具

對初學網頁製作的人來說，當需要對「按鈕」元件進行美工時，若能參考別人寫好的 CSS Code 是一個事半功倍的好方法。Call-to-Action Button Generator 是一個可即時預覽的 CSS 按鈕線上產生器，不但提供按鈕顏色、文字、陰影、ICON 等屬性自訂外，還可自動產生所需的 CSS Code 與 PNG 圖檔，讓使用者方便影用到網頁的任意處，相當方便。

對於要開發 Web 應用程式的初學者而言，要學的範圍很廣，最基礎的就有 HTML、JavaScript 與 CSS，若是還想結合資料庫，那可能還會選擇 PHP 或是 ASP.NET 等的開發工具來搭配所選的資料庫，因此，就基礎來說，一套有系統的整理各語法的使用方法與使用範例，絕對是初學者最快入門的方式。DevDocs 整理出 HTML、CSS、JavaScript、DOM、DOM Event、HTTP 等 Web 開發必須用到的各種語法並配上使用範例，縮短你在 Web 開發上摸索的時間與加快學習的腳步。

製作網頁時，難免會有需要讓使用者點擊的地方，若只是用文字來敘述，雖然簡單明瞭，但卻顯得單調，想要放個按鈕圖示，但卻又礙於要使用圖片，牽涉較廣，若有這些問題，可以來試試這個可以說是 CSS 按鈕寶庫的 Buttons 線上 CSS 按鈕產生器，不但提供 Flat、Glow、Rounded、3D、Border、Pill、Circle、Dropdown(下拉選單)、icon、Square、Block 等各式各樣的按鈕，且配色相當豔麗，使用上更是簡單，只需在網頁特定位置，載入相關連結後，複製想要使用的按鈕樣式到網頁想要應用的位置即可。

應用程式的開發，不管是在 Web 上或是 Windows 內的應用程式，對於介面的設計，大概都脫離不了 Master/Detail、Column Browse、Search/ Results、Filter Dataset、Forms、Palette/ Canvas、Dashboard、Spreadsheet、Wizard、Question & Answer、Parallel Panels 及 Interactive Model 這幾種常用的版型配置。透過 Designing Web Interfaces 這本書有詳細的歸納及說明，。不過本人不賣書，對於剛入門的程式設計師，可到 designingwebinterfaces.com 先行閱讀，Standard Screen Patterns: 12 patterns w/100 examples、Essential Controls: 30 controls for RIA design and development 、Components for Commonly Requested Features: 15 patterns and examples 相信不買書都能減少摸索入門的時間。

使用 CSS3 可以不需要使用圖片就能呈現出像是光暈、陰影、漸層、圓角....等等的各種網頁特效。但寫 CSS3 是件需要有耐心的事，不但語法長、同一特效還不是各家瀏覽器都能適用(各家瀏覽器還有版本之分)，相當麻煩。若想使用 CSS3 所帶來的方便，但又想省去學習的過程，可以來使用 Simplest CSS3 Generator 這個免費的網路應用程式服務，快速利用 CSS3 建立出適合自己網頁使用的特效，剔除以往需使用圖片的效果，加快用戶的瀏覽體驗。

HTML 是瀏覽器上所執行的基本語法，不論是使用 PHP、ASP 或是 ASP.NET 基本上還是脫離不了 HTML。雖說使用記事本就可以撰寫 HTML，但對初學者來說，若有 HTML 的基本語法來參考，會是比較事半功倍的方法，這時候，可以利用 Leafier 這套免費的 HTML 編輯器來輔助，學習更加快速。

對於要編排網頁的格式、美化網頁的外觀，不懂 CSS 大概很難做出，想要學習 CSS 語法，當然就要有本語法手冊，有了語法手冊，最好還要有範例可以參照，而且這個範例還要能夠在瀏覽器執行並且可以看出立即的效果，最後，當然還要能顯示出範例與語法所支援的瀏覽器種類，免得做白工，以上這些，你都可以在線上參照 CSS 參考手冊來達成。

在瀏覽網頁的時候，常會看到 loading 動態圖示，尤其是在需要較長時間才能回應的操作上，像是線上影片的觀賞、資料量較大的網頁......等等。想要取得這樣的動態圖示，可以自己製作或是透過 cssload.net 這個免費的網站服務，除了可以利用其提供的 loading 圖示，還可以利用其所提供的工具來編輯該圖示，以取得由 CSS3 語法組成的動畫，來取代 Gif 的動態圖示的缺點，期達到最符合自己網站的要求。

以往在網頁想要利用漸層的色彩來美化時，若要使用 CSS 需要考慮地的因素很多，各家瀏覽器所支援的語法也不盡相同，需要不斷的微調，最後乾脆使用圖片一勞永逸。現在 CSS3 開始普及，想要使用漸層色彩，越見方便，CSS Gradient Background Maker 是微軟所推出利用 CSS 語法漸層背景產生器，只要選好顏色，便能產生不同漸層方向，且支援 IE、Mozilla Firefox、Opera、Safari/Chrome 等瀏覽器的 CSS 語法。

瀏覽網頁時，常會看到分頁標籤，例如 Yahoo 首頁最中間的「焦點新聞」、「運動」、「娛樂」、「新奇」及「發燒話題」等標籤頁，也有人叫做選項卡，不論叫什麼，想要產生 Tab 所用的圖示，最簡單的方法就是利用 TabsGenerator 網站所提供的線上產生器，可自訂顏色、方向、高度、寬度、圓角弧度、邊框......等等，完成設計後，可下載 PNG 圖檔格式來使用，相當方便。

製作網頁時，當需要進行排版時，通常會使用 table 或 div 來進行，若是要使用框架(frame)時，可以來參考「框架網頁產生器」這個線上免費工具，可進行分割左子右主視窗、右子左主視窗、左右分割兩個視窗、分割下子上主視窗、分割上子下主視窗、上子右子左主視窗......等等，且直接產生 HTML 語法，並提供預覽框架的外觀，相當方便。

CSS 是可以用來控制網頁排版的一種語法，多數的網頁開發工具，均有內建的 CSS 編排功能來協助排版，即便是沒有，也可以利用記事本寫出。想要讓自己寫出的 CSS 語法更容易閱讀，在傳輸的過程中檔案能更小，以便加快網頁的呈現速度時，可以來利用 CleanCss 網站所提供的 CSS Formatter and Optimiser 這個可將 CSS 語法格式化與最佳化的線上工具，只需將寫好的 CSS 語法複製並貼上，便能取得經過格式化與最佳化的 CSS語法。