About Composer

Netscape Composer integrates powerful What-You-See-Is-What-You-Get (WYSIWYG) document creation capabilities into Netscape Communicator's already rich set of World Wide Web features. In addition to electronic mail, threaded discussion group, and file transfer features included in Communicator, Composer makes composing for the Web, email, or newsgroups a simple cut-and-paste, drag-and-drop process.

The document creation capabilities in Composer are designed to provide both experienced and beginning content creators with a simple yet powerful solution for editing and publishing online documents. WYSIWYG editing allows first-time users to create dynamic online documents easily and publish them to local file systems and remote servers with ease.

There are a lot of things you can do with Composer:


Starting Composer

You can create a Web document from scratch, edit the page you're browsing, or open an existing document that you want to modify.

Creating a New Page

To quickly create a new web page:

To create a web page using a template or with Netscape's Page wizard:

Note: The Netscape Template Web Site and Page wizard are located on the Netscape home site. To access them, you must be connected to the Internet.

See Also
Using the Toolbars and Pop-up Menus


Editing the Page You're Browsing

To edit the page (or frame) you're currently browsing:
See Also
Using the Toolbars and Pop-up Menus


Editing an Existing Page

To edit an existing page saved locally or in a remote location:
  1. Choose Open Page (Open Page...in Composer on MacOS) from the File menu in Composer.

  2. You see a dialog box where you can enter the filename or URL of the page you want to edit.
  3. Select the file you want, click Composer, then click Open.
  4. A Composer window opens containing the specified file.
See Also
Using the Toolbars and Pop-up Menus


Using the Toolbars and Pop-up Menus

The two Composer toolbars contain buttons corresponding to frequently-used commands. You can access all of these commands from menus, but it's generally quicker to use the toolbars.

Composition Toolbar

Use these items to create, open, and save Web pages, publish (upload) files to a remote server; view your Web page in the browser; perform standard editing tasks; create links and targets; insert images, horizontal lines, and tables; check spelling.

Formatting Toolbar

Use these items to apply paragraph formatting; specify fonts, font sizes, and font styles; apply text color, and control text alignment.

You can hide or display these toolbars by clicking the tab to the left of each toolbar. You can also hide or display these toolbars by choosing their respective menu items from the View menu.

Pop-up Menus

Pop-up menus (context menus on MacOS) are a handy way to get to frequently used commands: you select an object (such as text or a link) and then right-click the mouse to display the pop-up menu (mouse over on MacOS). The commands that are available depend on what's selected when you do this. For example, pop-up menus for links provide you with commands for copying the link or modifying its properties.

Place the pointer on Use the pop-up menu to
Text Change character, paragraph, or list properties; insert a new link; or paste from the clipboard.
A link Change link, paragraph, or list properties; open the link in a browse or edit window; copy or remove the link; or add a bookmark for the link.
An image Change link, paragraph, or list properties; create a link using the image; save the image under a new name; make the image the page background; cut, copy, or paste.
A horizontal line Change horizontal line, paragraph, or list properties, cut, copy, or paste.
An HTML tag marker Change tag, paragraph, or list properties; cut, copy, or paste.
A table Change paragraph, character, or list properties; change table, row, or cell properties; insert or delete a table, column, row, or cell; insert a link; paste.

Using Drag and Drop

Several drag-and-drop operations are available when you use Composer (Windows and MacOS only). You can:

See Also
Working with Hyperlinks
Working with Images


About Web Pages

Composer makes creating Web pages as easy as creating new documents in your favorite word-processing program. A few steps is all it takes. In this section, you'll learn the basics of becoming a Web page author.
Summary
Creating Your First Web Page
Browsing Your New Page
Basic Text Editing
Finding Text
Checking the Spelling
Composer Styles and Formats
HTML Basics
Working with Tables
Setting Page Properties
Setting Composer Preferences


Creating Your First Web Page

Summary

  1. From the File menu, choose New and then choose Blank Page.
  2. Type some text in the Composer window.
  3. Choose Save from the File menu or click the Save button and name the file.

Details

  1. From the File menu, choose New and then choose Blank Page. Or, click the New Page button on the Composition toolbar.

  2. You see the Composer window with a blank page, and toolbars at the top.
  3. Choose Save from the File menu (or click the Save button on the Composition toolbar).

  4. You see a dialog box where you can enter a filename.
  5. Name your file something unique, such as firstpg.htm, give the page a title, and then click OK. If you are using an operating system that supports long filenames (such as MacOS), you can give the file an .HTML extension.

Browsing Your New Page

  1. Choose Save from the File menu and give the page a title and a filename if you haven't already done so.
  2. Choose Browse Page to view your newly created page in the Navigator window. The Composer window remains open behind the new Navigator window.

Basic Text Editing

Editing text in Composer works the same as in most word-processing applications. Composer's editing features are of vital importance, because writing is what you'll spend most of your time doing when creating your Web pages.
Summary
Entering Text
Selecting Text
Cut, Copy and Paste
Finding Text
Checking the Spelling


Entering Text

As you move the mouse cursor over the Composer window, it appears as an I-beam. When you click the mouse, an insertion bar marks the point where typed text apppears in the window. You can start typing right away.

Composer supports all normal keyboard characters, such as the ampersand and percent sign. To insert symbols, such as the copyright symbol, run the Windows Character Map application (or use the Key Caps program on MacOS). Change the font to Times Roman, copy the symbol you want, and then paste it into the Composer window.
Note: To cancel the effect of the most recently performed command, choose Undo from the Edit menu. (Not all actions can be undone). To perform the most recent action again, choose Redo from the Edit menu.


Selecting Text

In Windows, once you've selected a word or paragraph, you can drag and then drop it to a new location anywhere in the Composer window (you see the insertion bar change to a hand icon).

Tip: Choose Show Paragraph Marks from the View menu to see where paragraph marks are located in your document--they appear as black rectangles. A short horizontal line appears to indicate the end of the page.


Cut, Copy, and Paste

You can enter text in your document by pasting from almost any source. For example, you can select text on a page you are viewing in the Navigator window and copy it by choosing Copy from the Edit menu. You can then paste it into the page you are currently editing by choosing Paste from the Edit menu.

To remove text from your document, select it and then choose Cut from the Edit menu.

Tip: In Windows, you can right-click your mouse on selected text to quickly cut, copy, or paste the text.

Note: Unlike text from the Composer window, text that you cut or copy from the Navigator window does not retain formatting information (such as fonts and font styles). You can always temporarily edit a page in order to copy styled text from it, however.


Finding Text

Summary

  1. Choose Find in Page from the Edit menu.
  2. Enter the characters you want to search for.
  3. If you wish, specify a search option, and then click Find.

Details

  1. Choose Find in Page from the Edit menu to display the Find dialog box.
  2. Enter the characters you wish to search for in the Find What text box (Find on Page on MacOS).
  3. Click one of the following search options:

Checking the Spelling

Summary

Composer checks for spelling errors using its main dictionary, which contains most common words. If Composer finds a word that is not in the main dictionary, it displays the word in the Check Spelling dialog box and gives you choices for correcting the possible misspelling.

Details

You can check the spelling of a selected word, a selection of text, or an entire document. To check the spelling in the current document:
  1. Do one of the following:
  2. The Check Spelling dialog box appears.
  3. For each word that is found, choose whether to correct it, ignore it, or add it to the dictionary.
  4. To return to the document, click Stop.

About the Check Spelling Dialog Box

(Windows and Unix only)

Use the items in the Check Spelling dialog box to correct the possible misspellings for selected words and to edit or add words to the current dictionary.


About the Edit Dictionary Dialog Box

(Windows only)

Use the Edit Dictionary dialog box to add, replace, and remove words from your personal dictionary.


Composer Styles and Formats

Formatting your text and using color goes a long way to making your Web pages or presentations unique and interesting. Add images, horizontal lines, tables, and links and you start to understand why the Web has attracted so much attention. These elements of style are the "stuff" of the Web page.
Summary
Formatting Styles
About Composer Fonts
Inserting Horizontal Lines
HTML Basics


Formatting Styles

There are two types of format styles available to you in Composer:
Summary
Paragraph Formats
Character Formats


Paragraph Formats

Summary

Paragraph formatting affects all paragraphs in the selection, or the paragraph in which the insertion point is located.

Details

These paragraph formats are available in Composer: In addition to the formats mentioned above, you can also apply center, right-justify and left-justify alignment options. Choose Align from the Format menu, or select an alignment button from the Formatting toolbar.

Headings 1 to 6

Headings divide sections of text. HTML defines six heading levels, which are reflected in the six heading choices that Composer provides. You can apply one of these heading levels by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing Heading from the Format menu. The headings differ from regular text by their type size.

Examples of heading levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Address

You can apply the Address paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing Paragraph from the Format menu.This format is used for a Web page "signature" that indicates who wrote the page and who to contact for more information, as in this example:
Carlos Goldstein@netscape.com
You might want to also include the date, any copyright notices, and other applicable information. This format usually appears at the bottom of the Web page and is often preceded by a horizontal line.

List Item

You can apply the List Item paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing List from the Format menu.

The List Item style formats text in a list with a special symbol or bullet at the beginning of each line. Composer allows you to use the following types of lists:

Unnumbered: Items are preceded by a bullet or other symbol.
Numbered: Items are preceded by numbers or letters.
Directory: Short items display horizontally in columns, as in a DOS directory listing.
Menu: Short items appear without bullets or numbers.
Description: Sometimes called a Definition or Glossary list. Items are indented. This style is often used for definitions.
Note: Navigator does not display Directory and Menu styles (it displays these styles as normal text), but other browsers may display them.

Tip: In Windows 95, you can right-click anywhere in a paragraph and choose Paragraph/List Properties from the pop-up menu to display the Character Properties dialog box (Character Info on MacOS).


Formatted

You can apply the Formatted paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing Paragraph from the Format menu.

Most browsers remove any extra white space, tabs, and paragraph returns present in your text. However, text that contains white space and uses the Formatted style is displayed with the white space intact. This is useful for elements such as code examples, tables, and mail messages that you want displayed in a fixed-width font, as in this example below:

alert("Hello!")

Description Title

You can apply the Description Title list style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing List from the Format menu.

Use the Description Title format for glossaries, definition lists, or other situations where left-justified short entries pair up with longer blocks of indented text. Usually used in combination with the Description Text format, as in this example:

Glossary Term
Use the Description Text format to indent lines of text, such as listings of definitions in a glossary or other kinds of list. Use Description Title to format the glossary term itself.


Description Text

You can apply the Description Text paragraph style by clicking the Paragraph style drop-down list on the Formatting toolbar, or by choosing List from the Format menu.

Use the Description Text format for glossaries or other kinds of lists where a single term or line needs to be associated with a block of indented text, as in this example:

Glossary Term
Use the Description Text format to indent lines of text, such as listings of definitions in a glossary or other kinds of list. Use Description Title to format the glossary term itself.


About the Paragraph Properties Dialog Box

Use the items on the Paragraph Properties dialog box to specify a paragraph style and text alignment for paragraphs. If you select the List Item paragraph style, additional list-specific options become available. Note: Netscape Navigator does not display the Directory or Menu styles (it displays these styles as normal text), but other browsers may display them.

Character Formats

Summary

You can apply character formats to one or more characters, to text within a paragraph, or to text spanning parts of multiple paragraphs. In addition to color, the following character formats are currently supported in Composer:

Details

To apply a character format:
  1. Select the text.
  2. Choose one of three ways to apply a character format:
To remove character formats from selected text:
See Also
Adding Color to Text


Adding Color to Text

Applying color to selected text is a good way to emphasize different parts of your Web page.
  1. Select the text whose color you want to change and click the Font Color button on the Formatting toolbar. In Windows, you can also right-click your mouse on the selected text to display the Character Properties dialog and then select Use Color.
  2. In the Color dialog, select a color or define your own custom color.You can specify default text color in the Colors and Background panel of the Page Colors and Properties (Page Properties on MacOS) dialog box.

About the Character Properties Dialog Box

Use the items in the Character Properties dialog box to specify attributes such as the font, font size, color, and style for selected characters. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

About Composer Fonts

Summary
Choosing a Font
Choosing Font Sizes

Composer provides you with the ability to create pages using fonts that work across platform (e.g., MacOS, Windows or Unix system), as well as the fonts installed in your computer system. You can also choose to let the browser font display setting dictate which the viewer sees when reading your page. Specifying a font for text corresponds to applying the "font face" HTML tag (with the exception of fixed width and variable width fonts).

Cross-Platform Fonts

Composer provides three fonts that map appropriately to similar fonts across operating systems. For example, if you create a page using Arial (the default Windows font), it automatically maps to a similar font, Helvetica, when viewed on MacOS or Unix systems.

This table shows how the fonts correspond to each operating system:

Windows MacOS Unix
Arial Helvetica Helvetica
Courier New Courier Courier
Times New Roman Times Times

Browser Font Display

You can create pages that use only the display font setting specified by your (or your reader's) browser. This type of font setting applies to variable width and fixed width text. In Navigator, you can set the font display for variable width and fixed width text in the Appearance/Fonts panel of the Preferences dialog box. For example, if you've specified Times New Roman as the font to use for displaying variable width text, and you create a page in Composer that uses the Variable Width font setting, then your page will be displayed in Navigator using the Times New Roman font. Similarly, you can apply the Fixed Width font face setting to the text in your Composer page, and Navigator will display it using whichever font is specified for fixed width display.

Note: Keep in mind that your readers can always choose to override your settings and choose another font for their default page display.


Choosing a Font

Summary

Details

In addition to the fonts installed in your system, you can also apply the font Navigator uses to display fixed width or variable width text. You specify the fonts for variable and fixed width text in the Appearances/Font panel of the Preferences dialog box (choose Preferences from the Edit menu, and then select the Appearance/Font category).

To apply a font:

  1. Select some text or place the insertion point in your page where you want the font to begin.
  2. Choose one of three ways to apply a font:
  3. Select Variable Width or Fixed Width, or choose a specific font from the list.

Choosing Font Sizes

Summary

  1. Select a font size mode in the Composer Preferences dialog box (Windows only).
  2. Select the font size you want in the Composer window.

Details

Composer uses the setting you specified for font size mode in the General panel of the Composer Preferences dialog box to display the font size choices available to you (Windows only). Depending on what you're familiar with, you can choose to display font sizes as relative HTML sizes, or as absolute point sizes, or both.

You can choose one of three modes of display for font sizes. To choose a font size mode:

  1. From the Edit menu, choose Preferences and then select the Composer category (Windows only).
  2. You see the General panel of Composer Preferences.

  3. At Font Size Mode, select the type of font sizes you want to display (Windows only):

To apply a font size:

  1. Select some text or place the insertion point in your page where you want the font to begin.
  2. Choose one of three ways to apply a font:
See Also
Composer Preferences-General

Inserting Horizontal Lines

To insert a horizontal line:

  1. Click the location in the Composer window where you want the line to appear.
  2. Click the Horizontal line button or choose Horizontal Line from the Insert menu. Double-click on the line and choose Horizontal Line Properties from the pop-up menu to display the Horizontal Line Properties dialog box, where you can specify alignment, width, height, and whether to use 3-D shading.

Tip: Double-clicking non-text objects in your document lets you modify their properties.


HTML Basics

Strictly speaking, you don't need to know HTML to use the Composer. However, it pays to be familiar with what's really going on inside an HTML document when you're troubleshooting a Web page you're working on. If you don't get the results you want, it's useful to look at the raw HTML file and tags to see what the problem might be.
Formatting in HTML documents consists of tags of plain ASCII text instructions enclosed in angle brackets <>. A format area typically uses two tags: one at the beginning and another at the end. For example, to designate a particular line as a heading, you enclose the heading text inside tags that mark the beginning and end:

<H3>Hello World Wide Web!</H3>

The <H3> tag marks the beginning of text to be considered a level 3 heading (Heading 3); the </H3> tag marks the end of the text heading. Instead of the usual manual way of inserting this tag, the Composer lets you automatically apply an H1 format using the drop-down style list on the Paragraph toolbar, or by choosing Paragraph from the Format menu.

How Composer formats correspond to HTML tags

This Composer format Corresponds in HTML to
Address <address>
Formatted <PRE>
List Item <LI>
Unnumbered <UL>
Numbered <OL>
Directory <DIR>
Menu <MENU>
Description List <DL>
Description Title <DT>
Description Text <DD>

Inserting Raw HTML

If you already have an understanding of HTML you can insert HTML tags that aren't available from Composer's Format menu. This feature is particularly useful for inserting HTML form tags, and JavaScript, and plug-in code into your documents. Although the Composer does not display these objects, it does insert special HTML tag icons so you know where they are.

You can insert and edit them using the HTML Tag dialog box and then browse your document to see them.

Tip: Double-click the tag icons to display the HTML Tag dialog box and quickly edit your HTML, Java applet, or plug-in code.

To insert HTML tags:

  1. Choose HTML Tag from the Insert menu.
  2. A dialog box appears that lets you type the HTML you want to insert at the selected place in your document.

  3. Click Enter at the end of each line to ensure that your HTML is easily readable.
  4. Click Verify to have Composer check the HTML you've typed.
  5. The Composer checks to make sure you have both opening and closing brackets < > around your HTML, and quotation marks around any attribute text.


About the HTML Tag Dialog Box

Use the HTML Tag dialog box to enter HTML tags (including Java Script) that aren't available from Composer's Format menus. Click Verify to have Composer check to make sure you have both opening and closing brackets < > around your HTML, and quotation marks around any attribute text.

Note: You can enter only one tag at a time. For example:

In this example, you would type each line or tag separately. So, you would need to type the first line in the box and click OK, type the second and click OK, and so on, for each tag you want to add to your page.

Although Composer not display these objects, it does insert special HTML Tag icons so you know where they are. You can still insert and edit them using the HTML Tag box, and then browse your document to see them.


About the Extra HTML Tag Dialog Box

When you're creating tables and links, you can use the Extra HTML dialog box to enter additional HTML attributes or JavaScript for the particular <TABLE> or <HREF> tag you working with.


Working with Tables

Tables are useful for presenting information you want to display in a grid, such as a calendar, or in a spreadsheet, such as financial data. But you can also use tables whenever you want to have greater control over page layout than you normally would. For example, you could combine graphics in a table to create a resume or a newsletter. Or, you could create a table that encompasses an entire page, and then nest tables within the main table for even more layout control.

Summary
Inserting a Table
Selecting and Deleting Tables
Adding and Deleting Rows, Columns, and Cells
Setting Table Properties

Inserting a Table

Summary

Details

To insert a table:
  1. Place the insertion point where you want the table to appear in your document.
  2. Choose Table from the Insert menu or click the Insert Table button on the Formatting toolbar.
  3. In the New Table Properties dialog (Insert Table dialog on MacOS), set the properties you want.
  4. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.

About the New Table Properties Dialog

Use the items in the New Table Properties dialog box (Insert Table dialog on MacOS) to create a table and specify attributes for it such as number of rows and columns, border line width, cell spacing and padding, table width and height, color, and captioning. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box. Note: If you are inserting a table within a table (called "nesting tables") you can also set the minimum height and width of the nested table as percentages of the "parent" cell (the cell of the table in which the nested table resides). The nested table's height and width change whenever the parent table's height and width changes. Type a number in the box and then select % of parent cell.

Selecting and Deleting Tables


Adding and Deleting Rows, Columns, and Cells


Setting Table Properties

Once you've created a table, choose Table Properties from the Format menu (Table Info on MacOS) to set various properties for rows and cells, or modify the properties you set for the table itself.

Note: The settings you choose in the Table Properties dialog box always override the settings used when you first created the table.

To set table properties:

  1. Click in the table.
  2. Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Table tab.
  3. In the Table Properties dialog, set the properties you want.

About the Table Properties Dialog

Use the items in the Table Properties dialog box to specify attributes such as border line width, cell spacing and padding, width, height, color, and captioning for the selected table. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box. Note: If you are inserting a table within a table (called "nesting tables"), you can also set the minimum height and width of the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The nested tables height and width changes whenever the parent tables height and width changes. Type a number in the box and then select % of parent cell.


Setting Row Properties

To set row properties:
  1. Place the insertion point in the row you want to modify.
  2. Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Row tab.

  3. The Row properties dialog box appears, allowing you to specify properties such as horizontal and vertical text alignment, and text color.
  4. Set the properties you want.
  5. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.

About the Row Properties Dialog

Use the items on the Row Properties dialog box to specify attributes such as horizontal text alignment, and vertical text alignment, and text color for the selected table row. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Setting Cell Properties

To set cell properties:
  1. Place the insertion point in the cell you want to modify.
  2. Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Cell tab.

  3. The Cell properties panel appears, allowing you to specify properties such as spanning additional rows and columns, horizontal and vertical text alignment, text style and wrapping, cell width and height, and cell color.
  4. Set the properties you want.
  5. Click OK to accept the settings and close the dialog box. Click Apply to preview the settings you've specified and then click Close to accept them and exit the dialog box.
Note: If you are modifying a table within a table (called a "nested table"), you can also set the minimum height and width of the cell in the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The height and width of the cell in the nested table changes whenever the parent cell's height and width changes. Type a number in the box and then select % of parent cell.


About the Cell Properties Dialog

Use the items on the Cell Properties dialog box to specify attributes such as horizontal and vertical text alignment, text style and wrapping, cell width and height, and cell color. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Working with Images

There are two ways that images typically are presented. The most common way is as an inline image, where the picture appears as part of the Web page. The less common way is as a separate external link that you need to download apart from Web pages. Images are actually separate image files and do not "live" in the HTML document itself. The images that appear on your Web page can be image files on your local disk, or on a remote computer.

Most of the current Web browsers support either of two image formats; the Composer supports both formats as well:

GIF files lack the higher quality of JPEG files but are usually faster because they're more compact and optimized for electronic downloading. Composer also allows you to insert bitmap graphic files (.bmp) by converting them to JPEG format when you place them into your document (Windows only).

You can get images by drawing them yourself, scanning them, or buying them as part of a commercial clip art package. You can also find GIF images out on the Net in one of the many image archives available. If you intend to use images on your Web pages, it's wise to create your own, get permission from the owner of an image, or use royalty-free clip art so you don't infringe on a possible copyright.

Composer provides two alternatives to displaying images: alternate text and low-resolution images. Alternate text is displayed in place of images. You should specify alternate text for those readers who use text-only browsers. In addition, Navigator and other browsers display this text when the mouse cursor is over an image.

Low resolution images are another alternate to normal image display. You simply specify a low-resolution image to display while the normal image is loading.

Tip: To quickly insert an image, cut and paste it from the clipboard, or drag and drop it to the location you want on your page.

Tip: If the document you're editing contains an animated GIF file, click Esc to stop it from continually loading so that you can work in the document.

Summary
Inserting an Image


Inserting an Image

Inserting an image in your Web page either copies the image file to the same directory as that of the parent document--the Web page you're editing, or leaves the image file where it is, depending on the settings you've specified in Composer Preferences. Once you've inserted an image, you can resize it by selecting it and then dragging the handles that appear at each corner.

Note: On MacOS, you must have QuickTime installed in order to copy a PICT file from the clipboard. Composer prompts you to name the image file before you paste it, and converts it to JPEG format.

Tip: To quickly insert an image, cut and paste it from the clipboard, or drag and drop it to the location you want on your page.

To insert an image:

  1. Place the insertion point where you want the image to appear in your document.
  2. Choose Image from the Insert menu or click the Image button on the Composition toolbar. The Image Properties dialog appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it.
  3. Type the name and path of the image file you want to insert in your document. If you're not sure of the file name or its location, click Browse to select an image file from the directory list.

  4. Important: If you move an image file from the specified location, it will no longer appear on your Web page.

  5. Type the name of a low-resolution version of the image previously specified. This image loads first while the higher resolution image is loading on top. If you're not sure of the file name or its location, click Browse to select an image file from the directory list. (Optional)
  6. Type the text that you want to have appear in place of the specified image file. You should always specify alternative text for readers who use text-only Web browsers, such as Lynx, or who have graphics turned off. If you don't include this alternative, your readers might see placeholder images instead of informative text. (Optional)


About the Images Properties Dialog Box

Use the items on the Image Properties dialog box to insert a new image or modify an existing image's properties, such as text wrapping, height and width, and spacing.


About the Alternate Image Properties Dialog

(Windows only)

Use the items on the Alternate Image Properties dialog box to add alternate text for an image and specify a low-resolution image to use in its place.


About the Image Conversion Dialog Box

(Windows only)

Use the Image Conversion dialog box when you need to import a bitmap graphics file (.bmp) into your page. Composer converts the file to the JPEG (.jpg) format, and allows you to select a high, medium, or low quality pixel display.


Setting Page Colors and Properties

You use the Page Colors and Properties panels (Page Properties on MacOS) to set general information and properties for your documents, such as authoring information, keywords, hyperlink colors, background images and colors, and advanced settings such as meta tags.

Summary

About the General Page Colors and Properties Panel
About the Colors and Background Panel
About the Meta Tags Panel

About the General Page Colors and Properties Panel

Displays information about the current document and lets you provide additional information helpful to Web users searching for specific topics. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Location

The location of the current document on your local disk.

Title

The text you want to appear in the window title when the document is browsed. This is how most Web search tools locate specific Web pages, so if you want readers to be able to locate your page easily, select a useful title that conveys what your page is all about.

Author

The name of the person who created the current document. This information can be helpful to readers who've found your document by using a Web search tool and must now select from a list.

Description

A brief description of the contents of your document. Again, this information can be helpful to readers searching for a specific topic.

Other Attributes

Type keywords that you want searching services such as Yahoo to use to help users locate your document on the Web. Type the category name (obtained from a catalog server) you think best applies to your document. Classification names are another method used by searching services to locate documents.


About the Colors and Backgrounds Panel

Lets you specify how to use the browser's colors for linked text and document background or specify custom colors for the current document. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.

Use custom...

Allows you to set your own colors for text, linked text, and document background (default) and save it in the document.

Use Browser's...

Lets you use the colors set for browser display in the General preferences panel for the current document. Since users can set their own color choices for default browser display, their settings will always determine what colors are used.

Color schemes

Lets you select a scheme from the list.

Custom colors

Allows you to specify the color for Normal, Link, Active Link, and Followed Link text. Click the button to display the color palette and select the color you want. Sample text in the color you've specified appears to the right.

Background

Click this to display the Color dialog and choose a solid color to appear as the background for the current document.

Use image

Check this box to use an image as the background and type an image file name. If you're not sure of the file name or its location, click Browse to select an image file from the directory list.

Note: Background images appear tiled and override background color selections.


About the Meta Tags Panel

This panel displays optional information that your online service provider might want you to include in your document. This information doesn't actually appear in the document when edited or browsed--only in the source HTML. Contact your provider for more information.


Setting Composer Preferences

You use the Composer Preferences General and Publishing panels to set preferences for all the pages you create, such as choices for external HTML and image editors, font size display modes, publishing locations and options.

From the Edit menu, choose Preferences and then select the Composer category.

Summary

Composer Preferences-General
Composer Preferences-Publishing

Composer Preferences - General

Use the General panel of Composer Preferences to specify the author name to associate with your documents, and which applications to open when you want to edit the HTML source for your page or modify the image files. You can also choose whether or not to have Composer automatically save your document, and specify the way font sizes are displayed while you work (Windows only).

Author name

Enter the name used by Composer to indicate who created your documents. This information can be helpful to readers who find your document by using a Web search tool and must select from a list.

External Editors

Enter the path and filename of the text and image editors of your choice. For example, if you want to use Notepad to edit the actual HTML source, type C:\WINDOWS\NOTEPAD.EXE. Then when you choose HTML Source from the Edit menu, Notepad starts with the current document displayed. If you're not sure of the filename, click Choose to find the application.

Note: When you edit HTML source using an external editor, first save your changes in the editor and then choose Reload from the Viewmenu to see your changes in Composer.

Automatically save page every___ minutes

Click this box to have Composer automatically save your document, and then specify how often (in minutes).

Template for new page:

(MacOS only) Enter the template's location or click Choose Local File to browse for the filename of the file you want to use as a template for this page.

Font Size Mode

Select the way you want Composer to display font sizes (Windows only):
See Also
Choosing Font Sizes


Composer Preferences - Publish

Use the items in the Publish panel of Composer Preferences to specify settings for saving remote documents, such as whether to maintain links or copy image files to the remote locations. You can also indicate the default FTP or HTTP publishing locations for your documents.

Maintain links

Select this to make sure that links are kept relative to the current document's location. When saving a document from a remote server to your local disk, or publishing to a remote server, this option insures that any links in that document to other files in the same directory are relative when saved/published. These links will work locally if you've also saved the remote files they pointed to. Links to files outside the document's directory are absolute. If you do not select this option, link path names are not modified and links local to the saved document may no longer work.

Keep images with page

Select this to save a copy of each image file in the same location as the document. Since images are not located in the document itself, deselecting this option means that only the HTML document is saved, not the image files. It is recommended that you leave this option selected, so that your document's images are always kept in the same directory as that document.

Enter a FTP or HTTP site address to publish to:

If publishing to a FTP site, enter the HTTP address to browse to:

Enter the default location of your published Web pages. For example, if you publish your Web pages to: http://aol.com/docs/, you should type this URL in the box.
See Also
Relative and Absolute Links


Working with Hyperlinks

A hyperlink is an active part of a document. When you click a hyperlink, you can link to Hypertext and hyperlink documents are commonplace in computing now. Consider the MS Windows, MacOS, and OS/2 Help systems, for example. Help typically displays highlighted areas that you can click to access additional information. This other information might be contained elsewhere in the same file or in another help file on your computer. On the Web, hyperlinks access information on your own computer, and potentially on any accessible computer on the Internet. The information you access, stored in computer files, can produce words, sounds, pictures, or even action video on your own computer.

Summary
About URLS
Creating Links
Linking Images
Linking to Targets
Relative and Absolute Links


About URLs

Uniform Resource Locators or URLs are street addresses for bits of information on the Internet. Most of the time, you can avoid trying to figure out your own URLs by simply navigating to the information you want to point to with your browser, and then copying and pasting the long string of "stuff" into your link. But it's often useful to understand what a URL is all about, and why it has to be so long and complex. Also, when you begin publishing your own information on the Web, you'll want to know something about URLs so that you can tell people how to find your Web page.\

Most URLs have four parts: the protocol, the host name, the directory, and the file name; for example:


Creating Links

Summary

  1. Select the text or image you want to create a link for.
  2. Choose Link from the Insert menu or click the Link button on the Composition toolbar
  3. Enter the file name or URL to link to.

Tip: To create a link to a page displayed in the browser, drag the link icon that's to the left of the location box from the Navigator window to a Composer window (MacOS and Windows only).

When you link to a local document, you're linking to a document on your computer; documents you reference don't have to be in the same directory (it's a good idea though). Linking to a remote document means you're linking to somewhere on the Internet rather than on your local disk.

Details

You can create links in your documents by dragging them from other windows and then dropping them into the edit window (MacOS and Windows only). For example, you can drag a link from a browse, bookmark, mail, or news window and drop it on a document in the Composer window. You can also create links using the Link Properties dialog.

  1. Select the text or image you want to create the link for.
  2. Choose Link from the Insert menu or click the Link button on the Composition toolbar.
  3. Link Source displays the selected text you want to use to create a link. To change this text, select the text in your document and retype. To see the change reflected in the dialog, select the text before opening the dialog.

  4. Type the local file name or remote URL to link to the selected text. Click Browse File to select a local file.
  5. Select a named target (also called anchors) present in the current document or selected file (depending on how you've set the "Show targets in" option). Select a target to which you want to link the selected text.
  6. The Show targets in option lets you specify displaying either the named targets in the current document or those in the file specified in the Link to page or file box.

  7. Click Apply to make the changes you've specified and leave the dialog box open. Click OK to make the specified changes and close the dialog box.
See Also
Linking Images
Linking to Targets

About the Link Properties dialog

Use the items on the Link Properties dialog box to insert a new link or modify an existing link's properties. Click OK to make the specified changes and close the dialog box. Click Apply to preview the changes you've specified and then click Close to accept the changes and exit the dialog box.


Linking Images

Summary

  1. Insert an image.
  2. Click the Link button on the Composition toolbar
  3. Specify a link location.

Details

Just as with text, you can configure images to behave as links in your documents. When you click a linked image, the Navigator window displays the page that the image is linked to.
  1. Insert an image on your page.
  2. Select the image and then click the Link button on the Composition toolbar.

  3. You see the Link properties dialog box.
  4. Specify a link location.

  5. Choose Browse Page from the File menu and then click on the image to go to the linked page.
Tip: Dragging a linked image from the Navigator window into a Composer window copies both the image and the link.
See Also
Inserting an Image

Linking to Targets

If you want to link to a specific place within a document rather than just linking to the document itself, you create a target (also called a named target or anchor in HTML). You can do this by inserting a target in one document, and then creating a link in the same document, or another document that points to that target. When you click on the link in the browser, the browser opens the document containing the target and scrolls to the target location.
  1. Place the cursor at the beginning of a line for which you want to create a target, or select some text at the beginning of a line.
  2. Choose Target from the Insert menu or click the Target button on the Composition toolbar.
  3. Type a name for the target in the edit box; it can be up to 30 characters long. This name will appear in the target list of the Link Properties dialog. If you selected some text in step one, this box will already contain a default target name.
  4. Click OK. A special Target icon appears in your document (only visible in the Composer window) to mark the location of the link.
  5. Insert a link by clicking the Link button or by choosing Link from the Insert menu.
  6. Choose Browse Page from the File menu and then click the link you just created to go to the location marked by the selected target.

Relative and Absolute Links

When you specify the path name of a file to be linked to as a single file name, Composer looks for the listed file in the current directory (same directory as the current file), even if it is looking at that file over a network. This is a relative path name. Relative path names point to the document you want to link to by describing its relation to the current document.

Relative path names

Path name Means
link.html link.html is located in the current directory.
files/link.html link.html is located in the directory (or folder) called files and the files directory is located in the current directory.
docs/files/link.html link.html is located in the files directory, which is located in the docs directory, which is located in the current directory.
..link.html link.html is located in the directory (or folder) above the current directory (the same directory the current directory is in). You can use multiple "../" to indicate a file location further up the directory structure.

Absolute path names point to the document by starting at the top level of your directory hierarchy and working down through all the subdirectories to reach the file. You should use absolute path names when linking to a page from another Web site, such as the Netscape site.

Generally, when linking together your own documents, you'll want to use relative path names. If you specify your links as absolute path names and then move your files elsewhere on the disk, or rename a directory or a disk listed in that absolute path, then your links to these files might not work.

Absolute path names or URLs

Path name or URL Means
/docs/test/link.html link.html is located in the directory /docs/test.
/C|/docs/html/link.html link.html is located on the C: drive in the directory docs/html.
http://netscape.com/link.html link.html is located on the Netscape Web server.

About Advanced Topics

Now that you've learned the basics of Web page authoring with Composer, it's time to let other people on the Internet see what you've accomplished. In this chapter you'll learn how to publish your Web pages and create even more advanced pages using the new scripting language, JavaScript.

Summary
Publishing Your Pages
Using One-Button Publishing
Using the File Transfer Protocol (FTP)

Publishing Your Pages

Once you have finished creating your Web page, or perhaps an entire Web presentation and tested it on your own system, you can publish it to a server. Right now your page exists on your local disk; you can browse your Web page, but no one else can. When you publish to a server, you're copying your Web pages (HTML files) to a Web server so that others can see what you've done.

What is a Web server?

A Web server is a program that runs all the time and waits for Web clients (such as Navigator) to connect to it and request data, usually a file. Servers and browsers communicate using the HyperText Transfer Protocol (HTTP), a language created for transferring hypertext documents over the Web. Web servers are often called HTTPD servers.

Note: The "D" in HTTPD stands for daemon. A daemon is a UNIX term for a program that sits in the background and waits for requests. You don't have to be on UNIX for a program to behave like a daemon, so Web servers on any platform are still called HTTPD servers, or simply HTTP servers.

Finding a Web server

Ideally, you'll be able to publish your Web pages using the same organization that gives you access to the Internet. If you get access to the Internet through a commercial provider, that organization might offer Web space that you can use as well. Ask your system administrator if they offer Web server access.

Filename Conventions

Filenames have different conventions and restrictions depending on the platform. It's important to understand these distinctions before publishing your Web information, because you want your documents to be as portable between platforms as possible. If you are working with more than one platform, naming your files is very important.

For example, if you're moving your files to or from DOS-based systems, you'll need to follow the 8.3 rule--file names must be only 8 characters long with 3-character extensions. Also, if you're moving files from a MacOS to other systems, don't use spaces or other funny characters, use only letters and numbers and keep your file names under 8 characters.


Using One-Button Publishing

The one-button publishing feature in Composer makes publishing your Web pages quick and easy. You can select which files or directories you want to upload (publish) to a remote server. You can also specify the remote server site.

To publish your page:

  1. Choose Publish from the File menu or click the Publish button on the Composition toolbar.

  2. You see the Publish dialog box.
  3. Select the options you want and then click OK.
Note: If a file on the remote server where you're publishing has the same filename as the one you're uploading, it will be replaced with the new one without asking you to confirm the action.

About the Publish Files Dialog

Use the items in the Publish Files dialog box to select which files or directories you want to upload (publish) to a remote server, specify a title and filename, and set your user name and password. You can also specify the remote server site.

Note: If a file on the remote server you're publishing to has the same filename as one you're uploading, it will be replaced with the new one without asking you to confirm the action.


Using FTP

You can also use FTP to transfer (or upload) your files to a Web server. Composer lets you access FTP servers in the same way you access Web (HTTP) servers.

Note: Most FTP client software lets you choose either ASCII text or binary transfer mode. Although HTML files themselves can be transferred as text files, other files, such as JPEG and GIF files, cannot be correctly transferred that way. In the Composer, files are uploaded to FTP sites in binary mode by default. To point Composer to an FTP site, use the following syntax in the location field:

You might find the FTP directory and content pages have minimal formatting. When possible, the browse window shows the type, size, date, and a short description of each file in a directory. A directory is presented as a list of links; each link is often preceded by a small icon indicating another directory or a file. Clicking on a directory link displays a subdirectory. Typically, at the top of a subdirectory is a link that displays the parent directory.

After you have accessed an FTP server, you can upload files to the site by dragging and dropping them from the Windows File Manager or Explorer to the browse window. This process is easier if all your Web page files are located in one directory on your local disk.


About Page Design

Even though the Web is relatively young, there are already some definite do's and don'ts regarding content creation. If you heed some of the following credos regarding text, page length, graphics, and color, you'll be on your way to presenting an attractive and well-turned Web page, one with content that readers will enjoyably sink their teeth into.

Time spent planning before you start "cooking" up your creation is time well spent. Consider these issues:


Using Different Browsers

As the Web grows in popularity, more browsers are becoming available. This means you can't assume that folks reading your pages are using the same browser you are. Even those who do use Navigator might not use it all the time (they might use a different browser at home or at work).

Don't make your document overly dependent on HTML features that can't be seen by all browsers. If you decide to use Netscape-only HTML tags, consider how your page might look to someone whose browser doesn't support those tags. Some browsers might not accept your graphics, so provide alternative text. Also, Navigator (and many other browsers) lets users choose how they want the pages they view to look. Users can choose fonts and font sizes, override a page's colors and backgrounds, and generally ignore a lot of the formatting options a Web author has specified.

Do assume that a user's screen size, number of available colors, and screen resolution will be different from yours, even those readers using the same browser. This means that a page that looks great on your screen might look completely different on someone else's. This is another strong reason to concentrate on content first, and use design options as enhancements only.


Setting Page Length

Most current personal computer monitors display 640 x 480 pixels on 13- to 15-inch screens. Designing your pages so that the information is presented in short, clearly segmented chunks will make it easier to keep pages concise.

A good rule of thumb for writing a page meant to be read onscreen is to make it no longer than two to three 640 x 480 screens' worth of information, including local navigational links at either the beginning or the end of the page layout. If you make the page longer than the window, your reader has to remember too much information that's already scrolled off the screen.

A disadvantage of a very long Web page is that the reader must depend on the vertical scroll bar slider to navigate. Small scrolling movements can completely change the screen contents, leaving the reader no familiar landmarks.

Keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. If you want to provide a good online interface for pages and easy printing or saving of the content, divide the page into chunks of two to three printed pages of worth information, including inline graphics or figures. Or provide a link to a separate file that contains the full-length text combined into one page.


Providing Good Content

While the graphic design of your pages should be pleasing, it is ultimately the content that determines a page's value to others. Follow these simple guidelines to giving good content:

See Also
Doing Graphics Justice
Taking Stock of Colors and Fonts


Doing Graphics Justice

Graphics add a lot to the visual appeal and information content of a page. But poor use of graphics can frustrate your readers or keep them from understanding the message you're trying to send.

Practically every published Web author will agree--keep images small! You should aim to keep the total file size of images used on a page to less than 30K. If you need to use a large image, you might want to consider using a thumbnail of the image and then linking it to the full-size copy. You can reduce file size by using design programs to eliminate unnecessary colors.

Use backgrounds intelligently. Backgrounds that are "loud" make it extremely hard to read the text that's on top of them. Don't let your backgrounds interfere with the message you're sending the reader. For a background to work well, color contrast is not enough. The background either needs to be very light (for dark text) or very dark (for light text). A background that contains an image should have low contrast, so it's not too distracting.

The two types of image formats used by most Web browsers are GIF (CompuServe Graphics Interchange Format, .GIF extension) and JPEG (Joint Photographic Experts Group, .JPG extension). The JPEG format works best for photos and continuous tone images. The GIF format works best for inline images, line art drawings, most logos, and screen dumps. Both formats should use a resolution of 72 dpi (dots per inch) and use RGB (red-green-blue) color mapping.

Since you can't assume your readers are using a graphical browser to view your pages, be sure to enter an alternative description in the Alternate Image Properties dialog box (choose Image from the Insert menu. This way, readers using text-based browsers will see the alternate text description, and those using graphical browsers will also see something if the image fails to load.

Here are some other techniques that can help minimize download times for images:

See Also
Working with Images


Taking Stock of Colors and Fonts

It's tempting to add lots of colors and font styles to a page just because you can. But the result is more likely to frustrate a reader and detract from the message you're trying to get across. After all, it's the content you want your audience to focus on, and that means presenting a page that's easy to read. Even though most graphical browsers (including Navigator) use a proportionally spaced font such as Times Roman as the default for text, many browsers are user-configurable, meaning the user can choose any font for viewing your page.

Consider typography as the tool you use to paint patterns on the page. The first thing your reader sees is not the title or other details of the page, but the overall pattern and contrast of the page. The reader's eye scans the page first as a purely graphic pattern, then begins to track and decode type and page elements.

Good typography depends on the visual contrast between one font and another and the contrast between text blocks and the surrounding empty space. There are a few basic typographic principles that can help make your pages easier on the eye:

Thoughtful and consistent use of color in backgrounds can really help pull your pages together into a cohesive presentation. In general, light pastel backgrounds are best for reading substantial amounts of text. If you are showing a lot of pictures, a black background can make your photos look good and give your pages a gallery-like effect. Using tiled backgrounds makes everything above them "float," causing your readers to work much harder to read your text. Using a white background can make text look good and your document look clean, but if you have a lot of pages, it can be extremely wearing on the eyes.


Finishing Touches

And last, but not least---the proverbial icing on the cake. These elements are considered the hallmarks of the work of a professional Web author:


About Composer Plug-ins

You can add new functionality to Composer by taking advantage of the plug-in tools available from Netscape. To download the sample plug-ins:

  1. Select the desired plugin ZIP file.
  2. Save the plugin's ZIP file to the appropriate location:
  3. Restart Communicator.

Your new plug-in will appear in the Tools menu of the Composer window.