Using Elements in Web Design

Lesson Content

• Lesson Plan Template:

  CTE Lesson Plan

• CTE Course Info and Benchmark Notes

  
  

  Program Title (as applicable): Web Development

  Course Title: Foundations of Web Design

  Course Number: 9001110

  Career Cluster: Information Technology

  CIP Number: 0511080140

  Course Type: Career Preparatory

  CTE Standard(s) and Benchmark(s):

  • 20.01 - Describe how tables are used in web design.
  • 20.02 - Discuss the advantages and disadvantages of incorporating tables in a webpage design.
  • 16.11 Identify the client and target audience needs, as well as the purpose of a website.

• Unit Outline

  
  

  This lesson is designed to be used with the case study, “Efficient Web Design.” See CPALMS resource ID# 210812.

• Career Connection

  
  

  Data management is an important skill to learn in a career preparatory course ad many fields in the Information Technology sector require software engineers and computer science analysts to apply thinking skills to effectively collect, organize, analyze, and present data.

• Learning Objectives

  
  

  Students will be able to:

  • Describe the use of tables on a business web page.
  • Discuss the advantages and disadvantages of incorporating tables versus other elements on a webpage for business purposes.
  • Present their sketch to illustrate their proposed use of an element on a webpage based on client needs.

• Prior Knowledge

  
  

  Students should be familiar with:

  • Basic web design elements (lists, definition, frames, images, box model, etc.)
  • Layout CARP Principles (Contrast, Alignment, Repetition, Proximity)
  • How to give an oral presentation.

• Guiding Questions

  
  
  • Which elements are best to create effective web pages?
  • How can choice of elements impact the efficiency of web design?

• Procedure

  
  

  1. To introduce the lesson, have students respond to the discussion question displayed on the board and/or online platform: What elements can you think of that help organize information on a business webpage?

  • Review with students as a whole group the use of basic elements of web design such as tables, lists, box models, and frames, as well as layout properties.

  2. Put students in small groups of 2 or 3. Allow time for students to collaborate and find examples of elements from websites. One of the examples will be of a table and students will choose another element reviewed in step 1.

  • Allow students to share their findings with the whole group.
  • If needed, show additional examples. See Teacher notes for more guidance on this step.

  3. Ask students to create a t-chart in their notebooks to consider the differences between using a table versus another element.

  • Ask students to share their ideas with the whole group. Record student responses on available technology.

  4. Distribute a copy of the case study, "Efficient Web Design," (CPALMS Resource# 210812) to each student. Allow students time to read the case study and discuss what is the best course of action for Molly.

  • Suggested discussion questions:
    • How does Molly determine which is the best element to use?
    • What are the client's website requirements?
    • How does the client's needs help with the website design?
    • As a website user, how would you want the information presented?

  5. Give each group a sticky note poster sheet (see Teacher Notes). Students will decide which element is the preferred choice among lists, tables, box models, and frames. Students will create a blueprint/sketch of the element for the new smoothie recipe as Molly’s father has requested. Students may research to create the smoothie recipe with its nutritional facts.

  • Remind students to pay close attention to the criteria that Molly’s father has explicitly mentioned in the case study.
  • Students will sketch the element on the poster as it would be displayed on a webpage.
  • Walk around the room and assist students when needed.

  6. When all teams have completed their poster, students will display their posters and present the element they selected along with their sketch of the new smoothie recipe to the class.

  • Each group must provide two reasons behind its decision as Molly’s ideal outcome.

  7. To bring the lesson to a close, distribute the exit ticket (see attachments) to students and display the questions on the board.

  • Exit ticket questions are:
    • What benefits do tables bring to webpage design?
    • What disadvantages does Molly have to consider using tables versus lists, box models, or frames?.

• Teacher Notes

  
  
  • Business webpages may be displayed to show students some examples of tables in web design: clothing websites, recipes, transportation schedules, etc.
  • To help students organize their sticky note poster sheet, create a sample sheet for students to use as a model.

• Optional

  
  

  Extension Ideas:

  • Students will display the smoothie recipe table using HTML/CSS in a code editor (see CPALMS Resource# 211201).