WD_L12

Unit 3 Lesson 12a: Web Graphics adding backgrounds

**Instructional Objectives:**
 * Introduce topic of Graphics in Web Design and describe their purpose and their use to change the page background
 * Explain the difference between file types: .gif, .jpg, .png
 * Graphic Categories: banners, backgrounds, photographs, animated .gifs
 * Demonstrate how to copy and save graphic files from the web
 * Provide instruction inserting background images onto a web page.

**Student Objectives:**
 * Searches for the web for free clip art for Web page backgrounds
 * Bookmarks clip art sites into shared Bookmark (such as Diigo)
 * Searches for and saves graphic files to be used for page backgrounds and regular images within pages.
 * Saves graphics files into the “images” folder

**Materials:**
 * Web browser
 * Handouts (8.1 s Web Graphics (Basics and Backgrounds)
 * Other: Sample web pages to be used for demonstration. Several background graphic files to use for demonstration purposes and for student use. Collection of graphic files representing each category: banners, backgrounds, photographs, animated .gif.

**Student Activities:**
 * Copies background image files from CD into personal files and uses them to add background to “homepage.html” or wikispace page or glogster page
 * Inserts background graphic into appropriate site (html, wikispaces or glogster)
 * Experiments with different background images
 * Selects backgrounds that complement font color and make the page attractive and easy to read

** Teaching Methods/Strategies: ** 20-30 minutes. Introduce topic by discussing the critical aspect of carefully selecting the “right” web page background graphic, explaining that “less might be more” with respect to not over using graphic images and busy backgrounds. Discuss how file extension types affect page download time and file size.

Continue lesson by showing a collection of image graphics, explaining how they may be used to improve the overall purpose and design a Web page. Show sample of different graphic image categories, banners, backgrounds, photographs, animated .gifs. Describe the purpose / use of different file extension names. Give a brief explanation about .jpg and .gif file extensions, including when to use one over the other. Emphasize the importance of correct spelling graphic file names and their file extensions.

Proceed by showing how to save an image from the web. Demonstrate the process of inserting the HTML code/link code/ upload and the background image into the webpage/wikispace/glogster. For the first example, insert a busy background that competes with the text color, and makes the page difficult to read. Discuss results. Follow this by changing the background image to one that harmonizes with the page’s text, color, style; it enhances its overall appearance, and makes it easy to read. Discuss the results.

1.5 hours. Follow demonstration by instructing students to copy and save several of the “background image files” saved in the network and used them on their Web pages. This activity is very entertaining, time consuming and challenging since students may have to change the text color to accommodate different backgrounds.

Any students that finish early may revisit some of the clipart sites they bookmarked earlier and find additional background files for their web pages.

Useful links: