脚儿网

网页侧边栏在左边好还是右边好？

十年灯 — Tue, 21 Feb 2012 09:03:35 +0000

关于网站侧边栏应该在左边还是在右边，看起来好像是个无所谓的问题，但网上有很多讨论的文章，甚至上升到了是否影响用户体验的高度。

其实我想说：这很无聊。

既然有侧边栏，就有主体栏。两者相比，无疑主体栏才是你想展示给用户的东西。而侧边栏的作用，就是提供一些与主体相关或额外的信息，希望用户在浏览了主体内容后，能点击侧边栏的链接浏览更多内容。这就是侧边栏存在的目的。

很多人在谈论侧边栏位置时，考虑的只是他的“视觉位置”，我觉得不如考虑一下它的“实际”位置。

什么是“实际位置”？那就查看你的网页源文件，看看侧边栏的代码是在主体栏代码的前面还是后面吧！

搜索引擎在读取你的网页的时候，无疑是从源代码上面开始往下读。这样一来，主体栏的代码肯定要比侧边栏更靠前才好，这样才能突出你网页的“主要内容”。要是不幸你的侧边栏代码反而在主体代码前面且侧边栏代码还比较多，那搜索引擎就会因为迟迟找不到你网页的真正内容而降低你网页的权重。

当然，把侧边栏加在主体代码前的网站，基本没有。

但是，我不只是想说主体与侧边栏的问题，可以更进一步，说说网页主次区域的排列问题。

拿一个基本的网页来说，比如一个wordpress的文章页面，通常的主次区域应该是这样：主体栏>侧边栏>评论区

很多主题看上去好像是这样，主体栏在左边而且比较宽，侧边栏在右边比较窄，然后评论区在下边——没什么不对啊！但你看过源码吗？

很可能源代码里，是先加载了评论，再加载了侧边栏！（靠，突然发现我现在的主题就是这样！）这个时候，你就真的需要改代码了。

当然，也许你认为评论比侧边栏重要，那你也可以检查一下代码看看谁在前面。

简单的说，就是谁更重要就谁在前面。

不过你也可以在网页代码的结束处，添加一些你认为重要的信息，比如最新文章列表什么的，也很有用噢。

至于侧边栏该在左边还是右边的问题，不过是一个float:left还是right的事儿，等你网站做好了日IP100000了请得起UED团队了再交给他们研究吧——不过，真的很无聊。

notepad++中设置tab缩进的宽度

十年灯 — Thu, 16 Feb 2012 02:13:20 +0000

昨天关电脑的时候没有先关闭notepad++，于是今天打开notepad++的时候就提示什么”config.xml”找不到，于是notepad++的所有设置都乱了。

不过修复起来也并不难，需要设置的地方不多。后来我发现文档里有缩进的行前面的缩进显得非常空，仔细一瞧发现tab制表符的缩进宽度变成了8个字符（一般是4个）。如果一个tab就8个字符的话，那碰上多重标签嵌套的时候，岂不是没几个tab就把一行都占满了！所以最好是设置成4个字符宽。

自己在设置–首选项里找了一圈，没有设置tab宽度的地方。我本来猜测是在“视图”菜单里，也没有。无奈，只有上google用英文搜索，总算找到了：

notepad++设置tab宽度的地方：菜单的“设置–首选项–语言”，你会在右下角处看到“标签尺寸”，后面的数字就是tab占用的字符数。比如我现在就是8，点一下数字，输入4，然后直接回车，就行了。

当然你也可以随意设置你自己要的tab缩进宽度。

网站分页导航样式改良计划

十年灯 — Tue, 14 Feb 2012 05:46:07 +0000

所谓网站分页导航，就是如图所示的这种了：

分页导航样式

这张图片截取自我收集的一个分页导航制作网页。网站分页导航的作用，就是在单网页内容较多，需要分页显示的时候，提供给用户进行前后翻页，以便于浏览更多内容。

在设计分页导航的时候，可参考这些要点：

用户在翻了几页后，一般都不清楚自己到底在哪一页了，此时通过上下页翻页，比用眼睛寻找页码判断页面然后翻页要方便的多。

2，最好有页码。

便于随意跳转。如果页码太多，最好有直接跳到最后页和最前页的链接。

3，宽度不能限制死了。

比如说你的页码背景图只适合1-9页这种分页，那建议你不要用这个背景图了，万一有第10页或更多页呢。

所以说，写分页CSS的时候，就不要用width:了，还是用padding吧，容错力更强。

分页导航的样式设计的“潜规则”：

1，当前页码与非当前页码要有明显区分。不然用户真的会找不到自己在哪里。

一般非当前页码是A标签，因为他们是可点击跳转的；而当前页码就不用跳转了，可用span代替，并设置突出的不一样的css样式。

2，明确表示出可点击区

在可点击的页码上，设置背景色或者border，以标明可点击区，这对用户来说很不错。

3，视觉区与可点击区要吻合

网站分页导航样式

例如有分页导航样式如上图。html代码怎么写呢？有的人直接一串A标签搞定，有的人习惯用一串包裹A标签的li来实现。怎样都行，但后者要注意“视觉区与可点击区”的吻合问题。

拿上图来说，视觉区，即每个红色的小方块，就应该是可点击区。如果你用一个li标签来包裹A标签，那要注意把padding什么的加在A标签上而不是li上。如果你加在了li上，那就会出现这种情况：用户以为红色块就是可以点击的，实际上却不是，因为红色的是li,真正的链接是那小小的数字A标签，他必须要把鼠标精确的移动到数字上面，才能点击链接。

这数字有几像素宽呢？恐怕很难点吧

网站分页导航的其他一些注意事项：

1，宽一点点吧

现在上网用户近视的很多，12像素的字体很多人都会嫌小了。所以，分页按钮你也不要弄成12像素了，起码“可点击区”设置宽一点点吧

2，是否真的需要分页导航？

有的网页实际上内容并不多，仅仅出于增加广告展示量的目的就加入分页，不厚道呀

3，多看案例

个人觉得淘宝啊QQ啊网易啊什么的美工还是做的很好的，我们可以到处看看，“采众家之所长”，及时学习新技术。

再谈wordpress的固定链接格式

十年灯 — Mon, 06 Feb 2012 08:00:12 +0000

wordpress设置哪种固定链接格式才好？

网上有很多教你选择何种永久链接（即固定链接）格式的文章，说来说去都没个所以然，还有人浑水摸鱼来骗点击量的。其实，关于固定链接格式的选择，要注意的就这么3点：

1，对SEO有利

2，不同级别的链接不能混淆

3，要有容错能力，不能出现莫名其妙链接地址就变了的情况

下面一步步详细说明：

一，设置为对seo有利的格式

这是设置链接格式最关键的一点。如果你不知道哪种链接格式对seo有利，你可以反过来了解下哪些链接格式对SEO不利：

带中文的链接。也许你认为中文链接对国内网民来讲更直接，但其实不然。因为中文在大部分时候会被进行url编码，变成一串奇怪的字符
层级太深的链接。层级深，分支多，不利于查找。

所以我们设置链接格式的时候，基本原则就是：避免中文，层级少一点。

不过，从层级上来说，jo2.org/123.html和jo2.org/archives/123.htm好像没多大区别，后者只多了一级而已。其实还是有差别的：如果你去出售友情链接，如果你设置的是后一种格式，别人会以为你是拿的3级链接，权重少了1级而和你砍价！但其实你真的是2级链接啊！

链接层级越浅，才越值钱！

个人认为，在WP中：wwwroot/123.html或wwwroot/postname.html是很好的链接格式。如果你不惧麻烦，可以使用后者，因为后者几乎每次写文章都需要手动修改一下。

另外，没必要把日期加入到链接地址里，见下方第三点。

二，不同级别的链接不能造成混淆

比如，你的WP有个关于页面叫wwwroot/about，而你还有一个别名叫about的文章分类，甚至还有一个叫about的文章标签。如果你的固定链接格式像上面我说的那样设置的话，那他们可能都有一个相同的链接地址就是：wwwroot/about！这种情况非常蛋疼，所以建议你为文章分类和标签分别启用不同的目录前缀，避免混淆。详情点这里

另：建议给你的所有文章分类都取一个英文别名，从而避免出现中文链接。但标签就不用了，太多了…而且标签也不算太重要

三，永久链接格式要能容错，避免无意更改

我们自己手动更改固定链接格式，导致wordpress文章链接地址改变，就是“有意”的；而在莫名其妙的情况下链接地址变了，就是“无意”的。

也许你迷惑了：链接地址怎么可能莫名其妙自己变了呢？还真有可能。

比如，你的WP固定链接格式是：wwwroot/2012/12/12/postname.html或wwwroot/fenlei/postname.html这两种：前者是“网址/日期/文章名”格式，后者是“网址/分类/文章名”格式，都可能导致链接地址的变化。

比如你发布一篇文章后，本来搜索引擎都已经收录了，但你突然想改一下文章发布时间，这样一来，日期就会变化，导致上述前一种链接格式地址改变；或者你突然发现你的文章分类没选对，有的文章可能同时属于两个分类而你只选了一个，或者干脆分类选错了，此时你一改分类，则上述后一种的链接地址就会变化。

不管链接地址怎么变，反正搜索引擎只会看到你的旧地址出现了404…

PS：永久链接格式设置后，非迫不得已尽量不要改！因为此时搜索引擎已经记住了你的链接格式，你要是一换，从搜索引擎进来的网友就只会看到404页，搜索引擎也只能看到404！有的人还可以设置301来进行新旧链接的跳转，但这一来麻烦大部分人都不会，二来，跳转肯定会减慢网页载入时间。

就像脚儿网一样，因为中途改了永久链接格式，差点被google惩罚的万劫不复…

——————————————————

好了，设置好固定链接格式，保持更新，就能等待良好收录了。

html代码优化与精简

十年灯 — Thu, 02 Feb 2012 02:53:20 +0000

过年归来，继续我的《高性能web前端优化指南》系列。虽然看的人少，顶的人更少，但我还是应该坚持下去，权且当作工作总结吧。

html代码优化与html优化并不是一回事，前者只是后者的一部分，html代码优化，就是在不大伤脑筋重构的前提下，或者说，在web整体架构结束后，进一步尽量减少html代码的字节数而已。

下面简单说一些html代码优化的技巧：

一，去除不必要的html标签

既然要削减代码体积，那就先从没必要保留的地方下手。也许你是用的智能编辑器如dreamweaver,VS等，让你点点鼠标就能插入代码，但这些代码中也有一些代码是不必要的。下面是一些常见的可优化的html标签。

meta标签。除了其中的编码声明行，keyword与description子标签，其余的都可以不要。
link标签。通常用来载入css文件，其余用途则可选择删掉；而且，link载入css时，带上type=”text/css”即可，不用再加上那句rel=”stylesheet”，media属性也可不要。
通常这句，其实只保留即可
script标签，也只保留type，而无需使用language属性
内容为空的属性。比如img的空白alt，a的空白title
加在不需要视觉操作的元素上的属性。如link,script上的class,id等（这个真心可删）

删除，是最简单的事，只要知道该删哪些。以上并没有列举完。

二，主动减少html标签

这点需要比较良好的代码知识。我们应该本着写更少的代码，做同样多的事情的心态来写html。

1，重点：减少html标签嵌套

就是能用1层标签的就不要用两层，然后通过css来达到相同的视觉效果。如有下面这样一个效果图：

这个块的html结构要怎么写呢？可以这么写：

相关文章

。。。

也可以这样：

相关文章

。。。

相比之下，后者代码精简的多，而且可以通过css实现相同的视觉效果。减少嵌套，对seo也更好。

不过，前者无疑具有更好的扩展性。比如你想在“相关文章”右边加一个“更多”链接，那前面这种结构容易修改多了。

所以，精简代码，是在确认了需求改动不频繁的前提下，否则以后修改起来会让你很痛苦。

2，尽量少使用行内css

就是style=”height..”这种。因为行内css每次都要加个style=，关键是，只能对此元素生效。不如用一个class代替，重用起来也方便。

3，合并css

把不需要判断条件载入的css文件给合并了，可以减少一个link标签，也就减少了一个http请求

三，web在线编辑器造成的噩梦

这个编辑器就是你在网页上发布文章时用的编辑器，如果你使用博客，空间，QQ空间等，你应该经常用web在线编辑器。

通常，写网站的与发文章的都是两批人。发文章的多是网站编辑，网页知识了解甚少。甚至有的人直接把文章从word文档里复制进编辑器，就发布了。这时，就会生成大量的垃圾代码。详细》

—————————————–分割线——————–

其实，代码的精简，随着你编码能力的提高，你就会不知不觉的实现它。因为谁也不喜欢做无用功，谁都希望事半功倍。如何精简，多半都要靠悟性了。

不过，只要你启用了gzip压缩，代码精简与否都是浮云！gzip能直接把html等文件体积压缩至原来的30%~50%。。。额

准备回家过年

十年灯 — Mon, 16 Jan 2012 08:47:05 +0000

俺已经准备回家过年了。由于网络不便所以会有半个月不更新，各位朋友，也别再忙了，准备回家团圆吧。

我会先在这边过了年，初几里再回老家跑一趟。但我老婆却要过年之前就回去，因为嘛，我们快结婚了，这估计是她和她父母一起过的最后一个年了，所以我也不能强留她在这边过年。唉

不过，今年貌似没存到什么钱呢。

随机日志

google流量来源恢复正常了

十年灯 — Fri, 13 Jan 2012 09:27:13 +0000

之前因为百度对本站收录一直不正常，所以我想了个办法：使用百度统计，更换主题，更换了本站永久链接格式！结果我如愿以偿了：百度收录正常了，而且多多少少带来了一些流量。

但让我蛋疼的是：从那以后google就对我不正常了！从google进入的流量日益减少，前两天甚至一个google的流量也木有！这是为毛啊！这让我这个本来就是做网站优化的情何以堪！

从上次网站大换血以来，google的表现如下：我发的新文章依旧是秒收，但没有任何权重！前几天我尝试过搜索xTaoke,居然翻了几页也没找到我站点的文章，反而是一些我在其他网站比如wordpress论坛上发布的文章，或者其他专门收录主题的网站——但就是没有我的。我在外站上发文章可都是加了链接的啊！

我猜测google这样对我应该是因为我改了wordpress固定链接的格式——从原来的2级链接直接变成了3级，才导致了这个惨烈的结果。

不过，当当当当，从前天开始，google就恢复正常了！我的网站权重终于上来了。百度正常，google正常，哇哈哈！自然流量首次突破了100IP。

等等，好像有点不对呢。。。。我靠，做了两年的博客，流量才上100！天啊！

大修pearlie主题

十年灯 — Thu, 12 Jan 2012 09:48:40 +0000

自从xTaoke加强版上线出售后，充分感觉我的人脉不够，主题不好卖。。49块钱的主题，还有人来和我砍价，要我20块钱卖。汗，49块钱还不如我半天的工资呢，20块的话，就够买一包烟啊！情何以堪！

后来我觉得，作为一个制作wordpress主题的网站来讲，这款pearlie主题的样式有点太简陋了。虽然pearlie功能强大，但没用过的人也不知道啊。一个漂亮的主题，应该有利于以后的业务开展。

pearlie修改版

于是我又花时间修改了pearlie，共计用时：1天半？最新样式如此刻本站。

首页幻灯片展示当然是要保留的，只是我移到了最上面，图片加宽而收矮，样式也改了。不过我感觉：太矮了！比如那个美女现在只能现出一个脖子…

幻灯片下面放的就是最新文章，有缩略图的会显示缩略图。

最新文章下面（如果你继续往下拉滚动条的话），是原来放在中间的某两个分类文章。不过由于位置太靠下，估计曝光率很低。

侧边栏增加了一个tabs切换效果，把不常用的东西如标签和热门文章放在了里面。借jQuery的便利，加了动态效果。

但侧边栏这样一来就很短了，所以放了几个广告位。目前这些广告位只有凑数的作用。

其他说明：

基本兼容各浏览器，但使用非IE核心浏览器效果更好。

QQ2011皮肤半透明设置

十年灯 — Thu, 12 Jan 2012 01:35:36 +0000

qq2011有很多让你的QQ看起来更炫的功能，比如随意调整皮肤颜色，以及设置QQ皮肤透明度。

如图，设置了半透明后，就类似于windows7的毛玻璃效果，可以看到QQ面板背后的东西。

QQ2011设置皮肤透明度的位置如上图：在你QQ主面板的天气图标下面，点那个七彩小图标，然后在弹出的小面板下面可以看到一个带过度效果的长条，拖动长条上的滑块就能调整皮肤的透明度。

也许你长条左边那个”气球”上会有一个红色的禁止提示，那就表明透明度设置是被禁止了的。你可以点一下那个气球，在弹出的对话框里选确定，就能设置透明度了。

友情提示：开启透明度效果会拖慢QQ的界面运行速度。。不过一般情况下可以忽略。

收费淘宝客主题：xTaoke加强版

十年灯 — Thu, 05 Jan 2012 07:40:13 +0000

我的wordpress主题：淘宝客主题xTaoke加强版新鲜发布！加强版由原来的xTaoke主题升级而来，保留xTaoke的所有功能，并加入了更多功能，持续更新中！

售价：49元/套。共计10套，已售出4套。售完即止。购买地址：http://buyibang.com/o/xtaoke

预览地址：http://buyibang.com/

原有功能可到xTaoke主题发布页查看，新增功能介绍如下：

2012-02-10更新：

重要：将原来的广告输出方式改为JS延迟载入。将广告位对搜索引擎进行了隐藏，以避免因alimama广告代码被百度惩罚。
可以设置首页每行显示的图片数量了。默认4，可选择3、4、5、6.
优化了部分源代码。

xTaoke加强版原版：

1，方便的自定义网站logo

2，可设置公告，支持html代码

3，便捷插入广告位，分别在顶部，侧边栏和评论区，都有启用开关

4，有购买链接的文章，则会在文章页自动生成购买按钮；反之则无

主题作者：脚儿网，http://jo2.org/

售价：49元/套。共计10套，售完即止。购买地址：http://buyibang.com/o/xtaoke

主题特色简介：

方便的输入商品信息
淘宝链接加密
自定义网站logo,公告
自定义广告位
简单网站前端特效

售后服务：

购买本主题后，你可以得到：

xTaoke主题文件压缩包x1;
xTaoke使用说明文档x1;
一个为你定制的简单的网站3d logo;
一张为你定制的提示”没有图片“的图片；
免费的主题升级与维护；
热心解答所有使用过程中的问题。

下单前请先联系我，谢谢