Web page editing programs such as AbiWord, OpenOffice Writer, and the Mozilla Composer are easy to use and can be downloaded at no charge. All of these programs are multi-platform or cross-platform (XP) and come in Apple Macintosh, GNU-Linux, Microsoft Windows, and UNIX versions. Some also have *BSD versions and versions for other operating systems too.
These all are WYSIWYG (What You See Is What You Get -- pronounced Whiz-E-Wig) programs so you do not need to use HTML coding or to understand HTML coding. Simply compose the page in words just the way you want it to look and the software will save it in HTML (HyperText Markup Language) format for you, automatically.
Using Mozilla Composer to create and edit Web pages is very similar to using a word processor program to create and edit printed documents. AbiWord and OpenOffice Writer are word processing programs that can save the documents you create and edit with them in Web page formats.
Thus, unless you want to do really complicated, and perhaps cumbersome, Web pages there is no use to wasting lots of money on commercial Web page software such as Adobe GoLive or Macromedia Dreamweaver. Just download AbiWord, OpenOffice Writer, or Mozilla Composer for free.
The Mozilla Composer is part of the Mozilla browser suite. However, it has its roots in the old Netscape Composer -- going back to Netscape 3. In Netscape versions from Netscape 6 on, the Netscape Composer is based upon the Mozilla Composer.
For today's Mozilla Composer tutorial, we will use the Composer component of Mozilla 1.7-Beta (1.7b). Download links are at the end of this article. Much of today's tutorial should be applicable to Netscape Composer 7.x too. However, if you are a Netscape Composer user, we recommend that you switch to Mozilla Composer -- it's newer than Netscape Composer.
On with the Mozilla Composer tutorial
If you already have not done so, please download and install Mozilla 1.7b or a later version of Mozilla if one is available when you read this tutorial. Then, to open Mozilla Composer simply click on Window > Composer in the Mozilla Toolbar. That will bring up the Composer desktop. (Please see Figure 1, below and Figure 7, on page 2.)
Before composing a Web page let's set the Composer preferences. To do that from the Composer desktop, please click on Edit > Preferences to open the Composer preferences folder. (Please see Figure 1.)
First, let's change the number of recent pages that will be listed in the File > Recent Pages menu, from 10 to 20. Then let's un-tick the Save images and other associated files when saving pages selection. We will discuss the reason for that in Part II of this tutorial.
Last but not least, let's move on to the Toolbars settings to customize the toolbar just that way we want it. Here, let's add Cut, Copy, Paste, H-Line, and Anchor to the toolbar items. H-Line is a horizontal line. (Please see Figure 4, below, for the Toolbar with these items added to it.)
Creating a Web page template
Chances are that sooner or later you will have more than one page on your Web site. So, let's create a model page or template. That will save time when you add pages to your Web site. And, it will help to impart a certain consistency across the pages of your Web site.
There are many notions about how a Web page should be designed and how a web page should look. Our approach is to keep Web pages simple in design and architecture. In part that means using simple Web page structures that most Web browsers can handle, and can handle without all sorts of plug-ins.
One reason for this approach is that it's likely that you want everyone to be able to read your Web page(s). Thus, the more browsers that can display your Web page in a readable fashion, the more, more people can read it.
Using tables to provide a Web page layout structure
Just about all, modern Web browsers can handle tables. Moreover, tables can be used to provide a nice fixed structure for a Web page. In other words, we are not using tables in the more common sense of using them to organize data. Instead, we are using tables to provide a page layout framework.
Today, most computer monitors can handle at least an 800 pixels x 600 pixels screen resolution. Therefore, let's set our Web-page layout framework to an 800-pixels width.
Place the mouse-pointer in the Composer workspace and hit the Enter key once to leave a blank line at the top of the Web page. Then please click on Table > Insert > Table to popup the Insert Table dialog. (Please see Figure 2, below.)
Now let's make some changes from the default Insert Table dialog settings. First let's set the Width to 800 pixels. To do that, please click on the down arrow to the right of % of window and then click on pixels. Next change the Width from 100 pixels to 800 pixels.
This first table will be the masthead for the Web page. So, let's set the Border to 0 pixels and Rows to 1. (Please see Figure 3, below.) Then hit OK.
Figure 4, below, shows the Mozilla Composer desktop with the table we just created outlined in red. In the left table-cell, let's add the heading that will appear on each page -- Krazy Kats -- 13 April 2004. You can put whatever you want here for your own Web page as you follow along with this tutorial.
If you make the basic masthead generic enough, you should be able to use the same masthead template for each page. Then if there is something different on a particular Web page, you can tweak the template masthead with the particulars for that page.
Next, let's add a graphic in the right cell. You can use any image you like for the masthead that you are creating as you follow along here. We will use a cat photo from our Microtek S1 digital camera article.
To do that, place the mouse-pointer in the right cell of the layout table. Then click on Insert > Image to open the Image Properties dialog. Next click on Choose File and select the image that you wish to insert. Then add the title of your graphic in the Alternate Text input box and hit OK. If you have a logo, you can put your logo here if you like.
As you can see from Figure 5 there still is lots of work to do on the masthead. First, let's move the cat graphic to the right and shrink the cell in which it was inserted to fit tightly around the cat-graphic image.
To add the image, double click on the red line outlining the right cell to bring up the Table Properties dialog. The cat-graphic image is 142-pixels wide. So, set the Cell-Size Width to 142 pixels and click on Apply. Then set the Cell Content Alignment boxes to Vertical = Middle and Horizontal = Center and hit Apply.
Don't forget to make sure the Width, Vertical, and Horizontal selection boxes are checked. Please see Figure 6, on page 2.
Before leaving the Table Properties dialog, click on Previous to select the left cell of the table. Then set the Vertical and Horizontal Alignments to Middle and Horizontal. That will center the text that you typed into the left-cell earlier. Next, please click on OK.
Overview of The GIMP - a free photograph and digital-image editing program
How to Use GIMP for Photo and Image Editing:
For more information about Mozilla 1.0, please see our Mozilla 1.0 comprehensive coverage articles:
OpenOffice 1.1 -- A Complete Office/Productivity Software Suite for GNU-Linux, FreeBSD, MAC, MS-Windows, Unix, and more
Is Netscape Losing the Browser Wars?