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

Create a print
style sheet
so users of a
Web site for an
independent
skateboard
company can
easily print pages
of the Web site.

Case Problem 1

There are no Data Files needed for this Case Problem.

Moebius Skateboards Corey has received feedback from users that the pages of the
Moebius Skateboards site are diffi cult to print. To alleviate this problem, Corey wants you
to specify the main style sheet for the screen media type and create an alternate style
sheet for the print media type. Then you'll link both style sheets to all the pages.

1. Open the Moebius Skateboards site you modifi ed in Tutorial 7, and then open the
index.html page in Design view.
2. In the Files panel, expand the stylesheets folder, and then duplicate the moebius.css
style sheet.
3. Rename Copy of moebius.css as moebius_print.css .
4. In the CSS styles panel, click the Attach Style Sheet button. In the Attach External
Style Sheet dialog box, browse to the new style sheet and open it, click the Link but-
ton in the Add as section, if necessary, select print from the Media list, and then click
the OK button.
5. Switch to Code view, in the head content of the page, locate the new link code
(<link href=”stylesheets/moebius_print.css” rel=”stylesheet” type=”text/css”
media=”print” />). Dreamweaver placed the media type attribute into the code
because you specifi ed the style sheet for print media.
6. Drag the link code up the page to the line below the link to the main style sheet.
( Hint : You might need to insert a blank line below the fi rst link, and then move the
new code to the blank line.) Both style sheets are linked to the page.
7. In the top link, directly after the last “ (quotation mark), press the Spacebar and type
media=”screen” to add a media attribute of screen to the link code for the main
style sheet, save the page, and then return to Design view.
8. In the All pane of the CSS Styles panel, collapse the style sheets if needed. Each style
sheet is designated with a media type in the CSS Styles panel.
9. From the Dynamic Related Files toolbar, open the moebius_print.css style sheet, and
switch to Code view. You will edit and delete styles from the print style sheet.
10. In the body,td,th style, change the font-size to 10pt. In the nav style, delete the rules,
and then type display: none; to hide the element from view in the print version of
the page.
11. Delete the styles for the body tag, all of the a tags, the h2 tag, and the h3 tag.
12. In the #container style, change the background-color to #FFF and change the width
to 7in.
13. In the #logo style, change the background-color to #FFF.
14. In the #team style, delete the two existing rules, and then type display: none; to hide
the element from view.
15. Save the style sheet, return to Design view, and then, on the Style Rendering toolbar,
click the Render Print Media Type button to view the page with the print styles.
16. Preview the page in a browser, print preview the page from the browser, and then
close print preview and the browser.
17. Switch to Code view, and then click the Source Code button on the Related Files
toolbar.
18. In the head area of the page, copy the code for the two link tags.
19. Open the about.html page in Code view, select the existing link tag in the head of
the page, paste the code you copied from the home page, and then save the page.
20. Repeat Step 19 for all the other pages of the site to link them to the print style sheet
and the screen style sheet.