Abbiamo presentato una buona quantità di layout, ma c'è ancora una questione da trattare: come preparare una pagina per la stampa. Provate a fare un anteprima di stampa dei siti web che visitate abitualmente. Risulterà che una buona percentuale di siti viene stampata decisamente male. È un aspetto importante e che merita un approfondimento.
Il punto centrale da considerare è che la larghezza sicura per la stampa di una pagina web è 560 pixels. Ciò significa, per fare un esempio, che una pagina realizzata con layout fisso largo 760pixels rischia di essere tagliata da uno o entrambi i lati. In questa prima sezione vedremo velocemente come preparare il layout alla stampa. Per ulteriori approfondimenti vi rimando agli articoli Css design: going to print (in inglese) di Eric Meyer e all'articolo "Stampe perfette di pagine web con i CSS".
Ci sono diversi modi per definire le regole per la stampa, li vedremo nel dettaglio spiegando come applicarli.
Il modo più semplice per consentire una buona stampa è non definire regole per la stampa, e cioè lasciare che il foglio di stile venga usato solo a schermo. Ecco come fare:
<head>
<title>Html</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
@import url("stilisito.css");
</style>
</head>
Specificare il foglio di stile in questo modo ha due vantaggi fondamentali:
Per la stampa verranno usati gli stili di default del browser. Uno degli svantaggi di questa tecnica è che gli elementi della pagina verranno quindi stampati tutti, e nell'ordine di codice HTML.
Bordi multipli con 'box-shadow' di CSS3Il modo più rapido e semplice per circondare un box con più bordi di... |
Sfumature lineari su IE6-9, linear-gradient CSS3 e un po' di SVGUtilizzare la funzione linear-gradient CSS per creare sfumature... |
Stili specifici per l'orientamento dell'iPad con le Media QueriesGestire con gli stili e le media queries le modalità di... |
Campo per la ricerca con i CSSDedicare la giusta attenzione al modulo per le ricerche, componente... |
Box model 'naturale' con border-boxDimenticare per sempre i problemi legati al box model grazie ad un... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |