Inserting the image was a breeze, but you may need to work a bit harder to make it fit nicely and really look good. FrontPage is far from a sophisticated image editor, but it offers a handful of tools to help you edit, resize, and adjust the placement of your graphics.
Editing Appearance
Web designers who edit pictures extensively rely on software programs created for the job, like Adobe Photoshop. For best results, you should, too. But if all you need to make are simple edits or small tweaks, like cropping or rotating an image, FrontPage can save you the trouble of opening a separate program. To access FrontPage's rudimentary editing features, open the Pictures toolbar. Select View » Toolbars » Pictures and run your cursor over each toolbar button to display a tool tip, which tells you what each button does.
The Pictures toolbar serves as a mini graphics editor.
To edit a graphic within FrontPage, select the image, and then choose from the following options on the Pictures toolbar:
-
Rotate images with the four rotate and flip buttons. Rotate buttons turn the picture 90 degrees, while flipping creates a mirror image.
-
To place text over a picture, click the Text button and type within the box that appears. Click and drag to move the text box around. FrontPage adds the text to the image itself, so you'll be prompted to resave the image when you save the page.
-
Click the Color button and you can change an image from color to grayscale or black and white. Choosing Washout lightens an image, which may be handy for background pictures, or to show that a button on your page is temporarily inactive.
-
Adjust contrast and brightness with the more and less buttons for each of these attributes. These two controls often work together to pep up an ailing image. For instance, if you have a dark, muddy image and increase the brightness, your picture can look washed out. You can fix this by upping the contrast, which increases the darkness of dark colors and lightens light colors. If, after trying these, your picture still needs help, turn to a real image editor.
-
Click the Set Transparent Color button and click on a color within the image to make all similarly colored areas see-through. This button is great for eliminating a picture's monochrome background. This feature works well only if your picture has simple lines and areas of flat color. It doesn't work on photographs. In fact, if you try to use this tool on a JPEG, FrontPage converts it to a GIF. And converter beware: if you're converting an image in order to set a transparent color, don't botherthe results are lousy.
-
To crop a picture, click the crop button, use the cursor to outline the area you want to keep, and click the crop button again. Anything outside the area you selected disappears.
-
Click Bevel to bevel, or angle, a picture's edges. FrontPage lightens the top and left edges while darkening the bottom and right ones. This creates a 3-D effect, which is handy if you're using pictures as buttons.
Editing JPEGs
One important thing to understand about JPEG files is that each time you edit one (in any program), you reduce the image's quality. That's because JPEGs stay lean and mean by automatically discarding data when saved. Not surprisingly, this data loss degrades image quality. Graphics professionals call the JPEG's format "lossy" because of this trait. (GIF files, in contrast, aren't lossy.)
Before tossing an image on a page, a lot of Web developers edit and compress their JPEGs as much as they can while still maintaining an acceptable level of quality. You measure compression in percent. For instance, you could tell a program that you want to compress a JPEG to 85 percent of its current size. The lower the percentage, the lower the quality. (Though even at 100 percent, some compression takes place.)
FrontPage has a bad habit of compressing JPEGs even further if you insert them on a page without first importing them into your site. When FrontPage saves a copy of the JPEG with your page, it automatically compresses the file up to 70 percent, which can really degrade your picture.
To avoid this:
-
Import the image into your site before you place it on a page. To do so, select File » Import. Then click Add File, browse to the image file, and then click Open. Finally, click OK to save the picture in your site and move it into your images folder. FrontPage respects the sovereignty of an imported JPEG and won't try to compress it.
-
Or, while saving your page, click the Picture File Type button, select JPEG, and change the Quality setting to 100 percent.
Due to the JPEG's talent for losing quality with each save, edit your JPEG files as few times as possible. You also might want to consider keeping unedited copies of these files in a safe place so that you can go back to the original file if the JPEG on your site grows worse for wear. Better yet, keep a backup copy of the picture in a format that doesn't lose informationlike TIF, for instance.
Resizing
Even when you find the perfect picture for your page, it doesn't always fit perfectly. You'll often need to change a picture's dimensions to make it look good.
When it comes to resizing, you're almost always better off using a full-blown graphics editing programespecially if you're drastically changing the image size. FrontPage offers its own unique options for resizing pictures, which may suffice if your needs are very simple.
Resizing by pixel
You resize a digital image by changing the height and width of a picture, which are usually measured in pixels. FrontPage's pixel-editing controls look like those in any image-editing program. But they're deceiving.
To take a look, open the Picture Properties dialog box pictured in Figure. Right-click an image and select Picture Properties.
Use the Picture Properties dialog box to set size, alignment, and other attributes.
On the Appearance tab, under the Size heading, you'll see two boxes, which display the height and width of the image. To activate these, turn on the "Specify size" checkbox. You can then readjust the size using pixels or percent.
When you're resizing in pixels, make sure that the "Keep aspect ratio" checkbox is turned on. This keeps the height and width of your picture in proportion. Without it, you could distort the image, making it look squeezed in one direction or another.
When you resize in pixels, with "Keep aspect ratio" on, you need only edit one number. The other one changes automatically.
So far, these height and width fields look like resizing tools you'd find in any image editor. But in reality, FrontPage's pixel-editing controls are just a smokescreen. Say you go in and shrink a 400 x 400 pixel image down to half its size. You may believe you've changed the size of the image file, but you haven't. FrontPage has fooled you. The actual image remains 400 x 400 pixels. What you've changed is the space on the page that the picture occupies. The 400 x 400 image now displays on the screen within a 200 x 200 pixel space. FrontPage doesn't edit the file itself, but instead tells the browser to display the picture at whatever size you've specified. FrontPage adjusts what it calls the "appearance attributes" of a picture, not the actual size of the image.
If you're resizing by very little, this approach is fine. But if you're making a drastic change, your image will appear rough or distorted. If your picture looks bad after you resize, try resampling (explained below). Another important point: if your plan is to shrink your picture's size in order to speed page download, resizing by pixel in FrontPage won't do the trick. Again, resample insteador use a real image editor like Adobe Photoshop or Photoshop Elements to change the actual picture size.
While you can shrink a picture easily, you can't really make an image much larger than it already iseven in professional quality image-editing software. Doing so inevitably makes your picture jagged and distorted. The only thing to do is start over. Go back to your scanner or digital camera and create a larger picture.
Resize by percent
Resizing by percent may also not work as you expect. In other programs, like Photoshop and Microsoft Word, you can resize pictures by percent. The key question here is: percent of what? In Word, the percentage always refers to the image itself. The image begins at 100 percent. So, if you want it half as big, you enter 50 percent and Word shrinks it. In FrontPage, percent means something very different. The percentage is relative to the browser window (orif the image is contained in a tablethe table cell size). In other words, an image set at 100 percent takes up the entire browser. One set at 50 percent takes up half the browser window. This is your first taste of fixed (pixel-specific) vs. relative (percent) sizing on a Web page. For ease of use, you probably should stick with resizing in pixels for now, but keep your percentage option in mind. It may come in handy when you start using tables.
Resampling your picture
Unlike "resizing" by pixel, resampling does change the image's actual size. You can resample at any time by right-clicking on an image and selecting Resample. When you resample, FrontPage saves a new instance of the image file within your site, using the new dimensions. In other words, if you shrink a 400 x 400 pixel image down to half its size, FrontPage will resave it as a 200 x 200 pixel image.
When should you resample? If you've shrunk an image and want the page to download faster, resample. Resampling can also smooth out a resized image that looks rough or pixilated. But beware: after you resample, you won't be able to enlarge the image again. If you do, the picture will look terrible. In fact, resampling more than once can really blur a graphic and compromise image quality.
Keep backup copies of your graphic files in a folder outside your Web site. This way, if the FrontPage picture editor ruins an image, you can import a new copy and start over.
Resizing by dragging
If accessing Picture Properties seems like one step too many, you might want to resize by dragging directly on your image. In Design view, select the image. Resizing handles appear around the picture in the form of tiny squares around the edges. Grab a corner handle and drag it until the image is the size you want. (Why grab a corner? Because, if you grab a handle on a side, top, or bottom and drag, the picture expands only in one direction and becomes distorted.)
Resizing by dragging is the same as readjusting pixels in Picture Properties. This means that FrontPage doesn't change the size of the picture fileonly the picture's display size on the page.
After you resize by dragging, FrontPage displays a Picture Actions box beneath the image. Click it to display a shortcut menu, pictured in figure.
The Picture Actions box offers a menu to assist with resizing. The first choice, Only Modify Size Attributes, is the equivalent of resizing by pixel. The second choice, Resample Picture to Match Size, is a shortcut to the resample command. The first option here is what FrontPage does with a picture resized by dragging anyway, so click the Picture Actions icon only if you want to resample instead.
Picture Placement
When you plunk an image down on a page, your job has often just begun. You'll need to spend some time fine-tuning your picture's placement. The best way to control your pictures so they play nicely with the surrounding text is to place everything within a table. Meanwhile, you can make do with a few simple tools that FrontPage provides to tweak your page layout.
Text wrapping
Whenever you insert a large picture on a line with text, it looks awkward and out of place. The cure? If you want your text to flow around your pictures gracefully, turn on text wrapping. If you do, words "wrap" around the side of your picture instead of treating the image like just another character on a line (one which happens to be huge). When you insert a picture, wrapping is automatically set to None. Unless a picture is going have a paragraph all to itself, the None setting tends to look clunky and unprofessional.
A simple click on either the Left or Right wrapping button in the Picture Properties dialog box can really help make a picture look like it belongs with the text around it. If you need to set a buffer between the picture and the surrounding text, use the Horizontal spacing and Vertical spacing fields.
Alignment
Alignment settings available in the Picture Properties dialog box control picture placement for small images plopped down in the middle of a chunk of text. If you place an image within a line of text, you can set the image to align with the bottom or top of the letters, or to be centered vertically within a line. You'll find that if a picture is larger than the text, inserting it within a line disturbs the line spacing of the paragraph. If you're inserting picture within a line of text, keep it small and use the alignment drop-down menu to reduce its impact on line spacing.
Absolute positioning
If you're a real control freak, simple alignment choices might not satisfy you. Absolute positioning is the final word in picture placement. You can set the position of your image at a precise location on your Web page and even position pictures in front of or behind each other. But this feature has its pitfalls.
Click to select an image and then click the Position Absolutely button on the Picture toolbar. A blue box surrounds the graphic. Drag the box to wherever you want it to appear on the page. If you're creating a collage of images, use the Bring to Front and Send to Back buttons on the toolbar to place images in front of or behind each other.
FrontPage actually places your picture in a layer to allow you to position it.
Use absolute positioning with caution. While the positioning of these pictures may be absolute, other elements on your page may not be, resulting in hidden text or a confusing layout. Not to mention that some older browsers don't even support absolute positioning.
Alternative Representations
A picture illustrates something that you couldn't express with words. In spite of that, you may want to add some text that briefly describes your image. The truth is, on the Web, a picture is just not enough. You should always include a short description of whatever it is you're showing. Why? See the box "Accessibility on the Web."
So how do you include a text alternative? The way you'd add any other property: right-click the image and select Picture Properties. Then click the General tab. FrontPage offers options for adding additional property information, as pictured in figure.
Within the Picture Properties General tab, you can enter alternative representations for an image, like a text description. Sometimes the Text field isn't long enough. In that case, you can use the Long Description field to feature a link to another Web page that contains detailed information about the picture. Just enter the URL, or use the Long Description browse button to link to another page in your site.
Accessibility on the Web
Why do I need to write out a description for each of my pictures?
Common courtesy. There are people out there who might not be able to see your images. Visually disabled Web surfers use screen readers that read a page's text to them. A screen reader can't read a picture, but it can read a picture's alternative text and at least give a blind or partially sighted person a better idea of what's on your page.
Many people with perfect eyesight may also need this alternative text. For reasons of security, or to speed download time, lots of folks set their browsers not to display images. Use a description to let them know whether or not they should take the extra step of actually displaying a graphic.
The Text field is where you'll enter a description of the image. This description displays as a screen tip when a visitor passes a cursor over the picture, or appears in place of the image when the browser doesn't or cannot display graphics.
Alternative text appears as a screen tip (left) or (if a viewer has configured the browser not to show images) inside the image's placeholder to explain what should be there (right).
For pictures that serve as buttons, just enter the text that's on the button. If you've used transparent or one-color images to space out your page, don't bother to type any alternative text. You'll just confuse visitors.
Images can take a long time to load. If you want to give readers a preview of what they'll eventually see, you can designate a low-resolution image of the same picture as an alternative representation. A low-resolution image contains less color and detail, so it loads faster. For example, a simple black-and-white version of a picture might serve nicely. This simpler image displays temporarily in the time it takes for the actual image to fully load within the browser. If you want to use a low-resolution image, click the browse button to the right of the Low-Res field and select the alternative picture. Make sure that it has the same dimensions as the real image.