E-mail this pageWorking with Graphics
Adding graphics to a web page is relatively simple--once you've created the JPG or GIF file that you'd like to add to your site, you can add it to your page by selecting Insert|Picture...From File
, or clicking on the Insert Picture from File
button (
). The following menu will appear:
By default, you'll be presented with a list of the folders on your website, with only image files being shown in the selection window. If the image file already exists on your website, you can navigate through your web's folders to find the picture you'd like. Clicking once on the name of an image file will load a preview of that image into the right side of the Picture dialog.
If your image isn't already somewhere on your website, you can pull it off your hard drive (and, in doing so, load it to your website) by clicking on the "Select a file from your computer" icon (
). This will bring up a list of folders on your website, giving you the opportunity of selecting a file from your hard drive.
Once you've selected your image file, click on the OK button to dismiss the picture dialog, and your selected image will be inserted into your web page.
Your first step on adding your image should be to ensure that you've set the "ALT" tag, or textual representation of what that image is. (You may have noticed that all of the pictures that form part of this FrontPage site have a textual element that pops up when the mouse passes over them: this textual representation is the only thing that would appear to a blind person using a text reader, or to a person who is using a text-only interface to visit your web page. Setting the ALT tag is necessary to make your website meet New York State Accessibility standards!) To set the textual representation of the image, right click on it and select Picture Properties . You'll see the following dialog appear:
By default the field labeled Text will contain nothing but the name of the image file and its file size: you should change this text to something that describes the image. You'll note that you can, from this dialog, also set a hyperlink that would have the effect of making the image a hotspot for jumps to another location on the web.
Once you've added appropriate text to the Text field, you've done all that's necessary when an image is to be included on a web page.
Nonetheless, if the image you've linked is very large, you may want to link to a lower-resolution image that can be displayed while the larger image is loading: if you've created a low-resolution image, you can specify this image by clicking on the Browse button beside the field labeled Low-Res . This, at the very least, will give your site visitors something to look at while they're waiting for your larger image to load.
Tweaking images
You may find that you want to tweak your page's layout once you've put some images onto your page, if only because the default line wrapping and position is at times a little clumsy. To adjust how the image appears on the screen and lines up with the text, you can click on the Appearance tab at the top of the Picture Properties dialog.
Under the Appearance tab, the Alignment option gives you a measure of control over how the picture interacts with the text on your page. By setting the alignment to "Left," for instance, the image will appear on the left margin of the page, and the text (including horizontal rules, paragraph breaks, and virtually anything else) will wrap to the right margin of the image. This is as much a curse as a blessing: when the size of the browser window changes (or when a viewer uses a much larger, higher-resolution display) your page can periodically assume an appearance quite unlike anything you'd intended. Nonetheless, the Alignment options provide as much layout control as can be used with confidence that all browsers will see more or less the same page results.
You also have the option of setting an image border (in pixels) and specifying the display size of the image. Ordinarily, you'll not set the image size this way: instead, you'll simply drag the selection points on the image itself. However, if you want all (or several) of the images on your page to be exactly uniform in size, this is the best way to do have precise control over the image size.
Note : if you specify an image to have a display width of 100% and a display height of 100%, these percentages are percentages of the available space in the browser window , not percentages of the size of the image itself.
Image Effects and Transparency
You might want to explore some of the effects options available to you in the Image Toolbar that appears whenever you click once on an image to select it. Using the Image Toolbar, you can rotate, flip, mirror, wash out, resample, and perform a few simple transformations on your image.
One of the most useful transformation tools is the one that allows you to set the transparency of a GIF image. The Set Transparent Color
tool (
) is used to assign transparency to a particular color on an image. This allows page background colors to show through the image and is often used to make images blend into a page. The following table has the same image in each of the four cells, but the cells themselves have different backgrounds.
|
|
|
|
|
To set transparency, click once on an image to select it, then click on the Set Transparent Color tool, and then click on the color in the image which you'd like to render transparent. This will work best where the color that you select is fairly localized and fairly consistent in intensity and tone.
Image Maps
The last point to be discussed with respect to images on websites has to do with the creation of image maps--pictures that have multiple hyperlinks defined on them so that the user can click on one spot of the picture to pursue one link, and click on another spot to pursue another.
Setting up Image Maps in FrontPage is a simple process. To begin, you need an image on the page to which you'd like to add hyperlinks. Click once on the image to select it, and then click on one of the Insert Hotspot
tools that appear in the Image Toolbar: 
. Then draw the shape onto the image. Once you've done so, the Create Hyperlink
dialog will immediately open, allowing you to specify the destination for the hypertext jump.
This Create Hyperlink dialog is exactly the same as the one outlined in the section on Creating Hyperlinks (on the Tools/Web Page Basics page).
You can add as many different hotspots to an image as you'd like, but bear in mind that they're not the most user-friendly mechanism for creating a navigational structure.
At this point, you should be able add an image to your page, adjust the alignment, set the ALT tag, set an image's transparency, and create image maps. No small feat. Pat yourself on the back and take a short break....
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.