WEB前端开发必备的辅助软件工具

转自:http://www.wpbars.com/web-tool/

转自:http://zhidao.baidu.com/question/101406399.html

转自:http://www.iteye.com/news/25137

 

前端开发或者说“网页制作”、“前端制作”、“网站重构”,这样的一个职位的主要职责是与交互设计师、视觉设计师协作,根据设计图用HTML、CSS、JS完成页面制作。同时,在此基础之上,对完成的页面进行维护和对网站前端性能做相应的优化。今天介绍一些WEB前端开发必备 工具,以便大家参考使用,大家有什么好的工具,可以留言与厉害分享。

1、Adobe Dreamweaver

Adobe Dreamweaver 是建立 Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS 的设计的领先支持到手工编码功能,Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序,从而使用户能连接到数据库、Web 服务和旧式系统。

下载:http://www.xdowns.com/soft/1/95/2008/Soft_48689.html

2、EditPlus

一套功能强大,可取代记事本的文字编辑器,拥有无限制的Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能,就是它有监视剪贴簿的功能,能够同步于剪贴簿自动将文字贴进EditPlus的编辑窗口中,让你省去做贴上的步骤。另外它也是一个好用的HTML编辑器,除了可以颜色标记HTML Tag (同时支持C/C++、Perl、Java)外,还内建完整的HTML和CSS1指令功能,对于习惯用记事本编辑网页的朋友,它可帮你节省一半以上的网页制作时间,若你有安装IE 3.0以上版本,它还会结合IE浏览器于EditPlus窗口中,让你可以直接预览编辑好的网页(若没安装IE,也可指定浏览器路径)。

下载:http://www.editplus.com/

3、Aptana Studio

Aptana Studio 是一个基于Eclipse的集成式Web开发环境,其最广为人知的是它非常强悍的JavaScript 编辑器和调试器。Aptana Studio 可以支持多种AJAX和JavaScript工具箱,包括JavaScript编辑和调试。当然对XHTML和CSS的支持也是完美的。所以,对于Web2.0应用开发来说,它可以说是最全面,最强大的开发工具了!另外,Aptana Studio不仅可以作为独立的程序运行,而且还可以作为Eclipse插件使用。所以,如果您已经安装了Eclipse的话,就可以将Aptana作为插件直接安装到您的Eclipse环境中。

下载:http://www.aptana.org/products/studio3

4、Firebug

Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。要查阅文档、截图和论坛请访问Firebug的网站:

下载:http://www.getfirebug.com

5、HttpWatch

强大的网页数据分析工具.集成在浏览器的工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功能.报告输出。

下载:http://www.httpwatch.com/

6、JS公共类库

jQuery是一个快速简洁的JavaScript库,简化了HTML文档遍历网络发展迅速,事件处理,动画和Ajax交互。 jQuery是为了改变你编写JavaScript。
下载: http://jquery.com/
Prototype是一个JavaScript框架,旨在减轻动态网络应用开发。
具有独特的,易于使用的工具为类驱动的开发和最好的Ajax库周围,原型是迅速成为首选的网络应用程序开发代码库无处不在。

 

开发一个优秀的网站并非易事,一个面面俱到并且美观的网站,即使对于经验丰富的Web开发者而言也是项艰巨的任务。在那之前您必须认识到当前的趋势及标准,并确定如何将这些都纳入您的设计之中。

幸运的是,现在有很多免费的工具可供使用,以帮助您提高效率,使得工作更有效率。以下这20个实用WEB辅助开发设计工具对于开发者而言无疑都会从中受益。

Typetester

Typetester是在线比较不同的文字和文字属性在给定的文本里显示效果的应用。其主要作用是使网页设计师的生活更轻松,快速方便的比较不同的字体视觉。

pForm

使用这款免费易用的工具在几秒钟内创建php表单。如果你需要更多的功能,你可以注意他的父项目MachForm或者更棒的替代品wufoo和formspring(这两个版本提供有限的免费和付费高级版)。

ColourLovers

为色彩爱好者而建立的国际型站点。你能搜索网站的调色板,使用在项目上或者创建新的可被评价的调色板。对灵感或者设计理念的批判很有好。

Firebug

Firebug 与Firefox集成,将大量丰富的网页开发工具引到你指边。浏览的时候,你就可以实时在任何的网页上进行编辑,调试,和检测css,html和JavaScript。这可能是一个最为广泛使用的Web开发工具了。如果你没有他,立刻去下一个去。

HTML Entity Character Lookup

假如你需要知道如何在你的网页上显示商标符号,那么这款工具恰恰可以帮助你。HTML实体查询搜索HTML实体匹配的搜索特性建立在字符看起来怎样 的基础上的,例如,字母“ C ”将匹配©和¢实体,因为他们看起来差不多。这确实是你需要尝试了解他是怎样有用的工具。(MAC用户也可以作为仪表板部件使用)。

960 Grid System

960网格系统是为了简化Web开发流程,提供常用尺寸,基于宽度960px。这里两个变种,12和16列,可单独使用也可以协作使用。全面赏析此框架

Em Calculator

Em Calculator是一个小JavaScript工具,它可以让您输入一个像素大小并显示相应的EM值。这个工具非常易于使用和便捷的快速参考。

Browser Shots

您可以在约100名不同的浏览器的4个不同的平台中查看您网站,以确定最终的跨浏览器的支持。鉴于目前存在的许多不同类型的配置,重要的是要确保您的网站看起来更好,更可能的支持更多的平台。

Icon Finder

Iconfinder为Web设计者和开发者运用简单有效的方式提供高质量的图标。你只需要在搜索框中键入一个关键字,Iconfinder将会给你带来美丽的图标,你可以自由的使用。

WhatTheFont

假如你想之你最喜欢的blog使用的什么字体,这个工具能帮到你。仅需要上传一张字体的图片,此工具就可以尽可能的匹配正确的字体。如果你宁可相信一个真正的人,WhatTheFont论坛的资源是一个很好选择。

MeasureIt

很棒的Firefox插件,绘出一把尺子获得任何内容网页上像素的宽度和高度。

ColorZilla

你可以使用ColorZilla获取浏览器上任何一点的颜色。快速校对颜色粘帖到另一个程序中,你可以放大你正在查看的网页大小,测量网页上任意两点间的距离。

Pingdom

Pingdom加载完整的HTML网页,包括所有的对象(图像,CSS,JavaScripts,rss,Flash和帧/框架) 。它模仿是在页面在Web浏览器中加载的方式,然后使用很不错的视觉时间条显示每个元素的家寨时间。这可能对尝试调高网闸你的效率十分的有用。

Test Everything

大体的测试网站所有东西。100个不同的校验器和测试,所有都舒适的在一个应用程序中。节省网站开发测试阶段的大量的时间。

CSS Sprite Generator

Sprites可以通过减少HTTP请求数提高网站速度,因此变得越来越受欢迎。使用他们,需要更大的远见和规划,从而增加了使用他们的难度。这个 令人惊奇的工具允许上传图片压缩包,然后将它们合并为一个sprite,一旦sprite被创建,它会创建一份你需要使用sprite的CSS,免费完整 下载使用。

Web Developer Toolbar

一个非常有的Firefox插件,提供了很多web开发人员日常基础工具,快速验证XHTML或检查HTTP头信息。

Domainr

有很多工具可以告诉你某个域名是不是注册了。Domainr除了帮助查询你需要的,而且还尝试建立更值得使用的名字。Domainr帮助您探测整个 域名空间,超出了无处不在的和拥挤的.com, .net 与.org的限制。借助jish.nu,burri.to和del.icio.us的灵感,当你想不到独特的域名的时候这个工具就可以派上了用场了。

Font Burner

Font Burner是免费在线工具,可以搜多超过1000种字体。一旦你找到喜欢的字体,该工具会提供一小段代码,让你在自己的网站上免费使用字体。不论用户是否安装此字体,字体都将在每部电脑上显示。如果你想知道自己到底喜欢哪款字体,请参考:史上最漂亮的100种字体

Smush.It

Smush.It是一个简洁的非失真图像优化应用工具,帮助你压缩图片。

 

 

优秀的工具,可以使你的开发工作事半功倍,帮助你创建出高品质的Web应用。

本文整理了16款重要的Web开发工具,涵盖CSS、JavaScript、图像优化和其他方面的Web开发工作,希望对你的开发工作能有所帮助。

一、CSS工具

1.  Simpless

这是一个免费的离线LESS代码编译器。如果你使用LESS,这是一个伟大的工具,能够自动检测代码变化,并编译它。可在Mac、Windows和Linux平台上使用。



2.  CSSWrap

一个很酷的CSS文本路径生成工具。



3.  LayerStyles

不想去记新的CSS3特性和前缀?该工具使用类似于Photoshop图层样式的界面,让你轻松配置阴影、背景、边框和边界半径。



4.  BearCSS

该工具可以根据上传的HTML文档,采集其中所使用的HTML元素,来生成CSS模板。



二、JavaScript工具

5.  Bookmarkleter

该工具可以将你的JavaScript代码转换成一个小书签,帮助你进行代码压缩和URL编码。



6.  JSLint

这是一个JavaScript调试工具。可以查找代码中的潜在问题,并返回一条消息,告诉你问题以及位置。



7.  ShowIF

这是一个简单的if...else工具,允许用户设置基于客户端环境(浏览器、操作系统、分辨率等)的条件,如果条件匹配则执行指定的动作。



三、图像优化工具

8.  JPEG Mini

在保持JPEG图片原有品质和格式的情况下,使图片大小减少为原来的1/5。



9.  PunyPNG

该工具可以大大降低图像文件的大小,且没有任何质量损失。



10.  SpritePad

一个快速、用户友好的在线CSS sprite生成器,支持图像拖拽,并可以生成你需要的CSS代码。



11.  SpriteMe

该工具以一种不同的方式来创建CSS sprite。这是一个书签,可以检测你网站中的图像,并相应地进行CSS sprite。



四、其他工具

12.  Browsers

实用的浏览器沙箱。你可以运行任何浏览器,而无需将它们安装到你的电脑中。目前只支持Windows平台。



13.  SpurApp

该工具使用不同的方法来测试页面的可用性和布局,利用的技术包括灰度、交叉点、间隔、对比、模糊、镜像等,为你展示你可能会忽略的设计缺陷。



14.  Pingdom

用于测试网站的加载时间,并分析,帮助你找出瓶颈。



15.  Loads.in

另一款计算网站加载时间的工具。



16.  HTML5 Test

测试浏览器对HTML5标准和规范的支持情况。



 

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值