SEO之增加文字与HTML代码的比例

5月 13, 2009 8:55 下午  |  分类:网站建设

上一篇里,我们从网站运营的角度说了说SEO的网站内部链接

今天,从网站建设的角度,既设计师的角度来说说如何SEO一个网站的文字和HTML代码比。

其实对于搜索引擎来说,最友好的,当属文字了,虽然现在图片的抓取不断在改进,但是任何一位有经验的老手都会告诉你,SEO,文字最合适。也正因为此,比方说网站建设博客里,图虽有,但仍是文字居多。

这里给大家举个简单的例子,说明如何增加网站的文字与HTML代码比:

如:
很多人喜欢这样写H1:<h1 class=”title”>这里是标题</h1>
众所周知,一个页面不会出现两个H1,如果有两个,那好比一个人身上长着两个脑袋一样很难看。这不仅是常识,也是标准。所以给h1加上这些那些class或id是画蛇添足。
应这样写:<h1>这里是标题</h1>
然后样式需要在CSS中定义。
这是很简单,那页面中有圆倒角如何做?网上有N多办法,其中最典型的就是HTML+CSS实现圆角矩形,HTML代码部分如下:

<div class="panel">
<DIV class="t-o b1"></DIV>
<DIV class="t-o b2"></DIV>
<DIV class="t-o b3"></DIV>
<DIV class="t-o b4"></DIV>
<DIV class="content">
<!-- 这里放内容 -->
<DIV class=clear></DIV>
</DIV>
<DIV class="b-o b4"></DIV>
<DIV class="b-o b3"></DIV>
<DIV class="b-o b2"></DIV>
<DIV class="b-o b1"></DIV>
<DIV class="break"></DIV>
</div>

其实,我们完全不必用这些代码,可以简化到:

<div class="panel">
<!-- 这里放内容 -->
</div>

毫无疑问,这样可以很明显的减少HTML代码,当然,光这样写是失去了圆角效果,效果我们可以借助JS加上。
我们完全可以用纯粹的JavaScript代码来写,为了方便,我们采用jQuery来写:
jQuery(function($){
$('.panel').prepend('

‘).append(’

‘);
})
需要注意的是,这个JavaScript代码要写到一个独立的js文件中。

如果页面中,用到多个圆角,则只管设置class为panel即可。

这样,我们可以减少HTML代码,实现了增加内容和HTML代码比的目的。
在不牺牲用户视觉效果的情况下,给爬虫看一个干净的页面代码,并且在网速相等的条件下,一定的减少抓取时间,有利于抓取,毫无疑问,也将有利于搜索引擎的排名。

除了这个圆角外,滑动门等,完全可以用jQuery进行代码优化,说点不客气的话,国内常用的那些滑动门实在是恶心,还得加一大堆没用的id,其实滑动门可以做的更简单。

这里是HTML代码:

<dl>
<dt>滑动门标题1</dt>
<dd>滑动门1对应的内容</dd>
<dt>滑动门标题2</dt>
<dd>滑动门2对应的内容</dd>
......
</dl>

JavaScript实现265导航上的可爱眼睛

5月 9, 2009 2:02 上午  |  分类:网站建设

hao123.com,265.com以及114la.com这几个导航网站,基本算是国内导航站里的代表了。

现在hao123.com被百度收购,265.com被文胜兄连g.cn一起卖给了Google,两家分别是亏是赚,很多人心里明白。

这里只说说265的LOGO上的眼睛,上过265的人或许都会发现,265的LOGO相当可爱,眼珠会随着鼠标的移动而转动:265的LOGO

但是如果只复制下来的话,可以看到是一双不会动的眼睛,要如何去让它动起来呢?

成捷网站建设给您它的javascript实现代码:

# <h1 id=”Logo265″><a href=”#”><img id=”logoimg” src=”http://www.inwebsite.com.cn/effect/images/logo265.gif” border=”0″ /></a></h1>
# <script type=”text/javascript”>
# function m(a, b)
# {
#   return a.position = b
# }
# function o(a, b)
# {
#   return a.left = b
# }
# function ca(a, b)
# {
#   return a.zIndex = b
# }
# var p = “length”, r = “style”, s = “body”, x, y;
# function U(a)
# {
#   return document.createElement(a)
# }
# var Y, mb, nb, ob, pb, Z, $;
# var qb = 52, rb = 34, sb = 47, tb = 35, ub = 69, vb = 35, wb = 53, xb = 36, yb = 62, zb = 35, Ab = 9, Bb = 7, Cb = 1, Db = 100;
# var Eb;
# var Fb = “http://www.inwebsite.com.cn/effect/images/logo265.gif”;
# function Gb(a)
# {
#   var b = 0, c = 0;
#   if (a.pageX || a.pageY)
#   {
#     b = a.pageX;
#     c = a.pageY
#   }
#   else if (a.clientX || a.clientY)
#   {
#     b = a.clientX + document[s].scrollLeft;
#     c = a.clientY + document[s].scrollTop
#   }
#   return [b, c]
# }
# function Ib(a)
# {
#   Jb();
#   a = a || document.parentWindow.event;
#   var b = Gb(a), c = b[0], d = b[1];
#   Kb(c, d, Z, sb, tb);
#   Kb(c, d, $, ub, vb)
# }
# function Kb(a, b, c, d, g)
# {
#   var e = a - d - mb, f = (b - g - nb) * (Ab / Bb), j = Math.sqrt(Math.pow(e, 2)
#     + Math.pow(f, 2)), h, l;
#   if (j == 0)
#   {
#     h = d;
#     l = g
#   }
#   else
#   {
#     var B = Math.sqrt(Math.pow(j, 2) + Math.pow(Db, 2)), E = Ab * j / B;
#     h = E * e / j + d + mb;
#     l = E * f / j / (Ab / Bb) + g + nb
#   }
#   h -= Cb;
#   l -= Cb;
#   o(c[r], parseInt(h, 10) + “px”);
#   c[r].top = parseInt(l, 10) + “px”
# }
# function EYES_init()
# {
#   var a = Mb(”Logo265″), b = Nb(a, “a”);
#   Eb = Nb(a, “img”);
#   if ( - 1 == Eb.src.indexOf(Fb))
#   {
#     return
#   }
#   Y = U(”img”);
#   Z = U(”img”);
#   $ = U(”img”);
#   Y.border = (Z.border = ($.border = 0));
#   Y.src = “http://www.www.inwebsite.com.cn/effect/images/eyeballmask.gif”;
#   Z.src = ($.src = “http://www.www.inwebsite.com.cn/effect/images/pupil265.gif”);
#   Jb();
#   m(Y[r], m(Z[r], m($[r], “absolute”)));
#   ca(Y[r], 90);
#   ca(Z[r], ca($[r], 100));
#   b.appendChild(Y);
#   b.appendChild(Z);
#   b.appendChild($);
#   document.onmousemove = Ib;
#   T(window, “pageshow”, Jb);
#   T(window, “resize”, Jb)
# }
# function Jb()
# {
#   var a = Ob(Eb);
#   mb = a.x;
#   nb = a.y;
#   ob = Eb.width;
#   pb = Eb[p];
#   var b = “px”;
#   o(Y[r], mb + qb + b);
#   Y[r].top = nb + rb + b;
#   o(Z[r], a.x + wb + b);
#   Z[r].top = a.y + xb + b;
#   o($[r], a.x + yb + b);
#   $[r].top = a.y + zb + b
# }
# function Ob(a)
# {
#   var b = a.offsetLeft, c = a.offsetTop;
#   if (a.offsetParent != null)
#   {
#     var d = Ob(a.offsetParent);
#     b += d.x;
#     c += d.y;
#   }
#   return{x:b,y:c}
# }
# function T(a, b, c)
# {
#   var d = “on” + b;
#   if (a.addEventListener)
#   {
#     a.addEventListener(b, c, false)
#   }
#   else if (a.attachEvent)
#   {
#     a.attachEvent(d, c)
#   }
#   else
#   {
#     var g = a[d];
#     a[d] = function()
#     {
#       var e = g.apply(this, arguments), f = c.apply(this, arguments);
#       return e == undefined ? f : (f == undefined ? e : f && e)
#     }
#   }
# };
# function Mb(a)
# {
#   return document.getElementById(a)
# }
# function Nb(a, b)
# {
#   return a.getElementsByTagName(b)[0]
# }
# </script>
# <script type=”text/javascript”>
# EYES_init();
</script>

具体的一些图片,我们这方便提供,研究此Javascript也只是为学习之用。您可以看到,在这个javascript的应用里,利用四张图,把这双眼睛做得如此可爱。真是网页设计的有趣之处,设计网页,设计生活,设计人生,需要的是技能和灵感!