Editing a Picture on a Page | Microsoft Expression Web For Dummies

Just because your picture is sitting there on your page doesn't mean that you can't change it. In fact, as you fiddle with your pages to get them looking the way you want, you most likely need to tinker with your pictures, too. Use the tools on the Picture toolbar to make minor adjustments to the picture or to change how it looks on the page. For more complex work, however, do your picture editing in a full-blown graphics program. You can set up Expression Web to open pictures in the graphics editor of your choice.

Tip

If you have Microsoft Office installed on your computer, you can make minor changes in the Microsoft Office Picture Manager. This miniprogram gives you all the image editing options on the Pictures toolbar plus a few more, such as red-eye removal and autocorrect.

Organizing picture files

Every Web designer has her preferred way to organize picture files in a Web site. Some prefer to create one folder (often named images) and place all pictures used in the whole Web site there. Others create separate image folders inside subfolders and store images specific to that area there. (You can see an example of this type of organization in the template Web sites provided with Expression Web.) How you decide to organize your picture files is up to you, but it helps to spend a little time upfront thinking about what makes the most sense, depending on the size of your Web site. For small sites with a manageable number of pictures, one centrally located image folder is probably sufficient. But if your Web site contains hundreds of pictures, you probably want to group their files into subfolders or create an image folder inside each subfolder of your Web site.

Regardless of which way you organize your picture files, here are a few tips to keep in mind:

If the same picture is used on multiple pages, always link to the same picture file and store it in a central location; if your site is very large, you could create a folder named shared_images for these files. If you create duplicate versions of the same pictures, you unnecessarily bloat your Web site size, which affects how fast your pages are downloaded and displayed.
Give picture files meaningful names that organize them alphabetically and help identify them at a glance. A Web designer we know (who's also a librarian) names her picture files with a combination of their function and their description. For example, she names all pictures used for page backgrounds backgrnd_nameofpicture or all pictures for buttons button_ nameofbutton. This naming convention groups similar picture files and helps her more easily identify them at a glance and find the one she needs quickly.

Editing a picture in a graphics program

You can launch any number of graphics programs from within Expression Web and set your favorite as the default editor for images. To add a graphics editor to Expression Web, follow these steps:

Choose Tools Application Options.

The Application Options dialog box opens.
Click the Configure Editors tab.
In the Extensions list box, scroll until you see the entry for image files (jpg jpeg gif png), and then select it, as shown in Figure 5-4.

Figure 5-4: The Configure Editors tab in the Application Options dialog box.
If the program you want isn't listed, click the New Editor icon above the Editors list box.

The Open With dialog box opens, listing all applications that Expression Web could find installed on your hard drive. If you don't see the program you want to use (it might be on a network drive), click the Browse button and navigate to the application by using the options in the Browse dialog box.
In the Open With dialog box (or the Browse dialog box), click the desired application and click OK (click Open in the Browse dialog box).

The selected application appears in the Editors list box.
To make an application the default editor, click the application name and then click the Make Default button.
When you're finished, click OK to close the Application Options dialog box.

Tip

You can add as many graphics editors to this list as you want.

To pick which graphics program you want to use to open the picture, follow these steps:

In the page's Design view, right-click the picture.

Or, in the Folder List task pane, right-click the picture file icon.
From the pop-up menu that appears, click Open With and then click the program.

The graphics program opens and loads your picture file.

To open a picture in the default graphics editor, in the Folder List task pane, double-click the picture file icon.

Setting a picture's display dimensions

Expression Web enables you to specify the width and height of a picture as it appears when viewed with a Web browser. By doing so, you don't affect the size of the graphics file itself; you affect only the dimensions of the picture as it appears inside a Web page. (Remember that the picture that appears in the Web browser and in Design view is a reference to the original picture file that's still sitting safely in a folder somewhere-on your hard drive, a network drive, or the server where your Web site is hosted.) It's kind of like looking at a small object through binoculars; the binoculars make the object look bigger, but the size of the object doesn't change.

You can use Expression Web to adjust the dimensions of your Web pictures, either in pixels or as a percentage of the browser window size.

Tip

To resize a picture quickly, in the page, click the picture and then drag the size handles that appear around the picture. If you want to maintain the picture's proportions (always recommended for JPEG photographs because of their resizing issues), hold down the Shift key while dragging the handles.

For more precise control over dimensions, follow these steps:

In the page, double-click the picture.

The Picture Properties dialog box appears.
Click the Appearance tab.

The Width and Height text boxes already contain the picture's dimensions.
To change the picture's dimensions, select the Specify Size check box, and then type new numbers in the Width and Height text boxes.

You can specify a number of pixels, or you can choose a percentage of the browser window. To maintain the correct proportion, select the Keep Aspect Ratio check box. (Always select this option when working with JPEG photographs.)
Click OK to close the dialog box and adjust the picture's dimensions.

REMEMBER

Unless you're just making minor size adjustments, you should resize your photos in a graphics program and then resave them in Expression Web. If you must change the photo slightly, always remember to maintain the same width and height proportions by holding down the Shift key when dragging or, in the Picture Properties dialog box's Appearance tab, make sure that the Keep Aspect Ratio check box is selected.

Resampling a picture

In the "Setting a picture's display dimensions" section, earlier in this chapter, we explain how to set a picture's display dimensions, and we mention that by changing dimension settings, you don't affect the dimensions of the graphics file itself-only the size as it appears inside a Web page. That is true. However, we're about to go back on our word.

If you decide that you prefer the new size of the picture, you can tell Expression Web to resample (or optimize) the picture to match its new size. Resampling doesn't perform magic, but it can smooth out the rough edges that sometimes appear when you resize a photograph. Resampling can also reduce the file size a bit. To resample a picture, follow these steps:

Change the dimensions of the picture by dragging, as described in the previous section, and then click the Resample button on the Pictures toolbar.

If the Pictures toolbar isn't visible, choose View Toolbars Pictures.

You can also click the little Picture Actions menu icon in the lower-right corner of the picture (click the picture to select it if you don't see this icon) and then choose Resample Picture to Match Size.
Click Save to save the page and, in the Save Embedded Files dialog box, save the picture with a different name.

Warning
If you save the picture file with the same name, you overwrite the original picture file. Save it with a different name to keep the original file unchanged.

Creating a transparent GIF

The concept of a transparent GIF is more easily demonstrated than explained. In Figure 5-5, the image on the top is a regular GIF. See how the image's background color wrestles with the background color of the page? This problem disappears if you make the GIF's background color transparent, like the background of the image on the bottom. The transparent GIF blends nicely with the rest of the page.

image from book
Figure 5-5: A regular and a transparent GIF.

A transparent GIF has one of its colors erased (generally the background color) so that the color of the page shows through. The Pictures toolbar contains a "magic eraser" that can make regular GIFs transparent with a couple of clicks.

Warning

A GIF can have only one transparent color. Whichever color you slate for erasure disappears throughout the graphic. Unless the color you choose is unique, your GIF resembles Swiss cheese, because see-through spots appear throughout the picture. To avoid this problem, make sure that the GIF's background color doesn't appear anywhere else in the graphic. If you're working with ready-made graphics, you may need to alter them in a graphics program first.

To transform a regular GIF into a transparent GIF, follow these steps:

Insert the GIF of your choice into your page.

See the section "Adding a Picture to Your Page," earlier in this chapter.
In the page, click the picture.
On the Pictures toolbar, click the Set Transparent Color button and then, in the picture, move the cursor over the color you want to erase.

As you move the cursor over the picture, it turns into a little pencil eraser with an arrow sticking out the top.
Click the mouse button.

The color disappears!

To change a picture's transparent color, click the Set Transparent Color button and then click a different color inside the picture. The original color reappears, and the newly chosen color becomes transparent.

To turn a transparent GIF back into a regular GIF, click the Set Transparent Color button and then click the transparent area. The old color comes back.

Warning

If you try this trick on a JPEG image, Expression Web prompts you to convert the picture to GIF format. (GIF and PNG are the only Web graphics formats that can be made transparent.) Proceed with care, however, because the GIF format can't accommodate as many colors as JPEG can, and your picture's quality and file size may suffer as a result. Again, turn to your graphics program for this kind of picture editing.

Cropping a picture

Cropping a picture involves trimming away parts of the picture and leaving only the stuff you like. To crop a picture, do this:

In the page, click the picture you want to crop.
On the Pictures toolbar, click the Crop button.

A set of handles and a cropping border, shown in Figure 5-6, appear inside the selected picture. The handles, which are shaped like little squares, allow you to change the shape of the cropping border (the dotted lines).

Figure 5-6: Cropping a picture.
Click and drag one of the handles, and keep reshaping the cropping border until it surrounds the part of the picture you want to keep intact.

You can also click inside the cropping border and drag the border around without reshaping it. After you crop the picture, the stuff inside the cropping border stays, and the stuff outside the border goes.
After you get the cropping border right where you want it, click the Crop button again.

Snip! The unwanted portion of the picture goes away.

image from book If you decide that you don't like the newly cropped picture, click the Undo button on the Common or Standard toolbar to start over.

REMEMBER

Cropping a picture changes the actual image file. If you want to keep the original picture file unchanged, save the page and, when the Save Embedded Files dialog box pops up, save the cropped picture file with a different name.

Applying a special effect to a picture

The Pictures toolbar contains a few tools that apply special visual effects to your pictures. Table 5-1 shows the buttons on the Pictures toolbar and explains what effects the buttons apply. To use any of these effects, click the picture you want to change and then click the corresponding button.

Table 5-1: Visual Effects Options on the Pictures Toolbar
Open table as spreadsheet
Button	Button Name	What It Does
	Bring Forward and Send Backward	Increases and decreases the picture's z-index value; used when positioning pictures on a page in relation to other elements. (We talk about positioning in Chapter 8.)
	Rotate Left and Rotate Right	Rotates the picture 90 degrees to the left or right.
	Flip Horizontal and Flip Vertical	Flips the picture horizontally and vertically.
	Increase Contrast and Decrease Contrast	Increases or decreases the picture'scontrast.
	Increase Brightness and Decrease Brightness	Increases or decreases the picture's brightness.
	Color	Shows two pop-up options: Grayscale and Washout (useful when you want inactive graphical hyperlink buttons to look inactive in your page).
	Bevel	Transforms a regular, flat picture into a raised button of sorts; works best with square and rectangular graphics.
	Select	"Turns off" a button effect and returns the cursor to its usual cursor function.
	Rectangular	Hotspot Creates a rectangular hotspot. (See Chapter 4 for details about hotspots.)
	Circular Hotspot	Creates a circular hotspot. (See Chapter 4 for details about hotspots.)
	Polygonal Hotspot	Creates a polygonal hotspot. (See Chapter 4 for details about hotspots.)
	Highlight Hotspot	Highlights the hotspots inside an image map. (See Chapter 4 for details about hotspots and image maps.)
	Restore	Returns the picture to its original state if you're not happy with any of the effects. (Just be sure not to save the changes first; otherwise, the Restore button doesn't work.)

Deleting a picture

Erasing a picture from your page hardly takes a thought. Just click the picture and press the Backspace or Delete key. That's it. (Remember that this action deletes only the reference to the picture file on this page. The picture file itself remains in your Web site folder.)