-
Cómo crear una versión imprimible de una página web
-
Una cosa que realmente puede mejorar la usabilidad de su sitio web y le dará una ventaja sobre la competencia es crear versiones imprimibles de las páginas de su sitio. Por suerte, esto no quiere decir que usted necesita para crear dos copias diferentes de cada página que cree. La mayoría de los sitios web utilizan las hojas de estilo o código CSS por sus diseños, e incluso si usted no sabe cómo codificar, es relativamente simple para crear una hoja de estilo "impresión" que puede crear automáticamente versiones imprimibles de cada página.
Instrucciones
1 Decidir lo que desea que sus páginas imprimibles para que parezca. En general, se debe excluir cualquier imágenes que no necesita ningún menús de vínculos o de navegación, y ningún anuncio. El único contenido que un lector realmente se preocupa, para la impresión, es pieza principal de la página de contenido y el título para ese contenido, ya sea un artículo, una página de confirmación, una lista de productos o alguna otra cosa.
2 Mira a través de sus páginas HTML para tener una idea de la forma en que está diseñada. La mayoría de las secciones están encerrados en <div> y </ div> etiquetas; por ejemplo, la barra lateral podría comenzar con <div id = "barra lateral"> y termina con </ div>. Anote cada sección principal de sus valores "id" de las Secciones sitio y.
3 Crear un nuevo archivo de texto y el nombre de "print.css". Subirlo a su servidor.
4 print.css abierta para editar. Para cada sección de las páginas que no desea incluir en la versión imprimible, agregue la siguiente línea:
div # sectionname {display: none; }
Cambiar "sectionname" con el valor "id". Por ejemplo, para ocultar las secciones que comienzan con <div id = "header">, <div id = "pie de página"> y <div id = "barra lateral">, escribiría:
div # header {display: none; }
div pie de página # {display: none; }
div # barra lateral {display: none; }5 Decidir qué sección usted desee incluir en sus versiones imprimibles; se llamará <div id = "contenido"> o <div id = "principal"> o similares. Por eso, establecer 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 se pueda leer en absoluto. Fijándolo en 100 por ciento hará que el artículo se ajuste automáticamente de acuerdo con el tamaño de la página.
Por lo general, la sección de contenido está incrustado dentro de las secciones más grandes que también tienen valores de anchura. Por ejemplo, muchas páginas se adhieren a </ div> sección de alrededor de toda la página <div id = "contenedor"> con el fin de establecer un ancho fijo y centrar todo en la página. En este caso también tendrá que restablecer el ancho a 100 por ciento para aquellas secciones:
div # envoltorio {width: 100%; }
Cuando se piensa que ha cubierto todo, guardar y cerrar el archivo print.css.
6 Abra su página web 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>, agregue la siguiente línea:
<Link rel = "stylesheet" href = "print.css" type = "text / css" media = "print" />
También tendrá que añadir esta línea dentro del HTML de las páginas de otros también. Reemplazar "print.css" con la ruta completa al archivo; si está en un subdirectorio llamado "estilos", por ejemplo, escribir "/styles/print.css."
7 Guarde todo e intente imprimir una página en su sitio. Es probable que golpear a algunos ganchos primera vez; por lo general hay una sección que se olvidó de incluir en su: lista de "pantalla ninguno". Pronto, sin embargo, sus páginas se imprimen correctamente y se le han creado con éxito una versión imprimible automática de todas las páginas de su sitio web.
