Jennifer Handley
Instructional Design Unit: Creating a Personal Web Page
Audience: Students in EME 2040, Introduction to Educational Technology
Goal: The EME 2040 student will create a personal web page using Netscape Composer.
Required Time: 4 hours (in class) 4-5 hours (home)
Objectives:
1.0: The EME 2040 student will be able to state 2 reasons for creating a web page so it has an
authentic purpose.
1.1: The EME 2040 student will be able to state one reason for creating a web
page related to the ease in accessing information electronically.
1.2: The EME 2040 student will be able to state one reason for creating a web
page related skills needed for the workplace.
2.0: The EME 2040 student will be able to define the following key terms as they relate to web
pages: URL, FTP, and HTML
3.0. The EME 2040 student will be able to use at least 1 graphic image in their web page in
Netscape Composer.
3.1: The EME 2040 student will be able to differentiate between a GIF and a JPEG file
format so that they utilize the correct format when inserting images into an web page.
3.2: When using a cartoon-like image in designing web pages, the student will be able to
insert GIF images.
3.3: When using a photographic image in designing web pages, the student will be able
to insert JPEG images.
4.0: The EME 2040 student will be able to create a web site that makes use of links for
navigation purposes within Netscape Composer.
4.1: The EME 2040 student will able to create at least one working external link in
Netscape Composer that connects his or her personal page to another web outside of his
or her site..
4.2: The EME 2040 student will able to create a working email link in Netscape
Composer so that he or she can be contacted electronically through email by a person
looking at the web page.
5.0: The EME 2040 student will be able to use the principles of good web page design when
creating a web page in Netscape Composer.
5.1: The EME 2040 student will be able to state the principles of good design (CRAP –
Contrast, Repetition, Alignment, and Proximity).
5.2: The EME 2040 student will be able to describe the principles of good design (CRAP
– Contrast, Repetition, Alignment, Proximity) in one sentence for each principle.
5.3: The EME 2040 student will be able to use contrasting colors when selecting their
background and text on the web page.
5.3.1: The EME 2040 student will be able to format the text in Netscape
Composer by changing the color, size, and font so that it is easily readable by a
user.
5.3.2: The EME 2040 student will be able to change the background on
the web page in Netscape Composer so that it contrasts with the text.
5.4: The EME 2040 student will be able to use repetition in their web page in Netscape
Composer so that the color and text are consistent throughout.
5.5: The EME 2040 student will be able to use the same alignment throughout the web
page in Netscape Composer.
5.6: The EME 2040 student will be able to use proximity to ensure that graphics and text
have proper spacing on the web page in Netscape Composer so that graphics and text are
unified or tied together.
6.0 The EME 2040 student will be able to preview their page using Netscape Navigator
6.1: The EME 2040 student will be able to preview their page to ensure that all links are
working.
6.2: The EME 2030 student will be able to preview their page using Netscape Navigator
to ensure that all graphics are showing up.
6.3: The EME 2040 student will be able to preview their page to make sure that it looks
the way they want it to.
Learner Characteristics:
Learner
Characteristic
Student 1
Student 2
Student is extremely
respectful of others
and very tolerant of
different views. She is
very cooperative and
comes from a family
that highly values
education. Both of her
parents have Masters
degrees.
This student has never been Student has traveled
outside of Gainesville, hates around the world,
to read, and has poor study reads a wide variety of
skills.
books, and has
excellent study skills.
Student 3
Social Background Student is usually respectful
of peers and instructor, but
not always. His comes from
a family that does really
value education and is the
first in his family to
graduate high school.
Student is
respectful of peers
and instructor, but
not always tolerant
of other’s views.
Her family values
education.
Experiential
Background
Student has
traveled some (in
the state of
Florida), reads
some, and has
decent study skills.
Developmental
Level
Poor memory, slow to learn
Motivation
Does not show initiative,
not curious, not enthusiastic
about learning
excellent memory,
extremely quick to
learn, and easily
integrates ideas
enthusiastic about
earning, shows
initiative, persistent
Content
Knowledge
Learning Style
Possesses Prerequisites
Mastered skills
Influenced by peers, listener Influenced by
of words, needs visuals
authority, reader of
words
Good memory,
learns fairly
quickly, and is
rational
shows some
initiative, likes to
learn, somewhat
curious
Possesses
Prerequisites
Influenced by
peers, reader of
words, learns better
with visuals
Diagnostic Evaluation
Please rate yourself on the following items using the scale below by circling the
appropriate number.
1. Novice: I do not know how to do this.
2. Average: I have learned this concept or done this before, but would need some help to
do it again.
3: Expert: I know how to do this and could teach others about it.
Goal I know how to create a web page.
1.1
I can state a reason for creating a web page related to the ease in
accessing information
1.2
I can state a reason for creating a web page related to future skills
needed for the work force.
2.0
I can define key terms related to web pages, including URL,
FTP, and HTML
3.1
I can differentiate between a GIF and a JPEG.
3.2
I can insert a GIF image into a web page.
3.3
I can insert a JPEG image into a web page.
4.1
I can create an external link in a web page.
4.2
I can create a mailto link in a web page.
5.1
I can state the 4 principles of good web page design.
5.2
I can describe the 4 principles of good web page design.
5.3- I use the 4 principles of good web page design.
5.6
5.3.1 I can change the background color in a web page.
5.3.2 I can format the text in a web page by changing the font, size,
and color.
6.0
I know how to preview my web page on the Internet.
1 2 3
1 2 3
1 2 3
1 2 3
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
3
3
3
1 2 3
1 2 3
1 2 3
Formative Evaluation
Objective Questions to ask during observation
1.0
2.0
3.1
3.2
3.3
4.1
4.2
5.1
5.2
5.3
5.4
5.5
5.6
What is a web page? Why do we create a web page? What does it allow us to do?
What does putting our web page on the web allow others to do? What are you
gaining from creating a web page? How is it relevant to your future? To your work?
What does URL stand for? What is an example? What is it? What do we use it for?
Why do we need to know it? Can you show me the where URL is on this Internet
Browser that you have open?
What does FTP stand for? What is an example of FTP? What do we use it for? Why
do we need to know it?
What is HTML? What is an example? What is it? What do we use it for? Why do we
need to know it?
What can you differentiate between a JPEG and a GIF? How are they different from
each other? What is a GIF? What is a JPEG? Are you going to save that image as a
GIF or a JPEG? Why?
I see that you are having trouble inserting that image. Is that image a GIF or a JPEG?
Since it is a cartoon-like image, what kind of image must it be? Therefore, what will
its file extension be? How was that image saved? Where did you save that image to?
Let me see the steps that you are taking to insert that cartoon-like image into your
page.
I see that you are having trouble inserting that image. Is that image a GIF or a JPEG?
Since it is a photographic image, what kind of image must it be? Therefore, what will
its file extension be? How was that image saved? Where did you save that image to?
Let me see the steps that you are taking to insert that photographic image into your
page.
What does external mean? Therefore, what is an external link? How will you insert
an external link? Why do we use external links? How can we navigate to another
site outside of our own? What is that called?
What is email? What does it allow us to do? What is an email link? Why would you
want to include an email link on your web page? What steps should you take to
create one?
What are the principles of good web page design? Why would we want to use them
on our web page? What are the benefits to using them?
Can you describe the four principles of good web page design?
How are you using the principle of contrast in your page? It’s really difficult for me
to read your text. How might you change the text so that it is easier to read? You are
not demonstrating the principle of contrast – how can we fix that? Now that you’ve
changed your text, what else can you change to ensure that you are using both these
principles? OR I’ve noticed that you don’t have a background color on your page.
What steps can you take to change the background color?
How are you using alignment throughout your web page? Why should we you
alignment. What alignment are you using?
How are you using repetition in your web page? Why should we use repetition?
How are you using proximity in your web page? That text seems to be very close to
the graphic on your page – how can we make them unified without being too close
together?
6.1
6.2.
6.3
How can we preview your site to make sure that the site to make sure the links
work? What should we do if the links don’t work?
How can we preview your site to make sure that the graphics are showing up? What
should we do we don’t see the graphics? What should we check?
How can we preview your site to make sure it looks the way we want it to? What
should we do we don’t like the way that it will look on the web? What can we
change?
Teaching/Learning Activities – Creating a Personal Web Page
Prerequisite Computer Skills:
•
Turning the Computer on
•
Logging in
•
Saving files on the
computer
•
Highlighting text
•
Inserting images
•
Resizing images
•
Formatting text
•
Using toolbars on
programs
•
Using a mouse (to
navigate, double-clicking,
etc.)
•
•
•
•
•
•
•
•
Opening Computer
programs
Using a Search Engine on
the World Wide Web
Typing
Email
Saving into a folder
Concept of links
Aligning Text/images
Using an Internet
Browser (such as Internet
Explorer or Netscape
Navigator)
Lab 1: 50 minutes
Type: Large Group Presentation
Materials:
•
Computer with Netscape Composer
•
Computer Projector
•
PowerPoint Presentation on web-related terms
1.0: (15 minutes) Begin the unit on creating a personal web page by asking students, “
what is the purpose for creating web pages?” The responses may vary. Get students to
focus A) how they relate to the ease in accessing information electronically and B) how
they relate to learning skills needed for the work place
•
What is a web page?
•
Why do we create a web page?
•
Why might we create a personal web page?
•
What does a web page allow us, the creators, to do?
•
What does putting our web page on the web allow others, the users, to do?
•
•
What are you gaining from creating a web page?
How is it relevant to your future? To your work?
2.0: (35 minutes) Introduce the following terms using a PowerPoint presentation,
encouraging students to take notes:
A) URL: stands for Uniform Resource Locator. The URL is the electronic
address to a particular web site on the Internet. For example, www.ufl.edu is
the URL of the web site at the University of Florida. Questions that may be
to gage student understanding of this concept:
o What does URL stand for?
o What is an example?
o What is it?
o What do we use it for?
o Why do we need to know it?
o Can you show me where the URL is on this Internet Browser that you
have open?
B) FTP: File Transfer Protocol: FTP a program that enables you to transfer
files from one computer to another across the Internet. The FTP that we will
eventually use to upload our files is called “Fetch.” Questions that may be asked
if students are having difficulty understanding the concept:
o What does FTP stand for?
o What is an example of FTP?
o What do we use it for?
o Why do we need to know it?
C) HTML: Hypertext Markup Language: The language of codes and links
used to create web pages. Most programs now, called HTML editors, (such
as Netscape Composer, Macromedia Dreamweaver, and Adobe GoLive),
eliminate the need to learn HTML to publish to the web (because the
programs put it in code for you). Show example of code in actual web page,
so that students get a concrete idea of what HTML is. Explain to students
that people used to have to learn HTML code to publish to the web, but the
HTML editors now do it for you.
Questions that may be asked to probe student understanding:
o What does HTML stand for?
o What is HTML?
o What is it used for?
o Why do we need to know what HTML is?
Lab 2: 50 minutes
Type: Large Group Presentation, Small Group Interaction, and Independent Study
Materials:
• Computers with Netscape Composer (enough for all students)
•
•
•
•
Compute projector
PowerPoint presentation on image and links
Example GIF image
Example JPEG image
Large Group Presentation: 30 minutes
3.0: Indicate that several image formats have been developed over the years to serve
various purposes required by different computers, operating systems, or image types.
Examples are GIFS, JPEGs, BMPs, PDFs, and PICTs, though there are others. Each
image type has its own file extension that specifies what kind of file it is. Examples of
file extensions: BMP=.bmp, JPEG=.jpg Many web sites contain graphic images on
them, such as cartoons or photographs. Cartoon images are known as GIFs and
photographic images are known as JPEGs. The students’ personal web page much
include at least one graphic image of their choosing. Using a PowerPoint Presentation,
differentiate between a GIF and a JPEG, encouraging students to take notes on the
content for future reference:
•
•
GIF: Stands for Graphic Interchange Format. Used for drawn images,
illustrations, clip art, or animations. Extension: .gif
JPEG: Stands for Joint Photographic Experts Group. Used for photographs.
Extension: .jpg
Discuss how each of these images is saved, as it is modeled on computer-projected
screen.
“When you want to save a cartoon-like image to use on your web page (show a cartoon
image on a web site that will be saved), click on the image that you want to save and hold
down on the mouse until a menu appears (for a Macintosh Computer). Scroll down to
“save this image as” and name the image any name you wish as long as it has the
appropriate file extension (.gif or .jpg), so that the computer knows that kind of file it is.
It can be saved onto the desktop or onto a zip disk.” When the students are in the
computer lab, they should be reminded to save to their zip disk, so that the image is saved
if the computer freezes and has to be shut down (it erases everything on the desk top each
time it is shut down). Additionally, students have previously learned the importance of
saving all of their files for a project into one folder. They should title this folder personal
(for personal page) and put all of their images (and files) into this folder.
“If you are saving a cartoon image, we would want to save it as a GIF, which has the
extension: .gif
Example:
This would be saved as operaman.gif
When you want to save a photographic image to use on your web page (show them a
photograph on a web page that will be saved), click on the image that you want to save
and hold down on the mouse until a menu appears. Scroll down to “save this image as”
and name the image accordingly with the proper file extension. Since it’s a photographic
image, we would want to save it as a JPEG, which has the extension .gif
Show students following example on computer projector.
Example:
Since this is a photograph, it would be saved as jen.jpg”.
Questions that may be asked to gage their understanding of JPEGs and GIFs:
D) How can you differentiate between a JPEG and a GIF?
E) How are they different from each other?
F) What is a GIF?
G) What is a JPEG?
Demonstrate on computer projector how to actually insert images into Netscape
Composer. Tell students that when they have an image that they want to insert from their
zip disk, (they should have Netscape Composer open) first click on the area of the page in
Netscape Composer that they want it to appear. From the Insert menu at the top of the
screen, click on image (to insert the image onto the page). Then, click on Choose File.
Select the image that they want to insert from their zip disk and click ok. The image
should now be on the page.
Small Group Interaction: 20 minutes
The students will be creating a practice web page in lab in pairs over the course of three
labs. For 20 minutes during this lab lab, the students will work with a partner to practice
saving and inserting images. As the directions are given, I will be modeling them on the
computer projector. They can save images off any web of their choosing, but I will
suggest that they go to www.google.com, which actually allows a person to search in an
image directory. When the search screen pops up in Google, they will click on “images,”
which allows them to find cartoon-like and photographic images on the web. They can
then search various images using keywords. I will suggest that they try something simple
at first, such as dog or cat. They are welcome to use other keywords, if they feel
comfortable doing so. They should find at least two GIF images and two JPEG images
and properly save them on their zip disk or desktop. They will then insert them into a
blank composer page as I modeled in class. Remind students that as they already learned,
just like text, images can also be aligned to the left, right, or center. Students also
previously learned how to resize images, so they can make them bigger or smaller as
needed. Remind students to save their web page frequently as personalpractice.htm in the
personal folder on one of the students’ zip disks.
Questions that may be asked when students are having difficulty saving an image:
• I see that you are having trouble inserting that image. Is that image a GIF or a
JPEG?
• Since it is a cartoon-like image, what kind of image must it be? Therefore, what
will its file extension be?
• Since it’s a photographic image, what kind of image must it be? Therefore,
what will its file extension be?
• How was that image saved?
• Where did you save that image to?
• Let me see the steps that you are taking to insert that image into your page.
Independent Study: 1-2 hours total - Assign the following:
1) Students should find and save onto their zip disk in the personal folder at
least one image to insert onto their web page. They are welcomed and
encouraged to use more than one image and to incorporate both GIF
(cartoons) and JPEG (photographic) images. After they have saved their
graphics, they should insert them onto a new web page in Netscape
Composer (30-45 minutes) They should save the page into the personal
folder as personal.htm (this will become their personal page that they will
turn in to be assessed).
2) Students should begin writing the personal content that they want to convey
on their web page. This will be done completely outside of class and can
include whatever the students want to share on the World Wide Web (could
relate to interests, family, friends, etc.) (1-2 hours total)
Lab 3: 50 minutes
Type: large group presentation, small group interaction, independent study
Materials:
• Computers with Netscape Composer
• Computer Projector
• PowerPoint Presentation on links
Have students open their web pages. Check each student’s page to make sure that they
have at least one image and that it works when previewed on the web.
Large Group Presentation: 25 minutes
4.0: Introduce to students the concepts of links by asking them what links are used for on
the Internet. Various responses should be expected, such as “to connect to another web
page,” “to connect pages within one site together,” and to “provide a way for a user to
contact the site by email.” There are three types of links, which will be projected onto
the PowerPoint screen by a computer projector
• Internal: a link within a web page that links one page to another within the site.
• External: a link within a web site that links a one page to another page outside
of the site.
•
Email: an HTML command that creates a link that brings up an email address
in the user’s default email program.
Show students an example of each type of link on instructor’s personal web page. Tell the
students that since this is the first web page that we are making for the class, the students
will not be learning how to do internal links just yet, because we don’t have other pages
to link to within our site right now. The students will be creating at least one external link
of their choice to another page on the World Wide Web on our web page. They will also
be creating an email link so that someone looking at the page can contact them
electronically.
Show students using Computer projector how to make an external link in Netscape
Composer: 1. Write the text that you want to link something to. So, if you wanted link to
the University of Florida Web site, you might type “University of Florida,” “UF,” or “Go
Gators!” 2. Highlight the text that you want to link to.3. Go to the toolbar at the top of
Netscape Composer to Insert and select link from the Insert menu. 4.Insert the entire
URL: http://www.ufl.edu. (Tip: This can be typed out, but it’s easier to copy and paste it
directly from the Internet to lessen the chance of making a mistake in typing the URL
out.). 5. Click OK.
Show students how to make an email link in Netscape Composer. 1. Write the text that
you want to link to. You might write your name (i.e. Jennifer Handley) or “Email me!” 2.
Highlight the text that you want to link to. 3. Go to the toolbar at the top of Netscape
Composer to Insert and select link from the Insert Menu. 4. Insert the following
command: mailto:youremailaddress@yourinternetservice Example:
mailto:[email protected]
Command email address
Tell students that there are NO spaces in the entire command. 5. Click ok
6.0: Show students how to preview that their links are working.
Small group Interaction: 20 minutes
Students will continue working on a web page with a partner. They should already have
images on their web page. They will now create at least one external link and one email
link. Instructor will circulate as students are working and may ask the following questions
to aid students:
• What does external mean? Therefore, what is an external link?
• How will you insert an external link?
• Why do we use external links?
• How can we navigate to another site outside of our own? What is that called?
• What is email?
• What does it allow us to do?
• What is an email link?
•
•
Why would you want to include an email link on your web page?
What steps should you take to create one?
Independent Study: 1 hour -- Assign and explain the following:
1. Students should create an email link and at least one external link for their web
page (personal.htm) (30 minutes). They should save it as personal.htm and
preview it on Netscape Navigator.
2. Students should continue writing personal information that they want to include
on their web page (30 minutes)
Lab 4: 50 minutes:
Type: Large Group Presentation, Small Group Interaction, and Independent Study
Materials:
• Computers with Netscape Composer
• Computer Projector
• PowerPoint Presentation on CRAP principles
• Copies of list of web sites that exhibit good or bad web page design (one for
each pair of students)
Large Group Presentation: 15 minutes
Begin lab by having students open their web pages from homework (personal.htm).
Check to make sure that their links (both email and external are working). Use formative
questions already mentioned to help students troubleshoot reasons why they may not be
working. They should now have at least one image and two links (external and email) on
their page. Review what the students have already learned: the purposes of web pages,
the definitions of common web-related terms (URL, HTML, and FTP), how to use
images in a web page, and how to make external and internal links.
5.0. Indicate that there are four principles to good web page design that students must be
aware of when creating their personal web page to make it pleasant for the user to look at.
Using a PowerPoint presentation, state the four principles and define them:
1. Contrast: distinction in colors between background and text so that the content
is easily readable by the user.
2. Repetition: Colors and Text Style (font, size, color) should be repeated
throughout page.
3. Alignment: Similar alignment in images and text throughout page
4. Proximity: text and graphics are unified by not being too far spaced apart or
too close together
** They can remember it by the C.R.A.P. acronym.
Small Group Activity: (15 minutes) Give students a list of eight URLs to go to that
show students examples of web pages that may or may not exhibit the four principles of
good web page design. Next to each URL, students will write whether or not it is an
example of good web page design or bad web page design and justify their reasoning. As
a class, discuss each of the URLs, projecting them with the computer projector. Ask the
students to justify why each page was an example of good web page design or bad web
page design. The following questions may be asked when instructor is circulating
classroom.
• What are the principles of good web page design?
• Why would we want to use them on our web page?
• What are the benefits to using them?
• Can you describe the four principles of good web page design?
Large Group Presentation: 5 minutes
Show students how to change the background by going to Format on the Netscape
Composer Toolbar, scrolling down to Page Properties, clicking on use custom colors,
clicking on the background box, choosing a color for their background, and clicking ok.
Show the students how to change their font on the toolbar by clicking on the font size,
color, style, or type. Remind students how to align graphics and text.
Small group Interaction: 15 minutes
Students will open their personalpartner.htm file and change the background and font
style, ensuring that they are following the four principles of good web page design. They
should discuss each principle, justifying to each other if it has been followed or not.
Instructor will walk around and may ask the following questions to gage students’
understanding of the principles of good web page design:
• How are you using the principle of contrast in your page? It’s really difficult for
me to read your text. How might you change the text so that it is easier to read?
You are not demonstrating the principle of contrast – how can we fix that? Now
that you’ve changed your text, what else can you change to ensure that you are
using both these principles? OR I’ve noticed that you don’t have a background
color on your page. What steps can you take to change the background color?
• How are you using repetition in your web page? Why should we use repetition?
How are you using alignment throughout your web page? Why should we you
alignment. What alignment are you using?
• How are you using proximity in your web page? That text seems to be very
close to the graphic on your page – how can we make them unified without
being too close together?
Independent Study: Assign the following (1 hour)
1) Students will finish their web page content
2) Students should make sure that they have following the four principles of good
web page design (contrast, repetition, alignment, and proximity).
3) Students should preview their site to make sure that their links are working, their
graphics are showing up, and the page looks the way they want it to.
Lab 5:
Materials:
• Computers with Netscape Composer
• Summative Evaluation
Students will complete the following summative evaluation as a written assessment. I will assess their web
page by the following checklist. Uploading the web page to the web will be the next unit.
Summative Evaluation
I will use the following items as part of the summative evaluation as a written
assessment:
1.0: State 2 reasons for creating a personal web page.
2.0: Define the following key terms as they relate to web pages: URL, FTP, and HTML.
3.1: Differentiate between a GIF and a JPEG.
7.1: State the 4 principles of good web page design.
7.2: Describe the 4 principles of good web page design in one sentence for each
principle.
I would evaluate the students’ personal pages using the following checklist to mark off
each item that the student has mastered.
Web Page Checklist
Objective
Skill to Master
3.0
3.2-3
5.4
Insert a GIF or JPEG image on the web page.
Saved images found on the Internet as a GIF for cartoons
or a JPEG for photographs.
Create at least one working external link
Create a working email link
Use a contrast in colors between background and text (by
formatting text and changing background color)
Use repetition in web page in colors and text
5.5
Use the similar alignment throughout the web page
5.6
6.0.
Use proximity to ensure that graphics and text are unified.
Previewed page in Netscape Navigator
4.1
4.2
5.3
Mastered
Not
Mastered