Lesson Plan
Course Title: Web Technologies
Session Title: Creating a Navigation Bar
Lesson Duration: Will vary depending on instructor
Performance Objective:
Upon completion of this assignment, the student will be able to create a navigation bar with
rollover buttons, drop-down menus, and active links that can function on a webpage.
Specific Objectives:
 Design a button using appropriate design principles
 Identify the various states of a button
 Construct a navigation bar with active links
 Preview and verify that navigation bar is working properly
 Export the navigation bar to appropriate format
Preparation
TEKS Correlations: 130.279 (c)

(1)(A) identify and demonstrate positive work behaviors that enhance employability and
job advancement such as regular attendance, promptness, attention to proper attire,
maintenance of a clean and safe work environment, appropriate voice, and pride in
work;

(1)(B) identify and demonstrate positive personal qualities such as flexibility, openmindedness, initiative, listening attentively to speakers, and willingness to learn new
knowledge and skills;

(1)(E) solve problems and think critically;

(2)(B) explain the key functions and applications of software programs;

(5)(C) identify, create, modify, and use available file formats such as text, image, video
analog and digital, and audio files; and

(7)(A) implement functional design criteria such as proximity, repetition, contrast,
alignment, color theory, consistency, image file size, and typography;

(7)(C) create web pages in accordance with current web standards using web
development skills such as version control, documentation, web application security,
validation, accessibility, and compatibility across multiple browsers and devices; and

(7)(D) demonstrate proper use of folder structure hierarchy.

(8)(C) use standard applications such as text-based editing programs, word processors;
and web authoring software.
Instructor/Trainer
IT: Web Technologies: Creating a Navigation Bar
Copyright © Texas Education Agency, 2013. All rights reserved.
1
References: Using your favorite internet browser, perform a web search on
 “Design Production Standard/Premium software”
 “Interactive Design for Navigation Bars”
 “Navigation Bar Tutorials”
Instructional Aids:
 Creating a Navigation Bar Presentation
 On Your Own – Creating a Navigation Bar Assignment Sheet and Rubric
Materials Needed:
 Design production standard/premium software
 Instructional aids
Equipment Needed:
 Projector for presentation and use of bitmap/vector editing application
 Computer lab
 Electronic area to turn in files for grading purposes
Learner
Students should have a basic understanding of bitmap & vector graphic editing interface and
drawing tools.
Introduction
MI
Introduction (LSI Quadrant I):
ASK, “Think of times you have surfed the internet. Can you describe different types
of navigation that are used on web pages?”
(Allow students time to share their answers. You may want to write their
answers on the board.)
SAY, “Today, we are going to design a button and then use that as our basis to
create a navigation bar.”
IT: Web Technologies: Creating a Navigation Bar
Copyright © Texas Education Agency, 2013. All rights reserved.
2
Outline
MI
Outline (LSI Quadrant II):
Instructor Notes:
I.

Review with students the
toolbar.

Review design principles.
Remind students to
consider principles when
choosing colors.

Explain steps to creating
navigation bar with the
presentation titled
“Creating a Navigation
Bar”.
II.
Review toolbar
A. Rectangle tool
B. Pointer tool
C. Text tool
Design a button with the rectangle tool and the
text tool
A. Use filters to enhance the appearance of the
button
B. Consider design principles as you create the
button (color contrast, readability)
C. Convert to a symbol (button)
D. Use the clone command to duplicate the
button
E. Change the text on each button
III.
Create pop-up menu
A. Add text and active link to button
B. Adjust the appearance of the pop-up menu to
match/complement initial button
IV.
Preview navigation bar in browser
A. Preview in browser command (F12)
V.
Export navigation bar
A. Export to html and images
VI.
Explain independent practice activity
A. Create own navigation bars
Application
MI
Guided Practice (LSI Quadrant III):
The teacher will demonstrate creating a button with text and the rectangle tool.
Students will also observe how to convert to a button symbol, clone the button, and
add a pop-up menu.
MI
Independent Practice (LSI Quadrant III):
Students will complete a navigation bar on their own for a fictitious website. The
Instructor should distribute the assignment description/rubric before students begin
assignment.
Summary
MI
Review (LSI Quadrants I and IV):
Q& A Session
Q: Why is using a navigation bar with pop-up menus a good alternative when
creating navigation for a website?
IT: Web Technologies: Creating a Navigation Bar
Copyright © Texas Education Agency, 2013. All rights reserved.
3
A: When you have a website with many sub-categories, the user can find
information more easily.
Q: What are the drawbacks to using a pop-up menu?
A: You may not have enough categories of topics to make a pop-up menu
worthwhile.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
Teacher will monitor student progress during independent practice, providing
assistance as needed.
MI
Formal Assessment (LSI Quadrant III, IV):
Teacher will grade students’ independent practice according to the rubric.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
Consider having students work on an electronic portfolio as they work on the design
production standard/premium software. Students could create a custom navigation
bar for their portfolio.
IT: Web Technologies: Creating a Navigation Bar
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: Web Technologies: Creating a Navigation Bar
Copyright © Texas Education Agency, 2013. All rights reserved.
5
On Your Own—Create a Navigation Bar Assignment
You have been asked to design a navigation bar for a club or organization at your school. You should create names for the
buttons as well as the drop-down menus. Don't worry about putting in active links at this time. This is only going to be used
as a sample for them to look at and critique. Export the navigation bar as html and images when you have it completed.
The sponsor would like to see at least four buttons with two of them having drop-down menus with at least three choices.
Be sure to use a color scheme that will look good on the school’s website. Your assignment will be evaluated with the rubric
below.
Grading Rubric
Criteria
1. Navigation bar has at
least four buttons
2. Two buttons have dropdown navigation
3. Both drop-down menus
have at least three items
4 points
3 points
At least 4 buttons
created
2 buttons have
navigation
Both drop-down
menus have 3
items
School colors and
various shades of
the colors were
used
1 missing button
5. Font is easy to read
Good choice of
font, easy to read
6. Topics are appropriate
for club/organization
All buttons are
appropriate to topic
7. Drop-down navigation is
appropriate for
club/organization
All drop-down
topics are
appropriate with
topic
8. All buttons work
correctly, each state is
clearly different and the
button does not
disappear at any time
(up, over, down, over
while down)
9. Navigation bar was
exported correctly
4. Color scheme
complements well with
the school website
2 points
2 missing
buttons
1 point
3 missing
buttons
Only 1 button
has navigation
Missing 3 items
Missing 1 item
Missing 2 items
Obvious attempt
to complement
school colors
Some attempt
to complement
school colors
Obvious attempt
at trying to pick
an appropriate
font
1 button is not
appropriate to
topic
Color scheme is
way off; does
not compliment
the school
colors at all
Very hard to
read, poor
choice
2 buttons are
not appropriate
to topic
3 buttons are
not appropriate
to topic
1 drop-down topic
is not appropriate
with topic
2 drop-down
topics are not
appropriate
with topic
3 drop-down
topics are not
appropriate with
topic
All buttons and
drop-down menus
work correctly
1-2 states are not
different or the
button disappears
3-4 states are
not different or
the button
disappears
5-6 states are
not different or
the button
disappears
Images folder, css
styles, java, and
html page were all
created
1 element is
missing
2 elements are
missing
3 elements are
missing
0 points
Not done
Not done
Missing 4
or more
items
None of
the
buttons
make
sense with
topic
None of
the dropdowns
make
sense with
topic
7 or more
states are
not
different or
the button
disappears
Not done
10. Student remained on
task
Not done
Remained focus
Total Points
/40
IT: Web Technologies: Creating a Navigation Bar
Copyright © Texas Education Agency, 2013. All rights reserved.
6