Netscape Communicator Web Authoring

Basics of Web Page Creation and Editing with Composer (included as part of Netscape and Mozilla).
COMPOSER is a web editing program that is part of Mozilla and older versions of the Netscape browsers. Though it has limits, composer is easy to use and creates fast loading web page files with simple syntax.
[Print landscape for best copy] (Last Edited 5/1/07 ADA)

Starting Composer
Editing and Formatting--the basics
Saving Your Page to A floppy or the hard drive
Publishing Your page on the server with Composer
Moving your page to the server with FTP

For a more Comprehensive Composer Tutorial try this one created by a Philosopher professor at CSU Longbeach or check out Netscape documentation.

Starting
First find and start Mozilla (or Netscape version 7.X). You then have two choices for web editing:
1. Start a new web page in Composer
2. Edit a previously created web page

1. Start a new web page in Composer
-Choose New from the File menu
-Drag across to the sub menu and select the following

Composer Page <--to open a blank page

After Choosing Composer Page:

A blank page will open in Composer
Type as you would when using a word processing program. Go to the Editing section to get an overview of the facilities such as inserting graphics formatting text, inserting links in Composer

Choose Save as from the File menu and save to your hard drive or floppy disk or choose Publish from the File menu to place your edited page on a web server. I suggest saveing to a file folder to make sure you have back up copies of all your web files.. I then use an FTP program to move my files to the web server. Don't forget to transfer all nesessary web files (web pages or not like Word or PowerPoint, a web page has separate text and format files [html], graphics [.gif or .jpg] files, sound [.wav] files as well as anamation and movies--all must be transferred for your web page to function properly) ---TOP---

_________________________________

2. Edit a previously created web page

Start Communicator
Open the page you wish to edit in the browser. This file could be on your computers hard drive, a floppy or from the web but it works best if the files are already on your computer.

NOTE: You should have a folder created for your files if you are editing a page that is from the internet because you will need to save the text [html] and graphics [.gif or .jpg] files.

Choose Edit Page from the File menu and your page will open in Composer. If you opened the page from the internet you will be asked to save the page, save in your previously created folder. Make changes, check the Editing section of this tutorial to get an overview of the editing tools in Composer
Choose Save from the File menu and save to your hard drive or floppy disk

You could then choose Publish from the File menu to place your edited page on a web server. I usually save to a file folder I previously set up for my page (html and graphics) and use an FTP program to move to the web server. I have found it easier to keep track of and maintain a backup of my files this way

---TOP---

Editing/formatting--the basics
Think word processing and you will be able to use most of the editing functions in Composer. Type as you would normally, word wrap works and even self adjusts to different screen sizes. You can get a quick overview of the editing formatting tools by moving the mouse cursor to each icon. A brief identification for that icon will appear. The major functions include:
(1) Format Toolbar
(2) Composition Toolbar
(3) Inserting and Editing a Graphic _________________________________ <> (1) The Formatting Toolbars

When editing text, select text to be formatted then choose tool <>
<>

A. Body text type Paragraph, Heading Size, etc. Choose size for headings, lists etc. Press black down arrow, then select heading size for selected text.
B. Font Color. Click top square and choose a text color. Press black down arrow, then select color for selected text.
C. Font Color. Click tool and choose a highlight color for text
D. Decrease Font Size. Select text. click -a to decrease text size.
E. Increase Font Size. Select text. click +a to decrease text size.
F. Bold. Select text and click B tool and selected text will be changed to bold or unbolds bold selected text
G. Italic. Select text, click I tool and selected text will be Italicized or unitalizes Italicized selected text
H. Underline. Select text, click U and selected text will be underlined or underlined text will loose its underline
I.   Bullited Lists (HTML-Unordered Lists). Select items to be in list and clicking the tool places a bullet in front of each item of a selected list or takes bullets from bullited selected lists
J.   Numbered Lists (HTML-Ordered Lists). Select items to be in numbered list and clicking the tool places a sequential number in front of each item of a K. Left margin to the left, moves left margin of selected text to the left
L.   Left margin to the right moves left margin of selected text to the right
M. Align left, aligns selected text on left
N.   Align center, aligns selected text on center
O. Align right, aligns selected text on right
P. Align full justified, aligns selected text as full justified
Q.   Display layers , displays layers of text and graphics
R.   Moves selected item to the front layer
S.    Moves selected item to the back layer

Horizontal line, you can insert a horizontal line at any location on your web page by placing your cursor at the location then choosing Horizontal Line from Insert menu

_________________________________

(2) T

he Composition Toolbar

A. New, opens a new blank page for editing. You could freeform do this or use a template or the wizard.
B. Open, opens a web page located on your PC floppy or hard drive.
C. Save, saves the web page on your PC floppy or hard drive,
D. Publish, lets you place your web page on your server.
E. Browse, lets you save your page then previews saved page changes in the the browser (Mozilla or Netscape)
F. Print, sends the web page to the printer
G. Link, will open a dialog box in which you can place a web address or named anchor to link to from selected text or graphic. Select the text or graphic you want to be the link prior to clicking the link icon.

NOTE: (1) You can insert a "Named Anchor", a link destination on a web page by selecting text or graphic to be the link then choosing Insert/Named Anchor.. You can then link to this anchor by choosing the text or graphic to be the link, clicking the Link tool, clicking the arrow beside the Link Location box and choosing the anchor

H. Image, opens a dialog box that lets you bring in a graphic and determine the size and text placement for the graphic (should be either jpg or gif) image.
I. Table inserts a Table at the cursor location. You choose the number of rows and columns needed in the dialog box that appears when this icon is clicked.
J. Spelling, will check the spelling of your page

_________________________________

(3) Inserting and Editing a Graphic

(a) Choose the Insert menu then Image and find the graphic in the dialog box on your hard drive or floppy that you want to insert .

(b)

Click the image tool in the Composition toolbar

(c) On the dialog box that opens, find the graphic you want to insert on your hard drive or floppy

NOTE: In the image properties dialog box you must always place text in the Alternate Text box that would describe the graphic to a disabled person. It is federally mandated that web pages on education sites be ADA compliant

The image dialog box can also be used to set:
(a) Dimensions of the graphic,

Click Actual Size to set the size on your page to the size of the original. This the best for overall appearance in most cases.
Click the Constrain box then change either the Width or Height to change the size

(b) Appearances You can determine the Spacing around the image and Align Text To Image

(c) Link the graphic to a web site or named anchor (click the arrow beside the entry box to see named anchors on your page)

Image Properties Dialog Dimensions Tab.JPG

(a) Dimension Tab (b) Appearance Tab

(b) Link Tab

---TOP---

Saving Your page to a floppy or the hard drive
Saving

Choose Save As from the File menu or click the save tool on the composition toolbar
Give your file a name with the suffix html or htm (I usually use htm for maximum compatibility with different servers)
Find the floppy disk or the folder on your hard drive folder. (NOTE: you should create a folder specifically fro your web pages and keep all your web files pages, graphics. music files, etc. inn this folder)
You should save frequently when working on your web page by using the save key feature

---TOP--- Publishing Your page to a Server --Warning! I have experienced difficulties with this procedure and do not use it! I use FTP, see below. Always make sure you have a backup copy of your page and its graphics on your hard drive or a floppy.

Choose Publish from the File menu then
In the publish dialog box:

Insert the Site Name, the file name, the name of your web page file.
Insert the Publishing address, an ftp address for the your web server. If your web pages are on the academic server the ftp address will be the like the example below up to my name.
ftp://www.academic.csub.edu/your runner mai luser name/
Insert the HTTP: Address of your home page, the web URL for your web page
Insert your User name for the server
Insert your Password for the server
When the dialog box entries are complete click Publish
Click the Continue button if a Security Information warning appears
Click the OK button when the box announcing how many files were transferred
Open your page from the web and check it out.

Moving your page to the server with FTP ---TOP---