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

Review Assignments

Practice the skills
you learned in
the tutorial.

Data Files needed for the Review Assignments: anti_logo.psd, anti_logo_over.psd,
anti_logo.jpg, anti_logo_over.jpg, bl_cd.jpg, sc_cd.jpg, bands.docx

Cat wants you to replace the logo text on the home page with a rollover image, and then
add that image to every page of the site. If you have Photoshop, you will add a Smart
Object; otherwise, you will use JPEG images. You will insert a div that wraps around the
new rollover and apply a new style to the div. Cat also wants you to add album images,
band names, and band descriptions to the lineup.html page as new bands sign on to play
at the fest. You will organize this page content in a table.

1. Open the antifest site you modifi ed in Tutorial 4, and then open the index.html page
in Design view.
2. In the Document window, select the antifest header text, and then, in the Common
category of the Insert panel, click the Rollover Image button in the Images list.
3. In the Image name box, type antifest_roll .
4 . If you are using Photoshop: Click the Original image Browse button, double-click
anti_logo.psd located in the Tutorial.05\Review folder included with your Data Files,
set the format as JPEG and the quality to 80, click the OK button, and then click the
Save button to save a copy of the Smart Object in the site's graphics folder. Repeat
this process to insert anti_logo_over.psd as the rollover image.
If you are not using Photoshop: Click the Original image Browse button, double-click
anti_logo.jpg located in the Tutorial.05\Review folder included with your Data Files,
click the Rollover image Browse button, and then double-click anti_logo_over.jpg .
5. In the Alternate text box, type antifest logo and link to the home page.
6. In the When clicked, Go to URL box, type index.html , and then click the OK button
to insert the logo rollover in the page.
7. Delete the old logo text from the page.
8. Create a new Class style named .center and defi ned in the antistyles.css style sheet.
In the Block category, select center from the Text-align list, and then click the OK
button. (If a dialog box opens, indicating that center is a standard HTML tag, click
the Yes button to use the name anyway. This class style won't confl ict with the tag.)
9. In the status bar, select the <a> tag (not just the anti_logo image), and then, in the
Layout category of the Insert panel, click the Insert Div Tag button.
10. In the Insert Div Tag dialog box, select Wrap around selection, select center from the
Class list, and then click the OK button to insert the div around the rollover code.
( Hint : If the image is not centered, select the <a> tag in the status bar, switch to Code
view, remove any extra spaces and so on outside the <a> tags and inside of the div.)
Save the page and save the style sheet.
11. In the status bar, select the <div.center> tag to select the div surrounding the rollover,
and then copy the div.
12. Open the directions.html page in Design view, select the antifest logo text, paste
the div to replace the text with the logo rollover, and then save and close the page.
Repeat this process to replace the logo text with the logo rollover in all the other
pages of the site.
13. Open the lineup.html page, select the “coming soon.” text, type As we start to
verify our lineup, we will post information about new bands here, so check back
frequently. , and then press the Enter key.
14. In the Common category of the Insert panel, click the Table button. In the Table dia-
log box, create a table with 3 rows, 3 columns, 100% table width, 0 border thick-
ness, 5 cell padding, 0 cell spacing, no header cells, Table contains band album
artwork, band names, and band descriptions for bands performing at antifest. as