INTAC - Internet Access Index of all Linux for Microsoft Windows Users articles MozillaQuest MQ Logo
MozillaQuest the on-line computer magazine
April 19, 2004
Northeastern Internet Web Hosting

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


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


Mozilla 1.4 Browser-Suite -- AKA Netscape 7.1


The GIMP 2.0 for Microsoft Windows - First Look

The GIMP 2.0 Released - a free photograph and digital-image editing program

Overview of The GIMP - a free photograph and digital-image editing program

How to Use GIMP for Photo and Image Editing:



The Microtek S1/D1 Digital Camera for the Linux, Mac, and Windows Platforms


OpenOffice 1.1 -- A Complete Office/Productivity Software Suite for GNU-Linux, FreeBSD, MAC, MS-Windows, Unix, and more

Creating a Simple Newsletter with OpenOffice/StarOffice Writer - a free word processor

Creating a Simple Contact or Personal Information Manager with OpenOffice/StarOffice Calc - a free spreadsheet

Creating a Personal or Company Budget with OpenOffice/StarOffice Calc - Part 1: Basics


SUSE Linux Has New Educational Discount Program - 9.0 Professional Only $50 for Students, Teachers, Schools

Crossover Office 2.1 Runs MS Windows Software on GNU-Linux Systems -- Jeremy White, and Mike Angelo Discuss Crossover Office, Wine, and MS Windows APIs for Linux

MandrakeSoft's 8 Golden Rules


Young People Are The Future of Linux -- Gaël Duval, Joe Eckert, Randy Plessor, Jeremy White, and Mike Angelo Discuss Linux and Open-Source Software in Schools and Colleges

SuSE Linux Desktop Available

A KDE Tool to Manage and Read E-Mail: KShowmail Shows Potential -- But It Can Delete the Wrong Messages


Using LinNeighborhood to Create a Network Neighborhood for Linux

Linux Networking for Windows and Desktop People -- Mandrake 9.1 and LinNeighborhood


Mozilla 1.3b Browser-Suite Released


Copyright 2000-2004 -- MozillaQuest -- Brodheadsville, Pa..USA -- All Rights Reserved
EPIX Internet Services
MozillaQuest Magazine Front Page button

Internet & Web browsers button

custom Netscape & Mozilla themes & skins button

IRC - Internet Relay Chat - Chat button

Linux buttonLinux for Windows Users

Mozilla button

Netscape button
network articles

tutorial - help - how to button

Windows button
Recent Articles

The GIMP 2.0 for Microsoft Windows - First Look

The GIMP 2.0 Released - a free photograph and digital-image editing program

The Microtek S1/D1 Digital Camera for the Linux, Mac, and Windows Platforms

The SanDisk 512-MB SD Card and Ultra II Card Reader for Linux, Mac, and Windows

Mandrake Linux Hits the Big One-Zero! Mandrake 10.0 Available

How to Use GIMP for Photo and Image Editing:

Deja Novell All Over Again

Novell Linux Dominates LinuxWorld 2004: Overview

LinuxWorld in New York City -- 20-23 January 2004

Does Dell Support Linux?

How to Use GIMP for Photo and Image Editing

Overview of The GIMP - a free photograph and digital-image editing program

Creating a Personal or Company Budget with OpenOffice / StarOffice Calc -- Part 1: Basics

MandrakeSoft's 8 Golden Rules

A KDE Tool to Manage and Read Email: KShowmail Shows Potential - But Can Delete the Wrong Messages

OpenOffice 1.1 -- A Complete Office/Productivity Software Suite for GNU-Linux, FreeBSD, MAC, MS-Windows, Unix, and more

SUSE Linux Has New Educational Discount Program - 9.0 Professional Only $50 for Students, Teachers, Schools

Crossover Office 2.1 Runs MS Windows Software on GNU-Linux Systems -- Jeremy White, and Mike Angelo Discuss Crossover Office, Wine, and MS Windows APIs for Linux

Mandrake Linux 9.2 Available

Young People Are The Future of Linux - Linux and Open-Source Software in Schools and Colleges

CNN SUCKS!

Gaël Duval Tells Why Mandrake Linux Is Better Than MS Windows

Gaël Duval and Mike Angelo Discuss The HP-Mandrake Computer

HP to Ship Desktops with Mandrake 9.1 Linux Pre-Installed - Good News for Mandrake Linux and Fans

Mozilla 1.4 Browser-Suite -- AKA Netscape 7.1

Gaël Duval and Mike Angelo Discuss Mandrake Business Products and Finances

SuSE Linux Desktop Available

About the Hey SCO, sue me Petition

Linux for Windows Users -- Linux Networking for Windows and Desktop People -- Mandrake 9.1 and LinNeighborhood

Gaël Duval and Mike Angelo Discuss the New AMD64 OS --

Mandrake Linux Corporate Server 2.1 for AMD Opteron

SuSE Linux Enterprise Server 8 for AMD64 Released

Major Morphing in Mozilla Project Organization and Objectives Proposed

Red Hat Linux 9 Distribution Released

SCO-Caldera v IBM:

  • Are SCO's Rebuilt IBM Lawsuit and Unix License Revocation Winners -- Or More SCO FUD?

Mandrake Linux Corporate Server 2.1 Released

SCO-Caldera & the GNU/Linux Community: The SCOsource IP Matter

Don't Forget the Books

Linux Makes a Great Gift

Christmas Season Holidays & Computer Suggestions 2002

Mandrake Linux 9.0, Desktop Magic You Can Use: A First Look

Using LinNeighborhood to Create a Network Neighborhood for Linux

Zero Tolerance for Privacy and Security Bugs

Mozilla and Netscape JavaScript Bugs Compromise Privacy and Security

SCO's Darl McBride and MozillaQuest Magazine's Mike Angelo Discuss Caldera Linux and LSB

UnitedLinux: A Standard or a Distribution?

UnitedLinux, a Divisive Weapon for Caldera's Darl McBride -- Part II

Holger Dyroff, Gaël Duval, Mark de Visser and Mike Angelo Discuss LSB, UnitedLinux, and the Linux Market

UnitedLinux, a Divisive Weapon for Caldera's Darl McBride -- Part I

Netscape Communicator 4.8

Scott McNeil Discusses LSB

New Mozilla Roadmap Kills Mozilla 1.0.x

Mozilla 1.0 Browser-Suite's E-Mail & News Quick Look

Mozilla 1.0 Browser Quick Look

Mozilla 1.0 Browser-Suite Performance -- Speed, Stability, and Memory Hogging

Mozilla 1.0 is Officially Out!

Some Mozilla 1.0 Browser-Suite Annoyances, Bugs, And Issues

Mozilla 1.0 Not Ready for Prime Time -- Close but No Cigar and No Brass Ring!

Turmoil in MozillaLand:

Mozilla 1.0 Browser Sneak Release

AbiWord 1.0.1 Quick Look - MS Word Clone for Linux, MS Windows, & More

MozillaQuest Magazine 2001 Editor's Choice Hardware Picks

Getting Started with Wireless Network Technology

Part III: Adding Wireless to a Linux-Based Laptop or Notebook

Bugzilla 2.16 - 2.14.1

Year 2001 in Review -- Mozilla and Netscape Browsers

Free Software for Your New Computer -- Or Any Computer

Linux Gifts for Christmas, Holiday, and All Occasions