Module 6: Page Layout Techniques

Overview

In this module, students will learn the basics of using CSS to control the position of elements on a web page.

Lesson 1: Page Layout with CSS

• Estimated time required: 120 minutes
• Link to student Lesson 1 page

Tips for Delivering This Lesson

• This lesson is very challenging. The online reading material, CSS Positioning 101 from A List Apart is a very informative article, but it's long and contains a lot of detail. Fortunately it's organization is conducive to having students read a section at a time:
  1. Static and relative—nothing new here (and all content prior to that section)
  2. Absolute—anywhere, anytime
  3. Fixed—always there (and all content that follows that section)
  Each section includes several examples, which could be viewed and discussed as a class after students have read that section.
• The second activity includes several questions to assess student reading comprehension. As in earlier lessons, these questions could be adminstered electronically using email or a web-based quiz, survey, or assessment tool.
• As the lesson progresses, the coding can get a bit challenging. Unless you have strong skills with CSS positioning, it might be safest to use the example output (see below) and allow students to replicate that model by studying and copying the example source code.

Example Output

When this lesson is complete, students will have repositioned divs at the top of their index.html file by applying layout-related CSS in their external style sheet.

Lesson 2: Stylizing a Navigation Menu with CSS

• Estimated time required: 120 minutes
• Link to student Lesson 2 page

Tips for Delivering This Lesson

• The steps in this lesson are challenging, but not as challenging as those in Lesson 1.
• The activities in this lesson proceed in step-by-step fashion to change the appearance of the navigation menu. Students should follow each step one at a time, then save and refresh to view the results of their change. This will help them to understand the results of each of the steps. It can also be helpful to discuss each step as a class. Students might be more interested in knowing how to produce a particular result than why the CSS code produced that result, but it's important to ask "Why?" so students will develop better understanding.
• As noted in the instructions in the Activities section, all of the CSS selectors look very similar to one another, but they are in fact unique, referencing different elements. For example, div#navigation ul is the selector for the unordered list, whereas div#navigation ul li is the selector for each list item inside of that unordered list. It can be helpful to analyze these selectors as a class, helping students to look closely at all the parts and think about the relationships between elements.

Example Output

When this lesson is complete, students will have stylized the navigation menu within their external CSS file. The results should be visible from any page on their site, including index.html.