Download & unzip http://www.granneman.com/downloads/SwitchStyles.zip. You should find 5 files in the directory:
- print.css (for demo purposes only)
- print-preview.css (for demo purposes only)
- standard-style.css (for demo purposes only)
- print.js
- print-test.htm (for demo purposes only)
Create the web page to which you wish to add a print-friendly link, without worrying about the print-friendly CSS. Once that's done, it's time to add print-friendly stuff.
Add the print-friendly link
First, you need to add a print-friendly link somewhere on your web page. You can do it in two ways.
1. Text
Add the following somewhere on your page:
<a href="#" onclick="print_preview(); return false;">Print this page</a>
2. Image
Add the following somewhere on your page:
<a href="#" onclick="print_preview(); return false;"><img src="http://www.granneman.com/images/printFriendly.gif" height="23" width="22" alt="Print-friendly"></a>
Fix your screen CSS
Now let's fix your CSS. Your web page should already have this link, to the screen CSS page that you created:
<link rel="stylesheet" type="text/css" href="yourcss.css" />
Now you need to change that link to this:
<link rel="stylesheet" type="text/css" href="yourcss.css" media="screen" />
Add the print-friendly CSS
Now you need to add a link in your web page to your print-friendly CSS:
<link rel="stylesheet" type="text/css" href="yourprintcss.css" media="print" />
Set up your print-friendly CSS page, changing & removing things as you like. Test your changes by going to File > Print Preview.
Add the print-friendly preview CSS
When you're happy with your print-friendly CSS, & you've made sure that the page will print the way you want it, add the following link to your web page:
<link rel="alternate stylesheet" type="text/css" href="yourprintcss-preview.css" media="screen" title="Print Preview" />
This is yet another CSS page that the JavaScript will use to give users a preview of the print-friendly CSS. It should contain the following code:
@import "yourprintcss.css";
#preview-message {
display: block;
border: 1px solid #666;
background: #FF6;
padding: 2px 5px;
}
Add the JavaScript
Add the following link to your web page, in the <head>:
<script type="text/javascript" src="print.js"></script>
Finished
You should now be able to click your print-friendly link and see your print-friendly preview in the browser.
|