Module 4: Creating a Web Page Banner

Overview

In this module, students will learn how to utilize selection tools to isolate parts of an image. They will then learn how to apply layer effects and blend objects on different layers to create digital collages. Using these skills, students will apply design concepts from Unit 1 to create a web banner for their portfolio site.

Lesson 1: Selection Tools

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

Tips for Delivering This Lesson

• Selection tools can be fairly complicated, so you may want to demonstrate how to use these features with your graphic software so students can observe first, than practice what they've observed.

Lesson 2: Layer Effects and Blending

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

Tips for Delivering This Lesson

• This is a culminating activity that incorporates many of the skills found in this unit. If students are able to accomplish this task fairly independently, then they have a good foundation of basic graphic design skills.
• This lesson also provides a significant landmark in the course as students' portfolio pages are beginning to come together as a cohesive website.
• This lesson provides a good opportunity to refer back to the earlier lesson on page layout with CSS, and particularly the companion page Page Layout: Overall Design Strategies. In that lesson, students learned about the difference between fixed width and liquid layouts, and pros and cons of each. Ultimately their decision as to which type of layout to use was strongly influenced by the fact that their design would include a 720 pixel-wide banner image. After the banner image is added to the site, an interesting supplemental activity would be to have students play around with their page layout. For example, what happens if they change their body width to a value that's smaller than 720 pixels? What happens if they add img { width: 100%; } to their style sheet? Now that they have a banner image in place, playing with these properties can help them to better understand the differences between fixed and liquid layout.
• When students add banners to their home page, the banner might contain the same or similar information that's contained within the main heading on the page. If this is the case, an interesting mini-lesson would be to teach students how to hide the main heading, without actually deleting it. It's important to keep the heading, even if it's invisible, because it adds structure to the document (which is especially helpful for blind users, as well as for search engine optimization). CSS provides properties that hide content (specifically, visibility:hidden and display:none). However, these properties hide content from everyone, including screen readers and (possibly) search engines, which is not what we want. There are two CSS solutions that are in widespread use on the Web. The first is to position the heading well off-screen where no visual user can see it, like this:

  .hidden {
    position:absolute;
    left:-10000px;
    width:1px;
   }
  

  Another solution is to use the CSS clip property, which clips any absolute positioned block element, showing only a rectangular area of that element. The rectangle is defined using its top, left, bottom, and right coordinates respectively. If each of those is assigned a value of 1px, the rectangle has no width nor height, therefore the entire element is invisible.:

  .hidden { 
    position: absolute; 	  
    clip: rect(1px, 1px, 1px, 1px);
  }
  

Example Output

When this lesson is complete, students will have added a banner to the top of every page, as seen on this example index.html file.

Lesson 3: Background Images

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

Tips for Delivering This Lesson

• Students typically enjoy adding background images to their site. They may need to be reminded that background images should enhance the site, rather than provide a distraction. Often the most effective background images are those that are very subtle.
• The lesson teaches students how to add a background image to the body. However, any block element can have a background. Time permitting, students could spend some time adding backgrounds to other elements as well, such as the various <div> elements that comprise their home page.
• This lesson provides a good opportunity to explore the various designs at CSS ZenGarden. Most of these designs make extensive use of background images.
• This is pointed out in the lesson, but bears repeating: In the background-image property, the URL to the image file is relative to CSS file. If a background image isn't displaying, more often than not the path is the culprit.

Example Output

When this lesson is complete, students will have added a CSS background image to the site by changing the external style sheet. The results can be seen in this example index.html file.