前沿视频教室————最好的CSS和Web设计与开发的视频教程

我们在不久前的文章“网页设计杂谈（5）——jQeury能给我们什么？”中，简单介绍了jQeury的强大和方便，这两天又看到了一个很不错的国外的资料，show给读者朋友看一看，也许会对您有所帮助和启发。

下面这段视频是在Youtube上的，内容是一个12岁的小朋友在Google TechTalk上的一次讲座，向听众介绍jQeury，非常有趣，看了这段视频，我想对学习Javascript、编程序有畏惧心理的读者朋友，都可以有信心学好它了。

关于Google TechTalk：

Google TechTalk 是由Google邀请和赞助的一系列演讲，每次都是在Google总部加利福尼亚山景城举行。这些演讲者将会涉及不同的领域，包括技术或更为抽象的领域，已经建立起来或者具有前瞻性的理论。

关于这次讲演者（6年级的小学生）：

Dmitri Gaskin 是一位 jQuery 和 Drupal （世界最著名的CMS系统之一）方面的专家，兴趣包括Drupal, PHP, JavaScript 和 jQuery。他对jQuery 和 Drupal 两个开源项目都有诸多贡献。在 Drupal 项目中，他在Drupal负责安全的团队中维护着几个模块，以及核心Patch。Dmitri已经多次被邀请讲授关于 Drupal 和 jQuery, 包括 Logitech, Drupalcon 和 广播中的节目。他在不写程序的时候，喜欢演奏现代音乐和作曲。

======================================

看了这个小朋友的事迹，加油吧，朋友们！

另外，听了这个小朋友的讲解，我们才发现，我们总是把jQuery读成“JQ瑞”，其实应该读为“J盔瑞”。不知是不是还有像我们一样，读错了query这个单词的朋友。不过这个词真不好读。

现在越来越多人有了自己的网站，有的是出于兴趣，有的希望通过网站来挣钱，当然都希望自己的网站访客越多越好。Google为网站站长提供的“Google分析”工具可以帮助站长非常清晰地了解自己网站的访问情况，例如有多少访问者，是来自搜索引擎，还是其他网站的推荐链接，访问者的地域分布等等。

下面的图中显示的是“前沿视频教室”网站从2007年11月到现在的访问量曲线，可以看到每天都有涨落，实际上周末的访问量会明显低于工作日，因此出现了现在的锯齿状的曲线。

在Google分析中，除了上面那样按“每天”的方式现实曲线，可以按照“周”的方式显示，也就是把每周的访问量加起来，作为一周的访问量，从而形成的曲线，如下图所示。

可以看到曲线平滑了很多，这样更便于站长了解网站的访问两变化趋势。可以看到，尽快比较曲线平滑了，但还是经常会有一些起起落落。下面的图是则是上面图中的数据导入Excel后重新生成的曲线，可以看到曲线形状相同，只是涨落更加明显一些，这样便于我们分析。

这些涨落看起来似乎没有什么规律，但是如果你仔细分析，就会得到很有趣的结果。在下图中，我们把8个比较名明显的“下滑”的位置，用圆圈标示，并加上了编号。

下面就来看看这8个“下滑”的分别发生时间，以及此时我们在生活中正在经历着什么样的事情。

从以上可以看出，每一次下降都是有原因的，也就是我们标题所说的涨落皆有原因，如果我们把曲线作一些简单的（即不精确的）修正，把这些外部因素造成的影响去处，可以看到如下图所示的效果。

可以看到红色曲线前期是非常平缓的增长，而8月份以后，访问量有较大的提高，分析来说，大致有两点原因，一是增加了文章的更新频率，二是《精通Javascript+jQuery》图书上市，以及相应的视频教程发布了，因此增加了比较多的新读者，从而增加了访问量。

因此，如果你也是拥有自己的网站，那么你也应该善于利用各种网站的分析工具，比如我们推荐的“Google分析”，他确实可以给我们带来很多非常有用的信息，而我们要做的就是不断地对这些数据进行认真的研读，找到自己网站存在的不足，不断地加以改进，只有这样才能不断地进步，吸引更多的访问者。

当一个网站建好以后，我们当然希望更多的人知道它，搜索引擎会在其中发挥重大的作用。近几天来，由于中央电视对百度搜索引擎的批评也导致搜索引擎成为了一个热门话题。

我们本身并不是搜索引擎以及搜索引擎优化的专家，我们自己网站的访问量也很小，所以这里仅给出一些我们自己的一些数据和经历，希望对大家有所帮助。本文并不重点讨论如何进行针对搜索引擎的网站优化。

你的网站点击量来源如何分布？

每个网站的访问量有大有小，这都是很正常的，但是网站访问者来源的构成如何，也许是需要更多关注的一个因素，因为它可以告诉你，因该更重视从哪方面改进你的网站。

我们的前沿视频教室一直使用“Google分析”来对网站的访问情况进行统计，右图显示的是最近半年来，所有访问者来源的比例。

分为三类：直接点击量、推介网站、搜索引擎。

1：“直接点击量”：访问者通过直接输入网站地址或者从收藏夹中来到你的网站；

2：“推介网站”：其他网站中有指向你的网站的链接，访问者通过其他网站进入了你的网站；

3：“搜索引擎”：访问者通过Google、百度这样的搜索引擎搜索到并进入你的网站。

在Google分析中，很有用的一个功能是可以和过去的数据进行比较，右图是“最近半年”和“再往前的半年”，访问者来源的比较数据。

可以看出，通过搜索引擎的来访者比例升高了，而网站推介的减少了，这说明我们应该加强这方面的努力。

Baidu VS Google

下一个有趣的话题是，在中国各种搜索引擎的使用比例到底如何呢？我们经常可以在网上看到一些调查机构通过问卷调查的方式获取数据，并进行分析。实际上，对这个比例最准确的应该是各个网站的运营者，因为他们的访问日志就说明了一切。当然，不同类型的网站面向人群不同，数据会有一定的差异。下面这里把访问“前沿视频教室”的访问者所使用的搜索引擎情况说明一下，再和网上比较流行的数据比较一下，看看是否符合。

右面这个表格中列出了“最近半年”和“再往前的半年”之间的数据对比。可以看出，在通过搜索引擎来到前沿视频教室的访问者中，Baidu和Google是绝对的双寡头，而且这半年比上个半年更加明显了。

此外，在这两者之间，Baidu 带来的访问者大约是 Google 的两倍，但是最近这半年来，Baidu带来的访问者比例下降了3.54%。

下面对比一下网上一个比较流行的数据，下表来自正望咨询发布的2008年度搜索报告

这个报告没有提到它的调查具体是在什么时间范围做的，但是总体来看，百度的份额和我们网站的数据差不多，但是Google的份额明显低于我们网站的数据，而其他几个搜索引擎则远高于我们的网站数据。我想我们的网站属于技术性的网站，对于技术人员，使用Google的可能性较其他类型的网站会更大一些。

此外，在上表中还列出中国不同区域的访问者，对Google和百度的接受度比较，因此我也来列一列我们网站的情况。

首先，在“Google分析”中，可以查到来自不同城市的访问者的数量，以及其中分别来自Goolge和Baidu搜索的访问数量。因此我们列出了下面这个表格。

表格中列出了12个城市，这是访问前沿视频教室网站人数最多的12个城市，合计占到所有城市的访问量的50%，表格按照各城市的访问人数排序。这里需要说明的是，第一名北京的人数远远大于其他城市，我个人估计是Google分析中将一些非北京访问者的IP误认为是北京的了，因此北京的访问人数可能并没有这么多。

右侧的一列“B/G比值”的意思是，在该城市中，由Baidu带来的访问量与由Google带来的访问量的比值，比值越搞的地区就与偏好Baidu，比如南昌的B/G比值为3.76，就是说明使用百度的人数是使用Google的3.76倍。

从表中可以看出，不同地域的访问者，对于使用baidu还是Google这个问题差异还是非常明显的。按照B/G排名，最偏好Google的城市依次是：上海、杭州、广州、深圳和北京，而且明显高于其他城市。和上面的正望咨询报告中的数据相比，结论是相似的，只是数据更加明显。

百度的错有多大？

最近几天各种媒体对百度的口诛笔伐非常之多，我个人几乎不用百度，但是有这么多从百度找到我们网站的网友，因此我也凑个热闹，谈谈我的看法。

先总结一下目前对百度指责主要有几个问题，我觉得应改分别来谈:

1：“竞价排名”导致不公平，以及用户体验受损。

2：“屏蔽不交钱在百度做广告的网站”。

3：“对广告不加审核，甚至诱导非法广告”。

我认为上面这三个问题应该分别看待。

1：对于竞价排名，我认为确实不好，做搜索引擎，不应该打这个旗号，如果要打也应该像Google那样，使得“搜索结果”和“广告”显示出非常明显的区别，而不是混在一起。但是这个问题是一个商业模式问题，并非道德问题，就好像有人卖白菜，有人买萝卜，你不能说谁对谁错，如果效果不好，自然有市场惩罚他。而且我记得“竞价排名”是百度的一个信仰，其理论基础是，肯出大价钱的人一定是对自己产品有信心的人，所以我认为百度不可能放弃这个信仰。

2：关于“屏蔽不交钱在百度做广告的网站”的说法，百度多次予以否认，如果他这么说了，应该就是这么做的，这么大的一个公司，员工好几千，如果这么名目张胆说一套做一套，似乎不太可能。我个人对这个说法持怀疑态度。而且现在国内的垃圾网站这么多，不收录才是队的。我觉得如果一个真正踏踏实实做内容的网站，被屏蔽的可能性不大。

3：“诱导非法广告”这个问题实际上国内媒体多了去了，每天广播电台里从早到晚都是这些卖药的广告，只是百度被撞上了。管他一下总是好的，但是解决不了本质问题。

总之，希望百度能够放弃“竞价排名”这个说法，把广告放在右边就可以了，不要掺合在左边的搜索结果里，并且能够对天发毒誓，决不人为干预搜索结果，如果总是不明不暗的说几句，是远远不够的。至于上纲上线的指责，也是没必要的，市场上的事情，做得不好自然会有市场去惩罚他。

在高档汽车领域，人们经常提到的是“B-B”，即BMW（宝马）和BenZ（奔驰）这两家汽车厂商。后来Audi（奥迪）也希望挤入这个圈子，媒体就扩展为“A-B-B”，代表这3家都来自德国的高档车品牌。

本文原是用于我们的一本书中的一小部分的内容，今年4月份写的，对这三家汽车品牌的网站做一些学习、研究和分析，告诉读者如何从别人的网站得到一些启发。今天我又看了一下这三个网站，发现其中的“奔驰”的网站已经做了比较大的改版。不过下面还是先把4月份的原文贴上来，后面再谈谈奔驰的新网站。

1：我们为什么要多看其他的网站？

如果你希望成为一名设计师，或其他任何职业的人，都应该多看。审美是先于创作的，如果你不知道什么好看，什么不好看，那是绝对不可能创作出好看的东西的。而对于我们中国的教育来说，审美的教育实在是太缺乏了，几乎可以说是零。我曾在澳大利亚的博物馆里看到不少的老师带着一群孩子，有的围着一幅画，有围坐在一个雕塑旁，老师娓娓道来，孩子们静静地听，间或孩子们也发表一些观点。我相信这种从幼年时代逐渐培养起来的对艺术的感受，才是真正对心灵施教的结果。我们已经错过了一些东西，但是无论基础如何，都应改尽量地去看，去读，去听，去欣赏，去感受，去体会。

2：我们应该看什么样的网站？

其实很简单，如果你要学，或者说从模仿开始学习，你找到最顶级去看就可以了。你要相信一个数百亿元的公司，制作的再简单的一个页面，也一定并不简单。苹果公司的ipod、iphone外观非常简单，但是它就是靠这个简单挣了大钱。

3：从别人的网站看到什么？

认知从感性逐渐变为理性，先从直觉上感觉，比如好还是不好，然后逐渐想一想，他为什么好？为什么不好？作者为什么要这么做？如果你来做又会如何？如果每天都在反复思考，慢慢的自然就会有所提高。

A-B-B 网站调研

下面分别看看他们的网站有什么共同点以及区别。首先，下图中所示的是奔驰的网站。

由于奔驰公司的产品极其丰富，因此网站是用了非常有特色的导航系统，一种车型的介绍页面中，使用了4级菜单进行导航，如图所示。而且尽管使用了如此丰富的导航结构，但是丝毫不会使访问者感到混乱，如图所示。这是值得我们学习的。

下面看一看另一个汽车品牌——“宝马”汽车，它和奔驰比起来，车型相对较少，因此并没有使用非常多的导航级别，其网站首页如图所示。

宝马公司的网站上大量使用Javaccript的技术来实现一些交互的动态效果，比如制作了非常“酷”的下拉菜单，如下图所示。再例如单击左上角的箭头，会向下拉开一个半透明的菜单，页面顶部的车型导航菜单，鼠标指针经过菜单项时，会打开下拉菜单。

这些效果都是需要Javascript实现的，仅仅依靠CSS是无法完成的。这些动态效果的运用很好地增加了网站得交互和动感。

最后再来看看奥迪汽车的网站，与奔驰和宝马都不同，奥迪的网站重点使用了Flash作为技术手段，如下图所示。

图中面积最大的区域是一个Flash交互动画，在这个Flash动画中，访问者可以方便地更换汽车的颜色，还可以360环绕观看到汽车的各个侧面，这种技术是目前的一个热点，称为RIA（丰富互联网应用程序），Adobe公司的Flash技术是其中坚力量。下图中可以看到，为汽车更换了颜色，以及用拖动鼠标环绕观看汽车各个角度的效果。

在比较了通常人所说的“A-B-B”这3家豪华车的网站，我们是否会感受到，他们各自的网站与他们的整体品牌，给我们的印象很一致呢？
比如说如果用很简单的词语描述这三个品牌给大众的印象，奔驰的舒适、精致、稳重；宝马的动感十足，奥迪则无疑是以新技术见长。
而从上面的网站分析看出，奔驰的网站使用的新技术的并不多，宝马重点使用的是Javascript，配合一定的Flash，而奥迪则大量使用了Flash的RIA技术。似乎这和上面的整体品牌印象非常一致。
这给了我们一个非常重要的启示，在设计一个网站的时候，设计师（这是广义的设计师了，并非仅仅是美术的设计）是否真的理解这个网站内在的文化和气质，只有真正了解了一个网站的核心气质，才能够进一步选择合适的技术手段，去实现它。

==============华丽的分割线======================

以上是2008年4月份写的内容，下面是2008年11月的补充。

今天又打开这三个品牌的网站浏览了一下，发现奔驰的网站已经做了很大的升级，大大增加了动态效果和内容的使用，确实非常漂亮。大量使用了Flash，不过和Audi的Flash的运用还是有所区别，大家有兴趣，可依自己看一看。

这三个网站的地址是：
宝马： http://www.bmw.com
奔驰： http://www3.mercedes-benz.com
奥迪： http://www.audi.com

很多朋友问到关于在网页设计中，特别是使用CSS布局的时候，如何切图的问题，今天就来说说这个问题。

在过去，使用表格布局的时候，通常是整个页面在Photoshop或者Fireworks中设计好，然后使用“切片”工具，在页面上分割，生成有表格搭建的HTML，然后再把需要的图像留下来，把需要填写文字的单元格中的图像去掉，填上相应的文字。

现在使用CSS布局以后，则灵活得多，既有好的一面——整个页面的布局都是非常容易控制的，也有不好的一面——需要学习的东西多了。那么在CSS布局中，切图有什么讲究呢？

1：构思设计与精确切图

首先要指出，Photoshop或者Fireworks不仅仅是用切图的，更重要的是，它可以帮助你进行“设计”。在设计页面的时候，至少在脑子里要知道页面是什么样的吧；如果复杂一些，总要做出来用眼睛看一看效果吧；如果是给客户做，更要做出一个效果图，请客户确认。因此，即使不考虑切图的问题，也应该用软件画出这个页面来。当然比如文字等等，估算一下即可，但是和图像相关的细节应该是很精确的。

有了设计图之后，需要把它变成网页，那么就需要对图像进行“切图”操作了。至于为了CSS布局，是不是一定要在Photoshop或者Fireworks切图，以及如何切图。我觉得需要具体分析了，下面我举两个个例子，这两个例子都是 “CSS禅意花园” 中的案例，如果对 “CSS禅意花园” 不是很了解，请看一下“《CSS设计彻底研究》”的视频第2课，里面有详细的视频讲解。

2：不需要“图像拼接”的设计

比如，对于这样的页面，它是禅意花园的211号作品。如果网页的制作者对于最终效果已经非常清楚了，对于图中显示的页面，那就未必要做严格的，一个像素不差的精确切图了，你只要把标题旁边的花朵，各级小标题使用的图像等元素，分别制作出来，差几个像素也不是很要紧，当然各个小标题的高度要相同，否则会很难看。

但是整体而言，整个页面白色背景，各个部分之间不存在“图像拼接”的问题，那就不要求一个像素不差的切图了。

3：需要“图像拼接”的设计

而对于下图这样的页面，它是禅意花园的194号作品。你就一定要在Photshop或者Fireworks中非常细致地把图像做出来，然后算计好你打算怎么用CSS布局，然后细致地切图，一个像素都不能差，否则肯定将来就会“拼”不上了。即使只差一个像素，也会非常明显。

4：总结与学习建议

1：我们可以看到，关键的一点在于，在CSS布局中，各个部分之间是否存在“图像拼接”。

比如上面的第一个页面，不存在“图像拼接”问题，那就单独地制作各个元素也没有问题，或者从一个大图中分别切出各个部分，也可以。

而对于第二个页面，各个部分通过CSS架构起来，而各个部分存在非常复杂的“图像拼接”问题，就像把一幅画从中切开了，然后由要求把二者对齐，这时候即时相差1个像素，也会非常明显。因此必须要做非常精确的计算。

2：至于如何学习，我觉得第一点是真正把CSS的布局原理搞清楚，这个是基础。只有你可以做到非常自由地把任何元素放到任何地方，那么你才有可能把各个部分准确地拼在一起，因此再次强调，你要打算吃CSS这碗饭，先下功夫把核心原理真正搞懂，然后再谈具体怎么做，先学会走，再学跑，否则在浪费自己的时间。最重要的就是4大核心基础：标准流、盒子模型、浮动、定位。这4个事情，了解得越详细、越深入，你实际做起来就越轻松。

3：如果你对CSS的基础原理已经基本上明白了，需要实际操练了，那么“CSS禅意花园”就是你最好的老师和练习内容。我们在《CSS设计彻底研究》这本书的第二章，简介了了CSS禅意花园网站的来龙去脉，然后16、17、18三章中，彻底分析了几个非常好的案例，并实际动手制作了案例。

如果读者希望真正打算提高一下，花点时间，先跟着书把书上给出的几个案例真正搞懂，然后自己再独立分析5个你喜欢的案例，再自己设计并制作5个CSS禅意花园页面，我相信无论你是什么基础的人也能会了。《精通CSS+DIV网页样式与布局》的作者曾顺，也提到过，他2005年学CSS的时候，国内什么资料都没有，就是啃了几个CSS案例，就什么都明白了。该下的功夫一定要下到家，功夫下到了，一切都会自然而然的事情。