THINGS TO DO WITH COMPOSER


Netscape Composer is by far the most basic of the web editors available.  That, however, makes it extremely flexible, and extremely cheap (as in free).   You can find other editors that do things with much more automation, such as Microsoft FrontPage or Macromedia DreamWeaver -- even Microsoft Word or Wordperfect can edit HTML.  But Composer is sophisticated and forgiving enough to be an ideal tool for AMST 370.  If you do favor another editor, be careful about switching from one to another on the same site or page: some can use slightly different coding to accomplish the same things, which can confuse things when you try to edit or load a web page.

All of the formatting done on web pages is the result of a programming called "Hypertext Markup Language, or "HTML."  You can see this on any page loaded in Netscape by clicking on View|Page Source.  At times, it is easer, and more certain, to build your page using this code, either by writing your own directions, or by inserting what are called "HTML tags."  (more on this later)  Just remember that web editors accomplish all the layout you want by writing this code in, as it were, the background.  If you would like to know more about such matters, I have bookmarked a good site for HTML code below.

Text Editing

Composer comes with several automatic built in fonts that you should know about

The title is Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Notice that most of the formatting is most easily done after the fact.
 

Heading
A font that is set off with a special format.


Paragraphing is pretty straightforward, even primitive.  One thing to know is that if you just hit Enter at the end of the paragraph, the cursor skips a line to the next one.  If you don't want that space there, hold down the Shift key as you hit Enter.
 

Composer can also make two kinds of lists for you, with variations that are useful

Things To Do Today

Get Up
Brush My Teeth
Take a Shower
Use Soap
Wash Hair
Get Dressed
Find Clothes
Shoes
Shirt
Pants
Eat Breakfast
Read Du Bois
 
 

There are some things you can't do by automation, so it helps to know a few HTML tags to help you along.  Two I find handy are the HORIZONTAL SPACER and the MULTICOL. Simply hitting the space bar in a paragraph does not translate well to the screen, but the command HORIZONTAL SPACER does by telling the computer how many pixels to leave blank.  Practically, this command allows you to in effect put in a paragraph tab, or a blank space, that any browser will recognize (you can also define a vertical spacer).  You must define how many pixels you want to leave blank.  To do this, when you are at the point in your text where you want to insert (like the beginning of this paragraph) click on Insert|HTML Tag.  Then fill in the space w/ <SPACER TYPE=HORIZONTAL SIZE=35>.  Once it is done, you will see a yellow tab letting you know there is something there.
 
 

A lot of neophyte web jockeys try to fudge multiple columns using Tables or Frames.  But neither of these approaches really produce true newspaper-style columns where text reads down to the end of one column and then resumes at the top of the next column.

Fortunately, there is an HTML tag named <MULTICOL> allows you to put true multiple columns in your Web page.  Just move the cursor to the top of the text you want to format into columns and insert a <MULTICOL> tag with the number of columns you want.  It will look like this <MULTICOL COLS=2>.  You can also define a gutter (the space between columns; the default is 10) by adding GUTTER=40 at the end (So the command would now be: <MULTICOL COLS=2 GUTTER=40>).  You can also specify the width for any column by adding WIDTH=x.

Then move the cursor to where you want the columns to end and insert a </MULTICOL> tag: this signals the end of the columns coding.
 
 
 
 
 

Images


There are many formats for images; the most common, and the only ones that work with browsers without a special plug-in (a software attachment that works with your browser) are in either GIF or JPEG format.  GIFs are smaller, and hold fewer (256) colors; JPEGs larger with lots of colors.  Gifs load quickly; Jpegs slowly, but the payoff (with good monitors) is better.

The relative values of these images explains why so often you see what are called "Thumbnails" on web pages, such as those connected to my past syllabus from The Family of Man.

There are several ways to acquire images for your use.  The first is by getting them from another source -- most often a scanner -- saving them to your drive, and then loading them onto your page by clicking on "Image" on the toolbar above.  The image will appear on your page at the cursor point.  You can adjust the size either by clicking on it and dragging the borders, or by adjusting it in pixels or in percentage of window.  You can also adjust the size before you load in an image editing program.  You can also adjust how text flows around the image, and whether or not there will be space around the image.

You can also drag & drop images from other web pages, such as this. Get this image.    Be careful with this, however, don't steal someone else's material.  Again, you can adjust the image using the "Image" dialog box.

There are a number of sites on the web you can go to get public domain images to liven up your page; see the list below to get started.
 
 
 

Page Layout

 

Horizontal Lines

Lines can be inserted to break up your page.  Simply mark the place in the text you want to place your line, click on "H. Line" on the bar above, and voila, there it is.  If you would like to modify what the line looks like (make it shorter, thicker, etc.) double click on the line and adjust the settings.

Backgrounds

Any image, or any color, can serve as a background for your page.  To color the background, click on Format|Page Colors and Properties above.  You can also right click with your mouse anywhere on the page and choose Page Properties.  You may choose a background color, or a background image.  You choose the image just as you did to acquire it above.  You may want to edit it (lighten it, crop it, etc) to suit your needs with another image editor.

Links

Link to other pages by highlighting the property you want to be the link (text or image) and either right mouse clicking, or clicking above on "Link."  You can enter a URL address or, if it is a "local" address (part of your own directory), you can find it and load that.
You can also links to specific places on a page -- either the one you are working on, or on another page.  To do that, you need first to create a target by highlighing the object you choose, and then clicking on "Target" on the toolbar above.  Give it a name you will recognize later.  Once you are done, you can link to that target by highlighting the link in the bottom area of the "Link" box.
You can have the link open in another browser window by adding the attribute "Target" and the value as "_blank"

Tables

Finally, there is the matter of tables.  These help you arrange the page the way you want, keeping elements in place.  You can use tables as invisible structures that hold things in place, or you can have them exposed.  You can use them one at a time, or build one inside another to make a more complex arrangement. The Swem Page is an example of invisible, nested tables; notice Swem uses tables within tables to really organize their material.  Swem's Web Search Page uses a visible table.  The boxes below are set up with an invisible table within a visible table.

Tables are inserted by clicking on the icon on the bar, or going to Insert|Table; there you will find a number of options.  If you want an invisible table by setting Border Line Width at "0."  You can also set background colors and paragraph formatting for each cell, row, column, or table.
 

Seeing what you have

Unlike most word processors, Composer is not WYSIWYG.  To check on how things look, you want first to "Save" your work on the toolbar above, and then "Preview" it, which will show it in the Netscape browser.  You should also check to see how your work looks in Internet Explorer -- sometimes things can change a lot.
 
 

Useful Design Links

IT @ William & Mary

AS @ UVA

For Those Who Want to Go Further: