Netscape Composer Tutorial

Creating web pages with the web editor Composer

P.D. & M.S. Krolak© Copyright 2005

Goals of the Lab

Goals of the Lab:• The goals of this are centered around creating

interesting, attractive, and compelling web documents in an efficient and productive manner. To learn the Netscape web editor, Composer, an editor that makes creating web pages only slightly more difficult than creating word processing documents.

• To learn how to design tables and to use the table tags to create attractive two dimensional layouts.

• To learn how to find and create a web resource page to keep track of sites that contain free and shareware resources to make creating more attractive web pages easier.

WYSIWYG editor

Writing Web Pages using Netscape 7's Web Editor, ComposerNetscape HTML editor, Composer, works like a What You See Is What You Get (WYSIWYG) word processor, e.g. MS Word.. In the previous lab we actually used some of the HTML tags and created HTML documents. To use Composer one only needs to:

– select the appropriate button in the composition toolbar,

– answer the questions in the resulting dialog box and fill in the appropriate text boxes, and

– click the [Apply] button to see what the change looks like and the [Close].

WYSIWYG editor (more)

As we move into the era of dynamic documents, this becomes harder and harder to do. In newer Web page editors, much of the action is also buried in the source code. Thus, it is hidden from the viewer. As a result, Composer and other similar editors use tags to indicate how the content behaves at the source code level.

This hidden layer could include: •Java applets, •Javascript and other scripts, •forms, and •frames.

Netscape's Composer -- a WYSIWYG HTML Editor:

To open Composer:• Open Netscape 7 Navigator • Select [Window]/Composer• Composer will appear as above• Select

The Toolbar

• The toolbar has the standard Netscape tools File, Edit, View on the left side and Window, Help

• Insert, Format, Table, and Tools contain detailed HTML functions.

[Insert]Insert:

The insert operation contains the major composer tool bar buttons, i.e.. link, target, image, H. Line, table. The major new insertion operation found only here is the insert HTML Tag.. This allows the user to insert any HTML tag not supported directly by Composer.

Insert Dialog Box Operation

Insert Image

Insert a Table

Insert Link

Insert a Named Anchor.. (an inline anchor or reference point)

Insert Horizontal Line.

Insert HTML

Insert Characters and Symbols

Break below Image

[Insert]/NamedAnchorNamed Anchor:

The named anchor operator creates an inline anchor or reference point on the Web page that can be reached from links from another point within the same page or from other documents. The name should be unique to the page. The highlighted text will normally be used to form the name, unless the document's author overrides it. When viewing the page in Composer a target's location is indicated by the tag icon. (This an example of how WYSIWYG word processors and HTML editors differ.

The Named Anchor Dialog Box

[Insert]/HorizontalLineHorizontal line or Horizontal Rule <HR> tag:

The H. Line is used to create a separator between sections of the document using a horizontal line. This used to be called a horizontal rule. There are attributes to the <HR> tag that allow for 3-D effects, greater control of length and positioning, etc. These are not all currently supported by Composer. Use the HTML editor if these attributes are needed. To create a horizontal rule, click the mouse where you want it to appear, and then click the H. Line button.

Using the Mouse to alter the length and the width of the Horizontal rule.

Clicking on the horizontal line will bring up a dialog box that will allow the user to alter the width, length, or appearance.

You may note that some pages on the Web use a graphic as a horizontal rule. These are just a special form of inline image. Thus, they can be captured like any other image on the Web and can be applied by the image button. To find archives of simple ones or animated ifs search for "image archive" + bar.

The horizontal rule can appear to be three dimensional. For example see below.

The Composition Bar

The Composition Bar offers one button tools for rapidly carrying out common

tasks.

Composition bar

• The one button tools are the most frequently used editing operations, and offer assistance with the more complex HTML tags for creating links, targets, images, horizontal rules, and, most importantly, setting up tables. Dialog boxes request user preferences and other information necessary to create the containers for the tag(s). The most common examples are the image and the table tags.

• Table tags are really containers within containers that denote colors or backgrounds, captions, horizontal and vertical alignment of text and table, and the borders of the table and each cell. Thus, the dialog box involves specifying many items.

Composition bar

• Composition bar contains frequently used functions, New, Open, Save file operations

• Publish - allows publishing the document to the web, • Browse - view the it in the browser, • Print it out• Spell check the document• Image – Add an inline image to the document• Table – Create a table • Link -- Link HTML documents, named anchors, audio

and multimedia.

New Button

New:

Click this button to create a new file (Web page).

Open Button

Open:

Open -- opens HTML files that have been created at an earlier time. The operation uses the normal Window's directory dialog window.

Save Button

Save:

As the name implies, this saves the updated file. It is probably a good idea to use File/SaveAs.. on the toolbar to make sure the file is being stored in the disk and directory you think it is. This may seem like a waste of time, but it could save an evening's work if the files turn out to stored on the lab computer's desktop and are erased by the next student user.

The nice feature of this particular save operation is that it also saves all the images to the same directory. An image rich Web page then should be stored in its own directory or folder along with its images and other multimedia.

Publish Button

Publish:

Publish replaces the need for using Ws_ftp to do a file transfer between the PC lab computer and ceweb.uml.edu where your web site resides. The Publish operation will work between any two machines. After setting up the preferences, [Publish] will allow movement of the HTML document and all the associated files with one operation. .

First Step -- Publish button

1. Click [Publish]2. Click Setting Tab

1. Site Name – ceweb.uml.edu

2. Pub address – http://ceweb.uml.edu/

3. Http address (URL) -- http://ceweb.uml.edu/User_id

4. Fill in the User_id and Password

Before Publishing

After the Web page has been:1. created, 2.edited, 3.checked for grammar, spelling, content, and appearance, and 4.finally validated with a tool like Dr. HTML (see Lab 3), then it is ready to be uploaded to your website (Published).

Page is ready to Publish

1. Click [Publish] button

2. Click Publish tab

3. Site Name – ceweb.uml.edu

4. Use the defaults and click publish button (see arrow)

Browse Button

Preview:

Clicking this will allow the author to view the current file (Web page) with the Netscape Browser. Remember that Composer and any other HTML WYSIWYG editor can show only an approximate page, as it must also include many non-display features needed to create the page. The browser is under no such obligation to display these artifacts in the final result.

Print Button

Print:

The print operation tells the specified printer to create a printed version of the Web page. Normally, the background and/or the background color is not printed, even on a color printer.

Using Images in your web page

Image possibilities

• The Image Button allows you to add images to your page.

• The images placed on a page are known as inline images.

• Clickable images that link the image to a URL are called  buttons. A button can link to another location on the page, another external page, or a sound or video.

• An image used as a background upon which the text and inline images are placed is called, naturally, a background image.

• An image with defined clickable regions that point to URLs, or cause an action when a mouse event occurs (onMouseOver, onMouseOut) is called an image map.

Image Button

Creating Inline Images:

Click the Image button to bring up the Image Properties dialog box.

Fill out the image dialog box

Image Location Tab:• Image Location – use the location

on the web, i.e. its URL or use the [Choose File..] to locate the image on your computer.

• The image is saved with the HTML file in the same directory unless the URL is relative to page location check box  is checked (clicked on), in which case it leaves it where it is..

• Use the Alternative text (short title or description for visually impaired).

• Note after the Image location is chosen a thumb nail of the image will appear.

• Advanced Edit – normally used by advanced web designer.

Image Dimensions Tab

Image Dimensions tab:

Optional if Actual size

If you need to resize, click Custom Size.•Constrained check leaves the ratio of height to width the same. •Select the new width (and height if not constrained)•The size can be either in pixels or % of window size

Image Appearance tag

Image Link tab

Table Button

Tables allow the author to create a two dimensional layout for the document. This control is necessary for a professional and pleasing appearance.

The Table Button

Table:

Tables are extremely useful in the laying and positioning of text, images, and data. HTML is designed to flow data onto a display and hence the two dimensional layout of material is difficult if not impossible in the early versions of HTML. The table container allows the designer to create these relations and to have some sense that the viewer will see the layout as the author intended.

Initial Table Dialog

• Click the Table button• Fill in the number of rows

and columns• Fill in width either in

Pixels or % of window.• Border 0 is none, 1-2 is

flat, 5-10 is a 3-d boarder• Click [Advanced Edit..]

and fill in the table attributes

• When done click [OK]

Advanced Edit – set the attributes

• The Advanced Properties Edits the Table attributes

• Click Selector arrow• Select the attribute

from the list and double click on it.

• Set the value in the Value window.

• When done click [OK]

After the table appears –Modify cells, rows, columns

• In the table click your mouse on the object to change (cell, row, col).

• Click [Table]• Cell dialog box

appears fill in changes and use [Advance Edit] to modify object’s attributes

Mistakes, Modification, and Redesign of Tables:

How do I delete a table, row, column, or cell?

• You may create too many rows or columns, and want to delete some. This is done in the following manner:  

• Click the Edit button in the Toolbar:• Undo maybe used right after creating the table to delete it and

start again.• Otherwise, you can use the Delete Table sub-menu:

– Table -- Deletes the selected Table.– Row   -- Deletes the selected Row.– Column --Deletes the selected Column.– Cell     -- Deletes the selected Cell.

• The Select Table allows the selected Table to be modified

ExamplesExamples of Row or Column Deletion

Place cursor in top row and click [Edit] /Delete Table/Row

1 4 2 5 3 6

Result 2 5 3 6

Place cursor in top row cell 1 and click [Edit] /Delete Table/column

1 2 3 4 5 6

Result

2 4 6

Spell Button

Spelling: The Spelling button starts the spelling checker, as it does in most editors. When using it on your own machine, it is often useful to teach it your special words, text, and abbreviations You should always check your spelling before placing a page on your website.

The Spell Checker Dialog Box

Linking materials

Link Button

Link:

Requires you to supply two items:

A text description of the site that the viewer will be transferred to upon clicking the text.

The URL of the linked location.

The text you supply should be a meaningful description of what will follow. If the material to be linked is a large file, likely to be slow to load, then the viewer should be informed how large the file is and given an estimate of the loading time.

The Link Properties DialogThe URL can be an absolute URL, in which case: •Type it in the "Link to" window in the dialog box.•Copy from the Netscape Location: window and paste in the second window.•Place the mouse on the text link and click the right mouse button; then select the Copy Link to Clipboard option. Finally, paste it in the "Link to" window.

The URL can be a file in the current system's directory, (i.e. a relative URL). •A simpler method is to click [Choose file..] and use the usual Window's directory dialog box to find the correct file, highlight it, and click [Open].•After the link's text and URL are completed and click [OK].

Linking to Special URLs

Linking to Special URLs including Mailto to setup Email Links•Review the material on special URLs such as: ftp, etc.•The Mailto link is of major interest to most authors. Simply fill in the text as in a general link in the second window:

Mailto:Author's_Email_Address

•Where Author's_Email_Address is your usual email address, e.g. pkrolak@cs.uml.edu

The style bar (Formatting Bar)

Creating the look and feel of the document.

Formatting Tool bar -- Style bar

• The style bar allows the author to create the html text containers, i.e. physical, logical, and font.

• Lists – ordered and unordered • Tab right and left • Alignment

– Left– Center– Right– Justified

Style

Changing the font

In the above row of icons that there is a drop down list for paragraph formats, the color selector for text and backgrounds, the highlight color, and [-a] button to decrease the font size, and [+a]: button to increase the font size.

By clicking on the button with the small black triangle, a list of paragraph format options will appear

The style:

First highlight the text that is placed in the style container. Click on the selector arrow for the pull down menu of choices (see below). Click on the choice of container. Click on the highlighted text.

Text and Background Color Selection

Color Selection:

The top square shows the current text color. Click on the square and select the new text color.

The bottom square shows the background color. Click on the square and select the new background color.

Selecting colors

The color of the text (click on the selected color)

The default color palette for the font will appear when the user clicked on the top color square (the Text) or the lower square (the background color). The Color selector will appear below.

The choice for more colors than those in the color table the user can try using a color name like 'Navy" or using the RGB hex number. See the HTML color section in the HTML Tag lesson.

Highlighting

Background highlighter:

Highlight the desired text and click the [Highlight] button and select the desired color.

Physical Text

Physical Appearance of the Text Buttons

Highlight the text, click one or more button choices (bold, italic, underline) and click on highlighted text to apply.

The Bold button:

Click on the Bold Capital A to turn on -- click again to turn off.

The Italic button:

Click on the italic Capital A to turn on -- click again to turn off.

The Underline button:

Click on the underlined Capital A to turn on -- click again to turn off.

ListsSimple lists breaks down into two main types:

– Unordered lists with each item denoted by a printer's bullet or other symbol , or

– Ordered lists (those that use a number or letter)

Other list types that require the use of the Format button on the tool bar are: – Definition, and– Dictionary– Menu

Note that the Unordered List will select the style of the bullet (disk) for you based on rules of nesting or indentation. Similarly, for Ordered Lists, it will select order element type (numbers or alphabetic characters). If this offends your sense of layout,  use the HTML editor to override Composer's selection. You can achieve almost all the control needed for any list layout -- select the [Format] button/Character Properties/Paragraph, then select the correct options to determine list style, type of character or disc to display, and the starting value. This is tedious, but necessary for greater control over the details.

Text Alignment

Text Alignment:

Tab out

Clicking on button causes the cursor to tab to the right.

Tab in

Clicking on button causes the cursor to tab to the left.

Unordered List

The Unordered List

To create an unordered (bullet) list:

Click on the button to turn it on.

Enter each list item and end the item by [Enter]

Click the button to it turn off.

This will tab out and start a new paragraph.

Ordered List

The Ordered List

To create an ordered (numbered) list:

1. Click on the button to turn it on. 2. Enter each list item and end the item by [Enter]

3. Click the button to turn it off. 4. This will tab out and start a new paragraph.

Align the text element

Align the text element

Click on the button; select one of the four buttons – 1. Left, 2. Center, 3. Right, and 4. Justify alignment.

FAQsQ: How do I begin to use Composer:

Ans: It is recommended that the reader start by reading the Netscape 7 Composer Users Guide: http://www.cs.uml.edu/~pkrolak/lab4/ComposerIntroduction/Net7UserGuide.html

Q: How do I open Composer to begin editing? Ans.: In the Browser there are several options:

• First, to edit a Web page currently being displayed, click [File]/Edit Page.

• Second, to edit a page from the user's directory or with a known URL, click [File]/Open Page. The dialog box will appear; give the URL, or, if the file is on the user's machine, select [Choose File..], then select the file and hit Open in the directory dialog box. In the Open File Dialog box, again select Composer and Open.

• Third, on the tool bar click [Window] and select Composer. • At the bottom of the Navigator Window click the Composer icon  • Finally, click [Ctrl-4].

FAQs (more)

Q: How do I set the background color, image, or the default colors of the text, link, alink (active link), or the vlink (visited link)? Ans.: Click [Format]/Page Colors and Backgrounds ...

Q: How do I get special characters, for instance the copyright symbol, into my text? Ans.: Click [Insert]/Characters and Symbols ...  For more  information see.

Q: How do I get the Netscape Composer plugins? Ans: The plugins and instructions for using them --  http://developer.netscape.com/docs/examples/plugins/composer/index.html

FAQs (more)Q: How do I find out what plug-ins are available on my copy of 

Composer? Ans.: Click on the [Tools] menu.

Q: How do I stop the Link operator from "linking the text following the text that was specified"? Ans.: Composer still thinks that the container for the link text is open. Highlight the text that you don't want to be part of the Link, click [Format] and select "Remove Links".

Q; How do I insert tags not supported by the current Composer editor? Ans: Composer does not support the full set of HTML tags -- <base>, <Object>, <Embed>. To overcome this one can insert the non-supported tags one at a time using [Insert]/HTML Tag.. See the discussion on the [Insert]  Also by clicking on the <HTML> Source tab on the bottom of the Composer window one can edit the source code directly.