Read an Excerpt
Chapter 4: Working with Pictures
Here's how the Picture toolbar tools (buttons) work:
- Insert Picture from File Let's you navigate around and insert a picture.
- Text Creates a box for caption text that attaches to the selected picture.
- Auto Thumbnail Creates a thumbnail of the selected picture (see discussion of
thumbnails earlier in this chapter).
- Absolutely Positioned Assigns absolute positioning to the selected picture (see discussion of absolute positioning earlier in this chapter).
- Bring Forward Works with absolutely positioned pictures-moving them in
front of other objects on the page.
- Send Backward Also works with absolutely positioned pictures-moving them
behind other objects on the page.
- Rotate Left, Rotate Right, Flip Horizontal, and Flip Vertical Rotates the picture.
- More Contrast, Less Contrast, More Brightness, and Less Brightness Changes
the brightness and contrast of the picture. Very useful-especially since most images need some brightening when they are placed in Web sites.
- Crop Works like scissors-you can trim the edges off of a picture.
- Line Style Allows you to define outlines for some pictures. However, for most pictures, you'll define outlines in the Picture Properties dialog box, while is
explored in the next section of this chapter.
- Format Picture Only works on pictures created with FrontPage's drawing tools, which are briefly addressed at the end of this chapter.
- Set Transparent Color Used to make one color in a picture invisible so that the page background shows through. When you click this tool an eraser cursor appears. Use it to point and click at a color in a picture to make that color disappear.
- Color Provides four color options (not all are available for every picture): Automatic (normal), Grayscale (shades of gray), Black and White (2 colors), and Washout (makes the picture colors fade).
- Bevel Applies a frame around a picture.
- Resample Overwrites your existing picture file with one that reflects the current size of the image. If you have made your picture smaller, this reduces file size.
- Select Deselects other tools.
- Rectanglular Hotspot, Circular Hotspot, and Polygonal Hotspot Draws clickable links on a picture, transforming it into an image map. And to help out, the
Highlight Hotspots button highlights those clickable areas.
- Restore Bails you out at times by undoing editing changes to your picture and converting back to the last saved version of your picture file.
Picture Links and Image Maps
You can assign a link to any image, or you can assign many links to a single image. Images with many links are called image maps. For example, you could literally take a picture of a map and draw different clickable link areas on it that corresponded to different countries, allowing visitors to jump to a link just by clicking a country on the map.
Creating a Picture Link
It's often effective to associate a link with a picture. The link can be to another Web page or even to another picture file. As visitors hover over a picture on your Web page, the hand icon that appears will let them know there is a link assigned to the image.
To Assign a Link to a Picture:
1: Select the picture.
Pictures with links automatically get borders placed around them, and the border color is the same as the color you assigned to link text. You'll explore how to get rid of a picture border later in this chapter.
2: Click the Create Hyperlinks button in the Standard toolbar. The Create Hyperlink dialog box appears.
3: Use one of the folder options in the Look In list on the left side of the Insert Hyperlink dialog box to choose a source for the target Web page. Navigate to a page in the list of pages in the dialog box.
4: Use the Screen Tip button to define text that will appear when a visitor hovers over your picture with his or her mouse cursor.
5: Use the Target Frame button, and click New Window in the Target Frame dialog box if you want the link to open in a new window.
6: After you have defined the target for your picture link, click OK in the Insert Hyper link dialog box.
Creating an Image
Image maps have many clickable areas that are defined using the Rectangular Hotspot, Circular Hotspot, or Polygonal Hotspot tools in the Picture toolbar.
To Create an Image Map:
1: Select the picture that you want to convert into an image map.
2: If the picture toolbar isn't visible, choose View I Toolbars I Pictures.
3: In the Picture toolbar, click the Rectangular Hotspot button, and click and drag to draw a rectangle around an area that will be a hotspot, ...
4: When you release your mouse button, the Insert Hyperlink dialog box appears. Navigate to a Web page to link the hotspot to, or enter an external URL (Web site) in the Address area of the dialog box, and then click OK.
5: You can add a circular hotspot by using the Circular Hotspot tool, or you can add an irregularly shaped hotspot by using the Polygonal Hotspot tool. To use the Polygonal tool, click several times to outline the hotspot, and double-click when you've completed the outline.
6: After you finish the image map, test your links in the Preview tab of Page view.
More Picture Properties
Most of the things you want to do to pictures are available from either the FrontPage Formatting toolbar (alignment), the Standard toolbar (links), or the Picture toolbar (contrast, coloring, transparency). And some picture editing-like sizing or moving a picture-is done just by clicking and dragging in Page view.
There are a few, additional picture-formatting features that are hidden in the Picture Properties dialog box. The most important additional picture formatting features are listed here:
- Alternative reprensentation Define the text that appears as a ToolTip when a visitor hovers over a picture or when a picture is viewed in a browser that does not support pictures.
- Horizontal and vertical spacing Allow some "air" between your picture and the text that flows around it.
- Border sizeThis is for the border around your picture or turning off the border all-together.
- Interlacing "Fades in" GIF images that take a long time to download.
- Progressive passes"Fades in" JPEG images that take a long time to download.
Exploring the Picture Properties Dialog Box
The Picture Properties dialog box has some features not available on toolbars. It also let's you look at change just about all the settings you defined for a picture using toolbar buttons and on-page editing.
Open the Picture Properties dialog box by doing any of these things:
There are three tabs in the Image Properties dialog box: General, Video, and Appearance. For now, never mind the Video tab. Video is explored in Chapter 14.
- Right-click the picture and choose Picture Properties from the context menu.
- Click (once) on the picture, and choose Format I Properties from the menu bar.
- Click once on the picture and press ALT+ENTER.
The Appearance tab defines alignment-you can apply alignment using the Align Left acid Align Right buttons in the Formatting toolbar, but you can remove alignment here. You can also use the Specify Size check box to activate the Width and Height spin boxes and define the size of a picture digitally-by entering either pixels (the tiny dots that make up a monitor screen) or percentage sizes. You also use the Appearance tab to define border thickness and spacing around a picture...