La creazione di una pagina web con colonne di stampa selezionabili può essere semplice o complessa. La soluzione tradizionale è quello di copiare ciò che si desidera stampare una nuova pagina e inserire un link per un pop-up, la finestra per la stampa. Questo è noioso, inutile e infastidisce i visitatori della pagina web.

Si potrebbe anche usare JavaScript o altro, metodi di codifica più intensivi, ma contenuti interattivi su Internet crea spesso errori di caricamento con javascript.

L'approccio più pratico è quello di utilizzare i fogli di stile a cascata (CSS). E 'semplice da implementare e cross-platform.

istruzione

1 Segnare tutto ciò che si desidera stampare dalla pagina web su una copia stampata della intera pagina web. Questo vi aiuterà a tenere traccia della codifica modifiche che si desidera fare.

2 Creare una copia di lavoro della tua pagina web per l'editing. Ciò consente di salvare la pagina originale in un'altra posizione come backup e di riferimento.

3 Creare un foglio di stile CSS esterno con un editor di codice Hypertext Markup Language (HTML). Dategli un nome come "printerversion.css." Un foglio di stile è un semplice file di testo con estensione "css" al posto del tipico ".txt" estensione.

4 Creare un link al tuo nuovo foglio di stile nella sezione head della pagina web. Se il nome del foglio di stile è printerversion.css, per esempio, allora il codice di collegamento è: <link href = "printerversion.css" type = "text / css" rel = "stylesheet" dei media = "print">

5 Assegnare un attributo ID HTML per ogni elemento della pagina web che non si desidera stampare. Un esempio di codice HTML per un elenco di link di navigazione sulla tua pagina web all'interno di un tag DIV è: <div id = "navigazione">

Elementi ID deve essere one-of-a-kind per ogni elemento all'interno del documento, ma si può avere come molti come si desidera.

6 Aggiungere il codice per il contenuto di ogni ID a vostro nuovo foglio di stile. Ogni voce per i dati non stampabili deve essere su una riga separata. Un esempio per i dati di navigazione e del calendario che non si desidera stampare è il seguente:

navigazione {display: none} calendario {display: none}

È molto più facile di scegliere ciò che si desidera stampare di scegliere cosa stampare con i CSS.

7 Personalizza il tuo foglio di stile per altri elementi di design che si desidera includere nella stampa. Gli elementi possono essere norme orizzontali, rientri di paragrafo, stili e / o colori dei caratteri. esempi di codice per tali elementi di design sono:

hr {color: blue;}

p {margin-left: 50px;}

body {font: 12px Arial, Helvetica, sans-serif; colore nero; margin-top: 25px;}

Un foglio di stile non ha bisogno di aprire i tag HTML, come i tag HTML, della testa e del titolo.

Consigli e avvertenze

• È possibile utilizzare qualsiasi editor di codice HTML per questo progetto, dal Blocco note di Microsoft ad Adobe Dreamweaver. Blocco note non sarà inutilmente aggiungere tag alla tua pagina che non si desidera, e può essere il modo più semplice con cui lavorare.
• È possibile aggiungere il link per il nuovo foglio di stile a qualsiasi delle pagine del tuo sito web e saranno stampare seguendo le stesse linee guida.
• Il sito web design Shack, che è collegato nella sezione Risorse, offre molti fogli di stile libero che è possibile utilizzare per la personalizzazione aggiuntiva.
• Opzioni come PrintFriendly e HP Smart Web offrono il controllo su ciò che viene stampato dal tuo sito web senza di te l'aggiunta di codifica CSS.
• Conservare le copie di backup di tutte le pagine web originali e modificare solo i duplicati non pubblicati prima fino ad avere esattamente l'output di stampa che si desidera.
• Assicurarsi che il nuovo file CSS viene memorizzato nella cartella corretta sul server Web, o output di stampa sarà "quello che vedi è quello che ottieni" (WYSIWYG).
• Questa è solo un'introduzione usando i CSS per creare colonne di stampa selezionabili. Imparare a usare i CSS è semplice, ma può richiedere un certo tempo per abituarsi.