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:
-
Work in a WYSIWYG environment. You can see the results of
paragraph and font tags applied as you type.
-
Add, remove and modify text. Click on any part of a downloaded Web
page and immediately work with text and images.
-
Drag-and-Drop. Drag-and-drop hyperlinks and images from the bookmark,
mail, news, or browse windows, to a document in the editor (Windows and
MacOS only). You can also drag an HTML or image file from the Windows
File Manager (Explorer in Windows 95) and drop it in an edit window.
-
Publish your documents on the Internet. Simplify the process of
posting pages to a server by using one button to copy your files from your
local hard disk to a remote directory or server.
-
Format text to suit your needs. You can apply paragraph and character
styles to text just as you would in your favorite word-processing application.
-
Change font, font size and color. Use these features to create pages
that focus a reader's attention where you want.
-
Include objects in your pages. You can insert tables, images, horizontal
lines, and hyperlinks in the Web documents you create.
You can create a Web document from scratch, edit the page you're browsing,
or open an existing document that you want to modify.
-
From the File menu, choose New and then choose Blank Page
(Blank on MacOS). Or, click the Composer button (pencil button) on the Component
bar. A Composer window opens containing a blank page. The original browse
window remains open behind the Composer window.
-
From the File menu, choose New and then choose Page From
Template. A dialog box appears where you can select a remote or local
file to use as a template, or one of the template files available from
the Netscape Template Web site. Once you've selected a template, choose
Edit Page from the File menu to use the template as the basis
for a new document.
-
From the File menu, choose New and then choose Page From
Wizard. A Navigator window opens containing the Page wizard. The wizard
is a special page on the Netscape home site that walks you through the
steps for creating a Web page. When you've completed the steps, you'll
have a page that you can open in Composer and continue building on as your
skills improve.
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
To edit the page (or frame) you're currently browsing:
-
Choose Edit Page or Edit Frame from the File
menu. The current Navigator window becomes a Composer window containing
the document you were viewing. You can also drag the Location icon and drop it on the Component bar
See Also
Using the Toolbars and Pop-up
Menus
To edit an existing page saved locally or in a remote location:
-
Choose Open Page (Open Page...in Composer on MacOS) from the File menu in Composer.
You see a dialog box where you can enter the filename or URL of the
page you want to edit.
-
Select the file you want, click Composer, then click Open.
-
A Composer window opens containing the specified file.
See Also
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. |
Several drag-and-drop operations are available when you use Composer (Windows
and MacOS only). You can:
-
Drag a link from a Navigator window and drop it in a Composer window. This
is like inserting a link in the document you're editing.
-
Drag an HTML file (or multiple files) from the Windows File Manager (Explorer
in Windows 95) and drop it in a Composer window to create a link to that
file.
-
Drag a link from a bookmark, mail, or news window and drop it in the Composer
window.
-
Drag an image from a Navigator window and drop it in a Composer window.
This is the easiest way to add images to your Web pages.
-
Drag an image file (GIF, JPEG or BMP) from the desk and drop it in an edit window
to insert the image in the current document. Note:Composer converts BMP files to the JPEG format.
See Also
Working with Hyperlinks
Working with Images
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
Summary
-
From the File menu, choose New and then choose Blank Page.
-
Type some text in the Composer window.
-
Choose Save from the File menu or click the Save
button and name the file.
Details
-
From the File menu, choose New and then choose Blank Page.
Or, click the New Page button on the Composition toolbar.
You see the Composer window with a blank page, and toolbars at the
top.
-
Choose Save from the File menu (or click the Save button
on the Composition toolbar).
You see a dialog box where you can enter
a filename.
-
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.
-
Choose Save from the File menu and give the page a title
and a filename if you haven't already done so.
-
Choose Browse Page to view your newly created page in the Navigator
window. The Composer window remains open behind the new Navigator window.
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
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.
-
To select a word, double-click on it.
-
To select an entire line, click before the line.
-
To select a paragraph, double-click before the line that begins the paragraph.
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.
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.
Summary
-
Choose Find in Page from the Edit menu.
-
Enter the characters you want to search for.
-
If you wish, specify a search option, and then click Find.
Details
-
Choose Find in Page from the Edit menu to display the Find
dialog box.
-
Enter the characters you wish to search for in the Find What text
box (Find on Page on MacOS).
-
Click one of the following search options:
-
Match Case (Case Sensitive on MacOS): Makes the match case-sensitive
so that Composer looks for text that matches your uppercase and lowercase
characters exactly. If you don't select this option, Composer ignores case.
-
Up or Down: Specifies whether to begin searching upward or downward
in the file. On MacOS, select Find Backwards to search upwards
in the file, or select Wrap Search to search the entire file, regardless
of where you start.
Summary
-
Click the Check Spelling button on the Composition toolbar.
-
Or, from the Tools menu, choose Check Spelling .
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:
-
Do one of the following:
-
On the Composition toolbar, click the Spelling button.
-
From the Tools menu, choose Check Spelling.
The Check Spelling dialog box appears.
-
For each word that is found, choose whether to correct it, ignore it, or
add it to the dictionary.
-
To return to the document, click Stop.
(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.
-
The Word field displays the possibly misspelled word. You can also type a
correction here, and then click Replace or Replace All to insert it in your document.
-
The Suggestions field displays alternative spellings for the misspelling
contained in the current dictionary.
-
From Language drop-down list, select the dictionary to use to verify spellings.
Click Edit Dictionary to edit or add words to the selected dictionary.
-
Click Replace to replace the misspelling displayed in the Word field with
a selected item from the Suggestions list. Or, you can type a correction
in the Word field, and then click Replace to substitute it for the
misspelling.
-
Click Replace All to replace all occurrences of the misspelling.
Suggestion or the correction you typed in Word.
-
Click Check to verify the entry in Word using the dictionary.
-
Click Ignore to leave the selected word in the document.
-
Click Ignore All to leave all occurrences of the selected word in the document.
-
Click Learn to add the entry in the Word field to the dictionary and
replace the selected word. Note: if there are several entries in
the Word field, each one is added the dictionary.
-
Click Edit Dictionary to display a dialog box you can use to add,
replace, or remove words from the dictionary.
-
Click Stop to close the dialog box and stop checking spelling.
(Windows only)
Use the Edit Dictionary dialog box to add, replace, and remove words from
your personal dictionary.
-
In the New Word field, type the word you want to insert into the
dictionary; then click Add.
-
In the Words field, select a word and then click Replace to
substitute it with the word you typed in the New Word field.
-
Click Remove to delete the selected word in the Words field
from the dictionary.
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
There are two types of format styles available to you in Composer:
-
Paragraph formats: includes heading levels and alignment options, and affects
all paragraphs in the selected block of text.
-
Character formats: includes font types, styles, sizes, and colors.
Summary
Paragraph Formats
Character Formats
Summary
-
Select the text; then choose a paragraph style, alignment option, or both,
from the Formatting toolbar.
-
Or, select the text; then choose Paragraph from the Format menu
and choose a paragraph style.
-
Or, in Windows, right-click the selected text and then choose Paragraph/List
Properties from the pop-up menu.
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 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
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.
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).
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!")
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.
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.
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.
-
From the Paragraph style drop-down menu, select a paragraph style.
-
Click Additional style to display additional attributes for the
paragraph style you've selected. Select List to display additional
list styles, and then select List or Bullet style
in the next field to specify the type of list you want in
your document. The Block Quote attribute can be used with any paragraph
style.
-
In the List box, choose the type of list you want, then select
Unnumbered, Numbered, Directory, Menu, or Description
List.
-
Number/Bullet Number: if you selected Numbered, indicate
the type of sequential indicator to use, such as 1,2,3, or A,B,C.
If you selected Unnumbered, specify the type of bullet to use (square,
circle, or open square).
-
Starting number: type the beginning number for the list.
-
Alignment: specify whether to align the selected paragraph to the
left, right, or center of the page.
Note: Netscape Navigator does not display the Directory or Menu
styles (it displays these styles as normal text), but other browsers may
display them.
Summary
-
Select the text and click a character format button on the Formatting toolbar.
-
Or, select the text and choose Style from the Format menu.
-
Or, select the text and choose Character Properties from the Format
menu (Character Info on MacOS).
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:
-
Bold
-
Italic
-
Fixed width
-
Superscript
-
Subscript
-
-
Underline
-
Non-breaking
Details
To apply a character format:
-
Select the text.
-
Choose one of three ways to apply a character format:
-
From the Format menu, choose Style and then choose a format.
-
Or, select a character format button on the Formatting toolbar
-
Or, select the text and choose Character Properties from the Format
menu (Character Info on MacOS) to display the Character Properties dialog box, where you can
specify the font face, color, size, and several other character formats.
To remove character formats from selected text:
-
Click the Remove All Styles button on the Formatting toolbar
-
Or, choose Remove All Styles from the Format menu.
-
Or, choose Character Properties from the Format menu (Character Info on MacOS) and
then click the Remove All Styles button in the Character Properties
dialog box.
See Also
Adding Color to Text
Applying color to selected text
is a good way to emphasize
different parts of your Web page.
-
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.
-
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.
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.
-
Click Font Face to select the font you want, or select Variable
Width or Fixed Width so that your page displays the fonts specified
by the viewer's browser. Select Don't change if the selected text
contains more than one font style.
-
Click Font Size to select the size for the specified font. The font
sizes displayed here reflect the selection you made for Font Size Mode
in the Composer Preferences panel (Windows only). To
change this mode setting, choose Preferences from the Edit menu
and then select the Composer category.
-
Click Use Color and then click the color button to choose the color of the selected characters.
You can use the document's default text color, or click Other
to specify a custom color. Select Don't change if the selected text
contains more than one color.
Note: To set the default colors, choose Page Colors and Properties
from the Format menu (on MacOS, choose Page Properties), and then select the Colors and Background
tab.
-
Style: select a style for the selected character(s), such as italic,
bold, underline, or non-breaking. You can also apply a special style called
Blink which causes text to blink on and off.
-
Click Other Colors to display a dialog box where you can choose
a custom color.
-
Click Remove Style Settings to reset any style checkboxes you have
selected to unselected or blank.
-
Click Remove All Settings to reset all settings you have made in
this dialog box to unselected or blank.
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.
Summary
-
Click the Font button on the Formatting toolbar.
-
From the Format menu, choose Font and then select
the font you want.
-
Choose Character Properties from the Format menu (Character Info on MacOS) to select
a font from the Character Properties dialog box.
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:
-
Select some text or place the insertion point in your page where you want
the font to begin.
-
Choose one of three ways to apply a font:
-
Click the Font button on the Formatting Toolbar.
-
Or, choose Font from the Format menu.
-
Or, choose Character Properties from the Format menu (Character Info on MacOS) to display
the Character Properties dialog box.
-
Select Variable Width or Fixed Width, or choose a specific
font from the list.
Summary
-
Select a font size mode in the Composer Preferences dialog box (Windows only).
-
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:
-
From the Edit menu, choose Preferences and then select the
Composer category (Windows only).
You see the General panel of Composer Preferences.
-
At Font Size Mode, select the type of font sizes you want to display (Windows only):
-
as relative to the point size of the default Navigator font (you
can specify this in the Appearance/Fonts category of the Preferences
dialog box)
-
as a relative HTML font scale (between -2 and +4)
-
as both relative HTML font scale and absolute point sizes
To apply a font size:
-
Select some text or place the insertion point in your page where you want
the font to begin.
-
Choose one of three ways to apply a font:
-
Click the Font Size button on the Formatting Toolbar.
-
Or, choose Font Size from the Format menu.
-
Or, choose Character Properties from the Format menu (Character Info on MacOS) to display
the Character Properties dialog box.
-
See Also
-
Composer
Preferences-General
To insert a horizontal line:
-
Click the location in the Composer window where you want the line to appear.
-
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.
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> |
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:
-
Choose HTML Tag from the Insert menu.
A dialog box appears that lets you type the HTML you want to insert
at the selected place in your document.
-
Click Enter at the end of each line to ensure that your HTML is
easily readable.
-
Click Verify to have Composer check the HTML you've typed.
The Composer checks to make sure you have both opening and closing brackets
< > around your HTML, and quotation marks around any attribute text.
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:
<applet code="HelloWorld.class" width=100 height=30>
<param name=text value="Hello World!">
</applet>
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.
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.
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
Summary
-
Click in the page where you want to insert a table.
-
Click the Insert Table button on the Composition toolbar, or choose
Table from the Insert menu.
Details
To insert a table:
-
Place the insertion point where you want the table to appear in your document.
-
Choose Table from the Insert menu or click the Insert
Table button on the Formatting toolbar.
-
In the New Table Properties dialog (Insert Table dialog on MacOS), set the properties you want.
-
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.
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.
-
In the Number of rows field, enter the number of rows in the table.
You can add rows later by choosing Table from the Insert menu
and then selecting Row.
-
In the Number of columns field, enter the number of columns in the
table. You can add columns later by choosing Table from the Insert
menu and then selecting Column.
-
Click Left, Center or Right at Table Alignment
to select a left-justified, centered, or right-justified alignment for
the table within the document.
-
Click Include caption to insert a space to use for centered line
of text and then click Above table or Below table.
-
In the Border line width field, enter a number for the size, in
pixels, of the border lines around cells (table items). Type 0 to make
the border invisible. Note: Composer displays tables with a zero
(0) border width by using dotted outlines in the Composer window only; not when you view the page in Navigator.
-
In the Cell spacing fielld, enter a number for the space, in pixels,
between cells.
-
In the Cell padding field, enter a number for the padding, in pixels,
within each cell. This sets the top, bottom, right, and left margins of
each cell.
-
In the Table width field, enter a number for the width of the table
and then select pixels or % of window. You can specify table
width as a percentage of the window width or as a number of pixels. If
you specify the width as a percentage, the table width changes whenever
the window width changes.
-
In the Table min. height field, enter a number for the minimum height
of the table and then select pixels or % of window. This
is the smallest height the table can have. If you type more text in the
table, the table is automatically resized to fit the text you enter. You
can specify table height as a percentage of the total window height or
as a number of pixels. If you specify the height as a percentage, the table
height changes whenever the window height changes.
-
Click Equal column widths to have Composer automatically set the
width of each cell equally. Deselect this if you want to size each cell
individually.
-
Click Use Color to use a color as the table's background, and then
select the color you want. Click Other Colors to define a custom
color.
-
Click Use Image to use an image as the table's background, and then
type the location and filename of the image you want to use. Click Choose
Image to browse for the file location.
-
Click Leave image at the original location if you don't want to make a copy of the
image file and place it in the same directory as the current document.
-
Click Extra HTML to display a dialog box where you can add any other
HTML or JavaScript to the TABLE tag.
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.
-
To select a table: click in the table and then choose Select Table from
the Edit menu. You can cut or copy the table to paste somewhere
else in your document.
-
To delete a table: click in the table and then choose Delete Table
from the Edit menu.
-
To add a row, column, or cell: click in the table where you want the addition
to appear. From the Insert menu, choose Table and then choose
Row, Column or Cell.
-
To delete a row, column, or cell: click in the row, column, or cell you
want to delete. From the Edit menu, choose Delete Table and
then choose Row, Column, or Cell.
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:
-
Click in the table.
-
Choose Table Properties from the Format menu (Table Info
on MacOS) and then select the Table tab.
-
In the Table Properties dialog, set the properties you want.
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.
-
Click Left, Center or Right at Table Alignment
to select a left-justified, centered, or right-justified alignment for
the table within the document.
-
Click Include caption to insert a space to use for centered line
of text and then click Above table or Below table.
-
In the Border line width field, enter a number for the size, in
pixels, of the border lines around cells (table items). Type 0 to make
the border invisible. Note: Composer displays tables with a zero
(0) border width by using dotted outlines in the Composer window only; not when you view the page in Navigator.
-
In the Cell spacing fielld, enter a number for the space, in pixels,
between cells.
-
In the Cell padding field, enter a number for the padding, in pixels,
within each cell. This sets the top, bottom, right, and left margins of
each cell.
-
In the Table width field, enter a number for the width of the table
and then select pixels or % of window. You can specify table
width as a percentage of the window width or as a number of pixels. If
you specify the width as a percentage, the table width changes whenever
the window width changes.
-
In the Table min. height field, enter a number for the minimum height
of the table and then select pixels or % of window. This
is the smallest height the table can have. If you type more text in the
table, the table is automatically resized to fit the text you enter. You
can specify table height as a percentage of the total window height or
as a number of pixels. If you specify the height as a percentage, the table
height changes whenever the window height changes.
-
Click Equal column widths to have Composer automatically set the
width of each cell equally. Deselect this if you want to size each cell
individually.
-
Click Use Color to use a color as the table's background, and then
select the color you want. Click Other Colors to define a custom
color.
-
Click Use Image to use an image as the table's background, and then
type the location and filename of the image you want to use. Click Choose
Image to browse for file location.
-
Click Leave image at the original location if you don't want to make a copy of the
image file and place it in the same directory as the current document.
-
Click Extra HTML to display a dialog box where you can add any other
HTML or JavaScript to the table.
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.
To set row properties:
-
Place the insertion point in the row you want to modify.
-
Choose Table Properties from the Format menu (Table Info
on MacOS) and then select the Row tab.
The Row properties dialog box appears, allowing you to specify properties
such as horizontal and vertical text alignment, and text color.
-
Set the properties you want.
-
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.
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.
-
At Horizontal Alignment, set the horizontal position of text relative
to the top, bottom, and sides of cells in the selected table row. Select
Default to leave the alignment as it was set when the table was
created.
-
At Vertical Alignment, set the vertical position of text
relative to the top, bottom, and sides of cells in the selected table row.
Select Default to leave the alignment as it was set when the table
was created.
-
Click Use Color to use a color as the row's background, and then
select the color you want. Click Other Colors to define a custom
color.
-
Click Use Image to use an image as the row's background, and then
type the location and filename of the image you want to use. Click Choose
Image to browse for file location.
-
Click Leave image at the original location if you don't want to make a copy of the
image file and place it in the same directory as the current document.
Click Extra HTML to display a dialog box where you can add any
other HTML or JavaScript to the table.
To set cell properties:
-
Place the insertion point in the cell you want to modify.
-
Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Cell tab.
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.
-
Set the properties you want.
-
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.
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.
-
At Horizontal Alignment, set the horizontal position of text relative
to the top, bottom, and sides of cells in the selected table cell. Select
Default to leave the alignment as it was set when the table was
created.
-
At Vertical Alignment, set the vertical position of text
relative to the top, bottom, and sides of cells in the selected table cell.
Select Default to leave the alignment as it was set when the table
was created.
-
In the Cell spans field, specify whether you want the selected cell
to span more than one column or row. Type a number in the rows box to span
additional rows. Type a number in the columns box to span additional columns.
-
Click Header style to center the text in the selected cell and sets
its style to bold.
-
Click Nonbreaking to keep the text from wrapping to the next line. Text will wordwrap to the next line ony if you insert a paragraph break.
-
Click Cell width to specify the width of the selected cell. You
can specify cell width as a percent of the table width or as a number of
pixels. If you specify the width as a percent of the table, the cell width
changes whenever the table width changes. Type number in the box and select
pixels or % of table.
-
Click Cell min. height to set the minimum height of the selected
cell. This is the smallest height the cell can have. If you type more text
in the cell, the cell automatically resizes to fit the text you enter.
You can specify cell height as a percent of the total table height or as
a number of pixels. If you specify the height as a percent of the table,
the cell height changes whenever the table height changes. Type a number
in the box and select pixels or % of table.
-
Click Use Color to use a color as the cell's background, and then
click the color button to select the color you want. Click Otherto define a custom
color.
-
Click Use Image to use an image as the cell's background, and then
type the location and filename of the image you want to use. Click Choose
Image to browse for file location.
-
Click Leave image at the original location if you don't want to make a copy of the
image file and place it in the same directory as the current document.
-
Click Extra HTML to display a dialog box where you can add any other
HTML or JavaScript to the table tag.
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 (CompuServe Graphics Interchange Format .GIF extension)
-
JPEG (Joint Photographic Experts Group .JPG extension)
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 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:
-
Place the insertion point where you want the image to appear in your document.
-
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.
-
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.
Important: If you move an image file from the specified location,
it will no longer appear on your Web page.
-
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)
-
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)
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.
-
In the Image location field, type the name or location of the image
file you want to insert in your document, or whose properties you want
to modify. The editor supports .GIF and JPG image file formats. If you're
not sure of the file name or its location, click Choose File to
select an image file from the directory list.
-
Click Leave image at original location if you do not want to have
a copy of the image file placed in the same directory as the current document.
-
Click Alt. Text/LowRes to display a dialog box where you can specify
whether to display text or a low-resolution image in place of the original
image.
-
Click an Alignment button to indicate the position of the selected
image relative to text, top, center, or bottom. You can also specify whether
to have the image right-align or left-align to the page. To see alignment
changes you've made, view your page in the browser.
-
In the Dimensions field, set the height and width of the new or
currently selected image as measured in pixels.
-
Click Original Size to undo any changes you've specified.
-
Click Lock width/height to maintain the size settings of the image
if you decide to move it within your document.
-
In the Space around field, enter the amount of white space (space
where no text is allowed) on the right and left, top and bottom of the
image. You can also select to have a black border surround the image and
specify its width in pixels.
-
Click Remove Image Map to remove all link regions from the image.
An image map is a special type of image that contains links to different
locations within the same image.
- Click Edit Image to edit the image using the external editor
you specified in the General panel of the Composer Preferences dialog box.
If you haven't specified an image editor, you will be prompted to do so.
(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.
-
In the Alternate text field, enter the text string you want to display
in place of the image, for example, a caption or brief description of the
image.
-
In the Low resolution image field, enter the name of the lower resolution
image you want to display while the main image is loading. Click Choose
File to browse for the file location.
- Click Edit Image to edit the image file using the external image
editor you specified in the General panel of the Composer Preferences
dialog.
(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.
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
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.
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.
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.
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
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):
-
As relative to the point size of the default Navigator font (you
can specify this in the Appearance/Fonts category of the Preferences
dialog box)
-
As a relative HTML font scale (between -2 and +4)
-
As both relative HTML font scale and absolute point sizes
See Also
Choosing Font Sizes
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:
-
FTP: Enter the default location to which you want to upload your
Web pages using the File Transfer Protocol. You may need to contact your
internet service provider to find out what to type here. For example, if
your service provider is America Online, the URL in this box might look
something like this: ftp://ftp.aol.com/docs/.
-
HTTP: Enter the default location to which you want to upload your
Web pages using the Web server protocol. If you are not running your own
Web server, you may need to contact your internet service provider to find
out what to type here. For example, the URL in this box might look something
like this: http://websurf.com/docs/.
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
A hyperlink is an active part of a document. When you click a hyperlink,
you can link to
-
Parts of the same Web page.
-
Files on your computer.
-
Computers on the Internet.
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
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:
http://mysystem.com/docs/index.html
-
The protocol (http:) is how the document is accessed; that
is, the type of protocol or program your browser will use to get the file.
If the browser is using HTTP to get to the file, the protocol part is http.
If the browser uses FTP, it's ftp.
-
The host name (mysystem.com) is the system on the Internet
where the information is stored, such as home.netscape.com. You
can have the same host name but have different URLs with different protocols,
for example:
http://mysystem.com ftp://mysystem.com gopher://mysystem.com
This is the same machine, but with three different information servers.
As long as all three are installed on that system and available, there's
no problem having the same host name.
-
The directory (/docs) is the location of the file or other
form of information on the host. The directory might be the actual directory
and file name, or it can be another indicator that the protocol uses to
refer to the location of that information.
-
The file name (index.html) is the .HTML file for the Web
page.
Summary
-
Select the text or image you want to create a link for.
-
Choose Link from the Insert menu or click the Link button
on the Composition toolbar
-
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.
-
Select the text or image you want to create the link for.
-
Choose Link from the Insert menu or click the Link button
on the Composition toolbar.
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.
-
Type the local file name or remote URL to link to the selected text. Click
Browse File to select a local file.
-
Select a named target 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.
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.
-
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
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.
-
In the Link source field, enter the text you want create a link
to. If you've already selected an image or text in your page to link to,
you see it here.
-
In the Link to page location or local file field, enter the local
filename or remote URL to which you want the selected text to link. Type
a URL or click Browse File to select a file.
-
In the Select a named target field, you see the the named targets
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.
-
Click Selected file or Current file at Show targets in
to specify either the named targets in the current local document or those
in the local file specified in the Link to page or file box.
-
Click Remove Link to unlink the selected linked text. If the current
selection contains more than one link, an alert box appears asking you
if you want to remove all links.
-
Click Extra HTML to display a dialog box where you can add any other
HTML or JavaScript to the link tag.
Summary
-
Insert an image.
-
Click the Link button on the Composition toolbar
-
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.
-
Insert an image on your page.
-
Select the image and then click the Link button on the Composition
toolbar.
You see the Link properties dialog box.
-
Specify a link location.
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
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 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.
-
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.
-
Choose Target from the Insert menu or click the Target
button on the Composition toolbar.
-
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.
-
Click OK. A special Target icon appears in your document (only visible
in the Composer window) to mark the location of the link.
-
Insert a link by clicking the Link button or by choosing Link from the Insert menu.
-
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.
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. |
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)
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.
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:
-
Choose Publish from the File menu or click the Publish
button on the Composition toolbar.
You see the Publish dialog box.
-
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.
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.
-
In the Page Title field, enter the text that appears in the window
title when the document is browsed. This is how most Web search
tools locate specific Web pages, and it also is used as the page's bookmark title. 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.
-
In the HTML Filename field, enter a filename for the current document
you want to upload to a remote server. Be sure to add an .htm or .html extension.
-
In the HTTP or FTP Location to publish to field, enter the location
of the remote site you want to publish your Web pages to. You may need
to contact your internet service provider to find out what to type here.
For example, if your service provider is America Online, the URL in this
box might look something like: ftp://ftp.aol.com/docs/. Or,
if a Web server protocol is used, http://commercialweb.com/docs/.
Once you've typed some locations here, in future you can simply select
from the list of remote locations you've established. Click Use Default
Location to use the location youve specified in the Publish panel of
the Composer Preferences dialog box.
-
In the User name field, enter the name you type when accessing the
network your Web pages will be located on.
-
In the Password field, enter the password for your user name.
-
Click Save Password to save your password information so that you
only need to type it in the box once instead of each time you publish your
Web pages.
-
Click Files associated with this page to display all of the files
referenced by the current document. Then select the files you want to publish
along with the document. Click Select None or Select All
to quickly select and deselect files in the list.
-
Click All files in page's folder to display all of the files in
the current document's directory. Then select the files you want to publish
along with the document. Click Select None or Select All
to quickly select and deselect files in the list.
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.
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:
ftp://username@ftp.foo.com/directory1
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.
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:
-
What's the purpose of the page? Are you providing a service, a product,
or entertainment?
-
Who is your intended audience? Knowing your readers helps you shape the
information content and pick a consistent voice to address them.
-
How do you intend to structure the information? It's common to see at least
two levels of hierarchy: a top level index and second-level pages. Put
as much content toward the top of a hierarchy as possible. (This way, even
the casual reader can quickly grasp the sort of information you're presenting.)
The easiest way to lay out your information is by chunking it: break your
topics into subtopics. If you have several small topics, group them onto
a single page.
-
How many links will you include? Remember that readers can create links
that go to your home page as well as to any page within your set of pages.
Also, readers can start to browse your Web page at any number of points;
then navigate them in arbitrary fashion, choosing where to start and stop
browsing. When planning the number of links you'll include, plan to test
their validity on a regular basis.
-
How many pictures, sounds, and movies should you use? The fancier and more
complex your pages are, the more work and time you'll need to develop them.
While multimedia elements definitely add pizzazz to your pages, they also
can make a page take too long to load, delaying the reader from the information
they're looking for.
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.
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.
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:
-
Use graphics and color and vary the font size to enhance your page, but
make sure your page also works when viewed as straight text. And always
include a text alternative to graphic elements.
-
Pare down your text. Usability tests show that people will skip over text
that they consider non-essential. They don't like to scroll. Often readers
will scan a page reading only the text of the hypertext links before they
choose their next destination.
-
Settle on as few heading styles and subtitles as are necessary to organize
your content, then use your chosen styles consistently. Just because Composer
provides six levels of headings doesn't mean that you should use them all
in a single page! Use heading levels in order, with one level 1 heading
at the top, and if necessary, several level 2 headings. Be aware that different
browsers use different spacing and fonts. Use the heading levels to indicate
structure, as they were intended.
-
Avoid overusing boldface, italics, and multiple font styles in your text.
One thing you can do to ease the monotony and visual strain of reading
lots of text on the computer screen is to use the Block Quote paragraph
format and Unnumbered List format (available in the Properties dialog box).
Both formats result in indented text blocks that shorten lines of text,
keep margins clear, and generally make the page easier to scan. You can
also insert horizontal lines to visually separate sections of your document.
See Also
Doing Graphics Justice
Taking Stock of Colors
and Fonts
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:
-
Supply interlaced .GIF files in your pages. Of course, the caveat here
is that not all browsers support interlaced images, but if your pages are
graphics-intensive, it's worth considering. If you plan to use the same
image several times in your pages, provide a link to the graphics file.
Otherwise, the browser has to reload the image every time it's used. Just
make sure your graphics are accessible to the Web server delivering your
pages.
-
Use the Image properties dialog box to indicate the amount of space (in
pixels) you want around an image. This speeds up the dowloading process
because the server doesn't need to request size dimensions to transmit
to the client and can therefore display text faster. You may have heard
of an extended type of graphic image called an image map. An image
map is where different parts of the image activate different links. Clicking
on one area of the image takes you to a specified page, clicking another
area takes you to a different page, and so on.
See Also
Working with Images
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:
-
Avoid overusing boldface, italics, and multiple font styles in your text.
Too much contrast is just as bad as no contrast at all.
-
Making text uniformly bigger doesn't help at all, and only contributes
to making the pager longer.
-
Boldface fonts become monotonous very quickly, because if everything is
bold, nothing stands out, and it looks as if you're shouting at your readers.
Using all uppercase can have the same jarring effect.
-
Choose a few heading styles to organize your content, and then use your
chosen styles consistently. Regular, repeated patterns help readers quickly
establish the location and organization of your information, and increase
the overall legibility of your pages.
-
Use white space judiciously. Don't put blank lines or horizontal rules
everywhere or your pages will look choppy. (Plus, you're trying to keep
page length to a minimum.)
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.
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:
-
Headers: A consistent titling design at the top of your Web page
allows your readers to immediately know what the main point of the document
is, and what (if any) relationship the page might have to other pages in
a related group. Unlike a browsing a book, which is linear in design, a
Web author can never be sure what other pages the reader has seen before
linking to the current page. Graphics placed above the main heading should
not be so large that they force the title of the page on a standard office-size
monitor (640 x 480 pixels) to go off the screen.
-
Footers: Ideally, each page should have a footer that contains your
name, organization, navigational elements (links or icons), copyright information,
and revision/change dates.
-
Email Address: Like any fine work of art, a good Web page should
have a signature or some other form of contact information. You can provide
a link to an email form your readers can use to send comments and feedback
to you. Select the Link tab in the Properties dialog box. In the Link to
field, type the HTML tag mailto: followed by your email
address. At the very least, provide your name, organization, and
street address, in case your page is viewed on a browser that doesn't support
email forms.
-
Navigation: Include a target (a return link) to your top level on
each page so readers have a quick way of returning to the beginning. It
also helps to include links to an index or table of contents, other sections,
and previous and next pages. You might want to add these targets to the
bottom of the page, so the reader always knows where to find them. If your
links only flow downward from the home page, the pages in your document
will become dead ends.
-
Links: Avoid the "click here" syndrome when defining a link; for
example, "Get information about whatever is available by clicking here."
Readers then have to remember where they're going to once they jump to
another page. It's better to link to words or phrases that are a meaningful
part of a sentence; for example, "Information about whatever is
now available." If you use links to items on the same page, remember
to use relative links, as absolute links (full URLs) can cause a browser
to reload the page each time a link is selected.
-
Time Stamps: Date your revisions and indicate those pages that have
been changed or are new additions.
You can add new functionality to Composer by taking advantage of the plug-in
tools available from Netscape. To download the sample plug-ins:
-
Select the desired plugin ZIP file.
-
Save the plugin's ZIP file to the appropriate location:
-
On MacOS, this is the folder Plug-ins located in the same folder
as the Navigator application.
-
On Unix, this is /usr/local/netscape/plugins, or whatever the environment
variable NPX_PLUGIN_PATH specifies.
-
On Windows, this is the directory Plugins located in the same directory
as the Navigator.exe file.
-
Restart Communicator.
Your new plug-in will appear in the Tools menu of the Composer window.