Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the book Hiding unwanted page areas

Hiding unwanted page areas

Using the Style Rendering toolbar, you can see your document rendered according to the print-media style rules.

  1. In the Style Rendering toolbar, click the Render Print Media Type icon.
  2. 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.

  3. In the CSS Styles panel, double-click #h-navbar in the print_styles.css rules.
  4. In the Block category, choose none from the Display field menu. Click OK.
  5. 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.

  6. In the print_styles.css rules, double-click .sidebar1.
  7. In the Block category, choose none from the Display field menu. Click OK.
  8. 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.

  9. 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.
  10. 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.

  11. Choose none from the Background-image field menu. Click Apply.
  12. The background image vanishes. Let’s check the page in Live view.

  13. Click OK to complete the change. Click the Live View button.
  14. 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.

  15. Save all files. Choose File > Preview In Browser and select your preferred browser.
  16. In the browser, choose File > Print Preview.
  17. 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.

  18. 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.
  19. Save all files.
  20. Choose File > Preview in Browser and select your preferred browser.
  21. In the browser, activate print preview.
  22. The border has been removed successfully.

  • + Share This
  • 🔖 Save To Your Account