Images

 

Home
Calendar
Feedback
Site of the Day
Curriculum
Participants
Final Projects
Mailing List
Jwit Resources

Images in FrontPage

 

Goal for today

Learn about some techniques for controlling how images are displayed. Learn how to use image editing software with FrontPage.

 

Note about copyright

When you use pre-existing materials that have been created by someone else you need to consider whether such use is legal and ethical. The primary legal issue is whether a use of a given resource is allowed within United States copyright law. The law gives educators certain privileges not extended to the general public; these privileges are known as the "Fair Use Doctrine" and provide certain exemptions to copyright restrictions. However, since the copyright law was last given a major revision in 1976, long before the development of the World Wide Web, there are some gray areas in which the law's application to new media is not entirely clear.

It is important to consider the moral or ethical issues raised in such use. Since teachers are, by their nature, serving as examples to their students, they should be careful to serve as good examples that students would do well to emulate. An important principle to follow is: "always give credit where credit is due." Even if a web site gives explicit permission for you to use something you find on that site, or even if the resources are explicitly in the public domain, it is always good practice to give notice of where you found it and to give thanks to those who made it available to you.

This information was taken from chapter 4 of Curriculum Webs by Craig A. Cunningham and Marty Billingsley. Please refer to your copy of Curriculum Webs for more information about copyright laws.

 

Back to the top.

How to copy an image from the Web:

  • Right click on the image (or, on a Mac, control-click or hold down mouse button)
  • Pop-up menu includes "Save picture as...." Choose that.
  • "Save as..". dialog box opens; browse to the correct folder (if you're going to use the image in a FrontPage web page, put the image in the img or images folder of your Web
  • make sure image has appropriate extension (.jpg or .gif). Usually you can just let the computer determine the right extension.
  • REMEMBER where you put it.
  • TRY THESE INSTRUCTIONS ON THIS IMAGE:

Craig at CUIP meeting

(NOTE: this image has two "hot spots." Can you find them?) Glasses glare Craig's camera bag

Once you have an image you want to put into a page,

  • Use Insert | Picture...| From File or click the Image icon in the Insert Bar.
  • Browse to the image (do you remember where you put it?), click OK
  • image is inserted at cursor
  • To resize the display of an image, click on the image and drag one of the corner handles that appears. If you want to make an image "fat" or "skinny," drag one of the handles on a side, top, or bottom.
  • NOTE: When you alter the display size of an image, you don't actually change the size of the image; only its display. To change the actual size of the image, you'll have to "edit" it in an image or photo editor such as Microsoft Photo Editor, Photoshop, Paint Shop Pro, or Paint.

Back to the top.

Information about your image

Once you've placed an image into your page, there are a couple of ways that you can get information about the image's size and how it affects the loading time of the page.

Open a new file and save it as "imagetest.htm." Right now the page should be empty.

Look at the status bar of the page editing window. (This is the bar at the bottom right of the window.) It should look something like this:

This tells you that the current (empty) page will take 0.1 seconds to be downloaded by a modem at 56 KB per second.  

Now, insert this small image into your web page:

This image is much less than 1K in size. When you add it into your web page, it adds an insignificant amount of size and time to the page loading. The status bar hasn't changed.

However, if you add in this image:

the status bar changes to .

As you build your web pages, think about the overall size of your page and try to keep the page under about 30 seconds or, for a long page with lots of images, no more than 120 seconds. (The current page should take about 86 seconds at 28.8 Kb/sec or about 20 seconds through a T-1 line as on the U of C campus.)

Back to the top.

Using images as links

Images can be linked to other images or pages.

Simply click on an image after you have placed it in your page.  Then use Insert Hyperlink and make the picture link.

A lot of web designers use small images, or icons, to indicate links to different areas of your web site. You can find lots of icons to use for this purpose at http://www.iconbazaar.com.

Back to the top.

Image maps

FrontPage allows you easily to create image maps, with different links for different sections of the picture, and behaviors assigned to these areas.

Activity:

For example, say you want to use a picture of two people and you want to create a page about each person. By clicking on the person, you want the user to be able to access information about that person.

Let's use this picture for the exercise. (This is Craig Cunningham and daughter Rowan Cunningham). Notice what happens when you point your mouse on the face of one or the other. The cursor turns into a pointing hand, like a link. Click. Voila! it is a link!.

Download the picture to your images Folder.

Now insert the picture into a new file.

Let's say we want to link Craig's face to a page called craig.htm and Rowan's face to a page called rowan.htm. Create these new files. For now, just put descriptive comments in these two files, such as "This file will contain information about Craig" and "This file will contain information about Rowan." Save and close these two files.

If the picture toolbar isn't visible, use View | Toolbars| Pictures. Click on the picture.

"Hotspots" are entered using these tools:

The shapes are used to create the hotspots.  The left one makes rectangles and squares; the middle one makes ellipses and circles, the one on the right makes irregular shapes.  The arrow pointing to the blue rectangle allows hotspots to be visible on the picture.

Choose the circular hotspot tool. Click on the center of Craig's face and drag out to make a circle. When you let go, the Insert Hyperlink dialog box appears, and you can choose the file to link to.

Repeat on Rowan's face. Once the hotspots are drawn, the can be dragged or resized.

Back to the top.

Using Tables to arrange pictures on a page

You can use a table to place a photo and its caption, thus:

Craig and Cheryl were delighted to welcome Thomas Liam Cunningham to their family on June 5, 2001!

 

Practice Activity

 

Back to the top.

Next Lesson (Navigation Bars).

 

Last updated Tuesday November 15, 2005 09:47:28 AM by Miri RUbin