Principale

Webmaster

Stampare una pagina web con i CSS

Scritto da Alberto Giuliani (http://www.agwebsolutions.it/) il 31 agosto 2005

In un altro articolo abbiamo visto il comando HTML elementare per stampare una pagina web da un link.

In questo tutorial vedremo come far s? che tramite un foglio di stile CSS possiamo decidere quali parti della nostra pagina stampare e come stamparle (grandezza font, bordi, colore, ecc.).

Supponiamo di avere un layout a DIV, prendiamo come esempio quello presente a questo link gi? utilizzato in altri tutorials.

Il layout ? composto da tre DIV:
- #testata
- #sinistra
- #destra

Normalmente, quando si stampa una pagina si cerca di renderla in bianco e nero, o per lo meno colori della scale BIANCO->NERO, come il grigio.

Realizziamo un file CSS "print.css" e dichiariamoci le informazioni che devono avere i tre DIV al momento della stampa:


CSS
body
{
    background-color: #FFF;
    font-size: 12px;
}

#testata
{
    background-color: #FFF;
}

#sinistra
{
    display: none;
}

div#destra
{
    margin-left: 5px;
    padding: 1em;
    background-color: #fff;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid #EEE;
}



Da notare come in questo codice abbiamo fatto in modo che il menu laterale scomparisse, e i colori fossero della scala BIANCO->NERO.

Ora nella pagina che deve essere stampata, inseriamo, nel punto in cui vogliamo compaia il link per la stampa, questo codice:


HTML
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
<a href="#" onclick="window.print();return false" title="Clicca per stampare l'articolo">Stampa questo articolo</a>


Da notare


HTML
media="print"


che imposta il file di stile "print.css" come file di stile della stampa.

Stampare i links
Spesso capita che nella pagina che vogliamo stampare ci siano dei links.
Questi normalmente non vengono riportati nella stampa, quindi l'utente vedr? solo alcune parole colorate di blu che non puntano a nessuna pagina. Come porvi rimedio?
Inseriamo in "print.css" questo codice:


CSS
a:link:after
{
    content: " [" attr(href) "]";
}


L'ho scoperto da un articolo di Extrowebsite.com e fa s? che di seguito alla parola del link compaia tra parentesi graffe il percorso della pagina a cui deve puntare, di modo che l'utente sia in grado di raggiungere il link.
Purtroppo questo effetto non lo vedremo su Internet Explorer, mentre lo possiamo vedere gi? dall' anteprima di stampa con browser quali Opera, Mozilla e FireFox.



Pagine totali: 1 [ 1 ]

Online:

Ci sono 23 utenti online, 0 della community e 23 ospiti.

Partners:

Loans • Mortgages • New York Hotels • Internet Marketing • DevSpy.com • Giornale Webmaster • MrWebmaster.it • Serverplan