Transcript Chapter 5: Printing from the Web

Web Design in a Nutshell
Chapter 5: Printing from the Web
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
1
 Wiley and the book authors, 2002
Overview

Brief Synopsis:
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
2
 Wiley and the book authors, 2002
The Problem



The web is undeniably an amazing resource for
information, but it’s not the most comfortable nor
portable way to read. Consequently, many people
print web pages to read away from their desks or to
file for later use.
The ability to print the contents of the window had
been built into browsers from the beginning.
However, printing documents designed for viewing
in a browser window does not always result in easyto-read printouts.
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
3
 Wiley and the book authors, 2002
Printer-friendly HTML pages

One way to ensure that your users can get a good copy of your content is to
link to a separate “printer-friendly” HTML document. These are generally
stripped-down versions containing just a single column of content with
minimal HTML formatting & graphics
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
4
 Wiley and the book authors, 2002
Printer-friendly tips

Keep the page narrow



Keep text visible


The most common problem with printing web pages is that the right
edge can get cropped off. This typically happens if you have a fixedwidth design or a graphic that’s wider than the printable page
Keep the width of tables and graphics under 550 pixels
Use black text on a white background
Think about content

If you’re taking the time to create a separate printer-friendly
document, you should tailor the content of that document to be
appropriate for the printed medium

Remove navigation aids & ads, combine multi-page content into a single
page, print the URL and title of the company at the top, and write out the
URLs of linked pages next to the text of the link
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
5
 Wiley and the book authors, 2002
Cascading Style Sheets for printouts

A more sophisticated way to control the way your page
looks when it is printed is to take advantage of mediaspecific style sheets




This feature was added in the CSS2 specification
It allows a single document to be formatted on the fly depending
on the device displaying our outputting it
The process involves creating 2 style-sheets, one for
displaying on the screen, and another for print. Both
style sheets are associated with the HTML document
using the media attribute or the @media rule.
The downside is that browser support for this feature is
only available on the newer browsers
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
6
 Wiley and the book authors, 2002
Creating the style sheets

In this example, the HTML document contains a navigational bar, a headline,
and a few lines of text
test.html
<DIV class=“navigation”>
<P><IMG src=“nav_bar.gif”></P>
</DIV>
<H1>Alternative Media Style Sheets</H1>
<P>With CSS2 you can create style sheets that are specific to the
medium they’re displayed on</P>
browser.css
BODY {background-color: black;}
H1 {color: red; font-family: impact;}
P {color: “#999999”; font-family: verdana;}
print.css
BODY {background-color: white; color: black; font-family: times;}
DIV.navigation {display: none;}
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
7
 Wiley and the book authors, 2002
Connecting the style sheets and HTML


There are 4 methods for associating the style sheets with the HTML document
The target medium can be all, screen, print, projection, braille,
embossed, aural, tv, tty, and handheld
Method 1
<HEAD>
<LINK rel=“stylesheet” type=“text/css” href=“browser.css”
media=“screen”>
<LINK rel=“stylesheet” type=“text/css” href=“print.css” media=“print”>
</HEAD>
Method 2
<HEAD>
<STYLE type=“text/css” media=“screen”>
BODY {background-color: black;}
H1 {color: red; font-family: impact;}
P {color: “#999999”; font-family: verdana;}
</STYLE>
<STYLE type=“text/css” media=“print”>
BODY {background-color: white; color: black; font-family: times;}
DIV.navigation {display: none;}
</STYLE>
</HEAD>
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
8
 Wiley and the book authors, 2002
Portable Document Format (PDF)



PDF is a technology developed by Adobe for sharing electronic
documents. The remarkable thing about PDF files is that they
preserve the fonts, colors, formatting, and graphics of the
original source document.
Ideally, a PDF document looks exactly the way it was designed,
regardless of the platform, hardware, and software environment
of the end user
PDF, however, is not a substitute for HTML


A plug-in or separate application must be used to view the files
To create PDF files, you must purchase Adobe Acrobat.
Creating PDF files can be as simple as selecting Acrobat as
your printer from just about any Windows application.
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
9
 Wiley and the book authors, 2002