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

the summary, and then click the OK button to insert the table into the page. ( Hint : In
Dreamweaver, the table appears below the navigation system, but in a Web browser,
the table will display to the right of the navigation system.)
15. Click in the upper-left cell, insert the bl_cd.jpg image located in the Tutorial.05\
Review folder, type black lab cd cover as the alt text, and then, in the Property
inspector, set Horz to Left and set Vert to Top.
16. Click in the fi rst cell of the second row, insert the sc_cd.jpg image located in the
Tutorial.05\Review folder, type sloth child cd cover as the alt text, and then, in the
Property inspector, set Horz to Left and set Vert to Top.
17. Drag the right border of the fi rst column to the left so that it is snug against the
album cover art.
18. Click in the second cell of the top row, type black lab , apply the h2 tag, set Horz to
Left, and then set Vert to Top.
19. Repeat Step 18 to enter and format sloth child in the second cell of the second row,
and then drag the right border of the second column to the left so that it is snug
against the text. (If the footer is over the second row of the table, click in the con-
tainer div, below the sidebar 1 div, and press Enter if necessary. This should send the
footer below the table.)
20. Using Word or another word-processing program, open the bands.docx document
located in the Tutorial.05\Review folder, copy the black lab text, paste the text into
the table in the fi rst cell of the third column, and then delete the words “Black Lab”.
21. Repeat Step 20 to enter the sloth child text in the second cell of the third column.
22. Select the third column of the table, and then set Horz to Left and Vert to Top.
23. Save the page, preview the page in a browser, notice that the table is used to lay out
the content, and then close the browser.
24. Upload all the pages and dependent fi les to your remote server, and then preview
the site over the Internet.
25. Submit the fi nished fi les to your instructor.

Case Problem 1

Add a logo
rollover and
create tables
to insert page
content for a
Web site about
an independent
skateboard
company.

Data Files needed for this Case Problem: m_logo.psd, m_logo_over.psd, m_logo.jpg,
m_logo_over.jpg, asher_feehan.jpg, corey_williams.jpg, dustin_gonzalez.jpg,
paris_milan.jpg

Moebius Skateboards As you continue working on the Moebius Skateboards site, you
will add a rollover containing new logo art to the pages of the site. You will also create
a table in the team.html page to organize content, which includes each team member's
picture and name.

1. Open the Moebius Skateboards site you modifi ed in Tutorial 4, and then open the
index.html page in Design view.
2. Delete the logo text from the page. In its place, insert a rollover named
moebius_roll , using the m_logo.psd and m_logo_over.psd images located in the
Tutorial.05\Case1 folder included with your Data Files, compressed as JPEGs
and inserted as Smart Objects, with a link to the index.html page and Moebius
Skateboards logo linked to the home page. as the alt text. (If you do not have
Photoshop, create the rollover using the m_logo.jpg and m_logo_over.jpg images.)
The logo is inserted at the bottom of the page and is centered in the page.
3. Select the rollover by clicking the <a> tag in the status bar to select all the code for
the rollover, copy the code, and then, in each of the other pages, replace the logo
text with the new logo rollover.