网站开发日志

使用YUI Compressor给JavaScript和CSS瘦身

减小Javascript和CSS的体积有助于加快页面的加载速度。Javascript或者CSS的压缩器在英文里称为compressor，它主要是移除空格和注释来缩小体积。当然优秀的压缩器象YUI Compressor还具有打乱局部符号和优化代码等功能(特别针对JavaScript)。如果你的Javascript或者CSS本身就没有几行，那么你可能感受不到瘦身的效果；反之，通过压缩后的文件体积通常可以缩小40%-50%。

之前我已经用过一些在线工具来压缩网站的JavaScript和CSS代码，但是觉得用其来不是很方便。每次对Javascript和CSS稍作修改，都要把代码拷贝粘贴到在线工具里，然后在把压缩后的版本拷贝粘帖到本地保存。后来想自己网站上的Javascript和CSS本身体积就不是很大，就索性不压缩了，省得麻烦。最近在优化公司的网站代码的时候，决定对Javascript和CSS瘦身，用到了YUI Compressor。很早以前就听说YUI Compressor了，一直没有机会去使用它。这次使用后觉得很好用，故在这里推荐给大家。

我觉得YUI Compressor主要有3大优点：

同时支持Javascript和CSS的压缩。
用JAVA写的，可跨平台使用。它需要Java版本>=1.4，现在大部分机子应该都安装有Java，我在Window和Linux都试用过，没有出现任何问题。
压缩效果好。我分别用YUI Compressor和Dean Edwards的在线Javascript Compressor对一个文件大小为8.341K的javascript进行压缩，YUI Compressor生成的文件大小为5.535K，而在线Javascript Compressor生成的文件大小为5.985K。虽然Dean Edwards的JS Compressor还可以选择 Base62 encode(编码)和Shrink variable(收缩变量)，从而得到更小体积的文件(4.835K)。按照我的理解YUI Compressor是一种Minifier(缩小器)，正如文章开头提到的它主要是移除空格和注释来缩小体积，虽然它在一定程度上还缩小变量名和移除不必要的代码，但是比较保守。而Dean Edwards的JS Compressor可以称之为Packer(打包机)，它使用了不同的概念和更加先进的打包算法(例如：Shrink variable)，虽然它达到更小的体积，但是在性能上要打些折扣，因为客户端需要一定的时间去解压和使用它。

使用YUI Compressor，可以说是非常简单。

首先到YUI Library官方下载页面，记住该页面有很多YUI的库，你要下载的是YUI Compressor。
然后解压下载文件，记住直接可以用的是build文件夹下的yuicompressor-2.4.2.jar，另外下载的文件里还包含源代码、文档等等。
把yuicompressor-2.4.2.jar拷贝到某个文件目录下，比如C:/tools(windows) 或者 /usr/adam/tools(Linux)。
最后用下面的命令：

//压缩Javascript
java -jar /path/to/yuicompressor-2.4.2.jar example.js -o example.min.js
#例如：java -jar c:\tools\yuicompressor-2.4.2.jar 61dh.js -o 61dh.min.js
//压缩CSS
java -jar /path/to/yuicompressor-2.4.2.jar example.css -o example.min.css
#例如：java -jar /usr/adam/tools/yuicompressor-2.4.2.jar 61dh.css -o 61dh.min.css

更多的用法，请参考YUI Compressor的官方网页。

标签： CSS, Javascript, 编程开发

...阅读全文

jQuery + CSS 制作上下滑动卷页

有网友问：

（博客）左下角那个点击可以上下滑动是怎么制作的。

我在日志里曾经介绍过jQuery 动画卷页。这个特效就是采用类似的jQuery代码，不同的是多了一些CSS代码。下面我将简单介绍如何制作这个特效。

1.html代码：

<div id="footerud">
  <div id="up"></div>
  <div id="down"></div>
</div>

注意：你可以把这段代码放在<body>和</body>之间的适当位置，例如：</body>前。

2. css代码：

#footerud{
  bottom:10px;display:block;position:fixed;left:15px;
}
#up{
  background:url(../images/arrowtop.png) no-repeat;
  cursor:pointer;height:14px;margin-bottom:15px;
  position:relative;width:25px;
}
#down{
  background:url(../images/arrowbottom.png) no-repeat;
  cursor:pointer;height:60px;margin-top:15px;
  position:relative;width:25px;
}

#up和#down里定义了背景图(也就是上下箭头)，你可以用你喜爱的图片代替，我这两个也是网上找到。注意：../images/指定了图片相对CSS文件的路径，你可能要根据你的实际情况更改。

3. jQuery代码：

jQuery(document).ready(function() {
  jQuery('#up').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:0}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:0}, 'slow');
      return false;
    }
  });
   jQuery('#down').click(function(){
    if(jQuery.browser.safari) {//这里判断浏览器是否为safari
      jQuery('body').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');
      return false;//返回false可以避免在原链接后加上#
    }
    else{
      jQuery('html').animate({scrollTop:jQuery('#footerPan').offset().top}, 'slow');
      return false;
    }
  });
});

这个在jQuery 动画卷页一文里有介绍，如有不明白的地方请留言。注意：向上翻页比较简单，用scrollTop:0就可以了，但是向下翻页，必须指明你的页面最底部HTML元素，例如：我用到 scrollTop:jQuery('#footerPan').offset().top. 这里#footerPan就是我博客页面底部HTML元素的ID。

标签： CSS, Jquery

...阅读全文

几个HTML编码的良好习惯

坚持做一件事情真的很难，就比如说坚持写Blog。最近写文章的频率明显下降，也许是最近比较忙，但是也可能这只是借口。

另外也有好几周没上Nettut了，今天看到了这篇30 HTML Best Practices for Beginners，觉得写得比较好，在此推荐给大家。没有准备全文翻译，只是针对自己没有做好的几点做个‘检讨’:-)

1. 坚决不用inline的CSS样式

<p style="color: red;">
  这段字体为红色
</p>

专家建议只有在页面HTML代码完成后才考虑CSS样式。不要图一时方便，把CSS样式直接加入HTML标签里。

2. 把所有外部CSS代码都放在Head标签里

通常情况下我也是这么做的。这么做的首要目的是，加快页面的加载速度。

3. 学会使用Firebug

Firebug也是我喜欢的Firefox扩展插件，但是我从来没有认真的研究过它的功能。专家提示：大部分Firebug用户只用到体验到2成的Firebug提供的功能。看来要找时间好好的学习学习。

下面是两个资源：

4. 使用H1-H6标签

从词意学上讲，使用H1-H6标签对SEO比较有帮助。因为H - 代表标题，而P代表段落，所以用H(例如H6）代替P，有利于搜索引擎的对文章内容的获取。

5. 下载使用ySlow

还没用过，专家建议下载使用ySlow，是配合Firebug的Firefox插件，可以对现有网页进行优化分析。刚刚下载了，貌似不错。

6. 网站完成后，压缩代码

下面几个网站提供JS和CSS压缩的服务。其实我也用过，只是每次更新网站，要重复解/压缩，觉得有点烦。

7. 学习Photoshop

学习中... 下面是专家建议的PS学习网站，有空一定去看看。

Visit the Videos section at Psdtuts+

Enjoy the "You Suck at Photoshop" series.

标签： CSS, HTML

...阅读全文

CSS文本垂直居中的最终方案

关于"CSS文本垂直居中"的文章在网上可以找到很多，它们主要涉及3种方法：

单行文本垂直居中：

方法：把文本段落高度(line-height)和所在区域高度(height)设为一致即可。缺点：这种方法只对单行文本有效。

代码：

<div style="border:1px solid #ccc; height:50px; line-height:50px;">
网站开发日志
</div>

效果:

网站开发日志

多行文本垂直居中：

方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制，即使用padding属性。缺点：对固定高度的区间无效。

代码：

<div style="border:1px #ccc solid; padding:20px 0; width:578px;">
www.61dh.com/blog
本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。
本站的文章大都是原创或者翻译作品。
</div>

效果

www.61dh.com/blog 本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。本站的文章大都是原创或者翻译作品

浏览器居中：

方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离，例如文本区域高度为浏览器高度的20%，那么上方应该留下50%-10%=40%；同理，在左边留下浏览器宽度一半减去文本区域宽度一半的距离。

缺点：这种方法只是让文本在落在浏览器中央，而并非在某个特定区域的中间。

代码：

<div style="position:absolute; top:40%; left:40%; width:20%; height:20%">
本博客用于记录网站开发的点点滴滴。包括网站设计，编程指南，资源和灵感。
本站的文章大都是原创或者翻译作品。我并不反对转载，因为互联网本来就是用来共享资源的。
但是当你引用我的文章时，请注明出处。谢谢！
</div>

效果

由于上面的三种方法都存在缺点，因此它们往往不是你所想要的方案。在实际运用中，你可能需要在让多行文本在一个特定高度的区域内垂直居中。当以上三种方法都行不通的情况下，请试试下面要介绍的CSS文本居中的最终方案！

其实最终方案并不复杂，有点麻烦的是浏览器的兼容性问题。因此，我们必须创建2套CSS样式方案：

.outer {
  display:table; width:578px; overflow:hidden; 
  background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;} 
/*下面的CSS是针对IE7，IE6*/
<!--[if lte IE 7]>
<style>
.outer{position:relative;}
.middle{position: absolute; top: 50%;}
.inner{position: relative; top:-50%}
</style>
<![endif]-->

这里我们需要定义三个DIV：

外层(outer) 可以根据需要定义高度、宽度，但是display必须为table。
中间层(middle) 可以有特定的CSS样式，例如：margin-left，但是display必须为table-cell，vertical-align必须为middle。
内层(inner) 主要是用来对付IE6和IE7的(注意:IE8支持table-cell居中，所以无需hack)。

有了上面的CSS，HTML代码可以这么写：

<div class="outer">
  <div class="middle">
    <div class="inner">
      把你要居中的文本放在这里
      这是第二行
      ...
    </div>
  </div>
</div>

演示

标签： CSS, HTML

...阅读全文

面包屑(Breadcrumb)导航条

演示和代码

经常访问我网站的朋友一定注意到我更新了网站的导航条。上次的更新是在去年十月份，具体的介绍请看这篇文章日志模板更新。虽然上次更新的时候觉得旧款的导航条还挺漂亮的，但是时间一长我就开始厌烦了。特别是两个星期前，我在网上看到这款苹果风格的面包屑导航条，就深深地爱上了它。今天终于有空把它搬到了自己的网站上。

总的来讲，这款导航条还是比较容易整合到网站上。主要碰到的问题还是浏览器的兼容性问题。原创的版本在IE6下根本是不能用的，可是在访问我网站的朋友里，大约有三分之一还在使用IE6，因此就算我不情愿，我也要把它修改成和IE6兼容。其实在这次IE6下最大的问题是：原创版本用PNG做背景，所以在IE6下原本透明的PNG背景被加上了一层淡淡的蓝色。关于IE6的PNG不透明问题在网上讨论的很多，我尝试过其中一种使用javascript的解决方法，但是效果很差，因此我干脆使用photshop把PNG转换成GIF，虽然转换后的背景图边缘不如PNG的平滑，但是整体效果还行，基本上看不出有什么区别。另外一个问题：在IE6/IE7浏览器里中文导航字在垂直方向不会居中，我没有找到更好的办法，只好给IE特别写了一行CSS样式代码。此外，我还加入了搜索栏，但是碰到类似问题：搜索栏在IE6下垂直方向不居中，因此又给IE6写了一行CSS。最终的效果图如上，如果你非常挑剔，那么你可能还注意到，那个搜索图标在垂直方向稍微有点偏上，这回是Firefox的问题了，它在IE里显示正常。不管了，总之我已经挺满意。希望这回不要过早的喜新厌旧。:-) 下面要介绍如何制作这款导航条。

1.HTML代码：

<ul id="breadcrumb">
  <li><a href="/"><img src="home_blk.gif" alt="Home" class="home" /></a></li>
  <li><a href="/blog" class="chinese">博客</a></li>
  <li><a href="/blog/categories" class="chinese">日志分类</a></li>
  <li><a href="/blog/categories/jquery.html">jQuery</a></li>
  <li><a href="http://feed.feedsky.com/61dev" target="_blank" title="订阅本日志"><img src="rss.gif" alt="订阅本日志" class="home" /></a></li>         
  <li>Search Result</li>        
  <li style="float:right;">          
    <form action="http://www.61dh.com/search" id="cse-search-box">
      <div>
       <input type="hidden" name="cx" value="partner-pub-8060693734982386:qvg7d0-myh2" />
       <input type="hidden" name="cof" value="FORID:11" /> 
       <input type="hidden" name="ie" value="UTF-8" /> 
       <input type="text" name="q" size="31" /> 
       <input class="srch" src="search.gif" type="image"> 
      </div> 
     </form> 
     <script type="text/javascript" src="http://www.google.cn/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>               
    </li>
</ul>

上面的HTML代码没什么特别之处，只是些HTML列表(list)而已。值得注意的是: 当列表内容是图片，使用了CLASS ('home')；当列表内容是中文，使用CLASS ('chinese')。此外，因为搜索栏是靠右的，所以其列表使用了CSS 'float:right'。

2. CSS代码

<style type="text/css">
body{font: 12px Arial, Helvetica, sans-serif;}
h1{font-size:22px;}
#breadcrumb{
    background-image:url('bc_bg.gif'); 
    background-repeat:repeat-x;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}
#breadcrumb a{
    height:30px;
    display:inline;
    float:left;
    background-image:url('bc_separator.gif'); 
    background-repeat:no-repeat; 
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}
#breadcrumb a:hover{color:#35acc5;}
.home{border:none;margin: 8px 0px;}
.srch{display:inline; padding:5px 10px 0 0;}
</style>
 <!--[if lt IE 7]>
   <style type="text/css">
     .srch{display:inline; padding:7px 10px 0 0;}
   </style>
<![endif]-->
<!--[if IE]>
   <style type="text/css">
     .chinese{ margin-top:2px;}
   </style>
<![endif]-->

在原版的CSS上，我给#breadcrumb a, 加入了float:left，这解决了导航条在IE6下的显示问题，另外使用GIF替代PNG，还有一些小调整。最后要提醒注意的是：我给IE6和IE专门定制了CSS，用来解决本文开头提到的浏览器兼容问题。

演示和代码

标签： CSS, HTML, 博客

...阅读全文

CSS 信息框

信息框在网站开发中比较常用，它可以用来引起网站访问者的注意；并且用来转递某种信息。例如Google的个性化主页iGoogle，有时会有一个信息框停靠在页面上方的中部，用来提示用户他们新增了一些功能。信息根据其传递内容的不同大致可以分为3种:

1. 成功提示 (success) - 通常用绿色来表示
2. 错误提示 (error) - 通常用红色来表示
3. 通知提示 (notice) - 通常用黄色来表示

哈哈，是不是和交通灯很相似啊。这里要介绍的两套CSS/HTML信息框，或许它们可以用在你的Project里。

一. 横条型 演示

HTML 代码：

<div class="message notice">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>  
  通知提示信息<!--请用实际信息替代-->
</div>
<br />
<div class="message success">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
  成功提示信息
</div>
<br />
<div class="message error">
  <div class="msg_head_img">
    <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
  错误提示信息
</div>

上面的三段HTML代码分别用于显示通知、成功、错误信息。主要的CSS样式有：message、notice、sucess、error。message是共用的，其它三种分别代表不同的信息类型。具体样式表如下：

.message {
  padding: 5px;
  border: 2px solid #ddd;
  background-color: #eee;
  color: #222;
  font-size:12px;
}
.notice {
  background: #FFF6BF;
  color: #817134;
  border-color: #FFD324;
}
.success {
  background: #E6EFC2;
  color: #529214;
  border-color: #C6D880;
}
 
.error {
  background: #FBE3E4;
  color: #D12F19;
  border-color: #FBC2C4;
}

二. 框框型演示

HTML 代码：

<div class="msg_h yellow1">
  <div class="msg_head_img">
  <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
  </div>
   <div class="msg_head_txt yellow2" >
      信息标题
  </div>
  <div class="msg_body">
     通知提示信息
  </div>
</div>
<br />
<div class="msg_h green1">
  <div class="msg_head_img">
  <a class="close " href="#"><img src="/images/close.gif" border="0"/></a> 
</div>
   <div class="msg_head_txt green2" >
      信息标题
  </div>
  <div class="msg_body">
     成功提示信息
  </div>
</div>
<br />
<div class="msg_h red1">
  <div class="msg_head_img">
  <a class="close " href="#"><img src="/images/close.gif" border="0"/></a> 
  </div>
   <div class="msg_head_txt red2" >
      信息标题
  </div>
  <div class="msg_body">
     错误提示信息
  </div>
</div>

和第一套CSS信息框不同的是，这一套包含有标题栏。CSS样式同样包含有共用的class和各自的class，具体如下：

.msg_h{border:2px solid; height:auto; width:300px;}
.msg_head_img{float:right; display:inline; padding-top:3px;}
.msg_head_txt{padding:5px; font-size:12px; font-weight:normal;}
.msg_body{padding:10px;}
.yellow1{border-color: #FFD324;}
.yellow2{background:#FFD324; color:#817134;}
.green1{border-color: #C6D880;}
.green2{background:#C6D880; color:#529214;}
.red1{border-color: #FBC2C4;}
.red2{background:#FBC2C4; color:#D12F19;}

你可能注意到在这两套CSS信息框里都用到了以下HTML代码：

<div class="msg_head_img">
  <a class="close" href="#"><img src="/images/close.gif" border="0"/></a>
</div>

这段HTML代码提供了一个可点击的图标，目的是让用户可以自由地关闭信息框。其实这可以根据实际情况改变，如果你想让信息框一直显示，那么你可以把<a>元素去掉，另外还可以换上其它小图标用于装饰。如果你想提供关闭信息框的功能，那么只要使用下面的jQuery语句就可以轻松实现：

<script type="text/javascript">
  $(document).ready(function(){
    $(".close").click(function(){
      $(this).parent().parent().fadeOut('slow');
    });
  });
</script>

演示和代码

标签： CSS, HTML, Jquery

...阅读全文

图片在IE下存在空隙

前两天在对公司网站进行更新时，遇到一个HTML的问题。最初的代码大致是这样：

<div class="ban-img" style="height:87px;">
  <h1><a href="/"><img src="/images/new/example.gif" border="0" /></a></h1>
</div>

更新后的代码大致如下: （注：只显示出问题的部分代码）

<div class="ban-img" style="height:87px;">
<h1>
<a href="/"><img src="/images/new/example.gif" border="0" /></a>
</h1>
</div>

实际这里我只是把<h1>分行写而已，图片的高度是87px；包含图片的div的高度也是87px，另外div和h1的margin和padding都设为零了，可是更新后的代码在IE下(IE6和IE7)下，图片下方出现一个大约5px的空隙。因为这次更新是针对代码的其他部分，一开始并没有注意得到问题会处在这里，所以花了挺长时间debugging才找出原因。把<h1>和其内容写在同一行后问题就解决了。

之后，我重新温故了以前收集的有关IE的CSS问题的解决方案。其实这个问题还有一个解决方案，那就是设置img为display:block。如下：

<div class="ban-img" style="height:87px;">
<h1>
<a href="/">
  <img src="/images/new/example.gif" border="0" style="display:block;" />
</a>
</h1>
</div>

标签： CSS, HTML

...阅读全文

如何让图标垂直居中

在网站设计中，为了让一个文本标题更加醒目，或者让一个列表更加美观，我们常常会在文本前加上一个小图标。例如，少儿上网导航的首页，我在标题“请选择频道进入”前就加入一个GO的图标。是不是觉得挺漂亮的？本文要介绍的是如果让在文本前加入图标，并且让图标垂直居中。

在文本前加小图标的方法有两种：一种是直接用<img>标签，另外一种是使用CSS背景属性。

1. <img>标签

HTML的<img>标签，提供align的属性，但是这种属性已经被弃用(deprecated)。另外根据我的经验，img标签的align属性在IE和Firefox下的显示是不同的，使用它很难让图标垂直居中。比较标准的方法应该是通过CSS来定义img的样式属性 - vertical-align (元素的垂直排列)。

vertical-align可能的值和描述如下：

baseline
默认。元素放置在父元素的基线上。
sub
垂直对齐文本的下标。
super
垂直对齐文本的上标
top
把元素的顶端与行中最高元素的顶端对齐
text-top
把元素的顶端与父元素字体的顶端对齐
middle
把此元素放置在父元素的中部。
bottom
把元素的顶端与行中最低的元素的顶端对齐。
text-bottom
把元素的底端与父元素字体的底端对齐。

通常使用middle就可以让图标和文本水平对齐，但是这和图标的大小、文本的字体大小(font-size))、以及元素的行高(line-height)等都有关系。建议把行高设成和图标的高相同，然后把字体大小设成比行高小2个px。另外还可以根据实际情况调整图标或者文本的上下padding。例如：

<p class="v1">
  <img id="myimg" src="/images/go.gif" border="0" />&nbsp;请选择频道进入
</p>
<!--CSS样式如下：-->
<style type="text/css">
  #myimg{
    height:24px;
    vertical-align:text-bottom;
  }
  .v1 {
    line-height:24px;
    font-size:22px;
  }
</style>

2. 使用CSS背景属性

使用CSS背景属性应该算是最标准的方法，使用它我们可以给文本标题加上特色图标。这种方法在给文本列表加上图标时尤其常用。当然我们还是要注意行高、图标尺寸和字体大小等因素，前面的建议在这种方法里依然适用。例如：

<style type="text/css">  
  .v2 {
    font-size: 22px; 
    line-height:24px; 
    color: #6B9905; 
    margin:0; 
    padding:15px 0px 15px 30px; 
    text-align:left;
    background: url(../images/go.gif) no-repeat 0px 15px;
  }
</style>
<p class="v2">请选择频道进入</p>

这里的难点是：background: url(../images/go.gif) no-repeat 0px 15px; 0px/15px指的是图标的横/纵坐标，横坐标为0代表在父元素区间的最左边，纵坐标为15px代表图标从父元素区间的顶部向下移动15px (因为文本的上方padding是15px，所以采用下移15px就可以和文本对齐)。注：关于背景元素，我在以前的文章里有比较详细的介绍。

演示和代码

标签： CSS, HTML

...阅读全文

网站开发日志

关于

上一个

存档