您的位置:首页 → 网页设计 → 经验技巧 → IBM站一个网页到底包含了多少技术--看分析
IBM站一个网页到底包含了多少技术--看分析
时间:2004/11/7 2:47:00 来源:本站整理 作者:蓝点 我要评论 (0)
IBM首页源代码浅析----转 一、浏览器兼容性 作为一个国际大公司的站点,保证能在不同浏览器下的可浏览性是必须考虑的,这点IBM的做法不得不令人佩服。它巧妙的利用一个javascript(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也考虑到了部分浏览器不支持javascript的情况,在ibmcss.js后紧跟了一句 ,对于不支持javascript的浏览器将统一采用r1.css。不过这里有一点我不能理解的是为什么在head里面用了两句同样的语句,是为了保险起见还是设计者没有精简掉呢,希望大家能一起探讨。 二、规范全面的META内容 作为一个规范的页面,详尽的META内容是必不可少的,这一点IBM一直做得很好,我们可以回顾一下其99年页面里的META内容: webmaster@www.ibm.com " name="owner"> content="The IBM corporate home page, entry point to information about IBM products and services" name="description"> 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"> 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、基本信息 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 3、描述与关键词 content="The IBM corporate home page, entry point to information about IBM products and services" name=Description> content="The IBM corporate home page, entry point to information about IBM products and services" name=Abstract> 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公司网站访问中证实了这一点): 引用: -------------------------------------------------------------------------------- 在电子商务早期阶段时,Web 站点数据流分析通常不过是指在你的主页上安装计数器以及在一个外部日志文件上运行简单的统计程序以记录点击率。但是,业界领导们很快意识到简单的点击计数既不准确也远未达到营销目的所需的详细程度。因此,各公司开始寻找更先进的分析工具,这类工具可以提供谁在访问公司Web 站点以及访问者一旦进入站点后将做些什么的全面信息。... 一些ASP已经开始将基于服务的分析工具包括在他们提供的多种服务中,希望能减少一定的先期技术与财务负担。像Keylime Software公司的iEchoes这类解决方案按每月收费的方式提供对用户不同企业级分析工具的接入。在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里的链接列表都不尽相同,真可谓用心良苦 纵观整个页面的源文件,一共用了一个内部javascript和三个外部javascript文件,每个javascript都起了不可或缺的作用,但没有一个是用来实现页面动态效果的,这正好印证了一段话:“dhtml是动态html,动态并不代表会移动的像素。 这里的动态指的是交互。 交互是web design与平面设计最主要的设计差别。 掌握dhtml的思想是至关重要的。" 上面就是我对IBM首页源代码的粗浅分析,由于水平有限,难免有错漏的地方,希望大家多多指教。
相关阅读
Windows错误代码大全 Windows错误代码查询 激活windows有什么用 Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录 Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新 windows 10 rs4快速预览版17017下载错误问题 Win10秋季创意者更新16291更新了什么 win10 16291更新内容 windows10秋季创意者更新时间 windows10秋季创意者更新内容 kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
热门文章
Wordpress本地安装教程 dx1.5如何设置二级域名
最新文章
hbuilder有哪些快捷键 Wordpress本地安装教程
Wordpress本地安装教程 expression web 4文档乱码解决方法 dz 2.5“收藏本版”关闭小对话框无法关闭解 在制作安装软件之前,您必须先将易语言存盘,
人气排行
如何使用multipart/form-data格式上传文件 Photoshop PS图层混合模式详解(非常详细) ISAPI_Rewrite3使用教程 网站里添加收藏和设为首页代码 桌面快捷方式图标不见了 C#获取执行程序所在的当前路径的方法 详解(XMLHttpRequest)进行跨域请求方法 如何用远程桌面连接进行传输文件
查看所有0条评论>>