INTAC - Internet Access Digital Photography, Graphic, and Image Articles Index. 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 1


Article Index

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

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.


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