Print-Ready Version
A question that I am asked quite often by other developers creating dynamic news/article content is, "How do sites like CNET and others achive the 'Print Version' that gets rid of images, banners, etc." The process is actually very simple, and uses a server behavior that comes standard with Dreamweaver UD/MX.
(Page Four)
STEP THREE: Creating Detail Page
So far we have a page (print_display.asp) that dynamically shows the first record from our DB, as well as a printer icon that sends the article's ID to the print_detail.asp page. Our task now is to setup that receiving page.
(Remember, this tutorial creates the display page and the 'print-ready' page, NOT the 'News Creation' page. Use this to add functionality to your existing news pages.)
CREATE DETAIL PAGE
1.) Lets create a recordset to pull in the article info, filtered by the incoming ID being passed from the previous page.
2.) In the print_detail.asp page, create a recordset called 'rsEventListing' to grab our data from the DB.
• In the 'Application' tab on the right hand side select 'Bindings'.
• Press the (+) sign and then select 'Recordset (Query)'
• Fill in the following information shown below:
 |
(Notice what is occurring here, as the recordset is being told to grab only the record with the ID being passed to it.)
3.) Now we need to add our dynamic text areas to the page:
• Place your cursor where you want the article title to be displayed
• Select 'Insert' > 'Application Objects' > 'Dynamic Text'
• Press the 'Item_Title' field (as shown below) and then press 'OK'
 |
• Do this for each field until your page looks similar to the image below.
 |
4.) Now we are ready to test - Open your print_display.asp page in IE, and click on one of the printer icons. A new window should open displaying that article's details similar to below.
 |
CREATE QUICK PRINT/CLOSE BUTTONS
We now have a neat, cleanly laid-out page ready to be printed out. For added convenience, lets add some JavaScript buttons which will allow us to print or close the page with the click of a button.
1.) Add this preformatted form/JavaScript after the body tag of the print_detail.asp page:
<form>
<input name="Print" onClick="window.print();return false" type="button" value="Print Page">
<input type="button" value="Close Page" onClick="javascript:window.close()" name="button">
</form>
That's it... hope that you learned something useful.
Jeremy Conn
Jeremy Conn has been involved in web development and graphic design since 1995. Interested in art & music all his life, Jeremy was drawn into web design after being given a copy of the original Dreamweaver product. Since that time, Jeremy has started Conn Creative Media, a design agency that he runs with his beautiful wife, Andrea, from Portland, Oregon. "I learned much of what I know about DW development from sites like DMXZone, so I feel strongly about giving back and doing my part to keep this amazing community running. Much thanks to George Petrov and the whole DMXZone team." - Jeremy
Comments
Great, but w/o a DB?
This is a great tip/technique. However, how does one go about doing the same thing with a webpage that is not database driven? I have a simple .html page that has a graphical header and side panels with text in the center. I want an icon that loads a print-ready version of that page (no graphics, etc...), but my site is not database driven. How do I accomplish that?
Melchiah
You must me logged in to write a comment.