Cuando le damos imprimir a una página web, salen muchas cosas que no deberían imprimirse, como la bara de menú, hasta la barra de anuncios pero hay forma de evitar esto y darle un mejor formato a nuestra página para impresión, inclusive agregándo algun mensaje adicional con el copyright o algún otro detalle.
Nuestra página para impresión
Voy a usar un código resumido como muestra de lo que podría ser nuestro sitio
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title>Nuestra Web</title> <link rel=stylesheet media="screen" href="website.css"> <link rel=stylesheet media="print" href="printer.css"> </head> <body> <div id="encabezado" class="noimprime"></div> <div id="menu" class="noimprime"></div> <div id="contenido"></div> <div id="copyright" class="paimpresion">Prohibida su reproduccion sin autorizacion del autor</div> </body> </html> |
Si nos fijamos en el encabezado hay 2 hojas de estilo la primera nos sirve para el diseño en pantalla, es decir la hoja que siempre usamos, miesntras que la segunda es específica para imprimir la página web.
Hoja de estilos en pantalla
Más allá de todos los estilos que hayamos definido aqui debemos agregar una clase que indique que elementos no deben aparecer porque son exclusivamente para impresión.
website.css
1 2 3 | .paimpresion{ visibility:hidden } |
Hoja de estilos para impresión
Ahora vamos a ocultar el menu y encabezado que no deseamos imprimir además de mostrar un mensaje en nuestro div copyright
1 2 3 | .noimprime{ visibility:hidden } |
Esta demás decir que en la hoja de estilos debemos aplicarle alguno a nuestro div copyright para que se muestre adecuadamente.