FrontPage 2003 (The Missing Manual)
4.3. Formatting Pictures
Okay, so you've got an image on your page, which is very exciting. But perhaps it came out larger than you wanted it to? Also, maybe it's shoved your text off to the side, and the page layout is now a disaster. 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. 4.3.1. 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 (see Figure 4-2). Select View
To edit a graphic within FrontPage, select the image, and then choose from the following options on the Pictures toolbar:
4.3.2. 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. 4.3.2.1 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 4-3. Right-click an image and select Picture Properties.
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. Note: 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. Note: 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. 4.3.2.2 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. Later in this book, you'll read more about these issues. 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. 4.3.2.3 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. Tip: 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. 4.3.2.4 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 4-4.
4.3.3. Setting 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, which you'll learn about in Chapter 5. Meanwhile, you can make do with a few simple tools that FrontPage provides to tweak your page layout. 4.3.3.1 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 (see Figure 4-3) 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. 4.3.3.2 Alignment
Alignment settings available in the Picture Properties dialog box (see Figure 4-3) 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. 4.3.3.3 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. Note: FrontPage actually places your picture in a layer to allow you to position it. Chapter 8 covers layers and absolute positioning in depth. 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. 4.3.4. 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 4-5.
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 (see Figure 4-6).
Note: 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. |