Web Page Construction
Using Netscape's Composer 7.x
3/13/2011

If you are using Netscape Communicator 4.x, please click here  for Composer instructions.

The new Netscape 8.x does NOT include Composer. To download Composer 7.x or 4.x, please go to the Netscape Archive page: http://browser.netscape.com/ns8/download/archive.jsp

---

• We begin with the basics necessary to create a page with text and a few simple features, such as text formatting, hyperlinks, and horizontal lines.
• We then go on to slightly more complex features, such as images, bulleted lists, and tables.
• We then show you how to publish your page to your web account so the world can see it.

Preliminaries: Getting the Software

First, you need the software called "Netscape Composer."  It is a web-authoring program included as one of several components of  Netscape 7.x.

Dowloading the software: If you don't have Netscape on your own computer, you can get the Standard package for free from Netscape: http://www.netscape.com/

NOTE (6/15/05): The new Netscape 8.x does NOT include Composer. To download Composer 7.x or 4.x, please go to the Netscape Archive page:
http://browser.netscape.com/ns8/download/archive.jsp

•   Follow the instructions for the free download of 7.x

• Download the software.

• If you have a choice about where to put the software from this download. Put it into a "temp" or "download" directory on your hard drive. (It is too big for a diskette.) Once you have everything set up, you can then go back and easily delete this download file to save space on your hard disk.

Step One: Opening the Program

Open Netscape. Your set-up program probably put a short-cut icon on your Windows desktop. Double-click it and Netscape will open. (If you can't find a short-cut icon, look for Netscape on your Start/Programs menu.) You can use Composer off-line. If you are working on your own computer, you do not need to log in to your Internet Service Provider (ISP) while you are authoring a page.

Netscape will want to set up a user profile the first time you use it. You will see a dialogue box in the first screen.

On your own computer:
• Set up the profile following the questions it asks.
• In the future, click on that profile when you start the program.
• Click "Start Netscape."
In a campus lab:
• Click on the "default" profile you see in the dialogue box
• Click "Start Netscape."

To open Composer:

• Go to the "Windows" pull-down menu at the top.
• Click "Composer."


Alternatively, you can also open Composer this way:

• Look for a group of small symbolsl in the lower-left corner of the regular window.
• It should list the programs available to you with a symbol for each (Navigator/browser, Composer, Mail and Newsgroups, Instant Messenger, Address bookl). When you hold your mouse over the symbol for a moment, you should see words telling you what each symbol stands for.
• Click on the button that says Composer.

Step Two: Starting your web page

First, you need to start a new page, just as you would in word-processing.

• Click "New" on the button bar on the top OR go to the "file" pull-down menu and choose "new."

Step Three: Giving your page a title and description

Give your page certain identifying characteristics.

• Go the "format" pull-down menu and choose "page title and properties."
• Title: In the space called "title," give a short name to your page. This is what people will see across the very top of the Web browser when they look at your page, so keep it short and simple. The title for this page is: "Web Page Construction Using Composer" -- it's what you see at the top of your screen or the top of your print-out of this site. (It is not the filename you'll use later to save your page.)
• Author: In the space called "author," type in your name.
• Description: In the space called "description," you can put a brief description. This will show up in some search engines if they find your page in a web search someday. You can leave it blank if you prefer.

To close this Dialogue box, click "OK."

Step Four: Choosing colors for the background and text

Choose a basic set of colors for background and text. You can go back and change these later if you change your mind.

• Go to the "format" pull-down menu and choose "page colors and properties."
• If you do nothing, your page will be set with "default" colors you see on the right: probably a gray or white background, with black lettering, blue active links, and red visited links.
• To change any of the colors, click "custom colors." Then click on the color rectangle to the left of the item you wish to change. You will get a color palette. Click on the color you want. You will then see it displayed on the right.
• When you are happy with your color scheme, click "OK" and the dialogue box will close.

CAUTION: Another color problem is using white type on a dark background. It looks great on the screen. But if somebody wants to print out your page for reference, it won't print. Why? Because backgrounds don't print out and all that's left is white type -- which won't show when printed.

CAUTION: If you believe the news reports, a least a trillion new people starting using the Web every six minutes. It is safe to say, though, that many people looking at your page will be novices. It is recommended that you stick with familiar color schemes, especially blue for active links and red for visited links, which have become standard, to make your page user-friendly.

Step Five: Entering and formatting text

You are now ready to enter text, just as you would on a word-processing page. Type a few lines. For example:

Jane  Bader, Professor of Jurisprudence
California State University, Long Beach

Use your mouse to highlight text you want to format. Then:

• Text size: To change the size of the highlighted text, lick -a or +a on the lower button bar to increase or decrease the size of the text.
• Bold type: To put the highlighted text in bold, click the bold B on the lower row of the button bar.
• Italics: To put the highlighted text in italics, click the italicized I on the lower row of the button bar.
• Underlining: To underline the highlighted text, click the U on the lower row of the button bar.
• Alignment: To move the text to flush left or centered, go to the four buttons on the far right of the lower row of the button bar, where you can select the alignment (left, center, right, right-aligned. (If you do nothing, flush left is the default alignment.)
• Fonts: If you go to the format drop-down menu and click "fond", you will see a list of fonts available. You can choose any of the fonts there to change your font style.
• CAUTION: The person looking at your page on the Internet will be able to see those fonts ONLY if they are loaded onto that person's own computer. As Macs and PCs often give different names to their fonts, the odds are that other people won't see your page in the fonts you choose. You're always safe if you just stay with the default font ("Times Roman"). If you design clever visual effects that depend on an unusual font, they might come out rather strangely on somebody else's screen. Composer conveniently will set both Arial and Helvetica (names on PCs and Macs for the same font) for y ou.
• The first two lines of this page -- "Web Page Construction using Netscape Composer" -- were set with "Comic Sans MS." If you have that font on your computer, you will notice the different font. If you do not have that font on your computer, you are seeing it in the default font, "Times Roman."

Step Six: Saving Your Page

As you have now entered quite a bit of text and formatting, it would be a good idea to save your page. You are saving a file, just as you would save a word-processing file.

• Click the "save" button on the button bar OR use the File pull-down menu and click "save."
• If you're on your own computer, you might want to set up a special web-documents subdirectory for storing your Web files. If you're in a campus lab, save everything to a diskette so you can take it with you.
• Give your file a name with letters and extension .html (e.g.: filename.html). If your program won't let you put in .html, then put in .htm -- you'll be able to change it to .html when you publish the page.
• Your filename should be in all lower-case, with no spaces and no punctuation. Why? Because eventually this filename will be loaded onto the CSULB Unix server -- and Unix does not recognize upper-case, spaces, or punctuation in file names. Some older FTP programs (the program you will be using to "load" your file") convert upper-case to lower case during the transfer process. By staying with lower-case right from the beginning, you'll avoid problems down the road in inconsistent file names on the server and in your HTML-coding.
• This filename will eventually be part of your URL (Uniform  Resource Locator: "web-address") that people will use to find  your page, so select it carefully. For your basic "home" page, use index.html (for reasons we'll get to later). As you plan ahead to the types of pages you will want on your site, think of file names that will make sense to you and be easy to organize.

Step Seven: Previewing your page

The page you are working on is similar to the way it will appear when somebody looks at it on the Web, but not exactly. Periodically, you should "preview" your page to see what it will look like when somebody sees it with a web-browser.
 

• Click "browse" on the button bar.
• You will be popped into a browser window and you will see what the page will look like on-line.
• You may be surprised -- features you have entered don't turn out exactly the way you expected, so you will need to go back to the authoring page and try some changes. Line spacing, e.g., is often different.
• To exit the browser/preview window, click the "X" in the upper right and it will put you back into the authoring page.
• If you can't see the "X", click the "maximize" button (two boxes layered on each other). Then click the "X."

Step Eight: Adding horizontal lines

One of the simplest features you can put on your page to add interest is a horizontal line. The width and thickness of these can be varied and they look especially nice on colored backgrounds.

• Go to the "insert" pull-down menu and click "horizontal line."
• Here is what you'll get:

You can change the vertical width, horizontal width, or alignment across the page:

• Hold your mouse button over the line and click the right button.
• You will get a pop-up menu. Click "horizontal line properties."
• You will get a dialogue box. One choice is the width of the line. The default is 100%, but you can shorten it to anything less.
• You can also use this dialogue box to change the height or the thickness of the line, as well as its alignment on the page (left, center, right).

Step Nine: Adding hyperlinks

One of the main features of the World Wide Web is a "hyperlink" which you click to go to another web page. To set this up, you will need the complete URL ("web-address") of the page where you want to send people looking at your page.
 

• First, type the words you will want to have highlighted on your page. For example:

CSULB Home Page
• Highlight those words with your mouse.
• Click "Link" on the button bar OR go to the "insert" pull-down menu and click "link."
• You will get a dialogue box with the highlighted words near the top of the box.
• The cursor will be flashing in the blank line in the middle where you should type in the URL where you want to send people. For our example, type the URL for the CSULB Home Page:

 
http://www.csulb.edu/

CAUTION: Do not type in the underlining yourself with the underline-format button. The "link" dialogue page will put in the blue underlining.

CAUTION: If you keep typing after setting up a link, the new typing might continue to show up in underlined blue, even though you do not want to make this another link. This appears to be a bug in Composer. To get around it, type a few words, then highlight the new text, click "link," make sure everything is blank in the http address space in the middle, click "OK" and the blue should turn off.

Step Ten: Setting up a link to your e-mail address

As a convenience to people who visit your page, you will want to include your e-mail address so people can get in touch with you. It will be even more convenient if you set up a "hyperlink" on your e-mail address: when someone clicks it, they will be popped immediately into a pre-addressed mail screen. Here's how to set that up:

• Type your e-mail address, e.g.: name@csulb.edu
• Highlight the typed e-mail address with your mouse
• Click "link" just as you would for a regular hyperlink
• In the blank where you would type in a URL, type:
mailto:name@csulb.edu
Substitute your own account name for "name."
 
Note that there are no spaces in this.  This is a really common mistake, so here goes again: there are no spaces in this.
 
• Click "OK"

Your e-mail address will now appear as an active link.

Step Eleven: Setting up a named anchor (formerly called bookmark or target)

A named anchor is just like a hyperlink -- but instead of sending people to another Web page, you are sending them to another location on your page. It's a fast way to move people around, e.g., to return to the top or to send them quickly to another location on your page.

First, you need to set up the named anchor -- the place you want to send people to.

• Put your cursor in the location where you want the named anchor -- the place you want to send people to (e.g., the top of the page).
• Go to the pull-down "insert" menu and click "named anchor."
• You will get a small dialogue box asking you to name the anchor. Type in something simple, limited to one word only (e.g.: top).
• Click "OK" and the dialogue box will close.
• You should now see a colored symbol with a picture of an anchor at the place where you put the named anchor. This will appear only on your authoring page, not on the page when seen in a browser.

• Type the text that will be the active link (e.g.: return to the top). (Be sure to type your text in the appropriate place -- e.g., at the bottom of the page.)
• With your mouse, highlight the text you just typed.
• Click the "link" button.
• You will get the same dialogue box you got for a regular link.
• Click the down arrow on the right. The named anchor you created in step one will be listed. Click once on it so it is highlighted.
• Click "OK."
• The text (e.g., return to the top) is now highlighted as a link to this named anchor (e.g., top).

Step Twelve: Viewing Page Source

You are authoring a page on a screen that looks a lot like a word-processing screen. "Underneath" this screen, your web-authoring software program Composer has been generating the "HTML" code that will let other people see the effects you are creating. HTML stands for: Hyper-Text Markup Language

You do not need to know HTML yourself. But it's a good idea to start to get some sense of which HTML codes are producing the effects you author. Eventually, you might want to manually manipulate this code yourself to produce special effects or to look for glitches.

To see the HTML code for the page you are working on:

• Go to the "View" pull-down menu.
• Click Source.
• You will see various HTML codes in arrow brackets: <CENTER>Jane Bader</CENTER>
• You will see the text you have put in.
• To close this code page, click "normal edit mode" on the "View" pull-down menu.

Step Thirteen: Editing Page Source

Some day you might want to manually change the HTML code page to add special effects or trouble shoot if things aren't turning out the way you expected. To edit the HTML code page, use the same feature as "Step twelve: viewing page source."

• Go to the "View" pull-down menu.
• Click Source.
• You will see various HTML codes in arrow brackets: <CENTER>Jane Bader</CENTER>
• You will see the text you have put in.
• You can type in changes, either to the text or the codes themselves, but be careful not to disrupt the precise codes you'll need for the page to work.
• To close this code page, click "normal edit mode" on the "View" pull-down menu.

If nothing in steps 12 or 13 made any sense to you, don't worry. These steps are optional.

Step Fourteen: Bulleted or numbered lists

Another simple way to add visual interest and clarity to your page is to put some text into a list with bullets or numbers.

Bulleted lists:

• On the lower button bar, click "bulleted list."
• Start typing and your type will appear in a list that looks like this.
• To turn it off and go back to regular typing, hit "enter" to start a new line, click the button again and the feature will be turned off.

• Right-click your mouse anywhere in the list.
• You will get a pop-up menu.
• Click "list properties."
• Select the type of bullet you want for your list from "bullet style."

1. On the lower button bar, click "numbered list."
2. Start typing and your type will appear in a list that looks like this.
3. To turn it off and go back to regular typing, hit "enter" to start a new line, click the button again, and the feature will be turned off.

1. Right-click your mouse anywhere in the list.
2. You will get a pop-up menu.
3. Click "list properties."
4. Select the numbering style you want for your list.

You will probably want to add some images (drawings or photographs) to your page. These images are actually separate image files that you will insert into your page.

NOTE: In many word-processing programs, images you insert on a page are "folded into" that WP file and you still have only one file to worry about. In contrast, in HTML, your images always remain separate files. Your Web page will include directions for retrieving your image file, but will not "fold in" your image as your WP program does. This means that your image files MUST be loaded separately onto your computer account at CSULB for the world to see them. (More later on loading these files.)

Before you can insert an image, you must have an image to insert. You can obtain clip art images and photos from many word-processing programs or special collections of images that you can purchase and insert.

There are many different graphics file formats. If you find an image in a word-processing or other program, you might need to save it in a format that Web browsers around the world will recognize -- .gif or .jpg -- so follow the directions on your program for saving and converting.

Paint programs: You can also create your own graphics "from scratch" with a paint progam. These are used to create visual images, special text designs, and so forth. The Windows "paint" program is a simple program that is good enough for creating simple images. Look in your Windows directory and look for a file called "paint.exe". Alternatively, look in the "start" menu under "windows" or "accessories." Wordperfect 7.0 and 8.0  now come with a more sophisticated paint program called "PhotoHouse." You can use those to create your own images for your web pages -- just be sure to create and save them in  .gif or .jpg format.

The easiest and cheapest way to get images is to take them from other people's Web pages. Be careful to avoid taking images that are copyrighted. The Web is filled with public domain images that anyone can use without copyright problems.

• Set up a place where you can save all your images for future use. Whenever you see a public domain image on someone else's page that you like, save it here. On your own computer, you might create a separate subdirectory called "images" to store things. Or you might just save them in the same subdirectory where you save all your Web documents. In the campus labs, save things to a floppy disk that you keep for images.
• When you see an image you like, put your mouse arrow over the image and click the right button.
• You will get a pop-up dialogue box with several options.
• One of the options is "save image." Click that.
• It will ask you where you want to save the image. Tell it the location you are using to save images (your image subdirectory or floppy).
• Give the file a name. The dialogue box will include the name that was assigned to the image by that page's author. You might want to change the name at this point to something you'll remember. Keep the same file extension though, as this indicates what type of image file it is (probably .gif or .jpg). To be safe, stick with an 8-letter, lower-case name.

• The globe at the top: wwwglobe.gif
• The  "updated" image at the top: updated.gif
• The lines dividing each section: net_bar.gif
• The animated envelope at the beginning and end for e-mail: emaila.gif

Note: Unix DOES recognize underlining: _ so it's safe to include that in your file names for graphics and data files.

To find more images to save while you're surfing the Web: Many sites exist on the Web with scads of public domain images that you can save for your own use. These include sites for Netscape, Microsoft, and other software companies, as well as graphic designers who offer free graphics as a way of encouraging you to buy their other products. To find these sites, do a search with a Web search engine for "images" or "public domain images." Here are a few worth exploring while you're on-line:
 
 

To put an image of yourself on your page:

• Take a photograph to the campus computer lab in the North Library.
• Take a floppy disk with you to the lab to save the file you create.
• Ask to sign-in to a terminal with a scanner.
• Ask an attendant to show you how to scan your photo.
• The scanner will create an image file that you can enter, just like any other image file, into your Web page.

Step Sixteen: Images: Inserting Them on Your Page

Once you have some images to insert, you can insert them into your page with Composer.

• Put the cursor in the place where you want to insert your image. To keep it simple for now, start on a new line with no text.
• Click the "image" button on the button bar OR go to the "insert" pull-down menu and click "image."
• You will get a dialogue box. At the top, type in the filename for your image. Or you can use the "choose file" button to look around in your hard disk or floppy to find the image file you want to insert.
• Click the tab "appearance" at the top to choose the alignment of the picture relative to text with the buttons in the middle. (If you do nothing, the default alignment is flush left.)
• You don't have to, but you can also fiddle with spacing and borders with the other features on this dialogue box..
• Click "OK" and the dialogue box will close.
• If you later want to edit alignment, put your mouse over the image, click once to highlight the image, then click the "image" button again. You will get the same dialogue box, which you can now alter.

How to avoid this: Put yourself in the chair of a web-browser in Montana. When they open your page on-line, the HTML coding on your file will tell the browser software what the page should look like and produce the text and formatting for that  page on the screen. The HTML code also will tell the browser software to get the images needed to make the page look complete. You will need to "load" those images onto your CSULB web-server account so that person's browser can get your images. And your HTML file will need to have the correct directions so the web-browser software can go into your account, find that image file, and bring it up on the screen.

In sum:

• Your images need to be in a place where a browser in Montana can retrieve them and bring them up on the screen in Montana -- that place will be your account on the CSULB web-server. If your images only exist on your hard disk or your floppy drive, the browser in Montana can't reach into your hard disk or floppy drive and get them.
• Your Web page file needs to have the right HTML directions to send the browser in Montana to your account on the CSULB web-server. If the directions send Montana to your hard disk or your floppy drive, the browser can't do that and won't be able to bring up the image file.

•  It should not look like this: A://filename gif. -- that will put in an HTML code that sends Montana to your floppy drive, which it won't be able to reach.
• It should not look like this: C://documents/filename.gif -- that will put in an HTML code that sends Montana to your hard disk, which it won't be able to reach
• The image file name should look like this: filename.gif -- if it doesn't, take out all the surplus.

<IMG SRC="filename.gif">

<IMG SRC="filename.gif" ALT="text">

Make sure all of your file names are in lower case, no punctuation, no spaces. Why? Because that's all Unix will recognize down the road when you have loaded your pages and images onto the CSULB web-server. The filenames in your CSULB server-account must all be recognizable by Unix. And, in turn, that means that the filenames in your Web file (that tells somebody's browser what to bring up) must match what's on the server-account. In sum: everything in lower case.

CAUTION: After your page is loaded (see below), you should go on-line to see what your page looks like. You might be able to see the images even if you have mistaken code that includes A:// or C:// in the HTML coding. Why? Because you -- and you only -- are working on a computer that can reach into your floppy drive or hard disk, namely, your own computer. BUT NOBODY ELSE IN THE WORLD WILL BE ABLE TO SEE THOSE IMAGES, because they are not working on your computer.  If you're not sure, try calling up your pages on-line on somebody else's computer or in a campus lab.

BACKGROUND IMAGES: You have no doubt seen many pages that have a background graphic, instead of a color background. These can be added to your page with Composer. A background image is a very small graphic which is "tiled" to fill the page.

To acquire background images:

• Go to one of the sites with free graphics (see above) and save some you like for future use.
• Alternatively, if you see a background image on a page that you like, hold your arrow over an empty space on the page (a spot with no text or other images), and right-click your mouse. You will get a pop-up dialogue menu. One of the choices is  "save background as." Click that and it will ask where you want to save the background image. You can save it in your hard disk or  "A" diskette for future use.
NOTE: You might want to adopt a naming system for these files that will make it easier to find them in the future. E.g., you might start each with "bk" so you will recognize them later in your images subdirectory: bkblue.gif or bkred.jpg
NOTE: Stay with small background images (1-2 KB), so your page loads quickly.

• In your web-authoring page in Composer, click the "format" pull-down menu, then click "page colors and properties."
• Click the tab on the top that says "colors and background."
• At the bottom of the dialogue box that appears, you will see "background image."
• Click the button on the right, "choose file."
• Click through your directories to find the image file you want to use as the background image.
• Click "OK."
CAUTION: Be sure to use a text color that stands out against your background image. We have all seen lots of pages where the text is almost unreadable because it can't be seen against the background. If you're not sure, put all your text into "bold" so it stands out.

You can take text from a word-processing file that you have already prepared (perhaps your course syllabus) and turn it into an HTML web page with Composer. Unfortunately, Composer does not have "filters" that will take your WP file and translate it into HTML. However, there are two other methods for taking an existing WP file and putting it onto an HTML page for further editing in Composer.

Method One:

This method works best if you want to convert an entire WP file into an HTML page:

• Open your wordprocessing program.
• Open the file you want to convert to HTML.
• Use the "save-as" command to save it in the new HTML format.
You are creating a new file in the HTML format. When you click "save as" (either a button on  your button-bar or an item on one of your pull-down menus), you will get a dialogue box asking you for the name of the file and where you want to save it. One of the choices in "file-type" should be "HTM" or "HTML". Choose that and the WP program will save your file in HTML format and add the extension HTM or HTML.
• Close the new file and your WP program.
• Open Composer.
• Click "Open" on the button bar OR use the File pull-down menu and click "open page."
• In the dialogue box, "choose file," and click to the file you just saved and click once to highlight your file.
• Click "open."
• The dialogue box will close and your WP file will open in Composer.
• You can now add the other HTML formatting available in Composer.

This method works best if you only want to insert part of an existing file, not the entire file, into an HTML page you are working on in Composer:

• Open your Composer program and the HTML web page you are creating with Composer. "Minimize" the page with the _ button in the upper right-hand corner.
• Open your word-processing program.
• Open the file you want to insert.
• Use the "copy" command to highlight with your mouse what you want to move into the HTML web page you are creating with  Composer, and click "copy" (either a button or pull-down "edit" menu).
• Minimize your word-processing program with the _button in the upper right-hand corner.
• Maximize your Composer page by clicking on it on the task-bar at the botton.
• Put your cursor where you want to insert the text from your WP page.
• Use the "paste" command on Composer to insert the text you want to transfer. (Either click the "paste" button at the top OR use the edit pull-down menu and click "paste.")
• The text without any formatting will now be pasted into your Composer page.
• You now need to add the formatting, but it should still be faster than retyping.

Step Eighteen: Adding tables

The "table" command is a good way to organize masses of information in a clear, legible format on your page. You might use a table with the borders visible. Or you might use a table with borders invisible on the screen to organize columns and develop special effects.
 

• Click the "table" button on the button bar (upper right) OR use the pull-down "insert" menu and click "table."
• You will get a dialogue box that asks you how many rows and columns you want, setting a border, and what % of the window the table should fill.
• When you click "OK" you will get a table on your screen as you specified.
• Now, type in the text for each block in your table. Put the cursor in the block you want and start typing.
• Once the table is on your screen, hold your mouse arrow over the table, click the right button, and you will get a dialogue box for adjusting the properties of the table. You can also get the dialogue box again by putting the arrow anywhere inside the table and clicking the "table" button.
• To set colors in the table (either the entire table or individual cells): right-click in the table. Click "background color" for table or cell and pick from the pallette.

• Tables can be used to create "columns" as you would in word-processing.
• Highlight some text on your page by putting it in a box, created with a table with one row and one column.
•  To place images or text in certain locations on your page (other than the default left-margin), set up a table with "0" borders and place the items within the cells that give you the lay-out you prefer.
• If you use a background image with a left-hand border, set up a table with two columns. The left-hand colum should be set at the % of the page that matches the border design and left blank. Type in a few spaces to fool Composer into thinking there is content in this table cell. The right-hand column is where you put your  text. With this technique, your text won't appear over the border design.
• Composer allows you to create a table-within-a-table. Put your cursor into the cell where you want another table, then use the pull-down "inser" menu and click "table." Then set up the table-within-the-table just as you did for the original.

Step Nineteen: Publishing your page to the World Wide Web

Once you have your web page as done as it's going to get for now, you are ready to load it onto your account on the CSULB Web-server so the world can see it. Before you proceed, make sure you have saved the final version to disk. You will be loading this saved file, not whatever version happens to be on your screen at the moment.

Many commercial ISPs (Earthlink, Prodigy, AOL, AT&T, etc.) let you load Web pages onto your account with them. Check their "help" section on the members information pages for specific information about their publishing procedures. They also might deviate somewhat from the information below.

First, you need a computer account. If you have an e-mail address, you've got one. There is no such thing as a separate "Web account."

Your CSULB computer account is a space on the hard disk of the CSULB computers where your incoming e-mail messages go and also where you put your Web files. Once you load your Web files onto your CSULB computer account, anyone in the world with access to the World Wide Web can go to your account, pull up your pages and images, and take a look at them.

The directions here tell you how to take the Web file you've just authored on your own computer and copy that file onto your CSULB computer account space so the world can look at them. This is called "publishing" to the Web.

Composer Publish: Once your file is completed (for now):

• You must be on-line so you have access to your CSULB computer account, so log into your ISP if you are at home.
• Bring up the Composer program and your page.
• Click the "publish" button on the button bar OR go to the "file" pull-down menu and click "publish."
• You are now in a dialogue screen. It needs some information about where you want to send your file.
• Under the "Publish" tab
• put in your file name, but make sure the extension is .html. For example: if your file on your own windows directory is

index.htm


then type in

index.html
(.html is for a Unix server, which CSULB has, while .htm is for a windows-based server, which CSULB does not have).

• for site name: put in your account name. That's the name before the @ sign in your e-mail address. For example: my e-mail address is jvancamp@csulb.edu. My account name is jvancamp.
• for site subdirectory: put in htdocs  [if you are using an internet service other than CSULB, your Internet Provider might have a different name for this site subdirectory. Check your "help" section at your ISP for the name of the subdirectory]
• Under the "Settings" tab:
• for site name: put in your account name
• for the publish address: put in: ftp://ftp.csulb.edu/ [for other ISPs, you will need to check their member "help" section]
• for the http address: put in: http://www.csulb.edu/~accountname/   [substitute your own account name for accountname here]
• Right below this on the dialogue screen, type in your account name and password. This is the account name and password you use for e-mail. You are the only person with access to your CSULB account and this gives you access to put things there.
• If you are working at home and you are the only person with access to your computer, click the "save password" box. But if you are in a campus lab or if you share a computer with others, do not click this box, so only you will have access in the future.
• Click "OK" and the program will transfer copies of your text file and images onto your CSULB account. The originals will remain where they are (on your hard disk or floppy). The program is just sending copies of those files.
NOTE: If you are loading a revised version of a file, the Publish command will overwrite the old file with the same name on your htdocs directory. You do not need to first delete the old file.


---


Even though Composer Publisher will load your files, you will find that an FTP (File-Transfer-Protocol) program will give you much more flexibility in managing your account, and I strongly recommend that.

First you need to get an FTP program:

Where to get an FTP program:

1. Go to a Windows NT lab on campus, so you can use the FTP program, OR
2. Get free FTP software identical to the program used on campus for your own computer from http://www.cnet.com/
• On the CNET home page, click "free downloads"
• Choose your operating system: PC or Mac (it will already be on the PC page)
• Click "Windows"
• Choose "utilities"
  
• Click "FTP"
• Scroll down to find the "WS_FTP LE (32-bit)" program, which is free.
• Be sure to indicate that you are an educational user, so it is free.
  
• Click on this line and follow the instructions for downloading. (It should take less than 5 minutes.)
• Install the program (as you did for the Netscape program, above).

NOTE: Windows 95 comes with a primitive DOS-based FTP program that is very user-un-friendly and is not recommended here.

Using an FTP program:  


    In a campus lab:

• Click the "start" menu.
• Go to "programs."
• Go to "netscape, Internet."
• Go to "FTP."
• This will open the FTP program on the lab computer.
  
At home:
• Use your Find command to find the ftp.exe program you have installed from ipswitch.
• Use the "start" menu to go to the location of your program.
• Click to open.


Once the FTP  program is open:

• You will get a dialogue screen. You can leave much of it unchanged or blank, but type in the following:
• host name: ftp.csulb.edu
• user ID: your account name (the part before the @ sign in your e-mail address)
• password: your e-mail password
• Un-check the box for annonymous log-in if you see a check there (click once on the check if it's there to make the check go away).
• Un-check the box for remember password if you see a check there, if you are working in a campus lab.
• Click "OK."
• You will now see a new screen.
• On the left is the "source" menu -- that shows your hard disk directory and floppy disk and the various subdirectories and files on there.
• On the right side is your CSULB computer-server account -- where you're going to send your web and image files. You should see existing directories and files, such as mail, as that's where your incoming mail messages go that you read in e-mail.
• You should see a subdirectory called: htdocs
• If you do not see an htdocs subdirectory, you need to create one:
click the button on the right: mkdir
you will get a dialogue box asking for a name
type in: htdocs
click "OK"
You should now see a new file/subdirectory on your account called htdocs
• Now use this program to load your files and not bother going back to Composer publish:
• On the right side, double click the htdocs subdirectory so that is the open subdirectory -- this is where you'll be putting your Web files.
• On your left screen, click once on the file you want to load  -- your Web file -- to highlight it.
• In the middle, between the two screens, click on the arrow pointing "right" -- you are copying your file from the left "source" into the right "target."
• Repeat this process for any image files you need for that page to work.
• You're done. Click "OK" or "close" to exit the FTP program.
• NOTE: If you have another FTP program on your own computer (e.g., the Super FTP program from the Sprintlink program), you can do all the same things we just did on the campus FTP program.
• NOTE: If you have a very old CSULB computer account and had to create your own htdocs subdirectory, it is possible that the access codes need to be reset. This means that UNIX must be told to let anybody in the world look at the files in your htdocs subdirectory. Ask a friend to see if they can pull up your pages. If access is denied, the codes need to be changed. Here's how:
• Ask Academic Computing to re-set these for you.
• Alternatively, if you have access to the UNIX "vanilla" shell, you can change them yourself. (This is how you got e-mail pre-popmail/Web.) Go to some old instructions for loading Web pages with the shell and Kermit: http://www.csulb.edu/~jvancamp/load.html

Step Six gives the directions for changing the codes.
Some FTP programs will let you change access codes. Look at their "help" menu under "access" or "codes" and see if it includes instructions.

NOTE: Another use you will have for the full FTP program on the Windows NT machines: You can look at all the htdocs files you currently have on line and delete the ones you want to take off. There is no way to use Composer Publish to delete a file that's already on your account.  You can overwrite an old file with a new version with the same name, but you cannot just delete the old one entirely with Composer Publish.

Alternative: Here's another set of instructions for using FTP with a browser: http://helpdesk.csulb.edu/ftp.html

Common mistakes in loading, using the methods above:

• Be sure to load into the htdocs subdirectory
• For CSULB students, faculty, and staff: be sure to use the account name and password that you use for your csulb.edu e-mail account. Do NOT use your Beachboard account name/password. Do NOT use your MyCSULB account name/password.
• Be sure the file you are loading is properly formatting, as discussed earlier: no punctuation, no spaces. I recommend keeping everything in lower case, to avoid confusion later, as this part of your URL is case-sensitive.
• Check the page once it's on-line to test it -- preferably on another computer, to be sure everything is coming up from the Web server, not from your hard disk.
  

Step Twenty: Your URL ("web-address ")

You can now tell friends to take a look at your page on the Web. Here is your URL (Uniform Resource Locator):
 

http://www.csulb.edu/~account/filename.html

 
• http:// tells the Web-browser to use the hyper-text-transfer-protocol.
• www.csulb.edu tells the browser to go to the CSULB web-server computer.
• ~account tells the browser to go to your account on the CSULB web-server computer.
• Your account name is the part before the @ sign in your e-mail address. For example: my e-mail address is jvancamp@csulb.edu -- my account name is jvancamp
• filename.html tells the browser to go to that file on your account.

http://www.csulb.edu/~account/

HINT: Before you tell others to look at your page, you might want to go on-line and look at it yourself first. If there are unhappy surprises -- things don't look the way you thought they would -- you can go back to Composer, fix things and re-load.

HINT: If you have several browsers loaded on your machine, try looking at your page under several of them -- Internet  Explorer (Microsoft's browser) and an old version of Netscape (1.1 or 2.0 or 3.0). Once you are on-line on the Internet, you can open any browsers you have loaded on your own computer and pull up pages on the Internet. Different browsers sometimes produce different results. You want your page to look good no matter what browser they're using in Montana nowadays. In practice, that means that you will tend toward the lowest common denominators. The latest bells and whistles on Netscape 4.0 won't be recognized on Netscape 2.0 or 3.0.

Step Twenty-one: Helping people find your page

After all this work, you want lots of people to take a look at your page. Here are some ways to get the word out:

Search Engines: If your page is in the data-base of the main search engines on the Web, people looking for sites on your topic will get your page when they do a search. Anybody can send in their URL to most of the search engines now in use:

• When you are on-line on the Web, with your Netscape browser open, click "search."
• You will get the Netscape search page, which has hyperlinks to dozens of search engines (Excite, Infoseek, AltaVista, etc.).
• One-by-one, click to open each search engine. Somewhere on their home page (either at the top or bottom), you should see a hyperlink called "add URL" or "submit your URL." Click this and it will take you through the steps to submit your URL. Some only want your home/index URL, while others want a separate submission for each file you have on-line, so follow the instructions carefully.
• The "description" and "keywords" that you entered in step 3, above, are an important help to the search engines in finding your page later when someone is doing a search.

Similar sites: If you have explored the Web at all, you know that pages of hyperlinks to related pages are a common feature on many Web sites.

• Find sites on topics similar to yours that have such pages of links.
• If it looks like yours would be an appropriate addition, let them know about your site.
• Somewhere on each site, there should be an e-mail address for the "webmaster."
• Send a polite message to the webmasters to let them know you have a new Web page on-line, give them the URL, and suggest that they might want to add a link to yours on their own page of links.

You have just created your home page and named it "index.html". You will probably want to create many more pages --  perhaps a separate page for each of your courses, a biography page for you, a page explaining your research interests, etc. It's possible, of course, to put everything on one gigantic page/file, but that will take a long time for web-browsers to load and require a lot of scrolling by users. It's more user-friendly to create many separate pages and connect them with hyperlinks.

Think through a reasonable naming scheme, as each file needs its own name and you need something convenient and easy to remember as you are creating and updating pages down the road. Remember that this file name will be part of your URL. It's always safest to stick to old-fashioned 8-digit filenames. All will have the extension of .html

For example, if you have files with the following names, their URLs will be as follows:
 
 

Once you have named files and placed them on-line on your web site, try to avoid renaming them in the future. Other web sites might have set up hyperlinks to your pages without your knowledge and they won't know you've changed the name.

Step Twenty-three: Making your pages user-friendly

In addition to suggestions above for making your pages user-friendly, here are a few more:
 

• Frames: You cannot create frames with Composer, although you can update target pages for an existing frames site with Composer. Before switching to frames for your site, spend an hour or so with beginners in the campus computer labs. You will discover that they get endlessly confused over how to use the "back" and "print" buttons with frames. You can get much the same effect of frames using "tables" -- e.g., set up a directory of the main elements of your site in the left-hand column of the table.
• Last updated: At the end of every page you have on-line, put the date "last updated," so users who visit again will know whether or not there is new information and how recently you updated the page.
• Webmaster: On every page, probably at the end, put information about who created the page (the "Webmaster") and your e-mail address, so browsers can get in touch with you.
• Site index: Browsers discover your Web pages in any possible order, especiallly since a search engine might send a browser to a page other than your home page. As you cannot control which page a browser sees first, it's a good idea to have a complete list of the pages in your site, somewhere in every single page/file. You might put a complete list at the end of your page, down the left-hand side in a table, or across the top.
• First screen: The trend in Web-page design is to include all essential information in the first screen that a browser sees, without scrolling. This lets the viewer decide quickly whether your page is what he or she is looking for. Use quick summaries, bookmarked lists, etc. to give browsers a quick introduction to your page on the first screen they see.

This page created and maintained by Julie Van Camp, Professor of Philosophy, California State University, Long Beach.

Special thanks to Walter Gajewski, Webmaster/Consultant, New Media Center, CSULB, for his valuable help in solving various problems in developing this site.

Thanks also to the many faculty and students who have used these instructions and given me ideas for improving them.

With my permission, this page was translated into Bellorussian by Martha Ruszkowski:  http://www.designcontest.com/show/web-page-construction-be/
I have never seen my name translated into Cyrillic before:   Джулі К. Ван лагер
Needless to say, I cannot vouch for the accuracy of the translation!

Copyright Julie C. Van Camp 1997-2011: Permission is granted to print, download, and reproduce this page for educational, nonprofit, scholarly, and personal purposes, so long as this complete copyright and permissions notice is included with all such copies.

Your questions, comments, and suggestions are very welcome:
jvancamp@csulb.edu

The e-mail symbol here and at the top is an "animated gif image." These are used exactly the same way you use a regular .gif file. It's an easy way to add some animation to your page without messing around with Java Applets or Microsoft ActiveX.  If the image on this screen is no longer moving, it has used up its recycling possibilities while you were reading the page.

Last update: March 13, 2011