banner  
New Composer Document || Page Properties || Page & Background Colors || Inserting Text || Using Lists ||
Inserting Graphics || Inserting Video and Audio || Adding Links/Anchors || Saving & Viewing ||
 To Edit your WebPage ||  Inserting a Table || Editing a Table
1. Starting a new Composer Document:

Composer is a program in Netscape Communicator. Open Netscape 7. In the File/New menu, select Composer.
newcomposer
2. Identifying Page Properties

Under the Format/Page Title and Properties you can name your file, and place information about yourself and the web page. This information will not be visible on your web page but search engines can read it from your code.
page title
3. Identifying Page Color and Background

Under the Format/Page Colors and Background, menu you can select your background color, insert a picture as a background, and identify your text and link colors.

First select Use custom colors if you wish to select your own colors. Then click on the color bar to change. For example to change your Normal text color, click on the black box. A color grid will appear and you can select your default text color.

You also have the option to insert an image to be used as the background but becareful. There are many great images that don't make good backgrounds. If you use a picture background, make sure you save it in the same folder as your webpage.
          pagecolors    color chart
4. Inserting Text

The most important feature about text is that it must be legible. There are only three fonts supported by all computers. "Arial", "times" and "courier".You should use only these fonts in writing text to be viewed on the web.

 You can write on your blank page, much like you would in a wordprocessor.

It is considered a good design practice to indent from the margins because it makes it easier to read the text.

Hold your mouse over the menu icons and it will show you what they do. This is known as a mouseover. Indenting to the right is represented by the right arrow, next to the page alignment icons.

Highlight individual text to change its style or color.  
readtext





bold



individual text color
5. Using List Functions

Lists can help organize information on your page. Lists are commonly used in two forms: bullets and numbers. Bullets and numbers can be combined with the Indent Right command to create an outline.

To create items in a list, click your mouse to place the insertion point within the line of text that you wish to format. Click on t he list  bullet or number icon or go to the format/list menu. Each time you indent, your bullet and number are changed to reflect a subset status.

To remove a bullet or number, highlight the lines to be changed and click on the bullet or number icon. Generally, in computer programs, the button that causes the effect also removes it.


Table of Contents
  • Scholarship
    • Courses
      • Undergraduate
      • Graduate
    • Presentations
    • Publications
  • Service
    • UVM
    • State
    • Community
  • Research

Table of Contents
  1. Scholarship
    1. Courses
      1. Undergraduate
      2. Graduate
    2. Presentations
    3. Publications
  2. Service
  3. Research
6. Inserting Graphics

Make sure you have placed all the pictures you wish to use in your web folder.  Pictures must be in .gif or .jpeg format and named accordingly.

Go to the Insert/image menu or use the image icon to insert a picture into your document.

Alternate text is short description of what the graphic shows. Some visually impaired users have text readers that will describe your alternate text even though they can't see the pictures.

Dimensions: If you click on the Dimension tab at the top of the Insert image dialogue box, you will see the dimensions of your picture. You may custom size it but if you are ever planning to print your page, you need to do all your resizing of pictures in a graphic or scanning program.

Appearance refers to where the picture will appear in relation to your text.  You can align it to your text in a variety of ways but you will best be able to control where your graphics and text will appear when you learn to use tables.

inserting a  picture


appearance
7. Inserting Audio and Video

You can link to or insert a video or audio clip into any of your webpages but you must write some simple code to do this.

Go to the page you wish to insert the video into or create a new page, just for the video.
Go to the Insert/HTML Menu on the top of your screen and a blank dialog box will appear.

Other settings that can be manipulated include:
  • CONTROLLER=true  (this includes a  bar on the bottom of the video). You can change this to CONTROLLER=false to remove this bar
  • LOOP=true (it will play over and over), LOOP=no, it will only play once.
  • AUTOPLAY=no (it will not play automatically.)  You need to click on it. AUTOPLAY=yes means when you come to that page, the movie will automatically play.
  • To see your movie play, save your page and look at it in Netscape NAVIGATOR.
  • Just like a graphic, you must have the actual movie or audio file in the same folder as the page and upload it to your public_html folder for it to play on the web.
  • Make sure you write the code exactly in this format except to substitute your movie's name for campapple.mov.
 

<embed src="campapple.mov"pluginspage
="http://www.apple.com" width=280 height=220 controller=true loop=false autoplay=no>


  • The example above demonstrates the code for a Quicktime Movie entitled "campapple.mov" that is 280 by 220 pixels in size. It includes a link to download a free Quicktime Plugin for their Browser for people that may not already have it installed on their computer. 
  • You can adjust the size of the movie by altering width and height but make sure you are not devaluating the quality.
  • Remember to keep movies short - 2-3 minutes is recommended.

  • Insert an audio file in the same way. If you wish the audio file to play with your web page, embed your code at the beginning of the body text.

<embed SRC="aftermidnight.mp3" Width=280 Height=220 Controller=true loop=false autoplay=no>

Note:
You must respect copywrited material and cannot play segments of someone else's work without their permission.

8. Adding links

You can make text or a picture link to another website, another one of your pages, or to a specific place on one of your pages. . Highlight the words or picture you wish to make into a link. Hint: Keep text short and simple but descriptive. Then go to the Insert /Link menu or click on the link icon.

To link to one of your own pages, you can just Choose File (make sure it is in the same folder as the page you are working on. If you are linking to any other page, include the entire address starting with http://............

You can also link to documents. If you have a Microsoft Word document that you want others to access, make sure that file is also in your web folder, Write some words like-to download the syllabus. Also make sure the document you saved has the correct file extension ie.. (syllabus.doc,  syllabus.pdf)

If you would like to add an e-mail link, you can do so also. First its a good idea to actually write your e-mail address on the page, then highlight it as you would any link. Go to the Insert/Link menu and in the choose file dialogue box write:
mailto:jmorris@zoo.uvm.edu replacing your e-mail address for mine. Note there are no spaces in the mailto command.

Anchors: Anchors are links to specific places on a webpage. This is a two phase process. First you have to identify the anchors or places you want to link to on your webpage. Highlight a word in the place you want to link to and go to the Insert/Named Anchor menu. This lets you identify the name of your Anchor. You can indentify as many anchors as you wish on a page.

The next step is to link to these anchors. Hightlight the word that will appear as the link. Go to Insert Link menu icon and when the dialogue box appears  go to the text field and pull down the arrow on the right of the field and a list of the page's anchors are listed. Click on the one you wish to link to.
link

document links

mailto
To add an e-mail link


anchor
To Identify an anchor

anchor link
To link to an anchor

9. Saving and viewing your pages on Navigator.

Never save your file in Navigator!  

Make sure you are in Composer when you save. To see what your page will look on on the web, select the Browse icon. You will be prompted to save because Navigator can only read saved files. To return to your composer window, go to the top menu called Window and all your open Netscape files will be listed.


composer view


COMPOSER


navigator view
NAVIGATOR
10. To Edit your web page.

Go to the File menu in Netscape Navigator and select Open File. Go to the folder where you are saving all your web pages and you will fine your composer  html file.

To turn it into a Composer page so you can work on it again go back to the file menu and select Edit Page. This will open up your page in Composer and let you edit it.

If you wish to edit a page already on the Internet, use Navigator  and go to File/ Open Web Location and put in the URL. Once the web ge is open in Navigator, Go to the File menu and select edit page.
open composer            edit page
11. Inserting a table.

Tables help you organize, control and present information in a grid of columns and rows.  You can use one or more tables on a page when you want to have greater control over the layout of your text and images.  

To insert a table click your mouse where you want it to appear on your page. Click on the table icon or menu Insert/table. Your table can be customized. Indicate the number of rows and columns (this can be changed later).
In choosing a width, you should decide whether you want % of window or  a pixel neasure.

Note: % of window will be controlled by the user and the size of the window they select. When you put in a specific # of pixels you control the layout, regardless of how the user resizes their window.

 Border

Note : Composer uses a red dotted line to indicate tables with a zero border; the dotted line disappears when the page is viewed in a browser.













add table







12. Editing a table/cells

Select the table that you wish to edit, or click anywhere inside it. 
To move from one cell to another in a table, use the tab key to go from left to right.

Open the Table /Table Properties and the dialogue box menu appears with two tabs: Table and Cells.


Click the Table tab to edit
that table.   Use this to respecify the number of rows and columns and width of the table.

You can also redefine your border and designate customized spacing and cell padding qualities.

 Spacing refers to the space between cells, and the cell padding (the space between the contents of the cell and its border).

Table Alignment: Use this to align the table within the page. Choose an option from the drop-down list.
Caption: Choose the caption placement from the drop-down list.
Background Color: Use this to choose a color for the table background, or leave it as transparent.o view, change, or add properties for one or more cells:

To change cell, row, or column properties:

Select the row, column, or cell, then open the Table menu and choose Table Properties. The Table Properties dialog box appears.
Click the Cells tab to edit the following properties:
  • Selection: Choose Cell, Row, or Column from the drop-down list. Click Previous or Next to move through rows, columns, or cells.
  • Size: Type a number for Height and Width, and then choose "% of table" or "pixels."
  • Content Alignment: Select a vertical and horizontal alignment type for the text or data inside each cell.
  • Cell Style: Select Header from the drop-down list for column or row headers (which centers and bolds the text in the cell); otherwise choose Normal.
  • Text Wrap: Select "Don't wrap" from the drop-down list to keep text from wrapping to the next line unless you insert a paragraph break. Otherwise, choose Wrap.
  • Background Color: Select a color for the cell background or leave it as transparent.
Click Apply to preview your changes without closing the dialog box, or click OK to confirm them.

Note: To change the text color or background color of one or more selected cells or the entire table, select the cells or click anywhere in the table and then click the text color or background color icon in the Format toolbar.

Note  To change the color of cells to the color last used, select the cell, then press Shift and click on the background color picker. This is useful when you want to use one color for individual cells.

To learn more about creating Complex Tables
insert table

spacingpadding














define cells