Designing Web-based Learning Environments
Anyone can create a web page, but it takes planning to create an effective web-based learning environment.
Why reinvent the wheel? The first step in design is exploration. Look for models. What are other people doing?
We'll focus on unique web projects that go beyond posting artwork or sharing papers. We'll also explore a spectrum of student-produced web projects, examine alternative project management options, and compare web page development tools.

Project Design: Assignment Ideas
Think about the assignment:
  • What's the purpose?
  • What's the expected outcome?
  • Enhance what you do now
  • Create a new project
Examine their outcomes, activities, and assessments.
Indiana Bat
ThinkQuest Jr.
Childnet International
Explore student project starting points
KidSpace - Seven Super Sites
Kid's Ring
Kids on the Net
Explore sites that are by kids and for kids
KidZ Magazine
Midlink Magazine
There's a spectrum of projects you might wish to explore.
Informational. Text, graphics, and other data are presented and links are provided to additional resources.
Instructional. Tutorials, practice environments, or simulations help teach, practice, or apply new concepts.
Creativity. New ideas are presented.

  • Identify resources
  • Evaluate materials
  • Organize information
  • Link to remote resources
  • Originate information
  • Keep it up to date or remove it
Hurricane Project
  • Kids teaching kids
  • Study and review
  • Practice tests
Making web pages
Using the computer
  • Investigations
  • Scientific Inquiry
  • Oral Histories
  • Communications

Focus on Writing, Visuals, Multimedia

Inquiry - Starter
  • What we already know
  • What we want to learn
  • What we learned
  • How we found out


Inquiry - Advanced
  • Identify a problem
  • Provide background
  • Design a study
  • Study locally
  • Provide guidelines for others
  • Study globally
  • Provide FAQs
  • What we learned & how we shared


Oral History Projects
  • Focus on a time, people, or place
  • Narratives: text, audio, visuals
  • Issues: text, audio, visuals
  • Resources: essays, timeline, glossary, bib
  • Background, Lessons, Reflections
  • Feedback
Focus on Writing
  • Letters
  • Journals
  • Diaries
  • Lab Experiments
  • Descriptions
  • Persuasive Writing
  • Poetry
  • Recipes

Students writing projects

School poem

Laura Ingalls Wilder

Fun recipes

Focus on Visuals: Paper or Computer Generated
  • Photos
  • Drawings
  • Paintings
  • ClipArt


  • Photos: enhance, combine
  • Titles: cool lettering, combine with visuals
  • Visuals: create



File Management
Convert to
JPEG: photos, gradients
GIF: line drawings, simple colors

Paste into web software

KidPix, KidWorks ...
  • Drawing
  • Painting
  • Pictures
  • Lettering
  • Sounds
  • Slide Shows


Creativity Software
  • Imagination Express
  • Amazing Writing Machine
  • Claris for Kids
  • Children's Writing Center
  • Timeliner
  • Inspiration

Screen Capture
  • Full Shot
  • FlashIt
  • Snapz
  • Capture
  • Grabber

Focus on Multimedia
Slide Shows

Web Multimedia
Runs in
web browser
web browser with plugin
separate software


AU, AIFF, WAV, MIDI, Real Audio
Sound Companion

Clip Art
Print Shop
Print Artist
Art Explosion
Master Clips
Online Sources
Mining Co
Sharing & Credit
  • Make your own
  • Use public clipart
  • Ask for permission


Spin the Web!

Which of the following areas will you include in your web-based project?

  • Informational
  • Instructional
  • Creativity
Where is your focus for communication?
  • Writing
  • Visual
  • Multimedia

Project Design: Tips
Baby Steps
  • One page
  • Multiple pages linked to core
  • Multiple projects linked to core

Use Thumbnails
  • Small: photographs, scanned drawings

Make it Interactive
Activity: matching, identification
  • Quiz
  • Call for participation
  • Call for feedback

Share An Experience
  • Guest Speaker
  • Field Trip
  • Practicum
  • Oral History
  • Play
  • Program

Core Page Plus
  • Class overview + student projects
  • Map +
  • Timeline +

Think Different
  • Pages
  • Screens
  • Posters
  • Maps
  • Arrows

Create Your Own
  • Show a model, students create
  • Show an example, students make

Start with Clip Art
  • a photograph
  • a drawing
  • a painting
  • a line drawing
Discuss, persuade, debate, identify ...

Reach Out!
  • Within school
  • Within community
  • Around the world

Make it ongoing
  • By topic
  • By child

Snail Mail
Web Projects
  • stuffed animals
  • lab equipment
  • books
  • scrapbooks
  • writing and art projects

Share with Others
  • Kids sharing with kids
  • Teachers sharing with teachers

Web Tools
Web Development Tools
  • Claris Home Page
  • Adobe Pagemill
  • Microsoft Front Page
Browser Creators: Composer
Freebies: AOL
Applications: Word, Pagemaker
Kid's Tools

7 Design Disasters
  • Distracting Backgrounds
  • Irritating Sounds
  • Wild Animations
  • Crazy Colors
  • Teenie Weenie Fonts
  • Annoying Alignment
  • Slow-loading Graphics

Cool Design Ideas
  • Match the "design" to the theme
  • Provide background info
  • Use easy navigation
  • Include credits, contacts

Wizard Projects
  • Turn your frog into a prince
  • Take an existing project and make it new!

Project Management
  • Students
  • Time
  • Technology
  • Coordinating your sheep

Manage Students
  • Individual vs Team assignments
  • Team vs Whole project
  • They need to know…
    • who, is doing what, when
    • what, is due, when
  • Project Headquarters Board

Manage Time
  • Project timeline
  • Team timeline
  • Group schedule
    • Individual schedule
    • Self-management
  • Team support/spirit

Manage Technology
  • Whole class access
  • Team access
  • Individual access
    • Computer
    • Special equipment
    • digital camera, scanner, video
    • Internet
  • Establish a schedule

Just Do It!
  • Explore some models, Find a friend

Spin the Web!

Review some of the design tips.

Pick two that you might integrate into your project.