这里仅列举几项设计师应该具备的知识点，并不是要求都具备才是设计师哦！

【必备】UserInterface

PhotoShop/Fireworks Design

1. 配合美工将草图形成具体的符合WebPage的设计
2. 有快速制作分层高品质PSD、PNG的能力
3. 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码

Flash Design

1. 基本动画效果
   复杂的交互体系设计，了解第三方swf辅助设计软件
   复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等）

【必备】Browser-side (Web Application)

XHTML/CSS

1.  基本的layout实现
2. 严格跨平台的layout实现以
3. 优雅的HTML code，尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为"一切都已经准备就绪了"，而不是"捉襟见肘"。

JavaScript/Ajax/DOM

1. 基本的DOM操作，了解AJAX，可以实现数据通信
2. 基本的DOM操作，能写高效率的OOP代码，以降低维护成本
3. 基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码

Flash Developement

1. 基于Timeline的ActionScript操作，能实现简单交互
2. 掌握a外，能实现数据层通信（与服务器以及本地SharedObject）
3. 精通AS1-3，能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的，还是FlashPlayer9的，都能做到开发效率最高、灵活性最大（比如对HTML层的接口设计，等等）。

【必备】Client-side (Desktop Application)

Apollo

1. 产品级的封装，基本技术了解（如何打包、如何加入HTML和JavaScript等）
2. 掌握a的同时，能利用Apollo的API独立设计、开发OS的文件I/O功能。
3. 掌握基本技能的同时，对"3D概念体系"有所认知。这里"3D"即：Design（设计）、Development（开发）、Deploy（产品部署）。能用Apollo Windows Presentation Foundation、WPF/E（Silverlight）
   （待定，欢迎补充）

【增补】Server-side （修改：经考虑，这个技能不参与评级）

   本来列举了"1、Server端简单的技术、脚本"和"2、MediaServer（Red5）接口"作为"Web前端工程师技能列表"的一种（服务器、数据逻辑层技能的）评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实，要掌握好上述的展现层技能不是意见容易的事情，而且前端工程师的确非常辛苦。但是，站在另一方面来说，辛苦的原因是什么，我不知道在你日夜奋战div+CSS的时候思考过没有。就我的经验，前端的辛苦在于以下几个方面：
重复劳动多，大量的div+css都是重复的，即便可以复制粘贴，但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
需求变更多，往往你折腾几个小时终于把跨平台问题解决好了，而且在IE6、7和Firefox下面都能显示同样的效果了，甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。
   也许表面上看，这跟Server端技能无关，但我觉得有好的Server端的意识，一定会有所帮助（当然不可能解决所有的问题）。毕竟信息结构和数据库是密切相关的，而Server是连接数据库的唯一渠道（至少大多数B/S应用是如此）。掌握Server端的基本技能，对于同逻辑层开发人员设计接口是非常重要的。而且HTML表现层在开发时与数据的分离，也与Server端的各种模板技术有关。例如PHP中的Smarty模板（我曾经用的）、jsp的model2概念等等。HTML结构如何设计，如何让HTML重用，甚至在HTML层进行OOP的开发（我现在在新产品线中设计的前端开发流程），都需要Server端的支持。最起码，你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话，那也无从谈起了。
此外，对于创业团队，往往人手非常有限。为了让运营成本降到最低，所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话，那实在是增加了整个公司的运营成本。
总结：我认为，可以不了解技术细节，但应该知道原理，最好能掌握一两套设计思想（毕竟数据逻辑都在这里走，光看HTML和JavaScript，对人的见识还是有局限的，这种局限限制了我自己很久的时间），那将是一比宝贵的财富。

【增补】Mobile-side
  看到很多朋友留言说前端工程师没前途，我在想，同时掌握移动设备的技能是否也是拓展前途的一个必要性？这里再多说几句，关于技术人员的前途，目前在国内确实得用"惨淡"来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯，而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生（我身边太多了，恩，不说具体细节了，呵呵）。
作为一个技术人员，开发人员，在保持纯粹地敬业心态（这是前提，这么没有，啥也别谈）外，更要学会如何保护自己，如何壮大自身，社会不会同情你，只有你自己才能保护你自己。

刚才有人告诉我很简单的一句话，还是串改的：将耐心留给客户，把睡眠留给自己！
在他乡夜深人静的时刻，我有那么一丝感动和感谢。
一切都不辛苦了，不辛苦，我轻轻微笑

CSS 规则的优先级是Web前端开发人员必须理解的一个概念，我们常用的添加样式的方法有4种。

• inline style
• embeded style
• external style
• user style

inline style是丑陋的，它们穿梭在HTML文档中，与HTML元素扭成一团，给Web前端开发人员造成了许多麻烦。它们往往以这样的面目出现：

<p style="color:red;">This is a paragraph.</p>

embeded style比inline style绅士一些，它们也寄宿在HTML文档中，但是它们不屑于与HTML元素扭成一团。它们往往在 <style> 元素中出现：

<style type="text/css" media="screen">
p{
color : red;
}
</style>

external style是个贵族，它不愿意同HTML呆在一起，所以干脆以外部文件的形式独立存在。通常我们使用 <link> 元素或者@import语句将它们导入HTML。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

我们应当尽可能使用external style，我想理由有很多，大家都知道，我也就不重复了。

还有一种user style与以上三者略有不同，如果你使用IE浏览器，那么你可以在Tools – Internet Options – General – Appearance – Accessibility – User style sheet 下找到添加user style的地方（原谅我没有中文版的IE浏览器）。

既然我们有如此多的添加style的方法，那么难以避免样式会产生层叠。如：

<p class="intro" style="color:red;">This is a paragraph.</p>

我们在使用以上inline style的同时，又在我们的external style中使用了：

p{
color : yellow;
}

我们甚至还在拥有 class="intro" 的 <p> 元素上应用了：

p.intro{
color : blue;
}

这样我们就 在同一元素的同一属性 color 上，拥有多条CSS规则指定了值 。这种情况被称为层叠(Cascading)。当层叠发生时，CSS Parser将根据优先级算法来确定最终选用的值。

优先级算法按照先后顺序考虑以下三个方面：

1. CSS规则的重要性和来源
2. CSS规则的特殊性
3. CSS规则在文档中出现的顺序

算法过程分为4步：

1、针对某一元素的某一属性，列出所有给该属性指定值的CSS规则。如上例中，在 class="intro" 的 <p> 元素上，有三条CSS规则指定了 color 属性。

2、根据声明的重要性和来源进行优先级排序

重要性有两种：

• important
• normal（即非important）

在CSS规则后添加 !important 的重要性要高于没有添加的。

来源有三种：

• user agent stylesheet – 浏览器默认样式
• author stylesheet – 开发人员定义的样式
• user stylesheet – 用户在浏览器中定义样式

重要性和来源的优先级排序从低到高是：

1. user agent stylesheet
2. user style sheets中的normal规则
3. author style sheets中的normal规则
4. author style sheets中的important规则
5. user style sheets中的important规则

经过以上排序，如果有一条CSS规则的优先级高于其他所有竞争规则，那么算法结束，返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级，那么它们将要继续竞争下去，算法将进入第3步。

3、按照特殊性（Specificity）排序

CSS将计算多条规则中指定每一规则的selector的特殊性值，该值越高，优先级越高。

特殊性值是一个由4个整数组成的一个类似数组的值：a,b,c,d，其中a的权重最高，依次类推，d的权重最低。selector特殊性值的计算方法是：

• 如果该规则是一条inline style，那么a = 1
• 如果该规则由selector指定，selector中出现的id selector的数量就是b的值
• 如果该规则由selector指定，selector中出现的属性selector（包括class selector）或者伪类selector的数量总和就是c的值
• 如果该规则由selector指定，selector中出现的元素selector或者是伪元素selector的数量总和就是d的值。
• universal selector * 的特殊性值为0,0,0,0

官方网站 提供了一些例子可以加深理解。

在根据特殊性值排序时，由于a的权重最高，因此首先比较a，在a相同的情况，在比较b，依次类推。因此不论b,c,d值有多大，inline style总是具有最高的特殊性。

如果根据以上特殊性排序后，有一条CSS规则的优先级高于其他所有竞争规则，那么算法结束，返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级，那么它们将要继续竞争下去，算法将进入第4步。

4、比较CSS规则在文档中出现的顺序

出现在后的总是比出现在前的具有更高的优先级，因此出现在最后的那条语句将被作为该属性的值。

至此，算法结束。我彻底晕了。

嗯~~~~~心得~~~~~是~~~~~自娱自乐!

值	描述
none	此元素不会被显示。
block	此元素将被显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为一个内联元素，元素前后没有换行符。
list-item	此元素会被作为列表显示
run-in	此元素会根据其内容被作为块级元素或内联元素显示。
compact	此元素会根据其内容被作为块级元素或内联元素显示。
marker
table	此元素会被作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会被作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会被作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group	此元素会被作为一个或多个行的分组来显示（类似<thead>）。
table-footer-group	此元素会被作为一个或多个行的分组来显示（类似<tfoot>）。
table-row	此元素会被作为一个表格行显示（类似<tr>）。
table-column-group	此元素会被作为一个或多个列的分组来显示（类似<colgroup>）。
table-column	此元素会被作为一个单元格列显示（类似<col>）
table-cell	此元素会被作为一个表格单元格显示（类似<td> 和 <th>）
table-caption	此元素会被作为一个表格标题显示（类似<caption>）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用javascript判断用户输入email地址是否有效</title>
<script>
function checkEmail(){
var emailPattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (emailPattern.test(emails.value)==false)
alert("非法的Email地址！")
else
alert("正确的Email地址！")
}
</script>

</head>
<body>
<input id=emails><input type=button value=CheckEmail onclick=checkEmail()>
</body>
</html>



亦可以直接使用下面的代码，与上面的代码等效：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用javascript判断用户输入email地址是否有效</title>
<body>
<input type="text" name="mail"><input type="submit" onClick="alert(/^.+@.+\..+$/.test(mail.value))">
<!--严格一点是这样的：<input type="text" name="mail"><input type="submit" onClick="alert(/\w+@.+\..+$/.test(mail.value))">-->
</body>
</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zss图片渐显小例</title>
<script   language=JavaScript1.2>  
  <!--  
  function   high(which){  
  theobject=which  
  highlighting=setInterval("highlightit(theobject)",50)  
  }  
  function   low(which){  
  clearInterval(highlighting)  
  which.filters.alpha.opacity=50  
  }  
  function   highlightit(that){  
  if   (that.filters.alpha.opacity<100)  
  that.filters.alpha.opacity+=10  
  else   if   (window.highlighting)  
  clearInterval(highlighting)  
  }  
  //-->  
  </script>  
</head>
将下面一段代码放到<body>中：
<span> <img src="_K)1IA{P0%MRG_CC)O1[$VC.JPG" width="296" height="294" alt="zss图片渐显" onMouseOut=low(this) onMouseOver=high(this)   style="filter:alpha(opacity=50)"> </span>
（参考代码时注意修改图片路径）

    有很多地方可以减少代码的长度，包括 简记属性 (shorthand properties)， 多重声明 (multiple declarations)，默认值 (default values)， 继承 (inheritance)，和空白 (white space)。
简记属性

    Zeroing page margins 提到了一组这样的简记属性，但对于此还有更多的。

　　通常简记属性包括：

font (控制 "font-size", "font-weight", "line-height", 等等)
background (控制元素的背景，放置位置，重复次数，等等)
list-style (设置列表元素前边那个“原点”的属性)
margin (定义 box 各侧的边缘空白 (margin) 宽度)
border (定义 box 边界 (border) 的属性 —— 有很多和边界有关的简记属性)
padding (定义 box 各侧的补白 (padding) 宽度)
上述项目是链接至 W3C CSS 2 规范 的相关章节的。

    例如， font  属性 是用于同时设置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的简记属性。当然，它们并非全都必须写在简记属性中。一旦在简记属性中忽略了其中某个，那些缺失的属性都将被设置为它们的 初始值，就像 W3C 规范 中  font property  一节提到的那样。若需要控制很多和字体相关的属性，使用这个简记属性就可以省下样式表中的大量字节了。

    background  和  list-style  属性也是如此。现在还剩下关于 CSS 盒 (box) 模型 四边的那些属性和一点没法归类的杂碎了。

　　盒侧边的简记属性

    任何块级 (block level) 元素 (像 div，表格，列表，段落等) 的四边都有 边白 (margin)，边界 (border)，和 补白 (padding)，都可以分别设置不同的宽度。对于边界 (border) 来说，还能给每边分配不同的  border-style  和  border-color 。若要一条条地显式地指明所有这些属性，代码就会变得很冗长。使用简记规则的意义正在于此：彻底地减少这样负担。

　　“钟面”

    当需要指定这三类“盒侧”属性之一，而且各侧的情况又是一样的时候，使用简记属性最基本的功能就行了：

margin: 5px;
border-width: 5px;
padding: 5px;

    注意：要让边界显示出来，还必须设置 border-style 属性，否则单有  border-width  边界是显示不出来的。既可以直接通过 border-style 来设置它，也可以通过  border 属性。

    然而很有可能某一侧需要一个不同的值，这时 CSS 的“钟面”特性就上台了。把此处的盒子想象为一个钟面，当指针指向 12 点时，表示盒子的正上方，这就是简记属性中第一个值的含义；下一个是 3 点，这是盒子的右侧；接下来是 6 点，表示盒子的下方；最后呢是 9 点，盒子的左侧。

    让我们看看这个例子吧。在页面中我们需要一个 10px 上边白，5px 右边白， 3px 下边白，无左边白的盒子。则  margin  简记属性应该这么写：

margin: 10px 5px 3px 0;

    在属性的声明中，几个值必须也只能用空格来分隔。而且只要那个值不是零，就必须给它指定单位。

    为什么零宽度的边白就不需要指定单位了呢？因为零个任何单位 (px, em, %, 等等) 的值也就等于任意其他单位的值。

　　改进的钟面

    当某些值重复时，这些“盒侧”属性还能压榨得更短。前面提到过，若各侧都一样，可以只指定一个，让它应用到全部。而一旦顶部和底部的样式是一致的，左侧和右侧却是另一种，margin 的代码可以这么写：

margin: 10px 5px;

    这行代码把顶部和底部的边白设置为 10px，两侧设为 5px。最后一个技巧是这样的：若顶部和底部的不同，两侧的却是一样的，比如上边白 10px，左右边白 5px，下边白 20px，我们可以这么写：

margin: 10px 5px 20px;

    这些缩写完全是根据给出值的数目和顺序决定的。总结起来，一个值 = 所有各侧；两个值 = 上下一种，两侧另一种；三个值 = 上侧一种，左右同一种，下侧一种；当然还有四个值 = 按照顺时针。好了，现在不那么难记住了吧？

　　边界 (border) 的一些区别

    同样的钟面简记模型也可以用于 border 简记属性 和 padding。 border-width ,  border-color ,  border-style , 与  padding  也采用和 margin 一样的方式工作。然而处理  border  属性时却有点不同。  border  属性是同时给盒子的各侧设置 border-width, border-style, 及 border-color 属性的。

    如果所有四侧的样式都一样，那当然不会有什么问题。可万一他们不同呢？我们还得回去用那些老式的 border-top, border-right 们？没错，是可以。但幸好我们还有更有效率一点的方法。

    考虑我们这个盒子的各个边界有同样的 style 和 color，但宽度不同的情况，最有效的方法是，先像往常一样用  border  简记法来定义好 border-width, border-style, 和 border-color；然后再设置一次  border-width  属性，覆盖上面设置的宽度：

border: 10px solid red;
border-width: 10px 5px 3px 0;

    如果所有的边界属性 (width、style 和 color) 都各侧不同，那上面的方法恐怕就没什么用了，但通常不会遇到这么怪异的情况。如果变化的属性仅仅是  border-style  或者  border-color  的话，上述的方法改改就可以像  border-width  的情况那样用了。

    下面我们看看在另一种情形下书写高效的 CSS 会带来什么改变。

　　多重声明

    考虑我们有 6 个采用绝对定位的 div (比如 Dreamweaver 里的层)，且它们的其他属性都一样，只不过在页面中的位置不同。因为它们的位置不同，自然应该有不同的 ID 或者是 class，但剩下的属性还是一样的。

    一个 (所见即所得的) 布局编辑器恐怕给每个 ID 都各自写一套属性，包括字体的规则、文本的规则、位置的定义等等。可一遍遍地给这些 div 重复完全一样的规则未免笨了点，不是么？那这样就可以把这些规则减到最短了：

#first  {left: 0;}
#second {left: 100px;}
#third  {left: 200px;}
#fourth {left: 300px;}
#fifth  {left: 400px;}
#sixth  {left: 500px;}
#first, #second, #third, #fourth, #fifth, #sixth {
  position: absolute;
  top: 0;
  width: 75px;
  font-size: .9em;
  font-weight: bold;
  text-align: center;
  line-height: 1.4em;
  background-color: silver;
  color: navy;
  padding: 5px;
  border: 1px solid navy;
  }

    列出所有类似的这些 div 的 ID，用 , 和一个空格分隔，下面的规则块会被应用到所有这些 ID 上。显然这样的规则如果给每个 ID 都重复一遍，代码就膨胀得多了。这恐怕是最常用也最有效的缩短样式表方法了。

    注意：注意最后一个 ID 选择符 并没有 跟着一个逗号。(若多了逗号) 有些浏览器中可能还能看到那些 div，另一些就有可能把这样的样式表视为错误而不显示任何一个 div 了。

　　默认值

    许多 CSS 属性都有它们的默认值，如果这个属性没被定义取代，它们就将应用于 HTML 元素上。比如说每个补白属性中， padding-top ,  padding-right ,  padding-bottom , 和  padding-left  的初始值都是  0 。因此如果某个元素不需要任何的补白，自然就可以不设置补白的那些属性了。

    注意： 那些简记属性——比如我们先前讨论过的—— 里面，或者其本身都没有什么默认的值。毕竟简记属性其实只是独立属性的一种重现而已，所以如果硬说它们有默认值的话，采用的也是独立属性的那些默认值。尽管 CSS 规范的 Property Index 一节中规定的许多默认值都是  none  或  0 ，浏览器们却往往给不同的属性设置一些不同的默认值。

    例：Opera 浏览器给 body 元素设置了 8px 的补白。h1-h6 标题和段落，默认都有非零的边白。列表和列表子项中用到的默认边白和补白，每个浏览器都有所不同。

　　继承

    另一个避免写出冗余代码的方法是，了解哪些属于父元素的属性会由子元素继承下来。会被继承的属性只有很少一些，而且其中大部分是不常用的，比如  voice-family 。所以列个能继承的常用属性的表，其实是很短的，下面就是按字母顺序排出的：

color
font (及其相关属性)
letter-spacing
line-height
list-style (及其相关属性)
text-align
text-indent
text-transform
white-space
word-spacing

    在某些老式浏览器中，继承功能可能有些问题，然而大部分现代浏览器在这方面都处理得很正确。记住上面这个列表，可以让你少写点多余的代码。当然了，如果你想看看完整的列表，还是参考 CSS 2 Property Index。 

　　空白

    并非指的是 CSS 的  white-space  属性，这个属性早有确定的值了。我们说的是样式表本身含有的那些空白。空白常用于换行字符，和在一行里面用来改进可读性的空格。尽管把它们都删除可能会剩下个把字节，但好处毕竟有限。

    关键是，如果把它们都删除了，CSS 文件就会变得非常难读，更难修改。要是你真的打算这么做，不妨创建一个主 CSS 文件，再根据它生成一个删除了所有空白的副本，修改的时候只修改主文件，根据主文件重新生成一次副本就行了。

    请注意，CSS 编码中需要一些空白，删除那些必要的会导致你未曾预料的问题。如果 W3C 规范中用了 "space separated" 这样的语句，那么空格就不可省略。常见的像简记属性中分隔值的那些空格，还有 下降合并符 (descendant combinator)，或者称为下降选择符，就是一个空格。所以说不到非用不可的时候，删除空白这样的方法还是少用。


学会了好几种让样式表更高效的方法，益处是在这些技巧下，不仅下载时间被减少了，而且清晰、易于理解、更改的代码随之而来。