Web Page Building with Netscape Composer 4.7

Web Page Building with Netscape Composer (4.7)

To start, launch Netscape Communicator:

Double click on the desktop icon
or
Click on the Start button--> Programs--> Netscape--> Netscape Communicator

To launch Netscape Composer–the HTML editor–go to:

File menu--> New--> Blank page

The HTML editor is very similar to a word processor. Text can be manipulated in much the same way with Netscape Composer. In addition, the user can set background, type, and link colors, add and manipulate images, and link to other pages or sites.

Things to remember about color choices:

Dark background colors demand light type that is larger than normal
Light background colors demand dark type
Choose complimentary colors for the elements of your page
Above all, your page should be aesthetically pleasing and easy to read

To set page colors:

Format menu--> Page colors and properties
Make sure the <Colors and Background> tab of the dialog box is selected
Click on the colored box associated with that element you wish to change
To set a background image instead of a color, click <Use image> and click on Choose file… to select an image file
The background image is tiled to fill the page. If you choose a small image, you will see many of them in the background.

To title your page:

The page title is the title you see in the title bar of your browser when you browse the web. It is also the title that is displayed in the bookmarks of your browser. Title your pages so that people can recognize your page in their bookmarks.

Go to:

Format menu--> Page colors and properties
Make sure the <General> tab of the dialog box is selected
Type a title in the <Title:> space

Top of Page

To make a link to another location:

Please see discussion of links in the glossary of terms

There are two ways to create a link in Composer. Select the object (text or image) you wish to link then go to:

Insert menu--> Link…
or
Click on the Link button in the tool bar

The <Character properties> dialog box appears. Make sure the <Link> tab is selected.

Type your link in the <Link to:> space (External or Email)
or
Click the Choose file… button to select a file (Internal)

Please see discussion of links in the glossary of terms

Top of Page

To place an image on the page:

An image will be placed where the cursor is positioned

Go to:

Insert menu--> Image…
or
Click the Image button in the tool bar

The <Image properties> dialog box appears. Make sure the <Image> tab is selected.

Click the Choose file… button and select a saved image to place on the page
Other elements that affect your image can be manipulated in this dialog box such as how text aligns or wraps around your image

You can manipulate the size of the image, or stretch and contract the image

Select the image on your page by clicking once on it
Handles appear around the image
To re-size the image, click and drag a corner handle
To stretch or distort the image, click and drag on a handle in the center of a side

Top of Page

To place a table on the page:

A table will be placed where the cursor is positioned

Go to:

Insert menu--> Table… --> Table…
or
Click the Table button in the tool bar

The <New table properties> dialog box appears. Make sure the <Table> tab is selected.

Choose number of rows and number of columns
Choose how the table will align on the page
Choose a border width. This will surround the outside of the table
Choose a cell spacing width. This is how far apart each cell is spaced
Choose a cell padding width. This is the number of pixels that will surround the elements placed in a cell i.e. the margin within each cell
All cell measurements and the border can be set to 0 (zero)
Table width can be set either relationally or fixed
Relational–the table width is determined as a percentage of the browser window. If the user has a small browser window, the table will be small
Fixed–the table width is fixed to a number of pixels regardless of the browser window size

Tables, rows, and cells can have different background colors and background images each set under the appropriate tab in the <Table properties> dialog box. Place the cursor in the cell you wish to modify and right click on the table then choose <Table properties…>. Select the tab of the element of the table you wish to modify then change the color or select Choose file… to set the background. (See To set page colors.)

Top of Page

Tips and hints when using Netscape Composer:

Right click on elements for a contextual menu to change properties of the element
Use Cut, Copy, and Paste to move elements on the page. They can be accessed

From the toolbar
From the Edit menu
By keyboard shortcuts

Ctrl x–cut
Ctrl c–copy
Ctrl v–paste

Top of Page

Glossary of Terms

Directory: A directory is a folder that holds the files for a web page. These files include the HTML files created in an editor such as Netscape Composer and all of the image files for graphic elements of your page. The browser will always load the <index.html> page first when it checks an internet address. Your home page, or main page, must have the file name <index.html>. It is important that this page is named with all lowercase letters. Internet addresses are case sensitive after the third slash in the address (http://www.pdx.edu/…this portion of the address). These are the directory and file names you will be responsible for naming when you create a page or a site.

HTML–HyperText Markup Language: The language that tells a browser what to display. Netscape Composer is a graphic interface that allows the manipulation of page elements. The HTML is written by composer in the background. To see the HTML source code, go to the View menu--> Page source.

Link: There are three kinds of links on a web page. They are:

External link–These are links to other web sites. They have the form of:

Example: http://www.pdx.edu/file.html
Example: http://www.pdx.edu/directory/file.html

These are two types of web addresses. There are other types of web addresses, but these are the most common forms. It is important that <http://> is present in this link.

Internal link–These are links to other pages within your own site. The other pages must reside in the same directory on your web server. These links have the form of:

filename.html

Email link–This type of link allows a user to send an email message with the browser. They have the form of:

mailto:username@hotmail.com

mailto:username@irn.pdx.edu

Site: A collection of linked pages that usually reside in the same directory. A web site usually has the same look across all of its pages. This includes same color scheme and layout of all the pages within a site.

Table: In order to layout elements on a web page in ways other than centered, flush left, or flush right, you will have to use tables. With tables, a web page can be divided into cells that page elements can be placed in. It is possible to further divide a page by placing tables within cells of larger tables.

Top of Page