La stampa di una pagina web può essere frustrante. Troppo spesso, le pagine web stampate tagliano sezioni di testo e annunci in gesso sul resto. Altre volte, potresti inviare una pagina alla stampante e ottenere nient'altro che carta bianca pulita. Se è importante che il contenuto del tuo sito sia attraente e leggibile dopo essere stato inviato alla stampante, devi preparare la tua pagina per il suo viaggio verso la carta.
Crea una versione separata per la stampa
1
Crea una pagina HTML separata per la stampa. Duplica il contenuto principale dell'intera pagina, riducendolo principalmente al testo. Rimuovere le intestazioni e i piè di pagina non necessari (questi sono spesso composti da collegamenti che sarebbero privi di significato sulla carta). Rimuovi annunci e menu dalle colonne laterali. Rimuovi le immagini o assicurati che appaiano in linea con una dimensione appropriata. Ridurre al minimo l'uso di tabelle e il posizionamento esplicito degli elementi HTML. Usa solo caratteri che sicuramente troverai su quasi tutti i computer (Times New Roman, Arial, Verdana).
2
Aggiungi un pulsante "Stampa" alla pagina principale che collega alla tua pagina stampabile. Il pulsante, in HTML, potrebbe essere simile a questo:
3
Prova la tua pagina stampabile con diverse stampanti e apporta le modifiche necessarie.
Usa CSS per rendere i contenuti più stampabili
1
Usa due fogli di stile a cascata invece di uno quando progetti il tuo sito. Verrà utilizzato un foglio di stile per quando la pagina viene visualizzata sul computer. Il secondo foglio di stile verrà utilizzato per quando la pagina viene inviata alla stampante per diventare una copia cartacea. Imposta l'attributo "media" nei link del tuo foglio di stile per assegnare ogni foglio di stile al suo supporto. Per esempio:
2
Crea tag nel foglio di stile di stampa per nascondere immagini, collegamenti, intestazioni e altri elementi che non dovrebbero apparire sulla pagina stampata. Aggiungi una classe "doNotPrint" solo al foglio di stile di stampa:
.doNotPrint {display: nessuno; }
Nel tuo HTML, imposta il valore della classe di tutti gli elementi che desideri nascondere sulla stampante su "doNotPrint":
Mi rifiuto di essere stampato!
Elementi come questo appariranno sullo schermo, ma non sulla pagina stampata.
3
Aggiungi uno stile al foglio di stile di stampa che rende tutto il testo nero su sfondo bianco:
body {font-family: "Times New Roman", Arial, serif;
font-size: 12px;
colore: #000000;
background-color: #FFFFFF;
}
Se imposti elementi specifici come i titoli (ad es.
) su colori non stampabili, sarà necessario impostarli esplicitamente su nero anche nel foglio di stile di stampa.
4
Prova la tua pagina su alcune stampanti se puoi e modifica il design se necessario.