Introduction to the Internet-lesson 3-plan the content for a Web site.

Lesson 3
Learning Outcomes
This lesson will provide you with the opportunity to plan the content for a Web site. We will also look at the importance of presentation and navigation when creating Web pages. You will use previously learned HTML commands and practices and that these new concepts will be used in subsequent lessons.
When you have completed this lesson, you should be able to:
Examine Web site creation and management programs.
Learn about JavaScript, Flash, and other browser applications.

Learn about the different types of images that you can use in a Web page and the programs that create them.
Understand the questions to ask when selecting a Web hosting service.
Understand the issues involved when publishing a Web site.
Learn about search engine submission and search engine optimization.
Create a flowchart of a simple Web page, or modify one started previously, using proper presentation and navigation (HTML Practice Exercise #3).
Textbook Readings
Please keep in mind the preceding intended learning outcomes while reading the assigned chapters from The Internet, 9th Edition, Schneider/Evans, Course Technology, Cengage Learning.
Tutorial 8: Creating Effective Web Pages  Session 8.2
SAMS Reading
This reading will prepare you for the HTML Practice exercises that accompany the first eight lessons and Assignment #5, your Web site, by explaining the basic concepts and tools that are needed to create Web pages.
OLD BOOK
HOUR 9: Working with Colors
NEW BOOK
Chapter 8: Working with Colors
HTML Practice Exercise #3

In this and subsequent lessons you will be expanding your knowledge of HTML codes through a series of HTML practice exercises.  These exercises, used in conjunction with the assignments, will culminate in a complete Web site.

In this exercise, I provide suggestions for proper presentation and navigation. You should apply what you learn to the final Web project (Assignment #5).

Presentation

Formatting your Content

When arranging text for a presentation, whether it is on a Web page, in an essay, or in an annual business report, great care must be taken to present the information in a manner which does the following:

1. Holds the interest of the reader
2. Is easy to read
3. Flows smoothly

These may be achieved by using the following screen design tips:

Fonts

The best sans serif fonts to use for maximum ease in screen viewing of type are 11-pixel Verdana, Arial, and Helvetica, in that order. These are all SANS-serif fonts (Macworld, “Reconcilable Differences: Design Web Sites that Work Anywhere.” p. 70, September 2000).

Emphasis

Avoid using italics, underline and caps for long passages.

Line Lengths

Aim for about 10-12 words, or 40-60 characters, per line.

Justification

Use left justification to avoid unpredictable spacing between words.

Colour

For large amounts of text, try black text on white or very pastel backgrounds. Pastel colour backgrounds are preferable to white, which tends to glare.

Use blue for large areas, because our eyes aren’t particularly sensitive to it.

Avoid placing two colours side by side if they differ only the amount of blue they contain. The boundaries will appear blurry because of the eye’s lack of blue receptors.

Avoid using red and green for large areas – it is distracting. Also, many people are red/green colour blind, and wouldn’t be able to see what you are trying to emphasize with these colours.

To de-emphasize objects, colour them close to the background.

Match people’s colour expectations (red – stop, yellow – caution/creative, green – go/nature, blue – water/cold, grey – neutral).

Remember, colour schemes can contribute greatly, not only to the interest of the pages, but also to their readability.  Be careful not to over do it.

Shapes and Colour

Use the same colour for grouping related elements.

Graphics

Langevin Learning Services advises one to place graphics in the top half of the screen and text in the bottom half (or place graphics on the right-hand side of the screen if there is no text). This is because the reader’s eyes start in the upper-left corner of the screen, and proceed right and down (cf. Kristof & Satran, p. 90). Messages in the bottom left-corner can often be overlooked. (Langevin Learning Services. Designing Computer Based Training. Training manual distributed by course leader Terry Donahue, during Designing Computer Based Training workshop, Delta Chelsea Inn, Toronto, Ontario, September 6-9, 1995).

Readability

For your writing style, the same basic rules should be applied as when you are writing anything else.  Good grammar and spelling are important, as well as keeping the information relevant.  If there is no point to a statement, it should not be included in your page.

The last part of formatting is how the text itself is arranged.  Remember that when people are first taught how to read (in English), it is with the text flowing from left to right, and all of it is aligned smoothly with the left-hand margin.  Since native English speakers are all introduced to the language in this manner, it is always easier to read it that way as well.

©Concepts above are adapted with permission from Professor Doug Thistle (University of Windsor), 2001.

Navigation

One of the most important parts of creating a Web site is deciding how the user is going to find the information you are presenting.

In some cases, such as a list of search engines, providing one big index of all of your pages might be appropriate, but for an interactive story, it would not. When building your Web site, you must ask yourself how the information on one page relates to the others. If you have many groups of items which are related to each other, then perhaps the users should first be given a choice of which group they wish to look at, and then from that sub-index, they could choose the specific information they were looking for.

One good way to plan the layout of your pages is to draw a “map” of your pages – just a bunch of circles representing each page, and lines between them representing the links you have made between them.

Here are a few example layouts and suggestions of what they may be appropriate for. (Please note that I cannot cover every possibility, and what is listed here as appropriate is not the only way of doing it.)

This kind of layout would be best suited to an essay, or a technical paper, which needed to have an extensive glossary or set of footnotes. Links from the index to the sub-pages allow the reader to pick sections, links between sections allow them to read them all in order, and links to the “footnote” page provide explanations when needed.

This type of layout is rarely used, but is sometimes appropriate. If your site contains a large number of unrelated topics, they would be together linked at the main index, but not between each other.

This is one of the more common types of layout, with one main index linking to sub-topics, which could then link to more sub-topics, and so on. An example of a major site which uses this layout would be the Yahoo! Web Indexing site.

Though it may not look it, this layout is the same as the one above it. Remember that just because one menu is three levels deep, they do not all have to be.

©Concepts above are adapted with permission from Professor Doug Thistle (University of Windsor), 2001.
Next Step

If you can meet the objectives stated at the beginning of Lesson 3, you are ready to proceed to the next lesson. Keep in mind the weekly schedule recommended in the course syllabus.

Please post to the Discussion area of this course Web site any questions or comments related to this lesson. Only emergency and private messages should be sent through the E-mail Instructor component of the site.

Assignment
Please visit the Assignments portion of the course Web site for details on Assignment #2.