Web Design Experience: WEBJX collection of common web design tools

Article Introduction: I am engaged in the Web page refactoring this piece, there are some of their own often used tools, today with you to share the Web page teaching tool used, to make a reference for everyone, so that people can have the need for reference and choice of reasons. I believe that everyone's choice has his reasons. The following is just my selection and sorting.

It is often heard in groups or forums about which software is powerful, which software is convenient, and so on. In fact, whether the Web front-end development or the development of web programs, are inseparable from the development of tools, of course, there are different systems platform, the corresponding platform for different systems have a lot of software, everyone use the platform, the use of the habit is also different, naturally there are different software use. This also has a lot of what software easy to say, but personally feel, no matter what software, suitable for their own good, do not need excessive pursuit. As the saying goes: "The work of the Valley good things, first will benefit its device." "A tool that can be used conveniently, it is really able to bring convenience to our development, more importantly, it will let us enjoy the fun of tool development process."

I am engaged in the Web page refactoring this piece, there are some of their own often used tools, today with you to share the Web page teaching tool used, to make a reference for everyone, so that people can have the need for reference and choice of reasons. I believe that everyone's choice has his reasons. The following is just my selection and sorting.

NO1, Notepad

Believe that people who touch the computer no one does not know Notepad, yes, this is the system's own notes, but I did not use Linux and Apple's system, I do not know if it is also a notebook. Although this notebook is very simple, even can be used to describe the ugly, but it is a very small tool.

Sometimes you don't have any other tools on hand, you can use Notepad to do it, and write the code directly inside. Of course, this is only a temporary substitution, write code or have a better tool.

Notepad in addition to use can be an emergency replacement, usually there are other functions. Sometimes we want to save some text from the Web page and come down to Word, direct copy of the HTML and the corresponding style of what are copied in, the impact of the beautiful, of course, experienced people know that you can use "selective pasting", but inexperienced people are all of a sudden copy come in and do not know how to deal with, At this time you can paste the copied things in Notepad, and then copy the text from Notepad to Word, so that completely the HTML tag and style completely removed, became completely pure text.

NO2, EditPlus

This is my favorite now. A code-writing tool that is not only full-featured, a high degree of customization, program files are very small, can be green to carry, configuration can be transplanted, grammar, templates can be customized according to their own calligraphy habits, but also customized custom coloring and so on, so that I used on the love does not leave the hand. Whether it is html/javasctipr/css, or/asp/php/c/c++/perl/java and other languages, the basic is to kill, of course, I was only the basic use of the first three languages. There is also the code to shrink, indent, view the number of lines, columns and other functions are also very practical, more importantly, there is a basically unlimited number of undo or redo function, you can at any time can return to the required state, some file comparison and other small functions still need to dig deeper.

Of course, this software is also some shortcomings, for example, there is no visualization, of course, this is not to be visualized inside the editor, just want to be able to achieve in the visualization of the click can quickly navigate to the Code section, so easy to find (haha, this is just an individual idea). There is a code can not shrink, can only be based on the indentation of the code to judge, so sometimes the contraction code is not very accurate, especially the length of the page, the amount of code is very large, sometimes to locate a part of the code to find a more time-consuming. There is also a function of the replacement to try out the feeling is not so intelligent and accurate, clearly enter the exact search to replace the conditions, and the eyes are also positioned to the corresponding Code section, but the software is dead or alive do not recognize (oh, maybe he will have blind time), search replacement, also very quickly, is simply " The flash of the potential ", all of a sudden replaced all have not responded, but also to undo to see if the operation was performed.

Of course, although there are these shortcomings, but this tool to install the program is only a little more than 2M, after the installation of decompression is only 3M or so, really strong, the shortcomings of relative advantages have been regarded as fastidious, haha, I love.

In addition, I also use their own habits, with a coloring of the square word case and the corresponding language files (including the text of HTML and CSS), coloring to see the above diagram, the specific syntax and templates please download their own test.

NO3, FastStone Capture

This is a helper class gadget, but this gadget, although "Massachusetts is small, but also spite", very good, but also green to carry. This small software has very many functions, there are all kinds of screenshots, recording screen, screen magnifier, screen ruler, screen color and so on functions, I commonly used in the screenshot, screen ruler, color and other functions, including this Bo all screenshots, basically from this software. The screen ruler and the color-taking tool can be used for the accurate view and color of the effect graph when writing the page. Very heart and handy gadget.

NO4, TopStyle

This is a tool to write CSS, there is automatic prompting function, when you do not want each letter to knock, this tool can be used. Tools are supported in other languages, except that I've been writing CSS all the time. Tools also have a preview, for different browser detection and other a lot of functions, but I basically do not use, only one item is enough.

This tool also has some drawbacks, that is, do not support automatic line wrapping, sometimes a class will be written very long, you have to drag the horizontal scroll bar to the right to see, very inconvenient, personally feel that this is necessary to optimize. Hope that the software has to do the Chinese people or other people see the software can be reflected to the author of the optimization. The software is in the English version, because I use the Chinese version, so there are some problems with Chinese support, some text will not see (of course, CSS can not be Chinese, is a note, if one day, the style can also be written in Chinese, then tough, hehe), estimated English version will be such a situation, so you can understand, Ignore.

NO5, Dreamveaver

This is a very powerful development tool, in the use of so many of the tools to write code, this is the most perfect and powerful, the mainstream language support, the need for some of the functions are basically all there, there is no longer said, believe that the development of the people know the powerful software. One of the personal favorite is the smart shrink, not like EditPlus side is based on shrinking, but completely done according to the label to automatically close the contraction, this is very useful; the other is to click on the location in the View editor, Switching to Code view allows you to quickly navigate to the location of the code, this is also very easy to use; There is also a smart prompt function, will prompt you write the label is not correct when will give a hint, or code color, so that you can easily locate the corresponding error code section GMF has a powerful search function, Can be a single file, multiple files, site files, directory folders to find to replace, this is the tool I used to have the most powerful search function (I am in the fantasy, if EditPlus also have these four functions how strong ah, haha). There are a myriad of other features that you can continue to dig, haha. Overall, Dreamveaver is a more powerful and sophisticated tool. Whether it is a novice veteran, the corresponding will not be unfamiliar.

Of course, as such a good tool, how to use it is also very worth mentioning. Veteran of course basically is in code mode, view mode is usually used to come in to click on the location of the code, this is not to mention, the novice more time to use the view or design mode, because through direct click and choose to achieve some of the results of the page, but this is very detrimental to learn the language, only know that the surface does not know, Personal advice Be sure to switch to code mode a code for a code knock (of course there are code hints that have skipped out on a lot of our banging), this study will have an effect, absolutely do not believe that what the so-called tutorial or book was clicked here to "insert" to complete the page, this is completely fraught, Will let you take a lot of detours, to the most later found that they will only use this software, and language is never learned. This is my personal experience, I hope you new students warning.

NO6, Firework

In fact, this and Photoshop are very similar to the function, firework was originally from the Macromedia Company, and later acquired the Adobe Company, and with Photoshop in the Master Collection (Development Kit), Can make people have some doubts, why are the same image processing software, not integrated into a software? In fact, although the two software similar, but the function and focus is different, Adobe does not integrate together certainly has his reason, concrete can complacent to in-depth understanding, this article focuses not here.

This tool I most commonly used is the Chettu used to output pictures is the most convenient, can be very convenient to the picture of various specifications of the output, is used most conveniently a cutting tool. Other functions are rarely used, or even useless, and there is no more to say.

NO8, PhotoShop

Photoshop This famous tool is really let people thunderclap piercing, now basically involves the design of various industries are in use, the powerful nature is self-evident. Photoshop can make Zhang Fei beautiful, can let a variety of life in the imperfect in Photoshop become perfect, let all kinds of fantasy can become reality, the effect of its uncanny workmanship is indeed no one can enemy.

Of course, as a front-end development I can not miss this software, but because I am not good at design, so use is so-so, basically only for some picture processing and optimization output and so on. Specific can look up the article I have written, "front-end engineer novice must read" Picture optimization part, some of the views may be wrong, now also in the truth, you have the need for in-depth research.

Firework and Photoshop now have a family, but there are some differences that I still can't figure out. As I said in my other article: does PNG24 support transparency? The PNG24 of the firework output and the PNG24 of the Photoshop output are opaque, and the png24+ transparency of the output in Photoshop is firework in the PNG32 and other image-viewing software. This problem has plagued me for a long time, asked some of the industry, including the design and do not know the problem, so I would like to consult the Adobe Company. Specifically I also in the collation of this information, the results will be announced with you.

In addition, Adobe's software is very powerful and excellent, but there is also a big weakness is that the software is very large, a software installation package at least hundreds of m, a good number of G, my Adobe Master Collection CS5 (Development Kit), Optical image files Two have 13G, so the installation will take half time, machine configuration is not good words to run up more cards, especially when cutting diagram writing code, open these two or three software has started to run hard, but the company's computer only 2G of memory, set show, sometimes run that card ah.

NO8, Firefox, Chroom, Mathon3

Firefox, Chroom, Mathon3 these three basic browsers, and of course, the evil system native IE6 on the machine for testing, using these tools with the development and debugging of the page is very useful, HTML, Javascript, DOM, It's nothing to do with the Internet, if you haven't joined the list of Web Standard browsers, then hurry up. Of course, the test is just not enough in addition to these browsers, anyway, the main market browser installed on a, test you will have different discoveries, what Safari, Opera, the window of the world, Sogou ... I've forgotten how many have been installed. In addition, for different versions of IE systems, using virtual machines to install a different version of the system platform of the original browser to prepare the test, sometimes also need, sometimes the same version of the browser on different system platform will also have different performance, haha, here is simply a browser collection home.

NO9, Markman

A very loving tool, and the author of the slogan of the same love, can be coordinates, size, color, text and other annotations, supporting the preservation of the file two times edit and so very friendly functions, very convenient to like. However, the author worked hard to develop a year my work was one night by the TX of a department of the cottage, but also noisy very large, as original, support!

The software has been sorted and collected, and friends who need it can download it.

The above is I often use some of the Web front-end development tools, in addition, there are some other tools that are not commonly used are not introduced, these tools in fact there are many alternatives, do not blindly pursue new, powerful, new and powerful software your machine is not necessarily running up, so, One of my choice principle: fit, good.