网页设计经验谈:常用的网页设计工具的收集介绍
网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设
常常会听到群里或论坛里讨论哪个软件强大、哪个软件方便等等。其实这个无论是WEB前端开发还是WEB程序的开发，都离不开开发的工具，当然，现在 有不同的系统平台，对应不同系统平台的软件也有不少，每个人使用的平台、使用的习惯也不同，自然也就有不同的软件使用。由此也多了一个什么软件好用的说 法，但个人觉得，无论什么软件，适合自己就好，不需要过分的追求。俗话说：“工谷善其事，先必利其器。”一个用得顺手的工具，确实能为我们的开发带来方 便，更重要的是会让我们更加享受工具开发过程中所带来的乐趣。 本人从事网页重构这一块，也有一些自己经常使用的工具，今天与大家分享一下狼蚁SEO所用的工具，给大家做个参考，让有需要的人可以更有参考和选择的理由。我相信，每个人的选择都有他的理由的。以下的只是我的选择和排序。
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公司不整合在一起肯定是有他的道理的，具体可以自得去深入了解一下，本文重点不在此。
此工具本人最常用的也就是切图用来输出图片是最方便的，可以很方便的对图片进行各种规格的输出，是用得最顺手的一个切图工具。其他的功能基本很少用甚至没用过，这里就不再多说了。
NO7、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前端开发的工具，另外的还有一些其他的工具不太常用的就不介绍了，以上的这些工具其实都有很多的替代方案，不要一味追求新、强大，新且强大的软件你的机器还不一定跑得起来，所以，我的一个选择原则：适合、顺手就好。
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公司不整合在一起肯定是有他的道理的，具体可以自得去深入了解一下，本文重点不在此。
此工具本人最常用的也就是切图用来输出图片是最方便的，可以很方便的对图片进行各种规格的输出，是用得最顺手的一个切图工具。其他的功能基本很少用甚至没用过，这里就不再多说了。
NO7、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前端开发的工具，另外的还有一些其他的工具不太常用的就不介绍了，以上的这些工具其实都有很多的替代方案，不要一味追求新、强大，新且强大的软件你的机器还不一定跑得起来，所以，我的一个选择原则：适合、顺手就好。