Stampa di una pagina Web è stato considerato un processo di "colpito o perdere", soprattutto a causa di errori più comuni da parte del Web designer. Con alcune semplici regole che utilizzano fogli di stile (CSS), l'intero sito può essere pronti per la stampa, senza necessariamente cambiare il contenuto. Questo articolo presuppone che si ha già familiarità con i fondamenti di HTML e la codifica CSS, così come il processo di gestione dei file remoti su un host Web.

istruzione

1 Determinare le aree generali del layout: voce, laterali, piè di pagina e corpo. Un titolo include il logo e può anche avere link di navigazione. Lati contengono link di navigazione e, eventualmente, di pubblicità o speciali caratteristiche. Piè di pagina possono contenere navigazione più dettagliate, diritto d'autore e le informazioni legali. contenuto del corpo è ciò che resta --- il "core" della pagina. Quando un visitatore stampa una pagina, la parte che vuole sulla carta è il contenuto del corpo.

2 Identificare le aree generali dal punto 1 con gli attributi dei tag, se non lo avete fatto nel vostro disegno originale. Utilizzare il "id =" attributi e fare in modo che ogni nome viene assegnato solo una volta in ogni pagina. Questo li rende più accessibili nel foglio di stile.

3 Avviare un nuovo, file di testo e salvarlo come "printer.css" nella stessa posizione come il foglio di stile "default". Lasciare vuoto per ora. Questo foglio di stile non sostituirà le regole di stile originali, tranne quando un visitatore stampa una pagina dal tuo sito.

4 Aprire una delle tue pagine HTML esistenti l'editor e salvare una nuova copia con un nome diverso. (Ad esempio, una pagina denominata "biography.html" potrebbe essere salvato come "biografia-print.html"). All'interno del tag <link>, cambiare il nome del foglio di stile per "printer.css" in modo che si carica il file che avete appena creato. Se c'è una "media =" attributo rimuoverlo. Per il momento, utilizzare solo il foglio di stile "printer.css" per quella pagina.

5 Carica la nuova copia di quella pagina, insieme a "printer.css" per il vostro ospite. Aprire un browser e digitare l'URL completo --- compreso l'intero nome del file --- per la pagina stampa solo copiato. Può sembrare molto insolito, ma che cambierà.

6 Creare nuove regole per la pagina nel foglio di stile "printer.css". Quando si aggiungono nuove regole, aggiornare il "printer.css" sul vostro host e ricaricare la pagina nel browser. Per iniziare, creare una regola per l'intestazione, lato (s) e piè di pagina usando "display: none" per nasconderli.
Quando hai finito, provare a stampare la pagina e verificare i risultati su carta. Mantenere la revisione versioni stampate della pagina ed effettuare le regolazioni necessarie prima di passare.

7 Applicare il foglio di stile originale a fianco del nuovo utilizzando due tag <link> - uno per le regole di stile originali e un altro per gli stili "printer.css". Inserire il [dei media = "print"] attributo nel tag per "printer.css" e [i media = "screen"] nel tag per il foglio di stile originale. Quindi aggiornare il sito. Una volta applicato in tutto il sito, le pagine avranno lo stesso aspetto su schermo come prima, e appariranno pagine stampate in base alle proprie regole di sola stampa.

Consigli e avvertenze

• Tenete a mente che come una pagina web sullo schermo, le pagine sono interattivi, proprio come erano destinati. Come un foglio di carta stampata, tuttavia, la pagina non è interattiva. Non può essere cercato, se non per l'occhio umano.
• Questa guida può non essere utile sui siti che utilizzano CMS poiché molti pacchetti CMS includono già le caratteristiche per l'ottimizzazione della stampa. In questi casi, consultare la documentazione della piattaforma CMS per suggerimenti sulla formattazione "printer-friendly".