Cómo crear una versión para imprimir de una página web

Escrito por michael dance | Traducido por hugo bautista
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear una versión para imprimir de una página web
Es sencillo crear versiones imprimibles de las páginas de tu sitio. (Chad Baker/Photodisc/Getty Images)

Una cosa que realmente puede mejorar la utilidad de tu sitio web y te dará una ventaja sobre la competencia es crear versiones imprimibles de las páginas de tu sitio. Por suerte, esto no significa que necesitas crear dos copias diferentes de cada página que crees. La mayoría de sitios web utilizan las hojas de estilo o código CSS para sus diseños, e incluso si no sabes cómo codificar, es relativamente sencillo crear un hoja de estilo "impresión" que puede crear automáticamente versiones imprimibles de cada página.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Sitio web con una hoja de estilos o un archivo CSS existente

Lista completaMinimizar

Instrucciones

  1. 1

    Decide como quieres que tus páginas imprimibles se vean. En general, se deben excluir cualquier imágen, menú de enlaces o navegación innecesarias, y cuaquier anuncio. El único contenido al que un lector verdaderamente le importa, para la impresión, es la pieza principal de contenido de la página y el título para ese contenido, ya sea un artículo, una página de confirmación, una lista de productos o cualquier otra cosa.

  2. 2

    Mira a través de tus páginas HTML para tener una idea de cómo están dispuestas. La mayoría de las secciones están encerradas en etiquetas <div> y </ div>, por ejemplo, la barra lateral podría comenzar con <div id="lateral"> y finalizar con </ div>. Anota cada sección principal de tu sitio y los valores "id" de las secciones.

  3. 3

    Crea un nuevo archivo de texto y nombralo "print.css". Subelo a tu servidor.

  4. 4

    Abre Print.css para editar. Para cada sección de las páginas que no deseas incluir en la versión impresa, añade la siguiente línea:

    div # sectionname {display: none;}

    Cambia "sectionname" con el valor "id". Por ejemplo, para ocultar las secciones que comienzan con <div id="header">, <div id="footer"> y id="lateral"> <div, tendrías que escribir:

    div # header {display: none;} div # footer {display: none;} div # sidebar {display: none;}

  5. 5

    Decide qué sección deseas incluir en tus versiones para imprimir, se le llamará id="content"> <div o id="main"> <div o similares. Por eso, establece el ancho a 100 por ciento de este modo:

    div # content {width: 100%;}

    Esto es muy importante. Si la anchura original era una cantidad fija, que podría ser demasiado flaca en las páginas impresas, o peor, se extienden sobre el lado y no son legibles en absoluto. Si lo estableces en 100 por ciento harás que el artículo se ajuste automáticamente en función del tamaño de la página.

    Por lo general, la sección de contenido está incrustada en secciones más grandes que también tienen valores de anchura. Por ejemplo, muchas páginas pegan una sección <div id="wrapper"> </ div> alrededor de toda la página con el fin de establecer un ancho fijo y centrar todo en la página. En este caso, también tendrás que restablecer el ancho a 100 por ciento para las secciones:

    div # wrapper {width: 100%;}

    Cuando pienses que has cubierto todo, guarda y cierra el archivo print.css.

  6. 6

    Abre tu página para editar. La parte superior de la página será una sección que comienza con <head> y termina con </ head>. Justo antes del cierre </ head>, agrega la siguiente línea:

    <link rel="stylesheet" href="print.css" type="text/css" media="print" />

    También tendrás que añadir la siguiente línea dentro del HTML de tus otras páginas. Reemplaza "print.css" con la ruta completa al archivo, si está en un subdirectorio llamado "estilos", por ejemplo, escribe "/estilos/print.css".

  7. 7

    Guarda todo e intenta imprimir una página de tu sitio. Es probable que tengas algunos inconvenientes la primera vez, por lo general hay una sección que se te olvidó incluir en tu lista "display: none". Pronto, sin embargo, las páginas se imprimen correctamente y has creado con éxito una versión imprimible automática de todas las páginas de tu sitio web.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles