![\"Logo](\"https:\/\/blogs.ua.es\/observatoriotic\/files\/2009\/10\/exe-300x200.jpg\")
eXe Learning nos ofrece la opci\u00f3n de a\u00f1adir un logotipo o imagen, que sirva de cabecera de nuestros materiales, desde la propia aplicaci\u00f3n. A su vez, permite a\u00f1adir un texto a la cabecera para indicar el t\u00edtulo de los materiales. Estas opciones que, en principio, son muy c\u00f3modas, pueden darnos m\u00e1s de un quebradero de cabeza debido a la alineaci\u00f3n de los objetos en la pantalla y al tama\u00f1o de la imagen que introduzcamos.<\/p>\n
Para solucionar estos problemas, modificaremos el estilo de dise\u00f1o seleccionado.<\/p>\n
eXe Learning ens ofereix l’opci\u00f3 d’afegir un logotip o imatge, que servisca de cap\u00e7alera dels nostres materials, des de la pr\u00f2pia aplicaci\u00f3. Al seu torn, permet afegir un text a la cap\u00e7alera per a indicar el t\u00edtol dels materials. Aquestes opcions que, en principi, s\u00f3n molt c\u00f2modes, poden donar-nos m\u00e9s d’un mal de cap a causa de l’alineaci\u00f3 dels objectes en la pantalla i a la grand\u00e0ria de la imatge que introdu\u00efm.<\/p>\n
Per a solucionar aquests problemes, modificarem l’estil de disseny seleccionat.<\/p>\n
<\/p>\n
<\/a><\/p>\n cas val<\/a> foro<\/a><\/strong><\/p>\n Para crear una cabecera, com\u00fan a todas las p\u00e1ginas de contenidos, debemos acceder a la pesta\u00f1a “Propiedades<\/strong>“. En la secci\u00f3n “Paquete<\/strong>” encontraremos las propiedades “T\u00edtulo del proyecto<\/strong>” y “fondo del t\u00edtulo<\/strong>“, que nos permitir\u00e1n a\u00f1adir un texto y una imagen de fondo como cabecera de nuestros materiales.<\/p>\n <\/p>\n Hay que tener en cuenta que, para previsualizar la imagen en eXe, debemos pulsar el bot\u00f3n “Muestra Imagen<\/strong>“.<\/p>\n Por otro lado, la opci\u00f3n “Concretar fondo de la imagen<\/strong>” permite repetir la imagen insertada el n\u00famero de veces que sea necesario para cubrir el ancho de p\u00e1gina.<\/p>\n Al convertir nuestros materiales a formato de p\u00e1gina web, observaremos que el t\u00edtulo y la imagen que hemos a\u00f1adido, quedan superpuestos. Esto ocurre con cualquiera de los estilos que eXe trae por defecto. En la siguiente imagen se puede ver un ejemplo de este problema.<\/p>\n Ser\u00eda deseable que el logotipo quedara alineado, por ejemplo, a la derecha, mientras que el t\u00edtulo permanece en la izquierda. Para conseguir que cada elemento de la cabecera quede alineado a un lado, debemos modificar las propiedades de la hoja de estilos CSS <\/strong>que estemos utilizando.<\/p>\n Por defecto, podemos encontrar los esquemas de dise\u00f1o de eXe en el directorio “C:\\Archivos de programa\\exe\\style\\<\/strong>“. Cada esquema tiene su propia carpeta con los ficheros CSS y los iconos del estilo.<\/p>\n Las propiedades asignadas para la cabecera se encuentran en el archivo “nav.css<\/strong>“.\u00a0 Si no disponemos de un editor de HTML en concreto, podemos abrir el archivo con el bloc de notas. En este caso, debemos buscar el bloque “#header<\/strong>“.<\/p>\n Aunque veamos una lista m\u00e1s o menos larga de propiedades, las que nos interesan para este ejemplo son las que nos permiten modificar la alineaci\u00f3n de los objetos en la p\u00e1gina. Para cambiar la alineaci\u00f3n del texto, debemos modificar la propiedad “text-align<\/strong>“, mientras que, para modificar la posici\u00f3n de la imagen, se utiliza “background-position<\/strong>“.<\/p>\n Los valores permitidos para “text-align” <\/strong>son:<\/p>\n <\/p>\n La propiedad “<\/strong>background-position<\/strong>” <\/strong>admite valores num\u00e9ricos y valores predefinidos. Los valores num\u00e9ricos pueden expresarse en porcentaje o en unidades de medida como por ejemplo, p\u00edxeles. Debemos tener cuidado, cuando asignemos valores con unidades de medida, ya que, dependiendo de la resoluci\u00f3n del monitor, se obtendr\u00e1n resultados diferentes. En este ejemplo, para hacerlo m\u00e1s sencillo, utilizaremos los valores predefinidos:<\/p>\n Estos valores pueden ir, opcionalmente, acompa\u00f1ados de otros valores para especificar la alineaci\u00f3n vertical de la imagen:<\/p>\n <\/p>\n Una vez que sabemos las propiedades que debemos modificar y los valores que podemos asignar, debemos decidir hacia qu\u00e9 lado alineamos la imagen o el t\u00edtulo. En nuestro ejemplo, se ha alineado la imagen a la derecha y arriba <\/strong>y, se ha mantenido la alineaci\u00f3n del t\u00edtulo a la izquierda<\/strong>.<\/p>\n Podemos probar diferentes posibilidades para elegir la que m\u00e1s nos guste.<\/p>\n Finalmente, la cabecera del estilo queda as\u00ed:<\/p>\n <\/p>\n Pero… \u00bfqu\u00e9 pasa si insertamos una imagen diferente? Debemos tener cuidado con las dimensiones de la imagen. La cabecera tiene unas dimensiones de altura fijas de manera que, si la imagen supera estas dimensiones, se mostrar\u00e1 recortada cuando generemos el HTML. Para resolver este peque\u00f1o inconveniente tenemos dos opciones:<\/p>\n <\/p>\n <\/p>\n <\/a><\/p>\n cas <\/a>val foro<\/a><\/strong><\/p>\n Per a crear una cap\u00e7alera, comuna a totes les p\u00e0gines de continguts, hem d’accedir a la pestanya “Propietats<\/strong>“. En la secci\u00f3 “Paquet<\/strong>” trobarem les propietats “T\u00edtol del projecte<\/strong>” i “fons del t\u00edtol<\/strong>“, que ens permetran afegir un text i una imatge de fons com a cap\u00e7alera dels nostres materials.<\/p>\n![\"Introducci\u00f3n](\"https:\/\/blogs.ua.es\/observatoriotic\/files\/2011\/06\/datos_cabecera.png\")
<\/a><\/p>\n![\"problema](\"https:\/\/blogs.ua.es\/observatoriotic\/files\/2011\/06\/problema.png\")
<\/a><\/p>\n\n\/* HEADER *\/\r\n\r\n#header {<\/span>\r\n text-align<\/span>:<\/span> left<\/span>;<\/span>\u00a0<\/strong>\r\n color<\/span>:<\/span> #5E5E5E<\/span>;<\/span>\r\n background-color<\/span>:<\/span> transparent<\/span>;<\/span>\r\n background-position<\/span>:<\/span>right top<\/span>;<\/span><\/strong>\r\n margin-top<\/span>:<\/span> 10px<\/span>;<\/span>\r\n margin-right<\/span>:<\/span> 10px<\/span>;<\/span>\r\n height<\/span>:<\/span> 50px<\/span>;<\/span>\r\n font-size<\/span>:<\/span> 2.2em<\/span>;<\/span>\r\n font-weight<\/span>:<\/span> bold<\/span>;<\/span>\r\n padding-left<\/span>:<\/span> 2px<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\n\n
\n
\n
\ntext-align<\/span>:<\/span> left<\/span>; <\/strong>\r\nbackground-position<\/span>:<\/span>right top<\/span>;<\/span><\/strong><\/pre>\n<\/div>\n![\"Estilo](\"https:\/\/blogs.ua.es\/observatoriotic\/files\/2011\/06\/resultado.png\")
<\/a><\/p>\n\n
\n<\/span><\/li>\n<\/ol>\n\nheight<\/span>:<\/span> 50px<\/span>;<\/span><\/pre>\n<\/div>\nEnlaces<\/h3>\n
\n
\n