網(wǎng)站建設(shè)中一個網(wǎng)頁到底包含了多少技術(shù)發(fā)布者：本站     時間：2022-05-04 10:05:32

首頁源代碼淺析 
一、瀏覽器兼容性 

作為一個國際大公司的站點，保證能在不同瀏覽器下的可瀏覽性是必須考慮的，這點IBM的做法不得不令人佩服。它巧妙的利用一個ja;vascript(ibmcss.js)根據(jù)不同的瀏覽器選擇不同的樣式表，這也就是為什么我們直接打開保存在硬盤上的IBM頁面不能看到用樣式表定義的原因。 
打開ibmcss.js，分析一下代碼，我們就可以發(fā)現(xiàn)IBM一共設(shè)計了四個樣式表: ie1.css , ie6.css , r1.css , ns1.css 。這四個樣式表大部分都相同，主要的區(qū)別在于字體大小(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里程序邏輯的分析可以得到下面樣式表和瀏覽器的對應(yīng)關(guān)系： 

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: 其他操作系統(tǒng)Netscape4.0以上 
ie1.css: 其他操作系統(tǒng)IE4.0以上 

我分別在Windows XP+IE6.0和Linux Rat hat 7.1+NS4.7兩個環(huán)境下測試了這四個樣式表，在IE6里四個樣式表 

都可以正常顯示，只是字體大小略有區(qū)別；而在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的瀏覽器將統(tǒng)一采用r1.css。不過這里有一點我不能理解的是為什么在head里面用了兩句同樣的<NOSCRIPT>語句，是為了保險起見還是設(shè)計者沒有精簡掉呢，希望大家能一起探討。 

二、規(guī)范全面的META內(nèi)容 

作為一個規(guī)范的頁面，詳盡的META內(nèi)容是必不可少的，這一點IBM一直做得很好，我們可以回顧一下其99年頁面里的META內(nèi)容： 
<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內(nèi)容更是豐富，從下面的一些例子我們就可見一斑： 

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、描述與關(guān)鍵詞 
<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> 

內(nèi)容詳盡全面，完全符合一個規(guī)范頁面的要求，這點我想是挺值得我們學(xué)習(xí)的。 

三、Web數(shù)據(jù)流分析 

作為一個國際大公司的站點，僅通過簡單的點擊計數(shù)是遠遠不能達到營銷目的所需的詳細程度，從下面的代碼我們大致可以猜測出IBM站點使用了Keylime Software公司的Web數(shù)據(jù)流分析方案（在隨后對Keylime Software公司網(wǎng)站訪問中證實了這一點）： 

<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> 

引用: 

在電子商務(wù)早期階段時，Web 站點數(shù)據(jù)流分析通常不過是指在你的主頁上安裝計數(shù)器以及在一個外部日志文件上運行簡單的統(tǒng)計程序以記錄點擊率。但是，業(yè)界領(lǐng)導(dǎo)們很快意識到簡單的點擊計數(shù)既不準確也遠未達到營銷目的所需的詳細程度。因此，各公司開始尋找更先進的分析工具，這類工具可以提供誰在訪問公司W(wǎng)eb 站點以及訪問者一旦進入站點后將做些什么的全面信息。... 
一些ASP已經(jīng)開始將基于服務(wù)的分析工具包括在他們提供的多種服務(wù)中，希望能減少一定的先期技術(shù)與財務(wù)負擔。像Keylime Software公司的i?Echoes這類解決方案按每月收費的方式提供對用戶不同企業(yè)級分析工具的接入。在ASP模型中，你不必為硬件基礎(chǔ)設(shè)施或培訓(xùn)投資，程序可以立即運行， 并且有時作為合同的一部分，你甚至可以獲得咨詢服務(wù)。不過，基于ASP 的軟件通常也存在缺點，如第三方將可以接觸到你嚴密防守的秘密。 ... 

引自：《網(wǎng)絡(luò)世界》Web數(shù)據(jù)流分析超越點擊計數(shù) http://www.cnw.com.cn/cnw/2000/33/3312.asp 

更詳盡的信息可從Keylime Software公司的站點獲得： http://www.klsoft.com 

四、ejsmsp.js 

該js里包含了豐富的內(nèi)容，因為用到了SetCookie（），ReadCookie（）等函數(shù)，我想這個js的功能之一應(yīng)該是設(shè)置Cookie，以使網(wǎng)頁更有個性化，方便瀏覽者獲取想要的信息。從長長的鏈接列表我們可以感受到IBM為了方便瀏覽者而精心的考慮，而且在不同的頁面ejsmsp.js里的鏈接列表都不盡相同，真可謂用心良苦 

縱觀整個頁面的源文件，一共用了一個內(nèi)部ja;vascript和三個外部ja;vascript文件，每個ja;vascript都起了不可或缺的作用，但沒有一個是用來實現(xiàn)頁面動態(tài)效果的，這正好印證了一段話：“dhtml是動態(tài)html，動態(tài)并不代表會移動的像素。 這里的動態(tài)指的是交互。 交互是web design與平面設(shè)計最主要的設(shè)計差別。 掌握dhtml的思想是至關(guān)重要的。"