En el pasado, crear una versión amigable con la impresora de una página web significa diseñar una página separada con diseño y formato modificado para que pueda lograr resultados satisfactorios al imprimir. Ahora, al usar XHTML y CSS estructurados, puede lograr el mismo efecto con mucho menos esfuerzo. La mayoría de las páginas web desde la pantalla de pantalla para imprimir efecto
En el pasado, crear una versión amigable con la impresora de una página web significa diseñar una página separada con diseño y formato modificado para que pueda lograr resultados satisfactorios al imprimir. Ahora, al usar XHTML y CSS estructurados, puede lograr el mismo efecto con mucho menos esfuerzo.
Desde la pantalla de la pantalla hasta el efecto de impresión
La mayoría de las páginas web están diseñadas para ser adecuadas para ver las pantallas de la computadora. Sin embargo, a veces los usuarios necesitan imprimir ciertas páginas, tal vez solo para mantener un registro a largo plazo o usarlo como una referencia conveniente fuera de línea.
El problema ahora es que muchas de las características que hacen que la página web se vea llamativa y colorida en la pantalla de color de la computadora no puede mostrar el mismo efecto en la versión impresa de la página web, especialmente cuando la impresora es blanca y blanca. Cuando se degrada a la impresión en escala de grises, la combinación de colores perderá el efecto de contraste (original); Los gráficos se verán distorsionados y tardarán demasiado en imprimir; Los botones de navegación que juegan un papel importante en la página web son inútiles en la página de impresión.
Para superar estos problemas, los creadores web a menudo diseñan una versión de la página amigable con la impresora para que los visitantes deseen imprimir. Las versiones amigables con la impresora generalmente incluyen el mismo contenido que la página web principal, pero se omiten la mayoría de los gráficos, fondos y elementos de navegación. La página también convierte el color en alguna forma para generar imágenes aceptables en escala de grises.
Solución CSS
Una ventaja de separar el contenido y la representación utilizando etiquetas XHTML estructuradas y formatos CSS es que al cambiar el estilo CSS, puede reformatear fácilmente el contenido. Por lo tanto, crear una página amigable para la impresora es vincular un archivo CSS diferente a la misma página XHTML.
Puede vincular la hoja de estilo de pantalla y la hoja de estilo de impresión al mismo archivo XHTML al mismo tiempo, por lo que no es necesario crear una página amigable para la impresora por separado, solo una hoja de estilo amigable con la impresora es suficiente. Cuando agrega archivos de tipo multimedia al código de enlace, esto le dice al navegador qué reglas CSS siga o ignora para la salida de la pantalla, y qué reglas usar para la impresión.
Aquí hay un ejemplo que vincula a un par de archivos CSS:
El siguiente es el contenido citado:
<linkrel = stylesheettype = text/cssmedia = screenhref = mysite-screen.css/>
<linkrel = stylesheettype = text/cssmedia = printthref = mysite-print.css/>
Si necesita admitir navegadores más antiguos, debe cumplir con la pantalla de descriptores de medios de CSS1 e imprimir. Son mutuamente excluyentes, por lo que al generar páginas para la pantalla de pantalla, el navegador ignora la hoja de estilo de impresión y viceversa. Por lo tanto, cada hoja de estilo debe contener el mismo selector de estilo, pero existen diferentes declaraciones de reglas para generar estilos de página por separado para diferentes dispositivos de salida.
Simplificar CSS
Si está dispuesto a dejar de cuidar los navegadores más antiguos y asumir que sus usuarios están utilizando navegadores habilitados para CSS2 (como IE5 y arriba o Netscape6 y superior), puede usar el nuevo descriptor de todos los medios para simplificar en gran medida el código CSS.
Aquí hay un ejemplo de vincular el uso de descriptores de medios CSS2:
El siguiente es el contenido citado:
<linkrel = stylesheettype = text/cssmedia = allhref = mysite-all.css/>
<linkrel = stylesheettype = text/cssmedia = printThref = mySite-Print2.css/>
Estos enlaces son casi exactamente los mismos que los anteriores; La diferencia es que el archivo CSS contiene estilos para la impresión de medios.
Los estilos asociados con Media = Todos en el archivo CSS se pueden aplicar a la pantalla de pantalla, impresión y todos los demás medios, por lo que puede poner todos los estilos creados en este archivo. El archivo CSS que está asociado individualmente con medios = impresión puede ser mucho más pequeño porque la página hereda todos los estilos de todos los archivos multimedia, por lo que no es necesario copiar estos estilos en el archivo de medios de impresión.
Los únicos estilos requeridos en el archivo CSS de medios de impresión son aquellos que cambian o agregan estilos de página para impresión. En términos generales, esto no es más que algunos estilos que prohíben la visualización de Divs que contienen gráficos y contenido de navegación, y reemplazar la etiqueta del cuerpo y la configuración de ancho y en blanco del DIV principal con configuraciones adecuadas para impresiones.
Este truco funciona porque todos los archivos CSS de medios y los archivos CSS de medios de impresión se combinan en las mismas reglas de estilo en cascada. Por lo tanto, el orden de enlace de estos archivos CSS es bastante importante. Todos los enlaces de archivos multimedia deben colocarse antes de imprimir enlaces de archivo multimedia.
Aquí hay algunos consejos sobre el uso de archivos CSS de medios de impresión:
Si prohíbe la visualización de un DIV, debe usar la pantalla: ninguna en lugar de visibilidad: oculto.
Ni los puntos ni las pulgadas son unidades correctas de medición para la pantalla de pantalla, pero son unidades correctas de medición para impresiones.
El selector utilizado en la impresión de archivos multimedia debe ser exactamente el mismo que el selector que usa en todos los archivos multimedia. Por ejemplo, si usa Div #Sidenav para seleccionar Divs con ID como Sidenav en todos los archivos multimedia, entonces usar #Sidenav en la impresión de archivos multimedia puede no poder lograr con éxito su objetivo.
No olvide forzar explícitamente sustituir la declaración de la regla que cambia de un archivo a otro. Por ejemplo, si configura un relleno para un elemento en todos los archivos multimedia y desea eliminar este relleno en la impresión, no es suficiente agregar un estilo que ignore la declaración de relleno en el archivo de medios de impresión; debe configurar explícitamente el relleno: 0pt para reemplazar la configuración anterior.
Si está utilizando un editor gráfico como DreamWeaver, puede obtener una vista previa del efecto de pantalla de la página generada en lugar del efecto de impresión. Para obtener una vista previa del estilo de impresión en la ventana de visualización de diseño de DreamWeaver, cambie el enlace al archivo CSS de medios de impresión a Media = Screen. Esto le permite obtener una vista previa del estilo CSS en el archivo de medios de impresión. No olvide cambiar el descriptor de medios de nuevo a medios = imprimir antes de publicar su página.
Cuando necesita proporcionar a sus visitantes una página web amigable con la impresora, ya no necesita crear una versión separada de la página original. Agregar un enlace a una hoja de estilo CSS con Media = Impresión del descriptor de medios puede convertir cualquier página XHTML/CSS en una página amigable con la impresora.