Come creare una versione stampabile di un sito web

April 28

Una cosa che può davvero migliorare l'usabilità del tuo sito web e darvi una gamba sul concorso è quello di creare versioni stampabili delle pagine del tuo sito. Per fortuna, questo non significa che è necessario creare due diverse copie di ogni singola pagina che si crea. La maggior parte dei siti web utilizzano i fogli di stile o di codice CSS per i loro disegni, e anche se non sai scrivere codice, è relativamente semplice per creare una "stampa" foglio di stile in grado di creare automaticamente versioni stampabili di ogni pagina.

istruzione

1 Decidere cosa si desidera che le pagine stampabili per assomigliare. In generale, è necessario escludere eventuali immagini non necessarie, qualsiasi menu di collegamento o di navigazione, e annunci. L'unico contenuto che un lettore si preoccupa veramente, per la stampa, è pezzo principale della pagina di contenuto e il titolo per tale contenuto, sia esso un articolo, una pagina di conferma, un elenco di prodotti o qualcos'altro.

2 Guardare attraverso le pagine HTML per avere un'idea di come sono disposti. La maggior parte delle sezioni sono racchiusi nei tag <div> e </ div>; per esempio, la vostra barra laterale potrebbe iniziare con <div id = "sidebar"> e terminare con </ div>. Annotare ogni sezione principale del tuo sito e valori "id" le sezioni.

3 Creare un nuovo file di testo e il nome "print.css". Caricarlo sul server.

4 Aperto print.css da modificare. Per ogni sezione di pagine che non si desidera includere nella versione stampabile, aggiungere la seguente riga:

div # nome_sezione {display: none; }

Cambiare "nome_sezione" con il valore "id". Ad esempio, per nascondere le sezioni che iniziano con <div id = "header">, <div id = "footer">, e <div id = "sidebar">, si può scrivere:

div # intestazione {display: none; }
div # footer {display: none; }
div # sidebar {display: none; }

5 Decidere quale sezione si vuole includere nel vostro versioni stampabili; sarà chiamato <div id = "content"> o <div id = "principale"> o simili. Su questo, impostare la sua larghezza di 100 per cento in questo modo:

div # content {width: 100%; }

Questo è molto importante. Se la larghezza originale era un importo fisso, potrebbe essere troppo magro sulle pagine stampate, o peggio, correre sul lato e non essere leggibile a tutti. Impostando al 100 percento renderà l'articolo avvolgere automaticamente in base alle dimensioni della pagina.

Di solito, la sezione dei contenuti è incorporato all'interno di sezioni più grandi che hanno anche valori di larghezza. Ad esempio, molte pagine bastone a </ div> sezione intorno l'intera pagina <div id = "wrapper"> al fine di impostare una larghezza fissa e centrare tutto sulla pagina. In questo caso si avrà anche per ripristinare la larghezza di 100 per cento per quelle sezioni:

div # wrapper {width: 100%; }

Quando si pensa di aver coperto tutto, salvare e chiudere il file print.css.

6 Aprire la home page da modificare. La parte superiore della pagina sarà una sezione che inizia con <head> e termina con </ head>. Poco prima del </ head> di chiusura, aggiungere la seguente riga:

<Link rel = "stylesheet" href = "print.css" type = "text / css" media = "print" />

Dovrete anche aggiungere questa linea all'interno del codice HTML delle vostre altre pagine. Sostituire "print.css" con il percorso completo del file; se è in una sottodirectory chiamata "stili", per esempio, scrivere "/styles/print.css."

7 Salvare tutto e provare a stampare una pagina del tuo sito. È molto probabile che ha colpito un paio di strappi la prima volta; Di solito c'è una sezione che si è dimenticato di includere nella vostra: lista "Visualizzazione nessuno". Presto, però, le pagine verranno stampati correttamente e avrete creato con successo una versione automatica stampabile di ogni pagina del tuo sito web.


Articoli Correlati