Professional Development

Creating Classroom Web Directories

What to Look for in a Website
Evaluating Websites
C-Method of Evaluating Content
Web Design Tools
Web Design Basics
Naming Files and Pages

Getting Started
Working with Text
Working with Color
Creating Links
Working with Graphics

Identifying topics for Web Directory

1. What are the major topic areas that you explore in your classroom?

2. What types of resources do you frequently need when you explore those topics? For example maps, images, backgrounders, statistics, etc…

3. What types of Web specific resources might enhance your topics? For example Web cameras, games, music, etc…

4. Identify three to five sites for your students for each of your topics. For example, if you are studying space with your 5th graders you might use the following sites:
SpaceKids: www.spacekids.com
NASA Space Kids: spacekids.hq.nasa.gov
NASA Kids: kids.msfc.nasa.gov
Kids Astronomy: www.kidsastronomy.com
Windows to the Universe: www.windows.ucar.edu

For general topics like space, three to five solid content sites will give your students enough resources to explore a topic without overwhelming them. You don’t need to find everything on the Internet that deals with a topic - you need to find quality sites that deal comprehensively with a topic. Look for quality over quantity!

Top

What to Look for in a Site

1. Look for sites that have some level of interactivity. Games, quizzes, questions, or activities will encourage active learning! If the site doesn't have interactivity built into it, design activities for you students to complete as they use the resources at the site.

2. Check to make sure your students will be able to find their way around the site with minimal teacher instruction.

  • Does the site have a search feature?
  • Are menu items clearly marked?
  • Are there standard menu items on each page?
3. Be sure to fully explore the sites you select for appropriate content. Look at vocabulary, writing style, use of images, and links to appropriate outside sites.
Note: You can run a Flesch-Kincaid readability check on the content of a site using Microsoft Word.

1. Highlight and copy a sample of text from the site. This will give you the best results if you can find text with at least 200 words.

2. Open Microsoft Word.

3. Paste the text you selected in a new document

4. Go to Tools on your menu bar and select Spelling and Grammar, click on options, if it is not already selected, click in the box next to Show Readability Statistics.

5. Run the spelling/grammar check. When the check is done you will see a grade level readability number for the text you just checked. (This text rates a 7.0).

Note: This can be a handy tool, but you know your students best, so use your own judgment as well when selecting sites.

4. Check the authority of the information provider. Make sure the source of the information is qualified in the topic. If you are not sure of the information provider’s qualifications, do not include the site. Things to look for when checking on a source of information:

  • Is there an about us, who we are, or other link on the site that will give you information about the site’s owner?

  • Is the site hosted by a recognized authority on the topic? There are three identifiers you can use when evaluating the authority of a site. Expert, Trusted, and Questionable. An expert site is one that is from an acknowledged expert in the content area covered by the site. For example, if students are looking for information about animals, a zoo site would be an expert site if the zoo has that animal. A trusted site is one that you are confident would have used expert sources for their information. Using the expert example, a zoo might be a trusted site for information about animals that it doesn't have in its collection. Newspapers and magazine sites might be considered trusted sites of information. A questionable site is simply a site that you can not confirm as being expert or trusted. The information on a questionable site might be completely accurate, but if you can not confirm the credentials of the site or if you are not familiar with the owners of the site, you would have to consider the site questionable. Students should never use questionable sites for research.

  • Is there a contact name or email address you can use to contact the site and find out more about the site owner?

5. Evaluate the advertising on the site.

  • Is the advertising clearly marked?

  • Is the advertising for age-appropriate products?

6. What type of resources does the site offer?

  • News and Information
  • Guides /Tutorials
  • Original Materials
  • Access to Experts
  • Online Projects or Activities
  • Virtual Field Trips
  • Reference and Research Tools
  • Tools for Teachers
7. What type of site is it?
  • Educational
  • Commercial
  • Informational
  • Interactive
  • Entertainment

    Top

CARE Criteria for Evaluating Websites

Content - age appropriate, content appropriate, format appropriate,
up-to-date information, uniqueness, readability, appropriate use of
graphics.

Authority - who are the authors and what are their credentials, is there
Bias.

Reliability - is the site dependable, will the site stay online for the
foreseeable future.

Ease of Use
- navigation, searchablilty, speed, technologies used.

Top

C-Method of Evaluating Content

Whenever you go to a new web page, evaluate the content using the shape of a “C.”

1. Start at the top of the page.

Here you will typically find a page or site title and navigation tools. You will also find the site URL in the Address Box.

Things to look for: Is the site searchable? Is the site part of a larger site? Is there advertising on the top of the page? What is the site URL? Who is providing the information? Is there a way to contact the site? What ar the main sections of the site?

2. Next look at the left side of the page.

On many pages you will find additional navigation information on the left side.
Things to look for:
Is the site organized into subcategories? Are there additional resources available from the site like email updates, newsletters, or other resources?

3. Finally look at the bottom of the page.

Typically copyright information and contact information will be found here.
Things to look for:
Is there a contact name or address? Does the site have a privacy policy? Is there information on usage of site resources? Are there links to other sections of the site or to the site's parent page?

Once you have looked at the content of the page in this C-shape, you can then look at additional content in the middle of the page and determine where you will find the information you need.

Some additional things to look for: Is there a teacher section, a student section, a section with links to other sites, interactive features, or other tools and resources that will facilitate classroom use of the site?

Top

Web Design Tools

Animation Online
www.animationonline.com/freebanners.html
Create animated banners and buttons for your Website.

Cool Archive
http://www.coolarchive.com

Cool Text
www.cooltext.com
You can create text logos.

Gif Works

http://www.gifworks.com/index.html
Create animated banners.

The Animation Factory
animationfactory.com
This site has lots of animated gifs.

 

#1 Free Clip Art
www.1clipart.com/

Hassle Free Clip Art
www.hasslefreeclipart.com

Free Kids Clip Art

www.thekidzpage.com/freeclipart.htm

ProDraw Graphics

http://www.prodraw.net

Morgue File
http://www.morguefile.com
This site has photos.

FreeFoto

www.freefoto.com/index.jsp

Top

Web Design Basics

Step One: Identify Your Audience
Take the time to analyze who will be using your site and what they will expect from it. This will help you determine content, language, graphics, and layout for your site.

Step Two: Identify Your Goals
Determine what you hope to accomplish with your site. What content will you need to meet your goals? How will you evaluate your site's success?

Step Three: Outline Your Site
Create a storyboard for your site. This will help you visualize the site and how it will flow. A good tool for this is post-it note. Use one for each page. You can quickly move notes around and switch them out as you work with site layout.

Step Four: Make Time for Your Site
Determine how much time it will take to not only create your site, but how long it will take to maintain and update your site. Don't get carried away and create a site that is unmanageable!

Step Five: Find Help
Look for others to help you with your site, parent volunteers, students, family members, other staff.

Step Six: Collect Materials
Collect the materials you need for your site. Keep hard materials in a file folder. Create a "source" file on your computer hard drive for original copies of graphics and text. This will help you maintain the integrity of your originals. Create a "working" file for drafting your pages, and an "upload" file for your final product.

Top

Naming Files and Pages

Develop a Naming Protocol for Your Files
You might start all your files with the same letter. Consider naming pages and graphics used on that page the same things, this will help you keep images and pages together.

Use Lower Case Letters
You can use caps, but lower case letters make it easier to give people the address of your site, and it makes it easier for them to remember it!

Use Only Numbers and Letters
Again, this makes things easier for everyone!

Don't Ever Use S paces

Titling Pages
This is different than naming a file. Titling a page places a title in the code of the page. This title is used by search engines to classify your page and will show up in the top left hand corner of a browser when someone is looking at your page. It will also appear as the name of your page when someone bookmarks your site. Choose a descriptive title that will give people a good idea of what they will find on your page. If you don't title your page, the title will show up as untitled.

You can use punctuation, spaces and caps when you title a page.

Top

Getting Started

We will be using Netscape Composer because it's easy and free!
Pull down the file menu and select new and then blank page. This will open a blank page in Netscape Composer, you have left the browser. Notice that your toolbar changes. Your browser is still open and you can switch back and forth between your browser and your editor.

Save your new page, remember the naming tips for files! After you've named your page, give it a title. Pull down the format menu and select page colors and properties. You will see three file tabs on the box that pops up, General, Colors and Fonts, and META Tags.

Click on General and give your page a title, you should also type in a description and keywords for your page.

The description and keywords are also used by search engines to classify and index your page.

Click on the Colors and Fonts tab. Here you can set link, and page background colors. We will talk more about color selection later.

Top

Working with Text

Composer has a text tool bar that give you basic text options.

Format
The first pulldown menu lets you select type formats like normal, address, and headings.

Font Type
The next pulldown menu lets you select font types. You can select any font you want, but that font will only appear if the end-user has it on their computer, if they don't they will see a default font.

Text Size
Next is the font size pulldown menu.
You can select 8,10,12,14,18, 24, or 36 point fonts. As a general rule, 10 and 12 are good for general text, 14 and 18 are good for subheadings, and 24 and 36 can be used for main heading. 8 can be used for captions and other uses where the text is secondary.

Text Color
Next to the font size menu is the color menu. To change the color of text, it must first be selected!

Bold, Italicize, Underline, Erase
After the color menu you'll find four A's the first one will bold text, the second one will italicize text, the third one underlines text (never use this, people will think the text is a link), the last A removes all style settings for selected text.

Lists
After the A's you'll see two sets of three lines, the first set gives you a bulleted list for selected text, the second one will give you a numbered list for selected text.

Indents
The next two icons let you indent left and indent right.

Alignment
The last icon allows set a left, center or right alignment for selected text.

You can find additional text options under the format menu including:

Additional Style Choices like:
strikethrough

subscript

superscript

blinking script

Top

Working with Color

Choose colors that complement each other.

Don't go crazy with color.

Use color to enhance, not overwhelm your message.

Make sure text color is readable on backgrounds.

Make sure your background colors don't overwhelm your text.

Remember, the colors you choose will look slightly different on other computers.

Top

Creating Links

Links to Other Websites
Highlight the text or image you want linked, click on the link icon on your tool bar type in the full web address of the Website, including the http://

Links Within Your Site
Highlight the text or image you want linked, click on the link icon on your tool bar type in the file name you want to link to.

Creating Links and Targets Within a Page
Select where you want the link to go to on your page and click on the target icon and name your target. Then, highlight the text or image you want linked, click on the link icon on your tool bar select the target you just created.

Creating email Links
Select the text you want to be the email link, type in mailto: and then the email address.

Top

Working with Graphics

Graphic Formats
There are three basic web graphic formats, GIF, JPEG, and PNG.

GIF
GIF stands for Graphic Interchange Format and is pronounced giff not jiff since the g stands for graphic. GIFs work best in images that have large areas of solid colors like logos, cartoons, and illustrations. GIFs can have transparent backgrounds which allows you to use them on colored or patterned backgrounds. They can also be animated.

JPEG
JPEG stands for Joint Photographic Experts Group and is pronounced jay-peg. JPEGs work best with photos and images with lots of colors. They can not be transparent or animated.

PNG
PNG stands for Portable Network Graphics and is pronounced ping. It is a newer file format and not in common use currently because most browsers still don't recognize the format.

Inserting Graphics
Place your cursor where you want the graphic to go to on your page and click on the image icon to select your image. You can set the image's alignment to text, and set space around the image or create a border around it. You also want to set alternative text for your image, this will load a text name or description for your image that will load before the image and will load if a user has her images turned off. You can also adjust image size here. You don't want to make your image any larger than its original size or you will lose image resolution, but you can make an image smaller. Once you've placed an image you can drag and drop it or cut and paste it.

Basic Graphics Rules
Graphics should enhance and not overwhelm your page, they should serve as accents to information.

Keep your graphics as small as possible, the larger the graphic, the longer it will take your page to load.

Be judicious in your use of animated graphics, they can drive the end user crazy!

Top