网页设计经验谈:WEBJX收集常用的网页设计工具

文章简介:本人从事网页重构这一块,也有一些自己经常使用的工具,今天与大家分享一下网页教学网所用的工具,给大家做个参考,让有需要的人可以更有参考和选择的理由。我相信,每个人的选择都有他的理由的。以下的只是我的选择和排序。

 常常会听到群里或论坛里讨论哪个软件强大、哪个软件方便等等。其实这个无论是WEB前端开发还是WEB程序的开发,都离不开开发的工具,当然,现在 有不同的系统平台,对应不同系统平台的软件也有不少,每个人使用的平台、使用的习惯也不同,自然也就有不同的软件使用。由此也多了一个什么软件好用的说 法,但个人觉得,无论什么软件,适合自己就好,不需要过分的追求。俗话说:“工谷善其事,先必利其器。”一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣。

  本人从事网页重构这一块,也有一些自己经常使用的工具,今天与大家分享一下网页教学网所用的工具,给大家做个参考,让有需要的人可以更有参考和选择的理由。我相信,每个人的选择都有他的理由的。以下的只是我的选择和排序。

NO1、记事本

  相信接触电脑的人没有人不认识记事本的吧,没错,这个就是系统的自带的记事,不过本人没用过LINUX和APPLE的系统,不知里面是否也是自带了记事本的。这个记事本虽然很简陋,甚至可以用丑来形容,但是却是非常合心的小工具。

  有时候手头上没有任何的其他工具软件,这时候就可以用记事本来代劳了,直接在里面手写代码。当然,这个只是暂时性的代替,写代码还是有更好的工具的。

  记事本除了来用可以紧急替代,平时里还有其他作用的。有时候,我们想从网页上保存一些文字下来到WORD里面,直接复制就把HTML和相应的样式什么的都一并复制进来了,影响了美观,当然有经验的人知道可以采用“选择性粘贴”,但没经验的人是一下子复制进来后就不知怎样处理了,这时候可以先将复制的东西粘贴在记事本里,再从记事本里将文字复制到WORD里,这样就完全的将HTML的标签及样式完全的去掉了,成了完完全全的纯文本了。

NO2、EditPlus

  这个现在是我至爱的一个写代码的工具,不仅功能齐全,自定义程度高,程序文件还非常小,可绿色携带,配置可以移植,语法、模板都可根据自已的书法习惯来进行自定义,还可以定制自定义的着色等等优点,让我用上了就爱不离手了。无论是HTML/Javasctipr/CSS,还是/ASP/PHP/C/C++/Perl/JAVA等语言,基本都是通杀的,当然,我也只是基本用前三种语言而已。另外还有可以进行代码收缩、缩进、查看行数、列数等功能也非常的实用,更重要的有一个基本上是无限次数的撤消或重做的功能,可以上你在任意的时候都可以回到所需要的状态,一些文件比较等小功能还有待更加深入的挖掘。

  当然,这个软件也是有一些缺点的,例如,没有可视化功能,当然这个并不是在要可视化里面编辑,只是想可以实现在可视化里点击一下就能快速定位到代码部分,这样方便查找(哈哈,这个只是个人的一个想法而已)。还有就是不能智能代码收缩,只能根据代码的缩进量来进行判断,所以有时候收缩代码不太准确,特别是页面长、代码量非常大的时候,有时候要定位某个部分的代码找起来也比较费时。还有一个就是替换的功能试用了感觉不是那么智能和准确,明明输入准确的搜索要替换的条件,且眼睛也都定位到了相应的代码部分,但软件就是死活不认(呵呵,可能他也会有睁眼瞎的时候),搜索替换的时候,也非常的迅速,简直是“迅雷不及掩耳之势”,一下子全部都替换了还没反应过来,还要撤消一下看看是否执行了操作。

  当然虽然还有这些缺点,但这个工具安装程序才2M多一点,安装解压后也才不过3M左右,实在强大,缺点相对优点已经算是吹毛求疵了,哈哈,本人至爱。

  另外本人也根本自己的使用习惯,配了一个着色的方字案和相应的语言文件(包括了HTML和CSS的讲法),着色可看上面的图,具体的语法和模板请自行下载亲测。

NO3、FastStone Capture

  这个是一个辅助类的小工具,但是这个小工具虽然“麻省虽小,却也是五脏俱全”,非常的优秀,也可以绿色携带。这个小软件有非常多的功能,有各种各样方式的截图,录制屏幕、屏幕放大镜、屏幕尺、屏幕取色等等的功能,本人常用的就截图、屏幕尺、取色等功能,包括本博中的所有截图,基本上都是出自这个软件的。屏幕尺和取色工具可以在写页面的时候用来进行效果图的精确的查看和进行取色。非常得心和方便的小工具。

NO4、Topstyle

  这是一个写CSS的工具,有自动提示功能,当不想每个字母都自己来敲的时候,这个工具就可以派上用场了。工具是支持其他语言的,只不过我一直只用来写CSS。工具还有预览、针对不同的浏览器的检测等其他一大堆的功能,但本人基本不用的,只用一项就已足够了。

  此工具也有一些缺点,就是不支持自动换行,有时候一个类会写得很长,得拖动横向的滚动条到右边去看,很不方便,个人觉得这个很有必要进行优化。希望软件有做该软件汉化的人或其他的人看到可以向软件作者反映进行优化一下。软件是英文版的,因为本人使用的是汉化版的,所以对中文支持有些问题,部分文字会看不到(当然CSS不可能是中文的,是注释啦,如果有一天,样式也能用中文来写,那个时候就强悍了,呵呵),估计英文版的也会是这样情况,所以可以谅解、忽视。

NO5、Dreamveaver

  这个是一个功能非常强大的开发工具,在使用这么多的写代码的工具中,这个是最完善和强大的了,主流的语言都支持,需要有的功能也基本上全有了,这里就不再多说,相信开发的人都知道这个软件的强大了。其中个人最喜欢的就是智能收缩的,不会像EditPlus那边是根据缩进来进行收缩的,而是完全的做到了根据标签来进行自动关闭收缩,这个是非常有用的;另外一个,就是可以在视图编辑里点击相应的位置,切换到代码视图里就能快速定位到代码所在的地方,这个也是非常的好用的;还有一个就是智能的提示功能,会提示你写的标签不正确的时候会给出提示,或者代码变色,让你很容易的定位到相应出错的代码部分gmf有一个就是强大的搜索功能,可以对单文件、多文件、站点文件、目录文件夹进行查找来替换,这点是我使用过的工具中拥有最强悍的搜索功能的(我在幻想,要是EditPlus也有这四个功能该多强大啊,哈哈)。其他还有数不清的功能大家可以自行继续深入发掘,哈哈。总的来说,Dreamveaver算是一个比较强大和完善的工具了。无论是新手老手,相应都不会陌生的。

  当然,作为一个如此优秀的工具,该怎么使用也是非常值得一提的。老手当然基本都是用代码模式的,视图模式一般只是用来进来点击定位到代码位置的,这个不用提了;新手更多时候使用的是视图或设计模式,因为通过直接点击和选择就能实现一些页面的效果,但这样是非常不利于学习语言的,只知表面不知其中,个人建议一定要切换到代码模式里一个代码一个代码的敲(当然有代码提示已经省掉了我们很多的敲打了),这样学习起来才会有效果,绝对不要相信那个什么所谓得的教程或书本来点击这里那里的来“插入”来完成网页,这完全是误人子弟的,会让你走很多弯路,到最后来发现,自己会的只是使用这个软件而已,而语言还是永远没有学会。这是本人亲身的体验,希望各位新同学引以为戒。

NO6、FireWork

  其实这个和PhotoShop的功能上都是非常相似的,FireWork本来是出自Macromedia公司的,后来给ADOBE公司收购了,并且和PhotoShop一同出面在Master Collection(开发套装)中,会让人产生一些疑惑,为什么都是同样的图片处理软件,不整合到一个软件中呢?其实这两个软件虽然相似,但功能和侧重是有所不同的,ADOBE公司不整合在一起肯定是有他的道理的,具体可以自得去深入了解一下,本文重点不在此。

  此工具本人最常用的也就是切图用来输出图片是最方便的,可以很方便的对图片进行各种规格的输出,是用得最顺手的一个切图工具。其他的功能基本很少用甚至没用过,这里就不再多说了。

NO8、PhotoShop

  PhotoShop这个大名鼎鼎的工具真的是让人如雷贯耳,现在基本上涉及设计的各个行业都在使用,其中的强大自然是不言而喻。PhotoShop可以让张飞变美女,可以让各种各样生活中的不完美在PhotoShop中变得完美,让各种幻想都可以变成现实,其鬼斧神工之效确实是无人能敌。

  当然作为前端开发的我也不可能会错过这个软件,但由于本人不擅长设计,所以用得马马虎虎,基本上是只用于一些图片处理和优化输出等等。具体可以查阅一下我写过的文章《前端工程师新手必读》图片优化部分,里面的一些观点也许有错误,现在也有在求真当中,各位有需要的自行深入研究。

  FireWork和PhotoShop现在虽然同出一家,但里面的一些区别至今我仍无法搞清楚的。如我的另外一篇文章里说到的一个观点:PNG24是否支持透明度?FireWork输出的PNG24和PhotoShop输出的PNG24都不透明,而PhotoShop中输出的PNG24+透明为什么在FireWork和别的看图软件显示的都是PNG32。这个问题困扰了我很久,问了一些业界的包括做设计的也搞不清楚这个问题,所以打算向ADOBE公司里咨询一下。具体本人也在整理这方面的资料,有结果后会再跟大家公布。

  另外,ADOBE公司的这些软件都很强大很优秀,但是也有有一个很大的弱点,就是软件非常的庞大,一个软件安装包至少也有好几百M,大的上好几个G,我的ADOBE Master Collection CS5(开发套装)中,光镜像文件两个就有13G了,所以安装也要花上半天的时间,机器配置不好的话跑起来更卡,特别是切图写代码的时候,开这两三个软件就已经开始跑得吃力了,无奈公司里的电脑只有2G的内存,集显,有时候跑得那个卡啊。

NO8、Firefox、Chroom、Mathon3

  Firefox、Chroom、Mathon3这三个基本成为主要的浏览器,当然还有万恶的系统原生IE6在机器上用来测试,利用这些工具配合页面的开发和调试非常有用,HTML、Javascript、DOM、网络情况什么的都不在话下,如果你还没有加入到WEB标准浏览器行列中来的话那就赶快来吧。当然测试的话仅仅是除了这些浏览器是不够的,反正市面上的主流浏览器都装上一个,测试时你会有不同的发现,什么Safari、Opera、世界之窗、搜狗、360………我都忘了装了多少个了。另外针对不同的版本IE系统,用虚拟机来装了不同的系统平台上的不同的版本的原生浏览器来备测,有时候也是需要的,有时候同一版本的浏览器在不同的系统平台上也会有不同的表现的,哈哈,在这里简直就是一个浏览器收集之家了。

NO9、MarkMan

  一款很有爱的工具,和作者宣传的口号一样很有爱,可以进行坐标、尺寸、颜色、文字等标注,支持保存文件二次编辑等非常友好的功能,很方便很喜欢。不过作者辛辛苦苦开发了一年我作品一夜之间就被TX的某个部门山寨了,还闹得挺大的,作为原创,支持!

  软件已整理收藏了,有需要的朋友也可以下载收藏。

  以上是本人经常使用的一些关于WEB前端开发的工具,另外的还有一些其他的工具不太常用的就不介绍了,以上的这些工具其实都有很多的替代方案,不要一味追求新、强大,新且强大的软件你的机器还不一定跑得起来,所以,我的一个选择原则:适合、顺手就好。

时间: 2024-09-08 05:53:10

网页设计经验谈:WEBJX收集常用的网页设计工具的相关文章

网页设计参考:WEBJX收集绚丽多彩的网页设计案例

文章描述:国外20个绚丽多彩的网页设计作品赏. 颜色总是能吸引眼球,让东西看起来更加充满活力和吸引力,这一点同样适用于网页设计,有时候颜色可以完全改观一个网站的外观,而如何建立一个有效的色彩搭配对设计者们来说是很有挑战性的.本文就将展示出20个最新的绚丽多彩的网页设计作品,国外设计者们用丰富的色彩为这些网站创建了一个富有吸引力的外观. Charlie Brown Jr Captain day light kids tate Emigre Image festival tsto [1] [2] [

韩国网站设计参考:WEBJX收集耳目一新视觉感受网站设计案例

文章描述:20个漂亮独特的韩国网站设计范例. 地域上的多样性导致了文化差异,在涉及国外网站设计欣赏时,我们多是展示欧美地区的设计,实际上亚洲地区的设计风格和设计师在网站设计中习惯使用的模式还是与之有差异. 随着韩国国力的提升,近十年来,在亚洲范围内看,韩国的设计在许多方面都在引领着潮流.本文就列出了20个韩国网站,从中可见在网站设计方面,韩国秉承了其独特的风格特点,完美精致,给人舒适感,设计风格能让人看后有耳目一新的视觉感受. cubedbox.co.kr iSKY KB Bank mid.ll

PS霓虹字设计:电影、店铺常用的字体设计

  霓虹字设计|||电影.店铺常用的字体设计!介绍了使用烟雾笔刷和图层样式功能制作一款霓虹灯字体特效,值得借鉴学习 分类: PS文字教程

WEBJX收集iphone手机网站设计实例

随着手机上网的普遍,出现越来越多的手机网站,虽然手机的屏幕并不大,不过手机网站也有各自独特的设计风格,本文中的这些网站主要是针对iphone手机的网页,这些网站类型多种多样,当然我们可能无法以普通网页的标准来评判这些网站的设计,不过从中我们也可以看出一些关于手机网站设计的特点,本文最后包含了一些iphone手机网站的开发工具. 1. 新闻/娱乐类 Sevnth Sin 独特的导航菜单为这个网站增添了非凡的吸引力,绝佳的理念和设计.   Blip.tv 清新简介的版式和配色,非常契合网站的定位.

WEBJX收集良好的用户界面设计网站

 WEBJX收集了20个良好的用户界面设计网站,希望做网站设计的朋友能从中得到灵感和体会. 1. Ballpark 2. Want Stream 3. Mozilla Songbird 4. Amidst 5. Concierge Live 6. Fluid Tumblr Theme 7. Seen It Yet 8. Episodic 9. Send Space 10. Answer Me

CSS教程和jQuery教程:WEBJX收集国外新手网页设计教程

文章简介:随着CSS3的流行,现在已经有很多利用CSS3制作的网站,CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易.而jQuery作为最热门的Ajax框架,在互联网网站到处都有jQuery的身影.在本文中,就将为新手网页设计师分享29个新鲜实用的jQuery和CSS3教程,希望能 随着CSS3的流行,现在已经有很多利用CSS3制作的网站,CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易.而jQuery作为最热门的Ajax框架,在互联网网站到处都有jQuery

网页设计视觉体验:WEBJX收集国外滚动效果网页设计案例

文章描述:网页设计中30个惊人的滚动效果. 近些年来,用户对视觉体验的要求不断提高,而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求.滚动效果被越来越多的国外网站所应用,成为网页设计的热点趋势.在本文中,将为你展示网页设计中30个惊人的滚动效果,厌倦了千篇一律,呆板网页设计的你也不妨一试. Peter Pearson Campaign Monitor Buero-Buero Lewers Siebennull Kalendiar [1] [2] [3] [4] [5]  下一页

网页设计参考:WEBJX收集网页视频播放器的界面设计案例

文章描述:20个视频播放器界面欣赏及点评. 网页设计中非常细节的东西,比如就一个描边,有时就造成了用户心理感受上的差别,进而影响用户的使用偏好,直至对整个设计的成功与否以及作品的商业价值产生非常大的影响.类似于"千里之堤毁于蚁穴"和"蝴蝶效应"的感觉.夸大其词吗?绝对不!细节的力量我认为在网页设计中有着无穷的魅力.认真想想那些你个人认为优秀的设计作品,其中是什么东西打动了你?真的很多时候就是一种描述不出来的颜色,一些1像素的高光,或者是一种质感. 例如下面的这20个

网页设计参考:WEBJX收集国外家居装修网站设计案例

文章描述:26个家居装修类网站设计佳作赏. 受传统观念的影响以及现在房价的飞涨,很多中国人毕一生之精力只为一房,花这么大代价买好房后,装修自然不能马虎,于是装修建材市场随之不断升温,而网络是一个很好的宣传平台,家居装修类网站自然也越来越多.对于设计者们来说,国外一些优秀的网站设计通常都能有助于激发创作灵感,在本文中将分享26个家居装修类网站设计佳作,以供欣赏借鉴. AMANDA NISBET 3RINGS REMODILESTA BEYOND FURNITURE INTERIOR DESIGN