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.
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 8. The Mozilla Composer desktop showing the layout tables created during this tutorial. This screen shot shows the Preview mode.|
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?