Netscape Communicator Composer

Introduction

Netscape Communicator is a Web Browser and it includes Netscape Composer, a web site development tool. To get more information on its basic features and how it works, go to: http://wp.netscape.com/browsers/using/newusers/composer/index.html or http://wp.netscape.com/communicator/ composer/v4.0/index.html. To download a copy, go to: http://help.netscape.com/communicator/index.html. While this basic introduction will not provide you with an exhaustive review of the features Netscape Communicator offers, the directions here will get you started. These directions will help you gain some familiarity with some of what this web site development tool offers, but as you become more comfortable with the program, don't be afraid to experiment with your format and overall design.


Creating a New Page (top)

1. Open Netscape Communicator

2. Go to "Window" and select "Composer" - this launches Netscape Composer, the web site development tool. When Composer is launched, a new blank web page is opened.

- OR -

1. Click on the Composer icon at the bottom left of the Communicator

- OR -

1. When you are already in Composer and want another new page, go to "File"

2. Select "New"

3. Select "Composer Page"


Saving a Page (top)

1. Go to "File"

2. Select "Save As"

3. Composer will prompt you to enter a title for the current page so it is easier for you to identify the page in the window title, press "OK"

4. Make sure you know where you are saving this page (A: drive, C: drive, Desktop, etc.)

5. Enter a file name with the extension .html

6. Follow these rules when naming your web pages:

- use lower case letters and numbers only
- keep file names short with no spaces
- do not use any symbols because these may cause problems

7. Press "Save"


Setting Page Colors and Background (top)

1. Go to "Format," select "Page Colors and Background"

2. Select "Use custom colors"

3. You can change the color of the normal text, linked text (links before they are selected), active links (links that are currently being selected), followed links (links after they have been selected), and the background color of the page itself.

4. Click on the square of color next to the type of link for which you want to change the text color, select a color, then select "OK"

5. You may also select a background image for your page. Below the section for "Background Image," select "Choose File" and choose the image you want to use.


Setting Page Properties (top)

1. Go to "Format," select "Page Title and Properties"

2. Enter a title, author, and description for your page

3. Select "OK"


Text and Text Tools (top)

1. Click in the Composer window to place the insertion point on the page - you have to start at the top left for now

2. Type in your content

3. If you want to change the appearance of your text, highlight the text just as you would in a word processor, and then select the appropriate text tool in the text bar at the top of the navigation window. The text bar looks like this:

 

two squares of color double click and then select a font color
-a smaller font size
+a larger font size
B makes font bold
I makes font italicized
U underlines text
options on the right side of text bar different ways to align the text you highlighted

4. You can select Heading Sizes from 1-6 at the upper left hand corner of Composer

- OR -

After typing in your content, you can go to "Format," select "Font," "Size," "Text Style," or "Text Color" to make these adjustments
 

Inserting an Image (top)

1. Click in the Composer window in the place where you want the image to be inserted

2. Select the Image button at the top of the Composer toolbar OR Go to "Insert" at the top menu and select "Image"

3. The "Image Properties" box will appear. Here you either need to enter some "Alternative text" that will appear in text-only browsers or will appear in browsers when an image is loading, or else select "Don't use alternate text."

4. Select "Choose File" and then find and highlight the image you want to insert on your local computer. In the example below, I am in the C: drive inserting an image named "chinatown"

5. Select "Open"

6. If you failed to enter "Alternate text" or if you failed to select "Don't use alternate text" before selecting your image, the program will prompt you to do so now

8. Select "OK"


Inserting a Link (top)

1. Highlight the text you want to be the linked text

2. Select the link button at the top of the Composer toolbar OR Go to "Insert" at the top menu and select "Link"

3. The "Link Properties" box will appear. Type or paste in the URL/web address of the page to which you want the linked text to go when it is selected. In the example below, the linked text is "Matrix," and when this link is selected, it will take the reader to http://matrix.msu.edu



4. Select "OK"

5. To link to another page in your own website, you only need to put the name of the page with the extension .html

6. To link to an external page (someone else's webpage, an organization's or university's website, etc.), you must include http:// in the address


Inserting a Table (top)

1. Click in the Composer window in the place where you want the table to be inserted

2. Select the Table button at the top of the Composer toolbar OR Go to "Insert" at the top menu and Select "Table"

3. The "Insert Table" box will appear

4. Enter the number of rows and columns, set the width to between 600-640 pixels, and enter a border value

5. Select "OK"


Creating an Inverted "L" Table Layout (top)

1. To create the inverted L, you first insert a table

2. Click in the Composer window in the place where you want the table to be inserted
3. Select the Table button at the top of the Composer toolbar - OR - Go to "Insert" at the top menu and select "Table"
4. The "Insert Table" box will appear

5. Give your table 2 rows and 2 columns, set the width to 640 pixels, and enter a border of 0

6. Select "OK"
Your table will look like this:
   
   

7. Take your cursor and place it in the upper left-hand cell. Then click and drag down to the cell below it. The far two left cells will now be highlighted with a thick black line.

8. Go to "Table" at the top menu and select "Table Properties." The "Table Properties" box will open up.
9. Select the "Cells" tab at the top.

10. Enter 220 into the "Width" box. Make sure it is set to "pixels" and not "% of table."

11. Select "OK"

 

Your table will now look something like this:

 
   
   
12. To merge the two upper cells, take your cursor and place it in the upper left-hand cell. Then click and drag across both the cells. Once selected, they should both be highlighted with a thick black line.

13. Right click your mouse over these two cells and select "Join selected cells." This will merge these two cells together into one large cell.

 

Your table will now look something like this:

 
 
   

14. Now you can select a color for the inverted "L" of your table. Do this by clicking in the upper cell, and go to "Table" at the top menu and select "Table or Cell Background Color." Select a color and the click "OK." Now click your cursor in the bottom left corner. Again go to "Table" at the top menu and select "Table or Cell Background Color." If you want this left cell to be the same color as your top cell, select "Last picked color."

 
Your table will now look something like this:
 
   

 



 

15. For each cell you can change where the text is aligned (vertically text can be aligned at the top, middle, or bottom, and horizontally text can be aligned at the left, center, right, or it can be justified). Go to "Table" at the top menu, select "Table Properties," and select the "Cells" tab at the top of the box. Under "Content Alignment" you can change the these vertical or horizontal alignments for the cell in which your cursor is currently placed.