How to Create a Simple Web Page with Mozilla Composer 1.7 and Netscape 7 Composer- a free HTML and Web page editing program for the GNU-Linux, Mac, Unix, and Windows platforms - MozillaQuest Magazine

MozillaQuest the on-line computer magazine

April 19, 2004

How to Create a Simple Web Page with Mozilla Composer 1.7 and Netscape 7 Composer Part I. Getting Started
Composer is a free HTML and Web page editing program for the BSD, Linux, Mac, Unix, and Windows platforms
Use Composer rather than GoLive, FrontPage, or Dreamweaver and save money
Mike Angelo -- 19 April 2004 (C) -- Page 1

Article Index

Introduction

On with the Mozilla Composer tutorial

Creating a Web page template

Using tables to provide a Web page layout structure

Formatting text

Naming and saving your Web page template

Making a navigation bar

Laying out a topic index and main body

Review

Test Equipment

Resources

Preparing graphics for your Web pages

The Gimp is a great and free digital photograph and digital-image editing program to use for preparing graphics for your Web pages. You also can use the Gimp to create graphics for your Web pages.

For more about the Gimp please see our overview of the Gimp article and three Gimp tutorials listed below. These Gimp articles should give you a pretty good feel of Gimp 2.0.

How to Use GIMP for Photo and Image Editing:

#1: Basic Photo editing, cropping, scaling, brightness, and contrast

#2: Intro to layers, text and patterns

#3: Framing Photos and Images

MozillaQuest Magazine Comprehensive Mozilla 1.0 Coverage

It's easy to create a nice looking and informative Web page. Moreover, you can do it with Free and Open Source software (FOSS).

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.)

Figure 1. The Mozilla Composer desktop with the Composer Preferences dialog opened.

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.

Moving on to the New Page Settings, you can put your name in the Author text input box. Then change the Default Page Appearance selection from Reader's default to Use custom colors.

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 2. The Mozilla Composer Insert Table dialog showing the default settings.	Figure 3. The Mozilla Composer Insert Table dialog settings customized for the template-page masthead table.

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.

Figure 4. The Mozilla Composer desktop showing the layout table created with the Figure 3 Insert Table settings.

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.

Figure 5. The Mozilla Composer desktop with some text and a graphic added to the masthead table.

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.