Update: this is a very old article about a web editor that no longer exists. For more up-to-date web editors, please see my list of tutorials of web editors as well as thefreecountry.com's list of Free HTML Editors and WYSIWYG Web Editors.
Mozilla is a free open source web browser that comes with a WYSIWYG web editor. Since it is one of the few free WYSIWYG editors that is still being maintained, I decided to take a look at it to evaluate if it's useful for newcomers wishing to develop their own website.
Mozilla Composer comes together with the Mozilla web browser on which the Netscape browser is based. You can download Mozilla for various operating systems, including Windows, Linux and Mac OS X, from http://www.mozilla.org/.
To test Mozilla Composer's ability to generate a usable and "real" web page (as compared to creating a rudimentary dummy page that is too simple for a real website), I used an old version of one of the pages on thesitewizard.com as a model. Basically, my aim was to re-create that page using the WYSIWYG portion of Mozilla Composer.
The reason that I had to use an old version of thesitewizard.com's page is because the new versions of the pages here use CSS for layout. Since Composer is mostly a pre-CSS HTML editor, it was not possible to re-create the page without manually entering most of my code into the HTML Source editor. Since my purpose was to test Composer as a WYSIWYG editor, I decided that it was simpler to use an earlier version of my site.
For the curious, I modelled my test page on the old version of my Google article at https://www.thesitewizard.com/archive/google.shtml
I used the version of Mozilla Composer that was distributed along with Mozila 1.2.
| Features | Supported? |
|---|---|
| WYSIWYG interface | Yes |
| View/Edit HTML Source | Yes |
| Drag and Drop Editing | Partial |
| Generates CSS Code | Partial |
| Generates valid HTML Code | Yes |
| Table Management | Yes |
| Form Management | No |
More details for the individual items in the above table follow.
When Mozilla Composer is run, the web editor allows you to work in a WYSIWYG interface, called the "Normal" mode. This mode allows you to create and edit your web page and view the changes in a mostly WYSIWYG interface. I say "mostly" because the editor still gives you some sort of visual indication of things like tables with no borders so that you know where the table cells are (otherwise, the table will be invisible to you even while editing, making it difficult to work properly on your page).
There is also a "Preview" mode. This is similar to the "Normal" mode except the appearance of your page is exactly what it should appear in a Mozilla browser window. In spite of its name, you can still edit in this window.
The HTML editor also sports a "HTML source" mode, where you can view and edit the code generated by the editor.
There is also a "HTML Tags" mode. This mode shows you your web page in a mostly WYSIWYG format but with the addition of your main HTML tags highlighted on the screen. I actually found some use for this mode (to my surprise), when I was searching for extraneous HTML tags created by the editor since the graphical representation of the tags made it easier to look for them.
You switch between modes by using your mouse to click the appropriate tabs at the bottom of the screen. I have not found any keyboard interface to those tabs: even the Windows standard Ctrl-TAB key (to switch between child windows within a single enclosing window) does not work. This is inconvenient for people who like to work with the keyboard.
I tested this facility using the Windows version of Composer. The web editor allows you to drag an image from an Explorer window onto the page. The editor then creates an image tag on your page. You cannot really position the image into any spot on the page - the image tag will be created in the portion of your page you dragged it to, according to the flow of the document. You cannot for example drag it to the centre of the screen and expect the editor to create either a table or CSS code to position it at that spot.
Likewise, when you create or edit your document, there is no way for you to drag images and text and position them at some arbitrary position on the screen, expecting the editor to generate the necessary layout code to keep them there.
In this sense, this editor requires you to have some knowledge of the tricks webmasters use to position their images and text, that is, either by using tables, which the editor supports, or by manually entering CSS code into the HTML Source portion of the editor.
Mozilla allows you to set the editor to "use CSS styles instead of HTML elements and attributes". This CSS support in the editor is partial in many respects:
The CSS styles generated are always inline styles. They are applied to an element using the "style" attribute of that element, instead of either putting them all in a style sheet at the start of the page or in a separate file. This needlessly bloats the code on the page.
Not all formatting information are generated with CSS styles. For example, the font size menu items invariably generates HTML font tags with size attributes.
There is no built-in support for creating and editing a style sheet using the WYSIWYG modes.
For people who are using Mozilla Composer as their HTML editor, there is no facility for positioning elements using CSS in the WYSIWYG portion of the editor. If you don't know how to write "raw" CSS code, you will probably end up using tables for layout, since table support in the Composer is fairly complete.
For those who have used certain commercial WYSIWYG web editors and come to expect numerous errors each time your page is validated against the W3 Consortium's standards, you will be pleasantly surprised to find that the code generated by Mozilla validates with no errors. Or at least, this was true of the page I generated for this test. Since this is a real web page and not a rudimentary web page (see above for more information), I think it's fairly safe to say that Composer generates valid HTML code as a whole (if not always).
For those who are interested, the code generated conforms to HTML 4.01.
Mozilla Composer comes with fairly good support for creating and maintaining tables. I found that I could do whatever I needed to do with my tables purely through the WYSIWYG interface.
As far as I can tell, Mozilla Composer has no direct support for creating and maintaining forms from the WYSIWYG interface. You can of course enter your form code using the HTML Source interface, and it will display correctly in the WYSIWYG tab.
Even for the absolute beginner, this may not be a problem, since many are likely to be using cut and paste form codes (along with the scripts to handle the backend) obtained from places like thesitewizard.com anyway. There is no way, though, that they can modify the form fields in Composer's WYSIWYG mode should they find the need to.
More than anything else, I think this lack of support for editing and creating forms is a major deficiency in the web editor.
I suppose it's unrealistic to expect a WYSIWYG editor to generate the same optimized code that one gets when one manually creates a page. As far as I know, none of the WYSIWYG editors I've examined (commercial or otherwise) ever manages the task.
In Mozilla Composer, code bloat comes in the form of the duplication of code that arises when formatting information is replicated across your entire document for all the various paragraph tags, span tags and so on. For example, the editor automatically creates new span tags with the font you selected everytime you create a new paragraph, instead of simply enclosing the entire block in (say) a div block with the appropriate style.
For example, you might get the following code:
Observe how the style is implemented in a span tag and how this tag is duplicated for each paragraph. A more efficient method will be to specify the tag as part of an enclosing div block, like:
Their CSS implementation is probably a straightforward and literal porting of the old metaphor of using the HTML font tags. This becomes obvious if you uncheck the "Use CSS styles instead of HTML elements and attributes" option. You get the following code instead:
As you can see, the old idiom requires the use of font tags within each block level tag. When Mozilla Composer is required to generate CSS code, it simply converts the font tag into an inline span tag with the font-family style.
You probably also noticed that the editor has a tendency to create unnecessary <br> tags as well.
In general, I was favourably impressed with the editor. For a free WYSIWYG editor, Mozilla Composer is an editor that allows newcomers to quickly get started with their web page. Although it has a few deficiencies (form management, lack of support for arbitrarily positioning elements) that web designers might want, it is possible to work around them since the editor comes with a built-in HTML source editing mode.
Copyright 2002 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Web Editors Reviews: Review of Mozilla Composer
