前端开发常用的工具 
“工欲善其事，必先利其器”，现在开发Web应用和前些年相比已经完全不同了。早些年开发ASP应用时，只需要掌握如何应用Dreamweaver就行了；而现在Web应用得越来越成熟，开发语言也更多样化，特别是在Web标准、兼容性、性能、调试、设计等方面得到了广大用户的重视，基于Web的工具应用也越来越多。这些工具能辅助我们在开发效率、思维拓展、协同工作等方面进行改善。下面的小节中将列举一些前端开发人员所必须掌握的工具，相信它们能给我们的工作带来便利。
1.4.1 设计类工具
Adobe公司旗下的一些软件是我们最常使用的工具集，下面分别介绍其中的一些软件。
Adobe Photoshop作为一款最早用于平面设计的软件，现在也常被视觉设计师应用于Web的视觉原型稿制作。视觉设计师可以根据线框图原型稿进行视觉设计，最终完成真实的Web视觉原型，交付评审。同时Photoshop还可以用于切割图片，将视觉稿切割成小图供编码人员使用，一些背景图、PNG图、CSS精灵的整合图片都离不开Photoshop这款史上功能最强的图像制作软件。
Adobe Flash动画制作软件虽然是制作矢量动画的软件，但是它已成为Web中不可或缺的元素，从主题广告到交互动画，都离不开Flash。
Adobe Fireworks的推出满足了网页设计师的一些需求，如切片、添加热点等，既可编辑位图，也可编辑矢量图。如果要制作一些GIF小动画，用它来编辑比用Photoshop要方便得多。
Adobe Dreamweaver是快速的HTML/CSS/脚本编辑软件，提供了自动补全功能，同时还提供所见即所得的功能。如果你不善于记住每个HTML/CSS属性，那么Dreamweaver是最好的选择。
1.4.2 原型类工具
产品原型设计的形式比较多样，可以是图表，也可以是HTML，在实现的工具上也有许多选择，一些常用工具就能够简单实现（如Photoshop、Office），当然还有一些专业的工具能帮助我们更快捷地设计。
1.4.3 调试类工具
在前端开发中，主要以调试HTML、CSS、JavaScript为主，在编写前端应用中都需以Firefox为主进行开发。在Firefox中表现良好了，在其他的浏览器中当然也不会有特别异样的地方。IE、Firefox、Chrome、Safari、Opera等浏览器一个都不能少，特别要提到的是Firefox，它的插件非常丰富，我们主要应用两款插件完成前端的调试工作，其他丰富的组件可以访问https://addons.mozilla.org/zh-CN/firefox/browse/type:7。
1. Firebug
Firebug在Firefox的插件中属于五星级的插件工具，它集合了查看HTML结构及样式、实时编辑等功能，是开发HTML、CSS、JavaScript的得力助手，我们可以利用它全面了解页面，可以对任何网页的CSS、HTML、JavaScript进行实时的编辑、调试和监控。如图1-12所示为Firebug的运行界面。
图1-12 Firebug运行界面
2. HttpWatch
HttpWatch是一个老牌的调试工具，支持与IE和Firefox的集成，通过工具可以看到整个页面交互的详细过程，见图1-13。
图1-13 HttpWatch页面视图
对某个URL请求的具体细节也可以一一概览，比如Header内容、Cookie内容、响应时间图、提交信息、流信息等，见图1-14。
图1-14 某次URL请求的Header信息
该工具同样还支持一些报告的生成与分析。这些强大的功能有助于开发人员进行性能分析与问题定位。
3. Yslow
Yslow是由Yahoo开发的一套网页评分插件，共有12条使用准则，使用它可以评估网页设计上的不足之处。它还提供了许多改进意见，Yslow与Firebug集成在一起，所以需要先安装Firebug插件才能使用。使用Firefox访问https://addons.mozilla.org/zh-CN/firefox/addon/5369，点击“添加到Firefox完成安装”，重启浏览器即可使用Yslow。打开右下角仪表盘图标，运行测试，Yslow将对网页进行分析，并给出评分及建议，见图1-15。
图1-15 Yslow的分析与建议
根据Yahoo提出的性能优化最佳实践法则，共分7大类、35条准则，如基于内容方面的10条为：
4．Microsoft Expression Web SuperPreview
Expression Web SuperPreview支持开发人员在不同的浏览器中模拟呈现Web页以检测布局问题。SuperPreview既有独立的安装版本，也可以集成到Expression Web。如今的浏览器除了Firefox和IE，还有Safari、Opera和Chrome的跨平台版本，以及大量的手机浏览器。除此之外，这些浏览器又有多个版本，它们又有很多不同的呈现特性（如IE 6、IE 7和IE 8）。
当今的Web开发人员面临着如下困境：
SuperPreview的工作区页面见图1-16，整个页面非常简洁清晰，可以打开多个窗口来浏览同一个地址在不同浏览器中的显示效果。
图1-16 SuperPreview的工作区
以著名的门户网站为例，效果见图1-17。图1-17的左侧为IE 6的显示效果，右侧为IE 7的显示效果。看来该门户对IE6与IE7的支持都很不错，在这两个浏览器下都可以正常地显示页面。
图1-17 SuperPreview分别显示IE 6与IE 7的效果
不过精确到某个DIV的高度和宽度，IE 6与IE 7下显示的效果还是有显著区别的，通过层叠视图就可以看出（见图1-18）。
图1-18 SuperPreview的层叠视图效果
有了这样一款工具，相信可以很好地节约你解决IE各版本兼容性问题的时间。
1.4.4 辅助类工具
为了提高Web的性能，需要将脚本用样式文件压缩一，即减少文件的大小，将不必要的空格等去除，同时也可以将脚本中的变量等进行混淆。YUI Compressor是值得推荐的压缩工具，它的压缩比大约为50%，详细信息可以参考Yahoo开发者网络。
在进行CSS Sprites样式开发时，经常需要对Photoshop中制作的图片进行测算，比较麻烦。这时可以利用CSS Sprites样式生成工具快速地测算每张小图的位置，具体参考http://www.cssforest.org/blog。关于CSS Sprites的内容在以下章节中将详细描述。
Web中必不可少的就是颜色。碰到你喜欢的颜色，可又不知道它的值，该怎么办呢？除了使用Photoshop进行取色外，还可以使用Yahoo提供的取色软件（PickColor），既方便又快捷。除了取色，配色也是件麻烦的事情。如果没有好的配色方案，那么Adobe Kuler可以为你提供很多方案，还可以将完美的配色方案导入Photoshop中使用。
1.4.1 设计类工具
Adobe公司旗下的一些软件是我们最常使用的工具集，下面分别介绍其中的一些软件。
Adobe Photoshop作为一款最早用于平面设计的软件，现在也常被视觉设计师应用于Web的视觉原型稿制作。视觉设计师可以根据线框图原型稿进行视觉设计，最终完成真实的Web视觉原型，交付评审。同时Photoshop还可以用于切割图片，将视觉稿切割成小图供编码人员使用，一些背景图、PNG图、CSS精灵的整合图片都离不开Photoshop这款史上功能最强的图像制作软件。
Adobe Flash动画制作软件虽然是制作矢量动画的软件，但是它已成为Web中不可或缺的元素，从主题广告到交互动画，都离不开Flash。
Adobe Fireworks的推出满足了网页设计师的一些需求，如切片、添加热点等，既可编辑位图，也可编辑矢量图。如果要制作一些GIF小动画，用它来编辑比用Photoshop要方便得多。
Adobe Dreamweaver是快速的HTML/CSS/脚本编辑软件，提供了自动补全功能，同时还提供所见即所得的功能。如果你不善于记住每个HTML/CSS属性，那么Dreamweaver是最好的选择。
1.4.2 原型类工具
产品原型设计的形式比较多样，可以是图表，也可以是HTML，在实现的工具上也有许多选择，一些常用工具就能够简单实现（如Photoshop、Office），当然还有一些专业的工具能帮助我们更快捷地设计。
- Adobe Flash Catalyst是Adobe公司新增的Flash平台产品，面向的是设计师及开发人员，它提供了一种协作平台，为设计师和开发人员架起一座沟通的桥梁。如果你没有开发Flash应用，那么用它来进行交互原型的开发是很简单的。
- Balsamiq Mockup是一款类似手绘涂鸦风格的界面原型工具，采用Adobe AIR技术开发，包含丰富的界面组件，可以帮助我们设计任何界面原型。
- Axure RP是一款功能很强大的原型工具，能帮助网站需求设计者快速完成原型文档、交互界面、功能流程，可以直接生成浏览器Demo版本或Word文档，它的特点是能够开发一些交互性的原型，在第2章中我们将提到它的一些简单用法。
- Pencil最早只是Firefox的插件，后来基于XULRunner发布了桌面版应用，程序使用XUL进行开发，可以用来作原型图，它也是一款不错的工具。
1.4.3 调试类工具
在前端开发中，主要以调试HTML、CSS、JavaScript为主，在编写前端应用中都需以Firefox为主进行开发。在Firefox中表现良好了，在其他的浏览器中当然也不会有特别异样的地方。IE、Firefox、Chrome、Safari、Opera等浏览器一个都不能少，特别要提到的是Firefox，它的插件非常丰富，我们主要应用两款插件完成前端的调试工作，其他丰富的组件可以访问https://addons.mozilla.org/zh-CN/firefox/browse/type:7。
1. Firebug
Firebug在Firefox的插件中属于五星级的插件工具，它集合了查看HTML结构及样式、实时编辑等功能，是开发HTML、CSS、JavaScript的得力助手，我们可以利用它全面了解页面，可以对任何网页的CSS、HTML、JavaScript进行实时的编辑、调试和监控。如图1-12所示为Firebug的运行界面。
图1-12 Firebug运行界面
2. HttpWatch
HttpWatch是一个老牌的调试工具，支持与IE和Firefox的集成，通过工具可以看到整个页面交互的详细过程，见图1-13。
图1-13 HttpWatch页面视图
对某个URL请求的具体细节也可以一一概览，比如Header内容、Cookie内容、响应时间图、提交信息、流信息等，见图1-14。
图1-14 某次URL请求的Header信息
该工具同样还支持一些报告的生成与分析。这些强大的功能有助于开发人员进行性能分析与问题定位。
3. Yslow
Yslow是由Yahoo开发的一套网页评分插件，共有12条使用准则，使用它可以评估网页设计上的不足之处。它还提供了许多改进意见，Yslow与Firebug集成在一起，所以需要先安装Firebug插件才能使用。使用Firefox访问https://addons.mozilla.org/zh-CN/firefox/addon/5369，点击“添加到Firefox完成安装”，重启浏览器即可使用Yslow。打开右下角仪表盘图标，运行测试，Yslow将对网页进行分析，并给出评分及建议，见图1-15。
图1-15 Yslow的分析与建议
根据Yahoo提出的性能优化最佳实践法则，共分7大类、35条准则，如基于内容方面的10条为：
- 尽量减少HTTP请求
- 缓存Ajax
- 推迟加载
- 提前加载
- 减少DOM元素数量
- 使用域名划分页面内容
- 尽量减少iframe的数量
- 尽可能地减少DNS的查找
- 避免404错误
- 避免页面的重定向
4．Microsoft Expression Web SuperPreview
Expression Web SuperPreview支持开发人员在不同的浏览器中模拟呈现Web页以检测布局问题。SuperPreview既有独立的安装版本，也可以集成到Expression Web。如今的浏览器除了Firefox和IE，还有Safari、Opera和Chrome的跨平台版本，以及大量的手机浏览器。除此之外，这些浏览器又有多个版本，它们又有很多不同的呈现特性（如IE 6、IE 7和IE 8）。
当今的Web开发人员面临着如下困境：
- 大多浏览器的不同版本不能同时存在，应以新版本替换旧版本。所以，在同一台机器上不能同时安装IE 6和IE 7（除非使用虚拟机或者不稳定的注册表技巧）。
- 很多浏览器同时支持Mac和Windows。开发人员至少要在Mac Safari中进行测试，而Windows版的Safari中呈现的内容却有所不同。
- 浏览器的人体工学测试则更加糟糕。大多数开发人员要加载他们的网站到演示服务器上，而服务器上却运行着不同的浏览器，他们不得不在每一台机器上手动加载，然后在每台机器上对不同的浏览器进行比较。
SuperPreview的工作区页面见图1-16，整个页面非常简洁清晰，可以打开多个窗口来浏览同一个地址在不同浏览器中的显示效果。
图1-16 SuperPreview的工作区
以著名的门户网站为例，效果见图1-17。图1-17的左侧为IE 6的显示效果，右侧为IE 7的显示效果。看来该门户对IE6与IE7的支持都很不错，在这两个浏览器下都可以正常地显示页面。
图1-17 SuperPreview分别显示IE 6与IE 7的效果
不过精确到某个DIV的高度和宽度，IE 6与IE 7下显示的效果还是有显著区别的，通过层叠视图就可以看出（见图1-18）。
图1-18 SuperPreview的层叠视图效果
有了这样一款工具，相信可以很好地节约你解决IE各版本兼容性问题的时间。
1.4.4 辅助类工具
为了提高Web的性能，需要将脚本用样式文件压缩一，即减少文件的大小，将不必要的空格等去除，同时也可以将脚本中的变量等进行混淆。YUI Compressor是值得推荐的压缩工具，它的压缩比大约为50%，详细信息可以参考Yahoo开发者网络。
在进行CSS Sprites样式开发时，经常需要对Photoshop中制作的图片进行测算，比较麻烦。这时可以利用CSS Sprites样式生成工具快速地测算每张小图的位置，具体参考http://www.cssforest.org/blog。关于CSS Sprites的内容在以下章节中将详细描述。
Web中必不可少的就是颜色。碰到你喜欢的颜色，可又不知道它的值，该怎么办呢？除了使用Photoshop进行取色外，还可以使用Yahoo提供的取色软件（PickColor），既方便又快捷。除了取色，配色也是件麻烦的事情。如果没有好的配色方案，那么Adobe Kuler可以为你提供很多方案，还可以将完美的配色方案导入Photoshop中使用。
1.5 小结
作为一名前端技术人员，我们应该体会到众多前人为这万紫千红的互联网世界所付出的心血与汗水。我们所做的不只是将后端的数据展现在一个HTML页面之上，还应该正确地理解基于Web的每项技术，合理地串联它们间的关系，通过互联网为用户服务。前端开发不单纯是技术问题，要从思维和概念上对前端开发有全新的理解。
原文：http://hzbook.group.iteye.com/group/wiki/2333-UI-Design
web前端：引用@学明：形象比喻：我是一个建筑师，我可以把一张设计图变成一栋房子，我可以把一张网页设计图幻化成一张网页，用HTML做砖瓦，用CSS做油漆和墙纸把房子装修得漂漂亮亮，我还用JS把房子的门变成了自动门，在里头一个点击就可以打开空调，打开电视机，我设定了一些参数好让我每天回到家的时候，家里该运作的电器就都运作了，和设计图一模一样。我的房子不仅仅在IE上完美无暇的，在其他浏览器也是稳如泰山。
