Simple WYSIWYG (What You See Is What You Get) web design programs make creating basic sites as easy as using a word processor.
The
next step up combines a WYSIWYG approach with more detailed low-level
control of what you're doing, very useful when you're looking to create a
more impressive site (although you may have to spend some time learning
the basics).
There are plenty of high level applications aimed at
the more experienced users, who like to be able to focus on the HTML,
CSS or scripting code.
And of course you may also need tools to create your graphics, analyze the finished site and diagnose any problems.
Whatever
you're looking for, though, we've found a free tool which can help -
just keep reading to discover our pick of the best free software for web
design.
1. CoffeeCup Free HTML Editor
CoffeeCup Free HTML Editor is the free version of a commercial product, and so missing a few tools (CSS menu design, FTP upload and so on).
If
you're a beginner, though, this probably won't matter too much. You can
use the Open From Web option to open an existing web page, for
instance, and tweak this to add your own content.
There
are plenty of powerful editing tools, a local Help file to walk you
through the more complicated parts, and you can also upload your page to
CoffeeCup's S-Drive platform, where it will host it for free.
------------------------------------------------------------------------------------------------
2. Notepad++
Notepad++
is an amazingly powerful source code editor with a vast number of
features. Syntax highlighting makes it immediately easier to read and
understand your code, for instance.
Code folding allows you to
collapse some areas while you focus on others. Auto-completion helps you
enter code more quickly (and accurately).
There's
also a powerful search tool, easy document navigation, bookmarking,
macro support, and more, all of which is presented in a highly
configurable, easy-to-use interface. Go grab a copy immediately.
------------------------------------------------------------------------------------------------
3. PageBreeze
Experienced web designers won't be impressed by the PageBreeze
- it's based on old technology, and distinctly short of features - but
if you're just looking to create something very simple then it's a
different story.
This WYSIWYG editor comes with simple templates to help you get started (they're fairly ugly, but you can add your own later).
You
can add links, images, tables and forms in a click or two. It's easy to
see and edit all your site pages, and when you're done a built-in FTP
client puts your work online. So while the end results may be basic, the
program's simplicity makes it worth a look for the novice.
------------------------------------------------------------------------------------------------
4. Firebug
You've designed your website, but it doesn't quite look or work as you'd expect - and that's where Firebug
comes in. This powerful Firefox extension helps you to view HTML and
CSS code; adjust your styles and see the results immediately; understand
your page layouts; debug and log JavaScript; manage cookies, analyze
page load times, examine error messages and more.
Clearly
there's a lot of power here, but Firebug isn't just for web experts. At
first you might only use it for a few basic things, just viewing code
perhaps. It'll still be very useful, though, and you can begin to
explore other functions at your own pace.
------------------------------------------------------------------------------------------------
5. Bluefish Editor
Bluefish is a programmer's editor which also includes plenty of web-related tools and options.
This
starts with the usual editing tricks: syntax highlighting (ASP.NET,
CSS, HTML, JavaScript, PHP and more are supported), code folding,
powerful find and search and replace tools, autocompletion, and more.
The
program also supports document templates; has wizards to add CSS,
forms, tables, forms, audio and video objects; quick tag editing and
easy previewing of the current document, amongst many other goodies.
6. Brackets
Brackets is an interesting open-source HTML, CSS and JavaScript-based code editor, created and maintained by Adobe.
The
program deliberately avoids cluttering your workspace with floating
toolbars and large icons, instead allowing you to work directly on your
code, with plenty of shortcuts to help.
Click
in an HTML tag, say, press Ctrl+E and you'll see a Quick Edit box with
any related CSS rules, just select the one you need and you'll be able
to edit it right away.
It's just as easy to edit JavaScript code.
And a Live Preview feature means that there's no need to refresh your
browser each time to see the changes - they're updated right away.
Add
the growing list of extensions and, while it's still early days,
Brackets is looking like an interesting tool for experienced web
developers.
------------------------------------------------------------------------------------------------
7. KompoZer
It's not been updated for some time, but KompoZer
can still be a useful web editor for beginners. The program works like a
simple word processor, so you don't have to know about HTML, CSS,
scripting or anything else: just enter your text, format it, and click
the various buttons to add links, insert tables, images and more.
If
you're a little more experienced than KompoZer does have further tools
which may help, including an HTML editor. The program is beginning to
show its age, though, so more experienced web designers would probably
be better off elsewhere.
------------------------------------------------------------------------------------------------
8. OpenBEXI
OpenBEXI
is an interesting WYSIWYG HTML editor which allows you to create pages
just by dragging and dropping "widgets" - everything from text, links
and images, to forms, graphs and flowcharts - and tweaking them to suit
your needs.
It's also possible to tweak CSS or add scripts to the page, and a built-in FTP client will upload everything when it's done.
While
this sounds great, there are problems. It's easy to add objects to a
page, for instance, but getting them to work as you'd like can take a
little while.
The browser-based interface has some issues, and
the need to use a server might confuse beginners, too. It's still a
quality tool, but you'll need some PC (though not web design) experience
to make the most of it.
------------------------------------------------------------------------------------------------
9. GIMP
Every web designer needs great graphics tools, and GIMP
is one of the best free image editors around. It has impressive photo
retouching features, lots of useful special effects, a range of powerful
paint tools and more.
Strong
colour management ensures your images always look at their best. Layer
support helps you control which parts of your images are tweaked, and
which remain untouched. And it's then easy to save your images for the
web.
The interface isn't always the best, and with so many options
GIMP can seem intimidating at first. Once you've learned the basics,
though, you'll find there's very little the program can't do.
------------------------------------------------------------------------------------------------
10. BlueGriffon
BlueGriffon takes a straightforward WYSIWYG approach to web editing, but also manages to include plenty of more powerful features.
You
could just use it to type text, insert images, tables, audio files,
videos and so on. But there's also an SVG editor, form design tools,
some CSS support, an accessibility checker, DOM Explorer, and more.
One
annoying aspect of the program is that several options (even that
manual) require commercial add-ons, which means clicking the wrong
button will take you to the BlueGriffon site to find out more.
You soon learn which options are available, though, and on balance BlueGriffon is a capable and generally easy-to-use tool.
