How to Create Web Pages Using Netscape Composer 4.79



   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:

  • Add, remove and modify text (edit local or remote pages saved to your disk)
  • Drag-and-drop (images, links, bookmarks, mail, news or files from Windows95 Explorer)
  • Publish documents to the Web server (simple as pressing one button!)
  • Format text
  • Change font, font size and color
  • Include objects (tables, images, lines and hyper links)
You can Download Netscape's Communicator 4.79 (if you do not have it already)
Or you can Download Netscape's Communicator 7.20 (Instructions in this page may be slightly off for it.)

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

  • Open a page in the Navigator and drag the  icon into the Composer window.

  • Result:    -- a link to that Web page.
     

  • Drag an image or HTML file from Windows95 Explorer and drop it here to create a link to that file.   Hint... move the HTML file to the same directory as the page you are creating (or editing) before creating the link.
  • Drag an image from the Navigator window and drop.  Example: (image is saved in same directory as the HTML page you are creating or editing).
  • Drag a link (from your bookmarks, mail or news windows).  For example, this link was created by dragging a bookmark from the "Edit Bookmarks" window:  DOWNLOAD.COM -- Welcome
  • If you want to associate a link with an image (so that when the user clicks on the image, it acts as a hyper link to another URL or target), right click on the image and select Create Link Using Selected...

 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.

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 workshop on
 
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.htmlon 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 fog.ccsf.cc.ca.us  Appended is the path to the directory where the files will be copied--in this illustration, /home_##/username/public_html (you have to find out your home_## directory - ## are two letters defining this directory - Tip : logon to fog and type pwd at the $ prompt)
    I
  • ...where username is your logon name for the Web server.
  • If you are a staff member, you should type:
    ftp://fog.ccsf.eud.edu/~username/public_html/
       ...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 the TLC help desk.
    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 theAll files in page's folder option as illustrated above. However, in most cases, it is recommended that you use theFiles associated with this pageoption 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 theHTTP 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).
    PERMISSIONS
    In order for your published files to be accessible on the Web to the general public, you must change the permissions in fog. This has been automatized recently. Just access your account on fog through Telnet and type setup at the $ prompt. The permissions will be automatically set for your new files freshly uploaded. Repeat this process everytime you upload new files. If you modify an existing file il is not necessary to repeat this process. The permisssions set will remain,
     
    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'sSHIFT 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).