PDF de programación - Los estilos en eXe - Hojas de estilo

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Los estilos en eXe

Hojas de estilo

Generación de recursos educativos digitales en formato estándar con eXe

Learning.

Hojas de estilo

Curso destinado a la f ormación de autores de recursos didácticos digitales

Elaborado por Salvador Aznar (jsaznar (arroba) gmail.com),

partiendo de materiales elaborados por José Antonio Dí az-Alejo Gómez,

para la Conselleria de Educación de la Comunidad Valenciana

1 de 20

02/11/10 08:49

06HojasDeEstilo



file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

2 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Objetivos y conocimientos previos

Objetivos

Aprender a cambiar la apariencia de los recursos generados con eXe Learning
mediante las hojas de estilo.
Conocer el modo de crear un nuev o estilo

Conocimientos previos



Competencia digital
descompresión de archiv os...
Fundamentos de eXe Learning: Abrir y cerrar la aplicación, abrir archiv os.

nav egación por directorios de archiv os,

básica:

3 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Las hojas de estilo de eXe

Si has utilizado eXe, seguro que has probado a aplicar dif erentes estilos desde el menú Estilos (y
si no lo has hecho, ¡pruébalo ahora!). Por def ecto, eXe v iene con una serie de estilos que
cambian la apariencia de los nuestros materiales. Pero claro, si queremos dar un toque
"personal", quizás no nos gusten del todo estos estilos predef inidos.

En esta sección aprenderemos a cambiar la apariencia global de nuestros recursos didácticos.
Y eso es posible gracias a las hojas de estilo, o CSS. CSS es un lenguaje f ormal utilizado para
definir la presentación de un documento escrito en HTML (como es el caso de los
documentos de eXe). La idea es separar la estructura del documento de su presentación. O, en
nuestro caso, seremos capaces de cambiar la apariencia de nuestros materiales con tan sólo
cambiar un f ichero.

No obstante, la mejor f orma de comprender cómo f unciona es probándolo. Así que v ayamos al
grano.

Actividad: primera modificación

Inicia eXe y abre algún documento. Abre el tutorial paso a paso pulsando sobre el icono
siguiente, sigue sus pasos (los pasos con Linux son equiv alentes, únicamente cambia que en
Linux no existe el WordPad, pero nos sirv e cualquier editor de texto plano) :



Si algo no ha f uncionado, no te preocupes. Borra el directorio donde se ha creado la página web
y comienza de nuev o. Tan sólo hay que tener cuidado con copiar exactemente "Times New
Roman" en el sitio adecuado.

De cualquier modo, ahora ya has v isto cómo es un archiv o CSS.

4 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

eXe dispone de tres hojas de estilos distintas:

base.css: f ormato que se utiliza en todos los estilos predef inidos de eXe (Garden,
Kahurangi...).
content.css: def inición de cada uno de los estilos predef inidos.
nav.css: Estilo utilizado para mostrar los elementos de nav egación (índice y botones
de anterior y siguiente). Sólo se puede v er cuando exportamos como página web.

Así pues, Los dos primeros archiv os realizan cambios en el contenido, y el último sólo en los
elementos de nav egación.

Actividad: cambiar nav.css

Vamos a comprobar dónde se realizan los cambios en nav .css. De f orma completamente
análoga a la activ idad del ejercicio anterior, edita con WordPad (o cualquier editor de texto plano
del que dispongas) el archiv o nav .css. En la línea nº 9, cambia

f ont-size: small;

por

f ont-size: big;

Abre ahora index.html con el nav egador, y observ a cómo el indice de la parte izquierda ha
cambiado el tamaño de la letra. Esto es lo que se modif ica desde nav .css.

Para continuar, v a a ser necesario aprender un poco de CSS y conocer los apartados de las
hojas de estilo de eXe. Así, sabremos dónde tenemos que realizar las modif icaciones, y cómo
hacerlas.

Pero no te preocupes demasiado. Nuestro objetiv o en estos momentos no es meternos de lleno
en el bosque del CSS, sino tan sólo mostrar el camino de entrada.

5 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Resumen CSS

CSS es un acrónimo de Cascading Style Sheets, hojas de estilo en cascada. Por eso, cuando
hablamos del estilo de una página web, o de los estilos de eXe, en realidad nos estamos
ref iriendo a un archiv o CSS. Es en este tipo de archiv os donde reside todo el "aspecto" que
tendrá nuestro proyecto.

En este apartado v amos a v er todas (o casi todas) las propiedades que se pueden alterar por
medio de las hojas de estilo. No se trata, por supuesto, de aprenderlos, tan sólo de tener una
ref erencia. Así, si queremos cambiar el tamaño de la letra, tan sólo tendremos que buscar cuál
es la sintaxis que debemos utilizar (obv iamente, estará en el apartado f uentes).

Hay que indicar que algunos de ellos no los soporta Internet Explorer y en cambio otros no los
entiende el Firef ox. Así que es recomendable probarlos en ambos exploradores antes de
incorporarlos a nuestras páginas.

6 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Fuentes



Ahora v amos a examinar las propiedades del tipo de letra que el usuario v a a v er.

Son las siguientes:

Propiedad

Descripción

Posibles valores

font-family

Tipo de letra (que puede
ser genérico) que
v amos a usar.

font-size

Tamaño del tipo de letra.

font-weight Grosor del tipo de letra

(negrita).

font-style

Estilo del tipo de letra
(cursiv a).

lista de tipos, ya sean genéricos o no, separados
por comas.

xx-small, x-small, small, medium,
large, x-large, xx-large, tamaño relativ o
o tamaño absoluto. Por def ecto medium.
normal, bold, bolder, lighter o
100-900 (donde 900 es la negrita más gruesa). Por
def ecto normal.
normal, italic, italic small-caps,
oblique, oblique small-caps o
small-caps. Por def ecto normal.

Cabe recordar que los tipos genéricos son serif, sans-serif, cursive, fantasy y
monospace. Cada uno de estos tipos serán equiv alentes a alguno que pueda tener
instalado el ordenador del usuario. Así, por ejemplo, en un PC con Windows instalado serif
puede equiv aler a Times New Roman y monospace a Courier.

7 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Textos

Nuesto siguiente objetiv o v an a ser las propiedades de f ormato del texto que cualquier
procesador de textos nos permite cambiar.

Propiedad
line-height

Interlineado.

Descripción

Posibles valores

text-decoration Ef ectos v ariados

sobre el texto.

vertical-align

Posición v ertical del
texto.

text-transform

text-align

text-indent

Transf orma el texto
a mayúsculas o
minúsculas.

Justif icación del
texto.

Tabulación con que
aparece la primera
línea del texto.

número o porcentaje.
none, underline (subrayado),
overline (como subrayado, pero por
encima), line-through (tachado) o blink
(parpadeante); por def ecto ninguno.
baseline (normal), sub (subíndice),
supertop, text-top, middle,
bottom, text-bottom (superíndice), o un
porcentaje. Por def ecto baseline
capitalize (pone la primera letra en
mayúsculas), uppercase (conv ierte todo a
mayúsculas), lowecase (a minúsculas) o
none, por def ecto no hace nada.

left, right, center o justify

tamaño o porcentaje, por def ecto cero.

8 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Fondos



También es posible cambiar los colores y el gráf ico de f ondo de un elemento.

Descripción

Propiedad
color
background-image Modif ica tanto el gráf ico
como el color de f ondo.

Color del texto.

Posibles valores

un color (en el f ormato habitual).

dirección del f ichero que contiene
la imagen o un color.

background-color

modif ica el color de f ondo.

un color (en el f ormato habitual).

Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente modo:

background-image: url(fondobonito.gif);

9 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Imágenes y CSS

Si lo que queremos es que todas las imagenes de nuestra página presenten el mismo estilo
podemos utilizar las siguientes def iniciones para darle un estilo:

img {

}

float:left; // alineación flotante del texto (left, right).
padding:2em; // establece un espace alrededor de la imagen.

padding-left:0em; // espacio a la izquierda.
padding-right:2em; // espacio a la derecha.
padding-top:4em; // espacio encima.
padding-bottom:1em; // espacio abajo.

border-width:2em; // anchura del borde.
border-color:black; // color del borde.

Las propiedades padding y border con respecto a la etiqueta img solo f uncionan en f iref ox. En
internet explorer a partir de la v ersión 7.0

10 de 20

02/11/10 08:49

06HojasDeEstilo

file:///media/disk/eXe/PaginasUnicaParaPDF/Unidad0...

Tablas y CSS



El borde de la tabla lo estableceremos desde CSS:

table {

border-width:1px; /* anchura del borde. */
border-style:solid; /* tipo,(solid, dotted, dashed,double).*/
border-color:red; /* color del borde.*/
}

Con CSS podemos def inir los bordes con gran libertad y precisión, incluso podemos hacerlo a
niv el de cada celda.

Podemos incluso def inir un borde distinto para cada lado de las celdas, un color distinto y un
grosor distinto:

table {
border-top-style:solid; /* tipo,(solid, dotted, dashed,double).*/
border-bottom-style:double;
border-left-st