Netscape Composer Tutorial

Download Report

Transcript Netscape Composer Tutorial

Netscape Composer Tutorial
Creating web pages with the web
editor Composer
P.D. & M.S. Krolak
© Copyright 2005
Goals of the Lab
Goals of the Lab:
•
•
•
The goals of this are centered around creating
interesting, attractive, and compelling web documents
in an efficient and productive manner. To learn the
Netscape web editor, Composer, an editor that makes
creating web pages only slightly more difficult than
creating word processing documents.
To learn how to design tables and to use the table tags
to create attractive two dimensional layouts.
To learn how to find and create a web resource page
to keep track of sites that contain free and shareware
resources to make creating more attractive web pages
easier.
WYSIWYG editor
Writing Web Pages using Netscape 7's Web
Editor, Composer
Netscape HTML editor, Composer, works like a What You See Is What
You Get (WYSIWYG) word processor, e.g. MS Word.. In the previous
lab we actually used some of the HTML tags and created HTML
documents.
To use Composer one only needs to:
–
–
–
select the appropriate button in the
composition toolbar,
answer the questions in the resulting dialog
box and fill in the appropriate text boxes, and
click the [Apply] button to see what the
change looks like and the [Close].
WYSIWYG editor (more)
As we move into the era of dynamic documents, this
becomes harder and harder to do. In newer Web page
editors, much of the action is also buried in the source
code. Thus, it is hidden from the viewer. As a result,
Composer and other similar editors use tags to indicate
how the content behaves at the source code level.
This hidden layer could include:
•Java applets,
•Javascript and other scripts,
•forms, and
•frames.
Netscape's Composer -- a WYSIWYG
HTML Editor:
To open Composer:
• Open Netscape 7 Navigator
• Select [Window]/Composer
• Composer will appear as above
• Select
The Toolbar
• The toolbar has the standard Netscape tools
File, Edit, View on the left side and Window,
Help
• Insert, Format, Table, and Tools contain detailed
HTML functions.
[Insert]
Insert:
The insert operation contains the major composer tool bar buttons, i.e.. link,
target, image, H. Line, table. The major new insertion operation found only here
is the insert HTML Tag.. This allows the user to insert any HTML tag not
supported directly by Composer.
Insert Dialog Box
Operation
Insert Image
Insert a Table
Insert Link
Insert a Named Anchor.. (an inline anchor or
reference point)
Insert Horizontal Line.
Insert HTML
Insert Characters and Symbols
Break below Image
[Insert]/NamedAnchor
Named Anchor:
The named anchor operator creates an inline anchor or reference point on
the Web page that can be reached from links from another point within the
same page or from other documents. The name should be unique to the
page. The highlighted text will normally be used to form the name, unless
the document's author overrides it. When viewing the page in Composer a
target's location is indicated by the tag icon. (This an example of how
WYSIWYG word processors and HTML editors differ.
The Named Anchor Dialog Box
[Insert]/HorizontalLine
Horizontal line or Horizontal Rule <HR> tag:
The H. Line is used to create a separator between sections of the document using a horizontal line.
This used to be called a horizontal rule. There are attributes to the <HR> tag that allow for 3-D
effects, greater control of length and positioning, etc. These are not all currently supported by
Composer. Use the HTML editor if these attributes are needed. To create a horizontal rule, click the
mouse where you want it to appear, and then click the H. Line button.
Using the Mouse to alter the length and the width of the Horizontal rule.
Clicking on the horizontal line will bring up a dialog box that will allow the user to alter the width,
length, or appearance.
You may note that some pages on the Web use a graphic as a horizontal rule. These are just a special
form of inline image. Thus, they can be captured like any other image on the Web and can be
applied by the image button. To find archives of simple ones or animated ifs search for "image
archive" + bar.
The horizontal rule can appear to be three dimensional. For example see below.
The Composition Bar
The Composition Bar offers one button
tools for rapidly carrying out common
tasks.
Composition bar
• The one button tools are the most frequently used
editing operations, and offer assistance with the more
complex HTML tags for creating links, targets, images,
horizontal rules, and, most importantly, setting up tables.
Dialog boxes request user preferences and other
information necessary to create the containers for the
tag(s). The most common examples are the image and
the table tags.
• Table tags are really containers within containers that
denote colors or backgrounds, captions, horizontal and
vertical alignment of text and table, and the borders of
the table and each cell. Thus, the dialog box involves
specifying many items.
Composition bar
• Composition bar contains frequently used functions,
New, Open, Save file operations
• Publish - allows publishing the document to the web,
• Browse - view the it in the browser,
• Print it out
• Spell check the document
• Image – Add an inline image to the document
• Table – Create a table
• Link -- Link HTML documents, named anchors, audio
and multimedia.
New Button
New:
Click this button to create a new file (Web page).
Open Button
Open:
Open -- opens HTML files that have been created at an earlier
time. The operation uses the normal Window's directory dialog
window.
Save Button
Save:
As the name implies, this saves the updated file. It is probably a
good idea to use File/SaveAs.. on the toolbar to make sure the file
is being stored in the disk and directory you think it is. This may
seem like a waste of time, but it could save an evening's work if
the files turn out to stored on the lab computer's desktop and are
erased by the next student user.
The nice feature of this particular save operation is that it also
saves all the images to the same directory. An image rich Web
page then should be stored in its own directory or folder along with
its images and other multimedia.
Publish Button
Publish:
Publish replaces the need for using Ws_ftp to do a file transfer
between the PC lab computer and ceweb.uml.edu where your web
site resides.
The Publish operation will work between any two machines.
After setting up the preferences, [Publish] will allow movement of
the HTML document and all the associated files with one
operation.
.
First Step -- Publish button
1. Click [Publish]
2. Click Setting Tab
1. Site Name –
ceweb.uml.edu
2. Pub address –
http://ceweb.uml.edu/
3. Http address (URL) -http://ceweb.uml.edu/
User_id
4. Fill in the User_id
and Password
Before Publishing
After the Web page has been:
1. created,
2.edited,
3.checked for grammar, spelling, content,
and appearance, and
4.finally validated with a tool like Dr. HTML
(see Lab 3),
then it is ready to be uploaded to your
website (Published).
Page is ready to Publish
1. Click [Publish]
button
2. Click Publish tab
3. Site Name –
ceweb.uml.edu
4. Use the defaults and
click publish button
(see arrow)
Browse Button
Preview:
Clicking this will allow the author to view the current file (Web
page) with the Netscape Browser. Remember that Composer and
any other HTML WYSIWYG editor can show only an
approximate page, as it must also include many non-display
features needed to create the page. The browser is under no such
obligation to display these artifacts in the final result.
Print Button
Print:
The print operation tells the specified printer to create a printed
version of the Web page. Normally, the background and/or the
background color is not printed, even on a color printer.
Using Images in your web
page
Image possibilities
• The Image Button allows you to add images to your
page.
• The images placed on a page are known as inline
images.
• Clickable images that link the image to a URL are
called buttons. A button can link to another location on
the page, another external page, or a sound or video.
• An image used as a background upon which the text and
inline images are placed is called, naturally, a
background image.
• An image with defined clickable regions that point to
URLs, or cause an action when a mouse event occurs
(onMouseOver, onMouseOut) is called an image map.
Image Button
Creating Inline Images:
Click the Image button to bring up the Image Properties
dialog box.
Fill out the image
dialog box
Image Location Tab:
• Image Location – use the location
on the web, i.e. its URL or use the
[Choose File..] to locate the
image on your computer.
• The image is saved with the HTML
file in the same directory unless
the URL is relative to page
location check box is checked
(clicked on), in which case it
leaves it where it is..
• Use the Alternative text (short title
or description for visually
impaired).
• Note after the Image location is
chosen a thumb nail of the image
will appear.
• Advanced Edit – normally used by
advanced web designer.
Image Dimensions Tab
Image Dimensions tab:
Optional if Actual size
If you need to resize, click
Custom Size.
•Constrained check leaves
the ratio of height to width
the same.
•Select the new width (and
height if not constrained)
•The size can be either in
pixels or % of window size
Image Appearance tag
Image Link tab
Table Button
Tables allow the author to create a two
dimensional layout for the document.
This control is necessary for a
professional and pleasing appearance.
The Table Button
Table:
Tables are extremely useful in the laying and positioning of text,
images, and data. HTML is designed to flow data onto a display
and hence the two dimensional layout of material is difficult if not
impossible in the early versions of HTML. The table container
allows the designer to create these relations and to have some
sense that the viewer will see the layout as the author intended.
Initial Table Dialog
• Click the Table button
• Fill in the number of rows
and columns
• Fill in width either in
Pixels or % of window.
• Border 0 is none, 1-2 is
flat, 5-10 is a 3-d boarder
• Click [Advanced Edit..]
and fill in the table
attributes
• When done click [OK]
Advanced Edit – set the attributes
• The Advanced
Properties Edits the
Table attributes
• Click Selector arrow
• Select the attribute
from the list and
double click on it.
• Set the value in the
Value window.
• When done click [OK]
After the table appears –
Modify cells, rows, columns
• In the table click your
mouse on the object
to change (cell, row,
col).
• Click [Table]
• Cell dialog box
appears fill in
changes and use
[Advance Edit] to
modify object’s
attributes
Mistakes, Modification, and Redesign of
Tables:
How do I delete a table, row, column, or cell?
• You may create too many rows or columns, and want to delete
some. This is done in the following manner:
• Click the Edit button in the Toolbar:
• Undo maybe used right after creating the table to delete it and
start again.
• Otherwise, you can use the Delete Table sub-menu:
– Table -- Deletes the selected Table.
– Row -- Deletes the selected Row.
– Column --Deletes the selected Column.
– Cell -- Deletes the selected Cell.
• The Select Table allows the selected Table to be modified
Examples
Examples of Row or Column Deletion
Place cursor in top row and click [Edit] /Delete
Table/Row
1
2
3
4
5
6
Place cursor in top row cell 1 and click [Edit] /Delete
Table/column
1
3
5
2
4
6
Result
2 5
3 6
Result
2
4
6
Spell Button
Spelling:
The Spelling button starts the spelling checker, as it does in most editors. When using it
on your own machine, it is often useful to teach it your special words, text, and
abbreviations
You should always check your spelling before placing a page on your website.
The Spell Checker Dialog Box
Linking materials
Link Button
Link:
Requires you to supply two items:


A text description of the site that the viewer will be transferred to
upon clicking the text.
The URL of the linked location.
The text you supply should be a meaningful description of what will
follow. If the material to be linked is a large file, likely to be slow to load,
then the viewer should be informed how large the file is and given an
estimate of the loading time.
The Link Properties Dialog
The URL can be an absolute URL,
in which case:
•Type it in the "Link to" window in the
dialog box.
•Copy from the Netscape Location:
window and paste in the second window.
•Place the mouse on the text link and click
the right mouse button; then select the
Copy Link to Clipboard option. Finally,
paste it in the "Link to" window.
The URL can be a file in the current
system's directory, (i.e. a relative
URL).
•A simpler method is to click [Choose
file..] and use the usual Window's
directory dialog box to find the correct
file, highlight it, and click [Open].
•After the link's text and URL are
completed and click [OK].
Linking to Special URLs
Linking to Special URLs including Mailto to
setup Email Links
•Review the material on special URLs such as: ftp,
etc.
•The Mailto link is of major interest to most
authors. Simply fill in the text as in a general link in
the second window:
Mailto:Author's_Email_Address
•Where Author's_Email_Address is your usual
email address, e.g. [email protected]
The style bar (Formatting Bar)
Creating the look and feel of the
document.
Formatting Tool bar -- Style bar
• The style bar allows the author to create the html text
containers, i.e. physical, logical, and font.
• Lists – ordered and unordered
• Tab right and left
• Alignment
–
–
–
–
Left
Center
Right
Justified
Style
Changing the font
In the above row of icons that there is a drop down list for paragraph
formats, the color selector for text and backgrounds, the highlight color,
and [-a] button to decrease the font size, and [+a]: button to increase the
font size.
By clicking on the button with the small black triangle, a list of paragraph
format options will appear
The style:
First highlight the text that is placed in the style container. Click on the selector
arrow for the pull down menu of choices (see below). Click on the choice of
container. Click on the highlighted text.
Text and Background Color
Selection
Color Selection:

The top square shows the current text color. Click on the square and select
the new text color.


The bottom square shows the background color. Click on the square and
select the new background color.
Selecting colors
The color of the text (click on the selected color)
The default color palette for the font will appear when the user clicked on the
top color square (the Text) or the lower square (the background color). The
Color selector will appear below.
The choice for more colors than those in the color table
the user can try using a color name like 'Navy" or using
the RGB hex number. See the HTML color section in the
HTML Tag lesson.
Highlighting
Background highlighter:
Highlight the desired text and click the [Highlight] button and select the
desired color.
Physical Text
Physical Appearance of the Text Buttons
Highlight the text, click one or more button choices (bold, italic, underline)
and click on highlighted text to apply.
The Bold button:
Click on the Bold Capital A to turn on -- click again to turn off.
The Italic button:
Click on the italic Capital A to turn on -- click again to turn off.
The Underline button:
Click on the underlined Capital A to turn on -- click again to turn off.
Lists
Simple lists breaks down into two main types:
– Unordered lists with each item denoted by a printer's bullet or other
symbol , or
– Ordered lists (those that use a number or letter)
Other list types that require the use of the Format button on the tool bar are:
– Definition, and
– Dictionary
– Menu
Note that the Unordered List will select the style of the bullet (disk) for you based on rules of nesting or
indentation. Similarly, for Ordered Lists, it will select order element type (numbers or alphabetic
characters). If this offends your sense of layout, use the HTML editor to override Composer's
selection. You can achieve almost all the control needed for any list layout -- select the [Format]
button/Character Properties/Paragraph, then select the correct options to determine list style, type of
character or disc to display, and the starting value. This is tedious, but necessary for greater control
over the details.
Text Alignment
Text Alignment:
Tab out
Clicking on button causes the cursor to tab to the right.
Tab in
Clicking on button causes the cursor to tab to the left.
Unordered List
The Unordered List
To create an unordered (bullet) list:
Click on the
button to turn it on.
Enter each list item and end the item by [Enter]
Click the
button to it turn off.
This will tab out and start a new paragraph.
Ordered List
The Ordered List
To create an ordered (numbered) list:
button to turn it on.
1. Click on the
2. Enter each list item and end the item by [Enter]
button to turn it off.
3. Click the
4. This will tab out and start a new paragraph.
Align the text element
Align the text element
Click on the button; select one of the four buttons –
1. Left,
2. Center,
3. Right, and
4. Justify alignment.
FAQs
Q: How do I begin to use Composer:
Ans: It is recommended that the reader start by reading the
Netscape 7 Composer Users Guide:
http://www.cs.uml.edu/~pkrolak/lab4/ComposerIntroduction/Net7Use
rGuide.html
Q: How do I open Composer to begin editing?
Ans.: In the Browser there are several options:
• First, to edit a Web page currently being displayed, click [File]/Edit
Page.
• Second, to edit a page from the user's directory or with a known
URL, click [File]/Open Page. The dialog box will appear; give the
URL, or, if the file is on the user's machine, select [Choose File..],
then select the file and hit Open in the directory dialog box. In the
Open File Dialog box, again select Composer and Open.
• Third, on the tool bar click [Window] and select Composer.
• At the bottom of the Navigator Window click the Composer icon
• Finally, click [Ctrl-4].
FAQs (more)
Q: How do I set the background color, image, or the
default colors of the text, link, alink (active link), or
the vlink (visited link)?
Ans.: Click [Format]/Page Colors and Backgrounds ...
Q: How do I get special characters, for instance the
copyright symbol, into my text?
Ans.: Click [Insert]/Characters and Symbols ... For
more information see.
Q: How do I get the Netscape Composer plugins?
Ans: The plugins and instructions for using them -http://developer.netscape.com/docs/examples/plugins/c
omposer/index.html
FAQs (more)
Q: How do I find out what plug-ins are available on my copy
of Composer?
Ans.: Click on the [Tools] menu.
Q: How do I stop the Link operator from "linking the text following the text
that was specified"?
Ans.: Composer still thinks that the container for the link text is open.
Highlight the text that you don't want to be part of the Link, click [Format]
and select "Remove Links".
Q; How do I insert tags not supported by the current Composer editor?
Ans: Composer does not support the full set of HTML tags -- <base>,
<Object>, <Embed>. To overcome this one can insert the non-supported
tags one at a time using [Insert]/HTML Tag.. See the discussion on the
[Insert] Also by clicking on the <HTML> Source tab on the bottom of the
Composer window one can edit the source code directly.