Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 245

The Property inspector expands to show all of the available graphic attributes or collapses
to show only the most common ones. You will enter an ID for the nb_logo.gif graphic.

To enter an ID for the NextBest Fest logo graphic:

◗

1. Click the NextBest Fest logo . The logo is selected, and resize handles appear
around the selected image.

◗

2. In the Property inspector, click in the ID box, type nb_logo , and then press the
Tab key. The ID is entered for the logo, which remains selected.

◗

3. Switch to Code view, and then, on the Related Files toolbar, click the Source
Code button. The image tag for the selected image is highlighted in blue.

◗

4. Locate the id attribute, and then locate the ID you just entered in the tag.
◗

5. Return to Design view, save the page, and then preview the page in a browser.
See Figure 5-8.

Figure 5-8 Logo previewed in a browser

logo has som e
jagged edges

◗

6. Examine the logo text. There are some jagged edges around some of the letters.
◗

7. Close the browser.

What makes text look smooth to the eye is that the edges of the letters have a slight
gradient, which is called antialiasing . The GIF compression format only allows one color
to be transparent. Any other colors in the gradient become solid, which shatters the
illusion of smooth text. As a result, you sometimes see blocky sections, called artifacts ,
around the letters. Because artifacts appear around the new logo, you will replace the
GIF with a PNG that allows for gradient transparency.

Replacing a Graphic
Web sites are dynamic and updatable media. Because of this, it is frequently necessary
to replace an existing image with a new image or an updated version of the same image.
When you replace an image, the CSS styles applied to the original image are automati-
cally applied to the replacement image.
When you replace an image that does not appear anywhere else in the site and that
you don't plan to use again, you should delete its fi le from the graphics folder. This helps
keep the graphics folder organized and current. It also minimizes the fi les being stored.
One extra compressed image stored in a folder might not seem like much, but over time
as you continue to update the site, keeping unused fi les can make the contents of the
graphics folder confusing, outdated, and unnecessarily big.
You will replace the nb_logo.gif image with the new nb_logo.png image and then
delete the old image from the graphics folder.