a Basic Web Page
Created in, and Written for
Composer (version 4.61), in Windows
versions and/or Mac
1994 - 2001, Jinny Brown
This tutorial is written to show
the beginner how to use Netscape Composer to create a very simple
web page with both text and images "corralled" into a table. Using tables
allows you to control where your text and images will land on the page,
no matter how large or small the viewer's monitor or browser window may
This page is designed to fit comfortably
in a 640 x 480 window (horizontally, at least). Since making the
table exactly 640 pixels wide makes some of the page fall under the vertical
scroll bar, I've made the table 610 pixels wide and centered
on the page.
Read the entire tutorial through before beginning a web page. There are
things mentioned in the second half that you'll do better to know up front
(but I couldn't put everything up front, now could I?).
These are the steps taken to create
this page. You can alter them however you like, to suit your needs. Try
duplicating this page first, though, just to get some practice before branching
out with your own design. (A shorter version, of course.)
Decide on a background color for your page, then from the Format
menu, choose Page Colors and Properties. (You can change your
mind about the colors while using this dialog box, or later... on by reopening
the dialog box and making new choices.) Remember, if you don't specify
a background color (even white) the viewer's default browser page color
will be displayed and may make your page look.. well.... awful! If you
don't want color, make your background white. Until you have more experience,
it's best to avoid using black backgrounds as beginners often make the
mistake of using text colors that don't provide enough contrast and make
it nearly impossible for the visitor to read the text.
In the Page Colors and Properties dialog box, use the following
In the Insert menu, choose Table, then choose Table
from the flyout menu. The default settings are for two columns.
You'll change that to one column. Use the following settings to create
Check the Use custom colors (Save
colors in page) radio button.
Click the color sample for each
of the following to pick your text colors and page background
color: Normal Text, Link Text, Active Link Text,
Link Text, Background
The colors you choose are displayed in the preview window
to the right of the color samples. This makes it easy for you to see how
your text will look against the page's background color so you'll be able
make sure the text will be readable. (It's very annoying to try
to read text over a background when there isn't enough contrast!
Be kind to your visitors or they won't enjoy your site and probably won't
stick around to see everything, or want to come back.)
To use a seamless background tile
(image) over your page background, in the Background Image section,
click the Use Image: box, then click the Choose File... button
and find the seamless background tile (image) file on your hard drive,
highlight the file name, click the Open button, then click the Apply
button to see how it looks.
Leave image at the original location
- Leave this box unchecked.
Save these settings for new pages
- Leave this box unchecked.
When you're satisfied with how the page
looks so far, click the OK button.
The Formatting Toolbar is located at the top of the Netscape
Composer screen, just below the menus: File, Edit, View,
and the Help menu.
Number of rows: 1
Number of columns: 1
Table Alignment: Center
Include caption: Leave this box
Border line width: Change this
to 1. (If you don't want a border, change it to 0.)
Cell spacing: Change this to
0 (used to insert space between table cells, or columns, and you don't
need this since you're only using one column.
Cell padding: Change this to
6 (inserts space between the table border and the text, or images, inside
Table width: Change the number
to 610, then change "% of Window" to "pixels" by choosing
from the drop down list.
Table min. height: Leave this
box unchecked, make the number 100 and the unit of measure "%
Equal column widths: Uncheck
this box since you're only using one column.
To use a different background color
your table, in the Table Background section, click the
then click the button just to the right to pick a color.
A solid color inside the table is especially useful if you're using a page
background tile, as it can be difficult (if not impossible) to read text
with a pattern behind it. With a solid color inside the table, the text
is readable as long as good colors are chosen, with enough contrast against
the table's background color.
Use Image: Leave this box unchecked.
Leave image at the original location:
Leave this box unchecked.
Extra HTML... button - Ignore
Click the Apply button to see
how your table looks.
When you're satisfied with the table,
click the OK button.
In the View menu, you have the option to Show Composition Toolbar
and/or Show Formatting Toolbar. For now, only check Show Formatting
Toolbar. Later, you can teach yourself how to use the options contained
in the Composition Toolbar.
The following list explains what
each item is used for and how to use it (reading from left to right across
the Formatting Toolbar):
Additional Menu items, not described above, that you may want to
Paragraph Style list with
displayed: This method of formatting paragraphs is Optional
as you can also choose to format your paragraphs by using the
other Formatting bar options. Used to format a paragraph, or paragraphs.
Click anywhere in the paragraph, then choose from the drop down Paragraph
Style list. (A paragraph ends each time you hit the Enter/Return
key, so you'll have to format each paragraph one at at time unless
you highlight part of or all adjoining paragraphs to which you want the
format applied. If there is a paragraph between these paragraphs that you
don't want it applied to, apply the format to the paragraphs above it,
apply a different format to that paragraph, then continue applying formats
to the rest of the paragraphs, switching format options as needed.
Font list with "Variable Width"
displayed: This is the Font list that displays all of the fonts
available on your system. Highlight the text to which you want a new font
applied, then choose from the drop down Font list. (For cross platform
compatibility, choose basic fonts. If the viewer doesn't have your chosen
font on his/her system, a font will be arbitrarily substituted, often making
for a rather surprising result... one that you'd not have wanted. Dreamweaver
lists the following four font groupings as alternatives to be substituted
if one of them isn't on a viewer's system and I think they're all pretty
Georgia, Times New Roman, Times, serif
Times New Roman, Times, serif
Arial, Helvetica, sans-serif
Verdana, Arial, Helvetica, sans-serif
Font Size list with
displayed (12 is the default font size and you'll see that size when you
first open Netscape Composer. Otherwise, the last used font size is displayed.):
Used to apply font sizes to your text. Highlight the text you want
to resize, then choose a size from the drop down Font Size list.
Font Color list: Used to apply
color to text. Highlight your text, then choose from the drop down
picker. While the color picker is open, if you want to create a custom
color, click the Other button. There, you can pick from additional
color swatches, click and move the cross hairs in the "rainbow" window
to change Hue and Saturation, or move the vertical slider to change the
Luminance (or Value) of your colors. Notice the Color/Solid window where
you can preview your color.
It's better to write down the RGB color numbers than to rely on
to save your custom colors. It doesn't save them for long, and it's a big
time waster and very frustrating if you haven't taken notes. If you're
really organized, you can start a notebook or text document containing
all the "recipes" for your pages! (Why didn't I think of that???)
The four "A" icons - Used to
format text. Highlight your text, then click the appropriate
Remove all Styles (Ctrl+Shift+K)
Bullet List: Used to add bullets
to your paragraphs for indented, bulleted lists. Highlight (or click
in) the paragraph, then click the Bullet List icon.
Numbered List: Used to add
numbers to your paragraphs for indented, numbered lists. Highlight
(or click in) the paragraph, then click the Numbered List icon.
Decrease Indent (Ctrl-):
Used to "outdent" a paragraph that's been indented, or indented
too far. Highlight (or click in) the paragraph, then click the Decrease
Increase Indent (Ctrl=):
Used to indent a paragraph. Highlight (or click in) the paragraph, then
click the Increase Indent icon.
Used to align paragraphs, flush left, centered, or
right. Highlight (or click in) the paragraph, then click and drag downward
on the Alignment icon to choose either the Left, Center, or Right
Alignment icon. The appropriate alignment is indicated on these icons by
rows of lines representing rows of text.
On the top icon, the lines are
on the Left
On the middle icon, the lines
are Center aligned
On the bottom icon the lines
are aligned on the Right.
Deleting Tables and/or Table Rows:
If you have your cursor inside a Table and click the Tab key,
a new row is created below the row where your cursor was. You may not want
this additional row.
To delete a single column table,
click anywhere in the table, then in the Edit menu, choose Delete
Table, and from the flyout menu, choose Table.
Reloading the page to display an
updated image with the same file name as the original image:
To delete a single row from a
single column table, click anywhere in the row, then in the Edit menu,
choose Delete Table, and from the flyout menu,
Inserting Text Links, Image Links,
If you made a change to an image in
your web page while you were working on the web page, and if the updated
image has the same file name as the original image, you may need to go
to the View menu and click Reload. You'll be asked if you
want to save the web page. The location where it will be saved and the
file name are shown in this window. Check to see if that location and file
name are correct, then click OK to save it. If the updated image
still doesn't display, in the View menu, click Reload again.
The updated image should display now.
To insert a Text Link, in the
menu, choose Link. In the dialog box, click the Link
tab and in the Link Source section, Enter text to display
for a new link: box, type the words you want the viewer to see on your
web page. For instance, "e-mail" or the name of another website
or section of your own website. For instance, my website's Mosaic's
section is linked from this page. In the Link to section, Link
to a page location or local file: box, type one of the following:
For instance, an e-mail link,
type mailto: firstname.lastname@example.org
For a link to a file located on another
server or in another folder, separate from your web page and its image
files, type the full web page or image file address (URL). For instance,
my website is made up of several sections. I keep the files for each section
in its own folder on the same server. This requires that I type in the
full address to each folder wherever a link goes to a file in another folder.
The links you see at the bottom of this page are to each of my website's
sections. This page, since it is a tutorial, will be located in the Tutorials
folder so the "BACK" link at the bottom of the page only needs
to have the actual file name of the Tutorials section's home page,
not the full web address (URL). Here's what I type:
The full web address for this
page is (compare it with the one shown below for the Mosaics section
home page and notice that they're in different folders):
However, I needed to tell this
page (the one you're reading) exactly where to look for the other sections'
home pages since those pages are not in the same folder. In this case,
I had to type in the full web page address. For instance, to link to
the Mosaics section, I typed:
Inserting an Image without a link:
To insert an Image
Link (and/or an Image with no link): In the
menu, choose Image. In the dialog box, click the Image
tab and in the Image location - Enter a remote URL or local file
type in the full web address (URL) for the image file or
image is going to be located in the same folder as the web page,
in only the image file name. Click the Choose File... button
to locate the file on your hard drive. Now click the Link tab and
in the Link to section, Link to a page location or local file: box, type
the full web address (URL) or if the file is going to be located
in the same folder as the web page, type in only the file name.
Examples of how this might be used:
A button the viewer clicks to
to another web page
A thumbnail image the viewer
clicks to go to a larger version
of the image.
To insert an Image, in the Insert
menu, choose Image. Follow the same procedure used when inserting
an Image link and Image, but this time, you don't need to type in a
link. This image will simply display on your web page:
Inserting a Horizontal Line on
your web page:
To insert a Horizontal Line,
in the Insert menu, choose Horizontal Line. It will look
like the one shown below unless you change its properties:
To change the properties of a Horizontal
Line, highlight the Horizontal Line, and in the Format menu,
choose Horizontal Line Properties. Type the number of pixels
you want for the line's Height: and the number you want for either
% of Window or pixels. Check the desired Alignment radio
button, and if you want the line to have a "3D" look,
the 3D Shading box. Ignore the Extra HTML button and
the Save settings as default box. Take a look at the examples below:
36 pixels wide by 12 pixels high
72 pixels wide by 72 pixels high
300 pixels wide by 3 pixels high
To check your spelling:
In the Tools menu, choose Check
Spelling (or Ctrl+K).
Well, that ought to get you started,
at least. I've tried to cover all of the options in Netscape Composer
that you need to build a simple web page. In time, you can explore the
rest and see what else can be done, and possibly find some faster ways
to do things. Or, by then you may have moved on to something a bit more
sophisticated like Dreamweaver... a very good choice.
May you have the very best of web
designing and website owning experiences!
P.S. Let me know if you have questions.
This is not my first love (Painter is!) or an area that I know best,
but I'll try to help if possible.
THRU TRAFFIC •
THIS ROAD IS UNDER CONSTRUCTION.
PLEASE EXIT USING ANOTHER LINK.
YOUR ATTENTION TO SAFE DRIVING.
Jinny Brown, February 26, 2001
- 2001, Jinny Brown
All Corel Painter screen prints on
these pages are used with permission from Corel Corporation.
• Safe Journey
with Brush Strokes • Character
Painter • Painter
Exchange • Mosaics