Augsburg Logo



Creating Web Pages with Netscape Composer

What to Do Before You Compose Your Page

As with any creative effort, the most important thing is having an idea of what you want to do. The most powerful word processor doesn't write great prose all by itself! Somebody (like you!) has to have a good idea about which you want to write. Well, the same holds true for web pages, so don't just jump into making a page--get out a piece of scratch paper and hand draw some ideas of what you want on your site.

Links to additional resources to assist you in developing and refining your web pages are available on the Web Page Construction (HTML) Resources web page which is part of this web site.

Basically the items you'll want to place on your site fall into three categories:

  1. Text (the words on your page),
  2. Graphics (the pictures), and
  3. Links (hyperlinks to other places on the Web).

Text: In this lesson we're going to use a recent version of Netscape Composer (a module of Netscape Communicator) to create our web pages. For text entry and editing, Composer works pretty much like any word processor--copy, paste, spell check, etc. are all available. Of course as with any writing, grammar and mechanics count. A typo on the web has the potential to embarrass you all the way across the world, so write well!

Graphics: Web graphics come in three standard formats: JPEG, GIF, and PNG. PNG is an emerging standard which hardly anybody has embraced, so we can ignore it. The two formats about which you should know are JPEG (which stands for Joint Photographic Expert Group) and GIF (Graphics Interchange Format). These are two different set of rules for how web graphics files will be saved and displayed. Both will work just fine on your web page, so what's the difference?

GIFs tend to be a bit smaller, but their quality and complexity is limited. GIFs may be animated--many of the moving graphics you see on web sites (and all of the animations you see on the Technology Preparation site) are animated GIFs. JPEGs tend to be higher quality, but their file size can get hefty, which can slow down your page. In general, when you are using simple graphics for illustration and navigation purposes--things such as arrows, lines, backgrounds, etc., use GIFs. When displaying a full-color photograph, use JPEGs.

There are two major ways to get graphics for your web site. You can create your own web graphics using a scanner and standard graphics software or you can "harvest" graphics from other web sites. There are many web sites set up specifically to display and distribute copywrite-free graphics for you to copy and use. One of the easiest to navigate is the Microsoft Clip Art Gallery . (An alternate Microsoft clip art gallery can be found here.) Another easy-to-use site is Barry's Clip Art. These sites have an enormous amount of web-ready graphics for you to use on your web page: buttons, bullets, backgrounds, animated GIFs and more! Harvest whatever you need and use them on your pages.

Links: To what other web sites do you want to link? Maybe you'll want to link to your favorite sports team's web site, or your school, or whatever. Anyplace to which you can go with your web browser is "linkable" to your web site. Make a list of your links and have them available when you compose your page.

Very Important Step: Before you create your web page(s), you must make a home folder or directory for your web site. This is a folder in which all of the items for your web site (pictures, HTML text, etc.) will reside. It is very important that you create this folder first or your hyperlinks and graphics may not work correctly when you post your site to the web.

First, create a folder, then name this folder the same as your user ID from your Personal Web Page Agreement. Usually this is your last name. For example, if your name is John Smith, then your user ID will probably be "smith." Then you should create a folder called "smith." Let's call this folder your "base" folder. Place this folder on the Desktop of your computer.

  • On a Mac, you need to choose "New Folder" from the Finder's File menu and then name your new folder. This folder will be the home directory of your web site.

  • In Windows you need to navigate to the desktop using Windows File Manager. Start by opening the Icon "My Computer", then open "C Drive", then the folder "Windows", then open the folder "Desktop." From the File Menu of this window, choose "New" and then "Folder" from the pop-up menu, then name your new folder. This folder will be the home directory of your web site and should appear on your Windows desktop.

Copy all the preselected items you want to place on your web site in your "base" folder, for example, pictures you have scanned, cool graphics you have harvested, and other items you want to place on your site. They must not be scattered all over your hard drive. Move all of the items you want to place on your web page to your "base" folder. Any subsequent items you want to place on your web page must also be moved into this folder before you actually place them on your site. This is very important!

Another important recommendation: to ensure compatability of your files, you should follow these rules when naming files (and folders) for your web site:

  1. Limit the length of a filename to 27 characters, followed by a period and a 3 or 4-letter extension (e.g., .html or .jpg)
  2. Limit the name of folders/directories to 27 characters, also, but do not add a period or a file extension
  3. Use all lowercase characters.
  4. Avoid using spaces (Use_an_underscore_instead).
  5. Avoid using a period as the first character
  6. Avoid using the tilde (~) as the first character.
  7. Avoid using upper ASCII or special characters.

Once you have created the base folder and placed your files in the folder, you are ready to start Netscape and begin composing your web page. Netscape Composer is available on most Augsburg campus machines--Mac or Wintel. If you have Netscape Composer on your home computer, you may also compose your web page(s) there.

Creating Your Page

The Netscape Composer is similar to a word processor, so you probably can learn it quickly. When you're finished, it saves your pages as Hypertext Markup Language (HTML) files. HTML files use the special formatting codes that are interpreted by Web browsers to display information on a wide variety of computer types. So, no matter what type of computer you have, every Web surfer with a modern browser will be able to see your pages.

Platform
It is important to note that the same Web page may look different depending on the browser being used to view the page.


To use the Netscape Composer, first start the Netscape Communicator. Then you'll select Composer from the Communicator menu. The Composer looks similar to your Netscape Navigator browser, but it works in reverse--you can create your own Web pages in it, instead of viewing pages created by other people. Most people find it very easy to use. The sample shown below (see Figure 1) was created in Netscape Composer in less than 10 minutes without using any HTML codes.

Figure 1

Figure 1. Netscape Composer with sample web page.

The key to creating Web pages without knowing HTML, is to use the two toolbars. One inserts formatting codes and the other inserts the hidden HTML codes. Let's look at the formatting toolbar first (see Figure 2):

Figure 2

Figure 2. Netscape Composer formatting toolbar.

Inserting and Formatting Text

The best way to show you how these buttons work is to give you a hands-on exercise. If you haven't already opened the Netscape Composer, start Netscape Communicator, then click the Composer button on the Component Bar in the lower-right corner. We'll begin by entering some plain text, and then we'll modify it with the toolbar.

The first line on the page shown above (Figure 1) was created using these steps:

  1. Click Composer on the Component Bar.
  2. Type Welcome to our Cyber Home! in plain text.
  3. Use your mouse to select (highlight) the entire line.
  4. Select Heading 1 from the first drop-list.
  5. Select Red from the color drop-list (fourth tool from left)
  6. Click the alignment tool (last tool on the right) and select the centered text option.
  7. Click your mouse at the end of the line to deselect it.
  8. Press Enter twice to get down to a new line.
  9. Use the alignment tool again to return to left-aligned text.

Getting started is pretty easy, isn't it? Of course you can spend hours playing with different fonts, colors, headings and alignment options, so get creative and have some fun.

Inserting HTML elements

Next we'll look at you how to create the line under the heading. For this we'll use the toolbar that contains the HTML elements (see Figure 3).

Figure 3

Figure 3. Netscape Composer HTML elements.

  1. Click the H. Line button (third tool from the right).
  2. Right-click (on a PC, or control-click on a Mac) on the horizontal line on your page.
  3. Select Horizontal Line Properties.
  4. Set Height to 6 and Width to 90% of the screen.
  5. Set Alignment to the Center option.
  6. Check the 3-D shading box.
  7. Click OK, move the cursor off the line by clicking below the line, then press Enter twice to move down the page.

HTML Toolbar Buttons

Many of the other buttons on this bar--such as New, Open, Print, Cut, Copy, and Paste--don't warrant a separate explanation because they're typical of other applications. But some of them have no parallel in word processing, so we'll give you an overview of their functions below:

  • Publish - Helps you transfer your Web pages from your computer to your Web hosting space.
  • Preview - Displays the current page in Netscape Navigator.
  • Link - Creates a clickable link within your page. Links can point to other Web sites (HTTP), other pages on your own site (files), or to other locations within the same page (targets).
  • Target - Creates a target within the current document that can be referenced by hyperlinks.
  • Image - Places a Web-type graphics image into your page. Right now you only can use images that are of either the GIF or the JPEG type. You'll need to have the image on your hard drive before you can use this button.
  • H. Line - Places a default horizontal line in the page. You can right-click the line to change its properties.
  • Table - Walks you through the process of creating a table in your page. Tables are an important HTML layout and organizing tool, so we'll give you a table exercise later.

Previewing and Testing

Now we'll give you some more exercises that will illustrate how to use some of these HTML buttons. Then we'll preview your page in your Netscape Navigator so you can see exactly how it will look on the Web.

First, we'll create a link on this page, so we assume you're at the spot where we left off above.

  1. Type I attend Augsburg College.
  2. Select the words "Augsburg College" in that line.
  3. Click the Link button.
  4. Type http://www.augsburg.edu/, click OK.
  5. Click at the end of the line, then press Enter twice.

Okay, now we're ready to test the page in Netscape Navigator.

  1. Click Preview, save the page and give it a title as prompted.
  2. Behold your first Web page. Congratulations!
  3. Click the Augsburg College link and see if your link works.
  4. To return to the Composer, click the Composer icon on the Component Bar or on your Taskbar, or press ALT+TAB.


Working with Tables

Tables are one of the most powerful layout control devices in use on the Web. Right now, for example, tables are the only way that you can display two blocks of text side-by-side on a Web page.

You have seen many more tables than you realize, too. That's because many Web authors use tables for precise layout control, but turn off the table border so you don't know that a table is on the page.

But, for all the layout value they deliver, writing tables in HTML from scratch is a challenging and frustrating experience. Web authors have long wished for a simple, quick tool to create tables. Fortunately, you have the Netscape Composer that includes a user-friendly table creation tool. You only have to select the options you want from an easy-to-use dialog box, and then Composer will generate the intricate HTML codes and place them in your page. Let's do one together now.

  1. Make sure your cursor is below the text you entered earlier.
  2. Click the Table button.
  3. Set rows to 3 and columns to 3.
  4. Click Include caption.
  5. Change Table width to 80%.
  6. Check Use Color, then click the gray box and select yellow.
  7. Click OK to place the table into your Web page.
  8. Type at least one character or word in the caption and inside each cell. You can use TAB to move forward between cells and SHIFT+TAB to move backward between cells.

Formatting Your Table
Now that you've entered the text, you can go back and format it with the formatting toolbar. Just select anything you want to format and click the attributes you want, such as bold, italics, size or a color. All of those complex HTML codes are simply inserted for you.


Composer Wrap-up

Okay, this could go on and on. In fact, there are dozens of thick books on creating Web pages, but at least you've got the basics. Of course you won't need a stack of HTML books because you have the powerful Netscape Composer! Let's wrap-up it for now.

  1. Press CTRL+S to save the table we added to your page.
  2. Specify the name of the file and where you want the file saved. Notice that the Save As file type defaults to HTML files.
  3. Click Preview to see your page in Netscape Navigator.
  4. Think about how much more you can do!
  5. Press ALT+TAB to return to Netscape Composer.

Extra! Extra!
Cool isn't it! And just think, you've created HTML codes. Would you like to see them? Okay. Click View, Page Source and you'll see the codes that make a page work. How would you like to type all of that manually?! When you're done, click the Close button. Once you upload your page to the Web, you can admire your handiwork by viewing the HTML codes created using the Netscape Composer tool.



Back to top



*_<--Back to Internet Lessons Index

*_<--Back to HTML Guides Page

*_<--Back to Creating Your Personal Web Page

*_<--Back to Technology Preparation--Educational Technology Home Page        Augsburg Home Page