Course web site tutorial

1. Gather Data:
    In this first step, you gather together all the information that you are going to use in this web page. This could include any documents saved in a word processor (syllabus, schedule, rules, etc.), any new material, class assignments, external resources, and so forth.

2. Design Structure:
    There are 3 general kinds of web page structures; Vertical, Horizontal, and Clustered.
Vertical, horizontal, and clustered (framed, Imapped) are different structural strategies for what your web page(s) will look like; that is, how your information will be organized on a structural level.

In a vertical organization, much or all available of the information is arranged on a single web page, so your users scroll down the page to see all of the information. The advantage of this kind of structure is that a quantity of related information can be presented (and thus saved or printed) in a single place. The disadvantages of this structure include:
a:) Individual pieces of information could be harder to find if they are buried in the middle or bottom of the page; and
b:) the file size can get very large, thus hampering access speeds (for this reason, try not to include many images or sounds).

In a horizontal structure, web pages are arranged more like pages in a book; that is, one after the other in a linear fashion. In this type of structure, information is divided into sections that lead to and follow one another, in a typical transition-style manner. This tutorial is, for the most part, laid out on a horizontal structure.

A clustered structure is one in which information is divided up into various segments (as they are in a horizontal structure), but navigation is a- or muti-linear rather than sequential. Two main types of clustered structures are Framed pages and image-maps. The web template we are using is an example of a framed cluster structure, while the folder map I provided on page 7 is an example of an imagemap cluster design.

3. Type or Paste text into Editor

Here's help on how to use Netscape Gold Editor. You'll have to know how to open the editor and paste data into it before you can go much further.
 

    In this step you take the data from step one and paste it into the structure chosen in step two. Thus, if you chose a vertical structure, you would paste ALL of your data into one file, and then create internal navigation. If you chose a horizontal structure, you would divide and paste your data in separate files, and then arrange them sequentially (via something like the navigation bar I use in this tutorial). If you choose a clustered structure, you would divide and paste your data in separate files and then create a navigational structure (via frames, imagemaps or a Table of Contents) to help your students find the relevant course material.

    The easiest way to get text into your editor is to PASTE it there.

To do this, first open up your document normally in a word processor. HIGHLIGHT (Select) the desired text (<Ctrl + A> to select ALL). COPY (<Ctrl + C>) the highlighted area.

Now switch back to your Netscape Editor window, put the mouse cursor at the desired input location, and PASTE (<Ctrl + V>) the text into your file. Viola!

(NOTE: If your document includes any special formatting -- footnotes, graphs, tables, charts -- you should SAVE AS HTML before you copy).

4. Complete Layout design:
    This step will probably take the longest, because it is where you fine tune the presentation of your web documents. You text is all in place, so in this step, insert images and tables to help illustrate or organize your data. Change your BACKGROUND if you wish. (In editor, go to PROPERTIES -- DOCUMENT. Choose another color or choose an image for your background). Go ahead and create a NAVIGATIONAL table if you wish -- don't worry about setting the links yet.
Just get the page looking like you would like, and SAVE.

Remember the golden of web page design. Anything that detracts from the readability, accessibility, or navigability of the page or detracts from its central pedagogical mission is bad. Have fun, but be sensible.

Here's more help on how to use Netscape Gold Editor

5. Assign Targets
    Now that you have your data in place and your layout done, its time to create NAVIGATION. Especially for Vertically structured pages, internal links (intra-file links) are essential for a navigable web page. The first step in creating internal links is to assign targets.

    A target is just what it sounds like: a pre-appointed destination. In other words, if you want to link directly to the section of your page called "required texts", you could assign a TARGET  where you want users to arrive when they click on the link.

    To assign a target, first identify those places in your document users may want to arrive (section headings are usually a good bet).
    HIGHLIGHT the actual text (of the header)
    Click on the TARGET button 
    (The text you highlighted should already be in the space for the target name. Hit return if that name is OK, or type in a new one if you want. This target name is arbitrary and irrelevant.)

    Continue through your document and assign all your targets. (If you VIEW SOURCE on this page, you'll see that I assigned TARGETS to each of the subjects. The HTML code to assign a target is <A NAME="targetname"></A>)
 

6. Construct internal navigation links
    Now that you have assigned targets, construct your internal navigational links. This process will be very easy.

First, go to where you want the link to appear (that is, where you want yours users to click in order to be taken to another part of the page).

You will see a character properties dialogue box:

There are two things you can specify here. First, in the LINK SOURCE box, you would enter the text you want to act as a hotlink.

The most important line is the second: LINK TO. This is where you specify to which file you will be linking.

Notice the box in the corner, labeled "SELECT A NAMED TARGET"? This box is why we assign targets first. You see, the targets listed in that box are the targets active in the current file. In other words, in the file example above, I had created 5 targets in the document.

To select a target, simply click on the target NAME on the box, and click <OK>.

Notice that you can link to specific places in different files by selecting "CHOOSE FILE" and then "SHOW TARGETS IN: SELECTED FILE."
 

A relative or interfile link is one that links different files which are in the same physical location. To create a relative link, go through the same process you just went through to create target links, but this time, don't click on the targets.

Instead, simply type in the filename in the LINK TO field (fileb.html), OR select CHOOSE FILE and manually locate the filename.

NOTE: relative links work in relative pathways. If your main folder location is C:/webstuff/, then all relative links to files ALSO in that folder need consist only of the filename. Let's say you wanted to create a sub-folder in "webstuff" called "images". If you wanted to create a link to a file in that folder, the link would have to read "webstuff/image1.jpg" instead of just "image1.jpg"  The notation "../" (dot dot forwardslash) moves you up one level (from C:/webstuff/ to c:/ ).
 

7. Construct External Links
Now that you have created your internal links, you're ready to create external links. External links, as you might guess, are links that go to outside pages, and use ABSOLUTE links.

An ABSOLUTE link is a full URL (web address); such as "http://www.engl.niu.edu/people.html."

To create an absolute or external link, simply COPY the URL of the destination into the LINK TO field. Thus, as opposed to an internal or relative link, which might read "sample.html" your LINK TO field will display the entire URL, such as "http://www.engl.niu.edu/NWR/sample.html"
 

NOTE: The easiest way to enter an absolute or external link is to:

• Go to that page in your browser
• Click on the web address (displayed in the bar called "location"), and make sure it is HIGHLIGHTED
• COPY the address (<Ctrl + C> or EDIT, COPY)
• Switch to your editor screen
• PASTE the web address into the LINK TO field for your link
• Click OK

 Note that external links can DIE; that is, vanish or move. You should check your external links at regular intervals and update them as necessary.
 

    It is time to test the product. Click on the PREVIEW button 

This will launch your browser window, and present your web page EXACTLY as it will look when published.

Make sure all your links (internal and external) work. Make sure all your pictures display. In short, make sure everything is ready to go. Note that all the links on your page should work normally. If anything doesn't work, go back to the editor and fix the problem.
 

9. Publish your site
    You are ready to publish your web documents.

The easiest way to publish your files is to click on the PUBLISH button in Netscape Editor.

The most important line in this screen is the UPLOAD FILES TO THIS LOCATION field. The location in the screen above is basically correct (assuming you are a member of the English faculty here at NIU). Copy down this location, filling in your own initials where I have xxx above. Thus, I would publish to ftp://corn.cso.niu.edu/user1/engl/tb0ceh1/class_html

The USER NAME and PASSWORD fields here ask for your corn e-mail password (i.e., what you type in to check your e-mail). If you are on your own personal machine, feel free to click SAVE PASSWORD so you don't have to retype it each time. Remember, though, that when you publish a web page, ANYONE in the world can see it (in theory).

Once you have successfully published your web pages, make sure to TEST them again on-line, and be sure that everything works as it should.
 

10. Advertise your site
    The last step to take after you have published your site is to register it with some search engines, so that people browsing the web for information about xyz might find your page. This step is more important for department and administrative sites or commercial sites, so you don't have to worry about it too much.

To advertise, go to the search engine (Alta Vista, Excite, etc.) and find the SUBMIT URL button (they all have them). Fill out the form, and your site will be registered in their database. Feel free to ask me about this if you would like more information or help. nwr@niu.edu