vicwity's blog

九月 2007 - 博客

  • Tab滥用造成的问题

    Tab虽然可以使页面盛放有更多内容,但有也有四个小缺点:

    1. 很多人并不知道把鼠标放在tab的title上就可以切换显示相关内容,所以打开页面的后如果第一眼没有看到感兴趣的内容时可能就会关闭页面;
    2. 如果使用的是onmourseover事件触发切换动作,很多情况下是用户无意中移动鼠标就导致内容切换,对于很多“傻瓜用户”就是比较麻烦的事,会让他困惑,不知道自己刚才看的内容去哪里了,不知道如何切换回去;
    3. tab切换压缩了页面的长度,但是页面中的实际内容确实页面所表现出来的n倍,如果一不小心添加了过多的图片或内容过于庞大,可能会导致页面数据量过大,影响用户打访问速度;
    4. 过多的tab使用户在一个页面上可以看完很多的内容,这时候可能会使每个用户访问的页面数变少,影响到网站的统计参数。

    另外推荐大家看看《Tabs, Used Right》http://www.useit.com/alertbox/tabs.html ,这是一篇关于tab使用禁忌的文章。

    即使是完美的东西,滥用也会造成负面影响,更何况世上本来就不存在完美。

  • 16种常用图片格式介绍 (z)

    总的来说,有两种截然不同的图像格式类型: 即有损压缩和无损压缩。

    1.有损压缩

      有损压缩可以减少图像在内存和磁盘中占用的空间,在屏幕上观看图像时,不会发现它对图像的外观产生太大的不利影响。因为人的眼睛对光线比较敏感,光线对景物的作用比颜色的作用更为重要,这就是有损压缩技术的基本依据。

       有损压缩的特点是保持颜色的逐渐变化,删除图像中颜色的突然变化。生物学中的大量实验证明,人类大脑会利用与附近最接近的颜色来填补所丢失的颜色。例 如,对于蓝色天空背景上的一朵白云,有损压缩的方法就是删除图像中景物边缘的某些颜色部分。当在·屏幕上看这幅图时,大脑会利用在景物上看到的颜色填补所 丢失的颜色部分。利用有损压缩技术,某些数据被有意地删除了,而被取消的数据也不再恢复。

      无可否认,利用有损压缩技术可以大大地压缩 文件的数据,但是会影响图像质量。如果使用了有损压缩的图像仅在屏幕上显示,可能对图像质量影响不太大,至少对于人类眼睛的识别程度来说区别不大。可是, 如果要把一幅经过有损压缩技术处理的图像用高分辨率打印机打印出来,那么图像质量就会有明显的受损痕迹。

    2.无损压缩

       无损压缩的基本原理是相同的颜色信息只需保存一次。压缩图像的软件首先会确定图像中哪些区域是相同的,哪些是不同的。包括了重复数据的图像(如蓝天) 就可以被压缩,只有蓝天的起始点和终结点需要被记录下来。但是蓝色可能还会有不同的深浅,天空有时也可能被树木、山峰或其他的对象掩盖,这些就需要另外记 录。从本质上看,无损压缩的方法可以删除一些重复数据,大大减少要在磁盘上保存的图像尺寸。但是,无损压缩的方法并不能减少图像的内存占用量,这是因为, 当从磁盘上读取图像时,软件又会把丢失的像素用适当的颜色信息填充进来。如果要减少图像占用内存的容量,就必须使用有损压缩方法。

      无 损压缩方法的优点是能够比较好地保存图像的质量,但是相对来说这种方法的压缩率比较低。但是,如果需要把图像用高分辨率的打印机打印出来,最好还是使用无 损压缩几乎所有的图像文件都采用各自简化的格式名作为文件扩展名。从扩展名就可知道这幅图像是按什么格式存储的,应该用什么样的软件去读/写等等。

    一、BMP图像文件格式

       BMP是一种与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BblP文件所占用 的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。

      由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。

      典型的BMP图像文件由三部分组成:位图文件头数据结构,它包含BMP图像文件的类型、显示内容等信息;位图信息数据结构,它包含有BMP图像的宽、高、压缩方法,以及定义颜色等信息。

    二、 PCX图像文件格式

       PCX这种图像文件的形成是有一个发展过程的。最先的PCX雏形是出现在ZSOFT公司推出的名叫PC PAINBRUSH的用于绘画的商业软件包中。以后,微软公司将其移植到 Windows环境中,成为Windows系统中一个子功能。先在微软的Windows3.1中广泛应用,随着Windows的流行、升级,加之其强大的 图像处理能力,使PCX同GIF、TIFF、BMP图像文件格式一起,被越来越多的图形图像软件工具所支持,也越来越得到人们的重视。

      PCX是最早支持彩色图像的一种文件格式,现在最高可以支持256种彩色,如图4-25所示,显示256色的彩色图像。PCX设计者很有眼光地超前引入了彩色图像文件格式,使之成为现在非常流行的图像文件格式。

    PCX图像文件由文件头和实际图像数据构成。文件头由128字节组成,描述版本信息和图像显示设备的横向、纵向分辨率,以及调色板等信息:在实际图像数据中,表示图像数据类型和彩色类型。PCX图像文件中的数据都是用PCXREL技术压缩后的图像数据。

       PCX是PC机画笔的图像文件格式。PCX的图像深度可选为l、4、8bit。由于这种文件格式出现较早,它不支持真彩色。PCX文件采用RLE行程编 码,文件体中存放的是压缩后的图像数据。因此,将采集到的图像数据写成PCX文件格式时,要对其进行RLE编码:而读取一个PCX文件时首先要对其进行 RLE解码,才能进一步显示和处理。

    三、TIFF图像文件格式

     TIFF (TaglmageFileFormat)图像文件是由Aldus和Microsoft公司为桌上出版系统研制开发的一种较为通用的图像文件格式。 TIFF格式灵活易变,它又定义了四类不同的格式:TIFF-B适用于二值图像:TIFF-G适用于黑白灰度图像;TIFF-P适用于带调色板的彩色图 像:TIFF-R适用于RGB真彩图像。

      TIFF支持多种编码方法,其中包括RGB无压缩、RLE压缩及JPEG压缩等。

      TIFF是现存图像文件格式中最复杂的一种,它具有扩展性、方便性、可改性,可以提供给IBMPC等环境中运行、图像编辑程序。

      TIFF图像文件由三个数据结构组成,分别为文件头、一个或多个称为IFD的包含标记指针的目录以及数据本身。

       TIFF图像文件中的第一个数据结构称为图像文件头或IFH。这个结构是一个TIFF文件中唯一的、有固定位置的部分;IFD图像文件目录是一个字节长 度可变的信息块,Tag标记是TIFF文件的核心部分,在图像文件目录中定义了要用的所有图像参数,目录中的每一目录条目就包含图像的一个参数。

    四、 GIF文件格式

       GIF(Graphics Interchange Format)的原义是"图像互换格式",是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右,它不属于任何应用程序。目 前几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。

      GIF图像文件的数据是经过压缩的,而且是采用了可变长度 等压缩算法。所以GIF的图像深度从lbit到8bit,也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多 幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。

      GIF解码较快,因为采用隔行 存放的GIF图像,在边解码边显示的时候可分成四遍扫描。第一遍扫描虽然只显示了整个图像的八分之一,第二遍的扫描后也只显示了1/4,但这已经把整幅图 像的概貌显示出来了。在显示GIF图像时,隔行存放的图像会给您感觉到它的显示速度似乎要比其他图像快一些,这是隔行存放的优点。

    五、JPEG文件格式

       JPEG是joint Photographic Experts Group(联合图像专家组)的缩写,文件后辍名为".jpg"或".jpeg",是最常用的图像文件格式,由一个软件开发联合会组织制定,是一种有损压 缩格式,能够将图像压缩在很小的储存空间,图像中重复或不重要的资料会被丢失,因此容易造成图像数据的损伤。尤其是使用过高的压缩比例,将使最终解压缩后 恢复的图像质量明显降低,如果追求高品质图像,不宜采用过高压缩比例。但是JPEG压缩技术十分先进,它用有损压缩方式去除冗余的图像数据,在获得极高的 压缩率的同时能展现十分丰富生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像品质。而且 JPEG是一种很灵活的格式,具有调节图像质量的功能,允许用不同的压缩比例对文件进行压缩,支持多种压缩级别,压缩比率通常在10:1到40:1之间, 压缩比越大,品质就越低;相反地,压缩比越小,品质就越好。比如可以把1.37Mb的BMP位图文件压缩至20.3KB。当然也可以在图像质量和文件尺寸 之间找到平衡点。JPEG格式压缩的主要是高频信息,对色彩的信息保留较好,适合应用于互联网,可减少图像的传输时间,可以支持24bit真彩色,也普遍 应用于需要连续色调的图像。

      JPEG格式是目前网络上最流行的图像格式,是可以把文件压缩到最小的格式,在 Photoshop软件中以JPEG格式储存时,提供11级压缩级别,以0—10级表示。其中0级压缩比最高,图像品质最差。即使采用细节几乎无损的10 级质量保存时,压缩比也可达 5:1。以BMP格式保存时得到4.28MB图像文件,在采用JPG格式保存时,其文件仅为178KB,压缩比达到24:1。经过多次比较,采用第8级压 缩为存储空间与图像质量兼得的最佳比例。

      JPEG格式的应用非常广泛,特别是在网络和光盘读物上,都能找到它的身影。目前各类浏览器均支持JPEG这种图像格式,因为JPEG格式的文件尺寸较小,下载速度快。

       JPEG2000作为JPEG的升级版,其压缩率比JPEG高约30%左右,同时支持有损和无损压缩。JPEG2000格式有一个极其重要的特征在于它 能实现渐进传输,即先传输图像的轮廓,然后逐步传输数据,不断提高图像质量,让图像由朦胧到清晰显示。此外,JPEG2000还支持所谓的"感兴趣区域" 特性,可以任意指定影像上感兴趣区域的压缩质量,还可以选择指定的部分先解压缩。

      JPEG2000和JPEG相比优势明显,且向下兼容,因此可取代传统的JPEG格式。JPEG2000即可应用于传统的JPEG市场,如扫描仪、数码相机等,又可应用于新兴领域,如网路传输、无线通讯等等。

    六、TGA格式

       TGA格式(Tagged Graphics)是由美国Truevision公司为其显示卡开发的一种图像文件格式,文件后缀为".tga",已被国际上的图形、图像工业所接受。 TGA的结构比较简单,属于一种图形、图像数据的通用格式,在多媒体领域有很大影响,是计算机生成图像向电视转换的一种首选格式。

    TGA图像格式最大的特点是可以做出不规则形状的图形、图像文件,一般图形、图像文件都为四方形,若需要有圆形、菱形甚至是缕空的图像文件时,TGA可就派上用场了! TGA格式支持压缩,使用不失真的压缩算法。

    七、EXIF格式

      EXIF的格式是1994年富士公司提倡的数码相机图像文件格式,其实与JPEG格式相同,区别是除保存图像数据外,还能够存储摄影日期、使用光圈、快门、闪光灯数据等曝光资料和附带信息以及小尺寸图像。

    八、 FPX图像文件格式

       FPX图像文件格式(扩展名为fpx)是由柯达、微软、HP及Live PictureInc联合研制,并于1996年6月正式发表,FPX是一个拥有多重分辩率的影像格式,即影像被储存成一系列高低不同的分辩率,这种格式的 好处是当影像被放大时仍可维持影像的质素,另外,当修饰FPX影像时,只会处理被修饰的部分,不会把整幅影像一并处理,从而减小处理器及记忆体的负担,使 影像处理时间减少。

    九、SVG格式

      SVG是可缩放的矢量图形格式。它是一种开放标准的矢量图形语言,可任意放大图形显示,边缘异常清晰,文字在SVG图像中保留可编辑和可搜寻的状态,没有字体的限制,生成的文件很小,下载很快,十分适合用于设计高分辨率的Web图形页面。

    十、PSD文件格式

       这是Photoshop图像处理软件的专用文件格式,文件扩展名是.psd,可以支持图层、通道、蒙板和不同色彩模式的各种图像特征,是一种非压缩的原 始文件保存格式。扫描仪不能直接生成该种格式的文件。PSD文件有时容量会很大,但由于可以保留所有原始信息,在图像处理中对于尚未制作完成的图像,选用 PSD格式保存是最佳的选择。

    十一、CDR文件格式

      CDR格式是著名绘图软件CorelDRAW的专用图形文件格式。由于CorelDRAW是矢量图形绘制软件,所以CDR可以记录文件的属性、位置和分页等。但它在兼容度上比较差,所有CorelDraw应用程序中均能够使用,但其他图像编辑软件打不开此类文件。

    十二、PCD文件格式

       PCD是Kodak PhotoCD的缩写,文件扩展名是.pod,是Kodak开发的一种Photo CD文件格式,其他软件系统只能对其进行读取。该格式使用YCC色彩模式定义图像中的色彩。YCC和CIE色彩空间包含比显示器和打印设备的RGB色和 CMYK色多得多的色彩。PhotoCD图像大多具有非常高的质量。

    十三、DXF文件格式

      DXF是Drawing Exchange Format的缩写,扩展名是.dxf,是AutoCAD中的图形文件格式,它以ASCII方式储存图形,在表现图形的大小方面十分精确,可被CorelDraw和3DS等大型软件调用编辑。

    十四、UFO文件格式

      它是著名图像编辑软件Ulead Photolmapct的专用图像格式,能够完整地记录所有 Photolmapct处理过的图像属性。值得一提的是,UFO文件以对象来代替图层记录图像信息。

    十五、EPS文件格式

       EPS是Encapsulated Postscript的缩写,是跨平台的标准格式,扩展名在PC平台上是.eps,在Macintosh平台上是.epsf,主要用于矢量图像和光栅图像 的存储。EPS格式采用 Postscript语言进行描述,并且可以保存其他一些类型信息,例如多色调曲线、Alpha通道、分色、剪辑路径、挂网信息和色调曲线等,因此EPS 格式常用于印刷或打印输出。Photoshop中的多个EPS格式选项可以实现印刷打印的综合控制,在某些情况下甚至优于TIFF格式。

    十六、PNG图像文件格式

       PNG(Portable Networf Graphics)的原名称为"可移植性网络图像",是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新,所以目前并不是所有的程序都可以用它来存储图像文件,但Photoshop可以 处理PNG图像文件,也可以用PNG图像文件格式存储。

     

  • javascript实现tab切换(三)[智能版]

    这段脚本的诞生,要隆重的感谢XB同志一下,他太天才了,赞一个先YesYes

    function findA(obj)
    {
             TagA=obj.getElementsByTagName("a");
             if (TagA.length>0)
             return TagA[0];
    }

    function findContentDIV(obj)
    {
            TagDiv=obj.childNodes;
            var arrDiv = new Array;
            for(i=0;i<TagDiv.length;i++)
            {
                    var objDiv = TagDiv[i];
                    var re = /div/i;
                    var arr = re.exec(objDiv.tagName);
                    if(arr != null)
                    {
                            if(arr.index == 0)
                            {
                                    arrDiv.push(objDiv);
                           }
                    }    
            }
            return arrDiv;
    }

    function chShift(o)
    {
            o.style.cursor="pointer";
            var t=o.parentNode;
            var tA=t.getElementsByTagName("a");   
            var tParent=t.parentNode;
            var tParentDIV=findContentDIV(tParent);
     
            for(i=0;i<tA.length;i++)
            { 
                    tA[i].className= null;   
                    tParentDIV[i].style.display="none";
                    if(tA[i]==findA(o))
                    {
                            tA[i].className="on";
                            tParentDIV[i].style.display="block";
                    }
            }
    }

    用法说明:

    这段智能脚本对页面中的HTML层级结构要求比较严格。必须遵从下列层次关系:

    <div>
            <ul>
                     <li onmouseover="javascript:chShift(this)">
                               <a class="on">Tab标题一</a>
                     </li>
                     <li onmouseover="javascript:chShift(this)">
                               <a>Tab标题二</a>
                     </li>
                     ……
                     <li onmouseover="javascript:chShift(this)">
                                <a>Tab标题n</a>
                     </li>
            </ul>
            <div>Tab标题一对应的内容</div>
            <div>Tab标题二对应的内容</div>
            ……
            <div>Tab标题二对应的内容</div>
    </div>

    如果HTML的层级发生了变化,代码重要做出相应的修改。

    部分CSS:

    ul
    {
     margin:0;
     padding:0;
     list-style-type:none;
     height:24px;
    }
    ul li
    {
     float:left;
     display:inline;
    }
    ul a
    {
     text-decoration: none;
     border-top:1px solid #ddd;
     border-bottom:1px solid #ccc;  
     border-left:1px solid #ddd;
     border-right:1px solid #ddd;
     display: block;
     padding: 5px 0 3px;
     margin-left:-1px;
     width:258px;
     font-weight: bold;
     text-align:center;
     line-height:15px;
     color: #11449E;
    }

    a.on,a:hover

     padding-top: 6px;
     padding-bottom:3px;
     width:259px;
     border: 1px solid #ccc;
     border-bottom: 0;
     background:#DEEBFF;
    }

    优点:无须设置任何参数,无序设置任何ID,使用方便。

    缺点:对HTML代码的层级要求严格。

    该脚本在ie6、ff1.5下测试通过。

    开心一下Big Smile,有了这段脚本不用再担心bt的页面了,即使有几十组的tab切换也不用烦心的去设置参数了。

    参考页面:http://gongcheng.studyez.com/

  • 用javascript实现tab切换(二)

    javascript部分 

    <script language="javascript" type="text/javascript"> 
    //tab切换
    //参数解释:o ---当前Tab的ID尾部数字;min  ---本组起始Tab的ID尾部数字;man  ---本组终止Tab的ID尾部数字;
      function chShift(o,min,max)
      {
       var o=o;
       var n=max;
       var m=min;
       var onTitle="t"+ o;
       var onContent="c"+o;
       var onTitle = document.getElementById(onTitle);
       var onContent = document.getElementById(onContent);
               
       onTitle.className="on";
       onContent.style.display="block";
               
       for(var i=m;i<=n;i++)
       {
        t ="t"+i;
        c="c"+i;
        tid = document.getElementById(t);
        cid = document.getElementById(c);
        if(tid != onTitle)
        {
          tid.className= null;
          cid.style.display="none";
        }
       }
      }
    </script>

    HTML部分

    <ul class="TabTitle">
          <li><a class="on" id="t1" onmouseover="javascript:chShift(1,1,2)" style="margin: 0px" onfocus="this.blur()" >学易资讯</a> </li>
          <li><a id="t2" onmouseover="javascript:chShift(2,1,2)" onfocus="this.blur()">招考动态</a> </li>
    </ul>

    <div class="TabContent" id="c1"><!--第一块内容--></div>

    <div class="TabContent" id="c2" style="display: none;"><!--第二块内容--></div>

    部分CSS

    ul.TabTitle
    {
     margin:0;
     padding:0;
     list-style-type:none;
     height:24px;
    }
    ul.TabTitle li
    {
     float:left;
     display:inline;
    }
    ul.TabTitle a
    {
     text-decoration: none;
     border-top:1px solid #ddd;
     border-bottom:1px solid #ccc;  
     border-left:1px solid #ddd;
     border-right:1px solid #ddd;
     display: block;
     padding: 5px 0 3px;
     margin-left:-1px;
     width:258px;
     font-weight: bold;
     text-align:center;
     line-height:15px;
     color: #11449E;
    }

    .TabTitle a.on,.TabTitle a:hover

     padding-top: 6px;
     padding-bottom:3px;
     width:259px;
     border: 1px solid #ccc;
     border-bottom: 0;
     background:#DEEBFF;
    }

    效果参见:http://gongwuyuan.studyez.com/

更多内容