Looking for more creative ways to get your students thinking about nutrition and healthy lifestyles? Get them working in groups to create a website for an organic cafe and educate them about the importance of food businesses promoting healthy eating choices.
Subjects: Educational Technology and Social Science
Grades: 3-5 and 6-8
Assignment brief: Students will work in groups to design and create a multimedia website for Smoothie World – a new chain of cafes that sell a wide range of healthy organic food. The company prides itself on using organic fruit and vegetables in its smoothies and wraps. It also supports the campaign to eat five portions of fruit and vegetables a day as part of a healthy diet.
Smoothie World wants their website design to perform the following functions:
- To highlight the range of smoothies and wraps they sell
- To show customers the locations of the Smoothie World bars
- To explain the benefits of eating five portions of fruit and vegetables a day
- To get feedback from customers about:
a)What their favorite flavor of smoothie is
b)How the website could be improved.
- Learn the basics of organizing a business website
- Explore creativity and multimedia skills
- Work collaboratively as a web design team, either in small groups or as a class
- Organize, refine, and present information about healthy eating in different forms, including images, sounds and text.
- Web design software geared for young students, such as Serif's WebPlus. Most programs will have tutorials to get them going quickly.
- Discuss with your IT manager the best way to make and have access to a shared drive or folder for students to store all the source files needed for the project, including text documents, digital photos, video clips, and sounds files.
- A schedule for accessing the computers in your classroom.
The Lessons: This project should be completed over several lessons. You can decide on the length of time needed for each element of the project, based on the ages and abilities of your students.
With the entire class, visit other smoothie bar sites such as zumobars.com or boostjuicebars.co.uk to get your students thinking about the kind of features they would like their website to have. Using a data projector or interactive whiteboard, ask your students to take a good look at each site. Ask: Who is the intended audience for the site? What is the purpose or function of the site? Does the site look clean and streamlines or messy and cluttered? How easy is it to find and read the website content? Navigate the site and look at how pages are linked together. Get them to make notes of which features they like or don't like.
As you explore each site, identify site features and discuss terminology including navigation bar, buttons, links, text, headings, graphics, and home-page. (A searchable set of internet terms geared for parents is available at NetLingo). Talk about the illustrations, font size, amount of text, and any animations or other multimedia features.
Arrange the students into groups of four to five and explain to them that they are going to create a website for Smoothie World, a cafe business which promotes healthy eating. Alternatively, an entire class could work together to create a single, complete website.
Explain the structure of websites and how they should make finding information easy for a visitor. Demonstrate how homepages contain links that help visitors navigate to the site's other pages. Tell students that, as the designers of their websites, they must decide what pages will be included (four to six linked from the home page should be enough), and what information each page will feature.
Ask your students to work together to produce a site plan for the Smoothie World website to show the main structure of the site and how it will link together. Get them to give an overview of what pages they will incorporate, for example: an 'About us' page, menu, contacts page, and fact sheets on the health benefits of a nutritious diet. Encourage individual group members to take responsibility for a different aspect of their page – making or finding illustrations or multimedia content, research, writing or proof-reading or inputting content into templates. If working as a class, begin a brainstorming session to discuss proposed pages for the site.
Have students choose a style for the site, including color scheme, fonts and styles, logos, image maps or rollover images. Bright colors related to healthy foods, such as greens, oranges and yellows, might work best for promoting healthy eating. Ask questions to encourage students to consider how suitable their proposed designs are for their choice of theme and intended audience.
The production of the website will take several lessons, so make sure you give your class enough time to complete this part of their assignment. You might want to hold one or two sessions to let the class familiarize themselves with the software. Some, like Serif's WebPlus, have a wizard that can guide students through the initial site design. There are also lots of useful helpsheets and video tutorials on their website. Demonstrate that they can create a master page template that will replicate the color scheme and house style on all pages of the site.
Once their master template is set up, get students to write and input their page titles and text. Ask them to replace default text and images in the template with their own (there are lots of websites where graphics can be downloaded for free – start by searching Google). Serif's WebPlus, for example, enables students to modify most site features by double-clicking the object they want to change.
Encourage them to use a range of different components on their pages such as flash banners, rollover images, animations, video, and any other interactive content that they feel would be appropriate to the site brief. Don't forget to make sure they include a customer feedback form, which asks: What do they think about the look and feel of the site? How easy is it to navigate around the site? What's their favorite flavor smoothie? Is there anything they think could be improved? The form should contain a submit button with code that will email the responses to the webmaster's email.
When their pages are complete, they need to create links and navigation bars that will allow visitors to find their way around the site and move from one page to another. Demonstrate how they can use graphical as well as text hyperlinks. Each page should have a navigation bar with buttons, which is consistently positioned in the same place on every page (so all pages can be reached from every other page without having to use the "back" button). They may wish to use hyperlinks to external pages where visitors can find out more information about healthy eating or other related websites.
Advise students to proofread the entire site and test their website in an internet browser. Advise them to click every link to make sure they take visitors to where they are meant to go. Have students save text documents, artwork, or other items for their websites on a designated drive or folder on your class, school, or districts network. Remind them to save their work frequently.
When finished, have students visit the sites made by other students in the class and share their thoughts and suggestions. The completed sites can be published to a local folder for viewing within the school computer network or to a school website to showcase students work.
Some final tips:
To extend the lesson, have students:
- Create an animation for their website.
- Record a short video or audio clip.
- Add other interactive features such as a hit counter, blog, poll, or shout-out box.
- Compile a list of top 10 tips for creating future website.
Students' grades should be based on their ability to:
- Present accurate information and understand the subject matter.
- Find, select and organize relevant information.
- Understand the underlying basics of web design.
- Match the content and language to their intended audience.
- Work together well in small groups to design the website.
For more information about Serif’s award-winning range of software for use in your classroom, please visit www.serif.com/education.