- Displaying the style rendering toolbar
- Converting an existing style sheet for print
- Hiding unwanted page areas
- Removing unneeded styles
From the book
From the book
From the book
Hiding unwanted page areas
Using the Style Rendering toolbar, you can see your document rendered according to the print-media style rules.
- In the Style Rendering toolbar,
click the Render Print Media
Type
icon. - In the CSS Styles panel, double-click #h-navbar in the print_styles.css rules.
- In the Block category, choose none from the Display field menu. Click OK.
- In the print_styles.css rules, double-click .sidebar1.
- In the Block category, choose none from the Display field menu. Click OK.
- In the Background category, delete the divider.gif image reference in the Background-image field. Delete repeat-y from the Background-repeat field. Click Apply.
- Choose none from the Background-image field menu. Click Apply.
- Click OK to complete the change. Click the Live View button.
- Save all files. Choose File > Preview In Browser and select your preferred browser.
- In the browser, choose File > Print Preview.
- In the print_styles.css rules, double-click .container. In the Border category, select the Same For All option in the Style section. Choose none from the Top Style field. Click OK.
- Save all files.
- Choose File > Preview in Browser and select your preferred browser.
- In the browser, activate print preview.
One of the main differences between screen and print media is that interactive items on a web page are often meaningless in print. This would include all navigation elements in the horizontal and vertical menus. Using the print-media style sheet, you can hide unwanted portions of a page. For example, the horizontal menu isn’t needed for printing.
){kind=small}
The entire <div#h-navbar> disappears from the document window. The <div> has not been deleted; Dreamweaver has simply stopped rendering it temporary as long as the Print Media Type button is selected. Let’s turn off <div. sidebar1>, too.
The sidebar vanishes, and the main content expands to the full width of the <div.container>. The background image is visible under the content and may make it harder to read the text6 In the print_styles.css rules, double-click .container.
The background image continues to display in <div.container>. Deleting the image reference is not enough. Although the print application defers to the print-media style sheet, formatting is still inherited from all referenced CSS style sheets. Even though you deleted the background image reference in the print style sheet, it’s still applied in the screen styles. It won’t disappear until you reset the rule by choosing none.
The background image vanishes. Let’s check the page in Live view.
Dreamweaver ignores the print-media styles and renders the image as if for the screen. Live view is intended for browser preview and can’t render print styling. To properly test the page, you have to use the print preview function in an actual browser.
)
As you can see, the print application converted the text to black and automatically dropped all the background images and colors, but it still prints the borders in green. Let’s eliminate the border.
The border has been removed successfully.