HTML Basics:
Icon: FrontPage Pictures Bar

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

With FrontPage 2000/02 you have a number of tools and features to help you get the image you want. In this lesson you will do some playing with the images, to see what the Pictures toolbar can do for you.

Pictures Toolbar

The Pictures bar appears when you select an image. It can be a floating bar or docked at a window edge. The tools on the Pictures toolbar let you change many things about the look of your picture.  In these lessons you will only use a few of these tools.

Toolbar: Pictures

Pictures Toolbar

What the Pictures buttons do:

Button: Insert Picture Same as on Standard toolbar - Inserts picture from file
Button: Add text Adds text on top of a picture
Button: Thumbnail Creates a thumbnail version of the picture with an automatic link to the big version
Button: Position, Forward, Back Positions your image in a precise spot on the page; arranges layered pictures on top of each other
Button: Rotate left, Rotate right, Mirror, Flip Rotates, mirrors, or flips the image.
Buttons: Contrast, Lightness Changes contrast and lightness
Button: Crop Crops image to keep just the part you need
Button: Transparent Color Click on one color to make it transparent
Button: Color - grayscale or fade Changes the picture to gray scale or black and white or fades the colors
Button: Bevel Bevels the image to create a button effect
Button: Resample Resamples a downsized image to save it in the smaller size
Buttons: HotSpots Creates a hotspot (a part of an image that is a hyperlink)
Button: Restore Restores the image to the last saved version


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


You already used the Transparent Color button, in the previous lesson. Now you can use and experiment with the other buttons on the Pictures Bar.

Disadvantage of Effects

Depending on your choice, adding an effect to a picture with the Pictures Bar tools may add extra images to your site and extra code to your pages. If the amount of web space used is an issue, you will do better to create the graphics yourself. Or, let FrontPage create the graphic and then you replace the old image with the new one.

Icon Step-by-Step

Step-by-Step: Pictures Bar Effects

 Icon Step-by-Step

What you will learn: to use the buttons on the Pictures Bar -
   Add Text
   Auto Thumbnail
   Position, Bring Forward, Send Backward,
   Rotate Left, Rotate Right, Mirror, Flip
   Change contrast and lightness
   Transparent Color (previous lesson)
   Change color to gray scale or fade

 Start withClass disk, web hector, a blank document in FrontPage

Toolbar: PicturesIt's time to experiment! (Another word for "have fun"!!) What do all those buttons do? In the next steps you will play around with your images.

  1. Open a new blank page.
  2. Insert the large photo of Carla and Hector, carla.jpg.

Button: Crop Crop:

To crop an image means to cut off part of it, reducing its size.

  1. Click on the image of Carla to select it.
  2. Click on Button: Crop the Crop button. A square of dashed lines appears. This outlines the part of the image that will be left if you crop now. 
  3. Move the mouse pointer over the photo. The pointer changes to Pointer: Precision select the Precision Select shape.
  4. Drag to draw a new square around Carla's head.
  5. Doc: picturebar.htm with carla-cropped.jpgClick on Button: Crop the Crop button again. All that is left is Carla. Bye bye, Hector!
  6. Class diskSave the page as picturebar.htm to your hector web.
    When the Save Embedded Files dialog appears, change the name of the image to carla-cropped.jpg. If you don't change the name, you will overwrite the original file!

Button: Resample Resample:

To actually reduce the file size of a resized image you must resample the image.

WarningOnce saved, you can not enlarge a resampled image back to the original size. Information has been thrown out and cannot be recovered. Keep a separate copy of the original.

  1. Doc: picturebar.htm with carla.jpg resampled.Select the photo and open the Picture Properties.
  2. Resize the image by changing the width to 150 pixels, with the Keep aspect ratio box checked. The correct height is automatically calculated. Close the dialog.
    The image is resized smaller.
  3. Click Button: Resample the Resample button on the Pictures bar. A new version of the image is created at this smaller size.
  4. Class diskSave. [picturebar.htm] In the Save Embedded Files dialog, rename the image as carla-resampled.jpg so that you won't overwrite the cropped image.

Experiment: Effects Buttons  Buttons: Rotate left, rotate right, mirror, flip Buttons: Contrast, Lightness Button: Gray scale Button: Bevel Button: Restore

  1. Select the photo and click on one of these buttons to see the effect. Restore the image to its last saved state by clicking  Button: Restore the Restore button.
  2. Check out all these buttons. When you're done, be sure the image is restored to it's resampled condition.

Button: Add text Add Text (to photo itself):

You can add some text and change the font, its color, and its size using the Formatting bar. You cannot color the background behind the text. For some images, text will be hard to read no matter where you put it or what color you use.

  1. Select the cropped photo of Carla. The Pictures bar appears.
  2. Click on Button: Add text the Add Text button. A message warns you that the image must be converted to GIF format to add text to it. Click on OK.
  3. Drag on the photo to create a textbox.
  4. Type  Carla . The text will appear in black Times New Roman. It's hard to read on the darker parts of the picture.
  5. Added text highlightedClick in the textbox and drag across the word Carla.
  6. From the formatting bar, open the Font Color palette and select White.
  7. picturebar.htm - text on Carla's photoDrag the textbox to the upper right corner.  Click off the photo to deselect the textbox. Is it easier to read now?
  8. Class diskSave. [picturebar.htm] In the Save Embedded Files dialog, rename the picture as carla-text.gif.

When FrontPage saves this picture, it creates yet another picture in a new folder _derived. The new picture has Carla and the text in one image, picturebar.htm_txt_carla-text.gif. FrontPage leaves the picture carla-text.gif where you put it, but the SRC is changed to point to the new combined picture.

Example of added WEBBOT code

When FrontPage applies a special effect to an image, it usually inserts some special code in the HTML. As an example, let's look at the code that was applied to Carla's picture. It looks like quite a mess!

<span style="position: absolute; left: 158; top: 8">
<!--webbot bot="ImageMap" text=" (83,0) (145, 26) {Carla} {Times New Roman} 12 B #ffffff CT 0 " border="0" src="carla-text.gif" u-originalsrc="carla-text.gif" u-overlaysrc="_overlay/picturebar.htm_txt_carla-text.gif" startspan --><img border="
0" src="_derived/picturebar.htm_txt_carla-text.gif" width="150" height="139"></span>

Here are the new parts:

  • SPAN tag with STYLE attribute: 
    <span style="
    position: absolute; left: 158; top: 8">

    Contains the instructions for the absolute positioning of the picture on the page using CSS. The distances are in pixels and are measured from the left and top of the page.
  • WEBBOT tag:
    <!--webbot bot="ImageMap" text=" (83,0) (145, 26) {Carla} {Times New Roman} 12 B #ffffff CT 0 " border="0" src="carla-text.gif" u-originalsrc="carla-text.gif" u-overlaysrc="_overlay/picturebar.htm_txt_carla-text.gif" startspan -->
    Contains instructions to FrontPage about creating the combined picture - Carla with the text. It is in a comment tag and a browser will ignore it.
  • SRC attribute of the IMG tag:
    Changed to the new image that FrontPage created in the new folder _derived. This image combines the text and the original image into a single new image.

Buttons: Position Positioning

FrontPage can create the CSS style you need to position an image in a specific spot on the page, called absolute position. This allows several images to overlap each other. You can manage the stacking of the images with Bring Forward and Send Back.

WarningIn some browsers absolute positioning may fail to do what you expect. If you use this feature, be sure to check the page in all the browsers you expect your viewers to be using.

  1. Insert ricardo2.jpg and rosa2.jpg on your page [picturebar.htm] somewhere.
  2. Select ricardo2.jpg and click Button: Position absolutely the Position Absolutely button. Do you see a difference? Probably not yet.
  3. Drag ricardo2.jpg. Aha! The image is floating across the page. Drop the image near the center of the page.
  4. Doc: picturebar.htm with layered photosRepeat for Rosa's photo and Carla's, letting them overlap Ricardo's photo.
  5. Experiment with Button: Bring Forward the Bring Forward and Button: Send Backward Send Backward buttons to see how you can change the layering.

Button: Auto Thumbnail Auto Thumbnail

When you have a really large image, you may want to show a small version first and have a link to a large version. That gives the viewer the choice. The Thumbnail button automates the process of creating a thumbnail and making it a link to the original, large image.

  1. From the menu select  Tools  |  Page Options  |  AutoThumbnail
    The default is select the width to be 100 pixels, with a border 2 pixels wide. This will put an ugly hyperlink border around the thumbnail.
  2. Dialog: Auto ThumbnailUncheck the Border thickness box and set the width at 100 pixels, if necessary.
  3. Click on OK to close the dialog.
  4. From the top of the page, create enough blank lines to move the cursor below the photos that were positioned absolutely.
  5. Insert the large image of the Great Wall of China, china.jpg below the other photos.

  6. Doc: picturebar.htm with thumbnailWith china.jpg selected, click Button: Auto Thumbnail the Auto Thumbnail button. The image is resized to 100 pixels wide.
  7. Class diskSave. [picturebar.htm] In the Save Embedded Files dialog, FrontPage has a suggested name for the new image it created, china_small.jpg.
  8. Click on OK to accept the suggested name.
  9. Switch to HTML view and look at the code for the image. It has an anchor tag surrounding it. The hyperlink is to the large image.

    <p><a href="china.jpg">
    <img border="0" src="china_small.jpg" xthumbnail-orig-image="china.jpg" width="100" height="64"></a></p>


  10. Verify the link: Switch to Preview and click on the thumbnail. The large image should load. Switch back to Normal view.

Buttons: Hotspot shapes and highlight HotSpots

Earlier you learned how to make a whole image into a hyperlink. With the Pictures bar you can create a hyperlink on just part of an image, called a hotspot.

You can draw a rectangle or ellipse or create a polygon shape. Each hotspot on the image can link to a different target. Your hotspots should not overlap, of course.

  1. Click on the photo of Ricardo to make the Pictures bar appear.
  2. Click on Button: Rectangle HotSpot the Rectangle hotspot button.
  3. Drag a rectangle around Ricardo's head in the photo. The Insert Hyperlink dialog appears.
  4. Type in the Address box ricardo.htm, a page that you will create later. An outline shows where the hotspot is.
  5. Click on Button: Ellipse hotspot the Ellipse hotspot button.
  6. ricardo.jpg with two hotspots showingStarting at the center of the soccer ball, drag a circular hotspot over the ball.
  7. In the Address box of the Insert Hyperlink dialog, type , which is the address to the international governing body of soccer (know in most of the world as futbol).
  8. Back in Normal view, click off the image to deselect it. The outlines vanish.
  9. Switch to Preview. The hotspots are invisible.
  10. Move your mouse pointer over the image. The pointer changes to Pointer: hand shape the hand shape when it is over a hotspot. Cool!
  11. ricardo.jpg with hotspots highlightedSwitch to Normal view and click on Button: Highlight HotSpots the Highlight Hotspots button. The image vanishes and black shapes show where the hotspots are.
  12. Click off the image to get back to normal.

Now you have experimented with effects available on the Pictures bar. Just remember that some of them add code and files to your web.