A potpourri of on-line samples

Hello and welcome to this sample web page.

This page is meant to serve as a sort of potpourri to display some of the web-based delivery ideas we'll discuss and do in the Instructional Design class. It will change with time and as we work on various elements during the class.

Here are some obeservations about fixed-width and
variable-width text and tables.

I'll start with this text sample that is not in a table. It is not in a fixed width format. Therefore, it will reduce in width the width of the browser window. You can test this by shrinking the page view.

Next is the text in the table below. It is in a fixed width table. You can test this by again shrinking the page view. You will notice that the ads at the right side of the screen will actually run over the top of the text but the text in the tables will remaiin static.

This is just a frame in the table. I've used it for text and colored the background.

The picture below is there by a link,
not by an insertion. The lack of this site's
function to insert images may be a
bit of a drawback but I think the
ease of loading, layout, and text functions compensate for it. The site instructions say
they will be adding an upload utility soon.

This could be a handy frame for links.

USAToday

The Gutenberg Project

The Thomas Site

The Library of Congress

The right click functions on this site resemble MS Word. They might be handy time savers.

Again, this block of text is not in a table. For an interesting experiment in fixed-width page design, drag the lower right corner of the window in which this page displayed so that the page view narrows and widens on your screen. You will notice two things: First, this text widens and narrows with the page, and, second, the frame above this one does not. In fact, if you page window in past the edge of the frame with the fish in it, the page cuts over the frame.

These are examples of fixed and variable width. If you put your content in a table with a defined width, the width will remain fixed. This is handy for people who want to control the exact appearance of their pages.

On the other hand, if you want the end user to be able to modify your page view or view your page on an older, narrow screen, then the variable view is handy.

As an item of note, most professionally-designed pages will be fixed at about 900 pixels wide while most personal pages such as those you are probably building for this site, will be variable.

Some observations about educatorpages.com

Of all the free sites for teachers I prowled, I believe this one is the most intuitive for building and saving pages.
The chief drawback I see is the fact that images cannot be uploaded.

Some observations about mouse-overs

Educatorpages.com has some fairly sophisticated design and interactive tools. I've included an example below. You can observe the mouse over action I applied to the colored block. Mouse overs are a handy way for users to know they've correctly positioned their cursor over an interactive element.
A mouse over can be applied to pretty much any set of images. However, it's best if they're very close in size.

In this case, the box below also acts as a hyperlink. Therefore the mouse over acts as a visual cue to let users know they have positioned their cursor correctly to activate the link. This behavior works for buttons on web pages.

In the case of the teal box above, the box appears to change color because the two boxes that switch during the mouse over, the orange and the teal, are identical in size.

Below is an example of a mouse over action with an animated gif revealed behind it that is revealed during a mouse over. Again, these files are on this page as hyperlinked images. They are not present in any archive at educatorpages.com

A depiction of the words

You can incorporate pop ups

They're a little bit of a pain because they need to be built rather precisely but they can serve as handy tools to illustrate and define concepts. In the terminology of reading instruction, they can serve as a gloss, or on-screen definition and illustration, of a word or concept. This site has some very sophisticated controls available for pop ups. The first one I have here is activated by the viewer on a mouse click. I think these are best for educational uses because they allow for learner control rather than having them as mouse overs only where the students could just create a non-stop movie by rolling their cursors across the screen.

Click here

For a mouse over action, click here.

Multiple-cueing hyperlink directories

The background colors used in the cells at the top of the table below are Photoshop images I created and loaded on my web server. A directory like this serves to provide a visual cue for users as well as allowing a visually-impaired viewer to access them via a screen reader.

www.usatoday.com	www.csmonitor.com	loc.gov	www.gutenberg.org	www.newslink.org
USAToday is a general interest paper with a great search engine located in the upper left corner of the screen.	This is one of the better newspapers in the world. It is available only on line.	This is the main interface for the Library of Congress. The danger with this site is its size. Searching and finding may take a long time.	This is one of the most imporant sites on the internet. Thousands of books are archived for the public here. The may be downloaded for free.	Most of the electronic media in the world are linked here.