上图说话：

虽然只是小小的有效期，但列出不同的展现方式，能帮我们找到最佳的方案；

平时我们的设计也是如此，常常做了一个方案后，因为花了很多精力，总会不自觉认为它已经够好了；当我们放下包袱，好好听取其他同事的建议，也许会看到很多自己没有考虑周全的细节还有待优化，优化后再和第一版去对比，是不是更棒了？

我相信好的视觉设计，都是细节经得起推敲的。

当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。

首先认识一下getBoundingClientRect方法，标准语法为：

   oRect = object.getBoundingClientRect();

Dom节点调用该方法可返回一个ClientRect类型的对象，该对象有四个属性值：top、left、right、bottom，表示了该节点相对于可视浏览器可视区域的左上角位置的坐标，看图就能好理解：

坐标说明图1

补充一下，如果当前的元素已经超出可视区域，依然按照可视区域的左上角位置的坐标来计算，如图2

坐标说明图2

这样就可以简单的获取Dom元素在可视区里的X/Y坐标（通过left和top属性）。最后在计算上页面滚动条的偏移量就可以计算出元素在整个页面中的X/Y坐标了。页面滚动偏移量的计算在不同浏览器下有所不同，不过我们可以借鉴YUI里面方法，设计一个通用的方式：

    scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

    scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

在W3C标准下document.body.scrollTop和document.body.scrollLeft都为0，所以采用了上面兼容的方式获取页面滚动条的偏移量。

将ClientRect对象的left、top属性分别加上scrollLeft和scrollTop，就能获取Dom元素的X/Y坐标了。但对于IE8之前的IE版本在很多情况下要对这个值进行一些调整，有三种情况，下面来分别看一下：

• 1.IE6的标准模式下不需要调整；
• 2.所有怪异模式下为取document的当前borderLeftWidth和borderTopWidth值做调整，分别加在X/Y坐标值上；
• 3.其他的情况都分别在X/Y坐标值上加上2；

这样就可以获取最后准确的X/Y坐标了。

如果所有的浏览器都能如此就好了，可惜有些浏览器（FF2、Safari）不支持getBoundingClientRect方法。需要通过一级级查找和计算offsetParent来获取X/Y坐标值。这里首先介绍什么是元素的offsetParent属性。

offsetParent属性是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的与容器元素。首先说明一下CSS定位，是指对元素设置position属性为absolute、relative或fixed(IE6除外)，还有一个问题是元素在table元素中时会有不同的情况。下面是我的一些归纳，不全之处望大家指出：

• 1.元素不在table元素中，且元素及其所有上级元素都未进行CSS定位时，这个元素的offsetParent属性为根元素（Body）；
• 2.元素本身没进行CSS定位，而出现在table中或有上级元素进行了CSS定位，那么当向上先达到TD元素时该元素的offsetParent属性为TD元素；当向上先达到进行了CSS定位的上级元素时该元素的offsetParent属性为该上级元素；
• 3.无论元素在不在table中，只要元素本身进行了CSS定位，有上级元素进行了CSS定位的则元素的offsetParent属性为该上级元素，没有上级素进行了CSS定位的则元素的offsetParent属性为根元素；

知道了offsetParent属性的含义，就可以通过offsetParent属性来一级级的计算X/Y坐标了。一种比较简单的while循环：

    var node;/*求坐标的元素*/
    var xy=[];/*保存XY坐标*/
    while ((node = node.offsetParent)) {
      xy[0] += node.offsetLeft;
      xy[1] += node.offsetTop];
    }

通过这一个循环就能累计元素每级offsetParent属性元素的偏移量，但这个偏移量在累加的过程中没有计算每级父元素有滚动条的情况，最后还要同getBoundingClientRect方法一样加上页面滚动值（这里scrollLeft和scrollTop）。现在先来累计计算元素每上级元素的滚动条情况，首先判断元素本身是不是设置了position为fixed：

• 1.设置了则不用计算每上级元素的滚动条情况，但需要对Opera和其他浏览器做区分，Opera浏览器减去scrollLeft和scrollTop

  xy[0] -= scrollLeft;xy[1] -= scrollTop;

  ，其他情况是加上scrollLeft和scrollTop。

  xy[0] += scrollLeft;xy[1] += scrollTop;

• 2.未设置时就需要累计计算元素每上级元素的滚动条，通过一个循环里累加：

  while ((node = node.parentNode) && node.tagName) {
    scrollTop = node.scrollTop;
    scrollLeft = node.scrllLeft;
    if (scrollTop || scrollLeft) {
      xy[0] -= scrollLeft;
      xy[1] -= scrollTop;
    }
  }

  最后机上页面滚动值

  xy[0] += scrollLeft;xy[1] += scrollTop;

这样最后就可以在不支持getBoundingClientRect方法的浏览器下获取元素的X/Y坐标了。

最后总结一下，如果浏览器支持getBoundingClientRect方法，通过该方法再加上页面滚动条的偏移就能获取元素的X/Y了（不同浏览器需要微调），如果不支持getBoundingClientRect方法，则需要通过循环该元素的每级offsetParent属性来累计偏移量，再通过每个父级元素的滚动条来调整，最后再加上页面滚动条的偏移来获取元素的X/Y坐标。获取X/Y坐标的方式还有很多，可能不尽相同，我这里主要是基于YUI里面的思想和方法。不全之处望大家指正～

视觉设计，冒似很艺术，跟艺术相关的职业，给大多数人的印象是做美化工作的，他们比其他人更懂得搭配颜色，PS图片等等诸如花匠般的工作。把它归结为美化，单就这个形容词看来自然变得不那么重要，在很多时候，被认为是个不重要的职能。

也许有很多从事设计的人也对它的理解是模糊和不肯定的，那么更加不用说其他人能了解多少，这样的种种导致很多矛盾，非专业的人只能凭借仅有的认知来看待它，专业的人也很苦恼为什么自己做的事情被大家轻视和看的那么简单，随便一个主观意识就可以说出一大堆，结果自己变得非常被动和压抑。

让我们一起重新认识它
视觉设计，一般定义：通过眼睛感官的主观形式的表现手法和结果。从生理角度分析：
视觉信号传递、视觉心理学、视错心理、等等方面来分析，而一般人所获得的信息近80%来自视觉，把眼睛看到的外界所有元素和事物归结为信息，那么也可以说是信息设计。
视觉需要传递准确的信息
视觉应包含一定的信息量
视觉效果来源于匹配程度
视觉与信息的唯一匹配性（这是视觉传达的最高境界）
我曾经有说过如果说交互设计是二维的，那么视觉设计必定是多维立体的，这只是一个比喻，只是想说明视觉它涵盖的范围，设计过程中需要综合各种情况进行可视化信息设计。

因此身为视觉设计师的我们，不要再跟不了解的人说一些他也能形容的话，而是更正确的引导和表明自己的想法，一切皆有根据而不是凭感觉。谈感觉这回事就会陷入无聊的主观讨论中，结果不管是专业或非专业依然是陷入非常初级的理解，专业的人们依然把它总结为视觉设计是个感性的东西，只要是人都有一定的审美观，能说服就说服吧！不能也没办法。这样种种的恶性循环，自然导致人们对视觉的认识和定位。

有句老话说的好，一件事情你老是不告诉我，每次也不说明白，我怎么知道你那个事情是做什么和你怎么想。

关于视觉设计是什么前面说了很多，我重点提出了一个词“信息设计”，最近很多人提到了《写给大家看的设计书》，这本书的确不错，他从信息层面提出了四个设计原则：亲密性、对齐、重复、对比。大家可以想象一下把看到的所有元素经过大脑的理解和组织判断，有效的组织编排，目的只有一个让信息能看的足够的清晰和有次序。

上面表面上看来只是从信息层面说了视觉，当然视觉还包括各种视觉感受，比如我们能看到很多种颜色，结合各种光，能看到不同质感的元素， 其实也可以把它认为是视觉设计中的一种信息，我们需要通过不同对比 视觉层次 和视觉维度来把视觉中的所有一切编排和组织起来，形成最后的产物。

设计过程中也需要从文化的角度去理解视觉设计，
不仅仅是从知觉上设计更应该从本身的情感和文化信仰上设计。靠表层的一些视觉来设计可以说是一个没有灵魂的设计，它只限于一张皮囊，我们的设计应该是有血有肉的。只有这样才能设计出有生命力作品。只有这样的才更有说服力。

总之，先认清视觉设计是什么，然后再去设计，如果连这个最基本的都不清楚，那就没什么好说的了。
koubei UED XiQin

HTML是万维网上发布超文本的通用语言^[1]。从1982年Tim Berners-Lee简化SGML建立HTML的原始定义到2001年发布XHTML1.1规范，HTML成为了有多个版本的国际标准^[2]。各版本的规范都用一种机器可读的语言定义，它描述了法定结构、元素和属性，这就是文档类型定义（Document Type Definition），简称DTD。

DTD描述了文档类型声明（DTD declaration，简称doctype^[3]）位于HTML文档最前面，它是联系文档和DTD指令。比如HTML4.01 Strict的doctype是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

它指明了文档使用的HTML版本，这是诸如浏览器之类的工具解析文档时最需要的信息。比如W3C的验证工具可依据它来检查语法和指出错误。

早期浏览器对标准的错误实现、私有扩展的大量滋生和为了向后兼容以及早期标准本身的混乱等导致了那时的文档既没有doctype也没有对DTD的直接引用，也导致了新的标准难以得到应用和普及，因为浏览器无法区分它们。为了处理根据Web标准创作的网页和根据陈旧实践创作的网页，Todd Fahrner 在1998年提出了“came up with a toggle”方法^[4]能允许浏览器提供两套渲染模式： 即有完整的doctype的文档使用W3C的标准进行解析，否则使用旧的方式解析。

这个方法符合实际且简单有效。两年后，Mac版IE上首次运用，很快的其他浏览器制造商纷纷采用， 这就诞生了doctype嗅探（doctype sniffing或doctype switching）。浏览器通过它来决定其引擎应该采用标准模式、准标准模式还是怪癖模式，这将对HTML和CSS的解析、CSS布局及JavaScript脚本产生非常大的影响^[5] 。毫无疑问，我们应该尽可能的采用标准模式。

HTML5虽然还处于草案中，但最新浏览器Firefox3.5、Chrome2、Safari4和IE8已经开始支持部分特性，特别是Google Wave的发布掀起了推进HTML5实践的新高潮。HTML5并不基于SGML也没有DTD，但它为了向后兼容，接受了doctype嗅探这个事实，定义了在text/html中doctype是唯一的模式转换声明，除此外没有什么用处。其doctype如此简洁：<!doctype html>^[6] 。

值得一提的是IE8为了解决向前兼容采用了X-UA-Compatible声明^[7]，导致在IE8中浏览器的渲染模式不仅仅取决于doctype嗅探还取决于X-UA-Compatible声明，这个不仅仅导致了模式判断更加复杂^[8]，也违背了web设计的逐渐增强（progressive enhancement）思想^[9]。

在web标准的道路上，我们不仅需要充满现实主义向后兼容，更需要充满理想主义的向前兼容，这是保证我们的web能在未来正常工作的希望。在标准、简单和逐渐增强的思想下，现在我们页面的最佳方案或许是：

<!doctype html>
…
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
…

注释：

• [1] HTML is the lingua franca for publishing hypertext on the World Wide Web
• [2] http://zh.wikipedia.org/wiki/Html
• [3] DTD declaration在以前规范中也常叫Document Type Declaration，很容易和DTD混淆。
• [4] http://web.archive.org/web/20030212115103/http://www.geocrawler.com/archives/list-name.mbox/123/1998/7/0/1037920/
• [5] 用doctype激活浏览器模式
• [6] http://www.w3.org/TR/html5/syntax.html#the-doctype
• [7] 超越文档类型,web标准化向前兼容和IE8
• [8] http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/#ie8modes
• [9] Web标准前途是否依赖浏览器技术

<style type=”text/css” media=”print”>

这里表示该style内引入或者定义的样式属性仅仅在打印的时候使用，这里提醒一下，如果没有设置media属性，那么定义的样式将在浏览器和打印时都起效，所以建议将类似这样的样式放在所有常规样式之后。比如我们希望在打印出来的页面上有一行“打印与雅虎口碑网”，但在浏览器中并不现实：

<p class=”printTitle”>打印与雅虎口碑网</p>

那么我们就可以在统一样式中设置.printTitle{display:none;},而在后面的media为”print”的样式中设置为.printTitle{display:block;}。在定义的打印样式并不是在打印时的优先级会高于常规定义的样式，所以再次建议将打印样式放在所有常规样式之后。

2.在页面打印的时候浏览器的设置会对打印的效果有影响，在IE中的“工具”–“Internet选项”–“高级”中有一个“打印背景颜色和图像”，类似的在Firefox中“文件”–“页面设置”中有一个“打印背景颜色和图像”，当这个选项被选中的时候，页面中的背景颜色和图片都可以打印出来（有些不标准的IE内核浏览器似乎有些问题，背景颜色可以打印出来，但是背景图片不行），如果没有选中则背景颜色和图片都无法打印出来，所以为了屏蔽用户不同的浏览器和浏览器设置，我建议两点，第一是在用背景色填充的区域作为分界的地方加上1px的边框，颜色和背景色一样，这样在浏览器中看不出来变化，而在打印的时候即使用户的设置导致背景色无法打印出来也可以有一个边框来作为分割，最大层的上保留了页面格局；第二是对所有必不可少的图片都使用<img/>标签，这样无论用户浏览器怎么设置都可以将这些图片打印出来，可能这样与平时一些页面设计方式不同，但为了统一打印的效果，也只要让步了。

我这里简单的提出了一些在实际运用中遇到的问题，如果大家还有什么新的问题和想法，可提出来共同谈论，在这里先抛砖了；

JavaScript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣，抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集，让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华，这是语言最本质最优雅的部分，通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效的保障我们写出优美高效的代码。

这是一本厚积薄发“薄”大精深的书籍，Douglas Crockford仅仅用了160页来道出JavaScript的语言本质，值得任何正在或者想从事JavaScript开发的人阅读，并且非常需要反复阅读。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越大师，这本书就是开始。

我很高兴和淘宝UED的前端主管小马（赵泽欣）一起来翻译这本书，去年近5个月的翻译时间是一个非常艰苦而又痛快的学习过程。我们冒着“犯罪”的危险完成了翻译，现在我也很惶恐的推荐给大家，希望我们的努力能让读者读出本书的精华，更要读懂JavaScript的语言精华。

感谢你的关注、阅读、建议和批评。

1. 购买《JavaScript语言精粹》
2. 样章阅读
   1. 第一章. 精华
   2. 第十章. 优美的特性
3. 淘宝UED Blog：《JavaScript语言精粹》译者序及样章试读
4. JavaScript大牛：Douglas Crockford

windows的双屏显示有很多种模式，我用的模式是主屏辅屏模式，两个屏是独立的窗口，可以进行窗口全屏。桌面和任务栏之显示在主屏，可以把主屏的一个或几个窗口拖到辅屏上，并全屏显示。看下图，右边的显示器为主屏，拖了个FX到左边的辅屏在该屏幕中最大化。

数数我们前端开发在工作流程中并行的全屏显示需求有多少个：
1、视觉稿（JPG图/PSD图）
2、编辑器（HTML文件/CSS文件/JS文件）
3、浏览器（FX/IE6/IE7/…）
这些窗口不需要同时都在打开状态。但在我们的工作过程中，总是有两到三个窗口需要同时打开着，并频繁的在两个窗口之间进行切换。

在完成对项目中一张或多张页面的规划后，具体到单张页面的开发，页面可以被分成若干个小模块，开发就一个一个的完成这些小模块，从编写代码到浏览器测试通过。当进入到对小模块的开发阶段，双屏显示就发挥出了它的显示优势。小模块的开发可以分为以下几个阶段：
1、看视觉稿，编写HTML结构。 – 这个阶段，主屏编辑器里编辑HTML文件，辅屏用FX的一个TAB来显示JPG视觉稿。
2、看视觉稿，编写CSS结构。 – 这个阶段，主屏编辑器里编辑CSS文件，辅屏用FX的一个TAB来显示JPG视觉稿，放一把屏幕尺子量取尺寸。（这里会发生少量第三屏的需求，比如需要配合主屏开一个PS,在PSD文件里取色，也会在编辑器里切换到HTML文件上进行结构调整）
3、看FX下的效果，修正HTML和CSS代码。 – 这个阶段，主屏仍然是编辑器，辅屏FX下开启第二个TAB，用于显示HTML页面效果。主屏编辑器显示CSS代码为主，偶尔切换到HTML代码调整。
4、对比视觉稿和FX下的效果，继续修正HTML和CSS代码的像素级细节或者BUG。 – 这个阶段，是个三屏的需求，，我们需要在辅屏的FX下两个TAB，视觉稿和HTML页面来回切换来对比差异，并在编辑器里调整CSS代码，偶尔需要切换到HTML代码进行调整。
5、看IE下的效果，继续修正HTML和CSS的细节和BUG。 – 这个阶段，我一般放在整张页面完成时，而不是单个页面完成时就去做。看大家的习惯了。这里也是多屏的需求，需要在视觉稿、FX、IE6、IE7、代码之间进行切换。

我用的两个17寸普屏，不知道有没有用大宽屏开发的，想像下22寸或者24寸的屏幕，一个当两个来用也是可行的。而市面上流行的几百块钱一个19宽屏似乎当一个用多余，当两个用面积又不够点。

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。

一、你是前端工程师

虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。

毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。

二、内容为王

1. 个人信息
   1. 姓名 _（必需）
   2. 性别 _（必需）
   3. 年龄 _（必需）
   4. 联系电话 _（必需）
   5. 学历及学位 _（必需）
   6. 薪资期望
   7. 个人照片
   8. 邮箱
   9. Blog
   10. 外语能力
2. 职业技能
   1. HTML、CSS、JavaScript/ActionScript等
   2. Web标准、可用性、可访问性
   3. 一门非前端脚本的语言(Java、PHP、Python、C#等)
   4. 任何有利于前端开发的技能和兴趣
3. 职业和教育经历
   1. 起始时间、单位名、职位（学位）和收获
   2. 简而精
   3. 按照时间倒序排列
4. 代表作品
   1. 能体现自己现在前端技能或者重要经历的作品
   2. 简而精，且可以简要附上自己在这个作品中的收获
   3. 和别人合作的作品要注明自己具体完成的内容
   4. 在线链接要测试以保证可用，如果有其他人的变更应注明，较大变更就无需提交了
   5. 提供附件要注明与之对应的文件名
   6. 按完成时间倒序排列

依据实际情况，代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些，可以任意增加能体现前端工程师职业素质的信息。

三、Web是平台

毫无疑问，Web才是真正的平台，当这个平台的后端逐步被云所统治时（Amazon的很多服务和Google App Engine都初见端倪），那么云端的用户代理（比如浏览器）就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。

简历作为前端工程师迈向新征途而提交的第一份作品，应该毫不迟疑的用它来体现其专业技能和职业精神，所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质：

1. 知道为什么选择的DTD是下面中的一个而不是其他，这是对HTML标准的理解和思考 。
   1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   4. <!DOCTYPE HTML>
2. 针对内容选择合适的HTML标签，合理的id和class命名，尝试使用微格式，这是对语义化的理解和思考。
3. 至少兼容YUI中列出的A-grade浏览器，这是对跨浏览器和CSS Hacks的理解和思考 。
4. 虽然Web性能在大访问量下才比较容易凸显，但把尝试把YAHOO性能团队的34条最佳实践应用上，一定会小中见大且受益终生的 。
5. JavaScript的应用
   1. 简历的信息结构一般很简单，但是这并不意味着无法使用JavaScript来增强它的交互。找出其JavaScript技能和简历相互结合的地方。
   2. 可以尝试使用某种框架（YUI、jQuery、Prototype、Mootools等），很明显框架能提高我们的开发速度，掌握至少一种优秀的框架能增强我们的价值。
   3. 可以利用JavaScript做出几个彩蛋在简历里面么？
   4. 实现结构、样式和行为的分离。
   5. 理解和体现DOM Scripting、预留退路（Graceful Degradation）、渐进增强（Progressive Enhancement ）、无侵入的JavaScript（Unobtrusive Javascript）等思想。 空帷翻译的《理解“渐进增强(Progressive Enhancement)》是篇这方面的好文章。
6. 可访问性，在这上面每一步的深入研究和应用都值得赞赏。
7. HTML5、CSS3、SVG、Canvas甚至离线技术、安全技术都可以和我们的简历结合起来。列表When can I use…提供了一些新技术在主流浏览器的支持情况。
8. 打印样式，很明显前端简历不仅仅是其主管看，还有HR和大老板看，所以准备打印样式是很重要的，这不仅仅是技能问题，更是一种前端开发的素质。你需要知道，打印样式应该是黑字白底，且尽量少的装饰图片，因为现在的绝大部分办公打印机还是黑白的，且黑色更费墨，所以当你的简历是黑色背景时更应该注意这点。
9. 简单设计，千万不要把你的简历搞一团糟，设计虽然不是前端工程师最重要的技能，但是良好的视觉设计更能体现前端工程师的价值，所以审美其实也是前端工程师的基础素质。如果对视觉设计感到困惑，你可以从看《推荐给大家看的设计书》开始。

四、细节决定体验

1. 标识性的文件名，比如“秦歌的简历”、“秦歌的作品”，而不是“个人简历”、“我的作品”。
2. 发完信后记得检查一下发件箱，确保没有忘记发附件。
3. 简历和众多作品整体打一个包。不要一个大包里面无数个小包。且整个包应该整理过，去掉垃圾，不应该太大。
4. 不要重复发邮件，特别是拒绝以后，还发一个同样的邮件，除非一段时间后你有较大进步。
5. 检查链接有效性，无效链接很伤感情的，可以使用Firefox的插件LinkChecker或Pinger。

实际上，前端工程师的工作成果是直接面向千万用户的，他直接决定了最终的用户体验，所以每个细节都至关重要，就像JavaScript编程一样，只要我们掌握良好的风格要素，我们就能避免很多错误，实际上这个思想贯穿整个前端开发的始终，包括制作简历。

我很喜欢有个人blog的应聘者，因为通过其blog不仅仅可以看出他的前端技能、工作积累、职业素质和分享精神，同时他通过维护blog可以贯穿一个简单开发的始终，从内容、交互、视觉、前端一直到后端维护，而这些角色都是前端在开发过程中的上下游，需要经常协作，这种经历能使前端更高效的沟通和更务实的换位思考。同样，当我推荐前端的简历应该是以Web页面为载体时，也是基于这个想法，并适当的给出一些相关知识以备有兴趣的朋友朝这个方向走下去。虽然我的建议偏向于“HTML+CSS+JavaScript”方向的前端工程师，但实战中肯定有更多能够在简历中体现前端的技能和创意，这本身就是抛砖引玉，这仅仅是一个开始。

简历很重要，但人品、职业精神和专业的前端技能更重要，最重要的是这两者是相辅相成的。虽然很羡慕兄弟团队淘宝UED、支付宝UED和阿里巴巴B2B国际站UED能有创意、时间和精力搞出那么精致的招聘站点，但我更希望我未来的同事用技能、创意、时间和精力整出一个巨牛的前端工程师简历来震住我（kaven.yan@yahoo.com）吧。

近年来，广告已成为很多网站的主要收入来源。不久前，在线广告往往遭到访客的拒绝，广告客户也不确定它的价值和效力。今天，大多数访客期望在商业网站上看到广告，广告客户已经认识到各种在线广告的潜在机会。长期以来广告一直是印刷出版物的一部分，如杂志和报纸，现在它们已经在网上期刊和出版物扮演同样的角色。

网站所有者或者发布的产品和服务总是会担心广告存在的影响，同时它也影响着网页设计师，因为他们必须设计出能带来广告收益同时又满足访客需求的网站。依靠广告收入的网站需要一个有合适位置和排版的设计以更好的卖出广告，广告客户需要一个能让他们的广告达到一定曝光度的位置。

当设计师没有把广告作为首要关注点，那么设计出一种尴尬的布局就很好解释了，这种布局要么有损网站流量广告，要么把广告放置在无法吸引访客注意的位置。为了让客户的广告效益达到最大化，同时对网站的界面和可用性影响最小，设计师必须在设计的整个过程中把广告需求考虑在内。

The Raw Story看上去处处都有可能有广告挤进来，损害了内容的易阅读性。

从最基础开始

当然，并非所有网站出售广告位，但这样做的网站越来越多了。随着博客普及率的上升，以及设计师收到更多自定义博客主题的需求，这个问题将越来越普遍。对这个话题进行充分的讨论需要我们从最基本的问题开始。

广告客户为什么要对广告位付费？

显然，广告客户购买广告获得曝光推广并改善他们的财政。每个系列的广告目标不断改变着，有一些主要关注品牌识别度和总体的推广，而有一些只关心产品的销售。广告客户可能希望从他们的广告中得到访客的点击，但是他们最终的目标都是为了加强公司的业务。

设计师可以通过广告的位置设计来影响这个议题，当然，设计师不能决定产品和服务的销售，但广告位置是点击率的关键，因此对广告是否成功具有相当大的影响。

广告客户为了什么而付费？

访客的点击，销售的转化，或者是简单的屏幕位置？所有这些都有可能，并视情况而定。例如 点击广告，以点击作为支付标准；联盟广告以订单或用户行为为支付标准；直接广告，一般都是给屏幕上的位置设定好价格并出售

如果网站要把广告卖给其他公司，那么在整个设计过程中把广告客户的需求考虑在内是很重要的，点击和联盟广告也许还能被放在网站的任何地方，当然结果也会有所不同，但是直接广告收入依赖于广告客户对所付费用得到的结果的评估， （If they are paying for prime on-screen real estate, that’s what they’ll expect.这句不知如何理解好，请高人指点）

网站或企业为什么要发布广告？

广告可以给网站带来很多赚钱的机会以及大量的流量，尽管有其他方式为网站带来收入，但是广告是为数不多的方式，可以让网站拥有者充分利用现有的流量而不用额外的工作，比如生产产品或提供服务

博客作者发布广告，是因为这些所得可以让他们赚得额外的收入，而且最基本的能抵消自己写文章花费的时间并维持博客。新闻网站销售广告是因为他们通常拥有大量的读者，同时他们的线下商业模式如印刷的报纸，已经不能像前几年那样带来可观的广告收入。随着越来越多的消费者转向在线出版物，而不是报纸新闻，广告收入也将从印刷出版物转向在线的。

在大多数情况下，广告收入是业务成功的关键，出于这个原因，在设计过程中它应该是优先考虑的事项。对于那些通过网站向访问者出售服务的服务型企业，设计师的工作包括建立一个有效的向房客推销服务的网站，这同样也适用于依靠广告收入的网站和企业。

为什么广告是网页设计的重要部分？

对于依靠广告收入的网站所有者和企业，这是显而易见的。没有足够或者正确的空间给广告，将给业务带来很大负面影响，一旦出现这种情况，为了销售业绩就会企图移动或开辟新广告位，从而导致网站看上去很尴尬而且无组织，因为这些位置没有在起初的设计过程中被考虑进来

广告收入作为其主要收入来源的网站，可以和依靠销售产品的电子商务网站进行对比，没有设计师会建立一个不把产品、描述和图片位置作为重点的电子商务网站。同样，需要广告收入的企业网站不能在广告位上有所妥协。

广告是网页设计的重要部分的另一原因是对访客的影响，虽然网站可能依赖于广告收入，但是访客是关键点，没有他们，广告收入就消失了。网站所有者和设计师需要把广告融入进来同时始终保持积极的用户体验。

在线广告的难题

当销售广告的网站想要这些广告能被访客注意并欣赏，一种微妙的平衡是很有必要的。除了冲点击和专门为联盟广告设立子公司的网站，为广告设立的网站需要割舍一部分用户以保证维持广告收入，同时它也需要留住大部分访客以保证自身的成长。想要抓住所有游客，将导致没有广告收入，为了广告客户而牺牲所有访客将导致自身发展的停滞。

在网络世界，一个广告的点击可能使访客离开，虽然广告可以设定为在新窗口中打开来预防这一点，但仍然不能保证访客点击广告后会再回来。

广告如何影响网站的设计？

在网站布局上不管设计师多关注广告，它在某种程度上影响着设计。最理想的是，在设计中设计师已经把具体的广告位考虑在内，从而得出网站的布局；在这种情况下广告能在网站上其效果的同时又不会扰乱内容或信息流的顺畅，并给广告一个明确的重要的位置。

在另一方面，如果广告没有被充分考虑在内，它们看起来将非常不协调，会扰乱网站的其他部分。

布局和间距

广告很可能占据网站布局的一大块空间，不管是一个大广告条，还是数个绑在一起的小尺寸，布局都会受到影响。一些网站会在整站分散不同的广告，一些会限制它们出现在具体范围内，并让其他位置为免费广告。

广告的策略取决于多方面因素，但是在特定行业和领域的网站倾向于采取类似的方法。例如，新闻网站通常在整个网站布局中都散布着广告，它们可能不会在某个特殊领域存在，却总是会有少量存在于许多位置。

CNN.com 在整站都包含了一些广告。

和新闻网站想必，许多博客会让横幅广告固定在一些指定的区域，通常是在边栏，其它位置则不会有广告出现。这一做法使得设计师需要为广告谋一个比较大的区域，而其它区域则基本不考虑广告位。

Blogging Tips 在右边栏有6个125*125px大小的横幅，而其它的广告仅存于个别文章的评论之前。

无论是博客还是新闻网站，由于广告常常被放在边栏，所以在设计布局时主要要考虑容纳广告的边栏所需的宽度。例如，许多新闻网站在边栏有300*250的横幅，所以边栏必须足够宽以容纳该尺寸。如果这个没有考虑在内，那么盈利机会和潜在收入将受到不利影响，或者布局不得不更改。

当然，边栏不是唯一的常见广告位，很多网站出售它们的页头位置，因为这里常常能带来最高的广告价格。在这种情况下，广告在设计中一定要作为重要元素，否则这里可能就不会留出位置。特别是对于页头有标志、品牌区以及主导航的网站，为了在页头包含广告位，所有这些元素必须被合适的布局，或者主导航可能被移到别处。

CSS Tricks是在页头有横幅的博客网站之一，在这种情况下，468*60px的横幅很恰当的被设计在页头中。

颜色

网站设计师无法控制在网站上出现的横幅的颜色或设计，将来也肯定不能，但是他们能制定配色方案时考虑一些可能性。横幅广告为了吸引访客的注意，往往比较丰富多彩、明亮，如果网站设计的充满许多不同色彩和阴影，和同样色彩丰富的广告搭配在一起就会显得很尴尬、很拥挤，特别是当这些颜色还很不协调的时候。

一些展示很多广告的网站会需要一个柔和的配色方案，以避免用户承载太多颜色。在某些情况下，网站需要广告脱颖而出，以吸引更多用户注意网站本身，只是颜色将是非常有效的方法。

流动

任何类型的网站设计师面临的挑战是展示内容以让用户关注重要信息，眼睛在屏幕上独特的移动方式和网站的内容流动，会受到广告的影响，网站所有者寻求广告收入最大化时，常常会把广告位放在眼睛关注的位置，原因是这些位置往往产生最佳结果和最多广告收入。

那些想要广告收入，但是希望对访客的影响最小化，就会让广告远离主要的内容，这种做法的例子有博客将广告位置放在发布内容之中或者在边栏。直接在发布文章的上面或下面放广告，往往比放在边栏更容易引起注意并引起点击，所以它们一般都以更高的价格出售。网站所有者需要在这方面做决定，设计师也需要了解这些决定并在设计中合理安排广告位置。

纽约时报在它的页头和主题内容区域都没有广告，但在右侧留了大块面积给广告：

设计师对广告的责任是什么？

1、了解广告收入的优先级

很多网站根本没有广告，而其他的会依靠广告维持业务，还有一些包括部分广告但不是主要收入来源。设计师需要了解广告在设计中要占多高的优先级，如果广告收入是业务的主要来源，那么广告位在布局中将会是最重要的元素之一；如果销售产品或服务更为重要，那么产品和服务在设计中要优先于任何可能包含的广告。

设计师的工作不是决定广告在网站设计和布局中应该发挥多大作用，但是需要努力趋充分理解需求方在这一块的需求和愿望。带着正确的观点并和需求放站在同一面来开始设计，是至关重要的。

2、设计一个满足客户的网站

大多数web设计师可能会喜欢从来都没有广告，并能够用其他方式利用这些空间。然而，客户需要一个能带来广告收入的网站，这时这些广告空间必须成为设计的一部分。

3、设计一个有吸引力又易用的网站，同时包含广告空间

不管广告的优先级是高是低，设计师需要创建一个有吸引力的网站，广告可能是一个麻烦的元素因为空间的占有和对内容流的打断，但是设计师还是必须做到这一点。如果有大量的广告，就需要更加注意网站的可用性，让访客受到最小的干扰。

广告和设计的趋势

看那些出售广告的网站，特别是依靠广告为主要收入来源的，我们能看到一些趋势：

头部广告

很多网站出售页头广告位，通常是在logo的一边，或导航的上面或下面，很多不同类型网站都有这种趋势，而且只要这些广告能给广告客户带来实效，它就会继续下去。

Washington Post 在文章页用了两个页头广告，第一个尺寸为300×45，位于logo的右侧，在此之下还有一个728×90的，位于logo和导航之间。

Lifehacker ，有一个大页头来容纳300×250的广告，注意该网站显然是考虑到完美适应这种大小的光告而设计并布局的。

所有内容之上的广告

一些网站将广告放在所有内容包括页头之上，这使广告处于网页最上端，但是能离开内容流；这减少了广告的潜在干扰，但是让其他任何内容都往下移了，在第一屏可看得内容减少。这种趋势在一些新闻网站特别明显。

TechCrunch 在页头纸上用了720×90的广告，在它之上仅有一条绿色的线条。

L.A. Times也在所有内容之上包含了一个广告，但它不显示在主页。

Monster 在它的工作搜索页面最顶端放了728×90的广告。

内页比首页有更多的广告

一些网站如刚才提到的 L.A. Times，保持首页更受欢迎，更方便使用除了广告位之外的空间，当然这些网站会在其他页面包含广告，这是新闻网站的另一个普遍趋势。

Reader’s Digest的首页避免任何广告出现在页面上方。

但是，单独的文章页面在页头之上有728×90的广告，一个300×250广告位于右栏最上方，以及一个135×600的摩天长条广告位于左边栏，加上一些额外的广告在页面的底部。

类似Reader’s Digest, Time在首页也避免广告。

文章内页有一个728×90的头部广告和一个位于边栏最上方的300×250广告。

常见的广告尺寸

你浏览一些网站，会发现广告在网页中占不同的比例，但其中大部分都有标准尺寸。互动广告局制定了标准尺寸以用于在线广告，虽然网站所有者可以出售所有尺寸的广告，但建议还是遵循标准，因为潜在的广告客户可能已经有设计好的标准尺寸广告，因而将有更大可能去购买标准尺寸的广告位。网页设计师应该了解客户希望出现在其网站上的广告尺寸即标准尺寸。

博客通常会实用125×125的尺寸，尽管其他尺寸也在使用。Daily Blog Tips就是一个典型例子，6个125×125尺寸的广告放在右侧栏，其他唯一的广告就是左侧栏底下的长条幅。

另一个常用尺寸是300×250，很多新网站都会在侧栏实用这个尺寸。

设计师的最优方法

1、设计满足用户需求

设计师最终是要像客户负责的，必要时设计师应该给客户建议，但是最终网站是要让客户满意才行。虽然设计师可能不同意客户在网站上使用广告的需求，但如果客户确定要这样做，我们就要考虑如何做到最好。

2、合理布局网站以便广告成为设计的的一部分

看上去很自然、标准的带广告的网站，通常是设计时就把广告考虑在内的。广告能非常适合在侧栏的某一特定位置不是偶然的，合理布局广告位置，使实现网站的最佳视觉效果成为可能，而把广告随意的放在不适合的位置上，将会压倒其他精心设计的布局。

3、考虑将来的需求

你可能会发现自己处于这样一种情况，当时设计网站时广告并不是重点，但是在不久的将来，它将成为主要收入的来源。很多网站开始时几乎没有广告，一旦用户群建立起来就需要提供更多广告位。最理想的是，设计过程中将这种情况考虑在内，并计划将来新的广告位放在哪里。侧栏通常是增加广告数量同时不影响布局以及内容的最佳位置，但是页头广告就相对比较困难了。

在最初就试着和客户讨论长期计划是很好的做法，以便避免这样的情况发生。如果在新的改版之前，不久就会需要更多的广告位，那么可以在一些位置放暂时性的内容，直到它们被用来做广告位。例如，一个区域可以被用来展示网站本身的内容，一旦广告收入变得更加重要就去掉这块内容用广告位代替。

4、考虑对浏览者的影响

设计师努力让网站包含广告位置以让广告客户满意，但浏览者同样也是要考虑的。当涉及到广告，很多决定、判断需要确定，什么是适当的？哪些看起来太多了？

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

做了一个demo列出了一些例子。

注：文章和demo于2009-2-2更新