Back to Lesson 3 Main Page
Lesson 3, Task 2

Adding Images to Your Document

There is more than one way to add images to your web pages.  In FrontPage, and in probably most HTML editors, the most orderly way to add images to a page is to first manually copy the image to the images folder (or a subfolder), then either drag or 'Insert' the image onto your page.  With this method, you have full control over the location of the image and its filename.

Another way is to find the image you want elsewhere, either locally on your own computer, a local network, or on the Internet, then drag the image onto your page. You can do this from many, but not necessarily all, applications that run on your computer.

FrontPage 'knows' when an image was brought in from outside of your web.  When you save the file you are working on, FrontPage will prompt you to see if you want to save a copy of the image within your web.  Most of the time you will want to save a local copy.  [One exception:  If you are making an HTML file with images that you will be posting in the Discussion Board, you need to keep the reference to the image (for example, http://www.whatever.com/weirdpic.jpg) as the source of the image.  If the image is on your own computer, there is no way that Blackboard can find it and display it in the Discussion Board.]

Picture Properties

You can change some the properties of an image BEFORE it is inserted into your web page (using a graphics editor) or AFTER it is inserted into your web page (using your HTML editor).

Some properties you can change before insertion:

• Image layout size, in pixels or inches.  This is the image's original size as saved.
• Image file size (in kilobytes).  This is the ACTUAL size of the image.
• File type.  Most images used on the Internet have either a .jpg or a .gif extension.  Graphics software can convert image types.  You'll learn why you might want to do this later.
• File name.
• Appearance of the image (brightness, contrast, colors, rotation, touchups, etc.)

Some properties you can change after insertion:

• Location of the image on the page.
• Image layout size, in pixels or inches.  This is the image's DISPLAYED size.
• Adding a border around the image.
• Making the image a hyperlink.
• 'Wrapping style' - how text behaves around the image
• Hover text - a message that appears when the mouse hovers over the image.

Task 3-3

Create your third practice page.  See this example, but don't use any images from the example.

Include a minimum of 10 images on your practice page.  Include images you find locally and on the Internet.  Put some first into your images folder, and drag in others.  Put some of them into a table and experiment with changing the layout and appearance.  At each image, describe what you've found and done similar to the way it's shown in the example.

Save your practice page as practice3-3.htm, then publish your web.  Post in the Discussion Board (L3-3) a notice that you've completed task 3-3 and it is ready to be viewed.  Include a link to practice3-3.htm.