Web editors: programs and tools

Creating a page web isn’t any problem today. On the one hand, there is an good supply of specific programs that facilitate the task; on the other hand, most current text or word processing programs, like Microsoft Word, or OpenOffice, include some option to save as web page, so it’s enough with preparing the document like you always did and saving it with this option.

HTML editors

Anyway, if you want to create your web pages with a greater control on its design, you’ll really need a dedicated publisher program for HTML; preferably, a visual publisher, if you don’t want to memorise all the HTML tags. Luckily, it’s not necessary to buy one of these programs, because with the last versions of the navigators, a utility is already included to create and publish our wonder pages! With Internet Explorer used to come a reduced version of FrontPage (Frontpage Express, a slim version of its well-known commercial program FrontPage), and Netscape - Mozilla has its Composer. Both programs are simple to use, have a complete aid and they’re not a bad beginning. OpenOffice will not cost you nothing comes it also cines perfectly equipped for the creation and publication of websites and web pages. There are many other alternatives, but to begin with, these offer all you need.

Creating a basic page cannot be simpler: open the application, either Composer or Frontpage, and you will have a new blank page to work at. Type text or paste it from another text you already wrote. The images are placed putting the cursor in the position where you want them to appear, then clicking the icon that represents Insert Image (or in the menu, choosing Insert | Image); choose any GIF, PNG or JPG file in the list that appears, browsing to find the suitable folder if necessary. Nou you can specify different ways to flow the text around the image, and you’re done. You can save the page and the program will generate all the necessary HTML code.

For more complex pages, we must explore the different options in the program. Everything is very easy to use and intuitive. The most powerful tool for the beginning designer is using tables. If you use them, you can create almost any layout you might want, even with the simplest web editor. As you’ll see in the following image, the properties inspectors of the tables include all the necessary information to control the table layout:

However, using tables for layout isn’t the most recommendable option for a serious web developer. Tables were meant originally to contain tabular data, such as statistical figures or a price list. To create text and image containers for the layout of the page you should use other tags, like <div>, positioned with CSS. But in most web editors, you won’t be able to work in visual, what you see is what you get mode unless you use the old tables method. So, is it really necessary to know HTML if you mean to be a serious web developer? If you really are going to edit a lot of pages and you want to be in control of what you do, you should learn at least the basics of the marku language, and keep near at hand some reference, such as the ones we link to in our Anatomy of a web page article. Even if you use a visual editor, knowing what the headings H1, H2, etc. stand for, what is a line break (<br />), an unordered list (UL), etc. will surely help you a lot.

Professional editors.

If we want more professional tools, there’s a good supply too. The last web publishers allow a complete website management, enormously facilitating the task of establishing links, formatting, adding components (CSS, multimedia, animations, Java...), use of templates... from the point of view of a company, these professional applications also facilitate the creation of catalogues and commercial interfaces, linking information in the pages to databases, etcetera. Some of the most evolved publishing systems are the CMS, like the ones used for Blogs, such as Wordpress, Textpattern or Typepad, which centralise all the formatting and page generation, an ideal situation in which the client or user only has to introduce texts and link to images, while the coding and database maintenance is done by the system.

Be aware, though, that most professionals publish their HTML documents writing the code directly, since the reliability of the visual publishers is not absolute: in many cases they place the tags in the wrong place or generate excessively complicated code, which is very hard to monitor and edit. A myriad of excellent HTML text publishers text. Although your simple Windows notepad would do, programs such as Homesite, NoteTab, 1st page 2000, HTML-Kit, etc. incorporate a series of programming aids to speed up the code edition and the management of projects with many files.

Some of the most complete, professional caliber visual editors include Macromedia Dreamweaver, NetObjects Fusion, and Adobe Golive. With any of these three a precise control of the look of the page is possible, and it’s very easy to add interactivity and effects such as mouseovers. They can be expensive programs, and their cost can be compensated only if you have some professional perspective or you are going to create many web documents. You can try first a tryout version of any of these programs. NetObjects Fusion is an exception: you can usually buy it at a very modest price and it’s a very robust and powerful tool. Then, there are some good visual freeware editors, especially the recent NVU.

Even if the features of these programs are impressive, they can even be further extended using plug-ins and other extensions that really extend their functionality, sometimes automating tasks or conducting some operations that otherwise would be much more labour-intensive and time-consuming. Some of these extensions are free, while others are commercial. Some extensions are commented in the article dedicated to plugins (in the graphic design section.)

The way in which a site is created in Fusion is practically opposed to what most programs do; here, first you create the site structure and apply a coherent style to the whole website, then proceed to edit individual pages and sections.

Here we can see the window where we plan and define the structure of the site, either with a diagram with big coloured icons representing pages, or with tree similar to Windows explorer.

NetObjects Fusion

There is no faster and more flexible way to create a complete and complex website that with Fusion (or with some similar program like Namo). The process is guided by the understated and elegant interface of the program: 1) Create the site, 2) Add content to the pages an manage your assets, 3) Apply style to the whole site or individual pages and 4) Publish. The power of the program relies on its database engine. All the information about the site, its pages and links is kept in a database; for that reason, you can introduce any change and it will be fixed in each and every one of the pages right away. From this database, all the necessary HTML pages, folders and graphics are generated automatically by the program.

Create the website:

To create the site one begins almost the other way around than in other programs; we began to define the complete Website, before creating any page. This is done in a control panel with a tree-like scheme with icons similar to post-its that represent the pages. We can modify the structure as we want, to add or delete pages, move them, change the names... the program is totally flexible.

Add content and edit the pages.

Once the website has been defined this way (with the possibility of changing it whenever you want), the program will define all the pages and a structure of automatic navigation, that can be formatted as desired. What causes more headaches in most programs, in Fusion you don’t care at all! This means you can be concentrate in the creative work and the creation of contents. Open the pages and add graphical and textual content. Again, the tools available here make it very easy. The program reminds you more of a professional application of DTP than of a HTML publisher; for each selected element the program shows a panel with its properties, so that all the necessary information and settings are always visible and editable.

To add contents is extremely easy: choose the corresponding icon; Java applet, Flash movie, forms... for certain functions the program uses the so called components, which include wizards that help in the preparation of forms, special applets, rollovers... The program is extensible, since it includes a collection of components, but it admits new components externally developed. Some of these are very useful, for example the Apollon components from www.apollon.de

Add and manage assets

You don’t have to worry about the HTML, since it is generated automatically from the objects that you have placed in each page. Each page may have its own banner graphic with its title, and automatically generated navigation bars that can point to the same level, the parent level, child level or whatever combination you might choose. You can select either graphic buttons (even with rollover effects) or plain text buttons, formatted via CSS in the most recent versions of Fusion. You can position the elements of navigation in each page or each complete section wherever you want, horizontally or vertically. You can generate breadcrumbs navigation schemes too and you’re never afraid of moving pages around because all the necessary links are changed accordingly by the program, because it automatically keeps its database up to date with any change you introduce. There’s no possibility of mistake!

To control the elements (assets) with the information of the pages and the structure of the site, the program registers each element of the site, be it a link, a graphic, an applet, etc. in a database that “watches it all”: if you move or rename a folder, a graphic or a link, or if you delete or rename a page, you don’t need to check every occurrence of references to this changed asset, because the program will do it automatically. There’s a special panel to keep track of the assets you’re using in your project.

Styling the site.

One of the worst shortcomings of Fusion’s first versions was its dependence on graphics for styling, but in its last versions, especially 7 and later, it uses CSS for most formatting tasks. In order to have a website with professional look, Fusion can be in charge to apply a homogenous style to all the pages, taken from templates called SiteStyles, which include the necessary graphics for the navigation buttons, background of the page, headings, in addition to the chosen colour, fonts, links... There are a great amount of ready made sitestyles, some of them nice, others hideous. They cover practically all the styles; but it is also possible to create your own: you just have to prepare the basic graphics and define the essential tags style, because the program can do all the rest: this it is the Sitestyle of our Website in a previous version made in Fusion:

Fusion is never rigid; each page may have a style independent from the rest. But all those pages that share a common style can be automatically fixed just by choosing a new SiteStyle or modifying some of the parts that build it up. To do a “lifting” to a whole Web with this application, far from being a source of headaches, becomes something entertaining and creative, without technical preoccupations. The time and effort that is saved in relation to other programs is impressive: the most mechanical tasks, such as assigning links, or placing the fixed elements of the pages are taken care of automatically and we don’t need to worry about them.

Publish your site

Finally, only is left the task of publishing is left. Again, the program also facilitates the task enormously: you only need to type the server configuration details, and the program will go through the process of transferring the website, creating all the necessary folders and so on. You can publish the complete site, only a section, or even a single page depending on what you’re doing.

This is good praise for a program and indeed it deserves it, but don’t forget the downside of this kind of program: you get complex, hard-to-edit HTML code with little semantic validity. Anyway, for many users Fusion is everything they could possibly need for web publishing, and what’s better, the program is really cheap. Check out the website of its manufacturer fo see more details and options, at www.netobjects.com or www.efuse.com.

Dreamweaver y Adobe Golive

These are also professional programs; it’s almost a pleasure to work with them. Their interface also is elegant, simple and at the same time offering absolute control. They are professional tools that are used by some of the best professionals (who tend to use text editors, not visual editors.) Nevertheless, their capacities of handling of complete sites are not nearly as powerful as those of Fusion. Their strong points are mainly the incorporation of the latest advances in Web design, a good template management and extensibility and a good integration with other related programs, like graphic editors (Fireworks, Photoshop.) We have tried several versions of Dreamweaver and, indeed, it’s a magnificent program (we built the original Catalan version of this Manual.) The developer usually offers a tryout versional, totally functional during 30 days.

On the other hand, there is a series of programs focused specifically to the creation of dynamic, database powered sites, which build templates for pages created at the moment in the server, sometimes based on the user who visits the site. This already is a much more advanced subject! A series of programs exists that are used for this type of creation Web: Fusion itself, Drumbeat (now incorporated into Dreamweaver), Generator... Lately these systems are being replaced by Content management systems (CMS) based on database interaction (especially MySQL) with server-side processors like PHP. Many blog systems, like Wordpress or Texpattern, work this way. Creating and maintaining an out-of-the-box CMS like these isn’t really complicated for a basic application. See different alternatives (which you can try out online) at Open Source CMS.

Some freeware alternatives

Aside from the mentioned FrontPage Express, Composer and OpenOffice (or any program with capacity to export as HTML), if we look for something more complete and professional we find a good supply of freeware or shareware.

If you want to edit code directly, any text editor is OK, but programs such as Note Tab Light are a blessing with its advanced features for search and replace, supporting regular expressions, clip libraries, etc. You will find many freeware programs in a good file server or in a CD-ROM collection. We could recommend especially one good program, a bit dated (they are supposed to issue a new version soon): FirstPage 2000. Its interface is quite intuitive, and it offers all the benefits to create attractive and functional, and also dynamic pages. Its help system is extensive, has many ready to use templates, a big library of Javascript and DHTML effects... This program isn’t the choice of a newcomer to web edition, though, since it works at pure code level, although the tags are chosen visually.

HTML Kit is a very popular and certainly powerful editor, working in text-mode. Their main advantages are an excellent feature list and its extensive range of plugins that extend its already impressive features. In fact, we have been using a lot this program to edit the code of this site.

There is nothing you can do in Golive or Dreamweaver that cannot be done or be surpassed with FirstPage 2000 or HTML Kit, as long as you are willing to deal with the code directly, and they are easy to use. The interface of both programs can be customized to your needs. In the case of FirstPage 2000, it changes according to the experience degree: we can choose between four modes: easy, normal, expert and “hardcore”. Since they will cost you nothing, you can download any of these programs and see for yourself. Only for their collection of scripts and helps is already worth the trouble.

If you prefer visual editors, another recommendable program is a project of W3 consortium, Amaya. The NVU is a new and good, open-source visual editor and site manager. But there are more: check out your preferred file server to find out.

Complementary programs

Some edition programs Web are of the type "everything in one", but sometimes it comes or or it is necessary to have some auxiliary program to prepare the pages. These programs can complement the deficiencies of a basic publisher like Composer or FrontPage Express, or simply, cover all the necessities with the creation of the Web. We will need, typically:

Programs for the handling and creation of images;
Animations editors, which may be a program of the previous category;
CSS style sheets editors (if we want to use them, which is recommended; the HTML editor may already offer style sheet edition features.);
A FTP client to upload our files to the server (again, most web publishing software includes this feature and makes it more or less simple to transfer the files.) You can use Filezilla or LeechFTP, for example.

In order to create another type of web components, like Flash movies or PDF files, there’s first the option to buy the “mother” application, that is the Flash program or the Acrobat suite. You can try Flash out for 30 days without limitations, and is easy to find several previous versions (the current version is the seventh), so that it is possible have Flash in use during several months, time sufficient to create a pile of animations or learn it in depth, then decide if you really want to invest in it or not. But there are other ways of generating these files; several graphic applications now export basic animations or static images in the SWF (Flash) format, and you can generate PDF documents using free solutions like Ghostscript or ready-made file printers like PDF995.

Some utility of file compression to create ZIP or RAR files that take less to download and consume less bandwidth. There is a lot of free utilities of this kind, or you can use your own operating system, since this abitility is included in the last versions of Windows.

We talk about all these programs in more detail in the corresponding sections; if you plan to create contents for the Web, evidently, you will also navigate quite a bit, and some of the utilities that you need might be the ones we comment on our “Cheapware” article.