eXe Learning y la hoja de estilo para la impresora
Junio 2nd, 2008 por ramon.ovelar
Los materiales didácticos deben favorecer la autonomía del estudiante. Por esta razón es recomendable establecer una presentación específica para el papel que permita imprimir el contenido, descartando los elementos innecesarios, los menús de navegación por ejemplo, y estableciendo márgenes adecuados. Podemos hacer esto con las hojas de estilo CSS.
Si probamos la vista preliminar de impresión de un proyecto realizado con eXe Learning exportado como Sitio Web veremos que este trabajo se ha quedado a medias. El menú lateral no se imprime pero el bloque del contenido no ocupa su lugar. Resultado, nuestras páginas tienen un margen de aproximadamemte la mitad de la anchura de la página. Un pequeño ajuste nos permitirá corregir este pequeño problema.
Cuando exportamos un proyecto como Sitio Web se generan tres archivos .css que contienen las especificaciones de la hoja de estilo. Como podemos ver en el fragmento de código mostrado a continuación las páginas HTML de un proyecto realizado con eXe tienen tres hojas de estilo asociadas. Los navegadores leerán estos tres archivos secuencialmente.
@import url(base.css);
@import url(content.css);
@import url(nav.css);
Si abrimos con un editor de texto el archivo base.css veremos que hay unas propiedades específicas para la impresión. En concreto, las líneas resaltadas tienen como objetivo ocultar el menú y eliminar el margen previsto en las presentación de pantalla para el bloque de contenido.
@media print {
.feedback { display: block; }
.feedbackbutton { display: none; }
#navcontainer { display: none; }
#main {margin-left: 10px; }
div.node { page-break-after: always; }
}
El problema es que la orden para crear el margen izquierdo del bloque del contenido se encuentra en el archivo nav.css, detrás de la orden para la impresión de pantalla del archivo base.css. Los navegadores leen las especificaciones secuencialmente y en caso de conflicto se quedan con la última. ¿Cómo solucionarlo? Debemos pegar las líneas preparadas para la impresión al final del archivo nav.css.
Además, podemos aprovechar para realizar algunos ajustes más. Por ejemplo, podemos ocultar los enlaces de la parte inferior que nos permiten movernos a la página anterior o posterior. Tampoco nos servirán de nada en el papel.
@media print {
.feedback { display: block; }
.feedbackbutton { display: none; }
#navcontainer { display: none; }
#main {margin-left: 10px; }
.noprt { display: none; }
div.node { page-break-after: always; }
}
También, si hemos colocado una imagen en la cabecera como título del proyecto no se mostrará en la impresión. De esta manera, podemos optar por ocultar el bloque header para no desaprovechar este espacio en la parte superior.
Guardado en Herramientas de autor | No hay comentarios »















