抽離網頁上CSS的小工具

如何去觀看網頁是否有使用CSS做編排？推薦使用微軟開發的Internet Explorer Developer Toolbar這個IE瀏覽器外掛軟體。

您可以下載http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en該軟體安裝後，即可在IE瀏覽器的右上角按下Internet Explorer Developer Toolbar圖示開啟此功能，例如以Yahoo首頁為例http://www.webspace.com.tw/E-C/images/yahoo-css1.jpg目前是這樣的正常顯示，您到瀏覽器下方的Internet Explorer Developer Toolbar裡選擇"Disable"勾選"All CSS"，就可以看到Yahoo首頁被抽離CSS的畫面http://www.webspace.com.tw/E-C/images/yahoo-css2.jpg，這樣做的另一個好處是可以使搜尋引擎更容易分析找到您的網頁，對於在搜尋引擎裡的排序也會有幫助。

目前台灣的業者很少有運用這些技術來作為版面配置製作網站的，大多只有把CSS拿來運用在一些文字連結變色等小層面零碎運用，其實相當的可惜。

附帶說明一下，如果您使用IE8，則已經有內建這項工具，不需要另行安裝。

網頁製作未來的走向規範

W3C是制訂網頁設計規格發展裡最重要的國際性組織，新的瀏覽器與網頁編輯軟體都會去注重W3C規範的網頁裡必須加上DOCTYPE標示，並且逐漸由過渡性的(Transitional)演進成嚴謹的(Strict)的標示與寫法，傳統網頁寫法將會逐漸被淘汰。

過渡性的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

嚴謹的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在未來網頁設計裡，遵循W3C國際組織的訂定的相關網頁規範是勢必的發展潮流，遲早都必須面對！但仍有不少業者與網站經營者仍是採用舊的網站製作技術與軟體，其實產生出來的網站會降低其競爭力！

瀏覽器版本與現況

根據W3schools這個國外知名網頁設計資源網站的統計http://http//w3schools.com/browsers/browsers_stats.asp，Firefox在瀏覽器市場的佔有率正逐步提升，在歐美等國外地區近半年使用Firefox的比率超過三成，後續發展頗有點像前幾年瀏覽器市場上IE與Netscape兩強競爭的態勢，在目前台灣的市場雖沒像國外使用Firefox的比率這樣高，但保守估計市佔率至少仍有一、兩成， 而且台灣市場的特色是往往相關網路資訊使用慢國外半年到一年左右才會發酵，未來如果您設計的網站不能有在Firefox瀏覽器觀看，將會逐漸喪失競爭力，但網頁美編與程式設計要同時在IE與Firefox瀏覽器執行皆無誤，其實需要相當的設計技巧與技術的。

Firefox瀏覽器說明與下載：http://www.moztw.org/firefox/

另一個需要注意的是新版的IE7跟舊的IE6部分解析也有不同，之前在IE6可以正常執行無誤的網頁，在IE7上執行仍有可能會有不相容的情形，但IE7絕對是未來市場的主流，設計的網頁能否因應提升相容，仍是需多注意測試的。

在未來網站建置的市場裡，相同瀏覽器不同版本間的差異性與不同瀏覽器之間的相容性，這些支援技術的研發仍是需要注重的，畢竟瀏覽者只有靠著瀏覽器來觀看網站，瀏覽者不會去注意這些問題，不能被瀏覽者所觀看的網站將會遭到放棄。

何謂CSS技術？

CSS(Cascading Style Sheets)中文翻譯是「串接樣式表」，是W3C組織所擬定出的一套網頁標準格式，以往CSS大多只常被用來做一些超連結文字的樣式設定，而網頁排版則是使用框線為零的表格做編排，事實上表格拿來做排版運用，在W3C 裡被認為是錯誤的作法，正確的作法應該使用CSS做版面編排配置，但由於需考量相容性、網頁編輯人員的舊習慣等技術操作問題，所以導致在台灣的網頁設計頁裡仍大多是使用表格做排版，隨著CSS的語法架構演進越來越成熟，舊的表格排版作法會慢慢逐漸被淘汰，台灣的市場反應通常都會比國外慢上半年到一年左右的腳步，但目前台灣一些知名的大型網站其實已經都悄悄採用CSS做排版了，例如Yahoo!奇摩、 MSN台灣、 Yam天空……，由此得知CSS版面編排架構未來在台灣一定會更普及。

CSS語法可達成的功能眾多，所產生的好處也非常多，不只是運用在網頁排版上，善用CSS幾乎可以達成美編語法跟傳統HTML語法以及其他程式語法完全分離，除了方便維護之外，對於網頁美編人員與程式開發人員的分工也可以更為明確，較少產生以前美編人員與程式人員彼此修改後去動到對方的語法的缺陷，如果能做成系統讓一般客戶修改，基本上可以讓客戶自行編修豐富的美編效果，未來一般企業網站對CSS可以有較大控制度的需求應也是會逐步增加。

測試網站效能

要測試自己新設計的網站整體效能(程式執行、伺服器回應、網路速度等綜合因素)，可以利用下面介紹的這幾個網站進行測試，網站管理者以比對出調整修改後的網站(硬體或網頁)或連線速度是否效能有提升，對於程式設計師、網頁設計師、MIS等職業的人應該會蠻有幫助的～！

http://tools.pingdom.com/fpt/

http://www.websiteoptimization.com/services/analyze/

http://www.webscale.com/cgi-bin/timer.dll?Mode=Timer

http://www.gomez.com/info_center/instant_test.php


下面這個網址則是一個需要安裝的小工具：
HttpWatch Basic Edition 網頁診斷工具

http://www.httpwatch.com/