Tutorial HTML para imprimir

November 10

Creación de páginas fácilmente imprimible es una característica que una gran cantidad de sitios web podría usar, pero muy pocos lo hacen. La creación de versiones imprimibles de páginas es muy fácil de hacer si su código HTML está limpio en el primer lugar y usted utiliza hojas de estilo para el diseño independiente del contenido.

Creación de páginas Semántica

El primer paso hacia la creación de páginas HTML simples imprimible es asegurarse de que tiene una base limpia, lo que significa usar (hojas de estilo en cascada) CSS para manejar todos los elementos del diseño de sus páginas. Si no está familiarizado con CSS, hay un montón de tutoriales gratuitos en la web (ver Recursos para un enlace), y la idea detrás de esto es bastante fácil: le permite eliminar todo el código de estilo y el diseño de su HTML y almacenar en un documento diferente, llama una hoja de estilo, haciendo que su HTML lleno de nada pero claramente definido, fácilmente el contenido editable.

Uso de los medios = \ "Print \"

Para crear una versión imprimible de cada página en su sitio, todo lo que tiene que hacer es crear una sencilla hoja de estilo secundaria y utilizar los HTML \ "medio \" atributo para permitir que los navegadores saben que es la hoja de estilo a la hora de imprimir.

En la práctica, tanto de las hojas de estilo se vinculará a partir de la sección <head> de la página, así:

Cuando un usuario intenta imprimir una página de su sitio, el navegador buscará automáticamente la hoja de estilo con la designación de los medios de comunicación = \ "imprimir \".

Si incrusta hojas de estilo correctas dentro de su sección <head> en lugar de vincular a ellos, que se vería así:

<Style type = \ "text / css \" los medios de comunicación = \ "pantalla \">
... Hoja de estilo principal ...
</ Style>

<Style type = \ "text / css \" los medios de comunicación = \ "imprimir \">
... Hoja de estilos de impresión ...
</ Style>

La hoja de estilos Secundaria

Ahora usted tiene dos hojas de estilo creados, es necesario decidir las normas de la hoja de estilos de impresión va a contener.

En general, los usuarios imprimen páginas porque quieren una copia del texto en la página principal - el artículo, la confirmación del pedido, etc. No necesitan todos los elementos de navegación o menús - enlaces son inútiles en una página impresa, después de todo - y en la gran mayoría de los casos que no necesitan ningún imágenes, tampoco. Para deshacerse de ellos, basta con utilizar el CSS \ "display: none \" regla.

Además, asegúrese de que el texto se muestra correctamente. Las hojas de estilo para páginas imprimibles no debe incluir anchuras fijo, ya que podría hacer que el plazo de texto más allá del borde de la página en lugar de envolver de forma automática en el margen. Al declarar los tamaños de fuente, también se debe utilizar \ "pt \" en lugar de \ "px. \"

Así que si usted tiene una página estructurada de esta manera:

<Div id = \ "cabecera \"> ... Título del sitio y el menú principal ... </ div>
<Div id = \ "content \"> ... artículo principal ... </ div>
<Div id = \ "barra lateral \"> ... enlaces de la barra lateral ... </ div>

Su hoja de estilos de impresión podría tener este aspecto:

# Cabecera div, div # {barra lateral
display: none
IR
}

div # content {
font-size: 12pt
IR
width: auto
IR
}

Tecnología

Tutorial HTML para imprimir

Creación de páginas Semántica

Uso de los medios = \ "Print \"

La hoja de estilos Secundaria

También podría gustarte