Edit Your Page!

A Tutorial for Editing in Netscape Composer
(PC Version)
by John Adsit
Prepare to edit 
Page properties 
Indents
Bulleted lists
Use tables 
Add links 
Navigate long documents
E-mail links
Add pictures and style
Publish to the Web
Document downloads
Converting Microsoft Word

 

So you have a web page now, and you need to keep it current.  If you have the rights to the page, you can do all the work yourself easily, or you can do the work and have the person with the rights upload the page for you.  Netscape Composer is really little more than a word processing program with a few quirks.  Anyone who can word process can handle most page composition work without any instruction; just look at the tool bars and menus and look for words and icons that seem familiar to you.  Netscape translates your work into HTML, the language of the World Wide Web.  Because HTML is a language with limited formatting ability, and because publishing to computer screens with a variety of sizes is different from publishing to standard sheets of paper, there are some limitations to what the Netscape Composer can do.  This guide should get you through most of what you need to be able to keep your page current and functional.  Go through the guide step by step, or use the table of contents on the left to go to the place you want.



Prepare to Edit
Use this page as your practice page.  Go to the file menu and select Edit Page. This will take you from Netscape Navigator to Netscape Composer.  You can move back and forth between the two by clicking on the Navigation bar at the bottom of the screen.  Look at the tool bars and menus.

Lower Tool Bar
Most of the commands and purposes should be familiar to you from word processing, and they work the same as most word processing programs:

For simple editing, you do not need the first item in this menu.  The second is your font choice, and you will usually want variable width.  The rest should be familiar: font size, font color, bold, italic, underline, remove all styles, bullet list, numbered list, decrease indent, increase indent, and alignment (this is a pull down menu).

You will notice that you are very limited in font sizes.  You are actually limited in fonts as well, for if you choose one that is not on the computer of the person who reads your page, it will revert to the default font of that computer.  (That is why most artistic nameplates are actually pictures.)

Upper Tool Bar
The upper tool bar is the only one that has some commands that may seem new to you: 

The "Publish" icon lets you place your finished product on the web.
The "Preview" icon lets you see what your page would look like if it were published on the web.
The "Link" icon lets you create a hyperlink.
The "Target" icon lets you identify a place for a link within the page, just as this link takes you to the bottom of the page.
The "image" icon lets you insert an image in your page.
The H. Line icon lets you put in a horizontal line to separate parts of your page.
The "Table" icon lets you create a table.

Now that you are in Composer, you can try everything on this page to see how it works.  If you want to see what it looks like in Navigator, click on the Preview icon.  You will have to save it to a location before you can preview it, though.  Give it a short name with .html at the end. No spaces!

Go to the top of the page




Page Colors and Properties
Go to the format menu and select Page Colors and Properties.  Go to the General menu and give the page a new name.  The name itself does not appear on the screen, but it will appear on a bookmark list if someone selects it.  Go to to the Colors and Backgrounds menu and change the background color of this page.  Click on the box next to background color and you will be able to change the background color.  You can also change link colors if you wish.  Experiment with some different combinations.  Click OK when you are done.

Go to the top of the page




Indents
Indenting text is a little tricky in HTML.  Tabs are simply not recognized, and spaces are iffy at best.  If you want to indent text, the simplest thing to do is to use the Increase Indent button on the lower toolbar.  If you want to use indenting to show the relation of a paragraph to the rest of the text, go to the format menu and select the appropriate choice under paragraph.

Making columns, lists, and other formatting in which text and images are aligned with one another is usually done with tables.  For example, the table of contents at the top of the page is kept to the left of the introductory paragraph by creating an invisible table of two columns.  You can see the dotted lines of the columns in Composer, but they do not appear in Navigator.

Go to the top of the page




Bulleted Lists
Bulleted lists in Navigator are similar to any other word processing program.  Follow these directions:
Highlight this list.
Click on the bullet icon in the toolbar.  You should get a bulleted list that is indented from the left margin.
Go to the end of the list on click at the end of the last item.
Hit Enter (return).  You should get another bulleted item.
Select two or more items in the middle of the list.
Click the Increase Indent button on the bottom toolbar, and they will be demoted.
Click the Increase Indent and they will be promoted.

Go to the top of the page




Use Tables
Tables are very important in Web Pages.  They are the only way to create true columns.  Most tables are invisible, but it is often valuable to leave the lines visible.  The table of contents above is in the left column of a table.

Making a simple table
1.  Click the space above this command to get the cursor there.
2.  Click on the table icon in the upper tool bar.  Select Four rows and three columns.
3.  Notice that you can choose the size of the lines in the border of the table.  If you uncheck this, the table will be invisible.  Choose whichever you prefer; you can change it later.
4.  Notice that unless you change it, all columns are the same width.  In the table of contents table above, this was unchecked, so Composer gave extra width to the introduction cell.  Uncheck this to give cells different sizes.
5.  Hit OK.
6.  Click in the first column and write Assignments.
7.  Highlight the word, then go to the lower tool bar and make it bold and in a suitable color.
8.  Go to the format menu and select Table Properties.  Click on the row menu, and give it a background color.
9.  Go back to the table and click in the second column.  Write Due and give it to colors and properties you want.
10.  Notice that you can align text and pictures within a table cell.

Table Adjustments
1.  Add rows or columns by using the insert menu.  (You must be clicked in the table first.)
2.  Delete rows and columns in the Edit menu.
3.  Make all other adjustments in the Format menu, table properties.
4.  You can put tables inside of tables.
5.  Aligning text from cell to cell can be a problem.  By default, Netscape centers everything in a cell from top to bottom.  If one cell has more than one line of text or is a picture, then the other cells in the row may not be aligned with it.  If you go to the table properties menu and select cell or row, you can align all cells by selecting the top vertical alignment.

Go to the top of the page




Add Links
Hypertext links are the most valuable part of the web.  They are easy to create in Composer.
1.  Write the text you wish to use as a link.
2.  Highlight it.
3.  Click on the Link icon in the top toolbar.
4.  Write in the URL.
5.  Click OK.

If you are in the site to wish you wish to link, the easiest thing to do is copy the address, go to your composer page, go through the first three steps above, and paste the address in the URL space.

You can make a picture a link.  Just click on it and follow the rest of the steps above.  If you do, it will get a border around it.  If you don't want the border, chose Image Properties in the Format menu to remove the border.  That is how the Top of the Page icons at the end of each section were created.

Links can be copied and pasted.  For example, the Top of the Page icons were written once and then pasted repeatedly.

Go to the top of the page




Navigate Long Documents
When this page is in Navigator, the table of contents above is a set of links that go to specific places within this page.  When you used the Edit Page command to go to Composer, target icons appeared at the top of each section of this page.  These targets what the table of contents links are looking for.  The page up icons at the end of each section are also linked to a target at the top of the page.

1.  Click on the space you want to make a target.
2.  Click on the target icon, next to the link icon.
3.  Put in a short name for the target.
4.  Highlight the link text and click on the link icon.
5.  Identify the target from the list OR type in the name with a # sign in front of it.  (The # sign is an HTML code for a link within the same document.)

Go to the top of the page




Create E-Mail Links
If you want someone to contact you easily, create an e-mail link.
1.  Highlight the text.
2.  Click on the Link icon.
3.  In the URL space, write mailto: and complete it with the e-mail address.  Use no spaces.
4.  Click OK.

If someone clicks on this link, they will get an addressed form for an e-mail message.

Go to the top of the page




Add Pictures and Backgrounds
Before you can add a picture, you should have a picture in mind.  You can link the picture to a picture on another site, but that is unreliable--that site can change without warning.  Most people use their own pictures, and most of these are taken  from other Web Sites. (Make sure they are not copy righted!)  A picture must be in .GIF of .JPEG (or.JPG) format to be viewed on the web.

To take a picture from another web site:
1.  Point at the picture.
2.  Click the right mouse button.
3.  Select Save image as... and identify the location.
You can also copy and paste an image from another Composer page.

There are sites designed to give you these pictures.  A good one is http://www.iconbazaar.com.  The apple below was taken from that site.

To add a picture to your page:
1.  Click on the spot you want it.
2.  Click on the Image icon, next to the target.
3.  Select Choose File
4.  Find the file you want to use.
5.  Click OK.

To adjust the picture
Adjust the size by clicking on it and dragging it.  Hold down the shift key to constrain the proportions.
Align or Wrap text by going to the format menu, selecting Image Properties, and choosing the option you want.  In some text wrap cases, you will not see it as it will appear in Navigator.  You will have to use the preview mode to see what it will look like.

Add a background
Backgrounds are just pictures.  Like a picture, you need to find a background you like first and save it to a file.  They are available from a variety of sources, as other pictures are.  Once you have a background,
1.  Go to the format menu and select Page Colors and Properties.
2.  In the Colors and Backgrounds section, click on Use Image and then use Choose Image.
3.  Select the background file you want to use.

Others
With a little poking around, you can find interesting images to use a separation bars, borders, or whatever else you want to give your page some style.

Go to the top of the page


Publish to the Web
To do this, you need to have permission, a password, and the correct directory path.

1.  Click on the Publish icon or select Publish from the file menu.
2.  In the address, type:
ftp://your domain/directory path
(FTP means file transfer protocol.)
3.  Make sure the name of the document and its HTML name are what you want.
4.  Type your user id.
5.  Type your password
6.  Click OK.

If you are sending images with the web page, they will show up at the bottom of the page.  If you have already sent these images in the past, you don't need to do it again.  You may select none.  This just saves time.

If you are sending images, you may be asked to repeat your password.  There is no logical reason for it; it looks like a bug to me.

Another bug: it sometimes doesn't work.  You just have to do it again.

Netscape will save the places you have ftp'd.  It will appear in a menu.  Make sure you have the right one; it is sometimes wrong.  Don't save to the wrong place!

When you go to Navigator to see your page in place, don't be surprised that nothing has changed.  You have to click on Reload to see the changes.
Go to the top of the page




Document Downloads
If you want someone to be able to download a document you wrote in a program like Microsoft Word, you can do that pretty easily.  You will need an FTP program, though.

1.  Use your FTP program to put the document in the server.
2.  Create a link.  Just put the name of the document in the link.  Make sure it has the proper ending for its program, such as .doc, .xls, or .pdf.

Go to the top of the page




Converting Microsoft Word Documents
Microsoft Word has the ability to convert itself to HTML to make a Web page.  It is a very crude program, though, and the results do not look very good.  If the document is mostly text, you are probably better off copying it and pasting it into a composer page.  If it has some complex formatting, though like table, you will want to follow these steps:

1.  While in the MS document, go to the file menu and select Save as HTML.  You will have to identify a place for it.  Make sure you save it to a place you want, because the default location will NOT be where you want it.
2.  Go to Netscape.  In the file menu, select open page.
3.  In the dialogue box, select choose file and find the page.
4.  You will now have a crudely formatted web page.  You can try to correct the problems, using the steps above, and then save it as a separate page.  If you want it to be a part of a page, though, you can now copy and paste it into an existing Composer page.
5.  This will even work for Microsoft Access and Excel files, although it is far from ideal.

Go to the top of the page
This is the bottom of the page.  Click here to return to the tool bar explanation.