Lesson Plan
Course Title: Web Technologies
Session Title: Designing A Web Page Layout with a
Bitmap & Vector Graphic Editor
Lesson Duration: 3 hours
Performance Objective:
Upon completion of the lesson, students will be able to create a graphical webpage
layout, slice the image, and export it as a webpage template.
Specific Objectives:
Students will be able to open and create new images.
Students will understand proper design criteria such as layout, proximity,
contrast, and repetition.
Students will be able to use proper design criteria in the design of a webpage
layout.
Students will be able to appropriately slice an image into various parts to be
used in a web page.
Students will be able to save a sliced image as a webpage.
Preparation
TEKS Correlations:
• (7)(A) Implement functional design criteria such as proximity, repetition,
contrast, alignment, color theory, consistency, image file size, and typography;
•
(7)(D) Demonstrate proper use of folder structure hierarchy.
Instructor/Trainer
References: Content Developer Knowledge
Instructional Aids:
• Online Search Tools Slide Presentation
• Student Files Folder
• Lab Exercise
• Quiz & Key
Materials Needed:
Each student will need
• Copies of the Lab Exercise
• Copies of the Student Files Folder
• Copies of the Quiz
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
1
Equipment Needed:
Each student will need a computer with Internet access and a professional bitmap &
vector graphic editing application.
Learner:
Students should possess prior knowledge of basic HTML and tables for this lesson.
Introduction
MI
Introduction (LSI Quadrant I):
Show the students the completed SeaSide surf website. Point out to the
students that the design was created from a single image that was sliced up.
Also, point out the navigation. Explain that it is an example of an image map.
Have students open their Professional Bitmap & Vector Graphic Editor
Application on their computers. Students should have a copy in the Student
Files Folder.
Outline
MI
Outline (LSI Quadrant II):
I.
Instructor Notes:
 The instructor should
have a printout of the
Presentation in Notes
Pages format.
Design concepts
A. Aesthetics
B. Proximity
C. Alignment
D. Repetition
E. Contrast
II. Using a bitmap & vector graphic editor to
create a web page layout.
A. The web features
B. Image maps

Students should have
their professional
application open at this
point.
III. Image Maps
A. Image map tools
B. Hotspots
IV. Slicing an image & exporting as a web page
V. Activity
VI. Lesson Quiz
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2
Application
MI
Guided Practice (LSI Quadrant III):
Students should follow the presentation to create their web page layout,
image map, and website layout, shown in the introduction.
MI
Independent Practice (LSI Quadrant III):
Each student will need a copy of the Lab Exercise. Students should follow
the instructions to create the web page design and image map. Students
should export the page design as a web page.
Summary
MI
Review (LSI Quadrants I and IV):
The teacher should point out that using a graphic editor is common for web designers.
Point out the advantages to designing a web page layout in a graphic editor, as well as
the limitations, such as the forded table layout, and difficulty in making changes to the
navigation and design.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
As students are working on the Lab Exercise, the instructor should observe
students’ progress to assure they understand the concepts.
MI
Formal Assessment (LSI Quadrant III, IV):
1. Upon completion of the Lab Exercise, the teacher should compare the
students’ work to the completed lab provided with this lesson.
2. Following the activity, the teacher should give the students the Quiz.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
The lesson may be extended by having the students design their own layout and
creating a complete website from their layout. The teacher may provide a storyboard
for a site that the students should design, or the teacher might have the students
plan their own site and create the storyboard.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3
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,
KW L 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: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Activity
For this activity, you will create a web page template with an image map navigation. You will need some
knowledge of HTML in order to complete this activity.
1. Create a new folder on your student drive or computer. Name the folder Activity.
2. Open your professional Bitmap & Graphic Editing Application on your student computer.
3. Click on File and select New.
4. From the New Document window, enter the
following settings:
a. Width: 600
b. Height: 800
c. Canvas color: White
5. Click OK to create the blank document.
6. Select the Rounded Rectangle tool from your Toolbox.
7. Use the Rounded Rectangle tool to draw a large
rounded edge rectangle onto your canvas.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5
8. On the Properties panel at the bottom, set the fill
color to #009900.
9. Move to the far right side of the Properties
panel and click on the Filters button. Select
the Drop Shadow option. A shadow should
appear behind the rounded edge rectangle.
10. Select the Rounded Rectangle tool again from the Toolbox.
On the properties panel, set the fill color to
#CCFFFF.
11. Draw a rounded rectangle
inside the original rectangle.
Start about ¼ of the way
down so that your rectangle
looks similar to the example
here.
12. After placing your second
rectangle, center the inside
rectangle horizontally.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6
13. From the Properties panel, select a fancy
font style of your choice.
14. At the top of the dark green rectangle,
type the heading “Premier Landscaping”.
Center the heading horizontally. You
should have enough space between the
heading and the light green rectangle to
add a navigation bar.
Creating the Navigation Bar
15. From the Properties panel, select the Arial font. Set the size to 16.
16. Type the menu items shown below and center them horizontally and vertically between the heading
and the light green rectangle.
Home
Services
Care/Maintenance
Contact
17. From the Web section of the Toolbox, select the Rectangle Hotspot tool.
18. Select an area around the word Home on your image. A light green shade should appear over the
word. This shade is only a selection and will not appear on the image.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
7
19. From the Properties panel at the bottom, enter index.html in the link field and Home Page in the Alt:
field.
20. Select the Rectangle Hotspot tool again from the Toolbox and select the Services menu item.
21. In the Properties panel at the bottom, enter services.html into the link field and Services in
the Alt field.
22. Select the Rectangle Hotspot tool again and select the Care/Maintenance menu item.
23. In the properties panel, enter care.html into the link field and Care and Maintenance into the Alt field.
24. Select the Rectangle Hotspot tool once more and select the Contact menu item.
25. In the properties panel, enter contact.html into the link field and Contact Us in the Alt field.
Each of the menu items should now be shaded over, indicating that they are clickable regions on the image.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
8
Finishing the Design
26. Select the Crop tool from the Toolbox.
27. Using the Crop tool, select the area around the dark green rectangle. Leave a little of the
white border around the rectangle. Anything not selected will be cut away.
28. Double click in the center of the selected area to cut away the excess white space around the
image.
29. From the File menu, select Save As…
30. Save the image as pageTemplate.png to your Activity folder.
31. From the Web section of the Toolbox, select the Slice tool.
32. Using the Slice tool, select the inside of the light green triangle from rounded corner to rounded
corner without selecting any of the dark green.
33. The region you selected should appear in a darker shade of green with guidelines going out from
it that indicate how the image will be sliced.
34. Click on the Disc icon or press Ctrl S on your keyboard to save your design once more.
35. From the File menu, select Export.
36. Navigate to your Activity folder.
37. Set the filename to index.html.
38. The Export should be HTML and Images.
39. Click on the Save button.
The image will be sliced and placed into the Activity folder. A web page will also be created that shows the
image reassembled.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
9
40. From your file manager on your computer, navigate to your Activity folder. Make sure your file view
settings are set to show thumbnails. You should see each of the slices, the original image, and a web
page.
41. Make note of the name of the section slice that you selected. In this case, it is named index_r2_c2.gif.
The names are references to their location in the table on the web page (Row 2 Column 2). This is the
image we want to remove from the table.
R2c2.gif
42. Double click on the index.html folder to view the assembled version in your browser.
43. Open index.html in your text editor.
44. Locate the table cell with the image we want to remove.
45. Remove the image within that cell and set the background color (bgcolor) of the cell to #ccffff. Add
the v-align attribute with a value of top to the td tag. In place of the image tag that you removed,
type “Content Area”.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
10
46. Resave the file and refresh your
browser to see an updated version of
the page. Your version should look like
the example shown here.
47. Switch back to your text editor. From
here, you can change the title of the
page or center the table on your page.
Content Area
48. After you have completed any
additional changes, resave the file.
Also, save it again under the following
additional filenames:
a. services.html
b. care.html
c. contact.html
49. Click on each of the links at the top of your pages and make sure they all work. If any do not work, you
will need to correct the error in the HTML code.
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
11
NAME:
DATE:
Lesson Quiz
Select the best answer choice for each of the following questions.
1. A web page’s visual appearance is often referred to as what?
a. Design
b. Style
c. Aesthetics
d. Structure
2. The spacing relationships between various objects on a web page are referred to as what?
a. Aesthetics
b. Proximity
c. Alignment
d. Contrast
3. The horizontal positioning of objects on a web page is referred to as what?
a. Contrast
b. Structure
c. Proximity
d. Alignment
4. The degree of difference of the various objects on a web page is referred to as what?
a. Structure
b. Contrast
c. Aesthetics
d. Design
5. A single image on a web page with multiple clickable regions is called what?
a. Hotspot
b. Graphic
c. Image Map
d. Link
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
12
6. A clickable region on an image placed onto a web page is called what?
a. Hotspot
b. Graphic
c. Image Map
d. Link
7. Which button is identified by chain?
a. Link
b. Image Map
c. Hotspot
d. Slice
8. Which toolbar button is identified by a knife or blade?
a. Link
b. Graphic
c. Hotspot
d. Slice
9. What does the slice tool do?
a. It allows you to trim an
image.
b. It allows you to cut your image into different parts.
c. It reduces the size of the image.
d. It cuts off the edges of an
image.
10. What tool is needed to edit the content on the webpage after exporting the image?
a. A graphic editor
b. A text editor
c. A web browser
d. A video editor
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
13
Lesson Quiz - Key
Select the best answer choice for each of the following questions.
1. A web page’s visual appearance is often referred to as what?
a. Design
b. Style
c. Aesthetics
d. Structure
2. The spacing relationships between the various objects on a web page are referred to as what?
a. Aesthetics
b. Proximity
c. Alignment
d. Contrast
3. The horizontal positioning of objects on a web page is referred to as what?
a. Contrast
b. Structure
c. Proximity
d. Alignment
4. The degree of difference of the various objects on a web page is referred to as what?
a. Structure
b. Contrast
c. Aesthetics
d. Design
5. A single image on a web page with multiple clickable regions is called what?
a. Hotspot
b. Graphic
c. Image Map
d. Link
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
14
6. A clickable region on an image placed onto a web page is called what?
a. Hotspot
b. Graphic
c. Image Map
d. Link
7. Which button is identified by chain?
a. Link
b. Image Map
c. Hotspot
d. Slice
8. Which toolbar button is identified by a knife or blade?
a. Link
b. Graphic
c. Hotspot
d. Slice
9. What does the slice tool do?
a. It allows you to trim an
image.
b. It allows you to cut your image into different parts.
c. It reduces the size of the image.
d. It cuts off the edges of an
image.
10. What tool is needed to edit the content on the webpage after exporting the image?
a. A graphic editor
b. A text editor
c. A web browser
d. A video editor
IT: Web Technologies: Web Animation: Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
15