Module 2: Creating a Web Photo Album

Overview

In this module, students will demonstrate their understanding of image size, resolution, resizing images, and cropping. The activity will involve uploading an image from a digital camera and then changing the image size and resolution to desired specifications. Then the students will resize the image again, this time using cropping to achieve a different look to the image. Next, students will be introduced to techniques for optimizing jpeg images and experiment exporting jpeg images with various levels of image quality. The final activity involves the creation of a mini web photo album using the images that they have acquired and HTML skills from Unit 2.

Lesson 1: Understanding Web Graphics

• Estimated time required: 30 - 60 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson includes three on-line resources that students are to read. The first two are relatively concise, while the third is lengthier and covers the topic in considerably more detail. Depending on your class and how motivated your students are to do extensive reading at this point in the course, students might gain sufficient understanding by reading just the first two of these resources, and the third could be made optional.

Example Output

When this lesson is complete, students will have added more HTML content (more answers to lesson questions) to graphics.html.

Lesson 2: Acquiring Images for Web Graphics

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• In this lesson students will be acquiring images from various sources and saving them to a folder where they'll be able to work with and ultimately use them in their web pages. We haven't explicitly provided instructions as to what to name the files, but we recommend that instructors require specific file names since that will ultimately make it easier to communicate about these files across all students.
• Instructors may need to monitor that students are saving images into the right folder.

Lesson 3: Cropping and Resizing

• Estimated time required: 30 - 60 minutes
• Link to student Lesson 3 page

Tips for Delivering This Lesson

• This is the first lesson where students plunge in and begin to use graphics software to work with images. In an effort to keep this curriculum vendor-neutral, we have avoided providing step-by-step techniques for any particular graphics software application. If instructors wish to include a more in-depth introduction on the basics of how to use their particular graphics software, this would be a good place to insert such an introduction, so students are comfortable with the interface prior to beginning this lesson.
• With so many technical details to keep track of, students may be confused as to what the actual assignment is. Make it clear to students that when they have finished with this lesson, they will have six images: three large images and three thumbnail images.
• From the resources provided in this lesson, students learn that optimization is an important technique for reducing image files and making pages load faster. It's important to stress the importance of this, and to instill in students an appreciation for all the considerations that must go into graphics on the web. Graphics can make pages look more visually appealing, but they can also cause pages to download more slowly, cause accessibility problems, and distract users from more important content. All of these problems can be avoided if graphics are used carefully and wisely.

Lesson 4: Adding Images to Your Web Page

• Estimated time required: 60 - 90 minutes
• Link to student Lesson 4 page

Tips for Delivering This Lesson

• This lesson returns to HTML, allowing students to fit what they've been learning with graphics into the big picture of what the overall course is about: web design. Since it has been a few lessons since students worked with HTML, some students may need help with the HTML, particularly with making an image into a hyperlink.
• If students are excited about graphics, but not so excited about coding, this is a good opportunity to establish a positive association between the two. Creating a graphic may be cool, but the real magic happens when you add a small amount of code that enables that graphic to be displayed on your web page! Voila! Students' web pages have been transformed so that they now are more visually appealing!

Example Output

When this lesson is complete, students will have added a sample web photo album to their graphics.html file. In addition to this example, students' Lesson 4 content includes a link to another example (here's a direct link to the student example).