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

5. Select the image, and then draw a rectangular hotspot that covers the portion of the
image inside the div area.
6. Select the hotspot, if necessary, link the hotspot to the index.html page, and then
enter Charles Russell image and link to the home page. as the alt text.
7. Save the page and the style sheet, select the <div .header> tag in the status bar, and
then copy the selected code.
8. Open the poetry.html page, select the <div.header> in the status bar, paste the code,
and then save and close the page. You do not need to type alt text for the image
because it is covered by the image map.
9. Repeat Step 8 for the remaining pages of the site.
10. Open the artwork.html page, delete the text below the Charlie's Art heading text,
and then insert a table that has 4 rows, 3 columns, 100% table width, 0 border
thickness, 5 cell padding, 0 cell spacing, no header, and Charles Russell paintings,
painting information, and description as the summary.
11. In the fi rst cell of the fi rst row, insert the cowpunching.jpg image located in the
Tutorial.05\Case2 folder, and then enter Cowpunching Sometimes Spells Trouble as
the alt text. In the fi rst cell of the second row, insert the utica.jpg image, and then
enter Utica as the alt text. In the fi rst cell of the third row, insert the grubpile.jpg
image, and then enter Grubpile as the alt text. In the fi rst cell of the fourth row, insert
the bucker.jpg image, and then enter Bucker as the alt text.
12. Select the fi rst column, and then set the horizontal alignment to Left, set the vertical
alignment to Top, and set the width to 150.
13. In Word or another word-processing program, open the art.docx document, copy
the artist name, painting name, medium, and dimensions for each image and paste
content in the corresponding cell in the second column of the table.
14. Select the second column, and then set the horizontal alignment to Center, set the
vertical alignment to Top, and set the width to 135.
15. In the art.docx document, copy the text description for each image, and then paste it
into the corresponding cell in the third column of the table.
16. Select the third column, and then set the horizontal alignment to Left and set the ver-
tical alignment to Top.
17. Save the page, preview the page in a browser, and then close the browser and any
open pages.
18. Upload the site to your remote server, and then preview the pages over the Internet,
checking the links and new page content.
19. Submit the fi nished fi les to your instructor.

Case Problem 3

Use Photoshop
to insert and
modify Smart
Objects in the
Web pages
of a site for a
life coach.

Data Files needed for this Case Problem: tess_head.psd, tess_logo.png, tess_logo_over.png,
tess_logo.psd

Success With Tess Tess wants you to insert a heading image in the top of each page of
the site. Tess also has a new logo rollover that you will insert into a div and link to the
home page of the site. You will use Photoshop to modify the image and then insert the
rollover.

1. Open the Success With Tess site you modifi ed in Tutorial 4, and then open the
index.html page in Design view.
2. In Photoshop, open the tess_head.psd image located in the Tutorial.05\Case3 folder
included with your Data Files.