?? IBM首頁源代碼淺析?
一、瀏覽器兼容性?
??? 作為一個國際大公司的站點，保證能在不同瀏覽器下的可瀏覽性是必須考慮的，這點IBM的做法不得不令人佩服。它巧妙的利用一個ja;vascript(ibmcss.js)根據不同的瀏覽器選擇不同的樣式表，這也就是為什么我們直接打開保存在硬盤上的IBM頁面不能看到用樣式表定義的原因。?
打開ibmcss.js，分析一下代碼，我們就可以發現IBM一共設計了四個樣式表:?ie1.css?,?ie6.css?,?r1.css?,?ns1.css?。這四個樣式表大部分都相同，主要的區別在于字體大小(font-size)的單位：ie6?里用%,r1里用px,ns1里用pt。下面是同樣的一條樣式在不同css里的定義：?
ie6.css:?body?{?font-family:?Arial,?sans-serif;?font-size:?78%;?}?
r1.css?:body,p,b,i,strong,em,dt,dd,dl,sl,caption,th,td,tr,u,?blink,select,?option,form,div,font,li?{?font-family:?Arial,?sans-serif;?font-?size:?12px;?}?
ns1.css:?body,dt,dd,dl,sl,caption,th,td,tr,select,option,form,font?{?font-family:?Arial,?sans-serif;?font-size:?9pt;?}?
而從對ibmcss.js里程序邏輯的分析可以得到下面樣式表和瀏覽器的對應關系：?
r1.css?:?Macintosh?IE4.0以上，Macintosh?Netscape4.0以上，Netscape5.0以上，?
X11?Netscape5.0以上?(Xwindows?for?linux?or?unix,I?guest?)?
ie6.css:?Windows?IE4.0以上，?
ns1.css:?其他操作系統Netscape4.0以上?
ie1.css:?其他操作系統IE4.0以上?
??? 我分別在Windows?XP+IE6.0和Linux?Rat?hat?7.1+NS4.7兩個環境下測試了這四個樣式表，在IE6里四個樣式表?
???? 都可以正常顯示，只是字體大小略有區別；而在NS4.7里，用ie1.css和ns1.css定義的頁面字體模糊不清，而用?
r1.css和ie6.css顯示的頁面可以正常顯示。?
??? 同時，IBM也考慮到了部分瀏覽器不支持ja;vascript的情況，在ibmcss.js后緊跟了一句<NOSCRIPT><LINK?href=”r1.css”?type=text/css?rel=stylesheet></NOSCRIPT>，對于不支持ja;vascript的瀏覽器將統一采用r1.css。不過這里有一點我不能理解的是為什么在head里面用了兩句同樣的<NOSCRIPT>語句，是為了保險起見還是設計者沒有精簡掉呢，希望大家能一起探討。?
二、規范全面的META內容?
???? 作為一個規范的頁面，詳盡的META內容是必不可少的，這一點IBM一直做得很好，我們可以回顧一下其99年頁面里的META內容：?
<meta?content=”ibm?international?business?machines?internet”?name=”keywords”>?
<meta?content=”http://www.ibm.com/”?name=”alias”>?
<meta?content=”webmaster@?www.ibm.com?”?name=”owner”>?
<meta?
content=”The?IBM?corporate?home?page,?entry?point?to?information?about?IBM?products?and?services”?
name=”description”>?
<meta?
content=”(PICS-1.1?“http://www.rsac.org/ratingsv01.html”;?l?gen?true?comment?“RSACi?
North?America?Server”?by?“epc@?www.ibm.com?“;?for?“http://www.ibm.com/”;?on?
“1997.07.05T21:46-0500″?r?(n?0?s?0?v?0?l?0))”?
http-equiv=”PICS-Label”>?
<meta?
content=”(PICS-1.0?“http://www.classify.org/safesurf/”;?l?gen?true?for?
“http://www.ibm.com/”;?by?“epc@?www.ibm.com?“;?r?(SS~~000?1?SS~~100?1))”?
http-equiv=”PICS-Label”>?
今天的IBM頁面META內容更是豐富，從下面的一些例子我們就可見一斑：?
1、基本信息?
<META?http-equiv=content-type?content=”text/html;?charset=iso-8859-1″>?
<META?http-equiv=Pragma?content=no-cache>?
<META?content=webmaster@?www.ibm.com?name=Owner>?
<META?content=”Copyright?(c)?2001?by?IBM?Corporation”?name=Copyright>?
<META?content=us?name=IBM.Country>?
<META?content=index,follow?name=Robots>?
<META?content=public?name=Security>?
<META?content=Franklin/IPC?name=Source>?
<META?http-equiv=PICS-Label?
content=”(PICS-1.1?“http://www.icra.org/ratingsv02.html”?l?gen?true?r?(cz?1?lz?1?nz?1?oz?1?vz?1)?
“http://www.rsac.org/ratingsv01.html”?l?gen?true?r?(n?0?s?0?v?0?l?0)?
“http://www.classify.org/safesurf/”?l?gen?true?r?(SS~~000?1))”>?
2、scheme?
<META?scheme=rfc1766?content=en-us?name=DC.Language>?
<META?scheme=iso8601?content=2001-08-09?name=DC.Date>?
3、描述與關鍵詞?
<META?
content=”The?IBM?corporate?home?page,?entry?point?to?information?about?IBM?products?and?services”?
name=Description>?
<META?
content=”The?IBM?corporate?home?page,?entry?point?to?information?about?IBM?products?and?services”?
name=Abstract>?
<META?
content=”ibm,international?business?machines,internet,e-business,ebusiness,personal?
computer,personal?system,e-commerce,ecommerce,pc,workstation,mainframe,unix,technical?
support,homepage,home?page”?
name=Keywords>?
內容詳盡全面，完全符合一個規范頁面的要求，這點我想是挺值得我們學習的。?
三、Web數據流分析?
作為一個國際大公司的站點，僅通過簡單的點擊計數是遠遠不能達到營銷目的所需的詳細程度，從下面的代碼我們大致可以猜測出IBM站點使用了Keylime?Software公司的Web數據流分析方案（在隨后對Keylime?Software公司網站訪問中證實了這一點）：?
<SCRIPT?language=ja;vascript?type=text/ja;vascript><!–?Keylime?Software?09/16/2001var?kl_version?=?“1.1.0”;var?kl_startLoadTime?=?new?Date();var?kl_companyId?=?“23”;var?kl_siteId?=?“77.78.0.774”;var?kl_sessionCookieVisibility?=?“;?domain=ibm.com”;var?kl_sessionCookiePathVisibility?=?“;?path=/”;//–></SCRIPT><SCRIPT?language=ja;vascript1.2?src=”stats.js”?type=text/ja;vascript></SCRIPT>?
引用:?
在電子商務早期階段時，Web?站點數據流分析通常不過是指在你的主頁上安裝計數器以及在一個外部日志文件上運行簡單的統計程序以記錄點擊率。但是，業界領導們很快意識到簡單的點擊計數既不準確也遠未達到營銷目的所需的詳細程度。因此，各公司開始尋找更先進的分析工具，這類工具可以提供誰在訪問公司Web?站點以及訪問者一旦進入站點后將做些什么的全面信息。…?
一些ASP已經開始將基于服務的分析工具包括在他們提供的多種服務中，希望能減少一定的先期技術與財務負擔。像Keylime?Software公司的i?Echoes這類解決方案按每月收費的方式提供對用戶不同企業級分析工具的接入。在ASP模型中，你不必為硬件基礎設施或培訓投資，程序可以立即運行，?并且有時作為合同的一部分，你甚至可以獲得咨詢服務。不過，基于ASP?的軟件通常也存在缺點，如第三方將可以接觸到你嚴密防守的秘密。?…?
引自：《網絡世界》Web數據流分析超越點擊計數?http://www.cnw.com.cn/cnw/2000/33/3312.asp?
更詳盡的信息可從Keylime?Software公司的站點獲得：?http://www.klsoft.com?
四、ejsmsp.js?
該js里包含了豐富的內容，因為用到了SetCookie（），ReadCookie（）等函數，我想這個js的功能之一應該是設置Cookie，以使網頁更有個性化，方便瀏覽者獲取想要的信息。從長長的鏈接列表我們可以感受到IBM為了方便瀏覽者而精心的考慮，而且在不同的頁面ejsmsp.js里的鏈接列表都不盡相同，真可謂用心良苦?
縱觀整個頁面的源文件，一共用了一個內部ja;vascript和三個外部ja;vascript文件，每個ja;vascript都起了不可或缺的作用，但沒有一個是用來實現頁面動態效果的，這正好印證了一段話：“dhtml是動態html，動態并不代表會移動的像素。?這里的動態指的是交互。?交互是web?design與平面設計最主要的設計差別。?掌握dhtml的思想是至關重要的。”?
