Cómo crear una página Web para imprimir

Impresión de una página Web ha sido considerado como un proceso de "impredecible", sobre todo debido a los errores comunes por parte de los diseñadores de páginas web. Con algunas reglas simples que utilizan hojas de estilo en cascada (CSS), todo el sitio puede ser listo para imprimir sin cambiar necesariamente el contenido. En este artículo se supone que ya está familiarizado con los fundamentos de HTML y CSS, así como el proceso de gestión de archivos remotos en un servidor web.

Instrucciones

1 Determinar las áreas generales de su diseño: título, laterales, pie de página y el cuerpo. Un encabezamiento incluye su logotipo y también puede tener enlaces de navegación. Lados contienen enlaces de navegación y, posiblemente, las funciones de publicidad o especiales. Pies de página pueden contener una navegación más detallada, los derechos de autor e información legal. contenido del cuerpo es lo que queda --- el "núcleo" de la página. Cuando un visitante imprime una página, la parte que quiere en el papel es el contenido del cuerpo.

2 Identificar las áreas generales de la Etapa 1 con atributos de etiqueta, si no lo ha hecho en su diseño original. Utilice la opción "id =" atributo y asegúrese de que cada nombre se asigna solamente una vez en cada página. Esto hace que sean más accesibles en la hoja de estilo.

3 Iniciar un nuevo archivo de texto sin formato y guardarlo como "printer.css" en la misma ubicación que la hoja de estilo "por defecto". Déjelo en blanco por ahora. Esta hoja de estilo no reemplazará a sus reglas de estilo original, excepto cuando un usuario imprime una página de su sitio.

4 Abra una de sus páginas HTML existentes en el editor y guardar una nueva copia con un nombre diferente. (Por ejemplo, una página denominada "biography.html" se pueda guardar como "biografía-print.html"). Dentro de la etiqueta <link>, cambiar el nombre de la hoja de estilo "printer.css" para que se cargue el archivo que acaba de crear. Si hay una "media =" atributo, eliminarlo. Por el momento, sólo use la hoja de estilo "printer.css" de esa página.

5 Sube la nueva copia de la página, junto con "printer.css" a su anfitrión. Abra un navegador y escriba la dirección URL completa --- incluyendo todo el nombre del archivo --- para la página copiada, sólo impresión. Puede parecer muy inusual, pero eso va a cambiar.

6 Crear nuevas reglas para su página en la hoja de estilo "printer.css". A medida que agrega nuevas reglas, actualizar el "printer.css" en su host y volver a cargar la página en el navegador. Para empezar, cree una regla para la cabecera, lado (s) y pie de página usando "display: none" para ocultarlos.
Cuando haya terminado, intente imprimir la página y verificar los resultados en papel. Mantenga la revisión de las versiones impresas de la página y hacer los ajustes necesarios antes de continuar.

7 Aplicar la hoja de estilo original, junto con el nuevo utilizando dos etiquetas <link> - uno para las reglas de su estilo original y otra para los estilos "printer.css". Inserte el [media = "print"] atributo en la etiqueta de "printer.css" y [media = "pantalla"] en la etiqueta de la hoja de estilo original. A continuación, actualice su sitio. Una vez aplicado en todo el sitio, sus páginas tendrán la misma apariencia en pantalla como antes, y las páginas impresas aparecerán con la normativa de sólo impresión.

Consejos y advertencias

• Tenga en cuenta que, como en pantalla la página Web, sus páginas son interactivas, tal como estaba previsto. Como una hoja impresa de papel, sin embargo, la página ya no es interactivo. No se puede buscar, excepto por el ojo humano.
• Esta guía puede no ser útil en sitios que utilizan CMS ya que muchos paquetes CMS ya incluyen funciones para la optimización de impresión. En tales casos, consulte la documentación de la plataforma CMS para obtener sugerencias sobre el formato "para imprimir".