Jennifer Handley



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)

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 page 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 a contrast in colors between their background and text on their web page in Netscape Composer.

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..

6. 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 Characteristic |Student 1 |Student 2 |Student 3 |

|Social Background |Student is usually respectful of peers and |Student is extremely respectful of |Student is respectful of peers |

| |instructor, but not always. His comes from |others and very tolerant of |and instructor, but not always |

| |a family that does really value education |different views. She is very |tolerant of other’s views. Her |

| |and is the first in his family to graduate |cooperative and comes from a family|family values education. |

| |high school. |that highly values education. Both | |

| | |of her parents have Masters | |

| | |degrees. | |

|Experiential Background |This student has never been outside of |Student has traveled around the |Student has traveled some (in |

| |Gainesville, hates to read, and has poor |world, reads a wide variety of |the state of Florida), reads |

| |study skills. |books, and has excellent study |some, and has decent study |

| | |skills. |skills. |

|Developmental Level |Poor memory, slow to learn |excellent memory, extremely quick |Good memory, learns fairly |

| | |to learn, and easily integrates |quickly, and is rational |

| | |ideas | |

|Motivation |Does not show initiative, not curious, not |enthusiastic about earning, shows |shows some initiative, likes to|

| |enthusiastic about learning |initiative, persistent |learn, somewhat curious |

|Content Knowledge |Possesses Prerequisites |Mastered skills |Possesses Prerequisites |

|Learning Style |Influenced by peers, listener of words, |Influenced by authority, reader of |Influenced by peers, reader of |

| |needs visuals |words |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 2 3 |

|1.1 |I can state a reason for creating a web page related to the ease in accessing information |1 2 3 |

|1.2 |I can state a reason for creating a web page related to future skills needed for the work force.|1 2 3 |

|2.0 |I can define key terms related to web pages, including URL, FTP, and HTML |1 2 3 |

|3.1 |I can differentiate between a GIF and a JPEG. |1 2 3 |

|3.2 |I can insert a GIF image into a web page. |1 2 3 |

|3.3 |I can insert a JPEG image into a web page. |1 2 3 |

|4.1 |I can create an external link in a web page. |1 2 3 |

|4.2 |I can create a mailto link in a web page. |1 2 3 |

|5.1 |I can state the 4 principles of good web page design. |1 2 3 |

|5.2 |I can describe the 4 principles of good web page design. |1 2 3 |

|5.3-5.6 |I use the 4 principles of good web page design. |1 2 3 |

|5.3.1 |I can change the background color in a web page. |1 2 3 |

|5.3.2 |I can format the text in a web page by changing the font, size, and color. |1 2 3 |

|6.0 |I know how to preview my web page on the Internet. |1 2 3 |

| |

|Formative Evaluation |

|Objective |Questions to ask during observation |

|1.0 |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? |

|2.0 |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? |

|3.1 |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? |

|3.2 |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. |

|3.3 |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. |

|4.1 |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? |

|4.2 |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? |

|5.1 |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? |

|5.2 |Can you describe the four principles of good web page design? |

|5.3 |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? |

|5.4 |How are you using alignment throughout your web page? Why should we you alignment. What alignment are you using? |

|5.5 |How are you using repetition in your web page? Why should we use repetition? |

|5.6 |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 |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? |

|6.2. |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? |

|6.3 |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

Prerequisites 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, 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 are 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:

[pic]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:

[pic] 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 , 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: . (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:gatorjlh@

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

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 |Mastered |Not Mastered |

|3.0 |Insert a GIF or JPEG image on the web page. | | |

|3.2-3 |Saved images found on the Internet as a GIF for cartoons or a JPEG for | | |

| |photographs. | | |

|4.1 |Create at least one working external link | | |

|4.2 |Create a working email link | | |

|5.3 |Use a contrast in colors between background and text (by formatting text and | | |

| |changing background color) | | |

|5.4 |Use repetition in web page in colors and text | | |

|5.5 |Use the similar alignment throughout the web page | | |

|5.6 |Use proximity to ensure that graphics and text are unified. | | |

|6.0. |Previewed page in Netscape Navigator | | |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download