8. Working with Images

Dreamweaver provides many ways to insert and adjust graphics, both within the program and in tandem with other Creative Suite tools such as Adobe Bridge, Adobe Fireworks, and Adobe Photoshop.

Reviewing web image basics

The web is not as much a place as it is an experience. And essential to that experience are images and graphics—both still and animated—that populate most websites. In the computer world, graphics fall into two main categories: vector and raster.

Vector graphics excel in line art, drawings, and logo art. Raster technology works better for storing photographic images.

Vector graphics

Vector graphics are created by math. They act like discrete objects, allowing you to reposition and resize them as many times as you want without affecting or diminishing their output quality. The best application of vector art is wherever geometric shapes and text are used to create artistic effects. For example, most company logos are built from vector shapes.

Vector graphics are typically stored in the AI, EPS, PICT, or WMF file formats. Unfortunately, most web browsers don’t support these formats. The format that is supported is SVG, which stands for Scalable Vector Graphic. The simplest way for you to get started with SVG would be to create a graphic in your favorite vector-drawing program—like Adobe Illustrator or CorelDRAW—and then export it to this format. If you are good at programming, you may want to try creating SVG graphics using Extensible Markup Language (XML). To find out more about creating SVG graphics yourself, check out www.w3schools.com/svg.

Raster graphics

Although SVG has definite advantages, web designers primarily use raster-based images in their web designs. Raster images are built from pixels, which stands for picture elements. Pixels have three basic characteristics:

• They are perfectly square in shape.

• They are all the same size.

• They display only one color at a time.

Raster-based images are usually composed of thousands, even millions, of different pixels arranged in rows and columns, in patterns that create the illusion of an actual photo, painting, or drawing. It’s an illusion, because there is no real photo on the screen, just a bunch of pixels that fool your eyes into seeing an image. And as the quality of the image increases the more realistic the illusion becomes. Raster-image quality is based on three factors: resolution, size, and color.

Raster images are built of thousands or even millions of pixels that produce the illusion of a photograph.

Resolution

Resolution is the most well known of the factors affecting raster image quality. It is the expression of image quality measured in the number of pixels that fit in one inch (ppi). The more pixels you can fit in one inch, the more detail you can depict in the image. But better quality comes at a price. An unfortunate byproduct of higher resolution is larger file size. That’s because each pixel must be stored as bytes of information within the image file—information that has real overhead in computer terms. More pixels mean more information, which means larger files.

Resolution has a dramatic effect on image output. The web image on the left looks fine in the browser but doesn’t have enough quality for printing.

Luckily, web images only have to be optimized to look best on computer screens, which are based mostly on a resolution of 72 ppi. This is low compared to other applications—like printing, where 300 dpi is considered the lowest acceptable quality. The lower resolution of the computer screen is an important factor in keeping most web image files down to a reasonable size for downloading from the Internet. Because webpages are intended for viewing and not printing, the pictures don’t need to have a resolution higher than 72 ppi.

Size

Size refers to the vertical and horizontal dimensions of the image. As image size increases, more pixels are required to create it, and therefore the file becomes larger. Since graphics take more time to download than HTML code, many designers in recent years have replaced graphical components with CSS formatting to speed up the web experience for their visitors. But if you need or want to use images, a method to ensure snappy downloads is to keep image size small. Even today, with the proliferation of high-speed Internet service, you won’t find too many websites that depend on full-page graphics.

Although these two images share the identical resolution and color depth, you can see how image dimensions can affect file size.

Color

Color refers to the color space, or palette, that describes each image. Most computer screens display only a fraction of the colors that the human eye can see. And different computers and applications display varying levels of color, expressed by the term bit depth. Monochrome, or 1-bit color, is the smallest color space, displaying only black and white, with no shades of gray. Monochrome is used mostly for line-art illustrations, for blueprints, and to reproduce handwriting.

The 4-bit color space describes up to 16 colors. Additional colors can be simulated by a process called dithering, where the available colors are interspersed and juxtaposed to create an illusion of more color. This color space was created for the first color computer systems and game consoles. Because of its limitations, this palette is seldom used today.

The 8-bit palette offers up to 256 colors or 256 shades of gray. This is the basic color system of all computers, mobile phones, game systems, and handheld devices. This color space also includes what is called the web-safe color palette. Web-safe refers to a subset of 8-bit colors that are supported on both Macintosh and Windows computers. Most computers, game consoles, and handheld devices now support higher color palettes, but 8-bit is the fallback for all web-compatible devices.

Today, some cell phones and handheld games support the 16-bit color space. This palette is called high color and sports a grand total of 65,000 colors. Although this sounds like a lot, 16-bit color is not considered good enough for most graphic design purposes or professional printing.

The highest color space is 24-bit color, which is called true color. This system generates up to 16.7 million colors. It is the gold standard for graphic design and professional printing. Several years ago a new color space was added to the mix: 32-bit color. It doesn’t offer any additional colors, but it provides an additional eight bits of data for an attribute called alpha transparency.

Alpha transparency enables you to designate parts of an image or graphic as fully or even partially transparent. This trick allows you to create graphics that seem to have rounded corners or curves and can eliminate the white bounding box typical of raster graphics.

Here you can see a dramatic comparison of three color spaces and what the total number of available colors means to image quality.

As with size and resolution, color depth can dramatically affect image file size. With all other aspects being equal, an 8-bit image is over seven times larger than a monochrome image. And the 24-bit version is over three times larger than the 8-bit image. The key to effective use of images on a website is finding the balance of resolution, size, and color to achieve the desired optimal quality.

Raster image file formats

Raster images can be stored in a multitude of file formats, but web designers have to be concerned with only three: GIF, JPEG, and PNG. These three formats are optimized for the Internet and compatible with most browsers. However, they are not equal in capability.

GIF

GIF (graphic interchange format) was one of the first raster image file formats designed specifically for the web. It has changed only a little in the last 20 years. GIF supports a maximum of 256 colors (8-bit palette) and 72 ppi, so it’s used mainly for web interfaces—buttons and graphical borders and such. But it does have several interesting features that keep it pertinent for today’s web designers: index transparency and support for simple animation.

JPEG

JPEG, also written JPG, is named for the Joint Photographic Experts Group that created the image standard back in 1992 as a direct reaction to the limitations of the GIF file format. JPEG is a powerful format that supports unlimited resolution, image dimensions, and color depth. Because of this, most digital cameras use JPEG as their default file type for image storage. It’s also the reason most designers use JPEG on their websites for images that must be displayed in high quality.

This may sound odd to you since high quality—as described earlier—usually means large file size. Large files take longer to download to your browser. So, why is the format so popular on the web? JPEG’s claim to fame comes from its patented user-selectable image compression algorithm that can reduce file size as much as 95 percent. JPEG images are compressed each time they are saved and then decompressed before they are opened and displayed.

Unfortunately, there’s a downside to all this compression. Too much compression damages image quality. This type of compression is called lossy, because it loses quality each time. In fact, it can damage an image so much that the image can be rendered useless. Each time designers save a JPEG image, they face a trade-off between image quality and file size.

Here you see the effects of different amounts of compression on the file size and quality of an image.

PNG

PNG (Portable Network Graphic) was developed in 1995 because of a looming patent dispute involving the GIF format. At the time, it looked as if designers and developers would have to pay a royalty for using the .gif file extension. Although that issue blew over, PNG has found many adherents and a home on the Internet because of its capabilities.

PNG combines many of the features of GIF and JPEG and then adds a few of its own. For example, it offers support for unlimited resolution, 32-bit color, and full alpha and index transparency. It also provides lossless compression, which means you can save an image in PNG format and not worry about losing any quality each time you open and save the file. That’s the good news.

The bad news is that although the format has been around for over 15 years, its features—such as alpha transparency—are not fully supported in older browsers.

Previewing the completed file

To get a sense of the files you will work on in this lesson, let’s preview the completed pages in the browser.

1. Launch Adobe Dreamweaver CS6.

2. If necessary, press Ctrl-Shift-F/Cmd-Shift-F to open the Files panel, and select DW-CS6 from the site list.

3. In the Files panel, expand the lesson08 folder.

4. Open the contactus_finished.html and news_finished.html files from the lesson08 folder, and preview the pages in your primary browser.

The pages include several images, as well as a Photoshop Smart Object image.

5. Close your browser and return to Dreamweaver.

Inserting an image

Images are key components of any webpage, both for developing visual interest and for telling stories. Dreamweaver provides numerous ways to populate your pages with images, using built-in commands and even using copy and paste. One method is to insert the image using Dreamweaver’s built-in tools.

1. In the Files panel, open the contact_us.html file from the site root folder (this is the file you completed in Lesson 7, “Working with Text, Lists, and Tables”).

An image placeholder appears in <div.sidebar1> to indicate where an image should be inserted.

2. Double-click the image placeholder labeled Sidebar (180 x 150).

The Select Image Source dialog box appears.

3. Select biking.jpg from the site images folder. Click OK/Open.

The image appears in the sidebar.

In the best of all worlds, your images will always appear at the place and size you specified on your pages. But frequently, images will not display as desired. This can be caused by numerous situations, such as incompatible devices or file types, as well as server and browser errors. Some users may have disabilities that prevent them from “seeing” the images altogether. What can you do when your images won’t display or can’t be seen? HTML provides an Alternate text (alt) attribute just for those situations. When the images do not appear or can’t be seen, the alternate text will be displayed instead or can be accessed by assistive devices.

In most cases, Dreamweaver will prompt you for the Alt text each time you insert a new image from scratch. When replacing an image placeholder, however, you’ll have to do it manually.

4. Insert the cursor in the Alt field in the Property inspector, type Bike to work to save gas, and press Enter/Return to the complete the entry.

5. To give your image a caption, select the placeholder text Add caption here and type We practice what we preach, here’s Lin biking to work through Lakefront Park.

You’ve successfully inserted an image using one technique, but Dreamweaver offers other techniques too. You’ll now add an image to the page using the Assets panel.

6. Insert the cursor at the beginning of the first paragraph under the heading Association Management in <section.profile>. The cursor should be inserted before the name Elaine.

7. Choose Window > Assets to display the Assets panel, if necessary. Click the Images category () icon to display a list of all images stored within the site.

8. Locate and select elaine.jpg in the list.

A preview of elaine.jpg appears in the Assets panel. The panel lists the image’s name, dimensions in pixels, and file type, as well as its directory path.

9. Note the dimensions of the image: 150 pixels by 150 pixels.

10. At the bottom of the panel, click the Insert button.

The image appears at the current cursor location.

11. In the Alternate text field in the Image Tag Accessibility Attributes dialog box, type Elaine, Meridien GreenStart President and CEO and click OK.

12. Choose File > Save.

You inserted Elaine’s picture in the text, but it doesn’t look very nice at its current position. In the next exercise, you will adjust the image position using a CSS class.

Adjusting image positions with CSS classes

The <img> element is an inline element by default. That’s why you can insert images inline into paragraphs and other elements. When the image is taller than the font size, the image will increase the vertical space for the line in which it appears. In the past you could adjust its position using HTML attributes or CSS, but the HTML-based attributes have been deprecated from the language as well as from Dreamweaver CS6. Now you must rely completely on CSS-based techniques.

If you want all the images to align in a certain fashion, you can create a custom rule for the <img> tag to apply specific styling. In this instance, we want the employee photos to alternate from right to left going down the page, so you’ll create a custom class to provide options for left and right alignment.

1. If necessary, open contact_us.html.

2. Select the New CSS Rule icon in the CSS Styles panel.

3. In the New CSS Rule dialog box, choose Class from the Selector Type menu.

4. Name the rule flt_rgt and click OK to create the rule.

The name is short for “float right,” hinting at what command you’re going to use to style the images.

5. In the Box category, choose Right from the Float menu. In the Left margin field, enter 10px and click OK.

You can apply the class from the Property inspector.

6. In the layout, select the image elaine.jpg. From the Class menu in the Property inspector, select flt_rgt.

The image moves to the right side of the section element, and the text wraps around on the left. The margin setting keeps the text from touching the edge of the image itself. You will create a similar rule to align images to the left in the next exercise.

Working with the Insert panel

The Insert panel duplicates key menu commands and has a number of options that make inserting images and other code elements both quick and easy.

1. Insert the cursor at the beginning of the first paragraph under the heading Education and Events, before the name Sarah.

2. Choose Window > Insert to display the Insert panel, if necessary.

3. In the Insert panel, choose the Common category.

Click to open the Images button.

The button drop-down menu offers seven options: Image, Image Placeholder, Rollover Image, Fireworks HTML, Draw Rectangular Hotspot, Draw Oval Hotspot, and Draw Polygon Hotspot. A hotspot is basically a hyperlink enabled by a user-defined area drawn on an image.

4. From the pop-up menu, choose Image.

The Select Image Source dialog box appears.

5. Select sarah.jpg from the default images directory and note the dimensions of the image: 150 pixels by 150 pixels. Click OK/Choose.

6. In the Image Tag Accessibility Attributes dialog box, type Sarah, GreenStart Events Coordinator in the Alternate text field and click OK.

7. Select the New CSS Rule icon in the CSS Styles panel.

8. In the New CSS Rule dialog box, choose Class from the Selector Type menu.

9. Name the rule flt_lft, and click OK to create the rule.

The name is short for “float left.”

10. In the Box category, choose Left from the Float menu. In the Right margin field, enter 10px and click OK.

11. Apply the flt_left class to this image.

The image drops down into the paragraph on the left side, with the text wrapping to the right.

12. Save the file.

Another way to insert images in your webpage is by using Adobe Bridge.

Using Adobe Bridge to insert images

Adobe Bridge CS6 is an essential tool for web designers that can quickly browse directories of images and other supported assets, as well as manage and tag files with keywords and labels. Bridge is fully integrated with Dreamweaver: You can launch it from within Dreamweaver and either drag images directly from Bridge into your layouts or use specific commands.

1. Insert the cursor at the beginning of the first paragraph under the heading Transportation Analysis, before the name Eric.

2. Choose File > Browse in Bridge.

Adobe Bridge launches. The interface in Bridge can be set up to your liking and saved as a custom workspace. For most operations, you can use the Essentials workspace, as shown.

3. Click the Folders tab to bring the Folders panel to the top. If necessary, choose Window > Folders Panel. Navigate to the folder designated as your default site images folder on your hard drive. Observe the names and types of files displayed in the folder.

Bridge displays a thumbnail image of each file in the folder. Bridge can display thumbnails for all types of graphic files, including AI, BMP, EPS, GIF, JPG, PDF, PNG, SVG, and TIFF, among others.

4. Click eric.png. Observe the Preview and Metadata panels. Note the dimensions, resolution, and color space of the image.

The Preview panel displays a high-quality preview of the selected image.

Bridge also has capabilities for helping you locate and isolate specific types of files.

5. Choose Window > Filter Panel to display the panel if it’s not visible.

The Filter panel displays a default set of data criteria—such as file type, ratings, keywords, date created, and so forth—that are then populated automatically by the contents of a particular folder. You can filter the contents to these criteria by clicking one or more of these items.

6. In the Filter panel, expand the File Type criterion. Select the JPEG File criterion.

A check mark appears beside the JPEG File criterion. The PNG file you selected earlier is no longer visible. The Content panel in the center of Adobe Bridge displays only JPEG files.

7. In the File Type criteria, select GIF Image.

A check mark appears beside the GIF Image criterion. The Content panel now displays only GIF and JPEG files. Other file types are being hidden by Bridge but still exist in the folder. You can use Bridge to insert one of these files into Dreamweaver or another Creative Suite application.

8. Select eric.jpg in the Content panel. Note the dimensions in the Metadata panel: 150 pixels by 150 pixels. Choose File > Place > In Dreamweaver.

Your computer switches back to Dreamweaver automatically. The Image Tag Accessibility Attributes dialog box appears.

9. In the Image Tag Accessibility Attributes dialog box, type Eric, Transportation Research Coordinator in the Alternate text field, and click OK.

The eric.jpg image appears in the Dreamweaver layout at the last position of the cursor.

10. Apply the flt_rgt class to this image.

11. Save the file.

Dreamweaver is not limited to the file types GIF, JPEG, and PNG; it can work with other file types too. In the next exercise, you will learn how to insert a Photoshop document (PSD) into a webpage.

Inserting non-web file types

Although most browsers will display only the web-compliant image formats described earlier, Dreamweaver allows you to choose from many different formats—the program will then automatically convert the file to a compatible format on the fly.

1. Insert the cursor at the beginning of the first paragraph under the heading Research and Development, before the name Lin.

2. Choose Insert > Image. Navigate to the resources folder in the lesson08 folder. Select lin.psd.

Notice that the Dreamweaver dialog box doesn’t offer a preview or any image specifications for the PSD file. It would be difficult or impossible using this dialog box to identify and select images saved in this format. If you’re familiar with the names of the files you want to use, you could still select them from this dialog box—otherwise, this is an ideal application for Adobe Bridge.

3. Click Cancel. Switch to or launch Adobe Bridge. Navigate to the resources folder in the lesson08 folder. Observe the images in the resources folder.

The folder contains two images: a PSD and a TIFF. Note that Bridge previews the file contents and provides important metadata for each image.

4. Click lin.psd and select File > Place > Place in Dreamweaver.

The image appears in the layout, and the Image Optimization dialog box opens—it acts as an intermediary that allows you to specify how and to what format the image will be converted.

5. Observe the options in the Preset and Format menus.

The presets allow you to select predetermined options that have a proven track record for web-based images. The Format drop-down menu allows you to specify your own settings from among five options: GIF, JPEG, PNG 8, PNG 24, and PNG 32.

6. Choose JPEG High For Maximum Compatibility from the Presets menu. Note the Quality setting.

This Quality setting produces a high-quality image with a moderate amount of compression. If you lower the Quality setting, you automatically increase the compression level and reduce the file size; increase the Quality setting for the opposite effect. The secret to effective design is to select a good balance between quality and compression. The default setting for the JPEG High preset is 80; this should be sufficient for our purposes.

7. Click OK to convert the image.

The Save Web Image dialog box appears with the name lin entered in the Save As field. Dreamweaver will add the .jpg extension to the file automatically and save the file to the default site images folder.

8. Click Save.

The Image Tag Accessibility Attributes dialog box appears.

9. Enter Lin, Research and Development Coordinator in the Alternate text field. Click OK.

The image appears in Dreamweaver at the cursor position. The image has been resampled to 72 ppi but still appears at its original dimensions, which are larger than the other images in the layout. You can resize the image in the Property inspector.

10. In the Property inspector, select the Toggle Size Constrain () icon and change the Width field to 150px.

The change to the image size is only temporary at the moment, as indicated by the Reset () and Commit () icons.

11. Click the Commit () icon.

The image resizes to 150 by 150 pixels.

12. Apply the flt_lft class to this image. Save the file.

The image now appears likes the other images in the layout, but there’s still something different about it. An icon appears in the upper-left corner that identifies this image as a Photoshop Smart Object.

Working with Photoshop Smart Objects

Unlike other images, Smart Objects maintain a connection to the original Photoshop (PSD) file. If the PSD file is altered in any manner and then saved, Dreamweaver will identify those changes and provide the means to update the web image used in the layout.

1. If necessary, open contact_us.html. Scroll down to the image lin.jpg in the Research and Development section. Observe the icon in the upper-left corner of the image.

The icon indicates that the image is a Smart Object. The circular green arrows indicate that the original image is unchanged. If you want to edit or optimize the image, you can simply right-click the image and select the appropriate option from the context menu.

To make substantive changes to the image, you will have to open it in Photoshop. (If you don’t have Photoshop installed, copy lesson08 > resources > smartobject > lin.psd into the lesson08 > resources folder to replace the original image, and then skip to step 6.) In this exercise, you will edit the image background of the image using Photoshop.

2. Right-click lin.jpg. Choose Edit Original With > Photoshop from the context menu.

Photoshop launches—if it is installed on your computer—and loads the file.

3. In Photoshop, choose Window > Layers to display the Layers panel, if necessary. Observe the names and states of any existing layers.

The image has two layers: Lin and New Background. New Background is turned off.

4. Click the eye () icon for the New Background layer to display its contents.

The background of the image changes to show a scene from a park.

5. Save the Photoshop file.

6. Switch back to Dreamweaver.

In a moment or two, the Smart Object icon in the upper-left corner changes to indicate that the original image has been changed. The icon appears only within Dreamweaver itself; visitors see the normal image in the browser. You don’t have to update the image at this time, and you can leave the out-of-date image in the layout for as long as you want. Dreamweaver will continue to monitor its status as long as it’s in the layout. But for this exercise, let’s update the image.

7. Right-click the image and choose Update From Original from the context menu.

This Smart Object and any other instances of it change to reflect the new background.

8. Save the file.

As you can see, Smart Objects have advantages over a typical image workflow. For images that are changed or updated frequently, using a Smart Object can simplify updates to the website in the future.

Copying and pasting images from Photoshop and Fireworks

As you build your website, you will need to edit and optimize many images before you use them in your site. Adobe Fireworks and Adobe Photoshop are both excellent programs for performing these tasks. A common workflow is to manually export the optimized GIF, JPEG, or PNG to the default images folder in your website when you’re finished working on it. But sometimes it’s faster to simply copy images and paste them directly into your layout. Whether you’re working with Fireworks or Photoshop, the steps are nearly identical and the result is the same; in this exercise, feel free to use whichever program you are most familiar with.

1. Launch Adobe Fireworks or Adobe Photoshop, if necessary. Open matthew.tif from the lesson08 > resources folder. Observe the Layers panel.

The image has only one layer. In Fireworks, you can select multiple layers and copy and paste them into Dreamweaver. In Photoshop, either you will have to merge or flatten layers before you copy and paste them or you will have to use the command Edit > Copy Merged to copy images with multiple active layers.

2. Press Ctrl-A/Cmd-A to select the entire image. Press Ctrl-C/Cmd-C to copy the image.

3. Switch to Dreamweaver. Scroll down to the section Information Systems in contact_us.html. Insert the cursor at the beginning of the first paragraph in this section, before the name Matthew.

4. Press Ctrl-V/Cmd-V to paste the image from the clipboard.

The image appears in the layout, and the Image Optimization dialog box opens.

5. Select the preset PNG24 for Photos (Sharp Details), and select PNG 24 from the Format menu. Click OK.

The Save Image dialog box appears.

6. Name the image matthew.png, and select the default site images folder, if necessary. Click Save.

The Image Description (Alt text) dialog box appears.

7. Enter Matthew, Information Systems Manager in the Image Description (Alt text) field. Click OK.

The matthew.png image appears in the layout. As in the earlier exercise, the PNG image is larger than the other images.

8. In the Property inspector, change the size to 150px by 150px. Click the Commit () icon to apply the change permanently.

9. Apply the class flt_rgt to matthew.png.

The image appears in the layout at the same size as the other images and aligned to the right. Although this image came from Fireworks or Photoshop, it’s not “smart” like a Photoshop Smart Object and can’t be updated automatically. It does, however, keep track of the location of the original image if you want to edit it later.

10. In the layout, right-click the matthew.png image and choose Edit Original With > Browse from the context menu.

11. Navigate to and select the program Fireworks or Photoshop on your hard drive. Click Open.

The program launches and displays the original TIFF file. You can make changes to the image and copy and paste it into Dreamweaver by repeating steps 2 through 9. Although there’s no way to automatically replace the image, as with Smart Objects, there’s a more efficient way than using copy and paste. Photoshop users should skip to step 13.

12. In Fireworks: Choose File > Image Preview. In the Options mode, select PNG 24 from the Format menu. In the File mode, change the Width and Height fields to 150px. Click Export.

The Image Preview dialog box allows you to specify the export size of the image. Fireworks will remember the specifications you select in this dialog box when you save and close the file. Fireworks users can skip to step 15.

13. In Photoshop: Choose File > Save For Web. Choose PNG-24 from the Preset menu. Change the Image Size Width field to 150px. Click Save.

The Save For Web dialog box appears.

14. Navigate to the default site images folder and click to select the existing matthew.png file.

The name matthew.png appears in the Filename field of the dialog box.

15. Click Export/Save.

16. Switch back to Dreamweaver. Scroll down to view matthew.png in the Information Systems section.

No further action is needed to update the image in the layout, because you saved the new image over the original file. As long as the filename hasn’t changed, Dreamweaver isn’t concerned and no other action is necessary. This method saves you several steps and avoids any potential typing errors.

17. Save the file.

Copy and paste is just one of the handy methods for inserting images. Dreamweaver also allows you to drag images into your layout.

Inserting images by drag and drop

Most of the programs in the Creative Suite offer drag-and-drop capabilities and Dreamweaver is no exception.

1. Open the news.html file you created in the last lesson from the site root folder.

2. Choose Window > Assets to display the Assets panel, if necessary. For this exercise, the panel should be docked. Select Window > Workspace Layout > Reset Designer to restore the default panel configuration, if necessary.

3. Click the Images icon in the Assets panel.

4. Drag city.jpg from the panel to the beginning of the first paragraph under the heading Green Buildings earn more Green.

The Image Tag Accessibility Attributes dialog box appears.

5. In the Alternate text field, enter Green buildings are top earners and click OK.

6. Apply the class flt_lft to the image. Save the file.

It takes a steady hand and a little practice to perfect your drag-and-drop technique, but it’s a good way to get images into your layout quickly.

Optimizing images with the Property inspector

Optimized web images try to balance image dimensions and quality against file size. Sometimes you may need to optimize graphics that have already been placed on the page. Dreamweaver has built-in features that can help you achieve the smallest possible file size while preserving image quality. In this exercise, you’ll use tools in Dreamweaver to scale, optimize, and crop an image for the web:

1. Insert the cursor at the beginning of the first paragraph under the heading Shopping green saves energy. Choose Insert > Image. Select farmersmarket.png from the site images folder and click OK/Choose.

2. In the Alternate text field, enter Buy local to save energy and click OK.

3. Apply the class flt_rgt to the image.

The image is too large and could use some cropping. To save time, you can use tools in Dreamweaver to fix the image composition.

4. If necessary, choose Window > Properties to display the Property inspector.

Whenever an image is selected, image-editing options appear in the lower-right corner of the Property inspector. The buttons here allow you to edit the image in Fireworks or Photoshop or to adjust various settings in place. See the sidebar “Dreamweaver’s graphic tools” for an explanation of each button.

There are two ways to reduce the dimensions of an image in Dreamweaver. The first method changes the size of the image temporarily by imposing user-defined dimensions.

5. Select farmersmarket.png. In the Property inspector, select the Toggle Size Constrain () icon and change the image width to 300px.

The height automatically conforms to the new width. Dreamweaver indicates that the new size is not permanent by displaying the current specifications in bold and the Reset () and Commit () icons.

6. Click the Reset () icon.

The image returns to its original size. The image can also be resized interactively.

7. Drag the lower-right corner to scale the image down to a width of 350 pixels. If you hold down the Shift key as you start scaling, the height will change proportionately; otherwise, select the Toggle Size Constrain () icon when you’re finished to enforce proportionate scaling.

The Reset () and Commit () icons appear in the Property inspector.

8. Click the Commit () icon.

A dialog box appears that indicates the change will be permanent.

9. Click OK.

Dreamweaver can also crop images within the program.

10. Click the Crop () icon in the Property inspector.

A dialog box appears that indicates that the action will permanently change the image. Click OK. Crop handles appear on the image.

11. Crop the image to a width and height of 300 pixels.

12. Press Enter/Return to finalize the change.

13. Save the file.

Bonus exercise: completing the news page

The news page still needs a couple of images and a caption for the sidebar. Take a few minutes and apply some of the skills you have learned in this lesson to complete the page.

1. Using any of the techniques you have learned in this lesson, replace the sidebar image placeholder with sprinkler.jpg. Use the following Alt text: Check watering restrictions in your area.

2. Add the following caption to the sidebar: The Meridien city council will address summer watering restrictions at the next council meeting.

3. In the article Recycling isn’t always Green, insert the recycling.jpg image with the Alt text Learn the pros and cons of recycling. Apply the class flt_lft.

4. Save all files.

In this lesson, you learned how to insert images and Smart Objects into a Dreamweaver page, work with Adobe Bridge, copy and paste from Fireworks and Photoshop, and use the Property inspector to edit images.

There are numerous ways to create and edit images for the web. The methods examined in this lesson show but a few of them and are not meant to recommend or endorse one method over another. Feel free to use whatever methods and work-flow you desire based on your own situation and expertise.

Review questions

1. What are the three factors that determine raster image quality?

2. What file formats are specifically designed for use on the web?

3. Describe at least two methods for inserting an image into a webpage using Dreamweaver.

4. True or false: All graphics have to be optimized outside of Dreamweaver.

5. What is the advantage of using a Photoshop Smart Object over copying and pasting an image from Photoshop?

Review answers

1. Raster image quality is determined by resolution, image dimensions, and color depth.

2. The compatible image formats for the web are GIF, JPEG, and PNG.

3. One method to insert an image into a webpage using Dreamweaver is to use the Insert panel. Another method is to drag the graphic file into the layout from the Assets panel. Images can be copied and pasted from Photoshop and Fireworks. Images can also be inserted from Adobe Bridge.

4. False. Images can be optimized even after they are inserted into Dreamweaver by using the Property inspector. Optimization can include rescaling, changing format, or fine-tuning format settings.

5. A Smart Object can be used multiple times in different places on a site, and each instance of the Smart Object can be assigned individual settings. All copies remain connected to the original image. If the original is updated, all the connected images are immediately updated as well. When you copy and paste all or part of a Photoshop file, however, you get a single image that can have only one set of values applied to it.