Design for Devices

The following instructions can also be viewed from the Lynda.com lesson titled Dreamweaver CS3 Essential Training with Garrick Chow. Watch the Chapter 10 lessons titled Designing for Devices and follow the instructions in the Styling for Print lesson to complete this exercise.

Creating a CSS Style Sheet for Printing

Copy the 10_devices folder and make it a site.

Open the abouttea page

Link the print.css style sheet to the page but this time in the media pull down list select print. Notice that in the link it indicates the media is print.

Now lets create the rules for this page so that when it prints it looks presentable.

1. Lets hide the navigation area - has a td#tdNavigation style. Create a new css advanced rule for #tdNavigation be sure you are in the print category. Go to the block category and go to the Display option and choose None.

Preview the page and select print and preview the print - notice now that the navigation is gone.

2. Now lets hide the #tdLogo, #tdFooter, #tdSidebar to the hidden rule we just created. Open the print.css file and type in these selectors right after the #tdNavigation separated by a coma.

Notice that now you only see the content that you would want to print and this is all done in css. Anytime someone goes to print this page is will now only include the content.