Download Composer
|
Download and
install the free, open source software at http://www.seamonkey-prject.org/
|
Open Composer
|
|
To access Composer,
click on "Window" in the menu bar at the top of the browser window,
then select "Composer."
|

|
|
Check Settings
|
IMPORTANT! Before you begin,
check the settings in Composer.
- Click on "Edit," then "Preferences."
- Click on "Composer" in the menu on the left-hand side
of the dialog box.
- Make sure the only boxes checked are "Retain original
source formatting" and "Maintain table layout when inserting or
deleting cells."
|

|
You may need to repeat
this step whenever you use the software on different computers before
you open your files to work on them!!
|
Getting Started
|
Save Your File
- Click "File" in the menu
bar at the top of the Composer window, then click on "Save As."
- Enter your page title
(NOTE: This is the title that will appear in the bar at the top of the
browser)
- Enter your file name (index.html if this is the first page
of your Web site; for additional pages, pick a file name with NO
blank
spaces, such as page1.html or pageone.html).
|

|
Open a Previously Saved File for Editing
- Open Composer (see "Open Composer" above). Important!
Verify the settings
before opening your
file!!
- Choose "File," and then "Open
File," or click the "Open" icon
- Locate the page or pages you
wish to edit.
|
Creating Headers
|
Select the
heading level you want by clicking on the down arrow to the right of
the first box on your format bar.
HTML headings designate level
by size. The headings are boldfaced. You can also change
the color or typeface (i.e., different fonts or italics) of headers, or
you can format headers as links.
|

|
|
| Fonts, Colors, Backgrounds, and
Images |
Font Attributes
| Select the
attributes you want from the drop down menu. Composer works much
like a word processor; there's even a spelling checker! |

|
Graphics
Important! To add graphics to
your page, you will need to have a graphic file on your disk or else
have the full URL (or Internet address) of a graphic on the WWW.
Graphics files need to be in either .gif or .jpg (or .jpeg)
formats. I recommend that you keep file names short (approximately 8 characters), and do not use capital letters, spaces, or
special characters (such as /
or *) in your file names.
- Click on "Image" in the
Composer tool bar.
- Click on "Choose File"
and select the image file (Important!
If you have to change directories to locate the image, then the image
will probably not work when you publish your files. Stop NOW and
move the file or files to the directory where you have saved your Web
page files!)
- Type a brief description
in the "Alternate Text" box.
|

|
Background Graphics, Colors, and
Other Page Properties
- Click on "Format" on the
Menu Bar, and then select "Page Colors and Background."
- Select "Use Custom
Colors."
- Click on the color box
next to the item whose color you wish to change (you can change default
text colors, link colors, or background colors), and select the desired
colors from the chart. To use a background image instead of a
background color, type in the file name (or URL) of the background
image.
You can also change the title
that appears in the browser title bar, add meta-data (that is,
information about the author, keywords, etc.) using the "Page Title and
Properties" dialog box. |

|
|
Creating Links
|
Absolute Links
- Type the text you want
people to "click" on
- Highlight the text by
moving your cursor across the text while holding down your left mouse
button
- Click on the "Link" icon.
- In the dialog box that
appears, type in the complete URL (Uniform Resource Locator, or
Internet address), including the protocol (usually "http://").
- Click "OK."
|


|
Relative Links
If the page or file you wish
to link to is in the same directory (for instance, if all the files are
saved to your disk and you haven't created any folders), then, instead
of typing an Internet address, simply type the file name (for example,
pagetwo.html). Make sure file names contain no spaces,
capital letters, or special characters!! This will make it easier
to ensure that your files work across platforms. Make sure that
the "URL is relative to page location" box is checked!!
Named Anchors (Targets)
Create links to different
parts of the same page. This is a two-step process:
- First, you will need to
"name" the area to which you will link. To do this, move your
cursor to the location where you wish to link to, click on "Insert" and
then "Named Anchor" in the tool bar.
- Enter a name (keep the
name brief, with no spaces or special characters). The
image of an anchor that appears in the page you inserted a target will not
appear on your actual page on the Web; it is simply
a reminder to you that you have inserted a target in that
location.
- Go to where you want to
link from and type in the desired text (for instance, you might want to
create a table of contents at the top of your page with headings that
designate specific sections of your page, such as "introduction" or
"conclusion." Highlight the text, click on "Link" in the tool
bar, and type in the target name preceded by the # symbol, for
instance, #introduction or #conclusion, or you may click on the down
arrow to locate the target names.
|

|
Email Links
- Type the text that you want
people to click on. Note that, since some locations may not be
set up to work with automatic email links, you may want to use your
email address instead of just your name or an "Email me!"
message.
- Highlight the text, and then
click on "Link."
- In the "Link Location" box,
instead of an Internet address, type "mailto" followed by a colon and
your complete email address (for example, mailto:jwalker@georgiasouthern.edu).
- Click on "OK" to finish
creating the link.
|
Using Tables
|
Tables are perhaps
one of the most powerful tools you can use for Web page design.
You can use tables without borders to layout elements on your page, to
create margins, to break up large graphics so they load more quickly,
or any number of other uses.
Tables with borders (or lines) can be used to simulate spreadsheets or
to present columns of information. You can even use a table of
one row and one column as a sort of "picture frame" around a graphic
image, simply by playing with the width of the table border.
IMPORTANT!!
You can NOT place pictures and texts on a
Web page the same way you do with a word processor. The tab key
and space bar just won't do it.... Use tables without borders in
order to ensure that pictures and text will actually appear where you
want them to in different browsers with different settings. They
really are worth the trouble it takes to learn to work with them!
A complete discussion of
how to use tables is beyond the scope of this tutorial, they are
relatively simple to use in Composer--click on "Table" and try playing
with them!
For more information on using tables, check out WDVL's Table Tutorial (WARNING!
This may tell you more than you want to know!)
|
Publishing your Files
|
Publishing Your WWW Files Online with CoreFTP
Georgia Southern University's Web site information and
tutorials
|