Adobe Creative Suite 6 Design and Web Premium All-in-One For Dummies (2012)

Book VI

Dreamweaver CS6

Chapter 4: Working with Images

In This Chapter

Making images work for the web

Touring the Property inspector

Inserting Photoshop files and working with Smart Objects

Aligning images and adding space around them

Creating backgrounds from images

Creating a rollover

Inserting a Flash movie on a page

Placing images that are interesting and informative is one of the most exciting parts of building a web page. In this chapter, you see how to insert and optimize native Photoshop (PSD) files directly in Dreamweaver and how to take care of basic needs such as resizing, cropping, and positioning an image. You also find out how to create interesting backgrounds and create easy rollovers.

If you plan to follow any steps in this chapter, you need to create a site or have a practice site already open. Images are much-needed linked assets on your page — you don’t want to lose track of them in your filing system. If you don’t know how to create a site, read Chapter 3 of this minibook.

Creating Images for the Web

Placing images isn’t difficult, but you must consider the formats they’re saved in and their file sizes. (See Book IV, Chapter 10 for details on selecting the correct format and using the Save for Web feature in Photoshop.)

Putting images on a web page requires planning to make sure that sizes are exactly what you want. You also need to make sure that you don’t prevent a page from loading quickly by having too many images. This is especially true when considering mobile or tablet devices that may be loading a great deal of data over a 3G or 4G network.

If you look in the lower-right corner of the Document window, you see the page file size and its approximate download time. In Figure 4-1, the page file size is 37k (kilobytes), and the download time is 1 second, based on the assumed connection speed of 56K (kilobits) per second. You can change the download speed by choosing Edit⇒Preferences (Windows) or Dreamweaver⇒Preferences (Mac), selecting the Status Bar category, and clicking the Connection Speed drop-down list.

Figure 4-1:Check the Document window for current page size and estimated download time.

The jury is always out when you want to know how fast a page should download, but 5 seconds or less is a good target. Unless you have truly compelling content, you’ll probably lose viewers if they have to wait too long. If your page requires more time, consider distributing its content across several pages or optimizing images and files to reduce file size. If your page links to unnecessary files (for instance, a large JavaScript file that powers a slideshow on a completely different page), consider omitting those links.

Putting Images on a Page

Putting images on a web page in Dreamweaver is easier than ever, mostly because of its integration with other Adobe products. You can use menu items, copy and paste, and even drag and drop images on your Dreamweaver page. In the following sections, you not only find out how to place images, but also receive some helpful general tips related to putting graphics on the web.

Inserting an image

If you’re preparing images ahead of time, save or move the optimized images into your site folder. You can select an image from anywhere in your directory — it just adds the extra step of copying the image into your site folder.

After you open a page, you can insert an image by following these steps:

1. Click somewhere on the page to position the cursor wherever you want to place the image.

2. Select the Common category from the drop-down list at the top of the Insert panel and click the Image button or choose Insert⇒Image.

If Image isn’t the default for your Insert Image button, click and hold the arrow to the right of the button and choose Image from the drop-down list.

The Select Image Source dialog box appears.

3. Navigate to the spot where your image is located and click OK (Windows) or Choose (Mac) to place the selected image.

If your images are in your site folder, you can click the Site Root button in the Select Image Source dialog box to navigate there quickly. If an image isn’t in your site folder, an alert box asks whether you want to copy the file there now. (This is recommended.)

4. If you’re prompted to copy the image to your site’s root folder, click Yes. When the Copy File As dialog box opens, verify that the name is correct and click Save.

The Image Tag Accessibility Attributes dialog box requests that you enter alt text. (For more on alt text, see the nearby sidebar, “Gotta have that alt text.”)

5. Type a word or three that best describes your image (such as Our Family Photo) in the Alt text field and click OK.

The image is placed.

Gotta have that alt text

You’ve probably seen the term alt text a gazillion times: It’s the text that appears before an image does while a web page is loading. Alt text also appears as a tooltip when you hover the mouse cursor over an image in a web page in certain browsers.

Alt text is helpful because it tells viewers something about an image before it appears, but it’s also necessary for viewers who have turned off the option to view graphics (which is necessary for certain e-mail applications) or for users with visual impairments who rely on screen-readers. In certain cases, there are strict regulations requiring alt text for any work completed for federal and non-profit websites.

In addition, alt text is a valuable tool for indexing image content for search engines: Search engines such as Google, Bing, and Yahoo! all use alt text as a key method of indexing images for their respective image search listings.

To assign or change alt text to an image that has been placed already, type some descriptive copy in the Alt text field in the Property inspector.

Dragging and dropping an image

In addition to inserting images from the Insert panel or application menus, you can drag and place images directly from the Files panel to the page. If you’re dragging an image, the cursor follows it while you move it around the document; release the mouse button when the cursor marks the correct spot where you’d like to drop the image.

If the image is a native Photoshop (PSD) or Fireworks (PNG) file, the Image Optimization dialog box appears, giving you the opportunity to optimize the image before placing it.

You can also drag and drop an optimized image from your desktop or any other folder into a Dreamweaver page. If an image is not in your site folder, you have the opportunity to copy that image to your site folder when it’s placed.

If you’re taking advantage of the Adobe Bridge workflow, you can leave Bridge running and drag images as you need them directly from the Bridge window into your Dreamweaver page. You can access Bridge by choosing File⇒Browse in Bridge.

Getting to Know the Property Inspector

Many of the tools you use when working with images are located in the Property inspector. (See Figure 4-2.)

Figure 4-2: The Property inspector’s image-editing options.

You can choose from these properties when an image is selected:

Editing the original (in Photoshop): If you want to make a quick change, it shouldn’t have to involve a lot of directory navigation on your operating system. To edit your original image file, select it and click the Edit in Photoshop button on the Property inspector. The image is launched in Photoshop, where you can make changes and save the image again.

You can select the default image-editing application for different image file types by choosing Edit⇒Preferences (Windows) or Dreamweaver⇒Preferences (Mac)⇒Files Types/Editors. Photoshop CS6 is the primary editor for almost every image type by default.

Edit Image Settings: Choose how you want the image optimized by selecting quality settings here.

Note: You can optimize images directly from the Property inspector, but this method doesn’t provide quite the same abilities as when you place a native Photoshop or Fireworks file, because the image you’re selecting has already been optimized.

Update from Original: If you placed your image from a PSD or Fireworks original, this button becomes active when Dreamweaver detects that you’ve modified and saved the original file. Click this button to update the image on your page with the latest changes from the original. (Pretty handy!)

Cropping an image: This feature is sure to become a favorite because you can make cropping decisions right on your Dreamweaver page. Simply click the Crop tool, acknowledge the warning message that you’re editing the image, and then click and drag the handles to the size you want. Press the Enter key and you’re done!

Resampling an image: You may have heard that you shouldn’t resize an image placed on a Dreamweaver page because if you were making the image larger, it would become pixilated, and if you were making the image smaller, you were wasting lots of bandwidth downloading the file. Fortunately, you can now use the Resample button on the Property inspector after you resize the image. Just keep in mind that making the image larger still causes some quality issues, so you should reduce the file size before clicking the Resample button. If you need to make an image considerably larger, find the original and optimize it to the proper size.

To resize an image, you can either click and drag out the lower right handle of the image or type a pixel value in the W (Width) and H (Height) text fields in the Property inspector.

Brightness and contrast: If high quality is important to you, open your original image in Photoshop and make tonal corrections with professional digital imaging tools. If volume and quickly getting lots of images and pages posted are important, take advantage of the Brightness and Contrast controls built into Adobe Dreamweaver. Simply click the Brightness and Contrast button in the Property inspector, acknowledge the Dreamweaver dialog box, and adjust the sliders to create the best image.

Sharpen: Add crispness to images by applying the Sharpness controls available in Dreamweaver. As with some of the other image-editing features in Dreamweaver, you’re better off using the Unsharp mask filter in Photoshop; in a pinch, this feature is a quick and useful tool to take advantage of. To use the Sharpening feature, click the Sharpen button, acknowledge the warning that you’re changing the image, and use the slider to sharpen the image.

Placing Photoshop Files

If you’ve created artwork or prepared images in Photoshop, you can place original PSD files directly in your pages. The Image Optimization window lets you save Photoshop files into web-ready image formats such as GIF, JPEG, and PNG and scale and crop artwork before it’s placed on the page.

Photoshop Smart Objects

The ability to work with Photoshop files is useful for most designers who depend on Photoshop as part of their workflow. When you place Photoshop files on a page, Dreamweaver creates a Smart Object, an image that maintains a connection to the original Photoshop file from which it was created.

The image displays an icon that lets you know whether the original file was updated, and you can apply the changes in the original file to the image in one click.

To place a Photoshop file in your page, follow these steps:

1. Click wherever you want to place the new image and then click the Image button in the Insert panel’s Common category.

2. When the Select Image Source dialog box appears, browse and select a Photoshop PSD file and then click Choose/OK to select the image.

The Image Optimization dialog box appears. This dialog box lets you save your image in the web-friendly GIF, JPEG, or PNG formats, as shown in Figure 4-3.

Figure 4-3:From the Image Optimization dialog box, you can optimize and save a web-ready image from a placed Photoshop file.

3. In the Preset drop-down list, select the JPEG High for Maximum Compatibility option.

4. Click OK to save the image.

5. When the Save Web Image dialog box appears, navigate to your site’s root folder and click OK/Save to save the image in the appropriate folder (such as your default images folder).

6. When the Image Tag Accessibility Attributes dialog box appears, type in a concise, short description for your image (such as Man on Bike).

The new image is placed and a small icon appears in its upper left corner. This Smart Object indicator shows two green arrows, indicating that the image is up-to-date.

Select the image you placed in the preceding step list and locate the Original text field in the Property inspector — this field displays the location of the original Photoshop file. To edit the image, you can simply click the Edit in Photoshop button in the center of the Property inspector to open the source file in Photoshop.

Updating Photoshop Smart Objects

If you make changes to the original Photoshop file, the image you placed in the page displays a red-and-green arrow icon to let you know that it isn’t up-to-date.

To update a Smart Object when you see the icon (displayed as a set of circular arrows), shown in Figure 4-4, select the image and click the Update from Original button on the Property inspector to apply the new changes to the placed image.

Figure 4-4: The red and green arrows indicate the original file has been modified.

Moving the original PSD file connected to a page image displays an alert icon on the image and disables the link between the two. Keep original PSD files in a set location and be sure to revise the location of your source file by selecting the image and updating the original in the Property inspector.

Aligning an Image

Images and their adjacent text sit on the same baseline as a default, forcing text to run in one line to the right of the image. To control the wrapping of the text around the image, change the alignment of the image by selecting the image and then choosing an option from the Align drop-down list at the bottom of the Property inspector (make sure your Property Inspector is fully expanded).

The Align drop-down list provides these options:

Default: Baseline alignment is used (described in the second Bullet1).

Baseline (Default): The bottom of the image aligns with the baseline of the current line of text.

Top: The image aligns with the top of the tallest item in the line of text.

Middle: The baseline of the current line of text aligns with the middle of the image.

Bottom: The bottom of the image aligns with the baseline of the current line of text.

Text Top: The image aligns with the top of the tallest text in the line, usually (but not always) the same as ALIGN=top.

Absolute Middle: The middle of the current line aligns with the middle of the image.

Absolute Bottom: The bottom of the image aligns with the bottom of the current line of text.

Left: The image aligns to the left, and text flushes to the right of the image.

Right: The image aligns to the right, and text flushes to the left of the image.

As an alternative to the Align property, you may also use CSS (Cascading Style Sheets) to align an image relative to text. See Chapter 5 of this minibook for more information on using CSS to format text and page elements.

Adding Space around the Image

You may want to add space around an image to keep the text from butting up to it. To create a space around an image, select the image and enter values into the H Space and V Space text fields in the Property inspector. These values add space (in pixels) to the horizontal and vertical sides of the image, respectively.

If you want to add space to only one side of the image, CSS (Cascading Style Sheets) provides the ability to add margins to only one side of an image. See Chapter 5 of this minibook for more information on using CSS to format text and page elements.

In addition, you can open the image in Photoshop and choose Image⇒Canvas Size. In the Canvas Size dialog box that appears, click the middle- left square in the Anchor section and add a value in pixels to the total image size. Click the middle-right square to add the size to the left side of the image.

Using an Image as a Background

Creating backgrounds for web pages is fun and can be pursued in more ways than most people would imagine. You can create a repeating pattern with a single small image, create a watermark, or use a large image to fill an entire background. As a default, an HTML background repeats the selected image until it fills the screen. In conjunction with CSS properties, you can control or eliminate repeating behavior and even set precise positioning for a single background image.

If you’re filling a background with a pattern, be sure to create a pattern image that has no discernable edges.

To use to your advantage the default, repeated tiling for a background image, follow these steps:

1. In Photoshop, choose File⇒New to create a new image.

2. In the New dialog box that appears, create an image that’s much wider than it is high, choose RGB, choose 72 dpi, and then click OK.

For example, enter 1000 in the Width text field and 20 in the Height text field.

3. Select a foreground and background color to create a blend; then use the Gradient tool to Shift+drag from the top to the bottom of the image area to create a gradient fill.

4. Choose File⇒Save for Web, save the image as a JPEG file in your site’s web content folder, and then close the image.

See Book IV, Chapter 10 for more about the Save for Web feature.

5. In Dreamweaver, choose Modify⇒Page Properties or click the Page Properties button in the Property inspector to place the image as a background image on your web page.

If the Page Properties button isn’t visible, click the page — be sure not to select another element, such as an image.

The Page Properties dialog box appears. (See Figure 4-5.)

Figure 4-5:Modify global page properties, such as font and background image, from the Page Properties dialog box.

6. In the Page Properties dialog box, click the Browse button to the right of the background image. In the window that appears, navigate to the location of your saved background image, and then click OK.

7. Back in the Page Properties dialog box, click OK.

The image appears in the background, repeating and creating a cool background gradient across the page!

Depending on the size and resolution of a user’s monitor, your background image may be forced to repeat. Repeating a background image can yield some creative results, as shown in Figure 4-6.

Figure 4-6: An image set as a background repeats horizontally and vertically by default.

In certain cases, you may not see your background until you click the Preview/Debug in Browser button and preview the page in your default browser.

Creating Rollovers

In Dreamweaver, you can insert image objects, including image placeholders, rollover images (images that change when a viewer rolls the mouse over the image), navigation bars, and Fireworks HTML. You access these image objects by choosing Insert⇒Image Objects.

To create a rollover image, follow these steps:

1. Create the images to be used as the rollover.

You can generate these images in Fireworks, Illustrator, Photoshop, or any other application capable of saving images optimized for the web. For best results, create images that are the exact same width and height.

2. Place the cursor on the page wherever you want the rollover to appear and choose Insert⇒Image Objects⇒Rollover Image or click the Rollover Image button in the Insert panel.

The Insert Rollover Image dialog box, shown in Figure 4-7, appears.

Figure 4-7: The Insert Rollover Image dialog box.

3. Type an image name without spaces in the Image Name text field.

This name is used in the script creating the rollover.

4. Click the Browse buttons to the right of the Original Image and Rollover Image text fields to locate the image that you want to appear as a default on the page and the image that appears only when someone hovers the mouse pointer over the image.

Figure 4-8 shows an example of original and rollover images.

Figure 4-8:Image rollovers are made easy in Dream-weaver.

5. Leave the Preload Rollover Image check box selected.

This option downloads the rollover image when the page is downloaded to avoid delays in rollovers.

6. Type appropriately descriptive alt text in the Alt text field.

7. In the When Clicked, Go to URL text field, tell Dreamweaver where viewers are directed when they click your rollover image.

You can either click the Browse button to locate another page in your site or enter a URL. Note: If you are linking to a different website, you need to include the http:// prefix at the beginning of the URL. If you leave this blank, Dreamweaver will add a dead link (#) automatically.

8. Click OK.

The rollover image is created on the page.

9. To preview the new rollover image, choose File⇒Preview in Browser or click the Live View button on the Document toolbar.

If you don’t yet have a real link to use for a button or hyperlink, you can enter a pound sign (#) to create a dead link. The link or button appears clickable but doesn’t go anywhere when clicked. This option is better than pressing the space bar to create an empty space as a link, because that link will display a Page Not Found error when clicked.

Inserting Flash Content

Dreamweaver makes it easy to enhance web pages by allowing you to insert interactive content such as Flash (SWF) and Flash Video (F4V/FLV).

Think carefully about the placement of your Flash content because many devices (namely those running the Apple iOS) don’t play Flash content. However, as of this writing, a number of Android and Blackberry devices (such as the Galaxy Tablet and Playbook, respectively) still support Flash-based content. Consider providing alternate or supplemental content for non-Flash devices, or using a JavaScript or CSS-based animation behavior, if possible.

Follow these steps to place a Flash file on your Dreamweaver page:

1. Put the cursor on the page wherever you want to insert the Flash file.

2. Choose Insert⇒Media⇒SWF.

The Select SWF dialog box appears.

3. Navigate to the SWF file that you want to place and click OK (Windows) or Choose (Mac) to select the file.

4. In the Object Tag Accessibility Attributes dialog box, type a descriptive title for the movie in the Title field and click OK.

The Flash file is placed on the page.

5. On the Property inspector, click the Play button to preview your new Flash movie.

You can also adjust settings for your movie, as shown in Figure 4-9.

Figure 4-9:Use the Property inspector to adjust and preview Flash movies.