Web Page Creation and Design

Inserting images on the page

• On the standard tool bar Click on the Insert a Picture Icon.
• Select the directory you are getting the picture from
• Select ok.

With FrontPage 2000 (or newer versions) you can now place the image anywhere in the page you want to by using the absolute position. A drawback for this option is that if you edit the page the image will not move and it may end up in the middle of some text. So be careful, picture placing can be one of the most frustrating parts of creating a web page.

Other things to keep in mind when working with images:

• The size of the image file is very important. Not the actual picture on the screen. The image can be resized to be less than one inch on the screen and the file can be larger than 100k. This is important for loading speed.  Look at the bottom for information on how to compress the image using the Thumbnail function on FrontPage.
• After the image has been inserted on the page, right click on the image and select Picture Properties. Under Alternative representation, on the text line add descriptive information about the picture. If the person viewing the page has graphics turned off, this will let him-her know what was supposed to be showing.
• Bitmaps can't be displayed on a web page, but FrontPage will convert a *.bmp picture into a *.jpg extension. The only problem is that it will make an image name that may not be easily recognized.
• Try to save all icons or graphics into the directories that are shared by everybody. This way duplication will be kept to a minimal.
• When importing graphics from clipart, they will need to be renamed after they have been added to your page. Do not worry about having to go page by page, FrontPage will change all the pages that contain that image to the new name, and will correct the path if it was moved from your local directory to the correct picture directory.
• If you want to use an image/picture that has a background, you can make the background "transparent". Click on the image, when the pictures toolbar shows up, click on the icon to make image transparent and click on the part of the image that you want to make transparent.
• Thumbnails of pictures can be used to make loading of the page faster. Once the Image is inserted on the page, click on it and click on the Create Thumbnails icon. FrontPage will create a small image of the original and save it for you. Now, when clicking on the small image the original image will be displayed.

 

 

• You can use an image and create an image map by selecting parts of the image and assigning it a link. To select parts of the image, click on one of the image map shapes on the picture toolbar, then select the section of the picture you want; after pressing the enter key, enter the hyperlink for that section.

 

 

Compressing the Image using the Thumbnail function on FrontPage:   

 The viewing size is not what you need to correct.  If the image is over 90k (file size) it will take a lot longer to load than if the file size is less than 20k.  When you resize the image inside you page, the browser still has to load the image and then it has the added logic to resize it.  
If you do not have an image software, do not worry.  Insert the image on your FrontPage page and click on Tools/Page Options; select Thumbnails then change the size of the thumbnail to a larger size (300). 
Right click on the picture and then click on Auto Thumbnail.  Now you will have 2 pictures, the original and a small version.  If you do not want them to click on the picture to see the larger one, right click on the new picture and remove the hyperlink to the original picture.
If you have PhotoShop, Image Composer, LVIEW, or any other image software, open your picture and resize it; save the smaller image with a different name.  Then use the smaller image in you page.
 

Compressing the Image using the Resample function on FrontPage 2003:
 (and newer versions)

  A picture that has been inserted on a FrontPage page without being compressed first can also be compressed after resizing it on the page.  Once the image is the size you want, right click on it and click on Resample.  This will compress the image to that specific size.  When you save the page you will have the option to override the original picture or to change the name of the new picture keeping now a new compress version for the Web.

Resize the picture to the size you want first.

Right click on the picture and click on Resample to compress the image.

 

Back to Index Page

November 29, 2005