Making your Web Pages Printable

Have you ever seen a web page that you wanted to print but that had so many graphics or things that you actually did not want to print.  Well you could always highlight the content you want to print and print selection only but this was time consuming and doesn’t always give you the results you want.  This week in Web Design we learned a way that the designer can optimize the page for print and include a "Print" link on the page so that they can be printed more effectively using the style rendering tool bar and a cascading style sheet made just for printing.

In Dreamweaver:

1.      In the Files panel, double-click on the main css file to open it.

2.       Choose File > Save As.

3.      When the Save As dialog box opens, type print_styles.css in the File Name

4.      Click Save.

 Open the page you want users to be able to print.

Click the icon circled below to attach the print.css file to the page.

5.      Click ‘Browse

6.     Choose print.css from the list.

       7.    Add as link and choose print media.

8.      In the Style Rendering toolbar, click the Render Print Media Type shown circled below.

9.    In the CSS Styles panel, double-click the .siderbar in the print_styles.css rules.

      10. From the Block category, choose none from the Display field menu. Click OK.



The sidebar disappears from the document window but the div> has not been deleted. Dreamweaver has simply stopped rendering it long as the Print Media Type icon is selected.

      We will do the same thing to the header to make it dissapear also.

      Click F 12 to view the page in the browser.

      This how the page appears.

Right Click and choose Print Review:

             This is what will print: