I know how to print out a web page; it’s the exactly as it appears part that’s giving me trouble. I’m a graphic designer, and when presenting my portfolio in person, I’d like to be able to show printouts of my website, since it’s the only example of website design I have so far, and the design is rather unique. I can’t get it to print exactly as it looks, though; I can check the Print Background and Print Background Images boxes as much as I like, but only Opera pays attention (I also have Firefox, Netscape, Safari and IE, so I can see how the site looks on all the major browers). Also, on the home page, some text that I’ve placed in the top-left corner of the page is always moved underneath the image map. I suspect it’s to do with the fact that all the formatting is done with CSS, but I don’t know how to fix it. For the time being, I’ve created another file in Illustrator that looks the same as the home page, but other pages on the site are too complicated to do the same with them. Any suggestions? For the record, I’m using Mac OS 10.3.3 (or somesuch), and using Dreamweaver to create the site. (I don’t like Dreamweaver, but it was free, and I’m poor.)
Well, there’s one option that will be guaranteed to print the web page exactly as it appears.
Hit print screen, open up windows paint, hit paste. It pastes a screen capture of whatever you were looking at when you hit print screen.
Unfortunately this means the browswer will also have to be part of the image, although that could be cropped out easily enough.
Sorry, I glossed over the fact you were using a Mac.
A quick google says MAC’s OS has this built-in feature as well.
Check out this link here and if that doesn’t work google “Mac screen capture” or something to that nature.
My quick’n’dirty research simply confirms the behavior you’ve described, The Weird One, so I’m afraid I can’t help much. All I can say is to repeat Martin’s suggestion that you simply do a screen cap and go with that.
(Apple)+shift+4 will give you a selectable screen capture. Open in PhotoShop or other image program and adjust SC to fit paper size. Print.
Awesome, thanks!
Actually for Mac OSX…there is a much better solution.
In your Utilities folder (inside the Applications folder) is a program called “Grab”. This program allows you to define what area of the screen to capture (use the Capture menu and choose SELECTION) …draw a box around your web browser…grab it and you’re done. No cropping needed.
On preview…the suggestion from Weird One also works well…using GRAB just gives you a few more options.
Ugh, I need to stop saying “Awesome” so much. I sound like I’m fourteen.
I don’t know much about CSS, but maybe you can also fix this by specifying a particular stylesheet to use when the page is printed (see here: http://www.w3.org/TR/REC-CSS2/media.html.) Maybe the page looks screwed-up when printed because there’s some default “printing” style it reverts to.