Nell'età di hotspot Wi-Fi, connessioni a Internet sono quasi onnipresente; detto questo, ci sono spesso momenti in cui è conveniente avere una stampa di una particolare pagina web a vostra disposizione. Se si mantiene un sito Web con informazioni utili o divertenti come ricette o le voci del diario, i tuoi lettori potrebbero desiderare di stamparli per proprio riferimento o per condividere con gli altri. Rendere questo processo più facile per loro tramite JavaScript e CSS per aggiungere un comando di stampa alla tua pagina web.

Istruzioni

Formattazione e codice

1

Formattare la pagina Web per la stampa mediante l'utilizzo di fogli di stile CSS (CSS). Iniziare inserendo il codice seguente nella sezione < head > della pagina web:
< link rel = "stylesheet" type = "text/css" href="print.css" media = "stampa" / >
Questo indicherà al browser di utilizzare un foglio di stile personalizzato denominato "Print" durante la stampa.

2

Determinare se sono presenti elementi che non si desidera includere nella versione solo per la stampa della pagina Web, ad esempio annunci o menu di navigazione. Queste sezioni racchiuso tra i tag < div > appartenente alla classe "noprint"; Per esempio:
< div class = "noprint" >< img venga visualizzato nell'output di stampa.

3

Creare un nuovo documento denominato "Print". Inserire i seguenti elementi in questo documento:
body {color: #000000; background: #ffffff; font-family: "Times New Roman," Times, serif; font-size: 12pt; }
un {text-decoration: underline; color: #0000ff;}
.NoPrint {display: none;}
Ciò permetterà di migliorare la leggibilità delle pagine Web stampate.

4

Inserire il codice seguente nella sezione < body > della pagina Web dove si desidera visualizzare il comando stampa:
< un href="javascript:window.print()" > Stampa questa pagina < /a >
Questo crea un link di testo che, quando cliccato, si aprirà la finestra di stampa nel tuo browser.

5

Salvare i file CSS e la pagina Web appena modificata. Connettersi al server Web tramite FTP o Web browser e sostituire la vecchia pagina Web con il vostro nuovo; caricare il file CSS nella stessa directory come pagina Web.

Consigli & Avvertenze

• Se si desidera creare un collegamento di stampa da un'immagine, è necessario sostituire "Stampa questa pagina" con un tag < img >. Ad esempio, se si desidera utilizzare un'immagine denominata "print.gif", il codice sarebbe: < a href = "javascript:window.print()" >< img src="print.gif" bordo = 0 >< /a > Se si preferisce visualizzare un pulsante di forma standard, utilizzare il codice seguente: < forma >< tipo di input = "button" onClick="window.print()" >< / form >
• Fare una copia della pagina Web prima della modifica.