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

大家好：

我们最近有一本新书上市了，仍然是CSS方面的，书名是《别具光芒——CSS网页布局案例剖析》。由于这本书的出版拖了比较长的时间，大概一年多的时间，我本人目前还没有看到这本书 的样子～～

读者请到这里下载本书的案例。

请稍等几天我拿到这本书的样书之后，在给大家介绍一下这本书。

谢谢大家！

任何一个网站都是经过一定的过程，才能逐渐由头脑中的概念成为一个真正的网站的。一个网站的设计过程往往是需要经过大量的修改、甚至若干次的推翻重来，才可以达到最终的结果。今天来简单谈谈这个过程中使用的方法和工具。

问题的背景

在最初的设计阶段，最重要的一点是与客户进行良好而充分的沟通。尤其是现在的网站功能越来越复杂，而客户往往只能描述一些非常抽像的概念、想法和特征。

因此需要我们做设计和开发的人充分理解客户的想法，但是一个重要的问题是，我们如何验证我们是否真正理解了客户的想法呢？当然我们通常会写一些文档，作为与客户签订合同的附件。但是即使用再多的文字描述，毕竟客户看不到最终的效果，而最终开发出来的网站或系统如果不符合客户的心意，就是一件非常麻烦的事情了。要么为了符合客户的要求，而进行大量的修改工作，其中的成本是非常巨大的，而你向客户追加费用是很困难的事情了，即使客户同意，也不是件令人非常开心的事。要么就只能凑了，也许这并不是设计和开发公司的责任，但是毕竟问题发生了。

那么从比较理想的方式应该是如何的呢？显然，如果我们能够在还没有真正开始投入大量人力进行设计和开发之前，就可以让用户看到最终的效果和功能，那就是最好的了！这就是所谓的“原型设计”的作用。

我们用尽可能小的代价，把我们理解的用户需求表现出来，或者叫“模拟”出来，甚至用户可以实际操作，就好象这个系统已经做好了一样，这样将来做出来的系统和这个“原型”系统非常接近，那么在开发完成后在发现问题的可能性就小多了。

静态原型

因此，原型系统是非常重要而有效的一个手段，那么有什么好的方法来实现“原型”呢？

当然，最基本的方法就是手工绘制一些图纸了，此外，比如Fireworks软件中，提供了一些更为方便的进行原型设计的功能，但是这些方法和软件还是停留在“静态”展示的层面，本质上和手工绘制一些图给客户，进行纸上谈兵是一样的。

而现在网站的交互功能越来越强，一些基于Web的信息管理系统，操作起来就跟们更为复杂，比如各个页面之间的跳转，如果使用了Ajax等技术，页面还会局部刷新，如果都要用静态的图像来表达，实际上是非常困难的。

SkecthFlow 增加原型系统的动态性

因此，如果我们可以方便地制作出，可以模拟最终的动态效果的原型，那么就好多了！这是基于这个原因，近年来出现了一些具有模拟效果的原型设计软件，比如我们以前介绍过的Axure RP Pro，不我实际使用过一两个项目以后，感觉这个工具还是不够方便。而今天介绍一个我刚刚开始使用的软件 SketchFlow，感觉非常棒！实际上这不是一个独立的软件，而是附属于 Expression Blend 的一部分。而 Expression Blend则是微软的 Expression Studio 套件中的一个。如果再往下说，就要到大名鼎鼎的 Silverlight （微软指望靠它和Flash大干一场呢）上了—— Expression Blend 正是用来设计和开发 Silverlight应用的软件，因此对于微软来说，这可是一个重头戏。

而在 Expression Blend 3 中，包括了一个部分叫做“SkechFlow”，我们今天要讲的就是它了。 因此现在这个软件的全称叫做“Microsoft Expression 3 + SketchFlow”，够长的名字。

Sketch 就是草图的意思，Flow就是流程的意思，因此合在一起，就是“流程草图”的意思。那么它具有什么用呢？

SkecthFlow 的用途

首先，这个Blend这个软件本身就是可以绘制矢量图形和动画的，因此用它来绘制页面的草图是很方便的，比如假设我们要租一个网站，首先是一个登录页面，然后进入到一个内容页，我们就可以非常方便地绘制出如下的图形，注意这种风格是专门为此设计的草图风格，看起来就像是手绘的风格，主要的目的就是给用户展现的是页面的核心概念和功能，而不会是非常细节的样式。我个人非常喜欢这种风格，看起来分舒服。

当然，如果只是把图像绘制的看起来手绘风格，那么也就没有太的改进了，更更为重要的是，使用SketchFlow制作的网站原型，可以精确地模拟实际操作过程，比如上面图中，登录框中的用户名输入框、密码输入框、滑动条、选择框、按钮都是可以实际操作的，而且通过简单控制，就可以非常方便地使他实际工作起来。在比如，上面的右图中，“作者介绍”和“读者评价”部分，各有一个滚动条，而这些滚动条都是有实际作用的，因此使用这种方式制作出来的原型，可以使客户非常直观而精确地了解最终这个网站完成以后，会是什么样子的，这样如果他又不满意的地方，在一开始就可以明确地指出来，这样对于我们开发成本的控制就大有好处了。

此外，软件中给出了方便的导航图，以显示各个页面之间的导航关系，也非常清晰实用，如下图所示。

有兴趣的读者可以在浏览器中实际看一下演示的效果，如果没有安装Silverlight插件的话，需要安装一下。请点击这里查看实际效果，在登录页面随意输入，然后按Login按钮，导航至内容页面，可以在左侧调整大小。

此外，SketchFlow还可以自动生成Word格式文档，包括目录、文字、导航图、各个页面都准备好了，这样稍作修改后，提供给客户交流，就非常方便，也非常专业了。如下图所示。

当然，这个软件的功能还远远不止于添加几个导航链接的功能，因为它本身用C#或者VB就可以进行深入而灵活的控制了，不过我自己也没有深入学习过Silverlight的开发，并不能说的非常清楚，此外这些操作并非几句话可以说清的了，有兴趣的读者，可以参看前不久的微软开发者大会上关于 SketchFlow 的讲演： http://microsoftpdc.com/Sessions/CL23 。讲演者说的英语不算快，还比较容易听懂，另外有很多屏幕操作，也很有帮助。

本文小结

今天重点介绍了两个问题，1）在实际开发之前，制作原型系统的重要性，以及能够给我们带来的好处。 2）使用 SketchFlow 可以比较方便地制作出高度模拟实际效果的原型系统，给我们带来很大的益处。

前几天，我们使用的服务器提供商在技术上做了一些修改，导致本站上的一部分 FLV 格式的视频无法正常下载观看了，经过我们和服务商的技术人员联系，目前已经解决，从我们这里访问，可以正常观看视频教程了，速度也不错，非常流畅。

如果您在观看的时候，无法正常在线播放的话，请在这里留言，说一下您遇到的现象，我们会进行检查，谢谢！

谢谢大家的支持！

我们从去年6月份开始为我们的一些读者提供实际练兵的的虚拟主机空间——“学以致用”计划，现在有了不少的会员。本文主要是针对我们的会员遇到问题时参考来解决问题用的，如果您拥有自己的网站，使用的是其他的空间商提供的空间，如果有类似问题的读者也可以参考，希望对您有所帮助。

先了解一些基本原理

当您制作完成了一个网站，租用一个“学以致用”空间（或者称为虚拟主机），把网站发布到了空间，这时全世界的人都可以访问你的网站了。有的时候，会遇到一些问题，比如网站连不上了，或者觉得网页装载的速度不够快等等，当然遇到这种情况，可以给我们发信，我们会帮你检查。

但是在这里介绍一下，你应该做哪些自己可以做的检查工作，这也大致可以判断出问题出在哪里。这里先介绍一些简单的原理性知识.

我们知道，访问一个网站，输入一个网址，最终看到了你要看的网页，数据的传递实际上经过了千山万水，很多个环节，大致包括以下几个部分：

因此，如果在这一些列的传输过程中，任何一个节点出现故障，都会导致无法看到你要看的网页。如果你的网站不能够正常打开了，首先要判断一下是在上述6个环节中的哪一个环节出了问题。

自检步骤

请根据下列操作进行分析：

1：首先如果可以正常上新浪、Google、百度等网站（注意确认打开的不是缓存网页，最好使用Google随便搜索一个词，看看返回的结果是否正常），说明你的电脑和外界的互联网连接正常，反之说明你的电脑或者内部的局域网连接有问题了。

2：如果可以访问新浪等大网站，而无法访问你自己的网站，那么就需要判断是哪里断了？可以用下面两种方法

A: 比较快速的方法，使用 Ping 命令。选择Windows 的开始菜单，选择“所有程序 > 附件 > 命令提示符”，这时出现一个命令行窗口。用键盘输入”ping 你要诊断的网站的域名”，然后回车，这时，如果网络连接正常时，将会看到如下所示的结果。

而如果网络连接的某个环节发生中断时，将会看到如下所示的结果，说明无法连接到你要看的网页所在的服务器。

B：同过上面的 Ping 命令，可以检查从你的电脑到目标服务器之间的网络连接是否通畅。此外，还有一个比Ping命令更为详细的命令 —— Tracert 。

对于服务器在国外的情况，比如我们的虚拟主机，如果出现了中断，需要判断一下中断的路由器在国内还是国外。可以进入命令行窗口，然后使用“Tracert”命令。

对于链接通畅的网站，结果应该是如下所示。

其结果显示的就是从你的电脑到目标服务器之间经过所有路由器的IP地址，注意每一行中间有一个几十或几百的数字，其确切含义这里不多解释了，只是你会注意到，从起点开始这个数值一般情况下会越来越大，特鄙视你会看到，其中有一跳之后数字突然从几十毫秒变成200多毫秒，这就是从国内的网络进入了国外的网络。

如果某一个途中的某个路由发生故障，那么在从该节点开始，原来现实毫秒数的数值就会显示为星号，如图所示，表示连接发生故障了。

某一个节点发生了故障而导致中断，你就可以判断故障发生在国内还是国外。看一下上面正常的那个tracert结果图，数字很小的那些节点如果变成星号了，就说明是国内的网络出问题了，而如果时是后面数字比较大的节点变成星号了，就说明国外的某个网络节点出问题了。

从我这四五年的经验来看，这种骨干网发生故障的情况并不多见，尤其是国外一侧几乎一年于不到两三次，每次最多几分钟，国内相比之下就会多不少，特别是似乎几个月会调整路由，会在某一天或几天中，频频发生故障，而我们用户也没有什么办法，只能等待。

因此，当你发现国内或者国外的路由节点发生故障了，就耐心等待一会儿，一般就会好了，因为这些骨干线路发生故障，影响面很大，会很快修好的。

3：如果使用Tracert命令发现整个路由的最后一个节点无法，也就是目标服务器显示的星号，那就说明是这台服务器当机（死机 、停机，总之是故障了），可以给我们发邮件，我们给你查一下。给我们发邮件的时候，请附一个路由结果。

4：如果服务器可以Ping通，即最后一节点也可以正常显示出正常的毫秒数值，但是网站打不开，那很可能是服务器还没有完全死机，但是一些服务，比如HTTP服务已经无法正常运行了，可以给我们发邮件，我们给你查一下。 给我们发邮件的时候，请附一个路由结果。

上述第3、4两点如果发生故障，那就是服务器提供商的责任了，就我们的经验看来，我们选用的服务商的服务还是相当稳定的。

上面说的是如果你的网站完全无法连接的时候，如何判断故障原因。接下来，有的时候，你会觉得打开速度不够快。这个问题就很复杂了。特别是中国的网络情况是非常复杂的，全国各地访问同一台服务器，结果速度可能就相差很多。

因此，建议你这样做：

1：平常没事儿的时候，也可以用tracert命令查一下从你的电脑到目标服务器之间的路由结果，这样平常有个印象，当某一个时刻，你感觉网站的速度不如平常的时候，tracert一下，看一看结果是否和平常相同，如果结果正常，那么或者是你的网站的设置出问题了，或者可能你是你的心理作用了，既不是网络的链接问题。

2：如果发现路由中，某个节点的数值突然变大了很多，那就说明是这个节点的路由器有点问题了，这个也做不了大多，一般来说经过一段时间，就会恢复正常了。

3：如果你没有发现任何问题，但是觉得速度很慢，可以这样检测一下：

首先，安装一个Firefox浏览器，然后安装Firefox的一个插件，叫做Firebug，利用这个插件，可以精确地测量一个页面的详细的装载过程和时间，例如

如图所示，安装好Firebug以后，可以在Firefox浏览器的右下角看到一个小虫子的图标，单击该图标，在浏览器窗口的下半部，会出现一个新的窗口，如图中的红色方框所示，选择“网络”、“所有”，然后浏览一个网页，这是下侧的窗口里就会显示出该页面中包括的所有文件，比如html文件、CSS文件、图像文件等等，完整的如下图所示。

可以看到，列出了每个文件的大小，以及装载的次序，每个文件的后面有一个彩色的横柱图示，不同颜色代表装载该文件的不同阶段，其实就是对应于本文开头说的那些步骤。

你用这个插件查看一下你的网站的装载情况，看看主要慢在哪里，比如是否页面的体积太大？图排太多？图片没有压缩？如果你还是无法判断，把这个图发新给我们，我们给你看一下，是否正常，以及可能出现的问题。注意Firebug窗口的最底下计算了整个页面的所有文件的总的大小，以及完整装入浏览器的总时间，比如图中这个页面，所有文件加在一起200多K字节，一共用了5秒多装载，基本上可以接受。当然这里面要说的话，还有很多很多讲究的，并非几句话可以说清的了。

顺表说一句题外话，Firebug这个插件功能非常强大，对于网页设计，特别是要跟CSS打交道的设计师，以及要做Javascript开发的人员，Firebug都是必不可少的工具。以后有时间的时候，我会写一些相关的文章，介绍一下。

本文总结

如果遇到访问或者网络连接问题，请仔细阅读上文，如果仔细看过之后仍然无法找到原因，请给我们发邮件，在邮件中，请附带执行tracert命令的图，如果您的网站可以打开，但是觉得速度慢，在邮件初中附上Tracert的图，以及firebug的装载时间图，以便我们帮你查找原因。

如果你发现你的“学以致用”主机的网站无法访问，或者感觉速度不好，经过上述检查手段，仍然无法发现原因，请给我们发邮件。在邮件中请包括必要的内容：

1：一定要包括一个 Tracert 你的网站 的结果截图。

2：如果网也打得开，但是你觉得网站打开的速度慢，请包括一个firebug的页面装载时间图，就像上面第二个firebug图那样的图。

如果您使用的是其他虚拟主机，遇到类似问题，也可以把这些结果发给客户服务的技术支持人员。就像到医院看病一下，关键是要找出问题的原因在哪里，然后再能够解决。用一些工具去进行判断，就像看病的时候要做化验、做CT扫描等检查一样，都是很重要的手段。

一位老朋友 keelii 今天问了一个问题：

老师最近忙不？闲的话我请教个问题：最近我们都已经在找工作了，学校也来了很多招聘的公司，但都没有软件方面的。我本身是学软件技术专业的，但对网页设计和前端工发比较感兴趣。想找一份前端的工作，初步打算去北京。老师能给点建议吧？先谢谢啦！

这里我说几点我的想法吧。我觉得凡事都是有利有弊的。

这里先说北京的坏处吧：

1：生活成本比较高，特别是房价太高，没有基础的年轻人，只身北京闯荡，开始的艰苦可想而知。而且成功的概率也并不是100%，不努力肯定不行，努力了也不一定就行。除非发展非常顺利，否则想挣出一套房子，都已经非常困难了。

2：气候不算好，冬天冷，过日子可能未必舒服。

3：城市太大，交通拥堵，上班费劲，总之在北京有很多不方便。

4：相比之下，北京的生活没有很多城市休闲。

北京的好处：

1：公司多，机会多。牛人多，便于你学习。如果善于处事，加之自身努力，过上世俗意思以上的好日子也是没问题的。

2：在北京，无论做什么行业，市场容量都极大，金字塔形的层次很多，无论你是什么水平，都可以找到一个适合你生存的层次。一条完整的食物链，无论是大鲨鱼，还是小虾米，都能活。如果努力勤奋又肯动脑子的话，北京是个很好的发展事业的地方。

3：北京可以算是一个移民城市了，真正祖上几代都是北京人的并不多，因此相对来说，外来的人在和本地人相处，相对比较容易一些。1949年解放的时候，北京只有200万人，现在快2000万了，多出来的都是移民。

4：北京经历的问题，其它城市将来都会经历，比如交通拥堵、环境污染等等，其它城市如果现在还没有遇到，只是因为还没有到时候而已。比如说交通，北京从2000年开始，汽车数量开始猛增，很多城市从今两三年开始汽车猛增，所以很多城市的交通问题很快就会爆发了。如果你在中国不同城市开过车，会发现北京的交通管理、交通设施算是非常好的，因为已经堵了这么多年了，久病成医嘛。在比如空气不好，但是我发现中国的各个大城市，没有哪个好的，而且北京的空气这几年特别是今年，比原来还真是好的多了。这是集权政府不多的一点优点了。

结论

从我身边看到的人来说，应该可以分为4类了:

1：不少没有任何基础的来到北京发展的非常好的；

2：也有干了多年发展很不得顺利离开的；

3：并不是工作的原因，而是因为其他原因，比如生活、家庭等原因，离开北京去其它城市的。

4：也有不好不坏的，也还在北京继续生活的；

不过总体来说，似乎留下来，并且过得越来越好的，还是占大多数。

所以关键还是要看自己的理想、基础、能力、性格等各个方面。 其实工作来说，未必只看着北京，我觉得比如成都这样的城市，也很不错，大学多，人力资源丰富，这就决定了一定会发展的很快，而且，相对物价低一些，吃得又好，生活舒适。就好像人们选股票，关键要找价值被低估的洼地，将来升值的空间就会更大。只是没有人能预测未来，所以只能看自己的感觉了。

总之，年轻的时候创一创还是值得的！但是还是要审时度势。既要低头拉车，也要抬头看路。