May 23
Rendere le pagine facilmente stampabile è una caratteristica che un sacco di siti web potrebbe davvero usare ma molto pochi lo fanno. Creare versioni stampabili delle pagine è molto facile da fare se il codice HTML è pulito, in primo luogo e si utilizzano fogli di stile per il disegno separato dal contenuto.
Il primo passo verso la creazione di pagine da stampare HTML semplice è fare in modo di avere una base pulita, il che significa utilizzando (fogli di stile CSS) CSS per gestire tutti gli elementi di design delle pagine. Se non si ha familiarità con i CSS, ci sono un sacco di tutorial gratuiti in tutto il Web (vedi Risorse per un link), e l'idea è abbastanza semplice: permette di rimuovere tutto il codice di stile e il layout dal vostro HTML e negozio in un documento diverso, chiamato un foglio di stile, rendendo il vostro HTML completo di nulla, ma ben definito, facilmente contenuto modificabile.
Per creare una versione stampabile di ogni pagina del tuo sito, tutto quello che dovete fare è creare un semplice foglio di stile secondario e utilizzare i HTML \ "media \" attributo di lasciare i browser sanno che è il foglio di stile da utilizzare per la stampa.
In pratica, entrambi i fogli di stile saranno collegati a dalla sezione <head> della pagina in questo modo:
<Link rel = \ href "stylesheet \" = \ tipo "main-style-sheet.css \" = \ "text / css \" media = \ "schermata \"> </ link>
<Link rel = \ href "stylesheet \" = \ "print-style-sheet.css \" type = \ "text / css \" media = \ "print \"> </ link>
Quando un visitatore cerca di stampare una pagina dal tuo sito, il browser cercherà automaticamente il foglio di stile con i media = \ denominazione "print \".
Se si incorpora i fogli di stile all'interno del tuo sezione <head>, invece di collegare a loro, sarebbero in questo modo:
<Style type = \ "text / css \" media = \ "schermata \">
... Foglio di stile principale ...
</ Style>
<Style type = \ "text / css \" media = \ "print \">
... Foglio di stile di stampa ...
</ Style>
Ora hai due fogli di stile creati, è necessario determinare quali regole il foglio di stile stampabile conterrà.
In generale, gli utenti stampano le pagine perché vogliono una copia del testo principale della pagina - l'articolo, conferma d'ordine, ecc Essi non hanno bisogno di tutti gli elementi di navigazione o menù - i collegamenti sono inutili su una pagina stampata, dopo tutti - e nella stragrande maggioranza dei casi non necessitano di immagini, neanche. Per sbarazzarsi di questi, è sufficiente utilizzare il CSS \ "display: none \" regola.
Inoltre, assicurarsi che il testo viene visualizzato correttamente. I fogli di stile per le pagine stampabili non dovrebbero includere larghezza fissa, perché potrebbe rendere la corsa di testo oltre il bordo della pagina, invece di avvolgere automaticamente al margine. Quando si dichiara le dimensioni dei caratteri, si dovrebbe anche usare \ "pt \" invece di \ "px. \"
Quindi, se si dispone di una pagina strutturata in questo modo:
<Div id = \ "header \"> ... titolo del sito e il menu principale ... </ div>
<Div id = \ "contenuto \"> ... articolo principale ... </ div>
<Div id = \ "barra laterale \"> ... collegamenti della barra laterale ... </ div>
Il tuo foglio di stile di stampa potrebbe essere simile a questo:
div # intestazione, div # sidebar {
display: none
ANDARE
}
div # content {
font-size: 12pt
ANDARE
width: auto
ANDARE
}