Module 3: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout

Module 3: Overview

This module serves as a capstone project for the all the lessons that preceded it. The basic task is a redesign of the personal web site using tables to control the layout of the web page. The key elements that students will layout on the home page of their personal web site are the focal image created in Unit 3, Module 2, Lesson 1 and the buttons they made in Unit 3, Module 2, Lesson 2. Students will also be expected to incorporate elements of good design learned in Unit 1 as well as basic HTML coding skills acquired in Unit 2.

The redesign will include the focal image with navigation buttons somehow curving around the focal image. The assignment lists in detail just how that combination should be accomplished.

Module 3: List of lessons:

• Lesson 1: Story Board (Lesson length 90 minutes)
• Description: Before actually coding the redesign of the Personal Web Site home page, students spend time story boarding to scale a sketch of how the navigation buttons will curve around the focal image and all other necessary elements of the page.
• Learner Outcome: The student will be able to-
• Demonstrate the ability to evaluate and assess effectiveness and success of the preliminary design, and whether the story board sketch meets design criteria.
• Accurately describe the layout of graphic elements in pixel units given a specified monitor resolution setting.
• Activities: Have students do the storyboard exercise.
• Handout/Resources Needed:
  • Storyboard Worksheet (to be completed prior to the Storyboarding Exercise),
  • graphing paper,
  • pencils,
  • straight edges,
  • "Step-By-Step Site Planner" is an article by Keith Reichley at webmasterbase.com which spells out in exhausting detail the preliminary steps a professional developer or development firm might undergo prior to coding a web site for a client.
• Suggested Assessment: Have students evaluate their own design using the evaluation tool developed in Unit 1.
• Lesson 2: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout (Lesson length 300 minutes)
• Description: This lesson isn't so much a lesson as it is the moment you turn students loose to complete the capstone project: the new look of the home page to their personal web site
• Learner Outcome: The student will be able to-
  • control the horizontal alignment within the table cell tag.
  • control the vertical alignment within the table cell tag.
  • span columns and rows of a table with the aid of an editor's wizard.
  • span columns and rows of a table without the aid of an editor's wizard.
  • nest a table within a table.
  • make elements of adjoining cells contact without gaps or borders.
• Activity: Using Notepad or Homesite, students construct the new look of the home page to their personal web site, according to the instructions in the Capstone Project: Revising the Home Page of the Personal Web Site Using Tables to Control the Layout.
• Handout/Resources Needed:
  • Notepad or Homesite
  • Storyboard and specifications (from Unit 4, Module 3, Lesson 1)
  • Web site evaluation tool created by the class in Unit 1
• Suggested Assessment: Encourage self assessment on the part of students using the web site evaluation tool created by the class. Direct students to use those traits which are appropriate for the task of evaluating the home page only as opposed to an entire web site.