• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

Printable version

How to provide a printer-friendly pages for the website visitors ? I mean they can print the website exactly on the A4 paper without the side navigation bar.
0
swpui
Asked:
swpui
  • 4
  • 4
  • 3
  • +1
1 Solution
 
EsopoCommented:
Well, let's start with the basic. How is your info setup? I mean, do you have a database? are the pages created dynamically? Somehow I sense they are not.

The only time I did a printer friendly version for a website was a newspaper site were the articles were stored in a DB. The printer friendly loaded the article without the menus, banners and such.

Tell us how your site works and what kind of tools you have available (server side scripting, databases, time) so we can give you ideas.

Best regards,

Esopo.
0
 
humeniukCommented:
That's the most foolproof way, to create a simpler text version of each page and provide a 'Printer Friendly' link to it.  You can still do this with dynamic content as E-E does (click the 'Printer Friendly' link on this page).  Check out the URL -> www.experts-exchange.com/Web/WebDevSoftware/DreamWeaver/viewQuestionPrinterFriendly.jsp?qid=21220645.  That's a simple page with a printer-friendly layout (viewQuestionPrinterFriendly.jsp) with content that is dynamically added (?qid=21220645) from their database.

You can find another option at www.dynamicdrive.com/dynamicindex9/printstyle.htm, but it looks like a lot more work, it isn't dynamic and it isn't cross-browser compatible.
0
 
swpuiAuthor Commented:
HUMENIUK, pls tell me how am I going to write the jsp file and the ?qid=21220645.
0
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

 
humeniukCommented:
You don't need to use jsp specifically.  As Esopo was getting at ("Tell us how your site works and what kind of tools you have available (server side scripting, databases, time) so we can give you ideas"), the precise solution depends on the structure/setup of your website.  But to do it this way, you will need to use some form of server-side scripting language (ie. PHP, JSP, ASP) and a database to create dynamic pages.  I use PHP/MySQL, so my version of these pages might look something like www.humeniuk-exchange.com/Balloons/Q_36.html (regular version) and  www.humeniuk-exchange.com/Balloons/Printable.php?qid=36 (printable version).

If you don't use server-side scripting language and a database and have a website with static html pages, your only real solution is to manually create a simpler static version of each web page that is printable.  To create this printable page, just get rid of all the graphics, navigation, etc. and set margins that are within the printable range (I'm not sure what that is precisely, but you can do a couple of tests to find out).  Use only the text content that your users would want to print and then create a link on the original page to that printable page.

If you want to use the dynamic solution, here's a basic overview of how it works:
The first page (mine or E-E's) given in the example above is dynamic (content drawn from a database and input into a pre-defined layout), even if the URL implies that it is a static page.  Basically, E-E starts with a layout page, uses JSP scripting to populate it with data/content from the database, specifically the content associated with qid (question i.d. number) 21220645, and convert the URL into a more user- and search-engine friendly (Q_21220645.html instead of layoutpage.jsp?qid=21220645).  The 'Printer Friendly' link sends you to a different page (viewQuestionPrinterFriendly.jsp) and tacks on a URL Parameter (qid=21220645) which the server references to determine what content to use to populate that page (ie. when you click the link, it tells the web server to serve the printer friendly layout page and populate it with the content from question i.d. 21220645).

As I said, that is a basic overview of how it works.  I can't tell you precisely how to script it because, well . . . they write books about stuff like that.
0
 
swpuiAuthor Commented:
Sorry to tell you that I am not really familiar with the  server side scripting, we host under linux package which compatible with PERL, PHP, MYSQL. Previously our website is designed by a company, right now we would to try to modified by ourselve.  
0
 
humeniukCommented:
PHP/MySQL is a great combo, but this isn't something you want to mess with unless you know what you're doing.  Therefore, your only real solution is to manually create printable versions of each static page.
0
 
EsopoCommented:
>>Therefore, your only real solution is to manually create printable versions of each static page.<<
I Agree. Unless you plan to spend the next month learning how to code in PHP/Mysql, I suggest you manually create static pages. I suspect we are not talking about too many.

About the static printer-friendly pages:
It's very simple really. You basically copy the info you want to print to a stripped-down page with no menus, no ads, etc. All you want in the printer-friendly page is:
- Site logo
- Title of the article/page
- The URL where it can be found
- The info to be printed
- Some copyright information

Don't forget to use white background and perhaps even modify the logo or use an alternative one to reduce the use of ink. Don't touch the wrapping of the text, the browser will manage it properly as long as you don't force sizes.
0
 
webwomanCommented:
Even easier -- set up a print style sheet. As long as your site uses CSS, you can define how you want the various styles to print, or not print at all.
0
 
humeniukCommented:
Very good point, webwoman.
0
 
swpuiAuthor Commented:
How to use CSS to print the style I want ?
0
 
webwomanCommented:
You don't use CSS to print it. You use CSS to define what things print and how they print when the page is printed. Different animal entirely, and it depends on how you set up the HTML in the first place.

If you have tables for layout, font tags, and no style sheet to start with, nothing is going to work right. If you set up your file with divs, styles, and use classes/ids for all the major pieces, it's simple to have a print style sheet that hides some things and shows others - and some of those might not even show up in the onscreen version.

How is your document set up?  
0
 
swpuiAuthor Commented:
Pls give step by step instruction on creating a css in dreamweaver mx and insert to a page where the page is printed in such a way without button and all the navigation bar.
0
 
webwomanCommented:
Don't use DW. It's lousy for style sheets. Topstyle is good (www.bradsoft.com)

Learn CSS. It will help you immensely.

You can find a bunch of resources/examples at
www.csszengarden.com
http://www.ericmeyeroncss.com/
www.alistapart.com

for starters. There are lots more.

It's not possible to give you step by step instructions -- it's very likely you'll have to redefine your pages to have it work. But it will provide more benefits than just allowing printing the way you want. You'll have a much better structure, a much more flexible page, and maintenance will become tons easier.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now