Nwlapcug.com


Tutorial HTML stampabile

Rendere le pagine facilmente stampabile è una caratteristica che potrebbe usare realmente un sacco di siti Web, 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 la progettazione sono separate dal contenuto.

Creazione di pagine semantici

Il primo passo verso la creazione di semplici pagine HTML stampabile sta assicurandosi che avete un fondamento pulito, che significa usando i CSS (fogli di stile CSS) per gestire tutti gli elementi di progettazione delle pagine. Se si ha familiarità con i CSS, ci sono un sacco di tutorial gratuiti tutto il Web (Vedi risorse per un link), e l'idea di fondo è abbastanza facile: permette di rimuovere tutto il codice di stile e il layout dal codice HTML e memorizzarlo in un documento diverso, chiamato un foglio di stile, rendendo il vostro HTML piena di nulla ma chiaramente definiti , contenuto facilmente modificabile.

Utilizzando Media = \ "Print\"

Per creare una versione stampabile di ogni pagina sul tuo sito, tutto quello che dovete fare è creare un foglio di stile semplice secondario e utilizzare l'HTML \"media\" attributo per informare il browser è il foglio di stile per la stampa.

In pratica, entrambi dello stile fogli saranno collegati dalla sezione < head > della pagina come segue:

< link rel = \ "stylesheet\" href=\"main-style-sheet.css\" tipo = \ "testo/css\" media = \ "schermo s" >< / link >
< link rel = \ "stylesheet\" href=\"print-style-sheet.css\" tipo = \ "testo/css\" media = \ "print\" >< / link >

Quando un visitatore tenta di stampare una pagina dal tuo sito, il browser cercherà automaticamente il foglio di stile con i media = \ "print\" designazione.

Se si incorpora il diritto di fogli di stile all'interno della tua sezione < head > invece che li collegano, che sarà simile a questo:

< stile tipo = \ "testo/css\" media = \ "schermo s" >
... .main foglio di stile...
< / stile >

< stile tipo = \ "testo/css\" media = \ "print\" >
... stampabili foglio di stile...
< / stile >

Il foglio di stile secondari

Ora hai due fogli di stile, impostati, è necessario determinare quali regole conterrà il foglio di stile stampabile.

Generalmente, gli utenti stampare pagine perché vogliono una copia del testo principale della pagina..--dell'articolo, la conferma d'ordine, ecc. Non hanno bisogno di tutti gli elementi di navigazione o menu--collegamenti sono inutili su una pagina stampata, dopo tutto..--e nella maggior parte dei casi non hanno bisogno di tutte le immagini, sia. Per sbarazzarsi di quelli, semplicemente utilizzare il CSS \"display: none\" regola.

Inoltre, assicurarsi che il testo viene visualizzato correttamente. Fogli di stile per pagine stampabili non dovrebbero includere larghezze fisse, perché rende il testo eseguire oltre il bordo della pagina anziché automaticamente eseguire il wrapping al margine. Quando si dichiara la dimensioni dei caratteri, è necessario utilizzare anche \"pt\" invece di \"px.\"

Quindi, se avete una pagina strutturata come questo:

< div id = \ "header\" >... site titolo e menu principale... < / div >
< div id = \ "content\" >... .main articolo... < / div >
< div id = \ "sidebar\" >... .sidebar link... < / div >

Foglio di stile stampabile potrebbe assomigliare a questo:

div #header, {div #sidebar
visualizzare: nessuno
VAI
}

{div #content
font-size: 12pt
VAI
Larghezza: auto
VAI
}