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

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. 

SUGGESTION: 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.)  ;o)

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

2. In the Page Colors and Properties dialog box, use the following settings:

• 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, Followed Link Text, Background

NOTE: 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 to 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. 

• Number of rows: 1
• Number of columns: 1
• Table Alignment: Center
• Include caption: Leave this box unchecked.
• 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 the table).
• 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 "% of Window".

Equal column widths: Uncheck this box since you're only using one column.
• To use a different background color inside your table, in the Table Background section, click the Use Color: box, then click the button just to the right to pick a color. 
• NOTE: 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 this button.
• Click the Apply button to see how your table looks. 
• When you're satisfied with the table, click the OK button.

NOTE: 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):

• Paragraph Style list with "Normal" 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 safe:
• Georgia, Times New Roman, Times, serif
• Times New Roman, Times, serif
• Arial, Helvetica, sans-serif
• Verdana, Arial, Helvetica, sans-serif
• Font Size list with "12" 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 color 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. 

NOTE: It's better to write down the RGB color numbers than to rely on Netscape 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 "A" icon: 
• Bold (Ctrl+B)
• Italic (Ctrl+I)
• Underline (Ctrl+U)
• 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 Indent icon.
• Increase Indent (Ctrl=): Used to indent a paragraph. Highlight (or click in) the paragraph, then click the Increase Indent icon.
• Alignment: Used to align paragraphs, flush left, centered, or flush 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 aligned 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:

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

• 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, 

choose Row.

• 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 Insert 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: jinbrown@pixelalley.com 
• 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: 
• tuthome.html


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):

• http://www.pixelalley.com/tutorials/tuthome.html


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:

• http://www.pixelalley.com/mosaics/mosaics-home.html

• To insert an Image Link (and/or an Image with no link): In the Insert menu, choose Image. In the dialog box, click the Image tab and in the Image location - Enter a remote URL or local file box, type in the full web address (URL) for the image file or if the image is going to be located in the same folder as the web page, type 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 link 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, check 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.

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