CSS

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

要找出兩個文字檔內容的不同處，尤其是那種落落長又有版本之分例如可用記事本開啟的程式語言、腳本之類的，像是 CSS、Javascript、HTML...等等，程式設計師有時為了比對出與上次版本的差異處，常常要用掉不少眼力，如果可以透過文字比對工具來進行，絕對可以事半功倍且精準，Diffchecker 這個網站除了有提供 Excel、PDF及圖片的比對工具外，還有提供線上文字比對工具，使用者只需貼上兩段文字，便會用顏色標示出兩者之間的不同處，方便使用者來查看。

製作網頁時，若需要使用多層次選單按鈕，可以來參考 Easy CSS Menu 這個網頁多層次選單按鈕產生器，提供直式、橫式與按鈕左側等樣式，並可自訂按鈕樣式，輕輕鬆鬆就能製作出具有實用性且美觀的多層次選單按鈕。

製作網頁時，若想使用一些較特殊的字型，往往需要以圖片的方式來呈現，這是因為來瀏覽網頁者的電腦裡未必裝有該字型，若不使用圖片來呈現，有可能會出現亂碼或是以別的字型來取代，造成排版不易，Google Web Fonts 便有提供該困擾的解決方案，便是將字型以 CSS 的方式做連結，這樣製作網頁與瀏覽網頁的雙方便可以以 Google Web Fonts 為中心來取得該字型，解決此一困擾，目前 Google 提供的字型不少，要如何才能快速找到適合自己網頁裡可以使用的字型呢？可以來試試 Font Comparer 這個免費的 Google Web Fonts 進階應用線上服務，只要輸入要預覽的字體，便會一次列出目前 Google 有提供字型的預覽，並提供 CSS 的使用語法，相當方便。

瀏覽網站時，如果遇到喜歡的字體，該如何找出該字體名稱與下載呢？這時候，我們可以透過 Font of Web 這個線上工具來協助，只要輸入該網站網址，便可以找出該網站所使用的字體，並產生該字體的下載連結，但，並非所有字體都能產生下載連結，另外該網站會分析輸入網址的主要的 HTML Tag 像是 h1、span、p...等的與字體相關的 CSS，這對要參考其他網站來定義自己網頁字體的大小、字重或 Line Height 也有參考價值，另外，字體下載須注意版權，該網站並不保證所下載的字體可以用於個人或商業。

有相當多的網站有提供免費英文字型的下載服務，像是 Fontennium、FontSpace，再進階點的像是 Google Font Directory 由 Google 所提供的 CSS 英文字型，讓網頁字型應用更簡單 及 EngTRESS Font 標準英文字型，解決學習英文字母困擾 ，都提供了相當不錯的英文字型，可供下載，Fontfeest

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

想要加強網頁的呈現效果，當然除了要有好的內容、合適的色彩及版型配置外，也可以在瀏覽器的外觀上動些手腳，像是使用 Free StatusTitle Maker 免費的網頁瀏覽器標題欄或狀態欄訊息產生器 在瀏覽器的標題或狀態欄做一些與眾不統的特效或是使用 Free Colored ScrollBars 這套免費的瀏覽器彩色滾動條(ScrollBar) CSS 及 JavaScript 特效產生器，來加強瀏覽器的上下左右的滾動條的特效。

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

2012-10-4 更新 Google Font Directory 改為 Google web fonts

通常為了增加網頁的美觀，在製作網頁的時候會運用一些非 Windows 內建的字型，但是當有使用者訪問到該網頁時，除非訪客的電腦裡也有該字型，才能正常顯示，若無也只能回到預設的網頁字型，因此網頁設計者為解決這樣的問題，都會將該字型做成圖片格式來顯示。Google web fonts 是由 Google 所提供的網頁字型服務，它的出現改變原有網頁字型運用的常規，要應用時該字型時，只要連結到 Google 的所提供的 CSS 字型樣式，就能讓網頁訪客存取到相同的字型，再也不用將該字型做成圖片了。

雖說現在用 CSS 語法就在網頁上產生漸層效果，不需要用到圖片，但同一種語法各家瀏覽器不見得都能通用就是個麻煩，且如果是做文宣品或非在網頁上顯示的色彩漸層，大概也只能用圖片來實現。Gradient Actualizer 是一套免安裝的漸層色彩圖片產生器，只要設定好三種顏色，就能自動幫由上到下、由左至右、垂直向兩側與水平往上下的色彩漸層圖片，可以旋轉，可以自訂圖片大小，簡單且好用。

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