WebDesign

产品部 : 唐 林 link

在

中

开发工具 [ 工欲善其事 , 必先利其器 ]

• Macromedia Adobe网页三剑 (Dreamweaver 、 Fireworks 、 Flash)从 3.2 MX 8.0 CS3 CS4

• MicrosoftFront page2000Office SharePoint Designr 2007Expression web3

有趣的招聘信息

我们没有两台并列的 24′ 专业显示器，我们只有和会员家用一般大小的 17' ；我们没有可以躺着开会的椅子，但我们的会议室有走时特准的大挂钟；我们没有天天出龙虾的厨房，但我们有难吃的盒饭和吃了三年还最开心的午饭时间；我们没有外企那种悠长假期，但我们有每晚在楼下等到凌晨的 “的哥”；我们没有让人口水满地的薪水报酬，但我们有别处无法得到的压力与历练；

有趣的招聘信息

如果你只是想着睡觉睡到自然醒请不要来，因为我们这里有各种有趣的活动只会让你时常失眠；如果你只是打算数钱数到手抽筋请不要来，因为我们这里注重的不只是薪水还有个人职业发展；如果你习惯天天朝九晚五的工作请不要来，因为我们这里会经常派你去参加各种培训与研讨会； 如果你习惯做默默无闻的幕后人请不要来，因为我们这里时常会有各种机会让你展现个人魅力；如果你容忍与领导间冷漠的关系请不要来，因为我们这里的兄弟姐妹来自五湖四海亲如一家人；如果你喜欢走在人群钢筋建筑中请不要来，因为我们这里山清水秀人杰地灵，西湖风景美如画。

有趣的招聘信息

1 像素乘以 4 亿有多大…4 亿人的画展有多壮观…在这儿，你的每一次鼠标拖动和色彩填充都将呈现在数以亿计的网友面前，这是一份充满激情的工作，我们每一次灵感的迸发总能给用户带来更大的惊喜，这是一份格外严谨的工作，为了用户每一次顺畅的操作，我们固执地追求着每 1 像素的完美。对 Web 充满激情，热衷于开发优秀的基于 Web 的产品；性格乐观，能积极面对压力。对各种 Web 前端技术（ JavaScript ， CSS ，语义化标签 等等）有深刻理解；对可用性、可访问性等相关知识有实际的了解和实践经验；

前端开发人员的发展方向div+css 等狭隘的理解前端页面重构工程师从产品诞生的流程，分析页面人员的能力模型，应该具备一专多长，要熟悉项目管理，产品，设计，后台开发，产品运营等，作为研发中的一个衔接层，更好的像产品构想和设计付诸实施。 实际工作中，前端开发人员的工作性质，决定了他们需要跟方方面面的人打交道。

一、先从“产品”说起• 良好的用户体验，在“静态设计稿”上往往得不到直观感触。通过与前端开发的协作，可以把“各个流程”搞的很顺畅：

1.直接在前台验证注册表单，即时反馈输入错误的信息；2.同页无刷新弹出提示层；3.提升页面开启速度。综上所述，前端开发人员发展的方向之一，是做好产品，掌握并提高“用户体验”。

二、运营推广方面• 通过W3C验证，本身就为 SEO 做好了基础，掌握了这项技术，可以有效的降低网站推广所花费的成本。从运营角度上来说，前端开发可以辅助企业完成一小部分的推广工作。另外，可以有效降低页面产生的流量。成本的节约就是收益，能省一点是一点，每天在关键字购买、流量购买上投入的成本，累积起来决不是个小数目。这也是前端开发人员所具备的价值之一。

二、设计• 跟设计师打交道的几率，实在太高了。经常可以看到愤怒的

工程师在怒吼“又给我设计了一个圆角结构，实现太麻烦了”，而实际上，如果前端开发掌握一下设计方面的技巧，对工作是很有利的。大多数设计师，不会提供详尽的稿子，例如内容页面，往往仅提供一个模板。于是有很多工作，都浪费在沟通的成本上。“帮我美化个按钮”“我需要设计一个提示层”。其实这些东西，自己做很快就可以搞定，如果设计师刚巧在忙别的项目，就为了一个美化的效果，需要等待很长时间。那如果你自己掌握了设计的技巧，可以把“圆角”结构改成漂亮的“直角”结构，岂不是很爽？

二、后台• 页面制作每个公司的情况都不一样，我们是提供

demo静态文件给程序员，程序员改好后，放到templates目录下。如果是不懂程序代码、不会配环境的员工，修改一个东西，需要改完 demo 下的静态文件后，预览效果，再告诉程序员，他改了什么什么，再让程序员去调 templates模板页。这样一来一回，浪费时间不说，程序员也会很不爽，。不利于提高自己的工作地位。

二、总结• 人无完人，我们往往没有大量的“时间、精力”去学习这些额

外的东西。但是，前端开发这个职业特点，要求我们在精通本行业知识的基础上，尽可能的去了解其他行业的知识。这样，才能在与其他部门打交道的过程中，占据一个有利的地位、降低沟通成本。在管理体系里，你的个性决定了你的位置，想要做的更好、得到更多。直白点，想要提升职位、涨工资，就需要一个理由。做前端，就要做一个优秀的前端。技术技能只是做事实施的必需。“一专多长”是前端的王道。

Web 网页的开发

可以把网页的开发比作成楼房的修建。修建楼房，首先得有建

筑图纸，这是网页开发中的原型（ prototype）。有了图纸，就可以

用钢筋水泥搭建楼房了，这些毛胚房是网页中的结构。毛胚房还得

装修，这是 CSS 。相同结构的毛胚房可以装修成各种不同风格的住

房。 JS则可以看成是楼房里的电梯和中央空调等玩意。没有电梯的

楼房，有楼梯依旧可住，只是电梯会让住户更方便一些。在网页中，

电梯和楼梯反映的就是渐进增强的开发思想。等装修都弄好后，欢

欢喜喜的终于可以乔迁新居了，这些入住的居户就是网站的用户

设计稿的分析

一、设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的

内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

能分清设计稿中的公共与私有的部分

在 1 的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）

在 1 的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）

在 3 的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）

在 4 的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二、切图

二、切图

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容

结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全

是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”

完全不为过。切图也可以划分成几个阶段：

切成所需要的图片（如何将需要的部分切出来）

在 1 的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）

在 2 的基础上，规划切出来的图片（包括文件分布）

在 3 的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

• 看一个站点其实就好比品评一个漂亮MM 。一看长相，我们很多时候关注的是视觉，比如老板经常会说，你做多个页面让我看看！二看身材，也有很多关注标准和seo 的人会很注重页面良好的结构；

HTML和CSS的编写

HTML 和 CSS 的编写是指将上面完成的内容，通过 HTML 和 CSS 的编写，将设计稿转换成WEB 页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强， HTML 的写法会影响到 CSS 的写法，它又可以划分成下面几个阶段：

还原设计稿视觉效果，并通过标准验证（ HTML）

在 1 的基础上，实现多浏览器的兼容（ HTML）

在 2 的基础上，标签语义化（ HTML）

在 3 的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用， HTML 和 CSS）

在 4 的基础上，考虑到扩展性、复用性和可维护性（ HTML 和 CSS）

在 5 的基础上，考虑到整站的样式分布（包括如何实现分布）

在 6 的基础上，样式写法的优化（包括技巧的应用）

是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

处理的细节问题• 自适应圆角盒• CSS Sprites• 命名规范

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“ background-image” ，“ background- repeat” ，“ background-position” 的组合进行背景定位， background-position 可以用数字能精确的定位出背景 图片的位置。

CSS

E N D

下期预告：易就业网 产品分析，曾经学到的东西