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

◗

4. In the Image name box, type logo_rollover to name the image.
◗

5. Next to the Original image box, click the Browse button, navigate to the graphics
folder in the root folder of your site, and then double-click the nb_logo.png Smart
Object. Dreamweaver will remember that the image is a Smart Object every time
you place an instance of the image into a page in the site.

◗

6. Next to the Rollover image box, click the Browse button, navigate to the ps_files
folder in the local root folder of your site, and then double-click nb_logo_over.psd .
The Image Preview dialog box opens so you can create the optimized Smart Object.

◗

7. Select PNG 32 from the Format list, and then click the OK button. The Save Web
Image dialog box opens.

◗

8. Save the nb_logo_over.png image in the graphics folder in the site's root folder.
◗

9. Check the Preload rollover image check box, if necessary, type NextBest Fest
Logo and link to the home page. in the Alternate text box, type index.html in
the When clicked, Go to URL box, and then click the OK button. The logo rollover
is inserted into the page and remains selected.

◗

10. In the Property inspector, click the Class arrow, and then click logostyle .
In the Document window, deselect the logo rollover. See Figure 5-35.

Figure 5-35 Final logo rollover in the home page

PSD logo rollover

The logo rollover is complete and ready to add to every page of the site. You will copy
the new rollover, and then paste it in each page.

To add the logo rollover to the other pages in the site:

◗

1. In the Document window, select the logo , and then, on the status bar, select the
<a.logostyle> tag. The <a.logostyle> tag surrounds all the code for the logo and
the rollover.

◗

2. On the Application bar, click Edit , and then click Copy . The code is copied to the
Windows Clipboard.

◗

3. Open the about.html page in Design view, and then select the logo . You will
replace this older logo.

◗

4. On the Application bar, click Edit , and then click Paste . The logo is pasted in
the page.

◗

5. Select the logo . The logo ID logo_rollover appears in the Property inspector, con-
firming that the original logo image was replaced with the rollover logo.