首页 >> 读书频道 >> 电脑 >> IBM首页源代码浅析
 
· 网页设计的规则和禁忌
· 网站的形象设计与CI策划
· 谈网页制作
· 主页制作的50个秘诀
· 什么是糟糕的网页设计?
· 网站设计的八项原则
· 苹果计算机键盘的巧妙使用
· 网站设计的65条理念
· PLMM是怎样做出来的-
 
· 仙境传说攻略:一转职业任
· 浪漫满屋[作者:韩·徐尤
· 内地版《天龙八部》剧情介
· 伊索寓言(全本)
· 加油金顺剧情分集介绍完整
· 红楼梦:120回全本[清
· 源氏物语[日本:紫式部]
· 卢泰斌漫画:爱情圆周率
· 青春出轨
· 瓜兵呱呱乐
· 酱牛肉的做法
· 男人的27种类型
 
· (出租)中动商场部分及写
· (出租)中动动漫基地&#
· 喜剧学院
· 《善德女王》剧情介绍
· 魔女18号 剧情
· 丑女无敌剧情介绍
· 魔女幼熙剧情介绍
· 龙游天下剧情介绍
· 震撼世界的七日剧情介绍
· 静静的白桦林剧情介绍
· 心情日记—老公今天我想对
· 旗舰剧情介绍
欢迎来到月影社区!如果您觉得这里不错,请推荐给您的朋友们。月影社区:http://wf66.com/

IBM首页源代码浅析


查看有无更新版本

关键字:源代码 2005-8-9

 

  一、浏览器兼容性

  作为一个国际大公司的站点,保证能在不同浏览器下的可浏览性是必须考虑的,这点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内容:

  今天的IBM页面META内容更是丰富,从下面的一些例子我们就可见一斑:

  1、基本信息
  2、scheme
  3、描述与关键词

  内容详尽全面,完全符合一个规范页面的要求,这点我想是挺值得我们学习的。


  三、Web数据流分析

  作为一个国际大公司的站点,仅通过简单的点击计数是远远不能达到营销目的所需的详细程度,从下面的代码我们大致可以猜测出IBM站点使用了Keylime Software公司的Web数据流分析方案(在随后对Keylime Software公司网站访问中证实了这一点):

  <Script language=JavaScript type=text/javascript></Script><Script language=JavaScript1.2 src="stats.js" type=text/javascript></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里的链接列表都不尽相同,真可谓用心良苦

  纵观整个页面的源文件,一共用了一个内部javascript和三个外部javascript文件,每个javascript都起了不可或缺的作用,但没有一个是用来实现页面动态效果的,这正好印证了一段话:“dhtml是动态html,动态并不代表会移动的像素。 这里的动态指的是交互。 交互是web design与平面设计最主要的设计差别。掌握dhtml的思想是至关重要的。”

IBM首页源代码浅析

[ 1 ]
IBM首页源代码浅析 num

打印本页 关闭

关于我们版权声明本站导航友情连结作品演示 TOP↑