Eastern Connecticut State University

How to Create Web Pages Using Netscape Composer 

 

About this Guide

To view this page as it was intended, please maximize your Web browser window so that it covers the entire screen.  To maximize the window, locate these three buttons  in the upper right-hand corner of the Web browser.  Click on the middle button  (you may have to click on it a second time to restore it to maximum size if the window shrinks instead of expanding.)
 

Before You Begin

The information contained in this document assumes that you have Netscape's Communicator package installed on your machine.  Information on how to obtain and configure this program are explained in the Web document entitled How to Configure Netscape's Composer which can be found at the URL:  http://www.easternct.edu/depts/dc/docs/composer/configure.html

This document provides some instruction on the basics of using Composer.  Before using this reference material, you may find it helpful to read the Web document entitled An Overview of Creating & Publishing Web Documents found at URL:

http://www.easternct.edu/depts/dc/docs/composer/overview-steps.html
 
 
 

Table of Contents

This document is one, large file.  It was intended for on-campus access and simplicity of printing as a document but may be difficult to download to off-campus locations.

You can quickly jump to a section of this document that you are interested in by selecting one of the topics below.

Questions and comments regarding this documentation may be sent to Steve Frazier, fraziers@easternct.edu
 

 

A Brief Overview

Netscape's Composer is an easy-to-use, "What You See Is What You Get"  HTML document creation program which is tightly integrated with the other components of Netscape's Communicator.  It makes creating HTML documents for email, newsgroups and the Web a simple process.  (As a side note, this document was created using the Composer.)

Composer's features include the ability to:

 

Downloading Netscape's Communicator and Configuring Composer

Per Netscape's licensing agreement, members of educational institutions and employees of charitable nonprofit organizations may use Netscape software free of charge.  By accepting the agreement, these individuals agree to be self-supporting, however.

Instructions on how to download and configure Netscape's Composer are provided in the Web document entitled How to Obtain and Configure Netscape's Composer located at URL: http://www.easternct.edu/depts/dc/docs/composer/configure.html

 

How to Start Composer

Composer, the HTML editor that comes bundled with Netscape's Communicator, can be started in one of several ways.  To begin editing a blank page, run the Navigator (the Web browser) and locate the  bar in the lower, right-hand corner of the screen.  Click on the  icon.  This brings up a blank page in the editor.

Alternate Method #1:
Another way to start the Composer is to use the pull-down menu.  Click on the File pull-down menu (top, left-hand corner), select New and choose from one of three options listed below.
 

  1. Select Blank Page to start from scratch.
  2. Select Page From Template to connect to Netscape's server and choose a template to modify.  Then, click on the File pull-down menu and choose Edit Page.
  3. Choose Page From Wizard to connect to Netscape's server and answer a simple set of questions to create a Web page.
 
Incidentally, using the Page From Wizard option is a great way to start a simple, basic page.  Follow the instructions provided carefully.  After creating the page, you can then view the HTML source (and edit it further if desired).
 

Alternate Method #2:  Edit a Web Page from the Web

Another alternative to begining with a blank page is edit an existing Web page (anywhere on the Web).  While viewing the desired Web page, click on the File pull-down menu and choose Edit Page.  This will bring the Web page into the Composer editor.  Then, simply save the page (click on the File pull-down menu and choose Save or Save As... and begin making changes to the document).
 

Adding and Editing Text

To add text to the page, position the cursor at the desired point of insertion, click and begin typing.  Highlighted text (drag your cursor or double-click words) can be deleted (press the Delete key on the keyboard) or moved by clicking on it and not releasing the mouse button while dragging (moving the cursor to the new location). You can also cut, copy and paste text by right-clicking on the highlighted text (or using the Edit pull-down menu at the top of the window).  If you are copying text directly from a Navigator window (the Web browser) to the Composer window, please note that it will not retain formatting (unless you temporarily edit the browser's page as explained in the section above).
 

Formatting Text

  Highlighted text can be bolded, italicized or underlined by selecting one of these buttons located at the top of the screen.  Alternatively, these same formats can be applied to highlighted text by clicking on the Format pull-down menu and selecting the appropriate Style.

Hint:  Paragraph markers can be displayed (or hidden) by clicking on the View pull-down menu and selecting Show Paragraph Marks.

A variety of tags can be applied to selected or highlighted text.  Below, the words "TITLE PAGE" were selected (by dragging the cursor across them).  Then, the Heading 1 tag was applied by selecting the option from a list of format tags in the pull-down menu (located below the New and Open icons).  A brief explanation of each tag type is provided on the right-hand side of the illustration below.
Heading 1:  Largest text size  
Address:
Highlight text and then select this to make it an address (italicized). This is not a "mailto:"
Formatted:
 Keeps white space intact.
List items:
Bullets or numeric.
Desc. Title/Text:
Use for glossaries, definition lists, etc. (this is an example...)

 
 
 

Justification

By highlighting text and then clicking on the alignment button (as illustrated in the picture on the right), text can be justified as follows: 
  • Left Justified
  • Centered
  • Right Justified
 
 

Adding Color to Text

The color of text which has been highlighted (by dragging the cursor across it while holding the mouse button down) can be changed either by clicking on this button (located near the top of the Composer window) or right-clicking on the highlighted text and selecting Character Properties.  In either case, the Character Properties window will be brought up.  Click on the color box (usually black initially) next to Use Color and select the appropriate color setting.
 

 

Inserting Links

You can drag-and-drop a wide variety of objects to create a link in the page that you are editing.  Dragging-and-dropping offers the following options: Alternatively, you can add links by using the Insert pull-down menu at the top of the Composer window.

 

Inserting Targets

Targets allow the page (whether inside the same document or a linked document) to be repositioned when the user clicks on a link.  For example, a table of contents at the top of a document can be composed of a set of links.  If the user clicks on one of those links, the document will quickly be repositioned to the appropriate part that the user is interested in reading.

A target is a "name tags" that is inserted into the document. After inserting a target, a  icon will appear at the point of insertion.  If you right-click on the target icon and select Target Properties, you can determine the name that the target was assigned.
 

Inserting Images

   Press the Image button to insert an image... or click the Insert pull-down menu and select Image (depicted in the image at the left). 
 
Aligning Images

Right-click on the image (that you previously inserted) and select Image Properties to control justification and the alignment of text associated with the image.  Note that you will not see the effect until you press the  followed by the  button.
 

 Examples of Text Alignment:

This text illustrates the effect that this button has... to associate this format with the image, right-click on the image and select the Image Properties option.

This text illustrates the effect that this button has... to associate this format with the image, right-click on the image and select the Image Properties option.

This text illustrates the effect that this button has... to associate this format with the image, right-click on the image and select the Image Properties option.
 

Using Images as Page Backgrounds
 
 Images can be used as Web page backgrounds.  Excercise judgement when selecting an image, however.  The image should be as small as possible (Netscape will tile the image repeatedly to fill the Web page background) and should not distract from the wording of the page (i.e., the background image should not be too wild!).

There are several sources of free background images on the Web.  Just search the web for "free background images" or use one of the sites listed below (listed in no particular order nor endorsed but provided as a quick resource).

When viewing a background image in your web browser (such as Netscape), right-click on the image to save it to your disk.  Then, switch back to the Composer editor and click on the Insert pull-down window (located at the top of the screen) and select the Image option.  Next, click on Choose File button (near the top of the new window) and navigate your hard disk (if necessasry) to locate the image.  When you locate the image, click on the image name and then click on the Open button.  Before closing the Image Properties window by pressing the OK button, click on the Use as background option.
 

Capturing Screen Images

Throughout the document that you are reading, images of portions of the screen are replicated.  You can easily create these images and bring them into the Composer.  For instructions on how to accomplish this using NT or Windows95, refer to the Web document entitled Capturing Screen Images to Include in Your Web Pages  found at URL:

http://www.easternct.edu/depts/dc/docs/composer/screen-capture.html
 

Inserting Blank Lines After Images

New users may be perplexed by the disappearance of blank lines after images.  To insure that the blank lines that you insert do not disappear, insert a space on each blank line by pressing the space bar when the cursor is on the blank line.  (Note that the Insert pull-down window located at the top of the screen contains two options,  New Line Break and Break below Images(s), that can be used when attempting to insert blank lines.  Nevertheless, you may find that you will still need to insert a space on each of these lines in order to retain them.)
 
 

Inserting a Table

Before you insert a table, insure that the cursor is blinking at the point of insertion where you want the table appear.  Select the Table icon or click on the Insert pull-down menu and select Table.

To readjust a table, right-click anywhere inside the table and select Table Properties.
 

Previewing Your Web Page

Save any changes by pressing the Save button.  Then, press the  button (or from File menu, select Browse.  A Navigator browser window will open displaying the page (the Composer window remains open behind it).
 
 

Publishing Your Web Document

Before you publish, you can check the spelling and correct any mistakes.  To check spelling, click the button depicted above or click on the Tools pull-down menu at the top of the screen and select Check Spelling.

To Publish your document (i.e.., copy it to a Web server), press the  button.  This will bring up the Publish window (the top portion of this window is depicted below).
 

The Page Title field (depicted in the illustration above) contains the information you specified for a title when you first saved your Web page.  This information does not actually appear in your document but will appear in the title bar of the Web browser.  If you wish to change it, do so now.

The HTML Filename field (depicted in the illustration above) should contain the name that you gave the file when you saved it.  If you want it to have a different name on the server than it has on your PC, you can change it here.  Please note that your personal homepage (i.e., the first page that viewers will see when they visit your pages), should have the name index.html on Eastern's Web server.

The fields entitled HTTP or FTP Location to publish to: (depicted in the illustration below) specifies an FTP transfer to the host www.easternct.edu.  Appended is the path to the directory where the files will be copied--in this illustration, /data/web/public/personal/faculty/frazier/
 

 
If you are a faculty member, you should type:
ftp://www.easternct.edu/data/web/public/personal/faculty/username/

...where username is your logon name for the Web server.

If you are a staff member, you should type:

ftp://www.easternct.edu/data/web/public/personal/staff/username/

   ...where username is your logon name for the Web server.

Note that this information does not actually contain the name of the file... it just specifies the path to the directory where the file will be put.

If you are uncertain about the actual host and location that you need, contact your Web server administrator or the Data Center or send email to webmaster@easternct.edu.
 

 
In the User name field (depicted above), type your user name for the Web server (at Eastern, the Web server is called Nutmeg).  This user name will always be lower case--never containing any capitalized letters.  In the illustration above, the user's logon name is frazier.

In the Password field, enter your password for your account.  Note that asterisks will appear for each keystroke you make.

If you are using your own personal computer that no one else has access to (i.e., it is in your office and not in a computer lab), check the Save password field by clicking on the small, blank square immediately in front of the field name.  If this field is checked, the next time you publish to this location (Composer will remember each location that you specify), you will not have to supply your user name or password.

Other files to include  (not depicted in this document) has two options.  If you want all of the files that are in the same directory on you PC as the Web page you are editing, you can select the All files in page's folder option as illustrated above.  However, in most cases, it is recommended that you use the Files associated with this page option so that you only update the page you are currently editing and publishing.

This completes the Publish options.  When you are ready to send a copy to the server (i.e., actually publish your document on the Web), press the OK button.

Once you have successfully published a document, future modifications to the document can be published simply by pressing the Publish button (Composer will remember all the information that is required).  To specify the location that the document is to be published to, simply press the down arrow symbol located at the right-hand side of the HTTP or FTP Location to publish to: field.  Then select the location you want to publish to from the list that will appear (this is useful if you are using subdirectories or different servers).
 

 
 
What to do if a published page appears unchanged:  After you publish your document, you may find that the page appears unchanged when you invoke the Navigator (Web browser) to see how it looks.  This happens because the Navigator determines that the page has been previously loaded from the network--and to save time and traffic, the Navigator loads it from cache (a copy stored on your local machine).  In this case, you must force the browser to reload the page from the network instead of your cache in order to see your published version.  Hold the keyboard's SHIFT key down and click on the Reload button while viewing the desired page.
 

How to View or Edit the HTML Code

To create HTML documents with Composer, you do not need to know HTML.  But if you do, you can "tweak" things.  To view the HTML source code which Composer is creating, select the View pull-down menu at the top of the screen and select Page Source.

Alternatively, you can edit the HTML source of the page you are viewing in Composer by clicking on the Edit pull-down menu at the top of the screen and selecting HTML Source.

You can configure Composer to edit the HTML source in an editor of your own choice (such as NotePad.)  Click on the Edit pull-down menu and select Preferences.  Then, in the frame on the left, click on the plus sign in front of the word Navigator and select Applications.  In the frame on the right, scroll down until you find Hypertext Markup Language.  Highlight it and press the Edit button on the right.  Click on the Application radio button and then click on Browse button.  Locate the editor of your choice (double clicking on it to fill in the path name).
 

Click here to go back to the Top or here to go back to the Table of Contents.

Corrections/additions should be sent to the notice of webmaster@easternct.edu
Written by Stephen L. Frazier, Eastern Connecticut State University
Last modified on 11/24/97 by slf

Please let us know if you discover problems with this documentation!
       Click this arrow to go back to the Table of Contents.