Before you get started:

1.    Set up folders for saving your work:

·      Create a folder and give it a name that relates to the topic of your Web pages. 

·      Inside that folder, create another folder that will contain all the graphic images for your Web pages.  Name that folder “images” or “graphics”.

 

Important-  don’t use unusual characters ( %, /, etc.) or spaces in the names of your folders!

2.    Copy any graphic images that you want to use on your Web page into the graphics folder.  (This can always be done later, but if you have the graphics now it will save you time.)

3.    Plan your page Design: 

Make sure to consider the type information that you wish to include on your Web page.  Make a storyboard of your site, making sure to include things like:

·      Layout of your main page. 

·      Ease of navigation for your Web page users- how will they move around your site?

·      Graphic images and colors that you want to use

·      Copyright issues related to the content of your page as well as the graphics you use.  Do you need to obtain permission prior to posting any of the information you wish to share? 

 

 

Vocabulary 

download -      To transfer data from another machine to your local machine.

GIF-                A type of graphic format that can be displayed on a Web page.  Line drawings and graphics with large areas of single colors typically work well as GIFs.

HTML -            “Hyper Text Markup Language”  This is the universal code or language that is specifies how the content of a Web page should be displayed in a browser.

hyperlink -       An item on a web page that connects that page to others.  Also referred to as a “link”.

JPEG -            A type of graphic format that can be displayed on a Web page.  Photographs typically work well as JPEGs.

target -            A marker that is placed within an HTML document to allow the establishment of links to other areas on that same page.

upload -           To transfer data from your computer to another computer.

URL -              Universal Resource Locator is the address for any type of web site

WYSIWYG -    “What You See Is What You Get”  This acronym refers to a computer program that produces a product that looks the same as it appears on your screen.  Netscape Composer is an HTML WYSIWYG.

 

Netscape Composer

There are many ways to create a web page.  Netscape Composer is one option that works well for most basic pages, because it is free and is installed with the other components of Netscape Communicator.

 

Go to the File Menu àNew à

·      Choose Blank Page from the File menu if you want to start a web page from scratch.

·      Choose Page from Template if you want to work within a template environment.

·      Choose Page from Wizard if you want Composer to help you build your page.

 

Step 2: Set Page Title and Details

All web pages have a title that is displayed in the title bar of a browser. 

 

 

To give your page a title:

1.    Go to the Format menu.  Select Page Colors and Properties.

2.    Click on the General tab.

3.    Fill in the Title text box with a title for your page.  This can be different from the name of the file.

4.    Optional items: Author, Description & Keywords

5.    Click OK.

 

Page Background

Page backgrounds can easily be changed.  Recognize, however, that by adding a color or image to the background or your Web site you may be affecting the readability of the content.  Make sure that you preview your page in both Netscape and Explorer and on both Macintosh and Windows machines to make sure that the appearance is appropriate.

 

To change the background of your page:

1.    Go to the Format menu.  Select Page Properties.

2.    Click on the Colors and Background tab.

3.    Select Page Colors and Properties.

4.    Select the Use Custom Colors radio button.

5.    To select a background color: click in the box to the left of Background and select a color.

To select a background image: select the Use Image radio button and then navigate to the image file you wish to use.

 

Note: Images are automatically set to fill the entire page background by tiling, so not all images are appropriate to use.

 

 

Working with Text

Composer works very much like a word processor.  To make changes, simply click to place your cursor in the appropriate location and then type.  Formatting changes can be made as you type, or after you have entered all of the text.  Remember that in order to make changes to existing text you must select that text first.  Do this by clicking and dragging across the text to highlight it.

 

To change:	Do this:	Or, select the text and use this button on your toolbar:
font, size, color, or style of text	1.     Select the text you wish to change. 2.     Go to the Format menu. 3.     Choose the appropriate category: font, size, color, or style and make your selection.
text alignment	1.     Select the text you wish to align. 2.     Go to the Format menu. 3.     Choose Align and then select Left, Center or Right alignment.
page background color	1.    Go to the Format menu. 2.    Select Page Colors and Properties. 3.    Select the Use Custom Colors radio button. 4.    Click in the box next to Background and select the color you wish to use.	There isn’t a toolbar option for changing the page background color.  Use the Format menu.

 

Organizing your page with Tables

Web browsers do not recognize tabs or spaces made with the space bar as alignment tools.  The best way to control how text and graphics are displayed is through the use of tables.   To insert a table:

1.    Place the cursor where you want to insert a table.

2.    Go to the Insert menu à Table.

3.    Select the appropriate number of rows and columns for the table.

4.    Select the appropriate table alignment (left, center, or right.)

5.    Determine whether or not you want a border.  If you do not, make sure that you de-select the check box, or change the border width to zero.

6.    Determine a Table Width.  You can use pixels or a % of the Web page to set the width of your table. The choice is up to you.

·       setting the size with pixels will keep the table size

·       setting the table size by % will allow it to expand and contract depending upon the size of the browser window. 

7.    Determine if you want to have Equal Column Widths. 

8.    Determine if you want a Table Background:

·       To color the table background: click in the Use Color checkbox and select the color that you wish to use

·       To use an image as the background: click in the Use Image checkbox and navigate to the image you wish to use.  Make sure you check the Leave image at the original location box.

 

To edit an established table:

1.    Place the cursor inside the portion of the table

2.    Macintosh: go to FormatàTable Info.

Windows: machine, go to Format à Table Properties.

3.    Using the tabs on the Table Properties menu across the top, edit the Row, Cell or Table.   Make appropriate color, alignment, border, and cell span (merges cells together) in this wind

 

Adding Graphic Images

Graphics enhance Web pages, providing visual content to help project your message.  There are two graphics file formats that are acceptable for use on the web. 

 

These are:

GIF format, which works well for line drawings and graphics that have large areas of single color

 

JPEG format, which works well for photographs and graphic images which have areas of gradient colors.

 

There are a variety of ways to obtain graphics for your pages:

1.    Use graphics from a CD collection of graphic art.

2.    Download graphic images from the Internet.

3.    Create your own images in a graphic program (this can be done in PowerPoint, too!)

4.    Scan images that you or others have drawn, painted, etc.

*** Note: It is very important to remember to observe copyright when using graphic images that were created by someone else.  Make sure that you investigate the restrictions placed on the use of graphic images.  Most Web sites and CD collections are very clear about their citation expectations.  When in doubt, don’t use the image.

 

To Insert A Graphic Image

1.    First, make sure that any graphic images that you wish to use are saved in the graphics folder within your Web page folder.

2.    Place your cursor at the approximate location for the image on your Web page.

3.    Go to the Insert menu and select Image.  Navigate to the graphic image you wish to use on your page and select Open.

4.    Make sure to check the box “Leave Graphics at the Original Location”.

5.    Click OK.

6.    Double-click on the image to edit the size or alignment of the image.

 

To Insert A Horizontal Line

Horizontal lines can be added to your Web to divide the information on your page and make it more readable.  To do this:

1.    Place your cursor in the appropriate location.

2.    Go to the Insert menu.

Select Horizontal Line.

 

Hyperlinks

A hyperlink is a connection on a Web page that allows users to travel from one area to another.  A hyperlink can be text, graphics, or both.  There are four different types of hyperlinks:

1.    Links to another page within your site

2.    Links to external sites using a URL

3.    Links which send email.

4.    Links within a single page, also called “Targets”

***Note: Links that you add  will not work within the Composer environment.  To test your link you must preview your page in Netscape Navigator.  To do this, first save your work, then click on the Preview button on the toolbar.  ***

 

To add a page or external link onto your page:

1.    Determine what element on your page you wish to have serve as the link.  If it is text, type the text on your page.  If it is a graphic image, insert it in the proper location.

2.    Select the item that you plan to use as a link.

3.    Go to the Insert menu à Link. 

4.    Type the correct URL or location of the file you wish to link to.  The text or graphic that you have selected to become the link will show in this window.

 

To add an email link: 

1.    Determine what element on your page you wish to have serve as the link.  If it is text, type the text on your page.  If it is a graphic image, insert it in the proper location.

2.    Select the item that you plan to use as a link.

3.    Go to the Insert menu à Link.

4.    Type mailto: and then the complete email address. 

For example:  mailto:joestudent@unm.edu

5.    Click OK.

 

 

To add a target link to your page:

1.    Establish the location of the target on your page.  Click in this location, go to the Insert menu and select Target.  Name the target something that reflects the location of that target.  Notice that Composer puts a target icon on the page-  this will not show when previewed in Netscape.

2.    Create the text that will become the link.  Often target links are part of a navigation bar at the top of a Web page.

3.    Select the item that you plan to use as a link.

4.    Go to the Insert menu à Link. 

5.    This time, instead of linking to a location or file, select that appropriate target from the text box toward the bottom of the window.

6.    Click OK.