WD_L12b

 Unit 3 Lesson 12b: Web Graphics adding graphic images to your page  **Instructional Objectives:** >  **Student Objectives:**  **Materials:**  **Student Activities:** >  ** Teaching Methods/Strategies: **  20-30 minutes. Using HTML insert a graphic image that supports page content to "homepage.html". Explain that because no image attributes are used in this example, the browser "default" features which are not always what is intended. Repeat the same procedure using the same page but different image attributes. Explain the procedure and discuss results of each of the following: alignment, border, border color, Alt text, dimensions. Demonstrate how to reduce image size using the web browser window to determine the image size and by reducing both the width and height of the image by an equal percentage. Show an increase of size (proportionally).
 *  Discuss Graphic Categories: banners, backgrounds, photographs, animated .gif
 *  Demonstrate how to copy and save graphic files from the web
 *  Provide instruction image attributes, including alignment, borders, alt text, dimensions, size reduction/increase
 *  Save images free clip art to include in the Web page into images folder
 *  Uses graphics and text files according to the guidelines published by author/creator.
 *  Bookmarks clip art sites into shared Bookmark (such as Diigo)
 *  Writes HTML code or inserts image (inserts into web page/wikispaces/glogster)
 *  Selects images that support page content and enhance page
 *  Web browser
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;"> Handouts (9.1 s Web Graphics (Inserting Images)
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;"> Searches the web for sites that offer free clip art.
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;"> Experiments using several different graphic images for “homepage.html” or wikispace page or glogster page before selecting the final "right" image/s for the page
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;"> Inserts graphic into appropriate site (html, wikispaces or glogster)
 * <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 3em; padding-right: 0px; padding-top: 0px;"> Experiments using different image attributes to see different results

<span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 1.5 hours. Instruct students to search the web for clipat for no more than 15 minutes ( they can continue if they insert at least on image successfully) Afterwards, they should begin entering the images. At completion of activity encourage students to share their work.

<span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> Any students that finish early may revisit some of the clipart sites they bookmarked earlier and find additional background files for their web pages. <span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> Useful links: