Come creare un comando di stampa in una pagina Web

November 12

Nell'era di hotspot Wi-Fi, connessioni a Internet sono quasi ovunque; 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 voci del diario, i tuoi lettori possono desiderare di stamparli fuori per il proprio riferimento o da condividere con gli altri. Rendere questo processo più facile per loro utilizzando JavaScript e CSS per aggiungere un comando di stampa alla tua pagina web.

istruzione

Formattazione e codice

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

2 Determinare se ci sono elementi che non si desidera includere nella stampa versione solo della pagina Web, come annunci o menu di navigazione. Racchiudere queste sezioni nei tag <div> che appartengono al "noprint" classe; per esempio:
<Div class = "noprint"> <img di apparire nella stampa.

3 Creare un nuovo documento denominato "print.css." Inserire i seguenti elementi in questo documento:
body {color: # 000000; sfondo: #FFFFFF; font-family: "Times New Roman", Times, serif; font-size: 12pt; }
a {text-decoration: underline; color: # 0000FF; }
.noprint {display: none; }
Ciò permetterà di migliorare la leggibilità della pagina Web stampata.

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

5 Salvare il file CSS e la pagina Web appena modificato. Connettersi al server Web via FTP o browser Web e sostituire la pagina Web vecchio con quello nuovo; caricare il file CSS nella stessa directory come la pagina Web.

Consigli e avvertenze

  • Se si desidera creare un collegamento di stampa da un'immagine, 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" border = 0> < / a> Se si preferisce visualizzare un pulsante forma standard, utilizzare il seguente codice: <tipo form> <input = "button" onclick = "window.print ()"> </ form>
  • Creare una copia della pagina Web prima dell'editing.