Netscape Composer Tutorial/Reference

(Long version)


Netscape Composer is a component of the Netscape 4.x Communicator program. It allows users to create simple web pages without learning any web coding (HTML). It is available for free to ALL users at: http://www.netscape.com/download/index.html.

Step 1: Building the page: Editing vs. Browsing the Web:

When you view the web in a web browser (Netscape Navigator), you are the audience for a web site. When you use Composer you are the author of your own web page content.  You can type in the composer screen to create a web page.  Composer documents are on your hard drive or disk, not on the Internet.  Once you are finished, you have to upload your finished page onto the Internet.

Getting Started and Staying Organized:

Create a directory or folder called www (or something similar) on your disk. Put all image files and html files
in this folder. You must keep your files organized to avoid leaving files on lab hard drives
while you are developing your page.

Starting a web page with Netscape Composer


1.) Start Composer by opening Netscape Communicator and choosing (Page) Composer from the Windows menu on a PC or from the Netscape icon menu on a Macintosh

Create New Pages:

Choose Blank Page from under the File/New menu.

Choose File/Edit Page to save a web page you are looking at  to your hard drive. This is okay to do to get ideas for pages. You can edit the page as a template, however, you can not use images and content that you do not own copyright to without permission. Write to the web author for permission.

Edit Pages in Progress:
1.) Use File/Open Page in Composer to re-open a page you wish to continue working on from your disk.
2.) Choose File/Save As to locate where you are saving the work.  Continue to Save.

Adding Text to the Page

Option A: Just Type...: Click your cursor in the Netscape composer window and begin typing the text of your page.

OR

Option B: Copy and Paste:

  1. Open an existing text or word processing document.
  2. Highlight the text you would like to put in your web page.
  3. Select Edit/Copy in the word processing or text editor.
  4. Click the Netscape Composer window to make it active
  5. Click the cursor where you want to place the text.
  6. Select Edit/Paste in the Netscape composer menu.Begin Formatting text as described below.
  7. Quit the word processing or text editor program.

Saving into www on your disk

Choose Save As from the File menu. Name your lead document index.html
Any linked documents you create later can be named anything with a .html extension.
index.html is customary for the lead page.

Save often and frequently to avoid losing work. Notice where you are saving to.
Is it always on your disk in your www directory? If not you will have multiple copies
of your page and lose work you do.

Setting up Titles and Page Properties (color, link and text color)

Mac:
Select Format > Page Properties

PC:
Select Format > Page Colors and Properties

Type in a Title of your page in the general tab.

(Optional) In the color settings, select an image file to tile as a background or click on the boxes next to background color, text color, link colors to select colors for each.

Formatting Toolbar

Headings, Fonts, Font Size and Color

1.) Roll your cursor over each item in the format tool bar that appears at the top of the Netscape composer window.  Pause a moment until the description appears of what it does.
2.) Selecting text and clicking these buttons will apply each characteristic.
 

Colored Text and Font Size Example

 Paragraph styles allow you to choose heading sizes as you can see in the example. 

Heading 1 or Heading 2 are used as the opening heading. 

Heading 3 or 4 is usually used for sub-headings. 

Normal will appear as whatever Font and Size you choose. 

Font color can be changed by selecting text and picking a color from the palette that appears. The current selection is black. 
 

  • List Items appear 
  • as bulletted items.
    		•

    Text Formatting, Lists, Indenting and Alignment

    Highlight text on your web page and select the following buttons for the given effect.
     
    Bold text
    Italic text
    Underlined text
    No style: Use to remove an unwanted style or link.
    • Bulletted list Item 1
    • Bulletted list Item 2
    1. Numbered list Item 1
    2. Numbered list Item 2
    Indent examples

    Decrease Indent of a line
    or paragraph

    Alignment Examples

    Choose any of the three: left, center or right for the following effect.
    Left aligned text

    Center Aligned text
    Right aligned text

    Composition Toolbar

    Moving Text Around the Page: Cut, Copy, Paste

    If you wish to move text on your Composer page to another area of your page, you can select the text and click the Copy or Cut button. Click your cursor to the spot you wish to relocate the item and you can click the Paste button

    Spell Checking and Find

    Spelling can be checked through Composer. Click Spelling and the open page will be checked for spelling. Ignore or Replace based on your knowledge. The dictionary will not know proper names. However, it does recognize many Internet terms that word processors do not recognize.

    Find will allow you to find text on the open page.

    Links and Mailtos

    External links: To add connections to other web pages,  Type the text that you want to be clickable, such as "Yahoo" and then type the URL (web address) to connect to: such as http://www.yahoo.com in the link dialog box.  Remember to put http:// before ALL web addresses!

    Local Documents: In the link dialog box: type the text you want to be clickable. Type the word resume if you are linking to your resume.html document. Then type resume.html in the link to page or local file of the link dialog box.

    Be sure to put your local documents such as resume.html in your www folder.

    Mailto:
    At the bottom of your page you can add a clickable mailto address to allow people on the web to write to you.
    Click the Link button and put your name and email address in the text to click
    In the location type: mailto:youremailaddress

    See example below: Marion French, mlfwml@rit.edu

    Image: Adding Image Links to the page.

    Images that appear in a web page are links to an image file. If you move the image to a different directory or folder it will no longer appear in the web page. You have broken the link.

    You can copy and paste images onto the screen or click the image button and browse to the image
    file in .GIF or .JPG image format. Leave Image in Original Location unchecked

    Click OK to place the image. Remember even if you cut and paste and image onto
    the screen, in reality it is still a separate file that is linked to the page.

    Avoid the Image Nightmare!!!

    Also,  choose Page Source from the View Menu to see if the image link looks something like:
    <IMG SRC="image.gif">
    It should not look like this unless you have a multiple directory system for your web page.
    <IMG SRC="image.gif">

     To begin  keep it simple and put image files in the same directory as your web document.

    Image size problems when you begin editing? Composer may resize your images incorrectly. To fix this, double click on the image to bring up the Image Dialog. Click the Original Size button in the Dimension section to fix this. Change Page

    H. Line: Horizontal Line

    Click to put a sectional line across as shown below. Click on it to then drag to change it's dimensions. 

    Table

    Click the Table button to create a table with as many rows and columns as you designate.
    In each cell you can type text, place links or images.

    If you right click on a table, and select Table Properties, you can change the background color of the enitre table, or if you have the cursor in one cell, you can change the color of that cell by going to Table Properties and clicking on the Cell tab.  That will allow you to edit that particular cell.
     

    Preview

    Preview will open a view of what your page will look like off the hard drive. It will look very similar to the composer window.
     

    Publish Options (Future reference ONLY!)

    Use an FTP program.  See below.  WWNFF participants DO NOT publish their pages.  It will be done by the Consultants.  Contact the staff for more info.

    For better file management control than Composer provides use an FTP program or switch editors. We recommend :
    Fetch on the Macintosh: http://www.dartmouth.edu/pages/softdev/fetch.html
    or WS-FTP or the PC:  http://www.ipswitch.com/downloads/

    Page and graphics created by Marion French, Rochester Institute of  Technology, 4/2/1999
    Edited for the Woodrow Wilson National Fellowship Foundation by Bill Lawrence, 7/3/1999
    Original page can be found at:  http://wally2.rit.edu/instruction/web/composer/