分类目录归档:Optimization

Web Optimization

网站设计布局中常犯的错误

div+css 网页布局是目前最流行的语言,也是国际变化的趋势,合理的应用可以让你的网站给人眼前一亮的感觉,不过在布局中也应该注意以下一些错误,及时纠正,一个成功的网站就离你不远了。

1、导航菜单使用图片、flash

导航菜单使用图片、flash 当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和 flash 。如果你非要使用漂亮的flash 来做导航的话。建议做一个导航菜单链接的 xml 文件提交到搜索引擎。

2、不恰当地使用图片

为了网页美观,经常会到处贴满图片,这样做是不正确的,与内容无关的图片能少就少吧。我们可以把这些图片做成容器的背景。

3、内容里特殊字体的运用

楷体很漂亮,草书也不逊色于宋体。但是不是所有人的电脑都安装有这些字体。如果使用这些特殊字体的话,在别人的电脑里看到的网页将会是不堪入目。

4、新窗口打开

设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应,这种策略恰恰弄巧成拙,因为当用户想通过“后退”按钮返回先前的站点时,已经做不到了。用户通常注意不到新窗口已经被打开,尤其当他们的显示器很小,而窗口又正好是最大化时。因此,当用户想要返回原来的站点时,面对的却只是一个不可用的灰色 “后退”按钮。

5、无实际意义的特效

避免使用炫耀的技巧。这些特效对你的网页没有任何实际意义。

6、内容滚动

内容滚动可以在比较小的空间里展示比较多的内容。这是它的一个好处。但内容滚动却是弊大于利的。不是所有平台和浏览器都支持滚动的。在 w3c 看来,内容滚动会降低用户体验。

7、用户难以获取自己想要的内容

如果一个用户访问你的网站跟走入迷宫一样,会有什么后果?听说过3次点击规则吗?对于小型网站,在你的主页上,没有任何一条信息,需要点击次数超过3次的。对于大型网站,使用导航和工具条来改善操作。

8、文件名命名不规范

不要忽视这一点,例如新闻页面可以用:news.html ,而不是类似 2323123.html 这样的无规范的命名方式。使用规范的命名方式不仅有利于搜索引擎,而且有利于网站日后的维护管理。

9、长篇文章未设置分页

长篇文章不分页,会导致网页加载速度慢,用户阅读疲劳。所以建议长篇文章设置分页。

10、颜色搭配错误,网页难于阅读

如无必要,你应当坚持使用白色的背景和黑色的文本,另外还应当坚持使用通用字体。

11、没有返回指向

“返回指向”是网络用户的生命线,同时也是继超文本连接后最常使用的导航特征。用户可以随意尝试网页所指向的任何地方,而只需点击一两次“返回”按钮就可以回到先前的页面。

12、显眼的点击计数器

不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务,而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义,它们很容易被做假,浏览者也不想看广告。如果你显示你的网站是多么受欢迎,你最好提供一个链接,显示访问日志。

13、使用框架

与记数器一样,框架在网页上越来越流行。在大多数网站上,在屏幕的左边有一个框架。但是设计者立刻就发现,在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是,搜索引擎常常被框架混淆,从而不能列出你的网站。

14、不恰当地使用声音

声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢,同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣,但是多次以后肯定会很烦人。使用声音前,应该仔细考虑声音将会给你带来什么。

15、兼容性不佳

你的网页在 1024 下看得顺眼么?那么换成 1280 看呢?不是所有人的显示器都用同一种分辨率的。无论是谁,都无法做出所有分辨率下完美的网页,但我们要做出能确保所有分辨率下不出错的网页。还有两点就是:不要以为只有电脑才能看网页。不要以为世界上只有一种浏览器。

17、急于发布网站

网站没有内容、网站程序 bug ,这些问题解决后再发布吧。内容较为充实、程序 bug 基本没有的网站才会让用户流连。

18、发布网站后未登录搜索引擎

有客户问,是不是我的网站已发布就可以在百度搜到了?但是百度不是我家开的,也不是你家开的,你发布网站时百度他是不知道的。所以,你发布网站后要到各大搜索引擎的登录口提交一下你的网站信息。

19、不留空白

注意留空白。不要用图像、文本和不必要的动画 gif 来充斥网页,即使有足够的空间,在设计时也应该避免使用。

20、缺乏互动性

让用户与网站能够互动,让用户与用户之间能够互动。所以最少要有一个留言本,这能激励访问者再次回到你的网站,还有助于扩充网站内容。这个是极其重要的,web 2.0 的核心思想。

原文:http://www.zcool.com.cn/

psd to html 开发步骤

其实标准的网页制作实际就是:psd to html,一般情况下,我们开始 psd to html 的时候需要从两个大点考虑。

一、一个独立的页面

  1. 根据PSD设计稿,分析整个网页的结构。
  2. 分析背景图片和ICO图标的分布。
  3. 切割相应的图片,导出,合并图片(即CSS Sprites)。
  4. 编写XHTML结构代码,包括页面中出现的所有元素。
  5. 根据XHTML代码和PSD设计稿编写CSS样式。
  6. 细节调整。
  7. 收工,并验证各大浏览器的兼容。

二、由多个页面组成的小站或者大站

  1. 浏览所有PSD设计稿,统一规划网站的结构、模块、图片、内容分布等。
  2. 开始第一点的操作。

整体考虑点:

  1. 结构的合理性和语义化。
  2. 图片的合并,减少请求量。
  3. 减少代码冗余,加快网站渲染。

12条保持 HTML 代码整洁的原则

良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候,我总是首先告诉他们:良好的CSS只存在于良好的html标记基础上。这就好像一间房子需要一个坚固的地基一样,对不? 整洁、语义化的HTML标记具有很多的优势,但却还是有很多网站使用着并不友好的标记写法。

让我们来看一些写得并不友好的HTML标记, 并针对这些问题进行讨论,从而学习如何书写整洁规范的HTML标记。

1、严格的 DOCTYPE

我们要做到这一点,只需要按正确的步骤来做即可。没必要去讨论是否使用HTML 4.01或XHTML 1.0,两者都对我们书写正确的代码提出了严格的要求。

CleanCode-1

但无论如何我们的代码不应该使用任何Tables表格来进行布局, 所以也就没必要使用Transitional DOCTYPE.

相关资源:

2、Character set & encoding characters

在我们的 <head> 部份, 第一件事情就是声明字符集. 我们使用了UTF-8, 但是把它放到了 <title> 后面. 让我们把字符集声明移动到最上面,因为我们要让浏览器在阅读任何内容之前就应该知道以何种字符集来进行处理。

CleanCode-2

除了字符集声明的位置外,<title> 中出现的奇怪字符也是需要注意的问题,比如最常用的“&”字符,我们应该使用字符实体“&amp;”来替换它。

相关资源:

3、适当的缩进

在书写代码的时候,缩进并不会影响网页的外观,但使用适当的缩进能使代码更具可读性,标准的缩进方法是当你开始一个新的元素时缩进一个Tab位(或几个空格)。另外,记得,关闭元素的标签与开始标签对齐。

CleanCode-3

相关资源:

4、使用外部CSS 和 javascript

我们有一些CSS代码已经延伸到我们的 <head> 部分。这是一个严重的犯规,因为它只能适用于单一的HTML网页。保持独立的CSS文件意味着未来的网页可以链接到它们,并使用相同的代码。Javascript也是同样的道理。

CleanCode-4

5、正确的标签嵌套

在我们的网站标题里面,我们使用<h1>作为网站标题标签,这是完美的。并且添加了一个到首页的链接,但错误就出在把链接放到了<h1>外面,<a>链接包围了<h1>。这种简单的嵌套错误,大多数浏览器都能良好的处理,但从技术上来说,这是不行的。

锚链接是一个内联元素,而<h1>标题是一个区块元素,区块元素不应该被放在内联元素中。

CleanCode-5

6、去除不必要的DIV

我不知道谁首先发明,但我喜欢“ divitis ”这个词,它指的是在HTML标记中过度的使用divs。在学习网页设计的某个阶段,大家学习如何使用一个DIV来包裹诸多其它元素来实现方便的布局和样式化。这就导致了DIV元素的滥用,需要的地方我们用了,完全不必要的地方我们也用了。

CleanCode-6

在上图的例子中,我们使用了一个DIV(”topNav”) 来包含了UL列表 (”bigBarNavigation”),但DIV和UL都是区块元素,所以没有必要使用DIV来包裹UL元素。

相关资源:

7、使用更好的命名惯例

现在正好谈一下命名管理, 在上一条所说的示例中,我们的UL使用了ID名称 “bigBarNavigation.” 其中 “Navigation” 很好的说明了该区块的内容,但 “big” 和 “Bar” 描述的却是设计而不是内容. 它可能是在说这个菜单是一个很大的工具条, 但如果这个菜单的设计变成垂直的,那这个名称就会显得混乱和不相关。

CleanCode-7

友好的 class 和 id 名称 例如 “mainNav”、 “subNav” 、“sidebar” 、“footer” and “metaData” ,它们描述了所包含的内容。不好的 class 和 id 名称则描述设计,比如 “bigBoldHeader” 、“leftSidebar” and “roundedBox” 等。

8、把字型排版留给CSS

在菜单的设计中,我们一般都使用大写字母。这很简单啊,把菜单项写成大写的不就行了?但为了将来的可扩展性,我们不应该这么做。在代码中,我们应该仍然使用标准的单词大小写写法,或完全写成小写。而之后,我们可以通过CSS来改变文字的字型,比如通过 text-transform:uppercase; 把字母转换为大写,通过 text-transform:capitalize; 把转换为单词首字母大写。

CleanCode-8

9、给 <body>指定Class或id

有的时候,网页中的同一个区块,但在不同页面的时候,我们会对其进行不同的样式化。很多时候,我们会为这个相同的区块取一个新的名称,比如为新样式的DIV区块添加一个“mainContent-500.”的ID属性,为比较窄的侧边栏添加为<class=”narrowSidebar”&gt;。

这并不是一个良好的长期解决方案。正如我们第7条指出的,我们需要友好且保持一致的命名惯例。而不是增加一些花俏的新ID或CLASS名称。

CleanCode-9

为需要样式化某个区块的不同页面指定一个独立的body ID或class将会非常有用。因为页面的所有内容都包含在body标签之中。指定Body名称后,你可以通过CSS Hook来完全重新定义某一个元素的样式。举个例子,原先的页面中,我们对sidebar进行了背景定义.sidebar{background:#FF0;”}而在新的<body class="aboutpage">中,我们要把sidebar的背景弄成黑色,那很简单,使用boy.aboutpage .sidebar{background:#000;} 即可。

相关资源:

10、验证

一些小的HTML代码错误可能并不会对网页内容有多大影响,但通过W3C验证的代码将更有利于网页内容展示。比如下图示例中的图象,缺少自关闭标记和ALT属性。

CleanCode-10

就算没有其它原因,通过 W3C验证时看到绿色的通过提示也是件让人舒服的事情。

相关资源:

11、逻辑顺序

如果有可能的话,尽量保持你的网页部份代码以逻辑顺序来排列是最佳的. 比如下图中,footer放在了sidebar上面,这可能是设计上的需要,内容下面正好是Footer底部,然后才是侧边栏。但如果能通过技术解决,比如Position定位,那你应该把footer放到最下面。

CleanCode-11

12、Just do what you can

我们已经总结了很多让HTML代码书写的更加简洁的原则在这里,这将是一个很好的开始,但还有更多。当你试图修复你现在的代码,可能会发现很困难,而如果你完全当做从头开始学习,却可能会容易的多。不管如何,重要的是,你应该学习如何撰写良好的HTML并且坚持下去。

当你下次书写一个HTML代码项目时,谨记这些简洁原则,Just do what you can, You’ll do better!

CleanCode-12

原文:12 Principles For Keeping Your Code Clean

10条影响 CSS 渲染速度的写法与建议

这篇文章主要写提高网页在客户端浏览器的渲染速度的 CSS 部分。

1、*{} #bd *{} 尽量避开

由于不同浏览器对 HTML 标签的解释有所差异,所以最终的网页效果在不同的浏览器中可能也是不一样的,为了消除这方面的风险,设计者通常会在 CSS 的一开始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了 * 通配符。 * 会遍历所有的标签;

* {
    margin: 0;
    padding: 0;
}

如果这样写,页面中所有的标签的 margin 全是0;padding 也是0;

#bd * {
    margin: 0;
    padding: 0;
}

如果这样写,在 id 等于 bd 下边的所有标签的 margin 全是0;padding 也是0;

这样写的问题是:

a、遍历会消耗很多的时间,如果你的 HTML 代码写的不规范或是某一签标没有必合,这个时间可能还会更长;
b、很多的标签本来就没有这个属性或属性本身就是统一的,那么再给设置一次,也有时间的开消;

建议的解决办法:

a、不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样;所以你要尽可能的去使用那些常用的标签;
b、不要使用 * ;而是把你常用到的这些标签进行处理;例如:

body,
h1,
p,
li {
    margin: 0;
    padding: 0;
}

2、滤镜的一些东西不要去用

IE的一些滤镜在 Firefox 中不支持,往往写一些效果时你还是使用 CSS Hack;而滤镜是一个非常毫资源的东西;特别是一些羽化、阴影和一个前透明的效果;

建议的解决办法:

a、能不使用就不要使用,一方面兼容问题;另一方面很多效果只能在 IE 中使用;
b、如果能用变通实现同样的效果,就用变通的办法。

3、一个页面上少用绝对定位

绝对定位(position:absolute)是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但网页中如果使用过多的绝对定位,会让你的网页变得非常的慢,在这一点上 Firefox 表现要比 IE 还要差。

建议的解决办法:

a、尽可能少用,这个少用的值是多少,也没有一个非常好的值来说明;还要看绝定定位这个标签里边的内容的多少;在这里我只能说,这样写会有性能问题,少用。
b、如果能用变通实现同样的效果,就用变通的办法。

4、background 背景图片的平铺

有些网页的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,那就废了。

建议的的解决办法:

a、色彩少的图片要作成 gif 图片;
b、平铺的图片尽可能大一些,如果是色彩少的 gif 图片,图片大一些,实际大小也不会大多少;

5、让属性尽可能多的去继承

尽可能的让一些子属性去继承父类,而不是覆盖父类;

简单的一个例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Developer Notes</title>
<style type="text/css">
a:link,
a:visited {
    color: #00F;
}
a:hover,
a:active {
    color: #F00;
}
#wdn a:link,
#wdn a:visited {
    font-weight: bold;
}
#wdn a:hover,
#wdn a:active {
    font-style: italic;
}
</style>
</head>
<body>
<div><a href="#">test</a><div>
<div id="wdn"><a href="#">Web Developer Notes</a></div>
</body>
</html>

实际上我是让 wdn 去继承我默认设置的属性,因为那些属性已经存在了。

6、CSS的路径别太深;

例如:

#bd #info #tool #sidebar h2 {
    font-size: 12px;
}

7、能简写的一些就简写;

例如:

#bd {
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 3em;
    padding-left: 4em;
}

改成:

#zishu {
    padding: 1em 2em 3em 4em;
}

8、别放空的 class 或没有的 class 在 HTML 代码中;

9、float 的应用

这个东西我的感觉是如果使用不当,百分百有性能问题,而且还非常的大,但实在不知道怎么样能弄一个例子出来;这里只能建议大家如果不是很明白 float 是怎么工作的,还是少使用为妙。曾经因为这个把 IE 干死过。

10、合理的布局

为什么这么说呢,合理的布局,可以改变CSS的写法以及渲染过程。

原文:http://www.zishu.cn/

什么是 HTML 标签语义化

作为一个前端开发人员,你要是没有听说过 CSS,那你肯定是一个 “out-man” 。随着 CSS 的深入人心,结构、表现与行为的逐渐分离,HTML 语义化成了炙手可热的卖点。

语义化的 HTML 首先要强调 HTML 结构

一个网页就好像一幢房子,HTML 结构就是钢筋混泥土的墙,一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头,也就称不上是房子了。CSS 是装饰材料,是油漆,是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了,没有了实际使用价值。CSS 完全依靠引用它的 (X)HTML 文档。如果你想使 CSS 的能力发挥到极致,提供一个既干净又有结构的 HTML 是非常必要的。

其实 HTML 中的标签都有他自身的含义,只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着 CSS 的重现江湖,表格也终于回到他的本质工作——列表数据。它会告诉我们说:“这行是一个标题;这几行组成了一个段落;这些文字是项目列表……”在做前端开发的时候要记住:HTML 告诉我们一块内容是什么(或其意义),而不是它长的什么样子。

写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 作为标题使用,并且依据重要性递减,<h1> 是最高的等级。

<p>

段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>

<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。

<dl>、<dt>、<dd>

<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>

<em> 是用作强调,<strong> 是用作重点强调。

<table>、<td>、<th>、<caption>、 summary

(X)HTML中的表格不再是用来布局。如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性 summar 为摘要(要想提高搜索的排名这个绝对不应该少),<caption> 标签为首部说明,<thead> 标签为表格头部,<tbody> 标签为表格主体内容,<tfoot> 标签为表格尾部。

<ins>、<del>

知道 <del> ,就不要再用 <s> 做删除线了,用 <del> 显然更具有语义化。而且 <del> 还带有 <cite> 和 <datetime> 来表明删除的原因以及删除的时间。<ins> 是表示插入,也有这样的属性。

<abbr>、<acronym>

<abbr> 标签是表示 web 页面上的简称,<acronym> 标签为取首字母缩写。

alt 属性和 title 属性

title 属性用来为元素提供额外说明信息,但是并不是必须的。

alt 属性为不能显示图像、窗体或 applets 的用户代理(UA),指定替换文字。替换文字的语言由 lang 属性指定。

让你语义化 HTML 结构的无数条理由:

1、去掉或样式丢失的时候能让页面呈现清晰的结构

HTML 本身是没有表现的,我们看到例如 <h1> 是粗体,字体大小 2em;<strong> 是加粗的, 不要误会这是HTML的表现,这些其实是 HTML 默认的 CSS 样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

2、屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页

如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。

3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(因为这些设备对 CSS 的支持较弱)

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。

4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

5、便于团队开发和维护

在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

原文:http://www.chonggou.net/

CSS 网页布局中易犯的 10 个小错误

即使是 CSS 高手,也难免在书写 CSS 代码的时候出一些小错误,或者说,任何一种代码都是如此。小错误却往往造成大问题,浪费很多无辜的时间来调试和排错。查看下面这份 CSS 网页布局中易犯的 10 个小错误,努力的修正你可能会犯的错误,加速你的前端开发效率。

1、检查 html 元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错 div 的嵌套关系。可以用 dreamweaver 的验证功能检查一下有无错误。

2、检查 CSS 是否书写正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用 CleanCSS 来检查 CSS 的拼写错误。CleanCSS 本是为 CSS 减肥的工具,但也能检查出拼写错误。

3、用删除法确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除 div 块,直到删除某个 div 块后显示恢复正常,即可确定错误发生的位置。

4、利用 border 属性确定出错元素的布局特性
使用 float 属性布局一不小心就会出错。这时为元素添加 border 属性确定元素边界,错误原因即水落石出。

5、float 元素的父元素不能指定 clear 属性
MacIE 下如果对 float 的元素的父元素使用 clear 属性,周围的 float 元素布局就会混乱。这是 MacIE 的著名的 bug,倘若不知道就会走弯路。

6、float 元素务必指定 width 属性
很多浏览器在显示未指定 width 的 float 元素时会有 bug 。所以不管 float 元素的内容如何,一定要为其指定 width 属性。
另外指定元素时尽量使用 em 而不是 px 做单位。

7、float 元素不能指定 margin 和 padding 等属性
IE 在显示指定了 margin 和 padding 的 float 元素时有 bug 。因此不要对 float 元素指定 margin 和 padding 属性(可以在 float 元素内部嵌套一个 div 来设置 margin 和 padding )。也可以使用 hack 方法为 IE 指定特别的值。

8、float 元素的宽度之和要小于 100%
如果 float 元素的宽度之和正好是 100% ,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于 99% 。

9、是否重设了默认的样式?
某些属性如 margin 、padding 等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的 margin 、padding 设置为 0 、列表样式设置为 none 等。

10、是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下 DTD 声明。

如何写 WodPress robots.txt 文本文件

robots.txt 基本介绍

robots.txt 是一个纯文本文件,在这个文件中网站管理者可以声明该网站中不想被 robots 访问的部分,或者指定搜索引擎只收录指定的内容。

当一个搜索机器人(有的叫搜索蜘蛛)访问一个站点时,它会首先检查该站点根目录下是否存在 robots.txt 纯文本文件,如果存在,搜索机器人就会按照该文件中的内容来确定访问的范围;如果该文件不存在,那么搜索机器人就沿着链接抓取。

另外,robots.txt 必须放置在一个站点的根目录下,而且文件名必须全部小写。

robots.txt 写作语法

首先,我们来看一个 robots.txt 范例:robots.txt

访问以上具体地址,我们可以看到 robots.txt 的具体内容如下:

User-agent: *
Disallow:
Sitemap: http://www.qq.com/sitemap_index.xml

以上文本表达的意思是允许所有的搜索机器人访问 www.qq.com 站点下的所有文件。

具体语法分析:其中 User-agent: 后面为搜索机器人的名称,后面如果是 * ,则泛指所有的搜索机器人;Disallow: 后面为不允许访问的文件目录;Sitemap: 后面为允许访问 XML 网站地图

下面,我将列举一些 robots.txt 的具体用法:

允许所有的 robot 访问

User-agent: *
Disallow:

或者也可以建一个空文件 “/robots.txt” file

禁止所有搜索引擎访问网站的任何部分

User-agent: *
Disallow: /

禁止所有搜索引擎访问网站的几个部分(下例中的01、02、03目录)

User-agent: *
Disallow: /01/
Disallow: /02/
Disallow: /03/

禁止某个搜索引擎的访问(下例中的baidu)

User-agent: baidu
Disallow: /

只允许某个搜索引擎的访问(下例中的google)

User-agent: google
Disallow:

User-agent: *
Disallow: /

下面,我将介绍一下 WordPress robots.txt 的写法

我的 WordPress robots.txt 的写法如下:

User-agent: *
Disallow: /cgi-bin
Disallow: /tools
Disallow: /wp-
Disallow: /license.txt
Disallow: /readme.html
Disallow: /feed
Disallow: /comments/feed
Disallow: /?s=
Sitemap: http://www.cssue.com/sitemap.xml

简单说明一下,这个 robots.txt 文件允许博客被所有搜索引擎收录,但是不允许搜索机器人访问 cgi-bin 文件夹以及 wp 开头的文件,这主要是为了博客的安全。

此外,不允许搜索机器人访问 feed 文件夹 comments 的 feed 文件夹和 tools 文件夹,主要是为了避免重复内容,这一点百度尤其重视,将 WordPress 的很多页面视为重复内容,这也是 WordPress 博客在百度中排名不高的原因之一。其中,tools 文件是我新建的文件夹,是用来平时存放静态网页的文件夹,不是 WordPress 的系统文件夹,这个我也不希望被搜索机器人访问到,所以一并禁止访问。

禁止访问 license.txt 和 readme.html 文件,是因为它们是 WordPress 的自述文件,所以也没必要被搜索机器人访问。

禁止访问 /?s= 下的内容,是因为它是站内搜索的结果页,也是为了避免重复内容的出现,所以也把它给干掉。

Sitemap: 让搜索机器人访问我的 xml 网站地图文件,让它能更好的收录我的网站内容。

十四条提升你的网页加载速度

网站最基本的东西是什么?

内容?SEO(搜索引擎优化)?UE(用户体验)?都不对,是速度。
内容再丰富的网站,如果慢到无法访问也是毫无意义的。SEO 做的再好的网站,如果搜索蜘蛛抓不到也是白搭。UE 设计的再人性化的网站,如果用户连看都看不到也是空谈。

所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢?这也将是我们在文中介绍到的 YSlow 工具的十四条理论基础:

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable

这里我们将逐一的讲解这些准则,对其中开发者密切相关的准则我将详细讲解。

第一条:Make Fewer HTTP Requests 尽可能的减少 HTTP 的 Request 请求数

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、CSS 样式表、JavaScript 脚本、flash 等文件造成的。减少这些资源文件的 Request 请求数将是提高网页显示效率的重点。

这里好像有个矛盾,就是如果我们减少了很多的图片,样式,脚本或者 Flash ,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的 Request 请求数,当然也有一些技巧和建议的:

1、用一个大图片代替多个小图片

这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用 FireBug 工具对多个页面进行分析后的结果表明事实并不是这样。

所以还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。

但是,请注意:也不能用太大的单张图片,因为那样会影响到用户体验。例如:几兆的背景图片的使用绝对不是一个好主意。

2、合并你的 CSS 文件

图为:合并与融合的示例

我们为了提高网页效率的角度上而言,我们还是应该将所有的 CSS 写在同一个 CSS 文件中。但是问题又来了。那么怎么来很好的组织和规划 CSS 样式表呢?这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个 CSS 文件以便于规划和组织。而等到发布的时候,再将多个 CSS 文件合并到一个文件中去,从而达到减少 HTTP Request 请求数的目的。

3、合并你的 javascript 文件

原因和处理方法同上,不再赘言。

第二条:Use a Content Delivery Network 使用 CDN

这个看上去好像很深奥的样子,但是只要结合中国的网络特色,这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”…… 这些词听起来是那么熟悉。如果,一个北京的电信用户试图访问广东的网通服务器上打开一个网页时,你就能很深刻的理解。鉴于这个不是我们开发人员力所能及的准则,所以这里也就不多言了。

第三条:Add an Expires Header 添加周期头

这个也并非开发人员来控制,而是网站服务器管理员的职责。所以,如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员去处理吧。

第四条:Gzip Components 启用 Gzip 压缩

这个大家应该比较熟悉。Gzip 的思想就是把文件先在服务器端进行压缩,然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员来控制,而是网站服务器管理人员的工作范畴,这里就不详细讲解了。如果你对此感兴趣,可以资讯公司的网站服务器管理人员。

第五条:Put CSS at the Top 把 CSS 样式放在页面的上方

无论是 HTML 还是 XHTML 还是 CSS 都是解释型的语言,而非编译型的语言。所以 CSS 放到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行渲染。这样就不会出现,页面结构光秃秃的先出来,然后 CSS 渲染,页面又突然华丽起来,这样太具有“戏剧性”的页面浏览体验了。

第六条:Move Scripts to the Bottom 将脚本放在底部

原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和 CSS 正好相反,脚本应该放在页面的底部。

第七条:Avoid CSS Expressions 避免使用 CSS 中的 Expressions

首先有必要先说明一下 CSS Expressions 是什么一个东西。其实它就像其它语言中的 if …… else …… 语句。这样在 CSS 中就可以进行简单的逻辑判断了。但是 CSS 中 Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候,那么你的浏览器将长期处于假死状态,从而给用户带来极差的用户体验。

第八条:Make JavaScript and CSS External 将 JavaScript 和 CSS 独立成外部文件

这一条好像和第一条有点矛盾。的确,如果从 HTTP 的 request 请求数来讲的话,这样做的确是降低了效率。但是之所以这么做,是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存,所以如果 JavaScript 和 CSS 体积较大的时候,我们将它们独立成外部文件。这样当用户 只要浏览一次以后,这些体积较大的 JS 和 CSS 文件就能被缓存起来,从而极高地提高用户再次访问时的效率。

第九条:Reduce DNS Lookups 减少 DNS 查询

DNS 域名解析系统。大家都知道我们之所以能记住那么多的网址,是因为我们记住的都是单词,而非 http://58.64.157.162 这样的东西,而帮我们把那些单词和 58.64.157.162 这样的 IP 地址联系起来的就是 DNS。那这一条对我们到底有什么真正意义上的指导意义呢?

其实有两条:
1、如果不是必须,请不要把网站放到两台服务器上。
2、网页中的图片、CSS 文件、JS 文件、Flash 文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

第十条:Minify JavaScript and CSS 减少 JavaScript 和 CSS 文件的体积

这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低,好在网上到处都是用于压缩这些东西的工具。压缩 JavaScript 代码体积的工具随处可见,我便不再列举了,这里我只提供一个用于压缩 CSS 代码体积的在线工具网站 http://www.cleancss.com/ 它提供了多种压缩方式,可以适应多种要求。

第十一条:Avoid Redirects 避免跳转

我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢?

其实有两条:
1、“此域名已过期,5 秒钟以后,页面将跳转到 http://www.xxx.com/index.html 页面”,这句话看起来的确很熟悉。但是,我就奇怪了,为什么不直接链接到那个页面呢?
2、一些链接地址请更明确的写出来。例如:将 http://www.d2nb.com/ 写成 http://www.d2nb.com (注意最后面一个“/”符号)。的确,这两个网址都能访问到我的博客,但是,事实上,它们是有区别的。http://www.d2nb.com 的结果是个 301 响应,它会被重新指向 http://www.d2nb.com/ 。但是显然,中间多浪费了一些时间。

第十二条 Remove Duplicate Scripts 移除重复的脚本

这个准则的道理很浅显,但是真正在工作中,很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你的确可以找很多的理由不去处理这些多余重复的脚本代码,如果你的网站不需要更高的效率和后期维护的话。也正是这点,我提醒大家一些,一些 JavaScript 框架、 JavaScript 包一定要慎用。至少要问一下:用了这个 JS 到底给我们多少方便,提高了多少工作效率。然后,再与它因为多余的、重复的代码带来的负面效果比较一下。

第十三条:Configure ETags 配置你的实体标签

首先来讲讲什么是 ETag 吧。ETag(Entity tags)实体标签。这个 tag 和你在网上经常看到的标签云那种 tag 有点区别。这个 Etag 不是给用户用的,而是给浏览器缓存用的。Etag 是服务器告诉浏览器缓存,缓存中的内容是否已经发生变化的一种机制。通过 Etag,浏览器就可以知道现在的缓存中的内容是不是最新的,需不需要重新从服务器上重新下载。很遗憾作为网页开发人员对此无能为力。它依然是网站服务器人员的工作范畴。如果,你对此有兴趣,可以咨询公司的网站服务器管理员。

第十四条:Make Ajax Cacheable 上面的准则也适用 Ajax

现在的 Ajax 好像有点被神话了,好像网页只要 Ajax 了,那么就不存在效率问题了。其实这是一种误解。拙劣的使用 Ajax 不会让你的网页效率更高,反而会降低你的网页效率。Ajax 的确是个好东西,但是请不要过分的神话它。使用 Ajax 的时候也要考虑上面的那些准则。

后记:
当然,上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的,却是万万不可死记硬套。

修改 .htaccess 文件,提升你的网页加载速度

一直以来,在我的疯狂优化提速下,我的 WordPress 的 YSlow 评分始终保持在 Grade A,几乎接近完美。不过使用的只是 Small Site or Blog 规则,若是用 Yslow(V2) 规则,小站就只能得个 Grade C,差距为何会如此之大呢?小站倒底有哪些条款没做到 Yslow(V2) 的要求呢?又如何加以改正使之进一步提速呢?

用 Yslow(V2) 规则评测本站,可以发现几个明显的失分点:

  1. Use a Content Delivery Network (CDN)
  2. Add Expires headers
  3. Compress components with gzip
  4. Configure entity tags (ETags)

这四项除了第三项我得了 C 其它项我都得了 F ,这总分 Grade C 也就是被这四项害的。下面一一分析下这四个最容易失分的要点并给出相应的优化方案。

1、Use a Content Delivery Network (CDN)

这个看上去好像很深奥的样子,但是只要结合中国的网络特色,这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”……这些词听起来是那么的熟悉。如果,一个北京的电信用户试图从广东的网通服务器上打开一个网页时,你就能很深刻的理解。鉴于这个不是我们开发人员力所能及的准则,所以这里也就不多言了,放弃该项优化。

2、Add Expires headers

简单点说:就是缓存一下不常修改的文件,提升访问速度。也就是在 .htaccess 文件中写入以下内容:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

text/css 之类代表文件类型,A2592000 表示在浏览器中的缓存时间,2592000 秒 = 30 天。

3、Compress components with gzip

Gzip 压缩是减少文件体积增加用户体验的简单方法,同样,添加以下代码到 .htaccess 文件即可。

<IfModule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css
</IfModule>

4、Configure entity tags (ETags)

ETags 是服务器和浏览器的一个功能,我也不是很懂这些,总之,结论就是:如果你没有使用 ETags 提供的灵活的验证模式,那么干脆把所有的 ETags 都关掉。方法很简单,只要添加以下代码到 .htaccess 文件即可:

FileETag none

说了半天,要注意的是如果你需要优化这些内容,前提是你所在的虚拟主机必须支持 .htaccess 伪静态,否则你再怎么争扎也没有用。很幸运我的虚拟主机就支持该伪静态。所以经过这些优化后,我的总成绩也从 Grade C 上升到了 Grade B,有点小成绩,心里也宽慰一些。向 Yslow 之 Grade A 继续迈进!

十条 CSS 你不知道的秘密

译文:

1、 CSS 字体简写规则

当使用 CSS 定义字体时你可能会这样做:

body {
    font-family: Arial;
    font-size: 1em;
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    line-height: 1.5em;
}

事实上你可以简写这些属性:

body {
    font: italic small-caps bold 1em/1.5em Arial;
}

现在好多了吧,不过有一点要注意:使用这一简写方式你至少要指定 font-family 和 font-size 属性,其他的属性(如 font-style, font-varient, font-weight, line-height )如未指定将自动使用默认值。

2、同时使用两个 class 类名

通常我们只为属性指定一个 class 类名,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少,例如:

<p class="text side">...</p>

通过同时使用两个 class (使用空格而不是逗号分割),这个段落将同时应用两个 class 类名中制定的规则。如果两者中有任何规则重叠,那么后一个将获得实际的优先应用。

3、CSS中边框 border 的默认值

当编写一条边框的规则时,你通常会指定宽度、样式以及颜色(任何顺序均可)。例如:

div {
    border: 3px solid #000;
}

(3 像素宽的黑色实线边框),其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线 solid ,那么其余的值将使用默认值:默认的宽度为中等(相当于 3 到 4 像素);默认的颜色为边框里的文字颜色。如果这正是你想要的效果,你完全可以不在 CSS 里指定。

4、被 IE 忽略 !important 属性

在 CSS 中,通常最后指定的规则会获得优先权。然而对除了 IE 以外的浏览器来说,任何后面标有 !important 的语句将获得绝对的优先权,例如:

div {
    margin-top: 3.5em !important;
    margin-top: 2em;
}

除 IE 以外所有浏览器中的顶部边界都是 3.5em ,而IE为 2em ,有时候这一点很有用,尤其在使用相对边界值时(就像这个例子),可以显示出IE与其他浏览器的细微差别。
(很多人可能还注意到了 CSS 的子选择器也是会被 IE 忽略的)。

5、图片替换的技巧

使用标准的 html 而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。
举例来说,你想在每一页的顶部使用 “Buy widgets” 的标题,但你同时又希望这是能被搜索引擎发现的,为了美观你使用了少见的字体那么你就得用图片来显示了:

<h1><img src="widget-image.gif" alt="Buy widgets"/></h1>

这样当然没错,但是有证据显示搜索引擎对真实文本的重视远超过 alt 文本(因为已经有太多网站使用 alt 文本充当关键字),因此,我们得用另一种方法:

<h1>Buy widgets</h1>

那你的漂亮字体怎么办呢?下面的 CSS 可以帮上忙:

h1 {
    background: url(widget-image.gif) no-repeat;
    height: image height;
    text-indent: -2000px;
}

现在你既用上了漂亮的图片又很好的隐藏了真实文本 —— 借助 CSS ,文本被定位于屏幕左侧 -2000 像素处。

6、CSS 盒子模型 hack 的另一选择

CSS 盒子模型 hack 被用来解决 IE6.0 之前的浏览器显示问题, IE6.0 之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。例如,你可能会使用以下 CSS 来指定某个容器的尺寸:

#box {
    border: 5px;
    padding: 20px;
    width: 100px;
}

然后在 html 中应用:

<div id="box">...</div>

盒的总宽度在几乎所有浏览器中为 150 像素( 100 像素宽度+两条 5 像素的边框+两个 20 像素的填充),唯独在 IE6 之前版本的浏览器中仍然为 100 像素(边框值和填充值包含在宽度值中),盒模型的 hack 正是为了解决这一问题,但是也会带来麻烦。更简单的办法如下:

css:

#box {
    width: 150px;
}
#box div {
    border: 5px;
    padding: 20px;
}

html:

<div id="box">
  <div>...</div>
</div>

这样一来在任何浏览器中盒的总宽度都将是 150 像素。

7、将块元素居中

假设你的网站使用了固定宽度的布局,所有的内容置于屏幕中央,可以使用以下的 CSS :

#content {
    margin: 0 auto;
    width: 960px;
}

你可以把 html 的 body 之内任何项目置于

<div id="content"></div>

中,该项目将自动获得相等的左右边界值从而保证了居中显示。

8、使用 CSS 实现垂直居中

垂直居中对表格来说是小菜一碟,只需指定单元格为:

table td {
    vertical-align: middle;
}

即可,但这在 CSS 布局中不管用。假设你将一个导航菜单的高度设为 2em ,然后在 CSS 中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。
要解决这一问题,只需将盒的行高设为与盒的高度相同即可,以这个例子来说,盒高 2em ,那么只需在 CSS 中再加入如下代码:

p {
    height: 2em;
    line-height: 2em;
}

就可实现垂直居中了!

9、容器内的 CSS 定位

CSS 的最大优点之一就是可以将对象定位在文档的任何位置,同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条 CSS 规则:

#container {
    position: relative;
}

则容器内的任何元素的定位都是相对于该容器的。假定你使用以下 html 结构:

<div id="container">
  <div id="navigation">...</div>
</div>

如果想将 navigation 定位在容器内离左边界 30 像素,离顶部 5 像素,可以使用以下 CSS 语句:

#navigation {
    left: 30px;
    position: absolute;
    top: 5px;
}

10、延伸至屏幕底部的背景色

CSS 的缺点之一是缺乏垂直方向的控制,从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景,但你希望导航所在的列为蓝色背景,使用以下 CSS 即可:

#navigation {
    background: blue;
    width: 150px;
}

问题在于导航项不会一直延伸到页面的底部,自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断,浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法,即将 body 的背景指定为与左列同颜色同宽度的图片,CSS 如下:

body {
    background: url(blue-image.gif) repeat-y;
}

背景图应为宽 150 像素的蓝色图片。这一办法的缺点是没法使用 em 来指定左列的宽度,当用户改变文字的大小导致内容的宽度扩张时,背景色的宽度不会随之改变。
到写这篇文章为止这是对这类问题的唯一解决办法,因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。

原文:Ten CSS tricks you may not know