線上工具 - 開發工具

不管是自己架站或是將網頁託管在免費的服務上，除了網站的內容品質外，應該還會相當關心網站的速度，尤其是現在有很多的免費服務外掛工具，像是排名、站長工具、人數統計...等等，雖說只在網頁上站了一小塊的地方，但有可能就其服務的網速過慢而拖垮整個網頁的加載速度。想要知道網頁的加載速度與網站的那些元素是效能的殺手，可以來試試 Pingdom 這個可測試網頁加載速度與分析網頁元素的例如圖片、CSS、JavaScript...等的個別速度，讓你輕易的就可以知道瓶頸進行調整，發揮應有效能，除此之外，Pingdom 還提供 DNS 品質檢測與 PING 及 Traceroute 等線上工具。

寫網頁時都避免不了要使用 CSS 來對內容進行美化與排版，若是將 CSS 集中在一個檔案內後來引用，在網頁發布的時候，也會將其壓縮解省檔案傳輸的時間，若想要參考這些經過壓縮後的 CSS 檔案，除非經過重新排版，否則很難閱讀，想要對 CSS 進行重新排版，可以來試試 ProCSSor 這個線上的 CSS 語法排版器。

現在寫網頁的工程師，除了要能掌握各項程式技巧、各家瀏覽器所支援的程度，還要注意網頁在各種螢幕解析度下所呈現的效果，期讓網頁瀏覽體驗更具親和力，不過程式技巧及各家瀏覽器所支援的程度好掌握，但對於螢幕解析度這項，總不能將各項設備都買回來吧。若你需要測試所寫網頁在不同解析度下的效果，可用 CSS 將框架打好，利用 Responsivepx.com 網站所提供的解析度測試，便可事半功倍，解決要在各項裝置測試的麻煩。

現在想要寫一個網站要注意的事項越來越多了，除了 HTML、CSS、JavaScript 等技術都不斷的更新外，還需要考慮每個瀏覽器的特性，加上現在各種螢幕解析度的提高，行動裝置更是當道，想要寫出通殺的網頁還真是不簡單，光是要準備測試的工具就需要花點時間。Responsinator.com 這個網站提供了網頁在各種不同的解析度網頁所呈現的樣子測試，使用方式簡單，只需要給出測試網址，便幫你把網頁含 iPhone、 iPad 在內的不同解析度展現出來

CSS (Cascading Style Sheets) 這種可層疊的樣式表，被應用在網頁的排版與美觀，對於網頁編輯的初學者來說，大概都會利用網頁元素中的 Style 屬性，直接定義 CSS，因為這樣最直觀也最方便， 若想要學習 CSS 語法時，當然也是能寫完就能即時預覽是最直觀的，CSSDesk 便提供了一個可在線上編輯 CSS 並提供即時預覽的免費服務，讓你所學立即能應用，值得一提的是，一進入 CSSDesk 網站後，其所提供的範例就是一個可四周圓角的 CSS 範例，讓不享用圖片來做圓角框的設計師，可以立即運用。

想要知道自己網站內的網頁在智慧型手機等行動裝置上所呈現出來的樣子，當然最快速的方式就是使用你周邊的行動設備來測試是最快速的，但是若無行動裝置的設備又想知道時，可以到 GoMo 這個網站來免費測試看看，只要輸入要測試的網址，就可以呈現出該網址網頁在手機或其他行動裝置上所呈現的樣子，相當方便。

csswarp 是個可將文字加上自訂的曲線，讓文字隨著曲線加以旋轉、彎曲的 CSS 及 HTML 免費產生器，csswarp 提供相當靈活的操作介面，可自訂文字、曲線、字型、版面大小、位置...等等，而所產生的 CSS 及 HTML 程式碼，可以應用在 Microsoft IE 9、Opera、Firefox 及 WebKit 等瀏覽器。

在編寫網頁的過程中，若需要用到 HTML 內碼或將內碼解析出 HTML 所代表的符號時，可以來試試這個免費的線上服務 <HTML/ENT> ，例如需要在網頁裡應用如下列的 ｢♠｣、｢◊｣、｢™｣、｢‰｣、｢δ｣、｢∫｣或｢∇｣ 等等的特殊符號或是英文字母的 Entity Name 或 Entity Number 時，只要在 <HTML/ENT> 輸入這些符號，就能幫你查詢出相對應的 Entity Number 。

有自己架設網站或部落格的朋友，可能會很在意或好奇自己網站裡各網頁在世界各個地方使用不同瀏覽器的載入速度，若有此需求可以來 Loads.in 這個網站所提供的網頁載入速度測試免費服務，測試地點可以選擇美國、歐洲、亞洲...等，瀏覽器則可以選擇 IE、FireFox、Chrome、Safari 等，使用方式相當簡單，選擇好要測試的地點，使用的瀏覽器，輸入要測試的網址，稍後，便可得到一份相當詳盡的圖形報告，包含像是網頁裡圖片、CSS、JavaScript 等等的每個載入所花費的時間。

在網頁的設計過程中，免不了都要引用到 CSS 樣式表，如何才能設計出適合自己網頁版型與正確的使用 CSS 語法，可以來試試這個 CSS Lint 線上的 CSS 樣式表檢測服務，使用方式相當簡單，只要將寫好的 CSS 語法，複製後貼到 CSS Lint 的檢查框內，便會幫你指出哪一行的語法不適合及修正建議，相當適合 CSS 新手在入門時所使用的工具。

Da Button Factory 是一個可以在線上製作網頁按鈕的免費產生器，所產生的網頁按鈕會包含已使用的背景圖片(PNG、GIF、JPEG、ICO)及相對應的 CSS 程式碼可供下載，讓你方便應用在網頁上；Da Button Factory 可讓使用者自訂所要產生網頁按鈕的樣式，亦可參考所提供的網頁按鈕範例再行修改，讓你幾乎不需要有任何美工的技巧，就能輕易做出有水準網頁按鈕。

想要在網頁上對「Button - 按鈕」進行樣式調整，通常會使用背景圖片或是使用 CSS 來調整按鈕的外觀，若要加上當滑鼠移到按鈕的上方或是離開，也會使用 Javascript 來加上，若對繪製這些圖片、Javascript 都不是很熟悉的話，還是要花一些時間來製作，若是偶而用用，建議可以到 CSS Button Designer 這個免費的按鈕樣式產生器來製作，除了可使用 CSS 改變按鈕樣式，也提供滑鼠移到按鈕的上方或是離開時的 Javascript ，製作完成後，直接複製所產生的 Code 便可應用的網頁裡，相當方便。