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

Removing Elements from Display
Another way to optimize a Web page for printing is to remove elements that are not
needed, are distracting, or do not work in a print version. For example, navigation links
are unnecessary and are nonworking elements in a print version of the page. Also, an
element such as the features div that contains the tickets image in the NextBest Fest site
is unnecessary and distracting in the print version of the page. To remove an element
from the print version, you set the display attribute in the style that surrounds that ele-
ment to none. Not only is the element hidden from display, it also prevents the element
from being generated in the display, which means that the missing element will not
disrupt the fl ow of the other elements in the page.
In the NextBest Fest home page, you'll remove the display of the navigation text and
the featured div.

To remove elements in the home page from the print display:

◗

1. Return to the nbf_styles.css style sheet, copy the nav rule, place the insertion
point after the closing bracket of the alternate content rule, press the Enter key
to create a blank line, and then paste the nav rule in the new line.

◗

2. Place the insertion point at the end of the float attribute, press the Enter key to
create a blank line, and then type display: none; to add the display attribute to
the rule.

◗

3. Repeat Steps 1 and 2 to copy the featured rule below the alternate nav rule and
set the display to none.

◗

4. Save the style sheet, return to the index.html page, and then, on the Style
Rendering toolbar, click the Render Print Media Type button . The navigation
text and the featured div and its contents have been removed from the print ver-
sion of the page. See Figure 8-50.

Figure 8-50 Home page with elements removed from the print display

tickets image and
links are removed
from the print
version of the page