After posting the Building your first website using a free website template tutorial, where I used the Notepad++ code editor to turn the Variant Duo template into a three-page website, I got several questions and requests about how the same process would work if I would use a visual editor instead of a code editor. One of the points with the template was to explain the concept of code editing, and to show that learning (X)HTML can be done in small steps if wanted. But as with all kinds of projects, it is a matter of personal preference if you want to work with the code or with a visual editor. I prefer working with the code directly since it gives me a better overview and helps me keep the code valid and optimized. As mentioned in the tutorial, visual editors are not always outputting good code – and there is a lot to gain from following web standards and keeping the code as simple as possible.
But there are of course good visual editors available as well, and since several readers asked specifically for tips about Adobe Dreamweaver, I decided to take a closer look at how the current version, Dreamweaver CS5, works. I am currently experimenting with it to see how the visual editor in Dreamweaver handles the code output, and I am planning to write a tutorial post (or possibly a series of posts) about using Dreamweaver to turn a template into a website. From what I have seen so far it looks really promising, but as a commercial editor (priced $399 on adobe.com), it may not be a good first editor for beginners. Still, it is a widely used editor so I will write more about it as soon as I have got more familiar with it.
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.