Creating a Web Page with Composer


Download Composer | Open Composer | Check Settings | Getting Started | Creating Headers | Fonts, Colors, Backgrounds, and Images | Creating Links | Using Tables | Publishing Your Files

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."

Open Composer

Check Settings

IMPORTANT!  Before you begin, check the settings in Composer. 

  1. Click on "Edit," then "Preferences." 
  2. Click on "Composer" in the menu on the left-hand side of the dialog box. 
  3. Make sure the only boxes checked are "Retain original source formatting" and "Maintain table layout when inserting or deleting cells."
Check settings

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

  1. Click "File" in the menu bar at the top of the Composer window, then click on "Save As."
  2. Enter your page title (NOTE: This is the title that will appear in the bar at the top of the browser)
  3. 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).
Page Title

Open a Previously Saved File for Editing
  1. Open Composer (see "Open Composer" above).  Important!  Verify the settings before opening your file!! 
  2. Choose "File," and then "Open File," or click the "Open" icon
  3. 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.


Headers


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! Select font attributes


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.

  1. Click on "Image" in the Composer tool bar.
  2. 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!)
  3. Type a brief description in the "Alternate Text" box.

Graphics

Background Graphics, Colors, and Other Page Properties

  1. Click on "Format" on the Menu Bar, and then select "Page Colors and Background." 
  2. Select "Use Custom Colors." 
  3. 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.
Background colors


Creating Links
Absolute Links

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

Absolute links

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:

  1. 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.
  2. 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. 
  3. 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.
Named Anchors

Email Links

  1. 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. 
  2. Highlight the text, and then click on "Link." 
  3. 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). 
  4. 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

Back to Top
© 2008 J. Walker