Lesson Three: Adding Images to Your Web Page

 

As you create your web pages using Word, you will want to include images as a way of making your web page come alive.

 

You may download free non-copyright protected images from a variety on online sources, save these files to your hard drive, and then insert them into your web page using Word.  You may also want to take advantage of Word’s built-in clip art gallery to add images.

 

Adding Images from External Files

 

Use this method if you are adding images you have created yourself, saved from an online clip art site, or created from scanned images.

 

Place the cursor wherever you wish to insert an image. Click on Insert, Picture, From File.  You will see a screen that looks similar to this:

 

 

Use the drop down arrow in the Look In: field at the top of the dialog display window to choose the location where you have saved your image files. In this case, I am looking in the My Pictures folder on my hard drive. To select and insert the curie.gif file, I would simply position the cursor on that image, and double click the left mouse button.  This would place a copy of the image in my open document.

 

To resize the image, click on it, and then place the cursor on one of the corners of the image. You will see a double-ended arrow appear. Click the left mouse button and hold it down while dragging the double-ended arrow inward to make the image smaller.  By using this method, you will keep the image’s proportions intact and avoid creating a distorted graphic.

 

Adding Word Clipart Graphics

 

To add an image from within the Word clipart gallery, place your cursor at the place in your page where you want the graphic to appear.  Click Insert, Picture, Clip Art. Depending on your Word preferences, you may see a dialog window or a display as illustrated below:

 

 

Use the Search For field to enter keywords relating to the subject of the image you want.  For example, if I wanted to find an image relating to e-mail, I would enter the keyword e-mail and click Search. Here’s an example of the display I would see:

 

 

Select and insert the desired image by placing your cursor on the image and double clicking the mouse. Once the image has been inserted into your page, you may resize it using the methods described above.

 

Effective web pages load and display quickly. Large file sizes and multiple images on a page can cause pages to load very slowly.  Studies have shown that visitors rarely return to web pages that take a long time to load. Try to minimize the number of images you insert on a single web page. Or, insert small thumbnail images that may be clicked to bring up a larger version of the same image.

 

Saving Web Pages with Images

 

When you are finished creating your web page, click on File, Save As and select Web Page.  Word will create an htm file that contains all the html coding for your web page.  It will also create a folder that contains a file with instructions for displaying your web page and converted versions of all your image files.

 

For example, if I created a web page named Jennifer.htm, Word would also create a folder called Jennifer_files. For my images to appear on my published web page, I would need to move both Jennifer.htm, the folder Jennifer_files, and the contents of the Jennifer_files folder to my web server space.

 

Troubleshooting

 

If you are unable to view the images in your web pages after they have been published, here is a checklist of what might be wrong.

  1. Did you move the image files to the web server?
  2. If you moved the image files to the web server, are they in the correct folder?
  3. Did you remember to name your graphic files using names without spaces or illegal characters?
  4. Did you remember to move images as binary files?

 

If you are still having problems with your images displaying, open your original Word docment file or the htm file stored on your hard drive. Reinsert each image, using the GIF files Word stored in the folder it created when it converted your original document to a web page file.  Once you have replaced all the original clip art images with GIF files, save your file as a web page again. Republish all the files to your web server space.

 

Online Resources for Creating and Downloading Web Graphics

 

Lesson 1 – Lesson 2 – Lesson 4 – Lesson 5 – Lesson 6 -  Lesson 7 -  Home

 

C2004, Jennifer Lagier, Hartnell College, jlagier@hartnell.edu