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 Three)
STEP TWO: Adding Repeat Region & Print Icon
So far we have a page (print_display.asp) that dynamically shows the first record from our DB. Our goal now is to make it show all of the records in our DB, as well as to add the printer icon and 'print-ready' functionality.
(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 REPEAT REGION
1.) Lets make our dynamic table a repeat region by doing the following:
•Select the table and expand the 'Application' tab on the right hand side and select 'Server Behaviors'.
• Press the (+) sign and then select 'Repeat Region'
• Make sure you have the 'rsEventListing' recordset selected, choose 'All Records', then press 'OK'.
• Your page should now display all the DB records like shown.
 |
EXAMPLE: Go ahead and feel free to format the text any way you want, but for this tutorial I am going to leave it plain. |
ADD PRINTER ICON & GO TO DETAIL PAGE FUNCTIONALITY
1.) Now we want to add the printer icon at the end of each document title. Use this icon if you do not have one you prefer.
• Place your cursor right after the article title.
• Select 'Insert' > 'Image' and then click on the printer image... then press OK.
Little tip - I would suggest setting the image alignment to 'Absolute Middle' as it will then sit in the center of that line...
<img src="img/print.gif" width="20" height="15" align="absmiddle">
2.) Next, we want to assign the 'Go To Detail Page' server behavior to the image so that, when clicked, DW will pass that article's unique ID through the URL to our blank print_detail.asp page..
• Select the printer image icon we just added.
• In the 'Application' tab on the right hand side select 'Server Behaviors'.
• Press the (+) sign and then select 'Go To Detail Page', then fill in the following:
 |
• Now go into the link code for that image, and change it to open a brand new page:
<A HREF="print_detail.asp?<%= MM_keepURL & MM_joinChar(MM_keepURL) &
"ID=" & rsEventListing.Fields.Item("ID").Value %>" target="_blank">
<img src="print.gif" width="20" height="15" align="absmiddle">
</A>
3.) If you test your page in IE, it should look like this.
 |
NEXT PAGE - STEP THREE: Creating Detail Page
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.