CSS

製作網頁、海報、宣傳品或是簡報等項目時，如果可以適時的使用背景圖，除了可提升項目的質感，更可凸顯項目內的主角，PATTERN MONSTER 是個由線條、圖案所組成的背景圖，使用者可以自訂背景圖內的顏色、密度、角度、線條粗細、水平及垂直，完成設計的背景圖，系統提供 SVG 或是 PNG 圖檔下載，另外還提供 CSS 及 SVG 語法，讓使用者可以快速套用到各種應用環境中。

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

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

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

如何在 Web 網頁內也可以使用像 Windows 應用程式內階層選單，將網頁內的功能進行歸類，方便使用者呢？方法很多，若是透過 ASP.net 可使用裡面的控制項元件，也可以使用 jQuery、JavaScript ，也可以使用 DHTML ...等，若是不想這麼麻煩，可以試試這套 Pure CSS Menu Maker 免費軟體，來產生純 CSS 樣式的下拉式選單。

圖片為應用上的方便，難免都要對其尺寸進行調整，尤其是應用在網頁顯示時，尺寸過大的圖片若僅靠 CSS 屬性控制其大小，通常在網速有延遲時，就很容易被由大到小看出其顯示過程，因此，為讓圖片適合在網路上展示，尺寸調整就在所難免，Resize Images Online 這個網站提供相當簡便的調整圖片大小方法，僅需將圖片上傳，就可以選擇依照寬、高、百分比或自訂方式來調整，並可對圖片進行最佳化處理，如果需要轉換圖片格式，也可以轉成 JPG、PNG 或 webP 等圖片格式。

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

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

在社群網站當道的時代，多數的網站都免不了要向其靠攏，在自家網頁上擺上社群網站的分享按鈕，方便使用者可快速地分享。想要在網頁上放置社群網站的分享按鈕，最快速的方法莫過於使用 Simple Sharing Buttons Generator 這個 HTML + CSS 線上產生器，只要挑選好所要的風格與所需的社群網站，再依序回答幾個問題，便能快速產生出分享按鈕的語法，方便你在網頁上的應用。

網頁排版靠 CSS，為求可維護性，我們通常會將共用語法單獨寫在一個 CSS檔案，然後由網頁從外部引進使用，以便將來在維護時會較輕鬆且不會出錯，但從外部引進的 CSS檔案多了，卻會造成網頁加載緩慢的問題，SiteLocity 這個網站提供了 Critical Path CSS Generator 的免費功能，該功能可將網頁從外部引入的多個 CSS 檔案合併成一個並最佳化，而使用方式也非常簡單，使用者僅需輸入網址交由 SiteLocity網站掃描，便可以得到合併後的 CSS語法。

無論中、英文打字，只要多練習，速度就會越來越快，相對的，如果常接觸的的是有固定的職業類別，例如像是文書編輯、即時通訊或是程式設計師，常用的按鍵就是那幾個，多用自然就熟練，熟練就可以開始練速度。SpeedCode 是一個針對程式設計師所設計的打字訓練免費 Web 服務，支援 C、C#、C++、 HTML、CSS、Ruby、Java、JavaScript、PHP、Python、Perl、Haskell 等程式語言的語法格式訓練，範本就是該程式語言的語法結構，透過鍵盤的字母導引，可讓你越發熟練。

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