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 2

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

MozillaQuest Magazine Comprehensive Mozilla 1.0 Coverage

To learn why Linux is so much a better choice than is Microsoft Windows, please see our article Gaël Duval Tells Why Mandrake Linux Is Better Than MS Windows

To learn how to run MS Windows-based software and accessories in GNU-Linux, please see our article Crossover Office 2.1 Runs MS Windows Software on GNU-Linux Systems

Formatting text

Let's set the text in the masthead to Ariel. To do that, highlight all the text in the left cell to select it and then click on Format > Font > Helvetica, Ariel.

Next, let's set the Krazy Kats line to Heading 1, bold, large text size. To do that, please highlight Krazy Kats. Then, click the down arrow on the paragraph style selections box at the left of the Toolbar and select Heading 1.

With the title still selected, click on Format > Size > xx-large. Then click the B for bold on the Toolbar if it is not already set.

Next, please highlight the remainder of the text in the left cell and set it to bold and medium size text. You can see the finished masthead in Figure 7, below. (A green background has been applied to the masthead. More about backgrounds further on.)

Please feel free to put whatever text you like in the masthead you are creating as you follow along with this tutorial. Also, please feel free to format your text any way you like. After all, it's your masthead.

Naming and saving your Web page template

It's always good to save your work from time to time before it is finished. That way if your Mozilla program or your system crash, you do not have to start all over again from scratch.

Also, sometimes you might find that you have made a change in your Web page document that you cannot undo. In that case you can revert back to your last saved version of it so you do not have to start from scratch.

To save your Web page, please click on File > Save As. The first time you save a particular Web page in Mozilla Composer, it pops up a Page Title dialog box.

Let's put Krazy Kats Template in there and click OK. Doing that pops up the Save Page As dialog.

Notice that what you typed in the Page Title dialog box has been placed in the filename input box with an html extension added by Composer. Navigate to whatever directory in which you want to save your Web page and hit OK.

Please notice that Composer has put the name you typed in the Page Title dialog box on the Composer Title Bar. If you open your Web page in a browser now, you should see that Page Title on the browser Title Bar too.

Figure 6. The Mozilla Composer Table Properties dialog with the Cells tab opened.

Making a navigation bar

Let's add a navigation bar to your Web-page template. To do that, place the mouse-pointer to the right of the masthead layout-table and hit Enter several times.

For this example, let's say there are four Web pages that should be accessed from the navigation bar. To accommodate those four pages, insert a table one line below the masthead. Make it a four-column table with only one row.

Open the Insert Table dialog just the way you did for inserting the masthead layout-table. Then set the table properties to 1 row, 4 columns, 800-pixels wide, and a 1-pixel border.

Next, let's add a gray background to the navigation bar. To do that, with the Insert Table dialog still open click on Advanced Edit. Next, click on the down-arrow of the Attribute selection box.

Select bgcolor from the drop-down list and then click on the drop-down arrow for the Value selection box. Select whatever color you like. We will choose gray for this example. Then OK your way out of the dialog boxes.

The default gray is a little too dark. So let's get a lighter gray.

To do that, select all four navigation-bar table-cells, as a group, by dragging your mouse from left to right across all of them. Then with your mouse-pointer still in the table, alternate-click to display the pop-up menu.

Next, select Table or Cell Background Color. Select the light gray (#cccccc) and click OK.

Going from left to right in the four navigation-bar cells, let's insert About Us, Contact Us, Archive, and News. Then drag the mouse-pointer across all four cells again to select them all as a group.

Alternate-click to pop-up the context menu and select Table Cell Properties. Then set the width to 25% of table, Vertical to Middle, and Horizontal to Center. Then click OK. Because you selected all four cells as a group, the cell-width change that you made gets applied to each of the four cells in the selected group.

With the cells still all selected, go to the Toolbar, click on the B for bold and set the paragraph style to Heading 3. Then, click on Format > Font > Times and Format > Size > medium. You can see the finished navigation bar in Figure 7, below.

Figure 7. The Mozilla Composer desktop showing the layout tables created during this tutorial. This screen shot shows the Normal mode.

Laying out a topic index and main body

Now let's add the page-structure elements for a topic index and the main body of the Web page template. To do that, let's insert a three-column by three-row table one line below the navigation bar. Then drag the mouse-pointer over the three cells in the first column to select them as a group.

Alternate-click on the selected cells to popup the context menu and click on Table Cell Properties. Then set the width to 200 pixels and Horizontal to left. Next set the background color for these three leftmost cells to light gray by checking Background Color and clicking on the rectangle to the right of Background Color.

That brings up the Cell Background Color dialog. Select light gray and hit OK.

Then insert Krazy Kats Topics Index in the topic index cell and then the names of the topical indexes. In our example that is Katnip, Mice, Scratching Posts, Kitten Korner, and Litter Boxes.

Now, please click Next to move over to the three middle cells. Then set the Width at 1 pixel and the Background Color to black. This will give us a vertical line that separates the topic index from the main body.

But wait, we forgot to set a spacer between the topic index and the main body. Not to worry, it's easy to fix.

Place the mouse-pointer in the top cell of the third column. Then alternate-click to bring up the context menu. Next click on Table Inset > Column Before. Then use the Cell Properties dialog to set the newly inserted column to 10-pixels wide.

Congratulations, your template is finished for now -- nice work! We will do some tweaking to the template in Part II of this tutorial series. The finished, for now, template is shown in Figure 7, above.

The first paragraph of this tutorial has been added to the main body area of the template page so that you can see how the page will look as you add page-specific content to the template. The topics index in the left sidebar has been spiced up some too. More about that in Part II of this tutorial series.

Figure 7 is a screen shot of Mozilla Composer in Normal mode. That's the mode you normally use to create and edit Web pages. If you look at the bottom of the Composer desktop you should notice four mode tabs, Normal, HTML Tags, HTML Source, and Preview.

Whenever you want to see how your Web page looks in the Mozilla Web browser, simply click on the Preview tab. Take your look. Then click on the Normal tab to get back to work creating and editing your Web page.

Figure 8, below, shows the Krazy Kats Web-page template in the Preview mode. Please notice that the red, cell and table boundaries do not show in the Preview or browser mode.