線上工具 - 開發工具

寫網頁時。通常會先架構好每個網頁的布局，可以使用 Table 來架構，也可以使用 Div 來架構，不過通常使用 Div 時，較會牽扯到不同瀏覽器及瀏覽器版本不同的問題。Layout Gala 這個網站提供了 40 個不同的網頁架構固定尺寸或是使用百分比的 Css 版型，供你免費下載使用。

製作網頁時，通常會使用到長、寬不等的背景圖，尤其是網頁中每個單元標題內的背景色彩，要產生這種背景時，通常有兩種做法，一是可以使用背景圖片；再來則是使用 CSS 語法，兩種方法各有優缺點。Ultimate CSS Gradient Generator 網站則是以 CSS 語法為主，使用方式相當簡單，可自訂色彩代碼，混入漸層、自訂長、寬後，只要複製其產生的 CSS 語法，便能應用到網頁裡。

使用 CSS 來分割網頁主要架構時，通常都會碰到不同瀏覽器有不同的支援程度，同樣的 CSS 佈局，在不同的瀏覽器內排版的方式有可能不一樣，若自己不是太精通 CSS 時，可以來試試 Primary CSS 這個免費的網站所提供的 22 種常見的網頁樣式，只要點擊欲使用的排版樣式，便可下載 CSS 樣式表及 HTML 原始碼，方便你後續的應用，相當方便。

若在網頁裡有引用的 JavaScript 或是 CSS 檔案，若檔案較大且又是每個網頁都引用，估計在網站的瀏覽高峰期時，流量也會受到這些 JavaScript 或是 CSS 檔案的影響，若想替這些檔案進行瘦身壓縮，可以透過 Yahoo 的 YUI Compressor 這個專門替 JavaScript / CSS 壓縮的免費工具來進行，使用方式相當簡單，只要上傳要壓縮的 JavaScript 或是 CSS 檔案後，便會得到一份已壓縮後的檔案，相當方便，有些檔案大小甚至可減半或更多。

一般的網頁編輯軟體通常都會有 CSS 樣式語法產生器，但若偶而想要對自己的部落格或網頁的文字進行美工調整，可以試試這個 Csstxt 免費的線上文字 CSS 樣式語法產生器，使用上相當簡單，不見得一定要懂 CSS 語法，只要動動滑鼠，輸入幾個參數，就能製作出文字的 CSS 樣式。

Cascading Style Sheets 簡稱 CSS，這種可應用在網頁(HTML)或 XML 裡的結構式語法，能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式，可說是網頁的排版師，也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0，提供了更多的樣式及效果，讓網頁可以變得更生動，對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器，對於所需要的效果，可利用其產生器進行調整設定，便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。

想要轉貼網頁上的圖片，通常在取得圖片的原始網址後來進行轉貼，但對於不熟 HTML 或 CSS 語法的人來說，想要轉貼圖片其實也是種困惱，BigImg.it 網站就提供了免費圖片轉貼語法產生服務，只要取得原始圖片的網址後，就可重新設定圖片尺寸大小及定義圖片顯示位置，並在設定後，產生 iframe 語法，複製該語法就可以貼到自己網頁裡想要顯示圖片的位置。

jQuery 是一個相當簡潔的 JavaScript 程式庫, 簡化了原本在 JavaScript 對 HTML 網頁裡面的物件綁定、事件處理、動畫製作及處理 Ajax 互動的過程等，正因為寫得少，做得多的特性，就連在微軟的 Visual Studio 的網頁程式開發工具裡，也正式的支援 jQuery。jQuery 的(Plugins)外掛相當多，而由 WebDesignLedger 所選出的 2010 年 jQuery Plugins 的最佳 10 個 外掛，都是網頁裡常會用到的像是 Slideshow、Tooltip、Chart...等等，都是相當實用的 Plugins，若是有使用或想嘗試使用 jQuery Plugins 時，可以參考看看。

寫網頁程式，常常會為了排版或美工傷透腦筋，若有此困惱，可以到 freeCSStemplates 這個免費的 CSS 網頁模板下載網站來看看，只要在該網站上看到的模板，通通可以下載，且完全免費，下載任一模板解壓縮後會得到其模板內的 CSS、圖片，若有使用到像是 JavaScript 或是 JQuery 時，會一並附上，最後還有立刻可執行的 HTML 檔，只要使用瀏覽器開啟，該模板完全是可運作，當然，最終還是要做部分的修改，來符合自己網頁的功能。

目前在網頁上的圓角框大致上可使用四個圓角圖片、Javascript 或是使用 CSS 這幾種作法，各有優缺點，Spiffy Corners 則是一個使用 CSS 的線上圓角框產生器，所產生的 CSS 也適用 Microsoft IE、Google Chrome 瀏覽器及 Opera 等主流的瀏覽器。

讀取網頁的速度常受網路頻寬與讀取資料的大小...等因素所限制，因此在設計網頁時，若資料量較大時，通常會加入一個資料讀取的進度條，來告訴使用者，目前在讀取資料的進度，不過要寫在網頁上寫資料讀取的進度條通常不是那麼容易，所以就使用一個等待圖示來代替。loadinfo 就是一個提供該類圖示的網站，可自訂前景及背景顏色及提供 16x16、24x24、48x48 等尺寸。

有時候需要編輯網頁時需要用到數學符號、希臘字符、箭頭、技術符號及一些特殊形狀，例如 ｢♠｣、｢◊｣、｢™｣、｢‰｣、｢δ｣、｢∫｣或｢∇｣，有些我們可以透過 使用微軟新注音輸入法 2010 ，輸入特殊符號、數學符號、單位符號、計量符號或是希臘字母 來輸入，且絕大多數的網頁編輯器也會解析該符號成為 Entity Name ，例如｢> >｣、｢& &amp｣、｢§ &sect｣等。但有些符號還是需要透過自己輸入符號代碼，才能達成，HTML Symbol Entities 提供數學符號，希臘字符，各種箭頭，技術符號和形狀來協助我們在網頁裡面使用這些符號。