computer image

Technology Tip of the Month

August 1998: A Web-based Class Newsletter

by Deborah Healey

Last month's Tech Tip looked at preparing students (and yourself) for a paper-based class newsletter, covering some of the basics about vocabulary and procedures. As with a paper newsletter, you can spend hours on end tweaking your web-based product, adding bells and whistles. This month's tip again will aim at the middle ground, going for maximum student participation and a good-looking end result -- without expecting the teacher to spend hours of extra time.

Before you start, make sure that you will have a place to put the result -- this means finding out who provides your school's Internet access, who runs the web server, and the logistics of getting files onto the server. You can generally save a whole class newsletter on one disk unless students are using large graphic images, sound files, or video (not a good idea anyway if you want lots of people to be able to see your newsletter). This can enable you to give the person who runs the server the files on the disk, and leaving the logistics to him or her.

While you can teach your students 'raw' HTML, there's hardly any point these days in starting out that way. The free Netscape Communicator comes with Composer, a built-in web editor. Office 97 and 98 let you create a web document in Word relatively painlessly. You probably won't need to know any HTML special coding to create what you need to for a class newsletter. (Your students may want to do more, and you can let them go for it!)

Getting Started

There are two basic ways to start: from word-processed articles or by typing directly into the web editor. Unless you have had students type their essays on the word-processor for some other reason, they might as well simplify their activities and go straight to creating a web document.

If they're using a word-processed document, they'll need to open it in the word-processor, select all, then copy. They can then go to the web editor, open a new file, and paste in the text. If they are using Word to create HTML documents, they will need to save as HTML. A note of caution: tables do not transfer. They need to be done within the web editor, unfortunately.

Like with a paper newsletter, students will need to organize and categorize the articles, deciding the order they should appear in the table of contents. Because we're working with hypertext, it's not necessary to put the articles themselves in order -- links will take the reader wherever she or he wants to go.

Students can decide next how to give their newsletter a cohesive look and feel, so that readers know they're looking at a single web document with many pages. For example, what elements should be repeated on each page -- the school logo? The newsletter banner in small form? Should the pages all have the same background color, or at least all the pages within a section? (That's generally a good idea.) Should there be consistency in the size of the title on each page? (Another generally good idea.)

An effective way to make these design decisions is to mock up some pages with different background colors and different sizes of typeface, and see what students think. They may find the rainbow approach very appealing. On the other hand, if you have a strong sense of design, you may wish to impose design standards -- white backgrounds, consistent title size and placement, etc.

Getting to it

Some things that are difficult in print are easy on the web, and vice-versa. Having extra ideas in an article that the reader can jump to is easy online -- much easier than having the reader turn to page 6, column 3. Putting graphics just where you want them (and having them stay there) can be much easier in print.

Students need to grasp the concept that web pages will change in appearance, depending on the reader's computer and browser settings. It helps to demonstrate how a page changes when it is made smaller or larger, and that you can't count on someone's having the same size monitor that you have. As a result, they shouldn't spend a huge amount of time trying to get the placement on the page exactly right.

What students should be spending their time doing is finding graphics and links to use. With those elements, the web-based newsletter shows its true value to the reader. The category searches in Yahoo often work better than keyword searches in other search engines for finding graphics and good links related to a specific topic.

Creating a Table of Contents

The table of contents is the main organizing tool for a web-based newsletter. After all, readers can't just quickly flip through all the pages to see what's there. The table of contents can be set up in the same way as in a paper-based newsletter, either with sections or with articles in sequential order. It can also be designed as an image map, a single large graphic with "hot spots" on the image to click for the links. Image maps can be slow to load and impossible for the blind to work with, so be sure you also include a text version of the table of contents.

Here are a few table of contents formats:

This one uses "dictionary lists," with "term" and "definition" styles:


Maria Rodriguez wins school race! by Ahn Nguyen
Ten new students arrive by Ramón Martinez
Are you ready for the school dance? by Sarah Polanya
Keeping your bike safe by Stefan Constanides
Recipes from different countries by Anton Kristov
My home town by Zuleha Al-Romoh
Classified ads by Miguel Martinez and Sarah Polanya
Comics by Zuleha Al-Romoh, James Wong, Jin-Bong Park

This one uses sequential order and a table to show the author. If authors have their own web pages, it's easy to link to them.



Maria Rodriguez wins school race!

Ahn Nguyen

Ten new students arrive

Ramón Martinez

Are you ready for the school dance?

Sarah Polanya

Classified ads

Miguel Martinez and Sarah Polanya


Zuleha Al-Romoh, James Wong, Jin-Bong Park

This is a sample image map -- clicking on a place in an active image map would take the reader to the appropriate section of the newsletter:

To frame or not to frame...

Frames look very nifty when you first open a page. It can be very helpful to have the table of contents in a sidebar that doesn't change, too. However, keep a couple of caveats in mind:

Adding Graphics

Last month's Tech Tip had a few suggestions to make scanning work better. The biggest advantage of scanning original art or student photographs is that you minimize potential problems with copyright violation. Incorporating student art can also let more students -- especially less fluent ones -- get involved with the newsletter. Students can try drawing with the mouse, of course, but most people do better with a pencil-based approach. Even a digital tablet with a stylus takes some time to get used to.

The web is also a rich source of clip art. Unfortunately, it's not easy to keep students to the straight and narrow when they see something they like online. My colleague Allen Sellers has a page on free images and copyright that he's used to help his students understand the copyright rules and find free graphics. Here's where teaching students to create a link and cite their source becomes very useful. Rather than having students download images to the local computer, they can use the image via a link to the original page. They should still ask permission for images that are not listed as copyright free, but at least the source of the image is clear to the reader.

There are also a number of clip art sites online that offer royalty-free images. They usually have advertising -- after all, you can't get something for nothing. Here are a few of the more interesting ones:

Some simple graphics from Oregon State University's ZoeAnn Holmes:

Animated GIF Finder - very few ads and fast to load, but you need to read the description or click on the file to see what you're getting:

Animation Library - animated graphics:

ClipArt Connection - lots of ads, but lots of good animated graphics, too:

GrabAGif - not a lot of ads on this page, but it can be slow to get to:

Ready to Rock

If you load all the files onto one hard drive, you can look at them before they are loaded onto the web server and make sure that they look right and link correctly. Some web editors, such as Claris Home Page 3.0, will check the links for you (another example of how you get what you pay for). This will also let you see the newsletter as a whole. It's not difficult to change those backgrounds to a consistent white or pale color!

Once you've gotten the files loaded onto the web server, you need to tell the world to look at your pages. Your students will start by telling all their friends and family members, and you can put an announcement into the (print-based) school newsletter. If you want broader dissemination, you can list your site with a search engine.

You can take a look at what some ESL students at South Eugene High School did: The Cosmopolitan. We had only three class sessions to convert a print-based newsletter into a web-based one, so this newsletter is quite simple in format and shows its print-based origins.

Good luck!

See Other tech tips

If you have questions, comments, or for more information, contact Deborah Healey, dhealey AT uoregon DOT edu
Last updated 26 June, 2009