Si las etiquetas para el formato de contenido que vienen por defecto en Wimba Create se te quedan cortas, o simplemente necesitas aplicar un formato determinado a un párrafo en concreto puedes crear un nuevo estilo de una manera relativamente sencilla. Tendremos que modificar la hoja de estilo del esquema que estemos utilizando y posteriormente, usar el estilo de Wimba cgHTMLInclude.
Si les etiquetes per al format de contingut que vénen per defecte en Wimba Create se’t queden curtes, o simplement necessites aplicar un format determinat a un paràgraf en concret pots crear un nou estil d’una manera relativament senzilla. Haurem de modificar la fulla d’estil de l’esquema que estiguem utilitzant i posteriorment, usar l’estil de Wimba cgHTMLInclude.
El directorio por defecto donde se encuentran los esquemas de diseño en español es:
C:\Archivos de programa\WimbaCreate\resources\es.lproj\schemes\
Al abrir la carpeta de cualquier esquema podremos ver la estructura mostrada en la siguiente imagen:
El archivo que debemos editar, “cg.css”, es la hoja de estilo que reconoceremos por la extensión CSS. Podemos abrirlo con un editor HTML o incluso, con el bloc de notas. Si queremos añadir cualquier imagen en nuestro estilo, es conveniente guardarla en la carpeta “buttons“, para hacer referencias relativas al archivo.
Para aplicar un formato diferente a un párrafo de un documento HTML se utiliza, por lo general, la etiqueta DIV. Así pues, en el documento CSS podremos buscar alguno de los estilos que utilizan esta etiqueta para fijarnos en la estructura y crear el nuestro.
Como vemos en la imagen, tenemos que escribir la estructura “div.nombre_estilo” y, a continuación, escribir las propiedades que queramos modificar entre corchetes. Si modificamos varias propiedades, tendremos que poner un punto y coma al final de cada línea.
En este caso, el nombre del estilo que vamos a crear es “sangria_francesa_ejemplo“. Se puede poner cualquier otro nombre, aunque se recomienda elegir uno descriptivo, de manera que al leerlo, nos hagamos una idea de para qué sirve ese estilo.
div.sangria_francesa_ejemplo{ background-color: #D8E5EA; border-color:#707070; border-style:solid; border-width:1px 2px 2px 1px; padding-left: 7em; padding-right: 1em; background-image:url(buttons/libro_gr.png); background-repeat:no-repeat; background-position:8px 4px; line-height:200%; /*espaciado doble*/ margin-right:26em; /*para provocar que se muestre la sangria*/ }
En el estilo que hemos introducido, hemos modificado el color de fondo (background-color), aplicado un borde para remarcar el bloque de contenido (border-color, border-style, border-width), añadido una pequeña imagen a modo de icono (background-image, background-repeat, background-position), aumentado el espaciado entre líneas para que el texto esté a doble espacio (line-height) y modificado los márgenes convenientemente para ajustar el contenido a nuestro gusto (margin, padding).
En nuestro documento de Word, tendremos que hacer referencia al estilo que hemos creado de la siguiente manera.
<div class=”sangria_francesa_ejemplo”> <p> De Landsheere, G. (1985). Diccionario de la evaluación y de la investigación educativa. Vilassar de Mar, Barcelona: Oikos-Tau. </p> <p> Vaquero Rico, J. (2008). Navegación costera : problemas resueltos. (6ª ed.). Madrid: Pirámide. </p> </div>
Entre las etiquetas de párrafo <p> </p>, escribiremos el texto que queramos incluir y al que queremos aplicar el formato creado.
Cuando tengamos el contenido, debemos aplicar el estilo cgHTMLInclude de Wimba Create. De este modo, al generar el documento como HTML podremos visualizar el estilo que hemos definido.
El directori per defecte on es troben els esquemes de disseny en espanyol és:
C:\Archivos de programa\WimbaCreate\resources\es.lproj\schemes\
En obrir la carpeta de qualsevol esquema podrem veure l’estructura mostrada en la següent imatge:
L’arxiu que hem d’editar, “cg.css”, és la fulla d’estil que reconeixerem per l’extensió CSS. Podem obrir-ho amb un editor HTML o fins i tot, amb el bloc de notes. Si volem afegir qualsevol imatge en el nostre estil, és convenient guardar-la en la carpeta “buttons“, per a fer referències relatives a l’arxiu.
Per a aplicar un format diferent a un paràgraf d’un document HTML s’utilitza, en general, l’etiqueta DIV. Així doncs, en el document CSS podrem cercar algun dels estils que utilitzen aquesta etiqueta per a fixar-nos en l’estructura i crear el nostre.
Com veiem en la imatge, hem d’escriure l’estructura “div.nom_estil” i, a continuació, escriure les propietats que vulguem modificar entre claudàtors. Si modifiquem diverses propietats, haurem de posar un punt i coma al final de cada línia.
En aquest cas, el nom de l’estil que crearem és “sangria_francesa_exemple“. Es pot posar qualsevol altre nom, encara que es recomana triar un descriptiu, de manera que en llegir-ho, ens fem una idea de para què serveix aqueix estil.
div.sangria_francesa_ejemplo{ background-color: #D8E5EA; border-color:#707070; border-style:solid; border-width:1px 2px 2px 1px; padding-left: 7em; padding-right: 1em; background-image:url(buttons/libro_gr.png); background-repeat:no-repeat; background-position:8px 4px; line-height:200%; /*espaciado doble*/ margin-right:26em; /*para provocar que se muestre la sangria*/ }
En l’estil que hem introduït, hem modificat el color de fons (background-color), aplicat un cantell per a remarcar el bloc de contingut (border-color, border-style, border-width), afegit una petita imatge a manera d’icona (background-image, background-repeat, background-position), augmentat l’espaiat entre línies perquè el text estiga a doble espai (line-height) i modificat els marges convenientment per a ajustar el contingut al nostre gust (margin, padding).
En el nostre document de Word, haurem de fer referència a l’estil que hem creat de la següent manera.
<div class=”sangria_francesa_ejemplo”> <p> De Landsheere, G. (1985). Diccionario de la evaluación y de la investigación educativa. Vilassar de Mar, Barcelona: Oikos-Tau. </p> <p> Vaquero Rico, J. (2008). Navegación costera : problemas resueltos. (6ª ed.). Madrid: Pirámide. </p> </div>
Entre les etiquetes de paràgraf <p> </p>, escriurem el text que vulguem incloure i al que volem aplicar el format creat.
Quan tinguem el contingut, hem d’aplicar l’estil cgHTMLInclude de Wimba Create. D’aquesta manera, en generar el document com HTML podrem visualitzar l’estil que hem definit.