Creating Spry Elements and Alternate Style Sheets - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 498

Review Assignments

Practice the skills
you learned in
the tutorial.

There are no Data Files needed for the Review Assignments.

Dan wants you to create and insert a Spry data set into the home page of the antifest site.
The Spry data set will display images and information from the table in the lineup.html
page that will be used to promote the fest lineup.

1. Open the antifest site you modifi ed in Tutorial 7, and then open the index.html page
in Design view.
2. Open the lineup.html page in Design view, select the table that contains the band
images, names, and info, and then, in the Table box in the Property inspector type
bands to give the table an ID.
3. In the index.html page, place the insertion point after directions in the sidebar1 div,
and then press the Enter key twice.
4. In the Spry category of the Insert panel, click the Spry Data Set button. The Spry Data
Set dialog box opens.
5. Select HTML as the data type, type bands as the data set name, select Tables to
detect, and then select the lineup.html page in the local root folder.
6. In the Data Selection pane, select the arrow button next to the bands table in the
lineup.html page to select the bands table as the container from which the data set
will get its information. Click the Next button.
7. In the Other Options pane, uncheck Use fi rst row as header, and then sort the col-
umns by column1 and in ascending order.
8. In the Data Preview pane, select column0 and type images in the Column Name
box, select column1 and type bands in the Column Name box, select column2 and
type descriptions in the Column Name box, and then click the Next button.
9. In the Insert stacked containers section, select Set Up.
10. In the Spry Data Set-Insert Stacked Containers dialog box, select descriptions, click
the Delete Item button to remove it from the list, click the OK button, and then click
the Done button.
11. Save the page, preview the page in a browser, and then close the browser.
12. In the CSS Styles panel, collapse the antistyles.css style sheet, and then expand the
SpryStackedContainers.css style sheet.
13. Select the .StackedContainers.RowColumn rule, click the color swatch in the lower
pane, and then click the eyedropper pointer on the purple background of the side-
bar1 div to change the color swatch in the CSS Styles panel and the background of
the divs in the Spry data set to purple (#400040).
14. Set the text-align property to center.
15. Edit the .StackedContainers style, and delete the content from the Font-family box.
16. Select the .StackedContainers .RowContainer style, set the text-align property to cen-
ter, and then delete the border property value.
17. Save the SpryStackedContainers.css page, return to Design view, and then preview
the page in a browser.
18. Upload all the pages and dependent fi les to your remote server, and then preview
the site over the Internet, testing the new elements and styles.
19. Submit the fi nished fi les to your instructor.